stream-chat-angular 6.2.0 → 6.3.0-beta.2

package/src/assets/styles/scss/AttachmentList/AttachmentList-layout.scss

@@ -325,6 +325,56 @@
     }
   }
 
+  .str-chat__message-attachment-geolocation {
+    margin: var(--str-chat__attachment-margin);
+    min-width: 200px;
+
+    .str-chat__message-attachment-geolocation__placeholder {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: var(--str-chat__spacing-2);
+
+      .str-chat__message-geolocation__icon {
+        height: calc(var(--str-chat__spacing-px) *150);
+      }
+
+      .str-chat__message-attachment-geolocation__placeholder-link {
+        position: absolute;
+        inset-inline-end: 0.75rem;
+        inset-block: 0.75rem;
+        height: calc(var(--str-chat__spacing-px) * 20);
+        width: calc(var(--str-chat__spacing-px) * 20);
+      }
+    }
+
+    .str-chat__message-attachment-geolocation__status {
+      display: flex;
+      justify-content: center;
+      padding: 0.5rem 2rem;
+
+      .str-chat__message-attachment-geolocation__status--active {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.375rem;
+
+        .str-chat__message-attachment-geolocation__stop-sharing-button {
+          color: var(--str-chat__danger-color);
+        }
+
+        .str-chat__message-attachment-geolocation__status--active-status {
+          color: var(--str-chat__info-color);
+        }
+
+        .str-chat__message-attachment-geolocation__status--active-until {
+          text-transform: lowercase;
+        }
+      }
+    }
+  }
+
   .str-chat__message-attachment-audio-widget {
     .str-chat__message-attachment-audio-widget--play-controls {
       @include utils.flex-row-center();

package/src/assets/styles/scss/AttachmentList/AttachmentList-theme.scss

@@ -141,6 +141,35 @@
   /* Box shadow applied to file attachments */
   --str-chat__file-attachment-box-shadow: none;
 
+  /* The border radius used for the borders of file attachments */
+  --str-chat__geolocation-attachment-border-radius: calc(
+    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
+  );
+
+  /* The text/icon color of geolocation attachments */
+  --str-chat__geolocation-attachment-color: var(--str-chat__text-color);
+
+  /* The text/icon color of geolocation attachments for low emphasis texts (for example file size) */
+  --str-chat__geolocation-attachment-secondary-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color of geolocation attachments */
+  --str-chat__geolocation-attachment-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of geolocation attachments */
+  --str-chat__geolocation-attachment-border-block-start: none;
+
+  /* Bottom border of geolocation attachments */
+  --str-chat__geolocation-attachment-border-block-end: none;
+
+  /* Left (right in RTL layout) border of geolocation attachments */
+  --str-chat__geolocation-attachment-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of geolocation attachments */
+  --str-chat__geolocation-attachment-border-inline-end: none;
+
+  /* Box shadow applied to geolocation attachments */
+  --str-chat__geolocation-attachment-box-shadow: none;
+
   /* Border radius applied audio widget */
   --str-chat__audio-attachment-widget-border-radius: calc(
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
@@ -325,6 +354,33 @@
     @include utils.component-layer-overrides('file-attachment');
   }
 
+  .str-chat__message-attachment-geolocation {
+    @include utils.component-layer-overrides('geolocation-attachment');
+    overflow: hidden;
+
+    .str-chat__message-attachment-geolocation__placeholder {
+      .str-chat__message-attachment-geolocation__placeholder-link {
+        color: currentColor;
+      }
+    }
+
+    .str-chat__message-attachment-geolocation__status {
+      background-color: var(--str-chat__tertiary-surface-color);
+
+      .str-chat__message-attachment-geolocation__status--active {
+        .str-chat__message-attachment-geolocation__stop-sharing-button {
+          @include utils.button-reset;
+          font: var(--str-chat__subtitle-medium-text);
+          cursor: pointer;
+        }
+
+        .str-chat__message-attachment-geolocation__status--active-until {
+          font: var(--str-chat__caption-text);
+        }
+      }
+    }
+  }
+
   .str-chat__message-attachment-unsupported {
     .str-chat__message-attachment-unsupported__title {
       font: var(--str-chat__subtitle-medium-text);

package/src/assets/styles/scss/AttachmentPreviewList/AttachmentPreviewList-layout.scss

@@ -47,6 +47,7 @@
     }
   }
 
+  .str-chat__location-preview,
   .str-chat__attachment-preview-unsupported,
   .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
@@ -70,12 +71,14 @@
       justify-content: center;
 
       .str-chat__attachment-preview-title,
+      .str-chat__attachment-preview-subtitle,
       .str-chat__attachment-preview-file-name {
         @include utils.ellipsis-text;
         max-width: 100%;
       }
     }
 
+    .str-chat__location-preview-image,
     .str-chat__attachment-preview-file-icon {
       --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
       --str-chat-icon-width: auto;
@@ -114,7 +117,7 @@
     top: calc(var(--str-chat__spacing-px) * 2);
     inset-inline-end: calc(var(--str-chat__spacing-px) * 2);
     cursor: pointer;
-    z-index: 0;
+    z-index: 1;
 
     svg {
       width: calc(var(--str-chat__spacing-px) * 24);

package/src/assets/styles/scss/AttachmentPreviewList/AttachmentPreviewList-theme.scss

@@ -107,6 +107,7 @@
     }
   }
 
+  .str-chat__location-preview,
   .str-chat__attachment-preview-unsupported,
   .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
@@ -117,6 +118,10 @@
       font: var(--str-chat__subtitle-medium-text);
     }
 
+    .str-chat__attachment-preview-subtitle {
+      font: var(--str-chat__caption-text);
+    }
+
     .str-chat__attachment-preview-file-download {
       --str-chat-icon-color: var(--str-chat__attachment-preview-download-icon-color);
       text-decoration: none;
@@ -142,6 +147,12 @@
     }
   }
 
+  .str-chat__location-preview {
+    .str-chat__location-preview-image {
+      color: var(--str-chat__active-primary-color);
+    }
+  }
+
   .str-chat__attachment-preview-delete {
     --str-chat-icon-color: var(--str-chat__attachment-preview-close-icon-color);
 

package/src/assets/styles/scss/Autocomplete/Autocomplete-layout.scss

@@ -38,6 +38,16 @@
     padding: unset;
     margin: unset;
   }
+
+  .str-chat__suggestion-list--react {
+    overflow-y: unset;
+
+    .str-chat__suggestion-list-item {
+      > button {
+        width: 100%;
+      }
+    }
+  }
 }
 
 .str-chat__slash-command {
@@ -58,6 +68,8 @@
   .str-chat__user-item--name {
     @include utils.ellipsis-text;
     @include utils.prevent-glitch-text-overflow;
+    display: flex;
+    align-items: center;
     width: 100%;
   }
 }
@@ -69,6 +81,8 @@
 
   .str-chat__emoji-item--name {
     @include utils.ellipsis-text;
+    display: flex;
+    align-items: center;
     width: 100%;
   }
 }

package/src/assets/styles/scss/Autocomplete/Autocomplete-theme.scss

@@ -156,6 +156,8 @@
 
 .str-chat__slash-command {
   @include utils.component-layer-overrides('slash-command');
+  text-align: left;
+  font: var(--str-chat__subtitle-text);
 
   .str-chat__slash-command-header {
     .str-chat__slash-command-name {
@@ -206,4 +208,13 @@
       background-color: var(--str-chat__suggestion-list-item--selected-background-color);
     }
   }
+
+  .str-chat__suggestion-list--react {
+    .str-chat__suggestion-list-item {
+      > button {
+        @include utils.button-reset;
+        text-decoration: none;
+      }
+    }
+  }
 }

package/src/assets/styles/scss/Dialog/Dialog-layout.scss

@@ -2,7 +2,6 @@
 
 .str-chat__dialog-overlay {
   inset: 0;
-  overflow: hidden;
   position: absolute;
   height: var(--str-chat__dialog-overlay-height);
   width: 100%;
@@ -19,14 +18,13 @@
     .str-chat__dialog__title {
       margin-bottom: 1rem;
     }
-
   }
 
   .str-chat__dialog__controls {
     display: flex;
     justify-content: flex-end;
     gap: 1.25rem;
-    padding: 1.25rem;
+    padding: 2.25rem 1.25rem;
 
     .str-chat__dialog__controls-button {
       @include utils.button-reset;
@@ -34,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;
   }
@@ -59,4 +67,4 @@
       padding-inline: 0.675rem;
     }
   }
-}
+}

package/src/assets/styles/scss/DropzoneContainer/DropzoneContainer-layout.scss

@@ -0,0 +1,14 @@
+@use '../utils';
+
+.str-chat__dropzone-container {
+  @include utils.flex-row-center;
+
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 5;
+
+  p {
+    margin: unset;
+  }
+}

package/src/assets/styles/scss/DropzoneContainer/DropzoneContainer-theme.scss

@@ -0,0 +1,17 @@
+.str-chat {
+  /* The text/icon color of the dropzone container */
+  --str-chat__dropzone-container-color: var(--str-chat__on-primary-color);
+
+  /* The background color of the dropzone container */
+  --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color);
+
+  /* The backdrop filter applied to the dropzone container */
+  --str-chat__dropzone-container-backdrop-filter: blur(3px);
+}
+
+.str-chat__dropzone-container {
+  background-color: var(--str-chat__dropzone-container-background-color);
+  color: var(--str-chat__dropzone-container-color);
+  backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
+  font: var(--str-chat__subtitle-text);
+}

package/src/assets/styles/scss/Form/Form-layout.scss

@@ -6,4 +6,44 @@
   .str-chat__form-field-error {
     margin-left: 0.5rem;
   }
+}
+
+.str-chat__form__switch-field {
+  width: 100%;
+  padding: 1rem;
+
+  input[type='checkbox'] {
+    display: none;
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .str-chat__form__switch-field__switch {
+    display: flex;
+    align-items: center;
+    width: calc(var(--str-chat__spacing-px) * 52);
+    height: calc(var(--str-chat__spacing-px) * 32);
+    padding: 0.25rem;
+
+    .str-chat__form__switch-field__switch-handle {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+
+    &.str-chat__form__switch-field__switch--on {
+      justify-content: flex-end;
+    }
+  }
+}
+
+.str-chat__dropdown {
+  .str-chat__dropdown__open-button {
+    width: 100%;
+    text-align: start;
+  }
 }

package/src/assets/styles/scss/Form/Form-theme.scss

@@ -1,17 +1,82 @@
+@use '../utils';
+
+.str-chat {
+  // hide spin buttons form input of type number
+  /* Chrome, Safari, Edge, Opera */
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+}
+
 .str-chat__form-field-error {
   font-size: 0.75rem;
-  color: var(--str-chat__danger-color)
+  color: var(--str-chat__danger-color);
+}
+
+// fixme: duplicate mixin in poll theme
+@mixin field-background {
+  background-color: var(--str-chat__tertiary-surface-color);
+  border-radius: 0.75rem;
+}
+
+
+
+.str-chat__form__switch-field {
+  @include field-background;
+
+  &, label {
+    cursor: pointer;
+  }
+
+  label {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .str-chat__form__switch-field__switch {
+    cursor: pointer;
+    background-color: var(--str-chat__text-low-emphasis-color);
+    border-radius: 100px;
+
+    .str-chat__form__switch-field__switch-handle {
+      border-radius: var(--str-chat__border-radius-circle);
+      background-color: var(--str-chat__disabled-color);
+    }
+
+    &.str-chat__form__switch-field__switch--on {
+      background-color: var(--str-chat__green600);
+
+      .str-chat__form__switch-field__switch-handle {
+        background-color: var(--str-chat__background-color);
+        border-radius: var(--str-chat__border-radius-circle);
+      }
+    }
+  }
 }
 
-// hide spin buttons form input of type number
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+.str-chat__form__switch-field--disabled {
+  .str-chat__form__switch-field--disabled,
+  .str-chat__form__switch-field--disabled .str-chat__form__switch-field__switch,
+  label {
+    cursor: not-allowed;
+  }
 }
 
-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield;
+.str-chat__dropdown {
+  .str-chat__dropdown__open-button {
+    @include utils.button-reset;
+    cursor: pointer;
+  }
+
+  .str-chat__dropdown__items {
+    background-color: var(--str-chat__background-color);
+  }
 }

package/src/assets/styles/scss/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';
 } /* '' */

package/src/assets/styles/scss/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);
+}

package/src/assets/styles/scss/LinkPreview/LinkPreview-layout.scss

@@ -46,4 +46,22 @@
     @include utils.button-reset;
     cursor: pointer;
   }
+}
+
+.str-chat__link-preview-card--loading {
+  .str-chat__link-preview-card__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    .str-chat__link-preview-card__content-title {
+      height: calc(var(--str-chat__spacing-px) * 16);
+      width: 100%
+    }
+
+    .str-chat__link-preview-card__content-description {
+      height: calc(var(--str-chat__spacing-px) * 12);
+      width: 100%;
+    }
+  }
 }

package/src/assets/styles/scss/LinkPreview/LinkPreview-theme.scss

@@ -1,3 +1,9 @@
+@use '../utils';
+
+.str-chat {
+  --str-chat__link-preview-loading-state-color: var(--str-chat__disabled-color);
+}
+
 .str-chat__link-preview-card {
   .str-chat__link-preview-card__content {
     border-left: 2px solid var(--str-chat__primary-color);
@@ -14,4 +20,13 @@
   .str-chat__link-preview-card__dismiss-button svg path {
     fill: var(--str-chat__text-low-emphasis-color);
   }
+}
+
+.str-chat__link-preview-card--loading {
+  .str-chat__link-preview-card__content-title,
+  .str-chat__link-preview-card__content-description {
+    @include utils.loading-item-background('link-preview');
+    @include utils.loading-animation;
+    border-radius: calc(var(--str-chat__spacing-px) * 3);
+  }
 }

package/src/assets/styles/scss/Location/Location-layout.scss

@@ -0,0 +1,52 @@
+.str-chat__modal.str-chat__share-location-modal {
+  .str-chat__modal__close-button {
+    display: none;
+  }
+
+  .str-chat__share-location-dialog {
+    .str-chat__modal-header {
+      padding-top: 0;
+    }
+
+    .str-chat__dialog__body {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      padding-block: 0;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      user-select: none;
+
+      .str-chat__live-location-activation {
+        padding: 0.5rem;
+
+        .str-chat__form__switch-field {
+          padding: 0.5rem;
+        }
+
+        .str-chat__dropdown__open-button {
+          padding: 0.5rem;
+        }
+
+        .str-chat__dialog-contents {
+          .str-chat__dropdown__items {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            padding-block: 0.25rem;
+
+            .str-chat__live-location-sharing-duration-option {
+              padding: 0.25rem 0.5rem;
+              width: 100%;
+              text-align: start;
+            }
+          }
+        }
+      }
+    }
+
+    .str-chat__dialog__controls {
+      padding: 1.25rem 1rem 0;
+    }
+  }
+}

package/src/assets/styles/scss/Location/Location-theme.scss

@@ -0,0 +1,32 @@
+@use '../utils';
+
+.str-chat__share-location-dialog {
+  .str-chat__live-location-activation {
+    border-radius: var(--str-chat__border-radius-sm);
+    border: 1px solid var(--str-chat__secondary-overlay-color);;
+
+    .str-chat__form__switch-field {
+      background-color: var(--str-chat__background-color);
+    }
+
+    .str-chat__dropdown__open-button {
+      border-radius: var(--str-chat__border-radius-xs);
+      border: 1px solid var(--str-chat__secondary-overlay-color);
+      background-color: var(--str-chat__tertiary-surface-color);
+    }
+
+    .str-chat__dropdown__items {
+      box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
+      border-radius: var(--str-chat__border-radius-xs);
+
+      .str-chat__live-location-sharing-duration-option {
+        @include utils.button-reset;
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--str-chat__message-options-hover-background-color);
+        }
+      }
+    }
+  }
+}