@life-cockpit/angular-ui-kit 2.0.2 → 2.2.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.
|
@@ -4635,22 +4635,111 @@ class PageHeaderComponent {
|
|
|
4635
4635
|
showDivider = input(false, ...(ngDevMode ? [{ debugName: "showDivider" }] : /* istanbul ignore next */ []));
|
|
4636
4636
|
/** Optional badge text next to the title (e.g. `Beta`). */
|
|
4637
4637
|
badge = input(undefined, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
4638
|
+
/**
|
|
4639
|
+
* Remove the header's own horizontal padding so its content sits flush with
|
|
4640
|
+
* the container edge. Use when the header is already inside a padded wrapper
|
|
4641
|
+
* (e.g. `<lc-container>`) and you'd otherwise get a double inset. The divider,
|
|
4642
|
+
* when shown, always spans the full width regardless of this setting.
|
|
4643
|
+
* @default false
|
|
4644
|
+
*/
|
|
4645
|
+
noPaddingX = input(false, ...(ngDevMode ? [{ debugName: "noPaddingX" }] : /* istanbul ignore next */ []));
|
|
4638
4646
|
hostClasses = computed(() => [
|
|
4639
4647
|
'lc-page-header',
|
|
4640
4648
|
`lc-page-header--size-${this.size()}`,
|
|
4641
4649
|
this.showDivider() ? 'lc-page-header--divided' : null,
|
|
4650
|
+
this.noPaddingX() ? 'lc-page-header--flush-x' : null,
|
|
4642
4651
|
]
|
|
4643
4652
|
.filter(Boolean)
|
|
4644
4653
|
.join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
4645
4654
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4646
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PageHeaderComponent, isStandalone: true, selector: "lc-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (true) {\n <div class=\"lc-page-header__breadcrumbs\">\n <ng-content select=\"[slot='breadcrumbs']\" />\n </div>\n\n <div class=\"lc-page-header__row\">\n <div class=\"lc-page-header__titles\">\n @if (title()) {\n @switch (level()) {\n @case (1) {\n <h1 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h1>\n }\n @case (2) {\n <h2 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h2>\n }\n @case (3) {\n <h3 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h3>\n }\n }\n }\n @if (subtitle()) {\n <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n\n <div class=\"lc-page-header__actions\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n </div>\n\n <div class=\"lc-page-header__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n\n <div class=\"lc-page-header__body\">\n <ng-content />\n </div>\n}\n", styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);box-sizing:border-box;width:100%;min-width:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;word-break:break-word}.lc-page-header__subtitle{margin:0;font-family:var(--font-family-sans, inherit);color:var(--color-text-secondary, var(--color-neutral-600, #666));line-height:var(--line-height-normal, 1.5)}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--font-size-sm, .875rem)}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--font-size-base, 1rem)}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4655
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PageHeaderComponent, isStandalone: true, selector: "lc-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, noPaddingX: { classPropertyName: "noPaddingX", publicName: "noPaddingX", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (true) {\n <div class=\"lc-page-header__breadcrumbs\">\n <ng-content select=\"[slot='breadcrumbs']\" />\n </div>\n\n <div class=\"lc-page-header__row\">\n <div class=\"lc-page-header__titles\">\n @if (title()) {\n @switch (level()) {\n @case (1) {\n <h1 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h1>\n }\n @case (2) {\n <h2 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h2>\n }\n @case (3) {\n <h3 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h3>\n }\n }\n }\n @if (subtitle()) {\n <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n\n <div class=\"lc-page-header__actions\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n </div>\n\n <div class=\"lc-page-header__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n\n <div class=\"lc-page-header__body\">\n <ng-content />\n </div>\n}\n", styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;word-break:break-word}.lc-page-header__subtitle{margin:0;font-family:var(--font-family-sans, inherit);color:var(--color-text-secondary, var(--color-neutral-600, #666));line-height:var(--line-height-normal, 1.5)}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--font-size-sm, .875rem)}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--font-size-base, 1rem)}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4647
4656
|
}
|
|
4648
4657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
4649
4658
|
type: Component,
|
|
4650
4659
|
args: [{ selector: 'lc-page-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
4651
4660
|
'[class]': 'hostClasses()',
|
|
4652
|
-
}, template: "@if (true) {\n <div class=\"lc-page-header__breadcrumbs\">\n <ng-content select=\"[slot='breadcrumbs']\" />\n </div>\n\n <div class=\"lc-page-header__row\">\n <div class=\"lc-page-header__titles\">\n @if (title()) {\n @switch (level()) {\n @case (1) {\n <h1 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h1>\n }\n @case (2) {\n <h2 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h2>\n }\n @case (3) {\n <h3 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h3>\n }\n }\n }\n @if (subtitle()) {\n <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n\n <div class=\"lc-page-header__actions\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n </div>\n\n <div class=\"lc-page-header__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n\n <div class=\"lc-page-header__body\">\n <ng-content />\n </div>\n}\n", styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);box-sizing:border-box;width:100%;min-width:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;word-break:break-word}.lc-page-header__subtitle{margin:0;font-family:var(--font-family-sans, inherit);color:var(--color-text-secondary, var(--color-neutral-600, #666));line-height:var(--line-height-normal, 1.5)}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--font-size-sm, .875rem)}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--font-size-base, 1rem)}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"] }]
|
|
4653
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }] } });
|
|
4661
|
+
}, template: "@if (true) {\n <div class=\"lc-page-header__breadcrumbs\">\n <ng-content select=\"[slot='breadcrumbs']\" />\n </div>\n\n <div class=\"lc-page-header__row\">\n <div class=\"lc-page-header__titles\">\n @if (title()) {\n @switch (level()) {\n @case (1) {\n <h1 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h1>\n }\n @case (2) {\n <h2 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h2>\n }\n @case (3) {\n <h3 class=\"lc-page-header__title\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n </h3>\n }\n }\n }\n @if (subtitle()) {\n <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n\n <div class=\"lc-page-header__actions\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n </div>\n\n <div class=\"lc-page-header__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n\n <div class=\"lc-page-header__body\">\n <ng-content />\n </div>\n}\n", styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;word-break:break-word}.lc-page-header__subtitle{margin:0;font-family:var(--font-family-sans, inherit);color:var(--color-text-secondary, var(--color-neutral-600, #666));line-height:var(--line-height-normal, 1.5)}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--font-size-sm, .875rem)}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--font-size-base, 1rem)}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"] }]
|
|
4662
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], noPaddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPaddingX", required: false }] }] } });
|
|
4663
|
+
|
|
4664
|
+
/**
|
|
4665
|
+
* Full-height page shell that pins a header (and optional footer) while the
|
|
4666
|
+
* body fills the remaining space and scrolls *internally* — the page itself
|
|
4667
|
+
* never scrolls.
|
|
4668
|
+
*
|
|
4669
|
+
* It encapsulates the "height chain" that this kind of layout needs: a flex
|
|
4670
|
+
* column with `height: 100dvh`/`100%`, `overflow: hidden` on the shell, and —
|
|
4671
|
+
* crucially — `min-height: 0` on the body so it can shrink below its content
|
|
4672
|
+
* and become the scroll container instead of pushing the page taller.
|
|
4673
|
+
*
|
|
4674
|
+
* Content is projected into three slots:
|
|
4675
|
+
* - `[layout-header]` — pinned to the top (e.g. `<lc-page-header>`).
|
|
4676
|
+
* - default slot — the body; fills the remaining height and scrolls.
|
|
4677
|
+
* - `[layout-footer]` — pinned to the bottom (e.g. a chat input bar).
|
|
4678
|
+
*
|
|
4679
|
+
* Children that bring their own internal scroll + sticky footer (such as
|
|
4680
|
+
* `<lc-chat>`) just need `height: 100%`, which they get for free from the body.
|
|
4681
|
+
*
|
|
4682
|
+
* @example Generic long content under a fixed header
|
|
4683
|
+
* ```html
|
|
4684
|
+
* <lc-page-layout padded>
|
|
4685
|
+
* <lc-page-header layout-header title="Reports" />
|
|
4686
|
+
* <p>…lots of content that scrolls under the header…</p>
|
|
4687
|
+
* </lc-page-layout>
|
|
4688
|
+
* ```
|
|
4689
|
+
*
|
|
4690
|
+
* @example Chat at 100% height, input pinned at the bottom
|
|
4691
|
+
* ```html
|
|
4692
|
+
* <lc-page-layout>
|
|
4693
|
+
* <lc-page-header layout-header title="Assistant" />
|
|
4694
|
+
* <lc-chat [messages]="messages" [showHeader]="false" (messageSend)="onSend($event)" />
|
|
4695
|
+
* </lc-page-layout>
|
|
4696
|
+
* ```
|
|
4697
|
+
*
|
|
4698
|
+
* @example Nested below an app shell with topbar / sidenav
|
|
4699
|
+
* ```html
|
|
4700
|
+
* <!-- every ancestor must also pass the height down (height:100% / flex:1) -->
|
|
4701
|
+
* <lc-page-layout fill="parent"> … </lc-page-layout>
|
|
4702
|
+
* ```
|
|
4703
|
+
*/
|
|
4704
|
+
class PageLayoutComponent {
|
|
4705
|
+
/**
|
|
4706
|
+
* Source of the layout's height.
|
|
4707
|
+
* - `'screen'` (default): `100dvh` — fills the viewport. Use as the page root.
|
|
4708
|
+
* - `'parent'`: `100%` — fills its parent. Use when nested below an app shell;
|
|
4709
|
+
* every ancestor must also carry the height down.
|
|
4710
|
+
*/
|
|
4711
|
+
fill = input('screen', ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
|
|
4712
|
+
/**
|
|
4713
|
+
* Whether the body region scrolls internally. Defaults to `true`, which is
|
|
4714
|
+
* correct both for long page content and for children like `<lc-chat>` that
|
|
4715
|
+
* fit the body exactly (no scrollbar appears in that case). Set `false` for
|
|
4716
|
+
* full-bleed bodies that must never scroll (e.g. a map).
|
|
4717
|
+
*/
|
|
4718
|
+
scrollBody = input(true, ...(ngDevMode ? [{ debugName: "scrollBody" }] : /* istanbul ignore next */ []));
|
|
4719
|
+
/** Add density-aware padding to the body. Off by default so embedded components keep their own padding. */
|
|
4720
|
+
padded = input(false, ...(ngDevMode ? [{ debugName: "padded" }] : /* istanbul ignore next */ []));
|
|
4721
|
+
get hostClasses() {
|
|
4722
|
+
return this.classes();
|
|
4723
|
+
}
|
|
4724
|
+
classes = computed(() => {
|
|
4725
|
+
const classes = ['lc-page-layout'];
|
|
4726
|
+
classes.push(`fill-${this.fill()}`);
|
|
4727
|
+
if (this.scrollBody())
|
|
4728
|
+
classes.push('scroll-body');
|
|
4729
|
+
if (this.padded())
|
|
4730
|
+
classes.push('padded');
|
|
4731
|
+
return classes.join(' ');
|
|
4732
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
4733
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4734
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: PageLayoutComponent, isStandalone: true, selector: "lc-page-layout", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, scrollBody: { classPropertyName: "scrollBody", publicName: "scrollBody", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"lc-page-layout__header\">\n <ng-content select=\"[layout-header]\"></ng-content>\n</div>\n\n<div class=\"lc-page-layout__body\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"lc-page-layout__footer\">\n <ng-content select=\"[layout-footer]\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;overflow:hidden;box-sizing:border-box}:host(.fill-screen){height:100dvh}:host(.fill-parent){height:100%}.lc-page-layout__header,.lc-page-layout__footer{flex:0 0 auto;min-width:0}.lc-page-layout__body{flex:1 1 auto;min-height:0;min-width:0}:host(.scroll-body) .lc-page-layout__body{overflow:auto}:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-xl, 2rem)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4735
|
+
}
|
|
4736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PageLayoutComponent, decorators: [{
|
|
4737
|
+
type: Component,
|
|
4738
|
+
args: [{ selector: 'lc-page-layout', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-page-layout__header\">\n <ng-content select=\"[layout-header]\"></ng-content>\n</div>\n\n<div class=\"lc-page-layout__body\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"lc-page-layout__footer\">\n <ng-content select=\"[layout-footer]\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;overflow:hidden;box-sizing:border-box}:host(.fill-screen){height:100dvh}:host(.fill-parent){height:100%}.lc-page-layout__header,.lc-page-layout__footer{flex:0 0 auto;min-width:0}.lc-page-layout__body{flex:1 1 auto;min-height:0;min-width:0}:host(.scroll-body) .lc-page-layout__body{overflow:auto}:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-xl, 2rem)}}\n"] }]
|
|
4739
|
+
}], propDecorators: { fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], scrollBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBody", required: false }] }], padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }], hostClasses: [{
|
|
4740
|
+
type: HostBinding,
|
|
4741
|
+
args: ['class']
|
|
4742
|
+
}] } });
|
|
4654
4743
|
|
|
4655
4744
|
/**
|
|
4656
4745
|
* Section component for page content grouping with spacing and background.
|
|
@@ -11201,6 +11290,26 @@ class ChatComponent {
|
|
|
11201
11290
|
isStreaming = input(false, ...(ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []));
|
|
11202
11291
|
/** Show the header bar. */
|
|
11203
11292
|
showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
|
|
11293
|
+
/**
|
|
11294
|
+
* Draw the chat's own border + rounded corners. Defaults to `true` (card
|
|
11295
|
+
* style). Set `false` to render flush/edge-to-edge — e.g. when the chat is
|
|
11296
|
+
* the full-height body of an `<lc-page-layout>` and should sit directly under
|
|
11297
|
+
* a page header without a nested box.
|
|
11298
|
+
*/
|
|
11299
|
+
bordered = input(true, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
11300
|
+
/**
|
|
11301
|
+
* Where messages stack when they don't fill the height.
|
|
11302
|
+
* - `'top'` (default): messages grow from the top down.
|
|
11303
|
+
* - `'bottom'`: messages anchor to the bottom (empty space above), like most
|
|
11304
|
+
* messaging apps. Still scrolls to reveal the top once they overflow.
|
|
11305
|
+
*/
|
|
11306
|
+
messageAnchor = input('top', ...(ngDevMode ? [{ debugName: "messageAnchor" }] : /* istanbul ignore next */ []));
|
|
11307
|
+
/**
|
|
11308
|
+
* Width of the message thread and composer.
|
|
11309
|
+
* - `'full'` (default): messages span the full available width.
|
|
11310
|
+
* - `'narrow'`: a centered, readable column (~46rem) like a document-style chat.
|
|
11311
|
+
*/
|
|
11312
|
+
contentWidth = input('full', ...(ngDevMode ? [{ debugName: "contentWidth" }] : /* istanbul ignore next */ []));
|
|
11204
11313
|
/** Disable the input. */
|
|
11205
11314
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
11206
11315
|
/** Show avatars next to messages. */
|
|
@@ -11237,6 +11346,9 @@ class ChatComponent {
|
|
|
11237
11346
|
attachmentCounter = 0;
|
|
11238
11347
|
scrollContainer;
|
|
11239
11348
|
fileInput;
|
|
11349
|
+
composerInput;
|
|
11350
|
+
/** Upper bound for the auto-growing composer before it starts scrolling (px). */
|
|
11351
|
+
static INPUT_MAX_HEIGHT = 192;
|
|
11240
11352
|
formattedMessages = computed(() => this.messages().map(m => ({
|
|
11241
11353
|
...m,
|
|
11242
11354
|
timestamp: m.timestamp instanceof Date ? m.timestamp : m.timestamp ? new Date(m.timestamp) : undefined,
|
|
@@ -11248,7 +11360,14 @@ class ChatComponent {
|
|
|
11248
11360
|
}
|
|
11249
11361
|
}
|
|
11250
11362
|
onInput(event) {
|
|
11251
|
-
|
|
11363
|
+
const el = event.target;
|
|
11364
|
+
this.inputValue.set(el.value);
|
|
11365
|
+
this.autoGrow(el);
|
|
11366
|
+
}
|
|
11367
|
+
/** Resize the textarea to fit its content so the composer hugs the text. */
|
|
11368
|
+
autoGrow(el) {
|
|
11369
|
+
el.style.height = 'auto';
|
|
11370
|
+
el.style.height = `${Math.min(el.scrollHeight, ChatComponent.INPUT_MAX_HEIGHT)}px`;
|
|
11252
11371
|
}
|
|
11253
11372
|
onKeydown(event) {
|
|
11254
11373
|
if (event.key === 'Enter' && !event.shiftKey) {
|
|
@@ -11268,6 +11387,10 @@ class ChatComponent {
|
|
|
11268
11387
|
this.inputValue.set('');
|
|
11269
11388
|
this.pendingAttachments.set([]);
|
|
11270
11389
|
this.shouldScroll = true;
|
|
11390
|
+
// Collapse the auto-grown textarea back to a single row.
|
|
11391
|
+
const el = this.composerInput?.nativeElement;
|
|
11392
|
+
if (el)
|
|
11393
|
+
el.style.height = 'auto';
|
|
11271
11394
|
}
|
|
11272
11395
|
openFilePicker() {
|
|
11273
11396
|
if (this.disabled() || !this.allowFileUpload())
|
|
@@ -11368,12 +11491,12 @@ class ChatComponent {
|
|
|
11368
11491
|
}
|
|
11369
11492
|
}
|
|
11370
11493
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11371
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChatComponent, isStandalone: true, selector: "lc-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, renderMarkdown: { classPropertyName: "renderMarkdown", publicName: "renderMarkdown", isSignal: true, isRequired: false, transformFunction: null }, allowFileUpload: { classPropertyName: "allowFileUpload", publicName: "allowFileUpload", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend", fileAttach: "fileAttach" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"lc-chat\">\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\">Streaming\u2026</span>\n }\n </div>\n }\n\n <div class=\"lc-chat__messages\" #scrollContainer>\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 >\n @if (showAvatars() && msg.role !== 'system') {\n <div class=\"lc-chat__avatar\">\n @if (msg.avatar) {\n <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n } @else {\n <span class=\"lc-chat__avatar-fallback\" [class.lc-chat__avatar-fallback--agent]=\"msg.role === 'agent'\">\n {{ (msg.name || msg.role).charAt(0).toUpperCase() }}\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 <div class=\"lc-chat__name\">{{ msg.name }}</div>\n }\n <div class=\"lc-chat__content\">\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) {\n <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\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__avatar\">\n <span class=\"lc-chat__avatar-fallback lc-chat__avatar-fallback--agent\">A</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\n <div class=\"lc-chat__input-area\">\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]=\"'Entfernen: ' + 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 <div class=\"lc-chat__input-row\">\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 aria-label=\"Datei anh\u00E4ngen\"\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 <textarea\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 <button\n class=\"lc-chat__send-btn\"\n [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n (click)=\"send()\"\n aria-label=\"Send\"\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", styles: [".lc-chat{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);background-image:var(--gradient-surface);font-family:var(--typography-font-family, sans-serif)}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-divider);background:var(--color-surface-2)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:.6875rem;padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:1rem;font-weight: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;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.lc-chat__message{display:flex;align-items:flex-start;gap:.75rem}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse;max-width:80%}.lc-chat__message--agent{align-self:stretch;max-width:100%}.lc-chat__message--system{align-self:center;max-width:100%}.lc-chat__avatar{flex-shrink:0;width:2rem;height:2rem}.lc-chat__avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.lc-chat__avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--gradient-brand-tile);color:var(--color-neutral-900)}.lc-chat__bubble{font-size:.9375rem;line-height:1.6;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{padding:.625rem .875rem;border-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-sm);background:var(--color-primary-fill);color:var(--color-on-primary)}.lc-chat__message--agent .lc-chat__bubble{flex:1;min-width:0;padding:0;background:transparent;color:var(--color-text-primary)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-text-tertiary);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:none}.lc-chat__name{font-size:.75rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.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:.625rem;color:var(--color-text-tertiary);margin-top:.25rem}.lc-chat__message--user .lc-chat__time{color:#ffffffb3;text-align:right}.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{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-divider);background:var(--color-surface-2)}.lc-chat__input-row{display:flex;align-items:flex-end;gap:.5rem}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-border);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-surface-2);color:var(--color-text-primary);max-height:6rem;overflow-y:auto;transition:border-color .15s}.lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:var(--color-primary-fill);color:#fff;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:2.25rem;height:2.25rem;border:none;border-radius:50%;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-2);border:1px solid var(--color-border);border-radius:.5rem;font-size:.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:.75rem}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:.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:.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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MarkdownComponent, selector: "lc-markdown", inputs: ["src", "content", "variant", "linkTarget", "sanitize", "syntaxHighlight", "showHeadingAnchors", "baseUrl"], outputs: ["linkClick", "rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11494
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChatComponent, isStandalone: true, selector: "lc-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, messageAnchor: { classPropertyName: "messageAnchor", publicName: "messageAnchor", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, renderMarkdown: { classPropertyName: "renderMarkdown", publicName: "renderMarkdown", isSignal: true, isRequired: false, transformFunction: null }, allowFileUpload: { classPropertyName: "allowFileUpload", publicName: "allowFileUpload", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend", fileAttach: "fileAttach" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "composerInput", first: true, predicate: ["composerInput"], descendants: true }], ngImport: i0, 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\">Streaming\u2026</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\" [class.lc-chat__thread--rail]=\"showAvatars()\">\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--streaming]=\"msg.streaming\"\n >\n @if (showAvatars() && msg.role !== 'user') {\n <div class=\"lc-chat__marker\">\n @if (msg.avatar) {\n <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\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.role === 'user') {\n <div class=\"lc-chat__meta\">\n <span class=\"lc-chat__name\">{{ msg.name || 'Du' }}</span>\n @if (showTimestamps() && msg.timestamp) {\n <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n }\n </div>\n } @else if (msg.name) {\n <div class=\"lc-chat__name\">{{ msg.name }}</div>\n }\n <div class=\"lc-chat__content\">\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') {\n <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\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 <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]=\"'Entfernen: ' + 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 <textarea\n #composerInput\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 aria-label=\"Datei anh\u00E4ngen\"\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 aria-label=\"Send\"\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", styles: [".lc-chat{--lc-chat-content-width: 46rem;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(--spacing-3) 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(--spacing-6, 1.5rem);padding-inline:var(--spacing-4, 1rem)}.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(--spacing-5, 1.25rem)}.lc-chat__thread--rail:before{content:\"\";position:absolute;left:.4375rem;top:.5rem;bottom:.5rem;width:1.5px;background:var(--color-divider)}.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:flex-start;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;justify-content:center}.lc-chat__dot{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__bubble{flex:1;min-width:0;font-size:var(--font-size-base, .9375rem);line-height:var(--line-height-relaxed, 1.6);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background: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__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(--spacing-4, .75rem);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(--spacing-3, .75rem);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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MarkdownComponent, selector: "lc-markdown", inputs: ["src", "content", "variant", "linkTarget", "sanitize", "syntaxHighlight", "showHeadingAnchors", "baseUrl"], outputs: ["linkClick", "rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11372
11495
|
}
|
|
11373
11496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, decorators: [{
|
|
11374
11497
|
type: Component,
|
|
11375
|
-
args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet, MarkdownComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-chat\">\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\">Streaming\u2026</span>\n }\n </div>\n }\n\n <div class=\"lc-chat__messages\" #scrollContainer>\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 >\n @if (showAvatars() && msg.role !== 'system') {\n <div class=\"lc-chat__avatar\">\n @if (msg.avatar) {\n <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n } @else {\n <span class=\"lc-chat__avatar-fallback\" [class.lc-chat__avatar-fallback--agent]=\"msg.role === 'agent'\">\n {{ (msg.name || msg.role).charAt(0).toUpperCase() }}\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 <div class=\"lc-chat__name\">{{ msg.name }}</div>\n }\n <div class=\"lc-chat__content\">\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) {\n <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\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__avatar\">\n <span class=\"lc-chat__avatar-fallback lc-chat__avatar-fallback--agent\">A</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\n <div class=\"lc-chat__input-area\">\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]=\"'Entfernen: ' + 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 <div class=\"lc-chat__input-row\">\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 aria-label=\"Datei anh\u00E4ngen\"\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 <textarea\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 <button\n class=\"lc-chat__send-btn\"\n [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n (click)=\"send()\"\n aria-label=\"Send\"\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", styles: [".lc-chat{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);background-image:var(--gradient-surface);font-family:var(--typography-font-family, sans-serif)}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-divider);background:var(--color-surface-2)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:.6875rem;padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:1rem;font-weight: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;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.lc-chat__message{display:flex;align-items:flex-start;gap:.75rem}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse;max-width:80%}.lc-chat__message--agent{align-self:stretch;max-width:100%}.lc-chat__message--system{align-self:center;max-width:100%}.lc-chat__avatar{flex-shrink:0;width:2rem;height:2rem}.lc-chat__avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.lc-chat__avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--gradient-brand-tile);color:var(--color-neutral-900)}.lc-chat__bubble{font-size:.9375rem;line-height:1.6;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{padding:.625rem .875rem;border-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-sm);background:var(--color-primary-fill);color:var(--color-on-primary)}.lc-chat__message--agent .lc-chat__bubble{flex:1;min-width:0;padding:0;background:transparent;color:var(--color-text-primary)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-text-tertiary);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:none}.lc-chat__name{font-size:.75rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.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:.625rem;color:var(--color-text-tertiary);margin-top:.25rem}.lc-chat__message--user .lc-chat__time{color:#ffffffb3;text-align:right}.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{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-divider);background:var(--color-surface-2)}.lc-chat__input-row{display:flex;align-items:flex-end;gap:.5rem}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-border);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-surface-2);color:var(--color-text-primary);max-height:6rem;overflow-y:auto;transition:border-color .15s}.lc-chat__input:focus{border-color:var(--color-primary-500)}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:50%;background:var(--color-primary-fill);color:#fff;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:2.25rem;height:2.25rem;border:none;border-radius:50%;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-2);border:1px solid var(--color-border);border-radius:.5rem;font-size:.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:.75rem}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:.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:.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"] }]
|
|
11376
|
-
}], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStreaming", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], renderMarkdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMarkdown", required: false }] }], allowFileUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFileUpload", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], fileAttach: [{ type: i0.Output, args: ["fileAttach"] }], messageTemplate: [{
|
|
11498
|
+
args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet, MarkdownComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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\">Streaming\u2026</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\" [class.lc-chat__thread--rail]=\"showAvatars()\">\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--streaming]=\"msg.streaming\"\n >\n @if (showAvatars() && msg.role !== 'user') {\n <div class=\"lc-chat__marker\">\n @if (msg.avatar) {\n <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\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.role === 'user') {\n <div class=\"lc-chat__meta\">\n <span class=\"lc-chat__name\">{{ msg.name || 'Du' }}</span>\n @if (showTimestamps() && msg.timestamp) {\n <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n }\n </div>\n } @else if (msg.name) {\n <div class=\"lc-chat__name\">{{ msg.name }}</div>\n }\n <div class=\"lc-chat__content\">\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') {\n <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n }\n </div>\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 <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]=\"'Entfernen: ' + 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 <textarea\n #composerInput\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 aria-label=\"Datei anh\u00E4ngen\"\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 aria-label=\"Send\"\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", styles: [".lc-chat{--lc-chat-content-width: 46rem;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(--spacing-3) 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(--spacing-6, 1.5rem);padding-inline:var(--spacing-4, 1rem)}.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(--spacing-5, 1.25rem)}.lc-chat__thread--rail:before{content:\"\";position:absolute;left:.4375rem;top:.5rem;bottom:.5rem;width:1.5px;background:var(--color-divider)}.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:flex-start;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;justify-content:center}.lc-chat__dot{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__bubble{flex:1;min-width:0;font-size:var(--font-size-base, .9375rem);line-height:var(--line-height-relaxed, 1.6);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background: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__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(--spacing-4, .75rem);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(--spacing-3, .75rem);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"] }]
|
|
11499
|
+
}], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStreaming", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], messageAnchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageAnchor", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], renderMarkdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMarkdown", required: false }] }], allowFileUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFileUpload", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], fileAttach: [{ type: i0.Output, args: ["fileAttach"] }], messageTemplate: [{
|
|
11377
11500
|
type: ContentChild,
|
|
11378
11501
|
args: ['messageTemplate']
|
|
11379
11502
|
}], scrollContainer: [{
|
|
@@ -11382,6 +11505,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
11382
11505
|
}], fileInput: [{
|
|
11383
11506
|
type: ViewChild,
|
|
11384
11507
|
args: ['fileInput']
|
|
11508
|
+
}], composerInput: [{
|
|
11509
|
+
type: ViewChild,
|
|
11510
|
+
args: ['composerInput']
|
|
11385
11511
|
}] } });
|
|
11386
11512
|
|
|
11387
11513
|
const EXTENSION_TYPE_MAP = {
|
|
@@ -14872,5 +14998,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
14872
14998
|
* Generated bundle index. Do not edit.
|
|
14873
14999
|
*/
|
|
14874
15000
|
|
|
14875
|
-
export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, resolveFileIcon };
|
|
15001
|
+
export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, resolveFileIcon };
|
|
14876
15002
|
//# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map
|