feat(stream-chat-angular): Polls for Angular (#343)

### 🎯 Goal

Changes affect Angular SDK only. Some extra CSS was needed for Angular,
mainly because modal handling is different in React and Angular. Also,
some reformat changes.

### 🛠 Implementation details

_Provide a description of the implementation_

### 🎨 UI Changes

_Add relevant screenshots_

Make sure to test with both Angular and React (with both `MessageList`
and `VirtualizedMessageList` components) SDKs

Author: szuperaz

src/v2/styles/Dialog/Dialog-layout.scss

@@ -18,7 +18,6 @@
     .str-chat__dialog__title {
       margin-bottom: 1rem;
     }
-
   }
 
   .str-chat__dialog__controls {
@@ -33,8 +32,18 @@
   }
 }
 
+.str-chat-angular__dialog-body {
+  &.str-chat__dialog__body {
+    padding: 0;
+  }
+
+  .str-chat__dialog__controls {
+    padding-bottom: 0;
+  }
+}
+
 .str-chat__prompt-dialog {
-  input[type=text] {
+  input[type='text'] {
     width: 100%;
     padding: 0.625rem 1rem;
   }
@@ -58,4 +67,4 @@
       padding-inline: 0.675rem;
     }
   }
-}
+}

src/v2/styles/Icon/Icon-layout.scss

@@ -30,6 +30,12 @@
   content: url('data:image/svg+xml;base64,PHN2ZwogIGNsYXNzPSJyZnUtZmlsZS1hdWRpbyIKICBmaWxsPSJub25lIgogIHZpZXdCb3g9IjAgMCAzNCA0MCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgaGVpZ2h0PSIyMCIKICB3aWR0aD0iMjAiCj4KICA8cGF0aAogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTE3LjcxNjggMzMuMTcyQzE4LjIzNDggMzMuMTcyIDE4LjQyMzggMzMuNjU1IDE4LjQyMzggMzQuMThDMTguNDIzOCAzNC42NDIgMTguMjk3OCAzNS4xOTUgMTcuNzE2OCAzNS4xOTVDMTcuMTcwOCAzNS4xOTUgMTYuOTg4OCAzNC42NDIgMTYuOTg4OCAzNC4xNDVDMTYuOTg4OCAzMy42ODMgMTcuMTcwOCAzMy4xNzIgMTcuNzE2OCAzMy4xNzJaTTE5LjU3MTggMzEuMDAySDE4LjM4MThWMzIuNzU4OUgxOC4zNjc4QzE4LjEyMjggMzIuNDMgMTcuNzc5OCAzMi4yNjIgMTcuMzMxOCAzMi4yNjJDMTYuMzAyOCAzMi4yNjIgMTUuNzk4OCAzMy4xNTggMTUuNzk4OCAzNC4xMDNDMTUuNzk4OCAzNS4xMjUgMTYuMjgxOCAzNi4xMDQ5IDE3LjQyMjggMzYuMTA0OUMxNy44NDI4IDM2LjEwNDkgMTguMTkyOCAzNS45MjMgMTguNDIzOCAzNS41OEgxOC40Mzc4VjM2SDE5LjU3MThWMzEuMDAyWk0xMi43MDk1IDM0LjE4NzJDMTIuNzA5NSAzMy43MjUyIDEyLjg3NzUgMzMuMTcyMiAxMy40MzA1IDMzLjE3MjJDMTMuOTgzNSAzMy4xNzIyIDE0LjE1ODUgMzMuNzI1MiAxNC4xNTg1IDM0LjE4NzJDMTQuMTU4NSAzNC42NDkyIDEzLjk4MzUgMzUuMTk1MiAxMy40MzA1IDM1LjE5NTJDMTIuODc3NSAzNS4xOTUyIDEyLjcwOTUgMzQuNjQ5MiAxMi43MDk1IDM0LjE4NzJaTTExLjUxOTUgMzQuMTg3MkMxMS41MTk1IDM1LjI3OTIgMTIuMzAzNSAzNi4xMDUyIDEzLjQzMDUgMzYuMTA1MkMxNC41NTc1IDM2LjEwNTIgMTUuMzQ4NSAzNS4yNzkyIDE1LjM0ODUgMzQuMTg3MkMxNS4zNDg1IDMzLjA5NTIgMTQuNTU3NSAzMi4yNjIyIDEzLjQzMDUgMzIuMjYyMkMxMi4zMDM1IDMyLjI2MjIgMTEuNTE5NSAzMy4wOTUyIDExLjUxOTUgMzQuMTg3MlpNMjEuODM5IDMyLjM2NzFIMjIuNTc0VjMzLjEzNzFIMjEuODM5VjM0Ljc4OTFDMjEuODM5IDM1LjA3NjEgMjIuMDA3IDM1LjEzOTEgMjIuMjY2IDM1LjEzOTFDMjIuMzE0MiAzNS4xMzkxIDIyLjM2NCAzNS4xMzU3IDIyLjQxNDcgMzUuMTMyM0MyMi40NjcyIDM1LjEyODcgMjIuNTIwNiAzNS4xMjUxIDIyLjU3NCAzNS4xMjUxVjM2LjAwMDFDMjIuNDgxIDM2LjAwMzEgMjIuMzg4IDM2LjAwOTkgMjIuMjk1IDM2LjAxNjhDMjIuMTcxIDM2LjAyNTkgMjIuMDQ3IDM2LjAzNTEgMjEuOTIzIDM2LjAzNTFDMjAuOTA4IDM2LjAzNTEgMjAuNjQ5IDM1Ljc0MTEgMjAuNjQ5IDM0Ljc1NDFWMzMuMTM3MUgyMC4wNDdWMzIuMzY3MUgyMC42NDlWMzEuMjY4MUgyMS44MzlWMzIuMzY3MVoiCiAgICBmaWxsPSJ3aGl0ZSIKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBkPSJNMCAyOEgzNFYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjI4WiIKICAgIGZpbGw9IiMyNzI3QjAiCiAgPjwvcGF0aD4KICA8cGF0aCBkPSJNMCAzQzAgMS4zNDMxNSAxLjM0MzE1IDAgMyAwSDIzTDM0IDExVjI4SDBWM1oiIGZpbGw9IiNGNUY1RjUiPjwvcGF0aD4KICA8cGF0aAogICAgZD0iTTM0IDExTDI2IDExQzI0LjM0MzEgMTEgMjMgOS42NTY4NSAyMyA4VjBMMzQgMTFaIgogICAgZmlsbD0iI0RCREJEQiIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOC44NzkxMiAyMS45NDFIMTIuMjk4TDE2Ljk1MjEgMjQuNzQ5M0MxNy4wMzA3IDI0LjgxMzggMTcuMTI5MyAyNC44NDkgMTcuMjMxMSAyNC44NDlDMTcuNDczOCAyNC44NDg4IDE3LjY3MDUgMjQuNjUxOSAxNy42NzAzIDI0LjQwOTJWMTIuNDM5OUMxNy42NzA0IDEyLjMzODEgMTcuNjM1MiAxMi4yMzk2IDE3LjU3MDcgMTIuMTYwOUMxNy40MTY4IDExLjk3MzIgMTcuMTM5OCAxMS45NDU3IDE2Ljk1MjEgMTIuMDk5NkwxMi4yOTggMTQuOTA4SDguODc5MTJDOC4zOTM2IDE0LjkwOCA4IDE1LjMwMTYgOCAxNS43ODcxVjIxLjA2MTlDOCAyMS41NDc0IDguMzkzNiAyMS45NDEgOC44NzkxMiAyMS45NDFaTTEyLjkyNTggMTYuNjY2NEwxNS45MTIyIDE1LjIyMjRWMjEuNjI2OEwxMi45MjU4IDIwLjE4MjlIOS43NTgzVjE2LjY2NjRIMTIuOTI1OFpNMTkuODUxMSAxNi4zNTE3QzE5LjQ3NCAxNi40MDkyIDE5LjIzOTcgMTYuNjYzNyAxOS4zMjgzIDE2LjkxOTFMMTkuMzI2MiAxNi45MkMxOS41Mjk1IDE3LjQ5OTUgMTkuNjMwNSAxOC4wOTggMTkuNjI4NCAxOC42OTUzQzE5LjYzMDUgMTkuMjk3NSAxOS41MjM3IDE5LjkwMTQgMTkuMzE5NiAyMC40OTA5QzE5LjIyOSAyMC43NDYyIDE5LjQ2ODIgMjAuOTk5NiAxOS44NDc0IDIxLjA2QzE5LjkwMDggMjEuMDY4MyAxOS45NTQyIDIxLjA3MiAyMC4wMDc2IDIxLjA3MkMyMC4zMjU5IDIxLjA3MiAyMC42MTU2IDIwLjkyMzQgMjAuNjkyMiAyMC43MDU3QzIwLjkxOTQgMjAuMDQ1MSAyMS4wMzM3IDE5LjM3IDIxLjAzNzQgMTguNjk1M0MyMS4wMzQ5IDE4LjAyNTEgMjAuOTIxMSAxNy4zNTc1IDIwLjY5NTUgMTYuNzAzNUMyMC42MDUzIDE2LjQ0NzcgMjAuMjI5IDE2LjI5MDggMTkuODUxMSAxNi4zNTE3Wk0yMi4xNjA1IDE0LjYwMjhDMjIuNTI1MiAxNC41MTYzIDIyLjkyNTkgMTQuNjQ1NCAyMy4wNTUgMTQuODkzOEMyMy42ODkxIDE2LjExNTcgMjQgMTcuNDA0MiAyNCAxOC42OTIzQzI0LjAwMDQgMTkuOTg5NSAyMy42Nzk2IDIxLjI4MzkgMjMuMDUyMSAyMi41MTUzQzIyLjk1MDMgMjIuNzEyMyAyMi42NzYzIDIyLjgzNDQgMjIuMzgyOCAyMi44MzQ0QzIyLjMwNzEgMjIuODM0NCAyMi4yMzAxIDIyLjgyNjEgMjIuMTU0MyAyMi44MDkyQzIxLjc4NjMgMjIuNzI1MSAyMS41OTE0IDIyLjQ1MzYgMjEuNzE4NSAyMi4yMDc3QzIyLjI5ODggMjEuMDc2MSAyMi41OTIyIDE5Ljg4MzYgMjIuNTkzMSAxOC42OTE5QzIyLjU5MzEgMTcuNTA1NiAyMi4zMDU0IDE2LjMyMjIgMjEuNzI3NiAxNS4yMDI1QzIxLjYwMDEgMTQuOTU2MyAyMS43OTUgMTQuNjg2IDIyLjE2MDUgMTQuNjAyOFoiCiAgICBmaWxsPSIjMjcyN0IwIgogICAgZmlsbC1ydWxlPSJldmVub2RkIgogID48L3BhdGg+Cjwvc3ZnPg==');
 }
 
+.str-chat__icon--poll {
+  --str-chat-icon-width: var(--str-chat-icon-height);
+  -webkit-mask: var(--str-chat__poll-icon) no-repeat center / contain;
+  mask: var(--str-chat__poll-icon) no-repeat center / contain;
+}
+
 .str-chat__icon--action::before {
   content: '\e800';
 } /* '' */

src/v2/styles/Icon/Icon-theme.scss

@@ -11,3 +11,7 @@
 .str-chat__icon--error {
   --str-chat-icon-color: var(--str-chat__danger-color);
 }
+
+.str-chat__icon--poll {
+  background-color: var(--str-chat-icon-color);
+}

src/v2/styles/MessageInput/MessageInput-layout.scss

@@ -46,6 +46,14 @@
       }
     }
 
+    .str-chat-angular__create-poll {
+      --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 21);
+      @include utils.flex-row-center;
+      width: calc(var(--str-chat__spacing-px) * 45);
+      height: calc(var(--str-chat__spacing-px) * 45);
+      cursor: pointer;
+    }
+
     .str-chat__message-textarea-container {
       @include utils.flex-col-center;
       width: 100%;

src/v2/styles/MessageInput/MessageInput-theme.scss

@@ -178,7 +178,8 @@
 .str-chat__message-input {
   @include utils.component-layer-overrides('message-input');
 
-  .str-chat__file-input-container {
+  .str-chat__file-input-container,
+  .str-chat-angular__create-poll {
     --str-chat-icon-color: var(--str-chat__message-input-tools-color);
     @include utils.component-layer-overrides('message-input-tools');
 

src/v2/styles/Poll/Poll-layout.scss

@@ -45,7 +45,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-
   }
 }
 
@@ -66,8 +65,6 @@
   }
 }
 
-
-
 .str-chat__poll-option-list--full,
 .str-chat__modal__poll-results {
   .str-chat__amount-bar {
@@ -103,7 +100,6 @@
   }
 }
 
-
 .str-chat__poll-option-list--full {
   .str-chat__poll-option {
     display: flex;
@@ -151,19 +147,22 @@
   }
 }
 
-
 .str-chat__modal__poll-results {
   .str-chat__poll-option {
     display: flex;
     flex-direction: column;
   }
 }
 
-.str-chat-react__modal.str-chat__poll-action-modal, .str-chat__poll-actions .str-chat__modal {
+.str-chat-react__modal.str-chat__poll-action-modal,
+.str-chat__poll-actions:not(.str-chat-angular__poll-actions) .str-chat__modal {
   .str-chat__modal__close-button {
     display: none;
   }
+}
 
+.str-chat-react__modal.str-chat__poll-action-modal,
+.str-chat__poll-actions .str-chat__modal {
   .str-chat__modal__inner {
     $content-offset-inline: 1rem;
     padding: 0 0 0.5rem;
@@ -334,6 +333,7 @@
   align-items: flex-start;
 }
 
+.str-chat-angular__create-poll-modal .str-chat__modal,
 .str-chat__modal.str-chat__create-poll-modal {
   .str-chat__modal__close-button {
     display: none;
@@ -415,7 +415,7 @@
       }
 
       .str-chat__form__input-field {
-          width: 100%;
+        width: 100%;
 
         .str-chat__form__input-field__value {
           padding: 0;
@@ -465,3 +465,25 @@
     }
   }
 }
+
+.str-chat-angular__poll-actions {
+  .str-chat__modal__poll-option-list {
+    max-height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+
+    .str-chat__modal__poll-option-list__body {
+      max-height: 100%;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+
+      stream-poll-options-list {
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+    }
+  }
+}