@lifecorner/angular-ui-kit 3.35.0 → 3.37.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.
- package/README.md +1 -0
- package/fesm2022/lifecorner-angular-ui-kit-button.mjs +6 -6
- package/fesm2022/lifecorner-angular-ui-kit-button.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-card.mjs +82 -16
- package/fesm2022/lifecorner-angular-ui-kit-card.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-combobox.mjs +18 -2
- package/fesm2022/lifecorner-angular-ui-kit-combobox.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs +43 -5
- package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-header.mjs +45 -8
- package/fesm2022/lifecorner-angular-ui-kit-header.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-hero.mjs +78 -5
- package/fesm2022/lifecorner-angular-ui-kit-hero.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-internal-chart.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-internal-chart.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs +30 -6
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs +15 -10
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-stacked-bar-chart.mjs +47 -5
- package/fesm2022/lifecorner-angular-ui-kit-stacked-bar-chart.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-state-strip.mjs +226 -0
- package/fesm2022/lifecorner-angular-ui-kit-state-strip.mjs.map +1 -0
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs +25 -4
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit.mjs +1 -0
- package/package.json +5 -1
- package/src/styles/_theme-light.scss +8 -1
- package/src/styles/theme-contrast.spec.ts +116 -0
- package/src/styles/theme-modes.spec.ts +20 -5
- package/types/lifecorner-angular-ui-kit-button.d.ts +7 -3
- package/types/lifecorner-angular-ui-kit-card.d.ts +51 -3
- package/types/lifecorner-angular-ui-kit-combobox.d.ts +15 -0
- package/types/lifecorner-angular-ui-kit-description-list.d.ts +40 -0
- package/types/lifecorner-angular-ui-kit-header.d.ts +44 -2
- package/types/lifecorner-angular-ui-kit-hero.d.ts +50 -1
- package/types/lifecorner-angular-ui-kit-internal-chart.d.ts +6 -0
- package/types/lifecorner-angular-ui-kit-list.d.ts +27 -0
- package/types/lifecorner-angular-ui-kit-select.d.ts +13 -1
- package/types/lifecorner-angular-ui-kit-stacked-bar-chart.d.ts +36 -0
- package/types/lifecorner-angular-ui-kit-state-strip.d.ts +125 -0
- package/types/lifecorner-angular-ui-kit-table.d.ts +46 -1
- package/types/lifecorner-angular-ui-kit.d.ts +1 -0
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
|
|
3
|
+
import { BadgeComponent } from "@lifecorner/angular-ui-kit/badge";
|
|
3
4
|
let nextUniqueId = 0;
|
|
4
5
|
var DescriptionListComponent = class DescriptionListComponent {
|
|
5
6
|
items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
|
|
@@ -8,7 +9,16 @@ var DescriptionListComponent = class DescriptionListComponent {
|
|
|
8
9
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
9
10
|
separator = input("line", ...ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []);
|
|
10
11
|
clickable = input(false, ...ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []);
|
|
12
|
+
totalAriaLabel = input("", ...ngDevMode ? [{ debugName: "totalAriaLabel" }] : /* istanbul ignore next */ []);
|
|
11
13
|
itemClick = output();
|
|
14
|
+
totalPrefix = computed(() => {
|
|
15
|
+
const label = this.totalAriaLabel().trim();
|
|
16
|
+
return label ? `${label}, ` : "";
|
|
17
|
+
}, ...ngDevMode ? [{ debugName: "totalPrefix" }] : /* istanbul ignore next */ []);
|
|
18
|
+
badgeShowsValue(item) {
|
|
19
|
+
const value = (item.value ?? "").trim();
|
|
20
|
+
return value !== "" && value.toLowerCase() !== (item.badge ?? "").trim().toLowerCase();
|
|
21
|
+
}
|
|
12
22
|
uid = `lc-dl-${nextUniqueId++}`;
|
|
13
23
|
termId(index) {
|
|
14
24
|
return `${this.uid}-t${index}`;
|
|
@@ -24,7 +34,7 @@ var DescriptionListComponent = class DescriptionListComponent {
|
|
|
24
34
|
this.leaders() && this.layout() === "rows" ? "lc-dl--leaders" : ""
|
|
25
35
|
].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
|
|
26
36
|
valueClass(item) {
|
|
27
|
-
return `lc-dl__value lc-dl__value--${item.emphasis ?? "default"}`;
|
|
37
|
+
return `lc-dl__value lc-dl__value--${item.total ? "strong" : item.emphasis ?? "default"}`;
|
|
28
38
|
}
|
|
29
39
|
onRowKeydown(event, item) {
|
|
30
40
|
if (event.target !== event.currentTarget) return;
|
|
@@ -89,12 +99,31 @@ var DescriptionListComponent = class DescriptionListComponent {
|
|
|
89
99
|
isSignal: true,
|
|
90
100
|
isRequired: false,
|
|
91
101
|
transformFunction: null
|
|
102
|
+
},
|
|
103
|
+
totalAriaLabel: {
|
|
104
|
+
classPropertyName: "totalAriaLabel",
|
|
105
|
+
publicName: "totalAriaLabel",
|
|
106
|
+
isSignal: true,
|
|
107
|
+
isRequired: false,
|
|
108
|
+
transformFunction: null
|
|
92
109
|
}
|
|
93
110
|
},
|
|
94
111
|
outputs: { itemClick: "itemClick" },
|
|
95
112
|
ngImport: i0,
|
|
96
|
-
template: "<dl [class]=\"hostClasses()\">\n @for (item of items(); track item.term; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the row stays a dt/dd group (F-17): its button is the focusable control, and its click and keys bubble here -->\n <div\n class=\"lc-dl__row\"\n [class.lc-dl__row--clickable]=\"clickable()\"\n (click)=\"itemClick.emit(item)\"\n (keydown)=\"onRowKeydown($event, item)\"\n >\n <dt class=\"lc-dl__term\" [attr.id]=\"clickable() ? termId(i) : null\">{{ item.term }}</dt
|
|
97
|
-
styles: [":host{display:block}.lc-dl{margin:0}.lc-dl__row{display:flex;align-items:baseline;gap:var(--spacing-2)}.lc-dl__row--clickable{position:relative;cursor:pointer;border-radius:var(--border-radius-sm)}.lc-dl__row--clickable:hover{background:var(--color-surface-hover)}.lc-dl__action{position:absolute;inset:0;margin:0;padding:0;border:0;background:none;border-radius:var(--border-radius-sm);pointer-events:none}.lc-dl__action:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-dl__term{margin:0;flex-shrink:0;color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.lc-dl__leader{flex:1 1 auto;align-self:center;min-width:var(--spacing-4)}.lc-dl__value{margin:0;flex:0 1 auto;min-width:0;overflow-wrap:anywhere;text-align:right;color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums}.lc-dl__value--muted{color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__value--strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.lc-dl__value--primary{color:var(--color-on-primary-subtle);font-weight:var(--font-weight-semibold)}.lc-dl__value--mono{font-family:var(--font-family-mono);font-variant-numeric:normal}.lc-dl__value-suffix{margin-left:.375rem;color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__link{color:var(--color-link);text-decoration:none}.lc-dl__link:hover{color:var(--color-link-hover);text-decoration:underline}.lc-dl__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-dl--rows .lc-dl__row{padding-block:var(--spacing-2)}.lc-dl--rows .lc-dl__term,.lc-dl--rows .lc-dl__value{flex:1000000 1 0%;max-width:max-content}.lc-dl--rows .lc-dl__term{min-width:0;overflow-wrap:break-word}.lc-dl--rows.lc-dl--sep-line .lc-dl__row,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom:1px solid var(--color-divider)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row:last-child,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row:last-child{border-bottom:0}.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom-style:dashed}.lc-dl--leaders .lc-dl__leader{border-bottom:1px dotted var(--color-border-strong);transform:translateY(-.15em)}@supports (margin-block-start: 1lh){.lc-dl--leaders .lc-dl__leader{align-self:flex-start;margin-block-start:calc(.5lh - .5px)}}.lc-dl--stacked .lc-dl__row{flex-direction:column;align-items:stretch;gap:var(--spacing-1);padding-block:var(--spacing-2)}.lc-dl--stacked .lc-dl__leader{display:none}.lc-dl--stacked .lc-dl__value{text-align:left}.lc-dl--sm{font-size:var(--font-size-xs)}.lc-dl--sm .lc-dl__row{padding-block:var(--spacing-1)}.lc-dl--md{font-size:var(--font-size-sm)}.lc-dl--rows .lc-dl__row.lc-dl__row--clickable{padding-block:max(var(--spacing-2),(var(--size-min-touch-height) - 1lh) / 2)}.lc-dl--rows.lc-dl--sm .lc-dl__row.lc-dl__row--clickable{padding-block:max(var(--spacing-1),(var(--size-min-touch-height) - 1lh) / 2)}@media(forced-colors:active){.lc-dl__action:focus-visible{outline-color:Highlight}}@media(forced-colors:active){.lc-dl__link:focus-visible{outline-color:Highlight}}\n"],
|
|
113
|
+
template: "<dl [class]=\"hostClasses()\">\n @for (item of items(); track item.term; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the row stays a dt/dd group (F-17): its button is the focusable control, and its click and keys bubble here -->\n <div\n class=\"lc-dl__row\"\n [class.lc-dl__row--clickable]=\"clickable()\"\n [class.lc-dl__row--total]=\"!!item.total\"\n (click)=\"itemClick.emit(item)\"\n (keydown)=\"onRowKeydown($event, item)\"\n >\n <!-- 3.37 (request 057, regeln row 1, D-4): the &ngsp; spaces put word breaks into the text (textContent, names, copy); in the flex row they render nothing. -->\n <dt class=\"lc-dl__term\" [attr.id]=\"clickable() ? termId(i) : null\">@if (item.total && totalPrefix()) {<span class=\"lc-dl__sr-only\">{{ totalPrefix() }}</span>&ngsp;}{{ item.term }}</dt>&ngsp;<span class=\"lc-dl__leader\" aria-hidden=\"true\"></span>&ngsp;<dd [class]=\"valueClass(item)\" [attr.id]=\"clickable() ? valueId(i) : null\">\n @if (item.badge) {\n <!-- 3.36: the value as a badge; another value stays as text before it (D-2). -->\n @if (badgeShowsValue(item)) {\n @if (item.href) {\n <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n } @else if (item.datetime) {\n <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n } @else {\n <span class=\"lc-dl__badge-value\">{{ item.value }}</span>\n }\n }\n <lc-badge\n class=\"lc-dl__badge\"\n [class.lc-dl__badge--after-value]=\"badgeShowsValue(item)\"\n [size]=\"size() === 'sm' ? 'xs' : 'sm'\"\n [rounded]=\"true\"\n [variant]=\"item.badgeVariant ?? 'default'\"\n >&ngsp;{{ item.badge }}</lc-badge\n >\n } @else if (item.href) {\n <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n } @else if (item.datetime) {\n <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n } @else {\n {{ item.value }}\n }\n @if (item.valueSuffix) {\n @if (item.badge || item.href || item.datetime) {\n <!-- After a link, a time or a badge the suffix had no space before it; this one renders 0 px wide. -->\n <span class=\"lc-dl__sep\">&ngsp;</span>\n }\n <span class=\"lc-dl__value-suffix\">{{ item.valueSuffix }}</span>\n }\n @if (clickable()) {\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- named by aria-labelledby (the row's term and value); text inside would repeat the value -->\n <button\n type=\"button\"\n class=\"lc-dl__action\"\n [attr.aria-labelledby]=\"termId(i) + ' ' + valueId(i)\"\n ></button>\n }\n </dd>\n </div>&ngsp;\n }\n</dl>\n",
|
|
114
|
+
styles: [":host{display:block}.lc-dl{margin:0}.lc-dl__row{display:flex;align-items:baseline;gap:var(--spacing-2)}.lc-dl__row--clickable{position:relative;cursor:pointer;border-radius:var(--border-radius-sm)}.lc-dl__row--clickable:hover{background:var(--color-surface-hover)}.lc-dl__action{position:absolute;inset:0;margin:0;padding:0;border:0;background:none;border-radius:var(--border-radius-sm);pointer-events:none}.lc-dl__action:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-dl__term{margin:0;flex-shrink:0;color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.lc-dl__leader{flex:1 1 auto;align-self:center;min-width:var(--spacing-4)}.lc-dl__value{margin:0;flex:0 1 auto;min-width:0;overflow-wrap:anywhere;text-align:right;color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums}.lc-dl__value--muted{color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__value--strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.lc-dl__value--primary{color:var(--color-on-primary-subtle);font-weight:var(--font-weight-semibold)}.lc-dl__value--mono{font-family:var(--font-family-mono);font-variant-numeric:normal}.lc-dl__value-suffix{margin-left:.375rem;color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__link{color:var(--color-link);text-decoration:none}.lc-dl__link:hover{color:var(--color-link-hover);text-decoration:underline}.lc-dl__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-dl--rows .lc-dl__row{padding-block:var(--spacing-2)}.lc-dl--rows .lc-dl__term,.lc-dl--rows .lc-dl__value{flex:1000000 1 0%;max-width:max-content}.lc-dl--rows .lc-dl__term{min-width:0;overflow-wrap:break-word}.lc-dl--rows.lc-dl--sep-line .lc-dl__row,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom:1px solid var(--color-divider)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row:last-child,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row:last-child{border-bottom:0}.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom-style:dashed}.lc-dl--leaders .lc-dl__leader{border-bottom:1px dotted var(--color-border-strong);transform:translateY(-.15em)}@supports (margin-block-start: 1lh){.lc-dl--leaders .lc-dl__leader{align-self:flex-start;margin-block-start:calc(.5lh - .5px)}}.lc-dl--stacked .lc-dl__row{flex-direction:column;align-items:stretch;gap:var(--spacing-1);padding-block:var(--spacing-2)}.lc-dl--stacked .lc-dl__leader{display:none}.lc-dl--stacked .lc-dl__value{text-align:left}.lc-dl--sm{font-size:var(--font-size-xs)}.lc-dl--sm .lc-dl__row{padding-block:var(--spacing-1)}.lc-dl--md{font-size:var(--font-size-sm)}.lc-dl--rows .lc-dl__row.lc-dl__row--clickable{padding-block:max(var(--spacing-2),(var(--size-min-touch-height) - 1lh) / 2)}.lc-dl--rows.lc-dl--sm .lc-dl__row.lc-dl__row--clickable{padding-block:max(var(--spacing-1),(var(--size-min-touch-height) - 1lh) / 2)}@media(forced-colors:active){.lc-dl__action:focus-visible{outline-color:Highlight}}@media(forced-colors:active){.lc-dl__link:focus-visible{outline-color:Highlight}}lc-badge.lc-dl__badge{display:inline-flex;margin-block:calc((1lh - 1.5rem)/2)}.lc-dl--sm lc-badge.lc-dl__badge{margin-block:calc((1lh - 1.25rem)/2)}.lc-dl__badge--after-value{margin-inline-start:var(--spacing-1-5)}.lc-dl .lc-dl__row--total{border-top:1px solid var(--color-field-border);border-bottom:3px double var(--color-field-border)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row.lc-dl__row--total,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row.lc-dl__row--total{margin-top:-1px;border-bottom:3px double var(--color-field-border)}.lc-dl__row--total .lc-dl__term{position:relative;color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.lc-dl__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.lc-dl__sep{font-size:0}\n"],
|
|
115
|
+
dependencies: [{
|
|
116
|
+
kind: "component",
|
|
117
|
+
type: BadgeComponent,
|
|
118
|
+
selector: "lc-badge",
|
|
119
|
+
inputs: [
|
|
120
|
+
"variant",
|
|
121
|
+
"size",
|
|
122
|
+
"rounded",
|
|
123
|
+
"dot",
|
|
124
|
+
"wrap"
|
|
125
|
+
]
|
|
126
|
+
}],
|
|
98
127
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
99
128
|
});
|
|
100
129
|
};
|
|
@@ -108,9 +137,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
108
137
|
args: [{
|
|
109
138
|
selector: "lc-description-list",
|
|
110
139
|
standalone: true,
|
|
140
|
+
imports: [BadgeComponent],
|
|
111
141
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
112
|
-
template: "<dl [class]=\"hostClasses()\">\n @for (item of items(); track item.term; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the row stays a dt/dd group (F-17): its button is the focusable control, and its click and keys bubble here -->\n <div\n class=\"lc-dl__row\"\n [class.lc-dl__row--clickable]=\"clickable()\"\n (click)=\"itemClick.emit(item)\"\n (keydown)=\"onRowKeydown($event, item)\"\n >\n <dt class=\"lc-dl__term\" [attr.id]=\"clickable() ? termId(i) : null\">{{ item.term }}</dt
|
|
113
|
-
styles: [":host{display:block}.lc-dl{margin:0}.lc-dl__row{display:flex;align-items:baseline;gap:var(--spacing-2)}.lc-dl__row--clickable{position:relative;cursor:pointer;border-radius:var(--border-radius-sm)}.lc-dl__row--clickable:hover{background:var(--color-surface-hover)}.lc-dl__action{position:absolute;inset:0;margin:0;padding:0;border:0;background:none;border-radius:var(--border-radius-sm);pointer-events:none}.lc-dl__action:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-dl__term{margin:0;flex-shrink:0;color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.lc-dl__leader{flex:1 1 auto;align-self:center;min-width:var(--spacing-4)}.lc-dl__value{margin:0;flex:0 1 auto;min-width:0;overflow-wrap:anywhere;text-align:right;color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums}.lc-dl__value--muted{color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__value--strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.lc-dl__value--primary{color:var(--color-on-primary-subtle);font-weight:var(--font-weight-semibold)}.lc-dl__value--mono{font-family:var(--font-family-mono);font-variant-numeric:normal}.lc-dl__value-suffix{margin-left:.375rem;color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__link{color:var(--color-link);text-decoration:none}.lc-dl__link:hover{color:var(--color-link-hover);text-decoration:underline}.lc-dl__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-dl--rows .lc-dl__row{padding-block:var(--spacing-2)}.lc-dl--rows .lc-dl__term,.lc-dl--rows .lc-dl__value{flex:1000000 1 0%;max-width:max-content}.lc-dl--rows .lc-dl__term{min-width:0;overflow-wrap:break-word}.lc-dl--rows.lc-dl--sep-line .lc-dl__row,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom:1px solid var(--color-divider)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row:last-child,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row:last-child{border-bottom:0}.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom-style:dashed}.lc-dl--leaders .lc-dl__leader{border-bottom:1px dotted var(--color-border-strong);transform:translateY(-.15em)}@supports (margin-block-start: 1lh){.lc-dl--leaders .lc-dl__leader{align-self:flex-start;margin-block-start:calc(.5lh - .5px)}}.lc-dl--stacked .lc-dl__row{flex-direction:column;align-items:stretch;gap:var(--spacing-1);padding-block:var(--spacing-2)}.lc-dl--stacked .lc-dl__leader{display:none}.lc-dl--stacked .lc-dl__value{text-align:left}.lc-dl--sm{font-size:var(--font-size-xs)}.lc-dl--sm .lc-dl__row{padding-block:var(--spacing-1)}.lc-dl--md{font-size:var(--font-size-sm)}.lc-dl--rows .lc-dl__row.lc-dl__row--clickable{padding-block:max(var(--spacing-2),(var(--size-min-touch-height) - 1lh) / 2)}.lc-dl--rows.lc-dl--sm .lc-dl__row.lc-dl__row--clickable{padding-block:max(var(--spacing-1),(var(--size-min-touch-height) - 1lh) / 2)}@media(forced-colors:active){.lc-dl__action:focus-visible{outline-color:Highlight}}@media(forced-colors:active){.lc-dl__link:focus-visible{outline-color:Highlight}}\n"]
|
|
142
|
+
template: "<dl [class]=\"hostClasses()\">\n @for (item of items(); track item.term; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the row stays a dt/dd group (F-17): its button is the focusable control, and its click and keys bubble here -->\n <div\n class=\"lc-dl__row\"\n [class.lc-dl__row--clickable]=\"clickable()\"\n [class.lc-dl__row--total]=\"!!item.total\"\n (click)=\"itemClick.emit(item)\"\n (keydown)=\"onRowKeydown($event, item)\"\n >\n <!-- 3.37 (request 057, regeln row 1, D-4): the &ngsp; spaces put word breaks into the text (textContent, names, copy); in the flex row they render nothing. -->\n <dt class=\"lc-dl__term\" [attr.id]=\"clickable() ? termId(i) : null\">@if (item.total && totalPrefix()) {<span class=\"lc-dl__sr-only\">{{ totalPrefix() }}</span>&ngsp;}{{ item.term }}</dt>&ngsp;<span class=\"lc-dl__leader\" aria-hidden=\"true\"></span>&ngsp;<dd [class]=\"valueClass(item)\" [attr.id]=\"clickable() ? valueId(i) : null\">\n @if (item.badge) {\n <!-- 3.36: the value as a badge; another value stays as text before it (D-2). -->\n @if (badgeShowsValue(item)) {\n @if (item.href) {\n <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n } @else if (item.datetime) {\n <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n } @else {\n <span class=\"lc-dl__badge-value\">{{ item.value }}</span>\n }\n }\n <lc-badge\n class=\"lc-dl__badge\"\n [class.lc-dl__badge--after-value]=\"badgeShowsValue(item)\"\n [size]=\"size() === 'sm' ? 'xs' : 'sm'\"\n [rounded]=\"true\"\n [variant]=\"item.badgeVariant ?? 'default'\"\n >&ngsp;{{ item.badge }}</lc-badge\n >\n } @else if (item.href) {\n <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n } @else if (item.datetime) {\n <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n } @else {\n {{ item.value }}\n }\n @if (item.valueSuffix) {\n @if (item.badge || item.href || item.datetime) {\n <!-- After a link, a time or a badge the suffix had no space before it; this one renders 0 px wide. -->\n <span class=\"lc-dl__sep\">&ngsp;</span>\n }\n <span class=\"lc-dl__value-suffix\">{{ item.valueSuffix }}</span>\n }\n @if (clickable()) {\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- named by aria-labelledby (the row's term and value); text inside would repeat the value -->\n <button\n type=\"button\"\n class=\"lc-dl__action\"\n [attr.aria-labelledby]=\"termId(i) + ' ' + valueId(i)\"\n ></button>\n }\n </dd>\n </div>&ngsp;\n }\n</dl>\n",
|
|
143
|
+
styles: [":host{display:block}.lc-dl{margin:0}.lc-dl__row{display:flex;align-items:baseline;gap:var(--spacing-2)}.lc-dl__row--clickable{position:relative;cursor:pointer;border-radius:var(--border-radius-sm)}.lc-dl__row--clickable:hover{background:var(--color-surface-hover)}.lc-dl__action{position:absolute;inset:0;margin:0;padding:0;border:0;background:none;border-radius:var(--border-radius-sm);pointer-events:none}.lc-dl__action:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-dl__term{margin:0;flex-shrink:0;color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.lc-dl__leader{flex:1 1 auto;align-self:center;min-width:var(--spacing-4)}.lc-dl__value{margin:0;flex:0 1 auto;min-width:0;overflow-wrap:anywhere;text-align:right;color:var(--color-text-primary);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums}.lc-dl__value--muted{color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__value--strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.lc-dl__value--primary{color:var(--color-on-primary-subtle);font-weight:var(--font-weight-semibold)}.lc-dl__value--mono{font-family:var(--font-family-mono);font-variant-numeric:normal}.lc-dl__value-suffix{margin-left:.375rem;color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.lc-dl__link{color:var(--color-link);text-decoration:none}.lc-dl__link:hover{color:var(--color-link-hover);text-decoration:underline}.lc-dl__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-dl--rows .lc-dl__row{padding-block:var(--spacing-2)}.lc-dl--rows .lc-dl__term,.lc-dl--rows .lc-dl__value{flex:1000000 1 0%;max-width:max-content}.lc-dl--rows .lc-dl__term{min-width:0;overflow-wrap:break-word}.lc-dl--rows.lc-dl--sep-line .lc-dl__row,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom:1px solid var(--color-divider)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row:last-child,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row:last-child{border-bottom:0}.lc-dl--rows.lc-dl--sep-divider .lc-dl__row{border-bottom-style:dashed}.lc-dl--leaders .lc-dl__leader{border-bottom:1px dotted var(--color-border-strong);transform:translateY(-.15em)}@supports (margin-block-start: 1lh){.lc-dl--leaders .lc-dl__leader{align-self:flex-start;margin-block-start:calc(.5lh - .5px)}}.lc-dl--stacked .lc-dl__row{flex-direction:column;align-items:stretch;gap:var(--spacing-1);padding-block:var(--spacing-2)}.lc-dl--stacked .lc-dl__leader{display:none}.lc-dl--stacked .lc-dl__value{text-align:left}.lc-dl--sm{font-size:var(--font-size-xs)}.lc-dl--sm .lc-dl__row{padding-block:var(--spacing-1)}.lc-dl--md{font-size:var(--font-size-sm)}.lc-dl--rows .lc-dl__row.lc-dl__row--clickable{padding-block:max(var(--spacing-2),(var(--size-min-touch-height) - 1lh) / 2)}.lc-dl--rows.lc-dl--sm .lc-dl__row.lc-dl__row--clickable{padding-block:max(var(--spacing-1),(var(--size-min-touch-height) - 1lh) / 2)}@media(forced-colors:active){.lc-dl__action:focus-visible{outline-color:Highlight}}@media(forced-colors:active){.lc-dl__link:focus-visible{outline-color:Highlight}}lc-badge.lc-dl__badge{display:inline-flex;margin-block:calc((1lh - 1.5rem)/2)}.lc-dl--sm lc-badge.lc-dl__badge{margin-block:calc((1lh - 1.25rem)/2)}.lc-dl__badge--after-value{margin-inline-start:var(--spacing-1-5)}.lc-dl .lc-dl__row--total{border-top:1px solid var(--color-field-border);border-bottom:3px double var(--color-field-border)}.lc-dl--rows.lc-dl--sep-line .lc-dl__row.lc-dl__row--total,.lc-dl--rows.lc-dl--sep-divider .lc-dl__row.lc-dl__row--total{margin-top:-1px;border-bottom:3px double var(--color-field-border)}.lc-dl__row--total .lc-dl__term{position:relative;color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.lc-dl__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.lc-dl__sep{font-size:0}\n"]
|
|
114
144
|
}]
|
|
115
145
|
}],
|
|
116
146
|
propDecorators: {
|
|
@@ -162,6 +192,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
162
192
|
required: false
|
|
163
193
|
}]
|
|
164
194
|
}],
|
|
195
|
+
totalAriaLabel: [{
|
|
196
|
+
type: i0.Input,
|
|
197
|
+
args: [{
|
|
198
|
+
isSignal: true,
|
|
199
|
+
alias: "totalAriaLabel",
|
|
200
|
+
required: false
|
|
201
|
+
}]
|
|
202
|
+
}],
|
|
165
203
|
itemClick: [{
|
|
166
204
|
type: i0.Output,
|
|
167
205
|
args: ["itemClick"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-description-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/description-list/description-list.component.ts","../../../../libs/angular-ui-kit/src/lib/description-list/description-list.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n computed,\n} from '@angular/core';\n\n/**\n * Emphasis treatment applied to a row's value.\n * - `mono` renders the value in the monospace font (paths, URLs, hashes).\n */\nexport type DescriptionListEmphasis =\n | 'default'\n | 'strong'\n | 'muted'\n | 'primary'\n | 'mono';\n\nexport interface DescriptionListItem {\n /** Label shown on the term side of the row. */\n term: string;\n /** Value shown on the description side of the row. */\n value: string;\n /**\n * Optional qualifying suffix appended after the value on the same line and\n * rendered muted (e.g. a rating grade or \"last checked\" hint). Wraps if the\n * combined value + suffix exceed the available width.\n */\n valueSuffix?: string;\n /** Optional link — renders the value as an anchor. */\n href?: string;\n /**\n * Machine-readable date or time of the value (ISO 8601, e.g.\n * `2026-10-12T18:05:00+02:00`): renders the value inside\n * `<time datetime>`, so assistive tech and parsers get the exact moment\n * behind „heute 18:05“. Ignored together with `href`.\n */\n datetime?: string;\n /** Optional visual emphasis for the value. @default 'default' */\n emphasis?: DescriptionListEmphasis;\n /** Optional opaque payload echoed back in `itemClick`. */\n id?: string;\n}\n\nexport type DescriptionListLayout = 'rows' | 'stacked';\nexport type DescriptionListSize = 'sm' | 'md';\n\n/**\n * Per-row separator style (applies to the `rows` layout).\n * - `line` solid hairline under each row (default — unchanged look)\n * - `divider` subtle dashed line, for the dense card look\n * - `none` no row separator\n *\n * Orthogonal to `leaders`, which draws dotted leaders *between* term and value.\n */\nexport type DescriptionListSeparator = 'line' | 'divider' | 'none';\n\n/** Counter for generated ids: they follow creation order, so prerendered HTML is the same in every build. */\nlet nextUniqueId = 0;\n\n/**\n * Description list for key/value metadata (a styled `<dl>`).\n *\n * Features:\n * - `rows` layout: term on the left, value on the right, with an optional\n * dotted leader line connecting them (the DS2.0 \"spec sheet\" look).\n * - `rows`: a row that is too narrow is shared — term and value each keep\n * their width up to half of the free width (row − 32 px); the longer one\n * wraps in the rest: the term at spaces, the value at spaces or inside an\n * unbroken string (3.26).\n * - `stacked` layout: term above value, for narrow columns.\n * - Per-row value emphasis and optional links.\n * - Semantic markup (`<dl>`/`<dt>`/`<dd>`) for accessibility; `clickable`\n * rows hold a native button (named by term and value) that the keyboard\n * reaches, and the `dl` keeps its term and value pairs.\n *\n * @example\n * ```html\n * <lc-description-list\n * [items]=\"[\n * { term: 'Repository', value: 'example/project', href: '#', emphasis: 'primary' },\n * { term: 'Access', value: 'Token stored · read only' },\n * { term: 'Status', value: 'Maintained', emphasis: 'strong' }\n * ]\"\n * [leaders]=\"true\" />\n * ```\n */\n@Component({\n selector: 'lc-description-list',\n standalone: true,\n templateUrl: './description-list.component.html',\n styleUrls: ['./description-list.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DescriptionListComponent {\n /** Rows to render. */\n readonly items = input.required<readonly DescriptionListItem[]>();\n\n /**\n * Row layout.\n * - rows: term left / value right (default)\n * - stacked: term above value\n * @default 'rows'\n */\n readonly layout = input<DescriptionListLayout>('rows');\n\n /**\n * Draw a dotted leader line between term and value. Only applies to the\n * `rows` layout.\n * @default false\n */\n readonly leaders = input<boolean>(false);\n\n /** Density of the rows. @default 'md' */\n readonly size = input<DescriptionListSize>('md');\n\n /**\n * Per-row separator style for the `rows` layout. Defaults to `line`, which is\n * identical to the previous behavior. Orthogonal to `leaders`.\n * @default 'line'\n */\n readonly separator = input<DescriptionListSeparator>('line');\n\n /**\n * Whether rows are interactive. When set, each row holds a native button,\n * named by its term and value, that Tab reaches; Enter, Space and a click\n * anywhere on the row emit `itemClick`. The `dl` keeps its term and value\n * pairs. Set this whenever you handle `itemClick`.\n * @default false\n */\n readonly clickable = input<boolean>(false);\n\n /** Emitted when a row is clicked (or activated via keyboard when `clickable`). */\n readonly itemClick = output<DescriptionListItem>();\n\n /** Generated id prefix, taken once per instance, so later ids don't shift. */\n private readonly uid = `lc-dl-${nextUniqueId++}`;\n\n /** Id of row `index`'s term (only rendered when `clickable`). */\n protected termId(index: number): string {\n return `${this.uid}-t${index}`;\n }\n\n /** Id of row `index`'s value (only rendered when `clickable`). */\n protected valueId(index: number): string {\n return `${this.uid}-v${index}`;\n }\n\n protected readonly hostClasses = computed(() =>\n [\n 'lc-dl',\n `lc-dl--${this.layout()}`,\n `lc-dl--${this.size()}`,\n `lc-dl--sep-${this.separator()}`,\n this.leaders() && this.layout() === 'rows' ? 'lc-dl--leaders' : '',\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n protected valueClass(item: DescriptionListItem): string {\n return `lc-dl__value lc-dl__value--${item.emphasis ?? 'default'}`;\n }\n\n /**\n * Keydown dispatched on the row itself (a consumer's test, a script). Keys\n * from the row's button or a nested link are theirs: the button's native\n * activation clicks it, and the click bubbles to the row.\n */\n protected onRowKeydown(event: KeyboardEvent, item: DescriptionListItem): void {\n if (event.target !== event.currentTarget) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.itemClick.emit(item);\n }\n }\n}\n","<dl [class]=\"hostClasses()\">\n @for (item of items(); track item.term; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the row stays a dt/dd group (F-17): its button is the focusable control, and its click and keys bubble here -->\n <div\n class=\"lc-dl__row\"\n [class.lc-dl__row--clickable]=\"clickable()\"\n (click)=\"itemClick.emit(item)\"\n (keydown)=\"onRowKeydown($event, item)\"\n >\n <dt class=\"lc-dl__term\" [attr.id]=\"clickable() ? termId(i) : null\">{{ item.term }}</dt>\n <span class=\"lc-dl__leader\" aria-hidden=\"true\"></span>\n <dd [class]=\"valueClass(item)\" [attr.id]=\"clickable() ? valueId(i) : null\">\n @if (item.href) {\n <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n } @else if (item.datetime) {\n <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n } @else {\n {{ item.value }}\n }\n @if (item.valueSuffix) {\n <span class=\"lc-dl__value-suffix\">{{ item.valueSuffix }}</span>\n }\n @if (clickable()) {\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- named by aria-labelledby (the row's term and value); text inside would repeat the value -->\n <button\n type=\"button\"\n class=\"lc-dl__action\"\n [attr.aria-labelledby]=\"termId(i) + ' ' + valueId(i)\"\n ></button>\n }\n </dd>\n </div>\n }\n</dl>\n"],"mappings":";;AA2DA,IAAI,eAAe;AAoCnB,IAAa,2BAAb,MAAa,yBAAwB;CAE1B,QAAQ,MAAM,SAA0C,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAQxD,SAAS,MAA6B,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAO7C,UAAU,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG/B,OAAO,MAA2B,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOvC,YAAY,MAAgC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CASnD,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGjC,YAAY,OAAM;CAGV,MAAM,SAAS;CAGtB,OAAO,OAAa;EAC5B,OAAO,GAAG,KAAK,IAAG,IAAK;CACzB;CAGU,QAAQ,OAAa;EAC7B,OAAO,GAAG,KAAK,IAAG,IAAK;CACzB;CAEmB,cAAc,eAC/B;EACE;EACA,UAAU,KAAK,OAAM;EACrB,UAAU,KAAK,KAAI;EACnB,cAAc,KAAK,UAAS;EAC5B,KAAK,QAAO,KAAM,KAAK,OAAM,MAAO,SAAS,mBAAmB;CACjE,CAAA,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACZ,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAES,WAAW,MAAyB;EAC5C,OAAO,8BAA8B,KAAK,YAAY;CACxD;CAOU,aAAa,OAAsB,MAAyB;EACpE,IAAI,MAAM,WAAW,MAAM,eAAe;EAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAc;GACpB,KAAK,UAAU,KAAK,IAAI;EAC1B;CACF;CAjFW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAwB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAxB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAwB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,YAAA;EAAA,UAAA;EAAA,UC/FrC;EAkCA,QAAA,CAAA,sjGAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AD6Da,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAwB,YAAA,CAAA;EAPpC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAqB,YACnB;GAAI,iBAGC,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,sjGAAA;EAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-description-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/description-list/description-list.component.ts","../../../../libs/angular-ui-kit/src/lib/description-list/description-list.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n computed,\n} from '@angular/core';\nimport { BadgeComponent, type BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\n\n/**\n * Emphasis treatment applied to a row's value.\n * - `mono` renders the value in the monospace font (paths, URLs, hashes).\n */\nexport type DescriptionListEmphasis =\n | 'default'\n | 'strong'\n | 'muted'\n | 'primary'\n | 'mono';\n\nexport interface DescriptionListItem {\n /** Label shown on the term side of the row. */\n term: string;\n /** Value shown on the description side of the row. */\n value: string;\n /**\n * Optional qualifying suffix appended after the value on the same line and\n * rendered muted (e.g. a rating grade or \"last checked\" hint). Wraps if the\n * combined value + suffix exceed the available width.\n */\n valueSuffix?: string;\n /** Optional link — renders the value as an anchor. */\n href?: string;\n /**\n * Machine-readable date or time of the value (ISO 8601, e.g.\n * `2026-10-12T18:05:00+02:00`): renders the value inside\n * `<time datetime>`, so assistive tech and parsers get the exact moment\n * behind „heute 18:05“. Ignored together with `href`.\n */\n datetime?: string;\n /** Optional visual emphasis for the value. @default 'default' */\n emphasis?: DescriptionListEmphasis;\n /**\n * Shows the value as an `lc-badge` (3.36, quellen row 2): rounded, `sm` in\n * an md list, `xs` in an sm list. A `value` that is empty or the same word\n * (trimmed, any case) is not shown; another value stays as text before the\n * badge („1“ [Freigegeben]), and `href` or `datetime` wrap that text only.\n * Term and value stay one `dt`/`dd` pair, read as „term, badge“.\n */\n badge?: string;\n /** Variant of the `badge`, as `lc-badge`. @default 'default' */\n badgeVariant?: BadgeVariant;\n /**\n * The sum item (3.36, app-shell row 2): a rule above and a double rule\n * below (`--color-field-border`), term and value semibold with tabular\n * figures; its `emphasis` is ignored. `totalAriaLabel` is read before its\n * term. Usually the last item.\n * @default false\n */\n total?: boolean;\n /** Optional opaque payload echoed back in `itemClick`. */\n id?: string;\n}\n\nexport type DescriptionListLayout = 'rows' | 'stacked';\nexport type DescriptionListSize = 'sm' | 'md';\n\n/**\n * Per-row separator style (applies to the `rows` layout).\n * - `line` solid hairline under each row (default — unchanged look)\n * - `divider` subtle dashed line, for the dense card look\n * - `none` no row separator\n *\n * Orthogonal to `leaders`, which draws dotted leaders *between* term and value.\n */\nexport type DescriptionListSeparator = 'line' | 'divider' | 'none';\n\n/** Counter for generated ids: they follow creation order, so prerendered HTML is the same in every build. */\nlet nextUniqueId = 0;\n\n/**\n * Description list for key/value metadata (a styled `<dl>`).\n *\n * Features:\n * - `rows` layout: term on the left, value on the right, with an optional\n * dotted leader line connecting them (the DS2.0 \"spec sheet\" look).\n * - `rows`: a row that is too narrow is shared — term and value each keep\n * their width up to half of the free width (row − 32 px); the longer one\n * wraps in the rest: the term at spaces, the value at spaces or inside an\n * unbroken string (3.26).\n * - `stacked` layout: term above value, for narrow columns.\n * - Per-row value emphasis and optional links.\n * - Semantic markup (`<dl>`/`<dt>`/`<dd>`) for accessibility; `clickable`\n * rows hold a native button (named by term and value) that the keyboard\n * reaches, and the `dl` keeps its term and value pairs.\n * - 3.36: an item's value as a badge (`badge`, `badgeVariant`), and a sum\n * item (`total`) with ledger rules, announced with `totalAriaLabel`.\n *\n * @example\n * ```html\n * <lc-description-list\n * [items]=\"[\n * { term: 'Repository', value: 'example/project', href: '#', emphasis: 'primary' },\n * { term: 'Access', value: 'Token stored · read only' },\n * { term: 'Status', value: 'Maintained', emphasis: 'strong' }\n * ]\"\n * [leaders]=\"true\" />\n * ```\n */\n@Component({\n selector: 'lc-description-list',\n standalone: true,\n imports: [BadgeComponent],\n templateUrl: './description-list.component.html',\n styleUrls: ['./description-list.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DescriptionListComponent {\n /** Rows to render. */\n readonly items = input.required<readonly DescriptionListItem[]>();\n\n /**\n * Row layout.\n * - rows: term left / value right (default)\n * - stacked: term above value\n * @default 'rows'\n */\n readonly layout = input<DescriptionListLayout>('rows');\n\n /**\n * Draw a dotted leader line between term and value. Only applies to the\n * `rows` layout.\n * @default false\n */\n readonly leaders = input<boolean>(false);\n\n /** Density of the rows. @default 'md' */\n readonly size = input<DescriptionListSize>('md');\n\n /**\n * Per-row separator style for the `rows` layout. Defaults to `line`, which is\n * identical to the previous behavior. Orthogonal to `leaders`.\n * @default 'line'\n */\n readonly separator = input<DescriptionListSeparator>('line');\n\n /**\n * Whether rows are interactive. When set, each row holds a native button,\n * named by its term and value, that Tab reaches; Enter, Space and a click\n * anywhere on the row emit `itemClick`. The `dl` keeps its term and value\n * pairs. Set this whenever you handle `itemClick`.\n * @default false\n */\n readonly clickable = input<boolean>(false);\n\n /**\n * Read before the term of a `total` item and not shown (3.36, app-shell\n * row 2): „Summe“ makes a screen reader read „Summe, Gesamtkosten Ist,\n * 522.530,00 €“. Empty adds nothing.\n * @default ''\n */\n readonly totalAriaLabel = input<string>('');\n\n /** Emitted when a row is clicked (or activated via keyboard when `clickable`). */\n readonly itemClick = output<DescriptionListItem>();\n\n /** The visually hidden start of a total's term: „Summe, “ (3.36). */\n protected readonly totalPrefix = computed(() => {\n const label = this.totalAriaLabel().trim();\n return label ? `${label}, ` : '';\n });\n\n /**\n * Whether a badge item also shows its `value` as text (3.36, D-2): not when\n * it is empty or the badge's word.\n */\n protected badgeShowsValue(item: DescriptionListItem): boolean {\n const value = (item.value ?? '').trim();\n return value !== '' && value.toLowerCase() !== (item.badge ?? '').trim().toLowerCase();\n }\n\n /** Generated id prefix, taken once per instance, so later ids don't shift. */\n private readonly uid = `lc-dl-${nextUniqueId++}`;\n\n /** Id of row `index`'s term (only rendered when `clickable`). */\n protected termId(index: number): string {\n return `${this.uid}-t${index}`;\n }\n\n /** Id of row `index`'s value (only rendered when `clickable`). */\n protected valueId(index: number): string {\n return `${this.uid}-v${index}`;\n }\n\n protected readonly hostClasses = computed(() =>\n [\n 'lc-dl',\n `lc-dl--${this.layout()}`,\n `lc-dl--${this.size()}`,\n `lc-dl--sep-${this.separator()}`,\n this.leaders() && this.layout() === 'rows' ? 'lc-dl--leaders' : '',\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n protected valueClass(item: DescriptionListItem): string {\n // A total is always strong (3.36): its `emphasis` is ignored.\n return `lc-dl__value lc-dl__value--${item.total ? 'strong' : (item.emphasis ?? 'default')}`;\n }\n\n /**\n * Keydown dispatched on the row itself (a consumer's test, a script). Keys\n * from the row's button or a nested link are theirs: the button's native\n * activation clicks it, and the click bubbles to the row.\n */\n protected onRowKeydown(event: KeyboardEvent, item: DescriptionListItem): void {\n if (event.target !== event.currentTarget) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.itemClick.emit(item);\n }\n }\n}\n","<dl [class]=\"hostClasses()\">\n @for (item of items(); track item.term; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the row stays a dt/dd group (F-17): its button is the focusable control, and its click and keys bubble here -->\n <div\n class=\"lc-dl__row\"\n [class.lc-dl__row--clickable]=\"clickable()\"\n [class.lc-dl__row--total]=\"!!item.total\"\n (click)=\"itemClick.emit(item)\"\n (keydown)=\"onRowKeydown($event, item)\"\n >\n <!-- 3.37 (request 057, regeln row 1, D-4): the &ngsp; spaces put word breaks into the text (textContent, names, copy); in the flex row they render nothing. -->\n <dt class=\"lc-dl__term\" [attr.id]=\"clickable() ? termId(i) : null\">@if (item.total && totalPrefix()) {<span class=\"lc-dl__sr-only\">{{ totalPrefix() }}</span>&ngsp;}{{ item.term }}</dt>&ngsp;<span class=\"lc-dl__leader\" aria-hidden=\"true\"></span>&ngsp;<dd [class]=\"valueClass(item)\" [attr.id]=\"clickable() ? valueId(i) : null\">\n @if (item.badge) {\n <!-- 3.36: the value as a badge; another value stays as text before it (D-2). -->\n @if (badgeShowsValue(item)) {\n @if (item.href) {\n <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n } @else if (item.datetime) {\n <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n } @else {\n <span class=\"lc-dl__badge-value\">{{ item.value }}</span>\n }\n }\n <lc-badge\n class=\"lc-dl__badge\"\n [class.lc-dl__badge--after-value]=\"badgeShowsValue(item)\"\n [size]=\"size() === 'sm' ? 'xs' : 'sm'\"\n [rounded]=\"true\"\n [variant]=\"item.badgeVariant ?? 'default'\"\n >&ngsp;{{ item.badge }}</lc-badge\n >\n } @else if (item.href) {\n <a class=\"lc-dl__link\" [href]=\"item.href\">{{ item.value }}</a>\n } @else if (item.datetime) {\n <time [attr.datetime]=\"item.datetime\">{{ item.value }}</time>\n } @else {\n {{ item.value }}\n }\n @if (item.valueSuffix) {\n @if (item.badge || item.href || item.datetime) {\n <!-- After a link, a time or a badge the suffix had no space before it; this one renders 0 px wide. -->\n <span class=\"lc-dl__sep\">&ngsp;</span>\n }\n <span class=\"lc-dl__value-suffix\">{{ item.valueSuffix }}</span>\n }\n @if (clickable()) {\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- named by aria-labelledby (the row's term and value); text inside would repeat the value -->\n <button\n type=\"button\"\n class=\"lc-dl__action\"\n [attr.aria-labelledby]=\"termId(i) + ' ' + valueId(i)\"\n ></button>\n }\n </dd>\n </div>&ngsp;\n }\n</dl>\n"],"mappings":";;;AA8EA,IAAI,eAAe;AAuCnB,IAAa,2BAAb,MAAa,yBAAwB;CAE1B,QAAQ,MAAM,SAA0C,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAQxD,SAAS,MAA6B,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAO7C,UAAU,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG/B,OAAO,MAA2B,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOvC,YAAY,MAAgC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CASnD,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAQjC,iBAAiB,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAGlC,YAAY,OAAM;CAGR,cAAc,eAAc;EAC7C,MAAM,QAAQ,KAAK,eAAc,CAAE,CAAC,KAAI;EACxC,OAAO,QAAQ,GAAG,MAAK,MAAO;CAChC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAMQ,gBAAgB,MAAyB;EACjD,MAAM,SAAS,KAAK,SAAS,GAAA,CAAI,KAAI;EACrC,OAAO,UAAU,MAAM,MAAM,YAAW,OAAQ,KAAK,SAAS,GAAA,CAAI,KAAI,CAAE,CAAC,YAAW;CACtF;CAGiB,MAAM,SAAS;CAGtB,OAAO,OAAa;EAC5B,OAAO,GAAG,KAAK,IAAG,IAAK;CACzB;CAGU,QAAQ,OAAa;EAC7B,OAAO,GAAG,KAAK,IAAG,IAAK;CACzB;CAEmB,cAAc,eAC/B;EACE;EACA,UAAU,KAAK,OAAM;EACrB,UAAU,KAAK,KAAI;EACnB,cAAc,KAAK,UAAS;EAC5B,KAAK,QAAO,KAAM,KAAK,OAAM,MAAO,SAAS,mBAAmB;CACjE,CAAA,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACZ,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAES,WAAW,MAAyB;EAE5C,OAAO,8BAA8B,KAAK,QAAQ,WAAY,KAAK,YAAY;CACjF;CAOU,aAAa,OAAsB,MAAyB;EACpE,IAAI,MAAM,WAAW,MAAM,eAAe;EAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAc;GACpB,KAAK,UAAU,KAAK,IAAI;EAC1B;CACF;CAzGW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAwB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAxB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAwB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,YAAA;EAAA,UAAA;EAAA,UCrHrC;EAyDA,QAAA,CAAA,o2HAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDuDY;GAAc,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKb,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAwB,YAAA,CAAA;EARpC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAqB,YACnB;GAAI,SACP,CAAC,cAAc;GAAC,iBAGR,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,o2HAAA;EAAA,CAAA"}
|
|
@@ -10,7 +10,8 @@ import { ICON_BARS_3, ICON_CHEVRON_DOWN, ICON_LOGOUT, ICON_MOON, ICON_SUN, ICON_
|
|
|
10
10
|
import { AvatarComponent, ɵavatarInitials } from "@lifecorner/angular-ui-kit/avatar";
|
|
11
11
|
import { MenuComponent } from "@lifecorner/angular-ui-kit/menu";
|
|
12
12
|
import { ThemeService } from "@lifecorner/angular-ui-kit/theme";
|
|
13
|
-
import {
|
|
13
|
+
import { BadgeComponent } from "@lifecorner/angular-ui-kit/badge";
|
|
14
|
+
import { containsWords, labelWords, nameWithText } from "@lifecorner/angular-ui-kit/internal/a11y";
|
|
14
15
|
var HeaderComponent = class HeaderComponent {
|
|
15
16
|
theme = input("auto", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
|
|
16
17
|
logo = input("", ...ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []);
|
|
@@ -40,6 +41,7 @@ var HeaderComponent = class HeaderComponent {
|
|
|
40
41
|
contextName = input("", ...ngDevMode ? [{ debugName: "contextName" }] : /* istanbul ignore next */ []);
|
|
41
42
|
contextLabel = input("", ...ngDevMode ? [{ debugName: "contextLabel" }] : /* istanbul ignore next */ []);
|
|
42
43
|
contextPlacement = input("inline", ...ngDevMode ? [{ debugName: "contextPlacement" }] : /* istanbul ignore next */ []);
|
|
44
|
+
contextBadge = input(void 0, ...ngDevMode ? [{ debugName: "contextBadge" }] : /* istanbul ignore next */ []);
|
|
43
45
|
menuSize = input("sm", ...ngDevMode ? [{ debugName: "menuSize" }] : /* istanbul ignore next */ []);
|
|
44
46
|
showProfileMenuItem = input(true, ...ngDevMode ? [{ debugName: "showProfileMenuItem" }] : /* istanbul ignore next */ []);
|
|
45
47
|
showUserMenu = input(true, ...ngDevMode ? [{ debugName: "showUserMenu" }] : /* istanbul ignore next */ []);
|
|
@@ -61,6 +63,7 @@ var HeaderComponent = class HeaderComponent {
|
|
|
61
63
|
profileClick = output();
|
|
62
64
|
contextClick = output();
|
|
63
65
|
injector = inject(Injector);
|
|
66
|
+
hostElement = inject(ElementRef);
|
|
64
67
|
themeServiceInstance = null;
|
|
65
68
|
get themeService() {
|
|
66
69
|
return this.themeServiceInstance ??= this.injector.get(ThemeService);
|
|
@@ -91,7 +94,12 @@ var HeaderComponent = class HeaderComponent {
|
|
|
91
94
|
if (label.trim() === "") return initials;
|
|
92
95
|
return `${label}, ${initials}`;
|
|
93
96
|
}, ...ngDevMode ? [{ debugName: "avatarTriggerAriaLabel" }] : /* istanbul ignore next */ []);
|
|
94
|
-
contextButtonAriaLabel = computed(() =>
|
|
97
|
+
contextButtonAriaLabel = computed(() => {
|
|
98
|
+
const name = nameWithText(this.contextAriaLabel(), [this.contextLabel(), this.contextName()].filter(Boolean).join(" "));
|
|
99
|
+
const badge = this.contextBadge()?.label.replace(/\s+/g, " ").trim() ?? "";
|
|
100
|
+
if (!badge || containsWords(labelWords(name), labelWords(badge))) return name;
|
|
101
|
+
return name ? `${name}, ${badge}` : badge;
|
|
102
|
+
}, ...ngDevMode ? [{ debugName: "contextButtonAriaLabel" }] : /* istanbul ignore next */ []);
|
|
95
103
|
contextBelow = computed(() => this.contextPlacement() === "below" && !!this.contextName(), ...ngDevMode ? [{ debugName: "contextBelow" }] : /* istanbul ignore next */ []);
|
|
96
104
|
menuItems = computed(() => {
|
|
97
105
|
const items = [];
|
|
@@ -127,7 +135,8 @@ var HeaderComponent = class HeaderComponent {
|
|
|
127
135
|
}, { injector: this.injector });
|
|
128
136
|
}
|
|
129
137
|
onHamburgerClick() {
|
|
130
|
-
this.
|
|
138
|
+
const host = this.hamburger()?.nativeElement;
|
|
139
|
+
this.hamburgerClick.emit(host?.querySelector("button") ?? host ?? this.hostElement.nativeElement);
|
|
131
140
|
}
|
|
132
141
|
onThemeButtonClick() {
|
|
133
142
|
if (this.autoToggleTheme()) this.themeService.toggleTheme();
|
|
@@ -356,6 +365,13 @@ var HeaderComponent = class HeaderComponent {
|
|
|
356
365
|
isRequired: false,
|
|
357
366
|
transformFunction: null
|
|
358
367
|
},
|
|
368
|
+
contextBadge: {
|
|
369
|
+
classPropertyName: "contextBadge",
|
|
370
|
+
publicName: "contextBadge",
|
|
371
|
+
isSignal: true,
|
|
372
|
+
isRequired: false,
|
|
373
|
+
transformFunction: null
|
|
374
|
+
},
|
|
359
375
|
menuSize: {
|
|
360
376
|
classPropertyName: "menuSize",
|
|
361
377
|
publicName: "menuSize",
|
|
@@ -485,8 +501,8 @@ var HeaderComponent = class HeaderComponent {
|
|
|
485
501
|
isSignal: true
|
|
486
502
|
}],
|
|
487
503
|
ngImport: i0,
|
|
488
|
-
template: "<header\n class=\"lc-header\"\n [class.lc-header--dark]=\"theme() === 'dark'\"\n [class.lc-header--light]=\"theme() === 'light'\"\n [class.lc-header--size-sm]=\"size() === 'sm'\"\n [class.lc-header--size-md]=\"size() === 'md'\"\n [class.lc-header--size-lg]=\"size() === 'lg'\"\n [class.lc-header--size-xl]=\"size() === 'xl'\"\n [class.lc-header--has-nav]=\"navItems().length > 0\"\n [class.lc-header--static]=\"!sticky()\"\n [class.lc-header--transparent]=\"variant() === 'transparent'\"\n [class.lc-header--context-below]=\"contextBelow()\"\n>\n <!-- Hamburger menu icon (mobile only) -->\n @if (showHamburger()) {\n <lc-button\n #hamburger\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"hamburgerAriaLabel()\"\n (clicked)=\"onHamburgerClick()\"\n class=\"lc-header__hamburger\"\n >\n <lc-icon name=\"bars-3\" size=\"sm\" [decorative]=\"true\" />\n </lc-button>\n }\n\n <!-- Logo (clickable, navigates to home) -->\n <div class=\"lc-header__brand\">\n @if (showLogo()) {\n @if (homeHref()) {\n <!-- Plain link: works without the router and without JavaScript. -->\n <a [href]=\"homeHref()\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n </a>\n } @else {\n <a routerLink=\"/\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n </a>\n }\n }\n\n @if (title()) {\n <div class=\"lc-header__title-group\">\n @switch (titleTag()) {\n @case ('h1') {\n <h1 class=\"lc-header__title\">{{ title() }}</h1>\n }\n @case ('h2') {\n <h2 class=\"lc-header__title\">{{ title() }}</h2>\n }\n @case ('h3') {\n <h3 class=\"lc-header__title\">{{ title() }}</h3>\n }\n @case ('p') {\n <p class=\"lc-header__title\">{{ title() }}</p>\n }\n @case ('div') {\n <div class=\"lc-header__title\">{{ title() }}</div>\n }\n @default {\n <span class=\"lc-header__title\">{{ title() }}</span>\n }\n }\n @if (subtitle()) {\n <span class=\"lc-header__subtitle\" [attr.title]=\"subtitle()\">{{ subtitle() }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Main navigation: inline from 1024 px, its own wrapping row below. -->\n @if (navItems().length > 0) {\n <nav class=\"lc-header__nav\" [attr.aria-label]=\"navAriaLabel()\">\n <ul class=\"lc-header__nav-list\">\n @for (item of navItems(); track $index) {\n <li class=\"lc-header__nav-item\">\n <a\n class=\"lc-header__nav-link\"\n [href]=\"item.href\"\n [attr.aria-current]=\"item.current ? 'page' : null\"\n >{{ item.label }}</a>\n </li>\n }\n </ul>\n </nav>\n }\n\n <!-- Zero-width spacer on the brand's row: keeps 3.10's two gaps before the end\n group and the first row's height; grows in a has-nav header from 1024 px. -->\n <div class=\"lc-header__spacer\"></div>\n\n <!-- End of the bar: the end slot (e.g. a language link), theme toggle, context\n info and account menu as one group. It goes to the end of a second row\n when it doesn't fit beside the brand (AS-31). No role; the DOM order and\n so the focus order stay brand → nav → end. -->\n <div class=\"lc-header__end\">\n <ng-content select=\"[slot='end']\" />\n\n <!-- Theme toggle button -->\n @if (showThemeButton()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"themeService.isDark() ? themeToLightAriaLabel() : themeToDarkAriaLabel()\"\n (clicked)=\"onThemeButtonClick()\"\n class=\"lc-header__theme-toggle\"\n >\n <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" [decorative]=\"true\" />\n </lc-button>\n }\n\n <!-- Context info (e.g. tenant, organization, project) -->\n @if (contextName()) {\n <button\n #contextButton\n type=\"button\"\n class=\"lc-header__context-info\"\n [attr.aria-label]=\"contextButtonAriaLabel()\"\n (click)=\"contextClick.emit()\"\n >\n <!-- A real space between label and name: the visible text reads\n \"Tenant Acme Corp\", not \"TenantAcme Corp\" (WCAG 2.5.3). The\n tooltip sits on the name, so it is not a description of the button. -->\n @if (contextLabel()) {\n <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>&ngsp;\n }\n <span class=\"lc-header__context-name\" [attr.title]=\"contextName()\">{{ contextName() }}</span>\n </button>\n }\n\n <!-- User profile menu -->\n @if (showUserMenu()) {\n <lc-menu\n [items]=\"menuItems()\"\n [isOpen]=\"isDropdownOpen()\"\n position=\"bottom-right\"\n minWidth=\"min(220px, calc(100vw - 2rem))\"\n maxWidth=\"min(18rem, calc(100vw - 2rem))\"\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\n [name]=\"userName()\"\n [src]=\"userAvatarSrc() || undefined\"\n [color]=\"userAvatarColor()\"\n [fallback]=\"userAvatarFallback()\"\n size=\"md\"\n />\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 @if (userMenuTrigger() === 'avatar') {\n <button\n trigger\n class=\"lc-header__profile-trigger lc-header__profile-trigger--avatar\"\n type=\"button\"\n [attr.aria-label]=\"avatarTriggerAriaLabel()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-avatar\n [name]=\"userName()\"\n [src]=\"userAvatarSrc() || undefined\"\n [color]=\"userAvatarColor()\"\n [fallback]=\"userAvatarFallback()\"\n [decorative]=\"true\"\n size=\"md\"\n />\n </button>\n } @else {\n <button\n trigger\n class=\"lc-header__profile-trigger\"\n type=\"button\"\n [attr.aria-label]=\"userMenuAriaLabel()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-icon name=\"user\" size=\"sm\" [decorative]=\"true\" />\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </lc-menu>\n }\n </div>\n</header>\n\n<ng-template #brandLogo>\n <lc-logo\n [variant]=\"logo() ? 'full' : 'emblem'\"\n [size]=\"logoSize()\"\n [clickable]=\"false\"\n [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n [src]=\"logoSrc()\"\n [emblemSrc]=\"logoEmblemSrc()\"\n [darkSrc]=\"logoDarkSrc()\"\n [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n [alt]=\"logoAlt() || title() || 'Logo'\"\n />\n</ng-template>\n",
|
|
489
|
-
styles: [".lc-header{--lc-header-bg: var(--color-surface);--lc-header-fg: var(--color-text-primary);--lc-header-fg-secondary: var(--color-text-secondary);--lc-header-border: var(--color-border);--lc-header-hover-bg: var(--color-surface-hover);--lc-header-trigger-border: var(--color-border);--lc-header-trigger-fg: var(--color-text-secondary);--lc-header-padding-x: var(--lc-density-padding-lg, var(--spacing-6));display:flex;align-items:center;gap:var(--lc-density-gap-md, var(--spacing-4));flex-wrap:wrap;row-gap:0;padding:0 var(--lc-header-padding-x);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);min-height:64px;position:sticky;top:0;z-index:1000}.lc-header.lc-header--size-sm{min-height:56px;--lc-header-row-height: 56px}.lc-header.lc-header--size-md{min-height:64px;--lc-header-row-height: 64px}.lc-header.lc-header--size-lg{min-height:80px;--lc-header-row-height: 80px}.lc-header.lc-header--size-xl{min-height:112px;--lc-header-row-height: 112px}@media(max-width:768px){.lc-header{--lc-header-padding-x: var(--lc-density-padding-md, var(--spacing-4))}}.lc-header--static{position:relative}.lc-header__nav{display:flex;align-items:center;min-width:0}.lc-header__nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--lc-header-nav-gap, var(--spacing-1));margin:0;padding:0;list-style:none}.lc-header__nav-item{display:flex}.lc-header__nav-link{display:inline-flex;align-items:center;min-height:var(--size-min-touch-height, 2.75rem);padding:0 var(--spacing-3);border-radius:var(--border-radius-md);color:var(--lc-header-fg-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);text-decoration:none;transition:color .15s ease,background-color .15s ease}.lc-header__nav-link:hover{color:var(--lc-header-fg);background-color:var(--lc-header-hover-bg)}.lc-header__nav-link:focus-visible{outline:2px solid var(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}.lc-header__nav-link[aria-current=page]{color:var(--lc-header-fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}@media(max-width:1023.98px){.lc-header--has-nav .lc-header__nav{order:1;flex-basis:100%;margin-left:calc(-1 * var(--spacing-3))}}@media(min-width:1024px){.lc-header--has-nav .lc-header__brand{flex:0 1 auto;width:auto;max-width:none}.lc-header--has-nav .lc-header__title-group{flex:0 1 auto}.lc-header--has-nav .lc-header__title{margin-inline-end:0}.lc-header--has-nav .lc-header__subtitle{contain:none}.lc-header--has-nav .lc-header__spacer{flex:1}}.lc-header--dark{--lc-header-bg: #070e15;--lc-header-fg: #f1f6f8;--lc-header-fg-secondary: #c4d2d9;--lc-header-border: rgba(255, 255, 255, .08);--lc-header-hover-bg: rgba(132, 199, 212, .06);--lc-header-trigger-border: rgba(255, 255, 255, .08);--lc-header-trigger-fg: #c4d2d9}.lc-header--light{--lc-header-bg: #ffffff;--lc-header-fg: #111827;--lc-header-fg-secondary: #4b5563;--lc-header-border: #e5e7eb;--lc-header-hover-bg: #f3f4f6;--lc-header-trigger-border: #e5e7eb;--lc-header-trigger-fg: #374151;--_lc-header-ring: #208497}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;margin-left:calc(var(--lc-header-hamburger-slot, 56px) / 2 - var(--lc-header-padding-x) - 12px);margin-right:calc(var(--lc-header-hamburger-gap, .5rem) - var(--lc-density-gap-md, var(--spacing-4)));color:var(--lc-header-trigger-fg)}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-3);width:min-content;max-width:calc(100% - var(--lc-density-gap-md, var(--spacing-4)));min-width:0}.lc-header--has-nav .lc-header__brand{min-height:var(--lc-header-row-height, 64px)}.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(--_lc-header-ring, var(--color-primary-500));outline-offset:4px;border-radius:var(--border-radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;margin-inline-end:calc(-1 * var(--lc-density-gap-md, var(--spacing-4)));line-height:1.2;overflow-wrap:break-word;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{display:block;contain:inline-size;max-width:var(--lc-header-subtitle-max-width, 100%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;line-height:1.3;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:var(--lc-header-subtitle-transform, none);transition:color .2s ease}@media(min-width:1024px){.lc-header__subtitle{font-size:var(--font-size-sm, .875rem)}}.lc-header__spacer{flex:0 0 0;min-height:calc(var(--lc-header-row-height, 64px) - var(--_lc-header-border-width, 1px))}.lc-header__end{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;justify-content:flex-end;gap:0 var(--lc-density-gap-md, var(--spacing-4));margin-inline-start:auto;min-width:0;max-width:100%}.lc-header__end:empty{display:none}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--border-radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}@media(max-width:640px){.lc-header--context-below{justify-content:flex-end}.lc-header--context-below .lc-header__end{display:contents}.lc-header--context-below .lc-header__context-info{display:flex;order:2;flex:1 0 calc(100% + 2 * var(--spacing-3));margin:0 calc(-1 * var(--spacing-3)) var(--spacing-2);max-width:none;min-height:var(--size-min-touch-height, 2.75rem);align-items:flex-start;justify-content:center;text-align:start}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--border-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(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}.lc-header__profile-trigger--avatar{justify-content:center;width:3rem;height:3rem;min-height:3rem;padding:0;border:0;flex-shrink:0}.lc-header__profile-trigger--avatar:hover{border-color:transparent}.lc-header.lc-header--transparent{--lc-header-bg: transparent;--lc-header-border: transparent;--_lc-header-border-width: 0px;border-bottom-width:0}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4));border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);overflow-wrap:break-word;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow-wrap:anywhere;line-height:1.4}\n"],
|
|
504
|
+
template: "<header\n class=\"lc-header\"\n [class.lc-header--dark]=\"theme() === 'dark'\"\n [class.lc-header--light]=\"theme() === 'light'\"\n [class.lc-header--size-sm]=\"size() === 'sm'\"\n [class.lc-header--size-md]=\"size() === 'md'\"\n [class.lc-header--size-lg]=\"size() === 'lg'\"\n [class.lc-header--size-xl]=\"size() === 'xl'\"\n [class.lc-header--has-nav]=\"navItems().length > 0\"\n [class.lc-header--static]=\"!sticky()\"\n [class.lc-header--transparent]=\"variant() === 'transparent'\"\n [class.lc-header--context-below]=\"contextBelow()\"\n>\n <!-- Hamburger menu icon (mobile only) -->\n @if (showHamburger()) {\n <lc-button\n #hamburger\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"hamburgerAriaLabel()\"\n (clicked)=\"onHamburgerClick()\"\n class=\"lc-header__hamburger\"\n >\n <lc-icon name=\"bars-3\" size=\"sm\" [decorative]=\"true\" />\n </lc-button>\n }\n\n <!-- Logo (clickable, navigates to home) -->\n <div class=\"lc-header__brand\">\n @if (showLogo()) {\n @if (homeHref()) {\n <!-- Plain link: works without the router and without JavaScript. -->\n <a [href]=\"homeHref()\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n </a>\n } @else {\n <a routerLink=\"/\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n </a>\n }\n }\n\n @if (title()) {\n <div class=\"lc-header__title-group\">\n @switch (titleTag()) {\n @case ('h1') {\n <h1 class=\"lc-header__title\">{{ title() }}</h1>\n }\n @case ('h2') {\n <h2 class=\"lc-header__title\">{{ title() }}</h2>\n }\n @case ('h3') {\n <h3 class=\"lc-header__title\">{{ title() }}</h3>\n }\n @case ('p') {\n <p class=\"lc-header__title\">{{ title() }}</p>\n }\n @case ('div') {\n <div class=\"lc-header__title\">{{ title() }}</div>\n }\n @default {\n <span class=\"lc-header__title\">{{ title() }}</span>\n }\n }\n @if (subtitle()) {\n <span class=\"lc-header__subtitle\" [attr.title]=\"subtitle()\">{{ subtitle() }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Main navigation: inline from 1024 px, its own wrapping row below. -->\n @if (navItems().length > 0) {\n <nav class=\"lc-header__nav\" [attr.aria-label]=\"navAriaLabel()\">\n <ul class=\"lc-header__nav-list\">\n @for (item of navItems(); track $index) {\n <li class=\"lc-header__nav-item\">\n <a\n class=\"lc-header__nav-link\"\n [href]=\"item.href\"\n [attr.aria-current]=\"item.current ? 'page' : null\"\n >{{ item.label }}</a>\n </li>\n }\n </ul>\n </nav>\n }\n\n <!-- Zero-width spacer on the brand's row: keeps 3.10's two gaps before the end\n group and the first row's height; grows in a has-nav header from 1024 px. -->\n <div class=\"lc-header__spacer\"></div>\n\n <!-- End of the bar: the end slot (e.g. a language link), theme toggle, context\n info and account menu as one group. It goes to the end of a second row\n when it doesn't fit beside the brand (AS-31). No role; the DOM order and\n so the focus order stay brand → nav → end. -->\n <div class=\"lc-header__end\">\n <ng-content select=\"[slot='end']\" />\n\n <!-- Theme toggle button -->\n @if (showThemeButton()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"themeService.isDark() ? themeToLightAriaLabel() : themeToDarkAriaLabel()\"\n (clicked)=\"onThemeButtonClick()\"\n class=\"lc-header__theme-toggle\"\n >\n <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" [decorative]=\"true\" />\n </lc-button>\n }\n\n <!-- Context info (e.g. tenant, organization, project) -->\n @if (contextName()) {\n <button\n #contextButton\n type=\"button\"\n class=\"lc-header__context-info\"\n [class.lc-header__context-info--badge]=\"!!contextBadge()\"\n [attr.aria-label]=\"contextButtonAriaLabel()\"\n (click)=\"contextClick.emit()\"\n >\n <!-- A real space between label and name: the visible text reads\n \"Tenant Acme Corp\", not \"TenantAcme Corp\" (WCAG 2.5.3). The\n tooltip sits on the name, so it is not a description of the button. -->\n @if (contextLabel()) {\n <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>&ngsp;\n }\n @if (contextBadge(); as badge) {\n <!-- 3.36: name and state badge on one row; the name keeps its ellipsis. -->\n <span class=\"lc-header__context-row\">\n <span class=\"lc-header__context-name\" [attr.title]=\"contextName()\">{{ contextName() }}</span>&ngsp;\n <lc-badge class=\"lc-header__context-badge\" size=\"sm\" [rounded]=\"true\" [variant]=\"badge.variant ?? 'default'\">{{ badge.label }}</lc-badge>\n </span>\n } @else {\n <span class=\"lc-header__context-name\" [attr.title]=\"contextName()\">{{ contextName() }}</span>\n }\n </button>\n }\n\n <!-- User profile menu -->\n @if (showUserMenu()) {\n <lc-menu\n [items]=\"menuItems()\"\n [isOpen]=\"isDropdownOpen()\"\n position=\"bottom-right\"\n minWidth=\"min(220px, calc(100vw - 2rem))\"\n maxWidth=\"min(18rem, calc(100vw - 2rem))\"\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\n [name]=\"userName()\"\n [src]=\"userAvatarSrc() || undefined\"\n [color]=\"userAvatarColor()\"\n [fallback]=\"userAvatarFallback()\"\n size=\"md\"\n />\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 @if (userMenuTrigger() === 'avatar') {\n <button\n trigger\n class=\"lc-header__profile-trigger lc-header__profile-trigger--avatar\"\n type=\"button\"\n [attr.aria-label]=\"avatarTriggerAriaLabel()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-avatar\n [name]=\"userName()\"\n [src]=\"userAvatarSrc() || undefined\"\n [color]=\"userAvatarColor()\"\n [fallback]=\"userAvatarFallback()\"\n [decorative]=\"true\"\n size=\"md\"\n />\n </button>\n } @else {\n <button\n trigger\n class=\"lc-header__profile-trigger\"\n type=\"button\"\n [attr.aria-label]=\"userMenuAriaLabel()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-icon name=\"user\" size=\"sm\" [decorative]=\"true\" />\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </lc-menu>\n }\n </div>\n</header>\n\n<ng-template #brandLogo>\n <lc-logo\n [variant]=\"logo() ? 'full' : 'emblem'\"\n [size]=\"logoSize()\"\n [clickable]=\"false\"\n [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n [src]=\"logoSrc()\"\n [emblemSrc]=\"logoEmblemSrc()\"\n [darkSrc]=\"logoDarkSrc()\"\n [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n [alt]=\"logoAlt() || title() || 'Logo'\"\n />\n</ng-template>\n",
|
|
505
|
+
styles: [".lc-header{--lc-header-bg: var(--color-surface);--lc-header-fg: var(--color-text-primary);--lc-header-fg-secondary: var(--color-text-secondary);--lc-header-border: var(--color-border);--lc-header-hover-bg: var(--color-surface-hover);--lc-header-trigger-border: var(--color-border);--lc-header-trigger-fg: var(--color-text-secondary);--lc-header-padding-x: var(--lc-density-padding-lg, var(--spacing-6));display:flex;align-items:center;gap:var(--lc-density-gap-md, var(--spacing-4));flex-wrap:wrap;row-gap:0;padding:0 var(--lc-header-padding-x);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);min-height:64px;position:sticky;top:0;z-index:1000}.lc-header.lc-header--size-sm{min-height:56px;--lc-header-row-height: 56px}.lc-header.lc-header--size-md{min-height:64px;--lc-header-row-height: 64px}.lc-header.lc-header--size-lg{min-height:80px;--lc-header-row-height: 80px}.lc-header.lc-header--size-xl{min-height:112px;--lc-header-row-height: 112px}@media(max-width:768px){.lc-header{--lc-header-padding-x: var(--lc-density-padding-md, var(--spacing-4))}}.lc-header--static{position:relative}.lc-header__nav{display:flex;align-items:center;min-width:0}.lc-header__nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--lc-header-nav-gap, var(--spacing-1));margin:0;padding:0;list-style:none}.lc-header__nav-item{display:flex}.lc-header__nav-link{display:inline-flex;align-items:center;min-height:var(--size-min-touch-height, 2.75rem);padding:0 var(--spacing-3);border-radius:var(--border-radius-md);color:var(--lc-header-fg-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);text-decoration:none;transition:color .15s ease,background-color .15s ease}.lc-header__nav-link:hover{color:var(--lc-header-fg);background-color:var(--lc-header-hover-bg)}.lc-header__nav-link:focus-visible{outline:2px solid var(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}.lc-header__nav-link[aria-current=page]{color:var(--lc-header-fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}@media(max-width:1023.98px){.lc-header--has-nav .lc-header__nav{order:1;flex-basis:100%;margin-left:calc(-1 * var(--spacing-3))}}@media(min-width:1024px){.lc-header--has-nav .lc-header__brand{flex:0 1 auto;width:auto;max-width:none}.lc-header--has-nav .lc-header__title-group{flex:0 1 auto}.lc-header--has-nav .lc-header__title{margin-inline-end:0}.lc-header--has-nav .lc-header__subtitle{contain:none}.lc-header--has-nav .lc-header__spacer{flex:1}}.lc-header--dark{--lc-header-bg: #070e15;--lc-header-fg: #f1f6f8;--lc-header-fg-secondary: #c4d2d9;--lc-header-border: rgba(255, 255, 255, .08);--lc-header-hover-bg: rgba(132, 199, 212, .06);--lc-header-trigger-border: rgba(255, 255, 255, .08);--lc-header-trigger-fg: #c4d2d9}.lc-header--light{--lc-header-bg: #ffffff;--lc-header-fg: #111827;--lc-header-fg-secondary: #4b5563;--lc-header-border: #e5e7eb;--lc-header-hover-bg: #f3f4f6;--lc-header-trigger-border: #e5e7eb;--lc-header-trigger-fg: #374151;--_lc-header-ring: #208497}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;margin-left:calc(var(--lc-header-hamburger-slot, 56px) / 2 - var(--lc-header-padding-x) - 12px);margin-right:calc(var(--lc-header-hamburger-gap, .5rem) - var(--lc-density-gap-md, var(--spacing-4)));color:var(--lc-header-trigger-fg)}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-3);width:min-content;max-width:calc(100% - var(--lc-density-gap-md, var(--spacing-4)));min-width:0}.lc-header--has-nav .lc-header__brand{min-height:var(--lc-header-row-height, 64px)}.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(--_lc-header-ring, var(--color-primary-500));outline-offset:4px;border-radius:var(--border-radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;margin-inline-end:calc(-1 * var(--lc-density-gap-md, var(--spacing-4)));line-height:1.2;overflow-wrap:break-word;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{display:block;contain:inline-size;max-width:var(--lc-header-subtitle-max-width, 100%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;line-height:1.3;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:var(--lc-header-subtitle-transform, none);transition:color .2s ease}@media(min-width:1024px){.lc-header__subtitle{font-size:var(--font-size-sm, .875rem)}}.lc-header__spacer{flex:0 0 0;min-height:calc(var(--lc-header-row-height, 64px) - var(--_lc-header-border-width, 1px))}.lc-header__end{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;justify-content:flex-end;gap:0 var(--lc-density-gap-md, var(--spacing-4));margin-inline-start:auto;min-width:0;max-width:100%}.lc-header__end:empty{display:none}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--border-radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-info--badge{max-width:340px}.lc-header__context-row{display:flex;align-items:center;gap:var(--spacing-1-5);min-width:0;max-width:100%}.lc-header__context-row .lc-header__context-name{flex:0 1 auto;min-width:0}.lc-header__context-badge{display:inline-flex;flex-shrink:0;margin-block:calc(.65 * var(--font-size-sm) - .75rem)}@media(max-width:640px){.lc-header--context-below{justify-content:flex-end}.lc-header--context-below .lc-header__end{display:contents}.lc-header--context-below .lc-header__context-info{display:flex;order:2;flex:1 0 calc(100% + 2 * var(--spacing-3));margin:0 calc(-1 * var(--spacing-3)) var(--spacing-2);max-width:none;min-height:var(--size-min-touch-height, 2.75rem);align-items:flex-start;justify-content:center;text-align:start}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--border-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(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}.lc-header__profile-trigger--avatar{justify-content:center;width:3rem;height:3rem;min-height:3rem;padding:0;border:0;flex-shrink:0}.lc-header__profile-trigger--avatar:hover{border-color:transparent}.lc-header.lc-header--transparent{--lc-header-bg: transparent;--lc-header-border: transparent;--_lc-header-border-width: 0px;border-bottom-width:0}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4));border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);overflow-wrap:break-word;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow-wrap:anywhere;line-height:1.4}\n"],
|
|
490
506
|
dependencies: [
|
|
491
507
|
{
|
|
492
508
|
kind: "directive",
|
|
@@ -611,6 +627,18 @@ var HeaderComponent = class HeaderComponent {
|
|
|
611
627
|
"maxWidth"
|
|
612
628
|
],
|
|
613
629
|
outputs: ["itemClick", "closed"]
|
|
630
|
+
},
|
|
631
|
+
{
|
|
632
|
+
kind: "component",
|
|
633
|
+
type: BadgeComponent,
|
|
634
|
+
selector: "lc-badge",
|
|
635
|
+
inputs: [
|
|
636
|
+
"variant",
|
|
637
|
+
"size",
|
|
638
|
+
"rounded",
|
|
639
|
+
"dot",
|
|
640
|
+
"wrap"
|
|
641
|
+
]
|
|
614
642
|
}
|
|
615
643
|
],
|
|
616
644
|
viewProviders: [ɵprovideKitIcons([
|
|
@@ -642,7 +670,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
642
670
|
LogoComponent,
|
|
643
671
|
IconComponent,
|
|
644
672
|
AvatarComponent,
|
|
645
|
-
MenuComponent
|
|
673
|
+
MenuComponent,
|
|
674
|
+
BadgeComponent
|
|
646
675
|
],
|
|
647
676
|
viewProviders: [ɵprovideKitIcons([
|
|
648
677
|
ICON_BARS_3,
|
|
@@ -655,8 +684,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
655
684
|
encapsulation: ViewEncapsulation.None,
|
|
656
685
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
657
686
|
host: { class: "lc-header-host" },
|
|
658
|
-
template: "<header\n class=\"lc-header\"\n [class.lc-header--dark]=\"theme() === 'dark'\"\n [class.lc-header--light]=\"theme() === 'light'\"\n [class.lc-header--size-sm]=\"size() === 'sm'\"\n [class.lc-header--size-md]=\"size() === 'md'\"\n [class.lc-header--size-lg]=\"size() === 'lg'\"\n [class.lc-header--size-xl]=\"size() === 'xl'\"\n [class.lc-header--has-nav]=\"navItems().length > 0\"\n [class.lc-header--static]=\"!sticky()\"\n [class.lc-header--transparent]=\"variant() === 'transparent'\"\n [class.lc-header--context-below]=\"contextBelow()\"\n>\n <!-- Hamburger menu icon (mobile only) -->\n @if (showHamburger()) {\n <lc-button\n #hamburger\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"hamburgerAriaLabel()\"\n (clicked)=\"onHamburgerClick()\"\n class=\"lc-header__hamburger\"\n >\n <lc-icon name=\"bars-3\" size=\"sm\" [decorative]=\"true\" />\n </lc-button>\n }\n\n <!-- Logo (clickable, navigates to home) -->\n <div class=\"lc-header__brand\">\n @if (showLogo()) {\n @if (homeHref()) {\n <!-- Plain link: works without the router and without JavaScript. -->\n <a [href]=\"homeHref()\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n </a>\n } @else {\n <a routerLink=\"/\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n </a>\n }\n }\n\n @if (title()) {\n <div class=\"lc-header__title-group\">\n @switch (titleTag()) {\n @case ('h1') {\n <h1 class=\"lc-header__title\">{{ title() }}</h1>\n }\n @case ('h2') {\n <h2 class=\"lc-header__title\">{{ title() }}</h2>\n }\n @case ('h3') {\n <h3 class=\"lc-header__title\">{{ title() }}</h3>\n }\n @case ('p') {\n <p class=\"lc-header__title\">{{ title() }}</p>\n }\n @case ('div') {\n <div class=\"lc-header__title\">{{ title() }}</div>\n }\n @default {\n <span class=\"lc-header__title\">{{ title() }}</span>\n }\n }\n @if (subtitle()) {\n <span class=\"lc-header__subtitle\" [attr.title]=\"subtitle()\">{{ subtitle() }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Main navigation: inline from 1024 px, its own wrapping row below. -->\n @if (navItems().length > 0) {\n <nav class=\"lc-header__nav\" [attr.aria-label]=\"navAriaLabel()\">\n <ul class=\"lc-header__nav-list\">\n @for (item of navItems(); track $index) {\n <li class=\"lc-header__nav-item\">\n <a\n class=\"lc-header__nav-link\"\n [href]=\"item.href\"\n [attr.aria-current]=\"item.current ? 'page' : null\"\n >{{ item.label }}</a>\n </li>\n }\n </ul>\n </nav>\n }\n\n <!-- Zero-width spacer on the brand's row: keeps 3.10's two gaps before the end\n group and the first row's height; grows in a has-nav header from 1024 px. -->\n <div class=\"lc-header__spacer\"></div>\n\n <!-- End of the bar: the end slot (e.g. a language link), theme toggle, context\n info and account menu as one group. It goes to the end of a second row\n when it doesn't fit beside the brand (AS-31). No role; the DOM order and\n so the focus order stay brand → nav → end. -->\n <div class=\"lc-header__end\">\n <ng-content select=\"[slot='end']\" />\n\n <!-- Theme toggle button -->\n @if (showThemeButton()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"themeService.isDark() ? themeToLightAriaLabel() : themeToDarkAriaLabel()\"\n (clicked)=\"onThemeButtonClick()\"\n class=\"lc-header__theme-toggle\"\n >\n <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" [decorative]=\"true\" />\n </lc-button>\n }\n\n <!-- Context info (e.g. tenant, organization, project) -->\n @if (contextName()) {\n <button\n #contextButton\n type=\"button\"\n class=\"lc-header__context-info\"\n [attr.aria-label]=\"contextButtonAriaLabel()\"\n (click)=\"contextClick.emit()\"\n >\n <!-- A real space between label and name: the visible text reads\n \"Tenant Acme Corp\", not \"TenantAcme Corp\" (WCAG 2.5.3). The\n tooltip sits on the name, so it is not a description of the button. -->\n @if (contextLabel()) {\n <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>&ngsp;\n }\n <span class=\"lc-header__context-name\" [attr.title]=\"contextName()\">{{ contextName() }}</span>\n </button>\n }\n\n <!-- User profile menu -->\n @if (showUserMenu()) {\n <lc-menu\n [items]=\"menuItems()\"\n [isOpen]=\"isDropdownOpen()\"\n position=\"bottom-right\"\n minWidth=\"min(220px, calc(100vw - 2rem))\"\n maxWidth=\"min(18rem, calc(100vw - 2rem))\"\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\n [name]=\"userName()\"\n [src]=\"userAvatarSrc() || undefined\"\n [color]=\"userAvatarColor()\"\n [fallback]=\"userAvatarFallback()\"\n size=\"md\"\n />\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 @if (userMenuTrigger() === 'avatar') {\n <button\n trigger\n class=\"lc-header__profile-trigger lc-header__profile-trigger--avatar\"\n type=\"button\"\n [attr.aria-label]=\"avatarTriggerAriaLabel()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-avatar\n [name]=\"userName()\"\n [src]=\"userAvatarSrc() || undefined\"\n [color]=\"userAvatarColor()\"\n [fallback]=\"userAvatarFallback()\"\n [decorative]=\"true\"\n size=\"md\"\n />\n </button>\n } @else {\n <button\n trigger\n class=\"lc-header__profile-trigger\"\n type=\"button\"\n [attr.aria-label]=\"userMenuAriaLabel()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-icon name=\"user\" size=\"sm\" [decorative]=\"true\" />\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </lc-menu>\n }\n </div>\n</header>\n\n<ng-template #brandLogo>\n <lc-logo\n [variant]=\"logo() ? 'full' : 'emblem'\"\n [size]=\"logoSize()\"\n [clickable]=\"false\"\n [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n [src]=\"logoSrc()\"\n [emblemSrc]=\"logoEmblemSrc()\"\n [darkSrc]=\"logoDarkSrc()\"\n [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n [alt]=\"logoAlt() || title() || 'Logo'\"\n />\n</ng-template>\n",
|
|
659
|
-
styles: [".lc-header{--lc-header-bg: var(--color-surface);--lc-header-fg: var(--color-text-primary);--lc-header-fg-secondary: var(--color-text-secondary);--lc-header-border: var(--color-border);--lc-header-hover-bg: var(--color-surface-hover);--lc-header-trigger-border: var(--color-border);--lc-header-trigger-fg: var(--color-text-secondary);--lc-header-padding-x: var(--lc-density-padding-lg, var(--spacing-6));display:flex;align-items:center;gap:var(--lc-density-gap-md, var(--spacing-4));flex-wrap:wrap;row-gap:0;padding:0 var(--lc-header-padding-x);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);min-height:64px;position:sticky;top:0;z-index:1000}.lc-header.lc-header--size-sm{min-height:56px;--lc-header-row-height: 56px}.lc-header.lc-header--size-md{min-height:64px;--lc-header-row-height: 64px}.lc-header.lc-header--size-lg{min-height:80px;--lc-header-row-height: 80px}.lc-header.lc-header--size-xl{min-height:112px;--lc-header-row-height: 112px}@media(max-width:768px){.lc-header{--lc-header-padding-x: var(--lc-density-padding-md, var(--spacing-4))}}.lc-header--static{position:relative}.lc-header__nav{display:flex;align-items:center;min-width:0}.lc-header__nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--lc-header-nav-gap, var(--spacing-1));margin:0;padding:0;list-style:none}.lc-header__nav-item{display:flex}.lc-header__nav-link{display:inline-flex;align-items:center;min-height:var(--size-min-touch-height, 2.75rem);padding:0 var(--spacing-3);border-radius:var(--border-radius-md);color:var(--lc-header-fg-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);text-decoration:none;transition:color .15s ease,background-color .15s ease}.lc-header__nav-link:hover{color:var(--lc-header-fg);background-color:var(--lc-header-hover-bg)}.lc-header__nav-link:focus-visible{outline:2px solid var(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}.lc-header__nav-link[aria-current=page]{color:var(--lc-header-fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}@media(max-width:1023.98px){.lc-header--has-nav .lc-header__nav{order:1;flex-basis:100%;margin-left:calc(-1 * var(--spacing-3))}}@media(min-width:1024px){.lc-header--has-nav .lc-header__brand{flex:0 1 auto;width:auto;max-width:none}.lc-header--has-nav .lc-header__title-group{flex:0 1 auto}.lc-header--has-nav .lc-header__title{margin-inline-end:0}.lc-header--has-nav .lc-header__subtitle{contain:none}.lc-header--has-nav .lc-header__spacer{flex:1}}.lc-header--dark{--lc-header-bg: #070e15;--lc-header-fg: #f1f6f8;--lc-header-fg-secondary: #c4d2d9;--lc-header-border: rgba(255, 255, 255, .08);--lc-header-hover-bg: rgba(132, 199, 212, .06);--lc-header-trigger-border: rgba(255, 255, 255, .08);--lc-header-trigger-fg: #c4d2d9}.lc-header--light{--lc-header-bg: #ffffff;--lc-header-fg: #111827;--lc-header-fg-secondary: #4b5563;--lc-header-border: #e5e7eb;--lc-header-hover-bg: #f3f4f6;--lc-header-trigger-border: #e5e7eb;--lc-header-trigger-fg: #374151;--_lc-header-ring: #208497}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;margin-left:calc(var(--lc-header-hamburger-slot, 56px) / 2 - var(--lc-header-padding-x) - 12px);margin-right:calc(var(--lc-header-hamburger-gap, .5rem) - var(--lc-density-gap-md, var(--spacing-4)));color:var(--lc-header-trigger-fg)}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-3);width:min-content;max-width:calc(100% - var(--lc-density-gap-md, var(--spacing-4)));min-width:0}.lc-header--has-nav .lc-header__brand{min-height:var(--lc-header-row-height, 64px)}.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(--_lc-header-ring, var(--color-primary-500));outline-offset:4px;border-radius:var(--border-radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;margin-inline-end:calc(-1 * var(--lc-density-gap-md, var(--spacing-4)));line-height:1.2;overflow-wrap:break-word;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{display:block;contain:inline-size;max-width:var(--lc-header-subtitle-max-width, 100%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;line-height:1.3;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:var(--lc-header-subtitle-transform, none);transition:color .2s ease}@media(min-width:1024px){.lc-header__subtitle{font-size:var(--font-size-sm, .875rem)}}.lc-header__spacer{flex:0 0 0;min-height:calc(var(--lc-header-row-height, 64px) - var(--_lc-header-border-width, 1px))}.lc-header__end{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;justify-content:flex-end;gap:0 var(--lc-density-gap-md, var(--spacing-4));margin-inline-start:auto;min-width:0;max-width:100%}.lc-header__end:empty{display:none}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--border-radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}@media(max-width:640px){.lc-header--context-below{justify-content:flex-end}.lc-header--context-below .lc-header__end{display:contents}.lc-header--context-below .lc-header__context-info{display:flex;order:2;flex:1 0 calc(100% + 2 * var(--spacing-3));margin:0 calc(-1 * var(--spacing-3)) var(--spacing-2);max-width:none;min-height:var(--size-min-touch-height, 2.75rem);align-items:flex-start;justify-content:center;text-align:start}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--border-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(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}.lc-header__profile-trigger--avatar{justify-content:center;width:3rem;height:3rem;min-height:3rem;padding:0;border:0;flex-shrink:0}.lc-header__profile-trigger--avatar:hover{border-color:transparent}.lc-header.lc-header--transparent{--lc-header-bg: transparent;--lc-header-border: transparent;--_lc-header-border-width: 0px;border-bottom-width:0}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4));border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);overflow-wrap:break-word;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow-wrap:anywhere;line-height:1.4}\n"]
|
|
687
|
+
template: "<header\n class=\"lc-header\"\n [class.lc-header--dark]=\"theme() === 'dark'\"\n [class.lc-header--light]=\"theme() === 'light'\"\n [class.lc-header--size-sm]=\"size() === 'sm'\"\n [class.lc-header--size-md]=\"size() === 'md'\"\n [class.lc-header--size-lg]=\"size() === 'lg'\"\n [class.lc-header--size-xl]=\"size() === 'xl'\"\n [class.lc-header--has-nav]=\"navItems().length > 0\"\n [class.lc-header--static]=\"!sticky()\"\n [class.lc-header--transparent]=\"variant() === 'transparent'\"\n [class.lc-header--context-below]=\"contextBelow()\"\n>\n <!-- Hamburger menu icon (mobile only) -->\n @if (showHamburger()) {\n <lc-button\n #hamburger\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"hamburgerAriaLabel()\"\n (clicked)=\"onHamburgerClick()\"\n class=\"lc-header__hamburger\"\n >\n <lc-icon name=\"bars-3\" size=\"sm\" [decorative]=\"true\" />\n </lc-button>\n }\n\n <!-- Logo (clickable, navigates to home) -->\n <div class=\"lc-header__brand\">\n @if (showLogo()) {\n @if (homeHref()) {\n <!-- Plain link: works without the router and without JavaScript. -->\n <a [href]=\"homeHref()\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n </a>\n } @else {\n <a routerLink=\"/\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n </a>\n }\n }\n\n @if (title()) {\n <div class=\"lc-header__title-group\">\n @switch (titleTag()) {\n @case ('h1') {\n <h1 class=\"lc-header__title\">{{ title() }}</h1>\n }\n @case ('h2') {\n <h2 class=\"lc-header__title\">{{ title() }}</h2>\n }\n @case ('h3') {\n <h3 class=\"lc-header__title\">{{ title() }}</h3>\n }\n @case ('p') {\n <p class=\"lc-header__title\">{{ title() }}</p>\n }\n @case ('div') {\n <div class=\"lc-header__title\">{{ title() }}</div>\n }\n @default {\n <span class=\"lc-header__title\">{{ title() }}</span>\n }\n }\n @if (subtitle()) {\n <span class=\"lc-header__subtitle\" [attr.title]=\"subtitle()\">{{ subtitle() }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Main navigation: inline from 1024 px, its own wrapping row below. -->\n @if (navItems().length > 0) {\n <nav class=\"lc-header__nav\" [attr.aria-label]=\"navAriaLabel()\">\n <ul class=\"lc-header__nav-list\">\n @for (item of navItems(); track $index) {\n <li class=\"lc-header__nav-item\">\n <a\n class=\"lc-header__nav-link\"\n [href]=\"item.href\"\n [attr.aria-current]=\"item.current ? 'page' : null\"\n >{{ item.label }}</a>\n </li>\n }\n </ul>\n </nav>\n }\n\n <!-- Zero-width spacer on the brand's row: keeps 3.10's two gaps before the end\n group and the first row's height; grows in a has-nav header from 1024 px. -->\n <div class=\"lc-header__spacer\"></div>\n\n <!-- End of the bar: the end slot (e.g. a language link), theme toggle, context\n info and account menu as one group. It goes to the end of a second row\n when it doesn't fit beside the brand (AS-31). No role; the DOM order and\n so the focus order stay brand → nav → end. -->\n <div class=\"lc-header__end\">\n <ng-content select=\"[slot='end']\" />\n\n <!-- Theme toggle button -->\n @if (showThemeButton()) {\n <lc-button\n variant=\"ghost\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"themeService.isDark() ? themeToLightAriaLabel() : themeToDarkAriaLabel()\"\n (clicked)=\"onThemeButtonClick()\"\n class=\"lc-header__theme-toggle\"\n >\n <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" [decorative]=\"true\" />\n </lc-button>\n }\n\n <!-- Context info (e.g. tenant, organization, project) -->\n @if (contextName()) {\n <button\n #contextButton\n type=\"button\"\n class=\"lc-header__context-info\"\n [class.lc-header__context-info--badge]=\"!!contextBadge()\"\n [attr.aria-label]=\"contextButtonAriaLabel()\"\n (click)=\"contextClick.emit()\"\n >\n <!-- A real space between label and name: the visible text reads\n \"Tenant Acme Corp\", not \"TenantAcme Corp\" (WCAG 2.5.3). The\n tooltip sits on the name, so it is not a description of the button. -->\n @if (contextLabel()) {\n <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>&ngsp;\n }\n @if (contextBadge(); as badge) {\n <!-- 3.36: name and state badge on one row; the name keeps its ellipsis. -->\n <span class=\"lc-header__context-row\">\n <span class=\"lc-header__context-name\" [attr.title]=\"contextName()\">{{ contextName() }}</span>&ngsp;\n <lc-badge class=\"lc-header__context-badge\" size=\"sm\" [rounded]=\"true\" [variant]=\"badge.variant ?? 'default'\">{{ badge.label }}</lc-badge>\n </span>\n } @else {\n <span class=\"lc-header__context-name\" [attr.title]=\"contextName()\">{{ contextName() }}</span>\n }\n </button>\n }\n\n <!-- User profile menu -->\n @if (showUserMenu()) {\n <lc-menu\n [items]=\"menuItems()\"\n [isOpen]=\"isDropdownOpen()\"\n position=\"bottom-right\"\n minWidth=\"min(220px, calc(100vw - 2rem))\"\n maxWidth=\"min(18rem, calc(100vw - 2rem))\"\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\n [name]=\"userName()\"\n [src]=\"userAvatarSrc() || undefined\"\n [color]=\"userAvatarColor()\"\n [fallback]=\"userAvatarFallback()\"\n size=\"md\"\n />\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 @if (userMenuTrigger() === 'avatar') {\n <button\n trigger\n class=\"lc-header__profile-trigger lc-header__profile-trigger--avatar\"\n type=\"button\"\n [attr.aria-label]=\"avatarTriggerAriaLabel()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-avatar\n [name]=\"userName()\"\n [src]=\"userAvatarSrc() || undefined\"\n [color]=\"userAvatarColor()\"\n [fallback]=\"userAvatarFallback()\"\n [decorative]=\"true\"\n size=\"md\"\n />\n </button>\n } @else {\n <button\n trigger\n class=\"lc-header__profile-trigger\"\n type=\"button\"\n [attr.aria-label]=\"userMenuAriaLabel()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n (click)=\"toggleDropdown()\"\n >\n <lc-icon name=\"user\" size=\"sm\" [decorative]=\"true\" />\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </lc-menu>\n }\n </div>\n</header>\n\n<ng-template #brandLogo>\n <lc-logo\n [variant]=\"logo() ? 'full' : 'emblem'\"\n [size]=\"logoSize()\"\n [clickable]=\"false\"\n [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n [src]=\"logoSrc()\"\n [emblemSrc]=\"logoEmblemSrc()\"\n [darkSrc]=\"logoDarkSrc()\"\n [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n [alt]=\"logoAlt() || title() || 'Logo'\"\n />\n</ng-template>\n",
|
|
688
|
+
styles: [".lc-header{--lc-header-bg: var(--color-surface);--lc-header-fg: var(--color-text-primary);--lc-header-fg-secondary: var(--color-text-secondary);--lc-header-border: var(--color-border);--lc-header-hover-bg: var(--color-surface-hover);--lc-header-trigger-border: var(--color-border);--lc-header-trigger-fg: var(--color-text-secondary);--lc-header-padding-x: var(--lc-density-padding-lg, var(--spacing-6));display:flex;align-items:center;gap:var(--lc-density-gap-md, var(--spacing-4));flex-wrap:wrap;row-gap:0;padding:0 var(--lc-header-padding-x);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);min-height:64px;position:sticky;top:0;z-index:1000}.lc-header.lc-header--size-sm{min-height:56px;--lc-header-row-height: 56px}.lc-header.lc-header--size-md{min-height:64px;--lc-header-row-height: 64px}.lc-header.lc-header--size-lg{min-height:80px;--lc-header-row-height: 80px}.lc-header.lc-header--size-xl{min-height:112px;--lc-header-row-height: 112px}@media(max-width:768px){.lc-header{--lc-header-padding-x: var(--lc-density-padding-md, var(--spacing-4))}}.lc-header--static{position:relative}.lc-header__nav{display:flex;align-items:center;min-width:0}.lc-header__nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--lc-header-nav-gap, var(--spacing-1));margin:0;padding:0;list-style:none}.lc-header__nav-item{display:flex}.lc-header__nav-link{display:inline-flex;align-items:center;min-height:var(--size-min-touch-height, 2.75rem);padding:0 var(--spacing-3);border-radius:var(--border-radius-md);color:var(--lc-header-fg-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);text-decoration:none;transition:color .15s ease,background-color .15s ease}.lc-header__nav-link:hover{color:var(--lc-header-fg);background-color:var(--lc-header-hover-bg)}.lc-header__nav-link:focus-visible{outline:2px solid var(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}.lc-header__nav-link[aria-current=page]{color:var(--lc-header-fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}@media(max-width:1023.98px){.lc-header--has-nav .lc-header__nav{order:1;flex-basis:100%;margin-left:calc(-1 * var(--spacing-3))}}@media(min-width:1024px){.lc-header--has-nav .lc-header__brand{flex:0 1 auto;width:auto;max-width:none}.lc-header--has-nav .lc-header__title-group{flex:0 1 auto}.lc-header--has-nav .lc-header__title{margin-inline-end:0}.lc-header--has-nav .lc-header__subtitle{contain:none}.lc-header--has-nav .lc-header__spacer{flex:1}}.lc-header--dark{--lc-header-bg: #070e15;--lc-header-fg: #f1f6f8;--lc-header-fg-secondary: #c4d2d9;--lc-header-border: rgba(255, 255, 255, .08);--lc-header-hover-bg: rgba(132, 199, 212, .06);--lc-header-trigger-border: rgba(255, 255, 255, .08);--lc-header-trigger-fg: #c4d2d9}.lc-header--light{--lc-header-bg: #ffffff;--lc-header-fg: #111827;--lc-header-fg-secondary: #4b5563;--lc-header-border: #e5e7eb;--lc-header-hover-bg: #f3f4f6;--lc-header-trigger-border: #e5e7eb;--lc-header-trigger-fg: #374151;--_lc-header-ring: #208497}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;margin-left:calc(var(--lc-header-hamburger-slot, 56px) / 2 - var(--lc-header-padding-x) - 12px);margin-right:calc(var(--lc-header-hamburger-gap, .5rem) - var(--lc-density-gap-md, var(--spacing-4)));color:var(--lc-header-trigger-fg)}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-3);width:min-content;max-width:calc(100% - var(--lc-density-gap-md, var(--spacing-4)));min-width:0}.lc-header--has-nav .lc-header__brand{min-height:var(--lc-header-row-height, 64px)}.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(--_lc-header-ring, var(--color-primary-500));outline-offset:4px;border-radius:var(--border-radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;margin-inline-end:calc(-1 * var(--lc-density-gap-md, var(--spacing-4)));line-height:1.2;overflow-wrap:break-word;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{display:block;contain:inline-size;max-width:var(--lc-header-subtitle-max-width, 100%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;line-height:1.3;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:var(--lc-header-subtitle-transform, none);transition:color .2s ease}@media(min-width:1024px){.lc-header__subtitle{font-size:var(--font-size-sm, .875rem)}}.lc-header__spacer{flex:0 0 0;min-height:calc(var(--lc-header-row-height, 64px) - var(--_lc-header-border-width, 1px))}.lc-header__end{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;justify-content:flex-end;gap:0 var(--lc-density-gap-md, var(--spacing-4));margin-inline-start:auto;min-width:0;max-width:100%}.lc-header__end:empty{display:none}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--border-radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-info--badge{max-width:340px}.lc-header__context-row{display:flex;align-items:center;gap:var(--spacing-1-5);min-width:0;max-width:100%}.lc-header__context-row .lc-header__context-name{flex:0 1 auto;min-width:0}.lc-header__context-badge{display:inline-flex;flex-shrink:0;margin-block:calc(.65 * var(--font-size-sm) - .75rem)}@media(max-width:640px){.lc-header--context-below{justify-content:flex-end}.lc-header--context-below .lc-header__end{display:contents}.lc-header--context-below .lc-header__context-info{display:flex;order:2;flex:1 0 calc(100% + 2 * var(--spacing-3));margin:0 calc(-1 * var(--spacing-3)) var(--spacing-2);max-width:none;min-height:var(--size-min-touch-height, 2.75rem);align-items:flex-start;justify-content:center;text-align:start}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--border-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(--_lc-header-ring, var(--color-primary-500));outline-offset:2px}.lc-header__profile-trigger--avatar{justify-content:center;width:3rem;height:3rem;min-height:3rem;padding:0;border:0;flex-shrink:0}.lc-header__profile-trigger--avatar:hover{border-color:transparent}.lc-header.lc-header--transparent{--lc-header-bg: transparent;--lc-header-border: transparent;--_lc-header-border-width: 0px;border-bottom-width:0}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4));border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);overflow-wrap:break-word;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow-wrap:anywhere;line-height:1.4}\n"]
|
|
660
689
|
}]
|
|
661
690
|
}],
|
|
662
691
|
ctorParameters: () => [],
|
|
@@ -885,6 +914,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
885
914
|
required: false
|
|
886
915
|
}]
|
|
887
916
|
}],
|
|
917
|
+
contextBadge: [{
|
|
918
|
+
type: i0.Input,
|
|
919
|
+
args: [{
|
|
920
|
+
isSignal: true,
|
|
921
|
+
alias: "contextBadge",
|
|
922
|
+
required: false
|
|
923
|
+
}]
|
|
924
|
+
}],
|
|
888
925
|
menuSize: [{
|
|
889
926
|
type: i0.Input,
|
|
890
927
|
args: [{
|