@life-cockpit/angular-ui-kit 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -769,6 +769,15 @@ class CardComponent {
|
|
|
769
769
|
* Optional subtitle rendered below the title.
|
|
770
770
|
*/
|
|
771
771
|
subtitle = input(undefined, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
772
|
+
/**
|
|
773
|
+
* Optional badge text/count shown next to the title (e.g. item count).
|
|
774
|
+
*/
|
|
775
|
+
badge = input(undefined, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
776
|
+
/**
|
|
777
|
+
* Badge color variant.
|
|
778
|
+
* @default 'default'
|
|
779
|
+
*/
|
|
780
|
+
badgeVariant = input('default', ...(ngDevMode ? [{ debugName: "badgeVariant" }] : /* istanbul ignore next */ []));
|
|
772
781
|
/**
|
|
773
782
|
* Visual variant of the card
|
|
774
783
|
* - elevated: Box shadow (default)
|
|
@@ -849,12 +858,12 @@ class CardComponent {
|
|
|
849
858
|
}
|
|
850
859
|
}
|
|
851
860
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
852
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CardComponent, isStandalone: true, selector: "lc-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (title()) {\n <div class=\"card__header\">\n <h3 class=\"card__title\">{{ title() }}</h3>\n
|
|
861
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CardComponent, isStandalone: true, selector: "lc-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (title()) {\n <div class=\"card__header\">\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n <h3 class=\"card__title\">{{ title() }}</h3>\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div class=\"card__body\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;height:100%}.card{display:flex;flex-direction:column;height:100%;background-color:var(--color-surface);transition:all .15s ease-in-out}.card__body{flex:1;display:flex;flex-direction:column}.card-elevated{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.card-elevated:hover{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-outlined{border:1px solid var(--color-border)}.card-padding-none{padding:0}.card-padding-xs{padding:.5rem}.card-padding-sm{padding:.75rem}.card-padding-md{padding:1rem}.card-padding-lg{padding:1.5rem}.card-radius-none{border-radius:0}.card-radius-sm{border-radius:.25rem}.card-radius-md{border-radius:.5rem}.card-radius-lg{border-radius:1rem}.card-radius-full{border-radius:9999px}.card-clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.card-clickable:hover{background-color:var(--color-surface-hover)}.card-clickable:focus{outline:2px solid var(--color-primary);outline-offset:2px}.card-clickable:active{transform:scale(.98)}.card-selected{border:2px solid var(--color-primary);background-color:var(--color-surface-selected)}.card-selected.card-elevated{box-shadow:0 3px 6px #20849729,0 3px 6px #2084973b}.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border, #e5e7eb)}.card__header-left{flex:1;min-width:0}.card__title-row{display:flex;align-items:center;gap:.5rem}.card__title{margin:0;font-weight:600;font-size:1.125rem;line-height:1.3;color:var(--color-text-primary)}.card__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1}.card__badge--default{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-700, #374151)}.card__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.card__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.card__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.card__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.card__subtitle{margin:.25rem 0 0;font-size:.8125rem;color:var(--color-text-secondary);line-height:1.4}.card__header-action{flex-shrink:0;display:flex;align-items:center;gap:.5rem}:host ::ng-deep [card-header]{margin-bottom:.75rem;display:flex;align-items:center;justify-content:space-between}:host ::ng-deep .card-header{margin-bottom:1rem;font-weight:600;font-size:1.125rem;color:var(--color-text-primary)}:host ::ng-deep .card-content{color:var(--color-text-primary)}:host ::ng-deep [card-footer],:host ::ng-deep .card-footer{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--color-border);color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
853
862
|
}
|
|
854
863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CardComponent, decorators: [{
|
|
855
864
|
type: Component,
|
|
856
|
-
args: [{ selector: 'lc-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (title()) {\n <div class=\"card__header\">\n <h3 class=\"card__title\">{{ title() }}</h3>\n
|
|
857
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], handleKeydown: [{
|
|
865
|
+
args: [{ selector: 'lc-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (title()) {\n <div class=\"card__header\">\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n <h3 class=\"card__title\">{{ title() }}</h3>\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div class=\"card__body\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;height:100%}.card{display:flex;flex-direction:column;height:100%;background-color:var(--color-surface);transition:all .15s ease-in-out}.card__body{flex:1;display:flex;flex-direction:column}.card-elevated{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.card-elevated:hover{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-outlined{border:1px solid var(--color-border)}.card-padding-none{padding:0}.card-padding-xs{padding:.5rem}.card-padding-sm{padding:.75rem}.card-padding-md{padding:1rem}.card-padding-lg{padding:1.5rem}.card-radius-none{border-radius:0}.card-radius-sm{border-radius:.25rem}.card-radius-md{border-radius:.5rem}.card-radius-lg{border-radius:1rem}.card-radius-full{border-radius:9999px}.card-clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.card-clickable:hover{background-color:var(--color-surface-hover)}.card-clickable:focus{outline:2px solid var(--color-primary);outline-offset:2px}.card-clickable:active{transform:scale(.98)}.card-selected{border:2px solid var(--color-primary);background-color:var(--color-surface-selected)}.card-selected.card-elevated{box-shadow:0 3px 6px #20849729,0 3px 6px #2084973b}.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border, #e5e7eb)}.card__header-left{flex:1;min-width:0}.card__title-row{display:flex;align-items:center;gap:.5rem}.card__title{margin:0;font-weight:600;font-size:1.125rem;line-height:1.3;color:var(--color-text-primary)}.card__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1}.card__badge--default{background-color:var(--color-neutral-100, #f3f4f6);color:var(--color-neutral-700, #374151)}.card__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.card__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.card__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.card__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.card__subtitle{margin:.25rem 0 0;font-size:.8125rem;color:var(--color-text-secondary);line-height:1.4}.card__header-action{flex-shrink:0;display:flex;align-items:center;gap:.5rem}:host ::ng-deep [card-header]{margin-bottom:.75rem;display:flex;align-items:center;justify-content:space-between}:host ::ng-deep .card-header{margin-bottom:1rem;font-weight:600;font-size:1.125rem;color:var(--color-text-primary)}:host ::ng-deep .card-content{color:var(--color-text-primary)}:host ::ng-deep [card-footer],:host ::ng-deep .card-footer{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--color-border);color:var(--color-text-secondary)}\n"] }]
|
|
866
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeVariant", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], handleKeydown: [{
|
|
858
867
|
type: HostListener,
|
|
859
868
|
args: ['keydown', ['$event']]
|
|
860
869
|
}] } });
|
|
@@ -1011,6 +1020,13 @@ class LogoComponent {
|
|
|
1011
1020
|
* Makes the logo appear clickable
|
|
1012
1021
|
*/
|
|
1013
1022
|
clickable = false;
|
|
1023
|
+
/**
|
|
1024
|
+
* Color mode for different backgrounds
|
|
1025
|
+
* - 'auto': Follows global theme (uses CSS filter in dark mode)
|
|
1026
|
+
* - 'light': Optimized for light backgrounds (default appearance)
|
|
1027
|
+
* - 'dark': Inverted for dark backgrounds (white/light logo)
|
|
1028
|
+
*/
|
|
1029
|
+
colorMode = 'auto';
|
|
1014
1030
|
get logoSrc() {
|
|
1015
1031
|
return this.variant === 'emblem'
|
|
1016
1032
|
? '/assets/life-cockpit-emblem.svg'
|
|
@@ -1021,14 +1037,20 @@ class LogoComponent {
|
|
|
1021
1037
|
if (this.clickable) {
|
|
1022
1038
|
classes.push('clickable');
|
|
1023
1039
|
}
|
|
1040
|
+
if (this.colorMode === 'dark') {
|
|
1041
|
+
classes.push('lc-logo--dark');
|
|
1042
|
+
}
|
|
1043
|
+
else if (this.colorMode === 'auto') {
|
|
1044
|
+
classes.push('lc-logo--auto');
|
|
1045
|
+
}
|
|
1024
1046
|
return classes.join(' ');
|
|
1025
1047
|
}
|
|
1026
1048
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1027
|
-
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" }, ngImport: i0, template: "<img \n [src]=\"logoSrc\" \n [alt]=\"alt\"\n [class]=\"logoClasses\"\n class=\"lc-logo\"\n/>\n", styles: [".lc-logo{display:block}.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}.lc-logo.clickable:hover{opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
1028
1050
|
}
|
|
1029
1051
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LogoComponent, decorators: [{
|
|
1030
1052
|
type: Component,
|
|
1031
|
-
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}.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}.lc-logo.clickable:hover{opacity:.8}\n"] }]
|
|
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"] }]
|
|
1032
1054
|
}], propDecorators: { variant: [{
|
|
1033
1055
|
type: Input
|
|
1034
1056
|
}], size: [{
|
|
@@ -1037,6 +1059,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1037
1059
|
type: Input
|
|
1038
1060
|
}], clickable: [{
|
|
1039
1061
|
type: Input
|
|
1062
|
+
}], colorMode: [{
|
|
1063
|
+
type: Input
|
|
1040
1064
|
}] } });
|
|
1041
1065
|
|
|
1042
1066
|
/**
|
|
@@ -1079,6 +1103,11 @@ class MenuComponent {
|
|
|
1079
1103
|
* @default 'bottom-right'
|
|
1080
1104
|
*/
|
|
1081
1105
|
position = 'bottom-right';
|
|
1106
|
+
/**
|
|
1107
|
+
* Size of menu items
|
|
1108
|
+
* @default 'md'
|
|
1109
|
+
*/
|
|
1110
|
+
size = 'md';
|
|
1082
1111
|
/**
|
|
1083
1112
|
* Minimum width of menu dropdown
|
|
1084
1113
|
* @default '220px'
|
|
@@ -1142,17 +1171,19 @@ class MenuComponent {
|
|
|
1142
1171
|
}
|
|
1143
1172
|
}
|
|
1144
1173
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1145
|
-
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", 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 [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:
|
|
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 });
|
|
1146
1175
|
}
|
|
1147
1176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: MenuComponent, decorators: [{
|
|
1148
1177
|
type: Component,
|
|
1149
|
-
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 [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:
|
|
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"] }]
|
|
1150
1179
|
}], propDecorators: { items: [{
|
|
1151
1180
|
type: Input
|
|
1152
1181
|
}], isOpen: [{
|
|
1153
1182
|
type: Input
|
|
1154
1183
|
}], position: [{
|
|
1155
1184
|
type: Input
|
|
1185
|
+
}], size: [{
|
|
1186
|
+
type: Input
|
|
1156
1187
|
}], minWidth: [{
|
|
1157
1188
|
type: Input
|
|
1158
1189
|
}], itemClick: [{
|
|
@@ -3817,7 +3848,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
3817
3848
|
* Hero component for prominent page headers with gradient backgrounds.
|
|
3818
3849
|
*
|
|
3819
3850
|
* Features:
|
|
3820
|
-
* - Color gradient variants (primary, secondary, success, warning,
|
|
3851
|
+
* - Color gradient variants (primary, secondary, success, warning, info, neutral, accent-orange, accent-purple, accent-violet)
|
|
3852
|
+
* - 3 visual variants: default (dark gradient), slim (compact banner), light (pastel gradient with dark text)
|
|
3821
3853
|
* - Size options (sm, md, lg)
|
|
3822
3854
|
* - Optional label text above the title
|
|
3823
3855
|
* - Configurable border radius
|
|
@@ -3826,7 +3858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
3826
3858
|
*
|
|
3827
3859
|
* @example
|
|
3828
3860
|
* ```html
|
|
3829
|
-
* <lc-hero label="MY APP" title="Welcome" color="primary">
|
|
3861
|
+
* <lc-hero label="MY APP" title="Welcome" color="primary" variant="slim">
|
|
3830
3862
|
* <p>Description text</p>
|
|
3831
3863
|
* <div hero-footer>Status: Active</div>
|
|
3832
3864
|
* </lc-hero>
|
|
@@ -3856,21 +3888,30 @@ class HeroComponent {
|
|
|
3856
3888
|
* @default 'lg'
|
|
3857
3889
|
*/
|
|
3858
3890
|
borderRadius = input('lg', ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []));
|
|
3891
|
+
/**
|
|
3892
|
+
* Visual variant.
|
|
3893
|
+
* - `default`: dark gradient with white text
|
|
3894
|
+
* - `slim`: compact single-line banner
|
|
3895
|
+
* - `light`: softer pastel gradient with dark text
|
|
3896
|
+
* @default 'default'
|
|
3897
|
+
*/
|
|
3898
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3859
3899
|
heroClasses = computed(() => {
|
|
3860
3900
|
return [
|
|
3861
3901
|
'hero',
|
|
3862
3902
|
`hero--${this.color()}`,
|
|
3863
3903
|
`hero--${this.size()}`,
|
|
3864
3904
|
`hero--radius-${this.borderRadius()}`,
|
|
3905
|
+
`hero--${this.variant()}`,
|
|
3865
3906
|
].join(' ');
|
|
3866
3907
|
}, ...(ngDevMode ? [{ debugName: "heroClasses" }] : /* istanbul ignore next */ []));
|
|
3867
3908
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3868
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeroComponent, isStandalone: true, selector: "lc-hero", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"heroClasses()\">\n <div class=\"hero__content\">\n @if (label()) {\n <span class=\"hero__label\">{{ label() }}</span>\n }\n <h1 class=\"hero__title\">{{ title() }}</h1>\n <div class=\"hero__body\">\n <ng-content></ng-content>\n </div>\n </div>\n <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:0}.hero--radius-sm{border-radius:.25rem}.hero--radius-md{border-radius:.5rem}.hero--radius-lg{border-radius:1rem}.hero__content{flex:1}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;opacity:.85;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3909
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeroComponent, isStandalone: true, selector: "lc-hero", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"heroClasses()\">\n <div class=\"hero__content\">\n @if (label()) {\n <span class=\"hero__label\">{{ label() }}</span>\n }\n <h1 class=\"hero__title\">{{ title() }}</h1>\n <div class=\"hero__body\">\n <ng-content></ng-content>\n </div>\n </div>\n <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:0}.hero--radius-sm{border-radius:.25rem}.hero--radius-md{border-radius:.5rem}.hero--radius-lg{border-radius:1rem}.hero--slim{padding:1rem 1.25rem!important}@media(min-width:640px){.hero--slim{padding:1.25rem 2rem!important}}@media(min-width:1024px){.hero--slim{padding:1.5rem 3rem!important}}.hero--slim .hero__title{font-size:1.125rem!important;font-weight:700;line-height:1.3}@media(min-width:640px){.hero--slim .hero__title{font-size:1.25rem!important}}@media(min-width:1024px){.hero--slim .hero__title{font-size:1.5rem!important}}.hero--slim .hero__label{font-size:.5625rem;margin-bottom:.375rem;letter-spacing:.12em}@media(min-width:640px){.hero--slim .hero__label{font-size:.625rem;margin-bottom:.5rem}}.hero--slim .hero__body{margin-top:.5rem;font-size:.8125rem}@media(min-width:640px){.hero--slim .hero__body{font-size:.875rem;margin-top:.625rem}}.hero--slim ::ng-deep [hero-footer]{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim ::ng-deep [hero-footer]{margin-top:1.25rem}}.hero--light{color:var(--color-text-primary, #1f2937)}.hero--light .hero__label{opacity:.7}.hero--light .hero__body{opacity:.75}.hero--light ::ng-deep [hero-footer]{border-top-color:#0000001f}.hero--light.hero--primary{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--secondary{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}.hero--light.hero--neutral{background:linear-gradient(135deg,#e5e7eb,#f9fafb)}.hero--light.hero--success{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.hero--light.hero--info{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--warning{background:linear-gradient(135deg,#fef3c7,#fffbeb)}.hero--light.hero--accent-orange{background:linear-gradient(135deg,#ffedd5,#fff7ed)}.hero--light.hero--accent-purple{background:linear-gradient(135deg,#e9d5ff,#f5f3ff)}.hero--light.hero--accent-violet{background:linear-gradient(135deg,#ddd6fe,#ede9fe)}.hero__content{flex:1}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;opacity:.85;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3869
3910
|
}
|
|
3870
3911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeroComponent, decorators: [{
|
|
3871
3912
|
type: Component,
|
|
3872
|
-
args: [{ selector: 'lc-hero', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"heroClasses()\">\n <div class=\"hero__content\">\n @if (label()) {\n <span class=\"hero__label\">{{ label() }}</span>\n }\n <h1 class=\"hero__title\">{{ title() }}</h1>\n <div class=\"hero__body\">\n <ng-content></ng-content>\n </div>\n </div>\n <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:0}.hero--radius-sm{border-radius:.25rem}.hero--radius-md{border-radius:.5rem}.hero--radius-lg{border-radius:1rem}.hero__content{flex:1}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;opacity:.85;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"] }]
|
|
3873
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }] } });
|
|
3913
|
+
args: [{ selector: 'lc-hero', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"heroClasses()\">\n <div class=\"hero__content\">\n @if (label()) {\n <span class=\"hero__label\">{{ label() }}</span>\n }\n <h1 class=\"hero__title\">{{ title() }}</h1>\n <div class=\"hero__body\">\n <ng-content></ng-content>\n </div>\n </div>\n <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:0}.hero--radius-sm{border-radius:.25rem}.hero--radius-md{border-radius:.5rem}.hero--radius-lg{border-radius:1rem}.hero--slim{padding:1rem 1.25rem!important}@media(min-width:640px){.hero--slim{padding:1.25rem 2rem!important}}@media(min-width:1024px){.hero--slim{padding:1.5rem 3rem!important}}.hero--slim .hero__title{font-size:1.125rem!important;font-weight:700;line-height:1.3}@media(min-width:640px){.hero--slim .hero__title{font-size:1.25rem!important}}@media(min-width:1024px){.hero--slim .hero__title{font-size:1.5rem!important}}.hero--slim .hero__label{font-size:.5625rem;margin-bottom:.375rem;letter-spacing:.12em}@media(min-width:640px){.hero--slim .hero__label{font-size:.625rem;margin-bottom:.5rem}}.hero--slim .hero__body{margin-top:.5rem;font-size:.8125rem}@media(min-width:640px){.hero--slim .hero__body{font-size:.875rem;margin-top:.625rem}}.hero--slim ::ng-deep [hero-footer]{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim ::ng-deep [hero-footer]{margin-top:1.25rem}}.hero--light{color:var(--color-text-primary, #1f2937)}.hero--light .hero__label{opacity:.7}.hero--light .hero__body{opacity:.75}.hero--light ::ng-deep [hero-footer]{border-top-color:#0000001f}.hero--light.hero--primary{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--secondary{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}.hero--light.hero--neutral{background:linear-gradient(135deg,#e5e7eb,#f9fafb)}.hero--light.hero--success{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.hero--light.hero--info{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--warning{background:linear-gradient(135deg,#fef3c7,#fffbeb)}.hero--light.hero--accent-orange{background:linear-gradient(135deg,#ffedd5,#fff7ed)}.hero--light.hero--accent-purple{background:linear-gradient(135deg,#e9d5ff,#f5f3ff)}.hero--light.hero--accent-violet{background:linear-gradient(135deg,#ddd6fe,#ede9fe)}.hero__content{flex:1}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;opacity:.85;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"] }]
|
|
3914
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
3874
3915
|
|
|
3875
3916
|
/**
|
|
3876
3917
|
* Progress bar component for displaying completion status.
|
|
@@ -5188,11 +5229,11 @@ class ModalComponent {
|
|
|
5188
5229
|
}
|
|
5189
5230
|
}
|
|
5190
5231
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5191
|
-
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 (
|
|
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 });
|
|
5192
5233
|
}
|
|
5193
5234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ModalComponent, decorators: [{
|
|
5194
5235
|
type: Component,
|
|
5195
|
-
args: [{ selector: 'lc-modal', standalone: true, imports: [CommonModule, A11yModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (
|
|
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"] }]
|
|
5196
5237
|
}], ctorParameters: () => [], propDecorators: { modalContent: [{
|
|
5197
5238
|
type: ViewChild,
|
|
5198
5239
|
args: ['modalContent']
|
|
@@ -5653,6 +5694,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
5653
5694
|
* ```
|
|
5654
5695
|
*/
|
|
5655
5696
|
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';
|
|
5656
5704
|
/**
|
|
5657
5705
|
* Logo image source URL
|
|
5658
5706
|
*/
|
|
@@ -5682,6 +5730,11 @@ class HeaderComponent {
|
|
|
5682
5730
|
* Whether to show theme toggle button in header
|
|
5683
5731
|
*/
|
|
5684
5732
|
showThemeButton = false;
|
|
5733
|
+
/**
|
|
5734
|
+
* Size of the profile dropdown menu
|
|
5735
|
+
* @default 'sm'
|
|
5736
|
+
*/
|
|
5737
|
+
menuSize = 'sm';
|
|
5685
5738
|
/**
|
|
5686
5739
|
* Whether to show the Profile menu item in the user dropdown
|
|
5687
5740
|
* @default true
|
|
@@ -5788,7 +5841,7 @@ class HeaderComponent {
|
|
|
5788
5841
|
}
|
|
5789
5842
|
}
|
|
5790
5843
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5791
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeaderComponent, isStandalone: true, selector: "lc-header", inputs: { logo: "logo", title: "title", subtitle: "subtitle", userEmail: "userEmail", userName: "userName", showHamburger: "showHamburger", showThemeButton: "showThemeButton", showProfileMenuItem: "showProfileMenuItem" }, outputs: { hamburgerClick: "hamburgerClick", themeToggleClick: "themeToggleClick", logoutClick: "logoutClick", profileClick: "profileClick" }, host: { classAttribute: "lc-header-host" }, ngImport: i0, template: "<header class=\"lc-header\">\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 (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\" />\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 <!-- User profile menu -->\n <lc-menu\n [items]=\"menuItems()\"\n [isOpen]=\"isDropdownOpen()\"\n position=\"bottom-right\"\n minWidth=\"220px\"\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{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-6);background-color:var(--color-neutral-0, #ffffff);border-bottom:1px solid var(--color-neutral-200, #e5e7eb);height:64px;position:sticky;top:0;z-index:1000}@media(max-width:768px){.lc-header{padding:var(--spacing-3) var(--spacing-4)}}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);background:transparent;border:none;cursor:pointer;color:var(--color-neutral-700);border-radius:var(--radius-md);transition:background-color .2s ease,color .2s ease}.lc-header__hamburger:hover{background-color:var(--color-neutral-100);color:var(--color-neutral-900)}.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(--color-neutral-900);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(--color-text-primary);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(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}.lc-header__spacer{flex:1}.lc-header__theme-toggle{margin-right:var(--spacing-2)}.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(--color-neutral-200);border-radius:var(--radius-full);cursor:pointer;color:var(--color-neutral-700);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.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-neutral-600);border-bottom:1px solid var(--color-neutral-200);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-neutral-200);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-neutral-900);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-neutral-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}html.dark .lc-header,:root.dark .lc-header,.dark .lc-header{background-color:#27272a!important;border-bottom-color:#3f3f46!important}html.dark .lc-header__hamburger,:root.dark .lc-header__hamburger,.dark .lc-header__hamburger{color:#d4d4d8}html.dark .lc-header__hamburger:hover,:root.dark .lc-header__hamburger:hover,.dark .lc-header__hamburger:hover{background-color:#27272a;color:#f5f5f5}html.dark .lc-header__logo,:root.dark .lc-header__logo,.dark .lc-header__logo{color:#f5f5f5}html.dark .lc-header__title,:root.dark .lc-header__title,.dark .lc-header__title{color:#f5f5f5}html.dark .lc-header__subtitle,:root.dark .lc-header__subtitle,.dark .lc-header__subtitle{color:#a1a1aa}html.dark .lc-header__profile-trigger,:root.dark .lc-header__profile-trigger,.dark .lc-header__profile-trigger{border-color:#3f3f46;color:#d4d4d8}html.dark .lc-header__profile-trigger:hover,:root.dark .lc-header__profile-trigger:hover,.dark .lc-header__profile-trigger:hover{background-color:#27272a;border-color:#52525b}html.dark .lc-menu__header,:root.dark .lc-menu__header,.dark .lc-menu__header{color:#a1a1aa;border-bottom-color:#3f3f46}html.dark .lc-header__menu-header,:root.dark .lc-header__menu-header,.dark .lc-header__menu-header{border-bottom-color:#3f3f46}html.dark .lc-header__menu-user-name,:root.dark .lc-header__menu-user-name,.dark .lc-header__menu-user-name{color:#f5f5f5}html.dark .lc-header__menu-user-email,:root.dark .lc-header__menu-user-email,.dark .lc-header__menu-user-email{color:#a1a1aa}\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"] }, { 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", "minWidth"], outputs: ["itemClick", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5844
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: HeaderComponent, isStandalone: true, selector: "lc-header", inputs: { theme: "theme", logo: "logo", title: "title", subtitle: "subtitle", userEmail: "userEmail", userName: "userName", showHamburger: "showHamburger", showThemeButton: "showThemeButton", menuSize: "menuSize", showProfileMenuItem: "showProfileMenuItem" }, outputs: { hamburgerClick: "hamburgerClick", themeToggleClick: "themeToggleClick", logoutClick: "logoutClick", profileClick: "profileClick" }, 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 (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 <!-- 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{margin-right:var(--spacing-2);color:var(--lc-header-trigger-fg)}.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__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__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__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__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);color:var(--lc-header-trigger-fg)}.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(--lc-header-fg-secondary);border-bottom:1px solid var(--lc-header-border);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(--lc-header-border);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(--lc-header-fg);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(--lc-header-fg-secondary);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 });
|
|
5792
5845
|
}
|
|
5793
5846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
5794
5847
|
type: Component,
|
|
@@ -5802,8 +5855,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
5802
5855
|
MenuComponent,
|
|
5803
5856
|
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5804
5857
|
class: 'lc-header-host',
|
|
5805
|
-
}, template: "<header class=\"lc-header\">\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 (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\" />\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 <!-- User profile menu -->\n <lc-menu\n [items]=\"menuItems()\"\n [isOpen]=\"isDropdownOpen()\"\n position=\"bottom-right\"\n minWidth=\"220px\"\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{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-6);background-color:var(--
|
|
5806
|
-
}], propDecorators: {
|
|
5858
|
+
}, 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 (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 <!-- 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{margin-right:var(--spacing-2);color:var(--lc-header-trigger-fg)}.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__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__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__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__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);color:var(--lc-header-trigger-fg)}.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(--lc-header-fg-secondary);border-bottom:1px solid var(--lc-header-border);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(--lc-header-border);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(--lc-header-fg);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(--lc-header-fg-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"] }]
|
|
5859
|
+
}], propDecorators: { theme: [{
|
|
5860
|
+
type: Input
|
|
5861
|
+
}], logo: [{
|
|
5807
5862
|
type: Input
|
|
5808
5863
|
}], title: [{
|
|
5809
5864
|
type: Input
|
|
@@ -5817,6 +5872,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
5817
5872
|
type: Input
|
|
5818
5873
|
}], showThemeButton: [{
|
|
5819
5874
|
type: Input
|
|
5875
|
+
}], menuSize: [{
|
|
5876
|
+
type: Input
|
|
5820
5877
|
}], showProfileMenuItem: [{
|
|
5821
5878
|
type: Input
|
|
5822
5879
|
}], hamburgerClick: [{
|
|
@@ -6011,6 +6068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
6011
6068
|
*
|
|
6012
6069
|
* Features:
|
|
6013
6070
|
* - Drawer (overlay) and docked (persistent) modes
|
|
6071
|
+
* - Collapsed icon-rail mode (narrow 56px sidebar with icons only)
|
|
6014
6072
|
* - Hierarchical navigation with collapsible groups
|
|
6015
6073
|
* - Section headlines for item grouping
|
|
6016
6074
|
* - Active route highlighting
|
|
@@ -6021,11 +6079,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
6021
6079
|
*
|
|
6022
6080
|
* @example
|
|
6023
6081
|
* ```html
|
|
6024
|
-
* <lc-sidenav [isOpen]="isOpen" mode="docked" [items]="navItems"
|
|
6082
|
+
* <lc-sidenav [isOpen]="isOpen" mode="docked" [collapsed]="isCollapsed" [items]="navItems"
|
|
6025
6083
|
* (closed)="isOpen = false" (itemClicked)="navigate($event)" />
|
|
6026
6084
|
* ```
|
|
6027
6085
|
*/
|
|
6028
6086
|
class SidenavComponent {
|
|
6087
|
+
/** Whether the sidenav is collapsed to icon-only rail */
|
|
6088
|
+
collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
6029
6089
|
/** Whether the sidenav is open */
|
|
6030
6090
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
6031
6091
|
/** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */
|
|
@@ -6098,6 +6158,20 @@ class SidenavComponent {
|
|
|
6098
6158
|
set activeRouteInput(value) {
|
|
6099
6159
|
this.activeRoute.set(value);
|
|
6100
6160
|
}
|
|
6161
|
+
/**
|
|
6162
|
+
* Input setter for collapsed
|
|
6163
|
+
*/
|
|
6164
|
+
set collapsedInput(value) {
|
|
6165
|
+
this.collapsed.set(value);
|
|
6166
|
+
}
|
|
6167
|
+
/** Theme variant for the sidenav */
|
|
6168
|
+
themeMode = signal('auto', ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
|
|
6169
|
+
/**
|
|
6170
|
+
* Input setter for theme
|
|
6171
|
+
*/
|
|
6172
|
+
set themeInput(value) {
|
|
6173
|
+
this.themeMode.set(value);
|
|
6174
|
+
}
|
|
6101
6175
|
/**
|
|
6102
6176
|
* Event emitted when the sidenav should close
|
|
6103
6177
|
*/
|
|
@@ -6116,14 +6190,26 @@ class SidenavComponent {
|
|
|
6116
6190
|
if (this.isOpen()) {
|
|
6117
6191
|
classes.push('lc-sidenav--open');
|
|
6118
6192
|
}
|
|
6193
|
+
if (this.collapsed()) {
|
|
6194
|
+
classes.push('lc-sidenav--collapsed');
|
|
6195
|
+
}
|
|
6196
|
+
if (this.themeMode() !== 'auto') {
|
|
6197
|
+
classes.push(`lc-sidenav--${this.themeMode()}`);
|
|
6198
|
+
}
|
|
6119
6199
|
return classes.join(' ');
|
|
6120
6200
|
}, ...(ngDevMode ? [{ debugName: "sidenavClasses" }] : /* istanbul ignore next */ []));
|
|
6121
6201
|
/**
|
|
6122
6202
|
* Computed inline styles for the sidenav
|
|
6123
6203
|
*/
|
|
6124
6204
|
sidenavStyles = computed(() => ({
|
|
6125
|
-
width: this.width(),
|
|
6205
|
+
width: this.collapsed() ? '56px' : this.width(),
|
|
6126
6206
|
}), ...(ngDevMode ? [{ debugName: "sidenavStyles" }] : /* istanbul ignore next */ []));
|
|
6207
|
+
/**
|
|
6208
|
+
* Toggle collapsed state
|
|
6209
|
+
*/
|
|
6210
|
+
toggleCollapsed() {
|
|
6211
|
+
this.collapsed.set(!this.collapsed());
|
|
6212
|
+
}
|
|
6127
6213
|
/**
|
|
6128
6214
|
* Handle close action
|
|
6129
6215
|
*/
|
|
@@ -6178,7 +6264,7 @@ class SidenavComponent {
|
|
|
6178
6264
|
}
|
|
6179
6265
|
}
|
|
6180
6266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6181
|
-
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" }, outputs: { closed: "closed", itemClicked: "itemClicked" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "class.lc-sidenav-container": "true", "class.lc-sidenav-container--docked": "mode() === 'docked'", "class.lc-sidenav-container--open": "isOpen()" } }, ngImport: i0, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (mode() === '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 (mode() === '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 <!-- Close button (drawer mode only) -->\n @if (mode() === '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]=\"mode() === 'docked'\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\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 @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 </a>\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\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--active]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\">\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 <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\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 </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\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 <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 </a>\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{position:fixed;top:0;bottom:0;background-color:var(--color-background);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(--color-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__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-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-500)}.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(--color-neutral-700);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(--color-neutral-100);color:var(--color-neutral-900)}.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-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.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__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)}:host-context([data-theme=dark]) .lc-sidenav__section-title{color:var(--color-neutral-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item{color:var(--color-neutral-300)}:host-context([data-theme=dark]) .lc-sidenav__nav-item:hover{background-color:var(--color-neutral-800);color:var(--color-neutral-100)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active{background-color:#3b82f626;color:var(--color-primary-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-400)}@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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6267
|
+
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", themeInput: ["theme", "themeInput"] }, outputs: { closed: "closed", itemClicked: "itemClicked" }, host: { listeners: { "document:keydown": "handleKeydown($event)" }, properties: { "class.lc-sidenav-container": "true", "class.lc-sidenav-container--docked": "mode() === 'docked'", "class.lc-sidenav-container--open": "isOpen()" } }, ngImport: i0, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (mode() === '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 (mode() === '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 <!-- Close button (drawer mode only) -->\n @if (mode() === '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]=\"mode() === 'docked'\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\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 @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 </a>\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\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--active]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\">\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 <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\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 </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\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 </a>\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: var(--color-neutral-700, #374151);--lc-sidenav-fg-active: var(--color-neutral-900, #111827);--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-sidenav-section-fg: var(--color-neutral-500, #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{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.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-children{display:none}.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__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-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg)}.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-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.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__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: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}@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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6182
6268
|
}
|
|
6183
6269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SidenavComponent, decorators: [{
|
|
6184
6270
|
type: Component,
|
|
@@ -6186,7 +6272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
6186
6272
|
'[class.lc-sidenav-container]': 'true',
|
|
6187
6273
|
'[class.lc-sidenav-container--docked]': "mode() === 'docked'",
|
|
6188
6274
|
'[class.lc-sidenav-container--open]': 'isOpen()',
|
|
6189
|
-
}, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (mode() === '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 (mode() === '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 <!-- Close button (drawer mode only) -->\n @if (mode() === '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]=\"mode() === 'docked'\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\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 @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 </a>\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\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--active]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\">\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 <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\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 </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\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 <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 </a>\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{position:fixed;top:0;bottom:0;background-color:var(--color-background);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(--color-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__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-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-500)}.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(--color-neutral-700);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(--color-neutral-100);color:var(--color-neutral-900)}.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-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.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__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)}:host-context([data-theme=dark]) .lc-sidenav__section-title{color:var(--color-neutral-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item{color:var(--color-neutral-300)}:host-context([data-theme=dark]) .lc-sidenav__nav-item:hover{background-color:var(--color-neutral-800);color:var(--color-neutral-100)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active{background-color:#3b82f626;color:var(--color-primary-400)}:host-context([data-theme=dark]) .lc-sidenav__nav-item--active .lc-sidenav__nav-icon{color:var(--color-primary-400)}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"] }]
|
|
6275
|
+
}, template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (mode() === '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 (mode() === '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 <!-- Close button (drawer mode only) -->\n @if (mode() === '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]=\"mode() === 'docked'\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\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 @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 </a>\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\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--active]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\">\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 <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\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 </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\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 </a>\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: var(--color-neutral-700, #374151);--lc-sidenav-fg-active: var(--color-neutral-900, #111827);--lc-sidenav-border: var(--color-border, #e5e7eb);--lc-sidenav-hover-bg: var(--color-neutral-100, #f3f4f6);--lc-sidenav-section-fg: var(--color-neutral-500, #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{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem;gap:.125rem}.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-children{display:none}.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__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-title{padding:0 var(--spacing-3, .75rem);margin-bottom:var(--spacing-2, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg)}.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-icon{width:20px;height:20px;flex-shrink:0}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.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__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: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}:host-context([data-theme=dark]) .lc-sidenav:not(.lc-sidenav--light){--lc-sidenav-bg: #18181b;--lc-sidenav-fg: #d4d4d8;--lc-sidenav-fg-active: #f5f5f5;--lc-sidenav-border: #3f3f46;--lc-sidenav-hover-bg: #27272a;--lc-sidenav-section-fg: #a1a1aa}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"] }]
|
|
6190
6276
|
}], propDecorators: { isOpenInput: [{
|
|
6191
6277
|
type: Input
|
|
6192
6278
|
}], modeInput: [{
|
|
@@ -6203,6 +6289,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
6203
6289
|
type: Input
|
|
6204
6290
|
}], activeRouteInput: [{
|
|
6205
6291
|
type: Input
|
|
6292
|
+
}], collapsedInput: [{
|
|
6293
|
+
type: Input
|
|
6294
|
+
}], themeInput: [{
|
|
6295
|
+
type: Input,
|
|
6296
|
+
args: ['theme']
|
|
6206
6297
|
}], closed: [{
|
|
6207
6298
|
type: Output
|
|
6208
6299
|
}], itemClicked: [{
|
|
@@ -6663,6 +6754,8 @@ class ListComponent {
|
|
|
6663
6754
|
orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
6664
6755
|
/** Visual variant */
|
|
6665
6756
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
6757
|
+
/** Size of list items */
|
|
6758
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
6666
6759
|
/** Whether to show dividers between items */
|
|
6667
6760
|
showDividers = input(false, ...(ngDevMode ? [{ debugName: "showDividers" }] : /* istanbul ignore next */ []));
|
|
6668
6761
|
/** Event emitted when an item is clicked */
|
|
@@ -6676,6 +6769,7 @@ class ListComponent {
|
|
|
6676
6769
|
const classes = ['lc-list'];
|
|
6677
6770
|
classes.push(`lc-list--${this.orientation()}`);
|
|
6678
6771
|
classes.push(`lc-list--${this.variant()}`);
|
|
6772
|
+
classes.push(`lc-list--${this.size()}`);
|
|
6679
6773
|
if (this.showDividers()) {
|
|
6680
6774
|
classes.push('lc-list--with-dividers');
|
|
6681
6775
|
}
|
|
@@ -6689,6 +6783,9 @@ class ListComponent {
|
|
|
6689
6783
|
if (item.disabled) {
|
|
6690
6784
|
classes.push('lc-list__item--disabled');
|
|
6691
6785
|
}
|
|
6786
|
+
if (item.selected) {
|
|
6787
|
+
classes.push('lc-list__item--selected');
|
|
6788
|
+
}
|
|
6692
6789
|
return classes.join(' ');
|
|
6693
6790
|
}
|
|
6694
6791
|
/**
|
|
@@ -6706,15 +6803,15 @@ class ListComponent {
|
|
|
6706
6803
|
this.actionClick.emit(item);
|
|
6707
6804
|
}
|
|
6708
6805
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6709
|
-
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 }, 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 @if (item.icon) {\n <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" />\n }\n <span class=\"lc-list__label\">{{ item.label }}</span>\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 }\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__action{flex-shrink:0}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{flex-direction:column;align-items:stretch;gap:.375rem;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--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 });
|
|
6806
|
+
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 });
|
|
6710
6807
|
}
|
|
6711
6808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ListComponent, decorators: [{
|
|
6712
6809
|
type: Component,
|
|
6713
|
-
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 @if (item.icon) {\n <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" />\n }\n <span class=\"lc-list__label\">{{ item.label }}</span>\n @if (item.
|
|
6810
|
+
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"] }]
|
|
6714
6811
|
}], propDecorators: { itemTemplate: [{
|
|
6715
6812
|
type: ContentChild,
|
|
6716
6813
|
args: [ListItemTemplateDirective]
|
|
6717
|
-
}], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDividers", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
|
|
6814
|
+
}], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDividers", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
|
|
6718
6815
|
|
|
6719
6816
|
/**
|
|
6720
6817
|
* Chip component for displaying tags, filters, or selections.
|