@life-cockpit/angular-ui-kit 2.0.1 → 2.1.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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, ChangeDetectionStrategy, Component, model, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
|
|
2
|
+
import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, ChangeDetectionStrategy, Component, model, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, DestroyRef, afterNextRender, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, NgClass, CommonModule, NgTemplateOutlet, NgStyle, SlicePipe } from '@angular/common';
|
|
4
4
|
import * as i1$4 from '@angular/platform-browser';
|
|
5
5
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
@@ -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.
|
|
@@ -8766,6 +8855,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
8766
8855
|
* ```
|
|
8767
8856
|
*/
|
|
8768
8857
|
class SparklineComponent {
|
|
8858
|
+
_el = inject(ElementRef);
|
|
8859
|
+
_destroyRef = inject(DestroyRef);
|
|
8860
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
8861
|
+
constructor() {
|
|
8862
|
+
afterNextRender(() => {
|
|
8863
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
8864
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
8865
|
+
});
|
|
8866
|
+
obs.observe(this._el.nativeElement);
|
|
8867
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
8868
|
+
});
|
|
8869
|
+
}
|
|
8769
8870
|
/** Data points to plot. */
|
|
8770
8871
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
8771
8872
|
/** Stroke color theme. */
|
|
@@ -8808,7 +8909,7 @@ class SparklineComponent {
|
|
|
8808
8909
|
const d = this.data();
|
|
8809
8910
|
if (!d || d.length < 2)
|
|
8810
8911
|
return '';
|
|
8811
|
-
const w = this.
|
|
8912
|
+
const w = this.effectiveWidth();
|
|
8812
8913
|
const h = this.height();
|
|
8813
8914
|
const sw = this.strokeWidth();
|
|
8814
8915
|
const padding = sw;
|
|
@@ -8846,7 +8947,7 @@ class SparklineComponent {
|
|
|
8846
8947
|
if (!line)
|
|
8847
8948
|
return '';
|
|
8848
8949
|
const d = this.data();
|
|
8849
|
-
const w = this.
|
|
8950
|
+
const w = this.effectiveWidth();
|
|
8850
8951
|
const h = this.height();
|
|
8851
8952
|
const sw = this.strokeWidth();
|
|
8852
8953
|
const padding = sw;
|
|
@@ -8862,7 +8963,7 @@ class SparklineComponent {
|
|
|
8862
8963
|
const d = this.data();
|
|
8863
8964
|
if (!d || d.length < 2)
|
|
8864
8965
|
return null;
|
|
8865
|
-
const w = this.
|
|
8966
|
+
const w = this.effectiveWidth();
|
|
8866
8967
|
const h = this.height();
|
|
8867
8968
|
const sw = this.strokeWidth();
|
|
8868
8969
|
const padding = sw;
|
|
@@ -8878,14 +8979,15 @@ class SparklineComponent {
|
|
|
8878
8979
|
r: sw + 1,
|
|
8879
8980
|
};
|
|
8880
8981
|
}, ...(ngDevMode ? [{ debugName: "endDot" }] : /* istanbul ignore next */ []));
|
|
8881
|
-
|
|
8982
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
8983
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
8882
8984
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SparklineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8883
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SparklineComponent, isStandalone: true, selector: "lc-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, showEndDot: { classPropertyName: "showEndDot", publicName: "showEndDot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n
|
|
8985
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SparklineComponent, isStandalone: true, selector: "lc-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, showEndDot: { classPropertyName: "showEndDot", publicName: "showEndDot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n class=\"lc-sparkline\"\n role=\"img\"\n aria-label=\"Sparkline chart\"\n>\n @if (areaD()) {\n <path\n [attr.d]=\"areaD()\"\n [attr.fill]=\"fillColorVar()\"\n class=\"lc-sparkline__area\"\n />\n }\n\n @if (pathD()) {\n <path\n [attr.d]=\"pathD()\"\n [attr.stroke]=\"colorVar()\"\n [attr.stroke-width]=\"strokeWidth()\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-sparkline__line\"\n />\n }\n\n @if (endDot(); as dot) {\n <circle\n [attr.cx]=\"dot.cx\"\n [attr.cy]=\"dot.cy\"\n [attr.r]=\"dot.r\"\n [attr.fill]=\"colorVar()\"\n class=\"lc-sparkline__dot\"\n />\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-sparkline{overflow:visible}.lc-sparkline__area{opacity:.2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8884
8986
|
}
|
|
8885
8987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SparklineComponent, decorators: [{
|
|
8886
8988
|
type: Component,
|
|
8887
|
-
args: [{ selector: 'lc-sparkline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n
|
|
8888
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], showEndDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEndDot", required: false }] }] } });
|
|
8989
|
+
args: [{ selector: 'lc-sparkline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n class=\"lc-sparkline\"\n role=\"img\"\n aria-label=\"Sparkline chart\"\n>\n @if (areaD()) {\n <path\n [attr.d]=\"areaD()\"\n [attr.fill]=\"fillColorVar()\"\n class=\"lc-sparkline__area\"\n />\n }\n\n @if (pathD()) {\n <path\n [attr.d]=\"pathD()\"\n [attr.stroke]=\"colorVar()\"\n [attr.stroke-width]=\"strokeWidth()\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-sparkline__line\"\n />\n }\n\n @if (endDot(); as dot) {\n <circle\n [attr.cx]=\"dot.cx\"\n [attr.cy]=\"dot.cy\"\n [attr.r]=\"dot.r\"\n [attr.fill]=\"colorVar()\"\n class=\"lc-sparkline__dot\"\n />\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-sparkline{overflow:visible}.lc-sparkline__area{opacity:.2}\n"] }]
|
|
8990
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], showEndDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEndDot", required: false }] }] } });
|
|
8889
8991
|
|
|
8890
8992
|
/**
|
|
8891
8993
|
* Stat trend component for displaying KPI values with change indicators.
|
|
@@ -9070,11 +9172,11 @@ class DonutChartComponent {
|
|
|
9070
9172
|
percentage: arc.percentage,
|
|
9071
9173
|
})), ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
9072
9174
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9073
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DonutChartComponent, isStandalone: true, selector: "lc-donut-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, showCenter: { classPropertyName: "showCenter", publicName: "showCenter", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-donut-chart{display:
|
|
9175
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DonutChartComponent, isStandalone: true, selector: "lc-donut-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, showCenter: { classPropertyName: "showCenter", publicName: "showCenter", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-donut-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-donut-chart__svg{overflow:visible}.lc-donut-chart__segment{transition:opacity .15s ease}.lc-donut-chart__segment:hover{opacity:.8}.lc-donut-chart__center-value{font-size:1.25rem;font-weight:700;fill:var(--color-text-primary)}.lc-donut-chart__center-label{font-size:.6875rem;fill:var(--color-text-tertiary);font-weight:500}.lc-donut-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-donut-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-donut-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-donut-chart__legend-label{color:var(--color-text-secondary)}.lc-donut-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9074
9176
|
}
|
|
9075
9177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DonutChartComponent, decorators: [{
|
|
9076
9178
|
type: Component,
|
|
9077
|
-
args: [{ selector: 'lc-donut-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-donut-chart{display:
|
|
9179
|
+
args: [{ selector: 'lc-donut-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-donut-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-donut-chart__svg{overflow:visible}.lc-donut-chart__segment{transition:opacity .15s ease}.lc-donut-chart__segment:hover{opacity:.8}.lc-donut-chart__center-value{font-size:1.25rem;font-weight:700;fill:var(--color-text-primary)}.lc-donut-chart__center-label{font-size:.6875rem;fill:var(--color-text-tertiary);font-weight:500}.lc-donut-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-donut-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-donut-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-donut-chart__legend-label{color:var(--color-text-secondary)}.lc-donut-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"] }]
|
|
9078
9180
|
}], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], showCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCenter", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }] } });
|
|
9079
9181
|
|
|
9080
9182
|
const DEFAULT_COLORS$6 = [
|
|
@@ -9102,6 +9204,18 @@ const DEFAULT_COLORS$6 = [
|
|
|
9102
9204
|
* ```
|
|
9103
9205
|
*/
|
|
9104
9206
|
class BarChartComponent {
|
|
9207
|
+
_el = inject(ElementRef);
|
|
9208
|
+
_destroyRef = inject(DestroyRef);
|
|
9209
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9210
|
+
constructor() {
|
|
9211
|
+
afterNextRender(() => {
|
|
9212
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9213
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9214
|
+
});
|
|
9215
|
+
obs.observe(this._el.nativeElement);
|
|
9216
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9217
|
+
});
|
|
9218
|
+
}
|
|
9105
9219
|
/** Data items. */
|
|
9106
9220
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
9107
9221
|
/** Chart width in pixels. */
|
|
@@ -9125,7 +9239,8 @@ class BarChartComponent {
|
|
|
9125
9239
|
PADDING_RIGHT = 10;
|
|
9126
9240
|
PADDING_TOP = 10;
|
|
9127
9241
|
PADDING_BOTTOM = 30;
|
|
9128
|
-
|
|
9242
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9243
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9129
9244
|
maxValue = computed(() => {
|
|
9130
9245
|
const d = this.data();
|
|
9131
9246
|
if (!d || d.length === 0)
|
|
@@ -9154,7 +9269,7 @@ class BarChartComponent {
|
|
|
9154
9269
|
if (!d || d.length === 0)
|
|
9155
9270
|
return [];
|
|
9156
9271
|
const isVertical = this.orientation() === 'vertical';
|
|
9157
|
-
const w = this.
|
|
9272
|
+
const w = this.effectiveWidth();
|
|
9158
9273
|
const h = this.height();
|
|
9159
9274
|
const pl = this.PADDING_LEFT;
|
|
9160
9275
|
const pr = this.PADDING_RIGHT;
|
|
@@ -9210,7 +9325,7 @@ class BarChartComponent {
|
|
|
9210
9325
|
}, ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
|
|
9211
9326
|
isVertical = computed(() => this.orientation() === 'vertical', ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
|
|
9212
9327
|
axisLine = computed(() => {
|
|
9213
|
-
const w = this.
|
|
9328
|
+
const w = this.effectiveWidth();
|
|
9214
9329
|
const h = this.height();
|
|
9215
9330
|
const pl = this.PADDING_LEFT;
|
|
9216
9331
|
const pt = this.PADDING_TOP;
|
|
@@ -9228,12 +9343,12 @@ class BarChartComponent {
|
|
|
9228
9343
|
};
|
|
9229
9344
|
}, ...(ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []));
|
|
9230
9345
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9231
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BarChartComponent, isStandalone: true, selector: "lc-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n
|
|
9346
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BarChartComponent, isStandalone: true, selector: "lc-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Bar chart\"\n class=\"lc-bar-chart\"\n>\n <!-- Grid lines -->\n @if (showGrid() && isVertical()) {\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-bar-chart__grid-line\"\n />\n <text\n [attr.x]=\"axisLine().x1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-bar-chart__grid-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().x1\"\n [attr.y1]=\"axisLine().y1\"\n [attr.x2]=\"axisLine().x2\"\n [attr.y2]=\"axisLine().y2\"\n class=\"lc-bar-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"axisLine().by1\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"axisLine().by2\"\n class=\"lc-bar-chart__axis\"\n />\n\n <!-- Bars -->\n @for (bar of bars(); track bar.label) {\n <rect\n [attr.x]=\"bar.x\"\n [attr.y]=\"bar.y\"\n [attr.width]=\"bar.width\"\n [attr.height]=\"bar.height\"\n [attr.fill]=\"bar.color\"\n rx=\"2\"\n class=\"lc-bar-chart__bar\"\n />\n\n @if (showValues()) {\n <text\n [attr.x]=\"bar.valueX\"\n [attr.y]=\"bar.valueY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'start'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__value\"\n >\n {{ bar.value }}\n </text>\n }\n\n @if (showLabels()) {\n <text\n [attr.x]=\"bar.labelX\"\n [attr.y]=\"bar.labelY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__label\"\n >\n {{ bar.label }}\n </text>\n }\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9232
9347
|
}
|
|
9233
9348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BarChartComponent, decorators: [{
|
|
9234
9349
|
type: Component,
|
|
9235
|
-
args: [{ selector: 'lc-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n
|
|
9236
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
9350
|
+
args: [{ selector: 'lc-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Bar chart\"\n class=\"lc-bar-chart\"\n>\n <!-- Grid lines -->\n @if (showGrid() && isVertical()) {\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-bar-chart__grid-line\"\n />\n <text\n [attr.x]=\"axisLine().x1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-bar-chart__grid-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().x1\"\n [attr.y1]=\"axisLine().y1\"\n [attr.x2]=\"axisLine().x2\"\n [attr.y2]=\"axisLine().y2\"\n class=\"lc-bar-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"axisLine().by1\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"axisLine().by2\"\n class=\"lc-bar-chart__axis\"\n />\n\n <!-- Bars -->\n @for (bar of bars(); track bar.label) {\n <rect\n [attr.x]=\"bar.x\"\n [attr.y]=\"bar.y\"\n [attr.width]=\"bar.width\"\n [attr.height]=\"bar.height\"\n [attr.fill]=\"bar.color\"\n rx=\"2\"\n class=\"lc-bar-chart__bar\"\n />\n\n @if (showValues()) {\n <text\n [attr.x]=\"bar.valueX\"\n [attr.y]=\"bar.valueY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'start'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__value\"\n >\n {{ bar.value }}\n </text>\n }\n\n @if (showLabels()) {\n <text\n [attr.x]=\"bar.labelX\"\n [attr.y]=\"bar.labelY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__label\"\n >\n {{ bar.label }}\n </text>\n }\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"] }]
|
|
9351
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
9237
9352
|
|
|
9238
9353
|
const DEFAULT_COLORS$5 = [
|
|
9239
9354
|
'var(--color-primary-500)',
|
|
@@ -9259,6 +9374,18 @@ const DEFAULT_COLORS$5 = [
|
|
|
9259
9374
|
* ```
|
|
9260
9375
|
*/
|
|
9261
9376
|
class LineChartComponent {
|
|
9377
|
+
_el = inject(ElementRef);
|
|
9378
|
+
_destroyRef = inject(DestroyRef);
|
|
9379
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9380
|
+
constructor() {
|
|
9381
|
+
afterNextRender(() => {
|
|
9382
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9383
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9384
|
+
});
|
|
9385
|
+
obs.observe(this._el.nativeElement);
|
|
9386
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9387
|
+
});
|
|
9388
|
+
}
|
|
9262
9389
|
/** One or more data series. */
|
|
9263
9390
|
series = input.required(...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
|
|
9264
9391
|
/** X-axis labels. */
|
|
@@ -9289,7 +9416,8 @@ class LineChartComponent {
|
|
|
9289
9416
|
PR = 10;
|
|
9290
9417
|
PT = 10;
|
|
9291
9418
|
PB = 30;
|
|
9292
|
-
|
|
9419
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9420
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9293
9421
|
allValues = computed(() => {
|
|
9294
9422
|
const s = this.series();
|
|
9295
9423
|
return s.flatMap((ser) => ser.data);
|
|
@@ -9304,7 +9432,7 @@ class LineChartComponent {
|
|
|
9304
9432
|
plotArea = computed(() => ({
|
|
9305
9433
|
x: this.PL,
|
|
9306
9434
|
y: this.PT,
|
|
9307
|
-
w: this.
|
|
9435
|
+
w: this.effectiveWidth() - this.PL - this.PR,
|
|
9308
9436
|
h: this.height() - this.PT - this.PB,
|
|
9309
9437
|
}), ...(ngDevMode ? [{ debugName: "plotArea" }] : /* istanbul ignore next */ []));
|
|
9310
9438
|
gridLines = computed(() => {
|
|
@@ -9417,12 +9545,12 @@ class LineChartComponent {
|
|
|
9417
9545
|
return String(Math.round(val));
|
|
9418
9546
|
}
|
|
9419
9547
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9420
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LineChartComponent, isStandalone: true, selector: "lc-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showXLabels: { classPropertyName: "showXLabels", publicName: "showXLabels", isSignal: true, isRequired: false, transformFunction: null }, showYLabels: { classPropertyName: "showYLabels", publicName: "showYLabels", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-line-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n
|
|
9548
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LineChartComponent, isStandalone: true, selector: "lc-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showXLabels: { classPropertyName: "showXLabels", publicName: "showXLabels", isSignal: true, isRequired: false, transformFunction: null }, showYLabels: { classPropertyName: "showYLabels", publicName: "showYLabels", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-line-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Line chart\"\n class=\"lc-line-chart__svg\"\n >\n <!-- Grid lines -->\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-line-chart__grid-line\"\n />\n @if (showYLabels()) {\n <text\n [attr.x]=\"axisLine().vx1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-line-chart__y-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().vx1\"\n [attr.y1]=\"axisLine().vy1\"\n [attr.x2]=\"axisLine().vx2\"\n [attr.y2]=\"axisLine().vy2\"\n class=\"lc-line-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"axisLine().hy1\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"axisLine().hy2\"\n class=\"lc-line-chart__axis\"\n />\n\n <!-- X labels -->\n @for (lbl of xLabels(); track lbl.x) {\n <text\n [attr.x]=\"lbl.x\"\n [attr.y]=\"lbl.y\"\n text-anchor=\"middle\"\n class=\"lc-line-chart__x-label\"\n >\n {{ lbl.label }}\n </text>\n }\n\n <!-- Clip path: prevents smooth spline overshoot from rendering outside the plot area -->\n <defs>\n <clipPath [attr.id]=\"clipId()\">\n <rect\n [attr.x]=\"plotArea().x\"\n [attr.y]=\"plotArea().y\"\n [attr.width]=\"plotArea().w\"\n [attr.height]=\"plotArea().h\"\n />\n </clipPath>\n </defs>\n\n <!-- Series -->\n @for (ser of renderedSeries(); track ser.label) {\n @if (ser.areaD) {\n <path\n [attr.d]=\"ser.areaD\"\n [attr.fill]=\"ser.color\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n class=\"lc-line-chart__area\"\n />\n }\n @if (ser.pathD) {\n <path\n [attr.d]=\"ser.pathD\"\n [attr.stroke]=\"ser.color\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-line-chart__line\"\n />\n }\n @for (pt of ser.points; track $index) {\n <circle\n [attr.cx]=\"pt.x\"\n [attr.cy]=\"pt.y\"\n r=\"3\"\n [attr.fill]=\"ser.color\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n class=\"lc-line-chart__dot\"\n />\n }\n }\n </svg>\n\n @if (legendItems().length > 0) {\n <div class=\"lc-line-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-line-chart__legend-item\">\n <span class=\"lc-line-chart__legend-line\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-line-chart__legend-label\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-line-chart{display:block;width:100%}.lc-line-chart__svg{overflow:visible}.lc-line-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-line-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-line-chart__y-label,.lc-line-chart__x-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-line-chart__area{opacity:.12}.lc-line-chart__dot{transition:r .15s ease}.lc-line-chart__dot:hover{r:5}.lc-line-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-line-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-line-chart__legend-line{width:1rem;height:.1875rem;border-radius:1px;flex-shrink:0}.lc-line-chart__legend-label{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9421
9549
|
}
|
|
9422
9550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LineChartComponent, decorators: [{
|
|
9423
9551
|
type: Component,
|
|
9424
|
-
args: [{ selector: 'lc-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-line-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n
|
|
9425
|
-
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showXLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showXLabels", required: false }] }], showYLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showYLabels", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }] } });
|
|
9552
|
+
args: [{ selector: 'lc-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-line-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Line chart\"\n class=\"lc-line-chart__svg\"\n >\n <!-- Grid lines -->\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-line-chart__grid-line\"\n />\n @if (showYLabels()) {\n <text\n [attr.x]=\"axisLine().vx1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-line-chart__y-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().vx1\"\n [attr.y1]=\"axisLine().vy1\"\n [attr.x2]=\"axisLine().vx2\"\n [attr.y2]=\"axisLine().vy2\"\n class=\"lc-line-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"axisLine().hy1\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"axisLine().hy2\"\n class=\"lc-line-chart__axis\"\n />\n\n <!-- X labels -->\n @for (lbl of xLabels(); track lbl.x) {\n <text\n [attr.x]=\"lbl.x\"\n [attr.y]=\"lbl.y\"\n text-anchor=\"middle\"\n class=\"lc-line-chart__x-label\"\n >\n {{ lbl.label }}\n </text>\n }\n\n <!-- Clip path: prevents smooth spline overshoot from rendering outside the plot area -->\n <defs>\n <clipPath [attr.id]=\"clipId()\">\n <rect\n [attr.x]=\"plotArea().x\"\n [attr.y]=\"plotArea().y\"\n [attr.width]=\"plotArea().w\"\n [attr.height]=\"plotArea().h\"\n />\n </clipPath>\n </defs>\n\n <!-- Series -->\n @for (ser of renderedSeries(); track ser.label) {\n @if (ser.areaD) {\n <path\n [attr.d]=\"ser.areaD\"\n [attr.fill]=\"ser.color\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n class=\"lc-line-chart__area\"\n />\n }\n @if (ser.pathD) {\n <path\n [attr.d]=\"ser.pathD\"\n [attr.stroke]=\"ser.color\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-line-chart__line\"\n />\n }\n @for (pt of ser.points; track $index) {\n <circle\n [attr.cx]=\"pt.x\"\n [attr.cy]=\"pt.y\"\n r=\"3\"\n [attr.fill]=\"ser.color\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n class=\"lc-line-chart__dot\"\n />\n }\n }\n </svg>\n\n @if (legendItems().length > 0) {\n <div class=\"lc-line-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-line-chart__legend-item\">\n <span class=\"lc-line-chart__legend-line\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-line-chart__legend-label\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-line-chart{display:block;width:100%}.lc-line-chart__svg{overflow:visible}.lc-line-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-line-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-line-chart__y-label,.lc-line-chart__x-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-line-chart__area{opacity:.12}.lc-line-chart__dot{transition:r .15s ease}.lc-line-chart__dot:hover{r:5}.lc-line-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-line-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-line-chart__legend-line{width:1rem;height:.1875rem;border-radius:1px;flex-shrink:0}.lc-line-chart__legend-label{color:var(--color-text-secondary)}\n"] }]
|
|
9553
|
+
}], ctorParameters: () => [], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showXLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showXLabels", required: false }] }], showYLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showYLabels", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }] } });
|
|
9426
9554
|
|
|
9427
9555
|
/**
|
|
9428
9556
|
* Gauge component for displaying a value on a semicircular scale.
|
|
@@ -9545,6 +9673,18 @@ const DEFAULT_COLORS$4 = [
|
|
|
9545
9673
|
* ```
|
|
9546
9674
|
*/
|
|
9547
9675
|
class StackedBarChartComponent {
|
|
9676
|
+
_el = inject(ElementRef);
|
|
9677
|
+
_destroyRef = inject(DestroyRef);
|
|
9678
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9679
|
+
constructor() {
|
|
9680
|
+
afterNextRender(() => {
|
|
9681
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9682
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9683
|
+
});
|
|
9684
|
+
obs.observe(this._el.nativeElement);
|
|
9685
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9686
|
+
});
|
|
9687
|
+
}
|
|
9548
9688
|
/** Categories with stacked values. */
|
|
9549
9689
|
categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
|
|
9550
9690
|
/** Legend items mapping to each value index. */
|
|
@@ -9561,7 +9701,8 @@ class StackedBarChartComponent {
|
|
|
9561
9701
|
PR = 10;
|
|
9562
9702
|
PT = 10;
|
|
9563
9703
|
PB = 30;
|
|
9564
|
-
|
|
9704
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9705
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9565
9706
|
maxTotal = computed(() => {
|
|
9566
9707
|
const cats = this.categories();
|
|
9567
9708
|
if (!cats.length)
|
|
@@ -9590,7 +9731,7 @@ class StackedBarChartComponent {
|
|
|
9590
9731
|
const legs = this.legends();
|
|
9591
9732
|
if (!cats.length)
|
|
9592
9733
|
return [];
|
|
9593
|
-
const w = this.
|
|
9734
|
+
const w = this.effectiveWidth();
|
|
9594
9735
|
const h = this.height();
|
|
9595
9736
|
const isV = this.orientation() === 'vertical';
|
|
9596
9737
|
const plotW = w - this.PL - this.PR;
|
|
@@ -9649,15 +9790,15 @@ class StackedBarChartComponent {
|
|
|
9649
9790
|
vx1: this.PL, vy1: this.PT,
|
|
9650
9791
|
vx2: this.PL, vy2: this.height() - this.PB,
|
|
9651
9792
|
hx1: this.PL, hy1: this.height() - this.PB,
|
|
9652
|
-
hx2: this.
|
|
9793
|
+
hx2: this.effectiveWidth() - this.PR, hy2: this.height() - this.PB,
|
|
9653
9794
|
}), ...(ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []));
|
|
9654
9795
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StackedBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9655
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: StackedBarChartComponent, isStandalone: true, selector: "lc-stacked-bar-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, legends: { classPropertyName: "legends", publicName: "legends", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n
|
|
9796
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: StackedBarChartComponent, isStandalone: true, selector: "lc-stacked-bar-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, legends: { classPropertyName: "legends", publicName: "legends", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Stacked bar chart\"\n class=\"lc-stacked-bar-chart__svg\"\n >\n @if (showGrid() && isVertical()) {\n @for (line of gridLines(); track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-stacked-bar-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__grid-label\">{{ line.label }}</text>\n }\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-stacked-bar-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-stacked-bar-chart__axis\" />\n\n @for (stack of stacks(); track stack.label) {\n @for (seg of stack.segments; track $index) {\n <rect [attr.x]=\"seg.x\" [attr.y]=\"seg.y\" [attr.width]=\"seg.w\" [attr.height]=\"seg.h\" [attr.fill]=\"seg.color\" class=\"lc-stacked-bar-chart__segment\" />\n }\n @if (showLabels()) {\n <text [attr.x]=\"stack.labelPos.x\" [attr.y]=\"stack.labelPos.y\" [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__label\">{{ stack.label }}</text>\n }\n }\n </svg>\n\n @if (showLegend() && legendItems().length) {\n <div class=\"lc-stacked-bar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-stacked-bar-chart__legend-item\">\n <span class=\"lc-stacked-bar-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-stacked-bar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-stacked-bar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-stacked-bar-chart__svg{overflow:visible}.lc-stacked-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-stacked-bar-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-stacked-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-stacked-bar-chart__segment{transition:opacity .15s ease}.lc-stacked-bar-chart__segment:hover{opacity:.8}.lc-stacked-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-stacked-bar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-stacked-bar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-stacked-bar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:2px;flex-shrink:0}.lc-stacked-bar-chart__legend-text{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9656
9797
|
}
|
|
9657
9798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StackedBarChartComponent, decorators: [{
|
|
9658
9799
|
type: Component,
|
|
9659
|
-
args: [{ selector: 'lc-stacked-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n
|
|
9660
|
-
}], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], legends: [{ type: i0.Input, args: [{ isSignal: true, alias: "legends", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
9800
|
+
args: [{ selector: 'lc-stacked-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Stacked bar chart\"\n class=\"lc-stacked-bar-chart__svg\"\n >\n @if (showGrid() && isVertical()) {\n @for (line of gridLines(); track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-stacked-bar-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__grid-label\">{{ line.label }}</text>\n }\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-stacked-bar-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-stacked-bar-chart__axis\" />\n\n @for (stack of stacks(); track stack.label) {\n @for (seg of stack.segments; track $index) {\n <rect [attr.x]=\"seg.x\" [attr.y]=\"seg.y\" [attr.width]=\"seg.w\" [attr.height]=\"seg.h\" [attr.fill]=\"seg.color\" class=\"lc-stacked-bar-chart__segment\" />\n }\n @if (showLabels()) {\n <text [attr.x]=\"stack.labelPos.x\" [attr.y]=\"stack.labelPos.y\" [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__label\">{{ stack.label }}</text>\n }\n }\n </svg>\n\n @if (showLegend() && legendItems().length) {\n <div class=\"lc-stacked-bar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-stacked-bar-chart__legend-item\">\n <span class=\"lc-stacked-bar-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-stacked-bar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-stacked-bar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-stacked-bar-chart__svg{overflow:visible}.lc-stacked-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-stacked-bar-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-stacked-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-stacked-bar-chart__segment{transition:opacity .15s ease}.lc-stacked-bar-chart__segment:hover{opacity:.8}.lc-stacked-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-stacked-bar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-stacked-bar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-stacked-bar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:2px;flex-shrink:0}.lc-stacked-bar-chart__legend-text{color:var(--color-text-secondary)}\n"] }]
|
|
9801
|
+
}], ctorParameters: () => [], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], legends: [{ type: i0.Input, args: [{ isSignal: true, alias: "legends", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
9661
9802
|
|
|
9662
9803
|
const DEFAULT_COLORS$3 = [
|
|
9663
9804
|
'var(--color-primary-500)',
|
|
@@ -9683,6 +9824,18 @@ const DEFAULT_COLORS$3 = [
|
|
|
9683
9824
|
* ```
|
|
9684
9825
|
*/
|
|
9685
9826
|
class AreaChartComponent {
|
|
9827
|
+
_el = inject(ElementRef);
|
|
9828
|
+
_destroyRef = inject(DestroyRef);
|
|
9829
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9830
|
+
constructor() {
|
|
9831
|
+
afterNextRender(() => {
|
|
9832
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9833
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9834
|
+
});
|
|
9835
|
+
obs.observe(this._el.nativeElement);
|
|
9836
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9837
|
+
});
|
|
9838
|
+
}
|
|
9686
9839
|
series = input.required(...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
|
|
9687
9840
|
labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
9688
9841
|
width = input(400, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
@@ -9702,10 +9855,11 @@ class AreaChartComponent {
|
|
|
9702
9855
|
PR = 10;
|
|
9703
9856
|
PT = 10;
|
|
9704
9857
|
PB = 30;
|
|
9705
|
-
|
|
9858
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9859
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9706
9860
|
plotArea = computed(() => ({
|
|
9707
9861
|
x: this.PL, y: this.PT,
|
|
9708
|
-
w: this.
|
|
9862
|
+
w: this.effectiveWidth() - this.PL - this.PR,
|
|
9709
9863
|
h: this.height() - this.PT - this.PB,
|
|
9710
9864
|
}), ...(ngDevMode ? [{ debugName: "plotArea" }] : /* istanbul ignore next */ []));
|
|
9711
9865
|
computedSeries = computed(() => {
|
|
@@ -9847,12 +10001,12 @@ class AreaChartComponent {
|
|
|
9847
10001
|
return this.renderedSeries().map(s => ({ label: s.label, color: s.color }));
|
|
9848
10002
|
}, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
9849
10003
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9850
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AreaChartComponent, isStandalone: true, selector: "lc-area-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showXLabels: { classPropertyName: "showXLabels", publicName: "showXLabels", isSignal: true, isRequired: false, transformFunction: null }, showYLabels: { classPropertyName: "showYLabels", publicName: "showYLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-area-chart\">\n <svg
|
|
10004
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AreaChartComponent, isStandalone: true, selector: "lc-area-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showXLabels: { classPropertyName: "showXLabels", publicName: "showXLabels", isSignal: true, isRequired: false, transformFunction: null }, showYLabels: { classPropertyName: "showYLabels", publicName: "showYLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-area-chart\">\n <svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Area chart\" class=\"lc-area-chart__svg\">\n @for (line of gridLines(); track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-area-chart__grid\" />\n @if (showYLabels()) {\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-area-chart__axis-label\">{{ line.label }}</text>\n }\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-area-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-area-chart__axis\" />\n\n @for (lbl of xLabelItems(); track lbl.x) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"middle\" class=\"lc-area-chart__axis-label\">{{ lbl.label }}</text>\n }\n\n @for (ser of renderedSeries(); track ser.label) {\n @if (ser.areaD) {\n <path [attr.d]=\"ser.areaD\" [attr.fill]=\"ser.color\" [attr.opacity]=\"fillOpacity()\" class=\"lc-area-chart__area\" />\n }\n @if (ser.lineD) {\n <path [attr.d]=\"ser.lineD\" [attr.stroke]=\"ser.color\" [attr.stroke-width]=\"strokeWidth()\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lc-area-chart__line\" />\n }\n @for (pt of ser.points; track $index) {\n <circle [attr.cx]=\"pt.x\" [attr.cy]=\"pt.y\" r=\"3\" [attr.fill]=\"ser.color\" stroke=\"white\" stroke-width=\"1.5\" class=\"lc-area-chart__dot\" />\n }\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-area-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-area-chart__legend-item\">\n <span class=\"lc-area-chart__legend-swatch\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-area-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-area-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-area-chart__svg{overflow:visible}.lc-area-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-area-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-area-chart__axis-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-area-chart__dot{transition:r .15s ease}.lc-area-chart__dot:hover{r:5}.lc-area-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-area-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-area-chart__legend-swatch{width:.75rem;height:.75rem;border-radius:2px;flex-shrink:0}.lc-area-chart__legend-text{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9851
10005
|
}
|
|
9852
10006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AreaChartComponent, decorators: [{
|
|
9853
10007
|
type: Component,
|
|
9854
|
-
args: [{ selector: 'lc-area-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-area-chart\">\n <svg
|
|
9855
|
-
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showXLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showXLabels", required: false }] }], showYLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showYLabels", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }] } });
|
|
10008
|
+
args: [{ selector: 'lc-area-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-area-chart\">\n <svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Area chart\" class=\"lc-area-chart__svg\">\n @for (line of gridLines(); track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-area-chart__grid\" />\n @if (showYLabels()) {\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-area-chart__axis-label\">{{ line.label }}</text>\n }\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-area-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-area-chart__axis\" />\n\n @for (lbl of xLabelItems(); track lbl.x) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"middle\" class=\"lc-area-chart__axis-label\">{{ lbl.label }}</text>\n }\n\n @for (ser of renderedSeries(); track ser.label) {\n @if (ser.areaD) {\n <path [attr.d]=\"ser.areaD\" [attr.fill]=\"ser.color\" [attr.opacity]=\"fillOpacity()\" class=\"lc-area-chart__area\" />\n }\n @if (ser.lineD) {\n <path [attr.d]=\"ser.lineD\" [attr.stroke]=\"ser.color\" [attr.stroke-width]=\"strokeWidth()\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lc-area-chart__line\" />\n }\n @for (pt of ser.points; track $index) {\n <circle [attr.cx]=\"pt.x\" [attr.cy]=\"pt.y\" r=\"3\" [attr.fill]=\"ser.color\" stroke=\"white\" stroke-width=\"1.5\" class=\"lc-area-chart__dot\" />\n }\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-area-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-area-chart__legend-item\">\n <span class=\"lc-area-chart__legend-swatch\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-area-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-area-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-area-chart__svg{overflow:visible}.lc-area-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-area-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-area-chart__axis-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-area-chart__dot{transition:r .15s ease}.lc-area-chart__dot:hover{r:5}.lc-area-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-area-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-area-chart__legend-swatch{width:.75rem;height:.75rem;border-radius:2px;flex-shrink:0}.lc-area-chart__legend-text{color:var(--color-text-secondary)}\n"] }]
|
|
10009
|
+
}], ctorParameters: () => [], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showXLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showXLabels", required: false }] }], showYLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showYLabels", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }] } });
|
|
9856
10010
|
|
|
9857
10011
|
/**
|
|
9858
10012
|
* Heatmap component for visualizing 2D data density.
|
|
@@ -10038,11 +10192,11 @@ class PieChartComponent {
|
|
|
10038
10192
|
}, ...(ngDevMode ? [{ debugName: "arcs" }] : /* istanbul ignore next */ []));
|
|
10039
10193
|
legendItems = computed(() => this.arcs().map(a => ({ color: a.color, label: a.label, percentage: a.percentage })), ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
10040
10194
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10041
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PieChartComponent, isStandalone: true, selector: "lc-pie-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-pie-chart{display:
|
|
10195
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PieChartComponent, isStandalone: true, selector: "lc-pie-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-pie-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-pie-chart__svg{overflow:visible}.lc-pie-chart__segment{transition:opacity .15s ease}.lc-pie-chart__segment:hover{opacity:.8}.lc-pie-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-pie-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-pie-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-pie-chart__legend-label{color:var(--color-text-secondary)}.lc-pie-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10042
10196
|
}
|
|
10043
10197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PieChartComponent, decorators: [{
|
|
10044
10198
|
type: Component,
|
|
10045
|
-
args: [{ selector: 'lc-pie-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-pie-chart{display:
|
|
10199
|
+
args: [{ selector: 'lc-pie-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-pie-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-pie-chart__svg{overflow:visible}.lc-pie-chart__segment{transition:opacity .15s ease}.lc-pie-chart__segment:hover{opacity:.8}.lc-pie-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-pie-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-pie-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-pie-chart__legend-label{color:var(--color-text-secondary)}.lc-pie-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"] }]
|
|
10046
10200
|
}], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }] } });
|
|
10047
10201
|
|
|
10048
10202
|
/**
|
|
@@ -10159,11 +10313,11 @@ class RadarChartComponent {
|
|
|
10159
10313
|
return this.seriesPolygons().map(s => ({ label: s.label, colorIndex: s.colorIndex, customColor: s.customColor }));
|
|
10160
10314
|
}, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
10161
10315
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10162
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadarChartComponent, isStandalone: true, selector: "lc-radar-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, axes: { classPropertyName: "axes", publicName: "axes", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rings: { classPropertyName: "rings", publicName: "rings", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-radar-chart{display:
|
|
10316
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadarChartComponent, isStandalone: true, selector: "lc-radar-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, axes: { classPropertyName: "axes", publicName: "axes", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rings: { classPropertyName: "rings", publicName: "rings", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-radar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem}.lc-radar-chart__svg{overflow:visible}.lc-radar-chart__grid{fill:none;stroke:var(--color-border);stroke-width:1}.lc-radar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-radar-chart__polygon{transition:fill-opacity .15s ease}.lc-radar-chart__polygon:hover{fill-opacity:.3}.lc-radar-chart__polygon--0{fill:var(--color-primary-500);stroke:var(--color-primary-500)}.lc-radar-chart__polygon--1{fill:var(--color-secondary-500);stroke:var(--color-secondary-500)}.lc-radar-chart__polygon--2{fill:var(--color-success-default);stroke:var(--color-success-default)}.lc-radar-chart__polygon--3{fill:var(--color-warning-default);stroke:var(--color-warning-default)}.lc-radar-chart__polygon--4{fill:var(--color-error-default);stroke:var(--color-error-default)}.lc-radar-chart__polygon--5{fill:var(--color-info-default);stroke:var(--color-info-default)}.lc-radar-chart__polygon--6{fill:var(--color-primary-700);stroke:var(--color-primary-700)}.lc-radar-chart__polygon--7{fill:var(--color-secondary-700);stroke:var(--color-secondary-700)}.lc-radar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-radar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-radar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-radar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-radar-chart__legend-dot--0{background-color:var(--color-primary-500)}.lc-radar-chart__legend-dot--1{background-color:var(--color-secondary-500)}.lc-radar-chart__legend-dot--2{background-color:var(--color-success-default)}.lc-radar-chart__legend-dot--3{background-color:var(--color-warning-default)}.lc-radar-chart__legend-dot--4{background-color:var(--color-error-default)}.lc-radar-chart__legend-dot--5{background-color:var(--color-info-default)}.lc-radar-chart__legend-dot--6{background-color:var(--color-primary-700)}.lc-radar-chart__legend-dot--7{background-color:var(--color-secondary-700)}.lc-radar-chart__legend-text{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10163
10317
|
}
|
|
10164
10318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadarChartComponent, decorators: [{
|
|
10165
10319
|
type: Component,
|
|
10166
|
-
args: [{ selector: 'lc-radar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-radar-chart{display:
|
|
10320
|
+
args: [{ selector: 'lc-radar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-radar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem}.lc-radar-chart__svg{overflow:visible}.lc-radar-chart__grid{fill:none;stroke:var(--color-border);stroke-width:1}.lc-radar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-radar-chart__polygon{transition:fill-opacity .15s ease}.lc-radar-chart__polygon:hover{fill-opacity:.3}.lc-radar-chart__polygon--0{fill:var(--color-primary-500);stroke:var(--color-primary-500)}.lc-radar-chart__polygon--1{fill:var(--color-secondary-500);stroke:var(--color-secondary-500)}.lc-radar-chart__polygon--2{fill:var(--color-success-default);stroke:var(--color-success-default)}.lc-radar-chart__polygon--3{fill:var(--color-warning-default);stroke:var(--color-warning-default)}.lc-radar-chart__polygon--4{fill:var(--color-error-default);stroke:var(--color-error-default)}.lc-radar-chart__polygon--5{fill:var(--color-info-default);stroke:var(--color-info-default)}.lc-radar-chart__polygon--6{fill:var(--color-primary-700);stroke:var(--color-primary-700)}.lc-radar-chart__polygon--7{fill:var(--color-secondary-700);stroke:var(--color-secondary-700)}.lc-radar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-radar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-radar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-radar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-radar-chart__legend-dot--0{background-color:var(--color-primary-500)}.lc-radar-chart__legend-dot--1{background-color:var(--color-secondary-500)}.lc-radar-chart__legend-dot--2{background-color:var(--color-success-default)}.lc-radar-chart__legend-dot--3{background-color:var(--color-warning-default)}.lc-radar-chart__legend-dot--4{background-color:var(--color-error-default)}.lc-radar-chart__legend-dot--5{background-color:var(--color-info-default)}.lc-radar-chart__legend-dot--6{background-color:var(--color-primary-700)}.lc-radar-chart__legend-dot--7{background-color:var(--color-secondary-700)}.lc-radar-chart__legend-text{color:var(--color-text-secondary)}\n"] }]
|
|
10167
10321
|
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], axes: [{ type: i0.Input, args: [{ isSignal: true, alias: "axes", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rings: [{ type: i0.Input, args: [{ isSignal: true, alias: "rings", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }] } });
|
|
10168
10322
|
|
|
10169
10323
|
/**
|
|
@@ -10233,6 +10387,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
10233
10387
|
* ```
|
|
10234
10388
|
*/
|
|
10235
10389
|
class WaterfallChartComponent {
|
|
10390
|
+
_el = inject(ElementRef);
|
|
10391
|
+
_destroyRef = inject(DestroyRef);
|
|
10392
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
10393
|
+
constructor() {
|
|
10394
|
+
afterNextRender(() => {
|
|
10395
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
10396
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
10397
|
+
});
|
|
10398
|
+
obs.observe(this._el.nativeElement);
|
|
10399
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
10400
|
+
});
|
|
10401
|
+
}
|
|
10236
10402
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
10237
10403
|
width = input(500, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
10238
10404
|
height = input(250, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
@@ -10247,7 +10413,8 @@ class WaterfallChartComponent {
|
|
|
10247
10413
|
PR = 10;
|
|
10248
10414
|
PT = 15;
|
|
10249
10415
|
PB = 30;
|
|
10250
|
-
|
|
10416
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
10417
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
10251
10418
|
computedBars = computed(() => {
|
|
10252
10419
|
const items = this.data();
|
|
10253
10420
|
if (!items.length)
|
|
@@ -10276,7 +10443,7 @@ class WaterfallChartComponent {
|
|
|
10276
10443
|
const minVal = Math.min(0, ...allVals);
|
|
10277
10444
|
const maxVal = Math.max(0, ...allVals);
|
|
10278
10445
|
const range = maxVal - minVal || 1;
|
|
10279
|
-
const w = this.
|
|
10446
|
+
const w = this.effectiveWidth();
|
|
10280
10447
|
const h = this.height();
|
|
10281
10448
|
const plotW = w - this.PL - this.PR;
|
|
10282
10449
|
const plotH = h - this.PT - this.PB;
|
|
@@ -10331,15 +10498,15 @@ class WaterfallChartComponent {
|
|
|
10331
10498
|
vx1: this.PL, vy1: this.PT,
|
|
10332
10499
|
vx2: this.PL, vy2: this.height() - this.PB,
|
|
10333
10500
|
hx1: this.PL, hy1: this.height() - this.PB,
|
|
10334
|
-
hx2: this.
|
|
10501
|
+
hx2: this.effectiveWidth() - this.PR, hy2: this.height() - this.PB,
|
|
10335
10502
|
}), ...(ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []));
|
|
10336
10503
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WaterfallChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10337
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: WaterfallChartComponent, isStandalone: true, selector: "lc-waterfall-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showConnectors: { classPropertyName: "showConnectors", publicName: "showConnectors", isSignal: true, isRequired: false, transformFunction: null }, increaseColor: { classPropertyName: "increaseColor", publicName: "increaseColor", isSignal: true, isRequired: false, transformFunction: null }, decreaseColor: { classPropertyName: "decreaseColor", publicName: "decreaseColor", isSignal: true, isRequired: false, transformFunction: null }, totalColor: { classPropertyName: "totalColor", publicName: "totalColor", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg
|
|
10504
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: WaterfallChartComponent, isStandalone: true, selector: "lc-waterfall-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showConnectors: { classPropertyName: "showConnectors", publicName: "showConnectors", isSignal: true, isRequired: false, transformFunction: null }, increaseColor: { classPropertyName: "increaseColor", publicName: "increaseColor", isSignal: true, isRequired: false, transformFunction: null }, decreaseColor: { classPropertyName: "decreaseColor", publicName: "decreaseColor", isSignal: true, isRequired: false, transformFunction: null }, totalColor: { classPropertyName: "totalColor", publicName: "totalColor", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Waterfall chart\" class=\"lc-waterfall-chart\">\n @for (line of computedBars().gridLines; track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-waterfall-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-waterfall-chart__grid-label\">{{ line.label }}</text>\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-waterfall-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-waterfall-chart__axis\" />\n\n @for (conn of computedBars().connectors; track $index) {\n <line [attr.x1]=\"conn.x1\" [attr.y1]=\"conn.y\" [attr.x2]=\"conn.x2\" [attr.y2]=\"conn.y\" class=\"lc-waterfall-chart__connector\" />\n }\n\n @for (bar of computedBars().bars; track bar.label) {\n <rect [attr.x]=\"bar.x\" [attr.y]=\"bar.y\" [attr.width]=\"bar.width\" [attr.height]=\"bar.height\" [attr.fill]=\"bar.color\" rx=\"2\" class=\"lc-waterfall-chart__bar\" />\n @if (showValues()) {\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.valueY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__value\">{{ bar.value >= 0 ? '+' : '' }}{{ bar.value }}</text>\n }\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.labelY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__label\">{{ bar.label }}</text>\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-waterfall-chart{overflow:visible}.lc-waterfall-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-waterfall-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-waterfall-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-waterfall-chart__connector{stroke:var(--color-border-strong);stroke-width:1;stroke-dasharray:2 2}.lc-waterfall-chart__bar{transition:opacity .15s ease}.lc-waterfall-chart__bar:hover{opacity:.8}.lc-waterfall-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-waterfall-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10338
10505
|
}
|
|
10339
10506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WaterfallChartComponent, decorators: [{
|
|
10340
10507
|
type: Component,
|
|
10341
|
-
args: [{ selector: 'lc-waterfall-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg
|
|
10342
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showConnectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConnectors", required: false }] }], increaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "increaseColor", required: false }] }], decreaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "decreaseColor", required: false }] }], totalColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalColor", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
10508
|
+
args: [{ selector: 'lc-waterfall-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Waterfall chart\" class=\"lc-waterfall-chart\">\n @for (line of computedBars().gridLines; track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-waterfall-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-waterfall-chart__grid-label\">{{ line.label }}</text>\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-waterfall-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-waterfall-chart__axis\" />\n\n @for (conn of computedBars().connectors; track $index) {\n <line [attr.x1]=\"conn.x1\" [attr.y1]=\"conn.y\" [attr.x2]=\"conn.x2\" [attr.y2]=\"conn.y\" class=\"lc-waterfall-chart__connector\" />\n }\n\n @for (bar of computedBars().bars; track bar.label) {\n <rect [attr.x]=\"bar.x\" [attr.y]=\"bar.y\" [attr.width]=\"bar.width\" [attr.height]=\"bar.height\" [attr.fill]=\"bar.color\" rx=\"2\" class=\"lc-waterfall-chart__bar\" />\n @if (showValues()) {\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.valueY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__value\">{{ bar.value >= 0 ? '+' : '' }}{{ bar.value }}</text>\n }\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.labelY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__label\">{{ bar.label }}</text>\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-waterfall-chart{overflow:visible}.lc-waterfall-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-waterfall-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-waterfall-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-waterfall-chart__connector{stroke:var(--color-border-strong);stroke-width:1;stroke-dasharray:2 2}.lc-waterfall-chart__bar{transition:opacity .15s ease}.lc-waterfall-chart__bar:hover{opacity:.8}.lc-waterfall-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-waterfall-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"] }]
|
|
10509
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showConnectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConnectors", required: false }] }], increaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "increaseColor", required: false }] }], decreaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "decreaseColor", required: false }] }], totalColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalColor", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
10343
10510
|
|
|
10344
10511
|
/**
|
|
10345
10512
|
* Calendar component for date-based event display and navigation.
|
|
@@ -10690,11 +10857,11 @@ class GanttChartComponent {
|
|
|
10690
10857
|
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
|
10691
10858
|
}
|
|
10692
10859
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GanttChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: GanttChartComponent, isStandalone: true, selector: "lc-gantt-chart", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, dependencies: { classPropertyName: "dependencies", publicName: "dependencies", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, dayWidth: { classPropertyName: "dayWidth", publicName: "dayWidth", isSignal: true, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { taskClick: "taskClick" }, ngImport: i0, template: "<div class=\"lc-gantt\">\n <div class=\"lc-gantt__container\">\n <!-- Left: Task labels -->\n <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n <div class=\"lc-gantt__labels-header\">Aufgaben</div>\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n\n <!-- Right: Timeline -->\n <div class=\"lc-gantt__timeline-wrapper\">\n <!-- Month headers -->\n <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n @for (mh of monthHeaders(); track mh.label + mh.left) {\n <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n {{ mh.label }}\n </div>\n }\n </div>\n\n <!-- Day headers -->\n <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n @for (col of dayColumns(); track col.left) {\n <div\n class=\"lc-gantt__day-cell\"\n [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n [style.left.px]=\"col.left\"\n [style.width.px]=\"dayWidth()\"\n >\n {{ col.label }}\n </div>\n }\n </div>\n\n <!-- Grid + Bars -->\n <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n <!-- Weekend columns -->\n @for (col of dayColumns(); track col.left) {\n @if (col.isWeekend) {\n <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n }\n }\n\n <!-- Row borders -->\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n }\n\n <!-- Today marker -->\n @if (todayLeft() >= 0) {\n <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n }\n\n <!-- Dependency lines SVG -->\n @if (depLines().length) {\n <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n <defs>\n <marker id=\"arrowhead\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n </marker>\n </defs>\n @for (dep of depLines(); track $index) {\n <path\n [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n class=\"lc-gantt__dep-line\"\n marker-end=\"url(#arrowhead)\"\n />\n }\n </svg>\n }\n\n <!-- Task bars -->\n @for (bar of bars(); track bar.task.id) {\n <div\n [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n [style.left.px]=\"bar.left\"\n [style.top.px]=\"bar.top + 8\"\n [style.width.px]=\"bar.width\"\n [style.height.px]=\"rowHeight() - 16\"\n [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n (click)=\"onTaskClick(bar.task)\"\n >\n @if (bar.progress > 0) {\n <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n }\n <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".lc-gantt{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface)}.lc-gantt__container{display:flex;overflow:auto}.lc-gantt__labels{flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-surface-2);position:sticky;left:0;z-index:3}.lc-gantt__labels-header{height:3.5rem;display:flex;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--color-border)}.lc-gantt__label-row{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--color-divider)}.lc-gantt__label-text{font-size:.8125rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__timeline-wrapper{flex:1;overflow:auto}.lc-gantt__month-row{display:flex;position:relative;height:1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__month-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:.5rem;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-left:1px solid var(--color-border)}.lc-gantt__day-row{display:flex;position:relative;height:2rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__day-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text-secondary);border-left:1px solid var(--color-divider)}.lc-gantt__day-cell--weekend{color:var(--color-text-tertiary);background:color-mix(in srgb,var(--color-border) 30%,transparent)}.lc-gantt__grid{position:relative;min-height:4rem}.lc-gantt__weekend-bg{position:absolute;top:0;background:color-mix(in srgb,var(--color-border) 20%,transparent)}.lc-gantt__row-line{position:absolute;left:0;right:0;height:1px;background:var(--color-divider)}.lc-gantt__today{position:absolute;top:0;width:2px;background:var(--color-error-default);z-index:2;opacity:.7}.lc-gantt__bar{position:absolute;border-radius:var(--border-radius-sm);cursor:pointer;overflow:hidden;display:flex;align-items:center;min-width:.25rem;transition:filter .15s}.lc-gantt__bar:hover{filter:brightness(1.1)}.lc-gantt__bar--primary{background:var(--color-primary-500)}.lc-gantt__bar--secondary{background:var(--color-secondary-500)}.lc-gantt__bar--success{background:var(--color-success-default)}.lc-gantt__bar--warning{background:var(--color-warning-default)}.lc-gantt__bar--error{background:var(--color-error-default)}.lc-gantt__bar--info{background:var(--color-info-default)}.lc-gantt__bar-progress{position:absolute;top:0;left:0;height:100%;background:#00000026;border-radius:.25rem 0 0 .25rem}.lc-gantt__bar-label{position:relative;z-index:1;padding:0 .375rem;font-size:.6875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__dep-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.lc-gantt__dep-line{fill:none;stroke:var(--color-border-strong);stroke-width:1.5}.lc-gantt__arrow{fill:var(--color-text-tertiary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10860
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: GanttChartComponent, isStandalone: true, selector: "lc-gantt-chart", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, dependencies: { classPropertyName: "dependencies", publicName: "dependencies", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, dayWidth: { classPropertyName: "dayWidth", publicName: "dayWidth", isSignal: true, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { taskClick: "taskClick" }, ngImport: i0, template: "<div class=\"lc-gantt\">\n <div class=\"lc-gantt__container\">\n <!-- Left: Task labels -->\n <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n <div class=\"lc-gantt__labels-header\">Aufgaben</div>\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n\n <!-- Right: Timeline -->\n <div class=\"lc-gantt__timeline-wrapper\">\n <!-- Month headers -->\n <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n @for (mh of monthHeaders(); track mh.label + mh.left) {\n <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n {{ mh.label }}\n </div>\n }\n </div>\n\n <!-- Day headers -->\n <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n @for (col of dayColumns(); track col.left) {\n <div\n class=\"lc-gantt__day-cell\"\n [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n [style.left.px]=\"col.left\"\n [style.width.px]=\"dayWidth()\"\n >\n {{ col.label }}\n </div>\n }\n </div>\n\n <!-- Grid + Bars -->\n <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n <!-- Weekend columns -->\n @for (col of dayColumns(); track col.left) {\n @if (col.isWeekend) {\n <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n }\n }\n\n <!-- Row borders -->\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n }\n\n <!-- Today marker -->\n @if (todayLeft() >= 0) {\n <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n }\n\n <!-- Dependency lines SVG -->\n @if (depLines().length) {\n <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n <defs>\n <marker id=\"arrowhead\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n </marker>\n </defs>\n @for (dep of depLines(); track $index) {\n <path\n [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n class=\"lc-gantt__dep-line\"\n marker-end=\"url(#arrowhead)\"\n />\n }\n </svg>\n }\n\n <!-- Task bars -->\n @for (bar of bars(); track bar.task.id) {\n <div\n [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n [style.left.px]=\"bar.left\"\n [style.top.px]=\"bar.top + 8\"\n [style.width.px]=\"bar.width\"\n [style.height.px]=\"rowHeight() - 16\"\n [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n (click)=\"onTaskClick(bar.task)\"\n >\n @if (bar.progress > 0) {\n <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n }\n <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.lc-gantt{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface)}.lc-gantt__container{display:flex;overflow:auto}.lc-gantt__labels{flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-surface-2);position:sticky;left:0;z-index:3}.lc-gantt__labels-header{height:3.5rem;display:flex;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--color-border)}.lc-gantt__label-row{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--color-divider)}.lc-gantt__label-text{font-size:.8125rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__timeline-wrapper{flex:1;overflow:auto}.lc-gantt__month-row{display:flex;position:relative;height:1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__month-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:.5rem;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-left:1px solid var(--color-border)}.lc-gantt__day-row{display:flex;position:relative;height:2rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__day-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text-secondary);border-left:1px solid var(--color-divider)}.lc-gantt__day-cell--weekend{color:var(--color-text-tertiary);background:color-mix(in srgb,var(--color-border) 30%,transparent)}.lc-gantt__grid{position:relative;min-height:4rem}.lc-gantt__weekend-bg{position:absolute;top:0;background:color-mix(in srgb,var(--color-border) 20%,transparent)}.lc-gantt__row-line{position:absolute;left:0;right:0;height:1px;background:var(--color-divider)}.lc-gantt__today{position:absolute;top:0;width:2px;background:var(--color-error-default);z-index:2;opacity:.7}.lc-gantt__bar{position:absolute;border-radius:var(--border-radius-sm);cursor:pointer;overflow:hidden;display:flex;align-items:center;min-width:.25rem;transition:filter .15s}.lc-gantt__bar:hover{filter:brightness(1.1)}.lc-gantt__bar--primary{background:var(--color-primary-500)}.lc-gantt__bar--secondary{background:var(--color-secondary-500)}.lc-gantt__bar--success{background:var(--color-success-default)}.lc-gantt__bar--warning{background:var(--color-warning-default)}.lc-gantt__bar--error{background:var(--color-error-default)}.lc-gantt__bar--info{background:var(--color-info-default)}.lc-gantt__bar-progress{position:absolute;top:0;left:0;height:100%;background:#00000026;border-radius:.25rem 0 0 .25rem}.lc-gantt__bar-label{position:relative;z-index:1;padding:0 .375rem;font-size:.6875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__dep-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.lc-gantt__dep-line{fill:none;stroke:var(--color-border-strong);stroke-width:1.5}.lc-gantt__arrow{fill:var(--color-text-tertiary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10694
10861
|
}
|
|
10695
10862
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GanttChartComponent, decorators: [{
|
|
10696
10863
|
type: Component,
|
|
10697
|
-
args: [{ selector: 'lc-gantt-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-gantt\">\n <div class=\"lc-gantt__container\">\n <!-- Left: Task labels -->\n <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n <div class=\"lc-gantt__labels-header\">Aufgaben</div>\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n\n <!-- Right: Timeline -->\n <div class=\"lc-gantt__timeline-wrapper\">\n <!-- Month headers -->\n <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n @for (mh of monthHeaders(); track mh.label + mh.left) {\n <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n {{ mh.label }}\n </div>\n }\n </div>\n\n <!-- Day headers -->\n <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n @for (col of dayColumns(); track col.left) {\n <div\n class=\"lc-gantt__day-cell\"\n [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n [style.left.px]=\"col.left\"\n [style.width.px]=\"dayWidth()\"\n >\n {{ col.label }}\n </div>\n }\n </div>\n\n <!-- Grid + Bars -->\n <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n <!-- Weekend columns -->\n @for (col of dayColumns(); track col.left) {\n @if (col.isWeekend) {\n <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n }\n }\n\n <!-- Row borders -->\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n }\n\n <!-- Today marker -->\n @if (todayLeft() >= 0) {\n <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n }\n\n <!-- Dependency lines SVG -->\n @if (depLines().length) {\n <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n <defs>\n <marker id=\"arrowhead\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n </marker>\n </defs>\n @for (dep of depLines(); track $index) {\n <path\n [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n class=\"lc-gantt__dep-line\"\n marker-end=\"url(#arrowhead)\"\n />\n }\n </svg>\n }\n\n <!-- Task bars -->\n @for (bar of bars(); track bar.task.id) {\n <div\n [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n [style.left.px]=\"bar.left\"\n [style.top.px]=\"bar.top + 8\"\n [style.width.px]=\"bar.width\"\n [style.height.px]=\"rowHeight() - 16\"\n [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n (click)=\"onTaskClick(bar.task)\"\n >\n @if (bar.progress > 0) {\n <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n }\n <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".lc-gantt{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface)}.lc-gantt__container{display:flex;overflow:auto}.lc-gantt__labels{flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-surface-2);position:sticky;left:0;z-index:3}.lc-gantt__labels-header{height:3.5rem;display:flex;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--color-border)}.lc-gantt__label-row{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--color-divider)}.lc-gantt__label-text{font-size:.8125rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__timeline-wrapper{flex:1;overflow:auto}.lc-gantt__month-row{display:flex;position:relative;height:1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__month-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:.5rem;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-left:1px solid var(--color-border)}.lc-gantt__day-row{display:flex;position:relative;height:2rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__day-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text-secondary);border-left:1px solid var(--color-divider)}.lc-gantt__day-cell--weekend{color:var(--color-text-tertiary);background:color-mix(in srgb,var(--color-border) 30%,transparent)}.lc-gantt__grid{position:relative;min-height:4rem}.lc-gantt__weekend-bg{position:absolute;top:0;background:color-mix(in srgb,var(--color-border) 20%,transparent)}.lc-gantt__row-line{position:absolute;left:0;right:0;height:1px;background:var(--color-divider)}.lc-gantt__today{position:absolute;top:0;width:2px;background:var(--color-error-default);z-index:2;opacity:.7}.lc-gantt__bar{position:absolute;border-radius:var(--border-radius-sm);cursor:pointer;overflow:hidden;display:flex;align-items:center;min-width:.25rem;transition:filter .15s}.lc-gantt__bar:hover{filter:brightness(1.1)}.lc-gantt__bar--primary{background:var(--color-primary-500)}.lc-gantt__bar--secondary{background:var(--color-secondary-500)}.lc-gantt__bar--success{background:var(--color-success-default)}.lc-gantt__bar--warning{background:var(--color-warning-default)}.lc-gantt__bar--error{background:var(--color-error-default)}.lc-gantt__bar--info{background:var(--color-info-default)}.lc-gantt__bar-progress{position:absolute;top:0;left:0;height:100%;background:#00000026;border-radius:.25rem 0 0 .25rem}.lc-gantt__bar-label{position:relative;z-index:1;padding:0 .375rem;font-size:.6875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__dep-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.lc-gantt__dep-line{fill:none;stroke:var(--color-border-strong);stroke-width:1.5}.lc-gantt__arrow{fill:var(--color-text-tertiary)}\n"] }]
|
|
10864
|
+
args: [{ selector: 'lc-gantt-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-gantt\">\n <div class=\"lc-gantt__container\">\n <!-- Left: Task labels -->\n <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n <div class=\"lc-gantt__labels-header\">Aufgaben</div>\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n\n <!-- Right: Timeline -->\n <div class=\"lc-gantt__timeline-wrapper\">\n <!-- Month headers -->\n <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n @for (mh of monthHeaders(); track mh.label + mh.left) {\n <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n {{ mh.label }}\n </div>\n }\n </div>\n\n <!-- Day headers -->\n <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n @for (col of dayColumns(); track col.left) {\n <div\n class=\"lc-gantt__day-cell\"\n [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n [style.left.px]=\"col.left\"\n [style.width.px]=\"dayWidth()\"\n >\n {{ col.label }}\n </div>\n }\n </div>\n\n <!-- Grid + Bars -->\n <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n <!-- Weekend columns -->\n @for (col of dayColumns(); track col.left) {\n @if (col.isWeekend) {\n <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n }\n }\n\n <!-- Row borders -->\n @for (bar of bars(); track bar.task.id) {\n <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n }\n\n <!-- Today marker -->\n @if (todayLeft() >= 0) {\n <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n }\n\n <!-- Dependency lines SVG -->\n @if (depLines().length) {\n <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n <defs>\n <marker id=\"arrowhead\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n </marker>\n </defs>\n @for (dep of depLines(); track $index) {\n <path\n [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n class=\"lc-gantt__dep-line\"\n marker-end=\"url(#arrowhead)\"\n />\n }\n </svg>\n }\n\n <!-- Task bars -->\n @for (bar of bars(); track bar.task.id) {\n <div\n [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n [style.left.px]=\"bar.left\"\n [style.top.px]=\"bar.top + 8\"\n [style.width.px]=\"bar.width\"\n [style.height.px]=\"rowHeight() - 16\"\n [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n (click)=\"onTaskClick(bar.task)\"\n >\n @if (bar.progress > 0) {\n <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n }\n <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.lc-gantt{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface)}.lc-gantt__container{display:flex;overflow:auto}.lc-gantt__labels{flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-surface-2);position:sticky;left:0;z-index:3}.lc-gantt__labels-header{height:3.5rem;display:flex;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--color-border)}.lc-gantt__label-row{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--color-divider)}.lc-gantt__label-text{font-size:.8125rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__timeline-wrapper{flex:1;overflow:auto}.lc-gantt__month-row{display:flex;position:relative;height:1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__month-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:.5rem;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-left:1px solid var(--color-border)}.lc-gantt__day-row{display:flex;position:relative;height:2rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__day-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text-secondary);border-left:1px solid var(--color-divider)}.lc-gantt__day-cell--weekend{color:var(--color-text-tertiary);background:color-mix(in srgb,var(--color-border) 30%,transparent)}.lc-gantt__grid{position:relative;min-height:4rem}.lc-gantt__weekend-bg{position:absolute;top:0;background:color-mix(in srgb,var(--color-border) 20%,transparent)}.lc-gantt__row-line{position:absolute;left:0;right:0;height:1px;background:var(--color-divider)}.lc-gantt__today{position:absolute;top:0;width:2px;background:var(--color-error-default);z-index:2;opacity:.7}.lc-gantt__bar{position:absolute;border-radius:var(--border-radius-sm);cursor:pointer;overflow:hidden;display:flex;align-items:center;min-width:.25rem;transition:filter .15s}.lc-gantt__bar:hover{filter:brightness(1.1)}.lc-gantt__bar--primary{background:var(--color-primary-500)}.lc-gantt__bar--secondary{background:var(--color-secondary-500)}.lc-gantt__bar--success{background:var(--color-success-default)}.lc-gantt__bar--warning{background:var(--color-warning-default)}.lc-gantt__bar--error{background:var(--color-error-default)}.lc-gantt__bar--info{background:var(--color-info-default)}.lc-gantt__bar-progress{position:absolute;top:0;left:0;height:100%;background:#00000026;border-radius:.25rem 0 0 .25rem}.lc-gantt__bar-label{position:relative;z-index:1;padding:0 .375rem;font-size:.6875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__dep-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.lc-gantt__dep-line{fill:none;stroke:var(--color-border-strong);stroke-width:1.5}.lc-gantt__arrow{fill:var(--color-text-tertiary)}\n"] }]
|
|
10698
10865
|
}], propDecorators: { tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: true }] }], dependencies: [{ type: i0.Input, args: [{ isSignal: true, alias: "dependencies", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], dayWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayWidth", required: false }] }], showToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToday", required: false }] }], taskClick: [{ type: i0.Output, args: ["taskClick"] }] } });
|
|
10699
10866
|
|
|
10700
10867
|
/**
|
|
@@ -11123,6 +11290,20 @@ class ChatComponent {
|
|
|
11123
11290
|
isStreaming = input(false, ...(ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []));
|
|
11124
11291
|
/** Show the header bar. */
|
|
11125
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 */ []));
|
|
11126
11307
|
/** Disable the input. */
|
|
11127
11308
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
11128
11309
|
/** Show avatars next to messages. */
|
|
@@ -11290,12 +11471,12 @@ class ChatComponent {
|
|
|
11290
11471
|
}
|
|
11291
11472
|
}
|
|
11292
11473
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11293
|
-
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 });
|
|
11474
|
+
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 }, 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\" [class.lc-chat--borderless]=\"!bordered()\">\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 @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--borderless{border:none;border-radius:0}.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__messages--anchor-bottom>.lc-chat__message:first-child{margin-top:auto}.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 });
|
|
11294
11475
|
}
|
|
11295
11476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, decorators: [{
|
|
11296
11477
|
type: Component,
|
|
11297
|
-
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"] }]
|
|
11298
|
-
}], 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: [{
|
|
11478
|
+
args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet, MarkdownComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-chat\" [class.lc-chat--borderless]=\"!bordered()\">\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 @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--borderless{border:none;border-radius:0}.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__messages--anchor-bottom>.lc-chat__message:first-child{margin-top:auto}.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"] }]
|
|
11479
|
+
}], 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 }] }], 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: [{
|
|
11299
11480
|
type: ContentChild,
|
|
11300
11481
|
args: ['messageTemplate']
|
|
11301
11482
|
}], scrollContainer: [{
|
|
@@ -12782,6 +12963,18 @@ const DEFAULT_COLORS = [
|
|
|
12782
12963
|
'var(--color-warning-default)',
|
|
12783
12964
|
];
|
|
12784
12965
|
class FunnelChartComponent {
|
|
12966
|
+
_el = inject(ElementRef);
|
|
12967
|
+
_destroyRef = inject(DestroyRef);
|
|
12968
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
12969
|
+
constructor() {
|
|
12970
|
+
afterNextRender(() => {
|
|
12971
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
12972
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
12973
|
+
});
|
|
12974
|
+
obs.observe(this._el.nativeElement);
|
|
12975
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
12976
|
+
});
|
|
12977
|
+
}
|
|
12785
12978
|
steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
12786
12979
|
width = input(400, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
12787
12980
|
height = input(300, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
@@ -12789,13 +12982,14 @@ class FunnelChartComponent {
|
|
|
12789
12982
|
showValues = input(true, ...(ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []));
|
|
12790
12983
|
showPercentage = input(true, ...(ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []));
|
|
12791
12984
|
orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
12792
|
-
|
|
12985
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
12986
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
12793
12987
|
renderedSteps = computed(() => {
|
|
12794
12988
|
const steps = this.steps();
|
|
12795
12989
|
if (!steps.length)
|
|
12796
12990
|
return [];
|
|
12797
12991
|
const maxVal = Math.max(...steps.map(s => s.value));
|
|
12798
|
-
const w = this.
|
|
12992
|
+
const w = this.effectiveWidth();
|
|
12799
12993
|
const h = this.height();
|
|
12800
12994
|
const isV = this.orientation() === 'vertical';
|
|
12801
12995
|
const count = steps.length;
|
|
@@ -12861,12 +13055,12 @@ class FunnelChartComponent {
|
|
|
12861
13055
|
}
|
|
12862
13056
|
}, ...(ngDevMode ? [{ debugName: "renderedSteps" }] : /* istanbul ignore next */ []));
|
|
12863
13057
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12864
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FunnelChartComponent, isStandalone: true, selector: "lc-funnel-chart", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-funnel-chart\">\n <svg\n
|
|
13058
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FunnelChartComponent, isStandalone: true, selector: "lc-funnel-chart", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-funnel-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Funnel chart\"\n class=\"lc-funnel-chart__svg\"\n >\n @for (step of renderedSteps(); track step.label) {\n <path\n [attr.d]=\"step.path\"\n [attr.fill]=\"step.color\"\n class=\"lc-funnel-chart__step\"\n />\n\n @if (showLabels()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY - 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__label\"\n >{{ step.label }}</text>\n }\n\n @if (showValues() || showPercentage()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY + 12\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__value\"\n >\n @if (showValues()) { {{ step.value }} }\n @if (showValues() && showPercentage()) { \u00B7 }\n @if (showPercentage()) { {{ step.pct }}% }\n </text>\n }\n }\n </svg>\n</div>\n", styles: [":host{display:block}.lc-funnel-chart{display:flex;flex-direction:column;align-items:center;width:100%}.lc-funnel-chart__svg{overflow:visible}.lc-funnel-chart__step{opacity:.85;transition:opacity .15s}.lc-funnel-chart__step:hover{opacity:1}.lc-funnel-chart__label{font-size:.75rem;font-weight:600;fill:#fff;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.lc-funnel-chart__value{font-size:.625rem;fill:#ffffffd9;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12865
13059
|
}
|
|
12866
13060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FunnelChartComponent, decorators: [{
|
|
12867
13061
|
type: Component,
|
|
12868
|
-
args: [{ selector: 'lc-funnel-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-funnel-chart\">\n <svg\n
|
|
12869
|
-
}], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
|
|
13062
|
+
args: [{ selector: 'lc-funnel-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-funnel-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Funnel chart\"\n class=\"lc-funnel-chart__svg\"\n >\n @for (step of renderedSteps(); track step.label) {\n <path\n [attr.d]=\"step.path\"\n [attr.fill]=\"step.color\"\n class=\"lc-funnel-chart__step\"\n />\n\n @if (showLabels()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY - 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__label\"\n >{{ step.label }}</text>\n }\n\n @if (showValues() || showPercentage()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY + 12\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__value\"\n >\n @if (showValues()) { {{ step.value }} }\n @if (showValues() && showPercentage()) { \u00B7 }\n @if (showPercentage()) { {{ step.pct }}% }\n </text>\n }\n }\n </svg>\n</div>\n", styles: [":host{display:block}.lc-funnel-chart{display:flex;flex-direction:column;align-items:center;width:100%}.lc-funnel-chart__svg{overflow:visible}.lc-funnel-chart__step{opacity:.85;transition:opacity .15s}.lc-funnel-chart__step:hover{opacity:1}.lc-funnel-chart__label{font-size:.75rem;font-weight:600;fill:#fff;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.lc-funnel-chart__value{font-size:.625rem;fill:#ffffffd9;pointer-events:none}\n"] }]
|
|
13063
|
+
}], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
|
|
12870
13064
|
|
|
12871
13065
|
class TagInputComponent {
|
|
12872
13066
|
placeholder = input('Add tag…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
@@ -14781,5 +14975,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
14781
14975
|
* Generated bundle index. Do not edit.
|
|
14782
14976
|
*/
|
|
14783
14977
|
|
|
14784
|
-
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 };
|
|
14978
|
+
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 };
|
|
14785
14979
|
//# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map
|