@life-cockpit/angular-ui-kit 1.6.3 → 1.9.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.
Files changed (4) hide show
  1. package/fesm2022/life-cockpit-angular-ui-kit.mjs +291 -599
  2. package/fesm2022/life-cockpit-angular-ui-kit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/life-cockpit-angular-ui-kit.d.ts +124 -263
package/fesm2022/life-cockpit-angular-ui-kit.mjs CHANGED
@@ -1,19 +1,18 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, PLATFORM_ID, signal, Injectable, input, computed, effect, ChangeDetectionStrategy, Component, model, EventEmitter, ViewChild, Output, Input, ViewEncapsulation, output, HostListener, forwardRef, ElementRef, viewChild, ChangeDetectorRef, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
3
- import * as i1 from '@angular/common';
4
- import { isPlatformBrowser, CommonModule, SlicePipe, NgTemplateOutlet, NgStyle } from '@angular/common';
2
+ import { inject, PLATFORM_ID, signal, Injectable, input, computed, effect, ChangeDetectionStrategy, Component, model, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
3
+ import { isPlatformBrowser, NgClass, CommonModule, NgTemplateOutlet, NgStyle, SlicePipe } from '@angular/common';
5
4
  import * as i1$4 from '@angular/platform-browser';
6
5
  import { DomSanitizer } from '@angular/platform-browser';
7
6
  import { HttpClient } from '@angular/common/http';
8
- import * as i1$2 from '@angular/forms';
7
+ import * as i1$1 from '@angular/forms';
9
8
  import { NG_VALUE_ACCESSOR, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
10
- import * as i1$1 from '@angular/cdk/overlay';
9
+ import * as i1 from '@angular/cdk/overlay';
11
10
  import { OverlayModule, Overlay } from '@angular/cdk/overlay';
12
11
  import { Subject, debounceTime, distinctUntilChanged, takeUntil, switchMap, of } from 'rxjs';
13
- import * as i1$3 from '@angular/cdk/a11y';
12
+ import * as i1$2 from '@angular/cdk/a11y';
14
13
  import { ConfigurableFocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
15
14
  import { ComponentPortal } from '@angular/cdk/portal';
16
- import * as i2 from '@angular/router';
15
+ import * as i1$3 from '@angular/router';
17
16
  import { RouterModule } from '@angular/router';
18
17
 
19
18
  /**
@@ -589,11 +588,11 @@ class IconComponent {
589
588
  return new XMLSerializer().serializeToString(svg);
590
589
  }
591
590
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
592
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: IconComponent, isStandalone: true, selector: "lc-icon", inputs: { name: { classPropertyName: "name", publicName: "name", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n [class]=\"computedClasses()\"\n [innerHTML]=\"svgContent()\"\n [style.width]=\"sizeInPixels()\"\n [style.height]=\"sizeInPixels()\"\n></div>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.icon-container{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container ::ng-deep svg{width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
591
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: IconComponent, isStandalone: true, selector: "lc-icon", inputs: { name: { classPropertyName: "name", publicName: "name", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n [class]=\"computedClasses()\"\n [innerHTML]=\"svgContent()\"\n [style.width]=\"sizeInPixels()\"\n [style.height]=\"sizeInPixels()\"\n></div>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.icon-container{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container ::ng-deep svg{width:100%;height:100%;display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
593
592
  }
594
593
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IconComponent, decorators: [{
595
594
  type: Component,
596
- args: [{ selector: 'lc-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n [class]=\"computedClasses()\"\n [innerHTML]=\"svgContent()\"\n [style.width]=\"sizeInPixels()\"\n [style.height]=\"sizeInPixels()\"\n></div>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.icon-container{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container ::ng-deep svg{width:100%;height:100%;display:block}\n"] }]
595
+ args: [{ selector: 'lc-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n [class]=\"computedClasses()\"\n [innerHTML]=\"svgContent()\"\n [style.width]=\"sizeInPixels()\"\n [style.height]=\"sizeInPixels()\"\n></div>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.icon-container{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container ::ng-deep svg{width:100%;height:100%;display:block}\n"] }]
597
596
  }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }] } });
598
597
 
599
598
  /**
@@ -649,13 +648,62 @@ class AccordionComponent {
649
648
  }
650
649
  }
651
650
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
652
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AccordionComponent, isStandalone: true, selector: "lc-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<div [class]=\"accordionClasses()\" role=\"region\">\n <button\n class=\"lc-accordion__header\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <span class=\"lc-accordion__title\">{{ title() }}</span>\n <lc-icon\n class=\"lc-accordion__icon\"\n [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\"\n size=\"sm\"\n ></lc-icon>\n </button>\n\n @if (expanded()) {\n <div class=\"lc-accordion__body\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-accordion{border-radius:.5rem}.lc-accordion--outlined{border:1px solid var(--color-border)}.lc-accordion--flat{border:none}.lc-accordion--disabled{opacity:.5;pointer-events:none}.lc-accordion__header{display:flex;width:100%;align-items:center;justify-content:space-between;padding:.75rem 1rem;font-weight:600;color:var(--color-text);background:var(--color-surface);border:none;border-radius:.5rem;cursor:pointer;transition:background-color .15s ease}.lc-accordion__header:hover{background-color:var(--color-surface-hover)}.lc-accordion__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.lc-accordion__header:disabled{cursor:not-allowed}.lc-accordion--sm .lc-accordion__header{padding:.5rem .75rem;font-size:.8125rem}.lc-accordion--md .lc-accordion__header{padding:.75rem 1rem;font-size:.875rem}.lc-accordion--lg .lc-accordion__header{padding:1rem 1.25rem;font-size:1rem}.lc-accordion__title{flex:1;text-align:left}.lc-accordion__icon{flex-shrink:0;color:var(--color-text-secondary);transition:transform .15s ease}.lc-accordion--expanded .lc-accordion__header{border-radius:.5rem .5rem 0 0}.lc-accordion__body{display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--color-border);padding:1rem;background:var(--color-surface);border-radius:0 0 .5rem .5rem}.lc-accordion--sm .lc-accordion__body{padding:.5rem .75rem}.lc-accordion--lg .lc-accordion__body{padding:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
651
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: AccordionComponent, isStandalone: true, selector: "lc-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<div [class]=\"accordionClasses()\" role=\"region\">\n <button\n class=\"lc-accordion__header\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <span class=\"lc-accordion__title\">{{ title() }}</span>\n <lc-icon\n class=\"lc-accordion__icon\"\n name=\"chevron-down\"\n size=\"sm\"\n ></lc-icon>\n </button>\n\n <div class=\"lc-accordion__panel\" [attr.aria-hidden]=\"!expanded()\">\n <div class=\"lc-accordion__body\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.lc-accordion{border-radius:.75rem;overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}.lc-accordion--outlined{border:1px solid var(--color-border);background:var(--color-surface);box-shadow:0 1px 2px #0000000a}.lc-accordion--outlined:hover:not(.lc-accordion--disabled){box-shadow:0 2px 6px #0000000f}.lc-accordion--flat{border:none;background:transparent}.lc-accordion--disabled{opacity:.5;pointer-events:none}.lc-accordion__header{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:.875rem 1.125rem;font-weight:600;letter-spacing:-.01em;color:var(--color-text);background:transparent;border:none;border-radius:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-accordion__header:hover{background-color:var(--color-surface-hover)}.lc-accordion__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:.5rem}.lc-accordion__header:disabled{cursor:not-allowed}.lc-accordion--sm .lc-accordion__header{padding:.625rem .875rem;font-size:.8125rem}.lc-accordion--md .lc-accordion__header{padding:.875rem 1.125rem;font-size:.9375rem}.lc-accordion--lg .lc-accordion__header{padding:1.125rem 1.375rem;font-size:1.0625rem}.lc-accordion__title{flex:1;text-align:left}.lc-accordion__icon{flex-shrink:0;color:var(--color-text-secondary);transition:transform .3s cubic-bezier(.25,.46,.45,.94),color .2s ease}.lc-accordion__header:hover .lc-accordion__icon{color:var(--color-text)}.lc-accordion--expanded .lc-accordion__icon{transform:rotate(-180deg)}.lc-accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.25,.46,.45,.94);overflow:hidden}.lc-accordion--expanded .lc-accordion__panel{grid-template-rows:1fr}.lc-accordion__body{min-height:0;overflow:hidden;padding:0 1.125rem;color:var(--color-text-secondary);font-size:.875rem;line-height:1.6;opacity:0;transform:translateY(-4px);transition:opacity .2s ease 50ms,transform .2s ease 50ms,padding .3s cubic-bezier(.25,.46,.45,.94)}.lc-accordion--expanded .lc-accordion__body{padding:0 1.125rem 1rem;opacity:1;transform:translateY(0);transition:opacity .25s ease 80ms,transform .25s ease 80ms,padding .3s cubic-bezier(.25,.46,.45,.94)}.lc-accordion--sm .lc-accordion__body{padding:0 .875rem;font-size:.8125rem}.lc-accordion--sm.lc-accordion--expanded .lc-accordion__body{padding:0 .875rem .75rem}.lc-accordion--lg .lc-accordion__body{padding:0 1.375rem;font-size:.9375rem}.lc-accordion--lg.lc-accordion--expanded .lc-accordion__body{padding:0 1.375rem 1.25rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
653
652
  }
654
653
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AccordionComponent, decorators: [{
655
654
  type: Component,
656
- args: [{ selector: 'lc-accordion', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"accordionClasses()\" role=\"region\">\n <button\n class=\"lc-accordion__header\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <span class=\"lc-accordion__title\">{{ title() }}</span>\n <lc-icon\n class=\"lc-accordion__icon\"\n [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\"\n size=\"sm\"\n ></lc-icon>\n </button>\n\n @if (expanded()) {\n <div class=\"lc-accordion__body\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-accordion{border-radius:.5rem}.lc-accordion--outlined{border:1px solid var(--color-border)}.lc-accordion--flat{border:none}.lc-accordion--disabled{opacity:.5;pointer-events:none}.lc-accordion__header{display:flex;width:100%;align-items:center;justify-content:space-between;padding:.75rem 1rem;font-weight:600;color:var(--color-text);background:var(--color-surface);border:none;border-radius:.5rem;cursor:pointer;transition:background-color .15s ease}.lc-accordion__header:hover{background-color:var(--color-surface-hover)}.lc-accordion__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.lc-accordion__header:disabled{cursor:not-allowed}.lc-accordion--sm .lc-accordion__header{padding:.5rem .75rem;font-size:.8125rem}.lc-accordion--md .lc-accordion__header{padding:.75rem 1rem;font-size:.875rem}.lc-accordion--lg .lc-accordion__header{padding:1rem 1.25rem;font-size:1rem}.lc-accordion__title{flex:1;text-align:left}.lc-accordion__icon{flex-shrink:0;color:var(--color-text-secondary);transition:transform .15s ease}.lc-accordion--expanded .lc-accordion__header{border-radius:.5rem .5rem 0 0}.lc-accordion__body{display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--color-border);padding:1rem;background:var(--color-surface);border-radius:0 0 .5rem .5rem}.lc-accordion--sm .lc-accordion__body{padding:.5rem .75rem}.lc-accordion--lg .lc-accordion__body{padding:1.25rem}\n"] }]
655
+ args: [{ selector: 'lc-accordion', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"accordionClasses()\" role=\"region\">\n <button\n class=\"lc-accordion__header\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <span class=\"lc-accordion__title\">{{ title() }}</span>\n <lc-icon\n class=\"lc-accordion__icon\"\n name=\"chevron-down\"\n size=\"sm\"\n ></lc-icon>\n </button>\n\n <div class=\"lc-accordion__panel\" [attr.aria-hidden]=\"!expanded()\">\n <div class=\"lc-accordion__body\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.lc-accordion{border-radius:.75rem;overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}.lc-accordion--outlined{border:1px solid var(--color-border);background:var(--color-surface);box-shadow:0 1px 2px #0000000a}.lc-accordion--outlined:hover:not(.lc-accordion--disabled){box-shadow:0 2px 6px #0000000f}.lc-accordion--flat{border:none;background:transparent}.lc-accordion--disabled{opacity:.5;pointer-events:none}.lc-accordion__header{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:.875rem 1.125rem;font-weight:600;letter-spacing:-.01em;color:var(--color-text);background:transparent;border:none;border-radius:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-accordion__header:hover{background-color:var(--color-surface-hover)}.lc-accordion__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:.5rem}.lc-accordion__header:disabled{cursor:not-allowed}.lc-accordion--sm .lc-accordion__header{padding:.625rem .875rem;font-size:.8125rem}.lc-accordion--md .lc-accordion__header{padding:.875rem 1.125rem;font-size:.9375rem}.lc-accordion--lg .lc-accordion__header{padding:1.125rem 1.375rem;font-size:1.0625rem}.lc-accordion__title{flex:1;text-align:left}.lc-accordion__icon{flex-shrink:0;color:var(--color-text-secondary);transition:transform .3s cubic-bezier(.25,.46,.45,.94),color .2s ease}.lc-accordion__header:hover .lc-accordion__icon{color:var(--color-text)}.lc-accordion--expanded .lc-accordion__icon{transform:rotate(-180deg)}.lc-accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.25,.46,.45,.94);overflow:hidden}.lc-accordion--expanded .lc-accordion__panel{grid-template-rows:1fr}.lc-accordion__body{min-height:0;overflow:hidden;padding:0 1.125rem;color:var(--color-text-secondary);font-size:.875rem;line-height:1.6;opacity:0;transform:translateY(-4px);transition:opacity .2s ease 50ms,transform .2s ease 50ms,padding .3s cubic-bezier(.25,.46,.45,.94)}.lc-accordion--expanded .lc-accordion__body{padding:0 1.125rem 1rem;opacity:1;transform:translateY(0);transition:opacity .25s ease 80ms,transform .25s ease 80ms,padding .3s cubic-bezier(.25,.46,.45,.94)}.lc-accordion--sm .lc-accordion__body{padding:0 .875rem;font-size:.8125rem}.lc-accordion--sm.lc-accordion--expanded .lc-accordion__body{padding:0 .875rem .75rem}.lc-accordion--lg .lc-accordion__body{padding:0 1.375rem;font-size:.9375rem}.lc-accordion--lg.lc-accordion--expanded .lc-accordion__body{padding:0 1.375rem 1.25rem}\n"] }]
657
656
  }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
658
657
 
658
+ class AccordionGroupComponent {
659
+ /** When false (default), only one accordion can be expanded at a time. */
660
+ multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
661
+ accordions = contentChildren(AccordionComponent, ...(ngDevMode ? [{ debugName: "accordions" }] : /* istanbul ignore next */ []));
662
+ previousExpanded = new Set();
663
+ constructor() {
664
+ effect(() => {
665
+ const accordions = this.accordions();
666
+ const multi = this.multi();
667
+ // Read expanded state of every child so the effect re-runs on change
668
+ const currentlyExpanded = accordions.filter((a) => a.expanded());
669
+ if (multi) {
670
+ this.previousExpanded = new Set(currentlyExpanded);
671
+ return;
672
+ }
673
+ // Find newly expanded accordion
674
+ const newlyExpanded = currentlyExpanded.find((a) => !this.previousExpanded.has(a));
675
+ if (newlyExpanded && currentlyExpanded.length > 1) {
676
+ untracked(() => {
677
+ accordions.forEach((a) => {
678
+ if (a !== newlyExpanded && a.expanded()) {
679
+ a.expanded.set(false);
680
+ }
681
+ });
682
+ });
683
+ }
684
+ this.previousExpanded = new Set(accordions.filter((a) => a.expanded()));
685
+ });
686
+ }
687
+ /** Collapse all accordions. */
688
+ collapseAll() {
689
+ this.accordions().forEach((a) => a.expanded.set(false));
690
+ }
691
+ /** Expand all accordions (only meaningful when multi=true). */
692
+ expandAll() {
693
+ this.accordions().forEach((a) => {
694
+ if (!a.disabled()) {
695
+ a.expanded.set(true);
696
+ }
697
+ });
698
+ }
699
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
700
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: AccordionGroupComponent, isStandalone: true, selector: "lc-accordion-group", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "accordions", predicate: AccordionComponent, isSignal: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;flex-direction:column;gap:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
701
+ }
702
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AccordionGroupComponent, decorators: [{
703
+ type: Component,
704
+ args: [{ selector: 'lc-accordion-group', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;flex-direction:column;gap:.5rem}\n"] }]
705
+ }], ctorParameters: () => [], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], accordions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionComponent), { isSignal: true }] }] } });
706
+
659
707
  /**
660
708
  * Button component for user actions and form submissions.
661
709
  *
@@ -674,24 +722,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
674
722
  * ```
675
723
  */
676
724
  class ButtonComponent {
677
- variant = 'primary';
678
- size = 'md';
679
- disabled = false;
680
- loading = false;
681
- isLoading = false; // Alias for loading
682
- iconOnly = false; // Icon-only button (no text, square shape)
683
- fullWidth = false;
684
- ariaLabel = '';
685
- type = 'button';
686
- clicked = new EventEmitter();
687
- focused = new EventEmitter();
688
- blurred = new EventEmitter();
725
+ variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
726
+ size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
727
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
728
+ loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
729
+ iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
730
+ fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
731
+ ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
732
+ type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
733
+ clicked = output();
734
+ focused = output();
735
+ blurred = output();
689
736
  buttonElement;
690
- get isDisabled() {
691
- return this.disabled || this.loading || this.isLoading;
692
- }
737
+ isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
693
738
  handleClick() {
694
- if (!this.isDisabled) {
739
+ if (!this.isDisabled()) {
695
740
  this.clicked.emit();
696
741
  }
697
742
  }
@@ -708,36 +753,12 @@ class ButtonComponent {
708
753
  this.buttonElement?.nativeElement.blur();
709
754
  }
710
755
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
711
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ButtonComponent, isStandalone: true, selector: "lc-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading", isLoading: "isLoading", iconOnly: "iconOnly", fullWidth: "fullWidth", ariaLabel: "ariaLabel", type: "type" }, outputs: { clicked: "clicked", focused: "focused", blurred: "blurred" }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], ngImport: i0, template: "<button\n #buttonElement\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"isDisabled ? 'true' : 'false'\"\n [attr.aria-busy]=\"loading ? 'true' : 'false'\"\n [ngClass]=\"{\n 'btn': true,\n 'btn-primary': variant === 'primary',\n 'btn-secondary': variant === 'secondary',\n 'btn-outline': variant === 'outline',\n 'btn-ghost': variant === 'ghost',\n 'btn-link': variant === 'link',\n 'btn-danger': variant === 'danger',\n 'btn-warning': variant === 'warning',\n 'btn-info': variant === 'info',\n 'btn-xs': size === 'xs',\n 'btn-sm': size === 'sm',\n 'btn-md': size === 'md',\n 'btn-lg': size === 'lg',\n 'btn-icon-only': iconOnly,\n 'btn-full-width': fullWidth\n }\"\n (click)=\"handleClick()\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n>\n @if (loading) {\n <span class=\"loading-spinner\"></span>\n }\n @if (!loading) {\n <ng-content select=\"[slot='icon-before']\" />\n }\n <ng-content></ng-content>\n @if (!loading) {\n <ng-content select=\"[slot='icon-after']\" />\n }\n</button>\n", styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--spacing-2);cursor:pointer;transition:all var(--animation-duration-base) var(--animation-timing-ease);white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn-primary{background-color:var(--color-primary-600);color:var(--color-neutral-white)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-700)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-800)}.dark .btn-primary{background-color:#144f5b}.dark .btn-primary:hover:not(:disabled){background-color:#1a6a79}.dark .btn-primary:active:not(:disabled){background-color:#0d353d}.btn-secondary{background-color:var(--color-secondary-600);color:var(--color-neutral-white)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-700)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-800)}.dark .btn-secondary{background-color:#435b69}.dark .btn-secondary:hover:not(:disabled){background-color:#5a798c}.dark .btn-secondary:active:not(:disabled){background-color:#2d3c46}.btn-outline{background-color:transparent;border-color:var(--color-neutral-300);color:var(--color-neutral-900)}.btn-outline:hover:not(:disabled){background-color:var(--color-neutral-50);border-color:var(--color-neutral-400)}.btn-outline:active:not(:disabled){background-color:var(--color-neutral-100)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-neutral-700))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-neutral-100));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-neutral-900)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-neutral-200))}.btn-link{background-color:transparent;color:var(--color-primary-600);padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--color-primary-700);text-decoration:underline}.btn-link:active:not(:disabled){color:var(--color-primary-800)}.btn-danger{background-color:var(--color-error-600);color:var(--color-neutral-white)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-700)}.btn-danger:active:not(:disabled){background-color:var(--color-error-800)}.dark .btn-danger{background-color:#6b0909}.dark .btn-danger:hover:not(:disabled){background-color:#9d0e0e}.dark .btn-danger:active:not(:disabled){background-color:#6b0909;filter:brightness(.85)}.btn-warning{background-color:#e1a040;color:var(--color-neutral-white)}.btn-warning:hover:not(:disabled){background-color:#9b6b2b}.btn-warning:active:not(:disabled){background-color:#9b6b2b;filter:brightness(.85)}.dark .btn-warning{background-color:#e1a040}.dark .btn-warning:hover:not(:disabled){background-color:#f1d3a7}.dark .btn-warning:active:not(:disabled){background-color:#e1a040;filter:brightness(.85)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.dark .btn-info{background-color:#3b6588}.dark .btn-info:hover:not(:disabled){background-color:#b8cee0}.dark .btn-info:active:not(:disabled){background-color:#3b6588;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
756
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ButtonComponent, isStandalone: true, selector: "lc-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", focused: "focused", blurred: "blurred" }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], ngImport: i0, template: "<button\n #buttonElement\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n [ngClass]=\"{\n 'btn': true,\n 'btn-primary': variant() === 'primary',\n 'btn-secondary': variant() === 'secondary',\n 'btn-outline': variant() === 'outline',\n 'btn-ghost': variant() === 'ghost',\n 'btn-link': variant() === 'link',\n 'btn-danger': variant() === 'danger',\n 'btn-warning': variant() === 'warning',\n 'btn-info': variant() === 'info',\n 'btn-xs': size() === 'xs',\n 'btn-sm': size() === 'sm',\n 'btn-md': size() === 'md',\n 'btn-lg': size() === 'lg',\n 'btn-icon-only': iconOnly(),\n 'btn-full-width': fullWidth()\n }\"\n (click)=\"handleClick()\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n>\n @if (loading()) {\n <span class=\"loading-spinner\"></span>\n }\n @if (!loading()) {\n <ng-content select=\"[slot='icon-before']\" />\n }\n <ng-content></ng-content>\n @if (!loading()) {\n <ng-content select=\"[slot='icon-after']\" />\n }\n</button>\n", styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--spacing-2);cursor:pointer;transition:all var(--animation-duration-base) var(--animation-timing-ease);white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn-primary{background-color:var(--color-primary-600);color:var(--color-neutral-white)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-700)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-800)}.dark .btn-primary{background-color:#144f5b}.dark .btn-primary:hover:not(:disabled){background-color:#1a6a79}.dark .btn-primary:active:not(:disabled){background-color:#0d353d}.btn-secondary{background-color:var(--color-secondary-600);color:var(--color-neutral-white)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-700)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-800)}.dark .btn-secondary{background-color:#435b69}.dark .btn-secondary:hover:not(:disabled){background-color:#5a798c}.dark .btn-secondary:active:not(:disabled){background-color:#2d3c46}.btn-outline{background-color:transparent;border-color:var(--color-neutral-300);color:var(--color-neutral-900)}.btn-outline:hover:not(:disabled){background-color:var(--color-neutral-50);border-color:var(--color-neutral-400)}.btn-outline:active:not(:disabled){background-color:var(--color-neutral-100)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-neutral-700))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-neutral-100));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-neutral-900)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-neutral-200))}.btn-link{background-color:transparent;color:var(--color-primary-600);padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--color-primary-700);text-decoration:underline}.btn-link:active:not(:disabled){color:var(--color-primary-800)}.btn-danger{background-color:var(--color-error-600);color:var(--color-neutral-white)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-700)}.btn-danger:active:not(:disabled){background-color:var(--color-error-800)}.dark .btn-danger{background-color:#6b0909}.dark .btn-danger:hover:not(:disabled){background-color:#9d0e0e}.dark .btn-danger:active:not(:disabled){background-color:#6b0909;filter:brightness(.85)}.btn-warning{background-color:#e1a040;color:var(--color-neutral-white)}.btn-warning:hover:not(:disabled){background-color:#9b6b2b}.btn-warning:active:not(:disabled){background-color:#9b6b2b;filter:brightness(.85)}.dark .btn-warning{background-color:#e1a040}.dark .btn-warning:hover:not(:disabled){background-color:#f1d3a7}.dark .btn-warning:active:not(:disabled){background-color:#e1a040;filter:brightness(.85)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.dark .btn-info{background-color:#3b6588}.dark .btn-info:hover:not(:disabled){background-color:#b8cee0}.dark .btn-info:active:not(:disabled){background-color:#3b6588;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
712
757
  }
713
758
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
714
759
  type: Component,
715
- args: [{ selector: 'lc-button', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #buttonElement\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-disabled]=\"isDisabled ? 'true' : 'false'\"\n [attr.aria-busy]=\"loading ? 'true' : 'false'\"\n [ngClass]=\"{\n 'btn': true,\n 'btn-primary': variant === 'primary',\n 'btn-secondary': variant === 'secondary',\n 'btn-outline': variant === 'outline',\n 'btn-ghost': variant === 'ghost',\n 'btn-link': variant === 'link',\n 'btn-danger': variant === 'danger',\n 'btn-warning': variant === 'warning',\n 'btn-info': variant === 'info',\n 'btn-xs': size === 'xs',\n 'btn-sm': size === 'sm',\n 'btn-md': size === 'md',\n 'btn-lg': size === 'lg',\n 'btn-icon-only': iconOnly,\n 'btn-full-width': fullWidth\n }\"\n (click)=\"handleClick()\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n>\n @if (loading) {\n <span class=\"loading-spinner\"></span>\n }\n @if (!loading) {\n <ng-content select=\"[slot='icon-before']\" />\n }\n <ng-content></ng-content>\n @if (!loading) {\n <ng-content select=\"[slot='icon-after']\" />\n }\n</button>\n", styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--spacing-2);cursor:pointer;transition:all var(--animation-duration-base) var(--animation-timing-ease);white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn-primary{background-color:var(--color-primary-600);color:var(--color-neutral-white)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-700)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-800)}.dark .btn-primary{background-color:#144f5b}.dark .btn-primary:hover:not(:disabled){background-color:#1a6a79}.dark .btn-primary:active:not(:disabled){background-color:#0d353d}.btn-secondary{background-color:var(--color-secondary-600);color:var(--color-neutral-white)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-700)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-800)}.dark .btn-secondary{background-color:#435b69}.dark .btn-secondary:hover:not(:disabled){background-color:#5a798c}.dark .btn-secondary:active:not(:disabled){background-color:#2d3c46}.btn-outline{background-color:transparent;border-color:var(--color-neutral-300);color:var(--color-neutral-900)}.btn-outline:hover:not(:disabled){background-color:var(--color-neutral-50);border-color:var(--color-neutral-400)}.btn-outline:active:not(:disabled){background-color:var(--color-neutral-100)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-neutral-700))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-neutral-100));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-neutral-900)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-neutral-200))}.btn-link{background-color:transparent;color:var(--color-primary-600);padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--color-primary-700);text-decoration:underline}.btn-link:active:not(:disabled){color:var(--color-primary-800)}.btn-danger{background-color:var(--color-error-600);color:var(--color-neutral-white)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-700)}.btn-danger:active:not(:disabled){background-color:var(--color-error-800)}.dark .btn-danger{background-color:#6b0909}.dark .btn-danger:hover:not(:disabled){background-color:#9d0e0e}.dark .btn-danger:active:not(:disabled){background-color:#6b0909;filter:brightness(.85)}.btn-warning{background-color:#e1a040;color:var(--color-neutral-white)}.btn-warning:hover:not(:disabled){background-color:#9b6b2b}.btn-warning:active:not(:disabled){background-color:#9b6b2b;filter:brightness(.85)}.dark .btn-warning{background-color:#e1a040}.dark .btn-warning:hover:not(:disabled){background-color:#f1d3a7}.dark .btn-warning:active:not(:disabled){background-color:#e1a040;filter:brightness(.85)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.dark .btn-info{background-color:#3b6588}.dark .btn-info:hover:not(:disabled){background-color:#b8cee0}.dark .btn-info:active:not(:disabled){background-color:#3b6588;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"] }]
716
- }], propDecorators: { variant: [{
717
- type: Input
718
- }], size: [{
719
- type: Input
720
- }], disabled: [{
721
- type: Input
722
- }], loading: [{
723
- type: Input
724
- }], isLoading: [{
725
- type: Input
726
- }], iconOnly: [{
727
- type: Input
728
- }], fullWidth: [{
729
- type: Input
730
- }], ariaLabel: [{
731
- type: Input
732
- }], type: [{
733
- type: Input
734
- }], clicked: [{
735
- type: Output
736
- }], focused: [{
737
- type: Output
738
- }], blurred: [{
739
- type: Output
740
- }], buttonElement: [{
760
+ args: [{ selector: 'lc-button', standalone: true, imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #buttonElement\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n [ngClass]=\"{\n 'btn': true,\n 'btn-primary': variant() === 'primary',\n 'btn-secondary': variant() === 'secondary',\n 'btn-outline': variant() === 'outline',\n 'btn-ghost': variant() === 'ghost',\n 'btn-link': variant() === 'link',\n 'btn-danger': variant() === 'danger',\n 'btn-warning': variant() === 'warning',\n 'btn-info': variant() === 'info',\n 'btn-xs': size() === 'xs',\n 'btn-sm': size() === 'sm',\n 'btn-md': size() === 'md',\n 'btn-lg': size() === 'lg',\n 'btn-icon-only': iconOnly(),\n 'btn-full-width': fullWidth()\n }\"\n (click)=\"handleClick()\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n>\n @if (loading()) {\n <span class=\"loading-spinner\"></span>\n }\n @if (!loading()) {\n <ng-content select=\"[slot='icon-before']\" />\n }\n <ng-content></ng-content>\n @if (!loading()) {\n <ng-content select=\"[slot='icon-after']\" />\n }\n</button>\n", styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--spacing-2);cursor:pointer;transition:all var(--animation-duration-base) var(--animation-timing-ease);white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn-primary{background-color:var(--color-primary-600);color:var(--color-neutral-white)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-700)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-800)}.dark .btn-primary{background-color:#144f5b}.dark .btn-primary:hover:not(:disabled){background-color:#1a6a79}.dark .btn-primary:active:not(:disabled){background-color:#0d353d}.btn-secondary{background-color:var(--color-secondary-600);color:var(--color-neutral-white)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-700)}.btn-secondary:active:not(:disabled){background-color:var(--color-secondary-800)}.dark .btn-secondary{background-color:#435b69}.dark .btn-secondary:hover:not(:disabled){background-color:#5a798c}.dark .btn-secondary:active:not(:disabled){background-color:#2d3c46}.btn-outline{background-color:transparent;border-color:var(--color-neutral-300);color:var(--color-neutral-900)}.btn-outline:hover:not(:disabled){background-color:var(--color-neutral-50);border-color:var(--color-neutral-400)}.btn-outline:active:not(:disabled){background-color:var(--color-neutral-100)}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-neutral-700))}.btn-ghost:hover:not(:disabled){background-color:var(--lc-button-ghost-hover-bg, var(--color-neutral-100));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-neutral-900)))}.btn-ghost:active:not(:disabled){background-color:var(--lc-button-ghost-active-bg, var(--color-neutral-200))}.btn-link{background-color:transparent;color:var(--color-primary-600);padding:0;border:none}.btn-link:hover:not(:disabled){color:var(--color-primary-700);text-decoration:underline}.btn-link:active:not(:disabled){color:var(--color-primary-800)}.btn-danger{background-color:var(--color-error-600);color:var(--color-neutral-white)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-700)}.btn-danger:active:not(:disabled){background-color:var(--color-error-800)}.dark .btn-danger{background-color:#6b0909}.dark .btn-danger:hover:not(:disabled){background-color:#9d0e0e}.dark .btn-danger:active:not(:disabled){background-color:#6b0909;filter:brightness(.85)}.btn-warning{background-color:#e1a040;color:var(--color-neutral-white)}.btn-warning:hover:not(:disabled){background-color:#9b6b2b}.btn-warning:active:not(:disabled){background-color:#9b6b2b;filter:brightness(.85)}.dark .btn-warning{background-color:#e1a040}.dark .btn-warning:hover:not(:disabled){background-color:#f1d3a7}.dark .btn-warning:active:not(:disabled){background-color:#e1a040;filter:brightness(.85)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#27445c}.btn-info:active:not(:disabled){background-color:#27445c;filter:brightness(.85)}.dark .btn-info{background-color:#3b6588}.dark .btn-info:hover:not(:disabled){background-color:#b8cee0}.dark .btn-info:active:not(:disabled){background-color:#3b6588;filter:brightness(.85)}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"] }]
761
+ }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], buttonElement: [{
741
762
  type: ViewChild,
742
763
  args: ['buttonElement']
743
764
  }] } });
@@ -968,11 +989,11 @@ class CheckboxComponent {
968
989
  useExisting: forwardRef(() => CheckboxComponent),
969
990
  multi: true,
970
991
  },
971
- ], ngImport: i0, template: "<label [attr.for]=\"id()\" [class]=\"labelClasses()\">\n <input\n type=\"checkbox\"\n [id]=\"id()\"\n [checked]=\"computedChecked()\"\n [disabled]=\"computedDisabled()\"\n [indeterminate]=\"computedIndeterminate()\"\n [required]=\"required()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-disabled]=\"computedDisabled() ? 'true' : null\"\n [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n role=\"checkbox\"\n class=\"checkbox-input\"\n (change)=\"handleChange($event)\"\n (blur)=\"handleBlur()\"\n />\n <span class=\"checkbox-box\">\n <svg\n class=\"checkbox-icon\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <!-- Checkmark icon -->\n @if (computedChecked() && !computedIndeterminate()) {\n <path\n d=\"M13.5 4L6 11.5L2.5 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n }\n <!-- Indeterminate icon -->\n @if (computedIndeterminate()) {\n <path\n d=\"M4 8H12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n }\n </svg>\n </span>\n @if (label()) {\n <span class=\"checkbox-label-text\">{{ label() }}</span>\n }\n</label>\n\n@if (helpText() && !error()) {\n <div class=\"checkbox-help-text\">{{ helpText() }}</div>\n}\n\n@if (error() && errorMessage()) {\n <div class=\"checkbox-error-message\">{{ errorMessage() }}</div>\n}\n", styles: [":host{display:block}.checkbox-label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;font-family:var(--font-family-sans);color:var(--color-text-primary);transition:opacity .15s ease-in-out}.checkbox-label:hover:not(.checkbox-disabled):not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-box{border-color:var(--color-primary-600);background-color:var(--color-primary-400)}.checkbox-label.checkbox-disabled{cursor:not-allowed;opacity:.5}.checkbox-label.checkbox-disabled .checkbox-box{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.checkbox-label.checkbox-error .checkbox-box{border-color:var(--color-error)}.checkbox-input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.checkbox-input:focus+.checkbox-box{outline:2px solid var(--color-primary-500);outline-offset:2px}.checkbox-input:focus-visible+.checkbox-box{outline:2px solid var(--color-primary-500);outline-offset:2px}.checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--color-neutral-400);border-radius:var(--border-radius-sm);background-color:var(--color-background-primary);transition:all .15s ease-in-out;box-sizing:border-box}.checkbox-checked .checkbox-box,.checkbox-indeterminate .checkbox-box{background-color:var(--color-primary-500);border-color:var(--color-primary-500)}.checkbox-error .checkbox-box{border-color:var(--color-error)}.checkbox-disabled .checkbox-box{cursor:not-allowed}.checkbox-icon{width:100%;height:100%;color:#fff;opacity:0;transform:scale(.8);transition:all .15s ease-in-out}.checkbox-checked .checkbox-icon,.checkbox-indeterminate .checkbox-icon{opacity:1;transform:scale(1)}.checkbox-label-text{line-height:1.5;margin-top:.125rem}.checkbox-help-text{font-size:.875rem;line-height:1.25rem;color:var(--color-text-secondary);margin-top:.25rem;margin-left:calc(var(--checkbox-size) + .5rem)}.checkbox-error-message{font-size:.875rem;line-height:1.25rem;color:var(--color-error);margin-top:.25rem;margin-left:calc(var(--checkbox-size) + .5rem)}.checkbox-xs{--checkbox-size: 1rem;font-size:.875rem}.checkbox-xs .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-sm{--checkbox-size: 1.125rem;font-size:.875rem}.checkbox-sm .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-md{--checkbox-size: 1.25rem;font-size:1rem}.checkbox-md .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-lg{--checkbox-size: 1.5rem;font-size:1.125rem}.checkbox-lg .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-required .checkbox-label-text:after{content:\" *\";color:var(--color-error)}@media(prefers-reduced-motion:no-preference){.checkbox-box,.checkbox-icon{transition:all 10ms ease-in-out}}@media(prefers-reduced-motion:reduce){.checkbox-box,.checkbox-icon{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
992
+ ], ngImport: i0, template: "<label [attr.for]=\"id()\" [class]=\"labelClasses()\">\n <input\n type=\"checkbox\"\n [id]=\"id()\"\n [checked]=\"computedChecked()\"\n [disabled]=\"computedDisabled()\"\n [indeterminate]=\"computedIndeterminate()\"\n [required]=\"required()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-disabled]=\"computedDisabled() ? 'true' : null\"\n [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n role=\"checkbox\"\n class=\"checkbox-input\"\n (change)=\"handleChange($event)\"\n (blur)=\"handleBlur()\"\n />\n <span class=\"checkbox-box\">\n <svg\n class=\"checkbox-icon\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <!-- Checkmark icon -->\n @if (computedChecked() && !computedIndeterminate()) {\n <path\n d=\"M13.5 4L6 11.5L2.5 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n }\n <!-- Indeterminate icon -->\n @if (computedIndeterminate()) {\n <path\n d=\"M4 8H12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n }\n </svg>\n </span>\n @if (label()) {\n <span class=\"checkbox-label-text\">{{ label() }}</span>\n }\n</label>\n\n@if (helpText() && !error()) {\n <div class=\"checkbox-help-text\">{{ helpText() }}</div>\n}\n\n@if (error() && errorMessage()) {\n <div class=\"checkbox-error-message\">{{ errorMessage() }}</div>\n}\n", styles: [":host{display:block}.checkbox-label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;font-family:var(--font-family-sans);color:var(--color-text-primary);transition:opacity .15s ease-in-out}.checkbox-label:hover:not(.checkbox-disabled):not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-box{border-color:var(--color-primary-600);background-color:var(--color-primary-400)}.checkbox-label.checkbox-disabled{cursor:not-allowed;opacity:.5}.checkbox-label.checkbox-disabled .checkbox-box{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.checkbox-label.checkbox-error .checkbox-box{border-color:var(--color-error)}.checkbox-input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.checkbox-input:focus+.checkbox-box{outline:2px solid var(--color-primary-500);outline-offset:2px}.checkbox-input:focus-visible+.checkbox-box{outline:2px solid var(--color-primary-500);outline-offset:2px}.checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--color-neutral-400);border-radius:var(--border-radius-sm);background-color:var(--color-background-primary);transition:all .15s ease-in-out;box-sizing:border-box}.checkbox-checked .checkbox-box,.checkbox-indeterminate .checkbox-box{background-color:var(--color-primary-500);border-color:var(--color-primary-500)}.checkbox-error .checkbox-box{border-color:var(--color-error)}.checkbox-disabled .checkbox-box{cursor:not-allowed}.checkbox-icon{width:100%;height:100%;color:#fff;opacity:0;transform:scale(.8);transition:all .15s ease-in-out}.checkbox-checked .checkbox-icon,.checkbox-indeterminate .checkbox-icon{opacity:1;transform:scale(1)}.checkbox-label-text{line-height:1.5;margin-top:.125rem}.checkbox-help-text{font-size:.875rem;line-height:1.25rem;color:var(--color-text-secondary);margin-top:.25rem;margin-left:calc(var(--checkbox-size) + .5rem)}.checkbox-error-message{font-size:.875rem;line-height:1.25rem;color:var(--color-error);margin-top:.25rem;margin-left:calc(var(--checkbox-size) + .5rem)}.checkbox-xs{--checkbox-size: 1rem;font-size:.875rem}.checkbox-xs .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-sm{--checkbox-size: 1.125rem;font-size:.875rem}.checkbox-sm .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-md{--checkbox-size: 1.25rem;font-size:1rem}.checkbox-md .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-lg{--checkbox-size: 1.5rem;font-size:1.125rem}.checkbox-lg .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-required .checkbox-label-text:after{content:\" *\";color:var(--color-error)}@media(prefers-reduced-motion:no-preference){.checkbox-box,.checkbox-icon{transition:all 10ms ease-in-out}}@media(prefers-reduced-motion:reduce){.checkbox-box,.checkbox-icon{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
972
993
  }
973
994
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CheckboxComponent, decorators: [{
974
995
  type: Component,
975
- args: [{ selector: 'lc-checkbox', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
996
+ args: [{ selector: 'lc-checkbox', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
976
997
  {
977
998
  provide: NG_VALUE_ACCESSOR,
978
999
  useExisting: forwardRef(() => CheckboxComponent),
@@ -1002,7 +1023,7 @@ class LogoComponent {
1002
1023
  * - 'full': Full logo with text
1003
1024
  * - 'emblem': Just the emblem/icon
1004
1025
  */
1005
- variant = 'full';
1026
+ variant = input('full', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
1006
1027
  /**
1007
1028
  * Size of the logo
1008
1029
  * - 'xs': 24px height
@@ -1011,57 +1032,47 @@ class LogoComponent {
1011
1032
  * - 'lg': 64px height
1012
1033
  * - 'xl': 96px height
1013
1034
  */
1014
- size = 'md';
1035
+ size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
1015
1036
  /**
1016
1037
  * Alt text for accessibility
1017
1038
  */
1018
- alt = 'Life-Cockpit';
1039
+ alt = input('Life-Cockpit', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
1019
1040
  /**
1020
1041
  * Makes the logo appear clickable
1021
1042
  */
1022
- clickable = false;
1043
+ clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
1023
1044
  /**
1024
1045
  * Color mode for different backgrounds
1025
1046
  * - 'auto': Follows global theme (uses CSS filter in dark mode)
1026
1047
  * - 'light': Optimized for light backgrounds (default appearance)
1027
1048
  * - 'dark': Inverted for dark backgrounds (white/light logo)
1028
1049
  */
1029
- colorMode = 'auto';
1030
- get logoSrc() {
1031
- return this.variant === 'emblem'
1050
+ colorMode = input('auto', ...(ngDevMode ? [{ debugName: "colorMode" }] : /* istanbul ignore next */ []));
1051
+ logoSrc = computed(() => {
1052
+ return this.variant() === 'emblem'
1032
1053
  ? '/assets/life-cockpit-emblem.svg'
1033
1054
  : '/assets/life-cockpit-logo.svg';
1034
- }
1035
- get logoClasses() {
1036
- const classes = [`size-${this.size}`];
1037
- if (this.clickable) {
1055
+ }, ...(ngDevMode ? [{ debugName: "logoSrc" }] : /* istanbul ignore next */ []));
1056
+ logoClasses = computed(() => {
1057
+ const classes = [`size-${this.size()}`];
1058
+ if (this.clickable()) {
1038
1059
  classes.push('clickable');
1039
1060
  }
1040
- if (this.colorMode === 'dark') {
1061
+ if (this.colorMode() === 'dark') {
1041
1062
  classes.push('lc-logo--dark');
1042
1063
  }
1043
- else if (this.colorMode === 'auto') {
1064
+ else if (this.colorMode() === 'auto') {
1044
1065
  classes.push('lc-logo--auto');
1045
1066
  }
1046
1067
  return classes.join(' ');
1047
- }
1068
+ }, ...(ngDevMode ? [{ debugName: "logoClasses" }] : /* istanbul ignore next */ []));
1048
1069
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1049
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: LogoComponent, isStandalone: true, selector: "lc-logo", inputs: { variant: "variant", size: "size", alt: "alt", clickable: "clickable", colorMode: "colorMode" }, ngImport: i0, template: "<img \n [src]=\"logoSrc\" \n [alt]=\"alt\"\n [class]=\"logoClasses\"\n class=\"lc-logo\"\n/>\n", styles: [".lc-logo{display:block;transition:filter .2s ease}.lc-logo.size-xs{height:24px;width:auto}.lc-logo.size-sm{height:32px;width:auto}.lc-logo.size-md{height:48px;width:auto}.lc-logo.size-lg{height:64px;width:auto}.lc-logo.size-xl{height:96px;width:auto}.lc-logo.clickable{cursor:pointer;transition:opacity .2s ease,filter .2s ease}.lc-logo.clickable:hover{opacity:.8}.lc-logo.lc-logo--dark{filter:invert(1) hue-rotate(180deg)}html.dark .lc-logo.lc-logo--auto,:root.dark .lc-logo.lc-logo--auto,.dark .lc-logo.lc-logo--auto,[data-theme=dark] .lc-logo.lc-logo--auto{filter:invert(1) hue-rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1070
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: LogoComponent, isStandalone: true, selector: "lc-logo", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, colorMode: { classPropertyName: "colorMode", publicName: "colorMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<img \n [src]=\"logoSrc()\" \n [alt]=\"alt()\"\n [class]=\"logoClasses()\"\n class=\"lc-logo\"\n/>\n", styles: [".lc-logo{display:block;transition:filter .2s ease}.lc-logo.size-xs{height:24px;width:auto}.lc-logo.size-sm{height:32px;width:auto}.lc-logo.size-md{height:48px;width:auto}.lc-logo.size-lg{height:64px;width:auto}.lc-logo.size-xl{height:96px;width:auto}.lc-logo.clickable{cursor:pointer;transition:opacity .2s ease,filter .2s ease}.lc-logo.clickable:hover{opacity:.8}.lc-logo.lc-logo--dark{filter:invert(1) hue-rotate(180deg)}html.dark .lc-logo.lc-logo--auto,:root.dark .lc-logo.lc-logo--auto,.dark .lc-logo.lc-logo--auto,[data-theme=dark] .lc-logo.lc-logo--auto{filter:invert(1) hue-rotate(180deg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1050
1071
  }
1051
1072
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LogoComponent, decorators: [{
1052
1073
  type: Component,
1053
- args: [{ selector: 'lc-logo', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<img \n [src]=\"logoSrc\" \n [alt]=\"alt\"\n [class]=\"logoClasses\"\n class=\"lc-logo\"\n/>\n", styles: [".lc-logo{display:block;transition:filter .2s ease}.lc-logo.size-xs{height:24px;width:auto}.lc-logo.size-sm{height:32px;width:auto}.lc-logo.size-md{height:48px;width:auto}.lc-logo.size-lg{height:64px;width:auto}.lc-logo.size-xl{height:96px;width:auto}.lc-logo.clickable{cursor:pointer;transition:opacity .2s ease,filter .2s ease}.lc-logo.clickable:hover{opacity:.8}.lc-logo.lc-logo--dark{filter:invert(1) hue-rotate(180deg)}html.dark .lc-logo.lc-logo--auto,:root.dark .lc-logo.lc-logo--auto,.dark .lc-logo.lc-logo--auto,[data-theme=dark] .lc-logo.lc-logo--auto{filter:invert(1) hue-rotate(180deg)}\n"] }]
1054
- }], propDecorators: { variant: [{
1055
- type: Input
1056
- }], size: [{
1057
- type: Input
1058
- }], alt: [{
1059
- type: Input
1060
- }], clickable: [{
1061
- type: Input
1062
- }], colorMode: [{
1063
- type: Input
1064
- }] } });
1074
+ args: [{ selector: 'lc-logo', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<img \n [src]=\"logoSrc()\" \n [alt]=\"alt()\"\n [class]=\"logoClasses()\"\n class=\"lc-logo\"\n/>\n", styles: [".lc-logo{display:block;transition:filter .2s ease}.lc-logo.size-xs{height:24px;width:auto}.lc-logo.size-sm{height:32px;width:auto}.lc-logo.size-md{height:48px;width:auto}.lc-logo.size-lg{height:64px;width:auto}.lc-logo.size-xl{height:96px;width:auto}.lc-logo.clickable{cursor:pointer;transition:opacity .2s ease,filter .2s ease}.lc-logo.clickable:hover{opacity:.8}.lc-logo.lc-logo--dark{filter:invert(1) hue-rotate(180deg)}html.dark .lc-logo.lc-logo--auto,:root.dark .lc-logo.lc-logo--auto,.dark .lc-logo.lc-logo--auto,[data-theme=dark] .lc-logo.lc-logo--auto{filter:invert(1) hue-rotate(180deg)}\n"] }]
1075
+ }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], colorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMode", required: false }] }] } });
1065
1076
 
1066
1077
  /**
1067
1078
  * Menu Component - Dropdown menu for navigation and actions
@@ -1090,37 +1101,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
1090
1101
  * ```
1091
1102
  */
1092
1103
  class MenuComponent {
1093
- /**
1094
- * Menu items to display
1095
- */
1096
- items = [];
1097
- /**
1098
- * Whether the menu is open
1099
- */
1100
- isOpen = false;
1101
- /**
1102
- * Menu position relative to trigger
1103
- * @default 'bottom-right'
1104
- */
1105
- position = 'bottom-right';
1106
- /**
1107
- * Size of menu items
1108
- * @default 'md'
1109
- */
1110
- size = 'md';
1111
- /**
1112
- * Minimum width of menu dropdown
1113
- * @default '220px'
1114
- */
1115
- minWidth = '220px';
1116
- /**
1117
- * Emitted when a menu item is clicked
1118
- */
1119
- itemClick = new EventEmitter();
1120
- /**
1121
- * Emitted when the menu should be closed (e.g., click outside, Escape key)
1122
- */
1123
- closed = new EventEmitter();
1104
+ items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
1105
+ isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
1106
+ position = input('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
1107
+ size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
1108
+ minWidth = input('220px', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
1109
+ itemClick = output();
1110
+ closed = output();
1124
1111
  elementRef = inject((ElementRef));
1125
1112
  /**
1126
1113
  * Handle menu item click
@@ -1150,7 +1137,7 @@ class MenuComponent {
1150
1137
  * Handle click outside to close menu
1151
1138
  */
1152
1139
  onDocumentClick(event) {
1153
- if (!this.isOpen) {
1140
+ if (!this.isOpen()) {
1154
1141
  return;
1155
1142
  }
1156
1143
  const target = event.target;
@@ -1166,31 +1153,17 @@ class MenuComponent {
1166
1153
  * Handle Escape key to close menu
1167
1154
  */
1168
1155
  onEscapeKey() {
1169
- if (this.isOpen) {
1156
+ if (this.isOpen()) {
1170
1157
  this.close();
1171
1158
  }
1172
1159
  }
1173
1160
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1174
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: MenuComponent, isStandalone: true, selector: "lc-menu", inputs: { items: "items", isOpen: "isOpen", position: "position", size: "size", minWidth: "minWidth" }, 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, .5rem) 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(--spacing-3) 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(--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(--spacing-2);padding:var(--spacing-2) 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(--spacing-4);padding: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: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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, .5rem) 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(--spacing-3) 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(--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(--spacing-2);padding:var(--spacing-2) 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(--spacing-4);padding: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 });
1175
1162
  }
1176
1163
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MenuComponent, decorators: [{
1177
1164
  type: Component,
1178
- args: [{ selector: 'lc-menu', standalone: true, imports: [CommonModule, 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, .5rem) 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(--spacing-3) 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(--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(--spacing-2);padding:var(--spacing-2) 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(--spacing-4);padding: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"] }]
1179
- }], propDecorators: { items: [{
1180
- type: Input
1181
- }], isOpen: [{
1182
- type: Input
1183
- }], position: [{
1184
- type: Input
1185
- }], size: [{
1186
- type: Input
1187
- }], minWidth: [{
1188
- type: Input
1189
- }], itemClick: [{
1190
- type: Output
1191
- }], closed: [{
1192
- type: Output
1193
- }], onDocumentClick: [{
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, .5rem) 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(--spacing-3) 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(--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(--spacing-2);padding:var(--spacing-2) 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(--spacing-4);padding: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
+ }], 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: [{
1194
1167
  type: HostListener,
1195
1168
  args: ['document:click', ['$event']]
1196
1169
  }], onEscapeKey: [{
@@ -1400,11 +1373,11 @@ class InputComponent {
1400
1373
  useExisting: forwardRef(() => InputComponent),
1401
1374
  multi: true,
1402
1375
  },
1403
- ], 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: "ngmodule", type: CommonModule }, { 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(--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 });
1404
1377
  }
1405
1378
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: InputComponent, decorators: [{
1406
1379
  type: Component,
1407
- args: [{ selector: 'lc-input', imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1380
+ args: [{ selector: 'lc-input', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1408
1381
  {
1409
1382
  provide: NG_VALUE_ACCESSOR,
1410
1383
  useExisting: forwardRef(() => InputComponent),
@@ -1538,11 +1511,11 @@ class RadioComponent {
1538
1511
  this.onTouched();
1539
1512
  }
1540
1513
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1541
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadioComponent, isStandalone: true, selector: "lc-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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: { checkedChange: "checkedChange", valueChange: "valueChange" }, ngImport: i0, template: "<label [attr.for]=\"id()\" [class]=\"labelClasses()\">\n <input\n type=\"radio\"\n [id]=\"id()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"computedChecked()\"\n [disabled]=\"computedDisabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-disabled]=\"computedDisabled() ? 'true' : null\"\n [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n role=\"radio\"\n class=\"radio-input\"\n (change)=\"handleChange($event)\"\n (blur)=\"handleBlur()\"\n />\n <span class=\"radio-circle\">\n <span class=\"radio-dot\"></span>\n </span>\n @if (label()) {\n <span class=\"radio-label-text\">{{ label() }}</span>\n }\n</label>\n\n@if (helpText() && !error()) {\n <div class=\"radio-help-text\">{{ helpText() }}</div>\n}\n\n@if (error() && errorMessage()) {\n <div class=\"radio-error-message\">{{ errorMessage() }}</div>\n}\n", styles: [":host{display:block}.radio-label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;font-family:var(--font-family-sans);color:var(--color-text-primary);transition:opacity .15s ease-in-out}.radio-label:hover:not(.radio-disabled) .radio-circle{border-color:var(--color-primary-600);background-color:var(--color-primary-400)}.radio-label.radio-disabled{cursor:not-allowed;opacity:.5}.radio-label.radio-disabled .radio-circle{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.radio-label.radio-error .radio-circle{border-color:var(--color-error)}.radio-input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.radio-input:focus+.radio-circle{outline:2px solid var(--color-primary-500);outline-offset:2px}.radio-input:focus-visible+.radio-circle{outline:2px solid var(--color-primary-500);outline-offset:2px}.radio-circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--color-neutral-400);border-radius:50%;background-color:var(--color-background-primary);transition:all .15s ease-in-out;box-sizing:border-box}.radio-checked .radio-circle{background-color:var(--color-primary-500);border-color:var(--color-primary-500)}.radio-error .radio-circle{border-color:var(--color-error)}.radio-disabled .radio-circle{cursor:not-allowed}.radio-dot{width:50%;height:50%;border-radius:50%;background-color:#fff;opacity:0;transform:scale(0);transition:all .15s ease-in-out}.radio-checked .radio-dot{opacity:1;transform:scale(1)}.radio-label-text{line-height:1.5;margin-top:.125rem}.radio-help-text{font-size:.875rem;line-height:1.25rem;color:var(--color-text-secondary);margin-top:.25rem;margin-left:calc(var(--radio-size) + .5rem)}.radio-error-message{font-size:.875rem;line-height:1.25rem;color:var(--color-error);margin-top:.25rem;margin-left:calc(var(--radio-size) + .5rem)}.radio-xs{--radio-size: 1rem;font-size:.875rem}.radio-xs .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-sm{--radio-size: 1.125rem;font-size:.875rem}.radio-sm .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-md{--radio-size: 1.25rem;font-size:1rem;align-items:center}.radio-md .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-lg{--radio-size: 1.5rem;font-size:1.125rem}.radio-lg .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-required .radio-label-text:after{content:\" *\";color:var(--color-error)}@media(prefers-reduced-motion:no-preference){.radio-circle,.radio-dot{transition:all 10ms ease-in-out}}@media(prefers-reduced-motion:reduce){.radio-circle,.radio-dot{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1514
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadioComponent, isStandalone: true, selector: "lc-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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: { checkedChange: "checkedChange", valueChange: "valueChange" }, ngImport: i0, template: "<label [attr.for]=\"id()\" [class]=\"labelClasses()\">\n <input\n type=\"radio\"\n [id]=\"id()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"computedChecked()\"\n [disabled]=\"computedDisabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-disabled]=\"computedDisabled() ? 'true' : null\"\n [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n role=\"radio\"\n class=\"radio-input\"\n (change)=\"handleChange($event)\"\n (blur)=\"handleBlur()\"\n />\n <span class=\"radio-circle\">\n <span class=\"radio-dot\"></span>\n </span>\n @if (label()) {\n <span class=\"radio-label-text\">{{ label() }}</span>\n }\n</label>\n\n@if (helpText() && !error()) {\n <div class=\"radio-help-text\">{{ helpText() }}</div>\n}\n\n@if (error() && errorMessage()) {\n <div class=\"radio-error-message\">{{ errorMessage() }}</div>\n}\n", styles: [":host{display:block}.radio-label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;font-family:var(--font-family-sans);color:var(--color-text-primary);transition:opacity .15s ease-in-out}.radio-label:hover:not(.radio-disabled) .radio-circle{border-color:var(--color-primary-600);background-color:var(--color-primary-400)}.radio-label.radio-disabled{cursor:not-allowed;opacity:.5}.radio-label.radio-disabled .radio-circle{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.radio-label.radio-error .radio-circle{border-color:var(--color-error)}.radio-input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.radio-input:focus+.radio-circle{outline:2px solid var(--color-primary-500);outline-offset:2px}.radio-input:focus-visible+.radio-circle{outline:2px solid var(--color-primary-500);outline-offset:2px}.radio-circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--color-neutral-400);border-radius:50%;background-color:var(--color-background-primary);transition:all .15s ease-in-out;box-sizing:border-box}.radio-checked .radio-circle{background-color:var(--color-primary-500);border-color:var(--color-primary-500)}.radio-error .radio-circle{border-color:var(--color-error)}.radio-disabled .radio-circle{cursor:not-allowed}.radio-dot{width:50%;height:50%;border-radius:50%;background-color:#fff;opacity:0;transform:scale(0);transition:all .15s ease-in-out}.radio-checked .radio-dot{opacity:1;transform:scale(1)}.radio-label-text{line-height:1.5;margin-top:.125rem}.radio-help-text{font-size:.875rem;line-height:1.25rem;color:var(--color-text-secondary);margin-top:.25rem;margin-left:calc(var(--radio-size) + .5rem)}.radio-error-message{font-size:.875rem;line-height:1.25rem;color:var(--color-error);margin-top:.25rem;margin-left:calc(var(--radio-size) + .5rem)}.radio-xs{--radio-size: 1rem;font-size:.875rem}.radio-xs .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-sm{--radio-size: 1.125rem;font-size:.875rem}.radio-sm .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-md{--radio-size: 1.25rem;font-size:1rem;align-items:center}.radio-md .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-lg{--radio-size: 1.5rem;font-size:1.125rem}.radio-lg .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-required .radio-label-text:after{content:\" *\";color:var(--color-error)}@media(prefers-reduced-motion:no-preference){.radio-circle,.radio-dot{transition:all 10ms ease-in-out}}@media(prefers-reduced-motion:reduce){.radio-circle,.radio-dot{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1542
1515
  }
1543
1516
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadioComponent, decorators: [{
1544
1517
  type: Component,
1545
- args: [{ selector: 'lc-radio', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id()\" [class]=\"labelClasses()\">\n <input\n type=\"radio\"\n [id]=\"id()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"computedChecked()\"\n [disabled]=\"computedDisabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-disabled]=\"computedDisabled() ? 'true' : null\"\n [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n role=\"radio\"\n class=\"radio-input\"\n (change)=\"handleChange($event)\"\n (blur)=\"handleBlur()\"\n />\n <span class=\"radio-circle\">\n <span class=\"radio-dot\"></span>\n </span>\n @if (label()) {\n <span class=\"radio-label-text\">{{ label() }}</span>\n }\n</label>\n\n@if (helpText() && !error()) {\n <div class=\"radio-help-text\">{{ helpText() }}</div>\n}\n\n@if (error() && errorMessage()) {\n <div class=\"radio-error-message\">{{ errorMessage() }}</div>\n}\n", styles: [":host{display:block}.radio-label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;font-family:var(--font-family-sans);color:var(--color-text-primary);transition:opacity .15s ease-in-out}.radio-label:hover:not(.radio-disabled) .radio-circle{border-color:var(--color-primary-600);background-color:var(--color-primary-400)}.radio-label.radio-disabled{cursor:not-allowed;opacity:.5}.radio-label.radio-disabled .radio-circle{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.radio-label.radio-error .radio-circle{border-color:var(--color-error)}.radio-input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.radio-input:focus+.radio-circle{outline:2px solid var(--color-primary-500);outline-offset:2px}.radio-input:focus-visible+.radio-circle{outline:2px solid var(--color-primary-500);outline-offset:2px}.radio-circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--color-neutral-400);border-radius:50%;background-color:var(--color-background-primary);transition:all .15s ease-in-out;box-sizing:border-box}.radio-checked .radio-circle{background-color:var(--color-primary-500);border-color:var(--color-primary-500)}.radio-error .radio-circle{border-color:var(--color-error)}.radio-disabled .radio-circle{cursor:not-allowed}.radio-dot{width:50%;height:50%;border-radius:50%;background-color:#fff;opacity:0;transform:scale(0);transition:all .15s ease-in-out}.radio-checked .radio-dot{opacity:1;transform:scale(1)}.radio-label-text{line-height:1.5;margin-top:.125rem}.radio-help-text{font-size:.875rem;line-height:1.25rem;color:var(--color-text-secondary);margin-top:.25rem;margin-left:calc(var(--radio-size) + .5rem)}.radio-error-message{font-size:.875rem;line-height:1.25rem;color:var(--color-error);margin-top:.25rem;margin-left:calc(var(--radio-size) + .5rem)}.radio-xs{--radio-size: 1rem;font-size:.875rem}.radio-xs .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-sm{--radio-size: 1.125rem;font-size:.875rem}.radio-sm .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-md{--radio-size: 1.25rem;font-size:1rem;align-items:center}.radio-md .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-lg{--radio-size: 1.5rem;font-size:1.125rem}.radio-lg .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-required .radio-label-text:after{content:\" *\";color:var(--color-error)}@media(prefers-reduced-motion:no-preference){.radio-circle,.radio-dot{transition:all 10ms ease-in-out}}@media(prefers-reduced-motion:reduce){.radio-circle,.radio-dot{transition:none}}\n"] }]
1518
+ args: [{ selector: 'lc-radio', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id()\" [class]=\"labelClasses()\">\n <input\n type=\"radio\"\n [id]=\"id()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"computedChecked()\"\n [disabled]=\"computedDisabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-disabled]=\"computedDisabled() ? 'true' : null\"\n [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n role=\"radio\"\n class=\"radio-input\"\n (change)=\"handleChange($event)\"\n (blur)=\"handleBlur()\"\n />\n <span class=\"radio-circle\">\n <span class=\"radio-dot\"></span>\n </span>\n @if (label()) {\n <span class=\"radio-label-text\">{{ label() }}</span>\n }\n</label>\n\n@if (helpText() && !error()) {\n <div class=\"radio-help-text\">{{ helpText() }}</div>\n}\n\n@if (error() && errorMessage()) {\n <div class=\"radio-error-message\">{{ errorMessage() }}</div>\n}\n", styles: [":host{display:block}.radio-label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;font-family:var(--font-family-sans);color:var(--color-text-primary);transition:opacity .15s ease-in-out}.radio-label:hover:not(.radio-disabled) .radio-circle{border-color:var(--color-primary-600);background-color:var(--color-primary-400)}.radio-label.radio-disabled{cursor:not-allowed;opacity:.5}.radio-label.radio-disabled .radio-circle{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.radio-label.radio-error .radio-circle{border-color:var(--color-error)}.radio-input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.radio-input:focus+.radio-circle{outline:2px solid var(--color-primary-500);outline-offset:2px}.radio-input:focus-visible+.radio-circle{outline:2px solid var(--color-primary-500);outline-offset:2px}.radio-circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--color-neutral-400);border-radius:50%;background-color:var(--color-background-primary);transition:all .15s ease-in-out;box-sizing:border-box}.radio-checked .radio-circle{background-color:var(--color-primary-500);border-color:var(--color-primary-500)}.radio-error .radio-circle{border-color:var(--color-error)}.radio-disabled .radio-circle{cursor:not-allowed}.radio-dot{width:50%;height:50%;border-radius:50%;background-color:#fff;opacity:0;transform:scale(0);transition:all .15s ease-in-out}.radio-checked .radio-dot{opacity:1;transform:scale(1)}.radio-label-text{line-height:1.5;margin-top:.125rem}.radio-help-text{font-size:.875rem;line-height:1.25rem;color:var(--color-text-secondary);margin-top:.25rem;margin-left:calc(var(--radio-size) + .5rem)}.radio-error-message{font-size:.875rem;line-height:1.25rem;color:var(--color-error);margin-top:.25rem;margin-left:calc(var(--radio-size) + .5rem)}.radio-xs{--radio-size: 1rem;font-size:.875rem}.radio-xs .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-sm{--radio-size: 1.125rem;font-size:.875rem}.radio-sm .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-md{--radio-size: 1.25rem;font-size:1rem;align-items:center}.radio-md .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-lg{--radio-size: 1.5rem;font-size:1.125rem}.radio-lg .radio-circle{width:var(--radio-size);height:var(--radio-size)}.radio-required .radio-label-text:after{content:\" *\";color:var(--color-error)}@media(prefers-reduced-motion:no-preference){.radio-circle,.radio-dot{transition:all 10ms ease-in-out}}@media(prefers-reduced-motion:reduce){.radio-circle,.radio-dot{transition:none}}\n"] }]
1546
1519
  }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
1547
1520
 
1548
1521
  /**
@@ -2157,6 +2130,9 @@ class DatepickerComponent {
2157
2130
  const day = parseInt(value.substring(dayIndex, dayIndex + 2));
2158
2131
  return new Date(year, month, day);
2159
2132
  }
2133
+ getInputValue(event) {
2134
+ return event.target.value;
2135
+ }
2160
2136
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2161
2137
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DatepickerComponent, isStandalone: true, selector: "lc-datepicker", inputs: { variant: "variant", size: "size", disabled: "disabled", error: "error", required: "required", readonly: "readonly", placeholder: "placeholder", helperText: "helperText", errorMessage: "errorMessage", ariaLabel: "ariaLabel", format: "format", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disableWeekends: "disableWeekends" }, outputs: { dateChange: "dateChange", opened: "opened", closed: "closed" }, providers: [
2162
2138
  {
@@ -2164,7 +2140,7 @@ class DatepickerComponent {
2164
2140
  useExisting: forwardRef(() => DatepickerComponent),
2165
2141
  multi: true,
2166
2142
  },
2167
- ], 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($any($event.target).value)\"\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$1.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(--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 });
2168
2144
  }
2169
2145
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DatepickerComponent, decorators: [{
2170
2146
  type: Component,
@@ -2174,7 +2150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
2174
2150
  useExisting: forwardRef(() => DatepickerComponent),
2175
2151
  multi: true,
2176
2152
  },
2177
- ], 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($any($event.target).value)\"\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(--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"] }]
2178
2154
  }], propDecorators: { datepickerInput: [{
2179
2155
  type: ViewChild,
2180
2156
  args: ['datepickerInput', { static: false, read: ElementRef }]
@@ -2570,7 +2546,7 @@ class SelectComponent {
2570
2546
  useExisting: forwardRef(() => SelectComponent),
2571
2547
  multi: true,
2572
2548
  },
2573
- ], 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.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(--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 });
2574
2550
  }
2575
2551
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SelectComponent, decorators: [{
2576
2552
  type: Component,
@@ -3001,6 +2977,9 @@ class TextareaComponent {
3001
2977
  const paddingBottom = parseFloat(getComputedStyle(textarea).paddingBottom);
3002
2978
  return lineHeight * this.maxRows + paddingTop + paddingBottom;
3003
2979
  }
2980
+ getInputValue(event) {
2981
+ return event.target.value;
2982
+ }
3004
2983
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3005
2984
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TextareaComponent, isStandalone: true, selector: "lc-textarea", inputs: { variant: "variant", size: "size", disabled: "disabled", error: "error", required: "required", readonly: "readonly", placeholder: "placeholder", label: "label", helperText: "helperText", errorMessage: "errorMessage", ariaLabel: "ariaLabel", rows: "rows", maxLength: "maxLength", showCharacterCount: "showCharacterCount", autoResize: "autoResize", minRows: "minRows", maxRows: "maxRows" }, outputs: { valueChange: "valueChange" }, providers: [
3006
2985
  {
@@ -3008,7 +2987,7 @@ class TextareaComponent {
3008
2987
  useExisting: forwardRef(() => TextareaComponent),
3009
2988
  multi: true,
3010
2989
  },
3011
- ], 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($any($event.target).value)\"\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(--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 });
3012
2991
  }
3013
2992
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TextareaComponent, decorators: [{
3014
2993
  type: Component,
@@ -3018,7 +2997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
3018
2997
  useExisting: forwardRef(() => TextareaComponent),
3019
2998
  multi: true,
3020
2999
  },
3021
- ], 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($any($event.target).value)\"\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(--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"] }]
3022
3001
  }], propDecorators: { textareaElement: [{
3023
3002
  type: ViewChild,
3024
3003
  args: ['textarea', { static: false, read: ElementRef }]
@@ -3169,11 +3148,11 @@ class AlertComponent {
3169
3148
  this.dismiss();
3170
3149
  }
3171
3150
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3172
- 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: "ngmodule", type: CommonModule }, { 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(--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 });
3173
3152
  }
3174
3153
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AlertComponent, decorators: [{
3175
3154
  type: Component,
3176
- args: [{ selector: 'lc-alert', standalone: true, imports: [CommonModule, IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
3155
+ args: [{ selector: 'lc-alert', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
3177
3156
  '[class]': 'hostClasses()',
3178
3157
  '[attr.role]': '"alert"',
3179
3158
  '[attr.aria-live]': 'ariaLive()',
@@ -4435,11 +4414,11 @@ class ContainerComponent {
4435
4414
  return classes.join(' ');
4436
4415
  }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
4437
4416
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4438
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: ContainerComponent, isStandalone: true, selector: "lc-container", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, noPadding: { classPropertyName: "noPadding", publicName: "noPadding", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4417
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: ContainerComponent, isStandalone: true, selector: "lc-container", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, noPadding: { classPropertyName: "noPadding", publicName: "noPadding", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4439
4418
  }
4440
4419
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ContainerComponent, decorators: [{
4441
4420
  type: Component,
4442
- args: [{ selector: 'lc-container', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
4421
+ args: [{ selector: 'lc-container', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
4443
4422
  }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], noPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPadding", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], hostClasses: [{
4444
4423
  type: HostBinding,
4445
4424
  args: ['class']
@@ -4503,11 +4482,11 @@ class SectionComponent {
4503
4482
  return classes.join(' ');
4504
4483
  }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
4505
4484
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4506
- 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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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 });
4507
4486
  }
4508
4487
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SectionComponent, decorators: [{
4509
4488
  type: Component,
4510
- args: [{ selector: 'lc-section', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
4489
+ args: [{ selector: 'lc-section', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
4511
4490
  }], 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: [{
4512
4491
  type: HostBinding,
4513
4492
  args: ['class']
@@ -4548,11 +4527,11 @@ class SpacerComponent {
4548
4527
  return classes.join(' ');
4549
4528
  }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
4550
4529
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4551
- 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:.25rem;height:.25rem}.spacer-sm{width:.5rem;height:.5rem}.spacer-md{width:1rem;height:1rem}.spacer-lg{width:1.5rem;height:1.5rem}.spacer-xl{width:2rem;height:2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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:.25rem;height:.25rem}.spacer-sm{width:.5rem;height:.5rem}.spacer-md{width:1rem;height:1rem}.spacer-lg{width:1.5rem;height:1.5rem}.spacer-xl{width:2rem;height:2rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4552
4531
  }
4553
4532
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SpacerComponent, decorators: [{
4554
4533
  type: Component,
4555
- args: [{ selector: 'lc-spacer', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n", styles: [".spacer-xs{width:.25rem;height:.25rem}.spacer-sm{width:.5rem;height:.5rem}.spacer-md{width:1rem;height:1rem}.spacer-lg{width:1.5rem;height:1.5rem}.spacer-xl{width:2rem;height:2rem}\n"] }]
4534
+ args: [{ selector: 'lc-spacer', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n", styles: [".spacer-xs{width:.25rem;height:.25rem}.spacer-sm{width:.5rem;height:.5rem}.spacer-md{width:1rem;height:1rem}.spacer-lg{width:1.5rem;height:1.5rem}.spacer-xl{width:2rem;height:2rem}\n"] }]
4556
4535
  }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hostClasses: [{
4557
4536
  type: HostBinding,
4558
4537
  args: ['class']
@@ -4642,11 +4621,11 @@ class StackComponent {
4642
4621
  return classes.join(' ');
4643
4622
  }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
4644
4623
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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 });
4646
4625
  }
4647
4626
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StackComponent, decorators: [{
4648
4627
  type: Component,
4649
- args: [{ selector: 'lc-stack', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
4628
+ args: [{ selector: 'lc-stack', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
4650
4629
  }], 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: [{
4651
4630
  type: HostBinding,
4652
4631
  args: ['class']
@@ -4816,11 +4795,11 @@ class ErrorDisplayComponent {
4816
4795
  }
4817
4796
  }
4818
4797
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ErrorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4819
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ErrorDisplayComponent, isStandalone: true, selector: "lc-error-display", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, autoDismiss: { classPropertyName: "autoDismiss", publicName: "autoDismiss", isSignal: true, isRequired: false, transformFunction: null }, autoDismissDelay: { classPropertyName: "autoDismissDelay", publicName: "autoDismissDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visible() && errorMessage()) {\n <lc-alert\n [variant]=\"alertVariant()\"\n [title]=\"errorTitle()\"\n [message]=\"errorMessage()\"\n [dismissible]=\"dismissible()\"\n [showIcon]=\"showIcon()\"\n (dismissed)=\"onDismissed()\"\n />\n}\n", styles: [":host{display:block;width:100%}:host{animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AlertComponent, selector: "lc-alert", inputs: ["variant", "title", "message", "icon", "showIcon", "dismissible", "ariaLabel"], outputs: ["dismissed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4798
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ErrorDisplayComponent, isStandalone: true, selector: "lc-error-display", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, autoDismiss: { classPropertyName: "autoDismiss", publicName: "autoDismiss", isSignal: true, isRequired: false, transformFunction: null }, autoDismissDelay: { classPropertyName: "autoDismissDelay", publicName: "autoDismissDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visible() && errorMessage()) {\n <lc-alert\n [variant]=\"alertVariant()\"\n [title]=\"errorTitle()\"\n [message]=\"errorMessage()\"\n [dismissible]=\"dismissible()\"\n [showIcon]=\"showIcon()\"\n (dismissed)=\"onDismissed()\"\n />\n}\n", styles: [":host{display:block;width:100%}:host{animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "lc-alert", inputs: ["variant", "title", "message", "icon", "showIcon", "dismissible", "ariaLabel"], outputs: ["dismissed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4820
4799
  }
4821
4800
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ErrorDisplayComponent, decorators: [{
4822
4801
  type: Component,
4823
- args: [{ selector: 'lc-error-display', imports: [CommonModule, AlertComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && errorMessage()) {\n <lc-alert\n [variant]=\"alertVariant()\"\n [title]=\"errorTitle()\"\n [message]=\"errorMessage()\"\n [dismissible]=\"dismissible()\"\n [showIcon]=\"showIcon()\"\n (dismissed)=\"onDismissed()\"\n />\n}\n", styles: [":host{display:block;width:100%}:host{animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"] }]
4802
+ args: [{ selector: 'lc-error-display', imports: [AlertComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && errorMessage()) {\n <lc-alert\n [variant]=\"alertVariant()\"\n [title]=\"errorTitle()\"\n [message]=\"errorMessage()\"\n [dismissible]=\"dismissible()\"\n [showIcon]=\"showIcon()\"\n (dismissed)=\"onDismissed()\"\n />\n}\n", styles: [":host{display:block;width:100%}:host{animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"] }]
4824
4803
  }], ctorParameters: () => [], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], autoDismiss: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoDismiss", required: false }] }], autoDismissDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoDismissDelay", required: false }] }] } });
4825
4804
 
4826
4805
  /**
@@ -5022,11 +5001,11 @@ class ToastComponent {
5022
5001
  }
5023
5002
  }
5024
5003
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5025
- 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: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
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 });
5026
5005
  }
5027
5006
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ToastComponent, decorators: [{
5028
5007
  type: Component,
5029
- args: [{ selector: 'lc-toast', standalone: true, imports: [CommonModule, IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
5008
+ args: [{ selector: 'lc-toast', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
5030
5009
  '[class]': 'hostClasses()',
5031
5010
  '[attr.role]': 'ariaRole()',
5032
5011
  '[attr.aria-live]': 'ariaLive()',
@@ -5229,11 +5208,11 @@ class ModalComponent {
5229
5208
  }
5230
5209
  }
5231
5210
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5232
- 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=\"cdk-overlay-backdrop 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}.cdk-overlay-backdrop,.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;padding:var(--spacing-4) 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(--spacing-6)}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;gap:var(--spacing-3);padding:var(--spacing-4) var(--spacing-6);border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__footer>*{margin-right:.75rem}.lc-modal__footer>*:last-child{margin-right:0}.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){.cdk-overlay-backdrop,.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: CommonModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$3.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 });
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=\"cdk-overlay-backdrop 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}.cdk-overlay-backdrop,.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;padding:var(--spacing-4) 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(--spacing-6)}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;gap:var(--spacing-3);padding:var(--spacing-4) var(--spacing-6);border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__footer>*{margin-right:.75rem}.lc-modal__footer>*:last-child{margin-right:0}.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){.cdk-overlay-backdrop,.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 });
5233
5212
  }
5234
5213
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ModalComponent, decorators: [{
5235
5214
  type: Component,
5236
- args: [{ selector: 'lc-modal', standalone: true, imports: [CommonModule, A11yModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (_open()) {\n <!-- Backdrop -->\n <div\n class=\"cdk-overlay-backdrop 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}.cdk-overlay-backdrop,.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;padding:var(--spacing-4) 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(--spacing-6)}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;gap:var(--spacing-3);padding:var(--spacing-4) var(--spacing-6);border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__footer>*{margin-right:.75rem}.lc-modal__footer>*:last-child{margin-right:0}.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){.cdk-overlay-backdrop,.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"] }]
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=\"cdk-overlay-backdrop 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}.cdk-overlay-backdrop,.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;padding:var(--spacing-4) 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(--spacing-6)}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;gap:var(--spacing-3);padding:var(--spacing-4) var(--spacing-6);border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__footer>*{margin-right:.75rem}.lc-modal__footer>*:last-child{margin-right:0}.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){.cdk-overlay-backdrop,.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"] }]
5237
5216
  }], ctorParameters: () => [], propDecorators: { modalContent: [{
5238
5217
  type: ViewChild,
5239
5218
  args: ['modalContent']
@@ -5245,11 +5224,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
5245
5224
  class TooltipContentComponent {
5246
5225
  content = '';
5247
5226
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5248
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: TooltipContentComponent, isStandalone: true, selector: "lc-tooltip-content", host: { attributes: { "role": "tooltip" }, classAttribute: "lc-tooltip" }, ngImport: i0, template: `<div class="lc-tooltip-inner">{{ content }}</div>`, isInline: true, styles: [":host{display:block;background-color:#000000e6;color:#fff;padding:.5rem .75rem;border-radius:.375rem;font-size:.875rem;line-height:1.25rem;max-width:300px;word-wrap:break-word;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.lc-tooltip-inner{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5227
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: TooltipContentComponent, isStandalone: true, selector: "lc-tooltip-content", host: { attributes: { "role": "tooltip" }, classAttribute: "lc-tooltip" }, ngImport: i0, template: `<div class="lc-tooltip-inner">{{ content }}</div>`, isInline: true, styles: [":host{display:block;background-color:#000000e6;color:#fff;padding:.5rem .75rem;border-radius:.375rem;font-size:.875rem;line-height:1.25rem;max-width:300px;word-wrap:break-word;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.lc-tooltip-inner{position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5249
5228
  }
5250
5229
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TooltipContentComponent, decorators: [{
5251
5230
  type: Component,
5252
- args: [{ selector: 'lc-tooltip-content', standalone: true, imports: [CommonModule], template: `<div class="lc-tooltip-inner">{{ content }}</div>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
5231
+ args: [{ selector: 'lc-tooltip-content', standalone: true, imports: [], template: `<div class="lc-tooltip-inner">{{ content }}</div>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
5253
5232
  class: 'lc-tooltip',
5254
5233
  role: 'tooltip',
5255
5234
  }, styles: [":host{display:block;background-color:#000000e6;color:#fff;padding:.5rem .75rem;border-radius:.375rem;font-size:.875rem;line-height:1.25rem;max-width:300px;word-wrap:break-word;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.lc-tooltip-inner{position:relative}\n"] }]
@@ -5499,12 +5478,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
5499
5478
  * ```
5500
5479
  */
5501
5480
  class BreadcrumbsComponent {
5502
- // Signals for reactive state
5503
- items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
5504
- separator = signal('/', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
5505
- maxItems = signal(0, ...(ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ [])); // 0 = show all
5506
- size = signal('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
5507
- ariaLabel = signal('Breadcrumbs', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
5481
+ items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
5482
+ separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
5483
+ maxItems = input(0, ...(ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []));
5484
+ size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
5485
+ ariaLabel = input('Breadcrumbs', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
5508
5486
  // Computed CSS classes
5509
5487
  breadcrumbClasses = computed(() => {
5510
5488
  const classes = ['lc-breadcrumbs'];
@@ -5530,22 +5508,6 @@ class BreadcrumbsComponent {
5530
5508
  result.push(allItems[lastIndex]);
5531
5509
  return result;
5532
5510
  }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
5533
- // Input setters for @Input binding
5534
- set itemsInput(value) {
5535
- this.items.set(value);
5536
- }
5537
- set separatorInput(value) {
5538
- this.separator.set(value);
5539
- }
5540
- set maxItemsInput(value) {
5541
- this.maxItems.set(value);
5542
- }
5543
- set sizeInput(value) {
5544
- this.size.set(value);
5545
- }
5546
- set ariaLabelInput(value) {
5547
- this.ariaLabel.set(value);
5548
- }
5549
5511
  // Helper to check if item is last
5550
5512
  isLastItem(index) {
5551
5513
  return index === this.visibleItems().length - 1;
@@ -5555,22 +5517,12 @@ class BreadcrumbsComponent {
5555
5517
  return item.label === '...';
5556
5518
  }
5557
5519
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5558
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BreadcrumbsComponent, isStandalone: true, selector: "lc-breadcrumbs", inputs: { itemsInput: "itemsInput", separatorInput: "separatorInput", maxItemsInput: "maxItemsInput", sizeInput: "sizeInput", ariaLabelInput: "ariaLabelInput" }, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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 });
5559
5521
  }
5560
5522
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
5561
5523
  type: Component,
5562
- args: [{ selector: 'lc-breadcrumbs', imports: [CommonModule, 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"] }]
5563
- }], propDecorators: { itemsInput: [{
5564
- type: Input
5565
- }], separatorInput: [{
5566
- type: Input
5567
- }], maxItemsInput: [{
5568
- type: Input
5569
- }], sizeInput: [{
5570
- type: Input
5571
- }], ariaLabelInput: [{
5572
- type: Input
5573
- }] } });
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"] }]
5525
+ }], 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 }] }] } });
5574
5526
 
5575
5527
  /**
5576
5528
  * Avatar component for circular user representation.
@@ -5657,11 +5609,11 @@ class AvatarComponent {
5657
5609
  this.imageError.set(true);
5658
5610
  }
5659
5611
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5660
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AvatarComponent, isStandalone: true, selector: "lc-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n [class]=\"avatarClasses()\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (showImage()) {\n <img \n [src]=\"src()!\" \n [alt]=\"alt() || name() || 'Avatar'\" \n class=\"lc-avatar__image\"\n (error)=\"onImageError()\"\n />\n } @else {\n <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n }\n\n @if (status()) {\n <span \n class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n [attr.aria-label]=\"status() + ' status'\"\n ></span>\n }\n</div>\n", styles: [".lc-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-neutral-200);color:var(--color-neutral-700);font-weight:var(--typography-font-weight-medium, 500);line-height:1;overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}[data-theme=dark] .lc-avatar,:root[data-theme=dark] .lc-avatar{background-color:var(--color-neutral-700);color:var(--color-neutral-200)}.lc-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:50%}.lc-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:inherit;text-transform:uppercase}.lc-avatar__status{position:absolute;bottom:0;right:0;width:25%;height:25%;border-radius:50%;border:2px solid var(--color-white)}[data-theme=dark] .lc-avatar__status,:root[data-theme=dark] .lc-avatar__status{border-color:var(--color-neutral-900)}.lc-avatar__status--online{background-color:var(--color-success-500)}.lc-avatar__status--offline{background-color:var(--color-neutral-400)}[data-theme=dark] .lc-avatar__status--offline,:root[data-theme=dark] .lc-avatar__status--offline{background-color:var(--color-neutral-600)}.lc-avatar__status--away{background-color:var(--color-warning-500)}.lc-avatar__status--busy{background-color:var(--color-error-500)}.lc-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-avatar--xs .lc-avatar__status{width:.375rem;height:.375rem;border-width:1px}.lc-avatar--sm{width:2rem;height:2rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-avatar--sm .lc-avatar__status{width:.5rem;height:.5rem;border-width:1.5px}.lc-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--typography-font-size-base, 1rem)}.lc-avatar--md .lc-avatar__status{width:.625rem;height:.625rem;border-width:2px}.lc-avatar--lg{width:3rem;height:3rem;font-size:var(--typography-font-size-lg, 1.125rem)}.lc-avatar--lg .lc-avatar__status{width:.75rem;height:.75rem;border-width:2px}.lc-avatar--xl{width:4rem;height:4rem;font-size:var(--typography-font-size-xl, 1.25rem)}.lc-avatar--xl .lc-avatar__status{width:1rem;height:1rem;border-width:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5612
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: AvatarComponent, isStandalone: true, selector: "lc-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n [class]=\"avatarClasses()\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (showImage()) {\n <img \n [src]=\"src()!\" \n [alt]=\"alt() || name() || 'Avatar'\" \n class=\"lc-avatar__image\"\n (error)=\"onImageError()\"\n />\n } @else {\n <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n }\n\n @if (status()) {\n <span \n class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n [attr.aria-label]=\"status() + ' status'\"\n ></span>\n }\n</div>\n", styles: [".lc-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-neutral-200);color:var(--color-neutral-700);font-weight:var(--typography-font-weight-medium, 500);line-height:1;overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}[data-theme=dark] .lc-avatar,:root[data-theme=dark] .lc-avatar{background-color:var(--color-neutral-700);color:var(--color-neutral-200)}.lc-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:50%}.lc-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:inherit;text-transform:uppercase}.lc-avatar__status{position:absolute;bottom:0;right:0;width:25%;height:25%;border-radius:50%;border:2px solid var(--color-white)}[data-theme=dark] .lc-avatar__status,:root[data-theme=dark] .lc-avatar__status{border-color:var(--color-neutral-900)}.lc-avatar__status--online{background-color:var(--color-success-500)}.lc-avatar__status--offline{background-color:var(--color-neutral-400)}[data-theme=dark] .lc-avatar__status--offline,:root[data-theme=dark] .lc-avatar__status--offline{background-color:var(--color-neutral-600)}.lc-avatar__status--away{background-color:var(--color-warning-500)}.lc-avatar__status--busy{background-color:var(--color-error-500)}.lc-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-avatar--xs .lc-avatar__status{width:.375rem;height:.375rem;border-width:1px}.lc-avatar--sm{width:2rem;height:2rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-avatar--sm .lc-avatar__status{width:.5rem;height:.5rem;border-width:1.5px}.lc-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--typography-font-size-base, 1rem)}.lc-avatar--md .lc-avatar__status{width:.625rem;height:.625rem;border-width:2px}.lc-avatar--lg{width:3rem;height:3rem;font-size:var(--typography-font-size-lg, 1.125rem)}.lc-avatar--lg .lc-avatar__status{width:.75rem;height:.75rem;border-width:2px}.lc-avatar--xl{width:4rem;height:4rem;font-size:var(--typography-font-size-xl, 1.25rem)}.lc-avatar--xl .lc-avatar__status{width:1rem;height:1rem;border-width:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5661
5613
  }
5662
5614
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AvatarComponent, decorators: [{
5663
5615
  type: Component,
5664
- args: [{ selector: 'lc-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n [class]=\"avatarClasses()\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (showImage()) {\n <img \n [src]=\"src()!\" \n [alt]=\"alt() || name() || 'Avatar'\" \n class=\"lc-avatar__image\"\n (error)=\"onImageError()\"\n />\n } @else {\n <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n }\n\n @if (status()) {\n <span \n class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n [attr.aria-label]=\"status() + ' status'\"\n ></span>\n }\n</div>\n", styles: [".lc-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-neutral-200);color:var(--color-neutral-700);font-weight:var(--typography-font-weight-medium, 500);line-height:1;overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}[data-theme=dark] .lc-avatar,:root[data-theme=dark] .lc-avatar{background-color:var(--color-neutral-700);color:var(--color-neutral-200)}.lc-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:50%}.lc-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:inherit;text-transform:uppercase}.lc-avatar__status{position:absolute;bottom:0;right:0;width:25%;height:25%;border-radius:50%;border:2px solid var(--color-white)}[data-theme=dark] .lc-avatar__status,:root[data-theme=dark] .lc-avatar__status{border-color:var(--color-neutral-900)}.lc-avatar__status--online{background-color:var(--color-success-500)}.lc-avatar__status--offline{background-color:var(--color-neutral-400)}[data-theme=dark] .lc-avatar__status--offline,:root[data-theme=dark] .lc-avatar__status--offline{background-color:var(--color-neutral-600)}.lc-avatar__status--away{background-color:var(--color-warning-500)}.lc-avatar__status--busy{background-color:var(--color-error-500)}.lc-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-avatar--xs .lc-avatar__status{width:.375rem;height:.375rem;border-width:1px}.lc-avatar--sm{width:2rem;height:2rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-avatar--sm .lc-avatar__status{width:.5rem;height:.5rem;border-width:1.5px}.lc-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--typography-font-size-base, 1rem)}.lc-avatar--md .lc-avatar__status{width:.625rem;height:.625rem;border-width:2px}.lc-avatar--lg{width:3rem;height:3rem;font-size:var(--typography-font-size-lg, 1.125rem)}.lc-avatar--lg .lc-avatar__status{width:.75rem;height:.75rem;border-width:2px}.lc-avatar--xl{width:4rem;height:4rem;font-size:var(--typography-font-size-xl, 1.25rem)}.lc-avatar--xl .lc-avatar__status{width:1rem;height:1rem;border-width:2px}\n"] }]
5616
+ args: [{ selector: 'lc-avatar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n [class]=\"avatarClasses()\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n @if (showImage()) {\n <img \n [src]=\"src()!\" \n [alt]=\"alt() || name() || 'Avatar'\" \n class=\"lc-avatar__image\"\n (error)=\"onImageError()\"\n />\n } @else {\n <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n }\n\n @if (status()) {\n <span \n class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n [attr.aria-label]=\"status() + ' status'\"\n ></span>\n }\n</div>\n", styles: [".lc-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-neutral-200);color:var(--color-neutral-700);font-weight:var(--typography-font-weight-medium, 500);line-height:1;overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}[data-theme=dark] .lc-avatar,:root[data-theme=dark] .lc-avatar{background-color:var(--color-neutral-700);color:var(--color-neutral-200)}.lc-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:50%}.lc-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:inherit;text-transform:uppercase}.lc-avatar__status{position:absolute;bottom:0;right:0;width:25%;height:25%;border-radius:50%;border:2px solid var(--color-white)}[data-theme=dark] .lc-avatar__status,:root[data-theme=dark] .lc-avatar__status{border-color:var(--color-neutral-900)}.lc-avatar__status--online{background-color:var(--color-success-500)}.lc-avatar__status--offline{background-color:var(--color-neutral-400)}[data-theme=dark] .lc-avatar__status--offline,:root[data-theme=dark] .lc-avatar__status--offline{background-color:var(--color-neutral-600)}.lc-avatar__status--away{background-color:var(--color-warning-500)}.lc-avatar__status--busy{background-color:var(--color-error-500)}.lc-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-avatar--xs .lc-avatar__status{width:.375rem;height:.375rem;border-width:1px}.lc-avatar--sm{width:2rem;height:2rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-avatar--sm .lc-avatar__status{width:.5rem;height:.5rem;border-width:1.5px}.lc-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--typography-font-size-base, 1rem)}.lc-avatar--md .lc-avatar__status{width:.625rem;height:.625rem;border-width:2px}.lc-avatar--lg{width:3rem;height:3rem;font-size:var(--typography-font-size-lg, 1.125rem)}.lc-avatar--lg .lc-avatar__status{width:.75rem;height:.75rem;border-width:2px}.lc-avatar--xl{width:4rem;height:4rem;font-size:var(--typography-font-size-xl, 1.25rem)}.lc-avatar--xl .lc-avatar__status{width:1rem;height:1rem;border-width:2px}\n"] }]
5665
5617
  }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
5666
5618
 
5667
5619
  /**
@@ -5694,88 +5646,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
5694
5646
  * ```
5695
5647
  */
5696
5648
  class HeaderComponent {
5697
- /**
5698
- * Theme variant for the header
5699
- * - 'light': Light background with dark text (default)
5700
- * - 'dark': Dark background with light text
5701
- * - 'auto': Follows the global theme (data-theme attribute)
5702
- */
5703
- theme = 'auto';
5704
- /**
5705
- * Logo image source URL
5706
- */
5707
- logo = '';
5708
- /**
5709
- * Whether to show the logo in the header.
5710
- * Set to false when the sidenav owns the logo (sidebar-first layout).
5711
- * @default true
5712
- */
5713
- showLogo = true;
5714
- /**
5715
- * Optional title to display next to logo
5716
- */
5717
- title = '';
5718
- /**
5719
- * Optional subtitle to display under title
5720
- */
5721
- subtitle = '';
5722
- /**
5723
- * User email to display in profile dropdown
5724
- */
5725
- userEmail = '';
5726
- /**
5727
- * User full name for avatar initials
5728
- * @example 'John Doe'
5729
- */
5730
- userName = '';
5731
- /**
5732
- * Whether to show hamburger menu icon (for mobile sidebar toggle)
5733
- */
5734
- showHamburger = false;
5735
- /**
5736
- * Whether to show theme toggle button in header
5737
- */
5738
- showThemeButton = false;
5739
- /**
5740
- * Contextual name displayed in the header (e.g. tenant, organization, project)
5741
- * @example 'Acme Corp'
5742
- */
5743
- contextName = '';
5744
- /**
5745
- * Label displayed above the context name (e.g. 'Tenant', 'Organization', 'Project')
5746
- * @example 'Tenant'
5747
- */
5748
- contextLabel = '';
5749
- /**
5750
- * Size of the profile dropdown menu
5751
- * @default 'sm'
5752
- */
5753
- menuSize = 'sm';
5754
- /**
5755
- * Whether to show the Profile menu item in the user dropdown
5756
- * @default true
5757
- */
5758
- showProfileMenuItem = true;
5759
- /**
5760
- * Emitted when hamburger menu icon is clicked
5761
- */
5762
- hamburgerClick = new EventEmitter();
5763
- /**
5764
- * Emitted when theme toggle is clicked
5765
- */
5766
- themeToggleClick = new EventEmitter();
5767
- /**
5768
- * Emitted when Logout is clicked in profile dropdown
5769
- */
5770
- logoutClick = new EventEmitter();
5771
- /**
5772
- * Emitted when Profile menu item is clicked
5773
- */
5774
- profileClick = new EventEmitter();
5775
- /**
5776
- * Emitted when the context info area is clicked
5777
- */
5778
- contextClick = new EventEmitter();
5649
+ theme = input('auto', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
5650
+ logo = input('', ...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
5651
+ showLogo = input(true, ...(ngDevMode ? [{ debugName: "showLogo" }] : /* istanbul ignore next */ []));
5652
+ title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
5653
+ subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
5654
+ userEmail = input('', ...(ngDevMode ? [{ debugName: "userEmail" }] : /* istanbul ignore next */ []));
5655
+ userName = input('', ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
5656
+ showHamburger = input(false, ...(ngDevMode ? [{ debugName: "showHamburger" }] : /* istanbul ignore next */ []));
5657
+ showThemeButton = input(false, ...(ngDevMode ? [{ debugName: "showThemeButton" }] : /* istanbul ignore next */ []));
5658
+ contextName = input('', ...(ngDevMode ? [{ debugName: "contextName" }] : /* istanbul ignore next */ []));
5659
+ contextLabel = input('', ...(ngDevMode ? [{ debugName: "contextLabel" }] : /* istanbul ignore next */ []));
5660
+ menuSize = input('sm', ...(ngDevMode ? [{ debugName: "menuSize" }] : /* istanbul ignore next */ []));
5661
+ showProfileMenuItem = input(true, ...(ngDevMode ? [{ debugName: "showProfileMenuItem" }] : /* istanbul ignore next */ []));
5662
+ hamburgerClick = output();
5663
+ themeToggleClick = output();
5664
+ logoutClick = output();
5665
+ profileClick = output();
5666
+ contextClick = output();
5779
5667
  themeService = inject(ThemeService);
5780
5668
  /**
5781
5669
  * Get menu items for profile dropdown
@@ -5783,7 +5671,7 @@ class HeaderComponent {
5783
5671
  menuItems = computed(() => {
5784
5672
  const items = [];
5785
5673
  // Add profile link if enabled
5786
- if (this.showProfileMenuItem) {
5674
+ if (this.showProfileMenuItem()) {
5787
5675
  items.push({
5788
5676
  id: 'profile',
5789
5677
  label: 'Profile',
@@ -5861,12 +5749,11 @@ class HeaderComponent {
5861
5749
  }
5862
5750
  }
5863
5751
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5864
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeaderComponent, isStandalone: true, selector: "lc-header", inputs: { theme: "theme", logo: "logo", showLogo: "showLogo", title: "title", subtitle: "subtitle", userEmail: "userEmail", userName: "userName", showHamburger: "showHamburger", showThemeButton: "showThemeButton", contextName: "contextName", contextLabel: "contextLabel", menuSize: "menuSize", showProfileMenuItem: "showProfileMenuItem" }, 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: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.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", "isLoading", "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 });
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 });
5865
5753
  }
5866
5754
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeaderComponent, decorators: [{
5867
5755
  type: Component,
5868
5756
  args: [{ selector: 'lc-header', standalone: true, imports: [
5869
- CommonModule,
5870
5757
  RouterModule,
5871
5758
  ButtonComponent,
5872
5759
  LogoComponent,
@@ -5875,44 +5762,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
5875
5762
  MenuComponent,
5876
5763
  ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
5877
5764
  class: 'lc-header-host',
5878
- }, 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"] }]
5879
- }], propDecorators: { theme: [{
5880
- type: Input
5881
- }], logo: [{
5882
- type: Input
5883
- }], showLogo: [{
5884
- type: Input
5885
- }], title: [{
5886
- type: Input
5887
- }], subtitle: [{
5888
- type: Input
5889
- }], userEmail: [{
5890
- type: Input
5891
- }], userName: [{
5892
- type: Input
5893
- }], showHamburger: [{
5894
- type: Input
5895
- }], showThemeButton: [{
5896
- type: Input
5897
- }], contextName: [{
5898
- type: Input
5899
- }], contextLabel: [{
5900
- type: Input
5901
- }], menuSize: [{
5902
- type: Input
5903
- }], showProfileMenuItem: [{
5904
- type: Input
5905
- }], hamburgerClick: [{
5906
- type: Output
5907
- }], themeToggleClick: [{
5908
- type: Output
5909
- }], logoutClick: [{
5910
- type: Output
5911
- }], profileClick: [{
5912
- type: Output
5913
- }], contextClick: [{
5914
- type: Output
5915
- }] } });
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"] }]
5766
+ }], 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"] }] } });
5916
5767
 
5917
5768
  /**
5918
5769
  * Pagination component for navigating through pages of content.
@@ -5937,16 +5788,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
5937
5788
  * ```
5938
5789
  */
5939
5790
  class PaginationComponent {
5940
- // Signals for reactive state
5941
- currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
5942
- totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
5943
- pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
5944
- size = signal('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
5945
- maxVisiblePages = signal(7, ...(ngDevMode ? [{ debugName: "maxVisiblePages" }] : /* istanbul ignore next */ []));
5946
- ariaLabel = signal('Pagination', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
5947
- showInfo = signal(false, ...(ngDevMode ? [{ debugName: "showInfo" }] : /* istanbul ignore next */ []));
5948
- // Event emitters
5949
- pageChange = new EventEmitter();
5791
+ currentPage = input(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
5792
+ totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
5793
+ pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
5794
+ size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
5795
+ maxVisiblePages = input(7, ...(ngDevMode ? [{ debugName: "maxVisiblePages" }] : /* istanbul ignore next */ []));
5796
+ ariaLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
5797
+ showInfo = input(false, ...(ngDevMode ? [{ debugName: "showInfo" }] : /* istanbul ignore next */ []));
5798
+ pageChange = output();
5950
5799
  // Computed properties
5951
5800
  totalPages = computed(() => {
5952
5801
  const total = this.totalItems();
@@ -6016,28 +5865,6 @@ class PaginationComponent {
6016
5865
  }
6017
5866
  return pages;
6018
5867
  }, ...(ngDevMode ? [{ debugName: "visiblePages" }] : /* istanbul ignore next */ []));
6019
- // Input setters for @Input binding
6020
- set currentPageInput(value) {
6021
- this.currentPage.set(value);
6022
- }
6023
- set totalItemsInput(value) {
6024
- this.totalItems.set(value);
6025
- }
6026
- set pageSizeInput(value) {
6027
- this.pageSize.set(value);
6028
- }
6029
- set sizeInput(value) {
6030
- this.size.set(value);
6031
- }
6032
- set maxVisiblePagesInput(value) {
6033
- this.maxVisiblePages.set(value);
6034
- }
6035
- set ariaLabelInput(value) {
6036
- this.ariaLabel.set(value);
6037
- }
6038
- set showInfoInput(value) {
6039
- this.showInfo.set(value);
6040
- }
6041
5868
  // Navigation methods
6042
5869
  goToPreviousPage() {
6043
5870
  if (!this.isFirstPage()) {
@@ -6068,28 +5895,12 @@ class PaginationComponent {
6068
5895
  return total > 1;
6069
5896
  }
6070
5897
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6071
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PaginationComponent, isStandalone: true, selector: "lc-pagination", inputs: { currentPageInput: "currentPageInput", totalItemsInput: "totalItemsInput", pageSizeInput: "pageSizeInput", sizeInput: "sizeInput", maxVisiblePagesInput: "maxVisiblePagesInput", ariaLabelInput: "ariaLabelInput", showInfoInput: "showInfoInput" }, 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 &hellip;\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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 &hellip;\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 });
6072
5899
  }
6073
5900
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PaginationComponent, decorators: [{
6074
5901
  type: Component,
6075
- args: [{ selector: 'lc-pagination', standalone: true, imports: [CommonModule], 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 &hellip;\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"] }]
6076
- }], propDecorators: { pageChange: [{
6077
- type: Output
6078
- }], currentPageInput: [{
6079
- type: Input
6080
- }], totalItemsInput: [{
6081
- type: Input
6082
- }], pageSizeInput: [{
6083
- type: Input
6084
- }], sizeInput: [{
6085
- type: Input
6086
- }], maxVisiblePagesInput: [{
6087
- type: Input
6088
- }], ariaLabelInput: [{
6089
- type: Input
6090
- }], showInfoInput: [{
6091
- type: Input
6092
- }] } });
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 &hellip;\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"] }]
5903
+ }], 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"] }] } });
6093
5904
 
6094
5905
  /**
6095
5906
  * Badge component for displaying status, notifications, or counts.
@@ -6126,11 +5937,11 @@ class BadgeComponent {
6126
5937
  return classes.join(' ');
6127
5938
  }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : /* istanbul ignore next */ []));
6128
5939
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6129
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: BadgeComponent, isStandalone: true, selector: "lc-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"badgeClasses()\">\n <ng-content></ng-content>\n</span>\n", styles: [".lc-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--typography-font-weight-medium, 500);line-height:1;border-radius:var(--border-radius-sm, .25rem);white-space:nowrap;transition:background-color .15s ease,color .15s ease}.lc-badge--xs{padding:.125rem .375rem;font-size:var(--typography-font-size-xs, .75rem);min-width:1.25rem;height:1.25rem}.lc-badge--sm{padding:.25rem .5rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.5rem;height:1.5rem}.lc-badge--md{padding:.375rem .625rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.75rem;height:1.75rem}.lc-badge--lg{padding:.5rem .75rem;font-size:var(--typography-font-size-base, 1rem);min-width:2rem;height:2rem}.lc-badge--default{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-800, #1f2937)}[data-theme=dark] .lc-badge--default,:root[data-theme=dark] .lc-badge--default{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-800, #1e3a5f)}[data-theme=dark] .lc-badge--primary,:root[data-theme=dark] .lc-badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-200, #bfdbfe)}.lc-badge--success{background-color:var(--color-success-light, #dcfce7);color:var(--color-success-dark, #166534)}[data-theme=dark] .lc-badge--success,:root[data-theme=dark] .lc-badge--success{background-color:#22c55e33;color:#86efac}.lc-badge--warning{background-color:var(--color-warning-light, #fef3c7);color:var(--color-warning-dark, #92400e)}[data-theme=dark] .lc-badge--warning,:root[data-theme=dark] .lc-badge--warning{background-color:#fbbf2433;color:#fde047}.lc-badge--error{background-color:var(--color-error-light, #fee2e2);color:var(--color-error-dark, #991b1b)}[data-theme=dark] .lc-badge--error,:root[data-theme=dark] .lc-badge--error{background-color:#ef444433;color:#fca5a5}.lc-badge--info{background-color:var(--color-info-light, #dbeafe);color:var(--color-info-dark, #1e40af)}[data-theme=dark] .lc-badge--info,:root[data-theme=dark] .lc-badge--info{background-color:#3b82f633;color:#93c5fd}.lc-badge--rounded{border-radius:var(--border-radius-full, 9999px)}@media(max-width:640px){.lc-badge--lg{padding:.5rem .875rem}}@media print{.lc-badge{border:1px solid currentColor}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5940
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: BadgeComponent, isStandalone: true, selector: "lc-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"badgeClasses()\">\n <ng-content></ng-content>\n</span>\n", styles: [".lc-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--typography-font-weight-medium, 500);line-height:1;border-radius:var(--border-radius-sm, .25rem);white-space:nowrap;transition:background-color .15s ease,color .15s ease}.lc-badge--xs{padding:.125rem .375rem;font-size:var(--typography-font-size-xs, .75rem);min-width:1.25rem;height:1.25rem}.lc-badge--sm{padding:.25rem .5rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.5rem;height:1.5rem}.lc-badge--md{padding:.375rem .625rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.75rem;height:1.75rem}.lc-badge--lg{padding:.5rem .75rem;font-size:var(--typography-font-size-base, 1rem);min-width:2rem;height:2rem}.lc-badge--default{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-800, #1f2937)}[data-theme=dark] .lc-badge--default,:root[data-theme=dark] .lc-badge--default{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-800, #1e3a5f)}[data-theme=dark] .lc-badge--primary,:root[data-theme=dark] .lc-badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-200, #bfdbfe)}.lc-badge--success{background-color:var(--color-success-light, #dcfce7);color:var(--color-success-dark, #166534)}[data-theme=dark] .lc-badge--success,:root[data-theme=dark] .lc-badge--success{background-color:#22c55e33;color:#86efac}.lc-badge--warning{background-color:var(--color-warning-light, #fef3c7);color:var(--color-warning-dark, #92400e)}[data-theme=dark] .lc-badge--warning,:root[data-theme=dark] .lc-badge--warning{background-color:#fbbf2433;color:#fde047}.lc-badge--error{background-color:var(--color-error-light, #fee2e2);color:var(--color-error-dark, #991b1b)}[data-theme=dark] .lc-badge--error,:root[data-theme=dark] .lc-badge--error{background-color:#ef444433;color:#fca5a5}.lc-badge--info{background-color:var(--color-info-light, #dbeafe);color:var(--color-info-dark, #1e40af)}[data-theme=dark] .lc-badge--info,:root[data-theme=dark] .lc-badge--info{background-color:#3b82f633;color:#93c5fd}.lc-badge--rounded{border-radius:var(--border-radius-full, 9999px)}@media(max-width:640px){.lc-badge--lg{padding:.5rem .875rem}}@media print{.lc-badge{border:1px solid currentColor}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
6130
5941
  }
6131
5942
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BadgeComponent, decorators: [{
6132
5943
  type: Component,
6133
- args: [{ selector: 'lc-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [class]=\"badgeClasses()\">\n <ng-content></ng-content>\n</span>\n", styles: [".lc-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--typography-font-weight-medium, 500);line-height:1;border-radius:var(--border-radius-sm, .25rem);white-space:nowrap;transition:background-color .15s ease,color .15s ease}.lc-badge--xs{padding:.125rem .375rem;font-size:var(--typography-font-size-xs, .75rem);min-width:1.25rem;height:1.25rem}.lc-badge--sm{padding:.25rem .5rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.5rem;height:1.5rem}.lc-badge--md{padding:.375rem .625rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.75rem;height:1.75rem}.lc-badge--lg{padding:.5rem .75rem;font-size:var(--typography-font-size-base, 1rem);min-width:2rem;height:2rem}.lc-badge--default{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-800, #1f2937)}[data-theme=dark] .lc-badge--default,:root[data-theme=dark] .lc-badge--default{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-800, #1e3a5f)}[data-theme=dark] .lc-badge--primary,:root[data-theme=dark] .lc-badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-200, #bfdbfe)}.lc-badge--success{background-color:var(--color-success-light, #dcfce7);color:var(--color-success-dark, #166534)}[data-theme=dark] .lc-badge--success,:root[data-theme=dark] .lc-badge--success{background-color:#22c55e33;color:#86efac}.lc-badge--warning{background-color:var(--color-warning-light, #fef3c7);color:var(--color-warning-dark, #92400e)}[data-theme=dark] .lc-badge--warning,:root[data-theme=dark] .lc-badge--warning{background-color:#fbbf2433;color:#fde047}.lc-badge--error{background-color:var(--color-error-light, #fee2e2);color:var(--color-error-dark, #991b1b)}[data-theme=dark] .lc-badge--error,:root[data-theme=dark] .lc-badge--error{background-color:#ef444433;color:#fca5a5}.lc-badge--info{background-color:var(--color-info-light, #dbeafe);color:var(--color-info-dark, #1e40af)}[data-theme=dark] .lc-badge--info,:root[data-theme=dark] .lc-badge--info{background-color:#3b82f633;color:#93c5fd}.lc-badge--rounded{border-radius:var(--border-radius-full, 9999px)}@media(max-width:640px){.lc-badge--lg{padding:.5rem .875rem}}@media print{.lc-badge{border:1px solid currentColor}}\n"] }]
5944
+ args: [{ selector: 'lc-badge', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [class]=\"badgeClasses()\">\n <ng-content></ng-content>\n</span>\n", styles: [".lc-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--typography-font-weight-medium, 500);line-height:1;border-radius:var(--border-radius-sm, .25rem);white-space:nowrap;transition:background-color .15s ease,color .15s ease}.lc-badge--xs{padding:.125rem .375rem;font-size:var(--typography-font-size-xs, .75rem);min-width:1.25rem;height:1.25rem}.lc-badge--sm{padding:.25rem .5rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.5rem;height:1.5rem}.lc-badge--md{padding:.375rem .625rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.75rem;height:1.75rem}.lc-badge--lg{padding:.5rem .75rem;font-size:var(--typography-font-size-base, 1rem);min-width:2rem;height:2rem}.lc-badge--default{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-800, #1f2937)}[data-theme=dark] .lc-badge--default,:root[data-theme=dark] .lc-badge--default{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-800, #1e3a5f)}[data-theme=dark] .lc-badge--primary,:root[data-theme=dark] .lc-badge--primary{background-color:var(--color-primary-900, #1e3a5f);color:var(--color-primary-200, #bfdbfe)}.lc-badge--success{background-color:var(--color-success-light, #dcfce7);color:var(--color-success-dark, #166534)}[data-theme=dark] .lc-badge--success,:root[data-theme=dark] .lc-badge--success{background-color:#22c55e33;color:#86efac}.lc-badge--warning{background-color:var(--color-warning-light, #fef3c7);color:var(--color-warning-dark, #92400e)}[data-theme=dark] .lc-badge--warning,:root[data-theme=dark] .lc-badge--warning{background-color:#fbbf2433;color:#fde047}.lc-badge--error{background-color:var(--color-error-light, #fee2e2);color:var(--color-error-dark, #991b1b)}[data-theme=dark] .lc-badge--error,:root[data-theme=dark] .lc-badge--error{background-color:#ef444433;color:#fca5a5}.lc-badge--info{background-color:var(--color-info-light, #dbeafe);color:var(--color-info-dark, #1e40af)}[data-theme=dark] .lc-badge--info,:root[data-theme=dark] .lc-badge--info{background-color:#3b82f633;color:#93c5fd}.lc-badge--rounded{border-radius:var(--border-radius-full, 9999px)}@media(max-width:640px){.lc-badge--lg{padding:.5rem .875rem}}@media print{.lc-badge{border:1px solid currentColor}}\n"] }]
6134
5945
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
6135
5946
 
6136
5947
  /**
@@ -6169,16 +5980,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
6169
5980
  * ```
6170
5981
  */
6171
5982
  class SidenavComponent {
6172
- /** Whether the sidenav is collapsed to icon-only rail */
6173
- collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
5983
+ /** Whether the sidenav is collapsed to icon-only rail (two-way bindable) */
5984
+ collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
6174
5985
  /** Whether to show the logo at the top of the sidenav */
6175
- showLogo = signal(false, ...(ngDevMode ? [{ debugName: "showLogo" }] : /* istanbul ignore next */ []));
5986
+ showLogo = input(false, ...(ngDevMode ? [{ debugName: "showLogo" }] : /* istanbul ignore next */ []));
6176
5987
  /** Whether the sidenav is open */
6177
- isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
5988
+ isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
6178
5989
  /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */
6179
- mode = signal('drawer', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
5990
+ mode = input('drawer', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
6180
5991
  /** Mobile breakpoint in pixels. Below this width, docked mode switches to drawer. */
6181
- mobileBreakpoint = signal(768, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : /* istanbul ignore next */ []));
5992
+ mobileBreakpoint = input(768, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : /* istanbul ignore next */ []));
6182
5993
  /** Whether the viewport is below the mobile breakpoint */
6183
5994
  isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
6184
5995
  /** Effective mode: switches docked → drawer on mobile */
@@ -6191,17 +6002,19 @@ class SidenavComponent {
6191
6002
  mediaQuery = null;
6192
6003
  mediaHandler = (e) => this.isMobile.set(e.matches);
6193
6004
  /** Position of the sidenav (left or right) */
6194
- position = signal('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
6005
+ position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
6195
6006
  /** Width of the sidenav drawer */
6196
- width = signal('320px', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
6007
+ width = input('320px', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
6197
6008
  /** ARIA label for the sidenav */
6198
- ariaLabel = signal('Side navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
6009
+ ariaLabel = input('Side navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
6199
6010
  /** Whether to show the overlay backdrop */
6200
- hasOverlay = signal(true, ...(ngDevMode ? [{ debugName: "hasOverlay" }] : /* istanbul ignore next */ []));
6011
+ hasOverlay = input(true, ...(ngDevMode ? [{ debugName: "hasOverlay" }] : /* istanbul ignore next */ []));
6201
6012
  /** Navigation items to display */
6202
- items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
6013
+ items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
6203
6014
  /** Current active route for highlighting */
6204
- activeRoute = signal('', ...(ngDevMode ? [{ debugName: "activeRoute" }] : /* istanbul ignore next */ []));
6015
+ activeRoute = input('', ...(ngDevMode ? [{ debugName: "activeRoute" }] : /* istanbul ignore next */ []));
6016
+ /** Theme variant for the sidenav */
6017
+ theme = input('auto', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
6205
6018
  /** Track which parent items are expanded */
6206
6019
  expandedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []));
6207
6020
  /**
@@ -6210,95 +6023,24 @@ class SidenavComponent {
6210
6023
  sortedItems = computed(() => {
6211
6024
  return [...this.items()].sort((a, b) => a.displayOrder - b.displayOrder);
6212
6025
  }, ...(ngDevMode ? [{ debugName: "sortedItems" }] : /* istanbul ignore next */ []));
6213
- /**
6214
- * Input setter for isOpen
6215
- */
6216
- set isOpenInput(value) {
6217
- this.isOpen.set(value);
6218
- }
6219
- /**
6220
- * Input setter for mode
6221
- */
6222
- set modeInput(value) {
6223
- this.mode.set(value);
6224
- }
6225
- /**
6226
- * Input setter for position
6227
- */
6228
- set positionInput(value) {
6229
- this.position.set(value);
6230
- }
6231
- /**
6232
- * Input setter for width
6233
- */
6234
- set widthInput(value) {
6235
- this.width.set(value);
6236
- }
6237
- /**
6238
- * Input setter for ariaLabel
6239
- */
6240
- set ariaLabelInput(value) {
6241
- this.ariaLabel.set(value);
6242
- }
6243
- /**
6244
- * Input setter for hasOverlay
6245
- */
6246
- set hasOverlayInput(value) {
6247
- this.hasOverlay.set(value);
6248
- }
6249
- /**
6250
- * Input setter for navigation items
6251
- */
6252
- set itemsInput(value) {
6253
- this.items.set(value);
6254
- }
6255
- /**
6256
- * Input setter for active route
6257
- */
6258
- set activeRouteInput(value) {
6259
- this.activeRoute.set(value);
6260
- }
6261
- /**
6262
- * Input setter for collapsed
6263
- */
6264
- set collapsedInput(value) {
6265
- this.collapsed.set(value);
6266
- }
6267
- /**
6268
- * Input setter for showLogo
6269
- */
6270
- set showLogoInput(value) {
6271
- this.showLogo.set(value);
6272
- }
6273
- /**
6274
- * Input setter for mobileBreakpoint
6275
- */
6276
- set mobileBreakpointInput(value) {
6277
- this.mobileBreakpoint.set(value);
6278
- this.setupMediaQuery();
6279
- }
6280
- /** Theme variant for the sidenav */
6281
- themeMode = signal('auto', ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
6282
- /**
6283
- * Input setter for theme
6284
- */
6285
- set themeInput(value) {
6286
- this.themeMode.set(value);
6287
- }
6288
6026
  /**
6289
6027
  * Event emitted when the sidenav should close
6290
6028
  */
6291
- closed = new EventEmitter();
6029
+ closed = output();
6292
6030
  /**
6293
6031
  * Event emitted when a navigation item is clicked
6294
6032
  */
6295
- itemClicked = new EventEmitter();
6033
+ itemClicked = output();
6296
6034
  /**
6297
6035
  * Event emitted when an item's action button is clicked
6298
6036
  */
6299
- itemAction = new EventEmitter();
6300
- ngOnInit() {
6301
- this.setupMediaQuery();
6037
+ itemAction = output();
6038
+ constructor() {
6039
+ // React to mobileBreakpoint changes
6040
+ effect(() => {
6041
+ this.mobileBreakpoint(); // track dependency
6042
+ this.setupMediaQuery();
6043
+ });
6302
6044
  }
6303
6045
  ngOnDestroy() {
6304
6046
  this.teardownMediaQuery();
@@ -6328,8 +6070,8 @@ class SidenavComponent {
6328
6070
  if (this.collapsed() && !this.isMobile()) {
6329
6071
  classes.push('lc-sidenav--collapsed');
6330
6072
  }
6331
- if (this.themeMode() !== 'auto') {
6332
- classes.push(`lc-sidenav--${this.themeMode()}`);
6073
+ if (this.theme() !== 'auto') {
6074
+ classes.push(`lc-sidenav--${this.theme()}`);
6333
6075
  }
6334
6076
  return classes.join(' ');
6335
6077
  }, ...(ngDevMode ? [{ debugName: "sidenavClasses" }] : /* istanbul ignore next */ []));
@@ -6419,47 +6161,16 @@ class SidenavComponent {
6419
6161
  }
6420
6162
  }
6421
6163
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6422
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SidenavComponent, isStandalone: true, selector: "lc-sidenav", inputs: { isOpenInput: "isOpenInput", modeInput: "modeInput", positionInput: "positionInput", widthInput: "widthInput", ariaLabelInput: "ariaLabelInput", hasOverlayInput: "hasOverlayInput", itemsInput: "itemsInput", activeRouteInput: "activeRouteInput", collapsedInput: "collapsedInput", showLogoInput: "showLogoInput", mobileBreakpointInput: "mobileBreakpointInput", themeInput: ["theme", "themeInput"] }, outputs: { 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]=\"themeMode() === 'dark' ? 'dark' : themeMode() === '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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.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 });
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 });
6423
6165
  }
6424
6166
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, decorators: [{
6425
6167
  type: Component,
6426
- args: [{ selector: 'lc-sidenav', standalone: true, imports: [CommonModule, RouterModule, IconComponent, BadgeComponent, LogoComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
6168
+ args: [{ selector: 'lc-sidenav', standalone: true, imports: [NgTemplateOutlet, NgStyle, RouterModule, IconComponent, BadgeComponent, LogoComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
6427
6169
  '[class.lc-sidenav-container]': 'true',
6428
6170
  '[class.lc-sidenav-container--docked]': "effectiveMode() === 'docked'",
6429
6171
  '[class.lc-sidenav-container--open]': 'isOpen()',
6430
- }, 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]=\"themeMode() === 'dark' ? 'dark' : themeMode() === '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"] }]
6431
- }], propDecorators: { isOpenInput: [{
6432
- type: Input
6433
- }], modeInput: [{
6434
- type: Input
6435
- }], positionInput: [{
6436
- type: Input
6437
- }], widthInput: [{
6438
- type: Input
6439
- }], ariaLabelInput: [{
6440
- type: Input
6441
- }], hasOverlayInput: [{
6442
- type: Input
6443
- }], itemsInput: [{
6444
- type: Input
6445
- }], activeRouteInput: [{
6446
- type: Input
6447
- }], collapsedInput: [{
6448
- type: Input
6449
- }], showLogoInput: [{
6450
- type: Input
6451
- }], mobileBreakpointInput: [{
6452
- type: Input
6453
- }], themeInput: [{
6454
- type: Input,
6455
- args: ['theme']
6456
- }], closed: [{
6457
- type: Output
6458
- }], itemClicked: [{
6459
- type: Output
6460
- }], itemAction: [{
6461
- type: Output
6462
- }], handleKeydown: [{
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"] }]
6173
+ }], 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: [{
6463
6174
  type: HostListener,
6464
6175
  args: ['document:keydown', ['$event']]
6465
6176
  }] } });
@@ -6472,16 +6183,16 @@ class TabComponent {
6472
6183
  /**
6473
6184
  * Tab label displayed in tab button
6474
6185
  */
6475
- label = '';
6186
+ label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
6476
6187
  /**
6477
6188
  * Whether the tab is disabled
6478
6189
  * @default false
6479
6190
  */
6480
- disabled = false;
6191
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
6481
6192
  /**
6482
6193
  * Optional icon name (Heroicons)
6483
6194
  */
6484
- icon;
6195
+ icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
6485
6196
  /**
6486
6197
  * Unique ID for accessibility
6487
6198
  */
@@ -6495,18 +6206,18 @@ class TabComponent {
6495
6206
  */
6496
6207
  template;
6497
6208
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6498
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: TabComponent, isStandalone: true, selector: "lc-tab", inputs: { label: "label", disabled: "disabled", icon: "icon" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
6209
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: TabComponent, isStandalone: true, selector: "lc-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
6499
6210
  <ng-template>
6500
6211
  <ng-content></ng-content>
6501
6212
  </ng-template>
6502
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6213
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
6503
6214
  }
6504
6215
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TabComponent, decorators: [{
6505
6216
  type: Component,
6506
6217
  args: [{
6507
6218
  selector: 'lc-tab',
6508
6219
  standalone: true,
6509
- imports: [CommonModule],
6220
+ imports: [],
6510
6221
  template: `
6511
6222
  <ng-template>
6512
6223
  <ng-content></ng-content>
@@ -6514,13 +6225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
6514
6225
  `,
6515
6226
  changeDetection: ChangeDetectionStrategy.OnPush,
6516
6227
  }]
6517
- }], propDecorators: { label: [{
6518
- type: Input
6519
- }], disabled: [{
6520
- type: Input
6521
- }], icon: [{
6522
- type: Input
6523
- }], template: [{
6228
+ }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], template: [{
6524
6229
  type: ViewChild,
6525
6230
  args: [TemplateRef, { static: true }]
6526
6231
  }] } });
@@ -6545,24 +6250,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
6545
6250
  */
6546
6251
  class TabsComponent {
6547
6252
  /**
6548
- * Orientation input property
6253
+ * Orientation of tabs
6549
6254
  * @default 'horizontal'
6550
6255
  */
6551
- set orientation(value) {
6552
- this._orientation.set(value);
6553
- }
6554
- get orientation() {
6555
- return this._orientation();
6556
- }
6256
+ orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
6557
6257
  /**
6558
- * Currently selected tab index
6258
+ * Currently selected tab index (external input)
6559
6259
  * @default 0
6560
6260
  */
6261
+ selectedIndexInput = input(0, ...(ngDevMode ? [{ debugName: "selectedIndexInput" }] : /* istanbul ignore next */ []));
6262
+ /**
6263
+ * Currently selected tab index (internal writable signal)
6264
+ */
6561
6265
  selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
6562
6266
  /**
6563
6267
  * Emitted when selected tab changes
6564
6268
  */
6565
- selectedIndexChange = new EventEmitter();
6269
+ selectedIndexChange = output();
6566
6270
  /**
6567
6271
  * Tab components
6568
6272
  */
@@ -6576,25 +6280,18 @@ class TabsComponent {
6576
6280
  */
6577
6281
  tabListClasses = computed(() => ({
6578
6282
  'lc-tabs__list': true,
6579
- 'lc-tabs--horizontal': this._orientation() === 'horizontal',
6580
- 'lc-tabs--vertical': this._orientation() === 'vertical',
6283
+ 'lc-tabs--horizontal': this.orientation() === 'horizontal',
6284
+ 'lc-tabs--vertical': this.orientation() === 'vertical',
6581
6285
  }), ...(ngDevMode ? [{ debugName: "tabListClasses" }] : /* istanbul ignore next */ []));
6582
- /**
6583
- * Orientation of tabs (internal signal)
6584
- * @default 'horizontal'
6585
- */
6586
- _orientation = signal('horizontal', ...(ngDevMode ? [{ debugName: "_orientation" }] : /* istanbul ignore next */ []));
6587
6286
  /**
6588
6287
  * Track tab registration
6589
6288
  */
6590
6289
  registeredTabs = [];
6591
- /**
6592
- * Set selected index input
6593
- */
6594
- set selectedIndexInput(value) {
6595
- this.selectedIndex.set(value);
6596
- }
6597
6290
  constructor() {
6291
+ // Sync external selectedIndexInput to internal selectedIndex
6292
+ effect(() => {
6293
+ this.selectedIndex.set(this.selectedIndexInput());
6294
+ });
6598
6295
  // Emit when selection changes
6599
6296
  effect(() => {
6600
6297
  const index = this.selectedIndex();
@@ -6604,13 +6301,13 @@ class TabsComponent {
6604
6301
  ngAfterContentInit() {
6605
6302
  // Register all tabs
6606
6303
  this.tabs.forEach((tab) => {
6607
- this.registerTab({ label: tab.label, disabled: tab.disabled });
6304
+ this.registerTab({ label: tab.label(), disabled: tab.disabled() });
6608
6305
  });
6609
6306
  // Listen for tab changes
6610
6307
  this.tabs.changes.subscribe(() => {
6611
6308
  this.registeredTabs = [];
6612
6309
  this.tabs.forEach((tab) => {
6613
- this.registerTab({ label: tab.label, disabled: tab.disabled });
6310
+ this.registerTab({ label: tab.label(), disabled: tab.disabled() });
6614
6311
  });
6615
6312
  });
6616
6313
  }
@@ -6626,7 +6323,7 @@ class TabsComponent {
6626
6323
  selectTab(index) {
6627
6324
  const tabs = this.tabList();
6628
6325
  const tab = tabs[index];
6629
- if (index >= 0 && index < tabs.length && tab && !tab.disabled) {
6326
+ if (index >= 0 && index < tabs.length && tab && !tab.disabled()) {
6630
6327
  this.selectedIndex.set(index);
6631
6328
  }
6632
6329
  }
@@ -6642,7 +6339,7 @@ class TabsComponent {
6642
6339
  handleKeyDown(event) {
6643
6340
  const currentIndex = this.selectedIndex();
6644
6341
  let nextIndex = currentIndex;
6645
- const isHorizontal = this._orientation() === 'horizontal';
6342
+ const isHorizontal = this.orientation() === 'horizontal';
6646
6343
  const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
6647
6344
  const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
6648
6345
  switch (event.key) {
@@ -6682,7 +6379,7 @@ class TabsComponent {
6682
6379
  const tabs = this.tabList();
6683
6380
  let nextIndex = (currentIndex + 1) % tabs.length;
6684
6381
  const startIndex = nextIndex;
6685
- while (tabs[nextIndex]?.disabled) {
6382
+ while (tabs[nextIndex]?.disabled()) {
6686
6383
  nextIndex = (nextIndex + 1) % tabs.length;
6687
6384
  if (nextIndex === startIndex) {
6688
6385
  return currentIndex; // No enabled tabs found
@@ -6700,7 +6397,7 @@ class TabsComponent {
6700
6397
  prevIndex = tabs.length - 1;
6701
6398
  }
6702
6399
  const startIndex = prevIndex;
6703
- while (tabs[prevIndex]?.disabled) {
6400
+ while (tabs[prevIndex]?.disabled()) {
6704
6401
  prevIndex = prevIndex - 1;
6705
6402
  if (prevIndex < 0) {
6706
6403
  prevIndex = tabs.length - 1;
@@ -6718,7 +6415,7 @@ class TabsComponent {
6718
6415
  const tabs = this.tabList();
6719
6416
  for (let i = 0; i < tabs.length; i++) {
6720
6417
  const tab = tabs[i];
6721
- if (tab && !tab.disabled) {
6418
+ if (tab && !tab.disabled()) {
6722
6419
  return i;
6723
6420
  }
6724
6421
  }
@@ -6731,29 +6428,23 @@ class TabsComponent {
6731
6428
  const tabs = this.tabList();
6732
6429
  for (let i = tabs.length - 1; i >= 0; i--) {
6733
6430
  const tab = tabs[i];
6734
- if (tab && !tab.disabled) {
6431
+ if (tab && !tab.disabled()) {
6735
6432
  return i;
6736
6433
  }
6737
6434
  }
6738
6435
  return tabs.length - 1;
6739
6436
  }
6740
6437
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6741
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TabsComponent, isStandalone: true, selector: "lc-tabs", inputs: { orientation: "orientation", selectedIndexInput: "selectedIndexInput" }, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
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 });
6742
6439
  }
6743
6440
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TabsComponent, decorators: [{
6744
6441
  type: Component,
6745
- args: [{ selector: 'lc-tabs', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
6442
+ args: [{ selector: 'lc-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
6746
6443
  class: 'lc-tabs',
6747
- }, 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"] }]
6748
- }], ctorParameters: () => [], propDecorators: { orientation: [{
6749
- type: Input
6750
- }], selectedIndexChange: [{
6751
- type: Output
6752
- }], 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"] }]
6445
+ }], 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: [{
6753
6446
  type: ContentChildren,
6754
6447
  args: [TabComponent]
6755
- }], selectedIndexInput: [{
6756
- type: Input
6757
6448
  }] } });
6758
6449
 
6759
6450
  /**
@@ -6809,11 +6500,11 @@ class ToggleGroupComponent {
6809
6500
  return classes.join(' ');
6810
6501
  }
6811
6502
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6812
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ToggleGroupComponent, isStandalone: true, selector: "lc-toggle-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"lc-toggle-group\" [ngClass]=\"sizeClass()\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"option.disabled ?? false\"\n [attr.aria-pressed]=\"isActive(option)\"\n (click)=\"select(option)\"\n >\n {{ option.label }}\n </button>\n }\n</div>\n", styles: [".lc-toggle-group{display:inline-flex;border-radius:var(--border-radius-md, .5rem);overflow:hidden;border:1px solid var(--color-border, #e5e7eb);background-color:var(--color-surface, #ffffff)}[data-theme=dark] .lc-toggle-group,:root[data-theme=dark] .lc-toggle-group{border-color:var(--color-border-dark, #374151);background-color:var(--color-surface-dark, #1f2937)}.lc-toggle-group__btn{border:none;background:transparent;cursor:pointer;font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary, #6b7280);transition:background-color .15s ease,color .15s ease;white-space:nowrap}[data-theme=dark] .lc-toggle-group__btn,:root[data-theme=dark] .lc-toggle-group__btn{color:var(--color-text-secondary-dark, #9ca3af)}.lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active),:root[data-theme=dark] .lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-neutral-800, #1f2937)}.lc-toggle-group__btn--active{background-color:var(--color-primary-600, #2563eb);color:#fff}[data-theme=dark] .lc-toggle-group__btn--active,:root[data-theme=dark] .lc-toggle-group__btn--active{background-color:var(--color-primary-500, #3b82f6);color:#fff}.lc-toggle-group__btn--disabled{opacity:.5;cursor:not-allowed}.lc-toggle-group__btn+.lc-toggle-group__btn{border-left:1px solid var(--color-border, #e5e7eb)}[data-theme=dark] .lc-toggle-group__btn+.lc-toggle-group__btn,:root[data-theme=dark] .lc-toggle-group__btn+.lc-toggle-group__btn{border-left-color:var(--color-border-dark, #374151)}.lc-toggle-group--sm .lc-toggle-group__btn{padding:.25rem .5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-toggle-group--md .lc-toggle-group__btn{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-toggle-group--lg .lc-toggle-group__btn{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6503
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ToggleGroupComponent, isStandalone: true, selector: "lc-toggle-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"lc-toggle-group\" [ngClass]=\"sizeClass()\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"option.disabled ?? false\"\n [attr.aria-pressed]=\"isActive(option)\"\n (click)=\"select(option)\"\n >\n {{ option.label }}\n </button>\n }\n</div>\n", styles: [".lc-toggle-group{display:inline-flex;border-radius:var(--border-radius-md, .5rem);overflow:hidden;border:1px solid var(--color-border, #e5e7eb);background-color:var(--color-surface, #ffffff)}[data-theme=dark] .lc-toggle-group,:root[data-theme=dark] .lc-toggle-group{border-color:var(--color-border-dark, #374151);background-color:var(--color-surface-dark, #1f2937)}.lc-toggle-group__btn{border:none;background:transparent;cursor:pointer;font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary, #6b7280);transition:background-color .15s ease,color .15s ease;white-space:nowrap}[data-theme=dark] .lc-toggle-group__btn,:root[data-theme=dark] .lc-toggle-group__btn{color:var(--color-text-secondary-dark, #9ca3af)}.lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active),:root[data-theme=dark] .lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-neutral-800, #1f2937)}.lc-toggle-group__btn--active{background-color:var(--color-primary-600, #2563eb);color:#fff}[data-theme=dark] .lc-toggle-group__btn--active,:root[data-theme=dark] .lc-toggle-group__btn--active{background-color:var(--color-primary-500, #3b82f6);color:#fff}.lc-toggle-group__btn--disabled{opacity:.5;cursor:not-allowed}.lc-toggle-group__btn+.lc-toggle-group__btn{border-left:1px solid var(--color-border, #e5e7eb)}[data-theme=dark] .lc-toggle-group__btn+.lc-toggle-group__btn,:root[data-theme=dark] .lc-toggle-group__btn+.lc-toggle-group__btn{border-left-color:var(--color-border-dark, #374151)}.lc-toggle-group--sm .lc-toggle-group__btn{padding:.25rem .5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-toggle-group--md .lc-toggle-group__btn{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-toggle-group--lg .lc-toggle-group__btn{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6813
6504
  }
6814
6505
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ToggleGroupComponent, decorators: [{
6815
6506
  type: Component,
6816
- args: [{ selector: 'lc-toggle-group', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-toggle-group\" [ngClass]=\"sizeClass()\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"option.disabled ?? false\"\n [attr.aria-pressed]=\"isActive(option)\"\n (click)=\"select(option)\"\n >\n {{ option.label }}\n </button>\n }\n</div>\n", styles: [".lc-toggle-group{display:inline-flex;border-radius:var(--border-radius-md, .5rem);overflow:hidden;border:1px solid var(--color-border, #e5e7eb);background-color:var(--color-surface, #ffffff)}[data-theme=dark] .lc-toggle-group,:root[data-theme=dark] .lc-toggle-group{border-color:var(--color-border-dark, #374151);background-color:var(--color-surface-dark, #1f2937)}.lc-toggle-group__btn{border:none;background:transparent;cursor:pointer;font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary, #6b7280);transition:background-color .15s ease,color .15s ease;white-space:nowrap}[data-theme=dark] .lc-toggle-group__btn,:root[data-theme=dark] .lc-toggle-group__btn{color:var(--color-text-secondary-dark, #9ca3af)}.lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active),:root[data-theme=dark] .lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-neutral-800, #1f2937)}.lc-toggle-group__btn--active{background-color:var(--color-primary-600, #2563eb);color:#fff}[data-theme=dark] .lc-toggle-group__btn--active,:root[data-theme=dark] .lc-toggle-group__btn--active{background-color:var(--color-primary-500, #3b82f6);color:#fff}.lc-toggle-group__btn--disabled{opacity:.5;cursor:not-allowed}.lc-toggle-group__btn+.lc-toggle-group__btn{border-left:1px solid var(--color-border, #e5e7eb)}[data-theme=dark] .lc-toggle-group__btn+.lc-toggle-group__btn,:root[data-theme=dark] .lc-toggle-group__btn+.lc-toggle-group__btn{border-left-color:var(--color-border-dark, #374151)}.lc-toggle-group--sm .lc-toggle-group__btn{padding:.25rem .5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-toggle-group--md .lc-toggle-group__btn{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-toggle-group--lg .lc-toggle-group__btn{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem)}\n"] }]
6507
+ args: [{ selector: 'lc-toggle-group', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-toggle-group\" [ngClass]=\"sizeClass()\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n [class]=\"getButtonClasses(option)\"\n [disabled]=\"option.disabled ?? false\"\n [attr.aria-pressed]=\"isActive(option)\"\n (click)=\"select(option)\"\n >\n {{ option.label }}\n </button>\n }\n</div>\n", styles: [".lc-toggle-group{display:inline-flex;border-radius:var(--border-radius-md, .5rem);overflow:hidden;border:1px solid var(--color-border, #e5e7eb);background-color:var(--color-surface, #ffffff)}[data-theme=dark] .lc-toggle-group,:root[data-theme=dark] .lc-toggle-group{border-color:var(--color-border-dark, #374151);background-color:var(--color-surface-dark, #1f2937)}.lc-toggle-group__btn{border:none;background:transparent;cursor:pointer;font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary, #6b7280);transition:background-color .15s ease,color .15s ease;white-space:nowrap}[data-theme=dark] .lc-toggle-group__btn,:root[data-theme=dark] .lc-toggle-group__btn{color:var(--color-text-secondary-dark, #9ca3af)}.lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active),:root[data-theme=dark] .lc-toggle-group__btn:hover:not(:disabled):not(.lc-toggle-group__btn--active){background-color:var(--color-neutral-800, #1f2937)}.lc-toggle-group__btn--active{background-color:var(--color-primary-600, #2563eb);color:#fff}[data-theme=dark] .lc-toggle-group__btn--active,:root[data-theme=dark] .lc-toggle-group__btn--active{background-color:var(--color-primary-500, #3b82f6);color:#fff}.lc-toggle-group__btn--disabled{opacity:.5;cursor:not-allowed}.lc-toggle-group__btn+.lc-toggle-group__btn{border-left:1px solid var(--color-border, #e5e7eb)}[data-theme=dark] .lc-toggle-group__btn+.lc-toggle-group__btn,:root[data-theme=dark] .lc-toggle-group__btn+.lc-toggle-group__btn{border-left-color:var(--color-border-dark, #374151)}.lc-toggle-group--sm .lc-toggle-group__btn{padding:.25rem .5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-toggle-group--md .lc-toggle-group__btn{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-toggle-group--lg .lc-toggle-group__btn{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem)}\n"] }]
6817
6508
  }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
6818
6509
 
6819
6510
  /**
@@ -6922,11 +6613,11 @@ class ListComponent {
6922
6613
  this.actionClick.emit(item);
6923
6614
  }
6924
6615
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6925
- 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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", "isLoading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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 });
6926
6617
  }
6927
6618
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ListComponent, decorators: [{
6928
6619
  type: Component,
6929
- args: [{ selector: 'lc-list', standalone: true, imports: [CommonModule, 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"] }]
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"] }]
6930
6621
  }], propDecorators: { itemTemplate: [{
6931
6622
  type: ContentChild,
6932
6623
  args: [ListItemTemplateDirective]
@@ -6999,11 +6690,11 @@ class ChipComponent {
6999
6690
  }
7000
6691
  }
7001
6692
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7002
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChipComponent, isStandalone: true, selector: "lc-chip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<span \n [class]=\"chipClasses()\"\n [attr.role]=\"removable() ? 'button' : null\"\n [attr.tabindex]=\"removable() ? (disabled() ? '-1' : '0') : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (keydown)=\"onKeydown($event)\"\n>\n <span class=\"lc-chip__content\">\n @if (icon()) {\n <lc-icon [name]=\"icon()!\" class=\"lc-chip__icon\" size=\"sm\" />\n }\n <span class=\"lc-chip__label\">\n <ng-content></ng-content>\n </span>\n @if (removable() && !disabled()) {\n <button\n type=\"button\"\n class=\"lc-chip__delete\"\n aria-label=\"Remove chip\"\n (click)=\"onRemove($event)\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\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 >\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 </span>\n</span>\n", styles: [".lc-chip{display:inline-flex;align-items:center;border-radius:var(--border-radius-full, 9999px);font-weight:var(--typography-font-weight-medium, 500);line-height:1;white-space:nowrap;transition:background-color .15s ease,color .15s ease,opacity .15s ease;cursor:default;-webkit-user-select:none;user-select:none}.lc-chip__content{display:inline-flex;align-items:center;gap:.375rem}.lc-chip__label{display:inline-flex;align-items:center}.lc-chip__delete{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;cursor:pointer;color:currentColor;opacity:.6;transition:opacity .15s ease;flex-shrink:0}.lc-chip__delete:hover{opacity:1}.lc-chip__delete:focus{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}.lc-chip__delete svg{width:1em;height:1em}.lc-chip--sm{padding:.25rem .625rem;font-size:var(--typography-font-size-sm, .875rem);height:1.5rem}.lc-chip--sm .lc-chip__content{gap:.25rem}.lc-chip--md{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem);height:2rem}.lc-chip--lg{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem);height:2.5rem}.lc-chip--lg .lc-chip__content{gap:.5rem}.lc-chip--default{background-color:var(--color-neutral-200);color:var(--color-neutral-800)}[data-theme=dark] .lc-chip--default,:root[data-theme=dark] .lc-chip--default{background-color:var(--color-neutral-700);color:var(--color-neutral-100)}.lc-chip--primary{background-color:var(--color-primary-100);color:var(--color-primary-800)}[data-theme=dark] .lc-chip--primary,:root[data-theme=dark] .lc-chip--primary{background-color:var(--color-primary-900);color:var(--color-primary-200)}.lc-chip--success{background-color:var(--color-success-light);color:var(--color-success-dark)}[data-theme=dark] .lc-chip--success,:root[data-theme=dark] .lc-chip--success{background-color:#22c55e33;color:#86efac}.lc-chip--warning{background-color:var(--color-warning-light);color:var(--color-warning-dark)}[data-theme=dark] .lc-chip--warning,:root[data-theme=dark] .lc-chip--warning{background-color:#fbbf2433;color:#fde047}.lc-chip--error{background-color:var(--color-error-light);color:var(--color-error-dark)}[data-theme=dark] .lc-chip--error,:root[data-theme=dark] .lc-chip--error{background-color:#ef444433;color:#fca5a5}.lc-chip--info{background-color:#3b82f61a;color:#1d4ed8}[data-theme=dark] .lc-chip--info,:root[data-theme=dark] .lc-chip--info{background-color:#3b82f633;color:#93c5fd}.lc-chip--removable{cursor:pointer}.lc-chip--removable:hover:not(.lc-chip--removable--disabled){opacity:.9}.lc-chip--removable:focus-visible{outline:2px solid var(--color-primary-600);outline-offset:2px}.lc-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-chip__icon{display:inline-flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6693
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChipComponent, isStandalone: true, selector: "lc-chip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<span \n [class]=\"chipClasses()\"\n [attr.role]=\"removable() ? 'button' : null\"\n [attr.tabindex]=\"removable() ? (disabled() ? '-1' : '0') : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (keydown)=\"onKeydown($event)\"\n>\n <span class=\"lc-chip__content\">\n @if (icon()) {\n <lc-icon [name]=\"icon()!\" class=\"lc-chip__icon\" size=\"sm\" />\n }\n <span class=\"lc-chip__label\">\n <ng-content></ng-content>\n </span>\n @if (removable() && !disabled()) {\n <button\n type=\"button\"\n class=\"lc-chip__delete\"\n aria-label=\"Remove chip\"\n (click)=\"onRemove($event)\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\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 >\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 </span>\n</span>\n", styles: [".lc-chip{display:inline-flex;align-items:center;border-radius:var(--border-radius-full, 9999px);font-weight:var(--typography-font-weight-medium, 500);line-height:1;white-space:nowrap;transition:background-color .15s ease,color .15s ease,opacity .15s ease;cursor:default;-webkit-user-select:none;user-select:none}.lc-chip__content{display:inline-flex;align-items:center;gap:.375rem}.lc-chip__label{display:inline-flex;align-items:center}.lc-chip__delete{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;cursor:pointer;color:currentColor;opacity:.6;transition:opacity .15s ease;flex-shrink:0}.lc-chip__delete:hover{opacity:1}.lc-chip__delete:focus{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}.lc-chip__delete svg{width:1em;height:1em}.lc-chip--sm{padding:.25rem .625rem;font-size:var(--typography-font-size-sm, .875rem);height:1.5rem}.lc-chip--sm .lc-chip__content{gap:.25rem}.lc-chip--md{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem);height:2rem}.lc-chip--lg{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem);height:2.5rem}.lc-chip--lg .lc-chip__content{gap:.5rem}.lc-chip--default{background-color:var(--color-neutral-200);color:var(--color-neutral-800)}[data-theme=dark] .lc-chip--default,:root[data-theme=dark] .lc-chip--default{background-color:var(--color-neutral-700);color:var(--color-neutral-100)}.lc-chip--primary{background-color:var(--color-primary-100);color:var(--color-primary-800)}[data-theme=dark] .lc-chip--primary,:root[data-theme=dark] .lc-chip--primary{background-color:var(--color-primary-900);color:var(--color-primary-200)}.lc-chip--success{background-color:var(--color-success-light);color:var(--color-success-dark)}[data-theme=dark] .lc-chip--success,:root[data-theme=dark] .lc-chip--success{background-color:#22c55e33;color:#86efac}.lc-chip--warning{background-color:var(--color-warning-light);color:var(--color-warning-dark)}[data-theme=dark] .lc-chip--warning,:root[data-theme=dark] .lc-chip--warning{background-color:#fbbf2433;color:#fde047}.lc-chip--error{background-color:var(--color-error-light);color:var(--color-error-dark)}[data-theme=dark] .lc-chip--error,:root[data-theme=dark] .lc-chip--error{background-color:#ef444433;color:#fca5a5}.lc-chip--info{background-color:#3b82f61a;color:#1d4ed8}[data-theme=dark] .lc-chip--info,:root[data-theme=dark] .lc-chip--info{background-color:#3b82f633;color:#93c5fd}.lc-chip--removable{cursor:pointer}.lc-chip--removable:hover:not(.lc-chip--removable--disabled){opacity:.9}.lc-chip--removable:focus-visible{outline:2px solid var(--color-primary-600);outline-offset:2px}.lc-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-chip__icon{display:inline-flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7003
6694
  }
7004
6695
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChipComponent, decorators: [{
7005
6696
  type: Component,
7006
- args: [{ selector: 'lc-chip', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span \n [class]=\"chipClasses()\"\n [attr.role]=\"removable() ? 'button' : null\"\n [attr.tabindex]=\"removable() ? (disabled() ? '-1' : '0') : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (keydown)=\"onKeydown($event)\"\n>\n <span class=\"lc-chip__content\">\n @if (icon()) {\n <lc-icon [name]=\"icon()!\" class=\"lc-chip__icon\" size=\"sm\" />\n }\n <span class=\"lc-chip__label\">\n <ng-content></ng-content>\n </span>\n @if (removable() && !disabled()) {\n <button\n type=\"button\"\n class=\"lc-chip__delete\"\n aria-label=\"Remove chip\"\n (click)=\"onRemove($event)\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\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 >\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 </span>\n</span>\n", styles: [".lc-chip{display:inline-flex;align-items:center;border-radius:var(--border-radius-full, 9999px);font-weight:var(--typography-font-weight-medium, 500);line-height:1;white-space:nowrap;transition:background-color .15s ease,color .15s ease,opacity .15s ease;cursor:default;-webkit-user-select:none;user-select:none}.lc-chip__content{display:inline-flex;align-items:center;gap:.375rem}.lc-chip__label{display:inline-flex;align-items:center}.lc-chip__delete{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;cursor:pointer;color:currentColor;opacity:.6;transition:opacity .15s ease;flex-shrink:0}.lc-chip__delete:hover{opacity:1}.lc-chip__delete:focus{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}.lc-chip__delete svg{width:1em;height:1em}.lc-chip--sm{padding:.25rem .625rem;font-size:var(--typography-font-size-sm, .875rem);height:1.5rem}.lc-chip--sm .lc-chip__content{gap:.25rem}.lc-chip--md{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem);height:2rem}.lc-chip--lg{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem);height:2.5rem}.lc-chip--lg .lc-chip__content{gap:.5rem}.lc-chip--default{background-color:var(--color-neutral-200);color:var(--color-neutral-800)}[data-theme=dark] .lc-chip--default,:root[data-theme=dark] .lc-chip--default{background-color:var(--color-neutral-700);color:var(--color-neutral-100)}.lc-chip--primary{background-color:var(--color-primary-100);color:var(--color-primary-800)}[data-theme=dark] .lc-chip--primary,:root[data-theme=dark] .lc-chip--primary{background-color:var(--color-primary-900);color:var(--color-primary-200)}.lc-chip--success{background-color:var(--color-success-light);color:var(--color-success-dark)}[data-theme=dark] .lc-chip--success,:root[data-theme=dark] .lc-chip--success{background-color:#22c55e33;color:#86efac}.lc-chip--warning{background-color:var(--color-warning-light);color:var(--color-warning-dark)}[data-theme=dark] .lc-chip--warning,:root[data-theme=dark] .lc-chip--warning{background-color:#fbbf2433;color:#fde047}.lc-chip--error{background-color:var(--color-error-light);color:var(--color-error-dark)}[data-theme=dark] .lc-chip--error,:root[data-theme=dark] .lc-chip--error{background-color:#ef444433;color:#fca5a5}.lc-chip--info{background-color:#3b82f61a;color:#1d4ed8}[data-theme=dark] .lc-chip--info,:root[data-theme=dark] .lc-chip--info{background-color:#3b82f633;color:#93c5fd}.lc-chip--removable{cursor:pointer}.lc-chip--removable:hover:not(.lc-chip--removable--disabled){opacity:.9}.lc-chip--removable:focus-visible{outline:2px solid var(--color-primary-600);outline-offset:2px}.lc-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-chip__icon{display:inline-flex;align-items:center;flex-shrink:0}\n"] }]
6697
+ args: [{ selector: 'lc-chip', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span \n [class]=\"chipClasses()\"\n [attr.role]=\"removable() ? 'button' : null\"\n [attr.tabindex]=\"removable() ? (disabled() ? '-1' : '0') : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (keydown)=\"onKeydown($event)\"\n>\n <span class=\"lc-chip__content\">\n @if (icon()) {\n <lc-icon [name]=\"icon()!\" class=\"lc-chip__icon\" size=\"sm\" />\n }\n <span class=\"lc-chip__label\">\n <ng-content></ng-content>\n </span>\n @if (removable() && !disabled()) {\n <button\n type=\"button\"\n class=\"lc-chip__delete\"\n aria-label=\"Remove chip\"\n (click)=\"onRemove($event)\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\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 >\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 </span>\n</span>\n", styles: [".lc-chip{display:inline-flex;align-items:center;border-radius:var(--border-radius-full, 9999px);font-weight:var(--typography-font-weight-medium, 500);line-height:1;white-space:nowrap;transition:background-color .15s ease,color .15s ease,opacity .15s ease;cursor:default;-webkit-user-select:none;user-select:none}.lc-chip__content{display:inline-flex;align-items:center;gap:.375rem}.lc-chip__label{display:inline-flex;align-items:center}.lc-chip__delete{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;cursor:pointer;color:currentColor;opacity:.6;transition:opacity .15s ease;flex-shrink:0}.lc-chip__delete:hover{opacity:1}.lc-chip__delete:focus{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}.lc-chip__delete svg{width:1em;height:1em}.lc-chip--sm{padding:.25rem .625rem;font-size:var(--typography-font-size-sm, .875rem);height:1.5rem}.lc-chip--sm .lc-chip__content{gap:.25rem}.lc-chip--md{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem);height:2rem}.lc-chip--lg{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem);height:2.5rem}.lc-chip--lg .lc-chip__content{gap:.5rem}.lc-chip--default{background-color:var(--color-neutral-200);color:var(--color-neutral-800)}[data-theme=dark] .lc-chip--default,:root[data-theme=dark] .lc-chip--default{background-color:var(--color-neutral-700);color:var(--color-neutral-100)}.lc-chip--primary{background-color:var(--color-primary-100);color:var(--color-primary-800)}[data-theme=dark] .lc-chip--primary,:root[data-theme=dark] .lc-chip--primary{background-color:var(--color-primary-900);color:var(--color-primary-200)}.lc-chip--success{background-color:var(--color-success-light);color:var(--color-success-dark)}[data-theme=dark] .lc-chip--success,:root[data-theme=dark] .lc-chip--success{background-color:#22c55e33;color:#86efac}.lc-chip--warning{background-color:var(--color-warning-light);color:var(--color-warning-dark)}[data-theme=dark] .lc-chip--warning,:root[data-theme=dark] .lc-chip--warning{background-color:#fbbf2433;color:#fde047}.lc-chip--error{background-color:var(--color-error-light);color:var(--color-error-dark)}[data-theme=dark] .lc-chip--error,:root[data-theme=dark] .lc-chip--error{background-color:#ef444433;color:#fca5a5}.lc-chip--info{background-color:#3b82f61a;color:#1d4ed8}[data-theme=dark] .lc-chip--info,:root[data-theme=dark] .lc-chip--info{background-color:#3b82f633;color:#93c5fd}.lc-chip--removable{cursor:pointer}.lc-chip--removable:hover:not(.lc-chip--removable--disabled){opacity:.9}.lc-chip--removable:focus-visible{outline:2px solid var(--color-primary-600);outline-offset:2px}.lc-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-chip__icon{display:inline-flex;align-items:center;flex-shrink:0}\n"] }]
7007
6698
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
7008
6699
 
7009
6700
  /**
@@ -7020,10 +6711,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
7020
6711
  */
7021
6712
  class TableCellDirective {
7022
6713
  /** The column key this template applies to */
7023
- columnKey = '';
6714
+ columnKey = input('', { ...(ngDevMode ? { debugName: "columnKey" } : /* istanbul ignore next */ {}), alias: 'lcTableCell' });
7024
6715
  template = inject((TemplateRef));
7025
6716
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
7026
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: TableCellDirective, isStandalone: true, selector: "[lcTableCell]", inputs: { columnKey: ["lcTableCell", "columnKey"] }, ngImport: i0 });
6717
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: TableCellDirective, isStandalone: true, selector: "[lcTableCell]", inputs: { columnKey: { classPropertyName: "columnKey", publicName: "lcTableCell", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
7027
6718
  }
7028
6719
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableCellDirective, decorators: [{
7029
6720
  type: Directive,
@@ -7031,10 +6722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
7031
6722
  selector: '[lcTableCell]',
7032
6723
  standalone: true,
7033
6724
  }]
7034
- }], propDecorators: { columnKey: [{
7035
- type: Input,
7036
- args: ['lcTableCell']
7037
- }] } });
6725
+ }], propDecorators: { columnKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "lcTableCell", required: false }] }] } });
7038
6726
 
7039
6727
  /**
7040
6728
  * Table component for displaying structured data in rows and columns.
@@ -7231,7 +6919,7 @@ class TableComponent {
7231
6919
  return row[columnKey];
7232
6920
  }
7233
6921
  getCellTemplate(columnKey) {
7234
- return this.cellTemplates?.find((template) => template.columnKey === columnKey);
6922
+ return this.cellTemplates?.find((template) => template.columnKey() === columnKey);
7235
6923
  }
7236
6924
  hasCustomTemplate(columnKey) {
7237
6925
  return !!this.getCellTemplate(columnKey);
@@ -7341,12 +7029,15 @@ class TableComponent {
7341
7029
  this.cancelEdit();
7342
7030
  }
7343
7031
  }
7032
+ getInputValue(event) {
7033
+ return event.target.value;
7034
+ }
7344
7035
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7345
- 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) {\n <tr\n [class.lc-table__row--selected]=\"selectable() && isRowSelected($index)\"\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($any($event.target).value)\"\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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 });
7346
7037
  }
7347
7038
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableComponent, decorators: [{
7348
7039
  type: Component,
7349
- args: [{ selector: 'lc-table', standalone: true, imports: [CommonModule], 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) {\n <tr\n [class.lc-table__row--selected]=\"selectable() && isRowSelected($index)\"\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($any($event.target).value)\"\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"] }]
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"] }]
7350
7041
  }], propDecorators: { cellTemplates: [{
7351
7042
  type: ContentChildren,
7352
7043
  args: [TableCellDirective]
@@ -7392,11 +7083,11 @@ class FieldGroupComponent {
7392
7083
  */
7393
7084
  compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
7394
7085
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7395
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FieldGroupComponent, isStandalone: true, selector: "lc-field-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.lc-field-group--with-icon": "icon()", "class.lc-field-group--compact": "compact()" }, classAttribute: "lc-field-group" }, ngImport: i0, template: "@if (icon()) {\n <lc-icon [name]=\"icon()!\" [size]=\"iconSize()\" class=\"lc-field-group__icon\"></lc-icon>\n}\n\n<div class=\"lc-field-group__content\">\n <span class=\"lc-field-group__label\">{{ label() }}</span>\n @if (value()) {\n <p class=\"lc-field-group__value\">{{ value() }}</p>\n } @else {\n <div class=\"lc-field-group__value\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-radius:var(--radius-md);background:var(--color-surface);transition:background-color .2s ease}:host:hover{background:var(--color-surface-hover)}:host.lc-field-group--with-icon{flex-direction:row;align-items:flex-start;gap:1rem;padding:1.25rem}:host.lc-field-group--compact{padding:.75rem;gap:.25rem}:host.lc-field-group--compact.lc-field-group--with-icon{padding:.75rem 1rem;gap:.75rem}.lc-field-group__icon{color:var(--color-primary);flex-shrink:0;margin-top:.125rem}.lc-field-group__content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.lc-field-group__label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);line-height:1.2}.lc-field-group__value{font-size:1rem;font-weight:500;color:var(--color-text-primary);margin:0;line-height:1.4;word-break:break-word}.lc-field-group__value:empty:after{content:\"\\2014\";color:var(--color-text-tertiary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7086
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FieldGroupComponent, isStandalone: true, selector: "lc-field-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.lc-field-group--with-icon": "icon()", "class.lc-field-group--compact": "compact()" }, classAttribute: "lc-field-group" }, ngImport: i0, template: "@if (icon()) {\n <lc-icon [name]=\"icon()!\" [size]=\"iconSize()\" class=\"lc-field-group__icon\"></lc-icon>\n}\n\n<div class=\"lc-field-group__content\">\n <span class=\"lc-field-group__label\">{{ label() }}</span>\n @if (value()) {\n <p class=\"lc-field-group__value\">{{ value() }}</p>\n } @else {\n <div class=\"lc-field-group__value\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-radius:var(--radius-md);background:var(--color-surface);transition:background-color .2s ease}:host:hover{background:var(--color-surface-hover)}:host.lc-field-group--with-icon{flex-direction:row;align-items:flex-start;gap:1rem;padding:1.25rem}:host.lc-field-group--compact{padding:.75rem;gap:.25rem}:host.lc-field-group--compact.lc-field-group--with-icon{padding:.75rem 1rem;gap:.75rem}.lc-field-group__icon{color:var(--color-primary);flex-shrink:0;margin-top:.125rem}.lc-field-group__content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.lc-field-group__label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);line-height:1.2}.lc-field-group__value{font-size:1rem;font-weight:500;color:var(--color-text-primary);margin:0;line-height:1.4;word-break:break-word}.lc-field-group__value:empty:after{content:\"\\2014\";color:var(--color-text-tertiary)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7396
7087
  }
7397
7088
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FieldGroupComponent, decorators: [{
7398
7089
  type: Component,
7399
- args: [{ selector: 'lc-field-group', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
7090
+ args: [{ selector: 'lc-field-group', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
7400
7091
  class: 'lc-field-group',
7401
7092
  '[class.lc-field-group--with-icon]': 'icon()',
7402
7093
  '[class.lc-field-group--compact]': 'compact()',
@@ -7498,11 +7189,11 @@ class StepperComponent {
7498
7189
  return classes.join(' ');
7499
7190
  }
7500
7191
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7501
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: StepperComponent, isStandalone: true, selector: "lc-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, ngImport: i0, template: "<div\n class=\"lc-stepper\"\n [class.lc-stepper--horizontal]=\"orientation() === 'horizontal'\"\n [class.lc-stepper--vertical]=\"orientation() === 'vertical'\"\n>\n <!-- Step indicators -->\n <div class=\"lc-stepper__header\">\n @for (step of steps(); track $index; let last = $last) {\n <div [class]=\"getStepClasses($index)\" (click)=\"goToStep($index)\">\n <div class=\"lc-stepper__indicator\">\n @if (getStepState($index) === 'completed') {\n <!-- Checkmark for completed -->\n <svg class=\"lc-stepper__check\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n } @else {\n <span class=\"lc-stepper__number\">{{ $index + 1 }}</span>\n }\n </div>\n <div class=\"lc-stepper__label\">\n <span class=\"lc-stepper__title\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"lc-stepper__description\">{{ step.description }}</span>\n }\n @if (step.optional) {\n <span class=\"lc-stepper__optional\">Optional</span>\n }\n </div>\n </div>\n\n @if (!last) {\n <div [class]=\"getConnectorClasses($index)\"></div>\n }\n }\n </div>\n\n <!-- Step content area (projected) -->\n <div class=\"lc-stepper__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".lc-stepper{width:100%}.lc-stepper__header{display:flex;align-items:center;gap:0}.lc-stepper--horizontal .lc-stepper__header{flex-direction:row}.lc-stepper--vertical .lc-stepper__header{flex-direction:column;align-items:flex-start}.lc-stepper__step{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.lc-stepper__step--clickable{cursor:pointer}.lc-stepper__indicator{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);transition:all .2s ease}.lc-stepper__step--pending .lc-stepper__indicator{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-stepper__step--pending .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--pending .lc-stepper__indicator{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-400, #9ca3af)}.lc-stepper__step--active .lc-stepper__indicator{background-color:var(--color-primary-600, #2563eb);color:#fff;box-shadow:0 0 0 4px var(--color-primary-100, #dbeafe)}[data-theme=dark] .lc-stepper__step--active .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--active .lc-stepper__indicator{background-color:var(--color-primary-500, #3b82f6);box-shadow:0 0 0 4px #1e3a8a66}.lc-stepper__step--completed .lc-stepper__indicator{background-color:var(--color-success-default, #16a34a);color:#fff}[data-theme=dark] .lc-stepper__step--completed .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--completed .lc-stepper__indicator{background-color:var(--color-success-light, #22c55e)}.lc-stepper__check{width:1rem;height:1rem}.lc-stepper__number{line-height:1}.lc-stepper__label{display:flex;flex-direction:column}.lc-stepper__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-900, #111827)}[data-theme=dark] .lc-stepper__title,:root[data-theme=dark] .lc-stepper__title{color:var(--color-neutral-100, #f3f4f6)}.lc-stepper__step--pending .lc-stepper__title{color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-stepper__step--pending .lc-stepper__title,:root[data-theme=dark] .lc-stepper__step--pending .lc-stepper__title{color:var(--color-neutral-400, #9ca3af)}.lc-stepper__description{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-500, #6b7280);margin-top:.125rem}[data-theme=dark] .lc-stepper__description,:root[data-theme=dark] .lc-stepper__description{color:var(--color-neutral-400, #9ca3af)}.lc-stepper__optional{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);font-style:italic;margin-top:.125rem}[data-theme=dark] .lc-stepper__optional,:root[data-theme=dark] .lc-stepper__optional{color:var(--color-neutral-500, #6b7280)}.lc-stepper__connector{flex:1;height:.125rem;min-width:2rem;margin:0 .5rem;background-color:var(--color-neutral-200, #e5e7eb);transition:background-color .2s ease}[data-theme=dark] .lc-stepper__connector,:root[data-theme=dark] .lc-stepper__connector{background-color:var(--color-neutral-700, #374151)}.lc-stepper__connector--completed{background-color:var(--color-success-default, #16a34a)}[data-theme=dark] .lc-stepper__connector--completed,:root[data-theme=dark] .lc-stepper__connector--completed{background-color:var(--color-success-light, #22c55e)}.lc-stepper--vertical .lc-stepper__connector{width:.125rem;height:2rem;min-width:0;margin:.25rem 0 .25rem 1rem}.lc-stepper__content{margin-top:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7192
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: StepperComponent, isStandalone: true, selector: "lc-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange" }, ngImport: i0, template: "<div\n class=\"lc-stepper\"\n [class.lc-stepper--horizontal]=\"orientation() === 'horizontal'\"\n [class.lc-stepper--vertical]=\"orientation() === 'vertical'\"\n>\n <!-- Step indicators -->\n <div class=\"lc-stepper__header\">\n @for (step of steps(); track step.label; let i = $index; let last = $last) {\n <div [class]=\"getStepClasses(i)\" (click)=\"goToStep(i)\">\n <div class=\"lc-stepper__indicator\">\n @if (getStepState(i) === 'completed') {\n <!-- Checkmark for completed -->\n <svg class=\"lc-stepper__check\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n } @else {\n <span class=\"lc-stepper__number\">{{ i + 1 }}</span>\n }\n </div>\n <div class=\"lc-stepper__label\">\n <span class=\"lc-stepper__title\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"lc-stepper__description\">{{ step.description }}</span>\n }\n @if (step.optional) {\n <span class=\"lc-stepper__optional\">Optional</span>\n }\n </div>\n </div>\n\n @if (!last) {\n <div [class]=\"getConnectorClasses(i)\"></div>\n }\n }\n </div>\n\n <!-- Step content area (projected) -->\n <div class=\"lc-stepper__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".lc-stepper{width:100%}.lc-stepper__header{display:flex;align-items:center;gap:0}.lc-stepper--horizontal .lc-stepper__header{flex-direction:row}.lc-stepper--vertical .lc-stepper__header{flex-direction:column;align-items:flex-start}.lc-stepper__step{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.lc-stepper__step--clickable{cursor:pointer}.lc-stepper__indicator{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);transition:all .2s ease}.lc-stepper__step--pending .lc-stepper__indicator{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-stepper__step--pending .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--pending .lc-stepper__indicator{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-400, #9ca3af)}.lc-stepper__step--active .lc-stepper__indicator{background-color:var(--color-primary-600, #2563eb);color:#fff;box-shadow:0 0 0 4px var(--color-primary-100, #dbeafe)}[data-theme=dark] .lc-stepper__step--active .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--active .lc-stepper__indicator{background-color:var(--color-primary-500, #3b82f6);box-shadow:0 0 0 4px #1e3a8a66}.lc-stepper__step--completed .lc-stepper__indicator{background-color:var(--color-success-default, #16a34a);color:#fff}[data-theme=dark] .lc-stepper__step--completed .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--completed .lc-stepper__indicator{background-color:var(--color-success-light, #22c55e)}.lc-stepper__check{width:1rem;height:1rem}.lc-stepper__number{line-height:1}.lc-stepper__label{display:flex;flex-direction:column}.lc-stepper__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-900, #111827)}[data-theme=dark] .lc-stepper__title,:root[data-theme=dark] .lc-stepper__title{color:var(--color-neutral-100, #f3f4f6)}.lc-stepper__step--pending .lc-stepper__title{color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-stepper__step--pending .lc-stepper__title,:root[data-theme=dark] .lc-stepper__step--pending .lc-stepper__title{color:var(--color-neutral-400, #9ca3af)}.lc-stepper__description{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-500, #6b7280);margin-top:.125rem}[data-theme=dark] .lc-stepper__description,:root[data-theme=dark] .lc-stepper__description{color:var(--color-neutral-400, #9ca3af)}.lc-stepper__optional{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);font-style:italic;margin-top:.125rem}[data-theme=dark] .lc-stepper__optional,:root[data-theme=dark] .lc-stepper__optional{color:var(--color-neutral-500, #6b7280)}.lc-stepper__connector{flex:1;height:.125rem;min-width:2rem;margin:0 .5rem;background-color:var(--color-neutral-200, #e5e7eb);transition:background-color .2s ease}[data-theme=dark] .lc-stepper__connector,:root[data-theme=dark] .lc-stepper__connector{background-color:var(--color-neutral-700, #374151)}.lc-stepper__connector--completed{background-color:var(--color-success-default, #16a34a)}[data-theme=dark] .lc-stepper__connector--completed,:root[data-theme=dark] .lc-stepper__connector--completed{background-color:var(--color-success-light, #22c55e)}.lc-stepper--vertical .lc-stepper__connector{width:.125rem;height:2rem;min-width:0;margin:.25rem 0 .25rem 1rem}.lc-stepper__content{margin-top:1.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7502
7193
  }
7503
7194
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StepperComponent, decorators: [{
7504
7195
  type: Component,
7505
- args: [{ selector: 'lc-stepper', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"lc-stepper\"\n [class.lc-stepper--horizontal]=\"orientation() === 'horizontal'\"\n [class.lc-stepper--vertical]=\"orientation() === 'vertical'\"\n>\n <!-- Step indicators -->\n <div class=\"lc-stepper__header\">\n @for (step of steps(); track $index; let last = $last) {\n <div [class]=\"getStepClasses($index)\" (click)=\"goToStep($index)\">\n <div class=\"lc-stepper__indicator\">\n @if (getStepState($index) === 'completed') {\n <!-- Checkmark for completed -->\n <svg class=\"lc-stepper__check\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n } @else {\n <span class=\"lc-stepper__number\">{{ $index + 1 }}</span>\n }\n </div>\n <div class=\"lc-stepper__label\">\n <span class=\"lc-stepper__title\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"lc-stepper__description\">{{ step.description }}</span>\n }\n @if (step.optional) {\n <span class=\"lc-stepper__optional\">Optional</span>\n }\n </div>\n </div>\n\n @if (!last) {\n <div [class]=\"getConnectorClasses($index)\"></div>\n }\n }\n </div>\n\n <!-- Step content area (projected) -->\n <div class=\"lc-stepper__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".lc-stepper{width:100%}.lc-stepper__header{display:flex;align-items:center;gap:0}.lc-stepper--horizontal .lc-stepper__header{flex-direction:row}.lc-stepper--vertical .lc-stepper__header{flex-direction:column;align-items:flex-start}.lc-stepper__step{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.lc-stepper__step--clickable{cursor:pointer}.lc-stepper__indicator{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);transition:all .2s ease}.lc-stepper__step--pending .lc-stepper__indicator{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-stepper__step--pending .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--pending .lc-stepper__indicator{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-400, #9ca3af)}.lc-stepper__step--active .lc-stepper__indicator{background-color:var(--color-primary-600, #2563eb);color:#fff;box-shadow:0 0 0 4px var(--color-primary-100, #dbeafe)}[data-theme=dark] .lc-stepper__step--active .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--active .lc-stepper__indicator{background-color:var(--color-primary-500, #3b82f6);box-shadow:0 0 0 4px #1e3a8a66}.lc-stepper__step--completed .lc-stepper__indicator{background-color:var(--color-success-default, #16a34a);color:#fff}[data-theme=dark] .lc-stepper__step--completed .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--completed .lc-stepper__indicator{background-color:var(--color-success-light, #22c55e)}.lc-stepper__check{width:1rem;height:1rem}.lc-stepper__number{line-height:1}.lc-stepper__label{display:flex;flex-direction:column}.lc-stepper__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-900, #111827)}[data-theme=dark] .lc-stepper__title,:root[data-theme=dark] .lc-stepper__title{color:var(--color-neutral-100, #f3f4f6)}.lc-stepper__step--pending .lc-stepper__title{color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-stepper__step--pending .lc-stepper__title,:root[data-theme=dark] .lc-stepper__step--pending .lc-stepper__title{color:var(--color-neutral-400, #9ca3af)}.lc-stepper__description{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-500, #6b7280);margin-top:.125rem}[data-theme=dark] .lc-stepper__description,:root[data-theme=dark] .lc-stepper__description{color:var(--color-neutral-400, #9ca3af)}.lc-stepper__optional{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);font-style:italic;margin-top:.125rem}[data-theme=dark] .lc-stepper__optional,:root[data-theme=dark] .lc-stepper__optional{color:var(--color-neutral-500, #6b7280)}.lc-stepper__connector{flex:1;height:.125rem;min-width:2rem;margin:0 .5rem;background-color:var(--color-neutral-200, #e5e7eb);transition:background-color .2s ease}[data-theme=dark] .lc-stepper__connector,:root[data-theme=dark] .lc-stepper__connector{background-color:var(--color-neutral-700, #374151)}.lc-stepper__connector--completed{background-color:var(--color-success-default, #16a34a)}[data-theme=dark] .lc-stepper__connector--completed,:root[data-theme=dark] .lc-stepper__connector--completed{background-color:var(--color-success-light, #22c55e)}.lc-stepper--vertical .lc-stepper__connector{width:.125rem;height:2rem;min-width:0;margin:.25rem 0 .25rem 1rem}.lc-stepper__content{margin-top:1.5rem}\n"] }]
7196
+ args: [{ selector: 'lc-stepper', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"lc-stepper\"\n [class.lc-stepper--horizontal]=\"orientation() === 'horizontal'\"\n [class.lc-stepper--vertical]=\"orientation() === 'vertical'\"\n>\n <!-- Step indicators -->\n <div class=\"lc-stepper__header\">\n @for (step of steps(); track step.label; let i = $index; let last = $last) {\n <div [class]=\"getStepClasses(i)\" (click)=\"goToStep(i)\">\n <div class=\"lc-stepper__indicator\">\n @if (getStepState(i) === 'completed') {\n <!-- Checkmark for completed -->\n <svg class=\"lc-stepper__check\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path\n fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n } @else {\n <span class=\"lc-stepper__number\">{{ i + 1 }}</span>\n }\n </div>\n <div class=\"lc-stepper__label\">\n <span class=\"lc-stepper__title\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"lc-stepper__description\">{{ step.description }}</span>\n }\n @if (step.optional) {\n <span class=\"lc-stepper__optional\">Optional</span>\n }\n </div>\n </div>\n\n @if (!last) {\n <div [class]=\"getConnectorClasses(i)\"></div>\n }\n }\n </div>\n\n <!-- Step content area (projected) -->\n <div class=\"lc-stepper__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".lc-stepper{width:100%}.lc-stepper__header{display:flex;align-items:center;gap:0}.lc-stepper--horizontal .lc-stepper__header{flex-direction:row}.lc-stepper--vertical .lc-stepper__header{flex-direction:column;align-items:flex-start}.lc-stepper__step{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.lc-stepper__step--clickable{cursor:pointer}.lc-stepper__indicator{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);transition:all .2s ease}.lc-stepper__step--pending .lc-stepper__indicator{background-color:var(--color-neutral-200, #e5e7eb);color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-stepper__step--pending .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--pending .lc-stepper__indicator{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-400, #9ca3af)}.lc-stepper__step--active .lc-stepper__indicator{background-color:var(--color-primary-600, #2563eb);color:#fff;box-shadow:0 0 0 4px var(--color-primary-100, #dbeafe)}[data-theme=dark] .lc-stepper__step--active .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--active .lc-stepper__indicator{background-color:var(--color-primary-500, #3b82f6);box-shadow:0 0 0 4px #1e3a8a66}.lc-stepper__step--completed .lc-stepper__indicator{background-color:var(--color-success-default, #16a34a);color:#fff}[data-theme=dark] .lc-stepper__step--completed .lc-stepper__indicator,:root[data-theme=dark] .lc-stepper__step--completed .lc-stepper__indicator{background-color:var(--color-success-light, #22c55e)}.lc-stepper__check{width:1rem;height:1rem}.lc-stepper__number{line-height:1}.lc-stepper__label{display:flex;flex-direction:column}.lc-stepper__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-900, #111827)}[data-theme=dark] .lc-stepper__title,:root[data-theme=dark] .lc-stepper__title{color:var(--color-neutral-100, #f3f4f6)}.lc-stepper__step--pending .lc-stepper__title{color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-stepper__step--pending .lc-stepper__title,:root[data-theme=dark] .lc-stepper__step--pending .lc-stepper__title{color:var(--color-neutral-400, #9ca3af)}.lc-stepper__description{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-500, #6b7280);margin-top:.125rem}[data-theme=dark] .lc-stepper__description,:root[data-theme=dark] .lc-stepper__description{color:var(--color-neutral-400, #9ca3af)}.lc-stepper__optional{font-size:var(--font-size-xs, .75rem);color:var(--color-neutral-400, #9ca3af);font-style:italic;margin-top:.125rem}[data-theme=dark] .lc-stepper__optional,:root[data-theme=dark] .lc-stepper__optional{color:var(--color-neutral-500, #6b7280)}.lc-stepper__connector{flex:1;height:.125rem;min-width:2rem;margin:0 .5rem;background-color:var(--color-neutral-200, #e5e7eb);transition:background-color .2s ease}[data-theme=dark] .lc-stepper__connector,:root[data-theme=dark] .lc-stepper__connector{background-color:var(--color-neutral-700, #374151)}.lc-stepper__connector--completed{background-color:var(--color-success-default, #16a34a)}[data-theme=dark] .lc-stepper__connector--completed,:root[data-theme=dark] .lc-stepper__connector--completed{background-color:var(--color-success-light, #22c55e)}.lc-stepper--vertical .lc-stepper__connector{width:.125rem;height:2rem;min-width:0;margin:.25rem 0 .25rem 1rem}.lc-stepper__content{margin-top:1.5rem}\n"] }]
7506
7197
  }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
7507
7198
 
7508
7199
  /**
@@ -7565,12 +7256,15 @@ class FilterBarComponent {
7565
7256
  }
7566
7257
  return classes.join(' ');
7567
7258
  }
7259
+ getInputValue(event) {
7260
+ return event.target.value;
7261
+ }
7568
7262
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7569
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FilterBarComponent, isStandalone: true, selector: "lc-filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, ngImport: i0, template: "<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n @for (filter of filters(); track filter.key) {\n <div class=\"lc-filter-bar__item\">\n @if (filter.label) {\n <label class=\"lc-filter-bar__label\">{{ filter.label }}</label>\n }\n\n @switch (filter.type) {\n @case ('select') {\n <div class=\"lc-filter-bar__select-wrapper\">\n <select\n class=\"lc-filter-bar__select\"\n [value]=\"getValue(filter.key)\"\n (change)=\"onFilterChange(filter.key, $any($event.target).value)\"\n >\n @if (filter.placeholder) {\n <option value=\"\">{{ filter.placeholder }}</option>\n }\n @for (opt of filter.options; track opt.value) {\n <option\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled ?? false\"\n >\n {{ opt.label }}\n </option>\n }\n </select>\n <!-- Chevron icon -->\n <svg class=\"lc-filter-bar__select-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=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n </svg>\n </div>\n }\n\n @case ('toggle') {\n <div class=\"lc-filter-bar__toggle-group\">\n @for (opt of filter.options; track opt.value) {\n <button\n type=\"button\"\n [class]=\"getToggleClasses(filter.key, opt)\"\n [disabled]=\"opt.disabled ?? false\"\n (click)=\"onFilterChange(filter.key, opt.value)\"\n >\n {{ opt.label }}\n </button>\n }\n </div>\n }\n\n @case ('search') {\n <div class=\"lc-filter-bar__search-wrapper\">\n <!-- Search icon -->\n <svg class=\"lc-filter-bar__search-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=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n </svg>\n <input\n type=\"text\"\n class=\"lc-filter-bar__search-input\"\n [placeholder]=\"filter.placeholder ?? 'Search...'\"\n [value]=\"getValue(filter.key)\"\n (input)=\"onSearchInput(filter.key, $event)\"\n />\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".lc-filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem}.lc-filter-bar__item{display:flex;flex-direction:column;gap:.25rem}.lc-filter-bar__label{font-size:var(--font-size-xs, .75rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-500, #6b7280);text-transform:uppercase;letter-spacing:.05em}[data-theme=dark] .lc-filter-bar__label,:root[data-theme=dark] .lc-filter-bar__label{color:var(--color-neutral-400, #9ca3af)}.lc-filter-bar__select-wrapper{position:relative}.lc-filter-bar__select{appearance:none;border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-surface, #ffffff);padding:.5rem 2rem .5rem .75rem;font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-900, #111827);min-width:140px}.lc-filter-bar__select:focus{border-color:var(--color-primary-500, #3b82f6);outline:none;box-shadow:0 0 0 1px var(--color-primary-500, #3b82f6)}[data-theme=dark] .lc-filter-bar__select,:root[data-theme=dark] .lc-filter-bar__select{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937);color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-filter-bar__select:focus,:root[data-theme=dark] .lc-filter-bar__select:focus{border-color:var(--color-primary-400, #60a5fa);box-shadow:0 0 0 1px var(--color-primary-400, #60a5fa)}.lc-filter-bar__select-icon{pointer-events:none;position:absolute;right:.5rem;top:50%;height:1rem;width:1rem;transform:translateY(-50%);color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__select-icon,:root[data-theme=dark] .lc-filter-bar__select-icon{color:var(--color-neutral-500, #6b7280)}.lc-filter-bar__toggle-group{display:inline-flex;border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-neutral-100, #f3f4f6);overflow:hidden}[data-theme=dark] .lc-filter-bar__toggle-group,:root[data-theme=dark] .lc-filter-bar__toggle-group{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937)}.lc-filter-bar__toggle-btn{padding:.5rem .75rem;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-600, #4b5563);transition:color .15s ease,background-color .15s ease;border:none;background:transparent;cursor:pointer}.lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-900, #111827);background-color:var(--color-neutral-200, #e5e7eb)}[data-theme=dark] .lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn{color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__toggle-btn:hover,:root[data-theme=dark] .lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-100, #f3f4f6);background-color:var(--color-neutral-700, #374151)}.lc-filter-bar__toggle-btn--active{background-color:var(--color-surface, #ffffff);color:var(--color-neutral-900, #111827);box-shadow:0 1px 2px #0000000d}[data-theme=dark] .lc-filter-bar__toggle-btn--active,:root[data-theme=dark] .lc-filter-bar__toggle-btn--active{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-filter-bar__toggle-btn--disabled{cursor:not-allowed;opacity:.5}.lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left:1px solid var(--color-neutral-300, #d1d5db)}[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left-color:var(--color-neutral-600, #4b5563)}.lc-filter-bar__search-wrapper{position:relative}.lc-filter-bar__search-icon{position:absolute;left:.75rem;top:50%;height:1rem;width:1rem;transform:translateY(-50%);color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__search-icon,:root[data-theme=dark] .lc-filter-bar__search-icon{color:var(--color-neutral-500, #6b7280)}.lc-filter-bar__search-input{border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-surface, #ffffff);padding:.5rem .75rem .5rem 2.25rem;font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-900, #111827);min-width:200px}.lc-filter-bar__search-input::placeholder{color:var(--color-neutral-400, #9ca3af)}.lc-filter-bar__search-input:focus{border-color:var(--color-primary-500, #3b82f6);outline:none;box-shadow:0 0 0 1px var(--color-primary-500, #3b82f6)}[data-theme=dark] .lc-filter-bar__search-input,:root[data-theme=dark] .lc-filter-bar__search-input{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937);color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-filter-bar__search-input::placeholder,:root[data-theme=dark] .lc-filter-bar__search-input::placeholder{color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-filter-bar__search-input:focus,:root[data-theme=dark] .lc-filter-bar__search-input:focus{border-color:var(--color-primary-400, #60a5fa);box-shadow:0 0 0 1px var(--color-primary-400, #60a5fa)}.lc-filter-bar--sm .lc-filter-bar__select,.lc-filter-bar--sm .lc-filter-bar__toggle-btn,.lc-filter-bar--sm .lc-filter-bar__search-input{padding-top:.375rem;padding-bottom:.375rem;font-size:var(--font-size-xs, .75rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7263
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FilterBarComponent, isStandalone: true, selector: "lc-filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, ngImport: i0, template: "<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n @for (filter of filters(); track filter.key) {\n <div class=\"lc-filter-bar__item\">\n @if (filter.label) {\n <label class=\"lc-filter-bar__label\">{{ filter.label }}</label>\n }\n\n @switch (filter.type) {\n @case ('select') {\n <div class=\"lc-filter-bar__select-wrapper\">\n <select\n class=\"lc-filter-bar__select\"\n [value]=\"getValue(filter.key)\"\n (change)=\"onFilterChange(filter.key, getInputValue($event))\"\n >\n @if (filter.placeholder) {\n <option value=\"\">{{ filter.placeholder }}</option>\n }\n @for (opt of filter.options; track opt.value) {\n <option\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled ?? false\"\n >\n {{ opt.label }}\n </option>\n }\n </select>\n <!-- Chevron icon -->\n <svg class=\"lc-filter-bar__select-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=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n </svg>\n </div>\n }\n\n @case ('toggle') {\n <div class=\"lc-filter-bar__toggle-group\">\n @for (opt of filter.options; track opt.value) {\n <button\n type=\"button\"\n [class]=\"getToggleClasses(filter.key, opt)\"\n [disabled]=\"opt.disabled ?? false\"\n (click)=\"onFilterChange(filter.key, opt.value)\"\n >\n {{ opt.label }}\n </button>\n }\n </div>\n }\n\n @case ('search') {\n <div class=\"lc-filter-bar__search-wrapper\">\n <!-- Search icon -->\n <svg class=\"lc-filter-bar__search-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=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n </svg>\n <input\n type=\"text\"\n class=\"lc-filter-bar__search-input\"\n [placeholder]=\"filter.placeholder ?? 'Search...'\"\n [value]=\"getValue(filter.key)\"\n (input)=\"onSearchInput(filter.key, $event)\"\n />\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".lc-filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem}.lc-filter-bar__item{display:flex;flex-direction:column;gap:.25rem}.lc-filter-bar__label{font-size:var(--font-size-xs, .75rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-500, #6b7280);text-transform:uppercase;letter-spacing:.05em}[data-theme=dark] .lc-filter-bar__label,:root[data-theme=dark] .lc-filter-bar__label{color:var(--color-neutral-400, #9ca3af)}.lc-filter-bar__select-wrapper{position:relative}.lc-filter-bar__select{appearance:none;border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-surface, #ffffff);padding:.5rem 2rem .5rem .75rem;font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-900, #111827);min-width:140px}.lc-filter-bar__select:focus{border-color:var(--color-primary-500, #3b82f6);outline:none;box-shadow:0 0 0 1px var(--color-primary-500, #3b82f6)}[data-theme=dark] .lc-filter-bar__select,:root[data-theme=dark] .lc-filter-bar__select{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937);color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-filter-bar__select:focus,:root[data-theme=dark] .lc-filter-bar__select:focus{border-color:var(--color-primary-400, #60a5fa);box-shadow:0 0 0 1px var(--color-primary-400, #60a5fa)}.lc-filter-bar__select-icon{pointer-events:none;position:absolute;right:.5rem;top:50%;height:1rem;width:1rem;transform:translateY(-50%);color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__select-icon,:root[data-theme=dark] .lc-filter-bar__select-icon{color:var(--color-neutral-500, #6b7280)}.lc-filter-bar__toggle-group{display:inline-flex;border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-neutral-100, #f3f4f6);overflow:hidden}[data-theme=dark] .lc-filter-bar__toggle-group,:root[data-theme=dark] .lc-filter-bar__toggle-group{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937)}.lc-filter-bar__toggle-btn{padding:.5rem .75rem;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-600, #4b5563);transition:color .15s ease,background-color .15s ease;border:none;background:transparent;cursor:pointer}.lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-900, #111827);background-color:var(--color-neutral-200, #e5e7eb)}[data-theme=dark] .lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn{color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__toggle-btn:hover,:root[data-theme=dark] .lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-100, #f3f4f6);background-color:var(--color-neutral-700, #374151)}.lc-filter-bar__toggle-btn--active{background-color:var(--color-surface, #ffffff);color:var(--color-neutral-900, #111827);box-shadow:0 1px 2px #0000000d}[data-theme=dark] .lc-filter-bar__toggle-btn--active,:root[data-theme=dark] .lc-filter-bar__toggle-btn--active{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-filter-bar__toggle-btn--disabled{cursor:not-allowed;opacity:.5}.lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left:1px solid var(--color-neutral-300, #d1d5db)}[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left-color:var(--color-neutral-600, #4b5563)}.lc-filter-bar__search-wrapper{position:relative}.lc-filter-bar__search-icon{position:absolute;left:.75rem;top:50%;height:1rem;width:1rem;transform:translateY(-50%);color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__search-icon,:root[data-theme=dark] .lc-filter-bar__search-icon{color:var(--color-neutral-500, #6b7280)}.lc-filter-bar__search-input{border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-surface, #ffffff);padding:.5rem .75rem .5rem 2.25rem;font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-900, #111827);min-width:200px}.lc-filter-bar__search-input::placeholder{color:var(--color-neutral-400, #9ca3af)}.lc-filter-bar__search-input:focus{border-color:var(--color-primary-500, #3b82f6);outline:none;box-shadow:0 0 0 1px var(--color-primary-500, #3b82f6)}[data-theme=dark] .lc-filter-bar__search-input,:root[data-theme=dark] .lc-filter-bar__search-input{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937);color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-filter-bar__search-input::placeholder,:root[data-theme=dark] .lc-filter-bar__search-input::placeholder{color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-filter-bar__search-input:focus,:root[data-theme=dark] .lc-filter-bar__search-input:focus{border-color:var(--color-primary-400, #60a5fa);box-shadow:0 0 0 1px var(--color-primary-400, #60a5fa)}.lc-filter-bar--sm .lc-filter-bar__select,.lc-filter-bar--sm .lc-filter-bar__toggle-btn,.lc-filter-bar--sm .lc-filter-bar__search-input{padding-top:.375rem;padding-bottom:.375rem;font-size:var(--font-size-xs, .75rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7570
7264
  }
7571
7265
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FilterBarComponent, decorators: [{
7572
7266
  type: Component,
7573
- args: [{ selector: 'lc-filter-bar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n @for (filter of filters(); track filter.key) {\n <div class=\"lc-filter-bar__item\">\n @if (filter.label) {\n <label class=\"lc-filter-bar__label\">{{ filter.label }}</label>\n }\n\n @switch (filter.type) {\n @case ('select') {\n <div class=\"lc-filter-bar__select-wrapper\">\n <select\n class=\"lc-filter-bar__select\"\n [value]=\"getValue(filter.key)\"\n (change)=\"onFilterChange(filter.key, $any($event.target).value)\"\n >\n @if (filter.placeholder) {\n <option value=\"\">{{ filter.placeholder }}</option>\n }\n @for (opt of filter.options; track opt.value) {\n <option\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled ?? false\"\n >\n {{ opt.label }}\n </option>\n }\n </select>\n <!-- Chevron icon -->\n <svg class=\"lc-filter-bar__select-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=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n </svg>\n </div>\n }\n\n @case ('toggle') {\n <div class=\"lc-filter-bar__toggle-group\">\n @for (opt of filter.options; track opt.value) {\n <button\n type=\"button\"\n [class]=\"getToggleClasses(filter.key, opt)\"\n [disabled]=\"opt.disabled ?? false\"\n (click)=\"onFilterChange(filter.key, opt.value)\"\n >\n {{ opt.label }}\n </button>\n }\n </div>\n }\n\n @case ('search') {\n <div class=\"lc-filter-bar__search-wrapper\">\n <!-- Search icon -->\n <svg class=\"lc-filter-bar__search-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=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n </svg>\n <input\n type=\"text\"\n class=\"lc-filter-bar__search-input\"\n [placeholder]=\"filter.placeholder ?? 'Search...'\"\n [value]=\"getValue(filter.key)\"\n (input)=\"onSearchInput(filter.key, $event)\"\n />\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".lc-filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem}.lc-filter-bar__item{display:flex;flex-direction:column;gap:.25rem}.lc-filter-bar__label{font-size:var(--font-size-xs, .75rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-500, #6b7280);text-transform:uppercase;letter-spacing:.05em}[data-theme=dark] .lc-filter-bar__label,:root[data-theme=dark] .lc-filter-bar__label{color:var(--color-neutral-400, #9ca3af)}.lc-filter-bar__select-wrapper{position:relative}.lc-filter-bar__select{appearance:none;border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-surface, #ffffff);padding:.5rem 2rem .5rem .75rem;font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-900, #111827);min-width:140px}.lc-filter-bar__select:focus{border-color:var(--color-primary-500, #3b82f6);outline:none;box-shadow:0 0 0 1px var(--color-primary-500, #3b82f6)}[data-theme=dark] .lc-filter-bar__select,:root[data-theme=dark] .lc-filter-bar__select{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937);color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-filter-bar__select:focus,:root[data-theme=dark] .lc-filter-bar__select:focus{border-color:var(--color-primary-400, #60a5fa);box-shadow:0 0 0 1px var(--color-primary-400, #60a5fa)}.lc-filter-bar__select-icon{pointer-events:none;position:absolute;right:.5rem;top:50%;height:1rem;width:1rem;transform:translateY(-50%);color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__select-icon,:root[data-theme=dark] .lc-filter-bar__select-icon{color:var(--color-neutral-500, #6b7280)}.lc-filter-bar__toggle-group{display:inline-flex;border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-neutral-100, #f3f4f6);overflow:hidden}[data-theme=dark] .lc-filter-bar__toggle-group,:root[data-theme=dark] .lc-filter-bar__toggle-group{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937)}.lc-filter-bar__toggle-btn{padding:.5rem .75rem;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-600, #4b5563);transition:color .15s ease,background-color .15s ease;border:none;background:transparent;cursor:pointer}.lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-900, #111827);background-color:var(--color-neutral-200, #e5e7eb)}[data-theme=dark] .lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn{color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__toggle-btn:hover,:root[data-theme=dark] .lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-100, #f3f4f6);background-color:var(--color-neutral-700, #374151)}.lc-filter-bar__toggle-btn--active{background-color:var(--color-surface, #ffffff);color:var(--color-neutral-900, #111827);box-shadow:0 1px 2px #0000000d}[data-theme=dark] .lc-filter-bar__toggle-btn--active,:root[data-theme=dark] .lc-filter-bar__toggle-btn--active{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-filter-bar__toggle-btn--disabled{cursor:not-allowed;opacity:.5}.lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left:1px solid var(--color-neutral-300, #d1d5db)}[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left-color:var(--color-neutral-600, #4b5563)}.lc-filter-bar__search-wrapper{position:relative}.lc-filter-bar__search-icon{position:absolute;left:.75rem;top:50%;height:1rem;width:1rem;transform:translateY(-50%);color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__search-icon,:root[data-theme=dark] .lc-filter-bar__search-icon{color:var(--color-neutral-500, #6b7280)}.lc-filter-bar__search-input{border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-surface, #ffffff);padding:.5rem .75rem .5rem 2.25rem;font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-900, #111827);min-width:200px}.lc-filter-bar__search-input::placeholder{color:var(--color-neutral-400, #9ca3af)}.lc-filter-bar__search-input:focus{border-color:var(--color-primary-500, #3b82f6);outline:none;box-shadow:0 0 0 1px var(--color-primary-500, #3b82f6)}[data-theme=dark] .lc-filter-bar__search-input,:root[data-theme=dark] .lc-filter-bar__search-input{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937);color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-filter-bar__search-input::placeholder,:root[data-theme=dark] .lc-filter-bar__search-input::placeholder{color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-filter-bar__search-input:focus,:root[data-theme=dark] .lc-filter-bar__search-input:focus{border-color:var(--color-primary-400, #60a5fa);box-shadow:0 0 0 1px var(--color-primary-400, #60a5fa)}.lc-filter-bar--sm .lc-filter-bar__select,.lc-filter-bar--sm .lc-filter-bar__toggle-btn,.lc-filter-bar--sm .lc-filter-bar__search-input{padding-top:.375rem;padding-bottom:.375rem;font-size:var(--font-size-xs, .75rem)}\n"] }]
7267
+ args: [{ selector: 'lc-filter-bar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-filter-bar\" [class]=\"sizeClass()\">\n @for (filter of filters(); track filter.key) {\n <div class=\"lc-filter-bar__item\">\n @if (filter.label) {\n <label class=\"lc-filter-bar__label\">{{ filter.label }}</label>\n }\n\n @switch (filter.type) {\n @case ('select') {\n <div class=\"lc-filter-bar__select-wrapper\">\n <select\n class=\"lc-filter-bar__select\"\n [value]=\"getValue(filter.key)\"\n (change)=\"onFilterChange(filter.key, getInputValue($event))\"\n >\n @if (filter.placeholder) {\n <option value=\"\">{{ filter.placeholder }}</option>\n }\n @for (opt of filter.options; track opt.value) {\n <option\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled ?? false\"\n >\n {{ opt.label }}\n </option>\n }\n </select>\n <!-- Chevron icon -->\n <svg class=\"lc-filter-bar__select-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=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n </svg>\n </div>\n }\n\n @case ('toggle') {\n <div class=\"lc-filter-bar__toggle-group\">\n @for (opt of filter.options; track opt.value) {\n <button\n type=\"button\"\n [class]=\"getToggleClasses(filter.key, opt)\"\n [disabled]=\"opt.disabled ?? false\"\n (click)=\"onFilterChange(filter.key, opt.value)\"\n >\n {{ opt.label }}\n </button>\n }\n </div>\n }\n\n @case ('search') {\n <div class=\"lc-filter-bar__search-wrapper\">\n <!-- Search icon -->\n <svg class=\"lc-filter-bar__search-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=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n </svg>\n <input\n type=\"text\"\n class=\"lc-filter-bar__search-input\"\n [placeholder]=\"filter.placeholder ?? 'Search...'\"\n [value]=\"getValue(filter.key)\"\n (input)=\"onSearchInput(filter.key, $event)\"\n />\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".lc-filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem}.lc-filter-bar__item{display:flex;flex-direction:column;gap:.25rem}.lc-filter-bar__label{font-size:var(--font-size-xs, .75rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-500, #6b7280);text-transform:uppercase;letter-spacing:.05em}[data-theme=dark] .lc-filter-bar__label,:root[data-theme=dark] .lc-filter-bar__label{color:var(--color-neutral-400, #9ca3af)}.lc-filter-bar__select-wrapper{position:relative}.lc-filter-bar__select{appearance:none;border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-surface, #ffffff);padding:.5rem 2rem .5rem .75rem;font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-900, #111827);min-width:140px}.lc-filter-bar__select:focus{border-color:var(--color-primary-500, #3b82f6);outline:none;box-shadow:0 0 0 1px var(--color-primary-500, #3b82f6)}[data-theme=dark] .lc-filter-bar__select,:root[data-theme=dark] .lc-filter-bar__select{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937);color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-filter-bar__select:focus,:root[data-theme=dark] .lc-filter-bar__select:focus{border-color:var(--color-primary-400, #60a5fa);box-shadow:0 0 0 1px var(--color-primary-400, #60a5fa)}.lc-filter-bar__select-icon{pointer-events:none;position:absolute;right:.5rem;top:50%;height:1rem;width:1rem;transform:translateY(-50%);color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__select-icon,:root[data-theme=dark] .lc-filter-bar__select-icon{color:var(--color-neutral-500, #6b7280)}.lc-filter-bar__toggle-group{display:inline-flex;border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-neutral-100, #f3f4f6);overflow:hidden}[data-theme=dark] .lc-filter-bar__toggle-group,:root[data-theme=dark] .lc-filter-bar__toggle-group{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937)}.lc-filter-bar__toggle-btn{padding:.5rem .75rem;font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-neutral-600, #4b5563);transition:color .15s ease,background-color .15s ease;border:none;background:transparent;cursor:pointer}.lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-900, #111827);background-color:var(--color-neutral-200, #e5e7eb)}[data-theme=dark] .lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn{color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__toggle-btn:hover,:root[data-theme=dark] .lc-filter-bar__toggle-btn:hover{color:var(--color-neutral-100, #f3f4f6);background-color:var(--color-neutral-700, #374151)}.lc-filter-bar__toggle-btn--active{background-color:var(--color-surface, #ffffff);color:var(--color-neutral-900, #111827);box-shadow:0 1px 2px #0000000d}[data-theme=dark] .lc-filter-bar__toggle-btn--active,:root[data-theme=dark] .lc-filter-bar__toggle-btn--active{background-color:var(--color-neutral-700, #374151);color:var(--color-neutral-100, #f3f4f6)}.lc-filter-bar__toggle-btn--disabled{cursor:not-allowed;opacity:.5}.lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left:1px solid var(--color-neutral-300, #d1d5db)}[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn,:root[data-theme=dark] .lc-filter-bar__toggle-btn+.lc-filter-bar__toggle-btn{border-left-color:var(--color-neutral-600, #4b5563)}.lc-filter-bar__search-wrapper{position:relative}.lc-filter-bar__search-icon{position:absolute;left:.75rem;top:50%;height:1rem;width:1rem;transform:translateY(-50%);color:var(--color-neutral-400, #9ca3af)}[data-theme=dark] .lc-filter-bar__search-icon,:root[data-theme=dark] .lc-filter-bar__search-icon{color:var(--color-neutral-500, #6b7280)}.lc-filter-bar__search-input{border-radius:.5rem;border:1px solid var(--color-neutral-300, #d1d5db);background-color:var(--color-surface, #ffffff);padding:.5rem .75rem .5rem 2.25rem;font-size:var(--font-size-sm, .875rem);color:var(--color-neutral-900, #111827);min-width:200px}.lc-filter-bar__search-input::placeholder{color:var(--color-neutral-400, #9ca3af)}.lc-filter-bar__search-input:focus{border-color:var(--color-primary-500, #3b82f6);outline:none;box-shadow:0 0 0 1px var(--color-primary-500, #3b82f6)}[data-theme=dark] .lc-filter-bar__search-input,:root[data-theme=dark] .lc-filter-bar__search-input{border-color:var(--color-neutral-600, #4b5563);background-color:var(--color-surface-dark, #1f2937);color:var(--color-neutral-100, #f3f4f6)}[data-theme=dark] .lc-filter-bar__search-input::placeholder,:root[data-theme=dark] .lc-filter-bar__search-input::placeholder{color:var(--color-neutral-500, #6b7280)}[data-theme=dark] .lc-filter-bar__search-input:focus,:root[data-theme=dark] .lc-filter-bar__search-input:focus{border-color:var(--color-primary-400, #60a5fa);box-shadow:0 0 0 1px var(--color-primary-400, #60a5fa)}.lc-filter-bar--sm .lc-filter-bar__select,.lc-filter-bar--sm .lc-filter-bar__toggle-btn,.lc-filter-bar--sm .lc-filter-bar__search-input{padding-top:.375rem;padding-bottom:.375rem;font-size:var(--font-size-xs, .75rem)}\n"] }]
7574
7268
  }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: true }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valuesChange: [{ type: i0.Output, args: ["valuesChange"] }] } });
7575
7269
 
7576
7270
  /**
@@ -10663,9 +10357,6 @@ class ChatComponent {
10663
10357
  return '';
10664
10358
  return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
10665
10359
  }
10666
- trackById(_, msg) {
10667
- return msg.id;
10668
- }
10669
10360
  scrollToBottom() {
10670
10361
  if (this.scrollContainer) {
10671
10362
  const el = this.scrollContainer.nativeElement;
@@ -10673,11 +10364,11 @@ class ChatComponent {
10673
10364
  }
10674
10365
  }
10675
10366
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
10676
- 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 trackById($index, msg)) {\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 });
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 });
10677
10368
  }
10678
10369
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, decorators: [{
10679
10370
  type: Component,
10680
- 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 trackById($index, msg)) {\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"] }]
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"] }]
10681
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: [{
10682
10373
  type: ContentChild,
10683
10374
  args: ['messageTemplate']
@@ -11367,13 +11058,13 @@ class GalleryComponent {
11367
11058
  }
11368
11059
  }
11369
11060
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11370
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: GalleryComponent, isStandalone: true, selector: "lc-gallery", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showCaptions: { classPropertyName: "showCaptions", publicName: "showCaptions", isSignal: true, isRequired: false, transformFunction: null }, enableLightbox: { classPropertyName: "enableLightbox", publicName: "enableLightbox", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lightboxOpen: "lightboxOpen", lightboxClose: "lightboxClose" }, host: { listeners: { "document:keydown": "onKeydown($event)" }, properties: { "class": "\"gallery\"" } }, ngImport: i0, template: "<!-- Filters -->\n@if (showFilters()) {\n <div class=\"gallery__filters\">\n <button\n type=\"button\"\n class=\"gallery__filter-btn\"\n [class.gallery__filter-btn--active]=\"activeFilter() === null\"\n (click)=\"setFilter(null)\"\n >\n All\n </button>\n @for (cat of categories(); track cat) {\n <button\n type=\"button\"\n class=\"gallery__filter-btn\"\n [class.gallery__filter-btn--active]=\"activeFilter() === cat\"\n (click)=\"setFilter(cat)\"\n >\n {{ cat }}\n </button>\n }\n </div>\n}\n\n<!-- Grid / Masonry -->\n<div class=\"gallery__grid\" [class.gallery__grid--masonry]=\"layout() === 'masonry'\" [ngStyle]=\"gridStyle()\">\n @for (item of filteredItems(); track $index) {\n <div\n class=\"gallery__item\"\n [class.gallery__item--loaded]=\"isLoaded($index)\"\n [class.gallery__item--clickable]=\"enableLightbox()\"\n [ngStyle]=\"itemStyle()\"\n (click)=\"openLightbox($index)\"\n (keydown.enter)=\"openLightbox($index)\"\n [attr.tabindex]=\"enableLightbox() ? 0 : null\"\n [attr.role]=\"enableLightbox() ? 'button' : null\"\n [attr.aria-label]=\"item.alt || 'Image ' + ($index + 1)\"\n >\n @if (!isLoaded($index)) {\n <div class=\"gallery__placeholder\"></div>\n }\n <img\n class=\"gallery__thumb\"\n [src]=\"getThumbnail(item)\"\n [alt]=\"item.alt || ''\"\n loading=\"lazy\"\n (load)=\"onImageLoad($index)\"\n />\n @if (showCaptions() && item.caption) {\n <div class=\"gallery__caption\">{{ item.caption }}</div>\n }\n </div>\n }\n</div>\n\n<!-- Lightbox overlay -->\n@if (lightboxItem(); as item) {\n <div class=\"gallery__lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Image lightbox\">\n <!-- Backdrop -->\n <div class=\"gallery__lightbox-backdrop\" (click)=\"closeLightbox()\"></div>\n\n <!-- Toolbar -->\n <div class=\"gallery__lightbox-toolbar\">\n <div class=\"gallery__lightbox-counter\">{{ lightboxCounter() }}</div>\n <div class=\"gallery__lightbox-actions\">\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Zoom out\" (click)=\"zoomOut()\">\n <lc-icon name=\"minus\" size=\"sm\" />\n </button>\n <span class=\"gallery__lightbox-zoom\">{{ lightboxZoom() }}%</span>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Zoom in\" (click)=\"zoomIn()\">\n <lc-icon name=\"plus\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Reset zoom\" (click)=\"resetZoom()\">\n <lc-icon name=\"arrows-pointing-out\" size=\"xs\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Download\" (click)=\"downloadCurrent()\">\n <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Close\" (click)=\"closeLightbox()\">\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n </div>\n </div>\n\n <!-- Navigation -->\n @if (canGoPrev()) {\n <button\n type=\"button\"\n class=\"gallery__lightbox-nav gallery__lightbox-nav--prev\"\n aria-label=\"Previous image\"\n (click)=\"goToPrev()\"\n >\n <lc-icon name=\"chevron-left\" size=\"lg\" />\n </button>\n }\n @if (canGoNext()) {\n <button\n type=\"button\"\n class=\"gallery__lightbox-nav gallery__lightbox-nav--next\"\n aria-label=\"Next image\"\n (click)=\"goToNext()\"\n >\n <lc-icon name=\"chevron-right\" size=\"lg\" />\n </button>\n }\n\n <!-- Image -->\n <div class=\"gallery__lightbox-content\">\n <img\n class=\"gallery__lightbox-image\"\n [src]=\"item.src\"\n [alt]=\"item.alt || ''\"\n [style.transform]=\"lightboxTransform()\"\n />\n </div>\n\n <!-- Caption -->\n @if (item.caption) {\n <div class=\"gallery__lightbox-caption\">{{ item.caption }}</div>\n }\n </div>\n}\n", styles: [".gallery{width:100%}.gallery__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.gallery__filter-btn{padding:.375rem .75rem;border:1px solid var(--color-neutral-200);border-radius:999px;background:transparent;color:var(--color-neutral-600);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);cursor:pointer;transition:all .15s ease}.gallery__filter-btn:hover{border-color:var(--color-primary-300);color:var(--color-primary-500)}.gallery__filter-btn--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.gallery__filter-btn--active:hover{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}[data-theme=dark] .gallery__filter-btn,:root[data-theme=dark] .gallery__filter-btn{border-color:var(--color-neutral-600);color:var(--color-neutral-400)}[data-theme=dark] .gallery__filter-btn:hover,:root[data-theme=dark] .gallery__filter-btn:hover{border-color:var(--color-primary-400);color:var(--color-primary-400)}[data-theme=dark] .gallery__filter-btn--active,:root[data-theme=dark] .gallery__filter-btn--active{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}.gallery__grid{width:100%}.gallery__grid--masonry{display:block!important}.gallery__item{position:relative;overflow:hidden;border-radius:.5rem;background:var(--color-neutral-100)}[data-theme=dark] .gallery__item,:root[data-theme=dark] .gallery__item{background:var(--color-neutral-800)}.gallery__item--clickable{cursor:pointer}.gallery__item--clickable:hover .gallery__thumb{transform:scale(1.05)}.gallery__item--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.gallery__grid--masonry .gallery__item{margin-bottom:8px;break-inside:avoid}.gallery__placeholder{position:absolute;inset:0;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:gallery-shimmer 1.5s ease-in-out infinite}[data-theme=dark] .gallery__placeholder,:root[data-theme=dark] .gallery__placeholder{background:linear-gradient(90deg,var(--color-neutral-800) 25%,var(--color-neutral-700) 50%,var(--color-neutral-800) 75%);background-size:200% 100%}.gallery__thumb{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;opacity:0}.gallery__item--loaded .gallery__thumb{opacity:1}.gallery__caption{position:absolute;bottom:0;left:0;right:0;padding:.5rem .75rem;background:linear-gradient(transparent,#000000b3);color:#fff;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.gallery__lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}.gallery__lightbox-backdrop{position:absolute;inset:0;background:#000000e6}.gallery__lightbox-toolbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;z-index:2}.gallery__lightbox-counter{color:#ffffffb3;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);-webkit-user-select:none;user-select:none}.gallery__lightbox-actions{display:flex;align-items:center;gap:.25rem}.gallery__lightbox-zoom{min-width:3rem;text-align:center;color:#ffffffb3;font-size:var(--typography-font-size-xs, .75rem);-webkit-user-select:none;user-select:none}.gallery__lightbox-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:.375rem;background:transparent;color:#ffffffb3;cursor:pointer;transition:background-color .15s ease,color .15s ease}.gallery__lightbox-btn:hover{background:#ffffff26;color:#fff}.gallery__lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:none;border-radius:50%;background:#00000080;color:#fff;cursor:pointer;transition:background-color .15s ease}.gallery__lightbox-nav:hover{background:#000c}.gallery__lightbox-nav--prev{left:1rem}.gallery__lightbox-nav--next{right:1rem}.gallery__lightbox-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:80vh;overflow:auto}.gallery__lightbox-image{max-width:90vw;max-height:80vh;object-fit:contain;transition:transform .2s ease;transform-origin:center center;-webkit-user-select:none;user-select:none}.gallery__lightbox-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:1rem;color:#ffffffe6;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);z-index:2}@keyframes gallery-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
11061
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: GalleryComponent, isStandalone: true, selector: "lc-gallery", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showCaptions: { classPropertyName: "showCaptions", publicName: "showCaptions", isSignal: true, isRequired: false, transformFunction: null }, enableLightbox: { classPropertyName: "enableLightbox", publicName: "enableLightbox", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lightboxOpen: "lightboxOpen", lightboxClose: "lightboxClose" }, host: { listeners: { "document:keydown": "onKeydown($event)" }, properties: { "class": "\"gallery\"" } }, ngImport: i0, template: "<!-- Filters -->\n@if (showFilters()) {\n <div class=\"gallery__filters\">\n <button\n type=\"button\"\n class=\"gallery__filter-btn\"\n [class.gallery__filter-btn--active]=\"activeFilter() === null\"\n (click)=\"setFilter(null)\"\n >\n All\n </button>\n @for (cat of categories(); track cat) {\n <button\n type=\"button\"\n class=\"gallery__filter-btn\"\n [class.gallery__filter-btn--active]=\"activeFilter() === cat\"\n (click)=\"setFilter(cat)\"\n >\n {{ cat }}\n </button>\n }\n </div>\n}\n\n<!-- Grid / Masonry -->\n<div class=\"gallery__grid\" [class.gallery__grid--masonry]=\"layout() === 'masonry'\" [ngStyle]=\"gridStyle()\">\n @for (item of filteredItems(); track item.src; let i = $index) {\n <div\n class=\"gallery__item\"\n [class.gallery__item--loaded]=\"isLoaded(i)\"\n [class.gallery__item--clickable]=\"enableLightbox()\"\n [ngStyle]=\"itemStyle()\"\n (click)=\"openLightbox(i)\"\n (keydown.enter)=\"openLightbox(i)\"\n [attr.tabindex]=\"enableLightbox() ? 0 : null\"\n [attr.role]=\"enableLightbox() ? 'button' : null\"\n [attr.aria-label]=\"item.alt || 'Image ' + (i + 1)\"\n >\n @if (!isLoaded(i)) {\n <div class=\"gallery__placeholder\"></div>\n }\n <img\n class=\"gallery__thumb\"\n [src]=\"getThumbnail(item)\"\n [alt]=\"item.alt || ''\"\n loading=\"lazy\"\n (load)=\"onImageLoad(i)\"\n />\n @if (showCaptions() && item.caption) {\n <div class=\"gallery__caption\">{{ item.caption }}</div>\n }\n </div>\n }\n</div>\n\n<!-- Lightbox overlay -->\n@if (lightboxItem(); as item) {\n <div class=\"gallery__lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Image lightbox\">\n <!-- Backdrop -->\n <div class=\"gallery__lightbox-backdrop\" (click)=\"closeLightbox()\"></div>\n\n <!-- Toolbar -->\n <div class=\"gallery__lightbox-toolbar\">\n <div class=\"gallery__lightbox-counter\">{{ lightboxCounter() }}</div>\n <div class=\"gallery__lightbox-actions\">\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Zoom out\" (click)=\"zoomOut()\">\n <lc-icon name=\"minus\" size=\"sm\" />\n </button>\n <span class=\"gallery__lightbox-zoom\">{{ lightboxZoom() }}%</span>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Zoom in\" (click)=\"zoomIn()\">\n <lc-icon name=\"plus\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Reset zoom\" (click)=\"resetZoom()\">\n <lc-icon name=\"arrows-pointing-out\" size=\"xs\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Download\" (click)=\"downloadCurrent()\">\n <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Close\" (click)=\"closeLightbox()\">\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n </div>\n </div>\n\n <!-- Navigation -->\n @if (canGoPrev()) {\n <button\n type=\"button\"\n class=\"gallery__lightbox-nav gallery__lightbox-nav--prev\"\n aria-label=\"Previous image\"\n (click)=\"goToPrev()\"\n >\n <lc-icon name=\"chevron-left\" size=\"lg\" />\n </button>\n }\n @if (canGoNext()) {\n <button\n type=\"button\"\n class=\"gallery__lightbox-nav gallery__lightbox-nav--next\"\n aria-label=\"Next image\"\n (click)=\"goToNext()\"\n >\n <lc-icon name=\"chevron-right\" size=\"lg\" />\n </button>\n }\n\n <!-- Image -->\n <div class=\"gallery__lightbox-content\">\n <img\n class=\"gallery__lightbox-image\"\n [src]=\"item.src\"\n [alt]=\"item.alt || ''\"\n [style.transform]=\"lightboxTransform()\"\n />\n </div>\n\n <!-- Caption -->\n @if (item.caption) {\n <div class=\"gallery__lightbox-caption\">{{ item.caption }}</div>\n }\n </div>\n}\n", styles: [".gallery{width:100%}.gallery__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.gallery__filter-btn{padding:.375rem .75rem;border:1px solid var(--color-neutral-200);border-radius:999px;background:transparent;color:var(--color-neutral-600);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);cursor:pointer;transition:all .15s ease}.gallery__filter-btn:hover{border-color:var(--color-primary-300);color:var(--color-primary-500)}.gallery__filter-btn--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.gallery__filter-btn--active:hover{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}[data-theme=dark] .gallery__filter-btn,:root[data-theme=dark] .gallery__filter-btn{border-color:var(--color-neutral-600);color:var(--color-neutral-400)}[data-theme=dark] .gallery__filter-btn:hover,:root[data-theme=dark] .gallery__filter-btn:hover{border-color:var(--color-primary-400);color:var(--color-primary-400)}[data-theme=dark] .gallery__filter-btn--active,:root[data-theme=dark] .gallery__filter-btn--active{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}.gallery__grid{width:100%}.gallery__grid--masonry{display:block!important}.gallery__item{position:relative;overflow:hidden;border-radius:.5rem;background:var(--color-neutral-100)}[data-theme=dark] .gallery__item,:root[data-theme=dark] .gallery__item{background:var(--color-neutral-800)}.gallery__item--clickable{cursor:pointer}.gallery__item--clickable:hover .gallery__thumb{transform:scale(1.05)}.gallery__item--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.gallery__grid--masonry .gallery__item{margin-bottom:8px;break-inside:avoid}.gallery__placeholder{position:absolute;inset:0;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:gallery-shimmer 1.5s ease-in-out infinite}[data-theme=dark] .gallery__placeholder,:root[data-theme=dark] .gallery__placeholder{background:linear-gradient(90deg,var(--color-neutral-800) 25%,var(--color-neutral-700) 50%,var(--color-neutral-800) 75%);background-size:200% 100%}.gallery__thumb{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;opacity:0}.gallery__item--loaded .gallery__thumb{opacity:1}.gallery__caption{position:absolute;bottom:0;left:0;right:0;padding:.5rem .75rem;background:linear-gradient(transparent,#000000b3);color:#fff;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.gallery__lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}.gallery__lightbox-backdrop{position:absolute;inset:0;background:#000000e6}.gallery__lightbox-toolbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;z-index:2}.gallery__lightbox-counter{color:#ffffffb3;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);-webkit-user-select:none;user-select:none}.gallery__lightbox-actions{display:flex;align-items:center;gap:.25rem}.gallery__lightbox-zoom{min-width:3rem;text-align:center;color:#ffffffb3;font-size:var(--typography-font-size-xs, .75rem);-webkit-user-select:none;user-select:none}.gallery__lightbox-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:.375rem;background:transparent;color:#ffffffb3;cursor:pointer;transition:background-color .15s ease,color .15s ease}.gallery__lightbox-btn:hover{background:#ffffff26;color:#fff}.gallery__lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:none;border-radius:50%;background:#00000080;color:#fff;cursor:pointer;transition:background-color .15s ease}.gallery__lightbox-nav:hover{background:#000c}.gallery__lightbox-nav--prev{left:1rem}.gallery__lightbox-nav--next{right:1rem}.gallery__lightbox-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:80vh;overflow:auto}.gallery__lightbox-image{max-width:90vw;max-height:80vh;object-fit:contain;transition:transform .2s ease;transform-origin:center center;-webkit-user-select:none;user-select:none}.gallery__lightbox-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:1rem;color:#ffffffe6;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);z-index:2}@keyframes gallery-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
11371
11062
  }
11372
11063
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GalleryComponent, decorators: [{
11373
11064
  type: Component,
11374
11065
  args: [{ selector: 'lc-gallery', standalone: true, imports: [IconComponent, SpinnerComponent, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, host: {
11375
11066
  '[class]': '"gallery"',
11376
- }, template: "<!-- Filters -->\n@if (showFilters()) {\n <div class=\"gallery__filters\">\n <button\n type=\"button\"\n class=\"gallery__filter-btn\"\n [class.gallery__filter-btn--active]=\"activeFilter() === null\"\n (click)=\"setFilter(null)\"\n >\n All\n </button>\n @for (cat of categories(); track cat) {\n <button\n type=\"button\"\n class=\"gallery__filter-btn\"\n [class.gallery__filter-btn--active]=\"activeFilter() === cat\"\n (click)=\"setFilter(cat)\"\n >\n {{ cat }}\n </button>\n }\n </div>\n}\n\n<!-- Grid / Masonry -->\n<div class=\"gallery__grid\" [class.gallery__grid--masonry]=\"layout() === 'masonry'\" [ngStyle]=\"gridStyle()\">\n @for (item of filteredItems(); track $index) {\n <div\n class=\"gallery__item\"\n [class.gallery__item--loaded]=\"isLoaded($index)\"\n [class.gallery__item--clickable]=\"enableLightbox()\"\n [ngStyle]=\"itemStyle()\"\n (click)=\"openLightbox($index)\"\n (keydown.enter)=\"openLightbox($index)\"\n [attr.tabindex]=\"enableLightbox() ? 0 : null\"\n [attr.role]=\"enableLightbox() ? 'button' : null\"\n [attr.aria-label]=\"item.alt || 'Image ' + ($index + 1)\"\n >\n @if (!isLoaded($index)) {\n <div class=\"gallery__placeholder\"></div>\n }\n <img\n class=\"gallery__thumb\"\n [src]=\"getThumbnail(item)\"\n [alt]=\"item.alt || ''\"\n loading=\"lazy\"\n (load)=\"onImageLoad($index)\"\n />\n @if (showCaptions() && item.caption) {\n <div class=\"gallery__caption\">{{ item.caption }}</div>\n }\n </div>\n }\n</div>\n\n<!-- Lightbox overlay -->\n@if (lightboxItem(); as item) {\n <div class=\"gallery__lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Image lightbox\">\n <!-- Backdrop -->\n <div class=\"gallery__lightbox-backdrop\" (click)=\"closeLightbox()\"></div>\n\n <!-- Toolbar -->\n <div class=\"gallery__lightbox-toolbar\">\n <div class=\"gallery__lightbox-counter\">{{ lightboxCounter() }}</div>\n <div class=\"gallery__lightbox-actions\">\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Zoom out\" (click)=\"zoomOut()\">\n <lc-icon name=\"minus\" size=\"sm\" />\n </button>\n <span class=\"gallery__lightbox-zoom\">{{ lightboxZoom() }}%</span>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Zoom in\" (click)=\"zoomIn()\">\n <lc-icon name=\"plus\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Reset zoom\" (click)=\"resetZoom()\">\n <lc-icon name=\"arrows-pointing-out\" size=\"xs\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Download\" (click)=\"downloadCurrent()\">\n <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Close\" (click)=\"closeLightbox()\">\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n </div>\n </div>\n\n <!-- Navigation -->\n @if (canGoPrev()) {\n <button\n type=\"button\"\n class=\"gallery__lightbox-nav gallery__lightbox-nav--prev\"\n aria-label=\"Previous image\"\n (click)=\"goToPrev()\"\n >\n <lc-icon name=\"chevron-left\" size=\"lg\" />\n </button>\n }\n @if (canGoNext()) {\n <button\n type=\"button\"\n class=\"gallery__lightbox-nav gallery__lightbox-nav--next\"\n aria-label=\"Next image\"\n (click)=\"goToNext()\"\n >\n <lc-icon name=\"chevron-right\" size=\"lg\" />\n </button>\n }\n\n <!-- Image -->\n <div class=\"gallery__lightbox-content\">\n <img\n class=\"gallery__lightbox-image\"\n [src]=\"item.src\"\n [alt]=\"item.alt || ''\"\n [style.transform]=\"lightboxTransform()\"\n />\n </div>\n\n <!-- Caption -->\n @if (item.caption) {\n <div class=\"gallery__lightbox-caption\">{{ item.caption }}</div>\n }\n </div>\n}\n", styles: [".gallery{width:100%}.gallery__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.gallery__filter-btn{padding:.375rem .75rem;border:1px solid var(--color-neutral-200);border-radius:999px;background:transparent;color:var(--color-neutral-600);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);cursor:pointer;transition:all .15s ease}.gallery__filter-btn:hover{border-color:var(--color-primary-300);color:var(--color-primary-500)}.gallery__filter-btn--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.gallery__filter-btn--active:hover{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}[data-theme=dark] .gallery__filter-btn,:root[data-theme=dark] .gallery__filter-btn{border-color:var(--color-neutral-600);color:var(--color-neutral-400)}[data-theme=dark] .gallery__filter-btn:hover,:root[data-theme=dark] .gallery__filter-btn:hover{border-color:var(--color-primary-400);color:var(--color-primary-400)}[data-theme=dark] .gallery__filter-btn--active,:root[data-theme=dark] .gallery__filter-btn--active{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}.gallery__grid{width:100%}.gallery__grid--masonry{display:block!important}.gallery__item{position:relative;overflow:hidden;border-radius:.5rem;background:var(--color-neutral-100)}[data-theme=dark] .gallery__item,:root[data-theme=dark] .gallery__item{background:var(--color-neutral-800)}.gallery__item--clickable{cursor:pointer}.gallery__item--clickable:hover .gallery__thumb{transform:scale(1.05)}.gallery__item--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.gallery__grid--masonry .gallery__item{margin-bottom:8px;break-inside:avoid}.gallery__placeholder{position:absolute;inset:0;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:gallery-shimmer 1.5s ease-in-out infinite}[data-theme=dark] .gallery__placeholder,:root[data-theme=dark] .gallery__placeholder{background:linear-gradient(90deg,var(--color-neutral-800) 25%,var(--color-neutral-700) 50%,var(--color-neutral-800) 75%);background-size:200% 100%}.gallery__thumb{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;opacity:0}.gallery__item--loaded .gallery__thumb{opacity:1}.gallery__caption{position:absolute;bottom:0;left:0;right:0;padding:.5rem .75rem;background:linear-gradient(transparent,#000000b3);color:#fff;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.gallery__lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}.gallery__lightbox-backdrop{position:absolute;inset:0;background:#000000e6}.gallery__lightbox-toolbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;z-index:2}.gallery__lightbox-counter{color:#ffffffb3;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);-webkit-user-select:none;user-select:none}.gallery__lightbox-actions{display:flex;align-items:center;gap:.25rem}.gallery__lightbox-zoom{min-width:3rem;text-align:center;color:#ffffffb3;font-size:var(--typography-font-size-xs, .75rem);-webkit-user-select:none;user-select:none}.gallery__lightbox-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:.375rem;background:transparent;color:#ffffffb3;cursor:pointer;transition:background-color .15s ease,color .15s ease}.gallery__lightbox-btn:hover{background:#ffffff26;color:#fff}.gallery__lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:none;border-radius:50%;background:#00000080;color:#fff;cursor:pointer;transition:background-color .15s ease}.gallery__lightbox-nav:hover{background:#000c}.gallery__lightbox-nav--prev{left:1rem}.gallery__lightbox-nav--next{right:1rem}.gallery__lightbox-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:80vh;overflow:auto}.gallery__lightbox-image{max-width:90vw;max-height:80vh;object-fit:contain;transition:transform .2s ease;transform-origin:center center;-webkit-user-select:none;user-select:none}.gallery__lightbox-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:1rem;color:#ffffffe6;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);z-index:2}@keyframes gallery-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
11067
+ }, template: "<!-- Filters -->\n@if (showFilters()) {\n <div class=\"gallery__filters\">\n <button\n type=\"button\"\n class=\"gallery__filter-btn\"\n [class.gallery__filter-btn--active]=\"activeFilter() === null\"\n (click)=\"setFilter(null)\"\n >\n All\n </button>\n @for (cat of categories(); track cat) {\n <button\n type=\"button\"\n class=\"gallery__filter-btn\"\n [class.gallery__filter-btn--active]=\"activeFilter() === cat\"\n (click)=\"setFilter(cat)\"\n >\n {{ cat }}\n </button>\n }\n </div>\n}\n\n<!-- Grid / Masonry -->\n<div class=\"gallery__grid\" [class.gallery__grid--masonry]=\"layout() === 'masonry'\" [ngStyle]=\"gridStyle()\">\n @for (item of filteredItems(); track item.src; let i = $index) {\n <div\n class=\"gallery__item\"\n [class.gallery__item--loaded]=\"isLoaded(i)\"\n [class.gallery__item--clickable]=\"enableLightbox()\"\n [ngStyle]=\"itemStyle()\"\n (click)=\"openLightbox(i)\"\n (keydown.enter)=\"openLightbox(i)\"\n [attr.tabindex]=\"enableLightbox() ? 0 : null\"\n [attr.role]=\"enableLightbox() ? 'button' : null\"\n [attr.aria-label]=\"item.alt || 'Image ' + (i + 1)\"\n >\n @if (!isLoaded(i)) {\n <div class=\"gallery__placeholder\"></div>\n }\n <img\n class=\"gallery__thumb\"\n [src]=\"getThumbnail(item)\"\n [alt]=\"item.alt || ''\"\n loading=\"lazy\"\n (load)=\"onImageLoad(i)\"\n />\n @if (showCaptions() && item.caption) {\n <div class=\"gallery__caption\">{{ item.caption }}</div>\n }\n </div>\n }\n</div>\n\n<!-- Lightbox overlay -->\n@if (lightboxItem(); as item) {\n <div class=\"gallery__lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Image lightbox\">\n <!-- Backdrop -->\n <div class=\"gallery__lightbox-backdrop\" (click)=\"closeLightbox()\"></div>\n\n <!-- Toolbar -->\n <div class=\"gallery__lightbox-toolbar\">\n <div class=\"gallery__lightbox-counter\">{{ lightboxCounter() }}</div>\n <div class=\"gallery__lightbox-actions\">\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Zoom out\" (click)=\"zoomOut()\">\n <lc-icon name=\"minus\" size=\"sm\" />\n </button>\n <span class=\"gallery__lightbox-zoom\">{{ lightboxZoom() }}%</span>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Zoom in\" (click)=\"zoomIn()\">\n <lc-icon name=\"plus\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Reset zoom\" (click)=\"resetZoom()\">\n <lc-icon name=\"arrows-pointing-out\" size=\"xs\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Download\" (click)=\"downloadCurrent()\">\n <lc-icon name=\"arrow-down-tray\" size=\"sm\" />\n </button>\n <button type=\"button\" class=\"gallery__lightbox-btn\" aria-label=\"Close\" (click)=\"closeLightbox()\">\n <lc-icon name=\"x-mark\" size=\"sm\" />\n </button>\n </div>\n </div>\n\n <!-- Navigation -->\n @if (canGoPrev()) {\n <button\n type=\"button\"\n class=\"gallery__lightbox-nav gallery__lightbox-nav--prev\"\n aria-label=\"Previous image\"\n (click)=\"goToPrev()\"\n >\n <lc-icon name=\"chevron-left\" size=\"lg\" />\n </button>\n }\n @if (canGoNext()) {\n <button\n type=\"button\"\n class=\"gallery__lightbox-nav gallery__lightbox-nav--next\"\n aria-label=\"Next image\"\n (click)=\"goToNext()\"\n >\n <lc-icon name=\"chevron-right\" size=\"lg\" />\n </button>\n }\n\n <!-- Image -->\n <div class=\"gallery__lightbox-content\">\n <img\n class=\"gallery__lightbox-image\"\n [src]=\"item.src\"\n [alt]=\"item.alt || ''\"\n [style.transform]=\"lightboxTransform()\"\n />\n </div>\n\n <!-- Caption -->\n @if (item.caption) {\n <div class=\"gallery__lightbox-caption\">{{ item.caption }}</div>\n }\n </div>\n}\n", styles: [".gallery{width:100%}.gallery__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.gallery__filter-btn{padding:.375rem .75rem;border:1px solid var(--color-neutral-200);border-radius:999px;background:transparent;color:var(--color-neutral-600);font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);cursor:pointer;transition:all .15s ease}.gallery__filter-btn:hover{border-color:var(--color-primary-300);color:var(--color-primary-500)}.gallery__filter-btn--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.gallery__filter-btn--active:hover{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}[data-theme=dark] .gallery__filter-btn,:root[data-theme=dark] .gallery__filter-btn{border-color:var(--color-neutral-600);color:var(--color-neutral-400)}[data-theme=dark] .gallery__filter-btn:hover,:root[data-theme=dark] .gallery__filter-btn:hover{border-color:var(--color-primary-400);color:var(--color-primary-400)}[data-theme=dark] .gallery__filter-btn--active,:root[data-theme=dark] .gallery__filter-btn--active{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}.gallery__grid{width:100%}.gallery__grid--masonry{display:block!important}.gallery__item{position:relative;overflow:hidden;border-radius:.5rem;background:var(--color-neutral-100)}[data-theme=dark] .gallery__item,:root[data-theme=dark] .gallery__item{background:var(--color-neutral-800)}.gallery__item--clickable{cursor:pointer}.gallery__item--clickable:hover .gallery__thumb{transform:scale(1.05)}.gallery__item--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.gallery__grid--masonry .gallery__item{margin-bottom:8px;break-inside:avoid}.gallery__placeholder{position:absolute;inset:0;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:gallery-shimmer 1.5s ease-in-out infinite}[data-theme=dark] .gallery__placeholder,:root[data-theme=dark] .gallery__placeholder{background:linear-gradient(90deg,var(--color-neutral-800) 25%,var(--color-neutral-700) 50%,var(--color-neutral-800) 75%);background-size:200% 100%}.gallery__thumb{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;opacity:0}.gallery__item--loaded .gallery__thumb{opacity:1}.gallery__caption{position:absolute;bottom:0;left:0;right:0;padding:.5rem .75rem;background:linear-gradient(transparent,#000000b3);color:#fff;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.gallery__lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}.gallery__lightbox-backdrop{position:absolute;inset:0;background:#000000e6}.gallery__lightbox-toolbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;z-index:2}.gallery__lightbox-counter{color:#ffffffb3;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);-webkit-user-select:none;user-select:none}.gallery__lightbox-actions{display:flex;align-items:center;gap:.25rem}.gallery__lightbox-zoom{min-width:3rem;text-align:center;color:#ffffffb3;font-size:var(--typography-font-size-xs, .75rem);-webkit-user-select:none;user-select:none}.gallery__lightbox-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;border-radius:.375rem;background:transparent;color:#ffffffb3;cursor:pointer;transition:background-color .15s ease,color .15s ease}.gallery__lightbox-btn:hover{background:#ffffff26;color:#fff}.gallery__lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border:none;border-radius:50%;background:#00000080;color:#fff;cursor:pointer;transition:background-color .15s ease}.gallery__lightbox-nav:hover{background:#000c}.gallery__lightbox-nav--prev{left:1rem}.gallery__lightbox-nav--next{right:1rem}.gallery__lightbox-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:80vh;overflow:auto}.gallery__lightbox-image{max-width:90vw;max-height:80vh;object-fit:contain;transition:transform .2s ease;transform-origin:center center;-webkit-user-select:none;user-select:none}.gallery__lightbox-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:1rem;color:#ffffffe6;font-size:var(--typography-font-size-sm, .875rem);font-family:var(--typography-font-family, sans-serif);z-index:2}@keyframes gallery-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
11377
11068
  }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showCaptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaptions", required: false }] }], enableLightbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLightbox", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], lightboxOpen: [{ type: i0.Output, args: ["lightboxOpen"] }], lightboxClose: [{ type: i0.Output, args: ["lightboxClose"] }], onKeydown: [{
11378
11069
  type: HostListener,
11379
11070
  args: ['document:keydown', ['$event']]
@@ -12018,7 +11709,7 @@ class TagInputComponent {
12018
11709
  useExisting: forwardRef(() => TagInputComponent),
12019
11710
  multi: true,
12020
11711
  },
12021
- ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label class=\"lc-tag-input__label\">{{ label() }}</label>\n}\n\n<div\n class=\"lc-tag-input__container\"\n [class.lc-tag-input__container--focused]=\"focused()\"\n [class.lc-tag-input__container--disabled]=\"disabled()\"\n (click)=\"focusInput()\"\n>\n @for (tag of tags(); track $index) {\n <span class=\"lc-tag-input__tag\">\n <span class=\"lc-tag-input__tag-text\">{{ tag }}</span>\n @if (removable() && !disabled()) {\n <button\n type=\"button\"\n class=\"lc-tag-input__tag-remove\"\n (click)=\"removeTag($index); $event.stopPropagation()\"\n aria-label=\"Remove tag\"\n >\u00D7</button>\n }\n </span>\n }\n\n @if (canAdd() && !disabled()) {\n <input\n #inputEl\n type=\"text\"\n class=\"lc-tag-input__input\"\n [placeholder]=\"tags().length ? '' : placeholder()\"\n [value]=\"inputValue()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n }\n</div>\n\n@if (filteredSuggestions().length && focused()) {\n <ul class=\"lc-tag-input__suggestions\">\n @for (sug of filteredSuggestions(); track sug) {\n <li\n class=\"lc-tag-input__suggestion\"\n (mousedown)=\"selectSuggestion(sug); $event.preventDefault()\"\n >{{ sug }}</li>\n }\n </ul>\n}\n", styles: [":host{display:block;position:relative}.lc-tag-input__label{display:block;margin-bottom:4px;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-700)}[data-theme=dark] .lc-tag-input__label,:root[data-theme=dark] .lc-tag-input__label{color:var(--color-neutral-300)}.lc-tag-input__container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;min-height:40px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-0, #fff);cursor:text;transition:border-color .15s,box-shadow .15s}.lc-tag-input__container--focused{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-primary-100)}.lc-tag-input__container--disabled{opacity:.6;background:var(--color-neutral-100);cursor:default}[data-theme=dark] .lc-tag-input__container,:root[data-theme=dark] .lc-tag-input__container{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-tag-input__tag{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:4px;background:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--typography-font-size-sm, .875rem);line-height:1.4;-webkit-user-select:none;user-select:none}[data-theme=dark] .lc-tag-input__tag,:root[data-theme=dark] .lc-tag-input__tag{background:var(--color-primary-800, #1e3a5f);color:var(--color-primary-200)}.lc-tag-input__tag-text{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-tag-input__tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;border-radius:50%;background:transparent;color:currentColor;cursor:pointer;font-size:14px;line-height:1;padding:0;opacity:.7;transition:opacity .1s,background .1s}.lc-tag-input__tag-remove:hover{opacity:1;background:var(--color-primary-200)}.lc-tag-input__input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-sm, .875rem);color:var(--color-neutral-900);padding:2px 0}.lc-tag-input__input::placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-tag-input__input,:root[data-theme=dark] .lc-tag-input__input{color:var(--color-neutral-100)}.lc-tag-input__suggestions{position:absolute;z-index:50;top:100%;left:0;right:0;margin:4px 0 0;padding:4px 0;list-style:none;border:1px solid var(--color-neutral-200);border-radius:6px;background:var(--color-neutral-0, #fff);box-shadow:0 4px 12px #00000014;max-height:180px;overflow-y:auto}[data-theme=dark] .lc-tag-input__suggestions,:root[data-theme=dark] .lc-tag-input__suggestions{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-tag-input__suggestion{padding:6px 12px;font-size:var(--typography-font-size-sm, .875rem);cursor:pointer;color:var(--color-neutral-700)}.lc-tag-input__suggestion:hover{background:var(--color-primary-50);color:var(--color-primary-700)}[data-theme=dark] .lc-tag-input__suggestion,:root[data-theme=dark] .lc-tag-input__suggestion{color:var(--color-neutral-300)}[data-theme=dark] .lc-tag-input__suggestion:hover,:root[data-theme=dark] .lc-tag-input__suggestion:hover{background:var(--color-neutral-700)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
11712
+ ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label class=\"lc-tag-input__label\">{{ label() }}</label>\n}\n\n<div\n class=\"lc-tag-input__container\"\n [class.lc-tag-input__container--focused]=\"focused()\"\n [class.lc-tag-input__container--disabled]=\"disabled()\"\n (click)=\"focusInput()\"\n>\n @for (tag of tags(); track tag) {\n <span class=\"lc-tag-input__tag\">\n <span class=\"lc-tag-input__tag-text\">{{ tag }}</span>\n @if (removable() && !disabled()) {\n <button\n type=\"button\"\n class=\"lc-tag-input__tag-remove\"\n (click)=\"removeTag($index); $event.stopPropagation()\"\n aria-label=\"Remove tag\"\n >\u00D7</button>\n }\n </span>\n }\n\n @if (canAdd() && !disabled()) {\n <input\n #inputEl\n type=\"text\"\n class=\"lc-tag-input__input\"\n [placeholder]=\"tags().length ? '' : placeholder()\"\n [value]=\"inputValue()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n }\n</div>\n\n@if (filteredSuggestions().length && focused()) {\n <ul class=\"lc-tag-input__suggestions\">\n @for (sug of filteredSuggestions(); track sug) {\n <li\n class=\"lc-tag-input__suggestion\"\n (mousedown)=\"selectSuggestion(sug); $event.preventDefault()\"\n >{{ sug }}</li>\n }\n </ul>\n}\n", styles: [":host{display:block;position:relative}.lc-tag-input__label{display:block;margin-bottom:4px;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-700)}[data-theme=dark] .lc-tag-input__label,:root[data-theme=dark] .lc-tag-input__label{color:var(--color-neutral-300)}.lc-tag-input__container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;min-height:40px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-0, #fff);cursor:text;transition:border-color .15s,box-shadow .15s}.lc-tag-input__container--focused{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-primary-100)}.lc-tag-input__container--disabled{opacity:.6;background:var(--color-neutral-100);cursor:default}[data-theme=dark] .lc-tag-input__container,:root[data-theme=dark] .lc-tag-input__container{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-tag-input__tag{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:4px;background:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--typography-font-size-sm, .875rem);line-height:1.4;-webkit-user-select:none;user-select:none}[data-theme=dark] .lc-tag-input__tag,:root[data-theme=dark] .lc-tag-input__tag{background:var(--color-primary-800, #1e3a5f);color:var(--color-primary-200)}.lc-tag-input__tag-text{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-tag-input__tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;border-radius:50%;background:transparent;color:currentColor;cursor:pointer;font-size:14px;line-height:1;padding:0;opacity:.7;transition:opacity .1s,background .1s}.lc-tag-input__tag-remove:hover{opacity:1;background:var(--color-primary-200)}.lc-tag-input__input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-sm, .875rem);color:var(--color-neutral-900);padding:2px 0}.lc-tag-input__input::placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-tag-input__input,:root[data-theme=dark] .lc-tag-input__input{color:var(--color-neutral-100)}.lc-tag-input__suggestions{position:absolute;z-index:50;top:100%;left:0;right:0;margin:4px 0 0;padding:4px 0;list-style:none;border:1px solid var(--color-neutral-200);border-radius:6px;background:var(--color-neutral-0, #fff);box-shadow:0 4px 12px #00000014;max-height:180px;overflow-y:auto}[data-theme=dark] .lc-tag-input__suggestions,:root[data-theme=dark] .lc-tag-input__suggestions{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-tag-input__suggestion{padding:6px 12px;font-size:var(--typography-font-size-sm, .875rem);cursor:pointer;color:var(--color-neutral-700)}.lc-tag-input__suggestion:hover{background:var(--color-primary-50);color:var(--color-primary-700)}[data-theme=dark] .lc-tag-input__suggestion,:root[data-theme=dark] .lc-tag-input__suggestion{color:var(--color-neutral-300)}[data-theme=dark] .lc-tag-input__suggestion:hover,:root[data-theme=dark] .lc-tag-input__suggestion:hover{background:var(--color-neutral-700)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12022
11713
  }
12023
11714
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TagInputComponent, decorators: [{
12024
11715
  type: Component,
@@ -12028,7 +11719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
12028
11719
  useExisting: forwardRef(() => TagInputComponent),
12029
11720
  multi: true,
12030
11721
  },
12031
- ], template: "@if (label()) {\n <label class=\"lc-tag-input__label\">{{ label() }}</label>\n}\n\n<div\n class=\"lc-tag-input__container\"\n [class.lc-tag-input__container--focused]=\"focused()\"\n [class.lc-tag-input__container--disabled]=\"disabled()\"\n (click)=\"focusInput()\"\n>\n @for (tag of tags(); track $index) {\n <span class=\"lc-tag-input__tag\">\n <span class=\"lc-tag-input__tag-text\">{{ tag }}</span>\n @if (removable() && !disabled()) {\n <button\n type=\"button\"\n class=\"lc-tag-input__tag-remove\"\n (click)=\"removeTag($index); $event.stopPropagation()\"\n aria-label=\"Remove tag\"\n >\u00D7</button>\n }\n </span>\n }\n\n @if (canAdd() && !disabled()) {\n <input\n #inputEl\n type=\"text\"\n class=\"lc-tag-input__input\"\n [placeholder]=\"tags().length ? '' : placeholder()\"\n [value]=\"inputValue()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n }\n</div>\n\n@if (filteredSuggestions().length && focused()) {\n <ul class=\"lc-tag-input__suggestions\">\n @for (sug of filteredSuggestions(); track sug) {\n <li\n class=\"lc-tag-input__suggestion\"\n (mousedown)=\"selectSuggestion(sug); $event.preventDefault()\"\n >{{ sug }}</li>\n }\n </ul>\n}\n", styles: [":host{display:block;position:relative}.lc-tag-input__label{display:block;margin-bottom:4px;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-700)}[data-theme=dark] .lc-tag-input__label,:root[data-theme=dark] .lc-tag-input__label{color:var(--color-neutral-300)}.lc-tag-input__container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;min-height:40px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-0, #fff);cursor:text;transition:border-color .15s,box-shadow .15s}.lc-tag-input__container--focused{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-primary-100)}.lc-tag-input__container--disabled{opacity:.6;background:var(--color-neutral-100);cursor:default}[data-theme=dark] .lc-tag-input__container,:root[data-theme=dark] .lc-tag-input__container{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-tag-input__tag{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:4px;background:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--typography-font-size-sm, .875rem);line-height:1.4;-webkit-user-select:none;user-select:none}[data-theme=dark] .lc-tag-input__tag,:root[data-theme=dark] .lc-tag-input__tag{background:var(--color-primary-800, #1e3a5f);color:var(--color-primary-200)}.lc-tag-input__tag-text{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-tag-input__tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;border-radius:50%;background:transparent;color:currentColor;cursor:pointer;font-size:14px;line-height:1;padding:0;opacity:.7;transition:opacity .1s,background .1s}.lc-tag-input__tag-remove:hover{opacity:1;background:var(--color-primary-200)}.lc-tag-input__input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-sm, .875rem);color:var(--color-neutral-900);padding:2px 0}.lc-tag-input__input::placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-tag-input__input,:root[data-theme=dark] .lc-tag-input__input{color:var(--color-neutral-100)}.lc-tag-input__suggestions{position:absolute;z-index:50;top:100%;left:0;right:0;margin:4px 0 0;padding:4px 0;list-style:none;border:1px solid var(--color-neutral-200);border-radius:6px;background:var(--color-neutral-0, #fff);box-shadow:0 4px 12px #00000014;max-height:180px;overflow-y:auto}[data-theme=dark] .lc-tag-input__suggestions,:root[data-theme=dark] .lc-tag-input__suggestions{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-tag-input__suggestion{padding:6px 12px;font-size:var(--typography-font-size-sm, .875rem);cursor:pointer;color:var(--color-neutral-700)}.lc-tag-input__suggestion:hover{background:var(--color-primary-50);color:var(--color-primary-700)}[data-theme=dark] .lc-tag-input__suggestion,:root[data-theme=dark] .lc-tag-input__suggestion{color:var(--color-neutral-300)}[data-theme=dark] .lc-tag-input__suggestion:hover,:root[data-theme=dark] .lc-tag-input__suggestion:hover{background:var(--color-neutral-700)}\n"] }]
11722
+ ], template: "@if (label()) {\n <label class=\"lc-tag-input__label\">{{ label() }}</label>\n}\n\n<div\n class=\"lc-tag-input__container\"\n [class.lc-tag-input__container--focused]=\"focused()\"\n [class.lc-tag-input__container--disabled]=\"disabled()\"\n (click)=\"focusInput()\"\n>\n @for (tag of tags(); track tag) {\n <span class=\"lc-tag-input__tag\">\n <span class=\"lc-tag-input__tag-text\">{{ tag }}</span>\n @if (removable() && !disabled()) {\n <button\n type=\"button\"\n class=\"lc-tag-input__tag-remove\"\n (click)=\"removeTag($index); $event.stopPropagation()\"\n aria-label=\"Remove tag\"\n >\u00D7</button>\n }\n </span>\n }\n\n @if (canAdd() && !disabled()) {\n <input\n #inputEl\n type=\"text\"\n class=\"lc-tag-input__input\"\n [placeholder]=\"tags().length ? '' : placeholder()\"\n [value]=\"inputValue()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n }\n</div>\n\n@if (filteredSuggestions().length && focused()) {\n <ul class=\"lc-tag-input__suggestions\">\n @for (sug of filteredSuggestions(); track sug) {\n <li\n class=\"lc-tag-input__suggestion\"\n (mousedown)=\"selectSuggestion(sug); $event.preventDefault()\"\n >{{ sug }}</li>\n }\n </ul>\n}\n", styles: [":host{display:block;position:relative}.lc-tag-input__label{display:block;margin-bottom:4px;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-700)}[data-theme=dark] .lc-tag-input__label,:root[data-theme=dark] .lc-tag-input__label{color:var(--color-neutral-300)}.lc-tag-input__container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;min-height:40px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-0, #fff);cursor:text;transition:border-color .15s,box-shadow .15s}.lc-tag-input__container--focused{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-primary-100)}.lc-tag-input__container--disabled{opacity:.6;background:var(--color-neutral-100);cursor:default}[data-theme=dark] .lc-tag-input__container,:root[data-theme=dark] .lc-tag-input__container{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-tag-input__tag{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:4px;background:var(--color-primary-100);color:var(--color-primary-700);font-size:var(--typography-font-size-sm, .875rem);line-height:1.4;-webkit-user-select:none;user-select:none}[data-theme=dark] .lc-tag-input__tag,:root[data-theme=dark] .lc-tag-input__tag{background:var(--color-primary-800, #1e3a5f);color:var(--color-primary-200)}.lc-tag-input__tag-text{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-tag-input__tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;border-radius:50%;background:transparent;color:currentColor;cursor:pointer;font-size:14px;line-height:1;padding:0;opacity:.7;transition:opacity .1s,background .1s}.lc-tag-input__tag-remove:hover{opacity:1;background:var(--color-primary-200)}.lc-tag-input__input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-sm, .875rem);color:var(--color-neutral-900);padding:2px 0}.lc-tag-input__input::placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-tag-input__input,:root[data-theme=dark] .lc-tag-input__input{color:var(--color-neutral-100)}.lc-tag-input__suggestions{position:absolute;z-index:50;top:100%;left:0;right:0;margin:4px 0 0;padding:4px 0;list-style:none;border:1px solid var(--color-neutral-200);border-radius:6px;background:var(--color-neutral-0, #fff);box-shadow:0 4px 12px #00000014;max-height:180px;overflow-y:auto}[data-theme=dark] .lc-tag-input__suggestions,:root[data-theme=dark] .lc-tag-input__suggestions{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-tag-input__suggestion{padding:6px 12px;font-size:var(--typography-font-size-sm, .875rem);cursor:pointer;color:var(--color-neutral-700)}.lc-tag-input__suggestion:hover{background:var(--color-primary-50);color:var(--color-primary-700)}[data-theme=dark] .lc-tag-input__suggestion,:root[data-theme=dark] .lc-tag-input__suggestion{color:var(--color-neutral-300)}[data-theme=dark] .lc-tag-input__suggestion:hover,:root[data-theme=dark] .lc-tag-input__suggestion:hover{background:var(--color-neutral-700)}\n"] }]
12032
11723
  }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTags", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tagAdded: [{ type: i0.Output, args: ["tagAdded"] }], tagRemoved: [{ type: i0.Output, args: ["tagRemoved"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
12033
11724
 
12034
11725
  class DateRangePickerComponent {
@@ -12189,7 +11880,7 @@ class DateRangePickerComponent {
12189
11880
  useExisting: forwardRef(() => DateRangePickerComponent),
12190
11881
  multi: true,
12191
11882
  },
12192
- ], ngImport: i0, template: "@if (label()) {\n <label class=\"lc-drp__label\">{{ label() }}</label>\n}\n\n<div class=\"lc-drp__trigger\" [class.lc-drp__trigger--disabled]=\"disabled()\" (click)=\"toggle()\">\n <span class=\"lc-drp__icon\">\uD83D\uDCC5</span>\n <span class=\"lc-drp__value\" [class.lc-drp__value--placeholder]=\"!displayValue()\">\n {{ displayValue() || placeholder() }}\n </span>\n @if (displayValue()) {\n <button type=\"button\" class=\"lc-drp__clear\" (click)=\"clearRange($event)\" aria-label=\"Clear\">\u00D7</button>\n }\n</div>\n\n@if (isOpen()) {\n <div class=\"lc-drp__dropdown\">\n <div class=\"lc-drp__header\">\n <button type=\"button\" class=\"lc-drp__nav\" (click)=\"prevMonth()\">\u2039</button>\n <span class=\"lc-drp__month\">{{ monthLabel() }}</span>\n <button type=\"button\" class=\"lc-drp__nav\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n\n <div class=\"lc-drp__weekdays\">\n @for (wd of weekdays; track wd) {\n <span class=\"lc-drp__weekday\">{{ wd }}</span>\n }\n </div>\n\n <div class=\"lc-drp__grid\">\n @for (day of calendarDays(); track $index) {\n <button\n type=\"button\"\n class=\"lc-drp__day\"\n [class.lc-drp__day--outside]=\"!day.inMonth\"\n [class.lc-drp__day--disabled]=\"day.disabled\"\n [class.lc-drp__day--today]=\"isToday(day.date)\"\n [class.lc-drp__day--start]=\"isStart(day.date)\"\n [class.lc-drp__day--end]=\"isEnd(day.date)\"\n [class.lc-drp__day--in-range]=\"isInRange(day.date)\"\n [disabled]=\"day.disabled\"\n (click)=\"selectDate(day.date)\"\n (mouseenter)=\"onDayHover(day.date)\"\n >{{ day.date.getDate() }}</button>\n }\n </div>\n\n <div class=\"lc-drp__footer\">\n <span class=\"lc-drp__hint\">\n @if (selecting() === 'start') { Select start date }\n @else { Select end date }\n </span>\n </div>\n </div>\n}\n", styles: [":host{display:block;position:relative}.lc-drp__label{display:block;margin-bottom:4px;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-700)}[data-theme=dark] .lc-drp__label,:root[data-theme=dark] .lc-drp__label{color:var(--color-neutral-300)}.lc-drp__trigger{display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:40px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-0, #fff);cursor:pointer;transition:border-color .15s}.lc-drp__trigger:hover{border-color:var(--color-primary-400)}.lc-drp__trigger--disabled{opacity:.6;pointer-events:none;background:var(--color-neutral-100)}[data-theme=dark] .lc-drp__trigger,:root[data-theme=dark] .lc-drp__trigger{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-drp__icon{font-size:16px;flex-shrink:0}.lc-drp__value{flex:1;font-size:var(--typography-font-size-sm, .875rem);color:var(--color-neutral-900)}.lc-drp__value--placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-drp__value,:root[data-theme=dark] .lc-drp__value{color:var(--color-neutral-100)}.lc-drp__clear{border:none;background:none;padding:0 4px;cursor:pointer;font-size:16px;color:var(--color-neutral-400)}.lc-drp__clear:hover{color:var(--color-neutral-600)}.lc-drp__dropdown{position:absolute;z-index:100;top:100%;left:0;margin-top:4px;padding:12px;background:var(--color-neutral-0, #fff);border:1px solid var(--color-neutral-200);border-radius:8px;box-shadow:0 8px 24px #0000001f;width:280px}[data-theme=dark] .lc-drp__dropdown,:root[data-theme=dark] .lc-drp__dropdown{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-drp__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.lc-drp__nav{width:28px;height:28px;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:18px;color:var(--color-neutral-600);display:flex;align-items:center;justify-content:center}.lc-drp__nav:hover{background:var(--color-neutral-100)}.lc-drp__month{font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-neutral-800)}[data-theme=dark] .lc-drp__month,:root[data-theme=dark] .lc-drp__month{color:var(--color-neutral-200)}.lc-drp__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-bottom:4px}.lc-drp__weekday{text-align:center;font-size:.6875rem;font-weight:600;color:var(--color-neutral-400);padding:4px}.lc-drp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0}.lc-drp__day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;font-size:.75rem;border-radius:4px;color:var(--color-neutral-800);transition:all .1s}.lc-drp__day:hover:not(:disabled){background:var(--color-primary-50)}.lc-drp__day--outside{color:var(--color-neutral-300)}.lc-drp__day--disabled{color:var(--color-neutral-300);cursor:default}.lc-drp__day--today{font-weight:700;box-shadow:inset 0 -2px 0 var(--color-primary-400)}.lc-drp__day--start,.lc-drp__day--end{background:var(--color-primary-500)!important;color:#fff!important;font-weight:600}.lc-drp__day--in-range{background:var(--color-primary-100);border-radius:0}.lc-drp__day--start{border-radius:4px 0 0 4px}.lc-drp__day--end{border-radius:0 4px 4px 0}[data-theme=dark] .lc-drp__day,:root[data-theme=dark] .lc-drp__day{color:var(--color-neutral-200)}[data-theme=dark] .lc-drp__day--outside,:root[data-theme=dark] .lc-drp__day--outside{color:var(--color-neutral-600)}[data-theme=dark] .lc-drp__day--in-range,:root[data-theme=dark] .lc-drp__day--in-range{background:var(--color-primary-800, #1e3a5f)}.lc-drp__footer{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-neutral-100)}.lc-drp__hint{font-size:.6875rem;color:var(--color-neutral-400)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
11883
+ ], ngImport: i0, template: "@if (label()) {\n <label class=\"lc-drp__label\">{{ label() }}</label>\n}\n\n<div class=\"lc-drp__trigger\" [class.lc-drp__trigger--disabled]=\"disabled()\" (click)=\"toggle()\">\n <span class=\"lc-drp__icon\">\uD83D\uDCC5</span>\n <span class=\"lc-drp__value\" [class.lc-drp__value--placeholder]=\"!displayValue()\">\n {{ displayValue() || placeholder() }}\n </span>\n @if (displayValue()) {\n <button type=\"button\" class=\"lc-drp__clear\" (click)=\"clearRange($event)\" aria-label=\"Clear\">\u00D7</button>\n }\n</div>\n\n@if (isOpen()) {\n <div class=\"lc-drp__dropdown\">\n <div class=\"lc-drp__header\">\n <button type=\"button\" class=\"lc-drp__nav\" (click)=\"prevMonth()\">\u2039</button>\n <span class=\"lc-drp__month\">{{ monthLabel() }}</span>\n <button type=\"button\" class=\"lc-drp__nav\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n\n <div class=\"lc-drp__weekdays\">\n @for (wd of weekdays; track wd) {\n <span class=\"lc-drp__weekday\">{{ wd }}</span>\n }\n </div>\n\n <div class=\"lc-drp__grid\">\n @for (day of calendarDays(); track day.date.getTime()) {\n <button\n type=\"button\"\n class=\"lc-drp__day\"\n [class.lc-drp__day--outside]=\"!day.inMonth\"\n [class.lc-drp__day--disabled]=\"day.disabled\"\n [class.lc-drp__day--today]=\"isToday(day.date)\"\n [class.lc-drp__day--start]=\"isStart(day.date)\"\n [class.lc-drp__day--end]=\"isEnd(day.date)\"\n [class.lc-drp__day--in-range]=\"isInRange(day.date)\"\n [disabled]=\"day.disabled\"\n (click)=\"selectDate(day.date)\"\n (mouseenter)=\"onDayHover(day.date)\"\n >{{ day.date.getDate() }}</button>\n }\n </div>\n\n <div class=\"lc-drp__footer\">\n <span class=\"lc-drp__hint\">\n @if (selecting() === 'start') { Select start date }\n @else { Select end date }\n </span>\n </div>\n </div>\n}\n", styles: [":host{display:block;position:relative}.lc-drp__label{display:block;margin-bottom:4px;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-700)}[data-theme=dark] .lc-drp__label,:root[data-theme=dark] .lc-drp__label{color:var(--color-neutral-300)}.lc-drp__trigger{display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:40px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-0, #fff);cursor:pointer;transition:border-color .15s}.lc-drp__trigger:hover{border-color:var(--color-primary-400)}.lc-drp__trigger--disabled{opacity:.6;pointer-events:none;background:var(--color-neutral-100)}[data-theme=dark] .lc-drp__trigger,:root[data-theme=dark] .lc-drp__trigger{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-drp__icon{font-size:16px;flex-shrink:0}.lc-drp__value{flex:1;font-size:var(--typography-font-size-sm, .875rem);color:var(--color-neutral-900)}.lc-drp__value--placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-drp__value,:root[data-theme=dark] .lc-drp__value{color:var(--color-neutral-100)}.lc-drp__clear{border:none;background:none;padding:0 4px;cursor:pointer;font-size:16px;color:var(--color-neutral-400)}.lc-drp__clear:hover{color:var(--color-neutral-600)}.lc-drp__dropdown{position:absolute;z-index:100;top:100%;left:0;margin-top:4px;padding:12px;background:var(--color-neutral-0, #fff);border:1px solid var(--color-neutral-200);border-radius:8px;box-shadow:0 8px 24px #0000001f;width:280px}[data-theme=dark] .lc-drp__dropdown,:root[data-theme=dark] .lc-drp__dropdown{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-drp__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.lc-drp__nav{width:28px;height:28px;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:18px;color:var(--color-neutral-600);display:flex;align-items:center;justify-content:center}.lc-drp__nav:hover{background:var(--color-neutral-100)}.lc-drp__month{font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-neutral-800)}[data-theme=dark] .lc-drp__month,:root[data-theme=dark] .lc-drp__month{color:var(--color-neutral-200)}.lc-drp__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-bottom:4px}.lc-drp__weekday{text-align:center;font-size:.6875rem;font-weight:600;color:var(--color-neutral-400);padding:4px}.lc-drp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0}.lc-drp__day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;font-size:.75rem;border-radius:4px;color:var(--color-neutral-800);transition:all .1s}.lc-drp__day:hover:not(:disabled){background:var(--color-primary-50)}.lc-drp__day--outside{color:var(--color-neutral-300)}.lc-drp__day--disabled{color:var(--color-neutral-300);cursor:default}.lc-drp__day--today{font-weight:700;box-shadow:inset 0 -2px 0 var(--color-primary-400)}.lc-drp__day--start,.lc-drp__day--end{background:var(--color-primary-500)!important;color:#fff!important;font-weight:600}.lc-drp__day--in-range{background:var(--color-primary-100);border-radius:0}.lc-drp__day--start{border-radius:4px 0 0 4px}.lc-drp__day--end{border-radius:0 4px 4px 0}[data-theme=dark] .lc-drp__day,:root[data-theme=dark] .lc-drp__day{color:var(--color-neutral-200)}[data-theme=dark] .lc-drp__day--outside,:root[data-theme=dark] .lc-drp__day--outside{color:var(--color-neutral-600)}[data-theme=dark] .lc-drp__day--in-range,:root[data-theme=dark] .lc-drp__day--in-range{background:var(--color-primary-800, #1e3a5f)}.lc-drp__footer{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-neutral-100)}.lc-drp__hint{font-size:.6875rem;color:var(--color-neutral-400)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12193
11884
  }
12194
11885
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DateRangePickerComponent, decorators: [{
12195
11886
  type: Component,
@@ -12199,7 +11890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
12199
11890
  useExisting: forwardRef(() => DateRangePickerComponent),
12200
11891
  multi: true,
12201
11892
  },
12202
- ], template: "@if (label()) {\n <label class=\"lc-drp__label\">{{ label() }}</label>\n}\n\n<div class=\"lc-drp__trigger\" [class.lc-drp__trigger--disabled]=\"disabled()\" (click)=\"toggle()\">\n <span class=\"lc-drp__icon\">\uD83D\uDCC5</span>\n <span class=\"lc-drp__value\" [class.lc-drp__value--placeholder]=\"!displayValue()\">\n {{ displayValue() || placeholder() }}\n </span>\n @if (displayValue()) {\n <button type=\"button\" class=\"lc-drp__clear\" (click)=\"clearRange($event)\" aria-label=\"Clear\">\u00D7</button>\n }\n</div>\n\n@if (isOpen()) {\n <div class=\"lc-drp__dropdown\">\n <div class=\"lc-drp__header\">\n <button type=\"button\" class=\"lc-drp__nav\" (click)=\"prevMonth()\">\u2039</button>\n <span class=\"lc-drp__month\">{{ monthLabel() }}</span>\n <button type=\"button\" class=\"lc-drp__nav\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n\n <div class=\"lc-drp__weekdays\">\n @for (wd of weekdays; track wd) {\n <span class=\"lc-drp__weekday\">{{ wd }}</span>\n }\n </div>\n\n <div class=\"lc-drp__grid\">\n @for (day of calendarDays(); track $index) {\n <button\n type=\"button\"\n class=\"lc-drp__day\"\n [class.lc-drp__day--outside]=\"!day.inMonth\"\n [class.lc-drp__day--disabled]=\"day.disabled\"\n [class.lc-drp__day--today]=\"isToday(day.date)\"\n [class.lc-drp__day--start]=\"isStart(day.date)\"\n [class.lc-drp__day--end]=\"isEnd(day.date)\"\n [class.lc-drp__day--in-range]=\"isInRange(day.date)\"\n [disabled]=\"day.disabled\"\n (click)=\"selectDate(day.date)\"\n (mouseenter)=\"onDayHover(day.date)\"\n >{{ day.date.getDate() }}</button>\n }\n </div>\n\n <div class=\"lc-drp__footer\">\n <span class=\"lc-drp__hint\">\n @if (selecting() === 'start') { Select start date }\n @else { Select end date }\n </span>\n </div>\n </div>\n}\n", styles: [":host{display:block;position:relative}.lc-drp__label{display:block;margin-bottom:4px;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-700)}[data-theme=dark] .lc-drp__label,:root[data-theme=dark] .lc-drp__label{color:var(--color-neutral-300)}.lc-drp__trigger{display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:40px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-0, #fff);cursor:pointer;transition:border-color .15s}.lc-drp__trigger:hover{border-color:var(--color-primary-400)}.lc-drp__trigger--disabled{opacity:.6;pointer-events:none;background:var(--color-neutral-100)}[data-theme=dark] .lc-drp__trigger,:root[data-theme=dark] .lc-drp__trigger{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-drp__icon{font-size:16px;flex-shrink:0}.lc-drp__value{flex:1;font-size:var(--typography-font-size-sm, .875rem);color:var(--color-neutral-900)}.lc-drp__value--placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-drp__value,:root[data-theme=dark] .lc-drp__value{color:var(--color-neutral-100)}.lc-drp__clear{border:none;background:none;padding:0 4px;cursor:pointer;font-size:16px;color:var(--color-neutral-400)}.lc-drp__clear:hover{color:var(--color-neutral-600)}.lc-drp__dropdown{position:absolute;z-index:100;top:100%;left:0;margin-top:4px;padding:12px;background:var(--color-neutral-0, #fff);border:1px solid var(--color-neutral-200);border-radius:8px;box-shadow:0 8px 24px #0000001f;width:280px}[data-theme=dark] .lc-drp__dropdown,:root[data-theme=dark] .lc-drp__dropdown{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-drp__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.lc-drp__nav{width:28px;height:28px;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:18px;color:var(--color-neutral-600);display:flex;align-items:center;justify-content:center}.lc-drp__nav:hover{background:var(--color-neutral-100)}.lc-drp__month{font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-neutral-800)}[data-theme=dark] .lc-drp__month,:root[data-theme=dark] .lc-drp__month{color:var(--color-neutral-200)}.lc-drp__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-bottom:4px}.lc-drp__weekday{text-align:center;font-size:.6875rem;font-weight:600;color:var(--color-neutral-400);padding:4px}.lc-drp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0}.lc-drp__day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;font-size:.75rem;border-radius:4px;color:var(--color-neutral-800);transition:all .1s}.lc-drp__day:hover:not(:disabled){background:var(--color-primary-50)}.lc-drp__day--outside{color:var(--color-neutral-300)}.lc-drp__day--disabled{color:var(--color-neutral-300);cursor:default}.lc-drp__day--today{font-weight:700;box-shadow:inset 0 -2px 0 var(--color-primary-400)}.lc-drp__day--start,.lc-drp__day--end{background:var(--color-primary-500)!important;color:#fff!important;font-weight:600}.lc-drp__day--in-range{background:var(--color-primary-100);border-radius:0}.lc-drp__day--start{border-radius:4px 0 0 4px}.lc-drp__day--end{border-radius:0 4px 4px 0}[data-theme=dark] .lc-drp__day,:root[data-theme=dark] .lc-drp__day{color:var(--color-neutral-200)}[data-theme=dark] .lc-drp__day--outside,:root[data-theme=dark] .lc-drp__day--outside{color:var(--color-neutral-600)}[data-theme=dark] .lc-drp__day--in-range,:root[data-theme=dark] .lc-drp__day--in-range{background:var(--color-primary-800, #1e3a5f)}.lc-drp__footer{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-neutral-100)}.lc-drp__hint{font-size:.6875rem;color:var(--color-neutral-400)}\n"] }]
11893
+ ], template: "@if (label()) {\n <label class=\"lc-drp__label\">{{ label() }}</label>\n}\n\n<div class=\"lc-drp__trigger\" [class.lc-drp__trigger--disabled]=\"disabled()\" (click)=\"toggle()\">\n <span class=\"lc-drp__icon\">\uD83D\uDCC5</span>\n <span class=\"lc-drp__value\" [class.lc-drp__value--placeholder]=\"!displayValue()\">\n {{ displayValue() || placeholder() }}\n </span>\n @if (displayValue()) {\n <button type=\"button\" class=\"lc-drp__clear\" (click)=\"clearRange($event)\" aria-label=\"Clear\">\u00D7</button>\n }\n</div>\n\n@if (isOpen()) {\n <div class=\"lc-drp__dropdown\">\n <div class=\"lc-drp__header\">\n <button type=\"button\" class=\"lc-drp__nav\" (click)=\"prevMonth()\">\u2039</button>\n <span class=\"lc-drp__month\">{{ monthLabel() }}</span>\n <button type=\"button\" class=\"lc-drp__nav\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n\n <div class=\"lc-drp__weekdays\">\n @for (wd of weekdays; track wd) {\n <span class=\"lc-drp__weekday\">{{ wd }}</span>\n }\n </div>\n\n <div class=\"lc-drp__grid\">\n @for (day of calendarDays(); track day.date.getTime()) {\n <button\n type=\"button\"\n class=\"lc-drp__day\"\n [class.lc-drp__day--outside]=\"!day.inMonth\"\n [class.lc-drp__day--disabled]=\"day.disabled\"\n [class.lc-drp__day--today]=\"isToday(day.date)\"\n [class.lc-drp__day--start]=\"isStart(day.date)\"\n [class.lc-drp__day--end]=\"isEnd(day.date)\"\n [class.lc-drp__day--in-range]=\"isInRange(day.date)\"\n [disabled]=\"day.disabled\"\n (click)=\"selectDate(day.date)\"\n (mouseenter)=\"onDayHover(day.date)\"\n >{{ day.date.getDate() }}</button>\n }\n </div>\n\n <div class=\"lc-drp__footer\">\n <span class=\"lc-drp__hint\">\n @if (selecting() === 'start') { Select start date }\n @else { Select end date }\n </span>\n </div>\n </div>\n}\n", styles: [":host{display:block;position:relative}.lc-drp__label{display:block;margin-bottom:4px;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-700)}[data-theme=dark] .lc-drp__label,:root[data-theme=dark] .lc-drp__label{color:var(--color-neutral-300)}.lc-drp__trigger{display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:40px;border:1px solid var(--color-neutral-300);border-radius:6px;background:var(--color-neutral-0, #fff);cursor:pointer;transition:border-color .15s}.lc-drp__trigger:hover{border-color:var(--color-primary-400)}.lc-drp__trigger--disabled{opacity:.6;pointer-events:none;background:var(--color-neutral-100)}[data-theme=dark] .lc-drp__trigger,:root[data-theme=dark] .lc-drp__trigger{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-drp__icon{font-size:16px;flex-shrink:0}.lc-drp__value{flex:1;font-size:var(--typography-font-size-sm, .875rem);color:var(--color-neutral-900)}.lc-drp__value--placeholder{color:var(--color-neutral-400)}[data-theme=dark] .lc-drp__value,:root[data-theme=dark] .lc-drp__value{color:var(--color-neutral-100)}.lc-drp__clear{border:none;background:none;padding:0 4px;cursor:pointer;font-size:16px;color:var(--color-neutral-400)}.lc-drp__clear:hover{color:var(--color-neutral-600)}.lc-drp__dropdown{position:absolute;z-index:100;top:100%;left:0;margin-top:4px;padding:12px;background:var(--color-neutral-0, #fff);border:1px solid var(--color-neutral-200);border-radius:8px;box-shadow:0 8px 24px #0000001f;width:280px}[data-theme=dark] .lc-drp__dropdown,:root[data-theme=dark] .lc-drp__dropdown{background:var(--color-neutral-800);border-color:var(--color-neutral-600)}.lc-drp__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.lc-drp__nav{width:28px;height:28px;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:18px;color:var(--color-neutral-600);display:flex;align-items:center;justify-content:center}.lc-drp__nav:hover{background:var(--color-neutral-100)}.lc-drp__month{font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-neutral-800)}[data-theme=dark] .lc-drp__month,:root[data-theme=dark] .lc-drp__month{color:var(--color-neutral-200)}.lc-drp__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-bottom:4px}.lc-drp__weekday{text-align:center;font-size:.6875rem;font-weight:600;color:var(--color-neutral-400);padding:4px}.lc-drp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0}.lc-drp__day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;font-size:.75rem;border-radius:4px;color:var(--color-neutral-800);transition:all .1s}.lc-drp__day:hover:not(:disabled){background:var(--color-primary-50)}.lc-drp__day--outside{color:var(--color-neutral-300)}.lc-drp__day--disabled{color:var(--color-neutral-300);cursor:default}.lc-drp__day--today{font-weight:700;box-shadow:inset 0 -2px 0 var(--color-primary-400)}.lc-drp__day--start,.lc-drp__day--end{background:var(--color-primary-500)!important;color:#fff!important;font-weight:600}.lc-drp__day--in-range{background:var(--color-primary-100);border-radius:0}.lc-drp__day--start{border-radius:4px 0 0 4px}.lc-drp__day--end{border-radius:0 4px 4px 0}[data-theme=dark] .lc-drp__day,:root[data-theme=dark] .lc-drp__day{color:var(--color-neutral-200)}[data-theme=dark] .lc-drp__day--outside,:root[data-theme=dark] .lc-drp__day--outside{color:var(--color-neutral-600)}[data-theme=dark] .lc-drp__day--in-range,:root[data-theme=dark] .lc-drp__day--in-range{background:var(--color-primary-800, #1e3a5f)}.lc-drp__footer{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-neutral-100)}.lc-drp__hint{font-size:.6875rem;color:var(--color-neutral-400)}\n"] }]
12203
11894
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
12204
11895
 
12205
11896
  class DiffViewerComponent {
@@ -12402,14 +12093,12 @@ class KanbanBoardComponent {
12402
12093
  onCardClick(card, columnId) {
12403
12094
  this.cardClick.emit({ card, columnId });
12404
12095
  }
12405
- trackColumn(_, col) { return col.id; }
12406
- trackCard(_, card) { return card.id; }
12407
12096
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: KanbanBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12408
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: KanbanBoardComponent, isStandalone: true, selector: "lc-kanban-board", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, showCardCount: { classPropertyName: "showCardCount", publicName: "showCardCount", isSignal: true, isRequired: false, transformFunction: null }, showWipLimit: { classPropertyName: "showWipLimit", publicName: "showWipLimit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardMoved: "cardMoved", cardClick: "cardClick" }, ngImport: i0, template: "<div class=\"lc-kanban\">\n @for (col of displayColumns(); track trackColumn($index, col)) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track trackCard($index, card)) {\n <div\n class=\"lc-kanban__card\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length || card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.background]=\"label.color || 'var(--color-neutral-200)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n Drop here\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-neutral-50);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}[data-theme=dark] .lc-kanban__column,:root[data-theme=dark] .lc-kanban__column{background:var(--color-neutral-800)}[data-theme=dark] .lc-kanban__column--drop-target,:root[data-theme=dark] .lc-kanban__column--drop-target{background:#3b82f61a}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-neutral-700)}[data-theme=dark] .lc-kanban__column-header,:root[data-theme=dark] .lc-kanban__column-header{color:var(--color-neutral-300)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-neutral-200);color:var(--color-neutral-600);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-neutral-400)}.lc-kanban__column-limit--over{color:var(--color-error-default);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-neutral-0, #fff);border:1px solid var(--color-neutral-200);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:0 2px 8px #00000014}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}[data-theme=dark] .lc-kanban__card,:root[data-theme=dark] .lc-kanban__card{background:var(--color-neutral-700);border-color:var(--color-neutral-600)}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-800)}[data-theme=dark] .lc-kanban__card-title,:root[data-theme=dark] .lc-kanban__card-title{color:var(--color-neutral-100)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-neutral-500);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.625rem;font-weight:500;color:var(--color-neutral-800)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-neutral-500);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-neutral-200);border-radius:6px;font-size:.75rem;color:var(--color-neutral-400)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12097
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: KanbanBoardComponent, isStandalone: true, selector: "lc-kanban-board", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, showCardCount: { classPropertyName: "showCardCount", publicName: "showCardCount", isSignal: true, isRequired: false, transformFunction: null }, showWipLimit: { classPropertyName: "showWipLimit", publicName: "showWipLimit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardMoved: "cardMoved", cardClick: "cardClick" }, ngImport: i0, template: "<div class=\"lc-kanban\">\n @for (col of displayColumns(); track col.id) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track card.id) {\n <div\n class=\"lc-kanban__card\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length || card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.background]=\"label.color || 'var(--color-neutral-200)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n Drop here\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-neutral-50);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}[data-theme=dark] .lc-kanban__column,:root[data-theme=dark] .lc-kanban__column{background:var(--color-neutral-800)}[data-theme=dark] .lc-kanban__column--drop-target,:root[data-theme=dark] .lc-kanban__column--drop-target{background:#3b82f61a}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-neutral-700)}[data-theme=dark] .lc-kanban__column-header,:root[data-theme=dark] .lc-kanban__column-header{color:var(--color-neutral-300)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-neutral-200);color:var(--color-neutral-600);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-neutral-400)}.lc-kanban__column-limit--over{color:var(--color-error-default);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-neutral-0, #fff);border:1px solid var(--color-neutral-200);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:0 2px 8px #00000014}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}[data-theme=dark] .lc-kanban__card,:root[data-theme=dark] .lc-kanban__card{background:var(--color-neutral-700);border-color:var(--color-neutral-600)}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-800)}[data-theme=dark] .lc-kanban__card-title,:root[data-theme=dark] .lc-kanban__card-title{color:var(--color-neutral-100)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-neutral-500);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.625rem;font-weight:500;color:var(--color-neutral-800)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-neutral-500);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-neutral-200);border-radius:6px;font-size:.75rem;color:var(--color-neutral-400)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12409
12098
  }
12410
12099
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: KanbanBoardComponent, decorators: [{
12411
12100
  type: Component,
12412
- args: [{ selector: 'lc-kanban-board', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-kanban\">\n @for (col of displayColumns(); track trackColumn($index, col)) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track trackCard($index, card)) {\n <div\n class=\"lc-kanban__card\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length || card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.background]=\"label.color || 'var(--color-neutral-200)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n Drop here\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-neutral-50);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}[data-theme=dark] .lc-kanban__column,:root[data-theme=dark] .lc-kanban__column{background:var(--color-neutral-800)}[data-theme=dark] .lc-kanban__column--drop-target,:root[data-theme=dark] .lc-kanban__column--drop-target{background:#3b82f61a}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-neutral-700)}[data-theme=dark] .lc-kanban__column-header,:root[data-theme=dark] .lc-kanban__column-header{color:var(--color-neutral-300)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-neutral-200);color:var(--color-neutral-600);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-neutral-400)}.lc-kanban__column-limit--over{color:var(--color-error-default);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-neutral-0, #fff);border:1px solid var(--color-neutral-200);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:0 2px 8px #00000014}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}[data-theme=dark] .lc-kanban__card,:root[data-theme=dark] .lc-kanban__card{background:var(--color-neutral-700);border-color:var(--color-neutral-600)}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-800)}[data-theme=dark] .lc-kanban__card-title,:root[data-theme=dark] .lc-kanban__card-title{color:var(--color-neutral-100)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-neutral-500);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.625rem;font-weight:500;color:var(--color-neutral-800)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-neutral-500);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-neutral-200);border-radius:6px;font-size:.75rem;color:var(--color-neutral-400)}\n"] }]
12101
+ args: [{ selector: 'lc-kanban-board', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-kanban\">\n @for (col of displayColumns(); track col.id) {\n <div\n class=\"lc-kanban__column\"\n [class.lc-kanban__column--drop-target]=\"dropTargetColumn() === col.id\"\n [class.lc-kanban__column--over-limit]=\"showWipLimit() && isOverLimit(col)\"\n (dragover)=\"onDragOverColumn($event, col.id)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event, col.id)\"\n >\n <div class=\"lc-kanban__column-header\">\n @if (col.color) {\n <span class=\"lc-kanban__column-dot\" [style.background]=\"col.color\"></span>\n }\n <span class=\"lc-kanban__column-title\">{{ col.title }}</span>\n @if (showCardCount()) {\n <span class=\"lc-kanban__column-count\">{{ col.cards.length }}</span>\n }\n @if (showWipLimit() && col.limit) {\n <span class=\"lc-kanban__column-limit\" [class.lc-kanban__column-limit--over]=\"isOverLimit(col)\">\n / {{ col.limit }}\n </span>\n }\n </div>\n\n <div class=\"lc-kanban__cards\">\n @for (card of col.cards; track card.id) {\n <div\n class=\"lc-kanban__card\"\n [class.lc-kanban__card--dragging]=\"draggedCard()?.card?.id === card.id\"\n [attr.draggable]=\"!readonly()\"\n (dragstart)=\"onDragStart($event, card, col.id)\"\n (dragover)=\"onDragOver($event, col.id, $index)\"\n (drop)=\"onDrop($event, col.id, $index)\"\n (dragend)=\"onDragEnd()\"\n (click)=\"onCardClick(card, col.id)\"\n >\n @if (card.priority) {\n <lc-icon [name]=\"getPriorityIcon(card.priority)\" size=\"xs\" [color]=\"getPriorityColor(card.priority)\" class=\"lc-kanban__card-priority\"></lc-icon>\n }\n <span class=\"lc-kanban__card-title\">{{ card.title }}</span>\n\n @if (card.description) {\n <p class=\"lc-kanban__card-desc\">{{ card.description }}</p>\n }\n\n @if (card.labels?.length || card.assignee) {\n <div class=\"lc-kanban__card-footer\">\n @if (card.labels?.length) {\n <div class=\"lc-kanban__card-labels\">\n @for (label of card.labels; track label.text) {\n <span class=\"lc-kanban__card-label\" [style.background]=\"label.color || 'var(--color-neutral-200)'\">{{ label.text }}</span>\n }\n </div>\n }\n @if (card.assignee) {\n <span class=\"lc-kanban__card-assignee\">{{ card.assignee }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty state drop zone -->\n @if (col.cards.length === 0) {\n <div\n class=\"lc-kanban__empty\"\n (dragover)=\"onDragOver($event, col.id, 0)\"\n (drop)=\"onDrop($event, col.id, 0)\"\n >\n Drop here\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow-x:auto}.lc-kanban{display:flex;gap:16px;padding:8px;min-height:200px}.lc-kanban__column{flex:0 0 280px;display:flex;flex-direction:column;background:var(--color-neutral-50);border-radius:8px;padding:8px;transition:background .15s,box-shadow .15s}.lc-kanban__column--drop-target{background:var(--color-primary-50);box-shadow:inset 0 0 0 2px var(--color-primary-300)}.lc-kanban__column--over-limit{background:var(--color-error-50, #fef2f2)}[data-theme=dark] .lc-kanban__column,:root[data-theme=dark] .lc-kanban__column{background:var(--color-neutral-800)}[data-theme=dark] .lc-kanban__column--drop-target,:root[data-theme=dark] .lc-kanban__column--drop-target{background:#3b82f61a}.lc-kanban__column-header{display:flex;align-items:center;gap:6px;padding:4px 4px 8px;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;color:var(--color-neutral-700)}[data-theme=dark] .lc-kanban__column-header,:root[data-theme=dark] .lc-kanban__column-header{color:var(--color-neutral-300)}.lc-kanban__column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-kanban__column-title{flex:1}.lc-kanban__column-count{font-size:.6875rem;background:var(--color-neutral-200);color:var(--color-neutral-600);padding:1px 6px;border-radius:10px;font-weight:500}.lc-kanban__column-limit{font-size:.6875rem;color:var(--color-neutral-400)}.lc-kanban__column-limit--over{color:var(--color-error-default);font-weight:700}.lc-kanban__cards{flex:1;display:flex;flex-direction:column;gap:8px;min-height:40px}.lc-kanban__card{background:var(--color-neutral-0, #fff);border:1px solid var(--color-neutral-200);border-radius:6px;padding:10px;cursor:grab;transition:box-shadow .15s,opacity .15s}.lc-kanban__card:hover{box-shadow:0 2px 8px #00000014}.lc-kanban__card--dragging{opacity:.4}.lc-kanban__card:active{cursor:grabbing}[data-theme=dark] .lc-kanban__card,:root[data-theme=dark] .lc-kanban__card{background:var(--color-neutral-700);border-color:var(--color-neutral-600)}.lc-kanban__card-priority{flex-shrink:0;margin-right:4px}.lc-kanban__card-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:500;color:var(--color-neutral-800)}[data-theme=dark] .lc-kanban__card-title,:root[data-theme=dark] .lc-kanban__card-title{color:var(--color-neutral-100)}.lc-kanban__card-desc{margin:4px 0 0;font-size:.75rem;color:var(--color-neutral-500);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-kanban__card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}.lc-kanban__card-labels{display:flex;flex-wrap:wrap;gap:4px}.lc-kanban__card-label{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.625rem;font-weight:500;color:var(--color-neutral-800)}.lc-kanban__card-assignee{font-size:.6875rem;color:var(--color-neutral-500);font-weight:500}.lc-kanban__empty{display:flex;align-items:center;justify-content:center;min-height:60px;border:2px dashed var(--color-neutral-200);border-radius:6px;font-size:.75rem;color:var(--color-neutral-400)}\n"] }]
12413
12102
  }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], showCardCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCardCount", required: false }] }], showWipLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWipLimit", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], cardMoved: [{ type: i0.Output, args: ["cardMoved"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
12414
12103
 
12415
12104
  const TYPE_ICONS = {
@@ -13129,7 +12818,7 @@ class MarkdownComponent {
13129
12818
  // 1. Extract fenced code blocks → placeholders
13130
12819
  let processed = md.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
13131
12820
  const idx = blocks.length;
13132
- blocks.push({ lang: lang || 'text', code: code.trimEnd() });
12821
+ blocks.push({ lang: (lang || 'text'), code: code.trimEnd() });
13133
12822
  return `<!--CODE_BLOCK_${idx}-->`;
13134
12823
  });
13135
12824
  // 2. Escape HTML entities
@@ -13254,11 +12943,11 @@ class MarkdownComponent {
13254
12943
  .replace(/>/g, '&gt;');
13255
12944
  }
13256
12945
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
13257
- 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]=\"$any(part.lang)\"\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 });
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 });
13258
12947
  }
13259
12948
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MarkdownComponent, decorators: [{
13260
12949
  type: Component,
13261
- 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]=\"$any(part.lang)\"\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"] }]
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"] }]
13262
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"] }] } });
13263
12952
 
13264
12953
  /**
@@ -13533,12 +13222,15 @@ class LogViewerComponent {
13533
13222
  .replace(/</g, '&lt;')
13534
13223
  .replace(/>/g, '&gt;');
13535
13224
  }
13225
+ getInputValue(event) {
13226
+ return event.target.value;
13227
+ }
13536
13228
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LogViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
13537
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LogViewerComponent, isStandalone: true, selector: "lc-log-viewer", inputs: { lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, stream$: { classPropertyName: "stream$", publicName: "stream$", isSignal: true, isRequired: false, transformFunction: null }, maxLines: { classPropertyName: "maxLines", publicName: "maxLines", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, showLineNumbers: { classPropertyName: "showLineNumbers", publicName: "showLineNumbers", isSignal: true, isRequired: false, transformFunction: null }, ansiColors: { classPropertyName: "ansiColors", publicName: "ansiColors", isSignal: true, isRequired: false, transformFunction: null }, levelFilter: { classPropertyName: "levelFilter", publicName: "levelFilter", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lineClick: "lineClick", copyAll: "copyAll", scrollStateChange: "scrollStateChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div\n [class]=\"containerClasses()\"\n [style.height]=\"height()\"\n tabindex=\"0\"\n (keydown)=\"onKeydown($event)\"\n>\n <!-- Toolbar -->\n <div class=\"lc-log-viewer__toolbar\">\n <div class=\"lc-log-viewer__toolbar-left\">\n @if (stream$()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"paused()\"\n (click)=\"togglePause()\"\n [title]=\"paused() ? 'Resume' : 'Pause'\"\n >\n <lc-icon [name]=\"paused() ? 'play' : 'pause'\" size=\"xs\" />\n </button>\n }\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"clearBuffer()\"\n title=\"Clear\"\n >\n <lc-icon name=\"trash\" size=\"xs\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"onCopyAll()\"\n title=\"Copy all\"\n >\n <lc-icon name=\"clipboard-document\" size=\"xs\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"showSearch()\"\n (click)=\"toggleSearch()\"\n title=\"Search (/)\"\n >\n <lc-icon name=\"magnifying-glass\" size=\"xs\" />\n </button>\n </div>\n\n <div class=\"lc-log-viewer__toolbar-right\">\n <!-- Level filter pills -->\n @if (levelCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--error\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('error')\"\n (click)=\"toggleLevelFilter('error')\"\n >\n {{ levelCounts().error }} errors\n </button>\n }\n @if (levelCounts().warn > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--warn\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('warn')\"\n (click)=\"toggleLevelFilter('warn')\"\n >\n {{ levelCounts().warn }} warnings\n </button>\n }\n <span class=\"lc-log-viewer__line-count\">{{ filteredLines().length }} lines</span>\n </div>\n </div>\n\n <!-- Search bar -->\n @if (showSearch()) {\n <div class=\"lc-log-viewer__search\">\n <lc-icon name=\"magnifying-glass\" size=\"xs\" />\n <input\n type=\"text\"\n class=\"lc-log-viewer__search-input\"\n placeholder=\"Search logs...\"\n [value]=\"internalSearch()\"\n (input)=\"internalSearch.set($any($event.target).value)\"\n autofocus\n />\n </div>\n }\n\n <!-- Log content (virtualized) -->\n <div\n #scrollContainer\n class=\"lc-log-viewer__content\"\n >\n <div\n class=\"lc-log-viewer__spacer\"\n [style.height.px]=\"visibleRange().totalHeight\"\n >\n <div\n class=\"lc-log-viewer__window\"\n [style.transform]=\"'translateY(' + (visibleRange().start * LINE_HEIGHT) + 'px)'\"\n >\n @for (line of visibleLines(); track line._index) {\n <div\n class=\"lc-log-viewer__line\"\n [class.lc-log-viewer__line--debug]=\"line.level === 'debug'\"\n [class.lc-log-viewer__line--info]=\"line.level === 'info'\"\n [class.lc-log-viewer__line--warn]=\"line.level === 'warn'\"\n [class.lc-log-viewer__line--error]=\"line.level === 'error'\"\n (click)=\"onLineClick(line)\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-log-viewer__line-num\">{{ line._index + 1 }}</span>\n }\n @if (showTimestamps() && line.timestamp) {\n <span class=\"lc-log-viewer__timestamp\">{{ formatTimestamp(line.timestamp) }}</span>\n }\n @if (line.level) {\n <span class=\"lc-log-viewer__level\">{{ line.level.toUpperCase().padEnd(5) }}</span>\n }\n @if (line.source) {\n <span class=\"lc-log-viewer__source\">[{{ line.source }}]</span>\n }\n <span\n class=\"lc-log-viewer__text\"\n [innerHTML]=\"highlightSearch(parseAnsi(line.text))\"\n ></span>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Jump to bottom button -->\n @if (!atBottom()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__jump-bottom\"\n (click)=\"scrollToBottom()\"\n >\n <lc-icon name=\"arrow-down\" size=\"xs\" />\n Jump to bottom\n </button>\n }\n</div>\n", styles: [".lc-log-viewer{display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-background, #ffffff);color:var(--color-text, #111827)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__level-pill{font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:opacity .15s;opacity:.6}.lc-log-viewer__level-pill--active{opacity:1}.lc-log-viewer__level-pill--error{background-color:#fecaca;color:#991b1b}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#fef3c7;color:#92400e}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}.lc-log-viewer__line-count{font-size:.6875rem;opacity:.5;font-family:var(--font-family-sans);padding:0 .25rem}.lc-log-viewer__search{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__search{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__search-input{flex:1;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit}.lc-log-viewer__search-input::placeholder{opacity:.4}.lc-log-viewer__content{flex:1;overflow-y:auto;overflow-x:auto;position:relative;min-height:0}.lc-log-viewer__spacer{position:relative;width:100%}.lc-log-viewer__window{position:absolute;top:0;left:0;right:0}.lc-log-viewer__line{display:flex;align-items:baseline;gap:.625rem;padding:1px .75rem;height:22px;white-space:nowrap;cursor:pointer;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--debug{opacity:.6}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#fffbeb}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#fef2f2}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:inherit;opacity:.3;min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:inherit;opacity:.5;min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:#9ca3af}.lc-log-viewer__line--info .lc-log-viewer__level{color:#3b82f6}.lc-log-viewer__line--warn .lc-log-viewer__level{color:#f59e0b}.lc-log-viewer__line--error .lc-log-viewer__level{color:#ef4444}.lc-log-viewer__line--debug .lc-log-viewer--terminal .lc-log-viewer__level{color:#6c7086}.lc-log-viewer__line--info .lc-log-viewer--terminal .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer__line--warn .lc-log-viewer--terminal .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer__line--error .lc-log-viewer--terminal .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:inherit;opacity:.5}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:#fbbf2480;border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af40}.lc-log-viewer__jump-bottom{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:9999px;background-color:var(--color-background, #ffffff);color:var(--color-text, #111827);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:0 2px 8px #00000026;z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-neutral-50, #f9fafb)}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom{background-color:#313244;border-color:#45475a;color:#cdd6f4}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom:hover{background-color:#45475a}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#1e1e2e}.ansi-red{color:#f38ba8}.ansi-green{color:#a6e3a1}.ansi-yellow{color:#f9e2af}.ansi-blue{color:#89b4fa}.ansi-magenta{color:#cba6f7}.ansi-cyan{color:#94e2d5}.ansi-white{color:#cdd6f4}.ansi-gray{color:#6c7086}.ansi-bright-red{color:#eba0ac}.ansi-bright-green{color:#a6e3a1}.ansi-bright-yellow{color:#f9e2af}.ansi-bright-blue{color:#89dceb}.ansi-bright-magenta{color:#f5c2e7}.ansi-bright-cyan{color:#94e2d5}.ansi-bright-white{color:#bac2de}.lc-log-viewer--log .ansi-black{color:#111827}.lc-log-viewer--log .ansi-red{color:#dc2626}.lc-log-viewer--log .ansi-green{color:#16a34a}.lc-log-viewer--log .ansi-yellow{color:#ca8a04}.lc-log-viewer--log .ansi-blue{color:#2563eb}.lc-log-viewer--log .ansi-magenta{color:#9333ea}.lc-log-viewer--log .ansi-cyan{color:#0891b2}.lc-log-viewer--log .ansi-white{color:#6b7280}.lc-log-viewer--log .ansi-gray{color:#9ca3af}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar{width:8px;height:8px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-track{background:#181825}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb:hover{background:#585b70}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
13229
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LogViewerComponent, isStandalone: true, selector: "lc-log-viewer", inputs: { lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, stream$: { classPropertyName: "stream$", publicName: "stream$", isSignal: true, isRequired: false, transformFunction: null }, maxLines: { classPropertyName: "maxLines", publicName: "maxLines", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, showLineNumbers: { classPropertyName: "showLineNumbers", publicName: "showLineNumbers", isSignal: true, isRequired: false, transformFunction: null }, ansiColors: { classPropertyName: "ansiColors", publicName: "ansiColors", isSignal: true, isRequired: false, transformFunction: null }, levelFilter: { classPropertyName: "levelFilter", publicName: "levelFilter", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lineClick: "lineClick", copyAll: "copyAll", scrollStateChange: "scrollStateChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div\n [class]=\"containerClasses()\"\n [style.height]=\"height()\"\n tabindex=\"0\"\n (keydown)=\"onKeydown($event)\"\n>\n <!-- Toolbar -->\n <div class=\"lc-log-viewer__toolbar\">\n <div class=\"lc-log-viewer__toolbar-left\">\n @if (stream$()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"paused()\"\n (click)=\"togglePause()\"\n [title]=\"paused() ? 'Resume' : 'Pause'\"\n >\n <lc-icon [name]=\"paused() ? 'play' : 'pause'\" size=\"xs\" />\n </button>\n }\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"clearBuffer()\"\n title=\"Clear\"\n >\n <lc-icon name=\"trash\" size=\"xs\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"onCopyAll()\"\n title=\"Copy all\"\n >\n <lc-icon name=\"clipboard-document\" size=\"xs\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"showSearch()\"\n (click)=\"toggleSearch()\"\n title=\"Search (/)\"\n >\n <lc-icon name=\"magnifying-glass\" size=\"xs\" />\n </button>\n </div>\n\n <div class=\"lc-log-viewer__toolbar-right\">\n <!-- Level filter pills -->\n @if (levelCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--error\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('error')\"\n (click)=\"toggleLevelFilter('error')\"\n >\n {{ levelCounts().error }} errors\n </button>\n }\n @if (levelCounts().warn > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--warn\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('warn')\"\n (click)=\"toggleLevelFilter('warn')\"\n >\n {{ levelCounts().warn }} warnings\n </button>\n }\n <span class=\"lc-log-viewer__line-count\">{{ filteredLines().length }} lines</span>\n </div>\n </div>\n\n <!-- Search bar -->\n @if (showSearch()) {\n <div class=\"lc-log-viewer__search\">\n <lc-icon name=\"magnifying-glass\" size=\"xs\" />\n <input\n type=\"text\"\n class=\"lc-log-viewer__search-input\"\n placeholder=\"Search logs...\"\n [value]=\"internalSearch()\"\n (input)=\"internalSearch.set(getInputValue($event))\"\n autofocus\n />\n </div>\n }\n\n <!-- Log content (virtualized) -->\n <div\n #scrollContainer\n class=\"lc-log-viewer__content\"\n >\n <div\n class=\"lc-log-viewer__spacer\"\n [style.height.px]=\"visibleRange().totalHeight\"\n >\n <div\n class=\"lc-log-viewer__window\"\n [style.transform]=\"'translateY(' + (visibleRange().start * LINE_HEIGHT) + 'px)'\"\n >\n @for (line of visibleLines(); track line._index) {\n <div\n class=\"lc-log-viewer__line\"\n [class.lc-log-viewer__line--debug]=\"line.level === 'debug'\"\n [class.lc-log-viewer__line--info]=\"line.level === 'info'\"\n [class.lc-log-viewer__line--warn]=\"line.level === 'warn'\"\n [class.lc-log-viewer__line--error]=\"line.level === 'error'\"\n (click)=\"onLineClick(line)\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-log-viewer__line-num\">{{ line._index + 1 }}</span>\n }\n @if (showTimestamps() && line.timestamp) {\n <span class=\"lc-log-viewer__timestamp\">{{ formatTimestamp(line.timestamp) }}</span>\n }\n @if (line.level) {\n <span class=\"lc-log-viewer__level\">{{ line.level.toUpperCase().padEnd(5) }}</span>\n }\n @if (line.source) {\n <span class=\"lc-log-viewer__source\">[{{ line.source }}]</span>\n }\n <span\n class=\"lc-log-viewer__text\"\n [innerHTML]=\"highlightSearch(parseAnsi(line.text))\"\n ></span>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Jump to bottom button -->\n @if (!atBottom()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__jump-bottom\"\n (click)=\"scrollToBottom()\"\n >\n <lc-icon name=\"arrow-down\" size=\"xs\" />\n Jump to bottom\n </button>\n }\n</div>\n", styles: [".lc-log-viewer{display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-background, #ffffff);color:var(--color-text, #111827)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__level-pill{font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:opacity .15s;opacity:.6}.lc-log-viewer__level-pill--active{opacity:1}.lc-log-viewer__level-pill--error{background-color:#fecaca;color:#991b1b}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#fef3c7;color:#92400e}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}.lc-log-viewer__line-count{font-size:.6875rem;opacity:.5;font-family:var(--font-family-sans);padding:0 .25rem}.lc-log-viewer__search{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__search{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__search-input{flex:1;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit}.lc-log-viewer__search-input::placeholder{opacity:.4}.lc-log-viewer__content{flex:1;overflow-y:auto;overflow-x:auto;position:relative;min-height:0}.lc-log-viewer__spacer{position:relative;width:100%}.lc-log-viewer__window{position:absolute;top:0;left:0;right:0}.lc-log-viewer__line{display:flex;align-items:baseline;gap:.625rem;padding:1px .75rem;height:22px;white-space:nowrap;cursor:pointer;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--debug{opacity:.6}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#fffbeb}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#fef2f2}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:inherit;opacity:.3;min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:inherit;opacity:.5;min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:#9ca3af}.lc-log-viewer__line--info .lc-log-viewer__level{color:#3b82f6}.lc-log-viewer__line--warn .lc-log-viewer__level{color:#f59e0b}.lc-log-viewer__line--error .lc-log-viewer__level{color:#ef4444}.lc-log-viewer__line--debug .lc-log-viewer--terminal .lc-log-viewer__level{color:#6c7086}.lc-log-viewer__line--info .lc-log-viewer--terminal .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer__line--warn .lc-log-viewer--terminal .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer__line--error .lc-log-viewer--terminal .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:inherit;opacity:.5}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:#fbbf2480;border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af40}.lc-log-viewer__jump-bottom{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:9999px;background-color:var(--color-background, #ffffff);color:var(--color-text, #111827);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:0 2px 8px #00000026;z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-neutral-50, #f9fafb)}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom{background-color:#313244;border-color:#45475a;color:#cdd6f4}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom:hover{background-color:#45475a}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#1e1e2e}.ansi-red{color:#f38ba8}.ansi-green{color:#a6e3a1}.ansi-yellow{color:#f9e2af}.ansi-blue{color:#89b4fa}.ansi-magenta{color:#cba6f7}.ansi-cyan{color:#94e2d5}.ansi-white{color:#cdd6f4}.ansi-gray{color:#6c7086}.ansi-bright-red{color:#eba0ac}.ansi-bright-green{color:#a6e3a1}.ansi-bright-yellow{color:#f9e2af}.ansi-bright-blue{color:#89dceb}.ansi-bright-magenta{color:#f5c2e7}.ansi-bright-cyan{color:#94e2d5}.ansi-bright-white{color:#bac2de}.lc-log-viewer--log .ansi-black{color:#111827}.lc-log-viewer--log .ansi-red{color:#dc2626}.lc-log-viewer--log .ansi-green{color:#16a34a}.lc-log-viewer--log .ansi-yellow{color:#ca8a04}.lc-log-viewer--log .ansi-blue{color:#2563eb}.lc-log-viewer--log .ansi-magenta{color:#9333ea}.lc-log-viewer--log .ansi-cyan{color:#0891b2}.lc-log-viewer--log .ansi-white{color:#6b7280}.lc-log-viewer--log .ansi-gray{color:#9ca3af}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar{width:8px;height:8px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-track{background:#181825}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb:hover{background:#585b70}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
13538
13230
  }
13539
13231
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LogViewerComponent, decorators: [{
13540
13232
  type: Component,
13541
- args: [{ selector: 'lc-log-viewer', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [class]=\"containerClasses()\"\n [style.height]=\"height()\"\n tabindex=\"0\"\n (keydown)=\"onKeydown($event)\"\n>\n <!-- Toolbar -->\n <div class=\"lc-log-viewer__toolbar\">\n <div class=\"lc-log-viewer__toolbar-left\">\n @if (stream$()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"paused()\"\n (click)=\"togglePause()\"\n [title]=\"paused() ? 'Resume' : 'Pause'\"\n >\n <lc-icon [name]=\"paused() ? 'play' : 'pause'\" size=\"xs\" />\n </button>\n }\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"clearBuffer()\"\n title=\"Clear\"\n >\n <lc-icon name=\"trash\" size=\"xs\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"onCopyAll()\"\n title=\"Copy all\"\n >\n <lc-icon name=\"clipboard-document\" size=\"xs\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"showSearch()\"\n (click)=\"toggleSearch()\"\n title=\"Search (/)\"\n >\n <lc-icon name=\"magnifying-glass\" size=\"xs\" />\n </button>\n </div>\n\n <div class=\"lc-log-viewer__toolbar-right\">\n <!-- Level filter pills -->\n @if (levelCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--error\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('error')\"\n (click)=\"toggleLevelFilter('error')\"\n >\n {{ levelCounts().error }} errors\n </button>\n }\n @if (levelCounts().warn > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--warn\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('warn')\"\n (click)=\"toggleLevelFilter('warn')\"\n >\n {{ levelCounts().warn }} warnings\n </button>\n }\n <span class=\"lc-log-viewer__line-count\">{{ filteredLines().length }} lines</span>\n </div>\n </div>\n\n <!-- Search bar -->\n @if (showSearch()) {\n <div class=\"lc-log-viewer__search\">\n <lc-icon name=\"magnifying-glass\" size=\"xs\" />\n <input\n type=\"text\"\n class=\"lc-log-viewer__search-input\"\n placeholder=\"Search logs...\"\n [value]=\"internalSearch()\"\n (input)=\"internalSearch.set($any($event.target).value)\"\n autofocus\n />\n </div>\n }\n\n <!-- Log content (virtualized) -->\n <div\n #scrollContainer\n class=\"lc-log-viewer__content\"\n >\n <div\n class=\"lc-log-viewer__spacer\"\n [style.height.px]=\"visibleRange().totalHeight\"\n >\n <div\n class=\"lc-log-viewer__window\"\n [style.transform]=\"'translateY(' + (visibleRange().start * LINE_HEIGHT) + 'px)'\"\n >\n @for (line of visibleLines(); track line._index) {\n <div\n class=\"lc-log-viewer__line\"\n [class.lc-log-viewer__line--debug]=\"line.level === 'debug'\"\n [class.lc-log-viewer__line--info]=\"line.level === 'info'\"\n [class.lc-log-viewer__line--warn]=\"line.level === 'warn'\"\n [class.lc-log-viewer__line--error]=\"line.level === 'error'\"\n (click)=\"onLineClick(line)\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-log-viewer__line-num\">{{ line._index + 1 }}</span>\n }\n @if (showTimestamps() && line.timestamp) {\n <span class=\"lc-log-viewer__timestamp\">{{ formatTimestamp(line.timestamp) }}</span>\n }\n @if (line.level) {\n <span class=\"lc-log-viewer__level\">{{ line.level.toUpperCase().padEnd(5) }}</span>\n }\n @if (line.source) {\n <span class=\"lc-log-viewer__source\">[{{ line.source }}]</span>\n }\n <span\n class=\"lc-log-viewer__text\"\n [innerHTML]=\"highlightSearch(parseAnsi(line.text))\"\n ></span>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Jump to bottom button -->\n @if (!atBottom()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__jump-bottom\"\n (click)=\"scrollToBottom()\"\n >\n <lc-icon name=\"arrow-down\" size=\"xs\" />\n Jump to bottom\n </button>\n }\n</div>\n", styles: [".lc-log-viewer{display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-background, #ffffff);color:var(--color-text, #111827)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__level-pill{font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:opacity .15s;opacity:.6}.lc-log-viewer__level-pill--active{opacity:1}.lc-log-viewer__level-pill--error{background-color:#fecaca;color:#991b1b}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#fef3c7;color:#92400e}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}.lc-log-viewer__line-count{font-size:.6875rem;opacity:.5;font-family:var(--font-family-sans);padding:0 .25rem}.lc-log-viewer__search{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__search{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__search-input{flex:1;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit}.lc-log-viewer__search-input::placeholder{opacity:.4}.lc-log-viewer__content{flex:1;overflow-y:auto;overflow-x:auto;position:relative;min-height:0}.lc-log-viewer__spacer{position:relative;width:100%}.lc-log-viewer__window{position:absolute;top:0;left:0;right:0}.lc-log-viewer__line{display:flex;align-items:baseline;gap:.625rem;padding:1px .75rem;height:22px;white-space:nowrap;cursor:pointer;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--debug{opacity:.6}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#fffbeb}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#fef2f2}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:inherit;opacity:.3;min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:inherit;opacity:.5;min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:#9ca3af}.lc-log-viewer__line--info .lc-log-viewer__level{color:#3b82f6}.lc-log-viewer__line--warn .lc-log-viewer__level{color:#f59e0b}.lc-log-viewer__line--error .lc-log-viewer__level{color:#ef4444}.lc-log-viewer__line--debug .lc-log-viewer--terminal .lc-log-viewer__level{color:#6c7086}.lc-log-viewer__line--info .lc-log-viewer--terminal .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer__line--warn .lc-log-viewer--terminal .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer__line--error .lc-log-viewer--terminal .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:inherit;opacity:.5}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:#fbbf2480;border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af40}.lc-log-viewer__jump-bottom{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:9999px;background-color:var(--color-background, #ffffff);color:var(--color-text, #111827);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:0 2px 8px #00000026;z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-neutral-50, #f9fafb)}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom{background-color:#313244;border-color:#45475a;color:#cdd6f4}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom:hover{background-color:#45475a}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#1e1e2e}.ansi-red{color:#f38ba8}.ansi-green{color:#a6e3a1}.ansi-yellow{color:#f9e2af}.ansi-blue{color:#89b4fa}.ansi-magenta{color:#cba6f7}.ansi-cyan{color:#94e2d5}.ansi-white{color:#cdd6f4}.ansi-gray{color:#6c7086}.ansi-bright-red{color:#eba0ac}.ansi-bright-green{color:#a6e3a1}.ansi-bright-yellow{color:#f9e2af}.ansi-bright-blue{color:#89dceb}.ansi-bright-magenta{color:#f5c2e7}.ansi-bright-cyan{color:#94e2d5}.ansi-bright-white{color:#bac2de}.lc-log-viewer--log .ansi-black{color:#111827}.lc-log-viewer--log .ansi-red{color:#dc2626}.lc-log-viewer--log .ansi-green{color:#16a34a}.lc-log-viewer--log .ansi-yellow{color:#ca8a04}.lc-log-viewer--log .ansi-blue{color:#2563eb}.lc-log-viewer--log .ansi-magenta{color:#9333ea}.lc-log-viewer--log .ansi-cyan{color:#0891b2}.lc-log-viewer--log .ansi-white{color:#6b7280}.lc-log-viewer--log .ansi-gray{color:#9ca3af}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar{width:8px;height:8px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-track{background:#181825}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb:hover{background:#585b70}\n"] }]
13233
+ args: [{ selector: 'lc-log-viewer', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [class]=\"containerClasses()\"\n [style.height]=\"height()\"\n tabindex=\"0\"\n (keydown)=\"onKeydown($event)\"\n>\n <!-- Toolbar -->\n <div class=\"lc-log-viewer__toolbar\">\n <div class=\"lc-log-viewer__toolbar-left\">\n @if (stream$()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"paused()\"\n (click)=\"togglePause()\"\n [title]=\"paused() ? 'Resume' : 'Pause'\"\n >\n <lc-icon [name]=\"paused() ? 'play' : 'pause'\" size=\"xs\" />\n </button>\n }\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"clearBuffer()\"\n title=\"Clear\"\n >\n <lc-icon name=\"trash\" size=\"xs\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n (click)=\"onCopyAll()\"\n title=\"Copy all\"\n >\n <lc-icon name=\"clipboard-document\" size=\"xs\" />\n </button>\n <button\n type=\"button\"\n class=\"lc-log-viewer__tool-btn\"\n [class.lc-log-viewer__tool-btn--active]=\"showSearch()\"\n (click)=\"toggleSearch()\"\n title=\"Search (/)\"\n >\n <lc-icon name=\"magnifying-glass\" size=\"xs\" />\n </button>\n </div>\n\n <div class=\"lc-log-viewer__toolbar-right\">\n <!-- Level filter pills -->\n @if (levelCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--error\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('error')\"\n (click)=\"toggleLevelFilter('error')\"\n >\n {{ levelCounts().error }} errors\n </button>\n }\n @if (levelCounts().warn > 0) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__level-pill lc-log-viewer__level-pill--warn\"\n [class.lc-log-viewer__level-pill--active]=\"internalLevelFilter().has('warn')\"\n (click)=\"toggleLevelFilter('warn')\"\n >\n {{ levelCounts().warn }} warnings\n </button>\n }\n <span class=\"lc-log-viewer__line-count\">{{ filteredLines().length }} lines</span>\n </div>\n </div>\n\n <!-- Search bar -->\n @if (showSearch()) {\n <div class=\"lc-log-viewer__search\">\n <lc-icon name=\"magnifying-glass\" size=\"xs\" />\n <input\n type=\"text\"\n class=\"lc-log-viewer__search-input\"\n placeholder=\"Search logs...\"\n [value]=\"internalSearch()\"\n (input)=\"internalSearch.set(getInputValue($event))\"\n autofocus\n />\n </div>\n }\n\n <!-- Log content (virtualized) -->\n <div\n #scrollContainer\n class=\"lc-log-viewer__content\"\n >\n <div\n class=\"lc-log-viewer__spacer\"\n [style.height.px]=\"visibleRange().totalHeight\"\n >\n <div\n class=\"lc-log-viewer__window\"\n [style.transform]=\"'translateY(' + (visibleRange().start * LINE_HEIGHT) + 'px)'\"\n >\n @for (line of visibleLines(); track line._index) {\n <div\n class=\"lc-log-viewer__line\"\n [class.lc-log-viewer__line--debug]=\"line.level === 'debug'\"\n [class.lc-log-viewer__line--info]=\"line.level === 'info'\"\n [class.lc-log-viewer__line--warn]=\"line.level === 'warn'\"\n [class.lc-log-viewer__line--error]=\"line.level === 'error'\"\n (click)=\"onLineClick(line)\"\n >\n @if (showLineNumbers()) {\n <span class=\"lc-log-viewer__line-num\">{{ line._index + 1 }}</span>\n }\n @if (showTimestamps() && line.timestamp) {\n <span class=\"lc-log-viewer__timestamp\">{{ formatTimestamp(line.timestamp) }}</span>\n }\n @if (line.level) {\n <span class=\"lc-log-viewer__level\">{{ line.level.toUpperCase().padEnd(5) }}</span>\n }\n @if (line.source) {\n <span class=\"lc-log-viewer__source\">[{{ line.source }}]</span>\n }\n <span\n class=\"lc-log-viewer__text\"\n [innerHTML]=\"highlightSearch(parseAnsi(line.text))\"\n ></span>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Jump to bottom button -->\n @if (!atBottom()) {\n <button\n type=\"button\"\n class=\"lc-log-viewer__jump-bottom\"\n (click)=\"scrollToBottom()\"\n >\n <lc-icon name=\"arrow-down\" size=\"xs\" />\n Jump to bottom\n </button>\n }\n</div>\n", styles: [".lc-log-viewer{display:flex;flex-direction:column;border:1px solid var(--color-divider, #e5e7eb);border-radius:var(--radius-md, .375rem);overflow:hidden;font-family:var(--font-family-mono, \"Menlo\", \"Monaco\", \"Courier New\", monospace);font-size:.8125rem;line-height:1}.lc-log-viewer:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-log-viewer--log{background-color:var(--color-background, #ffffff);color:var(--color-text, #111827)}.lc-log-viewer--terminal{background-color:#1e1e2e;color:#cdd6f4;border-color:#313244}.lc-log-viewer__toolbar{display:flex;align-items:center;justify-content:space-between;padding:.375rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);gap:.5rem;flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__toolbar{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__toolbar-left,.lc-log-viewer__toolbar-right{display:flex;align-items:center;gap:.25rem}.lc-log-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--radius-sm, .25rem);cursor:pointer;color:inherit;opacity:.7;transition:opacity .15s,background-color .15s}.lc-log-viewer__tool-btn:hover{opacity:1;background-color:#80808026}.lc-log-viewer__tool-btn--active{opacity:1;background-color:#80808033}.lc-log-viewer__level-pill{font-size:.6875rem;padding:.125rem .5rem;border-radius:9999px;border:none;cursor:pointer;font-family:var(--font-family-sans);transition:opacity .15s;opacity:.6}.lc-log-viewer__level-pill--active{opacity:1}.lc-log-viewer__level-pill--error{background-color:#fecaca;color:#991b1b}.lc-log-viewer--terminal .lc-log-viewer__level-pill--error{background-color:#45202a;color:#f38ba8}.lc-log-viewer__level-pill--warn{background-color:#fef3c7;color:#92400e}.lc-log-viewer--terminal .lc-log-viewer__level-pill--warn{background-color:#3d3520;color:#f9e2af}.lc-log-viewer__line-count{font-size:.6875rem;opacity:.5;font-family:var(--font-family-sans);padding:0 .25rem}.lc-log-viewer__search{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-bottom:1px solid var(--color-divider, #e5e7eb);flex-shrink:0}.lc-log-viewer--terminal .lc-log-viewer__search{border-bottom-color:#313244;background-color:#181825}.lc-log-viewer__search-input{flex:1;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:inherit}.lc-log-viewer__search-input::placeholder{opacity:.4}.lc-log-viewer__content{flex:1;overflow-y:auto;overflow-x:auto;position:relative;min-height:0}.lc-log-viewer__spacer{position:relative;width:100%}.lc-log-viewer__window{position:absolute;top:0;left:0;right:0}.lc-log-viewer__line{display:flex;align-items:baseline;gap:.625rem;padding:1px .75rem;height:22px;white-space:nowrap;cursor:pointer;transition:background-color .1s}.lc-log-viewer__line:hover{background-color:#80808014}.lc-log-viewer__line--debug{opacity:.6}.lc-log-viewer--log .lc-log-viewer__line--warn{background-color:#fffbeb}.lc-log-viewer--terminal .lc-log-viewer__line--warn{background-color:#f9e2af0d}.lc-log-viewer--log .lc-log-viewer__line--error{background-color:#fef2f2}.lc-log-viewer--terminal .lc-log-viewer__line--error{background-color:#f38ba814}.lc-log-viewer__line-num{color:inherit;opacity:.3;min-width:3ch;text-align:right;-webkit-user-select:none;user-select:none}.lc-log-viewer__timestamp{color:inherit;opacity:.5;min-width:12ch}.lc-log-viewer__level{min-width:5ch;font-weight:600}.lc-log-viewer__line--debug .lc-log-viewer__level{color:#9ca3af}.lc-log-viewer__line--info .lc-log-viewer__level{color:#3b82f6}.lc-log-viewer__line--warn .lc-log-viewer__level{color:#f59e0b}.lc-log-viewer__line--error .lc-log-viewer__level{color:#ef4444}.lc-log-viewer__line--debug .lc-log-viewer--terminal .lc-log-viewer__level{color:#6c7086}.lc-log-viewer__line--info .lc-log-viewer--terminal .lc-log-viewer__level{color:#89b4fa}.lc-log-viewer__line--warn .lc-log-viewer--terminal .lc-log-viewer__level{color:#f9e2af}.lc-log-viewer__line--error .lc-log-viewer--terminal .lc-log-viewer__level{color:#f38ba8}.lc-log-viewer__source{color:inherit;opacity:.5}.lc-log-viewer__text{flex:1;min-width:0}.lc-log-viewer__match{background-color:#fbbf2480;border-radius:2px;padding:0 1px}.lc-log-viewer--terminal .lc-log-viewer__match{background-color:#f9e2af40}.lc-log-viewer__jump-bottom{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--color-divider, #e5e7eb);border-radius:9999px;background-color:var(--color-background, #ffffff);color:var(--color-text, #111827);font-size:.75rem;font-family:var(--font-family-sans);cursor:pointer;box-shadow:0 2px 8px #00000026;z-index:10;transition:background-color .15s}.lc-log-viewer__jump-bottom:hover{background-color:var(--color-neutral-50, #f9fafb)}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom{background-color:#313244;border-color:#45475a;color:#cdd6f4}.lc-log-viewer--terminal .lc-log-viewer__jump-bottom:hover{background-color:#45475a}.ansi-bold{font-weight:700}.ansi-italic{font-style:italic}.ansi-black{color:#1e1e2e}.ansi-red{color:#f38ba8}.ansi-green{color:#a6e3a1}.ansi-yellow{color:#f9e2af}.ansi-blue{color:#89b4fa}.ansi-magenta{color:#cba6f7}.ansi-cyan{color:#94e2d5}.ansi-white{color:#cdd6f4}.ansi-gray{color:#6c7086}.ansi-bright-red{color:#eba0ac}.ansi-bright-green{color:#a6e3a1}.ansi-bright-yellow{color:#f9e2af}.ansi-bright-blue{color:#89dceb}.ansi-bright-magenta{color:#f5c2e7}.ansi-bright-cyan{color:#94e2d5}.ansi-bright-white{color:#bac2de}.lc-log-viewer--log .ansi-black{color:#111827}.lc-log-viewer--log .ansi-red{color:#dc2626}.lc-log-viewer--log .ansi-green{color:#16a34a}.lc-log-viewer--log .ansi-yellow{color:#ca8a04}.lc-log-viewer--log .ansi-blue{color:#2563eb}.lc-log-viewer--log .ansi-magenta{color:#9333ea}.lc-log-viewer--log .ansi-cyan{color:#0891b2}.lc-log-viewer--log .ansi-white{color:#6b7280}.lc-log-viewer--log .ansi-gray{color:#9ca3af}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar{width:8px;height:8px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-track{background:#181825}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb{background:#45475a;border-radius:4px}.lc-log-viewer--terminal .lc-log-viewer__content::-webkit-scrollbar-thumb:hover{background:#585b70}\n"] }]
13542
13234
  }], ctorParameters: () => [], propDecorators: { scrollContainer: [{
13543
13235
  type: ViewChild,
13544
13236
  args: ['scrollContainer']
@@ -13658,11 +13350,11 @@ class ConfirmDialogComponent {
13658
13350
  }
13659
13351
  }
13660
13352
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
13661
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ConfirmDialogComponent, isStandalone: true, selector: "lc-confirm-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, requireText: { classPropertyName: "requireText", publicName: "requireText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, viewQueries: [{ propertyName: "confirmInput", first: true, predicate: ["confirmInput"], descendants: true }], ngImport: i0, template: "<lc-modal\n [open]=\"open()\"\n size=\"sm\"\n [showCloseButton]=\"true\"\n (openChange)=\"$event ? null : onModalClose()\"\n (keydown)=\"onKeydown($event)\"\n>\n <div slot=\"header\">\n <div class=\"lc-confirm__header\">\n <lc-icon\n [name]=\"resolvedIcon()\"\n size=\"md\"\n [color]=\"iconColor()\"\n />\n <h2>{{ title() }}</h2>\n </div>\n </div>\n\n <div slot=\"body\">\n <p class=\"lc-confirm__message\">{{ message() }}</p>\n\n @if (requireText(); as req) {\n <div class=\"lc-confirm__require-text\">\n <label class=\"lc-confirm__require-label\">{{ req.prompt }}</label>\n <lc-input\n #confirmInput\n [placeholder]=\"req.expected\"\n (valueChange)=\"onInputChange($event)\"\n />\n </div>\n }\n </div>\n\n <div slot=\"footer\" class=\"lc-confirm__footer\">\n <lc-button\n variant=\"ghost\"\n (clicked)=\"onCancel()\"\n >\n {{ cancelLabel() }}\n </lc-button>\n <lc-button\n [variant]=\"confirmButtonVariant()\"\n [disabled]=\"!confirmAllowed()\"\n (clicked)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </lc-button>\n </div>\n</lc-modal>\n", styles: [".lc-confirm__header{display:flex;align-items:center;gap:.5rem}.lc-confirm__header h2{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text, #111827)}.lc-confirm__message{margin:0;color:var(--color-text-secondary, #4b5563);font-size:var(--font-size-sm, .875rem);line-height:1.6}.lc-confirm__require-text{margin-top:1rem}.lc-confirm__require-label{display:block;font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text, #111827);margin-bottom:.375rem}.lc-confirm__footer{display:flex;gap:.5rem;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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", "isLoading", "iconOnly", "fullWidth", "ariaLabel", "type"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: ModalComponent, selector: "lc-modal", inputs: ["open", "size", "closeOnBackdropClick", "closeOnEscape", "showCloseButton", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy"], outputs: ["modalOpened", "modalClosed", "openChange", "backdropClicked"] }, { kind: "component", type: InputComponent, selector: "lc-input", inputs: ["label", "placeholder", "type", "size", "disabled", "readonly", "required", "error", "helperText", "iconBefore", "iconAfter", "maxLength", "showCharCount", "ariaLabel"], outputs: ["valueChange", "focused", "blurred", "enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13353
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ConfirmDialogComponent, isStandalone: true, selector: "lc-confirm-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, requireText: { classPropertyName: "requireText", publicName: "requireText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, viewQueries: [{ propertyName: "confirmInput", first: true, predicate: ["confirmInput"], descendants: true }], ngImport: i0, template: "<lc-modal\n [open]=\"open()\"\n size=\"sm\"\n [showCloseButton]=\"true\"\n (openChange)=\"$event ? null : onModalClose()\"\n (keydown)=\"onKeydown($event)\"\n>\n <div slot=\"header\">\n <div class=\"lc-confirm__header\">\n <lc-icon\n [name]=\"resolvedIcon()\"\n size=\"md\"\n [color]=\"iconColor()\"\n />\n <h2>{{ title() }}</h2>\n </div>\n </div>\n\n <div slot=\"body\">\n <p class=\"lc-confirm__message\">{{ message() }}</p>\n\n @if (requireText(); as req) {\n <div class=\"lc-confirm__require-text\">\n <label class=\"lc-confirm__require-label\">{{ req.prompt }}</label>\n <lc-input\n #confirmInput\n [placeholder]=\"req.expected\"\n (valueChange)=\"onInputChange($event)\"\n />\n </div>\n }\n </div>\n\n <div slot=\"footer\" class=\"lc-confirm__footer\">\n <lc-button\n variant=\"ghost\"\n (clicked)=\"onCancel()\"\n >\n {{ cancelLabel() }}\n </lc-button>\n <lc-button\n [variant]=\"confirmButtonVariant()\"\n [disabled]=\"!confirmAllowed()\"\n (clicked)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </lc-button>\n </div>\n</lc-modal>\n", styles: [".lc-confirm__header{display:flex;align-items:center;gap:.5rem}.lc-confirm__header h2{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text, #111827)}.lc-confirm__message{margin:0;color:var(--color-text-secondary, #4b5563);font-size:var(--font-size-sm, .875rem);line-height:1.6}.lc-confirm__require-text{margin-top:1rem}.lc-confirm__require-label{display:block;font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text, #111827);margin-bottom:.375rem}.lc-confirm__footer{display:flex;gap:.5rem;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "component", type: ModalComponent, selector: "lc-modal", inputs: ["open", "size", "closeOnBackdropClick", "closeOnEscape", "showCloseButton", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy"], outputs: ["modalOpened", "modalClosed", "openChange", "backdropClicked"] }, { kind: "component", type: InputComponent, selector: "lc-input", inputs: ["label", "placeholder", "type", "size", "disabled", "readonly", "required", "error", "helperText", "iconBefore", "iconAfter", "maxLength", "showCharCount", "ariaLabel"], outputs: ["valueChange", "focused", "blurred", "enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13662
13354
  }
13663
13355
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
13664
13356
  type: Component,
13665
- args: [{ selector: 'lc-confirm-dialog', standalone: true, imports: [CommonModule, FormsModule, IconComponent, ButtonComponent, ModalComponent, InputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<lc-modal\n [open]=\"open()\"\n size=\"sm\"\n [showCloseButton]=\"true\"\n (openChange)=\"$event ? null : onModalClose()\"\n (keydown)=\"onKeydown($event)\"\n>\n <div slot=\"header\">\n <div class=\"lc-confirm__header\">\n <lc-icon\n [name]=\"resolvedIcon()\"\n size=\"md\"\n [color]=\"iconColor()\"\n />\n <h2>{{ title() }}</h2>\n </div>\n </div>\n\n <div slot=\"body\">\n <p class=\"lc-confirm__message\">{{ message() }}</p>\n\n @if (requireText(); as req) {\n <div class=\"lc-confirm__require-text\">\n <label class=\"lc-confirm__require-label\">{{ req.prompt }}</label>\n <lc-input\n #confirmInput\n [placeholder]=\"req.expected\"\n (valueChange)=\"onInputChange($event)\"\n />\n </div>\n }\n </div>\n\n <div slot=\"footer\" class=\"lc-confirm__footer\">\n <lc-button\n variant=\"ghost\"\n (clicked)=\"onCancel()\"\n >\n {{ cancelLabel() }}\n </lc-button>\n <lc-button\n [variant]=\"confirmButtonVariant()\"\n [disabled]=\"!confirmAllowed()\"\n (clicked)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </lc-button>\n </div>\n</lc-modal>\n", styles: [".lc-confirm__header{display:flex;align-items:center;gap:.5rem}.lc-confirm__header h2{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text, #111827)}.lc-confirm__message{margin:0;color:var(--color-text-secondary, #4b5563);font-size:var(--font-size-sm, .875rem);line-height:1.6}.lc-confirm__require-text{margin-top:1rem}.lc-confirm__require-label{display:block;font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text, #111827);margin-bottom:.375rem}.lc-confirm__footer{display:flex;gap:.5rem;justify-content:flex-end}\n"] }]
13357
+ args: [{ selector: 'lc-confirm-dialog', standalone: true, imports: [FormsModule, IconComponent, ButtonComponent, ModalComponent, InputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<lc-modal\n [open]=\"open()\"\n size=\"sm\"\n [showCloseButton]=\"true\"\n (openChange)=\"$event ? null : onModalClose()\"\n (keydown)=\"onKeydown($event)\"\n>\n <div slot=\"header\">\n <div class=\"lc-confirm__header\">\n <lc-icon\n [name]=\"resolvedIcon()\"\n size=\"md\"\n [color]=\"iconColor()\"\n />\n <h2>{{ title() }}</h2>\n </div>\n </div>\n\n <div slot=\"body\">\n <p class=\"lc-confirm__message\">{{ message() }}</p>\n\n @if (requireText(); as req) {\n <div class=\"lc-confirm__require-text\">\n <label class=\"lc-confirm__require-label\">{{ req.prompt }}</label>\n <lc-input\n #confirmInput\n [placeholder]=\"req.expected\"\n (valueChange)=\"onInputChange($event)\"\n />\n </div>\n }\n </div>\n\n <div slot=\"footer\" class=\"lc-confirm__footer\">\n <lc-button\n variant=\"ghost\"\n (clicked)=\"onCancel()\"\n >\n {{ cancelLabel() }}\n </lc-button>\n <lc-button\n [variant]=\"confirmButtonVariant()\"\n [disabled]=\"!confirmAllowed()\"\n (clicked)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </lc-button>\n </div>\n</lc-modal>\n", styles: [".lc-confirm__header{display:flex;align-items:center;gap:.5rem}.lc-confirm__header h2{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text, #111827)}.lc-confirm__message{margin:0;color:var(--color-text-secondary, #4b5563);font-size:var(--font-size-sm, .875rem);line-height:1.6}.lc-confirm__require-text{margin-top:1rem}.lc-confirm__require-label{display:block;font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text, #111827);margin-bottom:.375rem}.lc-confirm__footer{display:flex;gap:.5rem;justify-content:flex-end}\n"] }]
13666
13358
  }], ctorParameters: () => [], propDecorators: { confirmInput: [{
13667
13359
  type: ViewChild,
13668
13360
  args: ['confirmInput']
@@ -14077,5 +13769,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
14077
13769
  * Generated bundle index. Do not edit.
14078
13770
  */
14079
13771
 
14080
- export { AccordionComponent, 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 };
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 };
14081
13773
  //# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map