ngx-strata 0.6.1 → 0.7.0

package/fesm2022/ngx-strata.mjs

@@ -115,6 +115,14 @@ const baseIconConfigs = [
     {
         name: 'image',
         url: 'assets/icons/image.svg'
+    },
+    {
+        name: 'check-single',
+        url: 'assets/icons/check-single.svg'
+    },
+    {
+        name: 'check-double',
+        url: 'assets/icons/check-double.svg'
     }
 ];
 
@@ -1785,6 +1793,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     }, template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" }]
         }], propDecorators: { justification: [{ type: i0.Input, args: [{ isSignal: true, alias: "justification", required: false }] }] } });
 
+class StrataChatComponent {
+    spacing = input('comfortable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => `st-chat ${this.spacing()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataChatComponent, isStandalone: true, selector: "st-chat", inputs: { spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{--st-chat-bg: transparent;--st-chat-gap: var(--st-space-3);--st-chat-gap-compact: var(--st-space-1);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;background-color:var(--st-chat-bg);gap:var(--st-chat-gap)}:host>*{min-width:0;max-width:100%;box-sizing:border-box}:host.compact{gap:var(--st-chat-gap-compact);--st-chat-message-padding: var(--st-space-1) var(--st-space-2)}:host.comfortable{gap:var(--st-chat-gap)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-chat', imports: [], host: {
+                        '[class]': 'hostClasses()'
+                    }, template: "<ng-content />\n", styles: [":host{--st-chat-bg: transparent;--st-chat-gap: var(--st-space-3);--st-chat-gap-compact: var(--st-space-1);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;background-color:var(--st-chat-bg);gap:var(--st-chat-gap)}:host>*{min-width:0;max-width:100%;box-sizing:border-box}:host.compact{gap:var(--st-chat-gap-compact);--st-chat-message-padding: var(--st-space-1) var(--st-space-2)}:host.comfortable{gap:var(--st-chat-gap)}\n"] }]
+        }], propDecorators: { spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }] } });
+
+class StrataChatMessageComponent {
+    variant = input('incoming', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    timestamp = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timestamp" }] : /* istanbul ignore next */ []));
+    status = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    showAvatar = input(true, { ...(ngDevMode ? { debugName: "showAvatar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    position = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    groupVariant = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupVariant" }] : /* istanbul ignore next */ []));
+    groupPosition = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupPosition" }] : /* istanbul ignore next */ []));
+    groupShowAvatar = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupShowAvatar" }] : /* istanbul ignore next */ []));
+    groupPreserveAvatarSpace = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupPreserveAvatarSpace" }] : /* istanbul ignore next */ []));
+    effectiveVariant = computed(() => this.groupVariant() ?? this.variant(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveVariant" }] : /* istanbul ignore next */ []));
+    effectivePosition = computed(() => this.groupPosition() ?? this.position(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePosition" }] : /* istanbul ignore next */ []));
+    effectiveShowAvatar = computed(() => this.groupShowAvatar() ?? this.showAvatar(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveShowAvatar" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = [
+            'st-chat-message',
+            this.effectiveVariant(),
+            this.effectivePosition()
+        ];
+        return classes.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    setGroupConfig(variant, position, showAvatar, preserveAvatarSpace) {
+        this.groupVariant.set(variant);
+        this.groupPosition.set(position);
+        this.groupShowAvatar.set(showAvatar);
+        this.groupPreserveAvatarSpace.set(preserveAvatarSpace);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataChatMessageComponent, isStandalone: true, selector: "st-chat-message", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"st-chat-message-container\">\n  @if (effectiveVariant() === 'incoming') {\n    <div\n      class=\"st-chat-message-avatar\"\n      [class.hidden]=\"!effectiveShowAvatar()\"\n      [class.preserve-space]=\"groupPreserveAvatarSpace()\"\n    >\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n\n  <div class=\"st-chat-message-body\">\n    <div class=\"st-chat-message-bubble\">\n      <div class=\"st-chat-message-media\">\n        <ng-content select=\"[slot=media]\" />\n      </div>\n      <div class=\"st-chat-message-text\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"st-chat-message-footer\">\n      @if (timestamp()) {\n        <span class=\"st-chat-message-timestamp\">{{ timestamp() }}</span>\n      }\n      @if (effectiveVariant() === 'outgoing' && status()) {\n        <span class=\"st-chat-message-status\" [class]=\"'status-' + status()\">\n          @if (status() === 'sent') {\n            <st-icon name=\"check-single\" size=\"xs\"></st-icon>\n          } @else if (status() === 'delivered' || status() === 'read') {\n            <st-icon name=\"check-double\" size=\"xs\"></st-icon>\n          }\n        </span>\n      }\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n\n  @if (effectiveVariant() === 'outgoing') {\n    <div\n      class=\"st-chat-message-avatar\"\n      [class.hidden]=\"!effectiveShowAvatar()\"\n      [class.preserve-space]=\"groupPreserveAvatarSpace()\"\n    >\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--st-chat-message-bg-incoming: var(--st-color-bg-raised);--st-chat-message-color-incoming: var(--st-color-text-primary);--st-chat-message-border-incoming: var(--st-color-border-subtle);--st-chat-message-bg-outgoing: var(--st-color-control-primary-bg);--st-chat-message-color-outgoing: var(--st-color-control-primary-text);--st-chat-message-border-outgoing: transparent;--st-chat-message-radius: var(--st-border-radius-xl);--st-chat-message-radius-sm: var(--st-border-radius-sm);--st-chat-message-max-width: 75%;--st-chat-message-padding: var(--st-space-2) var(--st-space-3);--st-chat-avatar-size: 32px;--st-chat-avatar-gap: var(--st-space-2);--st-chat-status-read-color: var(--st-color-accent-default);display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box}:host .st-chat-message-container{display:flex;align-items:flex-end;gap:var(--st-chat-avatar-gap);width:100%;max-width:100%;min-width:0;box-sizing:border-box}:host .st-chat-message-avatar{flex-shrink:0;display:flex;align-items:flex-end;width:var(--st-chat-avatar-size);min-width:var(--st-chat-avatar-size)}:host .st-chat-message-avatar:empty:not(.preserve-space){display:none}:host .st-chat-message-avatar.hidden{visibility:hidden}:host .st-chat-message-body{display:flex;flex-direction:column;max-width:var(--st-chat-message-max-width);min-width:0}:host .st-chat-message-bubble{padding:var(--st-chat-message-padding);font-size:var(--st-font-sm);line-height:1.45;word-break:break-word;overflow-wrap:anywhere;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden;transition:background-color var(--st-transition-normal),border-color var(--st-transition-normal)}:host .st-chat-message-media{overflow:hidden;border-radius:calc(var(--st-chat-message-radius) - 2px);margin-bottom:var(--st-space-1);width:100%;max-width:100%}:host .st-chat-message-media:empty{display:none;margin-bottom:0}:host .st-chat-message-media img,:host .st-chat-message-media video{display:block;width:100%;max-width:100%;height:auto;max-height:280px;object-fit:cover;border-radius:inherit}:host .st-chat-message-text:empty{display:none}:host .st-chat-message-footer{display:flex;align-items:center;gap:var(--st-space-1);font-size:var(--st-font-xs);color:var(--st-color-text-tertiary);margin-top:2px;-webkit-user-select:none;user-select:none}:host .st-chat-message-footer:empty{display:none}:host .st-chat-message-footer .st-chat-message-timestamp{font-variant-numeric:tabular-nums}:host .st-chat-message-footer .st-chat-message-status{display:inline-flex;align-items:center;line-height:1}:host .st-chat-message-footer .st-chat-message-status.status-read{color:var(--st-chat-status-read-color)}:host.incoming .st-chat-message-container{justify-content:flex-start}:host.incoming .st-chat-message-body{align-items:flex-start}:host.incoming .st-chat-message-bubble{background-color:var(--st-chat-message-bg-incoming);color:var(--st-chat-message-color-incoming);border:1px solid var(--st-chat-message-border-incoming)}:host.incoming .st-chat-message-footer{justify-content:flex-start}:host.incoming.single .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.first .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.middle .st-chat-message-bubble{border-radius:var(--st-chat-message-radius-sm) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.last .st-chat-message-bubble{border-radius:var(--st-chat-message-radius-sm) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-border-radius-xs)}:host.outgoing .st-chat-message-container{justify-content:flex-end}:host.outgoing .st-chat-message-body{align-items:flex-end}:host.outgoing .st-chat-message-bubble{background-color:var(--st-chat-message-bg-outgoing);color:var(--st-chat-message-color-outgoing);border:1px solid var(--st-chat-message-border-outgoing)}:host.outgoing .st-chat-message-footer{justify-content:flex-end}:host.outgoing.single .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.first .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.middle .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.last .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-border-radius-xs) var(--st-chat-message-radius)}\n"], dependencies: [{ kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-chat-message', imports: [StrataIconComponent], host: {
+                        '[class]': 'hostClasses()'
+                    }, template: "<div class=\"st-chat-message-container\">\n  @if (effectiveVariant() === 'incoming') {\n    <div\n      class=\"st-chat-message-avatar\"\n      [class.hidden]=\"!effectiveShowAvatar()\"\n      [class.preserve-space]=\"groupPreserveAvatarSpace()\"\n    >\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n\n  <div class=\"st-chat-message-body\">\n    <div class=\"st-chat-message-bubble\">\n      <div class=\"st-chat-message-media\">\n        <ng-content select=\"[slot=media]\" />\n      </div>\n      <div class=\"st-chat-message-text\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"st-chat-message-footer\">\n      @if (timestamp()) {\n        <span class=\"st-chat-message-timestamp\">{{ timestamp() }}</span>\n      }\n      @if (effectiveVariant() === 'outgoing' && status()) {\n        <span class=\"st-chat-message-status\" [class]=\"'status-' + status()\">\n          @if (status() === 'sent') {\n            <st-icon name=\"check-single\" size=\"xs\"></st-icon>\n          } @else if (status() === 'delivered' || status() === 'read') {\n            <st-icon name=\"check-double\" size=\"xs\"></st-icon>\n          }\n        </span>\n      }\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n\n  @if (effectiveVariant() === 'outgoing') {\n    <div\n      class=\"st-chat-message-avatar\"\n      [class.hidden]=\"!effectiveShowAvatar()\"\n      [class.preserve-space]=\"groupPreserveAvatarSpace()\"\n    >\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--st-chat-message-bg-incoming: var(--st-color-bg-raised);--st-chat-message-color-incoming: var(--st-color-text-primary);--st-chat-message-border-incoming: var(--st-color-border-subtle);--st-chat-message-bg-outgoing: var(--st-color-control-primary-bg);--st-chat-message-color-outgoing: var(--st-color-control-primary-text);--st-chat-message-border-outgoing: transparent;--st-chat-message-radius: var(--st-border-radius-xl);--st-chat-message-radius-sm: var(--st-border-radius-sm);--st-chat-message-max-width: 75%;--st-chat-message-padding: var(--st-space-2) var(--st-space-3);--st-chat-avatar-size: 32px;--st-chat-avatar-gap: var(--st-space-2);--st-chat-status-read-color: var(--st-color-accent-default);display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box}:host .st-chat-message-container{display:flex;align-items:flex-end;gap:var(--st-chat-avatar-gap);width:100%;max-width:100%;min-width:0;box-sizing:border-box}:host .st-chat-message-avatar{flex-shrink:0;display:flex;align-items:flex-end;width:var(--st-chat-avatar-size);min-width:var(--st-chat-avatar-size)}:host .st-chat-message-avatar:empty:not(.preserve-space){display:none}:host .st-chat-message-avatar.hidden{visibility:hidden}:host .st-chat-message-body{display:flex;flex-direction:column;max-width:var(--st-chat-message-max-width);min-width:0}:host .st-chat-message-bubble{padding:var(--st-chat-message-padding);font-size:var(--st-font-sm);line-height:1.45;word-break:break-word;overflow-wrap:anywhere;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden;transition:background-color var(--st-transition-normal),border-color var(--st-transition-normal)}:host .st-chat-message-media{overflow:hidden;border-radius:calc(var(--st-chat-message-radius) - 2px);margin-bottom:var(--st-space-1);width:100%;max-width:100%}:host .st-chat-message-media:empty{display:none;margin-bottom:0}:host .st-chat-message-media img,:host .st-chat-message-media video{display:block;width:100%;max-width:100%;height:auto;max-height:280px;object-fit:cover;border-radius:inherit}:host .st-chat-message-text:empty{display:none}:host .st-chat-message-footer{display:flex;align-items:center;gap:var(--st-space-1);font-size:var(--st-font-xs);color:var(--st-color-text-tertiary);margin-top:2px;-webkit-user-select:none;user-select:none}:host .st-chat-message-footer:empty{display:none}:host .st-chat-message-footer .st-chat-message-timestamp{font-variant-numeric:tabular-nums}:host .st-chat-message-footer .st-chat-message-status{display:inline-flex;align-items:center;line-height:1}:host .st-chat-message-footer .st-chat-message-status.status-read{color:var(--st-chat-status-read-color)}:host.incoming .st-chat-message-container{justify-content:flex-start}:host.incoming .st-chat-message-body{align-items:flex-start}:host.incoming .st-chat-message-bubble{background-color:var(--st-chat-message-bg-incoming);color:var(--st-chat-message-color-incoming);border:1px solid var(--st-chat-message-border-incoming)}:host.incoming .st-chat-message-footer{justify-content:flex-start}:host.incoming.single .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.first .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.middle .st-chat-message-bubble{border-radius:var(--st-chat-message-radius-sm) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm)}:host.incoming.last .st-chat-message-bubble{border-radius:var(--st-chat-message-radius-sm) var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-border-radius-xs)}:host.outgoing .st-chat-message-container{justify-content:flex-end}:host.outgoing .st-chat-message-body{align-items:flex-end}:host.outgoing .st-chat-message-bubble{background-color:var(--st-chat-message-bg-outgoing);color:var(--st-chat-message-color-outgoing);border:1px solid var(--st-chat-message-border-outgoing)}:host.outgoing .st-chat-message-footer{justify-content:flex-end}:host.outgoing.single .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.first .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.middle .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-chat-message-radius-sm) var(--st-chat-message-radius)}:host.outgoing.last .st-chat-message-bubble{border-radius:var(--st-chat-message-radius) var(--st-chat-message-radius-sm) var(--st-border-radius-xs) var(--st-chat-message-radius)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], showAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatar", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+class StrataChatGroupComponent {
+    variant = input('incoming', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    messages = contentChildren(StrataChatMessageComponent, { ...(ngDevMode ? { debugName: "messages" } : /* istanbul ignore next */ {}), descendants: true });
+    hostClasses = computed(() => `st-chat-group ${this.variant()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const items = this.messages();
+            const variant = this.variant();
+            const count = items.length;
+            items.forEach((msg, index) => {
+                if (count === 1) {
+                    msg.setGroupConfig(variant, 'single', true, false);
+                    return;
+                }
+                const isFirst = index === 0;
+                const isLast = index === count - 1;
+                const position = isFirst ? 'first' : isLast ? 'last' : 'middle';
+                const showAvatar = isLast;
+                const preserveAvatarSpace = variant === 'incoming' && !isLast;
+                msg.setGroupConfig(variant, position, showAvatar, preserveAvatarSpace);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataChatGroupComponent, isStandalone: true, selector: "st-chat-group", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "messages", predicate: StrataChatMessageComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{--st-chat-group-gap: var(--st-space-1);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;gap:var(--st-chat-group-gap)}:host>*{min-width:0;max-width:100%;box-sizing:border-box}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-chat-group', imports: [], host: {
+                        '[class]': 'hostClasses()'
+                    }, template: "<ng-content />\n", styles: [":host{--st-chat-group-gap: var(--st-space-1);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;gap:var(--st-chat-group-gap)}:host>*{min-width:0;max-width:100%;box-sizing:border-box}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], messages: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataChatMessageComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+
+class StrataChatSeparatorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: StrataChatSeparatorComponent, isStandalone: true, selector: "st-chat-separator", host: { classAttribute: "st-chat-separator" }, ngImport: i0, template: "<div class=\"st-chat-separator-line\"></div>\n<div class=\"st-chat-separator-content\">\n  <ng-content />\n</div>\n<div class=\"st-chat-separator-line\"></div>\n", styles: [":host{--st-chat-separator-color: var(--st-color-text-tertiary);--st-chat-separator-line-color: var(--st-color-border-subtle);--st-chat-separator-font-size: var(--st-font-xs);display:flex;align-items:center;justify-content:center;gap:var(--st-space-3);width:100%;box-sizing:border-box}:host .st-chat-separator-line{flex:1;height:1px;background-color:var(--st-chat-separator-line-color)}:host .st-chat-separator-content{display:inline-flex;align-items:center;font-size:var(--st-chat-separator-font-size);color:var(--st-chat-separator-color);white-space:nowrap;font-weight:var(--st-font-weight-medium)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-chat-separator', imports: [], host: {
+                        class: 'st-chat-separator'
+                    }, template: "<div class=\"st-chat-separator-line\"></div>\n<div class=\"st-chat-separator-content\">\n  <ng-content />\n</div>\n<div class=\"st-chat-separator-line\"></div>\n", styles: [":host{--st-chat-separator-color: var(--st-color-text-tertiary);--st-chat-separator-line-color: var(--st-color-border-subtle);--st-chat-separator-font-size: var(--st-font-xs);display:flex;align-items:center;justify-content:center;gap:var(--st-space-3);width:100%;box-sizing:border-box}:host .st-chat-separator-line{flex:1;height:1px;background-color:var(--st-chat-separator-line-color)}:host .st-chat-separator-content{display:inline-flex;align-items:center;font-size:var(--st-chat-separator-font-size);color:var(--st-chat-separator-color);white-space:nowrap;font-weight:var(--st-font-weight-medium)}\n"] }]
+        }] });
+
+class StrataChatTypingComponent {
+    variant = input('incoming', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Typing', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => `st-chat-typing ${this.variant()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatTypingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataChatTypingComponent, isStandalone: true, selector: "st-chat-typing", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"st-chat-typing-container\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n  @if (variant() === 'incoming') {\n    <div class=\"st-chat-typing-avatar\">\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n\n  <div class=\"st-chat-typing-bubble\">\n    <span class=\"st-chat-typing-dot\"></span>\n    <span class=\"st-chat-typing-dot\"></span>\n    <span class=\"st-chat-typing-dot\"></span>\n  </div>\n\n  @if (variant() === 'outgoing') {\n    <div class=\"st-chat-typing-avatar\">\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--st-chat-typing-dot-size: 6px;--st-chat-typing-dot-color: var(--st-color-text-tertiary);--st-chat-typing-bubble-bg-incoming: var(--st-color-bg-raised);--st-chat-typing-bubble-bg-outgoing: var(--st-color-control-primary-bg);display:block;width:100%;box-sizing:border-box}:host .st-chat-typing-container{display:flex;align-items:flex-end;gap:var(--st-chat-avatar-gap, var(--st-space-2));width:100%;box-sizing:border-box}:host .st-chat-typing-avatar{flex-shrink:0;display:flex;align-items:flex-end;width:var(--st-chat-avatar-size, 32px);min-width:var(--st-chat-avatar-size, 32px)}:host .st-chat-typing-avatar:empty{display:none}:host .st-chat-typing-bubble{display:inline-flex;align-items:center;gap:var(--st-space-1);padding:var(--st-space-2) var(--st-space-3);min-height:32px;box-sizing:border-box;border-radius:var(--st-border-radius-xl)}:host .st-chat-typing-dot{width:var(--st-chat-typing-dot-size);height:var(--st-chat-typing-dot-size);border-radius:var(--st-border-radius-full);background-color:var(--st-chat-typing-dot-color);animation:st-chat-typing-bounce 1.4s infinite ease-in-out both}:host .st-chat-typing-dot:nth-child(1){animation-delay:-.32s}:host .st-chat-typing-dot:nth-child(2){animation-delay:-.16s}:host .st-chat-typing-dot:nth-child(3){animation-delay:0s}:host.incoming .st-chat-typing-container{justify-content:flex-start}:host.incoming .st-chat-typing-bubble{background-color:var(--st-chat-typing-bubble-bg-incoming);border:1px solid var(--st-color-border-subtle);border-radius:var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-sm)}:host.outgoing .st-chat-typing-container{justify-content:flex-end}:host.outgoing .st-chat-typing-bubble{background-color:var(--st-chat-typing-bubble-bg-outgoing);border:1px solid transparent;border-radius:var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-sm) var(--st-border-radius-xl)}@keyframes st-chat-typing-bounce{0%,80%,to{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataChatTypingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-chat-typing', imports: [], host: {
+                        '[class]': 'hostClasses()'
+                    }, template: "<div class=\"st-chat-typing-container\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n  @if (variant() === 'incoming') {\n    <div class=\"st-chat-typing-avatar\">\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n\n  <div class=\"st-chat-typing-bubble\">\n    <span class=\"st-chat-typing-dot\"></span>\n    <span class=\"st-chat-typing-dot\"></span>\n    <span class=\"st-chat-typing-dot\"></span>\n  </div>\n\n  @if (variant() === 'outgoing') {\n    <div class=\"st-chat-typing-avatar\">\n      <ng-content select=\"[slot=avatar]\" />\n    </div>\n  }\n</div>\n", styles: [":host{--st-chat-typing-dot-size: 6px;--st-chat-typing-dot-color: var(--st-color-text-tertiary);--st-chat-typing-bubble-bg-incoming: var(--st-color-bg-raised);--st-chat-typing-bubble-bg-outgoing: var(--st-color-control-primary-bg);display:block;width:100%;box-sizing:border-box}:host .st-chat-typing-container{display:flex;align-items:flex-end;gap:var(--st-chat-avatar-gap, var(--st-space-2));width:100%;box-sizing:border-box}:host .st-chat-typing-avatar{flex-shrink:0;display:flex;align-items:flex-end;width:var(--st-chat-avatar-size, 32px);min-width:var(--st-chat-avatar-size, 32px)}:host .st-chat-typing-avatar:empty{display:none}:host .st-chat-typing-bubble{display:inline-flex;align-items:center;gap:var(--st-space-1);padding:var(--st-space-2) var(--st-space-3);min-height:32px;box-sizing:border-box;border-radius:var(--st-border-radius-xl)}:host .st-chat-typing-dot{width:var(--st-chat-typing-dot-size);height:var(--st-chat-typing-dot-size);border-radius:var(--st-border-radius-full);background-color:var(--st-chat-typing-dot-color);animation:st-chat-typing-bounce 1.4s infinite ease-in-out both}:host .st-chat-typing-dot:nth-child(1){animation-delay:-.32s}:host .st-chat-typing-dot:nth-child(2){animation-delay:-.16s}:host .st-chat-typing-dot:nth-child(3){animation-delay:0s}:host.incoming .st-chat-typing-container{justify-content:flex-start}:host.incoming .st-chat-typing-bubble{background-color:var(--st-chat-typing-bubble-bg-incoming);border:1px solid var(--st-color-border-subtle);border-radius:var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-sm)}:host.outgoing .st-chat-typing-container{justify-content:flex-end}:host.outgoing .st-chat-typing-bubble{background-color:var(--st-chat-typing-bubble-bg-outgoing);border:1px solid transparent;border-radius:var(--st-border-radius-xl) var(--st-border-radius-xl) var(--st-border-radius-sm) var(--st-border-radius-xl)}@keyframes st-chat-typing-bounce{0%,80%,to{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
 class StrataTimeStepperComponent {
     format = input('24h', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
@@ -4737,7 +4872,7 @@ class StrataModalComponent {
     }
     ngOnDestroy() {
         if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
-            this.previousActiveElement.focus();
+            this.previousActiveElement.focus({ preventScroll: true });
         }
     }
     ngAfterViewInit() {
@@ -4764,10 +4899,10 @@ class StrataModalComponent {
     focusInitialElement() {
         const autofocus = this.elementRef.nativeElement.querySelector('[autofocus]');
         if (autofocus && typeof autofocus.focus === 'function') {
-            autofocus.focus();
+            autofocus.focus({ preventScroll: true });
             return;
         }
-        this.elementRef.nativeElement.focus();
+        this.elementRef.nativeElement.focus({ preventScroll: true });
     }
     onCardClick(event) {
         event.stopPropagation();
@@ -4788,7 +4923,7 @@ class StrataModalComponent {
                 document.activeElement === this.elementRef.nativeElement ||
                 !this.elementRef.nativeElement.contains(document.activeElement)) {
                 event.preventDefault();
-                last.focus();
+                last.focus({ preventScroll: true });
             }
         }
         else {
@@ -4796,7 +4931,7 @@ class StrataModalComponent {
                 document.activeElement === this.elementRef.nativeElement ||
                 !this.elementRef.nativeElement.contains(document.activeElement)) {
                 event.preventDefault();
-                first.focus();
+                first.focus({ preventScroll: true });
             }
         }
     }
@@ -7078,5 +7213,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BreakpointService, CapitalizePipe, DEFAULT_DATE_RANGE_PRESETS, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCalendarComponent, StrataCardComponent, StrataCheckboxComponent, StrataContextMenuDirective, StrataDatePickerComponent, StrataDateRangePickerComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalBodyComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataTimeStepperComponent, StrataTimepickerComponent, StrataToggleComponent, StrataTooltipDirective, addDays, addMonths, addYears, createCalendarGrid, disableDateRange, disableDaysOfWeek, disableFutureDates, disablePastDates, disableWeekends, endOfDay, endOfMonth, formatDate, formatMonthTitle, getDayOfWeek, getDaysInMonth, getDefaultShortcutLabels, getLocaleDefaultDateFormat, getMonthNames, getWeekdayNames, isAfterDay, isApplePlatform, isBeforeDay, isSameDay, isSameMonth, isSameYear, isWeekend, isWithinDayRange, parseDate, provideBaseIcons, provideIcons, provideStrata, resolveIsApple, startOfDay, startOfMonth };
+export { BreakpointService, CapitalizePipe, DEFAULT_DATE_RANGE_PRESETS, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCalendarComponent, StrataCardComponent, StrataChatComponent, StrataChatGroupComponent, StrataChatMessageComponent, StrataChatSeparatorComponent, StrataChatTypingComponent, StrataCheckboxComponent, StrataContextMenuDirective, StrataDatePickerComponent, StrataDateRangePickerComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalBodyComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataTimeStepperComponent, StrataTimepickerComponent, StrataToggleComponent, StrataTooltipDirective, addDays, addMonths, addYears, createCalendarGrid, disableDateRange, disableDaysOfWeek, disableFutureDates, disablePastDates, disableWeekends, endOfDay, endOfMonth, formatDate, formatMonthTitle, getDayOfWeek, getDaysInMonth, getDefaultShortcutLabels, getLocaleDefaultDateFormat, getMonthNames, getWeekdayNames, isAfterDay, isApplePlatform, isBeforeDay, isSameDay, isSameMonth, isSameYear, isWeekend, isWithinDayRange, parseDate, provideBaseIcons, provideIcons, provideStrata, resolveIsApple, startOfDay, startOfMonth };
 //# sourceMappingURL=ngx-strata.mjs.map