@shival99/z-ui 2.6.4 → 2.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/.npmignore +13 -13
  2. package/fesm2022/shival99-z-ui-components-z-button.mjs +7 -7
  3. package/fesm2022/shival99-z-ui-components-z-button.mjs.map +1 -1
  4. package/fesm2022/shival99-z-ui-components-z-chat.mjs +2 -2
  5. package/fesm2022/shival99-z-ui-components-z-chat.mjs.map +1 -1
  6. package/fesm2022/shival99-z-ui-components-z-command.mjs +2 -2
  7. package/fesm2022/shival99-z-ui-components-z-command.mjs.map +1 -1
  8. package/fesm2022/shival99-z-ui-components-z-editor.mjs +2 -2
  9. package/fesm2022/shival99-z-ui-components-z-editor.mjs.map +1 -1
  10. package/fesm2022/shival99-z-ui-components-z-filter.mjs +2 -2
  11. package/fesm2022/shival99-z-ui-components-z-filter.mjs.map +1 -1
  12. package/fesm2022/shival99-z-ui-components-z-gallery.mjs +2 -2
  13. package/fesm2022/shival99-z-ui-components-z-gallery.mjs.map +1 -1
  14. package/fesm2022/shival99-z-ui-components-z-input.mjs +2 -2
  15. package/fesm2022/shival99-z-ui-components-z-input.mjs.map +1 -1
  16. package/fesm2022/shival99-z-ui-components-z-kanban.mjs +2 -2
  17. package/fesm2022/shival99-z-ui-components-z-kanban.mjs.map +1 -1
  18. package/fesm2022/shival99-z-ui-components-z-menu.mjs +4 -4
  19. package/fesm2022/shival99-z-ui-components-z-menu.mjs.map +1 -1
  20. package/fesm2022/shival99-z-ui-components-z-pagination.mjs +2 -2
  21. package/fesm2022/shival99-z-ui-components-z-pagination.mjs.map +1 -1
  22. package/fesm2022/shival99-z-ui-components-z-select.mjs +2 -2
  23. package/fesm2022/shival99-z-ui-components-z-select.mjs.map +1 -1
  24. package/fesm2022/shival99-z-ui-components-z-table.mjs +62 -4
  25. package/fesm2022/shival99-z-ui-components-z-table.mjs.map +1 -1
  26. package/package.json +1 -1
  27. package/types/shival99-z-ui-components-z-table.d.ts +2 -2
package/.npmignore CHANGED
@@ -13,46 +13,46 @@ components/z-breadcrumb/package.json
13
13
  components/z-button/package.json
14
14
  components/z-button-group/package.json
15
15
  components/z-calendar/package.json
16
+ components/z-card/package.json
16
17
  components/z-chat/package.json
17
18
  components/z-checkbox/package.json
18
- components/z-card/package.json
19
19
  components/z-code/package.json
20
20
  components/z-command/package.json
21
- components/z-drawer/package.json
22
21
  components/z-dropdown-menu/package.json
23
22
  components/z-editor/package.json
24
- components/z-filter/package.json
25
23
  components/z-empty/package.json
26
24
  components/z-gallery/package.json
25
+ components/z-filter/package.json
26
+ components/z-drawer/package.json
27
27
  components/z-hover-glide/package.json
28
28
  components/z-icon/package.json
29
- components/z-input/package.json
30
29
  components/z-kanban/package.json
31
- components/z-marquee/package.json
30
+ components/z-input/package.json
32
31
  components/z-loading/package.json
32
+ components/z-marquee/package.json
33
33
  components/z-media-player/package.json
34
34
  components/z-menu/package.json
35
35
  components/z-metric-card/package.json
36
- components/z-number-ticker/package.json
37
36
  components/z-modal/package.json
37
+ components/z-number-ticker/package.json
38
+ components/z-overlay/package.json
38
39
  components/z-pagination/package.json
39
40
  components/z-qrcode/package.json
40
- components/z-overlay/package.json
41
- components/z-radio/package.json
42
- components/z-show-more/package.json
43
41
  components/z-popover/package.json
42
+ components/z-radio/package.json
44
43
  components/z-scrollarea/package.json
44
+ components/z-show-more/package.json
45
45
  components/z-select/package.json
46
- components/z-skeleton/package.json
47
46
  components/z-skeleton-auto/package.json
48
- components/z-steps/package.json
47
+ components/z-skeleton/package.json
49
48
  components/z-switch/package.json
50
- components/z-table/package.json
49
+ components/z-steps/package.json
51
50
  components/z-tabs/package.json
51
+ components/z-table/package.json
52
52
  components/z-tags/package.json
53
53
  components/z-timeline/package.json
54
54
  components/z-toast/package.json
55
- components/z-upload/package.json
56
55
  components/z-tooltip/package.json
56
+ components/z-upload/package.json
57
57
  services/excel/package.json
58
58
  services/office/package.json
package/fesm2022/shival99-z-ui-components-z-button.mjs CHANGED
@@ -66,11 +66,11 @@ const zButtonVariants = cva("cursor-pointer relative inline-flex items-center ju
66
66
  link: 'text-primary underline-offset-4 hover:underline',
67
67
  },
68
68
  zSize: {
69
- default: 'h-9 px-3 py-2 [&[data-icon-only]]:size-9 [&[data-icon-only]]:p-0',
70
- xs: 'h-7 px-3 py-1 [&[data-icon-only]]:size-7 [&[data-icon-only]]:p-0',
71
- sm: 'h-8 rounded-sm gap-1.5 px-3 [&[data-icon-only]]:size-8 [&[data-icon-only]]:p-0',
72
- lg: 'h-10 rounded-sm px-3 [&[data-icon-only]]:size-10 [&[data-icon-only]]:p-0',
73
- xl: 'h-12 rounded-sm px-3 text-base [&[data-icon-only]]:size-12 [&[data-icon-only]]:p-0',
69
+ default: 'h-9 px-3 py-2 [&>.z-button-content]:gap-2 [&[data-icon-only]]:size-9 [&[data-icon-only]]:p-0',
70
+ xs: 'h-7 px-3 py-1 [&>.z-button-content]:gap-2 [&[data-icon-only]]:size-7 [&[data-icon-only]]:p-0',
71
+ sm: 'h-8 rounded-sm gap-1.5 px-3 [&>.z-button-content]:gap-1.5 [&[data-icon-only]]:size-8 [&[data-icon-only]]:p-0',
72
+ lg: 'h-10 rounded-sm px-3 [&>.z-button-content]:gap-2 [&[data-icon-only]]:size-10 [&[data-icon-only]]:p-0',
73
+ xl: 'h-12 rounded-sm px-3 text-base [&>.z-button-content]:gap-2 [&[data-icon-only]]:size-12 [&[data-icon-only]]:p-0',
74
74
  },
75
75
  zShape: {
76
76
  default: 'rounded-sm',
@@ -187,7 +187,7 @@ class ZButtonComponent {
187
187
  waveEl.addEventListener('animationend', onWaveAnimationEnd);
188
188
  }
189
189
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
190
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZButtonComponent, isStandalone: true, selector: "z-button, button[z-button], a[z-button]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zShape: { classPropertyName: "zShape", publicName: "zShape", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zTypeIcon: { classPropertyName: "zTypeIcon", publicName: "zTypeIcon", isSignal: true, isRequired: false, transformFunction: null }, zAnimatedTypeIcon: { classPropertyName: "zAnimatedTypeIcon", publicName: "zAnimatedTypeIcon", isSignal: true, isRequired: false, transformFunction: null }, zAnimateIcon: { classPropertyName: "zAnimateIcon", publicName: "zAnimateIcon", isSignal: true, isRequired: false, transformFunction: null }, zAnimationTriggerIcon: { classPropertyName: "zAnimationTriggerIcon", publicName: "zAnimationTriggerIcon", isSignal: true, isRequired: false, transformFunction: null }, zSizeIcon: { classPropertyName: "zSizeIcon", publicName: "zSizeIcon", isSignal: true, isRequired: false, transformFunction: null }, zStrokeWidthIcon: { classPropertyName: "zStrokeWidthIcon", publicName: "zStrokeWidthIcon", isSignal: true, isRequired: false, transformFunction: null }, zWave: { classPropertyName: "zWave", publicName: "zWave", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onWaveClick()" }, properties: { "class": "zClasses()", "attr.data-icon-only": "zIconOnly() || null" } }, exportAs: ["zButton"], ngImport: i0, template: "@if ((zTypeIcon() || zAnimatedTypeIcon()) && !zLoading()) {\n <i\n z-icon\n [zType]=\"zTypeIcon() || 'lucideLoader'\"\n [zAnimatedType]=\"zAnimatedTypeIcon()\"\n [zAnimate]=\"zAnimateIcon()\"\n [zAnimationTrigger]=\"zAnimationTriggerIcon()\"\n [zSize]=\"zSizeIcon()\"\n [zStrokeWidth]=\"zStrokeWidthIcon()\"></i>\n}\n@if (zLoading()) {\n <i z-icon zType=\"lucideLoader\" class=\"z-animate-spin\" [zSize]=\"zSizeIcon()\" [zStrokeWidth]=\"2.8\"></i>\n}\n@if (zLabel()) {\n <span class=\"min-w-0 truncate\">{{ zLabel() | translate }}</span>\n} @else {\n <span class=\"min-w-0 truncate\">\n <ng-content />\n </span>\n}\n", styles: ["@property --z-button-shimmer-angle{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes z-button-shimmer-spin{to{--z-button-shimmer-angle: 360deg}}@keyframes z-button-heartbeat{0%{box-shadow:0 0 0 0 var(--z-button-heartbeat-color, var(--destructive))}50%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}.z-button-shimmer{border-color:transparent;background:linear-gradient(var(--background),var(--background)) padding-box,conic-gradient(from var(--z-button-shimmer-angle),transparent 0deg,transparent 300deg,var(--primary) 326deg,transparent 352deg,transparent 360deg) border-box;animation:z-button-shimmer-spin 4s linear infinite}.z-button-shimmer:hover{background:linear-gradient(var(--background),var(--background)) padding-box,conic-gradient(from var(--z-button-shimmer-angle),transparent 0deg,transparent 300deg,var(--primary) 326deg,transparent 352deg,transparent 360deg) border-box}.z-button-heartbeat{--z-button-heartbeat-color: var(--destructive);animation:z-button-heartbeat 2s ease-in-out infinite;will-change:box-shadow}@media(prefers-reduced-motion:reduce){.z-button-shimmer,.z-button-heartbeat{animation:none}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
190
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZButtonComponent, isStandalone: true, selector: "z-button, button[z-button], a[z-button]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zShape: { classPropertyName: "zShape", publicName: "zShape", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zTypeIcon: { classPropertyName: "zTypeIcon", publicName: "zTypeIcon", isSignal: true, isRequired: false, transformFunction: null }, zAnimatedTypeIcon: { classPropertyName: "zAnimatedTypeIcon", publicName: "zAnimatedTypeIcon", isSignal: true, isRequired: false, transformFunction: null }, zAnimateIcon: { classPropertyName: "zAnimateIcon", publicName: "zAnimateIcon", isSignal: true, isRequired: false, transformFunction: null }, zAnimationTriggerIcon: { classPropertyName: "zAnimationTriggerIcon", publicName: "zAnimationTriggerIcon", isSignal: true, isRequired: false, transformFunction: null }, zSizeIcon: { classPropertyName: "zSizeIcon", publicName: "zSizeIcon", isSignal: true, isRequired: false, transformFunction: null }, zStrokeWidthIcon: { classPropertyName: "zStrokeWidthIcon", publicName: "zStrokeWidthIcon", isSignal: true, isRequired: false, transformFunction: null }, zWave: { classPropertyName: "zWave", publicName: "zWave", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onWaveClick()" }, properties: { "class": "zClasses()", "attr.data-icon-only": "zIconOnly() || null" } }, exportAs: ["zButton"], ngImport: i0, template: "@if ((zTypeIcon() || zAnimatedTypeIcon()) && !zLoading()) {\n <i\n z-icon\n [zType]=\"zTypeIcon() || 'lucideLoader'\"\n [zAnimatedType]=\"zAnimatedTypeIcon()\"\n [zAnimate]=\"zAnimateIcon()\"\n [zAnimationTrigger]=\"zAnimationTriggerIcon()\"\n [zSize]=\"zSizeIcon()\"\n [zStrokeWidth]=\"zStrokeWidthIcon()\"></i>\n}\n@if (zLoading()) {\n <i z-icon zType=\"lucideLoader\" class=\"z-animate-spin\" [zSize]=\"zSizeIcon()\" [zStrokeWidth]=\"2.8\"></i>\n}\n@if (zLabel()) {\n <span class=\"min-w-0 truncate\">{{ zLabel() | translate }}</span>\n} @else {\n <span class=\"z-button-content inline-flex min-w-0 items-center gap-2 truncate\">\n <ng-content />\n </span>\n}\n", styles: ["@property --z-button-shimmer-angle{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes z-button-shimmer-spin{to{--z-button-shimmer-angle: 360deg}}@keyframes z-button-heartbeat{0%{box-shadow:0 0 0 0 var(--z-button-heartbeat-color, var(--destructive))}50%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}.z-button-shimmer{border-color:transparent;background:linear-gradient(var(--background),var(--background)) padding-box,conic-gradient(from var(--z-button-shimmer-angle),transparent 0deg,transparent 300deg,var(--primary) 326deg,transparent 352deg,transparent 360deg) border-box;animation:z-button-shimmer-spin 4s linear infinite}.z-button-shimmer:hover{background:linear-gradient(var(--background),var(--background)) padding-box,conic-gradient(from var(--z-button-shimmer-angle),transparent 0deg,transparent 300deg,var(--primary) 326deg,transparent 352deg,transparent 360deg) border-box}.z-button-heartbeat{--z-button-heartbeat-color: var(--destructive);animation:z-button-heartbeat 2s ease-in-out infinite;will-change:box-shadow}@media(prefers-reduced-motion:reduce){.z-button-shimmer,.z-button-heartbeat{animation:none}}.z-button-content:empty{display:none}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
191
191
  }
192
192
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZButtonComponent, decorators: [{
193
193
  type: Component,
@@ -195,7 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
195
195
  '[class]': 'zClasses()',
196
196
  '[attr.data-icon-only]': 'zIconOnly() || null',
197
197
  '(click)': 'onWaveClick()',
198
- }, exportAs: 'zButton', template: "@if ((zTypeIcon() || zAnimatedTypeIcon()) && !zLoading()) {\n <i\n z-icon\n [zType]=\"zTypeIcon() || 'lucideLoader'\"\n [zAnimatedType]=\"zAnimatedTypeIcon()\"\n [zAnimate]=\"zAnimateIcon()\"\n [zAnimationTrigger]=\"zAnimationTriggerIcon()\"\n [zSize]=\"zSizeIcon()\"\n [zStrokeWidth]=\"zStrokeWidthIcon()\"></i>\n}\n@if (zLoading()) {\n <i z-icon zType=\"lucideLoader\" class=\"z-animate-spin\" [zSize]=\"zSizeIcon()\" [zStrokeWidth]=\"2.8\"></i>\n}\n@if (zLabel()) {\n <span class=\"min-w-0 truncate\">{{ zLabel() | translate }}</span>\n} @else {\n <span class=\"min-w-0 truncate\">\n <ng-content />\n </span>\n}\n", styles: ["@property --z-button-shimmer-angle{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes z-button-shimmer-spin{to{--z-button-shimmer-angle: 360deg}}@keyframes z-button-heartbeat{0%{box-shadow:0 0 0 0 var(--z-button-heartbeat-color, var(--destructive))}50%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}.z-button-shimmer{border-color:transparent;background:linear-gradient(var(--background),var(--background)) padding-box,conic-gradient(from var(--z-button-shimmer-angle),transparent 0deg,transparent 300deg,var(--primary) 326deg,transparent 352deg,transparent 360deg) border-box;animation:z-button-shimmer-spin 4s linear infinite}.z-button-shimmer:hover{background:linear-gradient(var(--background),var(--background)) padding-box,conic-gradient(from var(--z-button-shimmer-angle),transparent 0deg,transparent 300deg,var(--primary) 326deg,transparent 352deg,transparent 360deg) border-box}.z-button-heartbeat{--z-button-heartbeat-color: var(--destructive);animation:z-button-heartbeat 2s ease-in-out infinite;will-change:box-shadow}@media(prefers-reduced-motion:reduce){.z-button-shimmer,.z-button-heartbeat{animation:none}}\n"] }]
198
+ }, exportAs: 'zButton', template: "@if ((zTypeIcon() || zAnimatedTypeIcon()) && !zLoading()) {\n <i\n z-icon\n [zType]=\"zTypeIcon() || 'lucideLoader'\"\n [zAnimatedType]=\"zAnimatedTypeIcon()\"\n [zAnimate]=\"zAnimateIcon()\"\n [zAnimationTrigger]=\"zAnimationTriggerIcon()\"\n [zSize]=\"zSizeIcon()\"\n [zStrokeWidth]=\"zStrokeWidthIcon()\"></i>\n}\n@if (zLoading()) {\n <i z-icon zType=\"lucideLoader\" class=\"z-animate-spin\" [zSize]=\"zSizeIcon()\" [zStrokeWidth]=\"2.8\"></i>\n}\n@if (zLabel()) {\n <span class=\"min-w-0 truncate\">{{ zLabel() | translate }}</span>\n} @else {\n <span class=\"z-button-content inline-flex min-w-0 items-center gap-2 truncate\">\n <ng-content />\n </span>\n}\n", styles: ["@property --z-button-shimmer-angle{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes z-button-shimmer-spin{to{--z-button-shimmer-angle: 360deg}}@keyframes z-button-heartbeat{0%{box-shadow:0 0 0 0 var(--z-button-heartbeat-color, var(--destructive))}50%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}.z-button-shimmer{border-color:transparent;background:linear-gradient(var(--background),var(--background)) padding-box,conic-gradient(from var(--z-button-shimmer-angle),transparent 0deg,transparent 300deg,var(--primary) 326deg,transparent 352deg,transparent 360deg) border-box;animation:z-button-shimmer-spin 4s linear infinite}.z-button-shimmer:hover{background:linear-gradient(var(--background),var(--background)) padding-box,conic-gradient(from var(--z-button-shimmer-angle),transparent 0deg,transparent 300deg,var(--primary) 326deg,transparent 352deg,transparent 360deg) border-box}.z-button-heartbeat{--z-button-heartbeat-color: var(--destructive);animation:z-button-heartbeat 2s ease-in-out infinite;will-change:box-shadow}@media(prefers-reduced-motion:reduce){.z-button-shimmer,.z-button-heartbeat{animation:none}}.z-button-content:empty{display:none}\n"] }]
199
199
  }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShape", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zTypeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTypeIcon", required: false }] }], zAnimatedTypeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimatedTypeIcon", required: false }] }], zAnimateIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimateIcon", required: false }] }], zAnimationTriggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimationTriggerIcon", required: false }] }], zSizeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSizeIcon", required: false }] }], zStrokeWidthIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStrokeWidthIcon", required: false }] }], zWave: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWave", required: false }] }] } });
200
200
 
201
201
  /**
package/fesm2022/shival99-z-ui-components-z-button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shival99-z-ui-components-z-button.mjs","sources":["../../../../libs/core-ui/components/z-button/z-button.variants.ts","../../../../libs/core-ui/components/z-button/z-button.component.ts","../../../../libs/core-ui/components/z-button/z-button.component.html","../../../../libs/core-ui/components/z-button/shival99-z-ui-components-z-button.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const zButtonVariants = cva(\n \"cursor-pointer relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-[450] select-none transition-[background-color,border-color,color,box-shadow,opacity] duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n zType: {\n default:\n 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 [--z-wave-color:var(--color-primary)]',\n primary:\n 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 [--z-wave-color:var(--color-primary)]',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 [--z-wave-color:var(--color-secondary-foreground)]',\n destructive:\n 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 [--z-wave-color:var(--color-destructive)]',\n 'destructive-heartbeat':\n 'z-button-heartbeat bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 [--z-wave-color:var(--color-destructive)]',\n success:\n 'bg-green-600 text-white shadow-xs hover:bg-green-700 focus-visible:ring-green-500/20 dark:bg-green-600 dark:hover:bg-green-700 [--z-wave-color:var(--color-green-600)]',\n info: 'bg-blue-600 text-white shadow-xs hover:bg-blue-700 focus-visible:ring-blue-500/20 dark:bg-blue-600 dark:hover:bg-blue-700 [--z-wave-color:var(--color-blue-600)]',\n warning:\n 'bg-amber-500 text-white shadow-xs hover:bg-amber-600 focus-visible:ring-amber-500/20 dark:bg-amber-500 dark:hover:bg-amber-600 [--z-wave-color:var(--color-amber-500)]',\n error:\n 'bg-red-600 text-white shadow-xs hover:bg-red-700 focus-visible:ring-red-500/20 dark:bg-red-600 dark:hover:bg-red-700 [--z-wave-color:var(--color-red-600)]',\n\n outline:\n 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 [--z-wave-color:var(--color-foreground)]',\n 'outline-primary':\n 'border border-primary text-primary bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground focus-visible:ring-primary/20 [--z-wave-color:var(--color-primary)]',\n 'outline-secondary':\n 'border border-secondary-foreground/20 text-secondary-foreground bg-transparent shadow-xs hover:bg-secondary hover:text-secondary-foreground focus-visible:ring-secondary/20 [--z-wave-color:var(--color-secondary-foreground)]',\n 'outline-success':\n 'border border-green-600 text-green-600 bg-transparent shadow-xs hover:bg-green-600 hover:text-white focus-visible:ring-green-500/20 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-600 [--z-wave-color:var(--color-green-600)]',\n 'outline-info':\n 'border border-blue-600 text-blue-600 bg-transparent shadow-xs hover:bg-blue-600 hover:text-white focus-visible:ring-blue-500/20 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-600 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning':\n 'border border-amber-500 text-amber-600 bg-transparent shadow-xs hover:bg-amber-500 hover:text-white focus-visible:ring-amber-500/20 dark:border-amber-400 dark:text-amber-400 dark:hover:bg-amber-500 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error':\n 'border border-red-600 text-red-600 bg-transparent shadow-xs hover:bg-red-600 hover:text-white focus-visible:ring-red-500/20 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-600 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive':\n 'border border-destructive text-destructive bg-transparent shadow-xs hover:bg-destructive hover:text-white focus-visible:ring-destructive/20 [--z-wave-color:var(--color-destructive)]',\n 'outline-shimmer':\n 'z-button-shimmer border border-transparent bg-background text-foreground shadow-xs hover:bg-background dark:bg-background dark:hover:bg-background [--z-wave-color:var(--color-primary)]',\n 'outline-success-secondary':\n 'border bg-background shadow-xs hover:bg-green-600/10 hover:text-green-600 hover:border-green-600 dark:bg-input/30 dark:border-input dark:hover:bg-green-500/20 dark:hover:text-green-500 dark:hover:border-green-500 [--z-wave-color:var(--color-green-600)]',\n 'outline-info-secondary':\n 'border bg-background shadow-xs hover:bg-blue-600/10 hover:text-blue-600 hover:border-blue-600 dark:bg-input/30 dark:border-input dark:hover:bg-blue-500/20 dark:hover:text-blue-500 dark:hover:border-blue-500 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning-secondary':\n 'border bg-background shadow-xs hover:bg-amber-500/10 hover:text-amber-600 hover:border-amber-500 dark:bg-input/30 dark:border-input dark:hover:bg-amber-400/20 dark:hover:text-amber-400 dark:hover:border-amber-400 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error-secondary':\n 'border bg-background shadow-xs hover:bg-red-600/10 hover:text-red-600 hover:border-red-600 dark:bg-input/30 dark:border-input dark:hover:bg-red-500/20 dark:hover:text-red-500 dark:hover:border-red-500 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive-secondary':\n 'border bg-background shadow-xs hover:bg-destructive/10 hover:text-destructive hover:border-destructive dark:bg-input/30 dark:border-input dark:hover:bg-destructive/20 dark:hover:border-destructive [--z-wave-color:var(--color-destructive)]',\n 'outline-primary-secondary':\n 'border bg-background shadow-xs hover:bg-primary/10 hover:text-primary hover:border-primary dark:bg-input/30 dark:border-input dark:hover:bg-primary/20 dark:hover:border-primary [--z-wave-color:var(--color-primary)]',\n 'outline-primary-soft':\n 'border bg-background text-primary shadow-xs hover:bg-primary/10 hover:border-primary dark:bg-input/30 dark:border-input dark:hover:bg-primary/20 dark:hover:border-primary [--z-wave-color:var(--color-primary)]',\n 'outline-success-soft':\n 'border bg-background text-green-600 shadow-xs hover:bg-green-600/10 hover:border-green-600 dark:bg-input/30 dark:border-input dark:text-green-500 dark:hover:bg-green-500/20 dark:hover:border-green-500 [--z-wave-color:var(--color-green-600)]',\n 'outline-info-soft':\n 'border bg-background text-blue-600 shadow-xs hover:bg-blue-600/10 hover:border-blue-600 dark:bg-input/30 dark:border-input dark:text-blue-500 dark:hover:bg-blue-500/20 dark:hover:border-blue-500 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning-soft':\n 'border bg-background text-amber-600 shadow-xs hover:bg-amber-500/10 hover:border-amber-500 dark:bg-input/30 dark:border-input dark:text-amber-400 dark:hover:bg-amber-400/20 dark:hover:border-amber-400 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error-soft':\n 'border bg-background text-red-600 shadow-xs hover:bg-red-600/10 hover:border-red-600 dark:bg-input/30 dark:border-input dark:text-red-500 dark:hover:bg-red-500/20 dark:hover:border-red-500 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive-soft':\n 'border bg-background text-destructive shadow-xs hover:bg-destructive/10 hover:border-destructive dark:bg-input/30 dark:border-input dark:hover:bg-destructive/20 dark:hover:border-destructive [--z-wave-color:var(--color-destructive)]',\n 'outline-primary-soft-border':\n 'border border-primary! bg-background text-primary shadow-xs hover:bg-primary/10 dark:bg-input/30 dark:hover:bg-primary/20 [--z-wave-color:var(--color-primary)]',\n 'outline-success-soft-border':\n 'border border-green-600! bg-background text-green-600 shadow-xs hover:bg-green-600/10 dark:bg-input/30 dark:border-green-500! dark:text-green-500 dark:hover:bg-green-500/20 [--z-wave-color:var(--color-green-600)]',\n 'outline-info-soft-border':\n 'border border-blue-600! bg-background text-blue-600 shadow-xs hover:bg-blue-600/10 dark:bg-input/30 dark:border-blue-500! dark:text-blue-500 dark:hover:bg-blue-500/20 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning-soft-border':\n 'border border-amber-500! bg-background text-amber-600 shadow-xs hover:bg-amber-500/10 dark:bg-input/30 dark:border-amber-400! dark:text-amber-400 dark:hover:bg-amber-400/20 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error-soft-border':\n 'border border-red-600! bg-background text-red-600 shadow-xs hover:bg-red-600/10 dark:bg-input/30 dark:border-red-500! dark:text-red-500 dark:hover:bg-red-500/20 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive-soft-border':\n 'border border-destructive! bg-background text-destructive shadow-xs hover:bg-destructive/10 dark:bg-input/30 dark:hover:bg-destructive/20 [--z-wave-color:var(--color-destructive)]',\n\n ghost:\n 'hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:hover:bg-accent/50 dark:aria-expanded:bg-accent/50 [--z-wave-color:var(--color-foreground)]',\n 'ghost-primary':\n 'text-primary hover:bg-primary/10 dark:hover:bg-primary/20 [--z-wave-color:var(--color-primary)]',\n 'ghost-success':\n 'text-green-600 hover:bg-green-600/10 dark:text-green-500 dark:hover:bg-green-500/20 [--z-wave-color:var(--color-green-600)]',\n 'ghost-info':\n 'text-blue-600 hover:bg-blue-600/10 dark:text-blue-500 dark:hover:bg-blue-500/20 [--z-wave-color:var(--color-blue-600)]',\n 'ghost-warning':\n 'text-amber-600 hover:bg-amber-500/10 dark:text-amber-400 dark:hover:bg-amber-400/20 [--z-wave-color:var(--color-amber-500)]',\n 'ghost-error':\n 'text-red-600 hover:bg-red-600/10 dark:text-red-500 dark:hover:bg-red-500/20 [--z-wave-color:var(--color-red-600)]',\n 'ghost-destructive':\n 'text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 [--z-wave-color:var(--color-destructive)]',\n\n subtle:\n 'bg-accent text-accent-foreground shadow-xs hover:bg-accent/80 dark:bg-accent/50 dark:hover:bg-accent/70 [--z-wave-color:var(--color-foreground)]',\n 'subtle-primary':\n 'bg-primary/10 text-primary shadow-xs hover:bg-primary/20 dark:bg-primary/15 dark:text-primary dark:hover:bg-primary/25 [--z-wave-color:var(--color-primary)]',\n 'subtle-success':\n 'bg-green-600/10 text-green-600 shadow-xs hover:bg-green-600/20 dark:bg-green-500/10 dark:text-green-500 dark:hover:bg-green-500/20 [--z-wave-color:var(--color-green-600)]',\n 'subtle-info':\n 'bg-blue-600/10 text-blue-600 shadow-xs hover:bg-blue-600/20 dark:bg-blue-500/10 dark:text-blue-500 dark:hover:bg-blue-500/20 [--z-wave-color:var(--color-blue-600)]',\n 'subtle-warning':\n 'bg-amber-500/10 text-amber-600 shadow-xs hover:bg-amber-500/20 dark:bg-amber-400/10 dark:text-amber-400 dark:hover:bg-amber-400/20 [--z-wave-color:var(--color-amber-500)]',\n 'subtle-destructive':\n 'bg-destructive/10 text-destructive shadow-xs hover:bg-destructive/20 dark:bg-destructive/15 dark:text-destructive-foreground dark:hover:bg-destructive/25 [--z-wave-color:var(--color-destructive)]',\n 'subtle-outline':\n 'border border-border bg-accent text-accent-foreground shadow-xs hover:bg-accent/80 dark:border-input dark:bg-accent/50 dark:hover:bg-accent/70 [--z-wave-color:var(--color-foreground)]',\n 'subtle-primary-outline':\n 'border border-border bg-primary/10 text-primary shadow-xs hover:bg-primary/20 dark:border-input dark:bg-primary/15 dark:text-primary dark:hover:bg-primary/25 [--z-wave-color:var(--color-primary)]',\n 'subtle-success-outline':\n 'border border-border bg-green-600/10 text-green-600 shadow-xs hover:bg-green-600/20 dark:border-input dark:bg-green-500/10 dark:text-green-500 dark:hover:bg-green-500/20 [--z-wave-color:var(--color-green-600)]',\n 'subtle-info-outline':\n 'border border-border bg-blue-600/10 text-blue-600 shadow-xs hover:bg-blue-600/20 dark:border-input dark:bg-blue-500/10 dark:text-blue-500 dark:hover:bg-blue-500/20 [--z-wave-color:var(--color-blue-600)]',\n 'subtle-warning-outline':\n 'border border-border bg-amber-500/10 text-amber-600 shadow-xs hover:bg-amber-500/20 dark:border-input dark:bg-amber-400/10 dark:text-amber-400 dark:hover:bg-amber-400/20 [--z-wave-color:var(--color-amber-500)]',\n 'subtle-destructive-outline':\n 'border border-border bg-destructive/10 text-destructive shadow-xs hover:bg-destructive/20 dark:border-input dark:bg-destructive/15 dark:text-destructive-foreground dark:hover:bg-destructive/25 [--z-wave-color:var(--color-destructive)]',\n\n link: 'text-primary underline-offset-4 hover:underline',\n },\n zSize: {\n default: 'h-9 px-3 py-2 [&[data-icon-only]]:size-9 [&[data-icon-only]]:p-0',\n xs: 'h-7 px-3 py-1 [&[data-icon-only]]:size-7 [&[data-icon-only]]:p-0',\n sm: 'h-8 rounded-sm gap-1.5 px-3 [&[data-icon-only]]:size-8 [&[data-icon-only]]:p-0',\n lg: 'h-10 rounded-sm px-3 [&[data-icon-only]]:size-10 [&[data-icon-only]]:p-0',\n xl: 'h-12 rounded-sm px-3 text-base [&[data-icon-only]]:size-12 [&[data-icon-only]]:p-0',\n },\n zShape: {\n default: 'rounded-sm',\n circle: 'rounded-full',\n square: 'rounded-none',\n },\n zLoading: {\n true: 'opacity-50 pointer-events-none',\n },\n zDisabled: {\n true: 'opacity-50 pointer-events-none',\n },\n },\n defaultVariants: {\n zType: 'default',\n zSize: 'default',\n zShape: 'default',\n },\n }\n);\n","import {\n afterNextRender,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n signal,\n ViewEncapsulation,\n type OnDestroy,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport {\n type ZAnimatedIcon,\n type ZIconAnimationTrigger,\n type ZIconVariants,\n type ZIcon,\n} from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZButtonVariants } from './z-button.types';\nimport { zButtonVariants } from './z-button.variants';\n\n@Component({\n selector: 'z-button, button[z-button], a[z-button]',\n imports: [ZIconComponent, TranslatePipe],\n standalone: true,\n templateUrl: './z-button.component.html',\n styleUrl: './z-button.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'zClasses()',\n '[attr.data-icon-only]': 'zIconOnly() || null',\n '(click)': 'onWaveClick()',\n },\n exportAs: 'zButton',\n})\nexport class ZButtonComponent implements OnDestroy {\n private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n public readonly class = input<ClassValue>('');\n public readonly zType = input<ZButtonVariants['zType']>('default');\n public readonly zSize = input<ZButtonVariants['zSize']>('default');\n public readonly zShape = input<ZButtonVariants['zShape']>('default');\n public readonly zLabel = input<string>('');\n public readonly zLoading = input(false, { transform: zTransform });\n public readonly zDisabled = input(false);\n public readonly zTypeIcon = input<ZIcon | undefined>(undefined);\n public readonly zAnimatedTypeIcon = input<ZAnimatedIcon | undefined>(undefined);\n public readonly zAnimateIcon = input(false, { transform: zTransform });\n public readonly zAnimationTriggerIcon = input<ZIconAnimationTrigger>('manual');\n public readonly zSizeIcon = input<ZIconVariants['zSize']>('20');\n public readonly zStrokeWidthIcon = input<number>(2);\n public readonly zWave = input(true, { transform: zTransform });\n\n private readonly _zIconOnlyState = signal(false);\n private _mutationObserver: MutationObserver | null = null;\n\n protected readonly zIconOnly = this._zIconOnlyState.asReadonly();\n protected readonly zClasses = computed(() =>\n zMergeClasses(\n zButtonVariants({\n zType: this.zType(),\n zSize: this.zSize(),\n zShape: this.zShape(),\n zLoading: this.zLoading(),\n zDisabled: this.zDisabled(),\n }),\n this.class()\n )\n );\n\n constructor() {\n afterNextRender(() => {\n const check = () => {\n const el = this._elementRef.nativeElement;\n const hasIcon = el.querySelector('z-icon, [z-icon]') !== null;\n const children = Array.from<Node>(el.childNodes);\n const hasText = children.some(node => {\n if (node.nodeType === 3) {\n return node.textContent?.trim() !== '';\n }\n\n if (node.nodeType === 1) {\n const element = node as HTMLElement;\n if (element.matches('z-icon, [z-icon]')) {\n return false;\n }\n\n return element.textContent?.trim() !== '';\n }\n\n return false;\n });\n\n this._zIconOnlyState.set(hasIcon && !hasText);\n };\n\n check();\n this._mutationObserver = new MutationObserver(check);\n this._mutationObserver.observe(this._elementRef.nativeElement, {\n childList: true,\n characterData: true,\n subtree: true,\n });\n });\n }\n\n ngOnDestroy(): void {\n if (this._mutationObserver) {\n this._mutationObserver.disconnect();\n this._mutationObserver = null;\n }\n }\n\n protected onWaveClick(): void {\n const type = this.zType();\n if (!this.zWave() || this.zLoading() || type === 'link') {\n return;\n }\n\n const el = this._elementRef.nativeElement;\n const waveEl = document.createElement('span');\n waveEl.className = 'z-animate-wave';\n el.appendChild(waveEl);\n el.classList.add('z-wave-active');\n const onWaveAnimationEnd = (event: AnimationEvent): void => {\n if (event.animationName !== 'z-fade-effect') {\n return;\n }\n\n waveEl.remove();\n el.classList.remove('z-wave-active');\n waveEl.removeEventListener('animationend', onWaveAnimationEnd);\n };\n\n waveEl.addEventListener('animationend', onWaveAnimationEnd);\n }\n}\n","@if ((zTypeIcon() || zAnimatedTypeIcon()) && !zLoading()) {\n <i\n z-icon\n [zType]=\"zTypeIcon() || 'lucideLoader'\"\n [zAnimatedType]=\"zAnimatedTypeIcon()\"\n [zAnimate]=\"zAnimateIcon()\"\n [zAnimationTrigger]=\"zAnimationTriggerIcon()\"\n [zSize]=\"zSizeIcon()\"\n [zStrokeWidth]=\"zStrokeWidthIcon()\"></i>\n}\n@if (zLoading()) {\n <i z-icon zType=\"lucideLoader\" class=\"z-animate-spin\" [zSize]=\"zSizeIcon()\" [zStrokeWidth]=\"2.8\"></i>\n}\n@if (zLabel()) {\n <span class=\"min-w-0 truncate\">{{ zLabel() | translate }}</span>\n} @else {\n <span class=\"min-w-0 truncate\">\n <ng-content />\n </span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"shival99-z-ui-components-z-button.mjs","sources":["../../../../libs/core-ui/components/z-button/z-button.variants.ts","../../../../libs/core-ui/components/z-button/z-button.component.ts","../../../../libs/core-ui/components/z-button/z-button.component.html","../../../../libs/core-ui/components/z-button/shival99-z-ui-components-z-button.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const zButtonVariants = cva(\n \"cursor-pointer relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-[450] select-none transition-[background-color,border-color,color,box-shadow,opacity] duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n zType: {\n default:\n 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 [--z-wave-color:var(--color-primary)]',\n primary:\n 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 [--z-wave-color:var(--color-primary)]',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 [--z-wave-color:var(--color-secondary-foreground)]',\n destructive:\n 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 [--z-wave-color:var(--color-destructive)]',\n 'destructive-heartbeat':\n 'z-button-heartbeat bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 [--z-wave-color:var(--color-destructive)]',\n success:\n 'bg-green-600 text-white shadow-xs hover:bg-green-700 focus-visible:ring-green-500/20 dark:bg-green-600 dark:hover:bg-green-700 [--z-wave-color:var(--color-green-600)]',\n info: 'bg-blue-600 text-white shadow-xs hover:bg-blue-700 focus-visible:ring-blue-500/20 dark:bg-blue-600 dark:hover:bg-blue-700 [--z-wave-color:var(--color-blue-600)]',\n warning:\n 'bg-amber-500 text-white shadow-xs hover:bg-amber-600 focus-visible:ring-amber-500/20 dark:bg-amber-500 dark:hover:bg-amber-600 [--z-wave-color:var(--color-amber-500)]',\n error:\n 'bg-red-600 text-white shadow-xs hover:bg-red-700 focus-visible:ring-red-500/20 dark:bg-red-600 dark:hover:bg-red-700 [--z-wave-color:var(--color-red-600)]',\n\n outline:\n 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 [--z-wave-color:var(--color-foreground)]',\n 'outline-primary':\n 'border border-primary text-primary bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground focus-visible:ring-primary/20 [--z-wave-color:var(--color-primary)]',\n 'outline-secondary':\n 'border border-secondary-foreground/20 text-secondary-foreground bg-transparent shadow-xs hover:bg-secondary hover:text-secondary-foreground focus-visible:ring-secondary/20 [--z-wave-color:var(--color-secondary-foreground)]',\n 'outline-success':\n 'border border-green-600 text-green-600 bg-transparent shadow-xs hover:bg-green-600 hover:text-white focus-visible:ring-green-500/20 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-600 [--z-wave-color:var(--color-green-600)]',\n 'outline-info':\n 'border border-blue-600 text-blue-600 bg-transparent shadow-xs hover:bg-blue-600 hover:text-white focus-visible:ring-blue-500/20 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-600 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning':\n 'border border-amber-500 text-amber-600 bg-transparent shadow-xs hover:bg-amber-500 hover:text-white focus-visible:ring-amber-500/20 dark:border-amber-400 dark:text-amber-400 dark:hover:bg-amber-500 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error':\n 'border border-red-600 text-red-600 bg-transparent shadow-xs hover:bg-red-600 hover:text-white focus-visible:ring-red-500/20 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-600 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive':\n 'border border-destructive text-destructive bg-transparent shadow-xs hover:bg-destructive hover:text-white focus-visible:ring-destructive/20 [--z-wave-color:var(--color-destructive)]',\n 'outline-shimmer':\n 'z-button-shimmer border border-transparent bg-background text-foreground shadow-xs hover:bg-background dark:bg-background dark:hover:bg-background [--z-wave-color:var(--color-primary)]',\n 'outline-success-secondary':\n 'border bg-background shadow-xs hover:bg-green-600/10 hover:text-green-600 hover:border-green-600 dark:bg-input/30 dark:border-input dark:hover:bg-green-500/20 dark:hover:text-green-500 dark:hover:border-green-500 [--z-wave-color:var(--color-green-600)]',\n 'outline-info-secondary':\n 'border bg-background shadow-xs hover:bg-blue-600/10 hover:text-blue-600 hover:border-blue-600 dark:bg-input/30 dark:border-input dark:hover:bg-blue-500/20 dark:hover:text-blue-500 dark:hover:border-blue-500 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning-secondary':\n 'border bg-background shadow-xs hover:bg-amber-500/10 hover:text-amber-600 hover:border-amber-500 dark:bg-input/30 dark:border-input dark:hover:bg-amber-400/20 dark:hover:text-amber-400 dark:hover:border-amber-400 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error-secondary':\n 'border bg-background shadow-xs hover:bg-red-600/10 hover:text-red-600 hover:border-red-600 dark:bg-input/30 dark:border-input dark:hover:bg-red-500/20 dark:hover:text-red-500 dark:hover:border-red-500 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive-secondary':\n 'border bg-background shadow-xs hover:bg-destructive/10 hover:text-destructive hover:border-destructive dark:bg-input/30 dark:border-input dark:hover:bg-destructive/20 dark:hover:border-destructive [--z-wave-color:var(--color-destructive)]',\n 'outline-primary-secondary':\n 'border bg-background shadow-xs hover:bg-primary/10 hover:text-primary hover:border-primary dark:bg-input/30 dark:border-input dark:hover:bg-primary/20 dark:hover:border-primary [--z-wave-color:var(--color-primary)]',\n 'outline-primary-soft':\n 'border bg-background text-primary shadow-xs hover:bg-primary/10 hover:border-primary dark:bg-input/30 dark:border-input dark:hover:bg-primary/20 dark:hover:border-primary [--z-wave-color:var(--color-primary)]',\n 'outline-success-soft':\n 'border bg-background text-green-600 shadow-xs hover:bg-green-600/10 hover:border-green-600 dark:bg-input/30 dark:border-input dark:text-green-500 dark:hover:bg-green-500/20 dark:hover:border-green-500 [--z-wave-color:var(--color-green-600)]',\n 'outline-info-soft':\n 'border bg-background text-blue-600 shadow-xs hover:bg-blue-600/10 hover:border-blue-600 dark:bg-input/30 dark:border-input dark:text-blue-500 dark:hover:bg-blue-500/20 dark:hover:border-blue-500 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning-soft':\n 'border bg-background text-amber-600 shadow-xs hover:bg-amber-500/10 hover:border-amber-500 dark:bg-input/30 dark:border-input dark:text-amber-400 dark:hover:bg-amber-400/20 dark:hover:border-amber-400 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error-soft':\n 'border bg-background text-red-600 shadow-xs hover:bg-red-600/10 hover:border-red-600 dark:bg-input/30 dark:border-input dark:text-red-500 dark:hover:bg-red-500/20 dark:hover:border-red-500 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive-soft':\n 'border bg-background text-destructive shadow-xs hover:bg-destructive/10 hover:border-destructive dark:bg-input/30 dark:border-input dark:hover:bg-destructive/20 dark:hover:border-destructive [--z-wave-color:var(--color-destructive)]',\n 'outline-primary-soft-border':\n 'border border-primary! bg-background text-primary shadow-xs hover:bg-primary/10 dark:bg-input/30 dark:hover:bg-primary/20 [--z-wave-color:var(--color-primary)]',\n 'outline-success-soft-border':\n 'border border-green-600! bg-background text-green-600 shadow-xs hover:bg-green-600/10 dark:bg-input/30 dark:border-green-500! dark:text-green-500 dark:hover:bg-green-500/20 [--z-wave-color:var(--color-green-600)]',\n 'outline-info-soft-border':\n 'border border-blue-600! bg-background text-blue-600 shadow-xs hover:bg-blue-600/10 dark:bg-input/30 dark:border-blue-500! dark:text-blue-500 dark:hover:bg-blue-500/20 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning-soft-border':\n 'border border-amber-500! bg-background text-amber-600 shadow-xs hover:bg-amber-500/10 dark:bg-input/30 dark:border-amber-400! dark:text-amber-400 dark:hover:bg-amber-400/20 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error-soft-border':\n 'border border-red-600! bg-background text-red-600 shadow-xs hover:bg-red-600/10 dark:bg-input/30 dark:border-red-500! dark:text-red-500 dark:hover:bg-red-500/20 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive-soft-border':\n 'border border-destructive! bg-background text-destructive shadow-xs hover:bg-destructive/10 dark:bg-input/30 dark:hover:bg-destructive/20 [--z-wave-color:var(--color-destructive)]',\n\n ghost:\n 'hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:hover:bg-accent/50 dark:aria-expanded:bg-accent/50 [--z-wave-color:var(--color-foreground)]',\n 'ghost-primary':\n 'text-primary hover:bg-primary/10 dark:hover:bg-primary/20 [--z-wave-color:var(--color-primary)]',\n 'ghost-success':\n 'text-green-600 hover:bg-green-600/10 dark:text-green-500 dark:hover:bg-green-500/20 [--z-wave-color:var(--color-green-600)]',\n 'ghost-info':\n 'text-blue-600 hover:bg-blue-600/10 dark:text-blue-500 dark:hover:bg-blue-500/20 [--z-wave-color:var(--color-blue-600)]',\n 'ghost-warning':\n 'text-amber-600 hover:bg-amber-500/10 dark:text-amber-400 dark:hover:bg-amber-400/20 [--z-wave-color:var(--color-amber-500)]',\n 'ghost-error':\n 'text-red-600 hover:bg-red-600/10 dark:text-red-500 dark:hover:bg-red-500/20 [--z-wave-color:var(--color-red-600)]',\n 'ghost-destructive':\n 'text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 [--z-wave-color:var(--color-destructive)]',\n\n subtle:\n 'bg-accent text-accent-foreground shadow-xs hover:bg-accent/80 dark:bg-accent/50 dark:hover:bg-accent/70 [--z-wave-color:var(--color-foreground)]',\n 'subtle-primary':\n 'bg-primary/10 text-primary shadow-xs hover:bg-primary/20 dark:bg-primary/15 dark:text-primary dark:hover:bg-primary/25 [--z-wave-color:var(--color-primary)]',\n 'subtle-success':\n 'bg-green-600/10 text-green-600 shadow-xs hover:bg-green-600/20 dark:bg-green-500/10 dark:text-green-500 dark:hover:bg-green-500/20 [--z-wave-color:var(--color-green-600)]',\n 'subtle-info':\n 'bg-blue-600/10 text-blue-600 shadow-xs hover:bg-blue-600/20 dark:bg-blue-500/10 dark:text-blue-500 dark:hover:bg-blue-500/20 [--z-wave-color:var(--color-blue-600)]',\n 'subtle-warning':\n 'bg-amber-500/10 text-amber-600 shadow-xs hover:bg-amber-500/20 dark:bg-amber-400/10 dark:text-amber-400 dark:hover:bg-amber-400/20 [--z-wave-color:var(--color-amber-500)]',\n 'subtle-destructive':\n 'bg-destructive/10 text-destructive shadow-xs hover:bg-destructive/20 dark:bg-destructive/15 dark:text-destructive-foreground dark:hover:bg-destructive/25 [--z-wave-color:var(--color-destructive)]',\n 'subtle-outline':\n 'border border-border bg-accent text-accent-foreground shadow-xs hover:bg-accent/80 dark:border-input dark:bg-accent/50 dark:hover:bg-accent/70 [--z-wave-color:var(--color-foreground)]',\n 'subtle-primary-outline':\n 'border border-border bg-primary/10 text-primary shadow-xs hover:bg-primary/20 dark:border-input dark:bg-primary/15 dark:text-primary dark:hover:bg-primary/25 [--z-wave-color:var(--color-primary)]',\n 'subtle-success-outline':\n 'border border-border bg-green-600/10 text-green-600 shadow-xs hover:bg-green-600/20 dark:border-input dark:bg-green-500/10 dark:text-green-500 dark:hover:bg-green-500/20 [--z-wave-color:var(--color-green-600)]',\n 'subtle-info-outline':\n 'border border-border bg-blue-600/10 text-blue-600 shadow-xs hover:bg-blue-600/20 dark:border-input dark:bg-blue-500/10 dark:text-blue-500 dark:hover:bg-blue-500/20 [--z-wave-color:var(--color-blue-600)]',\n 'subtle-warning-outline':\n 'border border-border bg-amber-500/10 text-amber-600 shadow-xs hover:bg-amber-500/20 dark:border-input dark:bg-amber-400/10 dark:text-amber-400 dark:hover:bg-amber-400/20 [--z-wave-color:var(--color-amber-500)]',\n 'subtle-destructive-outline':\n 'border border-border bg-destructive/10 text-destructive shadow-xs hover:bg-destructive/20 dark:border-input dark:bg-destructive/15 dark:text-destructive-foreground dark:hover:bg-destructive/25 [--z-wave-color:var(--color-destructive)]',\n\n link: 'text-primary underline-offset-4 hover:underline',\n },\n zSize: {\n default: 'h-9 px-3 py-2 [&>.z-button-content]:gap-2 [&[data-icon-only]]:size-9 [&[data-icon-only]]:p-0',\n xs: 'h-7 px-3 py-1 [&>.z-button-content]:gap-2 [&[data-icon-only]]:size-7 [&[data-icon-only]]:p-0',\n sm: 'h-8 rounded-sm gap-1.5 px-3 [&>.z-button-content]:gap-1.5 [&[data-icon-only]]:size-8 [&[data-icon-only]]:p-0',\n lg: 'h-10 rounded-sm px-3 [&>.z-button-content]:gap-2 [&[data-icon-only]]:size-10 [&[data-icon-only]]:p-0',\n xl: 'h-12 rounded-sm px-3 text-base [&>.z-button-content]:gap-2 [&[data-icon-only]]:size-12 [&[data-icon-only]]:p-0',\n },\n zShape: {\n default: 'rounded-sm',\n circle: 'rounded-full',\n square: 'rounded-none',\n },\n zLoading: {\n true: 'opacity-50 pointer-events-none',\n },\n zDisabled: {\n true: 'opacity-50 pointer-events-none',\n },\n },\n defaultVariants: {\n zType: 'default',\n zSize: 'default',\n zShape: 'default',\n },\n }\n);\n","import {\n afterNextRender,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n signal,\n ViewEncapsulation,\n type OnDestroy,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport {\n type ZAnimatedIcon,\n type ZIconAnimationTrigger,\n type ZIconVariants,\n type ZIcon,\n} from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZButtonVariants } from './z-button.types';\nimport { zButtonVariants } from './z-button.variants';\n\n@Component({\n selector: 'z-button, button[z-button], a[z-button]',\n imports: [ZIconComponent, TranslatePipe],\n standalone: true,\n templateUrl: './z-button.component.html',\n styleUrl: './z-button.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'zClasses()',\n '[attr.data-icon-only]': 'zIconOnly() || null',\n '(click)': 'onWaveClick()',\n },\n exportAs: 'zButton',\n})\nexport class ZButtonComponent implements OnDestroy {\n private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n public readonly class = input<ClassValue>('');\n public readonly zType = input<ZButtonVariants['zType']>('default');\n public readonly zSize = input<ZButtonVariants['zSize']>('default');\n public readonly zShape = input<ZButtonVariants['zShape']>('default');\n public readonly zLabel = input<string>('');\n public readonly zLoading = input(false, { transform: zTransform });\n public readonly zDisabled = input(false);\n public readonly zTypeIcon = input<ZIcon | undefined>(undefined);\n public readonly zAnimatedTypeIcon = input<ZAnimatedIcon | undefined>(undefined);\n public readonly zAnimateIcon = input(false, { transform: zTransform });\n public readonly zAnimationTriggerIcon = input<ZIconAnimationTrigger>('manual');\n public readonly zSizeIcon = input<ZIconVariants['zSize']>('20');\n public readonly zStrokeWidthIcon = input<number>(2);\n public readonly zWave = input(true, { transform: zTransform });\n\n private readonly _zIconOnlyState = signal(false);\n private _mutationObserver: MutationObserver | null = null;\n\n protected readonly zIconOnly = this._zIconOnlyState.asReadonly();\n protected readonly zClasses = computed(() =>\n zMergeClasses(\n zButtonVariants({\n zType: this.zType(),\n zSize: this.zSize(),\n zShape: this.zShape(),\n zLoading: this.zLoading(),\n zDisabled: this.zDisabled(),\n }),\n this.class()\n )\n );\n\n constructor() {\n afterNextRender(() => {\n const check = () => {\n const el = this._elementRef.nativeElement;\n const hasIcon = el.querySelector('z-icon, [z-icon]') !== null;\n const children = Array.from<Node>(el.childNodes);\n const hasText = children.some(node => {\n if (node.nodeType === 3) {\n return node.textContent?.trim() !== '';\n }\n\n if (node.nodeType === 1) {\n const element = node as HTMLElement;\n if (element.matches('z-icon, [z-icon]')) {\n return false;\n }\n\n return element.textContent?.trim() !== '';\n }\n\n return false;\n });\n\n this._zIconOnlyState.set(hasIcon && !hasText);\n };\n\n check();\n this._mutationObserver = new MutationObserver(check);\n this._mutationObserver.observe(this._elementRef.nativeElement, {\n childList: true,\n characterData: true,\n subtree: true,\n });\n });\n }\n\n ngOnDestroy(): void {\n if (this._mutationObserver) {\n this._mutationObserver.disconnect();\n this._mutationObserver = null;\n }\n }\n\n protected onWaveClick(): void {\n const type = this.zType();\n if (!this.zWave() || this.zLoading() || type === 'link') {\n return;\n }\n\n const el = this._elementRef.nativeElement;\n const waveEl = document.createElement('span');\n waveEl.className = 'z-animate-wave';\n el.appendChild(waveEl);\n el.classList.add('z-wave-active');\n const onWaveAnimationEnd = (event: AnimationEvent): void => {\n if (event.animationName !== 'z-fade-effect') {\n return;\n }\n\n waveEl.remove();\n el.classList.remove('z-wave-active');\n waveEl.removeEventListener('animationend', onWaveAnimationEnd);\n };\n\n waveEl.addEventListener('animationend', onWaveAnimationEnd);\n }\n}\n","@if ((zTypeIcon() || zAnimatedTypeIcon()) && !zLoading()) {\n <i\n z-icon\n [zType]=\"zTypeIcon() || 'lucideLoader'\"\n [zAnimatedType]=\"zAnimatedTypeIcon()\"\n [zAnimate]=\"zAnimateIcon()\"\n [zAnimationTrigger]=\"zAnimationTriggerIcon()\"\n [zSize]=\"zSizeIcon()\"\n [zStrokeWidth]=\"zStrokeWidthIcon()\"></i>\n}\n@if (zLoading()) {\n <i z-icon zType=\"lucideLoader\" class=\"z-animate-spin\" [zSize]=\"zSizeIcon()\" [zStrokeWidth]=\"2.8\"></i>\n}\n@if (zLabel()) {\n <span class=\"min-w-0 truncate\">{{ zLabel() | translate }}</span>\n} @else {\n <span class=\"z-button-content inline-flex min-w-0 items-center gap-2 truncate\">\n <ng-content />\n </span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/shival99-z-ui-components-z-chat.mjs CHANGED
@@ -515,14 +515,14 @@ class ZChatComponent {
515
515
  return defaults[side];
516
516
  }
517
517
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
518
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZChatComponent, isStandalone: true, selector: "z-chat", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zOpen: { classPropertyName: "zOpen", publicName: "zOpen", isSignal: true, isRequired: false, transformFunction: null }, zMessages: { classPropertyName: "zMessages", publicName: "zMessages", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zSubtitle: { classPropertyName: "zSubtitle", publicName: "zSubtitle", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zSuggestions: { classPropertyName: "zSuggestions", publicName: "zSuggestions", isSignal: true, isRequired: false, transformFunction: null }, zShowSuggestions: { classPropertyName: "zShowSuggestions", publicName: "zShowSuggestions", isSignal: true, isRequired: false, transformFunction: null }, zShowPulse: { classPropertyName: "zShowPulse", publicName: "zShowPulse", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zAllowAttachments: { classPropertyName: "zAllowAttachments", publicName: "zAllowAttachments", isSignal: true, isRequired: false, transformFunction: null }, zAcceptedFiles: { classPropertyName: "zAcceptedFiles", publicName: "zAcceptedFiles", isSignal: true, isRequired: false, transformFunction: null }, zAutoReply: { classPropertyName: "zAutoReply", publicName: "zAutoReply", isSignal: true, isRequired: false, transformFunction: null }, zAutoReplyDelay: { classPropertyName: "zAutoReplyDelay", publicName: "zAutoReplyDelay", isSignal: true, isRequired: false, transformFunction: null }, zFabIcon: { classPropertyName: "zFabIcon", publicName: "zFabIcon", isSignal: true, isRequired: false, transformFunction: null }, zBotIcon: { classPropertyName: "zBotIcon", publicName: "zBotIcon", isSignal: true, isRequired: false, transformFunction: null }, zSendIcon: { classPropertyName: "zSendIcon", publicName: "zSendIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOpen: "zOpenChange", zMessages: "zMessagesChange", zSend: "zSend", zResponse: "zResponse", zToggle: "zToggle", zClear: "zClear" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, classAttribute: "z-chat block" }, viewQueries: [{ propertyName: "_messagesScrollbarRef", first: true, predicate: ["messagesScrollbar"], descendants: true, isSignal: true }, { propertyName: "_chatInputRef", first: true, predicate: ["chatInput"], descendants: true, isSignal: true }, { propertyName: "_fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "_virtualMessageRefs", predicate: ["virtualMessage"], descendants: true, isSignal: true }], exportAs: ["zChat"], ngImport: i0, template: "<div\n [class]=\"wrapperClasses()\"\n [style.top]=\"wrapperTop()\"\n [style.right]=\"wrapperRight()\"\n [style.bottom]=\"wrapperBottom()\"\n [style.left]=\"wrapperLeft()\">\n <div class=\"relative\">\n <section class=\"z-chat-panel-shell\" [class]=\"panelClasses()\">\n <header class=\"from-primary/95 to-primary/75 text-primary-foreground bg-gradient-to-r px-4 py-3.5\">\n <div class=\"flex items-start justify-between gap-3\">\n <div class=\"min-w-0\">\n <div class=\"flex items-center gap-2\">\n <span\n class=\"bg-primary-foreground/15 relative inline-flex size-8 shrink-0 items-center justify-center rounded-full\">\n <z-icon [zType]=\"zBotIcon()\" zSize=\"16\" class=\"text-primary-foreground\" />\n <span\n class=\"ring-primary inline-block size-2.5 rounded-full bg-emerald-300 ring-2\"\n style=\"position: absolute; right: -0.0625rem; bottom: -0.0625rem\"></span>\n </span>\n <h3 class=\"truncate text-sm font-semibold\">{{ zTitle() | translate }}</h3>\n </div>\n </div>\n <div class=\"flex items-center gap-1\">\n <button\n type=\"button\"\n class=\"text-primary-foreground/90 hover:bg-primary-foreground/15 inline-flex size-8 cursor-pointer items-center justify-center rounded-md transition\"\n (click)=\"clearMessages()\"\n title=\"{{ 'i18n_z_ui_chat_ai_new_chat' | translate }}\">\n <z-icon zType=\"lucideRefreshCcw\" zSize=\"17\" />\n </button>\n <button\n type=\"button\"\n class=\"text-primary-foreground/90 hover:bg-primary-foreground/15 inline-flex size-8 cursor-pointer items-center justify-center rounded-md transition\"\n (click)=\"close()\"\n title=\"{{ 'i18n_z_ui_chat_ai_close' | translate }}\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n </button>\n </div>\n </div>\n </header>\n\n <div class=\"z-chat-lower-shell\">\n <ng-scrollbar\n #messagesScrollbar\n (afterInit)=\"onMessagesScrollbarInit()\"\n class=\"z-chat-scrollbar z-chat-content-surface flex-1 overflow-x-hidden\"\n track=\"vertical\"\n orientation=\"vertical\"\n appearance=\"compact\"\n visibility=\"hover\">\n <div class=\"z-chat-messages\">\n @if (hasMessages()) {\n <div class=\"z-chat-messages-sizer\" [style.height.px]=\"messageVirtualizer.getTotalSize()\">\n @for (row of messageVirtualizer.getVirtualItems(); track row.key) {\n @let item = zMessages()[row.index];\n <div\n #virtualMessage\n class=\"z-chat-virtual-row\"\n [attr.data-index]=\"row.index\"\n [style.transform]=\"'translateY(' + row.start + 'px)'\">\n <div\n class=\"z-chat-message\"\n [class.z-chat-message--enter]=\"item.id === newestMessageId()\"\n [class.justify-end]=\"item.role === 'user'\"\n [class.justify-start]=\"item.role === 'assistant'\">\n <div\n class=\"z-chat-message-bubble max-w-[88%] min-w-0 rounded-2xl px-3 py-2.5 text-sm leading-5 [overflow-wrap:anywhere] break-all shadow-xs\"\n [class.bg-primary]=\"item.role === 'user'\"\n [class.text-primary-foreground]=\"item.role === 'user'\"\n [class.rounded-br-md]=\"item.role === 'user'\"\n [class.bg-background]=\"item.role === 'assistant'\"\n [class.border-border/60]=\"item.role === 'assistant'\"\n [class.text-foreground]=\"item.role === 'assistant'\"\n [class.rounded-bl-md]=\"item.role === 'assistant'\"\n [class.border]=\"item.role === 'assistant'\">\n @if (item.files && item.files.length > 0) {\n <div class=\"mb-2 flex flex-col gap-1.5\">\n @for (file of item.files; track file.id) {\n <div\n class=\"flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs\"\n [class.bg-white/15]=\"item.role === 'user'\"\n [class.bg-muted/40]=\"item.role === 'assistant'\">\n @if (isImageAttachment(file) && file.previewUrl) {\n <img\n [src]=\"file.previewUrl\"\n [alt]=\"file.name\"\n class=\"size-8 cursor-pointer rounded-lg object-cover\"\n (click)=\"openImagePreview(file)\"\n title=\"Click to preview\" />\n } @else {\n <span\n class=\"bg-background/80 text-muted-foreground inline-flex size-8 items-center justify-center rounded-lg\"\n [class.bg-white/20]=\"item.role === 'user'\"\n [class.text-white]=\"item.role === 'user'\">\n <z-icon zType=\"lucideFileText\" zSize=\"14\" />\n </span>\n }\n <div class=\"min-w-0 flex-1\">\n <p class=\"truncate text-[0.6875rem] font-medium\">{{ file.name }}</p>\n <p class=\"truncate text-[0.625rem] opacity-80\">{{ formatFileSize(file.size) }}</p>\n </div>\n </div>\n }\n </div>\n }\n {{ item.content }}\n </div>\n </div>\n </div>\n }\n </div>\n } @else if (showEmptyState()) {\n <div class=\"flex h-full min-h-60 flex-col items-center justify-center px-2 text-center\">\n <div\n class=\"from-primary/20 to-primary/5 mb-3 inline-flex size-14 items-center justify-center rounded-full bg-gradient-to-br\">\n <z-icon zType=\"lucideBot\" zSize=\"28\" class=\"text-primary\" />\n </div>\n <h4 class=\"text-foreground text-sm font-semibold\">{{ 'i18n_z_ui_chat_ai_empty_title' | translate }}</h4>\n <p class=\"text-muted-foreground mt-1 text-xs\">{{ 'i18n_z_ui_chat_ai_empty_desc' | translate }}</p>\n\n @if (zSuggestions().length > 0) {\n <div class=\"mt-4 flex w-full flex-col gap-2\">\n @for (item of zSuggestions(); track item.label) {\n <button\n type=\"button\"\n class=\"z-chat-suggestion-item bg-background/95 hover:bg-background border-border/60 text-foreground flex w-full cursor-pointer items-center gap-2 rounded-xl border px-3 py-2 text-left text-xs transition hover:shadow-sm\"\n [style.animation-delay.ms]=\"$index * 70\"\n (click)=\"onSuggestionSelect(item)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon!\" zSize=\"14\" class=\"text-primary shrink-0\" />\n }\n <span class=\"line-clamp-2\">{{ item.label | translate }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (isTyping()) {\n <div class=\"z-chat-message z-chat-message--enter justify-start\">\n <div class=\"bg-background border-border/60 rounded-2xl rounded-bl-md border px-3 py-2\">\n <div class=\"flex items-center gap-1\">\n <span class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"></span>\n <span\n class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"\n style=\"animation-delay: 0.15s\"></span>\n <span\n class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"\n style=\"animation-delay: 0.3s\"></span>\n </div>\n </div>\n </div>\n }\n </div>\n </ng-scrollbar>\n\n <footer class=\"z-chat-footer-surface p-3\">\n @if (attachments().length > 0) {\n <div class=\"mb-2 flex max-h-32 flex-col gap-2 overflow-y-auto pr-1\">\n @for (file of attachments(); track file.id) {\n <div\n class=\"bg-muted/45 border-border/55 relative flex w-full items-center gap-2 rounded-lg border px-2 py-1.5\">\n @if (isImageAttachment(file) && file.previewUrl) {\n <img\n [src]=\"file.previewUrl\"\n [alt]=\"file.name\"\n class=\"size-8 shrink-0 cursor-pointer rounded-lg object-cover\"\n (click)=\"openImagePreview(file)\"\n title=\"Click to preview\" />\n } @else {\n <span\n class=\"bg-background text-muted-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-lg\">\n <z-icon zType=\"lucideFileText\" zSize=\"14\" />\n </span>\n }\n <div class=\"min-w-0 flex-1\">\n <p class=\"truncate text-[0.6875rem] font-medium\">{{ file.name }}</p>\n <p class=\"text-muted-foreground truncate text-[0.625rem]\">{{ formatFileSize(file.size) }}</p>\n </div>\n <button\n type=\"button\"\n class=\"bg-background/80 hover:bg-background text-muted-foreground inline-flex size-5 cursor-pointer items-center justify-center rounded-full transition\"\n (click)=\"removeAttachment(file.id)\">\n <z-icon zType=\"lucideX\" zSize=\"12\" />\n </button>\n </div>\n }\n </div>\n }\n\n <div class=\"z-chat-composer-shell\">\n <div class=\"z-chat-composer-main\" [class.z-chat-composer__field--overflow]=\"isComposerOverflowing()\">\n <textarea\n #chatInput\n class=\"z-chat-composer-textarea\"\n [placeholder]=\"zPlaceholder() | translate\"\n [disabled]=\"zDisabled()\"\n [ngModel]=\"draftMessage()\"\n (ngModelChange)=\"draftMessage.set($event)\"\n (input)=\"onTextareaInput($event)\"\n (paste)=\"onTextareaPaste($event)\"\n (keydown)=\"onInputKeydown($event)\"\n rows=\"3\"></textarea>\n </div>\n\n <div class=\"z-chat-composer-toolbar\">\n <div class=\"z-chat-composer-toolbar-left\">\n @if (zAllowAttachments()) {\n <input\n #fileInput\n type=\"file\"\n class=\"hidden\"\n [attr.accept]=\"zAcceptedFiles()\"\n multiple\n (change)=\"onFileChange($event)\" />\n <button\n type=\"button\"\n class=\"z-chat-composer-tool-btn\"\n [disabled]=\"zDisabled()\"\n (click)=\"onClickAttach()\"\n title=\"{{ 'i18n_z_ui_chat_ai_attach' | translate }}\">\n <z-icon zType=\"lucidePlus\" zSize=\"18\" />\n </button>\n }\n </div>\n\n <div class=\"z-chat-composer-toolbar-right\">\n <button\n type=\"button\"\n class=\"z-chat-composer-send-btn\"\n [disabled]=\"!canSend()\"\n (click)=\"onSendMessage()\"\n title=\"{{ 'i18n_z_ui_chat_ai_send' | translate }}\">\n <z-icon\n [zType]=\"isTyping() ? 'lucideLoaderCircle' : zSendIcon()\"\n zSize=\"16\"\n [class]=\"isTyping() ? 'animate-spin' : ''\" />\n </button>\n </div>\n </div>\n </div>\n </footer>\n </div>\n\n <z-modal\n [zVisible]=\"isPreviewVisible()\"\n [zTitle]=\"previewImage()?.name\"\n [zDescription]=\"previewImageSizeLabel()\"\n zWidth=\"min(92vw, 720px)\"\n [zHideFooter]=\"true\"\n [zMaskClosable]=\"true\"\n zOverlay=\"blur\"\n (zCancel)=\"closeImagePreview()\">\n <div class=\"z-chat-preview-modal-body\">\n <img [src]=\"previewImage()?.url\" [alt]=\"previewImage()?.name\" class=\"z-chat-preview-image\" />\n </div>\n </z-modal>\n </section>\n\n <button\n type=\"button\"\n class=\"pointer-events-auto cursor-pointer\"\n [class]=\"fabClasses()\"\n (click)=\"onToggle()\"\n [attr.aria-expanded]=\"zOpen()\"\n [attr.aria-label]=\"'i18n_z_ui_chat_ai_toggle' | translate\"\n title=\"{{ 'i18n_z_ui_chat_ai_toggle' | translate }}\">\n @if (zShowPulse() && !zOpen()) {\n <span class=\"bg-primary/30 absolute inset-0 animate-ping rounded-full\"></span>\n }\n\n @if (showRipple()) {\n <span class=\"bg-primary-foreground/30 absolute inset-0 animate-ping rounded-full\"></span>\n }\n\n <z-icon\n [zType]=\"zOpen() ? 'lucideX' : zFabIcon()\"\n zSize=\"24\"\n class=\"relative z-1 transition-transform duration-200\"\n [class.rotate-180]=\"zOpen()\" />\n </button>\n </div>\n</div>\n", styles: [".z-chat textarea{scrollbar-width:thin}.z-chat-panel-shell{box-shadow:0 0 28px #00000024!important}:is(.dark,[data-theme=dark]) .z-chat-panel-shell{box-shadow:0 0 28px #00000057!important}.z-chat-composer__field--overflow:after{position:absolute;right:0;bottom:0;left:0;height:1rem;pointer-events:none;content:\"\";background:linear-gradient(to top,var(--background) 22%,transparent)}.z-chat-composer-shell{position:relative;display:flex;width:100%;flex-direction:column;border:1px solid color-mix(in oklab,var(--border) 82%,transparent);border-radius:var(--radius-xl);background:linear-gradient(180deg,color-mix(in oklab,var(--card) 98%,var(--background) 2%),color-mix(in oklab,var(--card) 92%,var(--background) 8%));box-shadow:0 6px 18px #00000014;transition:box-shadow .2s ease}.z-chat-composer-shell:focus-within{box-shadow:0 6px 18px #00000014}:is(.dark,[data-theme=dark]) .z-chat-composer-shell{border-color:var(--border);background:linear-gradient(180deg,color-mix(in oklab,var(--card) 96%,var(--background) 4%),color-mix(in oklab,var(--card) 88%,var(--background) 12%));box-shadow:0 10px 24px #00000057}.z-chat-composer-main{position:relative;overflow:hidden;padding:.7rem .35rem .45rem .85rem}.z-chat-composer-textarea{width:100%;height:4.125rem;max-height:4.125rem;border:none;background:transparent;resize:none;overflow-x:hidden;font-size:.875rem;line-height:1.4rem;color:var(--foreground);outline:none;padding-right:.2rem;scrollbar-width:thin;overflow-wrap:anywhere;word-break:break-word}.z-chat-composer-textarea::placeholder{color:var(--muted-foreground)}.z-chat-composer-textarea::-webkit-scrollbar{width:.375rem}.z-chat-composer-textarea::-webkit-scrollbar-track{background:transparent}.z-chat-composer-textarea::-webkit-scrollbar-thumb{border-radius:62.4375rem;background:#64748b73}:is(.dark,[data-theme=dark]) .z-chat-composer-textarea::-webkit-scrollbar-thumb{background:#94a3b88c}.z-chat-composer-toolbar{display:flex;align-items:center;justify-content:space-between;border-top:.0625rem solid rgba(219,219,219,.6);padding:.55rem .7rem .65rem}:is(.dark,[data-theme=dark]) .z-chat-composer-toolbar{border-top-color:#00000038}.z-chat-composer-toolbar-left,.z-chat-composer-toolbar-right{display:flex;align-items:center}.z-chat-composer-tool-btn{display:inline-flex;height:1.75rem;width:1.75rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md);border:none;background:transparent;color:#374151;transition:background-color .2s ease}.z-chat-composer-tool-btn:hover{background:#0000000f}:is(.dark,[data-theme=dark]) .z-chat-composer-tool-btn{color:#e5e7ebe6}:is(.dark,[data-theme=dark]) .z-chat-composer-tool-btn:hover{background:#ffffff1a}.z-chat-composer-tool-btn:disabled{cursor:not-allowed;opacity:.5}.z-chat-composer-send-btn{display:inline-flex;height:2rem;width:2rem;cursor:pointer;align-items:center;justify-content:center;border-radius:62.4375rem;border:1px solid rgba(0,0,0,.1);background:var(--primary);color:var(--primary-foreground);box-shadow:0 2px 8px #0000002e,inset 0 1px #ffffff2e;transition:transform .15s ease,opacity .2s ease,box-shadow .2s ease}.z-chat-composer-send-btn:hover{transform:translateY(-.0625rem);box-shadow:0 4px 12px #00000038,inset 0 1px #ffffff38}.z-chat-composer-send-btn:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}.z-chat-scrollbar{contain:layout}.z-chat-content-surface{background:var(--card)}.z-chat-lower-shell{display:flex;min-height:0;flex:1;flex-direction:column;overflow:hidden;background:var(--card);color:var(--card-foreground);border:1px solid transparent;border-top:0;border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}:is(.dark,[data-theme=dark]) .z-chat-lower-shell{border-color:var(--border);border-top:0}.z-chat-footer-surface{background:transparent;border-top:.0625rem solid color-mix(in oklab,var(--border) 70%,transparent)}:is(.dark,[data-theme=dark]) .z-chat-footer-surface{background:transparent;border-top-color:var(--border)}.z-chat-messages{min-height:100%;overflow-x:hidden;padding:.875rem .75rem;contain:content}.z-chat-messages-sizer{position:relative;width:100%}.z-chat-virtual-row{position:absolute;top:0;left:0;width:100%;padding:.5rem 0}.z-chat-virtual-row>.z-chat-message{margin:0}.z-chat-message{display:flex;margin:.5rem 0;padding:0 2px;transform-origin:bottom center;contain:layout style}.z-chat-message-bubble{transform:translateZ(0);backface-visibility:hidden}.z-chat-message--enter{animation:z-chat-message-push-in .3s ease-out;will-change:transform,opacity}.z-chat-suggestion-item{animation:z-chat-suggestion-reveal .28s ease-out both;will-change:transform,opacity}.z-chat-preview-modal-body{display:flex;align-items:center;justify-content:center;max-height:min(70vh,40rem);padding:.25rem}.z-chat-preview-image{max-width:100%;max-height:min(66vh,37.5rem);border-radius:var(--radius-lg);object-fit:contain}@keyframes z-chat-message-push-in{0%{opacity:0;transform:translateY(.9375rem) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes z-chat-suggestion-reveal{0%{opacity:0;transform:translateY(.5rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZModalComponent, selector: "z-modal", inputs: ["class", "zBodyClass", "zVisible", "zTitle", "zDescription", "zWidth", "zClosable", "zMaskClosable", "zDisableShadow", "zHeaderBorder", "zFooterBorder", "zHideHeader", "zHideFooter", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zContentLoading", "zSkeletonRows", "zOverlay"], outputs: ["zOk", "zCancel", "zAfterClose", "zScrollbar", "zVisibleChange"], exportAs: ["zModal"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
518
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZChatComponent, isStandalone: true, selector: "z-chat", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zOpen: { classPropertyName: "zOpen", publicName: "zOpen", isSignal: true, isRequired: false, transformFunction: null }, zMessages: { classPropertyName: "zMessages", publicName: "zMessages", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zSubtitle: { classPropertyName: "zSubtitle", publicName: "zSubtitle", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zSuggestions: { classPropertyName: "zSuggestions", publicName: "zSuggestions", isSignal: true, isRequired: false, transformFunction: null }, zShowSuggestions: { classPropertyName: "zShowSuggestions", publicName: "zShowSuggestions", isSignal: true, isRequired: false, transformFunction: null }, zShowPulse: { classPropertyName: "zShowPulse", publicName: "zShowPulse", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zAllowAttachments: { classPropertyName: "zAllowAttachments", publicName: "zAllowAttachments", isSignal: true, isRequired: false, transformFunction: null }, zAcceptedFiles: { classPropertyName: "zAcceptedFiles", publicName: "zAcceptedFiles", isSignal: true, isRequired: false, transformFunction: null }, zAutoReply: { classPropertyName: "zAutoReply", publicName: "zAutoReply", isSignal: true, isRequired: false, transformFunction: null }, zAutoReplyDelay: { classPropertyName: "zAutoReplyDelay", publicName: "zAutoReplyDelay", isSignal: true, isRequired: false, transformFunction: null }, zFabIcon: { classPropertyName: "zFabIcon", publicName: "zFabIcon", isSignal: true, isRequired: false, transformFunction: null }, zBotIcon: { classPropertyName: "zBotIcon", publicName: "zBotIcon", isSignal: true, isRequired: false, transformFunction: null }, zSendIcon: { classPropertyName: "zSendIcon", publicName: "zSendIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOpen: "zOpenChange", zMessages: "zMessagesChange", zSend: "zSend", zResponse: "zResponse", zToggle: "zToggle", zClear: "zClear" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, classAttribute: "z-chat block" }, viewQueries: [{ propertyName: "_messagesScrollbarRef", first: true, predicate: ["messagesScrollbar"], descendants: true, isSignal: true }, { propertyName: "_chatInputRef", first: true, predicate: ["chatInput"], descendants: true, isSignal: true }, { propertyName: "_fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "_virtualMessageRefs", predicate: ["virtualMessage"], descendants: true, isSignal: true }], exportAs: ["zChat"], ngImport: i0, template: "<div\n [class]=\"wrapperClasses()\"\n [style.top]=\"wrapperTop()\"\n [style.right]=\"wrapperRight()\"\n [style.bottom]=\"wrapperBottom()\"\n [style.left]=\"wrapperLeft()\">\n <div class=\"relative\">\n <section class=\"z-chat-panel-shell\" [class]=\"panelClasses()\">\n <header class=\"from-primary/95 to-primary/75 text-primary-foreground bg-gradient-to-r px-4 py-3.5\">\n <div class=\"flex items-start justify-between gap-3\">\n <div class=\"min-w-0\">\n <div class=\"flex items-center gap-2\">\n <span\n class=\"bg-primary-foreground/15 relative inline-flex size-8 shrink-0 items-center justify-center rounded-full\">\n <z-icon [zType]=\"zBotIcon()\" zSize=\"16\" class=\"text-primary-foreground\" />\n <span\n class=\"ring-primary inline-block size-2.5 rounded-full bg-emerald-300 ring-2\"\n style=\"position: absolute; right: -0.0625rem; bottom: -0.0625rem\"></span>\n </span>\n <h3 class=\"truncate text-sm font-semibold\">{{ zTitle() | translate }}</h3>\n </div>\n </div>\n <div class=\"flex items-center gap-1\">\n <button\n type=\"button\"\n class=\"text-primary-foreground/90 hover:bg-primary-foreground/15 inline-flex size-8 cursor-pointer items-center justify-center rounded-md transition\"\n (click)=\"clearMessages()\"\n title=\"{{ 'i18n_z_ui_chat_ai_new_chat' | translate }}\">\n <z-icon zType=\"lucideRefreshCcw\" zSize=\"17\" />\n </button>\n <button\n type=\"button\"\n class=\"text-primary-foreground/90 hover:bg-primary-foreground/15 inline-flex size-8 cursor-pointer items-center justify-center rounded-md transition\"\n (click)=\"close()\"\n title=\"{{ 'i18n_z_ui_chat_ai_close' | translate }}\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n </button>\n </div>\n </div>\n </header>\n\n <div class=\"z-chat-lower-shell\">\n <ng-scrollbar\n #messagesScrollbar\n (afterInit)=\"onMessagesScrollbarInit()\"\n class=\"z-chat-scrollbar z-chat-content-surface flex-1 overflow-x-hidden\"\n track=\"vertical\"\n orientation=\"vertical\"\n appearance=\"compact\"\n visibility=\"hover\">\n <div class=\"z-chat-messages\">\n @if (hasMessages()) {\n <div class=\"z-chat-messages-sizer\" [style.height.px]=\"messageVirtualizer.getTotalSize()\">\n @for (row of messageVirtualizer.getVirtualItems(); track row.key) {\n @let item = zMessages()[row.index];\n <div\n #virtualMessage\n class=\"z-chat-virtual-row\"\n [attr.data-index]=\"row.index\"\n [style.transform]=\"'translateY(' + row.start + 'px)'\">\n <div\n class=\"z-chat-message\"\n [class.z-chat-message--enter]=\"item.id === newestMessageId()\"\n [class.justify-end]=\"item.role === 'user'\"\n [class.justify-start]=\"item.role === 'assistant'\">\n <div\n class=\"z-chat-message-bubble max-w-[88%] min-w-0 rounded-2xl px-3 py-2.5 text-sm leading-5 [overflow-wrap:anywhere] break-all shadow-xs\"\n [class.bg-primary]=\"item.role === 'user'\"\n [class.text-primary-foreground]=\"item.role === 'user'\"\n [class.rounded-br-md]=\"item.role === 'user'\"\n [class.bg-background]=\"item.role === 'assistant'\"\n [class.border-border/60]=\"item.role === 'assistant'\"\n [class.text-foreground]=\"item.role === 'assistant'\"\n [class.rounded-bl-md]=\"item.role === 'assistant'\"\n [class.border]=\"item.role === 'assistant'\">\n @if (item.files && item.files.length > 0) {\n <div class=\"mb-2 flex flex-col gap-1.5\">\n @for (file of item.files; track file.id) {\n <div\n class=\"flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs\"\n [class.bg-white/15]=\"item.role === 'user'\"\n [class.bg-muted/40]=\"item.role === 'assistant'\">\n @if (isImageAttachment(file) && file.previewUrl) {\n <img\n [src]=\"file.previewUrl\"\n [alt]=\"file.name\"\n class=\"size-8 cursor-pointer rounded-lg object-cover\"\n (click)=\"openImagePreview(file)\"\n title=\"Click to preview\" />\n } @else {\n <span\n class=\"bg-background/80 text-muted-foreground inline-flex size-8 items-center justify-center rounded-lg\"\n [class.bg-white/20]=\"item.role === 'user'\"\n [class.text-white]=\"item.role === 'user'\">\n <z-icon zType=\"lucideFileText\" zSize=\"14\" />\n </span>\n }\n <div class=\"min-w-0 flex-1\">\n <p class=\"truncate text-[0.6875rem] font-medium\">{{ file.name }}</p>\n <p class=\"truncate text-[0.625rem] opacity-80\">{{ formatFileSize(file.size) }}</p>\n </div>\n </div>\n }\n </div>\n }\n {{ item.content }}\n </div>\n </div>\n </div>\n }\n </div>\n } @else if (showEmptyState()) {\n <div class=\"flex h-full min-h-60 flex-col items-center justify-center px-2 text-center\">\n <div\n class=\"from-primary/20 to-primary/5 mb-3 inline-flex size-14 items-center justify-center rounded-full bg-gradient-to-br\">\n <z-icon zType=\"lucideBot\" zSize=\"28\" class=\"text-primary\" />\n </div>\n <h4 class=\"text-foreground text-sm font-semibold\">{{ 'i18n_z_ui_chat_ai_empty_title' | translate }}</h4>\n <p class=\"text-muted-foreground mt-1 text-xs\">{{ 'i18n_z_ui_chat_ai_empty_desc' | translate }}</p>\n\n @if (zSuggestions().length > 0) {\n <div class=\"mt-4 flex w-full flex-col gap-2\">\n @for (item of zSuggestions(); track item.label) {\n <button\n type=\"button\"\n class=\"z-chat-suggestion-item bg-background/95 hover:bg-background border-border/60 text-foreground flex w-full cursor-pointer items-center gap-2 rounded-xl border px-3 py-2 text-left text-xs transition hover:shadow-sm\"\n [style.animation-delay.ms]=\"$index * 70\"\n (click)=\"onSuggestionSelect(item)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon!\" zSize=\"14\" class=\"text-primary shrink-0\" />\n }\n <span class=\"line-clamp-2\">{{ item.label | translate }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (isTyping()) {\n <div class=\"z-chat-message z-chat-message--enter justify-start\">\n <div class=\"bg-background border-border/60 rounded-2xl rounded-bl-md border px-3 py-2\">\n <div class=\"flex items-center gap-1\">\n <span class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"></span>\n <span\n class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"\n style=\"animation-delay: 0.15s\"></span>\n <span\n class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"\n style=\"animation-delay: 0.3s\"></span>\n </div>\n </div>\n </div>\n }\n </div>\n </ng-scrollbar>\n\n <footer class=\"z-chat-footer-surface p-3\">\n @if (attachments().length > 0) {\n <div class=\"mb-2 flex max-h-32 flex-col gap-2 overflow-y-auto pr-1\">\n @for (file of attachments(); track file.id) {\n <div\n class=\"bg-muted/45 border-border/55 relative flex w-full items-center gap-2 rounded-lg border px-2 py-1.5\">\n @if (isImageAttachment(file) && file.previewUrl) {\n <img\n [src]=\"file.previewUrl\"\n [alt]=\"file.name\"\n class=\"size-8 shrink-0 cursor-pointer rounded-lg object-cover\"\n (click)=\"openImagePreview(file)\"\n title=\"Click to preview\" />\n } @else {\n <span\n class=\"bg-background text-muted-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-lg\">\n <z-icon zType=\"lucideFileText\" zSize=\"14\" />\n </span>\n }\n <div class=\"min-w-0 flex-1\">\n <p class=\"truncate text-[0.6875rem] font-medium\">{{ file.name }}</p>\n <p class=\"text-muted-foreground truncate text-[0.625rem]\">{{ formatFileSize(file.size) }}</p>\n </div>\n <button\n type=\"button\"\n class=\"bg-background/80 hover:bg-background text-muted-foreground inline-flex size-5 cursor-pointer items-center justify-center rounded-full transition\"\n (click)=\"removeAttachment(file.id)\">\n <z-icon zType=\"lucideX\" zSize=\"12\" />\n </button>\n </div>\n }\n </div>\n }\n\n <div class=\"z-chat-composer-shell\">\n <div class=\"z-chat-composer-main\" [class.z-chat-composer__field--overflow]=\"isComposerOverflowing()\">\n <textarea\n #chatInput\n class=\"z-chat-composer-textarea\"\n [placeholder]=\"zPlaceholder() | translate\"\n [disabled]=\"zDisabled()\"\n [ngModel]=\"draftMessage()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"draftMessage.set($event)\"\n (input)=\"onTextareaInput($event)\"\n (paste)=\"onTextareaPaste($event)\"\n (keydown)=\"onInputKeydown($event)\"\n rows=\"3\"></textarea>\n </div>\n\n <div class=\"z-chat-composer-toolbar\">\n <div class=\"z-chat-composer-toolbar-left\">\n @if (zAllowAttachments()) {\n <input\n #fileInput\n type=\"file\"\n class=\"hidden\"\n [attr.accept]=\"zAcceptedFiles()\"\n multiple\n (change)=\"onFileChange($event)\" />\n <button\n type=\"button\"\n class=\"z-chat-composer-tool-btn\"\n [disabled]=\"zDisabled()\"\n (click)=\"onClickAttach()\"\n title=\"{{ 'i18n_z_ui_chat_ai_attach' | translate }}\">\n <z-icon zType=\"lucidePlus\" zSize=\"18\" />\n </button>\n }\n </div>\n\n <div class=\"z-chat-composer-toolbar-right\">\n <button\n type=\"button\"\n class=\"z-chat-composer-send-btn\"\n [disabled]=\"!canSend()\"\n (click)=\"onSendMessage()\"\n title=\"{{ 'i18n_z_ui_chat_ai_send' | translate }}\">\n <z-icon\n [zType]=\"isTyping() ? 'lucideLoaderCircle' : zSendIcon()\"\n zSize=\"16\"\n [class]=\"isTyping() ? 'animate-spin' : ''\" />\n </button>\n </div>\n </div>\n </div>\n </footer>\n </div>\n\n <z-modal\n [zVisible]=\"isPreviewVisible()\"\n [zTitle]=\"previewImage()?.name\"\n [zDescription]=\"previewImageSizeLabel()\"\n zWidth=\"min(92vw, 720px)\"\n [zHideFooter]=\"true\"\n [zMaskClosable]=\"true\"\n zOverlay=\"blur\"\n (zCancel)=\"closeImagePreview()\">\n <div class=\"z-chat-preview-modal-body\">\n <img [src]=\"previewImage()?.url\" [alt]=\"previewImage()?.name\" class=\"z-chat-preview-image\" />\n </div>\n </z-modal>\n </section>\n\n <button\n type=\"button\"\n class=\"pointer-events-auto cursor-pointer\"\n [class]=\"fabClasses()\"\n (click)=\"onToggle()\"\n [attr.aria-expanded]=\"zOpen()\"\n [attr.aria-label]=\"'i18n_z_ui_chat_ai_toggle' | translate\"\n title=\"{{ 'i18n_z_ui_chat_ai_toggle' | translate }}\">\n @if (zShowPulse() && !zOpen()) {\n <span class=\"bg-primary/30 absolute inset-0 animate-ping rounded-full\"></span>\n }\n\n @if (showRipple()) {\n <span class=\"bg-primary-foreground/30 absolute inset-0 animate-ping rounded-full\"></span>\n }\n\n <z-icon\n [zType]=\"zOpen() ? 'lucideX' : zFabIcon()\"\n zSize=\"24\"\n class=\"relative z-1 transition-transform duration-200\"\n [class.rotate-180]=\"zOpen()\" />\n </button>\n </div>\n</div>\n", styles: [".z-chat textarea{scrollbar-width:thin}.z-chat-panel-shell{box-shadow:0 0 28px #00000024!important}:is(.dark,[data-theme=dark]) .z-chat-panel-shell{box-shadow:0 0 28px #00000057!important}.z-chat-composer__field--overflow:after{position:absolute;right:0;bottom:0;left:0;height:1rem;pointer-events:none;content:\"\";background:linear-gradient(to top,var(--background) 22%,transparent)}.z-chat-composer-shell{position:relative;display:flex;width:100%;flex-direction:column;border:1px solid color-mix(in oklab,var(--border) 82%,transparent);border-radius:var(--radius-xl);background:linear-gradient(180deg,color-mix(in oklab,var(--card) 98%,var(--background) 2%),color-mix(in oklab,var(--card) 92%,var(--background) 8%));box-shadow:0 6px 18px #00000014;transition:box-shadow .2s ease}.z-chat-composer-shell:focus-within{box-shadow:0 6px 18px #00000014}:is(.dark,[data-theme=dark]) .z-chat-composer-shell{border-color:var(--border);background:linear-gradient(180deg,color-mix(in oklab,var(--card) 96%,var(--background) 4%),color-mix(in oklab,var(--card) 88%,var(--background) 12%));box-shadow:0 10px 24px #00000057}.z-chat-composer-main{position:relative;overflow:hidden;padding:.7rem .35rem .45rem .85rem}.z-chat-composer-textarea{width:100%;height:4.125rem;max-height:4.125rem;border:none;background:transparent;resize:none;overflow-x:hidden;font-size:.875rem;line-height:1.4rem;color:var(--foreground);outline:none;padding-right:.2rem;scrollbar-width:thin;overflow-wrap:anywhere;word-break:break-word}.z-chat-composer-textarea::placeholder{color:var(--muted-foreground)}.z-chat-composer-textarea::-webkit-scrollbar{width:.375rem}.z-chat-composer-textarea::-webkit-scrollbar-track{background:transparent}.z-chat-composer-textarea::-webkit-scrollbar-thumb{border-radius:62.4375rem;background:#64748b73}:is(.dark,[data-theme=dark]) .z-chat-composer-textarea::-webkit-scrollbar-thumb{background:#94a3b88c}.z-chat-composer-toolbar{display:flex;align-items:center;justify-content:space-between;border-top:.0625rem solid rgba(219,219,219,.6);padding:.55rem .7rem .65rem}:is(.dark,[data-theme=dark]) .z-chat-composer-toolbar{border-top-color:#00000038}.z-chat-composer-toolbar-left,.z-chat-composer-toolbar-right{display:flex;align-items:center}.z-chat-composer-tool-btn{display:inline-flex;height:1.75rem;width:1.75rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md);border:none;background:transparent;color:#374151;transition:background-color .2s ease}.z-chat-composer-tool-btn:hover{background:#0000000f}:is(.dark,[data-theme=dark]) .z-chat-composer-tool-btn{color:#e5e7ebe6}:is(.dark,[data-theme=dark]) .z-chat-composer-tool-btn:hover{background:#ffffff1a}.z-chat-composer-tool-btn:disabled{cursor:not-allowed;opacity:.5}.z-chat-composer-send-btn{display:inline-flex;height:2rem;width:2rem;cursor:pointer;align-items:center;justify-content:center;border-radius:62.4375rem;border:1px solid rgba(0,0,0,.1);background:var(--primary);color:var(--primary-foreground);box-shadow:0 2px 8px #0000002e,inset 0 1px #ffffff2e;transition:transform .15s ease,opacity .2s ease,box-shadow .2s ease}.z-chat-composer-send-btn:hover{transform:translateY(-.0625rem);box-shadow:0 4px 12px #00000038,inset 0 1px #ffffff38}.z-chat-composer-send-btn:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}.z-chat-scrollbar{contain:layout}.z-chat-content-surface{background:var(--card)}.z-chat-lower-shell{display:flex;min-height:0;flex:1;flex-direction:column;overflow:hidden;background:var(--card);color:var(--card-foreground);border:1px solid transparent;border-top:0;border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}:is(.dark,[data-theme=dark]) .z-chat-lower-shell{border-color:var(--border);border-top:0}.z-chat-footer-surface{background:transparent;border-top:.0625rem solid color-mix(in oklab,var(--border) 70%,transparent)}:is(.dark,[data-theme=dark]) .z-chat-footer-surface{background:transparent;border-top-color:var(--border)}.z-chat-messages{min-height:100%;overflow-x:hidden;padding:.875rem .75rem;contain:content}.z-chat-messages-sizer{position:relative;width:100%}.z-chat-virtual-row{position:absolute;top:0;left:0;width:100%;padding:.5rem 0}.z-chat-virtual-row>.z-chat-message{margin:0}.z-chat-message{display:flex;margin:.5rem 0;padding:0 2px;transform-origin:bottom center;contain:layout style}.z-chat-message-bubble{transform:translateZ(0);backface-visibility:hidden}.z-chat-message--enter{animation:z-chat-message-push-in .3s ease-out;will-change:transform,opacity}.z-chat-suggestion-item{animation:z-chat-suggestion-reveal .28s ease-out both;will-change:transform,opacity}.z-chat-preview-modal-body{display:flex;align-items:center;justify-content:center;max-height:min(70vh,40rem);padding:.25rem}.z-chat-preview-image{max-width:100%;max-height:min(66vh,37.5rem);border-radius:var(--radius-lg);object-fit:contain}@keyframes z-chat-message-push-in{0%{opacity:0;transform:translateY(.9375rem) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes z-chat-suggestion-reveal{0%{opacity:0;transform:translateY(.5rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZModalComponent, selector: "z-modal", inputs: ["class", "zBodyClass", "zVisible", "zTitle", "zDescription", "zWidth", "zClosable", "zMaskClosable", "zDisableShadow", "zHeaderBorder", "zFooterBorder", "zHideHeader", "zHideFooter", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zContentLoading", "zSkeletonRows", "zOverlay"], outputs: ["zOk", "zCancel", "zAfterClose", "zScrollbar", "zVisibleChange"], exportAs: ["zModal"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
519
519
  }
520
520
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZChatComponent, decorators: [{
521
521
  type: Component,
522
522
  args: [{ selector: 'z-chat', imports: [FormsModule, TranslatePipe, ZIconComponent, ZModalComponent, NgScrollbar], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
523
523
  class: 'z-chat block',
524
524
  '(document:keydown.escape)': 'onEscapeKey()',
525
- }, exportAs: 'zChat', template: "<div\n [class]=\"wrapperClasses()\"\n [style.top]=\"wrapperTop()\"\n [style.right]=\"wrapperRight()\"\n [style.bottom]=\"wrapperBottom()\"\n [style.left]=\"wrapperLeft()\">\n <div class=\"relative\">\n <section class=\"z-chat-panel-shell\" [class]=\"panelClasses()\">\n <header class=\"from-primary/95 to-primary/75 text-primary-foreground bg-gradient-to-r px-4 py-3.5\">\n <div class=\"flex items-start justify-between gap-3\">\n <div class=\"min-w-0\">\n <div class=\"flex items-center gap-2\">\n <span\n class=\"bg-primary-foreground/15 relative inline-flex size-8 shrink-0 items-center justify-center rounded-full\">\n <z-icon [zType]=\"zBotIcon()\" zSize=\"16\" class=\"text-primary-foreground\" />\n <span\n class=\"ring-primary inline-block size-2.5 rounded-full bg-emerald-300 ring-2\"\n style=\"position: absolute; right: -0.0625rem; bottom: -0.0625rem\"></span>\n </span>\n <h3 class=\"truncate text-sm font-semibold\">{{ zTitle() | translate }}</h3>\n </div>\n </div>\n <div class=\"flex items-center gap-1\">\n <button\n type=\"button\"\n class=\"text-primary-foreground/90 hover:bg-primary-foreground/15 inline-flex size-8 cursor-pointer items-center justify-center rounded-md transition\"\n (click)=\"clearMessages()\"\n title=\"{{ 'i18n_z_ui_chat_ai_new_chat' | translate }}\">\n <z-icon zType=\"lucideRefreshCcw\" zSize=\"17\" />\n </button>\n <button\n type=\"button\"\n class=\"text-primary-foreground/90 hover:bg-primary-foreground/15 inline-flex size-8 cursor-pointer items-center justify-center rounded-md transition\"\n (click)=\"close()\"\n title=\"{{ 'i18n_z_ui_chat_ai_close' | translate }}\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n </button>\n </div>\n </div>\n </header>\n\n <div class=\"z-chat-lower-shell\">\n <ng-scrollbar\n #messagesScrollbar\n (afterInit)=\"onMessagesScrollbarInit()\"\n class=\"z-chat-scrollbar z-chat-content-surface flex-1 overflow-x-hidden\"\n track=\"vertical\"\n orientation=\"vertical\"\n appearance=\"compact\"\n visibility=\"hover\">\n <div class=\"z-chat-messages\">\n @if (hasMessages()) {\n <div class=\"z-chat-messages-sizer\" [style.height.px]=\"messageVirtualizer.getTotalSize()\">\n @for (row of messageVirtualizer.getVirtualItems(); track row.key) {\n @let item = zMessages()[row.index];\n <div\n #virtualMessage\n class=\"z-chat-virtual-row\"\n [attr.data-index]=\"row.index\"\n [style.transform]=\"'translateY(' + row.start + 'px)'\">\n <div\n class=\"z-chat-message\"\n [class.z-chat-message--enter]=\"item.id === newestMessageId()\"\n [class.justify-end]=\"item.role === 'user'\"\n [class.justify-start]=\"item.role === 'assistant'\">\n <div\n class=\"z-chat-message-bubble max-w-[88%] min-w-0 rounded-2xl px-3 py-2.5 text-sm leading-5 [overflow-wrap:anywhere] break-all shadow-xs\"\n [class.bg-primary]=\"item.role === 'user'\"\n [class.text-primary-foreground]=\"item.role === 'user'\"\n [class.rounded-br-md]=\"item.role === 'user'\"\n [class.bg-background]=\"item.role === 'assistant'\"\n [class.border-border/60]=\"item.role === 'assistant'\"\n [class.text-foreground]=\"item.role === 'assistant'\"\n [class.rounded-bl-md]=\"item.role === 'assistant'\"\n [class.border]=\"item.role === 'assistant'\">\n @if (item.files && item.files.length > 0) {\n <div class=\"mb-2 flex flex-col gap-1.5\">\n @for (file of item.files; track file.id) {\n <div\n class=\"flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs\"\n [class.bg-white/15]=\"item.role === 'user'\"\n [class.bg-muted/40]=\"item.role === 'assistant'\">\n @if (isImageAttachment(file) && file.previewUrl) {\n <img\n [src]=\"file.previewUrl\"\n [alt]=\"file.name\"\n class=\"size-8 cursor-pointer rounded-lg object-cover\"\n (click)=\"openImagePreview(file)\"\n title=\"Click to preview\" />\n } @else {\n <span\n class=\"bg-background/80 text-muted-foreground inline-flex size-8 items-center justify-center rounded-lg\"\n [class.bg-white/20]=\"item.role === 'user'\"\n [class.text-white]=\"item.role === 'user'\">\n <z-icon zType=\"lucideFileText\" zSize=\"14\" />\n </span>\n }\n <div class=\"min-w-0 flex-1\">\n <p class=\"truncate text-[0.6875rem] font-medium\">{{ file.name }}</p>\n <p class=\"truncate text-[0.625rem] opacity-80\">{{ formatFileSize(file.size) }}</p>\n </div>\n </div>\n }\n </div>\n }\n {{ item.content }}\n </div>\n </div>\n </div>\n }\n </div>\n } @else if (showEmptyState()) {\n <div class=\"flex h-full min-h-60 flex-col items-center justify-center px-2 text-center\">\n <div\n class=\"from-primary/20 to-primary/5 mb-3 inline-flex size-14 items-center justify-center rounded-full bg-gradient-to-br\">\n <z-icon zType=\"lucideBot\" zSize=\"28\" class=\"text-primary\" />\n </div>\n <h4 class=\"text-foreground text-sm font-semibold\">{{ 'i18n_z_ui_chat_ai_empty_title' | translate }}</h4>\n <p class=\"text-muted-foreground mt-1 text-xs\">{{ 'i18n_z_ui_chat_ai_empty_desc' | translate }}</p>\n\n @if (zSuggestions().length > 0) {\n <div class=\"mt-4 flex w-full flex-col gap-2\">\n @for (item of zSuggestions(); track item.label) {\n <button\n type=\"button\"\n class=\"z-chat-suggestion-item bg-background/95 hover:bg-background border-border/60 text-foreground flex w-full cursor-pointer items-center gap-2 rounded-xl border px-3 py-2 text-left text-xs transition hover:shadow-sm\"\n [style.animation-delay.ms]=\"$index * 70\"\n (click)=\"onSuggestionSelect(item)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon!\" zSize=\"14\" class=\"text-primary shrink-0\" />\n }\n <span class=\"line-clamp-2\">{{ item.label | translate }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (isTyping()) {\n <div class=\"z-chat-message z-chat-message--enter justify-start\">\n <div class=\"bg-background border-border/60 rounded-2xl rounded-bl-md border px-3 py-2\">\n <div class=\"flex items-center gap-1\">\n <span class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"></span>\n <span\n class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"\n style=\"animation-delay: 0.15s\"></span>\n <span\n class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"\n style=\"animation-delay: 0.3s\"></span>\n </div>\n </div>\n </div>\n }\n </div>\n </ng-scrollbar>\n\n <footer class=\"z-chat-footer-surface p-3\">\n @if (attachments().length > 0) {\n <div class=\"mb-2 flex max-h-32 flex-col gap-2 overflow-y-auto pr-1\">\n @for (file of attachments(); track file.id) {\n <div\n class=\"bg-muted/45 border-border/55 relative flex w-full items-center gap-2 rounded-lg border px-2 py-1.5\">\n @if (isImageAttachment(file) && file.previewUrl) {\n <img\n [src]=\"file.previewUrl\"\n [alt]=\"file.name\"\n class=\"size-8 shrink-0 cursor-pointer rounded-lg object-cover\"\n (click)=\"openImagePreview(file)\"\n title=\"Click to preview\" />\n } @else {\n <span\n class=\"bg-background text-muted-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-lg\">\n <z-icon zType=\"lucideFileText\" zSize=\"14\" />\n </span>\n }\n <div class=\"min-w-0 flex-1\">\n <p class=\"truncate text-[0.6875rem] font-medium\">{{ file.name }}</p>\n <p class=\"text-muted-foreground truncate text-[0.625rem]\">{{ formatFileSize(file.size) }}</p>\n </div>\n <button\n type=\"button\"\n class=\"bg-background/80 hover:bg-background text-muted-foreground inline-flex size-5 cursor-pointer items-center justify-center rounded-full transition\"\n (click)=\"removeAttachment(file.id)\">\n <z-icon zType=\"lucideX\" zSize=\"12\" />\n </button>\n </div>\n }\n </div>\n }\n\n <div class=\"z-chat-composer-shell\">\n <div class=\"z-chat-composer-main\" [class.z-chat-composer__field--overflow]=\"isComposerOverflowing()\">\n <textarea\n #chatInput\n class=\"z-chat-composer-textarea\"\n [placeholder]=\"zPlaceholder() | translate\"\n [disabled]=\"zDisabled()\"\n [ngModel]=\"draftMessage()\"\n (ngModelChange)=\"draftMessage.set($event)\"\n (input)=\"onTextareaInput($event)\"\n (paste)=\"onTextareaPaste($event)\"\n (keydown)=\"onInputKeydown($event)\"\n rows=\"3\"></textarea>\n </div>\n\n <div class=\"z-chat-composer-toolbar\">\n <div class=\"z-chat-composer-toolbar-left\">\n @if (zAllowAttachments()) {\n <input\n #fileInput\n type=\"file\"\n class=\"hidden\"\n [attr.accept]=\"zAcceptedFiles()\"\n multiple\n (change)=\"onFileChange($event)\" />\n <button\n type=\"button\"\n class=\"z-chat-composer-tool-btn\"\n [disabled]=\"zDisabled()\"\n (click)=\"onClickAttach()\"\n title=\"{{ 'i18n_z_ui_chat_ai_attach' | translate }}\">\n <z-icon zType=\"lucidePlus\" zSize=\"18\" />\n </button>\n }\n </div>\n\n <div class=\"z-chat-composer-toolbar-right\">\n <button\n type=\"button\"\n class=\"z-chat-composer-send-btn\"\n [disabled]=\"!canSend()\"\n (click)=\"onSendMessage()\"\n title=\"{{ 'i18n_z_ui_chat_ai_send' | translate }}\">\n <z-icon\n [zType]=\"isTyping() ? 'lucideLoaderCircle' : zSendIcon()\"\n zSize=\"16\"\n [class]=\"isTyping() ? 'animate-spin' : ''\" />\n </button>\n </div>\n </div>\n </div>\n </footer>\n </div>\n\n <z-modal\n [zVisible]=\"isPreviewVisible()\"\n [zTitle]=\"previewImage()?.name\"\n [zDescription]=\"previewImageSizeLabel()\"\n zWidth=\"min(92vw, 720px)\"\n [zHideFooter]=\"true\"\n [zMaskClosable]=\"true\"\n zOverlay=\"blur\"\n (zCancel)=\"closeImagePreview()\">\n <div class=\"z-chat-preview-modal-body\">\n <img [src]=\"previewImage()?.url\" [alt]=\"previewImage()?.name\" class=\"z-chat-preview-image\" />\n </div>\n </z-modal>\n </section>\n\n <button\n type=\"button\"\n class=\"pointer-events-auto cursor-pointer\"\n [class]=\"fabClasses()\"\n (click)=\"onToggle()\"\n [attr.aria-expanded]=\"zOpen()\"\n [attr.aria-label]=\"'i18n_z_ui_chat_ai_toggle' | translate\"\n title=\"{{ 'i18n_z_ui_chat_ai_toggle' | translate }}\">\n @if (zShowPulse() && !zOpen()) {\n <span class=\"bg-primary/30 absolute inset-0 animate-ping rounded-full\"></span>\n }\n\n @if (showRipple()) {\n <span class=\"bg-primary-foreground/30 absolute inset-0 animate-ping rounded-full\"></span>\n }\n\n <z-icon\n [zType]=\"zOpen() ? 'lucideX' : zFabIcon()\"\n zSize=\"24\"\n class=\"relative z-1 transition-transform duration-200\"\n [class.rotate-180]=\"zOpen()\" />\n </button>\n </div>\n</div>\n", styles: [".z-chat textarea{scrollbar-width:thin}.z-chat-panel-shell{box-shadow:0 0 28px #00000024!important}:is(.dark,[data-theme=dark]) .z-chat-panel-shell{box-shadow:0 0 28px #00000057!important}.z-chat-composer__field--overflow:after{position:absolute;right:0;bottom:0;left:0;height:1rem;pointer-events:none;content:\"\";background:linear-gradient(to top,var(--background) 22%,transparent)}.z-chat-composer-shell{position:relative;display:flex;width:100%;flex-direction:column;border:1px solid color-mix(in oklab,var(--border) 82%,transparent);border-radius:var(--radius-xl);background:linear-gradient(180deg,color-mix(in oklab,var(--card) 98%,var(--background) 2%),color-mix(in oklab,var(--card) 92%,var(--background) 8%));box-shadow:0 6px 18px #00000014;transition:box-shadow .2s ease}.z-chat-composer-shell:focus-within{box-shadow:0 6px 18px #00000014}:is(.dark,[data-theme=dark]) .z-chat-composer-shell{border-color:var(--border);background:linear-gradient(180deg,color-mix(in oklab,var(--card) 96%,var(--background) 4%),color-mix(in oklab,var(--card) 88%,var(--background) 12%));box-shadow:0 10px 24px #00000057}.z-chat-composer-main{position:relative;overflow:hidden;padding:.7rem .35rem .45rem .85rem}.z-chat-composer-textarea{width:100%;height:4.125rem;max-height:4.125rem;border:none;background:transparent;resize:none;overflow-x:hidden;font-size:.875rem;line-height:1.4rem;color:var(--foreground);outline:none;padding-right:.2rem;scrollbar-width:thin;overflow-wrap:anywhere;word-break:break-word}.z-chat-composer-textarea::placeholder{color:var(--muted-foreground)}.z-chat-composer-textarea::-webkit-scrollbar{width:.375rem}.z-chat-composer-textarea::-webkit-scrollbar-track{background:transparent}.z-chat-composer-textarea::-webkit-scrollbar-thumb{border-radius:62.4375rem;background:#64748b73}:is(.dark,[data-theme=dark]) .z-chat-composer-textarea::-webkit-scrollbar-thumb{background:#94a3b88c}.z-chat-composer-toolbar{display:flex;align-items:center;justify-content:space-between;border-top:.0625rem solid rgba(219,219,219,.6);padding:.55rem .7rem .65rem}:is(.dark,[data-theme=dark]) .z-chat-composer-toolbar{border-top-color:#00000038}.z-chat-composer-toolbar-left,.z-chat-composer-toolbar-right{display:flex;align-items:center}.z-chat-composer-tool-btn{display:inline-flex;height:1.75rem;width:1.75rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md);border:none;background:transparent;color:#374151;transition:background-color .2s ease}.z-chat-composer-tool-btn:hover{background:#0000000f}:is(.dark,[data-theme=dark]) .z-chat-composer-tool-btn{color:#e5e7ebe6}:is(.dark,[data-theme=dark]) .z-chat-composer-tool-btn:hover{background:#ffffff1a}.z-chat-composer-tool-btn:disabled{cursor:not-allowed;opacity:.5}.z-chat-composer-send-btn{display:inline-flex;height:2rem;width:2rem;cursor:pointer;align-items:center;justify-content:center;border-radius:62.4375rem;border:1px solid rgba(0,0,0,.1);background:var(--primary);color:var(--primary-foreground);box-shadow:0 2px 8px #0000002e,inset 0 1px #ffffff2e;transition:transform .15s ease,opacity .2s ease,box-shadow .2s ease}.z-chat-composer-send-btn:hover{transform:translateY(-.0625rem);box-shadow:0 4px 12px #00000038,inset 0 1px #ffffff38}.z-chat-composer-send-btn:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}.z-chat-scrollbar{contain:layout}.z-chat-content-surface{background:var(--card)}.z-chat-lower-shell{display:flex;min-height:0;flex:1;flex-direction:column;overflow:hidden;background:var(--card);color:var(--card-foreground);border:1px solid transparent;border-top:0;border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}:is(.dark,[data-theme=dark]) .z-chat-lower-shell{border-color:var(--border);border-top:0}.z-chat-footer-surface{background:transparent;border-top:.0625rem solid color-mix(in oklab,var(--border) 70%,transparent)}:is(.dark,[data-theme=dark]) .z-chat-footer-surface{background:transparent;border-top-color:var(--border)}.z-chat-messages{min-height:100%;overflow-x:hidden;padding:.875rem .75rem;contain:content}.z-chat-messages-sizer{position:relative;width:100%}.z-chat-virtual-row{position:absolute;top:0;left:0;width:100%;padding:.5rem 0}.z-chat-virtual-row>.z-chat-message{margin:0}.z-chat-message{display:flex;margin:.5rem 0;padding:0 2px;transform-origin:bottom center;contain:layout style}.z-chat-message-bubble{transform:translateZ(0);backface-visibility:hidden}.z-chat-message--enter{animation:z-chat-message-push-in .3s ease-out;will-change:transform,opacity}.z-chat-suggestion-item{animation:z-chat-suggestion-reveal .28s ease-out both;will-change:transform,opacity}.z-chat-preview-modal-body{display:flex;align-items:center;justify-content:center;max-height:min(70vh,40rem);padding:.25rem}.z-chat-preview-image{max-width:100%;max-height:min(66vh,37.5rem);border-radius:var(--radius-lg);object-fit:contain}@keyframes z-chat-message-push-in{0%{opacity:0;transform:translateY(.9375rem) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes z-chat-suggestion-reveal{0%{opacity:0;transform:translateY(.5rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
525
+ }, exportAs: 'zChat', template: "<div\n [class]=\"wrapperClasses()\"\n [style.top]=\"wrapperTop()\"\n [style.right]=\"wrapperRight()\"\n [style.bottom]=\"wrapperBottom()\"\n [style.left]=\"wrapperLeft()\">\n <div class=\"relative\">\n <section class=\"z-chat-panel-shell\" [class]=\"panelClasses()\">\n <header class=\"from-primary/95 to-primary/75 text-primary-foreground bg-gradient-to-r px-4 py-3.5\">\n <div class=\"flex items-start justify-between gap-3\">\n <div class=\"min-w-0\">\n <div class=\"flex items-center gap-2\">\n <span\n class=\"bg-primary-foreground/15 relative inline-flex size-8 shrink-0 items-center justify-center rounded-full\">\n <z-icon [zType]=\"zBotIcon()\" zSize=\"16\" class=\"text-primary-foreground\" />\n <span\n class=\"ring-primary inline-block size-2.5 rounded-full bg-emerald-300 ring-2\"\n style=\"position: absolute; right: -0.0625rem; bottom: -0.0625rem\"></span>\n </span>\n <h3 class=\"truncate text-sm font-semibold\">{{ zTitle() | translate }}</h3>\n </div>\n </div>\n <div class=\"flex items-center gap-1\">\n <button\n type=\"button\"\n class=\"text-primary-foreground/90 hover:bg-primary-foreground/15 inline-flex size-8 cursor-pointer items-center justify-center rounded-md transition\"\n (click)=\"clearMessages()\"\n title=\"{{ 'i18n_z_ui_chat_ai_new_chat' | translate }}\">\n <z-icon zType=\"lucideRefreshCcw\" zSize=\"17\" />\n </button>\n <button\n type=\"button\"\n class=\"text-primary-foreground/90 hover:bg-primary-foreground/15 inline-flex size-8 cursor-pointer items-center justify-center rounded-md transition\"\n (click)=\"close()\"\n title=\"{{ 'i18n_z_ui_chat_ai_close' | translate }}\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n </button>\n </div>\n </div>\n </header>\n\n <div class=\"z-chat-lower-shell\">\n <ng-scrollbar\n #messagesScrollbar\n (afterInit)=\"onMessagesScrollbarInit()\"\n class=\"z-chat-scrollbar z-chat-content-surface flex-1 overflow-x-hidden\"\n track=\"vertical\"\n orientation=\"vertical\"\n appearance=\"compact\"\n visibility=\"hover\">\n <div class=\"z-chat-messages\">\n @if (hasMessages()) {\n <div class=\"z-chat-messages-sizer\" [style.height.px]=\"messageVirtualizer.getTotalSize()\">\n @for (row of messageVirtualizer.getVirtualItems(); track row.key) {\n @let item = zMessages()[row.index];\n <div\n #virtualMessage\n class=\"z-chat-virtual-row\"\n [attr.data-index]=\"row.index\"\n [style.transform]=\"'translateY(' + row.start + 'px)'\">\n <div\n class=\"z-chat-message\"\n [class.z-chat-message--enter]=\"item.id === newestMessageId()\"\n [class.justify-end]=\"item.role === 'user'\"\n [class.justify-start]=\"item.role === 'assistant'\">\n <div\n class=\"z-chat-message-bubble max-w-[88%] min-w-0 rounded-2xl px-3 py-2.5 text-sm leading-5 [overflow-wrap:anywhere] break-all shadow-xs\"\n [class.bg-primary]=\"item.role === 'user'\"\n [class.text-primary-foreground]=\"item.role === 'user'\"\n [class.rounded-br-md]=\"item.role === 'user'\"\n [class.bg-background]=\"item.role === 'assistant'\"\n [class.border-border/60]=\"item.role === 'assistant'\"\n [class.text-foreground]=\"item.role === 'assistant'\"\n [class.rounded-bl-md]=\"item.role === 'assistant'\"\n [class.border]=\"item.role === 'assistant'\">\n @if (item.files && item.files.length > 0) {\n <div class=\"mb-2 flex flex-col gap-1.5\">\n @for (file of item.files; track file.id) {\n <div\n class=\"flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs\"\n [class.bg-white/15]=\"item.role === 'user'\"\n [class.bg-muted/40]=\"item.role === 'assistant'\">\n @if (isImageAttachment(file) && file.previewUrl) {\n <img\n [src]=\"file.previewUrl\"\n [alt]=\"file.name\"\n class=\"size-8 cursor-pointer rounded-lg object-cover\"\n (click)=\"openImagePreview(file)\"\n title=\"Click to preview\" />\n } @else {\n <span\n class=\"bg-background/80 text-muted-foreground inline-flex size-8 items-center justify-center rounded-lg\"\n [class.bg-white/20]=\"item.role === 'user'\"\n [class.text-white]=\"item.role === 'user'\">\n <z-icon zType=\"lucideFileText\" zSize=\"14\" />\n </span>\n }\n <div class=\"min-w-0 flex-1\">\n <p class=\"truncate text-[0.6875rem] font-medium\">{{ file.name }}</p>\n <p class=\"truncate text-[0.625rem] opacity-80\">{{ formatFileSize(file.size) }}</p>\n </div>\n </div>\n }\n </div>\n }\n {{ item.content }}\n </div>\n </div>\n </div>\n }\n </div>\n } @else if (showEmptyState()) {\n <div class=\"flex h-full min-h-60 flex-col items-center justify-center px-2 text-center\">\n <div\n class=\"from-primary/20 to-primary/5 mb-3 inline-flex size-14 items-center justify-center rounded-full bg-gradient-to-br\">\n <z-icon zType=\"lucideBot\" zSize=\"28\" class=\"text-primary\" />\n </div>\n <h4 class=\"text-foreground text-sm font-semibold\">{{ 'i18n_z_ui_chat_ai_empty_title' | translate }}</h4>\n <p class=\"text-muted-foreground mt-1 text-xs\">{{ 'i18n_z_ui_chat_ai_empty_desc' | translate }}</p>\n\n @if (zSuggestions().length > 0) {\n <div class=\"mt-4 flex w-full flex-col gap-2\">\n @for (item of zSuggestions(); track item.label) {\n <button\n type=\"button\"\n class=\"z-chat-suggestion-item bg-background/95 hover:bg-background border-border/60 text-foreground flex w-full cursor-pointer items-center gap-2 rounded-xl border px-3 py-2 text-left text-xs transition hover:shadow-sm\"\n [style.animation-delay.ms]=\"$index * 70\"\n (click)=\"onSuggestionSelect(item)\">\n @if (item.icon) {\n <z-icon [zType]=\"item.icon!\" zSize=\"14\" class=\"text-primary shrink-0\" />\n }\n <span class=\"line-clamp-2\">{{ item.label | translate }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (isTyping()) {\n <div class=\"z-chat-message z-chat-message--enter justify-start\">\n <div class=\"bg-background border-border/60 rounded-2xl rounded-bl-md border px-3 py-2\">\n <div class=\"flex items-center gap-1\">\n <span class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"></span>\n <span\n class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"\n style=\"animation-delay: 0.15s\"></span>\n <span\n class=\"bg-muted-foreground/60 inline-block size-1.5 animate-bounce rounded-full\"\n style=\"animation-delay: 0.3s\"></span>\n </div>\n </div>\n </div>\n }\n </div>\n </ng-scrollbar>\n\n <footer class=\"z-chat-footer-surface p-3\">\n @if (attachments().length > 0) {\n <div class=\"mb-2 flex max-h-32 flex-col gap-2 overflow-y-auto pr-1\">\n @for (file of attachments(); track file.id) {\n <div\n class=\"bg-muted/45 border-border/55 relative flex w-full items-center gap-2 rounded-lg border px-2 py-1.5\">\n @if (isImageAttachment(file) && file.previewUrl) {\n <img\n [src]=\"file.previewUrl\"\n [alt]=\"file.name\"\n class=\"size-8 shrink-0 cursor-pointer rounded-lg object-cover\"\n (click)=\"openImagePreview(file)\"\n title=\"Click to preview\" />\n } @else {\n <span\n class=\"bg-background text-muted-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-lg\">\n <z-icon zType=\"lucideFileText\" zSize=\"14\" />\n </span>\n }\n <div class=\"min-w-0 flex-1\">\n <p class=\"truncate text-[0.6875rem] font-medium\">{{ file.name }}</p>\n <p class=\"text-muted-foreground truncate text-[0.625rem]\">{{ formatFileSize(file.size) }}</p>\n </div>\n <button\n type=\"button\"\n class=\"bg-background/80 hover:bg-background text-muted-foreground inline-flex size-5 cursor-pointer items-center justify-center rounded-full transition\"\n (click)=\"removeAttachment(file.id)\">\n <z-icon zType=\"lucideX\" zSize=\"12\" />\n </button>\n </div>\n }\n </div>\n }\n\n <div class=\"z-chat-composer-shell\">\n <div class=\"z-chat-composer-main\" [class.z-chat-composer__field--overflow]=\"isComposerOverflowing()\">\n <textarea\n #chatInput\n class=\"z-chat-composer-textarea\"\n [placeholder]=\"zPlaceholder() | translate\"\n [disabled]=\"zDisabled()\"\n [ngModel]=\"draftMessage()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"draftMessage.set($event)\"\n (input)=\"onTextareaInput($event)\"\n (paste)=\"onTextareaPaste($event)\"\n (keydown)=\"onInputKeydown($event)\"\n rows=\"3\"></textarea>\n </div>\n\n <div class=\"z-chat-composer-toolbar\">\n <div class=\"z-chat-composer-toolbar-left\">\n @if (zAllowAttachments()) {\n <input\n #fileInput\n type=\"file\"\n class=\"hidden\"\n [attr.accept]=\"zAcceptedFiles()\"\n multiple\n (change)=\"onFileChange($event)\" />\n <button\n type=\"button\"\n class=\"z-chat-composer-tool-btn\"\n [disabled]=\"zDisabled()\"\n (click)=\"onClickAttach()\"\n title=\"{{ 'i18n_z_ui_chat_ai_attach' | translate }}\">\n <z-icon zType=\"lucidePlus\" zSize=\"18\" />\n </button>\n }\n </div>\n\n <div class=\"z-chat-composer-toolbar-right\">\n <button\n type=\"button\"\n class=\"z-chat-composer-send-btn\"\n [disabled]=\"!canSend()\"\n (click)=\"onSendMessage()\"\n title=\"{{ 'i18n_z_ui_chat_ai_send' | translate }}\">\n <z-icon\n [zType]=\"isTyping() ? 'lucideLoaderCircle' : zSendIcon()\"\n zSize=\"16\"\n [class]=\"isTyping() ? 'animate-spin' : ''\" />\n </button>\n </div>\n </div>\n </div>\n </footer>\n </div>\n\n <z-modal\n [zVisible]=\"isPreviewVisible()\"\n [zTitle]=\"previewImage()?.name\"\n [zDescription]=\"previewImageSizeLabel()\"\n zWidth=\"min(92vw, 720px)\"\n [zHideFooter]=\"true\"\n [zMaskClosable]=\"true\"\n zOverlay=\"blur\"\n (zCancel)=\"closeImagePreview()\">\n <div class=\"z-chat-preview-modal-body\">\n <img [src]=\"previewImage()?.url\" [alt]=\"previewImage()?.name\" class=\"z-chat-preview-image\" />\n </div>\n </z-modal>\n </section>\n\n <button\n type=\"button\"\n class=\"pointer-events-auto cursor-pointer\"\n [class]=\"fabClasses()\"\n (click)=\"onToggle()\"\n [attr.aria-expanded]=\"zOpen()\"\n [attr.aria-label]=\"'i18n_z_ui_chat_ai_toggle' | translate\"\n title=\"{{ 'i18n_z_ui_chat_ai_toggle' | translate }}\">\n @if (zShowPulse() && !zOpen()) {\n <span class=\"bg-primary/30 absolute inset-0 animate-ping rounded-full\"></span>\n }\n\n @if (showRipple()) {\n <span class=\"bg-primary-foreground/30 absolute inset-0 animate-ping rounded-full\"></span>\n }\n\n <z-icon\n [zType]=\"zOpen() ? 'lucideX' : zFabIcon()\"\n zSize=\"24\"\n class=\"relative z-1 transition-transform duration-200\"\n [class.rotate-180]=\"zOpen()\" />\n </button>\n </div>\n</div>\n", styles: [".z-chat textarea{scrollbar-width:thin}.z-chat-panel-shell{box-shadow:0 0 28px #00000024!important}:is(.dark,[data-theme=dark]) .z-chat-panel-shell{box-shadow:0 0 28px #00000057!important}.z-chat-composer__field--overflow:after{position:absolute;right:0;bottom:0;left:0;height:1rem;pointer-events:none;content:\"\";background:linear-gradient(to top,var(--background) 22%,transparent)}.z-chat-composer-shell{position:relative;display:flex;width:100%;flex-direction:column;border:1px solid color-mix(in oklab,var(--border) 82%,transparent);border-radius:var(--radius-xl);background:linear-gradient(180deg,color-mix(in oklab,var(--card) 98%,var(--background) 2%),color-mix(in oklab,var(--card) 92%,var(--background) 8%));box-shadow:0 6px 18px #00000014;transition:box-shadow .2s ease}.z-chat-composer-shell:focus-within{box-shadow:0 6px 18px #00000014}:is(.dark,[data-theme=dark]) .z-chat-composer-shell{border-color:var(--border);background:linear-gradient(180deg,color-mix(in oklab,var(--card) 96%,var(--background) 4%),color-mix(in oklab,var(--card) 88%,var(--background) 12%));box-shadow:0 10px 24px #00000057}.z-chat-composer-main{position:relative;overflow:hidden;padding:.7rem .35rem .45rem .85rem}.z-chat-composer-textarea{width:100%;height:4.125rem;max-height:4.125rem;border:none;background:transparent;resize:none;overflow-x:hidden;font-size:.875rem;line-height:1.4rem;color:var(--foreground);outline:none;padding-right:.2rem;scrollbar-width:thin;overflow-wrap:anywhere;word-break:break-word}.z-chat-composer-textarea::placeholder{color:var(--muted-foreground)}.z-chat-composer-textarea::-webkit-scrollbar{width:.375rem}.z-chat-composer-textarea::-webkit-scrollbar-track{background:transparent}.z-chat-composer-textarea::-webkit-scrollbar-thumb{border-radius:62.4375rem;background:#64748b73}:is(.dark,[data-theme=dark]) .z-chat-composer-textarea::-webkit-scrollbar-thumb{background:#94a3b88c}.z-chat-composer-toolbar{display:flex;align-items:center;justify-content:space-between;border-top:.0625rem solid rgba(219,219,219,.6);padding:.55rem .7rem .65rem}:is(.dark,[data-theme=dark]) .z-chat-composer-toolbar{border-top-color:#00000038}.z-chat-composer-toolbar-left,.z-chat-composer-toolbar-right{display:flex;align-items:center}.z-chat-composer-tool-btn{display:inline-flex;height:1.75rem;width:1.75rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md);border:none;background:transparent;color:#374151;transition:background-color .2s ease}.z-chat-composer-tool-btn:hover{background:#0000000f}:is(.dark,[data-theme=dark]) .z-chat-composer-tool-btn{color:#e5e7ebe6}:is(.dark,[data-theme=dark]) .z-chat-composer-tool-btn:hover{background:#ffffff1a}.z-chat-composer-tool-btn:disabled{cursor:not-allowed;opacity:.5}.z-chat-composer-send-btn{display:inline-flex;height:2rem;width:2rem;cursor:pointer;align-items:center;justify-content:center;border-radius:62.4375rem;border:1px solid rgba(0,0,0,.1);background:var(--primary);color:var(--primary-foreground);box-shadow:0 2px 8px #0000002e,inset 0 1px #ffffff2e;transition:transform .15s ease,opacity .2s ease,box-shadow .2s ease}.z-chat-composer-send-btn:hover{transform:translateY(-.0625rem);box-shadow:0 4px 12px #00000038,inset 0 1px #ffffff38}.z-chat-composer-send-btn:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}.z-chat-scrollbar{contain:layout}.z-chat-content-surface{background:var(--card)}.z-chat-lower-shell{display:flex;min-height:0;flex:1;flex-direction:column;overflow:hidden;background:var(--card);color:var(--card-foreground);border:1px solid transparent;border-top:0;border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}:is(.dark,[data-theme=dark]) .z-chat-lower-shell{border-color:var(--border);border-top:0}.z-chat-footer-surface{background:transparent;border-top:.0625rem solid color-mix(in oklab,var(--border) 70%,transparent)}:is(.dark,[data-theme=dark]) .z-chat-footer-surface{background:transparent;border-top-color:var(--border)}.z-chat-messages{min-height:100%;overflow-x:hidden;padding:.875rem .75rem;contain:content}.z-chat-messages-sizer{position:relative;width:100%}.z-chat-virtual-row{position:absolute;top:0;left:0;width:100%;padding:.5rem 0}.z-chat-virtual-row>.z-chat-message{margin:0}.z-chat-message{display:flex;margin:.5rem 0;padding:0 2px;transform-origin:bottom center;contain:layout style}.z-chat-message-bubble{transform:translateZ(0);backface-visibility:hidden}.z-chat-message--enter{animation:z-chat-message-push-in .3s ease-out;will-change:transform,opacity}.z-chat-suggestion-item{animation:z-chat-suggestion-reveal .28s ease-out both;will-change:transform,opacity}.z-chat-preview-modal-body{display:flex;align-items:center;justify-content:center;max-height:min(70vh,40rem);padding:.25rem}.z-chat-preview-image{max-width:100%;max-height:min(66vh,37.5rem);border-radius:var(--radius-lg);object-fit:contain}@keyframes z-chat-message-push-in{0%{opacity:0;transform:translateY(.9375rem) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes z-chat-suggestion-reveal{0%{opacity:0;transform:translateY(.5rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
526
526
  }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOpen", required: false }] }, { type: i0.Output, args: ["zOpenChange"] }], zMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMessages", required: false }] }, { type: i0.Output, args: ["zMessagesChange"] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSubtitle", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOffset", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuggestions", required: false }] }], zShowSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSuggestions", required: false }] }], zShowPulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPulse", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zAllowAttachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowAttachments", required: false }] }], zAcceptedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAcceptedFiles", required: false }] }], zAutoReply: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoReply", required: false }] }], zAutoReplyDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoReplyDelay", required: false }] }], zFabIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFabIcon", required: false }] }], zBotIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBotIcon", required: false }] }], zSendIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSendIcon", required: false }] }], zSend: [{ type: i0.Output, args: ["zSend"] }], zResponse: [{ type: i0.Output, args: ["zResponse"] }], zToggle: [{ type: i0.Output, args: ["zToggle"] }], zClear: [{ type: i0.Output, args: ["zClear"] }], _messagesScrollbarRef: [{ type: i0.ViewChild, args: ['messagesScrollbar', { isSignal: true }] }], _chatInputRef: [{ type: i0.ViewChild, args: ['chatInput', { isSignal: true }] }], _fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], _virtualMessageRefs: [{ type: i0.ViewChildren, args: ['virtualMessage', { isSignal: true }] }] } });
527
527
 
528
528
  /**