@life-cockpit/angular-ui-kit 1.9.0 → 1.10.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.
|
@@ -879,11 +879,11 @@ class CardComponent {
|
|
|
879
879
|
}
|
|
880
880
|
}
|
|
881
881
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
882
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CardComponent, isStandalone: true, selector: "lc-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (title()) {\n <div class=\"card__header\">\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n <h3 class=\"card__title\">{{ title() }}</h3>\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div class=\"card__body\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;height:100%}.card{display:flex;flex-direction:column;height:100%;background-color:var(--color-surface);transition:all .15s ease-in-out}.card__body{flex:1;display:flex;flex-direction:column}.card-elevated{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.card-elevated:hover{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-outlined{border:1px solid var(--color-border)}.card-padding-none{padding:0}.card-padding-xs{padding
|
|
882
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CardComponent, isStandalone: true, selector: "lc-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (title()) {\n <div class=\"card__header\">\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n <h3 class=\"card__title\">{{ title() }}</h3>\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div class=\"card__body\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;height:100%}.card{display:flex;flex-direction:column;height:100%;background-color:var(--color-surface);transition:all .15s ease-in-out}.card__body{flex:1;display:flex;flex-direction:column}.card-elevated{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.card-elevated:hover{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-outlined{border:1px solid var(--color-border)}.card-padding-none{padding:0}.card-padding-xs{padding:var(--lc-density-padding-xs, var(--spacing-2))}.card-padding-sm{padding:var(--lc-density-padding-sm, var(--spacing-3))}.card-padding-md{padding:var(--lc-density-padding-md, var(--spacing-4))}.card-padding-lg{padding:var(--lc-density-padding-lg, var(--spacing-6))}.card-radius-none{border-radius:0}.card-radius-sm{border-radius:.25rem}.card-radius-md{border-radius:.5rem}.card-radius-lg{border-radius:1rem}.card-radius-full{border-radius:9999px}.card-clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.card-clickable:hover{background-color:var(--color-surface-hover)}.card-clickable:focus{outline:2px solid var(--color-primary);outline-offset:2px}.card-clickable:active{transform:scale(.98)}.card-selected{border:2px solid var(--color-primary);background-color:var(--color-surface-selected)}.card-selected.card-elevated{box-shadow:0 3px 6px #20849729,0 3px 6px #2084973b}.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, var(--spacing-4));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-border, #e5e7eb)}.card__header-left{flex:1;min-width:0}.card__title-row{display:flex;align-items:center;gap:.5rem}.card__title{margin:0;font-weight:600;font-size:1.125rem;line-height:1.3;color:var(--color-text-primary)}.card__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1}.card__badge--default{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-700, #374151)}.card__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.card__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.card__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.card__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.card__subtitle{margin:.25rem 0 0;font-size:.8125rem;color:var(--color-text-secondary);line-height:1.4}.card__header-action{flex-shrink:0;display:flex;align-items:center;gap:.5rem}:host ::ng-deep [card-header],:host ::ng-deep .card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-divider, #e5e7eb);font-weight:600;font-size:1.125rem;color:var(--color-text-primary)}:host ::ng-deep .card-content{color:var(--color-text-primary)}:host ::ng-deep [card-footer],:host ::ng-deep .card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-top:var(--lc-density-padding-md, var(--spacing-4));padding-top:var(--lc-density-padding-sm, var(--spacing-3));border-top:1px solid var(--color-divider, #e5e7eb);color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
883
883
|
}
|
|
884
884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CardComponent, decorators: [{
|
|
885
885
|
type: Component,
|
|
886
|
-
args: [{ selector: 'lc-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (title()) {\n <div class=\"card__header\">\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n <h3 class=\"card__title\">{{ title() }}</h3>\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div class=\"card__body\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;height:100%}.card{display:flex;flex-direction:column;height:100%;background-color:var(--color-surface);transition:all .15s ease-in-out}.card__body{flex:1;display:flex;flex-direction:column}.card-elevated{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.card-elevated:hover{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-outlined{border:1px solid var(--color-border)}.card-padding-none{padding:0}.card-padding-xs{padding
|
|
886
|
+
args: [{ selector: 'lc-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (title()) {\n <div class=\"card__header\">\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n <h3 class=\"card__title\">{{ title() }}</h3>\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div class=\"card__body\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;height:100%}.card{display:flex;flex-direction:column;height:100%;background-color:var(--color-surface);transition:all .15s ease-in-out}.card__body{flex:1;display:flex;flex-direction:column}.card-elevated{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.card-elevated:hover{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-outlined{border:1px solid var(--color-border)}.card-padding-none{padding:0}.card-padding-xs{padding:var(--lc-density-padding-xs, var(--spacing-2))}.card-padding-sm{padding:var(--lc-density-padding-sm, var(--spacing-3))}.card-padding-md{padding:var(--lc-density-padding-md, var(--spacing-4))}.card-padding-lg{padding:var(--lc-density-padding-lg, var(--spacing-6))}.card-radius-none{border-radius:0}.card-radius-sm{border-radius:.25rem}.card-radius-md{border-radius:.5rem}.card-radius-lg{border-radius:1rem}.card-radius-full{border-radius:9999px}.card-clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.card-clickable:hover{background-color:var(--color-surface-hover)}.card-clickable:focus{outline:2px solid var(--color-primary);outline-offset:2px}.card-clickable:active{transform:scale(.98)}.card-selected{border:2px solid var(--color-primary);background-color:var(--color-surface-selected)}.card-selected.card-elevated{box-shadow:0 3px 6px #20849729,0 3px 6px #2084973b}.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, var(--spacing-4));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-border, #e5e7eb)}.card__header-left{flex:1;min-width:0}.card__title-row{display:flex;align-items:center;gap:.5rem}.card__title{margin:0;font-weight:600;font-size:1.125rem;line-height:1.3;color:var(--color-text-primary)}.card__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1}.card__badge--default{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-700, #374151)}.card__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.card__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.card__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.card__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.card__subtitle{margin:.25rem 0 0;font-size:.8125rem;color:var(--color-text-secondary);line-height:1.4}.card__header-action{flex-shrink:0;display:flex;align-items:center;gap:.5rem}:host ::ng-deep [card-header],:host ::ng-deep .card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-divider, #e5e7eb);font-weight:600;font-size:1.125rem;color:var(--color-text-primary)}:host ::ng-deep .card-content{color:var(--color-text-primary)}:host ::ng-deep [card-footer],:host ::ng-deep .card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-top:var(--lc-density-padding-md, var(--spacing-4));padding-top:var(--lc-density-padding-sm, var(--spacing-3));border-top:1px solid var(--color-divider, #e5e7eb);color:var(--color-text-secondary)}\n"] }]
|
|
887
887
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeVariant", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], handleKeydown: [{
|
|
888
888
|
type: HostListener,
|
|
889
889
|
args: ['keydown', ['$event']]
|
|
@@ -1158,11 +1158,11 @@ class MenuComponent {
|
|
|
1158
1158
|
}
|
|
1159
1159
|
}
|
|
1160
1160
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1161
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MenuComponent, isStandalone: true, selector: "lc-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: "<div class=\"lc-menu\">\n <!-- Trigger slot -->\n <div class=\"lc-menu__trigger\">\n <ng-content select=\"[trigger]\" />\n </div>\n\n <!-- Dropdown menu -->\n @if (isOpen()) {\n <div \n class=\"lc-menu__dropdown\"\n [class.lc-menu__dropdown--bottom-left]=\"position() === 'bottom-left'\"\n [class.lc-menu__dropdown--bottom-right]=\"position() === 'bottom-right'\"\n [class.lc-menu__dropdown--top-left]=\"position() === 'top-left'\"\n [class.lc-menu__dropdown--top-right]=\"position() === 'top-right'\"\n [class.lc-menu__dropdown--sm]=\"size() === 'sm'\"\n [class.lc-menu__dropdown--lg]=\"size() === 'lg'\"\n [style.min-width]=\"minWidth()\"\n >\n <!-- Optional header slot -->\n <ng-content select=\"[header]\" />\n\n <!-- Menu items -->\n @for (item of items(); track item.id) {\n @if (item.href) {\n <!-- Link item -->\n <a\n [href]=\"item.href\"\n [target]=\"item.target || '_self'\"\n [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n class=\"lc-menu__item\"\n [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n [class.lc-menu__item--disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\"\n >\n @if (item.icon) {\n <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n }\n <span class=\"lc-menu__item-content\">\n <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n @if (item.metadata?.subtitle) {\n <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n }\n </span>\n @if (item.metadata?.badge) {\n <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n }\n </a>\n } @else {\n <!-- Button item -->\n <button\n type=\"button\"\n class=\"lc-menu__item\"\n [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n [class.lc-menu__item--disabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\"\n >\n @if (item.icon) {\n <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n }\n <span class=\"lc-menu__item-content\">\n <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n @if (item.metadata?.subtitle) {\n <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n }\n </span>\n @if (item.metadata?.badge) {\n <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n }\n </button>\n }\n\n @if (item.dividerAfter) {\n <hr class=\"lc-menu__divider\" />\n }\n }\n\n <!-- Optional footer slot -->\n <ng-content select=\"[footer]\" />\n </div>\n }\n</div>\n", styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-neutral-0, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--radius-lg, .5rem);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1));padding:var(--spacing-2
|
|
1161
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MenuComponent, isStandalone: true, selector: "lc-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: "<div class=\"lc-menu\">\n <!-- Trigger slot -->\n <div class=\"lc-menu__trigger\">\n <ng-content select=\"[trigger]\" />\n </div>\n\n <!-- Dropdown menu -->\n @if (isOpen()) {\n <div \n class=\"lc-menu__dropdown\"\n [class.lc-menu__dropdown--bottom-left]=\"position() === 'bottom-left'\"\n [class.lc-menu__dropdown--bottom-right]=\"position() === 'bottom-right'\"\n [class.lc-menu__dropdown--top-left]=\"position() === 'top-left'\"\n [class.lc-menu__dropdown--top-right]=\"position() === 'top-right'\"\n [class.lc-menu__dropdown--sm]=\"size() === 'sm'\"\n [class.lc-menu__dropdown--lg]=\"size() === 'lg'\"\n [style.min-width]=\"minWidth()\"\n >\n <!-- Optional header slot -->\n <ng-content select=\"[header]\" />\n\n <!-- Menu items -->\n @for (item of items(); track item.id) {\n @if (item.href) {\n <!-- Link item -->\n <a\n [href]=\"item.href\"\n [target]=\"item.target || '_self'\"\n [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n class=\"lc-menu__item\"\n [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n [class.lc-menu__item--disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\"\n >\n @if (item.icon) {\n <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n }\n <span class=\"lc-menu__item-content\">\n <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n @if (item.metadata?.subtitle) {\n <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n }\n </span>\n @if (item.metadata?.badge) {\n <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n }\n </a>\n } @else {\n <!-- Button item -->\n <button\n type=\"button\"\n class=\"lc-menu__item\"\n [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n [class.lc-menu__item--disabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\"\n >\n @if (item.icon) {\n <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n }\n <span class=\"lc-menu__item-content\">\n <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n @if (item.metadata?.subtitle) {\n <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n }\n </span>\n @if (item.metadata?.badge) {\n <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n }\n </button>\n }\n\n @if (item.dividerAfter) {\n <hr class=\"lc-menu__divider\" />\n }\n }\n\n <!-- Optional footer slot -->\n <ng-content select=\"[footer]\" />\n </div>\n }\n</div>\n", styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-neutral-0, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--radius-lg, .5rem);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1));padding:var(--lc-density-padding-xs, var(--spacing-2)) 0;z-index:9999;animation:slideDown .15s ease-out}.lc-menu__dropdown--bottom-left{top:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--bottom-right{top:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--top-left{bottom:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--top-right{bottom:calc(100% + var(--spacing-2));right:0}.lc-menu__item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));background:transparent;border:none;text-align:left;text-decoration:none;color:var(--color-neutral-900);font-size:var(--font-size-base);font-family:var(--font-family-base);cursor:pointer;transition:background-color .2s ease}.lc-menu__item:hover:not(.lc-menu__item--disabled){background-color:var(--color-neutral-100)}.lc-menu__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;background-color:var(--color-neutral-100)}.lc-menu__item--danger{color:var(--color-danger-600)}.lc-menu__item--danger:hover:not(.lc-menu__item--danger--disabled){background-color:var(--color-danger-50)}.lc-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-menu__item-content{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));flex:1}.lc-menu__item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.lc-menu__item-subtitle{font-size:var(--font-size-sm);color:var(--color-neutral-600);line-height:var(--line-height-tight)}.lc-menu__item-badge{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);line-height:1}.lc-menu__divider{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-neutral-200)}.lc-menu__dropdown--sm{padding:var(--spacing-1, .25rem) 0}.lc-menu__dropdown--sm .lc-menu__item{gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-label{font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-subtitle{font-size:var(--font-size-xs)}.lc-menu__dropdown--sm .lc-menu__item-badge{font-size:.625rem;padding:1px var(--spacing-1)}.lc-menu__dropdown--sm .lc-menu__divider{margin:var(--spacing-1) 0}.lc-menu__dropdown--lg .lc-menu__item{gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--font-size-lg)}.lc-menu__dropdown--lg .lc-menu__item-label{font-size:var(--font-size-lg)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host-context(.dark) .lc-menu__dropdown{background-color:#27272a!important;border-color:#3f3f46!important}:host-context(.dark) .lc-menu__item{color:#f5f5f5}:host-context(.dark) .lc-menu__item:hover:not(:host-context(.dark) .lc-menu__item--disabled){background-color:#3f3f46}:host-context(.dark) .lc-menu__item:focus-visible{background-color:#3f3f46}:host-context(.dark) .lc-menu__item--danger{color:#f87171}:host-context(.dark) .lc-menu__item--danger:hover:not(:host-context(.dark) .lc-menu__item--danger--disabled){background-color:#450a0a}:host-context(.dark) .lc-menu__item-subtitle{color:#a1a1aa}:host-context(.dark) .lc-menu__divider{border-top-color:#3f3f46}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1162
1162
|
}
|
|
1163
1163
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MenuComponent, decorators: [{
|
|
1164
1164
|
type: Component,
|
|
1165
|
-
args: [{ selector: 'lc-menu', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-menu\">\n <!-- Trigger slot -->\n <div class=\"lc-menu__trigger\">\n <ng-content select=\"[trigger]\" />\n </div>\n\n <!-- Dropdown menu -->\n @if (isOpen()) {\n <div \n class=\"lc-menu__dropdown\"\n [class.lc-menu__dropdown--bottom-left]=\"position() === 'bottom-left'\"\n [class.lc-menu__dropdown--bottom-right]=\"position() === 'bottom-right'\"\n [class.lc-menu__dropdown--top-left]=\"position() === 'top-left'\"\n [class.lc-menu__dropdown--top-right]=\"position() === 'top-right'\"\n [class.lc-menu__dropdown--sm]=\"size() === 'sm'\"\n [class.lc-menu__dropdown--lg]=\"size() === 'lg'\"\n [style.min-width]=\"minWidth()\"\n >\n <!-- Optional header slot -->\n <ng-content select=\"[header]\" />\n\n <!-- Menu items -->\n @for (item of items(); track item.id) {\n @if (item.href) {\n <!-- Link item -->\n <a\n [href]=\"item.href\"\n [target]=\"item.target || '_self'\"\n [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n class=\"lc-menu__item\"\n [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n [class.lc-menu__item--disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\"\n >\n @if (item.icon) {\n <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n }\n <span class=\"lc-menu__item-content\">\n <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n @if (item.metadata?.subtitle) {\n <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n }\n </span>\n @if (item.metadata?.badge) {\n <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n }\n </a>\n } @else {\n <!-- Button item -->\n <button\n type=\"button\"\n class=\"lc-menu__item\"\n [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n [class.lc-menu__item--disabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\"\n >\n @if (item.icon) {\n <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n }\n <span class=\"lc-menu__item-content\">\n <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n @if (item.metadata?.subtitle) {\n <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n }\n </span>\n @if (item.metadata?.badge) {\n <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n }\n </button>\n }\n\n @if (item.dividerAfter) {\n <hr class=\"lc-menu__divider\" />\n }\n }\n\n <!-- Optional footer slot -->\n <ng-content select=\"[footer]\" />\n </div>\n }\n</div>\n", styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-neutral-0, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--radius-lg, .5rem);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1));padding:var(--spacing-2
|
|
1165
|
+
args: [{ selector: 'lc-menu', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-menu\">\n <!-- Trigger slot -->\n <div class=\"lc-menu__trigger\">\n <ng-content select=\"[trigger]\" />\n </div>\n\n <!-- Dropdown menu -->\n @if (isOpen()) {\n <div \n class=\"lc-menu__dropdown\"\n [class.lc-menu__dropdown--bottom-left]=\"position() === 'bottom-left'\"\n [class.lc-menu__dropdown--bottom-right]=\"position() === 'bottom-right'\"\n [class.lc-menu__dropdown--top-left]=\"position() === 'top-left'\"\n [class.lc-menu__dropdown--top-right]=\"position() === 'top-right'\"\n [class.lc-menu__dropdown--sm]=\"size() === 'sm'\"\n [class.lc-menu__dropdown--lg]=\"size() === 'lg'\"\n [style.min-width]=\"minWidth()\"\n >\n <!-- Optional header slot -->\n <ng-content select=\"[header]\" />\n\n <!-- Menu items -->\n @for (item of items(); track item.id) {\n @if (item.href) {\n <!-- Link item -->\n <a\n [href]=\"item.href\"\n [target]=\"item.target || '_self'\"\n [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n class=\"lc-menu__item\"\n [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n [class.lc-menu__item--disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\"\n >\n @if (item.icon) {\n <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n }\n <span class=\"lc-menu__item-content\">\n <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n @if (item.metadata?.subtitle) {\n <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n }\n </span>\n @if (item.metadata?.badge) {\n <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n }\n </a>\n } @else {\n <!-- Button item -->\n <button\n type=\"button\"\n class=\"lc-menu__item\"\n [class.lc-menu__item--danger]=\"item.variant === 'danger'\"\n [class.lc-menu__item--disabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\"\n >\n @if (item.icon) {\n <lc-icon [name]=\"item.icon\" [size]=\"item.iconSize || 'sm'\" />\n }\n <span class=\"lc-menu__item-content\">\n <span class=\"lc-menu__item-label\">{{ item.label }}</span>\n @if (item.metadata?.subtitle) {\n <span class=\"lc-menu__item-subtitle\">{{ item.metadata?.subtitle }}</span>\n }\n </span>\n @if (item.metadata?.badge) {\n <span class=\"lc-menu__item-badge\">{{ item.metadata?.badge }}</span>\n }\n </button>\n }\n\n @if (item.dividerAfter) {\n <hr class=\"lc-menu__divider\" />\n }\n }\n\n <!-- Optional footer slot -->\n <ng-content select=\"[footer]\" />\n </div>\n }\n</div>\n", styles: [".lc-menu{position:relative;display:inline-block}.lc-menu__trigger{display:inline-block}.lc-menu__dropdown{position:absolute;background-color:var(--color-neutral-0, #ffffff);border:1px solid var(--color-neutral-200, #e5e7eb);border-radius:var(--radius-lg, .5rem);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1));padding:var(--lc-density-padding-xs, var(--spacing-2)) 0;z-index:9999;animation:slideDown .15s ease-out}.lc-menu__dropdown--bottom-left{top:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--bottom-right{top:calc(100% + var(--spacing-2));right:0}.lc-menu__dropdown--top-left{bottom:calc(100% + var(--spacing-2));left:0}.lc-menu__dropdown--top-right{bottom:calc(100% + var(--spacing-2));right:0}.lc-menu__item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));background:transparent;border:none;text-align:left;text-decoration:none;color:var(--color-neutral-900);font-size:var(--font-size-base);font-family:var(--font-family-base);cursor:pointer;transition:background-color .2s ease}.lc-menu__item:hover:not(.lc-menu__item--disabled){background-color:var(--color-neutral-100)}.lc-menu__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px;background-color:var(--color-neutral-100)}.lc-menu__item--danger{color:var(--color-danger-600)}.lc-menu__item--danger:hover:not(.lc-menu__item--danger--disabled){background-color:var(--color-danger-50)}.lc-menu__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-menu__item-content{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));flex:1}.lc-menu__item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}.lc-menu__item-subtitle{font-size:var(--font-size-sm);color:var(--color-neutral-600);line-height:var(--line-height-tight)}.lc-menu__item-badge{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);line-height:1}.lc-menu__divider{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-neutral-200)}.lc-menu__dropdown--sm{padding:var(--spacing-1, .25rem) 0}.lc-menu__dropdown--sm .lc-menu__item{gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-label{font-size:var(--font-size-sm)}.lc-menu__dropdown--sm .lc-menu__item-subtitle{font-size:var(--font-size-xs)}.lc-menu__dropdown--sm .lc-menu__item-badge{font-size:.625rem;padding:1px var(--spacing-1)}.lc-menu__dropdown--sm .lc-menu__divider{margin:var(--spacing-1) 0}.lc-menu__dropdown--lg .lc-menu__item{gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--font-size-lg)}.lc-menu__dropdown--lg .lc-menu__item-label{font-size:var(--font-size-lg)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host-context(.dark) .lc-menu__dropdown{background-color:#27272a!important;border-color:#3f3f46!important}:host-context(.dark) .lc-menu__item{color:#f5f5f5}:host-context(.dark) .lc-menu__item:hover:not(:host-context(.dark) .lc-menu__item--disabled){background-color:#3f3f46}:host-context(.dark) .lc-menu__item:focus-visible{background-color:#3f3f46}:host-context(.dark) .lc-menu__item--danger{color:#f87171}:host-context(.dark) .lc-menu__item--danger:hover:not(:host-context(.dark) .lc-menu__item--danger--disabled){background-color:#450a0a}:host-context(.dark) .lc-menu__item-subtitle{color:#a1a1aa}:host-context(.dark) .lc-menu__divider{border-top-color:#3f3f46}\n"] }]
|
|
1166
1166
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], closed: [{ type: i0.Output, args: ["closed"] }], onDocumentClick: [{
|
|
1167
1167
|
type: HostListener,
|
|
1168
1168
|
args: ['document:click', ['$event']]
|
|
@@ -1373,7 +1373,7 @@ class InputComponent {
|
|
|
1373
1373
|
useExisting: forwardRef(() => InputComponent),
|
|
1374
1374
|
multi: true,
|
|
1375
1375
|
},
|
|
1376
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId\" class=\"input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-indicator\" aria-label=\"required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"input-container\"\n [class.input-xs]=\"size() === 'xs'\"\n [class.input-sm]=\"size() === 'sm'\"\n [class.input-md]=\"size() === 'md'\"\n [class.input-lg]=\"size() === 'lg'\"\n [class.input-error]=\"hasError\"\n [class.input-disabled]=\"isDisabled\"\n [class.input-readonly]=\"readonly()\"\n >\n <!-- Icon Before -->\n @if (iconBefore()) {\n <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n\n <!-- Input Element -->\n <input\n #inputRef\n [id]=\"inputId\"\n [type]=\"type()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-required]=\"required() || undefined\"\n [attr.aria-invalid]=\"hasError || undefined\"\n [attr.aria-describedby]=\"\n (error() ? inputId + '-error' : '') + (helperText() ? ' ' + inputId + '-helper' : '')\n \"\n class=\"input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n <!-- Icon After -->\n @if (iconAfter()) {\n <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n </div>\n\n <!-- Helper Text / Error Message / Character Count -->\n @if (error() || helperText() || (showCharCount() && maxLength())) {\n <div class=\"input-footer\">\n <!-- Error Message -->\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"input-error\" role=\"alert\">\n {{ error() }}\n </p>\n }\n\n <!-- Helper Text -->\n @if (helperText() && !error()) {\n <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n {{ helperText() }}\n </p>\n }\n\n <!-- Character Count -->\n @if (showCharCount() && maxLength()) {\n <p class=\"char-count\" aria-live=\"polite\">\n {{ charCount }} / {{ maxLength() }}\n </p>\n }\n </div>\n }\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-1);width:100%}.input-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.input-label .required-indicator{color:var(--color-error-600);margin-left:var(--spacing-0-5)}.input-container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease)}.input-container:focus-within{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.input-container.input-error{border-color:var(--color-error-600)}.input-container.input-error:focus-within{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.input-container.input-disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.input-container.input-readonly{background-color:var(--color-neutral-50);border-color:var(--color-border)}.input-field{flex:1;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:transparent;border:none;outline:none}.input-field::placeholder{color:var(--color-text-secondary)}.input-field:disabled{cursor:not-allowed}.input-field:read-only{cursor:default}.input-field[type=number]::-webkit-inner-spin-button,.input-field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);pointer-events:none}.input-icon .icon{width:1.25rem;height:1.25rem}.input-icon.input-icon-before{margin-left:var(--spacing-3);margin-right:var(--spacing-2)}.input-icon.input-icon-after{margin-left:var(--spacing-2);margin-right:var(--spacing-3)}.input-xs{height:var(--size-interactive-xs-height)}.input-xs .input-field{padding:var(--size-interactive-xs-padding);font-size:var(--size-interactive-xs-font-size)}.input-xs .icon{width:1rem;height:1rem}.input-sm{height:var(--size-interactive-sm-height)}.input-sm .input-field{padding:var(--size-interactive-sm-padding);font-size:var(--size-interactive-sm-font-size)}.input-md{height:var(--size-interactive-md-height)}.input-md .input-field{padding:var(--size-interactive-md-padding);font-size:var(--size-interactive-md-font-size)}.input-lg{height:var(--size-interactive-lg-height)}.input-lg .input-field{padding:var(--size-interactive-lg-padding);font-size:var(--size-interactive-lg-font-size)}.input-lg .icon{width:1.5rem;height:1.5rem}.input-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-2);min-height:1.25rem}.input-error{flex:1;font-size:var(--font-size-xs);color:var(--color-error-600);margin:0}.input-helper{flex:1;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.char-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;margin:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1376
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId\" class=\"input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-indicator\" aria-label=\"required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"input-container\"\n [class.input-xs]=\"size() === 'xs'\"\n [class.input-sm]=\"size() === 'sm'\"\n [class.input-md]=\"size() === 'md'\"\n [class.input-lg]=\"size() === 'lg'\"\n [class.input-error]=\"hasError\"\n [class.input-disabled]=\"isDisabled\"\n [class.input-readonly]=\"readonly()\"\n >\n <!-- Icon Before -->\n @if (iconBefore()) {\n <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n\n <!-- Input Element -->\n <input\n #inputRef\n [id]=\"inputId\"\n [type]=\"type()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-required]=\"required() || undefined\"\n [attr.aria-invalid]=\"hasError || undefined\"\n [attr.aria-describedby]=\"\n (error() ? inputId + '-error' : '') + (helperText() ? ' ' + inputId + '-helper' : '')\n \"\n class=\"input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n <!-- Icon After -->\n @if (iconAfter()) {\n <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n </div>\n\n <!-- Helper Text / Error Message / Character Count -->\n @if (error() || helperText() || (showCharCount() && maxLength())) {\n <div class=\"input-footer\">\n <!-- Error Message -->\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"input-error\" role=\"alert\">\n {{ error() }}\n </p>\n }\n\n <!-- Helper Text -->\n @if (helperText() && !error()) {\n <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n {{ helperText() }}\n </p>\n }\n\n <!-- Character Count -->\n @if (showCharCount() && maxLength()) {\n <p class=\"char-count\" aria-live=\"polite\">\n {{ charCount }} / {{ maxLength() }}\n </p>\n }\n </div>\n }\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%}.input-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.input-label .required-indicator{color:var(--color-error-600);margin-left:var(--spacing-0-5)}.input-container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease)}.input-container:focus-within{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.input-container.input-error{border-color:var(--color-error-600)}.input-container.input-error:focus-within{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.input-container.input-disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.input-container.input-readonly{background-color:var(--color-neutral-50);border-color:var(--color-border)}.input-field{flex:1;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:transparent;border:none;outline:none}.input-field::placeholder{color:var(--color-text-secondary)}.input-field:disabled{cursor:not-allowed}.input-field:read-only{cursor:default}.input-field[type=number]::-webkit-inner-spin-button,.input-field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);pointer-events:none}.input-icon .icon{width:1.25rem;height:1.25rem}.input-icon.input-icon-before{margin-left:var(--spacing-3);margin-right:var(--spacing-2)}.input-icon.input-icon-after{margin-left:var(--spacing-2);margin-right:var(--spacing-3)}.input-xs{height:var(--size-interactive-xs-height)}.input-xs .input-field{padding:var(--size-interactive-xs-padding);font-size:var(--size-interactive-xs-font-size)}.input-xs .icon{width:1rem;height:1rem}.input-sm{height:var(--size-interactive-sm-height)}.input-sm .input-field{padding:var(--size-interactive-sm-padding);font-size:var(--size-interactive-sm-font-size)}.input-md{height:var(--size-interactive-md-height)}.input-md .input-field{padding:var(--size-interactive-md-padding);font-size:var(--size-interactive-md-font-size)}.input-lg{height:var(--size-interactive-lg-height)}.input-lg .input-field{padding:var(--size-interactive-lg-padding);font-size:var(--size-interactive-lg-font-size)}.input-lg .icon{width:1.5rem;height:1.5rem}.input-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:1.25rem}.input-error{flex:1;font-size:var(--font-size-xs);color:var(--color-error-600);margin:0}.input-helper{flex:1;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.char-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;margin:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1377
1377
|
}
|
|
1378
1378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: InputComponent, decorators: [{
|
|
1379
1379
|
type: Component,
|
|
@@ -1383,7 +1383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1383
1383
|
useExisting: forwardRef(() => InputComponent),
|
|
1384
1384
|
multi: true,
|
|
1385
1385
|
},
|
|
1386
|
-
], template: "<div class=\"input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId\" class=\"input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-indicator\" aria-label=\"required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"input-container\"\n [class.input-xs]=\"size() === 'xs'\"\n [class.input-sm]=\"size() === 'sm'\"\n [class.input-md]=\"size() === 'md'\"\n [class.input-lg]=\"size() === 'lg'\"\n [class.input-error]=\"hasError\"\n [class.input-disabled]=\"isDisabled\"\n [class.input-readonly]=\"readonly()\"\n >\n <!-- Icon Before -->\n @if (iconBefore()) {\n <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n\n <!-- Input Element -->\n <input\n #inputRef\n [id]=\"inputId\"\n [type]=\"type()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-required]=\"required() || undefined\"\n [attr.aria-invalid]=\"hasError || undefined\"\n [attr.aria-describedby]=\"\n (error() ? inputId + '-error' : '') + (helperText() ? ' ' + inputId + '-helper' : '')\n \"\n class=\"input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n <!-- Icon After -->\n @if (iconAfter()) {\n <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n </div>\n\n <!-- Helper Text / Error Message / Character Count -->\n @if (error() || helperText() || (showCharCount() && maxLength())) {\n <div class=\"input-footer\">\n <!-- Error Message -->\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"input-error\" role=\"alert\">\n {{ error() }}\n </p>\n }\n\n <!-- Helper Text -->\n @if (helperText() && !error()) {\n <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n {{ helperText() }}\n </p>\n }\n\n <!-- Character Count -->\n @if (showCharCount() && maxLength()) {\n <p class=\"char-count\" aria-live=\"polite\">\n {{ charCount }} / {{ maxLength() }}\n </p>\n }\n </div>\n }\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-1);width:100%}.input-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.input-label .required-indicator{color:var(--color-error-600);margin-left:var(--spacing-0-5)}.input-container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease)}.input-container:focus-within{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.input-container.input-error{border-color:var(--color-error-600)}.input-container.input-error:focus-within{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.input-container.input-disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.input-container.input-readonly{background-color:var(--color-neutral-50);border-color:var(--color-border)}.input-field{flex:1;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:transparent;border:none;outline:none}.input-field::placeholder{color:var(--color-text-secondary)}.input-field:disabled{cursor:not-allowed}.input-field:read-only{cursor:default}.input-field[type=number]::-webkit-inner-spin-button,.input-field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);pointer-events:none}.input-icon .icon{width:1.25rem;height:1.25rem}.input-icon.input-icon-before{margin-left:var(--spacing-3);margin-right:var(--spacing-2)}.input-icon.input-icon-after{margin-left:var(--spacing-2);margin-right:var(--spacing-3)}.input-xs{height:var(--size-interactive-xs-height)}.input-xs .input-field{padding:var(--size-interactive-xs-padding);font-size:var(--size-interactive-xs-font-size)}.input-xs .icon{width:1rem;height:1rem}.input-sm{height:var(--size-interactive-sm-height)}.input-sm .input-field{padding:var(--size-interactive-sm-padding);font-size:var(--size-interactive-sm-font-size)}.input-md{height:var(--size-interactive-md-height)}.input-md .input-field{padding:var(--size-interactive-md-padding);font-size:var(--size-interactive-md-font-size)}.input-lg{height:var(--size-interactive-lg-height)}.input-lg .input-field{padding:var(--size-interactive-lg-padding);font-size:var(--size-interactive-lg-font-size)}.input-lg .icon{width:1.5rem;height:1.5rem}.input-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-2);min-height:1.25rem}.input-error{flex:1;font-size:var(--font-size-xs);color:var(--color-error-600);margin:0}.input-helper{flex:1;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.char-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;margin:0}\n"] }]
|
|
1386
|
+
], template: "<div class=\"input-wrapper\">\n <!-- Label -->\n @if (label()) {\n <label [for]=\"inputId\" class=\"input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-indicator\" aria-label=\"required\">*</span>\n }\n </label>\n }\n\n <!-- Input Container -->\n <div\n class=\"input-container\"\n [class.input-xs]=\"size() === 'xs'\"\n [class.input-sm]=\"size() === 'sm'\"\n [class.input-md]=\"size() === 'md'\"\n [class.input-lg]=\"size() === 'lg'\"\n [class.input-error]=\"hasError\"\n [class.input-disabled]=\"isDisabled\"\n [class.input-readonly]=\"readonly()\"\n >\n <!-- Icon Before -->\n @if (iconBefore()) {\n <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n\n <!-- Input Element -->\n <input\n #inputRef\n [id]=\"inputId\"\n [type]=\"type()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-required]=\"required() || undefined\"\n [attr.aria-invalid]=\"hasError || undefined\"\n [attr.aria-describedby]=\"\n (error() ? inputId + '-error' : '') + (helperText() ? ' ' + inputId + '-helper' : '')\n \"\n class=\"input-field\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n <!-- Icon After -->\n @if (iconAfter()) {\n <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n </span>\n }\n </div>\n\n <!-- Helper Text / Error Message / Character Count -->\n @if (error() || helperText() || (showCharCount() && maxLength())) {\n <div class=\"input-footer\">\n <!-- Error Message -->\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"input-error\" role=\"alert\">\n {{ error() }}\n </p>\n }\n\n <!-- Helper Text -->\n @if (helperText() && !error()) {\n <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n {{ helperText() }}\n </p>\n }\n\n <!-- Character Count -->\n @if (showCharCount() && maxLength()) {\n <p class=\"char-count\" aria-live=\"polite\">\n {{ charCount }} / {{ maxLength() }}\n </p>\n }\n </div>\n }\n</div>\n", styles: [".input-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%}.input-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.input-label .required-indicator{color:var(--color-error-600);margin-left:var(--spacing-0-5)}.input-container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease)}.input-container:focus-within{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.input-container.input-error{border-color:var(--color-error-600)}.input-container.input-error:focus-within{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.input-container.input-disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.input-container.input-readonly{background-color:var(--color-neutral-50);border-color:var(--color-border)}.input-field{flex:1;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:transparent;border:none;outline:none}.input-field::placeholder{color:var(--color-text-secondary)}.input-field:disabled{cursor:not-allowed}.input-field:read-only{cursor:default}.input-field[type=number]::-webkit-inner-spin-button,.input-field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);pointer-events:none}.input-icon .icon{width:1.25rem;height:1.25rem}.input-icon.input-icon-before{margin-left:var(--spacing-3);margin-right:var(--spacing-2)}.input-icon.input-icon-after{margin-left:var(--spacing-2);margin-right:var(--spacing-3)}.input-xs{height:var(--size-interactive-xs-height)}.input-xs .input-field{padding:var(--size-interactive-xs-padding);font-size:var(--size-interactive-xs-font-size)}.input-xs .icon{width:1rem;height:1rem}.input-sm{height:var(--size-interactive-sm-height)}.input-sm .input-field{padding:var(--size-interactive-sm-padding);font-size:var(--size-interactive-sm-font-size)}.input-md{height:var(--size-interactive-md-height)}.input-md .input-field{padding:var(--size-interactive-md-padding);font-size:var(--size-interactive-md-font-size)}.input-lg{height:var(--size-interactive-lg-height)}.input-lg .input-field{padding:var(--size-interactive-lg-padding);font-size:var(--size-interactive-lg-font-size)}.input-lg .icon{width:1.5rem;height:1.5rem}.input-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:1.25rem}.input-error{flex:1;font-size:var(--font-size-xs);color:var(--color-error-600);margin:0}.input-helper{flex:1;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.char-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;margin:0}\n"] }]
|
|
1387
1387
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], iconBefore: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBefore", required: false }] }], iconAfter: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAfter", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCharCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharCount", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }], inputElement: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }] } });
|
|
1388
1388
|
|
|
1389
1389
|
let nextUniqueId$1 = 0;
|
|
@@ -1666,11 +1666,11 @@ class TypographyComponent {
|
|
|
1666
1666
|
return classes.join(' ');
|
|
1667
1667
|
}, ...(ngDevMode ? [{ debugName: "typographyClasses" }] : /* istanbul ignore next */ []));
|
|
1668
1668
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TypographyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1669
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TypographyComponent, isStandalone: true, selector: "lc-typography", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, noWrap: { classPropertyName: "noWrap", publicName: "noWrap", isSignal: true, isRequired: false, transformFunction: null }, lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, gutterBottom: { classPropertyName: "gutterBottom", publicName: "gutterBottom", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (elementTag()) {\n @case ('h1') {\n <h1 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h1>\n }\n @case ('h2') {\n <h2 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h2>\n }\n @case ('h3') {\n <h3 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h3>\n }\n @case ('h4') {\n <h4 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h4>\n }\n @case ('h5') {\n <h5 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h5>\n }\n @case ('h6') {\n <h6 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h6>\n }\n @case ('span') {\n <span [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </span>\n }\n @default {\n <p [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </p>\n }\n}\n", styles: [":host{display:block}.typography{margin:0;font-family:Open Sans,sans-serif;color:var(--color-text-primary);transition:color .15s ease-in-out}lc-typography h1.typography-h1,h1.typography-h1{font-size:4.5rem!important;line-height:5rem!important;font-weight:700!important;letter-spacing:-.02em}lc-typography h2.typography-h2,h2.typography-h2{font-size:3rem!important;line-height:4.5rem!important;font-weight:700!important;letter-spacing:-.01em}lc-typography h3.typography-h3,h3.typography-h3{font-size:2.5rem!important;line-height:4rem!important;font-weight:600!important;letter-spacing:-.01em}lc-typography h4.typography-h4,h4.typography-h4{font-size:2rem!important;line-height:3.5rem!important;font-weight:600!important}lc-typography h5.typography-h5,h5.typography-h5{font-size:1.5rem!important;line-height:3rem!important;font-weight:600!important}lc-typography h6.typography-h6,h6.typography-h6{font-size:1rem!important;line-height:2rem!important;font-weight:600!important}lc-typography p.typography-body1,p.typography-body1,.typography-body1{font-size:1rem!important;line-height:1.5rem!important;font-weight:400!important}lc-typography p.typography-body2,p.typography-body2,.typography-body2{font-size:.875rem!important;line-height:1rem!important;font-weight:400!important}lc-typography p.typography-subtitle1,p.typography-subtitle1,.typography-subtitle1{font-size:1.125rem!important;line-height:1.75rem!important;font-weight:600!important}lc-typography p.typography-subtitle2,p.typography-subtitle2,.typography-subtitle2{font-size:.875rem!important;line-height:1.25rem!important;font-weight:600!important}lc-typography span.typography-caption,span.typography-caption,.typography-caption{font-size:.75rem!important;line-height:1rem!important;font-weight:400!important}lc-typography span.typography-overline,span.typography-overline,.typography-overline{font-size:.625rem!important;line-height:1rem!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.1em}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-disabled{color:var(--color-text-disabled);opacity:.6}.text-error{color:var(--color-error)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-info{color:var(--color-info)}.font-regular{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-5{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-6{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.mb-4{margin-bottom:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1669
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TypographyComponent, isStandalone: true, selector: "lc-typography", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, noWrap: { classPropertyName: "noWrap", publicName: "noWrap", isSignal: true, isRequired: false, transformFunction: null }, lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, gutterBottom: { classPropertyName: "gutterBottom", publicName: "gutterBottom", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (elementTag()) {\n @case ('h1') {\n <h1 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h1>\n }\n @case ('h2') {\n <h2 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h2>\n }\n @case ('h3') {\n <h3 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h3>\n }\n @case ('h4') {\n <h4 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h4>\n }\n @case ('h5') {\n <h5 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h5>\n }\n @case ('h6') {\n <h6 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h6>\n }\n @case ('span') {\n <span [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </span>\n }\n @default {\n <p [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </p>\n }\n}\n", styles: [":host{display:block}.typography{margin:0;font-family:Open Sans,sans-serif;color:var(--color-text-primary);transition:color .15s ease-in-out}lc-typography h1.typography-h1,h1.typography-h1{font-size:4.5rem!important;line-height:5rem!important;font-weight:700!important;letter-spacing:-.02em}lc-typography h2.typography-h2,h2.typography-h2{font-size:3rem!important;line-height:4.5rem!important;font-weight:700!important;letter-spacing:-.01em}lc-typography h3.typography-h3,h3.typography-h3{font-size:2.5rem!important;line-height:4rem!important;font-weight:600!important;letter-spacing:-.01em}lc-typography h4.typography-h4,h4.typography-h4{font-size:2rem!important;line-height:3.5rem!important;font-weight:600!important}lc-typography h5.typography-h5,h5.typography-h5{font-size:1.5rem!important;line-height:3rem!important;font-weight:600!important}lc-typography h6.typography-h6,h6.typography-h6{font-size:1rem!important;line-height:2rem!important;font-weight:600!important}lc-typography p.typography-body1,p.typography-body1,.typography-body1{font-size:1rem!important;line-height:1.5rem!important;font-weight:400!important}lc-typography p.typography-body2,p.typography-body2,.typography-body2{font-size:.875rem!important;line-height:1rem!important;font-weight:400!important}lc-typography p.typography-subtitle1,p.typography-subtitle1,.typography-subtitle1{font-size:1.125rem!important;line-height:1.75rem!important;font-weight:600!important}lc-typography p.typography-subtitle2,p.typography-subtitle2,.typography-subtitle2{font-size:.875rem!important;line-height:1.25rem!important;font-weight:600!important}lc-typography span.typography-caption,span.typography-caption,.typography-caption{font-size:.75rem!important;line-height:1rem!important;font-weight:400!important}lc-typography span.typography-overline,span.typography-overline,.typography-overline{font-size:.625rem!important;line-height:1rem!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.1em}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-disabled{color:var(--color-text-disabled);opacity:.6}.text-error{color:var(--color-error)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-info{color:var(--color-info)}.font-regular{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-5{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-6{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.mb-4{margin-bottom:var(--lc-density-gap-md, 1rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1670
1670
|
}
|
|
1671
1671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TypographyComponent, decorators: [{
|
|
1672
1672
|
type: Component,
|
|
1673
|
-
args: [{ selector: 'lc-typography', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@switch (elementTag()) {\n @case ('h1') {\n <h1 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h1>\n }\n @case ('h2') {\n <h2 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h2>\n }\n @case ('h3') {\n <h3 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h3>\n }\n @case ('h4') {\n <h4 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h4>\n }\n @case ('h5') {\n <h5 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h5>\n }\n @case ('h6') {\n <h6 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h6>\n }\n @case ('span') {\n <span [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </span>\n }\n @default {\n <p [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </p>\n }\n}\n", styles: [":host{display:block}.typography{margin:0;font-family:Open Sans,sans-serif;color:var(--color-text-primary);transition:color .15s ease-in-out}lc-typography h1.typography-h1,h1.typography-h1{font-size:4.5rem!important;line-height:5rem!important;font-weight:700!important;letter-spacing:-.02em}lc-typography h2.typography-h2,h2.typography-h2{font-size:3rem!important;line-height:4.5rem!important;font-weight:700!important;letter-spacing:-.01em}lc-typography h3.typography-h3,h3.typography-h3{font-size:2.5rem!important;line-height:4rem!important;font-weight:600!important;letter-spacing:-.01em}lc-typography h4.typography-h4,h4.typography-h4{font-size:2rem!important;line-height:3.5rem!important;font-weight:600!important}lc-typography h5.typography-h5,h5.typography-h5{font-size:1.5rem!important;line-height:3rem!important;font-weight:600!important}lc-typography h6.typography-h6,h6.typography-h6{font-size:1rem!important;line-height:2rem!important;font-weight:600!important}lc-typography p.typography-body1,p.typography-body1,.typography-body1{font-size:1rem!important;line-height:1.5rem!important;font-weight:400!important}lc-typography p.typography-body2,p.typography-body2,.typography-body2{font-size:.875rem!important;line-height:1rem!important;font-weight:400!important}lc-typography p.typography-subtitle1,p.typography-subtitle1,.typography-subtitle1{font-size:1.125rem!important;line-height:1.75rem!important;font-weight:600!important}lc-typography p.typography-subtitle2,p.typography-subtitle2,.typography-subtitle2{font-size:.875rem!important;line-height:1.25rem!important;font-weight:600!important}lc-typography span.typography-caption,span.typography-caption,.typography-caption{font-size:.75rem!important;line-height:1rem!important;font-weight:400!important}lc-typography span.typography-overline,span.typography-overline,.typography-overline{font-size:.625rem!important;line-height:1rem!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.1em}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-disabled{color:var(--color-text-disabled);opacity:.6}.text-error{color:var(--color-error)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-info{color:var(--color-info)}.font-regular{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-5{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-6{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.mb-4{margin-bottom:1rem}\n"] }]
|
|
1673
|
+
args: [{ selector: 'lc-typography', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@switch (elementTag()) {\n @case ('h1') {\n <h1 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h1>\n }\n @case ('h2') {\n <h2 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h2>\n }\n @case ('h3') {\n <h3 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h3>\n }\n @case ('h4') {\n <h4 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h4>\n }\n @case ('h5') {\n <h5 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h5>\n }\n @case ('h6') {\n <h6 [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </h6>\n }\n @case ('span') {\n <span [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </span>\n }\n @default {\n <p [class]=\"typographyClasses()\">\n <ng-content></ng-content>\n </p>\n }\n}\n", styles: [":host{display:block}.typography{margin:0;font-family:Open Sans,sans-serif;color:var(--color-text-primary);transition:color .15s ease-in-out}lc-typography h1.typography-h1,h1.typography-h1{font-size:4.5rem!important;line-height:5rem!important;font-weight:700!important;letter-spacing:-.02em}lc-typography h2.typography-h2,h2.typography-h2{font-size:3rem!important;line-height:4.5rem!important;font-weight:700!important;letter-spacing:-.01em}lc-typography h3.typography-h3,h3.typography-h3{font-size:2.5rem!important;line-height:4rem!important;font-weight:600!important;letter-spacing:-.01em}lc-typography h4.typography-h4,h4.typography-h4{font-size:2rem!important;line-height:3.5rem!important;font-weight:600!important}lc-typography h5.typography-h5,h5.typography-h5{font-size:1.5rem!important;line-height:3rem!important;font-weight:600!important}lc-typography h6.typography-h6,h6.typography-h6{font-size:1rem!important;line-height:2rem!important;font-weight:600!important}lc-typography p.typography-body1,p.typography-body1,.typography-body1{font-size:1rem!important;line-height:1.5rem!important;font-weight:400!important}lc-typography p.typography-body2,p.typography-body2,.typography-body2{font-size:.875rem!important;line-height:1rem!important;font-weight:400!important}lc-typography p.typography-subtitle1,p.typography-subtitle1,.typography-subtitle1{font-size:1.125rem!important;line-height:1.75rem!important;font-weight:600!important}lc-typography p.typography-subtitle2,p.typography-subtitle2,.typography-subtitle2{font-size:.875rem!important;line-height:1.25rem!important;font-weight:600!important}lc-typography span.typography-caption,span.typography-caption,.typography-caption{font-size:.75rem!important;line-height:1rem!important;font-weight:400!important}lc-typography span.typography-overline,span.typography-overline,.typography-overline{font-size:.625rem!important;line-height:1rem!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.1em}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-disabled{color:var(--color-text-disabled);opacity:.6}.text-error{color:var(--color-error)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-info{color:var(--color-info)}.font-regular{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-5{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-6{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.mb-4{margin-bottom:var(--lc-density-gap-md, 1rem)}\n"] }]
|
|
1674
1674
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], noWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "noWrap", required: false }] }], lineClamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineClamp", required: false }] }], gutterBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterBottom", required: false }] }] } });
|
|
1675
1675
|
|
|
1676
1676
|
/**
|
|
@@ -2140,7 +2140,7 @@ class DatepickerComponent {
|
|
|
2140
2140
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
2141
2141
|
multi: true,
|
|
2142
2142
|
},
|
|
2143
|
-
], viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"lc-datepicker-wrapper\">\n <div class=\"lc-datepicker-input-wrapper\">\n <input\n #datepickerInput\n type=\"text\"\n [class]=\"datepickerClasses\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-required]=\"required ? 'true' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.readonly]=\"readonly\"\n [attr.disabled]=\"disabled ? true : null\"\n [attr.placeholder]=\"placeholder\"\n [value]=\"formattedDate()\"\n (input)=\"onInputChange(getInputValue($event))\"\n (click)=\"toggle()\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\"\n />\n <div class=\"lc-datepicker-icons\">\n @if (selectedDate() && !disabled && !readonly) {\n <button\n type=\"button\"\n class=\"lc-datepicker-clear\"\n (click)=\"clear(); $event.stopPropagation()\"\n aria-label=\"Clear date\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>\n </button>\n }\n <svg\n class=\"lc-datepicker-calendar-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n />\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n </div>\n\n <!-- Calendar Panel -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"onClickOutside()\"\n (detach)=\"close()\"\n >\n <div class=\"lc-datepicker-calendar\" [class.lc-datepicker-calendar--open]=\"isOpen()\">\n <!-- Calendar Header -->\n <div class=\"lc-datepicker-header\">\n <button\n type=\"button\"\n class=\"lc-datepicker-nav-button\"\n (click)=\"previousMonth()\"\n aria-label=\"Previous month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </button>\n \n <div class=\"lc-datepicker-month-year\">\n {{ currentMonthName() }} {{ currentYear() }}\n </div>\n \n <button\n type=\"button\"\n class=\"lc-datepicker-nav-button\"\n (click)=\"nextMonth()\"\n aria-label=\"Next month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </button>\n </div>\n\n <!-- Quick Actions -->\n <div class=\"lc-datepicker-quick-actions\">\n <button\n type=\"button\"\n class=\"lc-datepicker-today-button\"\n (click)=\"goToToday()\"\n >\n Today\n </button>\n </div>\n\n <!-- Weekday Headers -->\n <div class=\"lc-datepicker-weekdays\">\n @for (day of weekDays; track day) {\n <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n }\n </div>\n\n <!-- Calendar Days -->\n <div class=\"lc-datepicker-days\">\n @for (date of generateCalendarDays(); track date.getTime()) {\n <button\n type=\"button\"\n class=\"lc-datepicker-day\"\n [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n [class.lc-datepicker-day--today]=\"isToday(date)\"\n [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n [disabled]=\"isDateDisabled(date)\"\n (click)=\"selectDate(date)\"\n >\n {{ date.getDate() }}\n </button>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Helper/Error Text -->\n @if (error && errorMessage) {\n <div class=\"lc-datepicker__error\" role=\"alert\">\n {{ errorMessage }}\n </div>\n } @else if (helperText) {\n <div class=\"lc-datepicker__helper\">\n {{ helperText }}\n </div>\n }\n</div>\n", styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--spacing-1);width:100%;position:relative}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]){border-color:var(--color-primary-400)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-neutral-50);border-color:var(--color-border);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]){background-color:var(--color-neutral-200)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-neutral-200)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-neutral-100)}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker-calendar{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--spacing-4);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-lg);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-neutral-200)}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-neutral-100)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-surface);background-color:var(--color-primary-600)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-700)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2143
|
+
], viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"lc-datepicker-wrapper\">\n <div class=\"lc-datepicker-input-wrapper\">\n <input\n #datepickerInput\n type=\"text\"\n [class]=\"datepickerClasses\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-required]=\"required ? 'true' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.readonly]=\"readonly\"\n [attr.disabled]=\"disabled ? true : null\"\n [attr.placeholder]=\"placeholder\"\n [value]=\"formattedDate()\"\n (input)=\"onInputChange(getInputValue($event))\"\n (click)=\"toggle()\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\"\n />\n <div class=\"lc-datepicker-icons\">\n @if (selectedDate() && !disabled && !readonly) {\n <button\n type=\"button\"\n class=\"lc-datepicker-clear\"\n (click)=\"clear(); $event.stopPropagation()\"\n aria-label=\"Clear date\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>\n </button>\n }\n <svg\n class=\"lc-datepicker-calendar-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n />\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n </div>\n\n <!-- Calendar Panel -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"onClickOutside()\"\n (detach)=\"close()\"\n >\n <div class=\"lc-datepicker-calendar\" [class.lc-datepicker-calendar--open]=\"isOpen()\">\n <!-- Calendar Header -->\n <div class=\"lc-datepicker-header\">\n <button\n type=\"button\"\n class=\"lc-datepicker-nav-button\"\n (click)=\"previousMonth()\"\n aria-label=\"Previous month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </button>\n \n <div class=\"lc-datepicker-month-year\">\n {{ currentMonthName() }} {{ currentYear() }}\n </div>\n \n <button\n type=\"button\"\n class=\"lc-datepicker-nav-button\"\n (click)=\"nextMonth()\"\n aria-label=\"Next month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </button>\n </div>\n\n <!-- Quick Actions -->\n <div class=\"lc-datepicker-quick-actions\">\n <button\n type=\"button\"\n class=\"lc-datepicker-today-button\"\n (click)=\"goToToday()\"\n >\n Today\n </button>\n </div>\n\n <!-- Weekday Headers -->\n <div class=\"lc-datepicker-weekdays\">\n @for (day of weekDays; track day) {\n <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n }\n </div>\n\n <!-- Calendar Days -->\n <div class=\"lc-datepicker-days\">\n @for (date of generateCalendarDays(); track date.getTime()) {\n <button\n type=\"button\"\n class=\"lc-datepicker-day\"\n [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n [class.lc-datepicker-day--today]=\"isToday(date)\"\n [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n [disabled]=\"isDateDisabled(date)\"\n (click)=\"selectDate(date)\"\n >\n {{ date.getDate() }}\n </button>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Helper/Error Text -->\n @if (error && errorMessage) {\n <div class=\"lc-datepicker__error\" role=\"alert\">\n {{ errorMessage }}\n </div>\n } @else if (helperText) {\n <div class=\"lc-datepicker__helper\">\n {{ helperText }}\n </div>\n }\n</div>\n", styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]){border-color:var(--color-primary-400)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-neutral-50);border-color:var(--color-border);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]){background-color:var(--color-neutral-200)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-neutral-200)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-neutral-100)}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker-calendar{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-md, var(--spacing-4));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-lg);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-neutral-200)}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-neutral-100)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-surface);background-color:var(--color-primary-600)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-700)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2144
2144
|
}
|
|
2145
2145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
2146
2146
|
type: Component,
|
|
@@ -2150,7 +2150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
2150
2150
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
2151
2151
|
multi: true,
|
|
2152
2152
|
},
|
|
2153
|
-
], template: "<div class=\"lc-datepicker-wrapper\">\n <div class=\"lc-datepicker-input-wrapper\">\n <input\n #datepickerInput\n type=\"text\"\n [class]=\"datepickerClasses\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-required]=\"required ? 'true' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.readonly]=\"readonly\"\n [attr.disabled]=\"disabled ? true : null\"\n [attr.placeholder]=\"placeholder\"\n [value]=\"formattedDate()\"\n (input)=\"onInputChange(getInputValue($event))\"\n (click)=\"toggle()\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\"\n />\n <div class=\"lc-datepicker-icons\">\n @if (selectedDate() && !disabled && !readonly) {\n <button\n type=\"button\"\n class=\"lc-datepicker-clear\"\n (click)=\"clear(); $event.stopPropagation()\"\n aria-label=\"Clear date\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>\n </button>\n }\n <svg\n class=\"lc-datepicker-calendar-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n />\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n </div>\n\n <!-- Calendar Panel -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"onClickOutside()\"\n (detach)=\"close()\"\n >\n <div class=\"lc-datepicker-calendar\" [class.lc-datepicker-calendar--open]=\"isOpen()\">\n <!-- Calendar Header -->\n <div class=\"lc-datepicker-header\">\n <button\n type=\"button\"\n class=\"lc-datepicker-nav-button\"\n (click)=\"previousMonth()\"\n aria-label=\"Previous month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </button>\n \n <div class=\"lc-datepicker-month-year\">\n {{ currentMonthName() }} {{ currentYear() }}\n </div>\n \n <button\n type=\"button\"\n class=\"lc-datepicker-nav-button\"\n (click)=\"nextMonth()\"\n aria-label=\"Next month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </button>\n </div>\n\n <!-- Quick Actions -->\n <div class=\"lc-datepicker-quick-actions\">\n <button\n type=\"button\"\n class=\"lc-datepicker-today-button\"\n (click)=\"goToToday()\"\n >\n Today\n </button>\n </div>\n\n <!-- Weekday Headers -->\n <div class=\"lc-datepicker-weekdays\">\n @for (day of weekDays; track day) {\n <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n }\n </div>\n\n <!-- Calendar Days -->\n <div class=\"lc-datepicker-days\">\n @for (date of generateCalendarDays(); track date.getTime()) {\n <button\n type=\"button\"\n class=\"lc-datepicker-day\"\n [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n [class.lc-datepicker-day--today]=\"isToday(date)\"\n [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n [disabled]=\"isDateDisabled(date)\"\n (click)=\"selectDate(date)\"\n >\n {{ date.getDate() }}\n </button>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Helper/Error Text -->\n @if (error && errorMessage) {\n <div class=\"lc-datepicker__error\" role=\"alert\">\n {{ errorMessage }}\n </div>\n } @else if (helperText) {\n <div class=\"lc-datepicker__helper\">\n {{ helperText }}\n </div>\n }\n</div>\n", styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--spacing-1);width:100%;position:relative}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]){border-color:var(--color-primary-400)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-neutral-50);border-color:var(--color-border);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]){background-color:var(--color-neutral-200)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-neutral-200)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-neutral-100)}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker-calendar{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--spacing-4);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-lg);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-neutral-200)}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-neutral-100)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-surface);background-color:var(--color-primary-600)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-700)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"] }]
|
|
2153
|
+
], template: "<div class=\"lc-datepicker-wrapper\">\n <div class=\"lc-datepicker-input-wrapper\">\n <input\n #datepickerInput\n type=\"text\"\n [class]=\"datepickerClasses\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-required]=\"required ? 'true' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.readonly]=\"readonly\"\n [attr.disabled]=\"disabled ? true : null\"\n [attr.placeholder]=\"placeholder\"\n [value]=\"formattedDate()\"\n (input)=\"onInputChange(getInputValue($event))\"\n (click)=\"toggle()\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\"\n />\n <div class=\"lc-datepicker-icons\">\n @if (selectedDate() && !disabled && !readonly) {\n <button\n type=\"button\"\n class=\"lc-datepicker-clear\"\n (click)=\"clear(); $event.stopPropagation()\"\n aria-label=\"Clear date\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>\n </button>\n }\n <svg\n class=\"lc-datepicker-calendar-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z\"\n />\n <path\n fill-rule=\"evenodd\"\n d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n </div>\n\n <!-- Calendar Panel -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"datepickerInput\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"onClickOutside()\"\n (detach)=\"close()\"\n >\n <div class=\"lc-datepicker-calendar\" [class.lc-datepicker-calendar--open]=\"isOpen()\">\n <!-- Calendar Header -->\n <div class=\"lc-datepicker-header\">\n <button\n type=\"button\"\n class=\"lc-datepicker-nav-button\"\n (click)=\"previousMonth()\"\n aria-label=\"Previous month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </button>\n \n <div class=\"lc-datepicker-month-year\">\n {{ currentMonthName() }} {{ currentYear() }}\n </div>\n \n <button\n type=\"button\"\n class=\"lc-datepicker-nav-button\"\n (click)=\"nextMonth()\"\n aria-label=\"Next month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </button>\n </div>\n\n <!-- Quick Actions -->\n <div class=\"lc-datepicker-quick-actions\">\n <button\n type=\"button\"\n class=\"lc-datepicker-today-button\"\n (click)=\"goToToday()\"\n >\n Today\n </button>\n </div>\n\n <!-- Weekday Headers -->\n <div class=\"lc-datepicker-weekdays\">\n @for (day of weekDays; track day) {\n <div class=\"lc-datepicker-weekday\">{{ day }}</div>\n }\n </div>\n\n <!-- Calendar Days -->\n <div class=\"lc-datepicker-days\">\n @for (date of generateCalendarDays(); track date.getTime()) {\n <button\n type=\"button\"\n class=\"lc-datepicker-day\"\n [class.lc-datepicker-day--other-month]=\"!isCurrentMonth(date)\"\n [class.lc-datepicker-day--today]=\"isToday(date)\"\n [class.lc-datepicker-day--selected]=\"isSelectedDate(date)\"\n [class.lc-datepicker-day--disabled]=\"isDateDisabled(date)\"\n [disabled]=\"isDateDisabled(date)\"\n (click)=\"selectDate(date)\"\n >\n {{ date.getDate() }}\n </button>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Helper/Error Text -->\n @if (error && errorMessage) {\n <div class=\"lc-datepicker__error\" role=\"alert\">\n {{ errorMessage }}\n </div>\n } @else if (helperText) {\n <div class=\"lc-datepicker__helper\">\n {{ helperText }}\n </div>\n }\n</div>\n", styles: [".lc-datepicker-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-datepicker-input-wrapper{position:relative;width:100%}.lc-datepicker{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer}.lc-datepicker::placeholder{color:var(--color-text-secondary)}.lc-datepicker:hover:not(:disabled):not([readonly]){border-color:var(--color-primary-400)}.lc-datepicker:focus{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-datepicker:disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-datepicker[readonly]{background-color:var(--color-neutral-50);border-color:var(--color-border);cursor:default}.lc-datepicker.lc-datepicker--error{border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--error:focus{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-datepicker.lc-datepicker--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-xs-font-size)}.lc-datepicker.lc-datepicker--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-sm-font-size)}.lc-datepicker.lc-datepicker--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-14);font-size:var(--size-interactive-md-font-size)}.lc-datepicker.lc-datepicker--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-16);font-size:var(--size-interactive-lg-font-size)}.lc-datepicker.lc-datepicker--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]){background-color:var(--color-neutral-200)}.lc-datepicker.lc-datepicker--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-datepicker.lc-datepicker--filled:disabled{background-color:var(--color-neutral-200)}.lc-datepicker-icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:var(--spacing-1);pointer-events:none}.lc-datepicker-calendar-icon{width:1.25rem;height:1.25rem;color:var(--color-text-secondary)}.lc-datepicker-clear{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-clear:hover{color:var(--color-text-primary);background-color:var(--color-neutral-100)}.lc-datepicker-clear svg{width:1rem;height:1rem}.lc-datepicker-calendar{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-md, var(--spacing-4));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-lg);min-width:280px;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-datepicker-calendar.lc-datepicker-calendar--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-datepicker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-4)}.lc-datepicker-month-year{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-datepicker-nav-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-nav-button:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-datepicker-nav-button:active{background-color:var(--color-neutral-200)}.lc-datepicker-nav-button svg{width:1.25rem;height:1.25rem}.lc-datepicker-quick-actions{display:flex;justify-content:center;margin-bottom:var(--spacing-3)}.lc-datepicker-today-button{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary-600);background:none;border:1px solid var(--color-primary-200);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-today-button:hover{background-color:var(--color-primary-50);border-color:var(--color-primary-300)}.lc-datepicker-today-button:active{background-color:var(--color-primary-100)}.lc-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1);margin-bottom:var(--spacing-2)}.lc-datepicker-weekday{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-align:center;padding:var(--spacing-1)}.lc-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-1)}.lc-datepicker-day{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-datepicker-day:hover:not(:disabled){background-color:var(--color-neutral-100)}.lc-datepicker-day.lc-datepicker-day--other-month{color:var(--color-text-tertiary)}.lc-datepicker-day.lc-datepicker-day--today{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-datepicker-day.lc-datepicker-day--selected{font-weight:var(--font-weight-semibold);color:var(--color-surface);background-color:var(--color-primary-600)}.lc-datepicker-day.lc-datepicker-day--selected:hover{background-color:var(--color-primary-700)}.lc-datepicker-day.lc-datepicker-day--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-datepicker-day.lc-datepicker-day--disabled:hover{background:none}.lc-datepicker-day:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-datepicker__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-datepicker__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"] }]
|
|
2154
2154
|
}], propDecorators: { datepickerInput: [{
|
|
2155
2155
|
type: ViewChild,
|
|
2156
2156
|
args: ['datepickerInput', { static: false, read: ElementRef }]
|
|
@@ -2546,7 +2546,7 @@ class SelectComponent {
|
|
|
2546
2546
|
useExisting: forwardRef(() => SelectComponent),
|
|
2547
2547
|
multi: true,
|
|
2548
2548
|
},
|
|
2549
|
-
], viewQueries: [{ propertyName: "selectTrigger", first: true, predicate: ["selectTrigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"lc-select-wrapper\">\n <div\n #selectTrigger\n [class]=\"selectClasses\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-required]=\"required ? 'true' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n (click)=\"toggle()\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\"\n >\n <div class=\"lc-select__value\">\n <span [class.lc-select__placeholder]=\"!selectedLabel()\">\n {{ displayValue() }}\n </span>\n </div>\n\n <div class=\"lc-select__icons\">\n @if (loading) {\n <svg\n class=\"lc-select__spinner\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle\n class=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n ></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n } @else if (value() && !disabled && !multiple) {\n <button\n type=\"button\"\n class=\"lc-select__clear\"\n (click)=\"clear(); $event.stopPropagation()\"\n aria-label=\"Clear selection\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>\n </button>\n }\n\n <svg\n class=\"lc-select__chevron\"\n [class.lc-select__chevron--open]=\"isOpen()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectTrigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"onClickOutside()\"\n (detach)=\"close()\"\n >\n <div class=\"lc-select__dropdown\" [class.lc-select__dropdown--open]=\"isOpen()\">\n @if (searchable) {\n <div class=\"lc-select__search\">\n <input\n type=\"text\"\n class=\"lc-select__search-input\"\n placeholder=\"Search...\"\n [(ngModel)]=\"searchQuery\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div class=\"lc-select__options\">\n @if (filteredOptions().length === 0) {\n <div class=\"lc-select__option lc-select__option--no-results\">\n No options found\n </div>\n } @else {\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"lc-select__option\"\n [class.lc-select__option--selected]=\"isSelected(option)\"\n [class.lc-select__option--highlighted]=\"highlightedIndex() === i\"\n [class.lc-select__option--disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n >\n @if (multiple) {\n <input\n type=\"checkbox\"\n [checked]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n class=\"lc-select__checkbox\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n <span class=\"lc-select__option-label\">{{ option.label }}</span>\n @if (isSelected(option) && !multiple) {\n <svg\n class=\"lc-select__check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Helper/Error Text -->\n @if (error && errorMessage) {\n <div class=\"lc-select__error\" role=\"alert\">\n {{ errorMessage }}\n </div>\n } @else if (helperText) {\n <div class=\"lc-select__helper\">\n {{ helperText }}\n </div>\n }\n</div>\n", styles: [".lc-select-wrapper{display:flex;flex-direction:column;gap:var(--spacing-1);width:100%;position:relative}.lc-select{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-select:hover:not(.lc-select--disabled){border-color:var(--color-primary-400)}.lc-select:focus,.lc-select:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-select.lc-select--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-8);font-size:var(--size-interactive-xs-font-size)}.lc-select.lc-select--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-9);font-size:var(--size-interactive-sm-font-size)}.lc-select.lc-select--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-md-font-size)}.lc-select.lc-select--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-lg-font-size)}.lc-select.lc-select--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-select.lc-select--filled:hover:not(.lc-select--disabled){background-color:var(--color-neutral-200)}.lc-select.lc-select--filled:focus,.lc-select.lc-select--filled:focus-visible{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-select.lc-select--error{border-color:var(--color-error-600)}.lc-select.lc-select--error:focus,.lc-select.lc-select--error:focus-visible{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-select.lc-select--disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-select__placeholder{color:var(--color-text-secondary)}.lc-select__icons{position:absolute;right:var(--spacing-3);display:flex;align-items:center;gap:var(--spacing-1);flex-shrink:0;pointer-events:none}.lc-select__icons button{pointer-events:auto}.lc-select__spinner{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lc-select__clear{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__clear:hover{color:var(--color-text-primary);background-color:var(--color-neutral-100)}.lc-select__clear svg{width:1rem;height:1rem}.lc-select__chevron{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);transition:transform var(--animation-duration-base) var(--animation-timing-ease)}.lc-select__chevron.lc-select__chevron--open{transform:rotate(180deg)}.lc-select__dropdown{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--spacing-2);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-lg);min-width:200px;max-height:320px;overflow-y:auto;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-select__dropdown.lc-select__dropdown--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-select__dropdown::-webkit-scrollbar{width:8px}.lc-select__dropdown::-webkit-scrollbar-track{background:var(--color-neutral-100);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb{background:var(--color-neutral-400);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-500)}.lc-select__search{padding:var(--spacing-2);border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-2)}.lc-select__search-input{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);outline:none;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__search-input:focus{border-color:var(--color-primary-500)}.lc-select__search-input::placeholder{color:var(--color-text-secondary)}.lc-select__options{list-style:none;padding:0;margin:0}.lc-select__option{display:flex;align-items:center;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease);text-align:left;width:100%}.lc-select__option:hover:not(.lc-select__option--disabled){background-color:var(--color-neutral-100)}.lc-select__option.lc-select__option--selected{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-select__option.lc-select__option--focused{background-color:var(--color-neutral-100)}.lc-select__option.lc-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-select__option-label{flex:1}.lc-select__check{width:1rem;height:1rem;margin-left:var(--spacing-2);flex-shrink:0;color:var(--color-primary-600)}.lc-select__checkbox{margin-right:var(--spacing-2);width:1rem;height:1rem}.lc-select__empty{padding:var(--spacing-4);text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.lc-select__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-select__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2549
|
+
], viewQueries: [{ propertyName: "selectTrigger", first: true, predicate: ["selectTrigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"lc-select-wrapper\">\n <div\n #selectTrigger\n [class]=\"selectClasses\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-required]=\"required ? 'true' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n (click)=\"toggle()\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\"\n >\n <div class=\"lc-select__value\">\n <span [class.lc-select__placeholder]=\"!selectedLabel()\">\n {{ displayValue() }}\n </span>\n </div>\n\n <div class=\"lc-select__icons\">\n @if (loading) {\n <svg\n class=\"lc-select__spinner\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle\n class=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n ></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n } @else if (value() && !disabled && !multiple) {\n <button\n type=\"button\"\n class=\"lc-select__clear\"\n (click)=\"clear(); $event.stopPropagation()\"\n aria-label=\"Clear selection\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>\n </button>\n }\n\n <svg\n class=\"lc-select__chevron\"\n [class.lc-select__chevron--open]=\"isOpen()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectTrigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"onClickOutside()\"\n (detach)=\"close()\"\n >\n <div class=\"lc-select__dropdown\" [class.lc-select__dropdown--open]=\"isOpen()\">\n @if (searchable) {\n <div class=\"lc-select__search\">\n <input\n type=\"text\"\n class=\"lc-select__search-input\"\n placeholder=\"Search...\"\n [(ngModel)]=\"searchQuery\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div class=\"lc-select__options\">\n @if (filteredOptions().length === 0) {\n <div class=\"lc-select__option lc-select__option--no-results\">\n No options found\n </div>\n } @else {\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"lc-select__option\"\n [class.lc-select__option--selected]=\"isSelected(option)\"\n [class.lc-select__option--highlighted]=\"highlightedIndex() === i\"\n [class.lc-select__option--disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n >\n @if (multiple) {\n <input\n type=\"checkbox\"\n [checked]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n class=\"lc-select__checkbox\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n <span class=\"lc-select__option-label\">{{ option.label }}</span>\n @if (isSelected(option) && !multiple) {\n <svg\n class=\"lc-select__check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Helper/Error Text -->\n @if (error && errorMessage) {\n <div class=\"lc-select__error\" role=\"alert\">\n {{ errorMessage }}\n </div>\n } @else if (helperText) {\n <div class=\"lc-select__helper\">\n {{ helperText }}\n </div>\n }\n</div>\n", styles: [".lc-select-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-select{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-select:hover:not(.lc-select--disabled){border-color:var(--color-primary-400)}.lc-select:focus,.lc-select:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-select.lc-select--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-8);font-size:var(--size-interactive-xs-font-size)}.lc-select.lc-select--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-9);font-size:var(--size-interactive-sm-font-size)}.lc-select.lc-select--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-md-font-size)}.lc-select.lc-select--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-lg-font-size)}.lc-select.lc-select--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-select.lc-select--filled:hover:not(.lc-select--disabled){background-color:var(--color-neutral-200)}.lc-select.lc-select--filled:focus,.lc-select.lc-select--filled:focus-visible{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-select.lc-select--error{border-color:var(--color-error-600)}.lc-select.lc-select--error:focus,.lc-select.lc-select--error:focus-visible{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-select.lc-select--disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-select__placeholder{color:var(--color-text-secondary)}.lc-select__icons{position:absolute;right:var(--spacing-3);display:flex;align-items:center;gap:var(--spacing-1);flex-shrink:0;pointer-events:none}.lc-select__icons button{pointer-events:auto}.lc-select__spinner{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lc-select__clear{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__clear:hover{color:var(--color-text-primary);background-color:var(--color-neutral-100)}.lc-select__clear svg{width:1rem;height:1rem}.lc-select__chevron{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);transition:transform var(--animation-duration-base) var(--animation-timing-ease)}.lc-select__chevron.lc-select__chevron--open{transform:rotate(180deg)}.lc-select__dropdown{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-xs, var(--spacing-2));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-lg);min-width:200px;max-height:320px;overflow-y:auto;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-select__dropdown.lc-select__dropdown--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-select__dropdown::-webkit-scrollbar{width:8px}.lc-select__dropdown::-webkit-scrollbar-track{background:var(--color-neutral-100);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb{background:var(--color-neutral-400);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-500)}.lc-select__search{padding:var(--lc-density-padding-xs, var(--spacing-2));border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-2)}.lc-select__search-input{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);outline:none;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__search-input:focus{border-color:var(--color-primary-500)}.lc-select__search-input::placeholder{color:var(--color-text-secondary)}.lc-select__options{list-style:none;padding:0;margin:0}.lc-select__option{display:flex;align-items:center;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease);text-align:left;width:100%}.lc-select__option:hover:not(.lc-select__option--disabled){background-color:var(--color-neutral-100)}.lc-select__option.lc-select__option--selected{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-select__option.lc-select__option--highlighted{background-color:var(--color-neutral-100)}.lc-select__option.lc-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-select__option-label{flex:1}.lc-select__check{width:1rem;height:1rem;margin-left:var(--spacing-2);flex-shrink:0;color:var(--color-primary-600)}.lc-select__checkbox{margin-right:var(--spacing-2);width:1rem;height:1rem}.lc-select__empty{padding:var(--lc-density-padding-md, var(--spacing-4));text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.lc-select__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-select__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2550
2550
|
}
|
|
2551
2551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SelectComponent, decorators: [{
|
|
2552
2552
|
type: Component,
|
|
@@ -2556,7 +2556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
2556
2556
|
useExisting: forwardRef(() => SelectComponent),
|
|
2557
2557
|
multi: true,
|
|
2558
2558
|
},
|
|
2559
|
-
], template: "<div class=\"lc-select-wrapper\">\n <div\n #selectTrigger\n [class]=\"selectClasses\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-required]=\"required ? 'true' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n (click)=\"toggle()\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\"\n >\n <div class=\"lc-select__value\">\n <span [class.lc-select__placeholder]=\"!selectedLabel()\">\n {{ displayValue() }}\n </span>\n </div>\n\n <div class=\"lc-select__icons\">\n @if (loading) {\n <svg\n class=\"lc-select__spinner\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle\n class=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n ></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n } @else if (value() && !disabled && !multiple) {\n <button\n type=\"button\"\n class=\"lc-select__clear\"\n (click)=\"clear(); $event.stopPropagation()\"\n aria-label=\"Clear selection\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>\n </button>\n }\n\n <svg\n class=\"lc-select__chevron\"\n [class.lc-select__chevron--open]=\"isOpen()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectTrigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"onClickOutside()\"\n (detach)=\"close()\"\n >\n <div class=\"lc-select__dropdown\" [class.lc-select__dropdown--open]=\"isOpen()\">\n @if (searchable) {\n <div class=\"lc-select__search\">\n <input\n type=\"text\"\n class=\"lc-select__search-input\"\n placeholder=\"Search...\"\n [(ngModel)]=\"searchQuery\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div class=\"lc-select__options\">\n @if (filteredOptions().length === 0) {\n <div class=\"lc-select__option lc-select__option--no-results\">\n No options found\n </div>\n } @else {\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"lc-select__option\"\n [class.lc-select__option--selected]=\"isSelected(option)\"\n [class.lc-select__option--highlighted]=\"highlightedIndex() === i\"\n [class.lc-select__option--disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n >\n @if (multiple) {\n <input\n type=\"checkbox\"\n [checked]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n class=\"lc-select__checkbox\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n <span class=\"lc-select__option-label\">{{ option.label }}</span>\n @if (isSelected(option) && !multiple) {\n <svg\n class=\"lc-select__check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Helper/Error Text -->\n @if (error && errorMessage) {\n <div class=\"lc-select__error\" role=\"alert\">\n {{ errorMessage }}\n </div>\n } @else if (helperText) {\n <div class=\"lc-select__helper\">\n {{ helperText }}\n </div>\n }\n</div>\n", styles: [".lc-select-wrapper{display:flex;flex-direction:column;gap:var(--spacing-1);width:100%;position:relative}.lc-select{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-select:hover:not(.lc-select--disabled){border-color:var(--color-primary-400)}.lc-select:focus,.lc-select:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-select.lc-select--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-8);font-size:var(--size-interactive-xs-font-size)}.lc-select.lc-select--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-9);font-size:var(--size-interactive-sm-font-size)}.lc-select.lc-select--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-md-font-size)}.lc-select.lc-select--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-lg-font-size)}.lc-select.lc-select--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-select.lc-select--filled:hover:not(.lc-select--disabled){background-color:var(--color-neutral-200)}.lc-select.lc-select--filled:focus,.lc-select.lc-select--filled:focus-visible{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-select.lc-select--error{border-color:var(--color-error-600)}.lc-select.lc-select--error:focus,.lc-select.lc-select--error:focus-visible{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-select.lc-select--disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-select__placeholder{color:var(--color-text-secondary)}.lc-select__icons{position:absolute;right:var(--spacing-3);display:flex;align-items:center;gap:var(--spacing-1);flex-shrink:0;pointer-events:none}.lc-select__icons button{pointer-events:auto}.lc-select__spinner{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lc-select__clear{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__clear:hover{color:var(--color-text-primary);background-color:var(--color-neutral-100)}.lc-select__clear svg{width:1rem;height:1rem}.lc-select__chevron{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);transition:transform var(--animation-duration-base) var(--animation-timing-ease)}.lc-select__chevron.lc-select__chevron--open{transform:rotate(180deg)}.lc-select__dropdown{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--spacing-2);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-lg);min-width:200px;max-height:320px;overflow-y:auto;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-select__dropdown.lc-select__dropdown--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-select__dropdown::-webkit-scrollbar{width:8px}.lc-select__dropdown::-webkit-scrollbar-track{background:var(--color-neutral-100);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb{background:var(--color-neutral-400);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-500)}.lc-select__search{padding:var(--spacing-2);border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-2)}.lc-select__search-input{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);outline:none;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__search-input:focus{border-color:var(--color-primary-500)}.lc-select__search-input::placeholder{color:var(--color-text-secondary)}.lc-select__options{list-style:none;padding:0;margin:0}.lc-select__option{display:flex;align-items:center;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease);text-align:left;width:100%}.lc-select__option:hover:not(.lc-select__option--disabled){background-color:var(--color-neutral-100)}.lc-select__option.lc-select__option--selected{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-select__option.lc-select__option--focused{background-color:var(--color-neutral-100)}.lc-select__option.lc-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-select__option-label{flex:1}.lc-select__check{width:1rem;height:1rem;margin-left:var(--spacing-2);flex-shrink:0;color:var(--color-primary-600)}.lc-select__checkbox{margin-right:var(--spacing-2);width:1rem;height:1rem}.lc-select__empty{padding:var(--spacing-4);text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.lc-select__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-select__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"] }]
|
|
2559
|
+
], template: "<div class=\"lc-select-wrapper\">\n <div\n #selectTrigger\n [class]=\"selectClasses\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-required]=\"required ? 'true' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n (click)=\"toggle()\"\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\"\n >\n <div class=\"lc-select__value\">\n <span [class.lc-select__placeholder]=\"!selectedLabel()\">\n {{ displayValue() }}\n </span>\n </div>\n\n <div class=\"lc-select__icons\">\n @if (loading) {\n <svg\n class=\"lc-select__spinner\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle\n class=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n ></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n } @else if (value() && !disabled && !multiple) {\n <button\n type=\"button\"\n class=\"lc-select__clear\"\n (click)=\"clear(); $event.stopPropagation()\"\n aria-label=\"Clear selection\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>\n </button>\n }\n\n <svg\n class=\"lc-select__chevron\"\n [class.lc-select__chevron--open]=\"isOpen()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectTrigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"onClickOutside()\"\n (detach)=\"close()\"\n >\n <div class=\"lc-select__dropdown\" [class.lc-select__dropdown--open]=\"isOpen()\">\n @if (searchable) {\n <div class=\"lc-select__search\">\n <input\n type=\"text\"\n class=\"lc-select__search-input\"\n placeholder=\"Search...\"\n [(ngModel)]=\"searchQuery\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div class=\"lc-select__options\">\n @if (filteredOptions().length === 0) {\n <div class=\"lc-select__option lc-select__option--no-results\">\n No options found\n </div>\n } @else {\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"lc-select__option\"\n [class.lc-select__option--selected]=\"isSelected(option)\"\n [class.lc-select__option--highlighted]=\"highlightedIndex() === i\"\n [class.lc-select__option--disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n >\n @if (multiple) {\n <input\n type=\"checkbox\"\n [checked]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n class=\"lc-select__checkbox\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n <span class=\"lc-select__option-label\">{{ option.label }}</span>\n @if (isSelected(option) && !multiple) {\n <svg\n class=\"lc-select__check\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Helper/Error Text -->\n @if (error && errorMessage) {\n <div class=\"lc-select__error\" role=\"alert\">\n {{ errorMessage }}\n </div>\n } @else if (helperText) {\n <div class=\"lc-select__helper\">\n {{ helperText }}\n </div>\n }\n</div>\n", styles: [".lc-select-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-select{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-select:hover:not(.lc-select--disabled){border-color:var(--color-primary-400)}.lc-select:focus,.lc-select:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-select.lc-select--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-8);font-size:var(--size-interactive-xs-font-size)}.lc-select.lc-select--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-9);font-size:var(--size-interactive-sm-font-size)}.lc-select.lc-select--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-md-font-size)}.lc-select.lc-select--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-lg-font-size)}.lc-select.lc-select--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-select.lc-select--filled:hover:not(.lc-select--disabled){background-color:var(--color-neutral-200)}.lc-select.lc-select--filled:focus,.lc-select.lc-select--filled:focus-visible{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-select.lc-select--error{border-color:var(--color-error-600)}.lc-select.lc-select--error:focus,.lc-select.lc-select--error:focus-visible{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-select.lc-select--disabled{background-color:var(--color-neutral-100);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-select__placeholder{color:var(--color-text-secondary)}.lc-select__icons{position:absolute;right:var(--spacing-3);display:flex;align-items:center;gap:var(--spacing-1);flex-shrink:0;pointer-events:none}.lc-select__icons button{pointer-events:auto}.lc-select__spinner{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lc-select__clear{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__clear:hover{color:var(--color-text-primary);background-color:var(--color-neutral-100)}.lc-select__clear svg{width:1rem;height:1rem}.lc-select__chevron{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);transition:transform var(--animation-duration-base) var(--animation-timing-ease)}.lc-select__chevron.lc-select__chevron--open{transform:rotate(180deg)}.lc-select__dropdown{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-xs, var(--spacing-2));background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-lg);min-width:200px;max-height:320px;overflow-y:auto;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-select__dropdown.lc-select__dropdown--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-select__dropdown::-webkit-scrollbar{width:8px}.lc-select__dropdown::-webkit-scrollbar-track{background:var(--color-neutral-100);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb{background:var(--color-neutral-400);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-500)}.lc-select__search{padding:var(--lc-density-padding-xs, var(--spacing-2));border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-2)}.lc-select__search-input{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);outline:none;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__search-input:focus{border-color:var(--color-primary-500)}.lc-select__search-input::placeholder{color:var(--color-text-secondary)}.lc-select__options{list-style:none;padding:0;margin:0}.lc-select__option{display:flex;align-items:center;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease);text-align:left;width:100%}.lc-select__option:hover:not(.lc-select__option--disabled){background-color:var(--color-neutral-100)}.lc-select__option.lc-select__option--selected{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-select__option.lc-select__option--highlighted{background-color:var(--color-neutral-100)}.lc-select__option.lc-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-select__option-label{flex:1}.lc-select__check{width:1rem;height:1rem;margin-left:var(--spacing-2);flex-shrink:0;color:var(--color-primary-600)}.lc-select__checkbox{margin-right:var(--spacing-2);width:1rem;height:1rem}.lc-select__empty{padding:var(--lc-density-padding-md, var(--spacing-4));text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.lc-select__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-select__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}\n"] }]
|
|
2560
2560
|
}], propDecorators: { selectTrigger: [{
|
|
2561
2561
|
type: ViewChild,
|
|
2562
2562
|
args: ['selectTrigger', { static: false, read: ElementRef }]
|
|
@@ -2987,7 +2987,7 @@ class TextareaComponent {
|
|
|
2987
2987
|
useExisting: forwardRef(() => TextareaComponent),
|
|
2988
2988
|
multi: true,
|
|
2989
2989
|
},
|
|
2990
|
-
], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"lc-textarea-wrapper\">\n @if (label) {\n <label class=\"lc-textarea-label\" [class.lc-textarea-label--required]=\"required\">\n {{ label }}\n @if (required) {\n <span class=\"lc-textarea-required-indicator\">*</span>\n }\n </label>\n }\n\n <div class=\"lc-textarea-input-wrapper\">\n <textarea\n #textarea\n [class]=\"textareaClasses\"\n [value]=\"value()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [rows]=\"autoResize ? undefined : rows\"\n [attr.maxlength]=\"maxLength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"error\"\n (input)=\"onInput(getInputValue($event))\"\n (blur)=\"onBlur()\"\n ></textarea>\n </div>\n\n <div class=\"lc-textarea-footer\">\n <div class=\"lc-textarea-messages\">\n @if (error && errorMessage) {\n <span class=\"lc-textarea-error-message\">{{ errorMessage }}</span>\n } @else if (helperText) {\n <span class=\"lc-textarea-helper-text\">{{ helperText }}</span>\n }\n </div>\n\n @if (showCharacterCount) {\n <span \n class=\"lc-textarea-character-count\" \n [class.lc-textarea-character-count--over-limit]=\"isOverLimit()\"\n >\n {{ characterCountText() }}\n </span>\n }\n </div>\n</div>\n", styles: [".lc-textarea-wrapper{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.lc-textarea-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.lc-textarea-label--required:after{content:\" *\";color:var(--color-danger-600)}.lc-textarea{width:100%;font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);resize:vertical;outline:none}.lc-textarea::placeholder{color:var(--color-text-tertiary)}.lc-textarea:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--xs{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-xs);min-height:4rem}.lc-textarea--sm{padding:var(--spacing-2-5) var(--spacing-3-5);font-size:var(--font-size-sm);min-height:5rem}.lc-textarea--md{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base);min-height:6rem}.lc-textarea--lg{padding:var(--spacing-3-5) var(--spacing-5);font-size:var(--font-size-lg);min-height:7rem}.lc-textarea--outline{background-color:var(--color-surface);border-color:var(--color-border)}.lc-textarea--outline:hover:not(:disabled):not(:read-only){border-color:var(--color-primary-400)}.lc-textarea--outline:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-textarea--filled:hover:not(:disabled):not(:read-only){background-color:var(--color-neutral-200)}.lc-textarea--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--disabled{cursor:not-allowed;opacity:.6;background-color:var(--color-neutral-100);color:var(--color-text-tertiary)}.lc-textarea--readonly{cursor:default;background-color:var(--color-neutral-50)}.lc-textarea--error{border-color:var(--color-danger-500)}.lc-textarea--error:focus{border-color:var(--color-danger-600);box-shadow:0 0 0 3px var(--color-danger-100)}.lc-textarea--auto-resize{resize:none;overflow:hidden}.lc-textarea-helper-text{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.lc-textarea-error-message{font-size:var(--font-size-xs);color:var(--color-danger-600)}.lc-textarea-char-count,.lc-textarea-character-count{font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:right}.lc-textarea-char-count--warning,.lc-textarea-character-count--warning{color:var(--color-warning-600)}.lc-textarea-char-count--error,.lc-textarea-char-count--over-limit,.lc-textarea-character-count--error,.lc-textarea-character-count--over-limit{color:var(--color-danger-600)}.lc-textarea-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-2)}.lc-textarea-messages{flex:1}.lc-textarea-input-wrapper{position:relative;width:100%}.lc-textarea-required-indicator{color:var(--color-danger-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2990
|
+
], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"lc-textarea-wrapper\">\n @if (label) {\n <label class=\"lc-textarea-label\" [class.lc-textarea-label--required]=\"required\">\n {{ label }}\n @if (required) {\n <span class=\"lc-textarea-required-indicator\">*</span>\n }\n </label>\n }\n\n <div class=\"lc-textarea-input-wrapper\">\n <textarea\n #textarea\n [class]=\"textareaClasses\"\n [value]=\"value()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [rows]=\"autoResize ? undefined : rows\"\n [attr.maxlength]=\"maxLength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"error\"\n (input)=\"onInput(getInputValue($event))\"\n (blur)=\"onBlur()\"\n ></textarea>\n </div>\n\n <div class=\"lc-textarea-footer\">\n <div class=\"lc-textarea-messages\">\n @if (error && errorMessage) {\n <span class=\"lc-textarea-error-message\">{{ errorMessage }}</span>\n } @else if (helperText) {\n <span class=\"lc-textarea-helper-text\">{{ helperText }}</span>\n }\n </div>\n\n @if (showCharacterCount) {\n <span \n class=\"lc-textarea-character-count\" \n [class.lc-textarea-character-count--over-limit]=\"isOverLimit()\"\n >\n {{ characterCountText() }}\n </span>\n }\n </div>\n</div>\n", styles: [".lc-textarea-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, var(--spacing-2));width:100%}.lc-textarea-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.lc-textarea-label--required:after{content:\" *\";color:var(--color-danger-600)}.lc-textarea{width:100%;font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);resize:vertical;outline:none}.lc-textarea::placeholder{color:var(--color-text-tertiary)}.lc-textarea:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--xs{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-xs);min-height:4rem}.lc-textarea--sm{padding:var(--spacing-2-5) var(--spacing-3-5);font-size:var(--font-size-sm);min-height:5rem}.lc-textarea--md{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base);min-height:6rem}.lc-textarea--lg{padding:var(--spacing-3-5) var(--spacing-5);font-size:var(--font-size-lg);min-height:7rem}.lc-textarea--outline{background-color:var(--color-surface);border-color:var(--color-border)}.lc-textarea--outline:hover:not(:disabled):not(:read-only){border-color:var(--color-primary-400)}.lc-textarea--outline:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-textarea--filled:hover:not(:disabled):not(:read-only){background-color:var(--color-neutral-200)}.lc-textarea--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--disabled{cursor:not-allowed;opacity:.6;background-color:var(--color-neutral-100);color:var(--color-text-tertiary)}.lc-textarea--readonly{cursor:default;background-color:var(--color-neutral-50)}.lc-textarea--error{border-color:var(--color-danger-500)}.lc-textarea--error:focus{border-color:var(--color-danger-600);box-shadow:0 0 0 3px var(--color-danger-100)}.lc-textarea--auto-resize{resize:none;overflow:hidden}.lc-textarea-helper-text{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.lc-textarea-error-message{font-size:var(--font-size-xs);color:var(--color-danger-600)}.lc-textarea-char-count,.lc-textarea-character-count{font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:right}.lc-textarea-char-count--warning,.lc-textarea-character-count--warning{color:var(--color-warning-600)}.lc-textarea-char-count--error,.lc-textarea-char-count--over-limit,.lc-textarea-character-count--error,.lc-textarea-character-count--over-limit{color:var(--color-danger-600)}.lc-textarea-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-textarea-messages{flex:1}.lc-textarea-input-wrapper{position:relative;width:100%}.lc-textarea-required-indicator{color:var(--color-danger-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2991
2991
|
}
|
|
2992
2992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
2993
2993
|
type: Component,
|
|
@@ -2997,7 +2997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
2997
2997
|
useExisting: forwardRef(() => TextareaComponent),
|
|
2998
2998
|
multi: true,
|
|
2999
2999
|
},
|
|
3000
|
-
], template: "<div class=\"lc-textarea-wrapper\">\n @if (label) {\n <label class=\"lc-textarea-label\" [class.lc-textarea-label--required]=\"required\">\n {{ label }}\n @if (required) {\n <span class=\"lc-textarea-required-indicator\">*</span>\n }\n </label>\n }\n\n <div class=\"lc-textarea-input-wrapper\">\n <textarea\n #textarea\n [class]=\"textareaClasses\"\n [value]=\"value()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [rows]=\"autoResize ? undefined : rows\"\n [attr.maxlength]=\"maxLength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"error\"\n (input)=\"onInput(getInputValue($event))\"\n (blur)=\"onBlur()\"\n ></textarea>\n </div>\n\n <div class=\"lc-textarea-footer\">\n <div class=\"lc-textarea-messages\">\n @if (error && errorMessage) {\n <span class=\"lc-textarea-error-message\">{{ errorMessage }}</span>\n } @else if (helperText) {\n <span class=\"lc-textarea-helper-text\">{{ helperText }}</span>\n }\n </div>\n\n @if (showCharacterCount) {\n <span \n class=\"lc-textarea-character-count\" \n [class.lc-textarea-character-count--over-limit]=\"isOverLimit()\"\n >\n {{ characterCountText() }}\n </span>\n }\n </div>\n</div>\n", styles: [".lc-textarea-wrapper{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.lc-textarea-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.lc-textarea-label--required:after{content:\" *\";color:var(--color-danger-600)}.lc-textarea{width:100%;font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);resize:vertical;outline:none}.lc-textarea::placeholder{color:var(--color-text-tertiary)}.lc-textarea:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--xs{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-xs);min-height:4rem}.lc-textarea--sm{padding:var(--spacing-2-5) var(--spacing-3-5);font-size:var(--font-size-sm);min-height:5rem}.lc-textarea--md{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base);min-height:6rem}.lc-textarea--lg{padding:var(--spacing-3-5) var(--spacing-5);font-size:var(--font-size-lg);min-height:7rem}.lc-textarea--outline{background-color:var(--color-surface);border-color:var(--color-border)}.lc-textarea--outline:hover:not(:disabled):not(:read-only){border-color:var(--color-primary-400)}.lc-textarea--outline:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-textarea--filled:hover:not(:disabled):not(:read-only){background-color:var(--color-neutral-200)}.lc-textarea--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--disabled{cursor:not-allowed;opacity:.6;background-color:var(--color-neutral-100);color:var(--color-text-tertiary)}.lc-textarea--readonly{cursor:default;background-color:var(--color-neutral-50)}.lc-textarea--error{border-color:var(--color-danger-500)}.lc-textarea--error:focus{border-color:var(--color-danger-600);box-shadow:0 0 0 3px var(--color-danger-100)}.lc-textarea--auto-resize{resize:none;overflow:hidden}.lc-textarea-helper-text{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.lc-textarea-error-message{font-size:var(--font-size-xs);color:var(--color-danger-600)}.lc-textarea-char-count,.lc-textarea-character-count{font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:right}.lc-textarea-char-count--warning,.lc-textarea-character-count--warning{color:var(--color-warning-600)}.lc-textarea-char-count--error,.lc-textarea-char-count--over-limit,.lc-textarea-character-count--error,.lc-textarea-character-count--over-limit{color:var(--color-danger-600)}.lc-textarea-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-2)}.lc-textarea-messages{flex:1}.lc-textarea-input-wrapper{position:relative;width:100%}.lc-textarea-required-indicator{color:var(--color-danger-600)}\n"] }]
|
|
3000
|
+
], template: "<div class=\"lc-textarea-wrapper\">\n @if (label) {\n <label class=\"lc-textarea-label\" [class.lc-textarea-label--required]=\"required\">\n {{ label }}\n @if (required) {\n <span class=\"lc-textarea-required-indicator\">*</span>\n }\n </label>\n }\n\n <div class=\"lc-textarea-input-wrapper\">\n <textarea\n #textarea\n [class]=\"textareaClasses\"\n [value]=\"value()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [rows]=\"autoResize ? undefined : rows\"\n [attr.maxlength]=\"maxLength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"error\"\n (input)=\"onInput(getInputValue($event))\"\n (blur)=\"onBlur()\"\n ></textarea>\n </div>\n\n <div class=\"lc-textarea-footer\">\n <div class=\"lc-textarea-messages\">\n @if (error && errorMessage) {\n <span class=\"lc-textarea-error-message\">{{ errorMessage }}</span>\n } @else if (helperText) {\n <span class=\"lc-textarea-helper-text\">{{ helperText }}</span>\n }\n </div>\n\n @if (showCharacterCount) {\n <span \n class=\"lc-textarea-character-count\" \n [class.lc-textarea-character-count--over-limit]=\"isOverLimit()\"\n >\n {{ characterCountText() }}\n </span>\n }\n </div>\n</div>\n", styles: [".lc-textarea-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, var(--spacing-2));width:100%}.lc-textarea-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.lc-textarea-label--required:after{content:\" *\";color:var(--color-danger-600)}.lc-textarea{width:100%;font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);resize:vertical;outline:none}.lc-textarea::placeholder{color:var(--color-text-tertiary)}.lc-textarea:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--xs{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-xs);min-height:4rem}.lc-textarea--sm{padding:var(--spacing-2-5) var(--spacing-3-5);font-size:var(--font-size-sm);min-height:5rem}.lc-textarea--md{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base);min-height:6rem}.lc-textarea--lg{padding:var(--spacing-3-5) var(--spacing-5);font-size:var(--font-size-lg);min-height:7rem}.lc-textarea--outline{background-color:var(--color-surface);border-color:var(--color-border)}.lc-textarea--outline:hover:not(:disabled):not(:read-only){border-color:var(--color-primary-400)}.lc-textarea--outline:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--filled{background-color:var(--color-neutral-100);border-color:transparent}.lc-textarea--filled:hover:not(:disabled):not(:read-only){background-color:var(--color-neutral-200)}.lc-textarea--filled:focus{background-color:var(--color-surface);border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100)}.lc-textarea--disabled{cursor:not-allowed;opacity:.6;background-color:var(--color-neutral-100);color:var(--color-text-tertiary)}.lc-textarea--readonly{cursor:default;background-color:var(--color-neutral-50)}.lc-textarea--error{border-color:var(--color-danger-500)}.lc-textarea--error:focus{border-color:var(--color-danger-600);box-shadow:0 0 0 3px var(--color-danger-100)}.lc-textarea--auto-resize{resize:none;overflow:hidden}.lc-textarea-helper-text{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.lc-textarea-error-message{font-size:var(--font-size-xs);color:var(--color-danger-600)}.lc-textarea-char-count,.lc-textarea-character-count{font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:right}.lc-textarea-char-count--warning,.lc-textarea-character-count--warning{color:var(--color-warning-600)}.lc-textarea-char-count--error,.lc-textarea-char-count--over-limit,.lc-textarea-character-count--error,.lc-textarea-character-count--over-limit{color:var(--color-danger-600)}.lc-textarea-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-textarea-messages{flex:1}.lc-textarea-input-wrapper{position:relative;width:100%}.lc-textarea-required-indicator{color:var(--color-danger-600)}\n"] }]
|
|
3001
3001
|
}], propDecorators: { textareaElement: [{
|
|
3002
3002
|
type: ViewChild,
|
|
3003
3003
|
args: ['textarea', { static: false, read: ElementRef }]
|
|
@@ -3148,7 +3148,7 @@ class AlertComponent {
|
|
|
3148
3148
|
this.dismiss();
|
|
3149
3149
|
}
|
|
3150
3150
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3151
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AlertComponent, isStandalone: true, selector: "lc-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "hostClasses()", "attr.role": "\"alert\"", "attr.aria-live": "ariaLive()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "@if (visible()) {\n <div [class]=\"containerClasses()\">\n @if (showIcon()) {\n <div class=\"lc-alert__icon\">\n <lc-icon [name]=\"defaultIcon()\" size=\"md\" />\n </div>\n }\n \n <div class=\"lc-alert__body\">\n @if (title()) {\n <div class=\"lc-alert__title\">{{ title() }}</div>\n }\n \n <div class=\"lc-alert__content\">\n @if (message()) {\n {{ message() }}\n } @else {\n <ng-content />\n }\n </div>\n </div>\n \n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"lc-alert__close\"\n aria-label=\"Close alert\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n }\n </div>\n}\n", styles: [".lc-alert{display:block;width:100%;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--spacing-4)}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-alert__close:hover{background-color:#0000000d}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert--success{background-color:#cdd6c2;border-color:#8ea475;color:#5f7150}.lc-alert--success .lc-alert__icon{color:#8ea475}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4751a}.lc-alert--error{background-color:#f7a1a1;border-color:#9d0e0e;color:#6b0909}.lc-alert--error .lc-alert__icon{color:#9d0e0e}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e1a}.lc-alert--warning{background-color:#f1d3a7;border-color:#e1a040;color:#9b6b2b}.lc-alert--warning .lc-alert__icon{color:#e1a040}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a0401a}.lc-alert--info{background-color:#b8cee0;border-color:#3b6588;color:#27445c}.lc-alert--info .lc-alert__icon{color:#3b6588}.lc-alert--info .lc-alert__close:hover{background-color:#3b65881a}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3151
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AlertComponent, isStandalone: true, selector: "lc-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "hostClasses()", "attr.role": "\"alert\"", "attr.aria-live": "ariaLive()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "@if (visible()) {\n <div [class]=\"containerClasses()\">\n @if (showIcon()) {\n <div class=\"lc-alert__icon\">\n <lc-icon [name]=\"defaultIcon()\" size=\"md\" />\n </div>\n }\n \n <div class=\"lc-alert__body\">\n @if (title()) {\n <div class=\"lc-alert__title\">{{ title() }}</div>\n }\n \n <div class=\"lc-alert__content\">\n @if (message()) {\n {{ message() }}\n } @else {\n <ng-content />\n }\n </div>\n </div>\n \n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"lc-alert__close\"\n aria-label=\"Close alert\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n }\n </div>\n}\n", styles: [".lc-alert{display:block;width:100%;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-alert__close:hover{background-color:#0000000d}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert--success{background-color:#cdd6c2;border-color:#8ea475;color:#5f7150}.lc-alert--success .lc-alert__icon{color:#8ea475}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4751a}.lc-alert--error{background-color:#f7a1a1;border-color:#9d0e0e;color:#6b0909}.lc-alert--error .lc-alert__icon{color:#9d0e0e}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e1a}.lc-alert--warning{background-color:#f1d3a7;border-color:#e1a040;color:#9b6b2b}.lc-alert--warning .lc-alert__icon{color:#e1a040}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a0401a}.lc-alert--info{background-color:#b8cee0;border-color:#3b6588;color:#27445c}.lc-alert--info .lc-alert__icon{color:#3b6588}.lc-alert--info .lc-alert__close:hover{background-color:#3b65881a}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3152
3152
|
}
|
|
3153
3153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AlertComponent, decorators: [{
|
|
3154
3154
|
type: Component,
|
|
@@ -3157,7 +3157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
3157
3157
|
'[attr.role]': '"alert"',
|
|
3158
3158
|
'[attr.aria-live]': 'ariaLive()',
|
|
3159
3159
|
'[attr.aria-label]': 'ariaLabel()',
|
|
3160
|
-
}, template: "@if (visible()) {\n <div [class]=\"containerClasses()\">\n @if (showIcon()) {\n <div class=\"lc-alert__icon\">\n <lc-icon [name]=\"defaultIcon()\" size=\"md\" />\n </div>\n }\n \n <div class=\"lc-alert__body\">\n @if (title()) {\n <div class=\"lc-alert__title\">{{ title() }}</div>\n }\n \n <div class=\"lc-alert__content\">\n @if (message()) {\n {{ message() }}\n } @else {\n <ng-content />\n }\n </div>\n </div>\n \n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"lc-alert__close\"\n aria-label=\"Close alert\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n }\n </div>\n}\n", styles: [".lc-alert{display:block;width:100%;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--spacing-4)}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-alert__close:hover{background-color:#0000000d}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert--success{background-color:#cdd6c2;border-color:#8ea475;color:#5f7150}.lc-alert--success .lc-alert__icon{color:#8ea475}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4751a}.lc-alert--error{background-color:#f7a1a1;border-color:#9d0e0e;color:#6b0909}.lc-alert--error .lc-alert__icon{color:#9d0e0e}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e1a}.lc-alert--warning{background-color:#f1d3a7;border-color:#e1a040;color:#9b6b2b}.lc-alert--warning .lc-alert__icon{color:#e1a040}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a0401a}.lc-alert--info{background-color:#b8cee0;border-color:#3b6588;color:#27445c}.lc-alert--info .lc-alert__icon{color:#3b6588}.lc-alert--info .lc-alert__close:hover{background-color:#3b65881a}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
3160
|
+
}, template: "@if (visible()) {\n <div [class]=\"containerClasses()\">\n @if (showIcon()) {\n <div class=\"lc-alert__icon\">\n <lc-icon [name]=\"defaultIcon()\" size=\"md\" />\n </div>\n }\n \n <div class=\"lc-alert__body\">\n @if (title()) {\n <div class=\"lc-alert__title\">{{ title() }}</div>\n }\n \n <div class=\"lc-alert__content\">\n @if (message()) {\n {{ message() }}\n } @else {\n <ng-content />\n }\n </div>\n </div>\n \n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"lc-alert__close\"\n aria-label=\"Close alert\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n }\n </div>\n}\n", styles: [".lc-alert{display:block;width:100%;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-alert__close:hover{background-color:#0000000d}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert--success{background-color:#cdd6c2;border-color:#8ea475;color:#5f7150}.lc-alert--success .lc-alert__icon{color:#8ea475}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4751a}.lc-alert--error{background-color:#f7a1a1;border-color:#9d0e0e;color:#6b0909}.lc-alert--error .lc-alert__icon{color:#9d0e0e}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e1a}.lc-alert--warning{background-color:#f1d3a7;border-color:#e1a040;color:#9b6b2b}.lc-alert--warning .lc-alert__icon{color:#e1a040}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a0401a}.lc-alert--info{background-color:#b8cee0;border-color:#3b6588;color:#27445c}.lc-alert--info .lc-alert__icon{color:#3b6588}.lc-alert--info .lc-alert__close:hover{background-color:#3b65881a}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
3161
3161
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
|
|
3162
3162
|
|
|
3163
3163
|
/* eslint-disable @typescript-eslint/member-ordering */
|
|
@@ -4424,18 +4424,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
4424
4424
|
args: ['class']
|
|
4425
4425
|
}] } });
|
|
4426
4426
|
|
|
4427
|
+
/**
|
|
4428
|
+
* Page header — top-of-page title block with optional subtitle,
|
|
4429
|
+
* breadcrumbs, badge, description and an actions area.
|
|
4430
|
+
*
|
|
4431
|
+
* Density-aware, slot-based, no Tailwind. Drop it at the top of any route
|
|
4432
|
+
* to get consistent rhythm between title, metadata and content below.
|
|
4433
|
+
*
|
|
4434
|
+
* Slots:
|
|
4435
|
+
* - `[slot="breadcrumbs"]` — rendered above the title (e.g. `<lc-breadcrumbs>`)
|
|
4436
|
+
* - `[slot="actions"]` — right-aligned actions (buttons, menus)
|
|
4437
|
+
* - `[slot="meta"]` — secondary metadata under the title row (chips, tags)
|
|
4438
|
+
* - default — short header-internal description text
|
|
4439
|
+
*
|
|
4440
|
+
* Full-blown navigation primitives like `lc-tabs` — which render both the tab
|
|
4441
|
+
* strip **and** their panel content — belong **below** the page header, never
|
|
4442
|
+
* inside it. The header stays focused on page identity.
|
|
4443
|
+
*
|
|
4444
|
+
* @example
|
|
4445
|
+
* ```html
|
|
4446
|
+
* <lc-page-header
|
|
4447
|
+
* title="Reports"
|
|
4448
|
+
* subtitle="Compare period-over-period metrics"
|
|
4449
|
+
* [showDivider]="true"
|
|
4450
|
+
* >
|
|
4451
|
+
* <lc-breadcrumbs slot="breadcrumbs" [items]="crumbs" />
|
|
4452
|
+
* <lc-button slot="actions" variant="primary">New report</lc-button>
|
|
4453
|
+
* <lc-chip slot="meta">12 active</lc-chip>
|
|
4454
|
+
* </lc-page-header>
|
|
4455
|
+
* ```
|
|
4456
|
+
*/
|
|
4457
|
+
class PageHeaderComponent {
|
|
4458
|
+
/** Main heading text. */
|
|
4459
|
+
title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
4460
|
+
/** Short supporting line below the title. */
|
|
4461
|
+
subtitle = input(undefined, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
4462
|
+
/**
|
|
4463
|
+
* Heading level for the title — affects semantics, not size.
|
|
4464
|
+
* @default 1
|
|
4465
|
+
*/
|
|
4466
|
+
level = input(1, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
|
|
4467
|
+
/**
|
|
4468
|
+
* Visual size of the page header.
|
|
4469
|
+
* - `compact` — dense data-tool pages
|
|
4470
|
+
* - `default` — standard app pages
|
|
4471
|
+
* - `comfortable` — landing-page hero feel
|
|
4472
|
+
*/
|
|
4473
|
+
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4474
|
+
/**
|
|
4475
|
+
* Whether to render a divider line below the header.
|
|
4476
|
+
* @default false
|
|
4477
|
+
*/
|
|
4478
|
+
showDivider = input(false, ...(ngDevMode ? [{ debugName: "showDivider" }] : /* istanbul ignore next */ []));
|
|
4479
|
+
/** Optional badge text next to the title (e.g. `Beta`). */
|
|
4480
|
+
badge = input(undefined, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
4481
|
+
hostClasses = computed(() => [
|
|
4482
|
+
'lc-page-header',
|
|
4483
|
+
`lc-page-header--size-${this.size()}`,
|
|
4484
|
+
this.showDivider() ? 'lc-page-header--divided' : null,
|
|
4485
|
+
]
|
|
4486
|
+
.filter(Boolean)
|
|
4487
|
+
.join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
4488
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4489
|
+
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(--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 });
|
|
4490
|
+
}
|
|
4491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
4492
|
+
type: Component,
|
|
4493
|
+
args: [{ selector: 'lc-page-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
4494
|
+
'[class]': 'hostClasses()',
|
|
4495
|
+
}, 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(--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"] }]
|
|
4496
|
+
}], 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 }] }] } });
|
|
4497
|
+
|
|
4427
4498
|
/**
|
|
4428
4499
|
* Section component for page content grouping with spacing and background.
|
|
4429
4500
|
*
|
|
4430
4501
|
* Features:
|
|
4431
4502
|
* - Configurable vertical spacing (none, sm, md, lg, xl)
|
|
4432
|
-
* - Background color options (none,
|
|
4503
|
+
* - Background color options (none, gray, primary, secondary)
|
|
4433
4504
|
* - Independent horizontal and vertical padding control
|
|
4434
|
-
* -
|
|
4505
|
+
* - Density-aware: paddings come from `--lc-density-padding-*`, so a single
|
|
4506
|
+
* `data-density` on an ancestor rescales every section on the page.
|
|
4507
|
+
* - No Tailwind dependency — styling lives in the component's own SCSS.
|
|
4435
4508
|
*
|
|
4436
4509
|
* @example
|
|
4437
4510
|
* ```html
|
|
4438
|
-
* <lc-section spacing="lg" background="
|
|
4511
|
+
* <lc-section spacing="lg" background="gray">Content</lc-section>
|
|
4439
4512
|
* ```
|
|
4440
4513
|
*/
|
|
4441
4514
|
class SectionComponent {
|
|
@@ -4447,46 +4520,21 @@ class SectionComponent {
|
|
|
4447
4520
|
return this.classes();
|
|
4448
4521
|
}
|
|
4449
4522
|
classes = computed(() => {
|
|
4450
|
-
const classes = [];
|
|
4451
|
-
|
|
4452
|
-
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
sm: 'py-8',
|
|
4458
|
-
md: 'py-12',
|
|
4459
|
-
lg: 'py-16',
|
|
4460
|
-
xl: 'py-24',
|
|
4461
|
-
};
|
|
4462
|
-
const paddingY = spacingMap[this.spacing()];
|
|
4463
|
-
if (paddingY) {
|
|
4464
|
-
classes.push(paddingY);
|
|
4465
|
-
}
|
|
4466
|
-
}
|
|
4467
|
-
// Background
|
|
4468
|
-
const backgroundClass = `section-bg-${this.background()}`;
|
|
4469
|
-
classes.push(backgroundClass);
|
|
4470
|
-
if (this.background() !== 'none') {
|
|
4471
|
-
const backgroundMap = {
|
|
4472
|
-
gray: 'bg-neutral-50',
|
|
4473
|
-
primary: 'bg-primary-50',
|
|
4474
|
-
secondary: 'bg-secondary-50',
|
|
4475
|
-
};
|
|
4476
|
-
classes.push(backgroundMap[this.background()]);
|
|
4477
|
-
}
|
|
4478
|
-
// Horizontal padding
|
|
4479
|
-
if (!this.noPaddingX()) {
|
|
4480
|
-
classes.push('px-4', 'sm:px-6', 'lg:px-8');
|
|
4481
|
-
}
|
|
4523
|
+
const classes = ['lc-section'];
|
|
4524
|
+
classes.push(`section-spacing-${this.spacing()}`);
|
|
4525
|
+
classes.push(`section-bg-${this.background()}`);
|
|
4526
|
+
if (this.noPaddingX())
|
|
4527
|
+
classes.push('section-no-padding-x');
|
|
4528
|
+
if (this.noPaddingY())
|
|
4529
|
+
classes.push('section-no-padding-y');
|
|
4482
4530
|
return classes.join(' ');
|
|
4483
4531
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
4484
4532
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: SectionComponent, isStandalone: true, selector: "lc-section", inputs: { spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, noPaddingX: { classPropertyName: "noPaddingX", publicName: "noPaddingX", isSignal: true, isRequired: false, transformFunction: null }, noPaddingY: { classPropertyName: "noPaddingY", publicName: "noPaddingY", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4533
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: SectionComponent, isStandalone: true, selector: "lc-section", inputs: { spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, noPaddingX: { classPropertyName: "noPaddingX", publicName: "noPaddingX", isSignal: true, isRequired: false, transformFunction: null }, noPaddingY: { classPropertyName: "noPaddingY", publicName: "noPaddingY", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;width:100%}.section-spacing-none{padding-block:0}.section-spacing-sm{padding-block:var(--lc-density-padding-md, 2rem)}.section-spacing-md{padding-block:var(--lc-density-padding-lg, 3rem)}.section-spacing-lg{padding-block:var(--lc-density-padding-xl, 4rem)}.section-spacing-xl{padding-block:calc(var(--lc-density-padding-xl, 4rem) * 1.5)}:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-xl, 2rem)}}:host(.section-no-padding-y){padding-block:0}.section-bg-none{background-color:transparent}.section-bg-gray{background-color:var(--color-neutral-50)}.section-bg-primary{background-color:var(--color-primary-50)}.section-bg-secondary{background-color:var(--color-secondary-50)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4486
4534
|
}
|
|
4487
4535
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SectionComponent, decorators: [{
|
|
4488
4536
|
type: Component,
|
|
4489
|
-
args: [{ selector: 'lc-section', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
|
|
4537
|
+
args: [{ selector: 'lc-section', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;width:100%}.section-spacing-none{padding-block:0}.section-spacing-sm{padding-block:var(--lc-density-padding-md, 2rem)}.section-spacing-md{padding-block:var(--lc-density-padding-lg, 3rem)}.section-spacing-lg{padding-block:var(--lc-density-padding-xl, 4rem)}.section-spacing-xl{padding-block:calc(var(--lc-density-padding-xl, 4rem) * 1.5)}:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-xl, 2rem)}}:host(.section-no-padding-y){padding-block:0}.section-bg-none{background-color:transparent}.section-bg-gray{background-color:var(--color-neutral-50)}.section-bg-primary{background-color:var(--color-primary-50)}.section-bg-secondary{background-color:var(--color-secondary-50)}\n"] }]
|
|
4490
4538
|
}], propDecorators: { spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], noPaddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPaddingX", required: false }] }], noPaddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPaddingY", required: false }] }], hostClasses: [{
|
|
4491
4539
|
type: HostBinding,
|
|
4492
4540
|
args: ['class']
|
|
@@ -4518,20 +4566,19 @@ class SpacerComponent {
|
|
|
4518
4566
|
}
|
|
4519
4567
|
classes = computed(() => {
|
|
4520
4568
|
const classes = [];
|
|
4521
|
-
//
|
|
4569
|
+
// Semantic size class — sizes are defined in spacer.component.scss
|
|
4522
4570
|
classes.push(`spacer-${this.size()}`);
|
|
4523
4571
|
if (this.size() === 'auto') {
|
|
4524
|
-
classes.push('
|
|
4572
|
+
classes.push('spacer-grow');
|
|
4525
4573
|
}
|
|
4526
|
-
// Note: spacer-xs, spacer-sm, etc. are defined in SCSS
|
|
4527
4574
|
return classes.join(' ');
|
|
4528
4575
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
4529
4576
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4530
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: SpacerComponent, isStandalone: true, selector: "lc-spacer", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "\n", styles: [".spacer-xs{width
|
|
4577
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: SpacerComponent, isStandalone: true, selector: "lc-spacer", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "\n", styles: [":host{display:block}:host(.spacer-grow),.spacer-auto{flex:1 1 auto}.spacer-xs{flex:0 0 var(--lc-density-gap-xs, .25rem);width:var(--lc-density-gap-xs, .25rem);height:var(--lc-density-gap-xs, .25rem)}.spacer-sm{flex:0 0 var(--lc-density-gap-sm, .5rem);width:var(--lc-density-gap-sm, .5rem);height:var(--lc-density-gap-sm, .5rem)}.spacer-md{flex:0 0 var(--lc-density-gap-md, 1rem);width:var(--lc-density-gap-md, 1rem);height:var(--lc-density-gap-md, 1rem)}.spacer-lg{flex:0 0 var(--lc-density-gap-lg, 1.5rem);width:var(--lc-density-gap-lg, 1.5rem);height:var(--lc-density-gap-lg, 1.5rem)}.spacer-xl{flex:0 0 var(--lc-density-gap-xl, 2rem);width:var(--lc-density-gap-xl, 2rem);height:var(--lc-density-gap-xl, 2rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4531
4578
|
}
|
|
4532
4579
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SpacerComponent, decorators: [{
|
|
4533
4580
|
type: Component,
|
|
4534
|
-
args: [{ selector: 'lc-spacer', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n", styles: [".spacer-xs{width
|
|
4581
|
+
args: [{ selector: 'lc-spacer', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n", styles: [":host{display:block}:host(.spacer-grow),.spacer-auto{flex:1 1 auto}.spacer-xs{flex:0 0 var(--lc-density-gap-xs, .25rem);width:var(--lc-density-gap-xs, .25rem);height:var(--lc-density-gap-xs, .25rem)}.spacer-sm{flex:0 0 var(--lc-density-gap-sm, .5rem);width:var(--lc-density-gap-sm, .5rem);height:var(--lc-density-gap-sm, .5rem)}.spacer-md{flex:0 0 var(--lc-density-gap-md, 1rem);width:var(--lc-density-gap-md, 1rem);height:var(--lc-density-gap-md, 1rem)}.spacer-lg{flex:0 0 var(--lc-density-gap-lg, 1.5rem);width:var(--lc-density-gap-lg, 1.5rem);height:var(--lc-density-gap-lg, 1.5rem)}.spacer-xl{flex:0 0 var(--lc-density-gap-xl, 2rem);width:var(--lc-density-gap-xl, 2rem);height:var(--lc-density-gap-xl, 2rem)}\n"] }]
|
|
4535
4582
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hostClasses: [{
|
|
4536
4583
|
type: HostBinding,
|
|
4537
4584
|
args: ['class']
|
|
@@ -4548,18 +4595,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
4548
4595
|
*
|
|
4549
4596
|
* Features:
|
|
4550
4597
|
* - Vertical and horizontal direction
|
|
4551
|
-
* - Configurable gap spacing (none, xs, sm, md, lg, xl)
|
|
4598
|
+
* - Configurable gap spacing (none, xs, sm, md, lg, xl) — defaults to `md`
|
|
4599
|
+
* - Density-aware: when any ancestor sets `data-density="compact|cosy|comfortable"`,
|
|
4600
|
+
* the gap is driven by the `--lc-density-gap-*` tokens, so one attribute
|
|
4601
|
+
* on the page root rescales the rhythm of every Stack inside.
|
|
4552
4602
|
* - Alignment and justification options
|
|
4553
4603
|
* - Optional wrapping and full-width modes
|
|
4554
4604
|
* - Content projection via ng-content
|
|
4555
4605
|
*
|
|
4556
4606
|
* @example
|
|
4557
4607
|
* ```html
|
|
4558
|
-
*
|
|
4608
|
+
* <!-- Single setting on the page root rescales all stacks below -->
|
|
4609
|
+
* <main data-density="compact">
|
|
4610
|
+
* <lc-stack gap="md">…</lc-stack>
|
|
4611
|
+
* </main>
|
|
4559
4612
|
* ```
|
|
4560
4613
|
*/
|
|
4561
4614
|
class StackComponent {
|
|
4562
4615
|
direction = input('vertical', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
|
|
4616
|
+
/** Spacing between children. Maps to `--lc-density-gap-*` when an ancestor sets `data-density`. */
|
|
4563
4617
|
gap = input('md', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
4564
4618
|
align = input('stretch', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
4565
4619
|
justify = input('start', ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
|
|
@@ -4569,68 +4623,122 @@ class StackComponent {
|
|
|
4569
4623
|
return this.classes();
|
|
4570
4624
|
}
|
|
4571
4625
|
classes = computed(() => {
|
|
4572
|
-
const classes = ['
|
|
4626
|
+
const classes = ['lc-stack'];
|
|
4573
4627
|
// Semantic direction class
|
|
4574
4628
|
classes.push(`stack-${this.direction()}`);
|
|
4575
|
-
|
|
4576
|
-
|
|
4577
|
-
classes.push('flex-row');
|
|
4578
|
-
}
|
|
4579
|
-
else {
|
|
4580
|
-
classes.push('flex-col');
|
|
4581
|
-
}
|
|
4582
|
-
// Semantic gap class
|
|
4629
|
+
classes.push(`stack-direction-${this.direction()}`);
|
|
4630
|
+
// Semantic gap class — drives density via [data-density] ancestor
|
|
4583
4631
|
classes.push(`stack-gap-${this.gap()}`);
|
|
4584
|
-
// Gap
|
|
4585
|
-
const gapMap = {
|
|
4586
|
-
none: 'gap-0',
|
|
4587
|
-
xs: 'gap-1',
|
|
4588
|
-
sm: 'gap-2',
|
|
4589
|
-
md: 'gap-4',
|
|
4590
|
-
lg: 'gap-6',
|
|
4591
|
-
xl: 'gap-8',
|
|
4592
|
-
};
|
|
4593
|
-
classes.push(gapMap[this.gap()]);
|
|
4594
4632
|
// Alignment
|
|
4595
|
-
|
|
4596
|
-
start: 'items-start',
|
|
4597
|
-
center: 'items-center',
|
|
4598
|
-
end: 'items-end',
|
|
4599
|
-
stretch: 'items-stretch',
|
|
4600
|
-
baseline: 'items-baseline',
|
|
4601
|
-
};
|
|
4602
|
-
classes.push(alignMap[this.align()]);
|
|
4633
|
+
classes.push(`stack-align-${this.align()}`);
|
|
4603
4634
|
// Justification
|
|
4604
|
-
|
|
4605
|
-
start: 'justify-start',
|
|
4606
|
-
center: 'justify-center',
|
|
4607
|
-
end: 'justify-end',
|
|
4608
|
-
between: 'justify-between',
|
|
4609
|
-
around: 'justify-around',
|
|
4610
|
-
evenly: 'justify-evenly',
|
|
4611
|
-
};
|
|
4612
|
-
classes.push(justifyMap[this.justify()]);
|
|
4613
|
-
// Wrap
|
|
4635
|
+
classes.push(`stack-justify-${this.justify()}`);
|
|
4614
4636
|
if (this.wrap()) {
|
|
4615
|
-
classes.push('
|
|
4637
|
+
classes.push('stack-wrap');
|
|
4616
4638
|
}
|
|
4617
|
-
// Full width
|
|
4618
4639
|
if (this.fullWidth()) {
|
|
4619
|
-
classes.push('
|
|
4640
|
+
classes.push('stack-full-width');
|
|
4620
4641
|
}
|
|
4621
4642
|
return classes.join(' ');
|
|
4622
4643
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
4623
4644
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4624
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: StackComponent, isStandalone: true, selector: "lc-stack", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4645
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: StackComponent, isStandalone: true, selector: "lc-stack", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex}:host(.stack-direction-vertical){flex-direction:column}:host(.stack-direction-horizontal){flex-direction:row}:host(.stack-gap-none){gap:var(--lc-density-gap-none, 0)}:host(.stack-gap-xs){gap:var(--lc-density-gap-xs, .25rem)}:host(.stack-gap-sm){gap:var(--lc-density-gap-sm, .5rem)}:host(.stack-gap-md){gap:var(--lc-density-gap-md, 1rem)}:host(.stack-gap-lg){gap:var(--lc-density-gap-lg, 1.5rem)}:host(.stack-gap-xl){gap:var(--lc-density-gap-xl, 2rem)}:host(.stack-align-start){align-items:flex-start}:host(.stack-align-center){align-items:center}:host(.stack-align-end){align-items:flex-end}:host(.stack-align-stretch){align-items:stretch}:host(.stack-align-baseline){align-items:baseline}:host(.stack-justify-start){justify-content:flex-start}:host(.stack-justify-center){justify-content:center}:host(.stack-justify-end){justify-content:flex-end}:host(.stack-justify-between){justify-content:space-between}:host(.stack-justify-around){justify-content:space-around}:host(.stack-justify-evenly){justify-content:space-evenly}:host(.stack-wrap){flex-wrap:wrap}:host(.stack-full-width){width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4625
4646
|
}
|
|
4626
4647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StackComponent, decorators: [{
|
|
4627
4648
|
type: Component,
|
|
4628
|
-
args: [{ selector: 'lc-stack', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
|
|
4649
|
+
args: [{ selector: 'lc-stack', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex}:host(.stack-direction-vertical){flex-direction:column}:host(.stack-direction-horizontal){flex-direction:row}:host(.stack-gap-none){gap:var(--lc-density-gap-none, 0)}:host(.stack-gap-xs){gap:var(--lc-density-gap-xs, .25rem)}:host(.stack-gap-sm){gap:var(--lc-density-gap-sm, .5rem)}:host(.stack-gap-md){gap:var(--lc-density-gap-md, 1rem)}:host(.stack-gap-lg){gap:var(--lc-density-gap-lg, 1.5rem)}:host(.stack-gap-xl){gap:var(--lc-density-gap-xl, 2rem)}:host(.stack-align-start){align-items:flex-start}:host(.stack-align-center){align-items:center}:host(.stack-align-end){align-items:flex-end}:host(.stack-align-stretch){align-items:stretch}:host(.stack-align-baseline){align-items:baseline}:host(.stack-justify-start){justify-content:flex-start}:host(.stack-justify-center){justify-content:center}:host(.stack-justify-end){justify-content:flex-end}:host(.stack-justify-between){justify-content:space-between}:host(.stack-justify-around){justify-content:space-around}:host(.stack-justify-evenly){justify-content:space-evenly}:host(.stack-wrap){flex-wrap:wrap}:host(.stack-full-width){width:100%}\n"] }]
|
|
4629
4650
|
}], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], hostClasses: [{
|
|
4630
4651
|
type: HostBinding,
|
|
4631
4652
|
args: ['class']
|
|
4632
4653
|
}] } });
|
|
4633
4654
|
|
|
4655
|
+
/**
|
|
4656
|
+
* Toolbar — a horizontal strip of controls with built-in density-aware spacing.
|
|
4657
|
+
*
|
|
4658
|
+
* Use for action bars above tables, on top of cards, inside drawers, or
|
|
4659
|
+
* anywhere a row of buttons / filters / titles needs consistent rhythm.
|
|
4660
|
+
*
|
|
4661
|
+
* The toolbar exposes three slots:
|
|
4662
|
+
* - `[slot="start"]` — leading content (icon, title, primary filter)
|
|
4663
|
+
* - default — middle content (grows to fill remaining space)
|
|
4664
|
+
* - `[slot="end"]` — trailing actions (right-aligned)
|
|
4665
|
+
*
|
|
4666
|
+
* If only `[slot="start"]` and `[slot="end"]` are provided, the middle
|
|
4667
|
+
* automatically becomes a flexible spacer so actions push to the right.
|
|
4668
|
+
*
|
|
4669
|
+
* Padding, gap and divider styles are driven by `--lc-density-padding-*`
|
|
4670
|
+
* and `--lc-density-gap-*` tokens, so wrapping a `data-density` ancestor
|
|
4671
|
+
* automatically rescales the toolbar — no template changes needed.
|
|
4672
|
+
*
|
|
4673
|
+
* @example
|
|
4674
|
+
* ```html
|
|
4675
|
+
* <lc-toolbar>
|
|
4676
|
+
* <h2 slot="start">Reports</h2>
|
|
4677
|
+
* <lc-button slot="end" variant="secondary">Export</lc-button>
|
|
4678
|
+
* <lc-button slot="end" variant="primary">New report</lc-button>
|
|
4679
|
+
* </lc-toolbar>
|
|
4680
|
+
* ```
|
|
4681
|
+
*/
|
|
4682
|
+
class ToolbarComponent {
|
|
4683
|
+
/**
|
|
4684
|
+
* Visual density of the toolbar itself.
|
|
4685
|
+
* - `comfortable` — generous padding/gap (default for dashboards)
|
|
4686
|
+
* - `cosy` — balanced padding/gap (default in chrome)
|
|
4687
|
+
* - `compact` — tight, data-dense (tables, side panels)
|
|
4688
|
+
*/
|
|
4689
|
+
density = input('cosy', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
|
|
4690
|
+
/**
|
|
4691
|
+
* Background variant.
|
|
4692
|
+
* - `transparent` — inherits parent background (default)
|
|
4693
|
+
* - `surface` — subtle surface color (use when stacking on page bg)
|
|
4694
|
+
* - `muted` — slightly stronger fill (use as a toolbar on a card)
|
|
4695
|
+
*/
|
|
4696
|
+
background = input('transparent', ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
|
|
4697
|
+
/**
|
|
4698
|
+
* Border placement.
|
|
4699
|
+
* - `none` — no border (default)
|
|
4700
|
+
* - `bottom` — divider below the toolbar
|
|
4701
|
+
* - `top` — divider above the toolbar
|
|
4702
|
+
* - `around` — full border
|
|
4703
|
+
*/
|
|
4704
|
+
border = input('none', ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
|
|
4705
|
+
/**
|
|
4706
|
+
* Allow toolbar content to wrap onto multiple lines on small viewports.
|
|
4707
|
+
* @default true
|
|
4708
|
+
*/
|
|
4709
|
+
wrap = input(true, ...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
|
|
4710
|
+
/**
|
|
4711
|
+
* Vertical alignment of toolbar children.
|
|
4712
|
+
* @default 'center'
|
|
4713
|
+
*/
|
|
4714
|
+
align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
4715
|
+
/**
|
|
4716
|
+
* Sticky behavior — pins the toolbar to the top of its scroll container.
|
|
4717
|
+
* @default false
|
|
4718
|
+
*/
|
|
4719
|
+
sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
|
|
4720
|
+
hostClasses = computed(() => [
|
|
4721
|
+
'lc-toolbar',
|
|
4722
|
+
`lc-toolbar--density-${this.density()}`,
|
|
4723
|
+
`lc-toolbar--bg-${this.background()}`,
|
|
4724
|
+
`lc-toolbar--border-${this.border()}`,
|
|
4725
|
+
`lc-toolbar--align-${this.align()}`,
|
|
4726
|
+
this.wrap() ? 'lc-toolbar--wrap' : null,
|
|
4727
|
+
this.sticky() ? 'lc-toolbar--sticky' : null,
|
|
4728
|
+
]
|
|
4729
|
+
.filter(Boolean)
|
|
4730
|
+
.join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
4731
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4732
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: ToolbarComponent, isStandalone: true, selector: "lc-toolbar", inputs: { density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"lc-toolbar__start\">\n <ng-content select=\"[slot='start']\" />\n</div>\n\n<div class=\"lc-toolbar__main\">\n <ng-content />\n</div>\n\n<div class=\"lc-toolbar__end\">\n <ng-content select=\"[slot='end']\" />\n</div>\n", styles: [".lc-toolbar{display:flex;flex-direction:row;align-items:center;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-sm, .75rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}.lc-toolbar__start,.lc-toolbar__end{display:flex;align-items:inherit;gap:var(--lc-density-gap-sm, .5rem);min-width:0;flex:0 0 auto}.lc-toolbar__main{display:flex;align-items:inherit;gap:var(--lc-density-gap-sm, .5rem);flex:1 1 auto;min-width:0}.lc-toolbar__end{margin-inline-start:auto;justify-content:flex-end}.lc-toolbar__start:empty,.lc-toolbar__main:empty,.lc-toolbar__end:empty{display:none}.lc-toolbar--density-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-sm: .375rem;--lc-density-padding-md: .5rem}.lc-toolbar--density-cosy{--lc-density-gap-md: .75rem;--lc-density-gap-sm: .5rem;--lc-density-padding-sm: .625rem;--lc-density-padding-md: .875rem}.lc-toolbar--density-comfortable{--lc-density-gap-md: 1rem;--lc-density-gap-sm: .625rem;--lc-density-padding-sm: .875rem;--lc-density-padding-md: 1.25rem}.lc-toolbar--bg-transparent{background:transparent}.lc-toolbar--bg-surface{background:var(--color-surface, var(--color-neutral-0, #fff))}.lc-toolbar--bg-muted{background:var(--color-surface-muted, var(--color-neutral-50, #f5f5f5))}.lc-toolbar--border-none{border:0}.lc-toolbar--border-bottom{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}.lc-toolbar--border-top{border-top:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}.lc-toolbar--border-around{border:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5));border-radius:var(--radius-md, .5rem)}.lc-toolbar--align-start{align-items:flex-start}.lc-toolbar--align-center{align-items:center}.lc-toolbar--align-end{align-items:flex-end}.lc-toolbar--align-stretch{align-items:stretch}.lc-toolbar--align-baseline{align-items:baseline}.lc-toolbar--wrap{flex-wrap:wrap;row-gap:var(--lc-density-gap-sm, .5rem)}.lc-toolbar--sticky{position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4733
|
+
}
|
|
4734
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
4735
|
+
type: Component,
|
|
4736
|
+
args: [{ selector: 'lc-toolbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
4737
|
+
'[class]': 'hostClasses()',
|
|
4738
|
+
role: 'toolbar',
|
|
4739
|
+
}, template: "<div class=\"lc-toolbar__start\">\n <ng-content select=\"[slot='start']\" />\n</div>\n\n<div class=\"lc-toolbar__main\">\n <ng-content />\n</div>\n\n<div class=\"lc-toolbar__end\">\n <ng-content select=\"[slot='end']\" />\n</div>\n", styles: [".lc-toolbar{display:flex;flex-direction:row;align-items:center;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-sm, .75rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}.lc-toolbar__start,.lc-toolbar__end{display:flex;align-items:inherit;gap:var(--lc-density-gap-sm, .5rem);min-width:0;flex:0 0 auto}.lc-toolbar__main{display:flex;align-items:inherit;gap:var(--lc-density-gap-sm, .5rem);flex:1 1 auto;min-width:0}.lc-toolbar__end{margin-inline-start:auto;justify-content:flex-end}.lc-toolbar__start:empty,.lc-toolbar__main:empty,.lc-toolbar__end:empty{display:none}.lc-toolbar--density-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-sm: .375rem;--lc-density-padding-md: .5rem}.lc-toolbar--density-cosy{--lc-density-gap-md: .75rem;--lc-density-gap-sm: .5rem;--lc-density-padding-sm: .625rem;--lc-density-padding-md: .875rem}.lc-toolbar--density-comfortable{--lc-density-gap-md: 1rem;--lc-density-gap-sm: .625rem;--lc-density-padding-sm: .875rem;--lc-density-padding-md: 1.25rem}.lc-toolbar--bg-transparent{background:transparent}.lc-toolbar--bg-surface{background:var(--color-surface, var(--color-neutral-0, #fff))}.lc-toolbar--bg-muted{background:var(--color-surface-muted, var(--color-neutral-50, #f5f5f5))}.lc-toolbar--border-none{border:0}.lc-toolbar--border-bottom{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}.lc-toolbar--border-top{border-top:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}.lc-toolbar--border-around{border:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5));border-radius:var(--radius-md, .5rem)}.lc-toolbar--align-start{align-items:flex-start}.lc-toolbar--align-center{align-items:center}.lc-toolbar--align-end{align-items:flex-end}.lc-toolbar--align-stretch{align-items:stretch}.lc-toolbar--align-baseline{align-items:baseline}.lc-toolbar--wrap{flex-wrap:wrap;row-gap:var(--lc-density-gap-sm, .5rem)}.lc-toolbar--sticky{position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}\n"] }]
|
|
4740
|
+
}], propDecorators: { density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
|
|
4741
|
+
|
|
4634
4742
|
/**
|
|
4635
4743
|
* Maps common Cognito error codes to user-friendly messages
|
|
4636
4744
|
*/
|
|
@@ -5001,7 +5109,7 @@ class ToastComponent {
|
|
|
5001
5109
|
}
|
|
5002
5110
|
}
|
|
5003
5111
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5004
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ToastComponent, isStandalone: true, selector: "lc-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "hostClasses()", "attr.role": "ariaRole()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "\"true\"" } }, ngImport: i0, template: "<div [class]=\"containerClasses()\">\n <div class=\"lc-toast__icon\">\n <lc-icon [name]=\"defaultIcon()\" size=\"md\" />\n </div>\n \n <div class=\"lc-toast__message\">\n {{ toast().message }}\n </div>\n \n @if (toast().action) {\n <button\n type=\"button\"\n class=\"lc-toast__action\"\n (click)=\"onActionClick($event)\"\n >\n {{ toast().action?.label }}\n </button>\n }\n \n @if (toast().showCloseButton) {\n <button\n type=\"button\"\n class=\"lc-toast__close\"\n aria-label=\"Close notification\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n }\n</div>\n", styles: [":host{display:block;width:100%;max-width:400px;margin-bottom:var(--spacing-2)}.lc-toast{border-radius:var(--border-radius-md);box-shadow:var(--elevation-lg);border-width:1px;border-style:solid;animation:slideIn .15s ease-out;pointer-events:auto}.lc-toast__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--spacing-4)}.lc-toast__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-toast__message{flex:1;min-width:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);padding-top:2px}.lc-toast__action{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:background-color .15s ease-in-out}.lc-toast__action:hover{background-color:#0000000d}.lc-toast__action:focus-visible{outline:2px solid currentColor;outline-offset:2px}.lc-toast__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-toast__close:hover{background-color:#0000000d}.lc-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.lc-toast--success{background-color:#cdd6c2;border-color:#8ea475;color:#5f7150}.lc-toast--success .lc-toast__icon{color:#8ea475}.lc-toast--success .lc-toast__action{color:#5f7150}.lc-toast--success .lc-toast__action:hover,.lc-toast--success .lc-toast__close:hover{background-color:#8ea4751a}.lc-toast--error{background-color:#f7a1a1;border-color:#9d0e0e;color:#6b0909}.lc-toast--error .lc-toast__icon{color:#9d0e0e}.lc-toast--error .lc-toast__action{color:#6b0909}.lc-toast--error .lc-toast__action:hover,.lc-toast--error .lc-toast__close:hover{background-color:#9d0e0e1a}.lc-toast--warning{background-color:#f1d3a7;border-color:#e1a040;color:#9b6b2b}.lc-toast--warning .lc-toast__icon{color:#e1a040}.lc-toast--warning .lc-toast__action{color:#9b6b2b}.lc-toast--warning .lc-toast__action:hover,.lc-toast--warning .lc-toast__close:hover{background-color:#e1a0401a}.lc-toast--info{background-color:#b8cee0;border-color:#3b6588;color:#27445c}.lc-toast--info .lc-toast__icon{color:#3b6588}.lc-toast--info .lc-toast__action{color:#27445c}.lc-toast--info .lc-toast__action:hover,.lc-toast--info .lc-toast__close:hover{background-color:#3b65881a}:host-context(.dark) .lc-toast--success{background-color:rgba(var(--color-success-900-rgb),.9);border-color:var(--color-success-700);color:var(--color-success-100)}:host-context(.dark) .lc-toast--success .lc-toast__icon{color:var(--color-success-400)}:host-context(.dark) .lc-toast--success .lc-toast__action{color:var(--color-success-300)}:host-context(.dark) .lc-toast--success .lc-toast__action:hover{background-color:rgba(var(--color-success-700-rgb),.3)}:host-context(.dark) .lc-toast--success .lc-toast__close:hover{background-color:rgba(var(--color-success-700-rgb),.3)}:host-context(.dark) .lc-toast--error{background-color:rgba(var(--color-error-900-rgb),.9);border-color:var(--color-error-700);color:var(--color-error-100)}:host-context(.dark) .lc-toast--error .lc-toast__icon{color:var(--color-error-400)}:host-context(.dark) .lc-toast--error .lc-toast__action{color:var(--color-error-300)}:host-context(.dark) .lc-toast--error .lc-toast__action:hover{background-color:rgba(var(--color-error-700-rgb),.3)}:host-context(.dark) .lc-toast--error .lc-toast__close:hover{background-color:rgba(var(--color-error-700-rgb),.3)}:host-context(.dark) .lc-toast--warning{background-color:rgba(var(--color-warning-900-rgb),.9);border-color:var(--color-warning-700);color:var(--color-warning-100)}:host-context(.dark) .lc-toast--warning .lc-toast__icon{color:var(--color-warning-400)}:host-context(.dark) .lc-toast--warning .lc-toast__action{color:var(--color-warning-300)}:host-context(.dark) .lc-toast--warning .lc-toast__action:hover{background-color:rgba(var(--color-warning-700-rgb),.3)}:host-context(.dark) .lc-toast--warning .lc-toast__close:hover{background-color:rgba(var(--color-warning-700-rgb),.3)}:host-context(.dark) .lc-toast--info{background-color:rgba(var(--color-info-900-rgb),.9);border-color:var(--color-info-700);color:var(--color-info-100)}:host-context(.dark) .lc-toast--info .lc-toast__icon{color:var(--color-info-400)}:host-context(.dark) .lc-toast--info .lc-toast__action{color:var(--color-info-300)}:host-context(.dark) .lc-toast--info .lc-toast__action:hover{background-color:rgba(var(--color-info-700-rgb),.3)}:host-context(.dark) .lc-toast--info .lc-toast__close:hover{background-color:rgba(var(--color-info-700-rgb),.3)}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-toast{animation:none}@keyframes slideIn{0%,to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%,to{transform:translateY(0);opacity:0}}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ToastComponent, isStandalone: true, selector: "lc-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "hostClasses()", "attr.role": "ariaRole()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "\"true\"" } }, ngImport: i0, template: "<div [class]=\"containerClasses()\">\n <div class=\"lc-toast__icon\">\n <lc-icon [name]=\"defaultIcon()\" size=\"md\" />\n </div>\n \n <div class=\"lc-toast__message\">\n {{ toast().message }}\n </div>\n \n @if (toast().action) {\n <button\n type=\"button\"\n class=\"lc-toast__action\"\n (click)=\"onActionClick($event)\"\n >\n {{ toast().action?.label }}\n </button>\n }\n \n @if (toast().showCloseButton) {\n <button\n type=\"button\"\n class=\"lc-toast__close\"\n aria-label=\"Close notification\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n }\n</div>\n", styles: [":host{display:block;width:100%;max-width:400px;margin-bottom:var(--spacing-2)}.lc-toast{border-radius:var(--border-radius-md);box-shadow:var(--elevation-lg);border-width:1px;border-style:solid;animation:slideIn .15s ease-out;pointer-events:auto}.lc-toast__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-toast__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-toast__message{flex:1;min-width:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);padding-top:2px}.lc-toast__action{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:background-color .15s ease-in-out}.lc-toast__action:hover{background-color:#0000000d}.lc-toast__action:focus-visible{outline:2px solid currentColor;outline-offset:2px}.lc-toast__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-toast__close:hover{background-color:#0000000d}.lc-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.lc-toast--success{background-color:#cdd6c2;border-color:#8ea475;color:#5f7150}.lc-toast--success .lc-toast__icon{color:#8ea475}.lc-toast--success .lc-toast__action{color:#5f7150}.lc-toast--success .lc-toast__action:hover,.lc-toast--success .lc-toast__close:hover{background-color:#8ea4751a}.lc-toast--error{background-color:#f7a1a1;border-color:#9d0e0e;color:#6b0909}.lc-toast--error .lc-toast__icon{color:#9d0e0e}.lc-toast--error .lc-toast__action{color:#6b0909}.lc-toast--error .lc-toast__action:hover,.lc-toast--error .lc-toast__close:hover{background-color:#9d0e0e1a}.lc-toast--warning{background-color:#f1d3a7;border-color:#e1a040;color:#9b6b2b}.lc-toast--warning .lc-toast__icon{color:#e1a040}.lc-toast--warning .lc-toast__action{color:#9b6b2b}.lc-toast--warning .lc-toast__action:hover,.lc-toast--warning .lc-toast__close:hover{background-color:#e1a0401a}.lc-toast--info{background-color:#b8cee0;border-color:#3b6588;color:#27445c}.lc-toast--info .lc-toast__icon{color:#3b6588}.lc-toast--info .lc-toast__action{color:#27445c}.lc-toast--info .lc-toast__action:hover,.lc-toast--info .lc-toast__close:hover{background-color:#3b65881a}:host-context(.dark) .lc-toast--success{background-color:rgba(var(--color-success-900-rgb),.9);border-color:var(--color-success-700);color:var(--color-success-100)}:host-context(.dark) .lc-toast--success .lc-toast__icon{color:var(--color-success-400)}:host-context(.dark) .lc-toast--success .lc-toast__action{color:var(--color-success-300)}:host-context(.dark) .lc-toast--success .lc-toast__action:hover{background-color:rgba(var(--color-success-700-rgb),.3)}:host-context(.dark) .lc-toast--success .lc-toast__close:hover{background-color:rgba(var(--color-success-700-rgb),.3)}:host-context(.dark) .lc-toast--error{background-color:rgba(var(--color-error-900-rgb),.9);border-color:var(--color-error-700);color:var(--color-error-100)}:host-context(.dark) .lc-toast--error .lc-toast__icon{color:var(--color-error-400)}:host-context(.dark) .lc-toast--error .lc-toast__action{color:var(--color-error-300)}:host-context(.dark) .lc-toast--error .lc-toast__action:hover{background-color:rgba(var(--color-error-700-rgb),.3)}:host-context(.dark) .lc-toast--error .lc-toast__close:hover{background-color:rgba(var(--color-error-700-rgb),.3)}:host-context(.dark) .lc-toast--warning{background-color:rgba(var(--color-warning-900-rgb),.9);border-color:var(--color-warning-700);color:var(--color-warning-100)}:host-context(.dark) .lc-toast--warning .lc-toast__icon{color:var(--color-warning-400)}:host-context(.dark) .lc-toast--warning .lc-toast__action{color:var(--color-warning-300)}:host-context(.dark) .lc-toast--warning .lc-toast__action:hover{background-color:rgba(var(--color-warning-700-rgb),.3)}:host-context(.dark) .lc-toast--warning .lc-toast__close:hover{background-color:rgba(var(--color-warning-700-rgb),.3)}:host-context(.dark) .lc-toast--info{background-color:rgba(var(--color-info-900-rgb),.9);border-color:var(--color-info-700);color:var(--color-info-100)}:host-context(.dark) .lc-toast--info .lc-toast__icon{color:var(--color-info-400)}:host-context(.dark) .lc-toast--info .lc-toast__action{color:var(--color-info-300)}:host-context(.dark) .lc-toast--info .lc-toast__action:hover{background-color:rgba(var(--color-info-700-rgb),.3)}:host-context(.dark) .lc-toast--info .lc-toast__close:hover{background-color:rgba(var(--color-info-700-rgb),.3)}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-toast{animation:none}@keyframes slideIn{0%,to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%,to{transform:translateY(0);opacity:0}}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5005
5113
|
}
|
|
5006
5114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ToastComponent, decorators: [{
|
|
5007
5115
|
type: Component,
|
|
@@ -5010,7 +5118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
5010
5118
|
'[attr.role]': 'ariaRole()',
|
|
5011
5119
|
'[attr.aria-live]': 'ariaLive()',
|
|
5012
5120
|
'[attr.aria-atomic]': '"true"',
|
|
5013
|
-
}, template: "<div [class]=\"containerClasses()\">\n <div class=\"lc-toast__icon\">\n <lc-icon [name]=\"defaultIcon()\" size=\"md\" />\n </div>\n \n <div class=\"lc-toast__message\">\n {{ toast().message }}\n </div>\n \n @if (toast().action) {\n <button\n type=\"button\"\n class=\"lc-toast__action\"\n (click)=\"onActionClick($event)\"\n >\n {{ toast().action?.label }}\n </button>\n }\n \n @if (toast().showCloseButton) {\n <button\n type=\"button\"\n class=\"lc-toast__close\"\n aria-label=\"Close notification\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n }\n</div>\n", styles: [":host{display:block;width:100%;max-width:400px;margin-bottom:var(--spacing-2)}.lc-toast{border-radius:var(--border-radius-md);box-shadow:var(--elevation-lg);border-width:1px;border-style:solid;animation:slideIn .15s ease-out;pointer-events:auto}.lc-toast__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--spacing-4)}.lc-toast__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-toast__message{flex:1;min-width:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);padding-top:2px}.lc-toast__action{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:background-color .15s ease-in-out}.lc-toast__action:hover{background-color:#0000000d}.lc-toast__action:focus-visible{outline:2px solid currentColor;outline-offset:2px}.lc-toast__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-toast__close:hover{background-color:#0000000d}.lc-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.lc-toast--success{background-color:#cdd6c2;border-color:#8ea475;color:#5f7150}.lc-toast--success .lc-toast__icon{color:#8ea475}.lc-toast--success .lc-toast__action{color:#5f7150}.lc-toast--success .lc-toast__action:hover,.lc-toast--success .lc-toast__close:hover{background-color:#8ea4751a}.lc-toast--error{background-color:#f7a1a1;border-color:#9d0e0e;color:#6b0909}.lc-toast--error .lc-toast__icon{color:#9d0e0e}.lc-toast--error .lc-toast__action{color:#6b0909}.lc-toast--error .lc-toast__action:hover,.lc-toast--error .lc-toast__close:hover{background-color:#9d0e0e1a}.lc-toast--warning{background-color:#f1d3a7;border-color:#e1a040;color:#9b6b2b}.lc-toast--warning .lc-toast__icon{color:#e1a040}.lc-toast--warning .lc-toast__action{color:#9b6b2b}.lc-toast--warning .lc-toast__action:hover,.lc-toast--warning .lc-toast__close:hover{background-color:#e1a0401a}.lc-toast--info{background-color:#b8cee0;border-color:#3b6588;color:#27445c}.lc-toast--info .lc-toast__icon{color:#3b6588}.lc-toast--info .lc-toast__action{color:#27445c}.lc-toast--info .lc-toast__action:hover,.lc-toast--info .lc-toast__close:hover{background-color:#3b65881a}:host-context(.dark) .lc-toast--success{background-color:rgba(var(--color-success-900-rgb),.9);border-color:var(--color-success-700);color:var(--color-success-100)}:host-context(.dark) .lc-toast--success .lc-toast__icon{color:var(--color-success-400)}:host-context(.dark) .lc-toast--success .lc-toast__action{color:var(--color-success-300)}:host-context(.dark) .lc-toast--success .lc-toast__action:hover{background-color:rgba(var(--color-success-700-rgb),.3)}:host-context(.dark) .lc-toast--success .lc-toast__close:hover{background-color:rgba(var(--color-success-700-rgb),.3)}:host-context(.dark) .lc-toast--error{background-color:rgba(var(--color-error-900-rgb),.9);border-color:var(--color-error-700);color:var(--color-error-100)}:host-context(.dark) .lc-toast--error .lc-toast__icon{color:var(--color-error-400)}:host-context(.dark) .lc-toast--error .lc-toast__action{color:var(--color-error-300)}:host-context(.dark) .lc-toast--error .lc-toast__action:hover{background-color:rgba(var(--color-error-700-rgb),.3)}:host-context(.dark) .lc-toast--error .lc-toast__close:hover{background-color:rgba(var(--color-error-700-rgb),.3)}:host-context(.dark) .lc-toast--warning{background-color:rgba(var(--color-warning-900-rgb),.9);border-color:var(--color-warning-700);color:var(--color-warning-100)}:host-context(.dark) .lc-toast--warning .lc-toast__icon{color:var(--color-warning-400)}:host-context(.dark) .lc-toast--warning .lc-toast__action{color:var(--color-warning-300)}:host-context(.dark) .lc-toast--warning .lc-toast__action:hover{background-color:rgba(var(--color-warning-700-rgb),.3)}:host-context(.dark) .lc-toast--warning .lc-toast__close:hover{background-color:rgba(var(--color-warning-700-rgb),.3)}:host-context(.dark) .lc-toast--info{background-color:rgba(var(--color-info-900-rgb),.9);border-color:var(--color-info-700);color:var(--color-info-100)}:host-context(.dark) .lc-toast--info .lc-toast__icon{color:var(--color-info-400)}:host-context(.dark) .lc-toast--info .lc-toast__action{color:var(--color-info-300)}:host-context(.dark) .lc-toast--info .lc-toast__action:hover{background-color:rgba(var(--color-info-700-rgb),.3)}:host-context(.dark) .lc-toast--info .lc-toast__close:hover{background-color:rgba(var(--color-info-700-rgb),.3)}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-toast{animation:none}@keyframes slideIn{0%,to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%,to{transform:translateY(0);opacity:0}}}\n"] }]
|
|
5121
|
+
}, template: "<div [class]=\"containerClasses()\">\n <div class=\"lc-toast__icon\">\n <lc-icon [name]=\"defaultIcon()\" size=\"md\" />\n </div>\n \n <div class=\"lc-toast__message\">\n {{ toast().message }}\n </div>\n \n @if (toast().action) {\n <button\n type=\"button\"\n class=\"lc-toast__action\"\n (click)=\"onActionClick($event)\"\n >\n {{ toast().action?.label }}\n </button>\n }\n \n @if (toast().showCloseButton) {\n <button\n type=\"button\"\n class=\"lc-toast__close\"\n aria-label=\"Close notification\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n }\n</div>\n", styles: [":host{display:block;width:100%;max-width:400px;margin-bottom:var(--spacing-2)}.lc-toast{border-radius:var(--border-radius-md);box-shadow:var(--elevation-lg);border-width:1px;border-style:solid;animation:slideIn .15s ease-out;pointer-events:auto}.lc-toast__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-toast__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-toast__message{flex:1;min-width:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);padding-top:2px}.lc-toast__action{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:background-color .15s ease-in-out}.lc-toast__action:hover{background-color:#0000000d}.lc-toast__action:focus-visible{outline:2px solid currentColor;outline-offset:2px}.lc-toast__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-toast__close:hover{background-color:#0000000d}.lc-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.lc-toast--success{background-color:#cdd6c2;border-color:#8ea475;color:#5f7150}.lc-toast--success .lc-toast__icon{color:#8ea475}.lc-toast--success .lc-toast__action{color:#5f7150}.lc-toast--success .lc-toast__action:hover,.lc-toast--success .lc-toast__close:hover{background-color:#8ea4751a}.lc-toast--error{background-color:#f7a1a1;border-color:#9d0e0e;color:#6b0909}.lc-toast--error .lc-toast__icon{color:#9d0e0e}.lc-toast--error .lc-toast__action{color:#6b0909}.lc-toast--error .lc-toast__action:hover,.lc-toast--error .lc-toast__close:hover{background-color:#9d0e0e1a}.lc-toast--warning{background-color:#f1d3a7;border-color:#e1a040;color:#9b6b2b}.lc-toast--warning .lc-toast__icon{color:#e1a040}.lc-toast--warning .lc-toast__action{color:#9b6b2b}.lc-toast--warning .lc-toast__action:hover,.lc-toast--warning .lc-toast__close:hover{background-color:#e1a0401a}.lc-toast--info{background-color:#b8cee0;border-color:#3b6588;color:#27445c}.lc-toast--info .lc-toast__icon{color:#3b6588}.lc-toast--info .lc-toast__action{color:#27445c}.lc-toast--info .lc-toast__action:hover,.lc-toast--info .lc-toast__close:hover{background-color:#3b65881a}:host-context(.dark) .lc-toast--success{background-color:rgba(var(--color-success-900-rgb),.9);border-color:var(--color-success-700);color:var(--color-success-100)}:host-context(.dark) .lc-toast--success .lc-toast__icon{color:var(--color-success-400)}:host-context(.dark) .lc-toast--success .lc-toast__action{color:var(--color-success-300)}:host-context(.dark) .lc-toast--success .lc-toast__action:hover{background-color:rgba(var(--color-success-700-rgb),.3)}:host-context(.dark) .lc-toast--success .lc-toast__close:hover{background-color:rgba(var(--color-success-700-rgb),.3)}:host-context(.dark) .lc-toast--error{background-color:rgba(var(--color-error-900-rgb),.9);border-color:var(--color-error-700);color:var(--color-error-100)}:host-context(.dark) .lc-toast--error .lc-toast__icon{color:var(--color-error-400)}:host-context(.dark) .lc-toast--error .lc-toast__action{color:var(--color-error-300)}:host-context(.dark) .lc-toast--error .lc-toast__action:hover{background-color:rgba(var(--color-error-700-rgb),.3)}:host-context(.dark) .lc-toast--error .lc-toast__close:hover{background-color:rgba(var(--color-error-700-rgb),.3)}:host-context(.dark) .lc-toast--warning{background-color:rgba(var(--color-warning-900-rgb),.9);border-color:var(--color-warning-700);color:var(--color-warning-100)}:host-context(.dark) .lc-toast--warning .lc-toast__icon{color:var(--color-warning-400)}:host-context(.dark) .lc-toast--warning .lc-toast__action{color:var(--color-warning-300)}:host-context(.dark) .lc-toast--warning .lc-toast__action:hover{background-color:rgba(var(--color-warning-700-rgb),.3)}:host-context(.dark) .lc-toast--warning .lc-toast__close:hover{background-color:rgba(var(--color-warning-700-rgb),.3)}:host-context(.dark) .lc-toast--info{background-color:rgba(var(--color-info-900-rgb),.9);border-color:var(--color-info-700);color:var(--color-info-100)}:host-context(.dark) .lc-toast--info .lc-toast__icon{color:var(--color-info-400)}:host-context(.dark) .lc-toast--info .lc-toast__action{color:var(--color-info-300)}:host-context(.dark) .lc-toast--info .lc-toast__action:hover{background-color:rgba(var(--color-info-700-rgb),.3)}:host-context(.dark) .lc-toast--info .lc-toast__close:hover{background-color:rgba(var(--color-info-700-rgb),.3)}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-toast{animation:none}@keyframes slideIn{0%,to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%,to{transform:translateY(0);opacity:0}}}\n"] }]
|
|
5014
5122
|
}], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
5015
5123
|
|
|
5016
5124
|
/**
|
|
@@ -5208,11 +5316,11 @@ class ModalComponent {
|
|
|
5208
5316
|
}
|
|
5209
5317
|
}
|
|
5210
5318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5211
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ModalComponent, isStandalone: true, selector: "lc-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalOpened: "modalOpened", modalClosed: "modalClosed", openChange: "openChange", backdropClicked: "backdropClicked" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true }], ngImport: i0, template: "@if (_open()) {\n <!-- Backdrop -->\n <div\n class=\"
|
|
5319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ModalComponent, isStandalone: true, selector: "lc-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalOpened: "modalOpened", modalClosed: "modalClosed", openChange: "openChange", backdropClicked: "backdropClicked" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true }], ngImport: i0, template: "@if (_open()) {\n <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n `cdk-overlay-backdrop` class here \u2014 it would be styled by global CDK\n rules and, vice versa, leak modal styling onto other overlays.) -->\n <div\n class=\"lc-modal-backdrop\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n\n <!-- Modal Content -->\n <div\n #modalContent\n [class]=\"modalClasses()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"lc-modal__header\">\n <ng-content select=\"[slot='header']\" />\n \n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"lc-modal__close\"\n aria-label=\"Close modal\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"md\" />\n </button>\n }\n </div>\n \n <div class=\"lc-modal__body\">\n <ng-content select=\"[slot='body']\" />\n <ng-content />\n </div>\n \n <div class=\"lc-modal__footer\">\n <ng-content select=\"[slot='footer']\" />\n </div>\n </div>\n}\n", styles: [":host{display:contents}.lc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:backdropFadeIn .15s ease-out}.lc-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--color-background);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-xl);z-index:1000;max-height:90vh;display:flex;flex-direction:column;animation:modalFadeIn .15s ease-out}.lc-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-modal__header h1,.lc-modal__header h2,.lc-modal__header h3,.lc-modal__header h4,.lc-modal__header h5,.lc-modal__header h6{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0;color:var(--color-text)}.lc-modal__body{flex:1;overflow-y:auto;padding:var(--lc-density-padding-md, var(--spacing-6));display:flex;flex-direction:column;gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-3));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__close{background:transparent;border:none;cursor:pointer;padding:var(--spacing-2);margin:calc(var(--spacing-2) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.lc-modal__close:hover{background-color:var(--color-surface)}.lc-modal__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-modal--sm{width:90%;max-width:400px}.lc-modal--md{width:90%;max-width:600px}.lc-modal--lg{width:90%;max-width:800px}.lc-modal--xl{width:90%;max-width:1200px}.lc-modal--full{width:100%;height:100%;max-width:none;max-height:none;border-radius:0}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-48%)}}@media(prefers-reduced-motion:reduce){.lc-modal-backdrop,.lc-modal{animation:none}@keyframes backdropFadeIn{0%,to{opacity:1}}@keyframes modalFadeIn{0%,to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%,to{opacity:0;transform:translate(-50%,-50%)}}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5212
5320
|
}
|
|
5213
5321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ModalComponent, decorators: [{
|
|
5214
5322
|
type: Component,
|
|
5215
|
-
args: [{ selector: 'lc-modal', standalone: true, imports: [A11yModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (_open()) {\n <!-- Backdrop -->\n <div\n class=\"
|
|
5323
|
+
args: [{ selector: 'lc-modal', standalone: true, imports: [A11yModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (_open()) {\n <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n `cdk-overlay-backdrop` class here \u2014 it would be styled by global CDK\n rules and, vice versa, leak modal styling onto other overlays.) -->\n <div\n class=\"lc-modal-backdrop\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n\n <!-- Modal Content -->\n <div\n #modalContent\n [class]=\"modalClasses()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"lc-modal__header\">\n <ng-content select=\"[slot='header']\" />\n \n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"lc-modal__close\"\n aria-label=\"Close modal\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"md\" />\n </button>\n }\n </div>\n \n <div class=\"lc-modal__body\">\n <ng-content select=\"[slot='body']\" />\n <ng-content />\n </div>\n \n <div class=\"lc-modal__footer\">\n <ng-content select=\"[slot='footer']\" />\n </div>\n </div>\n}\n", styles: [":host{display:contents}.lc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:backdropFadeIn .15s ease-out}.lc-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--color-background);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-xl);z-index:1000;max-height:90vh;display:flex;flex-direction:column;animation:modalFadeIn .15s ease-out}.lc-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-modal__header h1,.lc-modal__header h2,.lc-modal__header h3,.lc-modal__header h4,.lc-modal__header h5,.lc-modal__header h6{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0;color:var(--color-text)}.lc-modal__body{flex:1;overflow-y:auto;padding:var(--lc-density-padding-md, var(--spacing-6));display:flex;flex-direction:column;gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-3));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__close{background:transparent;border:none;cursor:pointer;padding:var(--spacing-2);margin:calc(var(--spacing-2) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.lc-modal__close:hover{background-color:var(--color-surface)}.lc-modal__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-modal--sm{width:90%;max-width:400px}.lc-modal--md{width:90%;max-width:600px}.lc-modal--lg{width:90%;max-width:800px}.lc-modal--xl{width:90%;max-width:1200px}.lc-modal--full{width:100%;height:100%;max-width:none;max-height:none;border-radius:0}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-48%)}}@media(prefers-reduced-motion:reduce){.lc-modal-backdrop,.lc-modal{animation:none}@keyframes backdropFadeIn{0%,to{opacity:1}}@keyframes modalFadeIn{0%,to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%,to{opacity:0;transform:translate(-50%,-50%)}}}\n"] }]
|
|
5216
5324
|
}], ctorParameters: () => [], propDecorators: { modalContent: [{
|
|
5217
5325
|
type: ViewChild,
|
|
5218
5326
|
args: ['modalContent']
|
|
@@ -5517,11 +5625,11 @@ class BreadcrumbsComponent {
|
|
|
5517
5625
|
return item.label === '...';
|
|
5518
5626
|
}
|
|
5519
5627
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5520
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BreadcrumbsComponent, isStandalone: true, selector: "lc-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (items().length > 0) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <ol [ngClass]=\"breadcrumbClasses()\">\n @for (item of visibleItems(); track item; let i = $index) {\n <li class=\"lc-breadcrumbs__item\">\n @if (isLastItem(i)) {\n <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (isEllipsis(item)) {\n <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n {{ item.label }}\n </span>\n } @else {\n <a\n [routerLink]=\"item.url\"\n class=\"lc-breadcrumbs__link\"\n >\n {{ item.label }}\n </a>\n }\n \n @if (!isLastItem(i)) {\n <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n {{ separator() }}\n </span>\n }\n </li>\n }\n </ol>\n \n <!-- Support for additional content projection -->\n <ng-content></ng-content>\n </nav>\n}\n", styles: [".lc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.lc-breadcrumbs--sm{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--sm .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--md{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs--lg{font-size:var(--font-size-base);gap:var(--spacing-3)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-3)}.lc-breadcrumbs__item{display:flex;align-items:center;list-style:none}.lc-breadcrumbs__link{color:var(--color-primary-600);text-decoration:none;transition:all var(--transition-normal);border-radius:var(--radius-sm);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__link:hover{color:var(--color-primary-700);background-color:var(--color-primary-50);text-decoration:underline}.lc-breadcrumbs__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-breadcrumbs__link:active{color:var(--color-primary-800)}.lc-breadcrumbs__current{color:var(--color-neutral-700);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__separator{color:var(--color-neutral-400);-webkit-user-select:none;user-select:none;pointer-events:none}.lc-breadcrumbs__ellipsis{color:var(--color-neutral-500);-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}:root[data-theme=dark] .lc-breadcrumbs__link{color:var(--color-primary-400)}:root[data-theme=dark] .lc-breadcrumbs__link:hover{color:var(--color-primary-300);background-color:var(--color-primary-900)}:root[data-theme=dark] .lc-breadcrumbs__link:active{color:var(--color-primary-200)}:root[data-theme=dark] .lc-breadcrumbs__current{color:var(--color-neutral-200)}:root[data-theme=dark] .lc-breadcrumbs__separator{color:var(--color-neutral-600)}:root[data-theme=dark] .lc-breadcrumbs__ellipsis{color:var(--color-neutral-500)}@media(max-width:768px){.lc-breadcrumbs--md{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--lg{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs__link,.lc-breadcrumbs__current,.lc-breadcrumbs__ellipsis{padding:var(--spacing-0\\.5) var(--spacing-1);margin:calc(var(--spacing-0\\.5) * -1) calc(var(--spacing-1) * -1)}}.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:150px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BreadcrumbsComponent, isStandalone: true, selector: "lc-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (items().length > 0) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <ol [ngClass]=\"breadcrumbClasses()\">\n @for (item of visibleItems(); track item; let i = $index) {\n <li class=\"lc-breadcrumbs__item\">\n @if (isLastItem(i)) {\n <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (isEllipsis(item)) {\n <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n {{ item.label }}\n </span>\n } @else {\n <a\n [routerLink]=\"item.url\"\n class=\"lc-breadcrumbs__link\"\n >\n {{ item.label }}\n </a>\n }\n \n @if (!isLastItem(i)) {\n <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n {{ separator() }}\n </span>\n }\n </li>\n }\n </ol>\n \n <!-- Support for additional content projection -->\n <ng-content></ng-content>\n </nav>\n}\n", styles: [".lc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.lc-breadcrumbs--sm{font-size:var(--font-size-xs);gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-breadcrumbs--sm .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--md{font-size:var(--font-size-sm);gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs--lg{font-size:var(--font-size-base);gap:var(--spacing-3)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-3)}.lc-breadcrumbs__item{display:flex;align-items:center;list-style:none}.lc-breadcrumbs__link{color:var(--color-primary-600);text-decoration:none;transition:all var(--transition-normal);border-radius:var(--radius-sm);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__link:hover{color:var(--color-primary-700);background-color:var(--color-primary-50);text-decoration:underline}.lc-breadcrumbs__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-breadcrumbs__link:active{color:var(--color-primary-800)}.lc-breadcrumbs__current{color:var(--color-neutral-700);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__separator{color:var(--color-neutral-400);-webkit-user-select:none;user-select:none;pointer-events:none}.lc-breadcrumbs__ellipsis{color:var(--color-neutral-500);-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}:root[data-theme=dark] .lc-breadcrumbs__link{color:var(--color-primary-400)}:root[data-theme=dark] .lc-breadcrumbs__link:hover{color:var(--color-primary-300);background-color:var(--color-primary-900)}:root[data-theme=dark] .lc-breadcrumbs__link:active{color:var(--color-primary-200)}:root[data-theme=dark] .lc-breadcrumbs__current{color:var(--color-neutral-200)}:root[data-theme=dark] .lc-breadcrumbs__separator{color:var(--color-neutral-600)}:root[data-theme=dark] .lc-breadcrumbs__ellipsis{color:var(--color-neutral-500)}@media(max-width:768px){.lc-breadcrumbs--md{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--lg{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs__link,.lc-breadcrumbs__current,.lc-breadcrumbs__ellipsis{padding:var(--spacing-0\\.5) var(--spacing-1);margin:calc(var(--spacing-0\\.5) * -1) calc(var(--spacing-1) * -1)}}.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:150px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5521
5629
|
}
|
|
5522
5630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
5523
5631
|
type: Component,
|
|
5524
|
-
args: [{ selector: 'lc-breadcrumbs', imports: [NgClass, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (items().length > 0) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <ol [ngClass]=\"breadcrumbClasses()\">\n @for (item of visibleItems(); track item; let i = $index) {\n <li class=\"lc-breadcrumbs__item\">\n @if (isLastItem(i)) {\n <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (isEllipsis(item)) {\n <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n {{ item.label }}\n </span>\n } @else {\n <a\n [routerLink]=\"item.url\"\n class=\"lc-breadcrumbs__link\"\n >\n {{ item.label }}\n </a>\n }\n \n @if (!isLastItem(i)) {\n <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n {{ separator() }}\n </span>\n }\n </li>\n }\n </ol>\n \n <!-- Support for additional content projection -->\n <ng-content></ng-content>\n </nav>\n}\n", styles: [".lc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.lc-breadcrumbs--sm{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--sm .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--md{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs--lg{font-size:var(--font-size-base);gap:var(--spacing-3)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-3)}.lc-breadcrumbs__item{display:flex;align-items:center;list-style:none}.lc-breadcrumbs__link{color:var(--color-primary-600);text-decoration:none;transition:all var(--transition-normal);border-radius:var(--radius-sm);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__link:hover{color:var(--color-primary-700);background-color:var(--color-primary-50);text-decoration:underline}.lc-breadcrumbs__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-breadcrumbs__link:active{color:var(--color-primary-800)}.lc-breadcrumbs__current{color:var(--color-neutral-700);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__separator{color:var(--color-neutral-400);-webkit-user-select:none;user-select:none;pointer-events:none}.lc-breadcrumbs__ellipsis{color:var(--color-neutral-500);-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}:root[data-theme=dark] .lc-breadcrumbs__link{color:var(--color-primary-400)}:root[data-theme=dark] .lc-breadcrumbs__link:hover{color:var(--color-primary-300);background-color:var(--color-primary-900)}:root[data-theme=dark] .lc-breadcrumbs__link:active{color:var(--color-primary-200)}:root[data-theme=dark] .lc-breadcrumbs__current{color:var(--color-neutral-200)}:root[data-theme=dark] .lc-breadcrumbs__separator{color:var(--color-neutral-600)}:root[data-theme=dark] .lc-breadcrumbs__ellipsis{color:var(--color-neutral-500)}@media(max-width:768px){.lc-breadcrumbs--md{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--lg{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs__link,.lc-breadcrumbs__current,.lc-breadcrumbs__ellipsis{padding:var(--spacing-0\\.5) var(--spacing-1);margin:calc(var(--spacing-0\\.5) * -1) calc(var(--spacing-1) * -1)}}.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:150px}}\n"] }]
|
|
5632
|
+
args: [{ selector: 'lc-breadcrumbs', imports: [NgClass, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (items().length > 0) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <ol [ngClass]=\"breadcrumbClasses()\">\n @for (item of visibleItems(); track item; let i = $index) {\n <li class=\"lc-breadcrumbs__item\">\n @if (isLastItem(i)) {\n <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n {{ item.label }}\n </span>\n } @else if (isEllipsis(item)) {\n <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n {{ item.label }}\n </span>\n } @else {\n <a\n [routerLink]=\"item.url\"\n class=\"lc-breadcrumbs__link\"\n >\n {{ item.label }}\n </a>\n }\n \n @if (!isLastItem(i)) {\n <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n {{ separator() }}\n </span>\n }\n </li>\n }\n </ol>\n \n <!-- Support for additional content projection -->\n <ng-content></ng-content>\n </nav>\n}\n", styles: [".lc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.lc-breadcrumbs--sm{font-size:var(--font-size-xs);gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-breadcrumbs--sm .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--md{font-size:var(--font-size-sm);gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs--lg{font-size:var(--font-size-base);gap:var(--spacing-3)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-3)}.lc-breadcrumbs__item{display:flex;align-items:center;list-style:none}.lc-breadcrumbs__link{color:var(--color-primary-600);text-decoration:none;transition:all var(--transition-normal);border-radius:var(--radius-sm);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__link:hover{color:var(--color-primary-700);background-color:var(--color-primary-50);text-decoration:underline}.lc-breadcrumbs__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-breadcrumbs__link:active{color:var(--color-primary-800)}.lc-breadcrumbs__current{color:var(--color-neutral-700);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__separator{color:var(--color-neutral-400);-webkit-user-select:none;user-select:none;pointer-events:none}.lc-breadcrumbs__ellipsis{color:var(--color-neutral-500);-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}:root[data-theme=dark] .lc-breadcrumbs__link{color:var(--color-primary-400)}:root[data-theme=dark] .lc-breadcrumbs__link:hover{color:var(--color-primary-300);background-color:var(--color-primary-900)}:root[data-theme=dark] .lc-breadcrumbs__link:active{color:var(--color-primary-200)}:root[data-theme=dark] .lc-breadcrumbs__current{color:var(--color-neutral-200)}:root[data-theme=dark] .lc-breadcrumbs__separator{color:var(--color-neutral-600)}:root[data-theme=dark] .lc-breadcrumbs__ellipsis{color:var(--color-neutral-500)}@media(max-width:768px){.lc-breadcrumbs--md{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--lg{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs__link,.lc-breadcrumbs__current,.lc-breadcrumbs__ellipsis{padding:var(--spacing-0\\.5) var(--spacing-1);margin:calc(var(--spacing-0\\.5) * -1) calc(var(--spacing-1) * -1)}}.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:150px}}\n"] }]
|
|
5525
5633
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
5526
5634
|
|
|
5527
5635
|
/**
|
|
@@ -5749,7 +5857,7 @@ class HeaderComponent {
|
|
|
5749
5857
|
}
|
|
5750
5858
|
}
|
|
5751
5859
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5752
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeaderComponent, isStandalone: true, selector: "lc-header", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, userEmail: { classPropertyName: "userEmail", publicName: "userEmail", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, showHamburger: { classPropertyName: "showHamburger", publicName: "showHamburger", isSignal: true, isRequired: false, transformFunction: null }, showThemeButton: { classPropertyName: "showThemeButton", publicName: "showThemeButton", isSignal: true, isRequired: false, transformFunction: null }, contextName: { classPropertyName: "contextName", publicName: "contextName", isSignal: true, isRequired: false, transformFunction: null }, contextLabel: { classPropertyName: "contextLabel", publicName: "contextLabel", isSignal: true, isRequired: false, transformFunction: null }, menuSize: { classPropertyName: "menuSize", publicName: "menuSize", isSignal: true, isRequired: false, transformFunction: null }, showProfileMenuItem: { classPropertyName: "showProfileMenuItem", publicName: "showProfileMenuItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hamburgerClick: "hamburgerClick", themeToggleClick: "themeToggleClick", logoutClick: "logoutClick", profileClick: "profileClick", contextClick: "contextClick" }, host: { classAttribute: "lc-header-host" }, ngImport: i0, template: "<header class=\"lc-header\" [class.lc-header--dark]=\"theme() === 'dark'\" [class.lc-header--light]=\"theme() === 'light'\">\n <!-- Hamburger menu icon (mobile only) -->\n @if (showHamburger()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"'Toggle sidebar menu'\"\n (clicked)=\"onHamburgerClick()\"\n class=\"lc-header__hamburger\"\n >\n <lc-icon name=\"bars-3\" size=\"sm\" />\n </lc-button>\n }\n\n <!-- Logo (clickable, navigates to home) -->\n <div class=\"lc-header__brand\">\n @if (showLogo() && (logo() || title())) {\n <a routerLink=\"/\" class=\"lc-header__logo\" aria-label=\"Go to home\">\n <lc-logo [variant]=\"logo() ? 'full' : 'emblem'\" size=\"md\" [clickable]=\"false\" [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\" />\n </a>\n }\n \n @if (title()) {\n <div class=\"lc-header__title-group\">\n <h1 class=\"lc-header__title\">{{ title() }}</h1>\n @if (subtitle()) {\n <span class=\"lc-header__subtitle\">{{ subtitle() }}</span>\n }\n </div>\n }\n </div>\n\n <div class=\"lc-header__spacer\"></div>\n\n <!-- Theme toggle button -->\n @if (showThemeButton()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n (clicked)=\"onThemeButtonClick()\"\n class=\"lc-header__theme-toggle\"\n >\n <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n </lc-button>\n }\n\n <!-- Context info (e.g. tenant, organization, project) -->\n @if (contextName()) {\n <button\n type=\"button\"\n class=\"lc-header__context-info\"\n [attr.title]=\"contextName()\"\n aria-label=\"Context info\"\n (click)=\"contextClick.emit()\"\n >\n @if (contextLabel()) {\n <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>\n }\n <span class=\"lc-header__context-name\">{{ contextName() }}</span>\n </button>\n }\n\n <!-- User profile menu -->\n <lc-menu\n [items]=\"menuItems()\"\n [isOpen]=\"isDropdownOpen()\"\n position=\"bottom-right\"\n minWidth=\"220px\"\n [size]=\"menuSize()\"\n (itemClick)=\"onMenuItemClick($event)\"\n (closed)=\"closeDropdown()\"\n >\n <!-- Menu header with avatar, name and email -->\n @if (userName() || userEmail()) {\n <div header class=\"lc-header__menu-header\">\n <lc-avatar [name]=\"userName()\" size=\"md\" />\n <div class=\"lc-header__menu-user-info\">\n @if (userName()) {\n <div class=\"lc-header__menu-user-name\">{{ userName() }}</div>\n }\n @if (userEmail()) {\n <div class=\"lc-header__menu-user-email\">{{ userEmail() }}</div>\n }\n </div>\n </div>\n }\n\n <button\n trigger\n class=\"lc-header__profile-trigger\"\n type=\"button\"\n aria-label=\"Open user menu\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-icon name=\"user\" size=\"sm\" />\n <lc-icon name=\"chevron-down\" size=\"xs\" />\n </button>\n </lc-menu>\n</header>\n", styles: [".lc-header{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151);display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-6);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--spacing-4)}}.lc-header--dark{--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header--light{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151)}html.dark .lc-header:not(.lc-header--light),:root.dark .lc-header:not(.lc-header--light),.dark .lc-header:not(.lc-header--light){--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);background:transparent;border:none;cursor:pointer;color:var(--lc-header-trigger-fg);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--lc-header-hover-bg);color:var(--lc-header-fg)}.lc-header__hamburger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3)}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--lc-header-fg);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{font-size:.75rem;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--radius-full);cursor:pointer;color:var(--lc-header-trigger-fg);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--lc-header-hover-bg);border-color:var(--lc-header-fg-secondary)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-4);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable", "colorMode"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: AvatarComponent, selector: "lc-avatar", inputs: ["src", "alt", "name", "size", "status"] }, { kind: "component", type: MenuComponent, selector: "lc-menu", inputs: ["items", "isOpen", "position", "size", "minWidth"], outputs: ["itemClick", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5860
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeaderComponent, isStandalone: true, selector: "lc-header", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, userEmail: { classPropertyName: "userEmail", publicName: "userEmail", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, showHamburger: { classPropertyName: "showHamburger", publicName: "showHamburger", isSignal: true, isRequired: false, transformFunction: null }, showThemeButton: { classPropertyName: "showThemeButton", publicName: "showThemeButton", isSignal: true, isRequired: false, transformFunction: null }, contextName: { classPropertyName: "contextName", publicName: "contextName", isSignal: true, isRequired: false, transformFunction: null }, contextLabel: { classPropertyName: "contextLabel", publicName: "contextLabel", isSignal: true, isRequired: false, transformFunction: null }, menuSize: { classPropertyName: "menuSize", publicName: "menuSize", isSignal: true, isRequired: false, transformFunction: null }, showProfileMenuItem: { classPropertyName: "showProfileMenuItem", publicName: "showProfileMenuItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hamburgerClick: "hamburgerClick", themeToggleClick: "themeToggleClick", logoutClick: "logoutClick", profileClick: "profileClick", contextClick: "contextClick" }, host: { classAttribute: "lc-header-host" }, ngImport: i0, template: "<header class=\"lc-header\" [class.lc-header--dark]=\"theme() === 'dark'\" [class.lc-header--light]=\"theme() === 'light'\">\n <!-- Hamburger menu icon (mobile only) -->\n @if (showHamburger()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"'Toggle sidebar menu'\"\n (clicked)=\"onHamburgerClick()\"\n class=\"lc-header__hamburger\"\n >\n <lc-icon name=\"bars-3\" size=\"sm\" />\n </lc-button>\n }\n\n <!-- Logo (clickable, navigates to home) -->\n <div class=\"lc-header__brand\">\n @if (showLogo() && (logo() || title())) {\n <a routerLink=\"/\" class=\"lc-header__logo\" aria-label=\"Go to home\">\n <lc-logo [variant]=\"logo() ? 'full' : 'emblem'\" size=\"md\" [clickable]=\"false\" [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\" />\n </a>\n }\n \n @if (title()) {\n <div class=\"lc-header__title-group\">\n <h1 class=\"lc-header__title\">{{ title() }}</h1>\n @if (subtitle()) {\n <span class=\"lc-header__subtitle\">{{ subtitle() }}</span>\n }\n </div>\n }\n </div>\n\n <div class=\"lc-header__spacer\"></div>\n\n <!-- Theme toggle button -->\n @if (showThemeButton()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n (clicked)=\"onThemeButtonClick()\"\n class=\"lc-header__theme-toggle\"\n >\n <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n </lc-button>\n }\n\n <!-- Context info (e.g. tenant, organization, project) -->\n @if (contextName()) {\n <button\n type=\"button\"\n class=\"lc-header__context-info\"\n [attr.title]=\"contextName()\"\n aria-label=\"Context info\"\n (click)=\"contextClick.emit()\"\n >\n @if (contextLabel()) {\n <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>\n }\n <span class=\"lc-header__context-name\">{{ contextName() }}</span>\n </button>\n }\n\n <!-- User profile menu -->\n <lc-menu\n [items]=\"menuItems()\"\n [isOpen]=\"isDropdownOpen()\"\n position=\"bottom-right\"\n minWidth=\"220px\"\n [size]=\"menuSize()\"\n (itemClick)=\"onMenuItemClick($event)\"\n (closed)=\"closeDropdown()\"\n >\n <!-- Menu header with avatar, name and email -->\n @if (userName() || userEmail()) {\n <div header class=\"lc-header__menu-header\">\n <lc-avatar [name]=\"userName()\" size=\"md\" />\n <div class=\"lc-header__menu-user-info\">\n @if (userName()) {\n <div class=\"lc-header__menu-user-name\">{{ userName() }}</div>\n }\n @if (userEmail()) {\n <div class=\"lc-header__menu-user-email\">{{ userEmail() }}</div>\n }\n </div>\n </div>\n }\n\n <button\n trigger\n class=\"lc-header__profile-trigger\"\n type=\"button\"\n aria-label=\"Open user menu\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-icon name=\"user\" size=\"sm\" />\n <lc-icon name=\"chevron-down\" size=\"xs\" />\n </button>\n </lc-menu>\n</header>\n", styles: [".lc-header{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151);display:flex;align-items:center;gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--spacing-3) var(--lc-density-padding-lg, var(--spacing-6));background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--lc-density-padding-md, var(--spacing-4))}}.lc-header--dark{--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header--light{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151)}html.dark .lc-header:not(.lc-header--light),:root.dark .lc-header:not(.lc-header--light),.dark .lc-header:not(.lc-header--light){--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--lc-density-padding-xs, var(--spacing-2));background:transparent;border:none;cursor:pointer;color:var(--lc-header-trigger-fg);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--lc-header-hover-bg);color:var(--lc-header-fg)}.lc-header__hamburger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3)}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--lc-header-fg);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{font-size:.75rem;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--radius-full);cursor:pointer;color:var(--lc-header-trigger-fg);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--lc-header-hover-bg);border-color:var(--lc-header-fg-secondary)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4));border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable", "colorMode"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: AvatarComponent, selector: "lc-avatar", inputs: ["src", "alt", "name", "size", "status"] }, { kind: "component", type: MenuComponent, selector: "lc-menu", inputs: ["items", "isOpen", "position", "size", "minWidth"], outputs: ["itemClick", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5753
5861
|
}
|
|
5754
5862
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
5755
5863
|
type: Component,
|
|
@@ -5762,7 +5870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
5762
5870
|
MenuComponent,
|
|
5763
5871
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5764
5872
|
class: 'lc-header-host',
|
|
5765
|
-
}, template: "<header class=\"lc-header\" [class.lc-header--dark]=\"theme() === 'dark'\" [class.lc-header--light]=\"theme() === 'light'\">\n <!-- Hamburger menu icon (mobile only) -->\n @if (showHamburger()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"'Toggle sidebar menu'\"\n (clicked)=\"onHamburgerClick()\"\n class=\"lc-header__hamburger\"\n >\n <lc-icon name=\"bars-3\" size=\"sm\" />\n </lc-button>\n }\n\n <!-- Logo (clickable, navigates to home) -->\n <div class=\"lc-header__brand\">\n @if (showLogo() && (logo() || title())) {\n <a routerLink=\"/\" class=\"lc-header__logo\" aria-label=\"Go to home\">\n <lc-logo [variant]=\"logo() ? 'full' : 'emblem'\" size=\"md\" [clickable]=\"false\" [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\" />\n </a>\n }\n \n @if (title()) {\n <div class=\"lc-header__title-group\">\n <h1 class=\"lc-header__title\">{{ title() }}</h1>\n @if (subtitle()) {\n <span class=\"lc-header__subtitle\">{{ subtitle() }}</span>\n }\n </div>\n }\n </div>\n\n <div class=\"lc-header__spacer\"></div>\n\n <!-- Theme toggle button -->\n @if (showThemeButton()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n (clicked)=\"onThemeButtonClick()\"\n class=\"lc-header__theme-toggle\"\n >\n <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n </lc-button>\n }\n\n <!-- Context info (e.g. tenant, organization, project) -->\n @if (contextName()) {\n <button\n type=\"button\"\n class=\"lc-header__context-info\"\n [attr.title]=\"contextName()\"\n aria-label=\"Context info\"\n (click)=\"contextClick.emit()\"\n >\n @if (contextLabel()) {\n <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>\n }\n <span class=\"lc-header__context-name\">{{ contextName() }}</span>\n </button>\n }\n\n <!-- User profile menu -->\n <lc-menu\n [items]=\"menuItems()\"\n [isOpen]=\"isDropdownOpen()\"\n position=\"bottom-right\"\n minWidth=\"220px\"\n [size]=\"menuSize()\"\n (itemClick)=\"onMenuItemClick($event)\"\n (closed)=\"closeDropdown()\"\n >\n <!-- Menu header with avatar, name and email -->\n @if (userName() || userEmail()) {\n <div header class=\"lc-header__menu-header\">\n <lc-avatar [name]=\"userName()\" size=\"md\" />\n <div class=\"lc-header__menu-user-info\">\n @if (userName()) {\n <div class=\"lc-header__menu-user-name\">{{ userName() }}</div>\n }\n @if (userEmail()) {\n <div class=\"lc-header__menu-user-email\">{{ userEmail() }}</div>\n }\n </div>\n </div>\n }\n\n <button\n trigger\n class=\"lc-header__profile-trigger\"\n type=\"button\"\n aria-label=\"Open user menu\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-icon name=\"user\" size=\"sm\" />\n <lc-icon name=\"chevron-down\" size=\"xs\" />\n </button>\n </lc-menu>\n</header>\n", styles: [".lc-header{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151);display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-6);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--spacing-4)}}.lc-header--dark{--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header--light{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151)}html.dark .lc-header:not(.lc-header--light),:root.dark .lc-header:not(.lc-header--light),.dark .lc-header:not(.lc-header--light){--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);background:transparent;border:none;cursor:pointer;color:var(--lc-header-trigger-fg);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--lc-header-hover-bg);color:var(--lc-header-fg)}.lc-header__hamburger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3)}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--lc-header-fg);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{font-size:.75rem;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--radius-full);cursor:pointer;color:var(--lc-header-trigger-fg);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--lc-header-hover-bg);border-color:var(--lc-header-fg-secondary)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-4);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"] }]
|
|
5873
|
+
}, template: "<header class=\"lc-header\" [class.lc-header--dark]=\"theme() === 'dark'\" [class.lc-header--light]=\"theme() === 'light'\">\n <!-- Hamburger menu icon (mobile only) -->\n @if (showHamburger()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"'Toggle sidebar menu'\"\n (clicked)=\"onHamburgerClick()\"\n class=\"lc-header__hamburger\"\n >\n <lc-icon name=\"bars-3\" size=\"sm\" />\n </lc-button>\n }\n\n <!-- Logo (clickable, navigates to home) -->\n <div class=\"lc-header__brand\">\n @if (showLogo() && (logo() || title())) {\n <a routerLink=\"/\" class=\"lc-header__logo\" aria-label=\"Go to home\">\n <lc-logo [variant]=\"logo() ? 'full' : 'emblem'\" size=\"md\" [clickable]=\"false\" [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\" />\n </a>\n }\n \n @if (title()) {\n <div class=\"lc-header__title-group\">\n <h1 class=\"lc-header__title\">{{ title() }}</h1>\n @if (subtitle()) {\n <span class=\"lc-header__subtitle\">{{ subtitle() }}</span>\n }\n </div>\n }\n </div>\n\n <div class=\"lc-header__spacer\"></div>\n\n <!-- Theme toggle button -->\n @if (showThemeButton()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"themeService.isDark() ? 'Switch to light mode' : 'Switch to dark mode'\"\n (clicked)=\"onThemeButtonClick()\"\n class=\"lc-header__theme-toggle\"\n >\n <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n </lc-button>\n }\n\n <!-- Context info (e.g. tenant, organization, project) -->\n @if (contextName()) {\n <button\n type=\"button\"\n class=\"lc-header__context-info\"\n [attr.title]=\"contextName()\"\n aria-label=\"Context info\"\n (click)=\"contextClick.emit()\"\n >\n @if (contextLabel()) {\n <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>\n }\n <span class=\"lc-header__context-name\">{{ contextName() }}</span>\n </button>\n }\n\n <!-- User profile menu -->\n <lc-menu\n [items]=\"menuItems()\"\n [isOpen]=\"isDropdownOpen()\"\n position=\"bottom-right\"\n minWidth=\"220px\"\n [size]=\"menuSize()\"\n (itemClick)=\"onMenuItemClick($event)\"\n (closed)=\"closeDropdown()\"\n >\n <!-- Menu header with avatar, name and email -->\n @if (userName() || userEmail()) {\n <div header class=\"lc-header__menu-header\">\n <lc-avatar [name]=\"userName()\" size=\"md\" />\n <div class=\"lc-header__menu-user-info\">\n @if (userName()) {\n <div class=\"lc-header__menu-user-name\">{{ userName() }}</div>\n }\n @if (userEmail()) {\n <div class=\"lc-header__menu-user-email\">{{ userEmail() }}</div>\n }\n </div>\n </div>\n }\n\n <button\n trigger\n class=\"lc-header__profile-trigger\"\n type=\"button\"\n aria-label=\"Open user menu\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-icon name=\"user\" size=\"sm\" />\n <lc-icon name=\"chevron-down\" size=\"xs\" />\n </button>\n </lc-menu>\n</header>\n", styles: [".lc-header{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151);display:flex;align-items:center;gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--spacing-3) var(--lc-density-padding-lg, var(--spacing-6));background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--lc-density-padding-md, var(--spacing-4))}}.lc-header--dark{--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header--light{--lc-header-bg: var(--color-neutral-0, #ffffff);--lc-header-fg: var(--color-neutral-900, #111827);--lc-header-fg-secondary: var(--color-neutral-600, #4b5563);--lc-header-border: var(--color-neutral-200, #e5e7eb);--lc-header-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-header-trigger-border: var(--color-neutral-200, #e5e7eb);--lc-header-trigger-fg: var(--color-neutral-700, #374151)}html.dark .lc-header:not(.lc-header--light),:root.dark .lc-header:not(.lc-header--light),.dark .lc-header:not(.lc-header--light){--lc-header-bg: #18181b;--lc-header-fg: #f5f5f5;--lc-header-fg-secondary: #a1a1aa;--lc-header-border: #27272a;--lc-header-hover-bg: #27272a;--lc-header-trigger-border: #52525b;--lc-header-trigger-fg: #e4e4e7}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--lc-density-padding-xs, var(--spacing-2));background:transparent;border:none;cursor:pointer;color:var(--lc-header-trigger-fg);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--lc-header-hover-bg);color:var(--lc-header-fg)}.lc-header__hamburger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3)}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--lc-header-fg);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{font-size:.75rem;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--radius-full);cursor:pointer;color:var(--lc-header-trigger-fg);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--lc-header-hover-bg);border-color:var(--lc-header-fg-secondary)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4));border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"] }]
|
|
5766
5874
|
}], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], userEmail: [{ type: i0.Input, args: [{ isSignal: true, alias: "userEmail", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], showHamburger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHamburger", required: false }] }], showThemeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeButton", required: false }] }], contextName: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextName", required: false }] }], contextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextLabel", required: false }] }], menuSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuSize", required: false }] }], showProfileMenuItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProfileMenuItem", required: false }] }], hamburgerClick: [{ type: i0.Output, args: ["hamburgerClick"] }], themeToggleClick: [{ type: i0.Output, args: ["themeToggleClick"] }], logoutClick: [{ type: i0.Output, args: ["logoutClick"] }], profileClick: [{ type: i0.Output, args: ["profileClick"] }], contextClick: [{ type: i0.Output, args: ["contextClick"] }] } });
|
|
5767
5875
|
|
|
5768
5876
|
/**
|
|
@@ -5895,11 +6003,11 @@ class PaginationComponent {
|
|
|
5895
6003
|
return total > 1;
|
|
5896
6004
|
}
|
|
5897
6005
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5898
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PaginationComponent, isStandalone: true, selector: "lc-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "@if (shouldRender()) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <div [ngClass]=\"paginationClasses()\">\n <!-- Previous Button -->\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--prev\"\n [disabled]=\"isFirstPage()\"\n [attr.aria-label]=\"'Previous page'\"\n (click)=\"goToPreviousPage()\"\n >\n <svg class=\"lc-pagination__icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" />\n </svg>\n <span class=\"lc-pagination__button-text\">Previous</span>\n </button>\n\n <!-- Page Numbers -->\n <div class=\"lc-pagination__pages\">\n @for (page of visiblePages(); track $index) {\n @if (isEllipsis(page)) {\n <span class=\"lc-pagination__ellipsis\" aria-hidden=\"true\">\n …\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--page\"\n [class.lc-pagination__button--active]=\"isCurrentPage(page)\"\n [attr.aria-label]=\"'Page ' + page\"\n [attr.aria-current]=\"isCurrentPage(page) ? 'page' : null\"\n (click)=\"goToPage(page)\"\n >\n {{ page }}\n </button>\n }\n }\n </div>\n\n <!-- Next Button -->\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--next\"\n [disabled]=\"isLastPage()\"\n [attr.aria-label]=\"'Next page'\"\n (click)=\"goToNextPage()\"\n >\n <span class=\"lc-pagination__button-text\">Next</span>\n <svg class=\"lc-pagination__icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n </svg>\n </button>\n </div>\n\n <!-- Optional Info Text -->\n @if (showInfo()) {\n <div class=\"lc-pagination__info\">\n Showing {{ firstItemIndex() }} to {{ lastItemIndex() }} of {{ totalItems() }} items\n </div>\n }\n </nav>\n}\n", styles: [".lc-pagination{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2)}.lc-pagination--sm{font-size:var(--font-size-xs)}.lc-pagination--sm .lc-pagination__button{min-width:1.75rem;height:1.75rem;padding:0 var(--spacing-1)}.lc-pagination--sm .lc-pagination__icon{width:.875rem;height:.875rem}.lc-pagination--sm .lc-pagination__button-text{font-size:var(--font-size-xs)}.lc-pagination--md{font-size:var(--font-size-sm)}.lc-pagination--md .lc-pagination__button{min-width:2.25rem;height:2.25rem;padding:0 var(--spacing-2)}.lc-pagination--md .lc-pagination__icon{width:1rem;height:1rem}.lc-pagination--md .lc-pagination__button-text{font-size:var(--font-size-sm)}.lc-pagination--lg{font-size:var(--font-size-base)}.lc-pagination--lg .lc-pagination__button{min-width:2.75rem;height:2.75rem;padding:0 var(--spacing-3)}.lc-pagination--lg .lc-pagination__icon{width:1.25rem;height:1.25rem}.lc-pagination--lg .lc-pagination__button-text{font-size:var(--font-size-base)}.lc-pagination__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-1);border:1px solid var(--color-neutral-300);background-color:var(--color-neutral-0);color:var(--color-neutral-700);border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:all var(--transition-normal);-webkit-user-select:none;user-select:none}.lc-pagination__button:hover:not(:disabled){background-color:var(--color-neutral-50);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.lc-pagination__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-pagination__button:active:not(:disabled){background-color:var(--color-neutral-100);transform:translateY(1px)}.lc-pagination__button:disabled{opacity:.5;cursor:not-allowed}.lc-pagination__button--active{background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-neutral-0);font-weight:600}.lc-pagination__button--active:hover{background-color:var(--color-primary-700);border-color:var(--color-primary-700);color:var(--color-neutral-0)}@media(max-width:640px){.lc-pagination__button-text:not(.lc-pagination__button--active .lc-pagination__button-text){display:none}}.lc-pagination__icon{flex-shrink:0}.lc-pagination__pages{display:flex;align-items:center;gap:var(--spacing-1)}.lc-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;color:var(--color-neutral-500);-webkit-user-select:none;user-select:none}.lc-pagination__info{text-align:center;font-size:var(--font-size-sm);color:var(--color-neutral-600);margin-top:var(--spacing-3)}@media(prefers-color-scheme:dark){.lc-pagination__info{color:var(--color-neutral-400)}}@media(prefers-color-scheme:dark){.lc-pagination__button{border-color:var(--color-neutral-700);background-color:var(--color-neutral-900);color:var(--color-neutral-300)}.lc-pagination__button:hover:not(:disabled){background-color:var(--color-neutral-800);border-color:var(--color-neutral-600);color:var(--color-neutral-100)}.lc-pagination__button:active:not(:disabled){background-color:var(--color-neutral-700)}.lc-pagination__button--active{background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-neutral-0)}.lc-pagination__button--active:hover{background-color:var(--color-primary-700);border-color:var(--color-primary-700)}.lc-pagination__ellipsis{color:var(--color-neutral-500)}}@media(max-width:640px){.lc-pagination{gap:var(--spacing-1)}.lc-pagination__pages{gap:var(--spacing-0-5)}.lc-pagination__button--page:not(.lc-pagination__button--active){display:none}.lc-pagination__button--page:not(.lc-pagination__button--active):first-child,.lc-pagination__button--page:not(.lc-pagination__button--active):last-child{display:inline-flex}.lc-pagination__button--page:not(.lc-pagination__button--active):nth-child(n-1):nth-child(-n+1){display:inline-flex}}@media(prefers-reduced-motion:reduce){.lc-pagination__button{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6006
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PaginationComponent, isStandalone: true, selector: "lc-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "@if (shouldRender()) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <div [ngClass]=\"paginationClasses()\">\n <!-- Previous Button -->\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--prev\"\n [disabled]=\"isFirstPage()\"\n [attr.aria-label]=\"'Previous page'\"\n (click)=\"goToPreviousPage()\"\n >\n <svg class=\"lc-pagination__icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" />\n </svg>\n <span class=\"lc-pagination__button-text\">Previous</span>\n </button>\n\n <!-- Page Numbers -->\n <div class=\"lc-pagination__pages\">\n @for (page of visiblePages(); track $index) {\n @if (isEllipsis(page)) {\n <span class=\"lc-pagination__ellipsis\" aria-hidden=\"true\">\n …\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--page\"\n [class.lc-pagination__button--active]=\"isCurrentPage(page)\"\n [attr.aria-label]=\"'Page ' + page\"\n [attr.aria-current]=\"isCurrentPage(page) ? 'page' : null\"\n (click)=\"goToPage(page)\"\n >\n {{ page }}\n </button>\n }\n }\n </div>\n\n <!-- Next Button -->\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--next\"\n [disabled]=\"isLastPage()\"\n [attr.aria-label]=\"'Next page'\"\n (click)=\"goToNextPage()\"\n >\n <span class=\"lc-pagination__button-text\">Next</span>\n <svg class=\"lc-pagination__icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n </svg>\n </button>\n </div>\n\n <!-- Optional Info Text -->\n @if (showInfo()) {\n <div class=\"lc-pagination__info\">\n Showing {{ firstItemIndex() }} to {{ lastItemIndex() }} of {{ totalItems() }} items\n </div>\n }\n </nav>\n}\n", styles: [".lc-pagination{display:flex;align-items:center;justify-content:center;gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-pagination--sm{font-size:var(--font-size-xs)}.lc-pagination--sm .lc-pagination__button{min-width:1.75rem;height:1.75rem;padding:0 var(--spacing-1)}.lc-pagination--sm .lc-pagination__icon{width:.875rem;height:.875rem}.lc-pagination--sm .lc-pagination__button-text{font-size:var(--font-size-xs)}.lc-pagination--md{font-size:var(--font-size-sm)}.lc-pagination--md .lc-pagination__button{min-width:2.25rem;height:2.25rem;padding:0 var(--spacing-2)}.lc-pagination--md .lc-pagination__icon{width:1rem;height:1rem}.lc-pagination--md .lc-pagination__button-text{font-size:var(--font-size-sm)}.lc-pagination--lg{font-size:var(--font-size-base)}.lc-pagination--lg .lc-pagination__button{min-width:2.75rem;height:2.75rem;padding:0 var(--spacing-3)}.lc-pagination--lg .lc-pagination__icon{width:1.25rem;height:1.25rem}.lc-pagination--lg .lc-pagination__button-text{font-size:var(--font-size-base)}.lc-pagination__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-1);border:1px solid var(--color-neutral-300);background-color:var(--color-neutral-0);color:var(--color-neutral-700);border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:all var(--transition-normal);-webkit-user-select:none;user-select:none}.lc-pagination__button:hover:not(:disabled){background-color:var(--color-neutral-50);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.lc-pagination__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-pagination__button:active:not(:disabled){background-color:var(--color-neutral-100);transform:translateY(1px)}.lc-pagination__button:disabled{opacity:.5;cursor:not-allowed}.lc-pagination__button--active{background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-neutral-0);font-weight:600}.lc-pagination__button--active:hover{background-color:var(--color-primary-700);border-color:var(--color-primary-700);color:var(--color-neutral-0)}@media(max-width:640px){.lc-pagination__button-text:not(.lc-pagination__button--active .lc-pagination__button-text){display:none}}.lc-pagination__icon{flex-shrink:0}.lc-pagination__pages{display:flex;align-items:center;gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;color:var(--color-neutral-500);-webkit-user-select:none;user-select:none}.lc-pagination__info{text-align:center;font-size:var(--font-size-sm);color:var(--color-neutral-600);margin-top:var(--spacing-3)}@media(prefers-color-scheme:dark){.lc-pagination__info{color:var(--color-neutral-400)}}@media(prefers-color-scheme:dark){.lc-pagination__button{border-color:var(--color-neutral-700);background-color:var(--color-neutral-900);color:var(--color-neutral-300)}.lc-pagination__button:hover:not(:disabled){background-color:var(--color-neutral-800);border-color:var(--color-neutral-600);color:var(--color-neutral-100)}.lc-pagination__button:active:not(:disabled){background-color:var(--color-neutral-700)}.lc-pagination__button--active{background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-neutral-0)}.lc-pagination__button--active:hover{background-color:var(--color-primary-700);border-color:var(--color-primary-700)}.lc-pagination__ellipsis{color:var(--color-neutral-500)}}@media(max-width:640px){.lc-pagination{gap:var(--spacing-1)}.lc-pagination__pages{gap:var(--spacing-0-5)}.lc-pagination__button--page:not(.lc-pagination__button--active){display:none}.lc-pagination__button--page:not(.lc-pagination__button--active):first-child,.lc-pagination__button--page:not(.lc-pagination__button--active):last-child{display:inline-flex}.lc-pagination__button--page:not(.lc-pagination__button--active):nth-child(n-1):nth-child(-n+1){display:inline-flex}}@media(prefers-reduced-motion:reduce){.lc-pagination__button{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5899
6007
|
}
|
|
5900
6008
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
5901
6009
|
type: Component,
|
|
5902
|
-
args: [{ selector: 'lc-pagination', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (shouldRender()) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <div [ngClass]=\"paginationClasses()\">\n <!-- Previous Button -->\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--prev\"\n [disabled]=\"isFirstPage()\"\n [attr.aria-label]=\"'Previous page'\"\n (click)=\"goToPreviousPage()\"\n >\n <svg class=\"lc-pagination__icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" />\n </svg>\n <span class=\"lc-pagination__button-text\">Previous</span>\n </button>\n\n <!-- Page Numbers -->\n <div class=\"lc-pagination__pages\">\n @for (page of visiblePages(); track $index) {\n @if (isEllipsis(page)) {\n <span class=\"lc-pagination__ellipsis\" aria-hidden=\"true\">\n …\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--page\"\n [class.lc-pagination__button--active]=\"isCurrentPage(page)\"\n [attr.aria-label]=\"'Page ' + page\"\n [attr.aria-current]=\"isCurrentPage(page) ? 'page' : null\"\n (click)=\"goToPage(page)\"\n >\n {{ page }}\n </button>\n }\n }\n </div>\n\n <!-- Next Button -->\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--next\"\n [disabled]=\"isLastPage()\"\n [attr.aria-label]=\"'Next page'\"\n (click)=\"goToNextPage()\"\n >\n <span class=\"lc-pagination__button-text\">Next</span>\n <svg class=\"lc-pagination__icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n </svg>\n </button>\n </div>\n\n <!-- Optional Info Text -->\n @if (showInfo()) {\n <div class=\"lc-pagination__info\">\n Showing {{ firstItemIndex() }} to {{ lastItemIndex() }} of {{ totalItems() }} items\n </div>\n }\n </nav>\n}\n", styles: [".lc-pagination{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2)}.lc-pagination--sm{font-size:var(--font-size-xs)}.lc-pagination--sm .lc-pagination__button{min-width:1.75rem;height:1.75rem;padding:0 var(--spacing-1)}.lc-pagination--sm .lc-pagination__icon{width:.875rem;height:.875rem}.lc-pagination--sm .lc-pagination__button-text{font-size:var(--font-size-xs)}.lc-pagination--md{font-size:var(--font-size-sm)}.lc-pagination--md .lc-pagination__button{min-width:2.25rem;height:2.25rem;padding:0 var(--spacing-2)}.lc-pagination--md .lc-pagination__icon{width:1rem;height:1rem}.lc-pagination--md .lc-pagination__button-text{font-size:var(--font-size-sm)}.lc-pagination--lg{font-size:var(--font-size-base)}.lc-pagination--lg .lc-pagination__button{min-width:2.75rem;height:2.75rem;padding:0 var(--spacing-3)}.lc-pagination--lg .lc-pagination__icon{width:1.25rem;height:1.25rem}.lc-pagination--lg .lc-pagination__button-text{font-size:var(--font-size-base)}.lc-pagination__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-1);border:1px solid var(--color-neutral-300);background-color:var(--color-neutral-0);color:var(--color-neutral-700);border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:all var(--transition-normal);-webkit-user-select:none;user-select:none}.lc-pagination__button:hover:not(:disabled){background-color:var(--color-neutral-50);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.lc-pagination__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-pagination__button:active:not(:disabled){background-color:var(--color-neutral-100);transform:translateY(1px)}.lc-pagination__button:disabled{opacity:.5;cursor:not-allowed}.lc-pagination__button--active{background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-neutral-0);font-weight:600}.lc-pagination__button--active:hover{background-color:var(--color-primary-700);border-color:var(--color-primary-700);color:var(--color-neutral-0)}@media(max-width:640px){.lc-pagination__button-text:not(.lc-pagination__button--active .lc-pagination__button-text){display:none}}.lc-pagination__icon{flex-shrink:0}.lc-pagination__pages{display:flex;align-items:center;gap:var(--spacing-1)}.lc-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;color:var(--color-neutral-500);-webkit-user-select:none;user-select:none}.lc-pagination__info{text-align:center;font-size:var(--font-size-sm);color:var(--color-neutral-600);margin-top:var(--spacing-3)}@media(prefers-color-scheme:dark){.lc-pagination__info{color:var(--color-neutral-400)}}@media(prefers-color-scheme:dark){.lc-pagination__button{border-color:var(--color-neutral-700);background-color:var(--color-neutral-900);color:var(--color-neutral-300)}.lc-pagination__button:hover:not(:disabled){background-color:var(--color-neutral-800);border-color:var(--color-neutral-600);color:var(--color-neutral-100)}.lc-pagination__button:active:not(:disabled){background-color:var(--color-neutral-700)}.lc-pagination__button--active{background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-neutral-0)}.lc-pagination__button--active:hover{background-color:var(--color-primary-700);border-color:var(--color-primary-700)}.lc-pagination__ellipsis{color:var(--color-neutral-500)}}@media(max-width:640px){.lc-pagination{gap:var(--spacing-1)}.lc-pagination__pages{gap:var(--spacing-0-5)}.lc-pagination__button--page:not(.lc-pagination__button--active){display:none}.lc-pagination__button--page:not(.lc-pagination__button--active):first-child,.lc-pagination__button--page:not(.lc-pagination__button--active):last-child{display:inline-flex}.lc-pagination__button--page:not(.lc-pagination__button--active):nth-child(n-1):nth-child(-n+1){display:inline-flex}}@media(prefers-reduced-motion:reduce){.lc-pagination__button{transition:none}}\n"] }]
|
|
6010
|
+
args: [{ selector: 'lc-pagination', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (shouldRender()) {\n <nav [attr.aria-label]=\"ariaLabel()\">\n <div [ngClass]=\"paginationClasses()\">\n <!-- Previous Button -->\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--prev\"\n [disabled]=\"isFirstPage()\"\n [attr.aria-label]=\"'Previous page'\"\n (click)=\"goToPreviousPage()\"\n >\n <svg class=\"lc-pagination__icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" />\n </svg>\n <span class=\"lc-pagination__button-text\">Previous</span>\n </button>\n\n <!-- Page Numbers -->\n <div class=\"lc-pagination__pages\">\n @for (page of visiblePages(); track $index) {\n @if (isEllipsis(page)) {\n <span class=\"lc-pagination__ellipsis\" aria-hidden=\"true\">\n …\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--page\"\n [class.lc-pagination__button--active]=\"isCurrentPage(page)\"\n [attr.aria-label]=\"'Page ' + page\"\n [attr.aria-current]=\"isCurrentPage(page) ? 'page' : null\"\n (click)=\"goToPage(page)\"\n >\n {{ page }}\n </button>\n }\n }\n </div>\n\n <!-- Next Button -->\n <button\n type=\"button\"\n class=\"lc-pagination__button lc-pagination__button--next\"\n [disabled]=\"isLastPage()\"\n [attr.aria-label]=\"'Next page'\"\n (click)=\"goToNextPage()\"\n >\n <span class=\"lc-pagination__button-text\">Next</span>\n <svg class=\"lc-pagination__icon\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n </svg>\n </button>\n </div>\n\n <!-- Optional Info Text -->\n @if (showInfo()) {\n <div class=\"lc-pagination__info\">\n Showing {{ firstItemIndex() }} to {{ lastItemIndex() }} of {{ totalItems() }} items\n </div>\n }\n </nav>\n}\n", styles: [".lc-pagination{display:flex;align-items:center;justify-content:center;gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-pagination--sm{font-size:var(--font-size-xs)}.lc-pagination--sm .lc-pagination__button{min-width:1.75rem;height:1.75rem;padding:0 var(--spacing-1)}.lc-pagination--sm .lc-pagination__icon{width:.875rem;height:.875rem}.lc-pagination--sm .lc-pagination__button-text{font-size:var(--font-size-xs)}.lc-pagination--md{font-size:var(--font-size-sm)}.lc-pagination--md .lc-pagination__button{min-width:2.25rem;height:2.25rem;padding:0 var(--spacing-2)}.lc-pagination--md .lc-pagination__icon{width:1rem;height:1rem}.lc-pagination--md .lc-pagination__button-text{font-size:var(--font-size-sm)}.lc-pagination--lg{font-size:var(--font-size-base)}.lc-pagination--lg .lc-pagination__button{min-width:2.75rem;height:2.75rem;padding:0 var(--spacing-3)}.lc-pagination--lg .lc-pagination__icon{width:1.25rem;height:1.25rem}.lc-pagination--lg .lc-pagination__button-text{font-size:var(--font-size-base)}.lc-pagination__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-1);border:1px solid var(--color-neutral-300);background-color:var(--color-neutral-0);color:var(--color-neutral-700);border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:all var(--transition-normal);-webkit-user-select:none;user-select:none}.lc-pagination__button:hover:not(:disabled){background-color:var(--color-neutral-50);border-color:var(--color-neutral-400);color:var(--color-neutral-900)}.lc-pagination__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-pagination__button:active:not(:disabled){background-color:var(--color-neutral-100);transform:translateY(1px)}.lc-pagination__button:disabled{opacity:.5;cursor:not-allowed}.lc-pagination__button--active{background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-neutral-0);font-weight:600}.lc-pagination__button--active:hover{background-color:var(--color-primary-700);border-color:var(--color-primary-700);color:var(--color-neutral-0)}@media(max-width:640px){.lc-pagination__button-text:not(.lc-pagination__button--active .lc-pagination__button-text){display:none}}.lc-pagination__icon{flex-shrink:0}.lc-pagination__pages{display:flex;align-items:center;gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;color:var(--color-neutral-500);-webkit-user-select:none;user-select:none}.lc-pagination__info{text-align:center;font-size:var(--font-size-sm);color:var(--color-neutral-600);margin-top:var(--spacing-3)}@media(prefers-color-scheme:dark){.lc-pagination__info{color:var(--color-neutral-400)}}@media(prefers-color-scheme:dark){.lc-pagination__button{border-color:var(--color-neutral-700);background-color:var(--color-neutral-900);color:var(--color-neutral-300)}.lc-pagination__button:hover:not(:disabled){background-color:var(--color-neutral-800);border-color:var(--color-neutral-600);color:var(--color-neutral-100)}.lc-pagination__button:active:not(:disabled){background-color:var(--color-neutral-700)}.lc-pagination__button--active{background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-neutral-0)}.lc-pagination__button--active:hover{background-color:var(--color-primary-700);border-color:var(--color-primary-700)}.lc-pagination__ellipsis{color:var(--color-neutral-500)}}@media(max-width:640px){.lc-pagination{gap:var(--spacing-1)}.lc-pagination__pages{gap:var(--spacing-0-5)}.lc-pagination__button--page:not(.lc-pagination__button--active){display:none}.lc-pagination__button--page:not(.lc-pagination__button--active):first-child,.lc-pagination__button--page:not(.lc-pagination__button--active):last-child{display:inline-flex}.lc-pagination__button--page:not(.lc-pagination__button--active):nth-child(n-1):nth-child(-n+1){display:inline-flex}}@media(prefers-reduced-motion:reduce){.lc-pagination__button{transition:none}}\n"] }]
|
|
5903
6011
|
}], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
|
|
5904
6012
|
|
|
5905
6013
|
/**
|
|
@@ -6161,7 +6269,7 @@ class SidenavComponent {
|
|
|
6161
6269
|
}
|
|
6162
6270
|
}
|
|
6163
6271
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SidenavComponent, isStandalone: true, selector: "lc-sidenav", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasOverlay: { classPropertyName: "hasOverlay", publicName: "hasOverlay", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", closed: "closed", itemClicked: "itemClicked", itemAction: "itemAction" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "class.lc-sidenav-container": "true", "class.lc-sidenav-container--docked": "effectiveMode() === 'docked'", "class.lc-sidenav-container--open": "isOpen()" } }, ngImport: i0, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n @if (isOpen()) {\n <!-- Overlay backdrop -->\n @if (hasOverlay()) {\n <div\n class=\"lc-sidenav__overlay\"\n (click)=\"handleClose()\"\n aria-hidden=\"true\">\n </div>\n }\n\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n <aside\n [class]=\"sidenavClasses()\"\n [ngStyle]=\"sidenavStyles()\"\n role=\"navigation\"\n [attr.aria-label]=\"ariaLabel()\">\n\n <!-- Logo area (sidebar-first layout) -->\n @if (showLogo()) {\n <div class=\"lc-sidenav__logo\">\n <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n <lc-logo [variant]=\"collapsed() ? 'emblem' : 'full'\" size=\"sm\" [clickable]=\"false\" [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\" />\n </button>\n </div>\n }\n\n <!-- Close button (drawer mode only) -->\n @if (effectiveMode() === 'drawer') {\n <button\n type=\"button\"\n class=\"lc-sidenav__close\"\n (click)=\"handleClose()\"\n aria-label=\"Close navigation\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <!-- Navigation items (if provided) -->\n @if (items().length > 0) {\n <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <div class=\"lc-sidenav__section-header\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\n @if (child.children?.length) {\n <!-- Section child with nested children (collapsible) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n (click)=\"toggleExpanded(child)\"\n [attr.aria-expanded]=\"isExpanded(child)\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(child)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (grandchild of child.children; track grandchild.id) {\n <a\n [routerLink]=\"grandchild.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(grandchild)\"\n [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n @if (grandchild.icon) {\n <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n @if (grandchild.badge) {\n <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Section child (simple link) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"child.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(item)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (child of item.children; track child.id) {\n <a\n [routerLink]=\"child.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n class=\"lc-sidenav__nav-item\"\n (click)=\"handleItemClick(item)\"\n [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n </a>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n }\n </nav>\n }\n\n <!-- Content projection (for custom content) -->\n <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n <ng-content></ng-content>\n </div>\n </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{--lc-sidenav-bg: var(--color-background, #ffffff);--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:2px;right:2px;margin-left:0;font-size:.625rem;min-width:0;padding:0 3px;line-height:1.2}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);height:64px;flex-shrink:0}.lc-sidenav__logo-link{display:flex;align-items:center;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm, .25rem)}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-item--active:hover{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8)}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active);font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--radius-sm, .25rem);color:var(--lc-sidenav-section-fg);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--dark{--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}.lc-sidenav--dark .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav--dark .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child,.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: BadgeComponent, selector: "lc-badge", inputs: ["variant", "size", "rounded"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable", "colorMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6272
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SidenavComponent, isStandalone: true, selector: "lc-sidenav", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasOverlay: { classPropertyName: "hasOverlay", publicName: "hasOverlay", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", closed: "closed", itemClicked: "itemClicked", itemAction: "itemAction" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "class.lc-sidenav-container": "true", "class.lc-sidenav-container--docked": "effectiveMode() === 'docked'", "class.lc-sidenav-container--open": "isOpen()" } }, ngImport: i0, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n @if (isOpen()) {\n <!-- Overlay backdrop -->\n @if (hasOverlay()) {\n <div\n class=\"lc-sidenav__overlay\"\n (click)=\"handleClose()\"\n aria-hidden=\"true\">\n </div>\n }\n\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n <aside\n [class]=\"sidenavClasses()\"\n [ngStyle]=\"sidenavStyles()\"\n role=\"navigation\"\n [attr.aria-label]=\"ariaLabel()\">\n\n <!-- Logo area (sidebar-first layout) -->\n @if (showLogo()) {\n <div class=\"lc-sidenav__logo\">\n <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n <lc-logo [variant]=\"collapsed() ? 'emblem' : 'full'\" size=\"sm\" [clickable]=\"false\" [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\" />\n </button>\n </div>\n }\n\n <!-- Close button (drawer mode only) -->\n @if (effectiveMode() === 'drawer') {\n <button\n type=\"button\"\n class=\"lc-sidenav__close\"\n (click)=\"handleClose()\"\n aria-label=\"Close navigation\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <!-- Navigation items (if provided) -->\n @if (items().length > 0) {\n <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <div class=\"lc-sidenav__section-header\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\n @if (child.children?.length) {\n <!-- Section child with nested children (collapsible) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n (click)=\"toggleExpanded(child)\"\n [attr.aria-expanded]=\"isExpanded(child)\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(child)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (grandchild of child.children; track grandchild.id) {\n <a\n [routerLink]=\"grandchild.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(grandchild)\"\n [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n @if (grandchild.icon) {\n <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n @if (grandchild.badge) {\n <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Section child (simple link) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"child.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(item)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (child of item.children; track child.id) {\n <a\n [routerLink]=\"child.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n class=\"lc-sidenav__nav-item\"\n (click)=\"handleItemClick(item)\"\n [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n </a>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n }\n </nav>\n }\n\n <!-- Content projection (for custom content) -->\n <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n <ng-content></ng-content>\n </div>\n </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{--lc-sidenav-bg: var(--color-background, #ffffff);--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:2px;right:2px;margin-left:0;font-size:.625rem;min-width:0;padding:0 3px;line-height:1.2}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);height:64px;flex-shrink:0}.lc-sidenav__logo-link{display:flex;align-items:center;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm, .25rem)}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-item--active:hover{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8)}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active);font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--radius-sm, .25rem);color:var(--lc-sidenav-section-fg);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--dark{--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}.lc-sidenav--dark .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav--dark .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child,.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: BadgeComponent, selector: "lc-badge", inputs: ["variant", "size", "rounded"] }, { kind: "component", type: LogoComponent, selector: "lc-logo", inputs: ["variant", "size", "alt", "clickable", "colorMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6165
6273
|
}
|
|
6166
6274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, decorators: [{
|
|
6167
6275
|
type: Component,
|
|
@@ -6169,7 +6277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
6169
6277
|
'[class.lc-sidenav-container]': 'true',
|
|
6170
6278
|
'[class.lc-sidenav-container--docked]': "effectiveMode() === 'docked'",
|
|
6171
6279
|
'[class.lc-sidenav-container--open]': 'isOpen()',
|
|
6172
|
-
}, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n @if (isOpen()) {\n <!-- Overlay backdrop -->\n @if (hasOverlay()) {\n <div\n class=\"lc-sidenav__overlay\"\n (click)=\"handleClose()\"\n aria-hidden=\"true\">\n </div>\n }\n\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n <aside\n [class]=\"sidenavClasses()\"\n [ngStyle]=\"sidenavStyles()\"\n role=\"navigation\"\n [attr.aria-label]=\"ariaLabel()\">\n\n <!-- Logo area (sidebar-first layout) -->\n @if (showLogo()) {\n <div class=\"lc-sidenav__logo\">\n <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n <lc-logo [variant]=\"collapsed() ? 'emblem' : 'full'\" size=\"sm\" [clickable]=\"false\" [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\" />\n </button>\n </div>\n }\n\n <!-- Close button (drawer mode only) -->\n @if (effectiveMode() === 'drawer') {\n <button\n type=\"button\"\n class=\"lc-sidenav__close\"\n (click)=\"handleClose()\"\n aria-label=\"Close navigation\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <!-- Navigation items (if provided) -->\n @if (items().length > 0) {\n <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <div class=\"lc-sidenav__section-header\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\n @if (child.children?.length) {\n <!-- Section child with nested children (collapsible) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n (click)=\"toggleExpanded(child)\"\n [attr.aria-expanded]=\"isExpanded(child)\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(child)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (grandchild of child.children; track grandchild.id) {\n <a\n [routerLink]=\"grandchild.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(grandchild)\"\n [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n @if (grandchild.icon) {\n <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n @if (grandchild.badge) {\n <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Section child (simple link) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"child.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(item)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (child of item.children; track child.id) {\n <a\n [routerLink]=\"child.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n class=\"lc-sidenav__nav-item\"\n (click)=\"handleItemClick(item)\"\n [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n </a>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n }\n </nav>\n }\n\n <!-- Content projection (for custom content) -->\n <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n <ng-content></ng-content>\n </div>\n </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{--lc-sidenav-bg: var(--color-background, #ffffff);--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:2px;right:2px;margin-left:0;font-size:.625rem;min-width:0;padding:0 3px;line-height:1.2}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);height:64px;flex-shrink:0}.lc-sidenav__logo-link{display:flex;align-items:center;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm, .25rem)}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding:4rem 1rem 1rem}.lc-sidenav__nav--docked{padding-top:1rem;gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1, .25rem)}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-item--active:hover{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8)}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active);font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--spacing-1, .25rem);padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--radius-sm, .25rem);color:var(--lc-sidenav-section-fg);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--dark{--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}.lc-sidenav--dark .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav--dark .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child,.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"] }]
|
|
6280
|
+
}, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n @if (isOpen()) {\n <!-- Overlay backdrop -->\n @if (hasOverlay()) {\n <div\n class=\"lc-sidenav__overlay\"\n (click)=\"handleClose()\"\n aria-hidden=\"true\">\n </div>\n }\n\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template -->\n<ng-template #sidenavPanel>\n <aside\n [class]=\"sidenavClasses()\"\n [ngStyle]=\"sidenavStyles()\"\n role=\"navigation\"\n [attr.aria-label]=\"ariaLabel()\">\n\n <!-- Logo area (sidebar-first layout) -->\n @if (showLogo()) {\n <div class=\"lc-sidenav__logo\">\n <button type=\"button\" class=\"lc-sidenav__logo-link\" aria-label=\"Toggle sidebar\" (click)=\"toggleCollapsed()\">\n <lc-logo [variant]=\"collapsed() ? 'emblem' : 'full'\" size=\"sm\" [clickable]=\"false\" [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\" />\n </button>\n </div>\n }\n\n <!-- Close button (drawer mode only) -->\n @if (effectiveMode() === 'drawer') {\n <button\n type=\"button\"\n class=\"lc-sidenav__close\"\n (click)=\"handleClose()\"\n aria-label=\"Close navigation\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <!-- Navigation items (if provided) -->\n @if (items().length > 0) {\n <nav class=\"lc-sidenav__nav\" [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <div class=\"lc-sidenav__section-header\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\n @if (child.children?.length) {\n <!-- Section child with nested children (collapsible) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n (click)=\"toggleExpanded(child)\"\n [attr.aria-expanded]=\"isExpanded(child)\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(child)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (grandchild of child.children; track grandchild.id) {\n <a\n [routerLink]=\"grandchild.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(grandchild)\"\n [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n @if (grandchild.icon) {\n <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n @if (grandchild.badge) {\n <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Section child (simple link) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"child.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n [routerLinkActiveOptions]=\"{ exact: child.route === '/' }\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(item)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (child of item.children; track child.id) {\n <a\n [routerLink]=\"child.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"item.route\"\n routerLinkActive=\"lc-sidenav__nav-item--active\"\n [routerLinkActiveOptions]=\"{ exact: item.route === '/' }\"\n class=\"lc-sidenav__nav-item\"\n (click)=\"handleItemClick(item)\"\n [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n </a>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n }\n </nav>\n }\n\n <!-- Content projection (for custom content) -->\n <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"mode() === 'docked'\">\n <ng-content></ng-content>\n </div>\n </aside>\n</ng-template>\n", styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}.lc-sidenav{--lc-sidenav-bg: var(--color-background, #ffffff);--lc-sidenav-fg: #374151;--lc-sidenav-fg-active: #111827;--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: #f3f4f6;--lc-sidenav-section-fg: #6b7280;position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg);box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, #e5e7eb);transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:56px!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem;gap:0;border-radius:var(--radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-neutral-900, #111827);color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:2px;right:2px;margin-left:0;font-size:.625rem;min-width:0;padding:0 3px;line-height:1.2}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:var(--spacing-3);justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border);height:64px;flex-shrink:0}.lc-sidenav__logo-link{display:flex;align-items:center;text-decoration:none;color:var(--lc-sidenav-fg);background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--radius-sm, .25rem)}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--spacing-3, .75rem);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg);line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--spacing-3, .75rem);text-decoration:none;color:var(--lc-sidenav-fg);border-radius:var(--radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-sidenav__nav-item--active{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8);font-weight:600}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-600, #2563eb)}.lc-sidenav__nav-item--active:hover{background-color:var(--color-primary-50, rgba(59, 130, 246, .1));color:var(--color-primary-700, #1d4ed8)}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active);font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--radius-sm, .25rem);color:var(--lc-sidenav-section-fg);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg);color:var(--lc-sidenav-fg-active)}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--color-primary-500, rgb(59, 130, 246));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav--dark{--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}.lc-sidenav--dark .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}.lc-sidenav--dark .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child,.lc-sidenav--dark .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #1e1e22;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #2a2a2f;--lc-sidenav-section-fg: #a1a1aa;--lc-sidenav-active-bg: rgba(45, 212, 191, .12);--lc-sidenav-active-fg: #5eead4;--lc-sidenav-active-icon: #2dd4bf}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--active:hover{background-color:var(--lc-sidenav-active-bg);color:var(--lc-sidenav-active-fg)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active)}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light) .lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"] }]
|
|
6173
6281
|
}], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hasOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOverlay", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRoute", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], itemAction: [{ type: i0.Output, args: ["itemAction"] }], handleKeydown: [{
|
|
6174
6282
|
type: HostListener,
|
|
6175
6283
|
args: ['document:keydown', ['$event']]
|
|
@@ -6435,13 +6543,13 @@ class TabsComponent {
|
|
|
6435
6543
|
return tabs.length - 1;
|
|
6436
6544
|
}
|
|
6437
6545
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TabsComponent, isStandalone: true, selector: "lc-tabs", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndexInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { classAttribute: "lc-tabs" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div\n class=\"lc-tabs__container\"\n [class.lc-tabs__container--horizontal]=\"orientation() === 'horizontal'\"\n [class.lc-tabs__container--vertical]=\"orientation() === 'vertical'\"\n>\n <div\n [ngClass]=\"tabListClasses()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"orientation()\"\n (keydown)=\"handleKeyDown($event)\"\n >\n @for (tab of tabList(); track tab.id; let i = $index) {\n <button\n class=\"lc-tabs__tab\"\n [class.lc-tabs__tab--selected]=\"isSelected(i)\"\n [class.lc-tabs__tab--disabled]=\"tab.disabled()\"\n role=\"tab\"\n [attr.id]=\"tab.id\"\n [attr.aria-selected]=\"isSelected(i)\"\n [attr.aria-controls]=\"tab.panelId\"\n [attr.aria-disabled]=\"tab.disabled() || null\"\n [tabindex]=\"getTabIndex(i)\"\n [disabled]=\"tab.disabled()\"\n (click)=\"selectTab(i)\"\n >\n {{ tab.label() }}\n </button>\n }\n </div>\n\n <div class=\"lc-tabs__panels\">\n @for (tab of tabList(); track tab.id; let i = $index) {\n <div\n class=\"lc-tabs__panel\"\n [class.lc-tabs__panel--active]=\"isSelected(i)\"\n role=\"tabpanel\"\n [attr.id]=\"tab.panelId\"\n [attr.aria-labelledby]=\"tab.id\"\n [attr.hidden]=\"!isSelected(i) || null\"\n [tabindex]=\"0\"\n >\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".lc-tabs{display:block;width:100%}.lc-tabs__container{display:flex;gap:var(--spacing-4)}.lc-tabs__container--horizontal{flex-direction:column}.lc-tabs__container--vertical{flex-direction:row}.lc-tabs__list{display:flex;gap:var(--spacing-2);border-bottom:1px solid var(--color-neutral-200)}.lc-tabs__list.lc-tabs--horizontal{flex-direction:row;border-bottom:1px solid var(--color-neutral-200)}.lc-tabs__list.lc-tabs--vertical{flex-direction:column;border-bottom:none;border-right:1px solid var(--color-neutral-200);min-width:200px}.lc-tabs__tab{appearance:none;background:none;border:none;margin:0;font:inherit;cursor:pointer;padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-600);border-bottom:2px solid transparent;transition:all var(--transition-fast);white-space:nowrap}.lc-tabs__tab:hover:not(.lc-tabs__tab--disabled){color:var(--color-neutral-900);background-color:var(--color-neutral-50)}.lc-tabs__tab:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--radius-sm)}.lc-tabs__tab--selected{color:var(--color-primary-600);border-bottom-color:var(--color-primary-600);font-weight:var(--font-weight-semibold)}.lc-tabs--vertical .lc-tabs__tab--selected{border-bottom-color:transparent;border-right:2px solid var(--color-primary-600)}.lc-tabs__tab--disabled{color:var(--color-neutral-400);cursor:not-allowed;opacity:.5}.lc-tabs--vertical .lc-tabs__tab{border-bottom:none;border-right:2px solid transparent;text-align:left;width:100%}.lc-tabs__panels{flex:1;min-width:0}.lc-tabs__panel{display:none;padding:var(--spacing-4);animation:fadeIn var(--transition-fast)}.lc-tabs__panel--active{display:block}.lc-tabs__panel:focus{outline:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6546
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TabsComponent, isStandalone: true, selector: "lc-tabs", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndexInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { classAttribute: "lc-tabs" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div\n class=\"lc-tabs__container\"\n [class.lc-tabs__container--horizontal]=\"orientation() === 'horizontal'\"\n [class.lc-tabs__container--vertical]=\"orientation() === 'vertical'\"\n>\n <div\n [ngClass]=\"tabListClasses()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"orientation()\"\n (keydown)=\"handleKeyDown($event)\"\n >\n @for (tab of tabList(); track tab.id; let i = $index) {\n <button\n class=\"lc-tabs__tab\"\n [class.lc-tabs__tab--selected]=\"isSelected(i)\"\n [class.lc-tabs__tab--disabled]=\"tab.disabled()\"\n role=\"tab\"\n [attr.id]=\"tab.id\"\n [attr.aria-selected]=\"isSelected(i)\"\n [attr.aria-controls]=\"tab.panelId\"\n [attr.aria-disabled]=\"tab.disabled() || null\"\n [tabindex]=\"getTabIndex(i)\"\n [disabled]=\"tab.disabled()\"\n (click)=\"selectTab(i)\"\n >\n {{ tab.label() }}\n </button>\n }\n </div>\n\n <div class=\"lc-tabs__panels\">\n @for (tab of tabList(); track tab.id; let i = $index) {\n <div\n class=\"lc-tabs__panel\"\n [class.lc-tabs__panel--active]=\"isSelected(i)\"\n role=\"tabpanel\"\n [attr.id]=\"tab.panelId\"\n [attr.aria-labelledby]=\"tab.id\"\n [attr.hidden]=\"!isSelected(i) || null\"\n [tabindex]=\"0\"\n >\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".lc-tabs{display:block;width:100%}.lc-tabs__container{display:flex;gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-tabs__container--horizontal{flex-direction:column}.lc-tabs__container--vertical{flex-direction:row}.lc-tabs__list{display:flex;gap:var(--lc-density-gap-sm, var(--spacing-2));border-bottom:1px solid var(--color-neutral-200)}.lc-tabs__list.lc-tabs--horizontal{flex-direction:row;border-bottom:1px solid var(--color-neutral-200)}.lc-tabs__list.lc-tabs--vertical{flex-direction:column;border-bottom:none;border-right:1px solid var(--color-neutral-200);min-width:200px}.lc-tabs__tab{appearance:none;background:none;border:none;margin:0;font:inherit;cursor:pointer;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-md, var(--spacing-4));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-600);border-bottom:2px solid transparent;transition:all var(--transition-fast);white-space:nowrap}.lc-tabs__tab:hover:not(.lc-tabs__tab--disabled){color:var(--color-neutral-900);background-color:var(--color-neutral-50)}.lc-tabs__tab:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--radius-sm)}.lc-tabs__tab--selected{color:var(--color-primary-600);border-bottom-color:var(--color-primary-600);font-weight:var(--font-weight-semibold)}.lc-tabs--vertical .lc-tabs__tab--selected{border-bottom-color:transparent;border-right:2px solid var(--color-primary-600)}.lc-tabs__tab--disabled{color:var(--color-neutral-400);cursor:not-allowed;opacity:.5}.lc-tabs--vertical .lc-tabs__tab{border-bottom:none;border-right:2px solid transparent;text-align:left;width:100%}.lc-tabs__panels{flex:1;min-width:0}.lc-tabs__panel{display:none;padding:var(--lc-density-padding-md, var(--spacing-4));animation:fadeIn var(--transition-fast)}.lc-tabs__panel--active{display:block}.lc-tabs__panel:focus{outline:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6439
6547
|
}
|
|
6440
6548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TabsComponent, decorators: [{
|
|
6441
6549
|
type: Component,
|
|
6442
6550
|
args: [{ selector: 'lc-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6443
6551
|
class: 'lc-tabs',
|
|
6444
|
-
}, template: "<div\n class=\"lc-tabs__container\"\n [class.lc-tabs__container--horizontal]=\"orientation() === 'horizontal'\"\n [class.lc-tabs__container--vertical]=\"orientation() === 'vertical'\"\n>\n <div\n [ngClass]=\"tabListClasses()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"orientation()\"\n (keydown)=\"handleKeyDown($event)\"\n >\n @for (tab of tabList(); track tab.id; let i = $index) {\n <button\n class=\"lc-tabs__tab\"\n [class.lc-tabs__tab--selected]=\"isSelected(i)\"\n [class.lc-tabs__tab--disabled]=\"tab.disabled()\"\n role=\"tab\"\n [attr.id]=\"tab.id\"\n [attr.aria-selected]=\"isSelected(i)\"\n [attr.aria-controls]=\"tab.panelId\"\n [attr.aria-disabled]=\"tab.disabled() || null\"\n [tabindex]=\"getTabIndex(i)\"\n [disabled]=\"tab.disabled()\"\n (click)=\"selectTab(i)\"\n >\n {{ tab.label() }}\n </button>\n }\n </div>\n\n <div class=\"lc-tabs__panels\">\n @for (tab of tabList(); track tab.id; let i = $index) {\n <div\n class=\"lc-tabs__panel\"\n [class.lc-tabs__panel--active]=\"isSelected(i)\"\n role=\"tabpanel\"\n [attr.id]=\"tab.panelId\"\n [attr.aria-labelledby]=\"tab.id\"\n [attr.hidden]=\"!isSelected(i) || null\"\n [tabindex]=\"0\"\n >\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".lc-tabs{display:block;width:100%}.lc-tabs__container{display:flex;gap:var(--spacing-4)}.lc-tabs__container--horizontal{flex-direction:column}.lc-tabs__container--vertical{flex-direction:row}.lc-tabs__list{display:flex;gap:var(--spacing-2);border-bottom:1px solid var(--color-neutral-200)}.lc-tabs__list.lc-tabs--horizontal{flex-direction:row;border-bottom:1px solid var(--color-neutral-200)}.lc-tabs__list.lc-tabs--vertical{flex-direction:column;border-bottom:none;border-right:1px solid var(--color-neutral-200);min-width:200px}.lc-tabs__tab{appearance:none;background:none;border:none;margin:0;font:inherit;cursor:pointer;padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-600);border-bottom:2px solid transparent;transition:all var(--transition-fast);white-space:nowrap}.lc-tabs__tab:hover:not(.lc-tabs__tab--disabled){color:var(--color-neutral-900);background-color:var(--color-neutral-50)}.lc-tabs__tab:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--radius-sm)}.lc-tabs__tab--selected{color:var(--color-primary-600);border-bottom-color:var(--color-primary-600);font-weight:var(--font-weight-semibold)}.lc-tabs--vertical .lc-tabs__tab--selected{border-bottom-color:transparent;border-right:2px solid var(--color-primary-600)}.lc-tabs__tab--disabled{color:var(--color-neutral-400);cursor:not-allowed;opacity:.5}.lc-tabs--vertical .lc-tabs__tab{border-bottom:none;border-right:2px solid transparent;text-align:left;width:100%}.lc-tabs__panels{flex:1;min-width:0}.lc-tabs__panel{display:none;padding:var(--spacing-4);animation:fadeIn var(--transition-fast)}.lc-tabs__panel--active{display:block}.lc-tabs__panel:focus{outline:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
6552
|
+
}, template: "<div\n class=\"lc-tabs__container\"\n [class.lc-tabs__container--horizontal]=\"orientation() === 'horizontal'\"\n [class.lc-tabs__container--vertical]=\"orientation() === 'vertical'\"\n>\n <div\n [ngClass]=\"tabListClasses()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"orientation()\"\n (keydown)=\"handleKeyDown($event)\"\n >\n @for (tab of tabList(); track tab.id; let i = $index) {\n <button\n class=\"lc-tabs__tab\"\n [class.lc-tabs__tab--selected]=\"isSelected(i)\"\n [class.lc-tabs__tab--disabled]=\"tab.disabled()\"\n role=\"tab\"\n [attr.id]=\"tab.id\"\n [attr.aria-selected]=\"isSelected(i)\"\n [attr.aria-controls]=\"tab.panelId\"\n [attr.aria-disabled]=\"tab.disabled() || null\"\n [tabindex]=\"getTabIndex(i)\"\n [disabled]=\"tab.disabled()\"\n (click)=\"selectTab(i)\"\n >\n {{ tab.label() }}\n </button>\n }\n </div>\n\n <div class=\"lc-tabs__panels\">\n @for (tab of tabList(); track tab.id; let i = $index) {\n <div\n class=\"lc-tabs__panel\"\n [class.lc-tabs__panel--active]=\"isSelected(i)\"\n role=\"tabpanel\"\n [attr.id]=\"tab.panelId\"\n [attr.aria-labelledby]=\"tab.id\"\n [attr.hidden]=\"!isSelected(i) || null\"\n [tabindex]=\"0\"\n >\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".lc-tabs{display:block;width:100%}.lc-tabs__container{display:flex;gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-tabs__container--horizontal{flex-direction:column}.lc-tabs__container--vertical{flex-direction:row}.lc-tabs__list{display:flex;gap:var(--lc-density-gap-sm, var(--spacing-2));border-bottom:1px solid var(--color-neutral-200)}.lc-tabs__list.lc-tabs--horizontal{flex-direction:row;border-bottom:1px solid var(--color-neutral-200)}.lc-tabs__list.lc-tabs--vertical{flex-direction:column;border-bottom:none;border-right:1px solid var(--color-neutral-200);min-width:200px}.lc-tabs__tab{appearance:none;background:none;border:none;margin:0;font:inherit;cursor:pointer;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-md, var(--spacing-4));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-neutral-600);border-bottom:2px solid transparent;transition:all var(--transition-fast);white-space:nowrap}.lc-tabs__tab:hover:not(.lc-tabs__tab--disabled){color:var(--color-neutral-900);background-color:var(--color-neutral-50)}.lc-tabs__tab:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--radius-sm)}.lc-tabs__tab--selected{color:var(--color-primary-600);border-bottom-color:var(--color-primary-600);font-weight:var(--font-weight-semibold)}.lc-tabs--vertical .lc-tabs__tab--selected{border-bottom-color:transparent;border-right:2px solid var(--color-primary-600)}.lc-tabs__tab--disabled{color:var(--color-neutral-400);cursor:not-allowed;opacity:.5}.lc-tabs--vertical .lc-tabs__tab{border-bottom:none;border-right:2px solid transparent;text-align:left;width:100%}.lc-tabs__panels{flex:1;min-width:0}.lc-tabs__panel{display:none;padding:var(--lc-density-padding-md, var(--spacing-4));animation:fadeIn var(--transition-fast)}.lc-tabs__panel--active{display:block}.lc-tabs__panel:focus{outline:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
6445
6553
|
}], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], selectedIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndexInput", required: false }] }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }], tabs: [{
|
|
6446
6554
|
type: ContentChildren,
|
|
6447
6555
|
args: [TabComponent]
|
|
@@ -6613,11 +6721,11 @@ class ListComponent {
|
|
|
6613
6721
|
this.actionClick.emit(item);
|
|
6614
6722
|
}
|
|
6615
6723
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6616
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ListComponent, isStandalone: true, selector: "lc-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDividers: { classPropertyName: "showDividers", publicName: "showDividers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", actionClick: "actionClick" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true }], ngImport: i0, template: "<div [class]=\"listClasses()\" role=\"list\">\n @for (item of items(); track item.id || $index) {\n <div\n [class]=\"getItemClasses(item)\"\n role=\"listitem\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onItemClick(item)\"\n >\n @if (itemTemplate) {\n <ng-container *ngTemplateOutlet=\"itemTemplate.template; context: { $implicit: item }\"></ng-container>\n } @else {\n <!-- Leading: Avatar or Icon -->\n @if (item.avatar) {\n <div class=\"lc-list__avatar\">\n @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n } @else {\n <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n }\n </div>\n } @else if (item.icon) {\n <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" />\n }\n\n <!-- Content: Label, Subtitle, Description -->\n <div class=\"lc-list__content\">\n <span class=\"lc-list__label\">{{ item.label }}</span>\n @if (item.subtitle) {\n <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n }\n @if (item.description) {\n <span class=\"lc-list__description\">{{ item.description }}</span>\n }\n </div>\n\n <!-- Trailing: Badge, Metadata, Action -->\n <div class=\"lc-list__trailing\">\n @if (item.badge) {\n <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n }\n @if (item.metadata) {\n <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n }\n @if (item.action) {\n <lc-button\n variant=\"ghost\"\n size=\"xs\"\n class=\"lc-list__action\"\n (clicked)=\"onActionClick(item)\"\n >\n {{ item.action }}\n </lc-button>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical .lc-list__item:last-child{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-200, #e5e7eb)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent;flex:1}.lc-list--horizontal .lc-list__item:last-child{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);cursor:pointer;transition:background-color .2s ease}.lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-100, #f3f4f6)}.lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-list__label{flex:1;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-500, #6b7280);line-height:var(--line-height-sm, 1.25rem)}.lc-list__description{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-700, #374151)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.lc-list__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--spacing-2) var(--spacing-3);gap:var(--spacing-2)}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--spacing-4) var(--spacing-5);gap:var(--spacing-4)}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-neutral-50, #f9fafb);border:1px solid var(--color-neutral-200, #e5e7eb);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-100, #f3f4f6);border-color:var(--color-neutral-300, #d1d5db);box-shadow:0 1px 3px #0000000f}.lc-list--card .lc-list__item:active:not(.lc-list__item--disabled){background:var(--color-neutral-200, #e5e7eb)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}:host-context([data-theme=dark]) .lc-list{background-color:var(--color-neutral-900, #111827)}:host-context([data-theme=dark]) .lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-800, #1f2937)}:host-context([data-theme=dark]) .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__icon{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__label{color:var(--color-neutral-100, #f3f4f6)}:host-context([data-theme=dark]) .lc-list__subtitle{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__description{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__metadata{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__avatar{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__avatar-initials{color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--default{background-color:var(--color-neutral-800, #1f2937);color:var(--color-neutral-300, #d1d5db)}:host-context([data-theme=dark]) .lc-list__badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--success{background-color:var(--color-success-900, #14532d);color:var(--color-success-300, #86efac)}:host-context([data-theme=dark]) .lc-list__badge--warning{background-color:var(--color-warning-900, #78350f);color:var(--color-warning-300, #fcd34d)}:host-context([data-theme=dark]) .lc-list__badge--error{background-color:var(--color-error-900, #7f1d1d);color:var(--color-error-300, #fca5a5)}:host-context([data-theme=dark]) .lc-list__item--selected{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-800, #1e40af)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item{background:var(--color-neutral-800, #1f2937);border-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-700, #374151);border-color:var(--color-neutral-600, #4b5563)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6724
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ListComponent, isStandalone: true, selector: "lc-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDividers: { classPropertyName: "showDividers", publicName: "showDividers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", actionClick: "actionClick" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true }], ngImport: i0, template: "<div [class]=\"listClasses()\" role=\"list\">\n @for (item of items(); track item.id || $index) {\n <div\n [class]=\"getItemClasses(item)\"\n role=\"listitem\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onItemClick(item)\"\n >\n @if (itemTemplate) {\n <ng-container *ngTemplateOutlet=\"itemTemplate.template; context: { $implicit: item }\"></ng-container>\n } @else {\n <!-- Leading: Avatar or Icon -->\n @if (item.avatar) {\n <div class=\"lc-list__avatar\">\n @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n } @else {\n <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n }\n </div>\n } @else if (item.icon) {\n <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" />\n }\n\n <!-- Content: Label, Subtitle, Description -->\n <div class=\"lc-list__content\">\n <span class=\"lc-list__label\">{{ item.label }}</span>\n @if (item.subtitle) {\n <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n }\n @if (item.description) {\n <span class=\"lc-list__description\">{{ item.description }}</span>\n }\n </div>\n\n <!-- Trailing: Badge, Metadata, Action -->\n <div class=\"lc-list__trailing\">\n @if (item.badge) {\n <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n }\n @if (item.metadata) {\n <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n }\n @if (item.action) {\n <lc-button\n variant=\"ghost\"\n size=\"xs\"\n class=\"lc-list__action\"\n (clicked)=\"onActionClick(item)\"\n >\n {{ item.action }}\n </lc-button>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical .lc-list__item:last-child{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-200, #e5e7eb)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent;flex:1}.lc-list--horizontal .lc-list__item:last-child{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));cursor:pointer;transition:background-color .2s ease}.lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-100, #f3f4f6)}.lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-list__label{flex:1;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-500, #6b7280);line-height:var(--line-height-sm, 1.25rem)}.lc-list__description{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-700, #374151)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.lc-list__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-neutral-50, #f9fafb);border:1px solid var(--color-neutral-200, #e5e7eb);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-100, #f3f4f6);border-color:var(--color-neutral-300, #d1d5db);box-shadow:0 1px 3px #0000000f}.lc-list--card .lc-list__item:active:not(.lc-list__item--disabled){background:var(--color-neutral-200, #e5e7eb)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}:host-context([data-theme=dark]) .lc-list{background-color:var(--color-neutral-900, #111827)}:host-context([data-theme=dark]) .lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-800, #1f2937)}:host-context([data-theme=dark]) .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__icon{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__label{color:var(--color-neutral-100, #f3f4f6)}:host-context([data-theme=dark]) .lc-list__subtitle{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__description{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__metadata{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__avatar{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__avatar-initials{color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--default{background-color:var(--color-neutral-800, #1f2937);color:var(--color-neutral-300, #d1d5db)}:host-context([data-theme=dark]) .lc-list__badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--success{background-color:var(--color-success-900, #14532d);color:var(--color-success-300, #86efac)}:host-context([data-theme=dark]) .lc-list__badge--warning{background-color:var(--color-warning-900, #78350f);color:var(--color-warning-300, #fcd34d)}:host-context([data-theme=dark]) .lc-list__badge--error{background-color:var(--color-error-900, #7f1d1d);color:var(--color-error-300, #fca5a5)}:host-context([data-theme=dark]) .lc-list__item--selected{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-800, #1e40af)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item{background:var(--color-neutral-800, #1f2937);border-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-700, #374151);border-color:var(--color-neutral-600, #4b5563)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "component", type: ButtonComponent, selector: "lc-button", inputs: ["variant", "size", "disabled", "loading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6617
6725
|
}
|
|
6618
6726
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ListComponent, decorators: [{
|
|
6619
6727
|
type: Component,
|
|
6620
|
-
args: [{ selector: 'lc-list', standalone: true, imports: [NgTemplateOutlet, IconComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"listClasses()\" role=\"list\">\n @for (item of items(); track item.id || $index) {\n <div\n [class]=\"getItemClasses(item)\"\n role=\"listitem\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onItemClick(item)\"\n >\n @if (itemTemplate) {\n <ng-container *ngTemplateOutlet=\"itemTemplate.template; context: { $implicit: item }\"></ng-container>\n } @else {\n <!-- Leading: Avatar or Icon -->\n @if (item.avatar) {\n <div class=\"lc-list__avatar\">\n @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n } @else {\n <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n }\n </div>\n } @else if (item.icon) {\n <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" />\n }\n\n <!-- Content: Label, Subtitle, Description -->\n <div class=\"lc-list__content\">\n <span class=\"lc-list__label\">{{ item.label }}</span>\n @if (item.subtitle) {\n <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n }\n @if (item.description) {\n <span class=\"lc-list__description\">{{ item.description }}</span>\n }\n </div>\n\n <!-- Trailing: Badge, Metadata, Action -->\n <div class=\"lc-list__trailing\">\n @if (item.badge) {\n <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n }\n @if (item.metadata) {\n <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n }\n @if (item.action) {\n <lc-button\n variant=\"ghost\"\n size=\"xs\"\n class=\"lc-list__action\"\n (clicked)=\"onActionClick(item)\"\n >\n {{ item.action }}\n </lc-button>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical .lc-list__item:last-child{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-200, #e5e7eb)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent;flex:1}.lc-list--horizontal .lc-list__item:last-child{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);cursor:pointer;transition:background-color .2s ease}.lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-100, #f3f4f6)}.lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-list__label{flex:1;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-500, #6b7280);line-height:var(--line-height-sm, 1.25rem)}.lc-list__description{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-700, #374151)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.lc-list__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--spacing-2) var(--spacing-3);gap:var(--spacing-2)}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--spacing-4) var(--spacing-5);gap:var(--spacing-4)}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-neutral-50, #f9fafb);border:1px solid var(--color-neutral-200, #e5e7eb);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-100, #f3f4f6);border-color:var(--color-neutral-300, #d1d5db);box-shadow:0 1px 3px #0000000f}.lc-list--card .lc-list__item:active:not(.lc-list__item--disabled){background:var(--color-neutral-200, #e5e7eb)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}:host-context([data-theme=dark]) .lc-list{background-color:var(--color-neutral-900, #111827)}:host-context([data-theme=dark]) .lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-800, #1f2937)}:host-context([data-theme=dark]) .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__icon{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__label{color:var(--color-neutral-100, #f3f4f6)}:host-context([data-theme=dark]) .lc-list__subtitle{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__description{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__metadata{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__avatar{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__avatar-initials{color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--default{background-color:var(--color-neutral-800, #1f2937);color:var(--color-neutral-300, #d1d5db)}:host-context([data-theme=dark]) .lc-list__badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--success{background-color:var(--color-success-900, #14532d);color:var(--color-success-300, #86efac)}:host-context([data-theme=dark]) .lc-list__badge--warning{background-color:var(--color-warning-900, #78350f);color:var(--color-warning-300, #fcd34d)}:host-context([data-theme=dark]) .lc-list__badge--error{background-color:var(--color-error-900, #7f1d1d);color:var(--color-error-300, #fca5a5)}:host-context([data-theme=dark]) .lc-list__item--selected{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-800, #1e40af)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item{background:var(--color-neutral-800, #1f2937);border-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-700, #374151);border-color:var(--color-neutral-600, #4b5563)}\n"] }]
|
|
6728
|
+
args: [{ selector: 'lc-list', standalone: true, imports: [NgTemplateOutlet, IconComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"listClasses()\" role=\"list\">\n @for (item of items(); track item.id || $index) {\n <div\n [class]=\"getItemClasses(item)\"\n role=\"listitem\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onItemClick(item)\"\n >\n @if (itemTemplate) {\n <ng-container *ngTemplateOutlet=\"itemTemplate.template; context: { $implicit: item }\"></ng-container>\n } @else {\n <!-- Leading: Avatar or Icon -->\n @if (item.avatar) {\n <div class=\"lc-list__avatar\">\n @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n } @else {\n <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n }\n </div>\n } @else if (item.icon) {\n <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" />\n }\n\n <!-- Content: Label, Subtitle, Description -->\n <div class=\"lc-list__content\">\n <span class=\"lc-list__label\">{{ item.label }}</span>\n @if (item.subtitle) {\n <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n }\n @if (item.description) {\n <span class=\"lc-list__description\">{{ item.description }}</span>\n }\n </div>\n\n <!-- Trailing: Badge, Metadata, Action -->\n <div class=\"lc-list__trailing\">\n @if (item.badge) {\n <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n }\n @if (item.metadata) {\n <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n }\n @if (item.action) {\n <lc-button\n variant=\"ghost\"\n size=\"xs\"\n class=\"lc-list__action\"\n (clicked)=\"onActionClick(item)\"\n >\n {{ item.action }}\n </lc-button>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical .lc-list__item:last-child{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-200, #e5e7eb)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent;flex:1}.lc-list--horizontal .lc-list__item:last-child{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));cursor:pointer;transition:background-color .2s ease}.lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-100, #f3f4f6)}.lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-200, #e5e7eb)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-neutral-500, #6b7280)}.lc-list__label{flex:1;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-500, #6b7280);line-height:var(--line-height-sm, 1.25rem)}.lc-list__description{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-700, #374151)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.lc-list__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-neutral-50, #f9fafb);border:1px solid var(--color-neutral-200, #e5e7eb);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-100, #f3f4f6);border-color:var(--color-neutral-300, #d1d5db);box-shadow:0 1px 3px #0000000f}.lc-list--card .lc-list__item:active:not(.lc-list__item--disabled){background:var(--color-neutral-200, #e5e7eb)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}:host-context([data-theme=dark]) .lc-list{background-color:var(--color-neutral-900, #111827)}:host-context([data-theme=dark]) .lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-neutral-800, #1f2937)}:host-context([data-theme=dark]) .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list__icon{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__label{color:var(--color-neutral-100, #f3f4f6)}:host-context([data-theme=dark]) .lc-list__subtitle{color:var(--color-neutral-400, #9ca3af)}:host-context([data-theme=dark]) .lc-list__description{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__metadata{color:var(--color-neutral-500, #6b7280)}:host-context([data-theme=dark]) .lc-list__avatar{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__avatar-initials{color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--default{background-color:var(--color-neutral-800, #1f2937);color:var(--color-neutral-300, #d1d5db)}:host-context([data-theme=dark]) .lc-list__badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-300, #93c5fd)}:host-context([data-theme=dark]) .lc-list__badge--success{background-color:var(--color-success-900, #14532d);color:var(--color-success-300, #86efac)}:host-context([data-theme=dark]) .lc-list__badge--warning{background-color:var(--color-warning-900, #78350f);color:var(--color-warning-300, #fcd34d)}:host-context([data-theme=dark]) .lc-list__badge--error{background-color:var(--color-error-900, #7f1d1d);color:var(--color-error-300, #fca5a5)}:host-context([data-theme=dark]) .lc-list__item--selected{background-color:var(--color-primary-900, #1e3a5f)}:host-context([data-theme=dark]) .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-800, #1e40af)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item{background:var(--color-neutral-800, #1f2937);border-color:var(--color-neutral-700, #374151)}:host-context([data-theme=dark]) .lc-list--card .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-neutral-700, #374151);border-color:var(--color-neutral-600, #4b5563)}\n"] }]
|
|
6621
6729
|
}], propDecorators: { itemTemplate: [{
|
|
6622
6730
|
type: ContentChild,
|
|
6623
6731
|
args: [ListItemTemplateDirective]
|
|
@@ -7033,11 +7141,11 @@ class TableComponent {
|
|
|
7033
7141
|
return event.target.value;
|
|
7034
7142
|
}
|
|
7035
7143
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7036
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TableComponent, isStandalone: true, selector: "lc-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sort", rowClick: "rowClick", cellEdit: "cellEdit", selectionChange: "selectionChange" }, queries: [{ propertyName: "cellTemplates", predicate: TableCellDirective }], ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n <table [class]=\"tableClasses()\" role=\"table\">\n <thead>\n <!-- Filter row -->\n @if (filterable()) {\n <tr class=\"lc-table__filter-row\">\n @if (selectable()) {\n <th class=\"lc-table__select-cell\"></th>\n }\n @for (column of columns(); track column.key) {\n <th>\n @if (column.filterable !== false) {\n <input\n type=\"text\"\n class=\"lc-table__filter-input\"\n [placeholder]=\"'Filter ' + column.label\"\n [value]=\"getFilterValue(column.key)\"\n (input)=\"onFilterChange(column.key, $event)\"\n [attr.aria-label]=\"'Filter by ' + column.label\"\n />\n }\n </th>\n }\n </tr>\n }\n <!-- Header row -->\n <tr>\n @if (selectable()) {\n <th class=\"lc-table__select-cell\" scope=\"col\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"allSelected()\"\n (change)=\"toggleSelectAll()\"\n aria-label=\"Select all rows\"\n />\n </th>\n }\n @for (column of columns(); track column.key) {\n <th\n scope=\"col\"\n [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n [attr.aria-sort]=\"getAriaSort(column.key)\"\n [style.width]=\"column.width\"\n [title]=\"column.tooltip || ''\"\n (click)=\"handleSort(column.key)\">\n {{ column.label }}\n @if (column.sortable && getSortState(column.key)) {\n <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n @if (getSortState(column.key) === 'asc') {\n \u2191\n } @else {\n \u2193\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (displayData().length === 0) {\n <tr>\n <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\" class=\"lc-table__empty\">\n {{ emptyText() }}\n </td>\n </tr>\n } @else {\n @for (row of displayData(); track $index; let i = $index) {\n <tr\n [class.lc-table__row--selected]=\"selectable() && isRowSelected(i)\"\n (click)=\"onRowClick(row)\"\n >\n @if (selectable()) {\n <td class=\"lc-table__select-cell\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"isRowSelected($index)\"\n (change)=\"toggleRowSelect($index)\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"'Select row ' + ($index + 1)\"\n />\n </td>\n }\n @for (column of columns(); track column.key) {\n <td\n [class]=\"column.cssClass || ''\"\n (dblclick)=\"editable() ? startEdit($index, column.key, getCellValue(row, column.key)) : null\"\n >\n @if (isEditing($index, column.key)) {\n <input\n type=\"text\"\n class=\"lc-table__edit-input\"\n [value]=\"editValue()\"\n (input)=\"editValue.set(getInputValue($event))\"\n (blur)=\"commitEdit($index, column.key)\"\n (keydown)=\"onEditKeydown($event, $index, column.key)\"\n autofocus\n />\n } @else if (hasCustomTemplate(column.key)) {\n <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n } @else {\n {{ getCellValue(row, column.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Pagination -->\n@if (paginate()) {\n <div class=\"lc-table-pagination\">\n <div class=\"lc-table-pagination__info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n </div>\n <div class=\"lc-table-pagination__controls\">\n <select\n class=\"lc-table-pagination__size\"\n [value]=\"internalPageSize()\"\n (change)=\"onPageSizeChange($event)\"\n aria-label=\"Rows per page\"\n >\n @for (opt of pageSizeOptions(); track opt) {\n <option [value]=\"opt\">{{ opt }} / page</option>\n }\n </select>\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n aria-label=\"Previous page\"\n >\u2039</button>\n <span class=\"lc-table-pagination__page\">\n {{ currentPage() + 1 }} / {{ totalPages() }}\n </span>\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() >= totalPages() - 1\"\n (click)=\"goToPage(currentPage() + 1)\"\n aria-label=\"Next page\"\n >\u203A</button>\n </div>\n </div>\n}\n", styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-background);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface);border-bottom:2px solid var(--color-border)}.lc-table thead tr th{padding:var(--spacing-3) var(--spacing-4);text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--spacing-3) var(--spacing-4);font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-50)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-100)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--spacing-2) var(--spacing-3);font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--spacing-4) var(--spacing-5);font-size:var(--typography-font-size-base)}[data-theme=dark] .lc-table,:root[data-theme=dark] .lc-table{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-table thead,:root[data-theme=dark] .lc-table thead{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th,:root[data-theme=dark] .lc-table thead tr th{color:var(--color-text-primary);background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table thead tr th.sortable:hover,:root[data-theme=dark] .lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th.sorted-asc,[data-theme=dark] .lc-table thead tr th.sorted-desc,:root[data-theme=dark] .lc-table thead tr th.sorted-asc,:root[data-theme=dark] .lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n),:root[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover,:root[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-700)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);background-color:var(--color-background);color:var(--color-text-primary);transition:border-color .15s ease}.lc-table__filter-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.lc-table__filter-input::placeholder{color:var(--color-text-secondary);opacity:.6}.lc-table__select-cell{width:40px;text-align:center!important;padding:var(--spacing-2)!important}.lc-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__row--selected{background-color:var(--color-primary-50, rgba(59, 130, 246, .08))!important}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-background);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{appearance:none;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-background);color:var(--color-text-primary);font-size:var(--typography-font-size-xs);cursor:pointer}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-100)}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}[data-theme=dark] .lc-table__filter-input,:root[data-theme=dark] .lc-table__filter-input{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table__edit-input,:root[data-theme=dark] .lc-table__edit-input{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table__row--selected,:root[data-theme=dark] .lc-table__row--selected{background-color:#3b82f61f!important}[data-theme=dark] .lc-table-pagination__size,[data-theme=dark] .lc-table-pagination__btn,:root[data-theme=dark] .lc-table-pagination__size,:root[data-theme=dark] .lc-table-pagination__btn{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7144
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TableComponent, isStandalone: true, selector: "lc-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sort", rowClick: "rowClick", cellEdit: "cellEdit", selectionChange: "selectionChange" }, queries: [{ propertyName: "cellTemplates", predicate: TableCellDirective }], ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n <table [class]=\"tableClasses()\" role=\"table\">\n <thead>\n <!-- Filter row -->\n @if (filterable()) {\n <tr class=\"lc-table__filter-row\">\n @if (selectable()) {\n <th class=\"lc-table__select-cell\"></th>\n }\n @for (column of columns(); track column.key) {\n <th>\n @if (column.filterable !== false) {\n <input\n type=\"text\"\n class=\"lc-table__filter-input\"\n [placeholder]=\"'Filter ' + column.label\"\n [value]=\"getFilterValue(column.key)\"\n (input)=\"onFilterChange(column.key, $event)\"\n [attr.aria-label]=\"'Filter by ' + column.label\"\n />\n }\n </th>\n }\n </tr>\n }\n <!-- Header row -->\n <tr>\n @if (selectable()) {\n <th class=\"lc-table__select-cell\" scope=\"col\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"allSelected()\"\n (change)=\"toggleSelectAll()\"\n aria-label=\"Select all rows\"\n />\n </th>\n }\n @for (column of columns(); track column.key) {\n <th\n scope=\"col\"\n [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n [attr.aria-sort]=\"getAriaSort(column.key)\"\n [style.width]=\"column.width\"\n [title]=\"column.tooltip || ''\"\n (click)=\"handleSort(column.key)\">\n {{ column.label }}\n @if (column.sortable && getSortState(column.key)) {\n <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n @if (getSortState(column.key) === 'asc') {\n \u2191\n } @else {\n \u2193\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (displayData().length === 0) {\n <tr>\n <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\" class=\"lc-table__empty\">\n {{ emptyText() }}\n </td>\n </tr>\n } @else {\n @for (row of displayData(); track $index; let i = $index) {\n <tr\n [class.lc-table__row--selected]=\"selectable() && isRowSelected(i)\"\n (click)=\"onRowClick(row)\"\n >\n @if (selectable()) {\n <td class=\"lc-table__select-cell\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"isRowSelected($index)\"\n (change)=\"toggleRowSelect($index)\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"'Select row ' + ($index + 1)\"\n />\n </td>\n }\n @for (column of columns(); track column.key) {\n <td\n [class]=\"column.cssClass || ''\"\n (dblclick)=\"editable() ? startEdit($index, column.key, getCellValue(row, column.key)) : null\"\n >\n @if (isEditing($index, column.key)) {\n <input\n type=\"text\"\n class=\"lc-table__edit-input\"\n [value]=\"editValue()\"\n (input)=\"editValue.set(getInputValue($event))\"\n (blur)=\"commitEdit($index, column.key)\"\n (keydown)=\"onEditKeydown($event, $index, column.key)\"\n autofocus\n />\n } @else if (hasCustomTemplate(column.key)) {\n <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n } @else {\n {{ getCellValue(row, column.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Pagination -->\n@if (paginate()) {\n <div class=\"lc-table-pagination\">\n <div class=\"lc-table-pagination__info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n </div>\n <div class=\"lc-table-pagination__controls\">\n <select\n class=\"lc-table-pagination__size\"\n [value]=\"internalPageSize()\"\n (change)=\"onPageSizeChange($event)\"\n aria-label=\"Rows per page\"\n >\n @for (opt of pageSizeOptions(); track opt) {\n <option [value]=\"opt\">{{ opt }} / page</option>\n }\n </select>\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n aria-label=\"Previous page\"\n >\u2039</button>\n <span class=\"lc-table-pagination__page\">\n {{ currentPage() + 1 }} / {{ totalPages() }}\n </span>\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() >= totalPages() - 1\"\n (click)=\"goToPage(currentPage() + 1)\"\n aria-label=\"Next page\"\n >\u203A</button>\n </div>\n </div>\n}\n", styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-background);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface);border-bottom:2px solid var(--color-border)}.lc-table thead tr th{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-50)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-100)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--typography-font-size-base)}[data-theme=dark] .lc-table,:root[data-theme=dark] .lc-table{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-table thead,:root[data-theme=dark] .lc-table thead{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th,:root[data-theme=dark] .lc-table thead tr th{color:var(--color-text-primary);background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table thead tr th.sortable:hover,:root[data-theme=dark] .lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th.sorted-asc,[data-theme=dark] .lc-table thead tr th.sorted-desc,:root[data-theme=dark] .lc-table thead tr th.sorted-asc,:root[data-theme=dark] .lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n),:root[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover,:root[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-700)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);background-color:var(--color-background);color:var(--color-text-primary);transition:border-color .15s ease}.lc-table__filter-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.lc-table__filter-input::placeholder{color:var(--color-text-secondary);opacity:.6}.lc-table__select-cell{width:40px;text-align:center!important;padding:var(--spacing-2)!important}.lc-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__row--selected{background-color:var(--color-primary-50, rgba(59, 130, 246, .08))!important}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-background);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{appearance:none;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-background);color:var(--color-text-primary);font-size:var(--typography-font-size-xs);cursor:pointer}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-100)}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}[data-theme=dark] .lc-table__filter-input,:root[data-theme=dark] .lc-table__filter-input{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table__edit-input,:root[data-theme=dark] .lc-table__edit-input{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table__row--selected,:root[data-theme=dark] .lc-table__row--selected{background-color:#3b82f61f!important}[data-theme=dark] .lc-table-pagination__size,[data-theme=dark] .lc-table-pagination__btn,:root[data-theme=dark] .lc-table-pagination__size,:root[data-theme=dark] .lc-table-pagination__btn{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7037
7145
|
}
|
|
7038
7146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableComponent, decorators: [{
|
|
7039
7147
|
type: Component,
|
|
7040
|
-
args: [{ selector: 'lc-table', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClasses()\">\n <table [class]=\"tableClasses()\" role=\"table\">\n <thead>\n <!-- Filter row -->\n @if (filterable()) {\n <tr class=\"lc-table__filter-row\">\n @if (selectable()) {\n <th class=\"lc-table__select-cell\"></th>\n }\n @for (column of columns(); track column.key) {\n <th>\n @if (column.filterable !== false) {\n <input\n type=\"text\"\n class=\"lc-table__filter-input\"\n [placeholder]=\"'Filter ' + column.label\"\n [value]=\"getFilterValue(column.key)\"\n (input)=\"onFilterChange(column.key, $event)\"\n [attr.aria-label]=\"'Filter by ' + column.label\"\n />\n }\n </th>\n }\n </tr>\n }\n <!-- Header row -->\n <tr>\n @if (selectable()) {\n <th class=\"lc-table__select-cell\" scope=\"col\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"allSelected()\"\n (change)=\"toggleSelectAll()\"\n aria-label=\"Select all rows\"\n />\n </th>\n }\n @for (column of columns(); track column.key) {\n <th\n scope=\"col\"\n [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n [attr.aria-sort]=\"getAriaSort(column.key)\"\n [style.width]=\"column.width\"\n [title]=\"column.tooltip || ''\"\n (click)=\"handleSort(column.key)\">\n {{ column.label }}\n @if (column.sortable && getSortState(column.key)) {\n <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n @if (getSortState(column.key) === 'asc') {\n \u2191\n } @else {\n \u2193\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (displayData().length === 0) {\n <tr>\n <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\" class=\"lc-table__empty\">\n {{ emptyText() }}\n </td>\n </tr>\n } @else {\n @for (row of displayData(); track $index; let i = $index) {\n <tr\n [class.lc-table__row--selected]=\"selectable() && isRowSelected(i)\"\n (click)=\"onRowClick(row)\"\n >\n @if (selectable()) {\n <td class=\"lc-table__select-cell\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"isRowSelected($index)\"\n (change)=\"toggleRowSelect($index)\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"'Select row ' + ($index + 1)\"\n />\n </td>\n }\n @for (column of columns(); track column.key) {\n <td\n [class]=\"column.cssClass || ''\"\n (dblclick)=\"editable() ? startEdit($index, column.key, getCellValue(row, column.key)) : null\"\n >\n @if (isEditing($index, column.key)) {\n <input\n type=\"text\"\n class=\"lc-table__edit-input\"\n [value]=\"editValue()\"\n (input)=\"editValue.set(getInputValue($event))\"\n (blur)=\"commitEdit($index, column.key)\"\n (keydown)=\"onEditKeydown($event, $index, column.key)\"\n autofocus\n />\n } @else if (hasCustomTemplate(column.key)) {\n <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n } @else {\n {{ getCellValue(row, column.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Pagination -->\n@if (paginate()) {\n <div class=\"lc-table-pagination\">\n <div class=\"lc-table-pagination__info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n </div>\n <div class=\"lc-table-pagination__controls\">\n <select\n class=\"lc-table-pagination__size\"\n [value]=\"internalPageSize()\"\n (change)=\"onPageSizeChange($event)\"\n aria-label=\"Rows per page\"\n >\n @for (opt of pageSizeOptions(); track opt) {\n <option [value]=\"opt\">{{ opt }} / page</option>\n }\n </select>\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n aria-label=\"Previous page\"\n >\u2039</button>\n <span class=\"lc-table-pagination__page\">\n {{ currentPage() + 1 }} / {{ totalPages() }}\n </span>\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() >= totalPages() - 1\"\n (click)=\"goToPage(currentPage() + 1)\"\n aria-label=\"Next page\"\n >\u203A</button>\n </div>\n </div>\n}\n", styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-background);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface);border-bottom:2px solid var(--color-border)}.lc-table thead tr th{padding:var(--spacing-3) var(--spacing-4);text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--spacing-3) var(--spacing-4);font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-50)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-100)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--spacing-2) var(--spacing-3);font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--spacing-4) var(--spacing-5);font-size:var(--typography-font-size-base)}[data-theme=dark] .lc-table,:root[data-theme=dark] .lc-table{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-table thead,:root[data-theme=dark] .lc-table thead{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th,:root[data-theme=dark] .lc-table thead tr th{color:var(--color-text-primary);background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table thead tr th.sortable:hover,:root[data-theme=dark] .lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th.sorted-asc,[data-theme=dark] .lc-table thead tr th.sorted-desc,:root[data-theme=dark] .lc-table thead tr th.sorted-asc,:root[data-theme=dark] .lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n),:root[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover,:root[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-700)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);background-color:var(--color-background);color:var(--color-text-primary);transition:border-color .15s ease}.lc-table__filter-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.lc-table__filter-input::placeholder{color:var(--color-text-secondary);opacity:.6}.lc-table__select-cell{width:40px;text-align:center!important;padding:var(--spacing-2)!important}.lc-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__row--selected{background-color:var(--color-primary-50, rgba(59, 130, 246, .08))!important}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-background);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{appearance:none;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-background);color:var(--color-text-primary);font-size:var(--typography-font-size-xs);cursor:pointer}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-100)}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}[data-theme=dark] .lc-table__filter-input,:root[data-theme=dark] .lc-table__filter-input{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table__edit-input,:root[data-theme=dark] .lc-table__edit-input{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table__row--selected,:root[data-theme=dark] .lc-table__row--selected{background-color:#3b82f61f!important}[data-theme=dark] .lc-table-pagination__size,[data-theme=dark] .lc-table-pagination__btn,:root[data-theme=dark] .lc-table-pagination__size,:root[data-theme=dark] .lc-table-pagination__btn{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-700)}\n"] }]
|
|
7148
|
+
args: [{ selector: 'lc-table', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClasses()\">\n <table [class]=\"tableClasses()\" role=\"table\">\n <thead>\n <!-- Filter row -->\n @if (filterable()) {\n <tr class=\"lc-table__filter-row\">\n @if (selectable()) {\n <th class=\"lc-table__select-cell\"></th>\n }\n @for (column of columns(); track column.key) {\n <th>\n @if (column.filterable !== false) {\n <input\n type=\"text\"\n class=\"lc-table__filter-input\"\n [placeholder]=\"'Filter ' + column.label\"\n [value]=\"getFilterValue(column.key)\"\n (input)=\"onFilterChange(column.key, $event)\"\n [attr.aria-label]=\"'Filter by ' + column.label\"\n />\n }\n </th>\n }\n </tr>\n }\n <!-- Header row -->\n <tr>\n @if (selectable()) {\n <th class=\"lc-table__select-cell\" scope=\"col\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"allSelected()\"\n (change)=\"toggleSelectAll()\"\n aria-label=\"Select all rows\"\n />\n </th>\n }\n @for (column of columns(); track column.key) {\n <th\n scope=\"col\"\n [class]=\"getHeaderClasses(column) + (column.cssClass ? ' ' + column.cssClass : '')\"\n [attr.aria-sort]=\"getAriaSort(column.key)\"\n [style.width]=\"column.width\"\n [title]=\"column.tooltip || ''\"\n (click)=\"handleSort(column.key)\">\n {{ column.label }}\n @if (column.sortable && getSortState(column.key)) {\n <span class=\"sort-indicator\" [attr.aria-label]=\"getSortState(column.key) === 'asc' ? 'sorted ascending' : 'sorted descending'\">\n @if (getSortState(column.key) === 'asc') {\n \u2191\n } @else {\n \u2193\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (displayData().length === 0) {\n <tr>\n <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\" class=\"lc-table__empty\">\n {{ emptyText() }}\n </td>\n </tr>\n } @else {\n @for (row of displayData(); track $index; let i = $index) {\n <tr\n [class.lc-table__row--selected]=\"selectable() && isRowSelected(i)\"\n (click)=\"onRowClick(row)\"\n >\n @if (selectable()) {\n <td class=\"lc-table__select-cell\">\n <input\n type=\"checkbox\"\n class=\"lc-table__checkbox\"\n [checked]=\"isRowSelected($index)\"\n (change)=\"toggleRowSelect($index)\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"'Select row ' + ($index + 1)\"\n />\n </td>\n }\n @for (column of columns(); track column.key) {\n <td\n [class]=\"column.cssClass || ''\"\n (dblclick)=\"editable() ? startEdit($index, column.key, getCellValue(row, column.key)) : null\"\n >\n @if (isEditing($index, column.key)) {\n <input\n type=\"text\"\n class=\"lc-table__edit-input\"\n [value]=\"editValue()\"\n (input)=\"editValue.set(getInputValue($event))\"\n (blur)=\"commitEdit($index, column.key)\"\n (keydown)=\"onEditKeydown($event, $index, column.key)\"\n autofocus\n />\n } @else if (hasCustomTemplate(column.key)) {\n <ng-container *ngTemplateOutlet=\"getCellTemplate(column.key)!.template; context: { $implicit: row }\"></ng-container>\n } @else {\n {{ getCellValue(row, column.key) }}\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n<!-- Pagination -->\n@if (paginate()) {\n <div class=\"lc-table-pagination\">\n <div class=\"lc-table-pagination__info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} of {{ totalRows() }}\n </div>\n <div class=\"lc-table-pagination__controls\">\n <select\n class=\"lc-table-pagination__size\"\n [value]=\"internalPageSize()\"\n (change)=\"onPageSizeChange($event)\"\n aria-label=\"Rows per page\"\n >\n @for (opt of pageSizeOptions(); track opt) {\n <option [value]=\"opt\">{{ opt }} / page</option>\n }\n </select>\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n aria-label=\"Previous page\"\n >\u2039</button>\n <span class=\"lc-table-pagination__page\">\n {{ currentPage() + 1 }} / {{ totalPages() }}\n </span>\n <button\n type=\"button\"\n class=\"lc-table-pagination__btn\"\n [disabled]=\"currentPage() >= totalPages() - 1\"\n (click)=\"goToPage(currentPage() + 1)\"\n aria-label=\"Next page\"\n >\u203A</button>\n </div>\n </div>\n}\n", styles: [".lc-table-wrapper{width:100%}.lc-table-wrapper--responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:768px){.lc-table-wrapper--responsive::-webkit-scrollbar{height:8px}.lc-table-wrapper--responsive::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:var(--border-radius-sm)}}.lc-table{width:100%;border-collapse:collapse;border-spacing:0;background-color:var(--color-background);color:var(--color-text-primary);font-family:var(--typography-font-family)}.lc-table thead{background-color:var(--color-surface);border-bottom:2px solid var(--color-border)}.lc-table thead tr th{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));text-align:left;font-weight:var(--typography-font-weight-semibold);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.lc-table thead tr th.sortable{cursor:pointer;position:relative;padding-right:var(--spacing-8);transition:background-color .2s ease}.lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-table thead tr th.sortable .sort-indicator{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);font-size:var(--typography-font-size-xs);color:var(--color-primary)}.lc-table thead tr th.sorted-asc,.lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-table tbody tr{border-bottom:1px solid var(--color-divider)}.lc-table tbody tr:last-child{border-bottom:none}.lc-table tbody tr td{padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));font-size:var(--typography-font-size-sm);color:var(--color-text-primary)}.lc-table__empty{text-align:center;padding:var(--spacing-8) var(--spacing-4)!important;color:var(--color-text-secondary);font-style:italic}.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-50)}.lc-table--bordered{border:1px solid var(--color-border)}.lc-table--bordered thead tr th,.lc-table--bordered tbody tr td{border-right:1px solid var(--color-divider)}.lc-table--bordered thead tr th:last-child,.lc-table--bordered tbody tr td:last-child{border-right:none}.lc-table--bordered tbody tr{border-bottom:1px solid var(--color-border)}.lc-table--hoverable tbody tr{transition:background-color .15s ease;cursor:pointer}.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-100)}.lc-table--sm thead tr th,.lc-table--sm tbody tr td{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--typography-font-size-xs)}.lc-table--lg thead tr th,.lc-table--lg tbody tr td{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);font-size:var(--typography-font-size-base)}[data-theme=dark] .lc-table,:root[data-theme=dark] .lc-table{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-table thead,:root[data-theme=dark] .lc-table thead{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th,:root[data-theme=dark] .lc-table thead tr th{color:var(--color-text-primary);background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table thead tr th.sortable:hover,:root[data-theme=dark] .lc-table thead tr th.sortable:hover{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table thead tr th.sorted-asc,[data-theme=dark] .lc-table thead tr th.sorted-desc,:root[data-theme=dark] .lc-table thead tr th.sorted-asc,:root[data-theme=dark] .lc-table thead tr th.sorted-desc{background-color:var(--color-neutral-700)}[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n),:root[data-theme=dark] .lc-table.lc-table--striped tbody tr:nth-child(2n){background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover,:root[data-theme=dark] .lc-table.lc-table--hoverable tbody tr:hover{background-color:var(--color-neutral-700)}.lc-table__filter-row th{padding:var(--spacing-2) var(--spacing-4)!important;background-color:var(--color-background)!important;border-bottom:1px solid var(--color-divider)!important}.lc-table__filter-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);background-color:var(--color-background);color:var(--color-text-primary);transition:border-color .15s ease}.lc-table__filter-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.lc-table__filter-input::placeholder{color:var(--color-text-secondary);opacity:.6}.lc-table__select-cell{width:40px;text-align:center!important;padding:var(--spacing-2)!important}.lc-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary)}.lc-table__row--selected{background-color:var(--color-primary-50, rgba(59, 130, 246, .08))!important}.lc-table__edit-input{width:100%;padding:var(--spacing-1) var(--spacing-2);border:2px solid var(--color-primary);border-radius:var(--border-radius-sm);font-size:inherit;background-color:var(--color-background);color:var(--color-text-primary);outline:none}.lc-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-1);font-size:var(--typography-font-size-sm);color:var(--color-text-secondary)}.lc-table-pagination__info{white-space:nowrap}.lc-table-pagination__controls{display:flex;align-items:center;gap:var(--spacing-2)}.lc-table-pagination__size{appearance:none;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background-color:var(--color-background);color:var(--color-text-primary);font-size:var(--typography-font-size-xs);cursor:pointer}.lc-table-pagination__btn{appearance:none;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-primary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-base);cursor:pointer;transition:background-color .15s ease}.lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-100)}.lc-table-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.lc-table-pagination__page{white-space:nowrap;min-width:60px;text-align:center}@media(max-width:640px){.lc-table-wrapper--stack .lc-table thead{display:none}.lc-table-wrapper--stack .lc-table tbody tr{display:block;margin-bottom:var(--spacing-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md)}.lc-table-wrapper--stack .lc-table tbody tr td{display:block;text-align:right;padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-divider)}.lc-table-wrapper--stack .lc-table tbody tr td:last-child{border-bottom:none}.lc-table-wrapper--stack .lc-table tbody tr td:before{content:attr(data-label);float:left;font-weight:var(--typography-font-weight-semibold);color:var(--color-text-secondary)}}[data-theme=dark] .lc-table__filter-input,:root[data-theme=dark] .lc-table__filter-input{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table__edit-input,:root[data-theme=dark] .lc-table__edit-input{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-table__row--selected,:root[data-theme=dark] .lc-table__row--selected{background-color:#3b82f61f!important}[data-theme=dark] .lc-table-pagination__size,[data-theme=dark] .lc-table-pagination__btn,:root[data-theme=dark] .lc-table-pagination__size,:root[data-theme=dark] .lc-table-pagination__btn{background-color:var(--color-neutral-800);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__size:hover:not(:disabled),:root[data-theme=dark] .lc-table-pagination__btn:hover:not(:disabled){background-color:var(--color-neutral-700)}\n"] }]
|
|
7041
7149
|
}], propDecorators: { cellTemplates: [{
|
|
7042
7150
|
type: ContentChildren,
|
|
7043
7151
|
args: [TableCellDirective]
|
|
@@ -8351,11 +8459,11 @@ class FooterComponent {
|
|
|
8351
8459
|
}, ...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
|
|
8352
8460
|
currentYear = new Date().getFullYear();
|
|
8353
8461
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8354
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FooterComponent, isStandalone: true, selector: "lc-footer", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<footer [class]=\"footerClasses()\" role=\"contentinfo\">\n @if (sections().length > 0 && !compact()) {\n <div class=\"footer__sections\">\n @for (section of sections(); track section.title) {\n <div class=\"footer__section\">\n <h4 class=\"footer__section-title\">{{ section.title }}</h4>\n <ul class=\"footer__links\">\n @for (link of section.links; track link.href) {\n <li>\n <a\n class=\"footer__link\"\n [href]=\"link.href\"\n [target]=\"link.external ? '_blank' : '_self'\"\n [rel]=\"link.external ? 'noopener noreferrer' : null\"\n >\n {{ link.label }}\n @if (link.external) {\n <lc-icon name=\"arrow-top-right-on-square\" size=\"xs\" class=\"footer__external-icon\" />\n }\n </a>\n </li>\n }\n </ul>\n </div>\n }\n </div>\n }\n <div class=\"footer__bottom\">\n <ng-content />\n @if (copyright()) {\n <span class=\"footer__copyright\">{{ copyright() }}</span>\n }\n </div>\n</footer>\n", styles: [".footer{padding:2rem 1.5rem 1.5rem;color:var(--color-neutral-600);font-size:var(--typography-font-size-sm, .875rem)}[data-theme=dark] .footer,:root[data-theme=dark] .footer{color:var(--color-neutral-400)}.footer--bordered{border-top:1px solid var(--color-neutral-200)}[data-theme=dark] .footer--bordered,:root[data-theme=dark] .footer--bordered{border-top-color:var(--color-neutral-700)}.footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:2rem;margin-bottom:2rem}.footer__section-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);color:var(--color-neutral-800);margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.05em}[data-theme=dark] .footer__section-title,:root[data-theme=dark] .footer__section-title{color:var(--color-neutral-200)}.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.footer__link{display:inline-flex;align-items:center;gap:.25rem;color:var(--color-neutral-500);text-decoration:none;transition:color .15s ease}.footer__link:hover{color:var(--color-primary-500)}.footer__external-icon{opacity:.6}.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.footer__copyright{color:var(--color-neutral-400);font-size:var(--typography-font-size-xs, .75rem)}[data-theme=dark] .footer__copyright,:root[data-theme=dark] .footer__copyright{color:var(--color-neutral-500)}.footer--compact{padding:1rem 1.5rem}.footer--compact .footer__bottom{justify-content:center}.footer--primary{background-color:var(--color-primary-900);color:var(--color-primary-200)}.footer--primary .footer__section-title{color:var(--color-white)}.footer--primary .footer__link{color:var(--color-primary-300)}.footer--primary .footer__link:hover{color:var(--color-white)}.footer--primary .footer__copyright{color:var(--color-primary-400)}.footer--primary.footer--bordered{border-top-color:var(--color-primary-700)}.footer--dark{background-color:var(--color-neutral-900);color:var(--color-neutral-400)}.footer--dark .footer__section-title{color:var(--color-neutral-100)}.footer--dark .footer__link{color:var(--color-neutral-400)}.footer--dark .footer__link:hover{color:var(--color-white)}.footer--dark .footer__copyright{color:var(--color-neutral-500)}.footer--dark.footer--bordered{border-top-color:var(--color-neutral-700)}.footer--neutral{background-color:var(--color-neutral-100)}[data-theme=dark] .footer--neutral,:root[data-theme=dark] .footer--neutral{background-color:var(--color-neutral-800)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8462
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FooterComponent, isStandalone: true, selector: "lc-footer", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<footer [class]=\"footerClasses()\" role=\"contentinfo\">\n @if (sections().length > 0 && !compact()) {\n <div class=\"footer__sections\">\n @for (section of sections(); track section.title) {\n <div class=\"footer__section\">\n <h4 class=\"footer__section-title\">{{ section.title }}</h4>\n <ul class=\"footer__links\">\n @for (link of section.links; track link.href) {\n <li>\n <a\n class=\"footer__link\"\n [href]=\"link.href\"\n [target]=\"link.external ? '_blank' : '_self'\"\n [rel]=\"link.external ? 'noopener noreferrer' : null\"\n >\n {{ link.label }}\n @if (link.external) {\n <lc-icon name=\"arrow-top-right-on-square\" size=\"xs\" class=\"footer__external-icon\" />\n }\n </a>\n </li>\n }\n </ul>\n </div>\n }\n </div>\n }\n <div class=\"footer__bottom\">\n <ng-content />\n @if (copyright()) {\n <span class=\"footer__copyright\">{{ copyright() }}</span>\n }\n </div>\n</footer>\n", styles: [".footer{padding:var(--lc-density-padding-xl, 2rem) var(--lc-density-padding-lg, 1.5rem) var(--lc-density-padding-lg, 1.5rem);color:var(--color-neutral-600);font-size:var(--typography-font-size-sm, .875rem)}[data-theme=dark] .footer,:root[data-theme=dark] .footer{color:var(--color-neutral-400)}.footer--bordered{border-top:1px solid var(--color-neutral-200)}[data-theme=dark] .footer--bordered,:root[data-theme=dark] .footer--bordered{border-top-color:var(--color-neutral-700)}.footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--lc-density-gap-xl, 2rem);margin-bottom:var(--lc-density-padding-xl, 2rem)}.footer__section-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);color:var(--color-neutral-800);margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.05em}[data-theme=dark] .footer__section-title,:root[data-theme=dark] .footer__section-title{color:var(--color-neutral-200)}.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.footer__link{display:inline-flex;align-items:center;gap:.25rem;color:var(--color-neutral-500);text-decoration:none;transition:color .15s ease}.footer__link:hover{color:var(--color-primary-500)}.footer__external-icon{opacity:.6}.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.footer__copyright{color:var(--color-neutral-400);font-size:var(--typography-font-size-xs, .75rem)}[data-theme=dark] .footer__copyright,:root[data-theme=dark] .footer__copyright{color:var(--color-neutral-500)}.footer--compact{padding:1rem 1.5rem}.footer--compact .footer__bottom{justify-content:center}.footer--primary{background-color:var(--color-primary-900);color:var(--color-primary-200)}.footer--primary .footer__section-title{color:var(--color-white)}.footer--primary .footer__link{color:var(--color-primary-300)}.footer--primary .footer__link:hover{color:var(--color-white)}.footer--primary .footer__copyright{color:var(--color-primary-400)}.footer--primary.footer--bordered{border-top-color:var(--color-primary-700)}.footer--dark{background-color:var(--color-neutral-900);color:var(--color-neutral-400)}.footer--dark .footer__section-title{color:var(--color-neutral-100)}.footer--dark .footer__link{color:var(--color-neutral-400)}.footer--dark .footer__link:hover{color:var(--color-white)}.footer--dark .footer__copyright{color:var(--color-neutral-500)}.footer--dark.footer--bordered{border-top-color:var(--color-neutral-700)}.footer--neutral{background-color:var(--color-neutral-100)}[data-theme=dark] .footer--neutral,:root[data-theme=dark] .footer--neutral{background-color:var(--color-neutral-800)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8355
8463
|
}
|
|
8356
8464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FooterComponent, decorators: [{
|
|
8357
8465
|
type: Component,
|
|
8358
|
-
args: [{ selector: 'lc-footer', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer [class]=\"footerClasses()\" role=\"contentinfo\">\n @if (sections().length > 0 && !compact()) {\n <div class=\"footer__sections\">\n @for (section of sections(); track section.title) {\n <div class=\"footer__section\">\n <h4 class=\"footer__section-title\">{{ section.title }}</h4>\n <ul class=\"footer__links\">\n @for (link of section.links; track link.href) {\n <li>\n <a\n class=\"footer__link\"\n [href]=\"link.href\"\n [target]=\"link.external ? '_blank' : '_self'\"\n [rel]=\"link.external ? 'noopener noreferrer' : null\"\n >\n {{ link.label }}\n @if (link.external) {\n <lc-icon name=\"arrow-top-right-on-square\" size=\"xs\" class=\"footer__external-icon\" />\n }\n </a>\n </li>\n }\n </ul>\n </div>\n }\n </div>\n }\n <div class=\"footer__bottom\">\n <ng-content />\n @if (copyright()) {\n <span class=\"footer__copyright\">{{ copyright() }}</span>\n }\n </div>\n</footer>\n", styles: [".footer{padding:2rem 1.5rem 1.5rem;color:var(--color-neutral-600);font-size:var(--typography-font-size-sm, .875rem)}[data-theme=dark] .footer,:root[data-theme=dark] .footer{color:var(--color-neutral-400)}.footer--bordered{border-top:1px solid var(--color-neutral-200)}[data-theme=dark] .footer--bordered,:root[data-theme=dark] .footer--bordered{border-top-color:var(--color-neutral-700)}.footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:2rem;margin-bottom:2rem}.footer__section-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);color:var(--color-neutral-800);margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.05em}[data-theme=dark] .footer__section-title,:root[data-theme=dark] .footer__section-title{color:var(--color-neutral-200)}.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.footer__link{display:inline-flex;align-items:center;gap:.25rem;color:var(--color-neutral-500);text-decoration:none;transition:color .15s ease}.footer__link:hover{color:var(--color-primary-500)}.footer__external-icon{opacity:.6}.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.footer__copyright{color:var(--color-neutral-400);font-size:var(--typography-font-size-xs, .75rem)}[data-theme=dark] .footer__copyright,:root[data-theme=dark] .footer__copyright{color:var(--color-neutral-500)}.footer--compact{padding:1rem 1.5rem}.footer--compact .footer__bottom{justify-content:center}.footer--primary{background-color:var(--color-primary-900);color:var(--color-primary-200)}.footer--primary .footer__section-title{color:var(--color-white)}.footer--primary .footer__link{color:var(--color-primary-300)}.footer--primary .footer__link:hover{color:var(--color-white)}.footer--primary .footer__copyright{color:var(--color-primary-400)}.footer--primary.footer--bordered{border-top-color:var(--color-primary-700)}.footer--dark{background-color:var(--color-neutral-900);color:var(--color-neutral-400)}.footer--dark .footer__section-title{color:var(--color-neutral-100)}.footer--dark .footer__link{color:var(--color-neutral-400)}.footer--dark .footer__link:hover{color:var(--color-white)}.footer--dark .footer__copyright{color:var(--color-neutral-500)}.footer--dark.footer--bordered{border-top-color:var(--color-neutral-700)}.footer--neutral{background-color:var(--color-neutral-100)}[data-theme=dark] .footer--neutral,:root[data-theme=dark] .footer--neutral{background-color:var(--color-neutral-800)}\n"] }]
|
|
8466
|
+
args: [{ selector: 'lc-footer', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer [class]=\"footerClasses()\" role=\"contentinfo\">\n @if (sections().length > 0 && !compact()) {\n <div class=\"footer__sections\">\n @for (section of sections(); track section.title) {\n <div class=\"footer__section\">\n <h4 class=\"footer__section-title\">{{ section.title }}</h4>\n <ul class=\"footer__links\">\n @for (link of section.links; track link.href) {\n <li>\n <a\n class=\"footer__link\"\n [href]=\"link.href\"\n [target]=\"link.external ? '_blank' : '_self'\"\n [rel]=\"link.external ? 'noopener noreferrer' : null\"\n >\n {{ link.label }}\n @if (link.external) {\n <lc-icon name=\"arrow-top-right-on-square\" size=\"xs\" class=\"footer__external-icon\" />\n }\n </a>\n </li>\n }\n </ul>\n </div>\n }\n </div>\n }\n <div class=\"footer__bottom\">\n <ng-content />\n @if (copyright()) {\n <span class=\"footer__copyright\">{{ copyright() }}</span>\n }\n </div>\n</footer>\n", styles: [".footer{padding:var(--lc-density-padding-xl, 2rem) var(--lc-density-padding-lg, 1.5rem) var(--lc-density-padding-lg, 1.5rem);color:var(--color-neutral-600);font-size:var(--typography-font-size-sm, .875rem)}[data-theme=dark] .footer,:root[data-theme=dark] .footer{color:var(--color-neutral-400)}.footer--bordered{border-top:1px solid var(--color-neutral-200)}[data-theme=dark] .footer--bordered,:root[data-theme=dark] .footer--bordered{border-top-color:var(--color-neutral-700)}.footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--lc-density-gap-xl, 2rem);margin-bottom:var(--lc-density-padding-xl, 2rem)}.footer__section-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);color:var(--color-neutral-800);margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.05em}[data-theme=dark] .footer__section-title,:root[data-theme=dark] .footer__section-title{color:var(--color-neutral-200)}.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.footer__link{display:inline-flex;align-items:center;gap:.25rem;color:var(--color-neutral-500);text-decoration:none;transition:color .15s ease}.footer__link:hover{color:var(--color-primary-500)}.footer__external-icon{opacity:.6}.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.footer__copyright{color:var(--color-neutral-400);font-size:var(--typography-font-size-xs, .75rem)}[data-theme=dark] .footer__copyright,:root[data-theme=dark] .footer__copyright{color:var(--color-neutral-500)}.footer--compact{padding:1rem 1.5rem}.footer--compact .footer__bottom{justify-content:center}.footer--primary{background-color:var(--color-primary-900);color:var(--color-primary-200)}.footer--primary .footer__section-title{color:var(--color-white)}.footer--primary .footer__link{color:var(--color-primary-300)}.footer--primary .footer__link:hover{color:var(--color-white)}.footer--primary .footer__copyright{color:var(--color-primary-400)}.footer--primary.footer--bordered{border-top-color:var(--color-primary-700)}.footer--dark{background-color:var(--color-neutral-900);color:var(--color-neutral-400)}.footer--dark .footer__section-title{color:var(--color-neutral-100)}.footer--dark .footer__link{color:var(--color-neutral-400)}.footer--dark .footer__link:hover{color:var(--color-white)}.footer--dark .footer__copyright{color:var(--color-neutral-500)}.footer--dark.footer--bordered{border-top-color:var(--color-neutral-700)}.footer--neutral{background-color:var(--color-neutral-100)}[data-theme=dark] .footer--neutral,:root[data-theme=dark] .footer--neutral{background-color:var(--color-neutral-800)}\n"] }]
|
|
8359
8467
|
}], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], copyright: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyright", required: false }] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
8360
8468
|
|
|
8361
8469
|
/**
|
|
@@ -10285,91 +10393,395 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
10285
10393
|
}], 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"] }] } });
|
|
10286
10394
|
|
|
10287
10395
|
/**
|
|
10288
|
-
*
|
|
10396
|
+
* Markdown renderer component.
|
|
10289
10397
|
*
|
|
10290
|
-
*
|
|
10291
|
-
*
|
|
10292
|
-
* - Streaming cursor indicator for AI responses
|
|
10293
|
-
* - Typing indicator with animated dots
|
|
10294
|
-
* - Auto-scroll to latest message
|
|
10295
|
-
* - Optional avatars and timestamps
|
|
10296
|
-
* - Configurable header with title
|
|
10297
|
-
* - Send on Enter with Shift+Enter for newline
|
|
10398
|
+
* Renders GitHub-Flavored Markdown (GFM) to sanitized HTML with
|
|
10399
|
+
* optional syntax highlighting via `<lc-code-block>`.
|
|
10298
10400
|
*
|
|
10299
10401
|
* @example
|
|
10300
10402
|
* ```html
|
|
10301
|
-
* <lc-
|
|
10403
|
+
* <lc-markdown [content]="'# Hello World'" />
|
|
10404
|
+
* <lc-markdown [src]="'/docs/readme.md'" />
|
|
10302
10405
|
* ```
|
|
10303
10406
|
*/
|
|
10304
|
-
class
|
|
10305
|
-
|
|
10306
|
-
|
|
10307
|
-
|
|
10308
|
-
|
|
10309
|
-
|
|
10310
|
-
|
|
10311
|
-
|
|
10312
|
-
|
|
10313
|
-
|
|
10314
|
-
|
|
10315
|
-
|
|
10316
|
-
|
|
10317
|
-
|
|
10318
|
-
|
|
10319
|
-
|
|
10320
|
-
|
|
10321
|
-
|
|
10322
|
-
|
|
10323
|
-
|
|
10324
|
-
|
|
10325
|
-
|
|
10326
|
-
|
|
10327
|
-
|
|
10328
|
-
|
|
10329
|
-
|
|
10330
|
-
|
|
10331
|
-
|
|
10332
|
-
|
|
10333
|
-
if (
|
|
10334
|
-
|
|
10335
|
-
|
|
10407
|
+
class MarkdownComponent {
|
|
10408
|
+
sanitizer = inject(DomSanitizer);
|
|
10409
|
+
http = inject(HttpClient);
|
|
10410
|
+
httpSub;
|
|
10411
|
+
/** URL or path to load markdown from */
|
|
10412
|
+
src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
|
|
10413
|
+
/** Raw markdown string */
|
|
10414
|
+
content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
|
|
10415
|
+
/** Display variant */
|
|
10416
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
10417
|
+
/** Target for links */
|
|
10418
|
+
linkTarget = input('_self', ...(ngDevMode ? [{ debugName: "linkTarget" }] : /* istanbul ignore next */ []));
|
|
10419
|
+
/** Whether to sanitize HTML output */
|
|
10420
|
+
sanitize = input(true, ...(ngDevMode ? [{ debugName: "sanitize" }] : /* istanbul ignore next */ []));
|
|
10421
|
+
/** Whether to use code-block for fenced code */
|
|
10422
|
+
syntaxHighlight = input(true, ...(ngDevMode ? [{ debugName: "syntaxHighlight" }] : /* istanbul ignore next */ []));
|
|
10423
|
+
/** Whether to show anchor links on headings */
|
|
10424
|
+
showHeadingAnchors = input(false, ...(ngDevMode ? [{ debugName: "showHeadingAnchors" }] : /* istanbul ignore next */ []));
|
|
10425
|
+
/** Base URL for resolving relative links/images */
|
|
10426
|
+
baseUrl = input(...(ngDevMode ? [undefined, { debugName: "baseUrl" }] : /* istanbul ignore next */ []));
|
|
10427
|
+
/** Emitted when a link is clicked */
|
|
10428
|
+
linkClick = output();
|
|
10429
|
+
/** Emitted after rendering with heading TOC */
|
|
10430
|
+
rendered = output();
|
|
10431
|
+
/** Internal resolved markdown source */
|
|
10432
|
+
resolvedMarkdown = signal('', ...(ngDevMode ? [{ debugName: "resolvedMarkdown" }] : /* istanbul ignore next */ []));
|
|
10433
|
+
/** Parsed result (computed once from resolvedMarkdown) */
|
|
10434
|
+
parsed = computed(() => {
|
|
10435
|
+
const md = this.resolvedMarkdown();
|
|
10436
|
+
if (!md)
|
|
10437
|
+
return { html: '', blocks: [], headings: [] };
|
|
10438
|
+
return this.parseMarkdown(md);
|
|
10439
|
+
}, ...(ngDevMode ? [{ debugName: "parsed" }] : /* istanbul ignore next */ []));
|
|
10440
|
+
/** Computed render parts (HTML chunks + code blocks interleaved) */
|
|
10441
|
+
renderParts = computed(() => {
|
|
10442
|
+
const { html, blocks } = this.parsed();
|
|
10443
|
+
if (!html)
|
|
10444
|
+
return [];
|
|
10445
|
+
if (this.syntaxHighlight() && blocks.length > 0) {
|
|
10446
|
+
return this.splitIntoParts(html, blocks);
|
|
10336
10447
|
}
|
|
10448
|
+
// No code blocks — single HTML part
|
|
10449
|
+
const sanitized = this.sanitize()
|
|
10450
|
+
? this.sanitizer.sanitize(SecurityContext.HTML, html) || ''
|
|
10451
|
+
: html;
|
|
10452
|
+
return [{
|
|
10453
|
+
type: 'html',
|
|
10454
|
+
index: 0,
|
|
10455
|
+
safeHtml: this.sanitizer.bypassSecurityTrustHtml(sanitized),
|
|
10456
|
+
}];
|
|
10457
|
+
}, ...(ngDevMode ? [{ debugName: "renderParts" }] : /* istanbul ignore next */ []));
|
|
10458
|
+
containerClasses = computed(() => {
|
|
10459
|
+
return `lc-markdown lc-markdown--${this.variant()}`;
|
|
10460
|
+
}, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
|
|
10461
|
+
headings = computed(() => this.parsed().headings, ...(ngDevMode ? [{ debugName: "headings" }] : /* istanbul ignore next */ []));
|
|
10462
|
+
constructor() {
|
|
10463
|
+
// Load content from src when src changes
|
|
10464
|
+
effect(() => {
|
|
10465
|
+
const src = this.src();
|
|
10466
|
+
if (src) {
|
|
10467
|
+
this.loadFromUrl(src);
|
|
10468
|
+
}
|
|
10469
|
+
});
|
|
10470
|
+
// Use raw content when provided
|
|
10471
|
+
effect(() => {
|
|
10472
|
+
const content = this.content();
|
|
10473
|
+
if (content !== undefined) {
|
|
10474
|
+
this.resolvedMarkdown.set(content);
|
|
10475
|
+
}
|
|
10476
|
+
});
|
|
10477
|
+
// Emit rendered event when headings change
|
|
10478
|
+
effect(() => {
|
|
10479
|
+
const h = this.headings();
|
|
10480
|
+
if (h.length > 0) {
|
|
10481
|
+
this.rendered.emit({ headings: h });
|
|
10482
|
+
}
|
|
10483
|
+
});
|
|
10337
10484
|
}
|
|
10338
|
-
|
|
10339
|
-
this.
|
|
10485
|
+
ngOnDestroy() {
|
|
10486
|
+
this.httpSub?.unsubscribe();
|
|
10340
10487
|
}
|
|
10341
|
-
|
|
10342
|
-
|
|
10343
|
-
|
|
10344
|
-
|
|
10488
|
+
onLinkClick(event) {
|
|
10489
|
+
const target = event.target;
|
|
10490
|
+
const anchor = target.closest('a');
|
|
10491
|
+
if (anchor) {
|
|
10492
|
+
this.linkClick.emit({ href: anchor.href, event });
|
|
10345
10493
|
}
|
|
10346
10494
|
}
|
|
10347
|
-
|
|
10348
|
-
|
|
10349
|
-
|
|
10350
|
-
|
|
10351
|
-
|
|
10352
|
-
|
|
10353
|
-
this.shouldScroll = true;
|
|
10354
|
-
}
|
|
10355
|
-
formatTime(date) {
|
|
10356
|
-
if (!date)
|
|
10357
|
-
return '';
|
|
10358
|
-
return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
|
|
10495
|
+
loadFromUrl(url) {
|
|
10496
|
+
this.httpSub?.unsubscribe();
|
|
10497
|
+
this.httpSub = this.http.get(url, { responseType: 'text' }).subscribe({
|
|
10498
|
+
next: (text) => this.resolvedMarkdown.set(text),
|
|
10499
|
+
error: () => this.resolvedMarkdown.set(`*Failed to load ${url}*`),
|
|
10500
|
+
});
|
|
10359
10501
|
}
|
|
10360
|
-
|
|
10361
|
-
|
|
10362
|
-
|
|
10363
|
-
|
|
10502
|
+
splitIntoParts(html, blocks) {
|
|
10503
|
+
const parts = [];
|
|
10504
|
+
// The placeholders survive HTML escaping as <!--CODE_BLOCK_N-->
|
|
10505
|
+
const regex = /<!--CODE_BLOCK_(\d+)-->/g;
|
|
10506
|
+
let lastIndex = 0;
|
|
10507
|
+
let partIndex = 0;
|
|
10508
|
+
let match;
|
|
10509
|
+
while ((match = regex.exec(html)) !== null) {
|
|
10510
|
+
const before = html.slice(lastIndex, match.index);
|
|
10511
|
+
if (before.trim()) {
|
|
10512
|
+
const sanitized = this.sanitize()
|
|
10513
|
+
? this.sanitizer.sanitize(SecurityContext.HTML, before) || ''
|
|
10514
|
+
: before;
|
|
10515
|
+
parts.push({
|
|
10516
|
+
type: 'html',
|
|
10517
|
+
index: partIndex++,
|
|
10518
|
+
safeHtml: this.sanitizer.bypassSecurityTrustHtml(sanitized),
|
|
10519
|
+
});
|
|
10520
|
+
}
|
|
10521
|
+
const blockIdx = parseInt(match[1], 10);
|
|
10522
|
+
parts.push({
|
|
10523
|
+
type: 'code',
|
|
10524
|
+
index: partIndex++,
|
|
10525
|
+
code: blocks[blockIdx].code,
|
|
10526
|
+
lang: blocks[blockIdx].lang,
|
|
10527
|
+
});
|
|
10528
|
+
lastIndex = match.index + match[0].length;
|
|
10364
10529
|
}
|
|
10365
|
-
|
|
10366
|
-
|
|
10367
|
-
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 } }, outputs: { messageSend: "messageSend" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], 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 {\n {{ msg.content }}\n }\n <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n </div>\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 <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() || 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", styles: [".lc-chat{display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-neutral-200);border-radius:.5rem;overflow:hidden;background:var(--color-neutral-0, #fff);font-family:var(--typography-font-family, sans-serif)}[data-theme=dark] .lc-chat,:root[data-theme=dark] .lc-chat{border-color:var(--color-neutral-700);background:var(--color-neutral-900)}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__header,:root[data-theme=dark] .lc-chat__header{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-chat__title,:root[data-theme=dark] .lc-chat__title{color:var(--color-neutral-100)}.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:.5rem;max-width:85%}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse}.lc-chat__message--agent{align-self:flex-start}.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-neutral-300);color:#fff;font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--color-primary-500)}.lc-chat__bubble{padding:.5rem .75rem;border-radius:1rem;font-size:.875rem;line-height:1.5;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{background:var(--color-primary-500);color:#fff;border-bottom-right-radius:.25rem}.lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-100);color:var(--color-neutral-900);border-bottom-left-radius:.25rem}[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble,:root[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-800);color:var(--color-neutral-100)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-neutral-500);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:1px solid color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.lc-chat__name{font-size:.6875rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.125rem}.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-neutral-400);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-neutral-400);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;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__input-area,:root[data-theme=dark] .lc-chat__input-area{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-neutral-300);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-neutral-0, #fff);color:var(--color-neutral-900);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-neutral-400)}[data-theme=dark] .lc-chat__input,:root[data-theme=dark] .lc-chat__input{border-color:var(--color-neutral-600);background:var(--color-neutral-700);color:var(--color-neutral-100)}[data-theme=dark] .lc-chat__input::placeholder,:root[data-theme=dark] .lc-chat__input::placeholder{color:var(--color-neutral-500)}[data-theme=dark] .lc-chat__input:focus,:root[data-theme=dark] .lc-chat__input:focus{border-color:var(--color-primary-500)}.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-500);color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-700)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10368
|
-
|
|
10369
|
-
|
|
10530
|
+
const remaining = html.slice(lastIndex);
|
|
10531
|
+
if (remaining.trim()) {
|
|
10532
|
+
const sanitized = this.sanitize()
|
|
10533
|
+
? this.sanitizer.sanitize(SecurityContext.HTML, remaining) || ''
|
|
10534
|
+
: remaining;
|
|
10535
|
+
parts.push({
|
|
10536
|
+
type: 'html',
|
|
10537
|
+
index: partIndex++,
|
|
10538
|
+
safeHtml: this.sanitizer.bypassSecurityTrustHtml(sanitized),
|
|
10539
|
+
});
|
|
10540
|
+
}
|
|
10541
|
+
return parts;
|
|
10542
|
+
}
|
|
10543
|
+
parseMarkdown(md) {
|
|
10544
|
+
const blocks = [];
|
|
10545
|
+
const headings = [];
|
|
10546
|
+
const baseUrl = this.baseUrl();
|
|
10547
|
+
const linkTarget = this.linkTarget();
|
|
10548
|
+
const showAnchors = this.showHeadingAnchors();
|
|
10549
|
+
// 1. Extract fenced code blocks → placeholders
|
|
10550
|
+
let processed = md.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
|
|
10551
|
+
const idx = blocks.length;
|
|
10552
|
+
blocks.push({ lang: (lang || 'text'), code: code.trimEnd() });
|
|
10553
|
+
return `<!--CODE_BLOCK_${idx}-->`;
|
|
10554
|
+
});
|
|
10555
|
+
// 2. Escape HTML entities
|
|
10556
|
+
processed = processed
|
|
10557
|
+
.replace(/&/g, '&')
|
|
10558
|
+
.replace(/</g, '<')
|
|
10559
|
+
.replace(/>/g, '>');
|
|
10560
|
+
// 3. Headings (# to ######)
|
|
10561
|
+
processed = processed.replace(/^(#{1,6})\s+(.+)$/gm, (_match, hashes, text) => {
|
|
10562
|
+
const level = hashes.length;
|
|
10563
|
+
const id = text
|
|
10564
|
+
.toLowerCase()
|
|
10565
|
+
.replace(/[^\w\s-]/g, '')
|
|
10566
|
+
.replace(/\s+/g, '-');
|
|
10567
|
+
headings.push({ level, text, id });
|
|
10568
|
+
const anchor = showAnchors
|
|
10569
|
+
? `<a href="#${id}" class="lc-markdown__anchor" aria-hidden="true">#</a>`
|
|
10570
|
+
: '';
|
|
10571
|
+
return `<h${level} id="${id}">${anchor}${text}</h${level}>`;
|
|
10572
|
+
});
|
|
10573
|
+
// 4. Horizontal rules
|
|
10574
|
+
processed = processed.replace(/^---+$/gm, '<hr>');
|
|
10575
|
+
// 5. Blockquotes
|
|
10576
|
+
processed = processed.replace(/^(?:>)\s?(.*)$/gm, '<blockquote>$1</blockquote>');
|
|
10577
|
+
// Merge consecutive blockquotes
|
|
10578
|
+
processed = processed.replace(/<\/blockquote>\n<blockquote>/g, '\n');
|
|
10579
|
+
// 6. Tables (GFM)
|
|
10580
|
+
processed = this.parseTables(processed);
|
|
10581
|
+
// 7. Task lists
|
|
10582
|
+
processed = processed.replace(/^[-*]\s+\[x\]\s+(.*)$/gm, '<li class="lc-markdown__task"><input type="checkbox" checked disabled> $1</li>');
|
|
10583
|
+
processed = processed.replace(/^[-*]\s+\[ \]\s+(.*)$/gm, '<li class="lc-markdown__task"><input type="checkbox" disabled> $1</li>');
|
|
10584
|
+
// 8. Unordered lists
|
|
10585
|
+
processed = processed.replace(/^[-*]\s+(.*)$/gm, '<li>$1</li>');
|
|
10586
|
+
processed = processed.replace(/(<li>[\s\S]*?<\/li>)/g, (match) => {
|
|
10587
|
+
if (!match.includes('lc-markdown__task')) {
|
|
10588
|
+
return match;
|
|
10589
|
+
}
|
|
10590
|
+
return match;
|
|
10591
|
+
});
|
|
10592
|
+
// Wrap consecutive <li> in <ul>
|
|
10593
|
+
processed = processed.replace(/((?:<li[^>]*>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
|
|
10594
|
+
// 9. Ordered lists
|
|
10595
|
+
processed = processed.replace(/^\d+\.\s+(.*)$/gm, '<li>$1</li>');
|
|
10596
|
+
// 10. Inline code
|
|
10597
|
+
processed = processed.replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
10598
|
+
// 11. Bold + italic combos
|
|
10599
|
+
processed = processed.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
|
|
10600
|
+
processed = processed.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
|
10601
|
+
processed = processed.replace(/\*(.+?)\*/g, '<em>$1</em>');
|
|
10602
|
+
// 12. Strikethrough (GFM)
|
|
10603
|
+
processed = processed.replace(/~~(.+?)~~/g, '<del>$1</del>');
|
|
10604
|
+
// 13. Images
|
|
10605
|
+
processed = processed.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, src) => {
|
|
10606
|
+
const resolvedSrc = baseUrl && !src.startsWith('http') ? `${baseUrl}/${src}` : src;
|
|
10607
|
+
return `<img src="${resolvedSrc}" alt="${alt}" class="lc-markdown__img">`;
|
|
10608
|
+
});
|
|
10609
|
+
// 14. Links
|
|
10610
|
+
processed = processed.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, href) => {
|
|
10611
|
+
const resolvedHref = baseUrl && !href.startsWith('http') && !href.startsWith('#')
|
|
10612
|
+
? `${baseUrl}/${href}`
|
|
10613
|
+
: href;
|
|
10614
|
+
return `<a href="${resolvedHref}" target="${linkTarget}" rel="noopener">${text}</a>`;
|
|
10615
|
+
});
|
|
10616
|
+
// 15. Paragraphs — wrap standalone lines
|
|
10617
|
+
processed = processed
|
|
10618
|
+
.split('\n\n')
|
|
10619
|
+
.map((block) => {
|
|
10620
|
+
const trimmed = block.trim();
|
|
10621
|
+
if (!trimmed)
|
|
10622
|
+
return '';
|
|
10623
|
+
if (trimmed.startsWith('<h') ||
|
|
10624
|
+
trimmed.startsWith('<ul') ||
|
|
10625
|
+
trimmed.startsWith('<ol') ||
|
|
10626
|
+
trimmed.startsWith('<blockquote') ||
|
|
10627
|
+
trimmed.startsWith('<hr') ||
|
|
10628
|
+
trimmed.startsWith('<table') ||
|
|
10629
|
+
trimmed.startsWith('<!--CODE_BLOCK')) {
|
|
10630
|
+
return trimmed;
|
|
10631
|
+
}
|
|
10632
|
+
return `<p>${trimmed.replace(/\n/g, '<br>')}</p>`;
|
|
10633
|
+
})
|
|
10634
|
+
.join('\n');
|
|
10635
|
+
// 16. Restore code block placeholders
|
|
10636
|
+
if (this.syntaxHighlight()) {
|
|
10637
|
+
// Leave placeholders — the template will render <lc-code-block> for each
|
|
10638
|
+
// No replacement needed here
|
|
10639
|
+
}
|
|
10640
|
+
else {
|
|
10641
|
+
processed = processed.replace(/<!--CODE_BLOCK_(\d+)-->/g, (_match, idx) => {
|
|
10642
|
+
const block = blocks[parseInt(idx, 10)];
|
|
10643
|
+
return `<pre><code class="language-${block.lang}">${this.escapeHtml(block.code)}</code></pre>`;
|
|
10644
|
+
});
|
|
10645
|
+
}
|
|
10646
|
+
return { html: processed, blocks, headings };
|
|
10647
|
+
}
|
|
10648
|
+
parseTables(text) {
|
|
10649
|
+
return text.replace(/^(\|.+\|)\n(\|[-| :]+\|)\n((?:\|.+\|\n?)*)/gm, (_match, header, _separator, body) => {
|
|
10650
|
+
const headers = header
|
|
10651
|
+
.split('|')
|
|
10652
|
+
.filter((c) => c.trim())
|
|
10653
|
+
.map((c) => `<th>${c.trim()}</th>`)
|
|
10654
|
+
.join('');
|
|
10655
|
+
const rows = body
|
|
10656
|
+
.trim()
|
|
10657
|
+
.split('\n')
|
|
10658
|
+
.map((row) => {
|
|
10659
|
+
const cells = row
|
|
10660
|
+
.split('|')
|
|
10661
|
+
.filter((c) => c.trim())
|
|
10662
|
+
.map((c) => `<td>${c.trim()}</td>`)
|
|
10663
|
+
.join('');
|
|
10664
|
+
return `<tr>${cells}</tr>`;
|
|
10665
|
+
})
|
|
10666
|
+
.join('');
|
|
10667
|
+
return `<table class="lc-markdown__table"><thead><tr>${headers}</tr></thead><tbody>${rows}</tbody></table>`;
|
|
10668
|
+
});
|
|
10669
|
+
}
|
|
10670
|
+
escapeHtml(text) {
|
|
10671
|
+
return text
|
|
10672
|
+
.replace(/&/g, '&')
|
|
10673
|
+
.replace(/</g, '<')
|
|
10674
|
+
.replace(/>/g, '>');
|
|
10675
|
+
}
|
|
10676
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MarkdownComponent, isStandalone: true, selector: "lc-markdown", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: true, isRequired: false, transformFunction: null }, syntaxHighlight: { classPropertyName: "syntaxHighlight", publicName: "syntaxHighlight", isSignal: true, isRequired: false, transformFunction: null }, showHeadingAnchors: { classPropertyName: "showHeadingAnchors", publicName: "showHeadingAnchors", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick", rendered: "rendered" }, ngImport: i0, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n @for (part of renderParts(); track part.index) {\n @if (part.type === 'html') {\n <div [innerHTML]=\"part.safeHtml\"></div>\n } @else {\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"part.lang ?? 'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n }\n }\n</div>\n", styles: [".lc-markdown{color:var(--color-text, #111827);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text, #111827);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-800, #1f2937);padding:.125em .375em;border-radius:var(--radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-neutral-50, #f9fafb);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown__table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-neutral-50, #f9fafb);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-neutral-50, #f9fafb)}.lc-markdown__task{list-style:none;margin-left:-1.5em}.lc-markdown__task input[type=checkbox]{margin-right:.5em;vertical-align:middle}.lc-markdown__anchor{color:var(--color-neutral-400, #9ca3af);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}.lc-markdown--chat{font-size:inherit;line-height:1.4}.lc-markdown--chat p,.lc-markdown--chat ul,.lc-markdown--chat ol,.lc-markdown--chat pre,.lc-markdown--chat blockquote,.lc-markdown--chat table{margin:0 0 6px}.lc-markdown--chat h1,.lc-markdown--chat h2,.lc-markdown--chat h3,.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{margin:8px 0 4px;line-height:1.25}.lc-markdown--chat h1{font-size:1.25rem}.lc-markdown--chat h2{font-size:1.125rem}.lc-markdown--chat h3{font-size:1rem}.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{font-size:.9375rem}.lc-markdown--chat li{margin:0;line-height:1.4}.lc-markdown--chat ul,.lc-markdown--chat ol{padding-left:1.25em}.lc-markdown--chat blockquote{padding:.25em .75em}.lc-markdown--chat lc-code-block{margin:6px 0}.lc-markdown--chat>*:first-child{margin-top:0}.lc-markdown--chat>*:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: CodeBlockComponent, selector: "lc-code-block", inputs: ["code", "language", "filename", "showLineNumbers", "showCopy", "showHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10678
|
+
}
|
|
10679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, decorators: [{
|
|
10680
|
+
type: Component,
|
|
10681
|
+
args: [{ selector: 'lc-markdown', standalone: true, imports: [CodeBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n @for (part of renderParts(); track part.index) {\n @if (part.type === 'html') {\n <div [innerHTML]=\"part.safeHtml\"></div>\n } @else {\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"part.lang ?? 'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n }\n }\n</div>\n", styles: [".lc-markdown{color:var(--color-text, #111827);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text, #111827);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-800, #1f2937);padding:.125em .375em;border-radius:var(--radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-neutral-50, #f9fafb);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown__table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-neutral-50, #f9fafb);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-neutral-50, #f9fafb)}.lc-markdown__task{list-style:none;margin-left:-1.5em}.lc-markdown__task input[type=checkbox]{margin-right:.5em;vertical-align:middle}.lc-markdown__anchor{color:var(--color-neutral-400, #9ca3af);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}.lc-markdown--chat{font-size:inherit;line-height:1.4}.lc-markdown--chat p,.lc-markdown--chat ul,.lc-markdown--chat ol,.lc-markdown--chat pre,.lc-markdown--chat blockquote,.lc-markdown--chat table{margin:0 0 6px}.lc-markdown--chat h1,.lc-markdown--chat h2,.lc-markdown--chat h3,.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{margin:8px 0 4px;line-height:1.25}.lc-markdown--chat h1{font-size:1.25rem}.lc-markdown--chat h2{font-size:1.125rem}.lc-markdown--chat h3{font-size:1rem}.lc-markdown--chat h4,.lc-markdown--chat h5,.lc-markdown--chat h6{font-size:.9375rem}.lc-markdown--chat li{margin:0;line-height:1.4}.lc-markdown--chat ul,.lc-markdown--chat ol{padding-left:1.25em}.lc-markdown--chat blockquote{padding:.25em .75em}.lc-markdown--chat lc-code-block{margin:6px 0}.lc-markdown--chat>*:first-child{margin-top:0}.lc-markdown--chat>*:last-child{margin-bottom:0}\n"] }]
|
|
10682
|
+
}], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], linkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTarget", required: false }] }], sanitize: [{ type: i0.Input, args: [{ isSignal: true, alias: "sanitize", required: false }] }], syntaxHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "syntaxHighlight", required: false }] }], showHeadingAnchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadingAnchors", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }], rendered: [{ type: i0.Output, args: ["rendered"] }] } });
|
|
10683
|
+
|
|
10684
|
+
/**
|
|
10685
|
+
* Chat component for conversational user interfaces.
|
|
10686
|
+
*
|
|
10687
|
+
* Features:
|
|
10688
|
+
* - User, agent, and system message roles
|
|
10689
|
+
* - Streaming cursor indicator for AI responses
|
|
10690
|
+
* - Typing indicator with animated dots
|
|
10691
|
+
* - Auto-scroll to latest message
|
|
10692
|
+
* - Optional avatars and timestamps
|
|
10693
|
+
* - Configurable header with title
|
|
10694
|
+
* - Send on Enter with Shift+Enter for newline
|
|
10695
|
+
*
|
|
10696
|
+
* @example
|
|
10697
|
+
* ```html
|
|
10698
|
+
* <lc-chat [messages]="messages" title="Support" (messageSend)="onSend($event)" />
|
|
10699
|
+
* ```
|
|
10700
|
+
*/
|
|
10701
|
+
class ChatComponent {
|
|
10702
|
+
/** Messages to display. */
|
|
10703
|
+
messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
|
|
10704
|
+
/** Placeholder text for the input. */
|
|
10705
|
+
placeholder = input('Nachricht eingeben…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
10706
|
+
/** Title displayed in the header. */
|
|
10707
|
+
title = input('Chat', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
10708
|
+
/** Whether the agent is currently streaming / typing. */
|
|
10709
|
+
isStreaming = input(false, ...(ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []));
|
|
10710
|
+
/** Show the header bar. */
|
|
10711
|
+
showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
|
|
10712
|
+
/** Disable the input. */
|
|
10713
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
10714
|
+
/** Show avatars next to messages. */
|
|
10715
|
+
showAvatars = input(true, ...(ngDevMode ? [{ debugName: "showAvatars" }] : /* istanbul ignore next */ []));
|
|
10716
|
+
/** Show timestamps. */
|
|
10717
|
+
showTimestamps = input(true, ...(ngDevMode ? [{ debugName: "showTimestamps" }] : /* istanbul ignore next */ []));
|
|
10718
|
+
/**
|
|
10719
|
+
* Render message content as Markdown using `<lc-markdown variant="chat">`.
|
|
10720
|
+
* Defaults to `'agent'` so agent replies get rich formatting while user
|
|
10721
|
+
* input stays as plain text. Pass `false` to opt out, or `true`/`'all'`
|
|
10722
|
+
* to render every role as Markdown.
|
|
10723
|
+
*/
|
|
10724
|
+
renderMarkdown = input('agent', ...(ngDevMode ? [{ debugName: "renderMarkdown" }] : /* istanbul ignore next */ []));
|
|
10725
|
+
/** Emits when user sends a message. */
|
|
10726
|
+
messageSend = output();
|
|
10727
|
+
/** Custom template for rendering message content. Context: { $implicit: ChatMessage } */
|
|
10728
|
+
messageTemplate;
|
|
10729
|
+
inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
|
|
10730
|
+
shouldScroll = false;
|
|
10731
|
+
scrollContainer;
|
|
10732
|
+
formattedMessages = computed(() => this.messages().map(m => ({
|
|
10733
|
+
...m,
|
|
10734
|
+
timestamp: m.timestamp instanceof Date ? m.timestamp : m.timestamp ? new Date(m.timestamp) : undefined,
|
|
10735
|
+
})), ...(ngDevMode ? [{ debugName: "formattedMessages" }] : /* istanbul ignore next */ []));
|
|
10736
|
+
ngAfterViewChecked() {
|
|
10737
|
+
if (this.shouldScroll) {
|
|
10738
|
+
this.scrollToBottom();
|
|
10739
|
+
this.shouldScroll = false;
|
|
10740
|
+
}
|
|
10741
|
+
}
|
|
10742
|
+
onInput(event) {
|
|
10743
|
+
this.inputValue.set(event.target.value);
|
|
10744
|
+
}
|
|
10745
|
+
onKeydown(event) {
|
|
10746
|
+
if (event.key === 'Enter' && !event.shiftKey) {
|
|
10747
|
+
event.preventDefault();
|
|
10748
|
+
this.send();
|
|
10749
|
+
}
|
|
10750
|
+
}
|
|
10751
|
+
send() {
|
|
10752
|
+
const content = this.inputValue().trim();
|
|
10753
|
+
if (!content || this.disabled())
|
|
10754
|
+
return;
|
|
10755
|
+
this.messageSend.emit({ content });
|
|
10756
|
+
this.inputValue.set('');
|
|
10757
|
+
this.shouldScroll = true;
|
|
10758
|
+
}
|
|
10759
|
+
formatTime(date) {
|
|
10760
|
+
if (!date)
|
|
10761
|
+
return '';
|
|
10762
|
+
return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
|
|
10763
|
+
}
|
|
10764
|
+
shouldRenderMarkdown(role) {
|
|
10765
|
+
const mode = this.renderMarkdown();
|
|
10766
|
+
if (mode === false)
|
|
10767
|
+
return false;
|
|
10768
|
+
if (mode === true || mode === 'all')
|
|
10769
|
+
return true;
|
|
10770
|
+
return role === mode;
|
|
10771
|
+
}
|
|
10772
|
+
scrollToBottom() {
|
|
10773
|
+
if (this.scrollContainer) {
|
|
10774
|
+
const el = this.scrollContainer.nativeElement;
|
|
10775
|
+
el.scrollTop = el.scrollHeight;
|
|
10776
|
+
}
|
|
10777
|
+
}
|
|
10778
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10779
|
+
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 } }, outputs: { messageSend: "messageSend" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], 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 (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 <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() || 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", styles: [".lc-chat{display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-neutral-200);border-radius:.5rem;overflow:hidden;background:var(--color-neutral-0, #fff);font-family:var(--typography-font-family, sans-serif)}[data-theme=dark] .lc-chat,:root[data-theme=dark] .lc-chat{border-color:var(--color-neutral-700);background:var(--color-neutral-900)}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__header,:root[data-theme=dark] .lc-chat__header{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-chat__title,:root[data-theme=dark] .lc-chat__title{color:var(--color-neutral-100)}.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:.5rem;max-width:85%}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse}.lc-chat__message--agent{align-self:flex-start}.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-neutral-300);color:#fff;font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--color-primary-500)}.lc-chat__bubble{padding:.5rem .75rem;border-radius:1rem;font-size:.875rem;line-height:1.5;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{background:var(--color-primary-500);color:#fff;border-bottom-right-radius:.25rem}.lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-100);color:var(--color-neutral-900);border-bottom-left-radius:.25rem}[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble,:root[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-800);color:var(--color-neutral-100)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-neutral-500);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:1px solid color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.lc-chat__name{font-size:.6875rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.125rem}.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-neutral-400);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-neutral-400);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;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__input-area,:root[data-theme=dark] .lc-chat__input-area{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-neutral-300);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-neutral-0, #fff);color:var(--color-neutral-900);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-neutral-400)}[data-theme=dark] .lc-chat__input,:root[data-theme=dark] .lc-chat__input{border-color:var(--color-neutral-600);background:var(--color-neutral-700);color:var(--color-neutral-100)}[data-theme=dark] .lc-chat__input::placeholder,:root[data-theme=dark] .lc-chat__input::placeholder{color:var(--color-neutral-500)}[data-theme=dark] .lc-chat__input:focus,:root[data-theme=dark] .lc-chat__input:focus{border-color:var(--color-primary-500)}.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-500);color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-700)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}\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 });
|
|
10780
|
+
}
|
|
10781
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, decorators: [{
|
|
10370
10782
|
type: Component,
|
|
10371
|
-
args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet], 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 {\n {{ msg.content }}\n }\n <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n </div>\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 <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() || 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", styles: [".lc-chat{display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-neutral-200);border-radius:.5rem;overflow:hidden;background:var(--color-neutral-0, #fff);font-family:var(--typography-font-family, sans-serif)}[data-theme=dark] .lc-chat,:root[data-theme=dark] .lc-chat{border-color:var(--color-neutral-700);background:var(--color-neutral-900)}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__header,:root[data-theme=dark] .lc-chat__header{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-chat__title,:root[data-theme=dark] .lc-chat__title{color:var(--color-neutral-100)}.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:.5rem;max-width:85%}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse}.lc-chat__message--agent{align-self:flex-start}.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-neutral-300);color:#fff;font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--color-primary-500)}.lc-chat__bubble{padding:.5rem .75rem;border-radius:1rem;font-size:.875rem;line-height:1.5;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{background:var(--color-primary-500);color:#fff;border-bottom-right-radius:.25rem}.lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-100);color:var(--color-neutral-900);border-bottom-left-radius:.25rem}[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble,:root[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-800);color:var(--color-neutral-100)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-neutral-500);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:1px solid color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.lc-chat__name{font-size:.6875rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.125rem}.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-neutral-400);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-neutral-400);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;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__input-area,:root[data-theme=dark] .lc-chat__input-area{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-neutral-300);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-neutral-0, #fff);color:var(--color-neutral-900);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-neutral-400)}[data-theme=dark] .lc-chat__input,:root[data-theme=dark] .lc-chat__input{border-color:var(--color-neutral-600);background:var(--color-neutral-700);color:var(--color-neutral-100)}[data-theme=dark] .lc-chat__input::placeholder,:root[data-theme=dark] .lc-chat__input::placeholder{color:var(--color-neutral-500)}[data-theme=dark] .lc-chat__input:focus,:root[data-theme=dark] .lc-chat__input:focus{border-color:var(--color-primary-500)}.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-500);color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-700)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}\n"] }]
|
|
10372
|
-
}], 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 }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], messageTemplate: [{
|
|
10783
|
+
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 (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 <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() || 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", styles: [".lc-chat{display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-neutral-200);border-radius:.5rem;overflow:hidden;background:var(--color-neutral-0, #fff);font-family:var(--typography-font-family, sans-serif)}[data-theme=dark] .lc-chat,:root[data-theme=dark] .lc-chat{border-color:var(--color-neutral-700);background:var(--color-neutral-900)}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__header,:root[data-theme=dark] .lc-chat__header{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__title{font-size:.875rem;font-weight:600;color:var(--color-neutral-900)}[data-theme=dark] .lc-chat__title,:root[data-theme=dark] .lc-chat__title{color:var(--color-neutral-100)}.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:.5rem;max-width:85%}.lc-chat__message--user{align-self:flex-end;flex-direction:row-reverse}.lc-chat__message--agent{align-self:flex-start}.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-neutral-300);color:#fff;font-size:.75rem;font-weight:700}.lc-chat__avatar-fallback--agent{background:var(--color-primary-500)}.lc-chat__bubble{padding:.5rem .75rem;border-radius:1rem;font-size:.875rem;line-height:1.5;word-break:break-word}.lc-chat__message--user .lc-chat__bubble{background:var(--color-primary-500);color:#fff;border-bottom-right-radius:.25rem}.lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-100);color:var(--color-neutral-900);border-bottom-left-radius:.25rem}[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble,:root[data-theme=dark] .lc-chat__message--agent .lc-chat__bubble{background:var(--color-neutral-800);color:var(--color-neutral-100)}.lc-chat__message--system .lc-chat__bubble{background:transparent;color:var(--color-neutral-500);font-size:.75rem;text-align:center;padding:.25rem .5rem}.lc-chat__message--agent .lc-chat__bubble--streaming{border:1px solid color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.lc-chat__name{font-size:.6875rem;font-weight:600;color:var(--color-primary-500);margin-bottom:.125rem}.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-neutral-400);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-neutral-400);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;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}[data-theme=dark] .lc-chat__input-area,:root[data-theme=dark] .lc-chat__input-area{border-color:var(--color-neutral-700);background:var(--color-neutral-800)}.lc-chat__input{flex:1;resize:none;border:1px solid var(--color-neutral-300);border-radius:1.25rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;line-height:1.4;outline:none;background:var(--color-neutral-0, #fff);color:var(--color-neutral-900);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-neutral-400)}[data-theme=dark] .lc-chat__input,:root[data-theme=dark] .lc-chat__input{border-color:var(--color-neutral-600);background:var(--color-neutral-700);color:var(--color-neutral-100)}[data-theme=dark] .lc-chat__input::placeholder,:root[data-theme=dark] .lc-chat__input::placeholder{color:var(--color-neutral-500)}[data-theme=dark] .lc-chat__input:focus,:root[data-theme=dark] .lc-chat__input:focus{border-color:var(--color-primary-500)}.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-500);color:#fff;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-700)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}\n"] }]
|
|
10784
|
+
}], 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 }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], messageTemplate: [{
|
|
10373
10785
|
type: ContentChild,
|
|
10374
10786
|
args: ['messageTemplate']
|
|
10375
10787
|
}], scrollContainer: [{
|
|
@@ -12642,7 +13054,7 @@ class RichTextEditorComponent {
|
|
|
12642
13054
|
useExisting: forwardRef(() => RichTextEditorComponent),
|
|
12643
13055
|
multi: true,
|
|
12644
13056
|
},
|
|
12645
|
-
], viewQueries: [{ propertyName: "editorArea", first: true, predicate: ["editorArea"], descendants: true }, { propertyName: "richArea", first: true, predicate: ["richArea"], descendants: true }], ngImport: i0, template: "<div class=\"lc-rich-text-editor\" [class.lc-rich-text-editor--disabled]=\"disabled()\">\n <!-- Toolbar -->\n <div class=\"lc-rich-text-editor__toolbar\">\n <div class=\"lc-rich-text-editor__toolbar-actions\">\n @for (action of toolbar().actions; track action) {\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__toolbar-btn\"\n [title]=\"getActionTitle(action)\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"onToolbarAction(action)\"\n >\n {{ getActionLabel(action) }}\n </button>\n }\n </div>\n <div class=\"lc-rich-text-editor__toolbar-modes\">\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'rich'\"\n (click)=\"switchMode('rich')\"\n title=\"Rich Text\"\n >Rich</button>\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'markdown'\"\n (click)=\"switchMode('markdown')\"\n title=\"Markdown\"\n >MD</button>\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'split'\"\n (click)=\"switchMode('split')\"\n title=\"Split View\"\n >Split</button>\n </div>\n </div>\n\n <!-- Editor area -->\n <div\n class=\"lc-rich-text-editor__content\"\n [style.min-height.px]=\"minHeight()\"\n [style.max-height.px]=\"maxHeight() || null\"\n >\n @switch (activeMode()) {\n @case ('rich') {\n <div\n #richArea\n class=\"lc-rich-text-editor__rich\"\n contenteditable=\"true\"\n [attr.data-placeholder]=\"placeholder()\"\n [class.lc-rich-text-editor__rich--empty]=\"!markdown()\"\n (input)=\"onRichInput()\"\n (blur)=\"onBlur()\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n ></div>\n }\n @case ('markdown') {\n <textarea\n #editorArea\n class=\"lc-rich-text-editor__textarea\"\n [placeholder]=\"placeholder()\"\n [value]=\"markdown()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"onMarkdownInput($event)\"\n (blur)=\"onBlur()\"\n spellcheck=\"false\"\n aria-label=\"Markdown editor\"\n ></textarea>\n }\n @case ('split') {\n <div class=\"lc-rich-text-editor__split\">\n <textarea\n #editorArea\n class=\"lc-rich-text-editor__textarea lc-rich-text-editor__split-editor\"\n [placeholder]=\"placeholder()\"\n [value]=\"markdown()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"onMarkdownInput($event)\"\n (blur)=\"onBlur()\"\n spellcheck=\"false\"\n aria-label=\"Markdown editor\"\n ></textarea>\n <div\n class=\"lc-rich-text-editor__split-preview\"\n [innerHTML]=\"renderedHtml()\"\n ></div>\n </div>\n }\n }\n </div>\n\n <!-- Footer -->\n @if (showWordCount()) {\n <div class=\"lc-rich-text-editor__footer\">\n <span>{{ wordCount() }} words</span>\n <span>{{ charCount() }} characters</span>\n </div>\n }\n</div>\n", styles: [".lc-rich-text-editor{border:1px solid var(--color-border);border-radius:var(--border-radius-md);background-color:var(--color-background);overflow:hidden;font-family:var(--typography-font-family)}.lc-rich-text-editor--disabled{opacity:.6;pointer-events:none}.lc-rich-text-editor__toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-surface);border-bottom:1px solid var(--color-divider);flex-wrap:wrap;gap:var(--spacing-1)}.lc-rich-text-editor__toolbar-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap}.lc-rich-text-editor__toolbar-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-sm);font-weight:var(--typography-font-weight-semibold);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__toolbar-btn:hover:not(:disabled){background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-rich-text-editor__toolbar-btn:disabled{cursor:not-allowed;opacity:.4}.lc-rich-text-editor__toolbar-modes{display:flex;align-items:center;gap:2px;border-left:1px solid var(--color-divider);padding-left:var(--spacing-2);margin-left:var(--spacing-2)}.lc-rich-text-editor__mode-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-medium);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__mode-btn:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-rich-text-editor__mode-btn.active{background-color:var(--color-primary);color:#fff}.lc-rich-text-editor__content{overflow-y:auto}.lc-rich-text-editor__rich{padding:var(--spacing-4);min-height:100%;outline:none;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__rich--empty:before{content:attr(data-placeholder);color:var(--color-text-secondary);opacity:.6;pointer-events:none}.lc-rich-text-editor__rich h1,.lc-rich-text-editor__rich h2,.lc-rich-text-editor__rich h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold);color:var(--color-text-primary)}.lc-rich-text-editor__rich h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__rich h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__rich h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__rich p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich ul,.lc-rich-text-editor__rich ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__rich code{background-color:var(--color-neutral-100);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__rich pre{background-color:var(--color-neutral-100);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto;margin:var(--spacing-3) 0}.lc-rich-text-editor__rich pre code{background:none;padding:0}.lc-rich-text-editor__rich a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__rich hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__rich img{max-width:100%;border-radius:var(--border-radius-md)}.lc-rich-text-editor__textarea{width:100%;height:100%;min-height:inherit;border:none;outline:none;resize:vertical;padding:var(--spacing-4);font-family:var(--typography-font-family-mono, monospace);font-size:var(--typography-font-size-sm);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary);background-color:var(--color-background);tab-size:2}.lc-rich-text-editor__split{display:grid;grid-template-columns:1fr 1fr;height:100%;min-height:inherit}.lc-rich-text-editor__split-editor{border-right:1px solid var(--color-divider);min-height:inherit;resize:none}.lc-rich-text-editor__split-preview{padding:var(--spacing-4);overflow-y:auto;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__split-preview h1,.lc-rich-text-editor__split-preview h2,.lc-rich-text-editor__split-preview h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold)}.lc-rich-text-editor__split-preview h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__split-preview h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__split-preview h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__split-preview p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview ul,.lc-rich-text-editor__split-preview ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__split-preview code{background-color:var(--color-neutral-100);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__split-preview pre{background-color:var(--color-neutral-100);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto}.lc-rich-text-editor__split-preview pre code{background:none;padding:0}.lc-rich-text-editor__split-preview a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__split-preview hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__footer{display:flex;justify-content:flex-end;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-3);border-top:1px solid var(--color-divider);font-size:var(--typography-font-size-xs);color:var(--color-text-secondary)}[data-theme=dark] .lc-rich-text-editor,:root[data-theme=dark] .lc-rich-text-editor{background-color:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar-btn:hover:not(:disabled),:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar-btn:hover:not(:disabled){background-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__textarea,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__textarea{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich code,[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview code,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich code,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview code{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich pre,[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview pre,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich pre,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview pre{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-editor,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-editor{border-right-color:var(--color-neutral-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13057
|
+
], viewQueries: [{ propertyName: "editorArea", first: true, predicate: ["editorArea"], descendants: true }, { propertyName: "richArea", first: true, predicate: ["richArea"], descendants: true }], ngImport: i0, template: "<div class=\"lc-rich-text-editor\" [class.lc-rich-text-editor--disabled]=\"disabled()\">\n <!-- Toolbar -->\n <div class=\"lc-rich-text-editor__toolbar\">\n <div class=\"lc-rich-text-editor__toolbar-actions\">\n @for (action of toolbar().actions; track action) {\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__toolbar-btn\"\n [title]=\"getActionTitle(action)\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"onToolbarAction(action)\"\n >\n {{ getActionLabel(action) }}\n </button>\n }\n </div>\n <div class=\"lc-rich-text-editor__toolbar-modes\">\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'rich'\"\n (click)=\"switchMode('rich')\"\n title=\"Rich Text\"\n >Rich</button>\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'markdown'\"\n (click)=\"switchMode('markdown')\"\n title=\"Markdown\"\n >MD</button>\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'split'\"\n (click)=\"switchMode('split')\"\n title=\"Split View\"\n >Split</button>\n </div>\n </div>\n\n <!-- Editor area -->\n <div\n class=\"lc-rich-text-editor__content\"\n [style.min-height.px]=\"minHeight()\"\n [style.max-height.px]=\"maxHeight() || null\"\n >\n @switch (activeMode()) {\n @case ('rich') {\n <div\n #richArea\n class=\"lc-rich-text-editor__rich\"\n contenteditable=\"true\"\n [attr.data-placeholder]=\"placeholder()\"\n [class.lc-rich-text-editor__rich--empty]=\"!markdown()\"\n (input)=\"onRichInput()\"\n (blur)=\"onBlur()\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n ></div>\n }\n @case ('markdown') {\n <textarea\n #editorArea\n class=\"lc-rich-text-editor__textarea\"\n [placeholder]=\"placeholder()\"\n [value]=\"markdown()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"onMarkdownInput($event)\"\n (blur)=\"onBlur()\"\n spellcheck=\"false\"\n aria-label=\"Markdown editor\"\n ></textarea>\n }\n @case ('split') {\n <div class=\"lc-rich-text-editor__split\">\n <textarea\n #editorArea\n class=\"lc-rich-text-editor__textarea lc-rich-text-editor__split-editor\"\n [placeholder]=\"placeholder()\"\n [value]=\"markdown()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"onMarkdownInput($event)\"\n (blur)=\"onBlur()\"\n spellcheck=\"false\"\n aria-label=\"Markdown editor\"\n ></textarea>\n <div\n class=\"lc-rich-text-editor__split-preview\"\n [innerHTML]=\"renderedHtml()\"\n ></div>\n </div>\n }\n }\n </div>\n\n <!-- Footer -->\n @if (showWordCount()) {\n <div class=\"lc-rich-text-editor__footer\">\n <span>{{ wordCount() }} words</span>\n <span>{{ charCount() }} characters</span>\n </div>\n }\n</div>\n", styles: [".lc-rich-text-editor{border:1px solid var(--color-border);border-radius:var(--border-radius-md);background-color:var(--color-background);overflow:hidden;font-family:var(--typography-font-family)}.lc-rich-text-editor--disabled{opacity:.6;pointer-events:none}.lc-rich-text-editor__toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));background-color:var(--color-surface);border-bottom:1px solid var(--color-divider);flex-wrap:wrap;gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-rich-text-editor__toolbar-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap}.lc-rich-text-editor__toolbar-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-sm);font-weight:var(--typography-font-weight-semibold);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__toolbar-btn:hover:not(:disabled){background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-rich-text-editor__toolbar-btn:disabled{cursor:not-allowed;opacity:.4}.lc-rich-text-editor__toolbar-modes{display:flex;align-items:center;gap:2px;border-left:1px solid var(--color-divider);padding-left:var(--spacing-2);margin-left:var(--spacing-2)}.lc-rich-text-editor__mode-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-medium);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__mode-btn:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-rich-text-editor__mode-btn.active{background-color:var(--color-primary);color:#fff}.lc-rich-text-editor__content{overflow-y:auto}.lc-rich-text-editor__rich{padding:var(--lc-density-padding-md, var(--spacing-4));min-height:100%;outline:none;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__rich--empty:before{content:attr(data-placeholder);color:var(--color-text-secondary);opacity:.6;pointer-events:none}.lc-rich-text-editor__rich h1,.lc-rich-text-editor__rich h2,.lc-rich-text-editor__rich h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold);color:var(--color-text-primary)}.lc-rich-text-editor__rich h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__rich h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__rich h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__rich p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich ul,.lc-rich-text-editor__rich ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__rich code{background-color:var(--color-neutral-100);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__rich pre{background-color:var(--color-neutral-100);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto;margin:var(--spacing-3) 0}.lc-rich-text-editor__rich pre code{background:none;padding:0}.lc-rich-text-editor__rich a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__rich hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__rich img{max-width:100%;border-radius:var(--border-radius-md)}.lc-rich-text-editor__textarea{width:100%;height:100%;min-height:inherit;border:none;outline:none;resize:vertical;padding:var(--lc-density-padding-md, var(--spacing-4));font-family:var(--typography-font-family-mono, monospace);font-size:var(--typography-font-size-sm);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary);background-color:var(--color-background);tab-size:2}.lc-rich-text-editor__split{display:grid;grid-template-columns:1fr 1fr;height:100%;min-height:inherit}.lc-rich-text-editor__split-editor{border-right:1px solid var(--color-divider);min-height:inherit;resize:none}.lc-rich-text-editor__split-preview{padding:var(--lc-density-padding-md, var(--spacing-4));overflow-y:auto;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__split-preview h1,.lc-rich-text-editor__split-preview h2,.lc-rich-text-editor__split-preview h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold)}.lc-rich-text-editor__split-preview h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__split-preview h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__split-preview h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__split-preview p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview ul,.lc-rich-text-editor__split-preview ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__split-preview code{background-color:var(--color-neutral-100);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__split-preview pre{background-color:var(--color-neutral-100);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto}.lc-rich-text-editor__split-preview pre code{background:none;padding:0}.lc-rich-text-editor__split-preview a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__split-preview hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__footer{display:flex;justify-content:flex-end;gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));border-top:1px solid var(--color-divider);font-size:var(--typography-font-size-xs);color:var(--color-text-secondary)}[data-theme=dark] .lc-rich-text-editor,:root[data-theme=dark] .lc-rich-text-editor{background-color:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar-btn:hover:not(:disabled),:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar-btn:hover:not(:disabled){background-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__textarea,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__textarea{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich code,[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview code,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich code,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview code{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich pre,[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview pre,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich pre,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview pre{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-editor,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-editor{border-right-color:var(--color-neutral-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12646
13058
|
}
|
|
12647
13059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RichTextEditorComponent, decorators: [{
|
|
12648
13060
|
type: Component,
|
|
@@ -12652,7 +13064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
12652
13064
|
useExisting: forwardRef(() => RichTextEditorComponent),
|
|
12653
13065
|
multi: true,
|
|
12654
13066
|
},
|
|
12655
|
-
], template: "<div class=\"lc-rich-text-editor\" [class.lc-rich-text-editor--disabled]=\"disabled()\">\n <!-- Toolbar -->\n <div class=\"lc-rich-text-editor__toolbar\">\n <div class=\"lc-rich-text-editor__toolbar-actions\">\n @for (action of toolbar().actions; track action) {\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__toolbar-btn\"\n [title]=\"getActionTitle(action)\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"onToolbarAction(action)\"\n >\n {{ getActionLabel(action) }}\n </button>\n }\n </div>\n <div class=\"lc-rich-text-editor__toolbar-modes\">\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'rich'\"\n (click)=\"switchMode('rich')\"\n title=\"Rich Text\"\n >Rich</button>\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'markdown'\"\n (click)=\"switchMode('markdown')\"\n title=\"Markdown\"\n >MD</button>\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'split'\"\n (click)=\"switchMode('split')\"\n title=\"Split View\"\n >Split</button>\n </div>\n </div>\n\n <!-- Editor area -->\n <div\n class=\"lc-rich-text-editor__content\"\n [style.min-height.px]=\"minHeight()\"\n [style.max-height.px]=\"maxHeight() || null\"\n >\n @switch (activeMode()) {\n @case ('rich') {\n <div\n #richArea\n class=\"lc-rich-text-editor__rich\"\n contenteditable=\"true\"\n [attr.data-placeholder]=\"placeholder()\"\n [class.lc-rich-text-editor__rich--empty]=\"!markdown()\"\n (input)=\"onRichInput()\"\n (blur)=\"onBlur()\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n ></div>\n }\n @case ('markdown') {\n <textarea\n #editorArea\n class=\"lc-rich-text-editor__textarea\"\n [placeholder]=\"placeholder()\"\n [value]=\"markdown()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"onMarkdownInput($event)\"\n (blur)=\"onBlur()\"\n spellcheck=\"false\"\n aria-label=\"Markdown editor\"\n ></textarea>\n }\n @case ('split') {\n <div class=\"lc-rich-text-editor__split\">\n <textarea\n #editorArea\n class=\"lc-rich-text-editor__textarea lc-rich-text-editor__split-editor\"\n [placeholder]=\"placeholder()\"\n [value]=\"markdown()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"onMarkdownInput($event)\"\n (blur)=\"onBlur()\"\n spellcheck=\"false\"\n aria-label=\"Markdown editor\"\n ></textarea>\n <div\n class=\"lc-rich-text-editor__split-preview\"\n [innerHTML]=\"renderedHtml()\"\n ></div>\n </div>\n }\n }\n </div>\n\n <!-- Footer -->\n @if (showWordCount()) {\n <div class=\"lc-rich-text-editor__footer\">\n <span>{{ wordCount() }} words</span>\n <span>{{ charCount() }} characters</span>\n </div>\n }\n</div>\n", styles: [".lc-rich-text-editor{border:1px solid var(--color-border);border-radius:var(--border-radius-md);background-color:var(--color-background);overflow:hidden;font-family:var(--typography-font-family)}.lc-rich-text-editor--disabled{opacity:.6;pointer-events:none}.lc-rich-text-editor__toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-surface);border-bottom:1px solid var(--color-divider);flex-wrap:wrap;gap:var(--spacing-1)}.lc-rich-text-editor__toolbar-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap}.lc-rich-text-editor__toolbar-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-sm);font-weight:var(--typography-font-weight-semibold);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__toolbar-btn:hover:not(:disabled){background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-rich-text-editor__toolbar-btn:disabled{cursor:not-allowed;opacity:.4}.lc-rich-text-editor__toolbar-modes{display:flex;align-items:center;gap:2px;border-left:1px solid var(--color-divider);padding-left:var(--spacing-2);margin-left:var(--spacing-2)}.lc-rich-text-editor__mode-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-medium);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__mode-btn:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-rich-text-editor__mode-btn.active{background-color:var(--color-primary);color:#fff}.lc-rich-text-editor__content{overflow-y:auto}.lc-rich-text-editor__rich{padding:var(--spacing-4);min-height:100%;outline:none;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__rich--empty:before{content:attr(data-placeholder);color:var(--color-text-secondary);opacity:.6;pointer-events:none}.lc-rich-text-editor__rich h1,.lc-rich-text-editor__rich h2,.lc-rich-text-editor__rich h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold);color:var(--color-text-primary)}.lc-rich-text-editor__rich h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__rich h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__rich h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__rich p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich ul,.lc-rich-text-editor__rich ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__rich code{background-color:var(--color-neutral-100);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__rich pre{background-color:var(--color-neutral-100);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto;margin:var(--spacing-3) 0}.lc-rich-text-editor__rich pre code{background:none;padding:0}.lc-rich-text-editor__rich a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__rich hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__rich img{max-width:100%;border-radius:var(--border-radius-md)}.lc-rich-text-editor__textarea{width:100%;height:100%;min-height:inherit;border:none;outline:none;resize:vertical;padding:var(--spacing-4);font-family:var(--typography-font-family-mono, monospace);font-size:var(--typography-font-size-sm);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary);background-color:var(--color-background);tab-size:2}.lc-rich-text-editor__split{display:grid;grid-template-columns:1fr 1fr;height:100%;min-height:inherit}.lc-rich-text-editor__split-editor{border-right:1px solid var(--color-divider);min-height:inherit;resize:none}.lc-rich-text-editor__split-preview{padding:var(--spacing-4);overflow-y:auto;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__split-preview h1,.lc-rich-text-editor__split-preview h2,.lc-rich-text-editor__split-preview h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold)}.lc-rich-text-editor__split-preview h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__split-preview h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__split-preview h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__split-preview p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview ul,.lc-rich-text-editor__split-preview ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__split-preview code{background-color:var(--color-neutral-100);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__split-preview pre{background-color:var(--color-neutral-100);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto}.lc-rich-text-editor__split-preview pre code{background:none;padding:0}.lc-rich-text-editor__split-preview a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__split-preview hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__footer{display:flex;justify-content:flex-end;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-3);border-top:1px solid var(--color-divider);font-size:var(--typography-font-size-xs);color:var(--color-text-secondary)}[data-theme=dark] .lc-rich-text-editor,:root[data-theme=dark] .lc-rich-text-editor{background-color:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar-btn:hover:not(:disabled),:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar-btn:hover:not(:disabled){background-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__textarea,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__textarea{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich code,[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview code,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich code,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview code{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich pre,[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview pre,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich pre,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview pre{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-editor,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-editor{border-right-color:var(--color-neutral-700)}\n"] }]
|
|
13067
|
+
], template: "<div class=\"lc-rich-text-editor\" [class.lc-rich-text-editor--disabled]=\"disabled()\">\n <!-- Toolbar -->\n <div class=\"lc-rich-text-editor__toolbar\">\n <div class=\"lc-rich-text-editor__toolbar-actions\">\n @for (action of toolbar().actions; track action) {\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__toolbar-btn\"\n [title]=\"getActionTitle(action)\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"onToolbarAction(action)\"\n >\n {{ getActionLabel(action) }}\n </button>\n }\n </div>\n <div class=\"lc-rich-text-editor__toolbar-modes\">\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'rich'\"\n (click)=\"switchMode('rich')\"\n title=\"Rich Text\"\n >Rich</button>\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'markdown'\"\n (click)=\"switchMode('markdown')\"\n title=\"Markdown\"\n >MD</button>\n <button\n type=\"button\"\n class=\"lc-rich-text-editor__mode-btn\"\n [class.active]=\"activeMode() === 'split'\"\n (click)=\"switchMode('split')\"\n title=\"Split View\"\n >Split</button>\n </div>\n </div>\n\n <!-- Editor area -->\n <div\n class=\"lc-rich-text-editor__content\"\n [style.min-height.px]=\"minHeight()\"\n [style.max-height.px]=\"maxHeight() || null\"\n >\n @switch (activeMode()) {\n @case ('rich') {\n <div\n #richArea\n class=\"lc-rich-text-editor__rich\"\n contenteditable=\"true\"\n [attr.data-placeholder]=\"placeholder()\"\n [class.lc-rich-text-editor__rich--empty]=\"!markdown()\"\n (input)=\"onRichInput()\"\n (blur)=\"onBlur()\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n ></div>\n }\n @case ('markdown') {\n <textarea\n #editorArea\n class=\"lc-rich-text-editor__textarea\"\n [placeholder]=\"placeholder()\"\n [value]=\"markdown()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"onMarkdownInput($event)\"\n (blur)=\"onBlur()\"\n spellcheck=\"false\"\n aria-label=\"Markdown editor\"\n ></textarea>\n }\n @case ('split') {\n <div class=\"lc-rich-text-editor__split\">\n <textarea\n #editorArea\n class=\"lc-rich-text-editor__textarea lc-rich-text-editor__split-editor\"\n [placeholder]=\"placeholder()\"\n [value]=\"markdown()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"onMarkdownInput($event)\"\n (blur)=\"onBlur()\"\n spellcheck=\"false\"\n aria-label=\"Markdown editor\"\n ></textarea>\n <div\n class=\"lc-rich-text-editor__split-preview\"\n [innerHTML]=\"renderedHtml()\"\n ></div>\n </div>\n }\n }\n </div>\n\n <!-- Footer -->\n @if (showWordCount()) {\n <div class=\"lc-rich-text-editor__footer\">\n <span>{{ wordCount() }} words</span>\n <span>{{ charCount() }} characters</span>\n </div>\n }\n</div>\n", styles: [".lc-rich-text-editor{border:1px solid var(--color-border);border-radius:var(--border-radius-md);background-color:var(--color-background);overflow:hidden;font-family:var(--typography-font-family)}.lc-rich-text-editor--disabled{opacity:.6;pointer-events:none}.lc-rich-text-editor__toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));background-color:var(--color-surface);border-bottom:1px solid var(--color-divider);flex-wrap:wrap;gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-rich-text-editor__toolbar-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap}.lc-rich-text-editor__toolbar-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-sm);font-weight:var(--typography-font-weight-semibold);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__toolbar-btn:hover:not(:disabled){background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-rich-text-editor__toolbar-btn:disabled{cursor:not-allowed;opacity:.4}.lc-rich-text-editor__toolbar-modes{display:flex;align-items:center;gap:2px;border-left:1px solid var(--color-divider);padding-left:var(--spacing-2);margin-left:var(--spacing-2)}.lc-rich-text-editor__mode-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-medium);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__mode-btn:hover{background-color:var(--color-neutral-100);color:var(--color-text-primary)}.lc-rich-text-editor__mode-btn.active{background-color:var(--color-primary);color:#fff}.lc-rich-text-editor__content{overflow-y:auto}.lc-rich-text-editor__rich{padding:var(--lc-density-padding-md, var(--spacing-4));min-height:100%;outline:none;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__rich--empty:before{content:attr(data-placeholder);color:var(--color-text-secondary);opacity:.6;pointer-events:none}.lc-rich-text-editor__rich h1,.lc-rich-text-editor__rich h2,.lc-rich-text-editor__rich h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold);color:var(--color-text-primary)}.lc-rich-text-editor__rich h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__rich h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__rich h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__rich p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich ul,.lc-rich-text-editor__rich ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__rich code{background-color:var(--color-neutral-100);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__rich pre{background-color:var(--color-neutral-100);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto;margin:var(--spacing-3) 0}.lc-rich-text-editor__rich pre code{background:none;padding:0}.lc-rich-text-editor__rich a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__rich hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__rich img{max-width:100%;border-radius:var(--border-radius-md)}.lc-rich-text-editor__textarea{width:100%;height:100%;min-height:inherit;border:none;outline:none;resize:vertical;padding:var(--lc-density-padding-md, var(--spacing-4));font-family:var(--typography-font-family-mono, monospace);font-size:var(--typography-font-size-sm);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary);background-color:var(--color-background);tab-size:2}.lc-rich-text-editor__split{display:grid;grid-template-columns:1fr 1fr;height:100%;min-height:inherit}.lc-rich-text-editor__split-editor{border-right:1px solid var(--color-divider);min-height:inherit;resize:none}.lc-rich-text-editor__split-preview{padding:var(--lc-density-padding-md, var(--spacing-4));overflow-y:auto;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__split-preview h1,.lc-rich-text-editor__split-preview h2,.lc-rich-text-editor__split-preview h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold)}.lc-rich-text-editor__split-preview h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__split-preview h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__split-preview h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__split-preview p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview ul,.lc-rich-text-editor__split-preview ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__split-preview code{background-color:var(--color-neutral-100);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__split-preview pre{background-color:var(--color-neutral-100);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto}.lc-rich-text-editor__split-preview pre code{background:none;padding:0}.lc-rich-text-editor__split-preview a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__split-preview hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__footer{display:flex;justify-content:flex-end;gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));border-top:1px solid var(--color-divider);font-size:var(--typography-font-size-xs);color:var(--color-text-secondary)}[data-theme=dark] .lc-rich-text-editor,:root[data-theme=dark] .lc-rich-text-editor{background-color:var(--color-neutral-900);border-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar{background-color:var(--color-neutral-800);border-bottom-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar-btn:hover:not(:disabled),:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__toolbar-btn:hover:not(:disabled){background-color:var(--color-neutral-700)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__textarea,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__textarea{background-color:var(--color-neutral-900)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich code,[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview code,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich code,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview code{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich pre,[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview pre,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__rich pre,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-preview pre{background-color:var(--color-neutral-800)}[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-editor,:root[data-theme=dark] .lc-rich-text-editor .lc-rich-text-editor__split-editor{border-right-color:var(--color-neutral-700)}\n"] }]
|
|
12656
13068
|
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], showWordCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWordCount", required: false }] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }], editorArea: [{
|
|
12657
13069
|
type: ViewChild,
|
|
12658
13070
|
args: ['editorArea']
|
|
@@ -12661,295 +13073,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
12661
13073
|
args: ['richArea']
|
|
12662
13074
|
}] } });
|
|
12663
13075
|
|
|
12664
|
-
/**
|
|
12665
|
-
* Markdown renderer component.
|
|
12666
|
-
*
|
|
12667
|
-
* Renders GitHub-Flavored Markdown (GFM) to sanitized HTML with
|
|
12668
|
-
* optional syntax highlighting via `<lc-code-block>`.
|
|
12669
|
-
*
|
|
12670
|
-
* @example
|
|
12671
|
-
* ```html
|
|
12672
|
-
* <lc-markdown [content]="'# Hello World'" />
|
|
12673
|
-
* <lc-markdown [src]="'/docs/readme.md'" />
|
|
12674
|
-
* ```
|
|
12675
|
-
*/
|
|
12676
|
-
class MarkdownComponent {
|
|
12677
|
-
sanitizer = inject(DomSanitizer);
|
|
12678
|
-
http = inject(HttpClient);
|
|
12679
|
-
httpSub;
|
|
12680
|
-
/** URL or path to load markdown from */
|
|
12681
|
-
src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
|
|
12682
|
-
/** Raw markdown string */
|
|
12683
|
-
content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
|
|
12684
|
-
/** Display variant */
|
|
12685
|
-
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
12686
|
-
/** Target for links */
|
|
12687
|
-
linkTarget = input('_self', ...(ngDevMode ? [{ debugName: "linkTarget" }] : /* istanbul ignore next */ []));
|
|
12688
|
-
/** Whether to sanitize HTML output */
|
|
12689
|
-
sanitize = input(true, ...(ngDevMode ? [{ debugName: "sanitize" }] : /* istanbul ignore next */ []));
|
|
12690
|
-
/** Whether to use code-block for fenced code */
|
|
12691
|
-
syntaxHighlight = input(true, ...(ngDevMode ? [{ debugName: "syntaxHighlight" }] : /* istanbul ignore next */ []));
|
|
12692
|
-
/** Whether to show anchor links on headings */
|
|
12693
|
-
showHeadingAnchors = input(false, ...(ngDevMode ? [{ debugName: "showHeadingAnchors" }] : /* istanbul ignore next */ []));
|
|
12694
|
-
/** Base URL for resolving relative links/images */
|
|
12695
|
-
baseUrl = input(...(ngDevMode ? [undefined, { debugName: "baseUrl" }] : /* istanbul ignore next */ []));
|
|
12696
|
-
/** Emitted when a link is clicked */
|
|
12697
|
-
linkClick = output();
|
|
12698
|
-
/** Emitted after rendering with heading TOC */
|
|
12699
|
-
rendered = output();
|
|
12700
|
-
/** Internal resolved markdown source */
|
|
12701
|
-
resolvedMarkdown = signal('', ...(ngDevMode ? [{ debugName: "resolvedMarkdown" }] : /* istanbul ignore next */ []));
|
|
12702
|
-
/** Parsed result (computed once from resolvedMarkdown) */
|
|
12703
|
-
parsed = computed(() => {
|
|
12704
|
-
const md = this.resolvedMarkdown();
|
|
12705
|
-
if (!md)
|
|
12706
|
-
return { html: '', blocks: [], headings: [] };
|
|
12707
|
-
return this.parseMarkdown(md);
|
|
12708
|
-
}, ...(ngDevMode ? [{ debugName: "parsed" }] : /* istanbul ignore next */ []));
|
|
12709
|
-
/** Computed render parts (HTML chunks + code blocks interleaved) */
|
|
12710
|
-
renderParts = computed(() => {
|
|
12711
|
-
const { html, blocks } = this.parsed();
|
|
12712
|
-
if (!html)
|
|
12713
|
-
return [];
|
|
12714
|
-
if (this.syntaxHighlight() && blocks.length > 0) {
|
|
12715
|
-
return this.splitIntoParts(html, blocks);
|
|
12716
|
-
}
|
|
12717
|
-
// No code blocks — single HTML part
|
|
12718
|
-
const sanitized = this.sanitize()
|
|
12719
|
-
? this.sanitizer.sanitize(SecurityContext.HTML, html) || ''
|
|
12720
|
-
: html;
|
|
12721
|
-
return [{
|
|
12722
|
-
type: 'html',
|
|
12723
|
-
index: 0,
|
|
12724
|
-
safeHtml: this.sanitizer.bypassSecurityTrustHtml(sanitized),
|
|
12725
|
-
}];
|
|
12726
|
-
}, ...(ngDevMode ? [{ debugName: "renderParts" }] : /* istanbul ignore next */ []));
|
|
12727
|
-
containerClasses = computed(() => {
|
|
12728
|
-
return `lc-markdown lc-markdown--${this.variant()}`;
|
|
12729
|
-
}, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
|
|
12730
|
-
headings = computed(() => this.parsed().headings, ...(ngDevMode ? [{ debugName: "headings" }] : /* istanbul ignore next */ []));
|
|
12731
|
-
constructor() {
|
|
12732
|
-
// Load content from src when src changes
|
|
12733
|
-
effect(() => {
|
|
12734
|
-
const src = this.src();
|
|
12735
|
-
if (src) {
|
|
12736
|
-
this.loadFromUrl(src);
|
|
12737
|
-
}
|
|
12738
|
-
});
|
|
12739
|
-
// Use raw content when provided
|
|
12740
|
-
effect(() => {
|
|
12741
|
-
const content = this.content();
|
|
12742
|
-
if (content !== undefined) {
|
|
12743
|
-
this.resolvedMarkdown.set(content);
|
|
12744
|
-
}
|
|
12745
|
-
});
|
|
12746
|
-
// Emit rendered event when headings change
|
|
12747
|
-
effect(() => {
|
|
12748
|
-
const h = this.headings();
|
|
12749
|
-
if (h.length > 0) {
|
|
12750
|
-
this.rendered.emit({ headings: h });
|
|
12751
|
-
}
|
|
12752
|
-
});
|
|
12753
|
-
}
|
|
12754
|
-
ngOnDestroy() {
|
|
12755
|
-
this.httpSub?.unsubscribe();
|
|
12756
|
-
}
|
|
12757
|
-
onLinkClick(event) {
|
|
12758
|
-
const target = event.target;
|
|
12759
|
-
const anchor = target.closest('a');
|
|
12760
|
-
if (anchor) {
|
|
12761
|
-
this.linkClick.emit({ href: anchor.href, event });
|
|
12762
|
-
}
|
|
12763
|
-
}
|
|
12764
|
-
loadFromUrl(url) {
|
|
12765
|
-
this.httpSub?.unsubscribe();
|
|
12766
|
-
this.httpSub = this.http.get(url, { responseType: 'text' }).subscribe({
|
|
12767
|
-
next: (text) => this.resolvedMarkdown.set(text),
|
|
12768
|
-
error: () => this.resolvedMarkdown.set(`*Failed to load ${url}*`),
|
|
12769
|
-
});
|
|
12770
|
-
}
|
|
12771
|
-
splitIntoParts(html, blocks) {
|
|
12772
|
-
const parts = [];
|
|
12773
|
-
// The placeholders survive HTML escaping as <!--CODE_BLOCK_N-->
|
|
12774
|
-
const regex = /<!--CODE_BLOCK_(\d+)-->/g;
|
|
12775
|
-
let lastIndex = 0;
|
|
12776
|
-
let partIndex = 0;
|
|
12777
|
-
let match;
|
|
12778
|
-
while ((match = regex.exec(html)) !== null) {
|
|
12779
|
-
const before = html.slice(lastIndex, match.index);
|
|
12780
|
-
if (before.trim()) {
|
|
12781
|
-
const sanitized = this.sanitize()
|
|
12782
|
-
? this.sanitizer.sanitize(SecurityContext.HTML, before) || ''
|
|
12783
|
-
: before;
|
|
12784
|
-
parts.push({
|
|
12785
|
-
type: 'html',
|
|
12786
|
-
index: partIndex++,
|
|
12787
|
-
safeHtml: this.sanitizer.bypassSecurityTrustHtml(sanitized),
|
|
12788
|
-
});
|
|
12789
|
-
}
|
|
12790
|
-
const blockIdx = parseInt(match[1], 10);
|
|
12791
|
-
parts.push({
|
|
12792
|
-
type: 'code',
|
|
12793
|
-
index: partIndex++,
|
|
12794
|
-
code: blocks[blockIdx].code,
|
|
12795
|
-
lang: blocks[blockIdx].lang,
|
|
12796
|
-
});
|
|
12797
|
-
lastIndex = match.index + match[0].length;
|
|
12798
|
-
}
|
|
12799
|
-
const remaining = html.slice(lastIndex);
|
|
12800
|
-
if (remaining.trim()) {
|
|
12801
|
-
const sanitized = this.sanitize()
|
|
12802
|
-
? this.sanitizer.sanitize(SecurityContext.HTML, remaining) || ''
|
|
12803
|
-
: remaining;
|
|
12804
|
-
parts.push({
|
|
12805
|
-
type: 'html',
|
|
12806
|
-
index: partIndex++,
|
|
12807
|
-
safeHtml: this.sanitizer.bypassSecurityTrustHtml(sanitized),
|
|
12808
|
-
});
|
|
12809
|
-
}
|
|
12810
|
-
return parts;
|
|
12811
|
-
}
|
|
12812
|
-
parseMarkdown(md) {
|
|
12813
|
-
const blocks = [];
|
|
12814
|
-
const headings = [];
|
|
12815
|
-
const baseUrl = this.baseUrl();
|
|
12816
|
-
const linkTarget = this.linkTarget();
|
|
12817
|
-
const showAnchors = this.showHeadingAnchors();
|
|
12818
|
-
// 1. Extract fenced code blocks → placeholders
|
|
12819
|
-
let processed = md.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
|
|
12820
|
-
const idx = blocks.length;
|
|
12821
|
-
blocks.push({ lang: (lang || 'text'), code: code.trimEnd() });
|
|
12822
|
-
return `<!--CODE_BLOCK_${idx}-->`;
|
|
12823
|
-
});
|
|
12824
|
-
// 2. Escape HTML entities
|
|
12825
|
-
processed = processed
|
|
12826
|
-
.replace(/&/g, '&')
|
|
12827
|
-
.replace(/</g, '<')
|
|
12828
|
-
.replace(/>/g, '>');
|
|
12829
|
-
// 3. Headings (# to ######)
|
|
12830
|
-
processed = processed.replace(/^(#{1,6})\s+(.+)$/gm, (_match, hashes, text) => {
|
|
12831
|
-
const level = hashes.length;
|
|
12832
|
-
const id = text
|
|
12833
|
-
.toLowerCase()
|
|
12834
|
-
.replace(/[^\w\s-]/g, '')
|
|
12835
|
-
.replace(/\s+/g, '-');
|
|
12836
|
-
headings.push({ level, text, id });
|
|
12837
|
-
const anchor = showAnchors
|
|
12838
|
-
? `<a href="#${id}" class="lc-markdown__anchor" aria-hidden="true">#</a>`
|
|
12839
|
-
: '';
|
|
12840
|
-
return `<h${level} id="${id}">${anchor}${text}</h${level}>`;
|
|
12841
|
-
});
|
|
12842
|
-
// 4. Horizontal rules
|
|
12843
|
-
processed = processed.replace(/^---+$/gm, '<hr>');
|
|
12844
|
-
// 5. Blockquotes
|
|
12845
|
-
processed = processed.replace(/^(?:>)\s?(.*)$/gm, '<blockquote>$1</blockquote>');
|
|
12846
|
-
// Merge consecutive blockquotes
|
|
12847
|
-
processed = processed.replace(/<\/blockquote>\n<blockquote>/g, '\n');
|
|
12848
|
-
// 6. Tables (GFM)
|
|
12849
|
-
processed = this.parseTables(processed);
|
|
12850
|
-
// 7. Task lists
|
|
12851
|
-
processed = processed.replace(/^[-*]\s+\[x\]\s+(.*)$/gm, '<li class="lc-markdown__task"><input type="checkbox" checked disabled> $1</li>');
|
|
12852
|
-
processed = processed.replace(/^[-*]\s+\[ \]\s+(.*)$/gm, '<li class="lc-markdown__task"><input type="checkbox" disabled> $1</li>');
|
|
12853
|
-
// 8. Unordered lists
|
|
12854
|
-
processed = processed.replace(/^[-*]\s+(.*)$/gm, '<li>$1</li>');
|
|
12855
|
-
processed = processed.replace(/(<li>[\s\S]*?<\/li>)/g, (match) => {
|
|
12856
|
-
if (!match.includes('lc-markdown__task')) {
|
|
12857
|
-
return match;
|
|
12858
|
-
}
|
|
12859
|
-
return match;
|
|
12860
|
-
});
|
|
12861
|
-
// Wrap consecutive <li> in <ul>
|
|
12862
|
-
processed = processed.replace(/((?:<li[^>]*>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
|
|
12863
|
-
// 9. Ordered lists
|
|
12864
|
-
processed = processed.replace(/^\d+\.\s+(.*)$/gm, '<li>$1</li>');
|
|
12865
|
-
// 10. Inline code
|
|
12866
|
-
processed = processed.replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
12867
|
-
// 11. Bold + italic combos
|
|
12868
|
-
processed = processed.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
|
|
12869
|
-
processed = processed.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
|
12870
|
-
processed = processed.replace(/\*(.+?)\*/g, '<em>$1</em>');
|
|
12871
|
-
// 12. Strikethrough (GFM)
|
|
12872
|
-
processed = processed.replace(/~~(.+?)~~/g, '<del>$1</del>');
|
|
12873
|
-
// 13. Images
|
|
12874
|
-
processed = processed.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, src) => {
|
|
12875
|
-
const resolvedSrc = baseUrl && !src.startsWith('http') ? `${baseUrl}/${src}` : src;
|
|
12876
|
-
return `<img src="${resolvedSrc}" alt="${alt}" class="lc-markdown__img">`;
|
|
12877
|
-
});
|
|
12878
|
-
// 14. Links
|
|
12879
|
-
processed = processed.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, href) => {
|
|
12880
|
-
const resolvedHref = baseUrl && !href.startsWith('http') && !href.startsWith('#')
|
|
12881
|
-
? `${baseUrl}/${href}`
|
|
12882
|
-
: href;
|
|
12883
|
-
return `<a href="${resolvedHref}" target="${linkTarget}" rel="noopener">${text}</a>`;
|
|
12884
|
-
});
|
|
12885
|
-
// 15. Paragraphs — wrap standalone lines
|
|
12886
|
-
processed = processed
|
|
12887
|
-
.split('\n\n')
|
|
12888
|
-
.map((block) => {
|
|
12889
|
-
const trimmed = block.trim();
|
|
12890
|
-
if (!trimmed)
|
|
12891
|
-
return '';
|
|
12892
|
-
if (trimmed.startsWith('<h') ||
|
|
12893
|
-
trimmed.startsWith('<ul') ||
|
|
12894
|
-
trimmed.startsWith('<ol') ||
|
|
12895
|
-
trimmed.startsWith('<blockquote') ||
|
|
12896
|
-
trimmed.startsWith('<hr') ||
|
|
12897
|
-
trimmed.startsWith('<table') ||
|
|
12898
|
-
trimmed.startsWith('<!--CODE_BLOCK')) {
|
|
12899
|
-
return trimmed;
|
|
12900
|
-
}
|
|
12901
|
-
return `<p>${trimmed.replace(/\n/g, '<br>')}</p>`;
|
|
12902
|
-
})
|
|
12903
|
-
.join('\n');
|
|
12904
|
-
// 16. Restore code block placeholders
|
|
12905
|
-
if (this.syntaxHighlight()) {
|
|
12906
|
-
// Leave placeholders — the template will render <lc-code-block> for each
|
|
12907
|
-
// No replacement needed here
|
|
12908
|
-
}
|
|
12909
|
-
else {
|
|
12910
|
-
processed = processed.replace(/<!--CODE_BLOCK_(\d+)-->/g, (_match, idx) => {
|
|
12911
|
-
const block = blocks[parseInt(idx, 10)];
|
|
12912
|
-
return `<pre><code class="language-${block.lang}">${this.escapeHtml(block.code)}</code></pre>`;
|
|
12913
|
-
});
|
|
12914
|
-
}
|
|
12915
|
-
return { html: processed, blocks, headings };
|
|
12916
|
-
}
|
|
12917
|
-
parseTables(text) {
|
|
12918
|
-
return text.replace(/^(\|.+\|)\n(\|[-| :]+\|)\n((?:\|.+\|\n?)*)/gm, (_match, header, _separator, body) => {
|
|
12919
|
-
const headers = header
|
|
12920
|
-
.split('|')
|
|
12921
|
-
.filter((c) => c.trim())
|
|
12922
|
-
.map((c) => `<th>${c.trim()}</th>`)
|
|
12923
|
-
.join('');
|
|
12924
|
-
const rows = body
|
|
12925
|
-
.trim()
|
|
12926
|
-
.split('\n')
|
|
12927
|
-
.map((row) => {
|
|
12928
|
-
const cells = row
|
|
12929
|
-
.split('|')
|
|
12930
|
-
.filter((c) => c.trim())
|
|
12931
|
-
.map((c) => `<td>${c.trim()}</td>`)
|
|
12932
|
-
.join('');
|
|
12933
|
-
return `<tr>${cells}</tr>`;
|
|
12934
|
-
})
|
|
12935
|
-
.join('');
|
|
12936
|
-
return `<table class="lc-markdown__table"><thead><tr>${headers}</tr></thead><tbody>${rows}</tbody></table>`;
|
|
12937
|
-
});
|
|
12938
|
-
}
|
|
12939
|
-
escapeHtml(text) {
|
|
12940
|
-
return text
|
|
12941
|
-
.replace(/&/g, '&')
|
|
12942
|
-
.replace(/</g, '<')
|
|
12943
|
-
.replace(/>/g, '>');
|
|
12944
|
-
}
|
|
12945
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12946
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MarkdownComponent, isStandalone: true, selector: "lc-markdown", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: true, isRequired: false, transformFunction: null }, syntaxHighlight: { classPropertyName: "syntaxHighlight", publicName: "syntaxHighlight", isSignal: true, isRequired: false, transformFunction: null }, showHeadingAnchors: { classPropertyName: "showHeadingAnchors", publicName: "showHeadingAnchors", isSignal: true, isRequired: false, transformFunction: null }, baseUrl: { classPropertyName: "baseUrl", publicName: "baseUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick", rendered: "rendered" }, ngImport: i0, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n @for (part of renderParts(); track part.index) {\n @if (part.type === 'html') {\n <div [innerHTML]=\"part.safeHtml\"></div>\n } @else {\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"part.lang ?? 'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n }\n }\n</div>\n", styles: [".lc-markdown{color:var(--color-text, #111827);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text, #111827);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-800, #1f2937);padding:.125em .375em;border-radius:var(--radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-neutral-50, #f9fafb);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown__table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-neutral-50, #f9fafb);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-neutral-50, #f9fafb)}.lc-markdown__task{list-style:none;margin-left:-1.5em}.lc-markdown__task input[type=checkbox]{margin-right:.5em;vertical-align:middle}.lc-markdown__anchor{color:var(--color-neutral-400, #9ca3af);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}\n"], dependencies: [{ kind: "component", type: CodeBlockComponent, selector: "lc-code-block", inputs: ["code", "language", "filename", "showLineNumbers", "showCopy", "showHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12947
|
-
}
|
|
12948
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, decorators: [{
|
|
12949
|
-
type: Component,
|
|
12950
|
-
args: [{ selector: 'lc-markdown', standalone: true, imports: [CodeBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"containerClasses()\" (click)=\"onLinkClick($event)\">\n @for (part of renderParts(); track part.index) {\n @if (part.type === 'html') {\n <div [innerHTML]=\"part.safeHtml\"></div>\n } @else {\n <lc-code-block\n [code]=\"part.code!\"\n [language]=\"part.lang ?? 'text'\"\n [showLineNumbers]=\"true\"\n [showCopy]=\"true\"\n />\n }\n }\n</div>\n", styles: [".lc-markdown{color:var(--color-text, #111827);font-family:var(--font-family-sans);font-size:var(--font-size-base, 1rem);line-height:var(--line-height-relaxed, 1.75)}.lc-markdown h1,.lc-markdown h2,.lc-markdown h3,.lc-markdown h4,.lc-markdown h5,.lc-markdown h6{color:var(--color-text, #111827);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);margin:1.5em 0 .5em}.lc-markdown h1:first-child,.lc-markdown h2:first-child,.lc-markdown h3:first-child,.lc-markdown h4:first-child,.lc-markdown h5:first-child,.lc-markdown h6:first-child{margin-top:0}.lc-markdown h1{font-size:2rem}.lc-markdown h2{font-size:1.5rem}.lc-markdown h3{font-size:1.25rem}.lc-markdown h4{font-size:1.125rem}.lc-markdown h5{font-size:1rem}.lc-markdown h6{font-size:.875rem}.lc-markdown p{margin:0 0 1em}.lc-markdown a{color:var(--color-primary-600, #2563eb);text-decoration:none}.lc-markdown a:hover{text-decoration:underline}.lc-markdown strong{font-weight:var(--font-weight-semibold, 600)}.lc-markdown code{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-800, #1f2937);padding:.125em .375em;border-radius:var(--radius-sm, .25rem);font-family:var(--font-family-mono, monospace);font-size:.875em}.lc-markdown pre{margin:1em 0;overflow-x:auto}.lc-markdown pre code{background:none;padding:0;border-radius:0}.lc-markdown blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--color-primary-300, #93c5fd);background-color:var(--color-neutral-50, #f9fafb);color:var(--color-text-secondary, #4b5563)}.lc-markdown blockquote p{margin:0}.lc-markdown ul,.lc-markdown ol{margin:0 0 1em;padding-left:1.5em}.lc-markdown ul{list-style:disc}.lc-markdown ol{list-style:decimal}.lc-markdown li{margin:.25em 0}.lc-markdown hr{border:none;border-top:1px solid var(--color-divider, #e5e7eb);margin:1.5em 0}.lc-markdown img{max-width:100%;height:auto;border-radius:var(--radius-md, .375rem)}.lc-markdown del{text-decoration:line-through;color:var(--color-text-secondary, #6b7280)}.lc-markdown__table{width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--font-size-sm, .875rem)}.lc-markdown__table th,.lc-markdown__table td{padding:.5rem .75rem;border:1px solid var(--color-divider, #e5e7eb);text-align:left}.lc-markdown__table th{background-color:var(--color-neutral-50, #f9fafb);font-weight:var(--font-weight-semibold, 600)}.lc-markdown__table tr:hover td{background-color:var(--color-neutral-50, #f9fafb)}.lc-markdown__task{list-style:none;margin-left:-1.5em}.lc-markdown__task input[type=checkbox]{margin-right:.5em;vertical-align:middle}.lc-markdown__anchor{color:var(--color-neutral-400, #9ca3af);text-decoration:none;margin-right:.25em;opacity:0;transition:opacity .15s ease}h1:hover .lc-markdown__anchor,h2:hover .lc-markdown__anchor,h3:hover .lc-markdown__anchor,h4:hover .lc-markdown__anchor,h5:hover .lc-markdown__anchor,h6:hover .lc-markdown__anchor{opacity:1}.lc-markdown lc-code-block{display:block;margin:1em 0}.lc-markdown--compact{font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-normal, 1.5)}.lc-markdown--compact h1{font-size:1.5rem}.lc-markdown--compact h2{font-size:1.25rem}.lc-markdown--compact h3{font-size:1.125rem}.lc-markdown--compact h4{font-size:1rem}.lc-markdown--compact h5,.lc-markdown--compact h6{font-size:.875rem}.lc-markdown--compact h1,.lc-markdown--compact h2,.lc-markdown--compact h3,.lc-markdown--compact h4,.lc-markdown--compact h5,.lc-markdown--compact h6{margin:1em 0 .25em}.lc-markdown--compact p{margin:0 0 .5em}.lc-markdown--compact blockquote{margin:.5em 0;padding:.25em .75em}.lc-markdown--compact ul,.lc-markdown--compact ol{margin:0 0 .5em}\n"] }]
|
|
12951
|
-
}], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], linkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTarget", required: false }] }], sanitize: [{ type: i0.Input, args: [{ isSignal: true, alias: "sanitize", required: false }] }], syntaxHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "syntaxHighlight", required: false }] }], showHeadingAnchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadingAnchors", required: false }] }], baseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrl", required: false }] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }], rendered: [{ type: i0.Output, args: ["rendered"] }] } });
|
|
12952
|
-
|
|
12953
13076
|
/**
|
|
12954
13077
|
* Streaming log / terminal viewer component.
|
|
12955
13078
|
*
|
|
@@ -13769,5 +13892,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
13769
13892
|
* Generated bundle index. Do not edit.
|
|
13770
13893
|
*/
|
|
13771
13894
|
|
|
13772
|
-
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, 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, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, 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, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, TooltipContentComponent, TooltipDirective, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent };
|
|
13895
|
+
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, 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, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, 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, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent };
|
|
13773
13896
|
//# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map
|