@lifecorner/angular-ui-kit 3.26.0 → 3.27.0
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.
- package/fesm2022/lifecorner-angular-ui-kit-callout.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-callout.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-chat.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-chat.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-color-picker.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-color-picker.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-date-range-picker.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-date-range-picker.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-datepicker.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-datepicker.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-dependency-viewer.mjs +47 -9
- package/fesm2022/lifecorner-angular-ui-kit-dependency-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-document-viewer.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-document-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs +4 -4
- package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-filter-bar.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-filter-bar.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-gallery.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-gallery.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-gantt-chart.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-gantt-chart.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-header.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-header.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-input.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-input.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-kanban-board.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-kanban-board.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-number-input.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-number-input.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-rich-text-editor.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-rich-text-editor.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-scatter-plot.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-scatter-plot.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-search-input.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-search-input.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-split-pane.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-split-pane.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-tabs.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-tabs.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-tag-input.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-tag-input.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-textarea.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-textarea.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-toggle-group.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-toggle-group.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_reset.scss +4 -2
- package/src/styles/focus-indicators.spec.ts +199 -0
- package/types/lifecorner-angular-ui-kit-dependency-viewer.d.ts +33 -4
- package/types/lifecorner-angular-ui-kit-file-upload.d.ts +6 -1
|
@@ -99,7 +99,7 @@ var CalloutComponent = class CalloutComponent {
|
|
|
99
99
|
},
|
|
100
100
|
ngImport: i0,
|
|
101
101
|
template: "@if (visible()) {\n <div [class]=\"calloutClasses()\" [attr.role]=\"role()\">\n <lc-icon\n class=\"callout__icon\"\n [name]=\"iconName()\"\n size=\"md\"\n [decorative]=\"!iconAriaLabel()\"\n [ariaLabel]=\"iconAriaLabel()\"\n />\n <div class=\"callout__content\">\n @if (title()) {\n <strong class=\"callout__title\">{{ title() }}</strong>\n }\n <div class=\"callout__body\">\n <ng-content />\n </div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"callout__dismiss\"\n [attr.aria-label]=\"dismissAriaLabel()\"\n (click)=\"dismiss()\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n </button>\n }\n </div>\n}\n",
|
|
102
|
-
styles: [".callout{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--border-radius-md);border-left:4px solid;font-size:var(--typography-font-size-sm, .875rem);line-height:1.5;color:var(--color-text-primary)}.callout--info{background-color:#3b658829;border-left-color:#3b65886b}.callout--info .callout__icon{color:var(--color-info)}.callout--success{background-color:#8ea47529;border-left-color:#8ea47566}.callout--success .callout__icon{color:var(--color-success)}.callout--warning{background-color:#e1a04029;border-left-color:#e1a0406b}.callout--warning .callout__icon{color:var(--color-warning)}.callout--error{background-color:#9d0e0e29;border-left-color:#9d0e0e73}.callout--error .callout__icon{color:var(--color-error)}.callout--neutral{background-color:var(--color-surface-hover);border-left-color:var(--color-border)}.callout--neutral .callout__icon{color:var(--color-text-tertiary)}.callout__icon{flex-shrink:0;margin-top:.0625rem}.callout__content{flex:1;min-width:0}.callout__title{display:block;font-weight:var(--typography-font-weight-semibold, 600);margin-bottom:.25rem}.callout__body p{margin:0}.callout__dismiss{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;border-radius:var(--border-radius-sm);background:transparent;color:inherit;opacity:.6;cursor:pointer;flex-shrink:0;transition:opacity .15s ease,background-color .15s ease}.callout__dismiss:hover{opacity:1;background-color:var(--color-surface-hover)}\n"],
|
|
102
|
+
styles: [".callout{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--border-radius-md);border-left:4px solid;font-size:var(--typography-font-size-sm, .875rem);line-height:1.5;color:var(--color-text-primary)}.callout--info{background-color:#3b658829;border-left-color:#3b65886b}.callout--info .callout__icon{color:var(--color-info)}.callout--success{background-color:#8ea47529;border-left-color:#8ea47566}.callout--success .callout__icon{color:var(--color-success)}.callout--warning{background-color:#e1a04029;border-left-color:#e1a0406b}.callout--warning .callout__icon{color:var(--color-warning)}.callout--error{background-color:#9d0e0e29;border-left-color:#9d0e0e73}.callout--error .callout__icon{color:var(--color-error)}.callout--neutral{background-color:var(--color-surface-hover);border-left-color:var(--color-border)}.callout--neutral .callout__icon{color:var(--color-text-tertiary)}.callout__icon{flex-shrink:0;margin-top:.0625rem}.callout__content{flex:1;min-width:0}.callout__title{display:block;font-weight:var(--typography-font-weight-semibold, 600);margin-bottom:.25rem}.callout__body p{margin:0}.callout__dismiss{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;border-radius:var(--border-radius-sm);background:transparent;color:inherit;opacity:.6;cursor:pointer;flex-shrink:0;transition:opacity .15s ease,background-color .15s ease}.callout__dismiss:hover{opacity:1;background-color:var(--color-surface-hover)}.callout__dismiss:focus-visible{opacity:1;outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.callout__dismiss:focus-visible{outline-color:Highlight}}\n"],
|
|
103
103
|
dependencies: [{
|
|
104
104
|
kind: "component",
|
|
105
105
|
type: IconComponent,
|
|
@@ -144,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
144
144
|
])],
|
|
145
145
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
146
146
|
template: "@if (visible()) {\n <div [class]=\"calloutClasses()\" [attr.role]=\"role()\">\n <lc-icon\n class=\"callout__icon\"\n [name]=\"iconName()\"\n size=\"md\"\n [decorative]=\"!iconAriaLabel()\"\n [ariaLabel]=\"iconAriaLabel()\"\n />\n <div class=\"callout__content\">\n @if (title()) {\n <strong class=\"callout__title\">{{ title() }}</strong>\n }\n <div class=\"callout__body\">\n <ng-content />\n </div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"callout__dismiss\"\n [attr.aria-label]=\"dismissAriaLabel()\"\n (click)=\"dismiss()\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n </button>\n }\n </div>\n}\n",
|
|
147
|
-
styles: [".callout{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--border-radius-md);border-left:4px solid;font-size:var(--typography-font-size-sm, .875rem);line-height:1.5;color:var(--color-text-primary)}.callout--info{background-color:#3b658829;border-left-color:#3b65886b}.callout--info .callout__icon{color:var(--color-info)}.callout--success{background-color:#8ea47529;border-left-color:#8ea47566}.callout--success .callout__icon{color:var(--color-success)}.callout--warning{background-color:#e1a04029;border-left-color:#e1a0406b}.callout--warning .callout__icon{color:var(--color-warning)}.callout--error{background-color:#9d0e0e29;border-left-color:#9d0e0e73}.callout--error .callout__icon{color:var(--color-error)}.callout--neutral{background-color:var(--color-surface-hover);border-left-color:var(--color-border)}.callout--neutral .callout__icon{color:var(--color-text-tertiary)}.callout__icon{flex-shrink:0;margin-top:.0625rem}.callout__content{flex:1;min-width:0}.callout__title{display:block;font-weight:var(--typography-font-weight-semibold, 600);margin-bottom:.25rem}.callout__body p{margin:0}.callout__dismiss{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;border-radius:var(--border-radius-sm);background:transparent;color:inherit;opacity:.6;cursor:pointer;flex-shrink:0;transition:opacity .15s ease,background-color .15s ease}.callout__dismiss:hover{opacity:1;background-color:var(--color-surface-hover)}\n"]
|
|
147
|
+
styles: [".callout{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--border-radius-md);border-left:4px solid;font-size:var(--typography-font-size-sm, .875rem);line-height:1.5;color:var(--color-text-primary)}.callout--info{background-color:#3b658829;border-left-color:#3b65886b}.callout--info .callout__icon{color:var(--color-info)}.callout--success{background-color:#8ea47529;border-left-color:#8ea47566}.callout--success .callout__icon{color:var(--color-success)}.callout--warning{background-color:#e1a04029;border-left-color:#e1a0406b}.callout--warning .callout__icon{color:var(--color-warning)}.callout--error{background-color:#9d0e0e29;border-left-color:#9d0e0e73}.callout--error .callout__icon{color:var(--color-error)}.callout--neutral{background-color:var(--color-surface-hover);border-left-color:var(--color-border)}.callout--neutral .callout__icon{color:var(--color-text-tertiary)}.callout__icon{flex-shrink:0;margin-top:.0625rem}.callout__content{flex:1;min-width:0}.callout__title{display:block;font-weight:var(--typography-font-weight-semibold, 600);margin-bottom:.25rem}.callout__body p{margin:0}.callout__dismiss{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;border-radius:var(--border-radius-sm);background:transparent;color:inherit;opacity:.6;cursor:pointer;flex-shrink:0;transition:opacity .15s ease,background-color .15s ease}.callout__dismiss:hover{opacity:1;background-color:var(--color-surface-hover)}.callout__dismiss:focus-visible{opacity:1;outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.callout__dismiss:focus-visible{outline-color:Highlight}}\n"]
|
|
148
148
|
}]
|
|
149
149
|
}],
|
|
150
150
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-callout.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/callout/callout.component.ts","../../../../libs/angular-ui-kit/src/lib/callout/callout.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n model,\n output,\n computed,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK_CIRCLE,\n ICON_CIRCLE_X,\n ICON_EXCLAMATION_TRIANGLE,\n ICON_INFORMATION_CIRCLE,\n ICON_X_MARK,\n} from '@lifecorner/angular-ui-kit/icons';\n\nexport type CalloutVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';\n\n@Component({\n selector: 'lc-callout',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [\n ɵprovideKitIcons([ICON_X_MARK, ICON_INFORMATION_CIRCLE, ICON_CHECK_CIRCLE, ICON_EXCLAMATION_TRIANGLE, ICON_CIRCLE_X]),\n ],\n templateUrl: './callout.component.html',\n styleUrls: ['./callout.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Callout component for contextual information banners.\n *\n * Features:\n * - Semantic variants (info, success, warning, error, neutral)\n * - Auto-mapped variant icons (override with `icon`); decorative unless\n * `iconAriaLabel` names them — no built-in English word\n * - Optional title text\n * - Dismissible with close button; `visible` is two-way bindable so a\n * dismissed callout can be shown again\n * - `role=\"alert\"` for error / warning, `role=\"status\"` otherwise\n * - Content projection for custom body content\n *\n * @example\n * ```html\n * <lc-callout variant=\"warning\" title=\"Attention\">Please review your input.</lc-callout>\n * ```\n */\nexport class CalloutComponent {\n /** Visual variant */\n variant = input<CalloutVariant>('info');\n\n /** Title text (optional) */\n title = input<string>();\n\n /** Icon name instead of the variant's default icon. */\n icon = input<string | undefined>(undefined);\n\n /**\n * Accessible name of the icon, e.g. „Hinweis“. Leave it unset when the\n * title or text already says what kind of note this is: the icon is then\n * decorative (`aria-hidden`). The kit sets no default text, so no English\n * word is read on a page in another language.\n */\n iconAriaLabel = input<string | undefined>(undefined);\n\n /** Whether the callout can be dismissed */\n dismissible = input<boolean>(false);\n\n /** Accessible name of the dismiss button (`dismissible`). */\n dismissAriaLabel = input('Dismiss');\n\n /** Emits when dismiss button is clicked */\n dismissed = output<void>();\n\n /**\n * Visibility (two-way bindable). Dismissing sets it to `false`; the parent\n * can set it back to `true` to show the callout again.\n */\n visible = model<boolean>(true);\n\n protected calloutClasses = computed(() => {\n return ['callout', `callout--${this.variant()}`].join(' ');\n });\n\n /**\n * Live-region semantics: only error / warning callouts interrupt the user\n * (`alert`); informational ones are announced politely (`status`).\n */\n protected role = computed(() =>\n this.variant() === 'error' || this.variant() === 'warning' ? 'alert' : 'status',\n );\n\n protected iconName = computed(() => {\n const map: Record<CalloutVariant, string> = {\n info: 'information-circle',\n success: 'check-circle',\n warning: 'exclamation-triangle',\n error: 'x-circle',\n neutral: 'information-circle',\n };\n return this.icon() || map[this.variant()];\n });\n\n dismiss(): void {\n this.visible.set(false);\n this.dismissed.emit();\n }\n}\n","@if (visible()) {\n <div [class]=\"calloutClasses()\" [attr.role]=\"role()\">\n <lc-icon\n class=\"callout__icon\"\n [name]=\"iconName()\"\n size=\"md\"\n [decorative]=\"!iconAriaLabel()\"\n [ariaLabel]=\"iconAriaLabel()\"\n />\n <div class=\"callout__content\">\n @if (title()) {\n <strong class=\"callout__title\">{{ title() }}</strong>\n }\n <div class=\"callout__body\">\n <ng-content />\n </div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"callout__dismiss\"\n [attr.aria-label]=\"dismissAriaLabel()\"\n (click)=\"dismiss()\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n </button>\n }\n </div>\n}\n"],"mappings":";;;;AAgDA,IAAa,mBAAb,MAAa,iBAAgB;CAE3B,UAAU,MAAsB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGvC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,OAAO,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAQ3C,gBAAgB,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAGpD,cAAc,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,mBAAmB,MAAM,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,YAAY,OAAM;CAMlB,UAAU,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,iBAAiB,eAAc;EACvC,OAAO,CAAC,WAAW,YAAY,KAAK,QAAO,GAAI,CAAC,CAAC,KAAK,GAAG;CAC3D,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAMQ,OAAO,eACf,KAAK,QAAO,MAAO,WAAW,KAAK,QAAO,MAAO,YAAY,UAAU,UACxE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAES,WAAW,eAAc;EAQjC,OAAO,KAAK,KAAI,KAAM;GANpB,MAAM;GACN,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;EAEW,EAAI,KAAK,QAAO;CACxC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEF,UAAO;EACL,KAAK,QAAQ,IAAI,KAAK;EACtB,KAAK,UAAU,KAAI;CACrB;CA3DW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,SAAA;EAAA;EAAA,UAAA;EAAA,UChD7B;EA6BA,QAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-callout.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/callout/callout.component.ts","../../../../libs/angular-ui-kit/src/lib/callout/callout.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n model,\n output,\n computed,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK_CIRCLE,\n ICON_CIRCLE_X,\n ICON_EXCLAMATION_TRIANGLE,\n ICON_INFORMATION_CIRCLE,\n ICON_X_MARK,\n} from '@lifecorner/angular-ui-kit/icons';\n\nexport type CalloutVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';\n\n@Component({\n selector: 'lc-callout',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [\n ɵprovideKitIcons([ICON_X_MARK, ICON_INFORMATION_CIRCLE, ICON_CHECK_CIRCLE, ICON_EXCLAMATION_TRIANGLE, ICON_CIRCLE_X]),\n ],\n templateUrl: './callout.component.html',\n styleUrls: ['./callout.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Callout component for contextual information banners.\n *\n * Features:\n * - Semantic variants (info, success, warning, error, neutral)\n * - Auto-mapped variant icons (override with `icon`); decorative unless\n * `iconAriaLabel` names them — no built-in English word\n * - Optional title text\n * - Dismissible with close button; `visible` is two-way bindable so a\n * dismissed callout can be shown again\n * - `role=\"alert\"` for error / warning, `role=\"status\"` otherwise\n * - Content projection for custom body content\n *\n * @example\n * ```html\n * <lc-callout variant=\"warning\" title=\"Attention\">Please review your input.</lc-callout>\n * ```\n */\nexport class CalloutComponent {\n /** Visual variant */\n variant = input<CalloutVariant>('info');\n\n /** Title text (optional) */\n title = input<string>();\n\n /** Icon name instead of the variant's default icon. */\n icon = input<string | undefined>(undefined);\n\n /**\n * Accessible name of the icon, e.g. „Hinweis“. Leave it unset when the\n * title or text already says what kind of note this is: the icon is then\n * decorative (`aria-hidden`). The kit sets no default text, so no English\n * word is read on a page in another language.\n */\n iconAriaLabel = input<string | undefined>(undefined);\n\n /** Whether the callout can be dismissed */\n dismissible = input<boolean>(false);\n\n /** Accessible name of the dismiss button (`dismissible`). */\n dismissAriaLabel = input('Dismiss');\n\n /** Emits when dismiss button is clicked */\n dismissed = output<void>();\n\n /**\n * Visibility (two-way bindable). Dismissing sets it to `false`; the parent\n * can set it back to `true` to show the callout again.\n */\n visible = model<boolean>(true);\n\n protected calloutClasses = computed(() => {\n return ['callout', `callout--${this.variant()}`].join(' ');\n });\n\n /**\n * Live-region semantics: only error / warning callouts interrupt the user\n * (`alert`); informational ones are announced politely (`status`).\n */\n protected role = computed(() =>\n this.variant() === 'error' || this.variant() === 'warning' ? 'alert' : 'status',\n );\n\n protected iconName = computed(() => {\n const map: Record<CalloutVariant, string> = {\n info: 'information-circle',\n success: 'check-circle',\n warning: 'exclamation-triangle',\n error: 'x-circle',\n neutral: 'information-circle',\n };\n return this.icon() || map[this.variant()];\n });\n\n dismiss(): void {\n this.visible.set(false);\n this.dismissed.emit();\n }\n}\n","@if (visible()) {\n <div [class]=\"calloutClasses()\" [attr.role]=\"role()\">\n <lc-icon\n class=\"callout__icon\"\n [name]=\"iconName()\"\n size=\"md\"\n [decorative]=\"!iconAriaLabel()\"\n [ariaLabel]=\"iconAriaLabel()\"\n />\n <div class=\"callout__content\">\n @if (title()) {\n <strong class=\"callout__title\">{{ title() }}</strong>\n }\n <div class=\"callout__body\">\n <ng-content />\n </div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"callout__dismiss\"\n [attr.aria-label]=\"dismissAriaLabel()\"\n (click)=\"dismiss()\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n </button>\n }\n </div>\n}\n"],"mappings":"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"}
|
|
@@ -470,7 +470,7 @@ var ChatComponent = class ChatComponent {
|
|
|
470
470
|
],
|
|
471
471
|
ngImport: i0,
|
|
472
472
|
template: "<div\n class=\"lc-chat\"\n [class.lc-chat--borderless]=\"!bordered()\"\n [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n @if (showHeader()) {\n <div class=\"lc-chat__header\">\n <span class=\"lc-chat__title\">{{ title() }}</span>\n @if (isStreaming()) {\n <span class=\"lc-chat__streaming-badge\">{{ streamingLabel() }}</span>\n }\n </div>\n }\n\n <div\n class=\"lc-chat__messages\"\n [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n #scrollContainer\n >\n <div class=\"lc-chat__thread\">\n @for (msg of formattedMessages(); track msg.id) {\n <div\n class=\"lc-chat__message\"\n [class.lc-chat__message--user]=\"msg.role === 'user'\"\n [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n [class.lc-chat__message--system]=\"msg.role === 'system'\"\n [class.lc-chat__message--avatar]=\"showUserAvatar(msg)\"\n [class.lc-chat__message--streaming]=\"msg.streaming\"\n [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n [attr.aria-live]=\"statusAriaLive(msg.status)\"\n >\n @if ((msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) || showUserAvatar(msg)) {\n <div class=\"lc-chat__marker\" [class.lc-chat__marker--user]=\"msg.role === 'user'\">\n @if (isSemanticStatus(msg.status) && msg.role !== 'user') {\n <span class=\"lc-chat__status-icon\">\n <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n </span>\n } @else if (msg.avatar) {\n <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n } @else if (msg.role === 'user') {\n <span class=\"lc-chat__monogram\" [attr.aria-label]=\"msg.name\">{{ initials(msg.name) }}</span>\n } @else {\n <span\n class=\"lc-chat__dot\"\n [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n ></span>\n }\n </div>\n }\n\n <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n @if (msg.name && msg.role !== 'user') {\n @if (showTimestamps() && msg.timestamp) {\n <div class=\"lc-chat__meta lc-chat__meta--agent\">\n <span class=\"lc-chat__name\">{{ msg.name }}</span>\n <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n </div>\n } @else {\n <div class=\"lc-chat__name\">{{ msg.name }}</div>\n }\n }\n <div class=\"lc-chat__content\">\n @if (isSemanticStatus(msg.status)) {\n <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n }\n @if (messageTemplate) {\n <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n } @else if (shouldRenderMarkdown(msg.role)) {\n <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n } @else {\n {{ msg.content }}\n }\n <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n </div>\n @if (msg.attachments?.length) {\n <div class=\"lc-chat__attachments\">\n @for (att of msg.attachments; track att.id) {\n @if (isImage(att) && att.url) {\n <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n <img [src]=\"att.url\" [alt]=\"att.name\" />\n </a>\n } @else {\n <a\n class=\"lc-chat__attachment lc-chat__attachment--file\"\n [href]=\"att.url || null\"\n [attr.download]=\"att.url ? att.name : null\"\n target=\"_blank\"\n rel=\"noopener\"\n >\n <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n @if (att.size) {\n <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n }\n </a>\n }\n }\n </div>\n }\n @if (showTimestamps() && msg.timestamp && msg.role !== 'user' && !msg.name) {\n <div class=\"lc-chat__time lc-chat__time--tight\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\n @if (showTimestamps() && msg.timestamp && msg.role === 'user') {\n <div class=\"lc-chat__time lc-chat__time--user\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\n }\n\n @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n <div class=\"lc-chat__message lc-chat__message--agent\">\n @if (showAvatars()) {\n <div class=\"lc-chat__marker\">\n <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n </div>\n }\n <div class=\"lc-chat__bubble\">\n <div class=\"lc-chat__typing\">\n <span></span><span></span><span></span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Announces the latest completed non-user turn (see `announcement`). -->\n <div class=\"lc-chat__sr-only lc-chat__announcer\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\n\n <div class=\"lc-chat__input-area\">\n <div class=\"lc-chat__composer\">\n @if (allowFileUpload() && pendingAttachments().length) {\n <div class=\"lc-chat__pending-attachments\">\n @for (att of pendingAttachments(); track att.id) {\n <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n @if (isImage(att) && att.url) {\n <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n } @else {\n <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n </svg>\n }\n <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n @if (att.size) {\n <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n }\n <button\n type=\"button\"\n class=\"lc-chat__pending-remove\"\n (click)=\"removeAttachment(att.id)\"\n [attr.aria-label]=\"removeAttachmentAriaLabel() + ' ' + att.name\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n </div>\n }\n </div>\n }\n\n <label class=\"lc-chat__sr-only\" [for]=\"inputId\">{{ inputLabel() }}</label>\n <textarea\n #composerInput\n [id]=\"inputId\"\n class=\"lc-chat__input\"\n [placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"disabled()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n rows=\"1\"\n ></textarea>\n\n <div class=\"lc-chat__composer-actions\">\n @if (allowFileUpload()) {\n <input\n #fileInput\n type=\"file\"\n class=\"lc-chat__file-input\"\n [accept]=\"accept() || null\"\n [multiple]=\"multiple()\"\n (change)=\"onFilesSelected($event)\"\n />\n <button\n type=\"button\"\n class=\"lc-chat__attach-btn\"\n [disabled]=\"disabled()\"\n (click)=\"openFilePicker()\"\n [attr.aria-label]=\"attachAriaLabel()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n <button\n class=\"lc-chat__send-btn\"\n [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n (click)=\"send()\"\n [attr.aria-label]=\"sendAriaLabel()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>\n",
|
|
473
|
-
styles: [".lc-chat{--lc-chat-content-width: 46rem;--lc-chat-thread-gap: var(--spacing-3, .75rem);--lc-chat-messages-pad-block: var(--spacing-4, 1rem);--lc-chat-messages-pad-inline: var(--spacing-3, .75rem);--lc-chat-bubble-font: var(--font-size-sm, .875rem);--lc-chat-bubble-line: var(--line-height-normal, 1.5);--lc-chat-bubble-pad-block: var(--spacing-2, .5rem);--lc-chat-bubble-pad-inline: var(--spacing-3, .75rem);--lc-chat-header-pad-block: var(--spacing-2, .5rem);--lc-chat-input-area-pad: var(--spacing-3, .75rem);--lc-chat-composer-pad: var(--spacing-2, .5rem);display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--lc-chat-header-pad-block) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--lc-chat-messages-pad-block);padding-inline:var(--lc-chat-messages-pad-inline)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--lc-chat-thread-gap)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__message--user{flex-direction:column;align-items:flex-end;gap:var(--spacing-1, .25rem)}.lc-chat__message--user.lc-chat__message--avatar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"bubble avatar\" \"time avatar\";column-gap:var(--spacing-2, .5rem);align-items:start}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__bubble{grid-area:bubble;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__time--user{grid-area:time;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__marker--user{grid-area:avatar}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--lc-chat-thread-gap));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__marker--user{width:auto}.lc-chat__marker--user:before{display:none}.lc-chat__monogram{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:color-mix(in srgb,var(--color-primary-500) 18%,var(--color-surface-2));color:var(--color-primary-500);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--lc-chat-bubble-font);line-height:var(--lc-chat-bubble-line);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;flex:0 1 auto;max-width:min(85%,34rem);padding:var(--lc-chat-bubble-pad-block) var(--lc-chat-bubble-pad-inline);border:1px solid color-mix(in srgb,var(--color-primary-500) 22%,transparent);border-radius:var(--border-radius-lg);background:color-mix(in srgb,var(--color-primary-500) 10%,var(--color-surface-2))}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__time--tight{margin-top:0}.lc-chat__time--user{margin-top:0;padding-inline:var(--spacing-1, .25rem)}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--lc-chat-input-area-pad);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--lc-chat-composer-pad);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"],
|
|
473
|
+
styles: [".lc-chat{--lc-chat-content-width: 46rem;--lc-chat-thread-gap: var(--spacing-3, .75rem);--lc-chat-messages-pad-block: var(--spacing-4, 1rem);--lc-chat-messages-pad-inline: var(--spacing-3, .75rem);--lc-chat-bubble-font: var(--font-size-sm, .875rem);--lc-chat-bubble-line: var(--line-height-normal, 1.5);--lc-chat-bubble-pad-block: var(--spacing-2, .5rem);--lc-chat-bubble-pad-inline: var(--spacing-3, .75rem);--lc-chat-header-pad-block: var(--spacing-2, .5rem);--lc-chat-input-area-pad: var(--spacing-3, .75rem);--lc-chat-composer-pad: var(--spacing-2, .5rem);display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--lc-chat-header-pad-block) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--lc-chat-messages-pad-block);padding-inline:var(--lc-chat-messages-pad-inline)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--lc-chat-thread-gap)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__message--user{flex-direction:column;align-items:flex-end;gap:var(--spacing-1, .25rem)}.lc-chat__message--user.lc-chat__message--avatar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"bubble avatar\" \"time avatar\";column-gap:var(--spacing-2, .5rem);align-items:start}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__bubble{grid-area:bubble;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__time--user{grid-area:time;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__marker--user{grid-area:avatar}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--lc-chat-thread-gap));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__marker--user{width:auto}.lc-chat__marker--user:before{display:none}.lc-chat__monogram{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:color-mix(in srgb,var(--color-primary-500) 18%,var(--color-surface-2));color:var(--color-primary-500);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--lc-chat-bubble-font);line-height:var(--lc-chat-bubble-line);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;flex:0 1 auto;max-width:min(85%,34rem);padding:var(--lc-chat-bubble-pad-block) var(--lc-chat-bubble-pad-inline);border:1px solid color-mix(in srgb,var(--color-primary-500) 22%,transparent);border-radius:var(--border-radius-lg);background:color-mix(in srgb,var(--color-primary-500) 10%,var(--color-surface-2))}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__time--tight{margin-top:0}.lc-chat__time--user{margin-top:0;padding-inline:var(--spacing-1, .25rem)}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--lc-chat-input-area-pad);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--lc-chat-composer-pad);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__send-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__attach-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__pending-remove:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}@media(forced-colors:active){.lc-chat__send-btn:focus-visible,.lc-chat__attach-btn:focus-visible,.lc-chat__pending-remove:focus-visible,.lc-chat__attachment:focus-visible{outline-color:Highlight}}\n"],
|
|
474
474
|
dependencies: [
|
|
475
475
|
{
|
|
476
476
|
kind: "directive",
|
|
@@ -559,7 +559,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
559
559
|
])],
|
|
560
560
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
561
561
|
template: "<div\n class=\"lc-chat\"\n [class.lc-chat--borderless]=\"!bordered()\"\n [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n @if (showHeader()) {\n <div class=\"lc-chat__header\">\n <span class=\"lc-chat__title\">{{ title() }}</span>\n @if (isStreaming()) {\n <span class=\"lc-chat__streaming-badge\">{{ streamingLabel() }}</span>\n }\n </div>\n }\n\n <div\n class=\"lc-chat__messages\"\n [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n #scrollContainer\n >\n <div class=\"lc-chat__thread\">\n @for (msg of formattedMessages(); track msg.id) {\n <div\n class=\"lc-chat__message\"\n [class.lc-chat__message--user]=\"msg.role === 'user'\"\n [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n [class.lc-chat__message--system]=\"msg.role === 'system'\"\n [class.lc-chat__message--avatar]=\"showUserAvatar(msg)\"\n [class.lc-chat__message--streaming]=\"msg.streaming\"\n [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n [attr.aria-live]=\"statusAriaLive(msg.status)\"\n >\n @if ((msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) || showUserAvatar(msg)) {\n <div class=\"lc-chat__marker\" [class.lc-chat__marker--user]=\"msg.role === 'user'\">\n @if (isSemanticStatus(msg.status) && msg.role !== 'user') {\n <span class=\"lc-chat__status-icon\">\n <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n </span>\n } @else if (msg.avatar) {\n <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n } @else if (msg.role === 'user') {\n <span class=\"lc-chat__monogram\" [attr.aria-label]=\"msg.name\">{{ initials(msg.name) }}</span>\n } @else {\n <span\n class=\"lc-chat__dot\"\n [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n ></span>\n }\n </div>\n }\n\n <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n @if (msg.name && msg.role !== 'user') {\n @if (showTimestamps() && msg.timestamp) {\n <div class=\"lc-chat__meta lc-chat__meta--agent\">\n <span class=\"lc-chat__name\">{{ msg.name }}</span>\n <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n </div>\n } @else {\n <div class=\"lc-chat__name\">{{ msg.name }}</div>\n }\n }\n <div class=\"lc-chat__content\">\n @if (isSemanticStatus(msg.status)) {\n <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n }\n @if (messageTemplate) {\n <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n } @else if (shouldRenderMarkdown(msg.role)) {\n <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n } @else {\n {{ msg.content }}\n }\n <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n </div>\n @if (msg.attachments?.length) {\n <div class=\"lc-chat__attachments\">\n @for (att of msg.attachments; track att.id) {\n @if (isImage(att) && att.url) {\n <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n <img [src]=\"att.url\" [alt]=\"att.name\" />\n </a>\n } @else {\n <a\n class=\"lc-chat__attachment lc-chat__attachment--file\"\n [href]=\"att.url || null\"\n [attr.download]=\"att.url ? att.name : null\"\n target=\"_blank\"\n rel=\"noopener\"\n >\n <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n @if (att.size) {\n <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n }\n </a>\n }\n }\n </div>\n }\n @if (showTimestamps() && msg.timestamp && msg.role !== 'user' && !msg.name) {\n <div class=\"lc-chat__time lc-chat__time--tight\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\n @if (showTimestamps() && msg.timestamp && msg.role === 'user') {\n <div class=\"lc-chat__time lc-chat__time--user\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\n }\n\n @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n <div class=\"lc-chat__message lc-chat__message--agent\">\n @if (showAvatars()) {\n <div class=\"lc-chat__marker\">\n <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n </div>\n }\n <div class=\"lc-chat__bubble\">\n <div class=\"lc-chat__typing\">\n <span></span><span></span><span></span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Announces the latest completed non-user turn (see `announcement`). -->\n <div class=\"lc-chat__sr-only lc-chat__announcer\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\n\n <div class=\"lc-chat__input-area\">\n <div class=\"lc-chat__composer\">\n @if (allowFileUpload() && pendingAttachments().length) {\n <div class=\"lc-chat__pending-attachments\">\n @for (att of pendingAttachments(); track att.id) {\n <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n @if (isImage(att) && att.url) {\n <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n } @else {\n <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n </svg>\n }\n <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n @if (att.size) {\n <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n }\n <button\n type=\"button\"\n class=\"lc-chat__pending-remove\"\n (click)=\"removeAttachment(att.id)\"\n [attr.aria-label]=\"removeAttachmentAriaLabel() + ' ' + att.name\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n </div>\n }\n </div>\n }\n\n <label class=\"lc-chat__sr-only\" [for]=\"inputId\">{{ inputLabel() }}</label>\n <textarea\n #composerInput\n [id]=\"inputId\"\n class=\"lc-chat__input\"\n [placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"disabled()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n rows=\"1\"\n ></textarea>\n\n <div class=\"lc-chat__composer-actions\">\n @if (allowFileUpload()) {\n <input\n #fileInput\n type=\"file\"\n class=\"lc-chat__file-input\"\n [accept]=\"accept() || null\"\n [multiple]=\"multiple()\"\n (change)=\"onFilesSelected($event)\"\n />\n <button\n type=\"button\"\n class=\"lc-chat__attach-btn\"\n [disabled]=\"disabled()\"\n (click)=\"openFilePicker()\"\n [attr.aria-label]=\"attachAriaLabel()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n <button\n class=\"lc-chat__send-btn\"\n [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n (click)=\"send()\"\n [attr.aria-label]=\"sendAriaLabel()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>\n",
|
|
562
|
-
styles: [".lc-chat{--lc-chat-content-width: 46rem;--lc-chat-thread-gap: var(--spacing-3, .75rem);--lc-chat-messages-pad-block: var(--spacing-4, 1rem);--lc-chat-messages-pad-inline: var(--spacing-3, .75rem);--lc-chat-bubble-font: var(--font-size-sm, .875rem);--lc-chat-bubble-line: var(--line-height-normal, 1.5);--lc-chat-bubble-pad-block: var(--spacing-2, .5rem);--lc-chat-bubble-pad-inline: var(--spacing-3, .75rem);--lc-chat-header-pad-block: var(--spacing-2, .5rem);--lc-chat-input-area-pad: var(--spacing-3, .75rem);--lc-chat-composer-pad: var(--spacing-2, .5rem);display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--lc-chat-header-pad-block) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--lc-chat-messages-pad-block);padding-inline:var(--lc-chat-messages-pad-inline)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--lc-chat-thread-gap)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__message--user{flex-direction:column;align-items:flex-end;gap:var(--spacing-1, .25rem)}.lc-chat__message--user.lc-chat__message--avatar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"bubble avatar\" \"time avatar\";column-gap:var(--spacing-2, .5rem);align-items:start}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__bubble{grid-area:bubble;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__time--user{grid-area:time;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__marker--user{grid-area:avatar}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--lc-chat-thread-gap));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__marker--user{width:auto}.lc-chat__marker--user:before{display:none}.lc-chat__monogram{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:color-mix(in srgb,var(--color-primary-500) 18%,var(--color-surface-2));color:var(--color-primary-500);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--lc-chat-bubble-font);line-height:var(--lc-chat-bubble-line);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;flex:0 1 auto;max-width:min(85%,34rem);padding:var(--lc-chat-bubble-pad-block) var(--lc-chat-bubble-pad-inline);border:1px solid color-mix(in srgb,var(--color-primary-500) 22%,transparent);border-radius:var(--border-radius-lg);background:color-mix(in srgb,var(--color-primary-500) 10%,var(--color-surface-2))}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__time--tight{margin-top:0}.lc-chat__time--user{margin-top:0;padding-inline:var(--spacing-1, .25rem)}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--lc-chat-input-area-pad);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--lc-chat-composer-pad);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"]
|
|
562
|
+
styles: [".lc-chat{--lc-chat-content-width: 46rem;--lc-chat-thread-gap: var(--spacing-3, .75rem);--lc-chat-messages-pad-block: var(--spacing-4, 1rem);--lc-chat-messages-pad-inline: var(--spacing-3, .75rem);--lc-chat-bubble-font: var(--font-size-sm, .875rem);--lc-chat-bubble-line: var(--line-height-normal, 1.5);--lc-chat-bubble-pad-block: var(--spacing-2, .5rem);--lc-chat-bubble-pad-inline: var(--spacing-3, .75rem);--lc-chat-header-pad-block: var(--spacing-2, .5rem);--lc-chat-input-area-pad: var(--spacing-3, .75rem);--lc-chat-composer-pad: var(--spacing-2, .5rem);display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--lc-chat-header-pad-block) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--lc-chat-messages-pad-block);padding-inline:var(--lc-chat-messages-pad-inline)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--lc-chat-thread-gap)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__message--user{flex-direction:column;align-items:flex-end;gap:var(--spacing-1, .25rem)}.lc-chat__message--user.lc-chat__message--avatar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"bubble avatar\" \"time avatar\";column-gap:var(--spacing-2, .5rem);align-items:start}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__bubble{grid-area:bubble;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__time--user{grid-area:time;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__marker--user{grid-area:avatar}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--lc-chat-thread-gap));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__marker--user{width:auto}.lc-chat__marker--user:before{display:none}.lc-chat__monogram{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:color-mix(in srgb,var(--color-primary-500) 18%,var(--color-surface-2));color:var(--color-primary-500);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--lc-chat-bubble-font);line-height:var(--lc-chat-bubble-line);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;flex:0 1 auto;max-width:min(85%,34rem);padding:var(--lc-chat-bubble-pad-block) var(--lc-chat-bubble-pad-inline);border:1px solid color-mix(in srgb,var(--color-primary-500) 22%,transparent);border-radius:var(--border-radius-lg);background:color-mix(in srgb,var(--color-primary-500) 10%,var(--color-surface-2))}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__time--tight{margin-top:0}.lc-chat__time--user{margin-top:0;padding-inline:var(--spacing-1, .25rem)}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--lc-chat-input-area-pad);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--lc-chat-composer-pad);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__send-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__attach-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__pending-remove:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}@media(forced-colors:active){.lc-chat__send-btn:focus-visible,.lc-chat__attach-btn:focus-visible,.lc-chat__pending-remove:focus-visible,.lc-chat__attachment:focus-visible{outline-color:Highlight}}\n"]
|
|
563
563
|
}]
|
|
564
564
|
}],
|
|
565
565
|
ctorParameters: () => [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-chat.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/chat/chat.component.ts","../../../../libs/angular-ui-kit/src/lib/chat/chat.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n Injector,\n NgZone,\n TemplateRef,\n ContentChild,\n ViewChild,\n afterNextRender,\n computed,\n effect,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MarkdownComponent } from '@lifecorner/angular-ui-kit/markdown';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK_CIRCLE,\n ICON_CIRCLE_X,\n ICON_EXCLAMATION_TRIANGLE,\n ICON_INFORMATION_CIRCLE,\n} from '@lifecorner/angular-ui-kit/icons';\n\nexport type ChatMessageRole = 'user' | 'agent' | 'system';\n\n/**\n * Semantic status of a chat message — orthogonal to `role` (role = *who*\n * speaks; status = *what kind* of message). Reuses the semantic vocabulary of\n * `lc-alert` / `lc-callout` and drives the rail dot/accent colour + a status\n * icon. `'default'` (or omitted) reproduces the role-coloured behaviour exactly.\n */\nexport type ChatMessageStatus = 'default' | 'info' | 'success' | 'warning' | 'error';\n\n/**\n * Controls which messages are rendered as Markdown via `<lc-markdown>`.\n * - `false` (default): plain text rendering (legacy behavior)\n * - `true` / `'all'`: render every role as Markdown\n * - `'agent'`: only agent messages are rendered as Markdown (recommended)\n */\nexport type ChatRenderMarkdown = boolean | 'agent' | 'all';\n\n/**\n * Represents a file attached to a chat message or pending in the input.\n *\n * The `file` reference is only available for attachments produced by the\n * input (i.e. emitted via `messageSend` / `fileAttach`). Attachments\n * coming from the server or message history typically rely on `url` only.\n */\nexport interface ChatAttachment {\n id: string;\n name: string;\n /** MIME type, e.g. `image/png`, `application/pdf`. */\n type?: string;\n /** Size in bytes. */\n size?: number;\n /** Object URL or remote URL to preview / download the file. */\n url?: string;\n /** Raw browser File reference (set for newly uploaded files). */\n file?: File;\n}\n\nexport interface ChatMessage {\n id: string;\n role: ChatMessageRole;\n content: string;\n timestamp?: Date | string;\n avatar?: string;\n name?: string;\n streaming?: boolean;\n /**\n * Semantic status — colours the rail dot/accent and shows a status icon.\n * Independent of `role`: a `role: 'agent'` message can be `status: 'error'`\n * (failed reply) or `status: 'success'` (tool finished). Defaults to\n * `'default'`, which reproduces today's role-coloured behaviour exactly.\n * An `'error'` message never pulses and is announced assertively (`role=\"alert\"`).\n */\n status?: ChatMessageStatus;\n /** Optional file attachments associated with the message. */\n attachments?: ChatAttachment[];\n /** Arbitrary data passed to a custom messageTemplate. */\n data?: Record<string, unknown>;\n}\n\nexport interface ChatSendEvent {\n content: string;\n /** Files attached to the outgoing message, if any. */\n attachments?: ChatAttachment[];\n}\n\nexport interface ChatFileAttachEvent {\n attachments: ChatAttachment[];\n /** Files rejected because of `accept` / `maxFileSize` constraints. */\n rejected: { file: File; reason: 'type' | 'size' }[];\n}\n\n@Component({\n selector: 'lc-chat',\n standalone: true,\n imports: [NgTemplateOutlet, MarkdownComponent, IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_INFORMATION_CIRCLE, ICON_CHECK_CIRCLE, ICON_EXCLAMATION_TRIANGLE, ICON_CIRCLE_X])],\n templateUrl: './chat.component.html',\n styleUrls: ['./chat.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Chat component for conversational user interfaces.\n *\n * Compact, document-style layout: agent/system turns flow as full-width text on\n * a left timeline rail, while user turns render as right-aligned, accent-tinted\n * bubbles (no name label) with the timestamp on a muted line beneath. Spacing is\n * a single space-efficient scale (tunable via the `--lc-chat-*` custom\n * properties); there is no separate roomy variant.\n *\n * Features:\n * - User, agent, and system message roles\n * - Right-aligned user bubbles with an optional avatar: `msg.avatar` image, or a\n * monogram built from `msg.name` initials (gated by `showAvatars`)\n * - Agent/system turns on a left rail with a status dot, avatar or semantic icon\n * - Streaming cursor indicator for AI responses\n * - Typing indicator with animated dots\n * - Auto-scroll to the latest message (new turns, streamed tokens, history\n * loads) — only while the reader is at the bottom; scrolling up pauses it\n * - Optional avatars and timestamps\n * - Configurable header with title\n * - Send on Enter with Shift+Enter for newline\n * - Optional file upload (`allowFileUpload`) with `accept`/`maxFileSize`\n * constraints, preview chips, and image/file thumbnails inside messages.\n *\n * @example Basic\n * ```html\n * <lc-chat [messages]=\"messages\" title=\"Support\" (messageSend)=\"onSend($event)\" />\n * ```\n *\n * @example With file upload\n * ```html\n * <lc-chat\n * [messages]=\"messages\"\n * [allowFileUpload]=\"true\"\n * accept=\"image/*,.pdf\"\n * [maxFileSize]=\"5 * 1024 * 1024\"\n * (messageSend)=\"onSend($event)\"\n * (fileAttach)=\"onAttach($event)\" />\n * ```\n */\nexport class ChatComponent {\n private static nextId = 0;\n /** Id of the composer textarea (links the visually-hidden label). */\n protected readonly inputId = `lc-chat-input-${++ChatComponent.nextId}`;\n\n /** Messages to display. */\n messages = input<ChatMessage[]>([]);\n\n /** Placeholder text for the input. */\n placeholder = input<string>('Nachricht eingeben…');\n\n /** Accessible name of the composer textarea (visually hidden label). */\n inputLabel = input<string>('Nachricht');\n\n /** Title displayed in the header. */\n title = input<string>('Chat');\n\n /** Whether the agent is currently streaming / typing. */\n isStreaming = input<boolean>(false);\n\n /** Show the header bar. */\n showHeader = input<boolean>(true);\n\n /**\n * Draw the chat's own border + rounded corners. Defaults to `true` (card\n * style). Set `false` to render flush/edge-to-edge — e.g. when the chat is\n * the full-height body of an `<lc-page-layout>` and should sit directly under\n * a page header without a nested box.\n */\n bordered = input<boolean>(true);\n\n /**\n * Where messages stack when they don't fill the height.\n * - `'top'` (default): messages grow from the top down.\n * - `'bottom'`: messages anchor to the bottom (empty space above), like most\n * messaging apps. Still scrolls to reveal the top once they overflow.\n */\n messageAnchor = input<'top' | 'bottom'>('top');\n\n /**\n * Width of the message thread and composer.\n * - `'full'` (default): messages span the full available width.\n * - `'narrow'`: a centered, readable column (~46rem) like a document-style chat.\n */\n contentWidth = input<'narrow' | 'full'>('full');\n\n /** Disable the input. */\n disabled = input<boolean>(false);\n\n /** Show avatars next to messages. */\n showAvatars = input<boolean>(true);\n\n /** Show timestamps. */\n showTimestamps = input<boolean>(true);\n\n /**\n * Render message content as Markdown using `<lc-markdown variant=\"chat\">`.\n * Defaults to `'agent'` so agent replies get rich formatting while user\n * input stays as plain text. Pass `false` to opt out, or `true`/`'all'`\n * to render every role as Markdown.\n */\n renderMarkdown = input<ChatRenderMarkdown>('agent');\n\n /** Enable the file-upload (paperclip) button in the input area. */\n allowFileUpload = input<boolean>(false);\n\n /**\n * Comma-separated list of accepted file types, forwarded to the native\n * `<input accept>` attribute. Examples: `image/*`, `.pdf,.docx`.\n */\n accept = input<string>('');\n\n /** Allow selecting multiple files at once. Defaults to `true`. */\n multiple = input<boolean>(true);\n\n /** Maximum file size in bytes. `0` disables the check. */\n maxFileSize = input<number>(0);\n\n /** BCP 47 locale of the message times (hour and minute). */\n locale = input('de-DE');\n\n /** Header badge while a message is streaming. */\n streamingLabel = input('Streaming…');\n\n /** Accessible name of the attach button (`allowFileUpload`). */\n attachAriaLabel = input('Datei anhängen');\n\n /** Accessible name of the send button. */\n sendAriaLabel = input('Send');\n\n /** Screen-reader prefix of messages with status `info`. */\n statusInfoLabel = input('Info:');\n\n /** Screen-reader prefix of messages with status `success`. */\n statusSuccessLabel = input('Erfolg:');\n\n /** Screen-reader prefix of messages with status `warning`. */\n statusWarningLabel = input('Warnung:');\n\n /** Screen-reader prefix of messages with status `error`. */\n statusErrorLabel = input('Fehler:');\n\n /** Accessible name prefix of a pending attachment's remove button, followed by the file name. */\n removeAttachmentAriaLabel = input('Entfernen:');\n\n /** Emits when user sends a message. */\n messageSend = output<ChatSendEvent>();\n\n /** Emits whenever files are added to the pending attachments list. */\n fileAttach = output<ChatFileAttachEvent>();\n\n /** Custom template for rendering message content. Context: { $implicit: ChatMessage } */\n @ContentChild('messageTemplate') messageTemplate?: TemplateRef<{ $implicit: ChatMessage }>;\n\n protected readonly inputValue = signal('');\n protected readonly pendingAttachments = signal<ChatAttachment[]>([]);\n private attachmentCounter = 0;\n\n private readonly injector = inject(Injector);\n private readonly destroyRef = inject(DestroyRef);\n private readonly ngZone = inject(NgZone);\n\n /**\n * Whether the reader is (near) the bottom of the thread. Auto-scroll only\n * follows new content while this is true, so scrolling up to re-read is\n * never fought. Plain field: updated from a passive scroll listener outside\n * the zone, read untracked by the follow effect.\n */\n private atBottom = true;\n\n /** Distance from the bottom (px) still counted as \"at the bottom\". */\n private static readonly AT_BOTTOM_THRESHOLD = 32;\n\n private readonly scrollContainer = viewChild.required<ElementRef<HTMLDivElement>>('scrollContainer');\n @ViewChild('fileInput') private fileInput?: ElementRef<HTMLInputElement>;\n @ViewChild('composerInput') private composerInput?: ElementRef<HTMLTextAreaElement>;\n\n /** Upper bound for the auto-growing composer before it starts scrolling (px). */\n private static readonly INPUT_MAX_HEIGHT = 192;\n\n protected readonly formattedMessages = computed(() =>\n this.messages().map(m => ({\n ...m,\n timestamp: m.timestamp instanceof Date ? m.timestamp : m.timestamp ? new Date(m.timestamp) : undefined,\n }))\n );\n\n /**\n * Text for the visually-hidden live region: the most recent *completed*\n * non-user message. Streaming turns are announced once they finish (a\n * token-by-token live region would be unusable); user turns were typed by\n * the reader; semantic-status messages carry their own `aria-live`/`alert`.\n */\n protected readonly announcement = computed(() => {\n const msgs = this.messages();\n for (let i = msgs.length - 1; i >= 0; i--) {\n const m = msgs[i];\n if (m.role === 'user' || m.streaming || this.isSemanticStatus(m.status)) continue;\n return m.name ? `${m.name}: ${m.content}` : m.content;\n }\n return '';\n });\n\n constructor() {\n // Passive scroll tracking outside the zone — no CD per scroll frame.\n afterNextRender(() => {\n const el = this.scrollContainer().nativeElement;\n const onScroll = () => {\n this.atBottom =\n el.scrollHeight - el.scrollTop - el.clientHeight < ChatComponent.AT_BOTTOM_THRESHOLD;\n };\n this.ngZone.runOutsideAngular(() => el.addEventListener('scroll', onScroll, { passive: true }));\n this.destroyRef.onDestroy(() => el.removeEventListener('scroll', onScroll));\n });\n\n // Follow the conversation: a new turn, a streamed token on the last turn\n // (the parent hands in a new `messages` array), a history load or the\n // typing indicator appearing all grow the thread — scroll after render,\n // but only if the reader was already at the bottom.\n effect(() => {\n this.messages();\n this.isStreaming();\n if (!this.atBottom) return;\n afterNextRender(() => this.scrollToBottom(), { injector: this.injector });\n });\n }\n\n protected onInput(event: Event): void {\n const el = event.target as HTMLTextAreaElement;\n this.inputValue.set(el.value);\n this.autoGrow(el);\n }\n\n /** Resize the textarea to fit its content so the composer hugs the text. */\n private autoGrow(el: HTMLTextAreaElement): void {\n el.style.height = 'auto';\n el.style.height = `${Math.min(el.scrollHeight, ChatComponent.INPUT_MAX_HEIGHT)}px`;\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n // Enter while an IME composition is open commits the composition, not the message.\n if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {\n event.preventDefault();\n this.send();\n }\n }\n\n protected send(): void {\n const content = this.inputValue().trim();\n const attachments = this.pendingAttachments();\n if ((!content && attachments.length === 0) || this.disabled()) return;\n this.messageSend.emit({\n content,\n attachments: attachments.length ? attachments : undefined,\n });\n this.inputValue.set('');\n this.pendingAttachments.set([]);\n // Sending re-engages follow mode: the reader wants to see their own turn\n // and the reply, even if they had scrolled up before.\n this.atBottom = true;\n afterNextRender(() => this.scrollToBottom(), { injector: this.injector });\n // Collapse the auto-grown textarea back to a single row.\n const el = this.composerInput?.nativeElement;\n if (el) el.style.height = 'auto';\n }\n\n protected openFilePicker(): void {\n if (this.disabled() || !this.allowFileUpload()) return;\n this.fileInput?.nativeElement.click();\n }\n\n protected onFilesSelected(event: Event): void {\n const input = event.target as HTMLInputElement;\n if (!input.files || input.files.length === 0) return;\n this.addFiles(Array.from(input.files));\n // Reset so the same file can be re-selected later.\n input.value = '';\n }\n\n protected removeAttachment(id: string): void {\n this.pendingAttachments.update(list => {\n const removed = list.find(a => a.id === id);\n if (removed?.url && removed.file) {\n URL.revokeObjectURL(removed.url);\n }\n return list.filter(a => a.id !== id);\n });\n }\n\n protected formatBytes(size: number | undefined): string {\n if (!size && size !== 0) return '';\n if (size < 1024) return `${size} B`;\n if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;\n return `${(size / (1024 * 1024)).toFixed(1)} MB`;\n }\n\n protected isImage(att: ChatAttachment): boolean {\n return !!att.type?.startsWith('image/');\n }\n\n private addFiles(files: File[]): void {\n const max = this.maxFileSize();\n const acceptList = this.accept()\n .split(',')\n .map(s => s.trim())\n .filter(Boolean);\n\n const accepted: ChatAttachment[] = [];\n const rejected: { file: File; reason: 'type' | 'size' }[] = [];\n\n for (const file of files) {\n if (max > 0 && file.size > max) {\n rejected.push({ file, reason: 'size' });\n continue;\n }\n if (acceptList.length > 0 && !this.matchesAccept(file, acceptList)) {\n rejected.push({ file, reason: 'type' });\n continue;\n }\n accepted.push({\n id: `att-${Date.now()}-${this.attachmentCounter++}`,\n name: file.name,\n type: file.type,\n size: file.size,\n url: URL.createObjectURL(file),\n file,\n });\n }\n\n if (accepted.length) {\n this.pendingAttachments.update(list => [...list, ...accepted]);\n }\n if (accepted.length || rejected.length) {\n this.fileAttach.emit({ attachments: accepted, rejected });\n }\n }\n\n private matchesAccept(file: File, acceptList: string[]): boolean {\n const name = file.name.toLowerCase();\n const type = file.type.toLowerCase();\n return acceptList.some(rule => {\n const r = rule.toLowerCase();\n if (r.startsWith('.')) return name.endsWith(r);\n if (r.endsWith('/*')) return type.startsWith(r.slice(0, -1));\n return type === r;\n });\n }\n\n protected formatTime(date: Date | undefined): string {\n if (!date) return '';\n return date.toLocaleTimeString(this.locale(), { hour: '2-digit', minute: '2-digit' });\n }\n\n /**\n * Up to two uppercase initials from a name (first + last word), used for the\n * user avatar monogram when no `avatar` image is provided. Returns `''` for an\n * empty/whitespace name so the caller can skip rendering.\n */\n protected initials(name: string | undefined): string {\n if (!name) return '';\n const parts = name.trim().split(/\\s+/).filter(Boolean);\n if (parts.length === 0) return '';\n const first = parts[0][0] ?? '';\n const last = parts.length > 1 ? parts[parts.length - 1][0] ?? '' : '';\n return (first + last).toUpperCase();\n }\n\n /**\n * Whether to show an avatar on a user turn: only when avatars are enabled and\n * the message carries either an image or a name we can build a monogram from.\n * Keeps the labelless bubble clean when there's nothing to show.\n */\n protected showUserAvatar(msg: ChatMessage): boolean {\n return (\n msg.role === 'user' &&\n this.showAvatars() &&\n !!(msg.avatar || this.initials(msg.name))\n );\n }\n\n protected shouldRenderMarkdown(role: ChatMessageRole): boolean {\n const mode = this.renderMarkdown();\n if (mode === false) return false;\n if (mode === true || mode === 'all') return true;\n return role === mode;\n }\n\n /** Whether a message carries a semantic (non-`default`) status. */\n protected isSemanticStatus(status: ChatMessageStatus | undefined): boolean {\n return !!status && status !== 'default';\n }\n\n /** Rail icon for a semantic status — reuses the `lc-alert` icon names. */\n protected statusIcon(status: ChatMessageStatus | undefined): string {\n switch (status) {\n case 'info':\n return 'information-circle';\n case 'success':\n return 'check-circle';\n case 'warning':\n return 'exclamation-triangle';\n case 'error':\n return 'x-circle';\n default:\n return '';\n }\n }\n\n /** Semantic token colour for a status dot/icon. */\n protected statusColor(status: ChatMessageStatus | undefined): string {\n switch (status) {\n case 'info':\n return 'var(--color-info-500)';\n case 'success':\n return 'var(--color-success-500)';\n case 'warning':\n return 'var(--color-warning-500)';\n case 'error':\n return 'var(--color-error-500)';\n default:\n return 'currentColor';\n }\n }\n\n /** Visually-hidden prefix so colour/icon is never the only signal. */\n protected statusLabel(status: ChatMessageStatus | undefined): string {\n switch (status) {\n case 'info':\n return this.statusInfoLabel();\n case 'success':\n return this.statusSuccessLabel();\n case 'warning':\n return this.statusWarningLabel();\n case 'error':\n return this.statusErrorLabel();\n default:\n return '';\n }\n }\n\n /** ARIA live priority: assertive for `error`, polite for other statuses. */\n protected statusAriaLive(status: ChatMessageStatus | undefined): 'assertive' | 'polite' | null {\n if (status === 'error') return 'assertive';\n if (this.isSemanticStatus(status)) return 'polite';\n return null;\n }\n\n private scrollToBottom(): void {\n const el = this.scrollContainer().nativeElement;\n el.scrollTop = el.scrollHeight;\n }\n}\n","<div\n class=\"lc-chat\"\n [class.lc-chat--borderless]=\"!bordered()\"\n [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n @if (showHeader()) {\n <div class=\"lc-chat__header\">\n <span class=\"lc-chat__title\">{{ title() }}</span>\n @if (isStreaming()) {\n <span class=\"lc-chat__streaming-badge\">{{ streamingLabel() }}</span>\n }\n </div>\n }\n\n <div\n class=\"lc-chat__messages\"\n [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n #scrollContainer\n >\n <div class=\"lc-chat__thread\">\n @for (msg of formattedMessages(); track msg.id) {\n <div\n class=\"lc-chat__message\"\n [class.lc-chat__message--user]=\"msg.role === 'user'\"\n [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n [class.lc-chat__message--system]=\"msg.role === 'system'\"\n [class.lc-chat__message--avatar]=\"showUserAvatar(msg)\"\n [class.lc-chat__message--streaming]=\"msg.streaming\"\n [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n [attr.aria-live]=\"statusAriaLive(msg.status)\"\n >\n @if ((msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) || showUserAvatar(msg)) {\n <div class=\"lc-chat__marker\" [class.lc-chat__marker--user]=\"msg.role === 'user'\">\n @if (isSemanticStatus(msg.status) && msg.role !== 'user') {\n <span class=\"lc-chat__status-icon\">\n <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n </span>\n } @else if (msg.avatar) {\n <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n } @else if (msg.role === 'user') {\n <span class=\"lc-chat__monogram\" [attr.aria-label]=\"msg.name\">{{ initials(msg.name) }}</span>\n } @else {\n <span\n class=\"lc-chat__dot\"\n [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n ></span>\n }\n </div>\n }\n\n <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n @if (msg.name && msg.role !== 'user') {\n @if (showTimestamps() && msg.timestamp) {\n <div class=\"lc-chat__meta lc-chat__meta--agent\">\n <span class=\"lc-chat__name\">{{ msg.name }}</span>\n <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n </div>\n } @else {\n <div class=\"lc-chat__name\">{{ msg.name }}</div>\n }\n }\n <div class=\"lc-chat__content\">\n @if (isSemanticStatus(msg.status)) {\n <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n }\n @if (messageTemplate) {\n <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n } @else if (shouldRenderMarkdown(msg.role)) {\n <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n } @else {\n {{ msg.content }}\n }\n <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n </div>\n @if (msg.attachments?.length) {\n <div class=\"lc-chat__attachments\">\n @for (att of msg.attachments; track att.id) {\n @if (isImage(att) && att.url) {\n <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n <img [src]=\"att.url\" [alt]=\"att.name\" />\n </a>\n } @else {\n <a\n class=\"lc-chat__attachment lc-chat__attachment--file\"\n [href]=\"att.url || null\"\n [attr.download]=\"att.url ? att.name : null\"\n target=\"_blank\"\n rel=\"noopener\"\n >\n <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n @if (att.size) {\n <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n }\n </a>\n }\n }\n </div>\n }\n @if (showTimestamps() && msg.timestamp && msg.role !== 'user' && !msg.name) {\n <div class=\"lc-chat__time lc-chat__time--tight\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\n @if (showTimestamps() && msg.timestamp && msg.role === 'user') {\n <div class=\"lc-chat__time lc-chat__time--user\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\n }\n\n @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n <div class=\"lc-chat__message lc-chat__message--agent\">\n @if (showAvatars()) {\n <div class=\"lc-chat__marker\">\n <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n </div>\n }\n <div class=\"lc-chat__bubble\">\n <div class=\"lc-chat__typing\">\n <span></span><span></span><span></span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Announces the latest completed non-user turn (see `announcement`). -->\n <div class=\"lc-chat__sr-only lc-chat__announcer\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\n\n <div class=\"lc-chat__input-area\">\n <div class=\"lc-chat__composer\">\n @if (allowFileUpload() && pendingAttachments().length) {\n <div class=\"lc-chat__pending-attachments\">\n @for (att of pendingAttachments(); track att.id) {\n <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n @if (isImage(att) && att.url) {\n <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n } @else {\n <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n </svg>\n }\n <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n @if (att.size) {\n <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n }\n <button\n type=\"button\"\n class=\"lc-chat__pending-remove\"\n (click)=\"removeAttachment(att.id)\"\n [attr.aria-label]=\"removeAttachmentAriaLabel() + ' ' + att.name\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n </div>\n }\n </div>\n }\n\n <label class=\"lc-chat__sr-only\" [for]=\"inputId\">{{ inputLabel() }}</label>\n <textarea\n #composerInput\n [id]=\"inputId\"\n class=\"lc-chat__input\"\n [placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"disabled()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n rows=\"1\"\n ></textarea>\n\n <div class=\"lc-chat__composer-actions\">\n @if (allowFileUpload()) {\n <input\n #fileInput\n type=\"file\"\n class=\"lc-chat__file-input\"\n [accept]=\"accept() || null\"\n [multiple]=\"multiple()\"\n (change)=\"onFilesSelected($event)\"\n />\n <button\n type=\"button\"\n class=\"lc-chat__attach-btn\"\n [disabled]=\"disabled()\"\n (click)=\"openFilePicker()\"\n [attr.aria-label]=\"attachAriaLabel()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n <button\n class=\"lc-chat__send-btn\"\n [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n (click)=\"send()\"\n [attr.aria-label]=\"sendAriaLabel()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-chat.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/chat/chat.component.ts","../../../../libs/angular-ui-kit/src/lib/chat/chat.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n Injector,\n NgZone,\n TemplateRef,\n ContentChild,\n ViewChild,\n afterNextRender,\n computed,\n effect,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MarkdownComponent } from '@lifecorner/angular-ui-kit/markdown';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK_CIRCLE,\n ICON_CIRCLE_X,\n ICON_EXCLAMATION_TRIANGLE,\n ICON_INFORMATION_CIRCLE,\n} from '@lifecorner/angular-ui-kit/icons';\n\nexport type ChatMessageRole = 'user' | 'agent' | 'system';\n\n/**\n * Semantic status of a chat message — orthogonal to `role` (role = *who*\n * speaks; status = *what kind* of message). Reuses the semantic vocabulary of\n * `lc-alert` / `lc-callout` and drives the rail dot/accent colour + a status\n * icon. `'default'` (or omitted) reproduces the role-coloured behaviour exactly.\n */\nexport type ChatMessageStatus = 'default' | 'info' | 'success' | 'warning' | 'error';\n\n/**\n * Controls which messages are rendered as Markdown via `<lc-markdown>`.\n * - `false` (default): plain text rendering (legacy behavior)\n * - `true` / `'all'`: render every role as Markdown\n * - `'agent'`: only agent messages are rendered as Markdown (recommended)\n */\nexport type ChatRenderMarkdown = boolean | 'agent' | 'all';\n\n/**\n * Represents a file attached to a chat message or pending in the input.\n *\n * The `file` reference is only available for attachments produced by the\n * input (i.e. emitted via `messageSend` / `fileAttach`). Attachments\n * coming from the server or message history typically rely on `url` only.\n */\nexport interface ChatAttachment {\n id: string;\n name: string;\n /** MIME type, e.g. `image/png`, `application/pdf`. */\n type?: string;\n /** Size in bytes. */\n size?: number;\n /** Object URL or remote URL to preview / download the file. */\n url?: string;\n /** Raw browser File reference (set for newly uploaded files). */\n file?: File;\n}\n\nexport interface ChatMessage {\n id: string;\n role: ChatMessageRole;\n content: string;\n timestamp?: Date | string;\n avatar?: string;\n name?: string;\n streaming?: boolean;\n /**\n * Semantic status — colours the rail dot/accent and shows a status icon.\n * Independent of `role`: a `role: 'agent'` message can be `status: 'error'`\n * (failed reply) or `status: 'success'` (tool finished). Defaults to\n * `'default'`, which reproduces today's role-coloured behaviour exactly.\n * An `'error'` message never pulses and is announced assertively (`role=\"alert\"`).\n */\n status?: ChatMessageStatus;\n /** Optional file attachments associated with the message. */\n attachments?: ChatAttachment[];\n /** Arbitrary data passed to a custom messageTemplate. */\n data?: Record<string, unknown>;\n}\n\nexport interface ChatSendEvent {\n content: string;\n /** Files attached to the outgoing message, if any. */\n attachments?: ChatAttachment[];\n}\n\nexport interface ChatFileAttachEvent {\n attachments: ChatAttachment[];\n /** Files rejected because of `accept` / `maxFileSize` constraints. */\n rejected: { file: File; reason: 'type' | 'size' }[];\n}\n\n@Component({\n selector: 'lc-chat',\n standalone: true,\n imports: [NgTemplateOutlet, MarkdownComponent, IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_INFORMATION_CIRCLE, ICON_CHECK_CIRCLE, ICON_EXCLAMATION_TRIANGLE, ICON_CIRCLE_X])],\n templateUrl: './chat.component.html',\n styleUrls: ['./chat.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Chat component for conversational user interfaces.\n *\n * Compact, document-style layout: agent/system turns flow as full-width text on\n * a left timeline rail, while user turns render as right-aligned, accent-tinted\n * bubbles (no name label) with the timestamp on a muted line beneath. Spacing is\n * a single space-efficient scale (tunable via the `--lc-chat-*` custom\n * properties); there is no separate roomy variant.\n *\n * Features:\n * - User, agent, and system message roles\n * - Right-aligned user bubbles with an optional avatar: `msg.avatar` image, or a\n * monogram built from `msg.name` initials (gated by `showAvatars`)\n * - Agent/system turns on a left rail with a status dot, avatar or semantic icon\n * - Streaming cursor indicator for AI responses\n * - Typing indicator with animated dots\n * - Auto-scroll to the latest message (new turns, streamed tokens, history\n * loads) — only while the reader is at the bottom; scrolling up pauses it\n * - Optional avatars and timestamps\n * - Configurable header with title\n * - Send on Enter with Shift+Enter for newline\n * - Optional file upload (`allowFileUpload`) with `accept`/`maxFileSize`\n * constraints, preview chips, and image/file thumbnails inside messages.\n *\n * @example Basic\n * ```html\n * <lc-chat [messages]=\"messages\" title=\"Support\" (messageSend)=\"onSend($event)\" />\n * ```\n *\n * @example With file upload\n * ```html\n * <lc-chat\n * [messages]=\"messages\"\n * [allowFileUpload]=\"true\"\n * accept=\"image/*,.pdf\"\n * [maxFileSize]=\"5 * 1024 * 1024\"\n * (messageSend)=\"onSend($event)\"\n * (fileAttach)=\"onAttach($event)\" />\n * ```\n */\nexport class ChatComponent {\n private static nextId = 0;\n /** Id of the composer textarea (links the visually-hidden label). */\n protected readonly inputId = `lc-chat-input-${++ChatComponent.nextId}`;\n\n /** Messages to display. */\n messages = input<ChatMessage[]>([]);\n\n /** Placeholder text for the input. */\n placeholder = input<string>('Nachricht eingeben…');\n\n /** Accessible name of the composer textarea (visually hidden label). */\n inputLabel = input<string>('Nachricht');\n\n /** Title displayed in the header. */\n title = input<string>('Chat');\n\n /** Whether the agent is currently streaming / typing. */\n isStreaming = input<boolean>(false);\n\n /** Show the header bar. */\n showHeader = input<boolean>(true);\n\n /**\n * Draw the chat's own border + rounded corners. Defaults to `true` (card\n * style). Set `false` to render flush/edge-to-edge — e.g. when the chat is\n * the full-height body of an `<lc-page-layout>` and should sit directly under\n * a page header without a nested box.\n */\n bordered = input<boolean>(true);\n\n /**\n * Where messages stack when they don't fill the height.\n * - `'top'` (default): messages grow from the top down.\n * - `'bottom'`: messages anchor to the bottom (empty space above), like most\n * messaging apps. Still scrolls to reveal the top once they overflow.\n */\n messageAnchor = input<'top' | 'bottom'>('top');\n\n /**\n * Width of the message thread and composer.\n * - `'full'` (default): messages span the full available width.\n * - `'narrow'`: a centered, readable column (~46rem) like a document-style chat.\n */\n contentWidth = input<'narrow' | 'full'>('full');\n\n /** Disable the input. */\n disabled = input<boolean>(false);\n\n /** Show avatars next to messages. */\n showAvatars = input<boolean>(true);\n\n /** Show timestamps. */\n showTimestamps = input<boolean>(true);\n\n /**\n * Render message content as Markdown using `<lc-markdown variant=\"chat\">`.\n * Defaults to `'agent'` so agent replies get rich formatting while user\n * input stays as plain text. Pass `false` to opt out, or `true`/`'all'`\n * to render every role as Markdown.\n */\n renderMarkdown = input<ChatRenderMarkdown>('agent');\n\n /** Enable the file-upload (paperclip) button in the input area. */\n allowFileUpload = input<boolean>(false);\n\n /**\n * Comma-separated list of accepted file types, forwarded to the native\n * `<input accept>` attribute. Examples: `image/*`, `.pdf,.docx`.\n */\n accept = input<string>('');\n\n /** Allow selecting multiple files at once. Defaults to `true`. */\n multiple = input<boolean>(true);\n\n /** Maximum file size in bytes. `0` disables the check. */\n maxFileSize = input<number>(0);\n\n /** BCP 47 locale of the message times (hour and minute). */\n locale = input('de-DE');\n\n /** Header badge while a message is streaming. */\n streamingLabel = input('Streaming…');\n\n /** Accessible name of the attach button (`allowFileUpload`). */\n attachAriaLabel = input('Datei anhängen');\n\n /** Accessible name of the send button. */\n sendAriaLabel = input('Send');\n\n /** Screen-reader prefix of messages with status `info`. */\n statusInfoLabel = input('Info:');\n\n /** Screen-reader prefix of messages with status `success`. */\n statusSuccessLabel = input('Erfolg:');\n\n /** Screen-reader prefix of messages with status `warning`. */\n statusWarningLabel = input('Warnung:');\n\n /** Screen-reader prefix of messages with status `error`. */\n statusErrorLabel = input('Fehler:');\n\n /** Accessible name prefix of a pending attachment's remove button, followed by the file name. */\n removeAttachmentAriaLabel = input('Entfernen:');\n\n /** Emits when user sends a message. */\n messageSend = output<ChatSendEvent>();\n\n /** Emits whenever files are added to the pending attachments list. */\n fileAttach = output<ChatFileAttachEvent>();\n\n /** Custom template for rendering message content. Context: { $implicit: ChatMessage } */\n @ContentChild('messageTemplate') messageTemplate?: TemplateRef<{ $implicit: ChatMessage }>;\n\n protected readonly inputValue = signal('');\n protected readonly pendingAttachments = signal<ChatAttachment[]>([]);\n private attachmentCounter = 0;\n\n private readonly injector = inject(Injector);\n private readonly destroyRef = inject(DestroyRef);\n private readonly ngZone = inject(NgZone);\n\n /**\n * Whether the reader is (near) the bottom of the thread. Auto-scroll only\n * follows new content while this is true, so scrolling up to re-read is\n * never fought. Plain field: updated from a passive scroll listener outside\n * the zone, read untracked by the follow effect.\n */\n private atBottom = true;\n\n /** Distance from the bottom (px) still counted as \"at the bottom\". */\n private static readonly AT_BOTTOM_THRESHOLD = 32;\n\n private readonly scrollContainer = viewChild.required<ElementRef<HTMLDivElement>>('scrollContainer');\n @ViewChild('fileInput') private fileInput?: ElementRef<HTMLInputElement>;\n @ViewChild('composerInput') private composerInput?: ElementRef<HTMLTextAreaElement>;\n\n /** Upper bound for the auto-growing composer before it starts scrolling (px). */\n private static readonly INPUT_MAX_HEIGHT = 192;\n\n protected readonly formattedMessages = computed(() =>\n this.messages().map(m => ({\n ...m,\n timestamp: m.timestamp instanceof Date ? m.timestamp : m.timestamp ? new Date(m.timestamp) : undefined,\n }))\n );\n\n /**\n * Text for the visually-hidden live region: the most recent *completed*\n * non-user message. Streaming turns are announced once they finish (a\n * token-by-token live region would be unusable); user turns were typed by\n * the reader; semantic-status messages carry their own `aria-live`/`alert`.\n */\n protected readonly announcement = computed(() => {\n const msgs = this.messages();\n for (let i = msgs.length - 1; i >= 0; i--) {\n const m = msgs[i];\n if (m.role === 'user' || m.streaming || this.isSemanticStatus(m.status)) continue;\n return m.name ? `${m.name}: ${m.content}` : m.content;\n }\n return '';\n });\n\n constructor() {\n // Passive scroll tracking outside the zone — no CD per scroll frame.\n afterNextRender(() => {\n const el = this.scrollContainer().nativeElement;\n const onScroll = () => {\n this.atBottom =\n el.scrollHeight - el.scrollTop - el.clientHeight < ChatComponent.AT_BOTTOM_THRESHOLD;\n };\n this.ngZone.runOutsideAngular(() => el.addEventListener('scroll', onScroll, { passive: true }));\n this.destroyRef.onDestroy(() => el.removeEventListener('scroll', onScroll));\n });\n\n // Follow the conversation: a new turn, a streamed token on the last turn\n // (the parent hands in a new `messages` array), a history load or the\n // typing indicator appearing all grow the thread — scroll after render,\n // but only if the reader was already at the bottom.\n effect(() => {\n this.messages();\n this.isStreaming();\n if (!this.atBottom) return;\n afterNextRender(() => this.scrollToBottom(), { injector: this.injector });\n });\n }\n\n protected onInput(event: Event): void {\n const el = event.target as HTMLTextAreaElement;\n this.inputValue.set(el.value);\n this.autoGrow(el);\n }\n\n /** Resize the textarea to fit its content so the composer hugs the text. */\n private autoGrow(el: HTMLTextAreaElement): void {\n el.style.height = 'auto';\n el.style.height = `${Math.min(el.scrollHeight, ChatComponent.INPUT_MAX_HEIGHT)}px`;\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n // Enter while an IME composition is open commits the composition, not the message.\n if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {\n event.preventDefault();\n this.send();\n }\n }\n\n protected send(): void {\n const content = this.inputValue().trim();\n const attachments = this.pendingAttachments();\n if ((!content && attachments.length === 0) || this.disabled()) return;\n this.messageSend.emit({\n content,\n attachments: attachments.length ? attachments : undefined,\n });\n this.inputValue.set('');\n this.pendingAttachments.set([]);\n // Sending re-engages follow mode: the reader wants to see their own turn\n // and the reply, even if they had scrolled up before.\n this.atBottom = true;\n afterNextRender(() => this.scrollToBottom(), { injector: this.injector });\n // Collapse the auto-grown textarea back to a single row.\n const el = this.composerInput?.nativeElement;\n if (el) el.style.height = 'auto';\n }\n\n protected openFilePicker(): void {\n if (this.disabled() || !this.allowFileUpload()) return;\n this.fileInput?.nativeElement.click();\n }\n\n protected onFilesSelected(event: Event): void {\n const input = event.target as HTMLInputElement;\n if (!input.files || input.files.length === 0) return;\n this.addFiles(Array.from(input.files));\n // Reset so the same file can be re-selected later.\n input.value = '';\n }\n\n protected removeAttachment(id: string): void {\n this.pendingAttachments.update(list => {\n const removed = list.find(a => a.id === id);\n if (removed?.url && removed.file) {\n URL.revokeObjectURL(removed.url);\n }\n return list.filter(a => a.id !== id);\n });\n }\n\n protected formatBytes(size: number | undefined): string {\n if (!size && size !== 0) return '';\n if (size < 1024) return `${size} B`;\n if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;\n return `${(size / (1024 * 1024)).toFixed(1)} MB`;\n }\n\n protected isImage(att: ChatAttachment): boolean {\n return !!att.type?.startsWith('image/');\n }\n\n private addFiles(files: File[]): void {\n const max = this.maxFileSize();\n const acceptList = this.accept()\n .split(',')\n .map(s => s.trim())\n .filter(Boolean);\n\n const accepted: ChatAttachment[] = [];\n const rejected: { file: File; reason: 'type' | 'size' }[] = [];\n\n for (const file of files) {\n if (max > 0 && file.size > max) {\n rejected.push({ file, reason: 'size' });\n continue;\n }\n if (acceptList.length > 0 && !this.matchesAccept(file, acceptList)) {\n rejected.push({ file, reason: 'type' });\n continue;\n }\n accepted.push({\n id: `att-${Date.now()}-${this.attachmentCounter++}`,\n name: file.name,\n type: file.type,\n size: file.size,\n url: URL.createObjectURL(file),\n file,\n });\n }\n\n if (accepted.length) {\n this.pendingAttachments.update(list => [...list, ...accepted]);\n }\n if (accepted.length || rejected.length) {\n this.fileAttach.emit({ attachments: accepted, rejected });\n }\n }\n\n private matchesAccept(file: File, acceptList: string[]): boolean {\n const name = file.name.toLowerCase();\n const type = file.type.toLowerCase();\n return acceptList.some(rule => {\n const r = rule.toLowerCase();\n if (r.startsWith('.')) return name.endsWith(r);\n if (r.endsWith('/*')) return type.startsWith(r.slice(0, -1));\n return type === r;\n });\n }\n\n protected formatTime(date: Date | undefined): string {\n if (!date) return '';\n return date.toLocaleTimeString(this.locale(), { hour: '2-digit', minute: '2-digit' });\n }\n\n /**\n * Up to two uppercase initials from a name (first + last word), used for the\n * user avatar monogram when no `avatar` image is provided. Returns `''` for an\n * empty/whitespace name so the caller can skip rendering.\n */\n protected initials(name: string | undefined): string {\n if (!name) return '';\n const parts = name.trim().split(/\\s+/).filter(Boolean);\n if (parts.length === 0) return '';\n const first = parts[0][0] ?? '';\n const last = parts.length > 1 ? parts[parts.length - 1][0] ?? '' : '';\n return (first + last).toUpperCase();\n }\n\n /**\n * Whether to show an avatar on a user turn: only when avatars are enabled and\n * the message carries either an image or a name we can build a monogram from.\n * Keeps the labelless bubble clean when there's nothing to show.\n */\n protected showUserAvatar(msg: ChatMessage): boolean {\n return (\n msg.role === 'user' &&\n this.showAvatars() &&\n !!(msg.avatar || this.initials(msg.name))\n );\n }\n\n protected shouldRenderMarkdown(role: ChatMessageRole): boolean {\n const mode = this.renderMarkdown();\n if (mode === false) return false;\n if (mode === true || mode === 'all') return true;\n return role === mode;\n }\n\n /** Whether a message carries a semantic (non-`default`) status. */\n protected isSemanticStatus(status: ChatMessageStatus | undefined): boolean {\n return !!status && status !== 'default';\n }\n\n /** Rail icon for a semantic status — reuses the `lc-alert` icon names. */\n protected statusIcon(status: ChatMessageStatus | undefined): string {\n switch (status) {\n case 'info':\n return 'information-circle';\n case 'success':\n return 'check-circle';\n case 'warning':\n return 'exclamation-triangle';\n case 'error':\n return 'x-circle';\n default:\n return '';\n }\n }\n\n /** Semantic token colour for a status dot/icon. */\n protected statusColor(status: ChatMessageStatus | undefined): string {\n switch (status) {\n case 'info':\n return 'var(--color-info-500)';\n case 'success':\n return 'var(--color-success-500)';\n case 'warning':\n return 'var(--color-warning-500)';\n case 'error':\n return 'var(--color-error-500)';\n default:\n return 'currentColor';\n }\n }\n\n /** Visually-hidden prefix so colour/icon is never the only signal. */\n protected statusLabel(status: ChatMessageStatus | undefined): string {\n switch (status) {\n case 'info':\n return this.statusInfoLabel();\n case 'success':\n return this.statusSuccessLabel();\n case 'warning':\n return this.statusWarningLabel();\n case 'error':\n return this.statusErrorLabel();\n default:\n return '';\n }\n }\n\n /** ARIA live priority: assertive for `error`, polite for other statuses. */\n protected statusAriaLive(status: ChatMessageStatus | undefined): 'assertive' | 'polite' | null {\n if (status === 'error') return 'assertive';\n if (this.isSemanticStatus(status)) return 'polite';\n return null;\n }\n\n private scrollToBottom(): void {\n const el = this.scrollContainer().nativeElement;\n el.scrollTop = el.scrollHeight;\n }\n}\n","<div\n class=\"lc-chat\"\n [class.lc-chat--borderless]=\"!bordered()\"\n [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n @if (showHeader()) {\n <div class=\"lc-chat__header\">\n <span class=\"lc-chat__title\">{{ title() }}</span>\n @if (isStreaming()) {\n <span class=\"lc-chat__streaming-badge\">{{ streamingLabel() }}</span>\n }\n </div>\n }\n\n <div\n class=\"lc-chat__messages\"\n [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n #scrollContainer\n >\n <div class=\"lc-chat__thread\">\n @for (msg of formattedMessages(); track msg.id) {\n <div\n class=\"lc-chat__message\"\n [class.lc-chat__message--user]=\"msg.role === 'user'\"\n [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n [class.lc-chat__message--system]=\"msg.role === 'system'\"\n [class.lc-chat__message--avatar]=\"showUserAvatar(msg)\"\n [class.lc-chat__message--streaming]=\"msg.streaming\"\n [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n [attr.aria-live]=\"statusAriaLive(msg.status)\"\n >\n @if ((msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) || showUserAvatar(msg)) {\n <div class=\"lc-chat__marker\" [class.lc-chat__marker--user]=\"msg.role === 'user'\">\n @if (isSemanticStatus(msg.status) && msg.role !== 'user') {\n <span class=\"lc-chat__status-icon\">\n <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n </span>\n } @else if (msg.avatar) {\n <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n } @else if (msg.role === 'user') {\n <span class=\"lc-chat__monogram\" [attr.aria-label]=\"msg.name\">{{ initials(msg.name) }}</span>\n } @else {\n <span\n class=\"lc-chat__dot\"\n [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n ></span>\n }\n </div>\n }\n\n <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n @if (msg.name && msg.role !== 'user') {\n @if (showTimestamps() && msg.timestamp) {\n <div class=\"lc-chat__meta lc-chat__meta--agent\">\n <span class=\"lc-chat__name\">{{ msg.name }}</span>\n <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n </div>\n } @else {\n <div class=\"lc-chat__name\">{{ msg.name }}</div>\n }\n }\n <div class=\"lc-chat__content\">\n @if (isSemanticStatus(msg.status)) {\n <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n }\n @if (messageTemplate) {\n <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n } @else if (shouldRenderMarkdown(msg.role)) {\n <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n } @else {\n {{ msg.content }}\n }\n <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n </div>\n @if (msg.attachments?.length) {\n <div class=\"lc-chat__attachments\">\n @for (att of msg.attachments; track att.id) {\n @if (isImage(att) && att.url) {\n <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n <img [src]=\"att.url\" [alt]=\"att.name\" />\n </a>\n } @else {\n <a\n class=\"lc-chat__attachment lc-chat__attachment--file\"\n [href]=\"att.url || null\"\n [attr.download]=\"att.url ? att.name : null\"\n target=\"_blank\"\n rel=\"noopener\"\n >\n <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n </svg>\n <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n @if (att.size) {\n <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n }\n </a>\n }\n }\n </div>\n }\n @if (showTimestamps() && msg.timestamp && msg.role !== 'user' && !msg.name) {\n <div class=\"lc-chat__time lc-chat__time--tight\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\n @if (showTimestamps() && msg.timestamp && msg.role === 'user') {\n <div class=\"lc-chat__time lc-chat__time--user\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\n }\n\n @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n <div class=\"lc-chat__message lc-chat__message--agent\">\n @if (showAvatars()) {\n <div class=\"lc-chat__marker\">\n <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n </div>\n }\n <div class=\"lc-chat__bubble\">\n <div class=\"lc-chat__typing\">\n <span></span><span></span><span></span>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Announces the latest completed non-user turn (see `announcement`). -->\n <div class=\"lc-chat__sr-only lc-chat__announcer\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\n\n <div class=\"lc-chat__input-area\">\n <div class=\"lc-chat__composer\">\n @if (allowFileUpload() && pendingAttachments().length) {\n <div class=\"lc-chat__pending-attachments\">\n @for (att of pendingAttachments(); track att.id) {\n <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n @if (isImage(att) && att.url) {\n <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n } @else {\n <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n </svg>\n }\n <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n @if (att.size) {\n <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n }\n <button\n type=\"button\"\n class=\"lc-chat__pending-remove\"\n (click)=\"removeAttachment(att.id)\"\n [attr.aria-label]=\"removeAttachmentAriaLabel() + ' ' + att.name\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n </div>\n }\n </div>\n }\n\n <label class=\"lc-chat__sr-only\" [for]=\"inputId\">{{ inputLabel() }}</label>\n <textarea\n #composerInput\n [id]=\"inputId\"\n class=\"lc-chat__input\"\n [placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"disabled()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n rows=\"1\"\n ></textarea>\n\n <div class=\"lc-chat__composer-actions\">\n @if (allowFileUpload()) {\n <input\n #fileInput\n type=\"file\"\n class=\"lc-chat__file-input\"\n [accept]=\"accept() || null\"\n [multiple]=\"multiple()\"\n (change)=\"onFilesSelected($event)\"\n />\n <button\n type=\"button\"\n class=\"lc-chat__attach-btn\"\n [disabled]=\"disabled()\"\n (click)=\"openFilePicker()\"\n [attr.aria-label]=\"attachAriaLabel()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n <button\n class=\"lc-chat__send-btn\"\n [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n (click)=\"send()\"\n [attr.aria-label]=\"sendAriaLabel()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>\n"],"mappings":"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"}
|
|
@@ -182,7 +182,7 @@ var ColorPickerComponent = class ColorPickerComponent {
|
|
|
182
182
|
}],
|
|
183
183
|
ngImport: i0,
|
|
184
184
|
template: "<div [class]=\"pickerClasses()\">\n @if (label()) {\n <label class=\"color-picker__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <div class=\"color-picker__preview-row\">\n <input\n type=\"color\"\n [id]=\"inputId\"\n class=\"color-picker__native\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n />\n <span\n class=\"color-picker__swatch-preview\"\n [style.background-color]=\"value()\"\n aria-hidden=\"true\"\n ></span>\n @if (showInput()) {\n <input\n type=\"text\"\n class=\"color-picker__hex-input\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n maxlength=\"7\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"(label() ? label() + ' – ' : '') + hexAriaLabel()\"\n />\n }\n </div>\n @if (swatches().length > 0) {\n <div\n class=\"color-picker__swatches\"\n role=\"radiogroup\"\n [attr.aria-label]=\"(label() ? label() + ' – ' : '') + swatchesAriaLabel()\"\n >\n @for (swatch of swatches(); track swatch; let i = $index) {\n <button\n #swatchBtn\n type=\"button\"\n class=\"color-picker__swatch\"\n role=\"radio\"\n [class.color-picker__swatch--selected]=\"swatch === value()\"\n [class.color-picker__swatch--light]=\"swatch === '#ffffff'\"\n [style.background-color]=\"swatch\"\n [disabled]=\"isDisabled()\"\n [tabindex]=\"i === focusableSwatchIndex() ? 0 : -1\"\n [attr.aria-label]=\"swatch\"\n [attr.aria-checked]=\"swatch === value()\"\n (click)=\"selectSwatch(swatch)\"\n (keydown)=\"onSwatchKeydown($event, i)\"\n (blur)=\"onBlur()\"\n ></button>\n }\n </div>\n }\n</div>\n",
|
|
185
|
-
styles: [".color-picker{display:inline-flex;flex-direction:column;gap:.5rem}.color-picker__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.color-picker__preview-row{display:flex;align-items:center;gap:.5rem}.color-picker__native{width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--color-border);border-radius:var(--border-radius-md);cursor:pointer;background:none}.color-picker__native::-webkit-color-swatch-wrapper{padding:2px}.color-picker__native::-webkit-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native::-moz-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native:disabled{cursor:not-allowed;opacity:.5}.color-picker__swatch-preview{display:block;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--color-border);flex-shrink:0}.color-picker__hex-input{width:5.5rem;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family-mono, monospace);color:var(--color-text-primary);background:var(--color-surface-2)}.color-picker__hex-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.color-picker__hex-input:disabled{cursor:not-allowed;opacity:.5}.color-picker__swatches{display:flex;flex-wrap:wrap;gap:.375rem;max-width:16rem}.color-picker__swatch{width:1.5rem;height:1.5rem;border-radius:var(--border-radius-sm);border:2px solid transparent;cursor:pointer;transition:transform .1s ease,border-color .1s ease;padding:0}.color-picker__swatch:hover:not(:disabled){transform:scale(1.15)}.color-picker__swatch:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.color-picker__swatch--selected{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary-500)}.color-picker__swatch--light{border-color:var(--color-border)}.color-picker__swatch:disabled{cursor:not-allowed;opacity:.5}.color-picker--disabled{opacity:.5;pointer-events:none}\n"],
|
|
185
|
+
styles: [".color-picker{display:inline-flex;flex-direction:column;gap:.5rem}.color-picker__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.color-picker__preview-row{display:flex;align-items:center;gap:.5rem}.color-picker__native{width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--color-border);border-radius:var(--border-radius-md);cursor:pointer;background:none}.color-picker__native::-webkit-color-swatch-wrapper{padding:2px}.color-picker__native::-webkit-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native::-moz-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native:disabled{cursor:not-allowed;opacity:.5}.color-picker__native:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.color-picker__swatch-preview{display:block;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--color-border);flex-shrink:0}.color-picker__hex-input{width:5.5rem;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family-mono, monospace);color:var(--color-text-primary);background:var(--color-surface-2)}.color-picker__hex-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.color-picker__hex-input:disabled{cursor:not-allowed;opacity:.5}.color-picker__swatches{display:flex;flex-wrap:wrap;gap:.375rem;max-width:16rem}.color-picker__swatch{width:1.5rem;height:1.5rem;border-radius:var(--border-radius-sm);border:2px solid transparent;cursor:pointer;transition:transform .1s ease,border-color .1s ease;padding:0}.color-picker__swatch:hover:not(:disabled){transform:scale(1.15)}.color-picker__swatch:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.color-picker__swatch--selected{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary-500)}.color-picker__swatch--light{border-color:var(--color-border)}.color-picker__swatch:disabled{cursor:not-allowed;opacity:.5}.color-picker--disabled{opacity:.5;pointer-events:none}@media(forced-colors:active){.color-picker__native:focus-visible{outline-color:Highlight}}\n"],
|
|
186
186
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
187
187
|
});
|
|
188
188
|
};
|
|
@@ -203,7 +203,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
203
203
|
multi: true
|
|
204
204
|
}],
|
|
205
205
|
template: "<div [class]=\"pickerClasses()\">\n @if (label()) {\n <label class=\"color-picker__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <div class=\"color-picker__preview-row\">\n <input\n type=\"color\"\n [id]=\"inputId\"\n class=\"color-picker__native\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n />\n <span\n class=\"color-picker__swatch-preview\"\n [style.background-color]=\"value()\"\n aria-hidden=\"true\"\n ></span>\n @if (showInput()) {\n <input\n type=\"text\"\n class=\"color-picker__hex-input\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n maxlength=\"7\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"(label() ? label() + ' – ' : '') + hexAriaLabel()\"\n />\n }\n </div>\n @if (swatches().length > 0) {\n <div\n class=\"color-picker__swatches\"\n role=\"radiogroup\"\n [attr.aria-label]=\"(label() ? label() + ' – ' : '') + swatchesAriaLabel()\"\n >\n @for (swatch of swatches(); track swatch; let i = $index) {\n <button\n #swatchBtn\n type=\"button\"\n class=\"color-picker__swatch\"\n role=\"radio\"\n [class.color-picker__swatch--selected]=\"swatch === value()\"\n [class.color-picker__swatch--light]=\"swatch === '#ffffff'\"\n [style.background-color]=\"swatch\"\n [disabled]=\"isDisabled()\"\n [tabindex]=\"i === focusableSwatchIndex() ? 0 : -1\"\n [attr.aria-label]=\"swatch\"\n [attr.aria-checked]=\"swatch === value()\"\n (click)=\"selectSwatch(swatch)\"\n (keydown)=\"onSwatchKeydown($event, i)\"\n (blur)=\"onBlur()\"\n ></button>\n }\n </div>\n }\n</div>\n",
|
|
206
|
-
styles: [".color-picker{display:inline-flex;flex-direction:column;gap:.5rem}.color-picker__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.color-picker__preview-row{display:flex;align-items:center;gap:.5rem}.color-picker__native{width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--color-border);border-radius:var(--border-radius-md);cursor:pointer;background:none}.color-picker__native::-webkit-color-swatch-wrapper{padding:2px}.color-picker__native::-webkit-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native::-moz-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native:disabled{cursor:not-allowed;opacity:.5}.color-picker__swatch-preview{display:block;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--color-border);flex-shrink:0}.color-picker__hex-input{width:5.5rem;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family-mono, monospace);color:var(--color-text-primary);background:var(--color-surface-2)}.color-picker__hex-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.color-picker__hex-input:disabled{cursor:not-allowed;opacity:.5}.color-picker__swatches{display:flex;flex-wrap:wrap;gap:.375rem;max-width:16rem}.color-picker__swatch{width:1.5rem;height:1.5rem;border-radius:var(--border-radius-sm);border:2px solid transparent;cursor:pointer;transition:transform .1s ease,border-color .1s ease;padding:0}.color-picker__swatch:hover:not(:disabled){transform:scale(1.15)}.color-picker__swatch:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.color-picker__swatch--selected{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary-500)}.color-picker__swatch--light{border-color:var(--color-border)}.color-picker__swatch:disabled{cursor:not-allowed;opacity:.5}.color-picker--disabled{opacity:.5;pointer-events:none}\n"]
|
|
206
|
+
styles: [".color-picker{display:inline-flex;flex-direction:column;gap:.5rem}.color-picker__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.color-picker__preview-row{display:flex;align-items:center;gap:.5rem}.color-picker__native{width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--color-border);border-radius:var(--border-radius-md);cursor:pointer;background:none}.color-picker__native::-webkit-color-swatch-wrapper{padding:2px}.color-picker__native::-webkit-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native::-moz-color-swatch{border:none;border-radius:var(--border-radius-sm)}.color-picker__native:disabled{cursor:not-allowed;opacity:.5}.color-picker__native:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.color-picker__swatch-preview{display:block;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--color-border);flex-shrink:0}.color-picker__hex-input{width:5.5rem;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family-mono, monospace);color:var(--color-text-primary);background:var(--color-surface-2)}.color-picker__hex-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.color-picker__hex-input:disabled{cursor:not-allowed;opacity:.5}.color-picker__swatches{display:flex;flex-wrap:wrap;gap:.375rem;max-width:16rem}.color-picker__swatch{width:1.5rem;height:1.5rem;border-radius:var(--border-radius-sm);border:2px solid transparent;cursor:pointer;transition:transform .1s ease,border-color .1s ease;padding:0}.color-picker__swatch:hover:not(:disabled){transform:scale(1.15)}.color-picker__swatch:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.color-picker__swatch--selected{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary-500)}.color-picker__swatch--light{border-color:var(--color-border)}.color-picker__swatch:disabled{cursor:not-allowed;opacity:.5}.color-picker--disabled{opacity:.5;pointer-events:none}@media(forced-colors:active){.color-picker__native:focus-visible{outline-color:Highlight}}\n"]
|
|
207
207
|
}]
|
|
208
208
|
}],
|
|
209
209
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-color-picker.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/color-picker/color-picker.component.ts","../../../../libs/angular-ui-kit/src/lib/color-picker/color-picker.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n computed,\n signal,\n forwardRef,\n viewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nconst DEFAULT_SWATCHES = [\n '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6',\n '#3b82f6', '#6366f1', '#8b5cf6', '#ec4899', '#f43f5e',\n '#0ea5e9', '#10b981', '#a855f7', '#64748b', '#000000',\n '#ffffff',\n];\n\n@Component({\n selector: 'lc-color-picker',\n standalone: true,\n templateUrl: './color-picker.component.html',\n styleUrls: ['./color-picker.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ColorPickerComponent),\n multi: true,\n },\n ],\n})\n/**\n * Color picker component for selecting colors from swatches or custom input.\n *\n * Features:\n * - Predefined color swatch palette (a radiogroup: arrow keys move between swatches)\n * - Native browser color picker integration\n * - Hex color text input with validation\n * - Disabled state support\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-color-picker label=\"Brand Color\" [showInput]=\"true\" />\n * ```\n */\nexport class ColorPickerComponent implements ControlValueAccessor {\n private static nextId = 0;\n\n /** Label text */\n label = input<string>();\n\n /** Predefined color swatches */\n swatches = input<string[]>(DEFAULT_SWATCHES);\n\n /** Whether to show the hex input field */\n showInput = input<boolean>(true);\n\n /** Whether the picker is disabled */\n disabled = input<boolean>(false);\n\n /** Accessible name of the picker when no visible `label` is set. */\n ariaLabel = input('Color picker');\n\n /** Accessible name of the hex field (after `label` and a dash when set). */\n hexAriaLabel = input('Hex color value');\n\n /** Accessible name of the swatch group (after `label` and a dash when set). */\n swatchesAriaLabel = input('Color swatches');\n\n /** Emits the selected color hex value */\n colorChange = output<string>();\n\n /** Per-instance id wiring the label to the native colour input. */\n readonly inputId = `lc-color-picker-${++ColorPickerComponent.nextId}`;\n\n protected value = signal('#3b82f6');\n\n /** Disabled through the form control (`setDisabledState`), as opposed to the input. */\n private readonly formDisabled = signal(false);\n\n /** Disabled by either route — the one flag the template consults. */\n protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n private readonly swatchButtons = viewChildren<ElementRef<HTMLButtonElement>>('swatchBtn');\n\n /**\n * The swatch carrying the group's single tab stop (roving tabindex): the\n * selected one, or the first when the current colour is not in the palette.\n */\n protected readonly focusableSwatchIndex = computed(() => {\n const index = this.swatches().indexOf(this.value());\n return index >= 0 ? index : 0;\n });\n\n protected pickerClasses = computed(() => {\n const classes = ['color-picker'];\n if (this.isDisabled()) classes.push('color-picker--disabled');\n return classes.join(' ');\n });\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (val: string) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n protected selectSwatch(color: string): void {\n if (this.isDisabled()) return;\n this.setValue(color);\n }\n\n /** Arrow keys / Home / End move selection (and focus) through the palette like a radiogroup. */\n protected onSwatchKeydown(event: KeyboardEvent, index: number): void {\n if (this.isDisabled()) return;\n const count = this.swatches().length;\n let next: number;\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowDown':\n next = (index + 1) % count;\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n next = (index - 1 + count) % count;\n break;\n case 'Home':\n next = 0;\n break;\n case 'End':\n next = count - 1;\n break;\n default:\n return;\n }\n event.preventDefault();\n this.selectSwatch(this.swatches()[next]);\n this.swatchButtons()[next]?.nativeElement.focus();\n }\n\n protected onNativeInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n this.setValue(target.value);\n }\n\n protected onHexInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n let val = target.value.trim();\n if (!val.startsWith('#')) val = '#' + val;\n if (/^#[0-9a-fA-F]{6}$/.test(val)) {\n this.setValue(val);\n }\n }\n\n protected onBlur(): void {\n this.onTouched();\n }\n\n private setValue(color: string): void {\n this.value.set(color);\n this.colorChange.emit(color);\n this.onChange(color);\n }\n\n // ControlValueAccessor\n writeValue(val: string): void {\n this.value.set(val ?? '#3b82f6');\n }\n\n registerOnChange(fn: (val: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.formDisabled.set(isDisabled);\n }\n}\n","<div [class]=\"pickerClasses()\">\n @if (label()) {\n <label class=\"color-picker__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <div class=\"color-picker__preview-row\">\n <input\n type=\"color\"\n [id]=\"inputId\"\n class=\"color-picker__native\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n />\n <span\n class=\"color-picker__swatch-preview\"\n [style.background-color]=\"value()\"\n aria-hidden=\"true\"\n ></span>\n @if (showInput()) {\n <input\n type=\"text\"\n class=\"color-picker__hex-input\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n maxlength=\"7\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"(label() ? label() + ' – ' : '') + hexAriaLabel()\"\n />\n }\n </div>\n @if (swatches().length > 0) {\n <div\n class=\"color-picker__swatches\"\n role=\"radiogroup\"\n [attr.aria-label]=\"(label() ? label() + ' – ' : '') + swatchesAriaLabel()\"\n >\n @for (swatch of swatches(); track swatch; let i = $index) {\n <button\n #swatchBtn\n type=\"button\"\n class=\"color-picker__swatch\"\n role=\"radio\"\n [class.color-picker__swatch--selected]=\"swatch === value()\"\n [class.color-picker__swatch--light]=\"swatch === '#ffffff'\"\n [style.background-color]=\"swatch\"\n [disabled]=\"isDisabled()\"\n [tabindex]=\"i === focusableSwatchIndex() ? 0 : -1\"\n [attr.aria-label]=\"swatch\"\n [attr.aria-checked]=\"swatch === value()\"\n (click)=\"selectSwatch(swatch)\"\n (keydown)=\"onSwatchKeydown($event, i)\"\n (blur)=\"onBlur()\"\n ></button>\n }\n </div>\n }\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-color-picker.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/color-picker/color-picker.component.ts","../../../../libs/angular-ui-kit/src/lib/color-picker/color-picker.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n computed,\n signal,\n forwardRef,\n viewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nconst DEFAULT_SWATCHES = [\n '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6',\n '#3b82f6', '#6366f1', '#8b5cf6', '#ec4899', '#f43f5e',\n '#0ea5e9', '#10b981', '#a855f7', '#64748b', '#000000',\n '#ffffff',\n];\n\n@Component({\n selector: 'lc-color-picker',\n standalone: true,\n templateUrl: './color-picker.component.html',\n styleUrls: ['./color-picker.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ColorPickerComponent),\n multi: true,\n },\n ],\n})\n/**\n * Color picker component for selecting colors from swatches or custom input.\n *\n * Features:\n * - Predefined color swatch palette (a radiogroup: arrow keys move between swatches)\n * - Native browser color picker integration\n * - Hex color text input with validation\n * - Disabled state support\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-color-picker label=\"Brand Color\" [showInput]=\"true\" />\n * ```\n */\nexport class ColorPickerComponent implements ControlValueAccessor {\n private static nextId = 0;\n\n /** Label text */\n label = input<string>();\n\n /** Predefined color swatches */\n swatches = input<string[]>(DEFAULT_SWATCHES);\n\n /** Whether to show the hex input field */\n showInput = input<boolean>(true);\n\n /** Whether the picker is disabled */\n disabled = input<boolean>(false);\n\n /** Accessible name of the picker when no visible `label` is set. */\n ariaLabel = input('Color picker');\n\n /** Accessible name of the hex field (after `label` and a dash when set). */\n hexAriaLabel = input('Hex color value');\n\n /** Accessible name of the swatch group (after `label` and a dash when set). */\n swatchesAriaLabel = input('Color swatches');\n\n /** Emits the selected color hex value */\n colorChange = output<string>();\n\n /** Per-instance id wiring the label to the native colour input. */\n readonly inputId = `lc-color-picker-${++ColorPickerComponent.nextId}`;\n\n protected value = signal('#3b82f6');\n\n /** Disabled through the form control (`setDisabledState`), as opposed to the input. */\n private readonly formDisabled = signal(false);\n\n /** Disabled by either route — the one flag the template consults. */\n protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n private readonly swatchButtons = viewChildren<ElementRef<HTMLButtonElement>>('swatchBtn');\n\n /**\n * The swatch carrying the group's single tab stop (roving tabindex): the\n * selected one, or the first when the current colour is not in the palette.\n */\n protected readonly focusableSwatchIndex = computed(() => {\n const index = this.swatches().indexOf(this.value());\n return index >= 0 ? index : 0;\n });\n\n protected pickerClasses = computed(() => {\n const classes = ['color-picker'];\n if (this.isDisabled()) classes.push('color-picker--disabled');\n return classes.join(' ');\n });\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (val: string) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n protected selectSwatch(color: string): void {\n if (this.isDisabled()) return;\n this.setValue(color);\n }\n\n /** Arrow keys / Home / End move selection (and focus) through the palette like a radiogroup. */\n protected onSwatchKeydown(event: KeyboardEvent, index: number): void {\n if (this.isDisabled()) return;\n const count = this.swatches().length;\n let next: number;\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowDown':\n next = (index + 1) % count;\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n next = (index - 1 + count) % count;\n break;\n case 'Home':\n next = 0;\n break;\n case 'End':\n next = count - 1;\n break;\n default:\n return;\n }\n event.preventDefault();\n this.selectSwatch(this.swatches()[next]);\n this.swatchButtons()[next]?.nativeElement.focus();\n }\n\n protected onNativeInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n this.setValue(target.value);\n }\n\n protected onHexInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n let val = target.value.trim();\n if (!val.startsWith('#')) val = '#' + val;\n if (/^#[0-9a-fA-F]{6}$/.test(val)) {\n this.setValue(val);\n }\n }\n\n protected onBlur(): void {\n this.onTouched();\n }\n\n private setValue(color: string): void {\n this.value.set(color);\n this.colorChange.emit(color);\n this.onChange(color);\n }\n\n // ControlValueAccessor\n writeValue(val: string): void {\n this.value.set(val ?? '#3b82f6');\n }\n\n registerOnChange(fn: (val: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.formDisabled.set(isDisabled);\n }\n}\n","<div [class]=\"pickerClasses()\">\n @if (label()) {\n <label class=\"color-picker__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <div class=\"color-picker__preview-row\">\n <input\n type=\"color\"\n [id]=\"inputId\"\n class=\"color-picker__native\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n />\n <span\n class=\"color-picker__swatch-preview\"\n [style.background-color]=\"value()\"\n aria-hidden=\"true\"\n ></span>\n @if (showInput()) {\n <input\n type=\"text\"\n class=\"color-picker__hex-input\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n maxlength=\"7\"\n (input)=\"onHexInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"(label() ? label() + ' – ' : '') + hexAriaLabel()\"\n />\n }\n </div>\n @if (swatches().length > 0) {\n <div\n class=\"color-picker__swatches\"\n role=\"radiogroup\"\n [attr.aria-label]=\"(label() ? label() + ' – ' : '') + swatchesAriaLabel()\"\n >\n @for (swatch of swatches(); track swatch; let i = $index) {\n <button\n #swatchBtn\n type=\"button\"\n class=\"color-picker__swatch\"\n role=\"radio\"\n [class.color-picker__swatch--selected]=\"swatch === value()\"\n [class.color-picker__swatch--light]=\"swatch === '#ffffff'\"\n [style.background-color]=\"swatch\"\n [disabled]=\"isDisabled()\"\n [tabindex]=\"i === focusableSwatchIndex() ? 0 : -1\"\n [attr.aria-label]=\"swatch\"\n [attr.aria-checked]=\"swatch === value()\"\n (click)=\"selectSwatch(swatch)\"\n (keydown)=\"onSwatchKeydown($event, i)\"\n (blur)=\"onBlur()\"\n ></button>\n }\n </div>\n }\n</div>\n"],"mappings":"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"}
|