@lifecorner/angular-ui-kit 3.32.0 → 3.33.1
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/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-chat.mjs +21 -5
- package/fesm2022/lifecorner-angular-ui-kit-chat.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-combobox.mjs +65 -19
- package/fesm2022/lifecorner-angular-ui-kit-combobox.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-datepicker.mjs +7 -6
- package/fesm2022/lifecorner-angular-ui-kit-datepicker.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-header.mjs +21 -4
- package/fesm2022/lifecorner-angular-ui-kit-header.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-internal-a11y.mjs +21 -1
- package/fesm2022/lifecorner-angular-ui-kit-internal-a11y.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-next-step-card.mjs +21 -4
- package/fesm2022/lifecorner-angular-ui-kit-next-step-card.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs +5 -4
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-sidenav.mjs +4 -4
- package/fesm2022/lifecorner-angular-ui-kit-sidenav.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-tag-input.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-tag-input.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-textarea.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-textarea.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-toast.mjs +9 -4
- package/fesm2022/lifecorner-angular-ui-kit-toast.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-tooltip.mjs +7 -0
- package/fesm2022/lifecorner-angular-ui-kit-tooltip.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/theme-contrast.spec.ts +14 -6
- package/types/lifecorner-angular-ui-kit-bottom-nav.d.ts +3 -2
- package/types/lifecorner-angular-ui-kit-chat.d.ts +14 -1
- package/types/lifecorner-angular-ui-kit-combobox.d.ts +18 -1
- package/types/lifecorner-angular-ui-kit-datepicker.d.ts +4 -1
- package/types/lifecorner-angular-ui-kit-header.d.ts +26 -0
- package/types/lifecorner-angular-ui-kit-internal-a11y.d.ts +12 -1
- package/types/lifecorner-angular-ui-kit-list.d.ts +6 -1
- package/types/lifecorner-angular-ui-kit-next-step-card.d.ts +15 -0
- package/types/lifecorner-angular-ui-kit-select.d.ts +7 -0
- package/types/lifecorner-angular-ui-kit-sidenav.d.ts +3 -1
- package/types/lifecorner-angular-ui-kit-toast.d.ts +17 -3
- package/types/lifecorner-angular-ui-kit-tooltip.d.ts +7 -2
|
@@ -26,6 +26,13 @@ var NextStepCardComponent = class NextStepCardComponent {
|
|
|
26
26
|
primaryClick = output();
|
|
27
27
|
secondaryClick = output();
|
|
28
28
|
actionsSlot = viewChild("actionsSlot", ...ngDevMode ? [{ debugName: "actionsSlot" }] : /* istanbul ignore next */ []);
|
|
29
|
+
titleEl = viewChild("titleEl", ...ngDevMode ? [{ debugName: "titleEl" }] : /* istanbul ignore next */ []);
|
|
30
|
+
focusTitle() {
|
|
31
|
+
const title = this.titleEl()?.nativeElement;
|
|
32
|
+
if (!title) return;
|
|
33
|
+
title.setAttribute("tabindex", "-1");
|
|
34
|
+
title.focus();
|
|
35
|
+
}
|
|
29
36
|
hasProjectedActions = signal(false, ...ngDevMode ? [{ debugName: "hasProjectedActions" }] : /* istanbul ignore next */ []);
|
|
30
37
|
cardClasses = computed(() => [
|
|
31
38
|
"lc-next-step-card",
|
|
@@ -207,10 +214,16 @@ var NextStepCardComponent = class NextStepCardComponent {
|
|
|
207
214
|
predicate: ["actionsSlot"],
|
|
208
215
|
descendants: true,
|
|
209
216
|
isSignal: true
|
|
217
|
+
}, {
|
|
218
|
+
propertyName: "titleEl",
|
|
219
|
+
first: true,
|
|
220
|
+
predicate: ["titleEl"],
|
|
221
|
+
descendants: true,
|
|
222
|
+
isSignal: true
|
|
210
223
|
}],
|
|
211
224
|
ngImport: i0,
|
|
212
|
-
template: "<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n </div>\n\n <div class=\"lc-next-step-card__body\">\n @switch (titleTag()) {\n @case ('h2') {\n <h2 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h2>\n }\n @case ('h3') {\n <h3 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h3>\n }\n @default {\n <div class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </div>\n }\n }\n @if (message()) {\n <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n }\n <div class=\"lc-next-step-card__custom-message\">\n <ng-content />\n </div>\n <!-- Form-safe body: no inherited message text styles. -->\n <div class=\"lc-next-step-card__content\">\n <ng-content select=\"[slot='body']\" />\n </div>\n <div class=\"lc-next-step-card__blockers\">\n <ng-content select=\"[slot='blockers']\" />\n </div>\n <div class=\"lc-next-step-card__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n </div>\n\n <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n @if (!hasProjectedActions() && actionsStyle() === 'equal') {\n <!-- Two answers of the same weight (3.16, BA-5): the primary first, both outline in the primary tone. -->\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"outline\"\n tone=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n @if (secondaryLabel()) {\n <lc-button variant=\"outline\" tone=\"primary\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n </lc-button>\n }\n } @else if (!hasProjectedActions()) {\n @if (secondaryLabel()) {\n <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </lc-button>\n }\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n }\n </div>\n</div>\n",
|
|
213
|
-
styles: [":host{display:block;inline-size:100%;container:lc-next-step-card/inline-size}.lc-next-step-card{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--lc-density-gap-md, var(--spacing-4, 1rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem)) var(--lc-density-padding-lg, var(--spacing-6, 1.5rem));background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--lc-nsc-rail);border-radius:var(--border-radius-lg, .75rem)}.lc-next-step-card--neutral{--lc-nsc-rail: var(--color-border);--lc-nsc-tint: var(--color-surface-hover);--lc-nsc-ink: var(--color-text-secondary)}.lc-next-step-card--primary{--lc-nsc-rail: var(--color-primary);--lc-nsc-tint: var(--color-primary-subtle);--lc-nsc-ink: var(--color-on-primary-subtle)}.lc-next-step-card--success{--lc-nsc-rail: var(--color-success);--lc-nsc-tint: var(--color-success-subtle);--lc-nsc-ink: var(--color-on-success-subtle)}.lc-next-step-card--warning{--lc-nsc-rail: var(--color-warning);--lc-nsc-tint: var(--color-warning-subtle);--lc-nsc-ink: var(--color-on-warning-subtle)}.lc-next-step-card--info{--lc-nsc-rail: var(--color-info);--lc-nsc-tint: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle)}.lc-next-step-card__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:var(--lc-nsc-tint);color:var(--lc-nsc-ink)}.lc-next-step-card__body{flex:1 1 16rem;min-width:0}.lc-next-step-card__title{margin:0;font-family:inherit;font-size:var(--typography-font-size-base, 1rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);color:var(--color-text-primary);letter-spacing:-.01em;overflow-wrap:break-word}.lc-next-step-card__message{margin:.2rem 0 0;font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message{font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message:empty{display:none}:host ::ng-deep .lc-next-step-card__custom-message>p{margin:.2rem 0 0}.lc-next-step-card__content{margin-top:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-next-step-card__content:empty{display:none}.lc-next-step-card__blockers{display:flex;flex-direction:column;gap:.25rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-sm, .875rem);color:var(--color-text-secondary)}.lc-next-step-card__blockers:empty{display:none}:host ::ng-deep .lc-next-step-card__blockers>*{display:flex;align-items:baseline;gap:.5rem;margin:0}:host ::ng-deep .lc-next-step-card__blockers>*:before{content:\"\";flex:none;width:7px;height:7px;border-radius:999px;background:var(--lc-nsc-rail);transform:translateY(-1px)}.lc-next-step-card__meta{display:flex;align-items:center;gap:.5rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-xs, .8125rem);color:var(--color-text-tertiary)}.lc-next-step-card__meta:empty{display:none}.lc-next-step-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-sm, .5rem);margin-left:auto}.lc-next-step-card__actions--empty{display:none}.lc-next-step-card__actions-slot{display:contents}.lc-next-step-card__link{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width){flex:1 1 100%;margin-left:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>*,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--actions-stacked .lc-next-step-card__actions{flex:1 1 100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.5rem;margin-left:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-bubble: var(--color-bubble, var(--color-surface));--lc-nsc-ring: var(--color-bubble-ring, var(--color-border-strong));--lc-nsc-ink: var(--color-bubble-icon, var(--color-link, var(--color-primary)));--lc-nsc-fill: var(--color-next-step-soft-neutral, var(--color-surface-muted));align-items:center;gap:1.25rem;padding:1.5rem 2rem;background:var(--lc-nsc-fill);border:0;border-radius:1.5rem;box-shadow:none}.lc-next-step-card--soft.lc-next-step-card--primary{--lc-nsc-fill: var(--color-next-step-soft-primary, var(--color-primary-subtle))}.lc-next-step-card--soft.lc-next-step-card--success{--lc-nsc-fill: var(--color-next-step-soft-success, var(--color-success-subtle));--lc-nsc-ink: var(--color-on-success-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-success) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--warning{--lc-nsc-fill: var(--color-next-step-soft-warning, var(--color-warning-subtle));--lc-nsc-ink: var(--color-on-warning-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-warning) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--info{--lc-nsc-fill: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-info) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft .lc-next-step-card__icon{width:3rem;height:3rem;background:var(--lc-nsc-bubble);box-shadow:0 0 0 1px var(--lc-nsc-ring);color:var(--lc-nsc-ink)}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.25rem;font-weight:var(--font-weight-bold, 700);line-height:1.2;letter-spacing:-.025em}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{margin:0;font-size:var(--font-size-base, 1rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__content{margin-top:0}.lc-next-step-card--soft .lc-next-step-card__meta{gap:.625rem;margin-top:0;padding-top:0;border-top:0;font-size:var(--font-size-sm, .875rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__actions{gap:.75rem}.lc-next-step-card--soft.lc-next-step-card--actions-stacked .lc-next-step-card__actions{gap:.5rem}@container lc-next-step-card (width < 30rem){.lc-next-step-card{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--lc-nsc-narrow-icon-gap, var(--lc-density-gap-md, 1rem));row-gap:var(--lc-nsc-narrow-row-gap, var(--lc-density-gap-sm, .5rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem))}.lc-next-step-card__body{display:contents}.lc-next-step-card__title{flex:1 1 0%;max-width:100%}.lc-next-step-card__message,.lc-next-step-card__custom-message,.lc-next-step-card__content,.lc-next-step-card__blockers,.lc-next-step-card__meta,.lc-next-step-card__actions{flex:1 1 100%;min-width:0;margin-top:0}.lc-next-step-card__message{margin:0}.lc-next-step-card__actions{margin-left:0;padding-top:var(--lc-nsc-narrow-actions-offset, var(--lc-density-gap-sm, .5rem));--lc-btn-overflow-wrap: anywhere}:host ::ng-deep .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-narrow-icon-gap: .875rem;--lc-nsc-narrow-row-gap: .875rem;--lc-nsc-narrow-actions-offset: .25rem;padding:1.5rem}}@container lc-next-step-card (width >= 30rem){.lc-next-step-card--soft .lc-next-step-card__body{display:flex;flex-direction:column;gap:.5rem}@media(min-width:64rem){.lc-next-step-card--soft{gap:1.75rem;padding:2rem 2.25rem;border-radius:1.75rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.5rem;height:3.5rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.5rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:1.0625rem}.lc-next-step-card--soft .lc-next-step-card__meta{font-size:var(--font-size-base, 1rem)}}@media(min-width:90rem){.lc-next-step-card--soft{padding:2.25rem 2.5rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.75rem;height:3.75rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.75rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:var(--font-size-lg, 1.125rem)}}}\n"],
|
|
225
|
+
template: "<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n </div>\n\n <div class=\"lc-next-step-card__body\">\n @switch (titleTag()) {\n @case ('h2') {\n <h2 #titleEl class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h2>\n }\n @case ('h3') {\n <h3 #titleEl class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h3>\n }\n @default {\n <div #titleEl class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </div>\n }\n }\n @if (message()) {\n <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n }\n <div class=\"lc-next-step-card__custom-message\">\n <ng-content />\n </div>\n <!-- Form-safe body: no inherited message text styles. -->\n <div class=\"lc-next-step-card__content\">\n <ng-content select=\"[slot='body']\" />\n </div>\n <div class=\"lc-next-step-card__blockers\">\n <ng-content select=\"[slot='blockers']\" />\n </div>\n <div class=\"lc-next-step-card__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n </div>\n\n <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n @if (!hasProjectedActions() && actionsStyle() === 'equal') {\n <!-- Two answers of the same weight (3.16, BA-5): the primary first, both outline in the primary tone. -->\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"outline\"\n tone=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n @if (secondaryLabel()) {\n <lc-button variant=\"outline\" tone=\"primary\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n </lc-button>\n }\n } @else if (!hasProjectedActions()) {\n @if (secondaryLabel()) {\n <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </lc-button>\n }\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n }\n </div>\n</div>\n",
|
|
226
|
+
styles: [":host{display:block;inline-size:100%;container:lc-next-step-card/inline-size}.lc-next-step-card{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--lc-density-gap-md, var(--spacing-4, 1rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem)) var(--lc-density-padding-lg, var(--spacing-6, 1.5rem));background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--lc-nsc-rail);border-radius:var(--border-radius-lg, .75rem)}.lc-next-step-card--neutral{--lc-nsc-rail: var(--color-border);--lc-nsc-tint: var(--color-surface-hover);--lc-nsc-ink: var(--color-text-secondary)}.lc-next-step-card--primary{--lc-nsc-rail: var(--color-primary);--lc-nsc-tint: var(--color-primary-subtle);--lc-nsc-ink: var(--color-on-primary-subtle)}.lc-next-step-card--success{--lc-nsc-rail: var(--color-success);--lc-nsc-tint: var(--color-success-subtle);--lc-nsc-ink: var(--color-on-success-subtle)}.lc-next-step-card--warning{--lc-nsc-rail: var(--color-warning);--lc-nsc-tint: var(--color-warning-subtle);--lc-nsc-ink: var(--color-on-warning-subtle)}.lc-next-step-card--info{--lc-nsc-rail: var(--color-info);--lc-nsc-tint: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle)}.lc-next-step-card__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:var(--lc-nsc-tint);color:var(--lc-nsc-ink)}.lc-next-step-card__body{flex:1 1 16rem;min-width:0}.lc-next-step-card__title{margin:0;font-family:inherit;font-size:var(--typography-font-size-base, 1rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);color:var(--color-text-primary);letter-spacing:-.01em;overflow-wrap:break-word}.lc-next-step-card__title:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.lc-next-step-card__message{margin:.2rem 0 0;font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message{font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message:empty{display:none}:host ::ng-deep .lc-next-step-card__custom-message>p{margin:.2rem 0 0}.lc-next-step-card__content{margin-top:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-next-step-card__content:empty{display:none}.lc-next-step-card__blockers{display:flex;flex-direction:column;gap:.25rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-sm, .875rem);color:var(--color-text-secondary)}.lc-next-step-card__blockers:empty{display:none}:host ::ng-deep .lc-next-step-card__blockers>*{display:flex;align-items:baseline;gap:.5rem;margin:0}:host ::ng-deep .lc-next-step-card__blockers>*:before{content:\"\";flex:none;width:7px;height:7px;border-radius:999px;background:var(--lc-nsc-rail);transform:translateY(-1px)}.lc-next-step-card__meta{display:flex;align-items:center;gap:.5rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-xs, .8125rem);color:var(--color-text-tertiary)}.lc-next-step-card__meta:empty{display:none}.lc-next-step-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-sm, .5rem);margin-left:auto}.lc-next-step-card__actions--empty{display:none}.lc-next-step-card__actions-slot{display:contents}.lc-next-step-card__link{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width){flex:1 1 100%;margin-left:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>*,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--actions-stacked .lc-next-step-card__actions{flex:1 1 100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.5rem;margin-left:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-bubble: var(--color-bubble, var(--color-surface));--lc-nsc-ring: var(--color-bubble-ring, var(--color-border-strong));--lc-nsc-ink: var(--color-bubble-icon, var(--color-link, var(--color-primary)));--lc-nsc-fill: var(--color-next-step-soft-neutral, var(--color-surface-muted));align-items:center;gap:1.25rem;padding:1.5rem 2rem;background:var(--lc-nsc-fill);border:0;border-radius:1.5rem;box-shadow:none}.lc-next-step-card--soft.lc-next-step-card--primary{--lc-nsc-fill: var(--color-next-step-soft-primary, var(--color-primary-subtle))}.lc-next-step-card--soft.lc-next-step-card--success{--lc-nsc-fill: var(--color-next-step-soft-success, var(--color-success-subtle));--lc-nsc-ink: var(--color-on-success-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-success) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--warning{--lc-nsc-fill: var(--color-next-step-soft-warning, var(--color-warning-subtle));--lc-nsc-ink: var(--color-on-warning-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-warning) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--info{--lc-nsc-fill: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-info) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft .lc-next-step-card__icon{width:3rem;height:3rem;background:var(--lc-nsc-bubble);box-shadow:0 0 0 1px var(--lc-nsc-ring);color:var(--lc-nsc-ink)}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.25rem;font-weight:var(--font-weight-bold, 700);line-height:1.2;letter-spacing:-.025em}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{margin:0;font-size:var(--font-size-base, 1rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__content{margin-top:0}.lc-next-step-card--soft .lc-next-step-card__meta{gap:.625rem;margin-top:0;padding-top:0;border-top:0;font-size:var(--font-size-sm, .875rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__actions{gap:.75rem}.lc-next-step-card--soft.lc-next-step-card--actions-stacked .lc-next-step-card__actions{gap:.5rem}@container lc-next-step-card (width < 30rem){.lc-next-step-card{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--lc-nsc-narrow-icon-gap, var(--lc-density-gap-md, 1rem));row-gap:var(--lc-nsc-narrow-row-gap, var(--lc-density-gap-sm, .5rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem))}.lc-next-step-card__body{display:contents}.lc-next-step-card__title{flex:1 1 0%;max-width:100%}.lc-next-step-card__message,.lc-next-step-card__custom-message,.lc-next-step-card__content,.lc-next-step-card__blockers,.lc-next-step-card__meta,.lc-next-step-card__actions{flex:1 1 100%;min-width:0;margin-top:0}.lc-next-step-card__message{margin:0}.lc-next-step-card__actions{margin-left:0;padding-top:var(--lc-nsc-narrow-actions-offset, var(--lc-density-gap-sm, .5rem));--lc-btn-overflow-wrap: anywhere}:host ::ng-deep .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-narrow-icon-gap: .875rem;--lc-nsc-narrow-row-gap: .875rem;--lc-nsc-narrow-actions-offset: .25rem;padding:1.5rem}}@container lc-next-step-card (width >= 30rem){.lc-next-step-card--soft .lc-next-step-card__body{display:flex;flex-direction:column;gap:.5rem}@media(min-width:64rem){.lc-next-step-card--soft{gap:1.75rem;padding:2rem 2.25rem;border-radius:1.75rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.5rem;height:3.5rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.5rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:1.0625rem}.lc-next-step-card--soft .lc-next-step-card__meta{font-size:var(--font-size-base, 1rem)}}@media(min-width:90rem){.lc-next-step-card--soft{padding:2.25rem 2.5rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.75rem;height:3.75rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.75rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:var(--font-size-lg, 1.125rem)}}}@media(forced-colors:active){.lc-next-step-card__title:focus-visible{outline-color:Highlight}}\n"],
|
|
214
227
|
dependencies: [{
|
|
215
228
|
kind: "component",
|
|
216
229
|
type: ButtonComponent,
|
|
@@ -275,8 +288,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
275
288
|
ICON_EXTERNAL_LINK
|
|
276
289
|
])],
|
|
277
290
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
278
|
-
template: "<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n </div>\n\n <div class=\"lc-next-step-card__body\">\n @switch (titleTag()) {\n @case ('h2') {\n <h2 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h2>\n }\n @case ('h3') {\n <h3 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h3>\n }\n @default {\n <div class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </div>\n }\n }\n @if (message()) {\n <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n }\n <div class=\"lc-next-step-card__custom-message\">\n <ng-content />\n </div>\n <!-- Form-safe body: no inherited message text styles. -->\n <div class=\"lc-next-step-card__content\">\n <ng-content select=\"[slot='body']\" />\n </div>\n <div class=\"lc-next-step-card__blockers\">\n <ng-content select=\"[slot='blockers']\" />\n </div>\n <div class=\"lc-next-step-card__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n </div>\n\n <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n @if (!hasProjectedActions() && actionsStyle() === 'equal') {\n <!-- Two answers of the same weight (3.16, BA-5): the primary first, both outline in the primary tone. -->\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"outline\"\n tone=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n @if (secondaryLabel()) {\n <lc-button variant=\"outline\" tone=\"primary\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n </lc-button>\n }\n } @else if (!hasProjectedActions()) {\n @if (secondaryLabel()) {\n <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </lc-button>\n }\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n }\n </div>\n</div>\n",
|
|
279
|
-
styles: [":host{display:block;inline-size:100%;container:lc-next-step-card/inline-size}.lc-next-step-card{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--lc-density-gap-md, var(--spacing-4, 1rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem)) var(--lc-density-padding-lg, var(--spacing-6, 1.5rem));background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--lc-nsc-rail);border-radius:var(--border-radius-lg, .75rem)}.lc-next-step-card--neutral{--lc-nsc-rail: var(--color-border);--lc-nsc-tint: var(--color-surface-hover);--lc-nsc-ink: var(--color-text-secondary)}.lc-next-step-card--primary{--lc-nsc-rail: var(--color-primary);--lc-nsc-tint: var(--color-primary-subtle);--lc-nsc-ink: var(--color-on-primary-subtle)}.lc-next-step-card--success{--lc-nsc-rail: var(--color-success);--lc-nsc-tint: var(--color-success-subtle);--lc-nsc-ink: var(--color-on-success-subtle)}.lc-next-step-card--warning{--lc-nsc-rail: var(--color-warning);--lc-nsc-tint: var(--color-warning-subtle);--lc-nsc-ink: var(--color-on-warning-subtle)}.lc-next-step-card--info{--lc-nsc-rail: var(--color-info);--lc-nsc-tint: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle)}.lc-next-step-card__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:var(--lc-nsc-tint);color:var(--lc-nsc-ink)}.lc-next-step-card__body{flex:1 1 16rem;min-width:0}.lc-next-step-card__title{margin:0;font-family:inherit;font-size:var(--typography-font-size-base, 1rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);color:var(--color-text-primary);letter-spacing:-.01em;overflow-wrap:break-word}.lc-next-step-card__message{margin:.2rem 0 0;font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message{font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message:empty{display:none}:host ::ng-deep .lc-next-step-card__custom-message>p{margin:.2rem 0 0}.lc-next-step-card__content{margin-top:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-next-step-card__content:empty{display:none}.lc-next-step-card__blockers{display:flex;flex-direction:column;gap:.25rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-sm, .875rem);color:var(--color-text-secondary)}.lc-next-step-card__blockers:empty{display:none}:host ::ng-deep .lc-next-step-card__blockers>*{display:flex;align-items:baseline;gap:.5rem;margin:0}:host ::ng-deep .lc-next-step-card__blockers>*:before{content:\"\";flex:none;width:7px;height:7px;border-radius:999px;background:var(--lc-nsc-rail);transform:translateY(-1px)}.lc-next-step-card__meta{display:flex;align-items:center;gap:.5rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-xs, .8125rem);color:var(--color-text-tertiary)}.lc-next-step-card__meta:empty{display:none}.lc-next-step-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-sm, .5rem);margin-left:auto}.lc-next-step-card__actions--empty{display:none}.lc-next-step-card__actions-slot{display:contents}.lc-next-step-card__link{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width){flex:1 1 100%;margin-left:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>*,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--actions-stacked .lc-next-step-card__actions{flex:1 1 100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.5rem;margin-left:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-bubble: var(--color-bubble, var(--color-surface));--lc-nsc-ring: var(--color-bubble-ring, var(--color-border-strong));--lc-nsc-ink: var(--color-bubble-icon, var(--color-link, var(--color-primary)));--lc-nsc-fill: var(--color-next-step-soft-neutral, var(--color-surface-muted));align-items:center;gap:1.25rem;padding:1.5rem 2rem;background:var(--lc-nsc-fill);border:0;border-radius:1.5rem;box-shadow:none}.lc-next-step-card--soft.lc-next-step-card--primary{--lc-nsc-fill: var(--color-next-step-soft-primary, var(--color-primary-subtle))}.lc-next-step-card--soft.lc-next-step-card--success{--lc-nsc-fill: var(--color-next-step-soft-success, var(--color-success-subtle));--lc-nsc-ink: var(--color-on-success-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-success) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--warning{--lc-nsc-fill: var(--color-next-step-soft-warning, var(--color-warning-subtle));--lc-nsc-ink: var(--color-on-warning-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-warning) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--info{--lc-nsc-fill: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-info) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft .lc-next-step-card__icon{width:3rem;height:3rem;background:var(--lc-nsc-bubble);box-shadow:0 0 0 1px var(--lc-nsc-ring);color:var(--lc-nsc-ink)}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.25rem;font-weight:var(--font-weight-bold, 700);line-height:1.2;letter-spacing:-.025em}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{margin:0;font-size:var(--font-size-base, 1rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__content{margin-top:0}.lc-next-step-card--soft .lc-next-step-card__meta{gap:.625rem;margin-top:0;padding-top:0;border-top:0;font-size:var(--font-size-sm, .875rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__actions{gap:.75rem}.lc-next-step-card--soft.lc-next-step-card--actions-stacked .lc-next-step-card__actions{gap:.5rem}@container lc-next-step-card (width < 30rem){.lc-next-step-card{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--lc-nsc-narrow-icon-gap, var(--lc-density-gap-md, 1rem));row-gap:var(--lc-nsc-narrow-row-gap, var(--lc-density-gap-sm, .5rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem))}.lc-next-step-card__body{display:contents}.lc-next-step-card__title{flex:1 1 0%;max-width:100%}.lc-next-step-card__message,.lc-next-step-card__custom-message,.lc-next-step-card__content,.lc-next-step-card__blockers,.lc-next-step-card__meta,.lc-next-step-card__actions{flex:1 1 100%;min-width:0;margin-top:0}.lc-next-step-card__message{margin:0}.lc-next-step-card__actions{margin-left:0;padding-top:var(--lc-nsc-narrow-actions-offset, var(--lc-density-gap-sm, .5rem));--lc-btn-overflow-wrap: anywhere}:host ::ng-deep .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-narrow-icon-gap: .875rem;--lc-nsc-narrow-row-gap: .875rem;--lc-nsc-narrow-actions-offset: .25rem;padding:1.5rem}}@container lc-next-step-card (width >= 30rem){.lc-next-step-card--soft .lc-next-step-card__body{display:flex;flex-direction:column;gap:.5rem}@media(min-width:64rem){.lc-next-step-card--soft{gap:1.75rem;padding:2rem 2.25rem;border-radius:1.75rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.5rem;height:3.5rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.5rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:1.0625rem}.lc-next-step-card--soft .lc-next-step-card__meta{font-size:var(--font-size-base, 1rem)}}@media(min-width:90rem){.lc-next-step-card--soft{padding:2.25rem 2.5rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.75rem;height:3.75rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.75rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:var(--font-size-lg, 1.125rem)}}}\n"]
|
|
291
|
+
template: "<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n </div>\n\n <div class=\"lc-next-step-card__body\">\n @switch (titleTag()) {\n @case ('h2') {\n <h2 #titleEl class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h2>\n }\n @case ('h3') {\n <h3 #titleEl class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h3>\n }\n @default {\n <div #titleEl class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </div>\n }\n }\n @if (message()) {\n <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n }\n <div class=\"lc-next-step-card__custom-message\">\n <ng-content />\n </div>\n <!-- Form-safe body: no inherited message text styles. -->\n <div class=\"lc-next-step-card__content\">\n <ng-content select=\"[slot='body']\" />\n </div>\n <div class=\"lc-next-step-card__blockers\">\n <ng-content select=\"[slot='blockers']\" />\n </div>\n <div class=\"lc-next-step-card__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n </div>\n\n <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n @if (!hasProjectedActions() && actionsStyle() === 'equal') {\n <!-- Two answers of the same weight (3.16, BA-5): the primary first, both outline in the primary tone. -->\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"outline\"\n tone=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n @if (secondaryLabel()) {\n <lc-button variant=\"outline\" tone=\"primary\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n </lc-button>\n }\n } @else if (!hasProjectedActions()) {\n @if (secondaryLabel()) {\n <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </lc-button>\n }\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n }\n </div>\n</div>\n",
|
|
292
|
+
styles: [":host{display:block;inline-size:100%;container:lc-next-step-card/inline-size}.lc-next-step-card{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--lc-density-gap-md, var(--spacing-4, 1rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem)) var(--lc-density-padding-lg, var(--spacing-6, 1.5rem));background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--lc-nsc-rail);border-radius:var(--border-radius-lg, .75rem)}.lc-next-step-card--neutral{--lc-nsc-rail: var(--color-border);--lc-nsc-tint: var(--color-surface-hover);--lc-nsc-ink: var(--color-text-secondary)}.lc-next-step-card--primary{--lc-nsc-rail: var(--color-primary);--lc-nsc-tint: var(--color-primary-subtle);--lc-nsc-ink: var(--color-on-primary-subtle)}.lc-next-step-card--success{--lc-nsc-rail: var(--color-success);--lc-nsc-tint: var(--color-success-subtle);--lc-nsc-ink: var(--color-on-success-subtle)}.lc-next-step-card--warning{--lc-nsc-rail: var(--color-warning);--lc-nsc-tint: var(--color-warning-subtle);--lc-nsc-ink: var(--color-on-warning-subtle)}.lc-next-step-card--info{--lc-nsc-rail: var(--color-info);--lc-nsc-tint: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle)}.lc-next-step-card__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:var(--lc-nsc-tint);color:var(--lc-nsc-ink)}.lc-next-step-card__body{flex:1 1 16rem;min-width:0}.lc-next-step-card__title{margin:0;font-family:inherit;font-size:var(--typography-font-size-base, 1rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);color:var(--color-text-primary);letter-spacing:-.01em;overflow-wrap:break-word}.lc-next-step-card__title:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.lc-next-step-card__message{margin:.2rem 0 0;font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message{font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message:empty{display:none}:host ::ng-deep .lc-next-step-card__custom-message>p{margin:.2rem 0 0}.lc-next-step-card__content{margin-top:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-next-step-card__content:empty{display:none}.lc-next-step-card__blockers{display:flex;flex-direction:column;gap:.25rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-sm, .875rem);color:var(--color-text-secondary)}.lc-next-step-card__blockers:empty{display:none}:host ::ng-deep .lc-next-step-card__blockers>*{display:flex;align-items:baseline;gap:.5rem;margin:0}:host ::ng-deep .lc-next-step-card__blockers>*:before{content:\"\";flex:none;width:7px;height:7px;border-radius:999px;background:var(--lc-nsc-rail);transform:translateY(-1px)}.lc-next-step-card__meta{display:flex;align-items:center;gap:.5rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-xs, .8125rem);color:var(--color-text-tertiary)}.lc-next-step-card__meta:empty{display:none}.lc-next-step-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-sm, .5rem);margin-left:auto}.lc-next-step-card__actions--empty{display:none}.lc-next-step-card__actions-slot{display:contents}.lc-next-step-card__link{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width){flex:1 1 100%;margin-left:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>*,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--actions-stacked .lc-next-step-card__actions{flex:1 1 100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.5rem;margin-left:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-bubble: var(--color-bubble, var(--color-surface));--lc-nsc-ring: var(--color-bubble-ring, var(--color-border-strong));--lc-nsc-ink: var(--color-bubble-icon, var(--color-link, var(--color-primary)));--lc-nsc-fill: var(--color-next-step-soft-neutral, var(--color-surface-muted));align-items:center;gap:1.25rem;padding:1.5rem 2rem;background:var(--lc-nsc-fill);border:0;border-radius:1.5rem;box-shadow:none}.lc-next-step-card--soft.lc-next-step-card--primary{--lc-nsc-fill: var(--color-next-step-soft-primary, var(--color-primary-subtle))}.lc-next-step-card--soft.lc-next-step-card--success{--lc-nsc-fill: var(--color-next-step-soft-success, var(--color-success-subtle));--lc-nsc-ink: var(--color-on-success-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-success) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--warning{--lc-nsc-fill: var(--color-next-step-soft-warning, var(--color-warning-subtle));--lc-nsc-ink: var(--color-on-warning-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-warning) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--info{--lc-nsc-fill: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-info) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft .lc-next-step-card__icon{width:3rem;height:3rem;background:var(--lc-nsc-bubble);box-shadow:0 0 0 1px var(--lc-nsc-ring);color:var(--lc-nsc-ink)}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.25rem;font-weight:var(--font-weight-bold, 700);line-height:1.2;letter-spacing:-.025em}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{margin:0;font-size:var(--font-size-base, 1rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__content{margin-top:0}.lc-next-step-card--soft .lc-next-step-card__meta{gap:.625rem;margin-top:0;padding-top:0;border-top:0;font-size:var(--font-size-sm, .875rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__actions{gap:.75rem}.lc-next-step-card--soft.lc-next-step-card--actions-stacked .lc-next-step-card__actions{gap:.5rem}@container lc-next-step-card (width < 30rem){.lc-next-step-card{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--lc-nsc-narrow-icon-gap, var(--lc-density-gap-md, 1rem));row-gap:var(--lc-nsc-narrow-row-gap, var(--lc-density-gap-sm, .5rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem))}.lc-next-step-card__body{display:contents}.lc-next-step-card__title{flex:1 1 0%;max-width:100%}.lc-next-step-card__message,.lc-next-step-card__custom-message,.lc-next-step-card__content,.lc-next-step-card__blockers,.lc-next-step-card__meta,.lc-next-step-card__actions{flex:1 1 100%;min-width:0;margin-top:0}.lc-next-step-card__message{margin:0}.lc-next-step-card__actions{margin-left:0;padding-top:var(--lc-nsc-narrow-actions-offset, var(--lc-density-gap-sm, .5rem));--lc-btn-overflow-wrap: anywhere}:host ::ng-deep .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-narrow-icon-gap: .875rem;--lc-nsc-narrow-row-gap: .875rem;--lc-nsc-narrow-actions-offset: .25rem;padding:1.5rem}}@container lc-next-step-card (width >= 30rem){.lc-next-step-card--soft .lc-next-step-card__body{display:flex;flex-direction:column;gap:.5rem}@media(min-width:64rem){.lc-next-step-card--soft{gap:1.75rem;padding:2rem 2.25rem;border-radius:1.75rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.5rem;height:3.5rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.5rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:1.0625rem}.lc-next-step-card--soft .lc-next-step-card__meta{font-size:var(--font-size-base, 1rem)}}@media(min-width:90rem){.lc-next-step-card--soft{padding:2.25rem 2.5rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.75rem;height:3.75rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.75rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:var(--font-size-lg, 1.125rem)}}}@media(forced-colors:active){.lc-next-step-card__title:focus-visible{outline-color:Highlight}}\n"]
|
|
280
293
|
}]
|
|
281
294
|
}],
|
|
282
295
|
ctorParameters: () => [],
|
|
@@ -444,6 +457,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
444
457
|
actionsSlot: [{
|
|
445
458
|
type: i0.ViewChild,
|
|
446
459
|
args: ["actionsSlot", { isSignal: true }]
|
|
460
|
+
}],
|
|
461
|
+
titleEl: [{
|
|
462
|
+
type: i0.ViewChild,
|
|
463
|
+
args: ["titleEl", { isSignal: true }]
|
|
447
464
|
}]
|
|
448
465
|
}
|
|
449
466
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-next-step-card.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/next-step-card/next-step-card.component.ts","../../../../libs/angular-ui-kit/src/lib/next-step-card/next-step-card.component.html"],"sourcesContent":["import {\n AfterViewChecked,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n computed,\n effect,\n input,\n isDevMode,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@lifecorner/angular-ui-kit/button';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_RIGHT, ICON_EXTERNAL_LINK, ICON_INFORMATION_CIRCLE } from '@lifecorner/angular-ui-kit/icons';\n\nexport type NextStepCardTone = 'neutral' | 'primary' | 'success' | 'warning' | 'info';\n\n/**\n * Appearance of the card.\n * - `default`: white surface, hairline border, 4 px tonal rail, 36 px tinted bubble\n * - `soft`: tinted fill per tone, radius 24 px (28 px from 1024 px), no rail,\n * border or shadow, a larger white bubble with a 1 px ring (the \"Weite\" look)\n */\nexport type NextStepCardVariant = 'default' | 'soft';\n\n/**\n * How several actions are laid out.\n * - `inline`: side by side at the end of the card; below 480 px card width in\n * their own row, stretched\n * - `stacked`: always in their own row, one per line at equal width, 8 px apart\n */\nexport type NextStepCardActionsLayout = 'inline' | 'stacked';\n\n/**\n * Weight of the two built-in actions.\n * - `default`: a filled primary and a ghost secondary with a chevron, the\n * primary last\n * - `equal`: two answers of the same weight (a question such as „Teilen?“):\n * both `outline` in the primary tone at `actionSize`, the primary first,\n * no chevron\n */\nexport type NextStepCardActionsStyle = 'default' | 'equal';\n\n/** Element that renders the title (semantics only, the look stays the same). */\nexport type NextStepCardTitleTag = 'div' | 'h2' | 'h3';\n\n/** Size of the built-in action buttons (`sm` 32 px, `md` 42 px, `lg` 48.5 px). */\nexport type NextStepCardActionSize = 'sm' | 'md' | 'lg';\n\n/**\n * Next-step card — the single status-and-action surface of a page: \"where does\n * this stand, and what is the one next step?\".\n *\n * Features:\n * - Tonal accent rail (4px left) + tinted icon bubble, token colors only\n * - Title, message (string input or default slot for markup)\n * - Primary action (with loading / disabled + mandatory disabled reason),\n * ghost secondary action, or an external link instead of the primary button\n * - `[slot='blockers']`: rows inside the card under a subtle divider (dot\n * prefix); each projected element with `slot=\"blockers\"` becomes one row —\n * blockers are rows IN the card, never additional banners\n * - `[slot='meta']`: one footer line (icon + text)\n * - `[slot='actions']`: fully replaces the built-in action buttons\n * - `[slot='body']`: content below the message without the message's text\n * styles, so form fields, lists or a description list keep their own look\n * - `role=\"region\"` labelled by the title; optional polite live announcement\n * of title changes via `announce`\n * - Narrow layout: below 480 px of card width (a CSS container query on the\n * host) the icon sits beside the title, message, body, blockers and meta\n * take the full inner width, the inline padding drops to `padding-md`, and\n * the actions take their own row with every action stretched. A projected\n * `fullWidth` button gets its own row at every width.\n * - `variant=\"soft\"`: the tinted card of the \"Weite\" look; `actionsLayout`\n * `stacked` for several equal-width actions; `titleTag` for a heading\n * - `actionsStyle=\"equal\"` (3.16, BA-5): a question with two answers of the\n * same weight, both outline buttons in the primary tone, primary first\n *\n * The host is a size container (`container-type: inline-size`) and takes the\n * full inline size of its parent.\n *\n * Usage rule: exactly ONE next-step card per page.\n *\n * @example\n * ```html\n * <lc-next-step-card\n * tone=\"warning\"\n * icon=\"clock\"\n * cardTitle=\"Wartet auf Freigabe\"\n * message=\"Der Entwurf ist vollständig und kann geprüft werden.\"\n * primaryLabel=\"Freigeben\"\n * secondaryLabel=\"Änderungen anfordern\"\n * (primaryClick)=\"approve()\"\n * />\n * ```\n */\n@Component({\n selector: 'lc-next-step-card',\n standalone: true,\n imports: [ButtonComponent, IconComponent],\n // Its default `icon` and the action glyphs.\n viewProviders: [ɵprovideKitIcons([ICON_INFORMATION_CIRCLE, ICON_CHEVRON_RIGHT, ICON_EXTERNAL_LINK])],\n templateUrl: './next-step-card.component.html',\n styleUrls: ['./next-step-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NextStepCardComponent implements AfterViewChecked {\n /**\n * Tone of the accent rail and icon bubble. Colors come exclusively from the\n * semantic tokens (`--color-*` rail, `--color-*-subtle` bubble tint,\n * `--color-on-*-subtle` icon ink).\n * @default 'neutral'\n */\n tone = input<NextStepCardTone>('neutral');\n\n /**\n * Appearance: `default` (surface, border, 4 px rail) or `soft` (tinted fill\n * per tone, radius 24 px / 28 px from 1024 px, no rail, border or shadow,\n * a 48 px white bubble with a 1 px ring; 56 px from 1024 px, 60 px from\n * 1440 px). Soft fills come from `--color-next-step-soft-neutral` /\n * `--color-next-step-soft-primary` and the tone's `-subtle` token; the bubble\n * from `--color-bubble`, `--color-bubble-ring`, `--color-bubble-icon`.\n * @default 'default'\n */\n variant = input<NextStepCardVariant>('default');\n\n /** Icon name for the round bubble (36 px; 48–60 px in the soft variant). */\n icon = input<string>('information-circle');\n\n /** Title (1rem semibold; 20–28 px bold in the soft variant). Also the card's accessible name. */\n cardTitle = input.required<string>();\n\n /**\n * Element that renders the title: `div` (default), `h2` or `h3`. Use a\n * heading when the page has sections, so heading navigation reaches the\n * most important item. Semantics only, the look stays the same.\n * @default 'div'\n */\n titleTag = input<NextStepCardTitleTag>('div');\n\n /**\n * Layout of several actions. `inline`: side by side at the end of the card\n * (below 480 px card width in their own row, stretched). `stacked`: always\n * in their own row, one per line at equal width, 8 px apart (e.g. a list of\n * sign-in methods).\n * @default 'inline'\n */\n actionsLayout = input<NextStepCardActionsLayout>('inline');\n\n /**\n * Size of the built-in action buttons and link: `sm` (32 px, the 3.2\n * default), `md` (42 px) or `lg` (48.5 px, meets the 44 px touch target).\n * @default 'sm'\n */\n actionSize = input<NextStepCardActionSize>('sm');\n\n /**\n * Weight of the built-in actions. `default`: filled primary, ghost secondary\n * with a chevron, primary last. `equal`: two answers of the same weight, both\n * `outline` in the primary tone at `actionSize`, primary first, no chevron\n * (`primaryClick`, `secondaryClick`, `primaryLoading`, `primaryDisabled` and\n * `announce` work as before). Use `actionSize=\"lg\"` (48.5 px, the 44 px\n * target; a dev warning otherwise). No effect on `[slot='actions']`.\n * @default 'default'\n */\n actionsStyle = input<NextStepCardActionsStyle>('default');\n\n /** Message below the title. For markup, use the default slot instead. */\n message = input<string>();\n\n /** Label of the primary action. Omit to render no primary button. */\n primaryLabel = input<string>();\n\n /** Optional leading icon of the primary action. */\n primaryIcon = input<string>();\n\n /** Shows a spinner on the primary action. */\n primaryLoading = input<boolean>(false);\n\n /**\n * Disables the primary action. A disabled primary REQUIRES\n * `primaryDisabledReason`; disabled without a reason logs a dev warning.\n */\n primaryDisabled = input<boolean>(false);\n\n /** Why the primary action is disabled — shown as tooltip on the button. */\n primaryDisabledReason = input<string>('');\n\n /** Label of the ghost secondary action (rendered with a chevron). */\n secondaryLabel = input<string>();\n\n /**\n * Label of an external link rendered instead of the primary button\n * (opens in a new tab). Requires `linkHref`.\n */\n linkLabel = input<string>();\n\n /** Target URL of the external link. */\n linkHref = input<string>();\n\n /**\n * Where the link opens: `_blank` (a new tab, with `rel=\"noopener noreferrer\"`,\n * the 3.2 behaviour) or `_self` (the same tab, no `rel`).\n * @default '_blank'\n */\n linkTarget = input<'_blank' | '_self'>('_blank');\n\n /**\n * Announce title changes to screen readers via `aria-live=\"polite\"` —\n * for cards whose state advances in place.\n * @default false\n */\n announce = input<boolean>(false);\n\n /** Emits when the primary action is clicked. */\n primaryClick = output<void>();\n\n /** Emits when the secondary action is clicked. */\n secondaryClick = output<void>();\n\n private actionsSlot = viewChild<ElementRef<HTMLElement>>('actionsSlot');\n\n /**\n * Whether content was projected into `[slot='actions']` — projected actions\n * fully replace the built-in buttons.\n */\n protected hasProjectedActions = signal(false);\n\n protected cardClasses = computed(() =>\n [\n 'lc-next-step-card',\n `lc-next-step-card--${this.tone()}`,\n this.variant() === 'soft' ? 'lc-next-step-card--soft' : null,\n this.actionsLayout() === 'stacked' ? 'lc-next-step-card--actions-stacked' : null,\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n /** `rel` of the external link: only a new tab needs `noopener noreferrer`. */\n protected linkRel = computed(() => (this.linkTarget() === '_blank' ? 'noopener noreferrer' : null));\n\n protected showLink = computed(() => !!(this.linkLabel() && this.linkHref()));\n\n /**\n * Whether the card renders any action: hides the empty actions box, so the\n * narrow layout gets no empty row.\n */\n protected hasActions = computed(\n () =>\n this.hasProjectedActions() ||\n !!this.secondaryLabel() ||\n this.showLink() ||\n !!this.primaryLabel(),\n );\n\n constructor() {\n effect(() => {\n if (isDevMode() && this.primaryDisabled() && !this.primaryDisabledReason()) {\n console.warn(\n '[lc-next-step-card] `primaryDisabled` is set without a `primaryDisabledReason`. ' +\n 'A disabled primary action must explain why (shown as tooltip).',\n );\n }\n });\n effect(() => {\n if (isDevMode() && this.actionsStyle() === 'equal' && this.actionSize() !== 'lg') {\n console.warn('[lc-next-step-card] actionsStyle=\"equal\" needs actionSize=\"lg\" (44 px)');\n }\n });\n }\n\n ngAfterViewChecked(): void {\n // Projected [slot='actions'] content replaces the built-in buttons. The\n // signal write is equality-guarded, so unchanged checks are no-ops.\n const el = this.actionsSlot()?.nativeElement;\n this.hasProjectedActions.set(!!el && el.childElementCount > 0);\n }\n}\n","<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n </div>\n\n <div class=\"lc-next-step-card__body\">\n @switch (titleTag()) {\n @case ('h2') {\n <h2 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h2>\n }\n @case ('h3') {\n <h3 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h3>\n }\n @default {\n <div class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </div>\n }\n }\n @if (message()) {\n <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n }\n <div class=\"lc-next-step-card__custom-message\">\n <ng-content />\n </div>\n <!-- Form-safe body: no inherited message text styles. -->\n <div class=\"lc-next-step-card__content\">\n <ng-content select=\"[slot='body']\" />\n </div>\n <div class=\"lc-next-step-card__blockers\">\n <ng-content select=\"[slot='blockers']\" />\n </div>\n <div class=\"lc-next-step-card__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n </div>\n\n <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n @if (!hasProjectedActions() && actionsStyle() === 'equal') {\n <!-- Two answers of the same weight (3.16, BA-5): the primary first, both outline in the primary tone. -->\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"outline\"\n tone=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n @if (secondaryLabel()) {\n <lc-button variant=\"outline\" tone=\"primary\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n </lc-button>\n }\n } @else if (!hasProjectedActions()) {\n @if (secondaryLabel()) {\n <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </lc-button>\n }\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n }\n </div>\n</div>\n"],"mappings":";;;;;AA2GA,IAAa,wBAAb,MAAa,sBAAqB;CAOhC,OAAO,MAAwB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAWzC,UAAU,MAA2B,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG/C,OAAO,MAAc,sBAAqB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAG1C,YAAY,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAQpC,WAAW,MAA4B,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAS7C,gBAAgB,MAAiC,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAO1D,aAAa,MAA8B,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAWhD,eAAe,MAAgC,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAGzD,UAAU,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGzB,eAAe,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAG9B,cAAc,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAG7B,iBAAiB,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAMtC,kBAAkB,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAGvC,wBAAwB,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,wBAAA,CAAA,+BAAA,CAAA,CAAA;CAGzC,iBAAiB,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAMhC,YAAY,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAG3B,WAAW,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAO1B,aAAa,MAA0B,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAOhD,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGhC,eAAe,OAAM;CAGrB,iBAAiB,OAAM;CAEf,cAAc,UAAmC,eAAc,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAM7D,sBAAsB,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,sBAAA,CAAA,+BAAA,CAAA,CAAA;CAEnC,cAAc,eACtB;EACE;EACA,sBAAsB,KAAK,KAAI;EAC/B,KAAK,QAAO,MAAO,SAAS,4BAA4B;EACxD,KAAK,cAAa,MAAO,YAAY,uCAAuC;CAC7E,CAAA,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACZ,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGS,UAAU,eAAgB,KAAK,WAAU,MAAO,WAAW,wBAAwB,MAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEzF,WAAW,eAAe,CAAC,EAAE,KAAK,UAAS,KAAM,KAAK,SAAQ,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAMlE,aAAa,eAEnB,KAAK,oBAAmB,KACxB,CAAC,CAAC,KAAK,eAAc,KACrB,KAAK,SAAQ,KACb,CAAC,CAAC,KAAK,aAAY,GACtB,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAED,cAAA;EACE,aAAY;GACV,IAAI,UAAS,KAAM,KAAK,gBAAe,KAAM,CAAC,KAAK,sBAAqB,GACtE,QAAQ,KACN,gJACkE;EAGxE,CAAC;EACD,aAAY;GACV,IAAI,UAAS,KAAM,KAAK,aAAY,MAAO,WAAW,KAAK,WAAU,MAAO,MAC1E,QAAQ,KAAK,4EAAwE;EAEzF,CAAC;CACH;CAEA,qBAAkB;EAGhB,MAAM,KAAK,KAAK,YAAW,CAAE,EAAE;EAC/B,KAAK,oBAAoB,IAAI,CAAC,CAAC,MAAM,GAAG,oBAAoB,CAAC;CAC/D;CA3KW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;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,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;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,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,iBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,uBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;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,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,cAAA;GAAA,gBAAA;EAAA;EAAA,aAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAAA,CAAA,aAAA;GAAA,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UC3GlC;EAiHA,QAAA,CAAA,47RAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDbY;GAAe,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;GAAA,SAAA;IAAA;IAAA;IAAA;GAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,eAEzB,CAAC,iBAAiB;GAAC;GAAyB;GAAoB;EAAkB,CAAC,CAAC;EAAC,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKzF,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAVjC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAmB,YACjB;GAAI,SACP,CAAC,iBAAiB,aAAa;GAAC,eAE1B,CAAC,iBAAiB;IAAC;IAAyB;IAAoB;GAAkB,CAAC,CAAC;GAAC,iBAGnF,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,47RAAA;EAAA,CAAA;CAoHU,CAAA;CAAA,sBAAA,CAAA;CAAA,gBAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,SAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,eAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,SAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,gBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,iBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,uBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,gBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,cAAA;EAAA,CAAA;EAAA,gBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,gBAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,eAAa,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-next-step-card.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/next-step-card/next-step-card.component.ts","../../../../libs/angular-ui-kit/src/lib/next-step-card/next-step-card.component.html"],"sourcesContent":["import {\n AfterViewChecked,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n computed,\n effect,\n input,\n isDevMode,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@lifecorner/angular-ui-kit/button';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_RIGHT, ICON_EXTERNAL_LINK, ICON_INFORMATION_CIRCLE } from '@lifecorner/angular-ui-kit/icons';\n\nexport type NextStepCardTone = 'neutral' | 'primary' | 'success' | 'warning' | 'info';\n\n/**\n * Appearance of the card.\n * - `default`: white surface, hairline border, 4 px tonal rail, 36 px tinted bubble\n * - `soft`: tinted fill per tone, radius 24 px (28 px from 1024 px), no rail,\n * border or shadow, a larger white bubble with a 1 px ring (the \"Weite\" look)\n */\nexport type NextStepCardVariant = 'default' | 'soft';\n\n/**\n * How several actions are laid out.\n * - `inline`: side by side at the end of the card; below 480 px card width in\n * their own row, stretched\n * - `stacked`: always in their own row, one per line at equal width, 8 px apart\n */\nexport type NextStepCardActionsLayout = 'inline' | 'stacked';\n\n/**\n * Weight of the two built-in actions.\n * - `default`: a filled primary and a ghost secondary with a chevron, the\n * primary last\n * - `equal`: two answers of the same weight (a question such as „Teilen?“):\n * both `outline` in the primary tone at `actionSize`, the primary first,\n * no chevron\n */\nexport type NextStepCardActionsStyle = 'default' | 'equal';\n\n/** Element that renders the title (semantics only, the look stays the same). */\nexport type NextStepCardTitleTag = 'div' | 'h2' | 'h3';\n\n/** Size of the built-in action buttons (`sm` 32 px, `md` 42 px, `lg` 48.5 px). */\nexport type NextStepCardActionSize = 'sm' | 'md' | 'lg';\n\n/**\n * Next-step card — the single status-and-action surface of a page: \"where does\n * this stand, and what is the one next step?\".\n *\n * Features:\n * - Tonal accent rail (4px left) + tinted icon bubble, token colors only\n * - Title, message (string input or default slot for markup)\n * - Primary action (with loading / disabled + mandatory disabled reason),\n * ghost secondary action, or an external link instead of the primary button\n * - `[slot='blockers']`: rows inside the card under a subtle divider (dot\n * prefix); each projected element with `slot=\"blockers\"` becomes one row —\n * blockers are rows IN the card, never additional banners\n * - `[slot='meta']`: one footer line (icon + text)\n * - `[slot='actions']`: fully replaces the built-in action buttons\n * - `[slot='body']`: content below the message without the message's text\n * styles, so form fields, lists or a description list keep their own look\n * - `role=\"region\"` labelled by the title; optional polite live announcement\n * of title changes via `announce`\n * - Narrow layout: below 480 px of card width (a CSS container query on the\n * host) the icon sits beside the title, message, body, blockers and meta\n * take the full inner width, the inline padding drops to `padding-md`, and\n * the actions take their own row with every action stretched. A projected\n * `fullWidth` button gets its own row at every width.\n * - `variant=\"soft\"`: the tinted card of the \"Weite\" look; `actionsLayout`\n * `stacked` for several equal-width actions; `titleTag` for a heading\n * - `actionsStyle=\"equal\"` (3.16, BA-5): a question with two answers of the\n * same weight, both outline buttons in the primary tone, primary first\n * - `focusTitle()` (3.33): moves focus to the title (`tabindex=\"-1\"`, out of\n * the Tab order) after an action replaced the card's state, so focus\n * doesn't fall back to the page (WCAG 2.4.3)\n *\n * The host is a size container (`container-type: inline-size`) and takes the\n * full inline size of its parent.\n *\n * Usage rule: exactly ONE next-step card per page.\n *\n * @example\n * ```html\n * <lc-next-step-card\n * tone=\"warning\"\n * icon=\"clock\"\n * cardTitle=\"Wartet auf Freigabe\"\n * message=\"Der Entwurf ist vollständig und kann geprüft werden.\"\n * primaryLabel=\"Freigeben\"\n * secondaryLabel=\"Änderungen anfordern\"\n * (primaryClick)=\"approve()\"\n * />\n * ```\n */\n@Component({\n selector: 'lc-next-step-card',\n standalone: true,\n imports: [ButtonComponent, IconComponent],\n // Its default `icon` and the action glyphs.\n viewProviders: [ɵprovideKitIcons([ICON_INFORMATION_CIRCLE, ICON_CHEVRON_RIGHT, ICON_EXTERNAL_LINK])],\n templateUrl: './next-step-card.component.html',\n styleUrls: ['./next-step-card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NextStepCardComponent implements AfterViewChecked {\n /**\n * Tone of the accent rail and icon bubble. Colors come exclusively from the\n * semantic tokens (`--color-*` rail, `--color-*-subtle` bubble tint,\n * `--color-on-*-subtle` icon ink).\n * @default 'neutral'\n */\n tone = input<NextStepCardTone>('neutral');\n\n /**\n * Appearance: `default` (surface, border, 4 px rail) or `soft` (tinted fill\n * per tone, radius 24 px / 28 px from 1024 px, no rail, border or shadow,\n * a 48 px white bubble with a 1 px ring; 56 px from 1024 px, 60 px from\n * 1440 px). Soft fills come from `--color-next-step-soft-neutral` /\n * `--color-next-step-soft-primary` and the tone's `-subtle` token; the bubble\n * from `--color-bubble`, `--color-bubble-ring`, `--color-bubble-icon`.\n * @default 'default'\n */\n variant = input<NextStepCardVariant>('default');\n\n /** Icon name for the round bubble (36 px; 48–60 px in the soft variant). */\n icon = input<string>('information-circle');\n\n /** Title (1rem semibold; 20–28 px bold in the soft variant). Also the card's accessible name. */\n cardTitle = input.required<string>();\n\n /**\n * Element that renders the title: `div` (default), `h2` or `h3`. Use a\n * heading when the page has sections, so heading navigation reaches the\n * most important item. Semantics only, the look stays the same.\n * @default 'div'\n */\n titleTag = input<NextStepCardTitleTag>('div');\n\n /**\n * Layout of several actions. `inline`: side by side at the end of the card\n * (below 480 px card width in their own row, stretched). `stacked`: always\n * in their own row, one per line at equal width, 8 px apart (e.g. a list of\n * sign-in methods).\n * @default 'inline'\n */\n actionsLayout = input<NextStepCardActionsLayout>('inline');\n\n /**\n * Size of the built-in action buttons and link: `sm` (32 px, the 3.2\n * default), `md` (42 px) or `lg` (48.5 px, meets the 44 px touch target).\n * @default 'sm'\n */\n actionSize = input<NextStepCardActionSize>('sm');\n\n /**\n * Weight of the built-in actions. `default`: filled primary, ghost secondary\n * with a chevron, primary last. `equal`: two answers of the same weight, both\n * `outline` in the primary tone at `actionSize`, primary first, no chevron\n * (`primaryClick`, `secondaryClick`, `primaryLoading`, `primaryDisabled` and\n * `announce` work as before). Use `actionSize=\"lg\"` (48.5 px, the 44 px\n * target; a dev warning otherwise). No effect on `[slot='actions']`.\n * @default 'default'\n */\n actionsStyle = input<NextStepCardActionsStyle>('default');\n\n /** Message below the title. For markup, use the default slot instead. */\n message = input<string>();\n\n /** Label of the primary action. Omit to render no primary button. */\n primaryLabel = input<string>();\n\n /** Optional leading icon of the primary action. */\n primaryIcon = input<string>();\n\n /** Shows a spinner on the primary action. */\n primaryLoading = input<boolean>(false);\n\n /**\n * Disables the primary action. A disabled primary REQUIRES\n * `primaryDisabledReason`; disabled without a reason logs a dev warning.\n */\n primaryDisabled = input<boolean>(false);\n\n /** Why the primary action is disabled — shown as tooltip on the button. */\n primaryDisabledReason = input<string>('');\n\n /** Label of the ghost secondary action (rendered with a chevron). */\n secondaryLabel = input<string>();\n\n /**\n * Label of an external link rendered instead of the primary button\n * (opens in a new tab). Requires `linkHref`.\n */\n linkLabel = input<string>();\n\n /** Target URL of the external link. */\n linkHref = input<string>();\n\n /**\n * Where the link opens: `_blank` (a new tab, with `rel=\"noopener noreferrer\"`,\n * the 3.2 behaviour) or `_self` (the same tab, no `rel`).\n * @default '_blank'\n */\n linkTarget = input<'_blank' | '_self'>('_blank');\n\n /**\n * Announce title changes to screen readers via `aria-live=\"polite\"` —\n * for cards whose state advances in place.\n * @default false\n */\n announce = input<boolean>(false);\n\n /** Emits when the primary action is clicked. */\n primaryClick = output<void>();\n\n /** Emits when the secondary action is clicked. */\n secondaryClick = output<void>();\n\n private actionsSlot = viewChild<ElementRef<HTMLElement>>('actionsSlot');\n\n /** The title element of whichever `titleTag` branch is rendered. */\n private titleEl = viewChild<ElementRef<HTMLElement>>('titleEl');\n\n /**\n * Moves focus to the card's title (3.33), e.g. after an action replaced the\n * card's state, so focus doesn't fall back to the page (WCAG 2.4.3). Gives\n * the title `tabindex=\"-1\"` first: it stays out of the Tab order. Call it\n * after the new state has rendered, e.g.\n * `afterNextRender(() => this.card().focusTitle(), { injector })` with\n * `card = viewChild.required(NextStepCardComponent)`. Does nothing while no\n * title is rendered.\n */\n focusTitle(): void {\n const title = this.titleEl()?.nativeElement;\n if (!title) return;\n title.setAttribute('tabindex', '-1');\n title.focus();\n }\n\n /**\n * Whether content was projected into `[slot='actions']` — projected actions\n * fully replace the built-in buttons.\n */\n protected hasProjectedActions = signal(false);\n\n protected cardClasses = computed(() =>\n [\n 'lc-next-step-card',\n `lc-next-step-card--${this.tone()}`,\n this.variant() === 'soft' ? 'lc-next-step-card--soft' : null,\n this.actionsLayout() === 'stacked' ? 'lc-next-step-card--actions-stacked' : null,\n ]\n .filter(Boolean)\n .join(' '),\n );\n\n /** `rel` of the external link: only a new tab needs `noopener noreferrer`. */\n protected linkRel = computed(() => (this.linkTarget() === '_blank' ? 'noopener noreferrer' : null));\n\n protected showLink = computed(() => !!(this.linkLabel() && this.linkHref()));\n\n /**\n * Whether the card renders any action: hides the empty actions box, so the\n * narrow layout gets no empty row.\n */\n protected hasActions = computed(\n () =>\n this.hasProjectedActions() ||\n !!this.secondaryLabel() ||\n this.showLink() ||\n !!this.primaryLabel(),\n );\n\n constructor() {\n effect(() => {\n if (isDevMode() && this.primaryDisabled() && !this.primaryDisabledReason()) {\n console.warn(\n '[lc-next-step-card] `primaryDisabled` is set without a `primaryDisabledReason`. ' +\n 'A disabled primary action must explain why (shown as tooltip).',\n );\n }\n });\n effect(() => {\n if (isDevMode() && this.actionsStyle() === 'equal' && this.actionSize() !== 'lg') {\n console.warn('[lc-next-step-card] actionsStyle=\"equal\" needs actionSize=\"lg\" (44 px)');\n }\n });\n }\n\n ngAfterViewChecked(): void {\n // Projected [slot='actions'] content replaces the built-in buttons. The\n // signal write is equality-guarded, so unchanged checks are no-ops.\n const el = this.actionsSlot()?.nativeElement;\n this.hasProjectedActions.set(!!el && el.childElementCount > 0);\n }\n}\n","<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n </div>\n\n <div class=\"lc-next-step-card__body\">\n @switch (titleTag()) {\n @case ('h2') {\n <h2 #titleEl class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h2>\n }\n @case ('h3') {\n <h3 #titleEl class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </h3>\n }\n @default {\n <div #titleEl class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n {{ cardTitle() }}\n </div>\n }\n }\n @if (message()) {\n <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n }\n <div class=\"lc-next-step-card__custom-message\">\n <ng-content />\n </div>\n <!-- Form-safe body: no inherited message text styles. -->\n <div class=\"lc-next-step-card__content\">\n <ng-content select=\"[slot='body']\" />\n </div>\n <div class=\"lc-next-step-card__blockers\">\n <ng-content select=\"[slot='blockers']\" />\n </div>\n <div class=\"lc-next-step-card__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n </div>\n\n <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n @if (!hasProjectedActions() && actionsStyle() === 'equal') {\n <!-- Two answers of the same weight (3.16, BA-5): the primary first, both outline in the primary tone. -->\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"outline\"\n tone=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n @if (secondaryLabel()) {\n <lc-button variant=\"outline\" tone=\"primary\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n </lc-button>\n }\n } @else if (!hasProjectedActions()) {\n @if (secondaryLabel()) {\n <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n {{ secondaryLabel() }}\n <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </lc-button>\n }\n @if (showLink()) {\n <a\n class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n [href]=\"linkHref()\"\n [attr.target]=\"linkTarget()\"\n [attr.rel]=\"linkRel()\"\n >\n <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n {{ linkLabel() }}\n </a>\n } @else if (primaryLabel()) {\n <lc-button\n variant=\"primary\"\n [size]=\"actionSize()\"\n [loading]=\"primaryLoading()\"\n [disabled]=\"primaryDisabled()\"\n [disabledReason]=\"primaryDisabledReason()\"\n (clicked)=\"primaryClick.emit()\"\n >\n @if (primaryIcon()) {\n <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n }\n {{ primaryLabel() }}\n </lc-button>\n }\n }\n </div>\n</div>\n"],"mappings":"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"}
|
|
@@ -355,7 +355,7 @@ var NotificationCenterComponent = class NotificationCenterComponent {
|
|
|
355
355
|
},
|
|
356
356
|
ngImport: i0,
|
|
357
357
|
template: "<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">{{ markAllReadLabel() }}</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">{{ clearAllLabel() }}</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <lc-search-input\n class=\"lc-nc__search-field\"\n [placeholder]=\"searchPlaceholder()\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n [attr.aria-pressed]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >{{ filterAllLabel() }} ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n [attr.aria-pressed]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >{{ filterErrorLabel() }} ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n [attr.aria-pressed]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >{{ filterWarningLabel() }} ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n [attr.aria-pressed]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >{{ filterSuccessLabel() }} ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n [attr.aria-pressed]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >{{ filterInfoLabel() }} ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else {\n @for (group of groupedNotifications(); track group.category ?? '') {\n <div class=\"lc-nc__group\">\n @if (group.category !== null) {\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n }\n <!-- The whole row is a mouse target; the title is a real button so\n keyboard and screen-reader users can activate it (its click bubbles\n to the row), and the dismiss/action buttons stop propagation. -->\n @for (n of group.items; track n.id) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- row is a mouse target; its title is a real button for keyboard users -->\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\" [decorative]=\"true\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <button type=\"button\" class=\"lc-nc__item-title\">{{ n.title }}</button>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n [attr.aria-label]=\"dismissAriaLabel() + ' ' + n.title\"\n >×</button>\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n",
|
|
358
|
-
styles: [":host{display:block}.lc-nc{border:1px solid var(--color-divider);border-radius:var(--border-radius-lg);background-color:var(--color-surface);background-image:var(--gradient-surface);overflow:hidden}.lc-nc__header{display:flex;flex-wrap:wrap;row-gap:var(--spacing-1);align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-text-primary)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--border-radius-full);background:var(--color-error-fill);color:var(--color-on-error);font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px;margin-inline-start:auto}.lc-nc__action-btn{position:relative;border:none;background:none;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:before{content:\"\";position:absolute;inset-inline:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2);top:calc(50% - var(--size-min-touch-height, 2.75rem) / 2);bottom:calc(50% - var(--size-min-touch-height, 2.75rem) / 2)}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:#9d0e0e29}.lc-nc__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:9px 16px;border-bottom:1px solid var(--color-divider);overflow-x:auto}.lc-nc__filter{position:relative;border:1px solid var(--color-divider);background:transparent;padding:4px 10px;border-radius:var(--border-radius-full);font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);transition:all .15s}.lc-nc__filter:before{content:\"\";position:absolute;inset-inline:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2);top:calc(50% - var(--size-min-touch-height, 2.75rem) / 2);bottom:calc(50% - var(--size-min-touch-height, 2.75rem) / 2)}.lc-nc__filter:hover:not(.lc-nc__filter--active){background:var(--color-surface-2)}.lc-nc__filter--active{background:var(--color-primary-fill);color:var(--color-on-primary);border-color:var(--color-primary-500)}.lc-nc__filter:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-nc__filter
|
|
358
|
+
styles: [":host{display:block}.lc-nc{border:1px solid var(--color-divider);border-radius:var(--border-radius-lg);background-color:var(--color-surface);background-image:var(--gradient-surface);overflow:hidden}.lc-nc__header{display:flex;flex-wrap:wrap;row-gap:var(--spacing-1);align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-text-primary)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--border-radius-full);background:var(--color-error-fill);color:var(--color-on-error);font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px;margin-inline-start:auto}.lc-nc__action-btn{position:relative;border:none;background:none;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:before{content:\"\";position:absolute;inset-inline:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2);top:calc(50% - var(--size-min-touch-height, 2.75rem) / 2);bottom:calc(50% - var(--size-min-touch-height, 2.75rem) / 2)}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:#9d0e0e29}.lc-nc__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:9px 16px;border-bottom:1px solid var(--color-divider);overflow-x:auto}.lc-nc__filter{position:relative;border:1px solid var(--color-divider);background:transparent;padding:4px 10px;border-radius:var(--border-radius-full);font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);transition:all .15s}.lc-nc__filter:before{content:\"\";position:absolute;inset-inline:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2);top:calc(50% - var(--size-min-touch-height, 2.75rem) / 2);bottom:calc(50% - var(--size-min-touch-height, 2.75rem) / 2)}.lc-nc__filter:hover:not(.lc-nc__filter--active){background:var(--color-surface-2)}.lc-nc__filter--active{background:var(--color-primary-fill);color:var(--color-on-primary);border-color:var(--color-primary-500)}.lc-nc__filter:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-nc__filter[aria-pressed=true]{text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:Highlight}}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);background:var(--color-surface-2);border-bottom:1px solid var(--color-divider)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-divider);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-surface-2)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread,.lc-nc__item--unread:hover{background:var(--color-surface-selected)}.lc-nc__item--urgent{border-left:3px solid var(--color-error)}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-on-info-subtle)}.lc-nc__item-icon--success{color:var(--color-on-success-subtle)}.lc-nc__item-icon--warning{color:var(--color-on-warning-subtle)}.lc-nc__item-icon--error{color:var(--color-on-error-subtle)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{display:block;min-width:0;max-width:100%;padding:0;border:none;background:none;font:inherit;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;text-align:left;color:var(--color-text-primary);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item-title:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__item-title:focus-visible{border-radius:var(--border-radius-sm)}.lc-nc__item--unread .lc-nc__item-title{font-weight:600}.lc-nc__item-priority{font-size:.625rem;font-weight:600;padding:1px 5px;border-radius:var(--border-radius-sm);flex-shrink:0;text-transform:uppercase}.lc-nc__item-priority--high{background:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.lc-nc__item-priority--urgent{background:var(--color-error-subtle);color:var(--color-on-error-subtle)}.lc-nc__item-priority--low{background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item-message{margin:2px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-nc__item-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.lc-nc__item-time{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-nc__item--unread .lc-nc__item-message,.lc-nc__item--unread .lc-nc__item-time{color:var(--color-text-secondary)}.lc-nc__item-category{font-size:.625rem;padding:1px 5px;border-radius:var(--border-radius-sm);background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item--unread .lc-nc__item-priority,.lc-nc__item--unread .lc-nc__item-category{background-color:var(--color-surface)}.lc-nc__item--unread .lc-nc__item-priority--high{background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle))}.lc-nc__item--unread .lc-nc__item-priority--urgent{background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle))}.lc-nc__item--unread .lc-nc__item-priority--low,.lc-nc__item--unread .lc-nc__item-category{background-image:linear-gradient(var(--color-surface-hover),var(--color-surface-hover))}.lc-nc__item-action{border:none;background:none;padding:0;font-size:.6875rem;font-weight:600;color:var(--color-primary-600);cursor:pointer}.lc-nc__item-action:hover{text-decoration:underline}.lc-nc__item-action:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__item-action:focus-visible{border-radius:var(--border-radius-sm)}.lc-nc__item-dismiss{flex-shrink:0;width:24px;height:24px;border:none;border-radius:var(--border-radius-sm);background:transparent;cursor:pointer;font-size:16px;color:var(--color-text-tertiary);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;opacity:0}.lc-nc__item:hover .lc-nc__item-dismiss,.lc-nc__item:focus-within .lc-nc__item-dismiss{opacity:1}.lc-nc__item-dismiss:hover{background:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-nc__item-dismiss:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-nc__item-title:focus-visible,.lc-nc__item-action:focus-visible,.lc-nc__item-dismiss:focus-visible,.lc-nc__action-btn:focus-visible,.lc-nc__filter:focus-visible{outline-color:Highlight}}.lc-nc__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--color-text-tertiary)}.lc-nc__empty-icon{font-size:32px;opacity:.5}.lc-nc__empty-text{font-size:var(--typography-font-size-sm, .875rem)}\n"],
|
|
359
359
|
dependencies: [{
|
|
360
360
|
kind: "component",
|
|
361
361
|
type: IconComponent,
|
|
@@ -418,7 +418,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
418
418
|
])],
|
|
419
419
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
420
420
|
template: "<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">{{ markAllReadLabel() }}</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">{{ clearAllLabel() }}</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <lc-search-input\n class=\"lc-nc__search-field\"\n [placeholder]=\"searchPlaceholder()\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n [attr.aria-pressed]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >{{ filterAllLabel() }} ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n [attr.aria-pressed]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >{{ filterErrorLabel() }} ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n [attr.aria-pressed]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >{{ filterWarningLabel() }} ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n [attr.aria-pressed]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >{{ filterSuccessLabel() }} ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n [attr.aria-pressed]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >{{ filterInfoLabel() }} ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else {\n @for (group of groupedNotifications(); track group.category ?? '') {\n <div class=\"lc-nc__group\">\n @if (group.category !== null) {\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n }\n <!-- The whole row is a mouse target; the title is a real button so\n keyboard and screen-reader users can activate it (its click bubbles\n to the row), and the dismiss/action buttons stop propagation. -->\n @for (n of group.items; track n.id) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- row is a mouse target; its title is a real button for keyboard users -->\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\" [decorative]=\"true\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <button type=\"button\" class=\"lc-nc__item-title\">{{ n.title }}</button>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n [attr.aria-label]=\"dismissAriaLabel() + ' ' + n.title\"\n >×</button>\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n",
|
|
421
|
-
styles: [":host{display:block}.lc-nc{border:1px solid var(--color-divider);border-radius:var(--border-radius-lg);background-color:var(--color-surface);background-image:var(--gradient-surface);overflow:hidden}.lc-nc__header{display:flex;flex-wrap:wrap;row-gap:var(--spacing-1);align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-text-primary)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--border-radius-full);background:var(--color-error-fill);color:var(--color-on-error);font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px;margin-inline-start:auto}.lc-nc__action-btn{position:relative;border:none;background:none;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:before{content:\"\";position:absolute;inset-inline:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2);top:calc(50% - var(--size-min-touch-height, 2.75rem) / 2);bottom:calc(50% - var(--size-min-touch-height, 2.75rem) / 2)}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:#9d0e0e29}.lc-nc__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:9px 16px;border-bottom:1px solid var(--color-divider);overflow-x:auto}.lc-nc__filter{position:relative;border:1px solid var(--color-divider);background:transparent;padding:4px 10px;border-radius:var(--border-radius-full);font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);transition:all .15s}.lc-nc__filter:before{content:\"\";position:absolute;inset-inline:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2);top:calc(50% - var(--size-min-touch-height, 2.75rem) / 2);bottom:calc(50% - var(--size-min-touch-height, 2.75rem) / 2)}.lc-nc__filter:hover:not(.lc-nc__filter--active){background:var(--color-surface-2)}.lc-nc__filter--active{background:var(--color-primary-fill);color:var(--color-on-primary);border-color:var(--color-primary-500)}.lc-nc__filter:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-nc__filter
|
|
421
|
+
styles: [":host{display:block}.lc-nc{border:1px solid var(--color-divider);border-radius:var(--border-radius-lg);background-color:var(--color-surface);background-image:var(--gradient-surface);overflow:hidden}.lc-nc__header{display:flex;flex-wrap:wrap;row-gap:var(--spacing-1);align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-text-primary)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--border-radius-full);background:var(--color-error-fill);color:var(--color-on-error);font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px;margin-inline-start:auto}.lc-nc__action-btn{position:relative;border:none;background:none;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:before{content:\"\";position:absolute;inset-inline:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2);top:calc(50% - var(--size-min-touch-height, 2.75rem) / 2);bottom:calc(50% - var(--size-min-touch-height, 2.75rem) / 2)}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:#9d0e0e29}.lc-nc__action-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:9px 16px;border-bottom:1px solid var(--color-divider);overflow-x:auto}.lc-nc__filter{position:relative;border:1px solid var(--color-divider);background:transparent;padding:4px 10px;border-radius:var(--border-radius-full);font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);transition:all .15s}.lc-nc__filter:before{content:\"\";position:absolute;inset-inline:min(0px,(100% - var(--size-min-touch-height, 2.75rem)) / 2);top:calc(50% - var(--size-min-touch-height, 2.75rem) / 2);bottom:calc(50% - var(--size-min-touch-height, 2.75rem) / 2)}.lc-nc__filter:hover:not(.lc-nc__filter--active){background:var(--color-surface-2)}.lc-nc__filter--active{background:var(--color-primary-fill);color:var(--color-on-primary);border-color:var(--color-primary-500)}.lc-nc__filter:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-nc__filter[aria-pressed=true]{text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:Highlight}}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);background:var(--color-surface-2);border-bottom:1px solid var(--color-divider)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-divider);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-surface-2)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread,.lc-nc__item--unread:hover{background:var(--color-surface-selected)}.lc-nc__item--urgent{border-left:3px solid var(--color-error)}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-on-info-subtle)}.lc-nc__item-icon--success{color:var(--color-on-success-subtle)}.lc-nc__item-icon--warning{color:var(--color-on-warning-subtle)}.lc-nc__item-icon--error{color:var(--color-on-error-subtle)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{display:block;min-width:0;max-width:100%;padding:0;border:none;background:none;font:inherit;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;text-align:left;color:var(--color-text-primary);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item-title:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__item-title:focus-visible{border-radius:var(--border-radius-sm)}.lc-nc__item--unread .lc-nc__item-title{font-weight:600}.lc-nc__item-priority{font-size:.625rem;font-weight:600;padding:1px 5px;border-radius:var(--border-radius-sm);flex-shrink:0;text-transform:uppercase}.lc-nc__item-priority--high{background:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.lc-nc__item-priority--urgent{background:var(--color-error-subtle);color:var(--color-on-error-subtle)}.lc-nc__item-priority--low{background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item-message{margin:2px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-nc__item-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.lc-nc__item-time{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-nc__item--unread .lc-nc__item-message,.lc-nc__item--unread .lc-nc__item-time{color:var(--color-text-secondary)}.lc-nc__item-category{font-size:.625rem;padding:1px 5px;border-radius:var(--border-radius-sm);background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item--unread .lc-nc__item-priority,.lc-nc__item--unread .lc-nc__item-category{background-color:var(--color-surface)}.lc-nc__item--unread .lc-nc__item-priority--high{background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle))}.lc-nc__item--unread .lc-nc__item-priority--urgent{background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle))}.lc-nc__item--unread .lc-nc__item-priority--low,.lc-nc__item--unread .lc-nc__item-category{background-image:linear-gradient(var(--color-surface-hover),var(--color-surface-hover))}.lc-nc__item-action{border:none;background:none;padding:0;font-size:.6875rem;font-weight:600;color:var(--color-primary-600);cursor:pointer}.lc-nc__item-action:hover{text-decoration:underline}.lc-nc__item-action:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__item-action:focus-visible{border-radius:var(--border-radius-sm)}.lc-nc__item-dismiss{flex-shrink:0;width:24px;height:24px;border:none;border-radius:var(--border-radius-sm);background:transparent;cursor:pointer;font-size:16px;color:var(--color-text-tertiary);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;opacity:0}.lc-nc__item:hover .lc-nc__item-dismiss,.lc-nc__item:focus-within .lc-nc__item-dismiss{opacity:1}.lc-nc__item-dismiss:hover{background:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-nc__item-dismiss:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-nc__item-title:focus-visible,.lc-nc__item-action:focus-visible,.lc-nc__item-dismiss:focus-visible,.lc-nc__action-btn:focus-visible,.lc-nc__filter:focus-visible{outline-color:Highlight}}.lc-nc__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--color-text-tertiary)}.lc-nc__empty-icon{font-size:32px;opacity:.5}.lc-nc__empty-text{font-size:var(--typography-font-size-sm, .875rem)}\n"]
|
|
422
422
|
}]
|
|
423
423
|
}],
|
|
424
424
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-notification-center.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/notification-center/notification-center.component.ts","../../../../libs/angular-ui-kit/src/lib/notification-center/notification-center.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n signal,\n computed,\n output,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK_CIRCLE,\n ICON_CIRCLE_X,\n ICON_EXCLAMATION_TRIANGLE,\n ICON_INFORMATION_CIRCLE,\n} from '@lifecorner/angular-ui-kit/icons';\nimport { SearchInputComponent } from '@lifecorner/angular-ui-kit/search-input';\n\nexport type NotificationType = 'info' | 'success' | 'warning' | 'error';\nexport type NotificationPriority = 'low' | 'normal' | 'high' | 'urgent';\n\nexport interface Notification {\n id: string;\n title: string;\n message?: string;\n type?: NotificationType;\n priority?: NotificationPriority;\n timestamp: Date;\n read?: boolean;\n icon?: string;\n category?: string;\n actionLabel?: string;\n actionUrl?: string;\n}\n\nconst TYPE_ICONS: Record<NotificationType, string> = {\n info: 'information-circle',\n success: 'check-circle',\n warning: 'exclamation-triangle',\n error: 'x-circle',\n};\n\nconst PRIORITY_LABELS: Record<NotificationPriority, string> = {\n low: 'Low',\n normal: 'Normal',\n high: 'High',\n urgent: 'Urgent',\n};\n\n@Component({\n selector: 'lc-notification-center',\n standalone: true,\n imports: [IconComponent, SearchInputComponent],\n viewProviders: [ɵprovideKitIcons([ICON_INFORMATION_CIRCLE, ICON_CHECK_CIRCLE, ICON_EXCLAMATION_TRIANGLE, ICON_CIRCLE_X])],\n templateUrl: './notification-center.component.html',\n styleUrls: ['./notification-center.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NotificationCenterComponent {\n readonly notifications = input.required<Notification[]>();\n readonly title = input('Notifications');\n readonly showFilter = input(true);\n readonly showTimestamp = input(true);\n readonly showPriority = input(false);\n readonly emptyMessage = input('No notifications');\n readonly maxHeight = input('480px');\n readonly groupByCategory = input(false);\n /** Locale used for absolute dates (older than a week). */\n readonly dateLocale = input('de-DE');\n\n /** Label of the mark-all-read action. */\n readonly markAllReadLabel = input('Mark all read');\n\n /** Label of the clear-all action. */\n readonly clearAllLabel = input('Clear all');\n\n /** Placeholder of the search field. */\n readonly searchPlaceholder = input('Search notifications…');\n\n /** Label of the \"all\" filter (the count follows in parentheses). */\n readonly filterAllLabel = input('All');\n\n /** Label of the error filter. */\n readonly filterErrorLabel = input('Error');\n\n /** Label of the warning filter. */\n readonly filterWarningLabel = input('Warning');\n\n /** Label of the success filter. */\n readonly filterSuccessLabel = input('Success');\n\n /** Label of the info filter. */\n readonly filterInfoLabel = input('Info');\n\n /** Accessible name of a dismiss button, followed by the notification's title. */\n readonly dismissAriaLabel = input('Dismiss notification:');\n\n /** Group header for notifications without `category` (`groupByCategory`). */\n readonly otherCategoryLabel = input('Other');\n\n /** Priority badge for `low` (`showPriority`). */\n readonly lowPriorityLabel = input('Low');\n\n /** Priority badge for `high` (`showPriority`). */\n readonly highPriorityLabel = input('High');\n\n /** Priority badge for `urgent` (`showPriority`). */\n readonly urgentPriorityLabel = input('Urgent');\n\n /** Timestamp of notifications younger than a minute. */\n readonly justNowLabel = input('Just now');\n\n /** Timestamp under an hour; `{n}` is replaced by the minutes. */\n readonly minutesAgoLabel = input('{n}m ago');\n\n /** Timestamp under a day; `{n}` is replaced by the hours. */\n readonly hoursAgoLabel = input('{n}h ago');\n\n /** Timestamp under a week; `{n}` is replaced by the days (older ones show the date in `dateLocale`). */\n readonly daysAgoLabel = input('{n}d ago');\n\n readonly notificationClick = output<Notification>();\n readonly notificationDismiss = output<string>();\n readonly notificationAction = output<Notification>();\n readonly markAllRead = output<void>();\n readonly clearAll = output<void>();\n\n protected activeFilter = signal<NotificationType | 'all'>('all');\n protected searchQuery = signal('');\n\n protected readonly unreadCount = computed(() =>\n this.notifications().filter(n => !n.read).length\n );\n\n protected readonly filteredNotifications = computed(() => {\n let items = this.notifications();\n const filter = this.activeFilter();\n const query = this.searchQuery().toLowerCase().trim();\n\n if (filter !== 'all') {\n items = items.filter(n => n.type === filter);\n }\n\n if (query) {\n items = items.filter(\n n =>\n n.title.toLowerCase().includes(query) ||\n n.message?.toLowerCase().includes(query) ||\n n.category?.toLowerCase().includes(query)\n );\n }\n\n // Copy before sorting: without a filter `items` is the caller's array and\n // `sort` would reorder it in place\n return [...items].sort((a, b) => {\n const prio = this.priorityWeight(b.priority) - this.priorityWeight(a.priority);\n if (prio !== 0) return prio;\n return b.timestamp.getTime() - a.timestamp.getTime();\n });\n });\n\n /**\n * The list as rendered: one group per category, or a single group without a\n * category (`null`, no header) when grouping is off.\n */\n protected readonly groupedNotifications = computed((): { category: string | null; items: Notification[] }[] => {\n const items = this.filteredNotifications();\n if (!this.groupByCategory()) return [{ category: null, items }];\n const map = new Map<string, Notification[]>();\n for (const n of items) {\n const cat = n.category || this.otherCategoryLabel();\n if (!map.has(cat)) map.set(cat, []);\n map.get(cat)!.push(n);\n }\n return Array.from(map.entries()).map(([category, items]) => ({ category, items }));\n });\n\n protected readonly filterCounts = computed(() => {\n const items = this.notifications();\n return {\n all: items.length,\n info: items.filter(n => n.type === 'info').length,\n success: items.filter(n => n.type === 'success').length,\n warning: items.filter(n => n.type === 'warning').length,\n error: items.filter(n => n.type === 'error').length,\n };\n });\n\n protected readonly hasNotifications = computed(() => this.filteredNotifications().length > 0);\n\n protected getTypeIcon(type?: NotificationType): string {\n return type ? TYPE_ICONS[type] : 'information-circle';\n }\n\n protected getPriorityLabel(priority?: NotificationPriority): string {\n switch (priority) {\n case 'low':\n return this.lowPriorityLabel();\n case 'high':\n return this.highPriorityLabel();\n case 'urgent':\n return this.urgentPriorityLabel();\n default:\n return priority ? PRIORITY_LABELS[priority] : '';\n }\n }\n\n protected formatTime(date: Date): string {\n const now = new Date();\n const diff = now.getTime() - date.getTime();\n const mins = Math.floor(diff / 60000);\n if (mins < 1) return this.justNowLabel();\n if (mins < 60) return this.minutesAgoLabel().replace('{n}', String(mins));\n const hours = Math.floor(mins / 60);\n if (hours < 24) return this.hoursAgoLabel().replace('{n}', String(hours));\n const days = Math.floor(hours / 24);\n if (days < 7) return this.daysAgoLabel().replace('{n}', String(days));\n return date.toLocaleDateString(this.dateLocale(), { day: '2-digit', month: '2-digit', year: 'numeric' });\n }\n\n protected setFilter(filter: NotificationType | 'all'): void {\n this.activeFilter.set(filter);\n }\n\n protected onSearch(query: string): void {\n this.searchQuery.set(query);\n }\n\n protected onClick(notification: Notification): void {\n this.notificationClick.emit(notification);\n }\n\n protected onDismiss(id: string, event: Event): void {\n event.stopPropagation();\n this.notificationDismiss.emit(id);\n }\n\n protected onAction(notification: Notification, event: Event): void {\n event.stopPropagation();\n this.notificationAction.emit(notification);\n }\n\n protected onMarkAllRead(): void {\n this.markAllRead.emit();\n }\n\n protected onClearAll(): void {\n this.clearAll.emit();\n }\n\n private priorityWeight(p?: NotificationPriority): number {\n switch (p) {\n case 'urgent': return 4;\n case 'high': return 3;\n case 'normal': return 2;\n case 'low': return 1;\n default: return 2;\n }\n }\n}\n","<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">{{ markAllReadLabel() }}</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">{{ clearAllLabel() }}</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <lc-search-input\n class=\"lc-nc__search-field\"\n [placeholder]=\"searchPlaceholder()\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n [attr.aria-pressed]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >{{ filterAllLabel() }} ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n [attr.aria-pressed]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >{{ filterErrorLabel() }} ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n [attr.aria-pressed]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >{{ filterWarningLabel() }} ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n [attr.aria-pressed]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >{{ filterSuccessLabel() }} ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n [attr.aria-pressed]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >{{ filterInfoLabel() }} ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else {\n @for (group of groupedNotifications(); track group.category ?? '') {\n <div class=\"lc-nc__group\">\n @if (group.category !== null) {\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n }\n <!-- The whole row is a mouse target; the title is a real button so\n keyboard and screen-reader users can activate it (its click bubbles\n to the row), and the dismiss/action buttons stop propagation. -->\n @for (n of group.items; track n.id) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- row is a mouse target; its title is a real button for keyboard users -->\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\" [decorative]=\"true\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <button type=\"button\" class=\"lc-nc__item-title\">{{ n.title }}</button>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n [attr.aria-label]=\"dismissAriaLabel() + ' ' + n.title\"\n >×</button>\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-notification-center.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/notification-center/notification-center.component.ts","../../../../libs/angular-ui-kit/src/lib/notification-center/notification-center.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n signal,\n computed,\n output,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK_CIRCLE,\n ICON_CIRCLE_X,\n ICON_EXCLAMATION_TRIANGLE,\n ICON_INFORMATION_CIRCLE,\n} from '@lifecorner/angular-ui-kit/icons';\nimport { SearchInputComponent } from '@lifecorner/angular-ui-kit/search-input';\n\nexport type NotificationType = 'info' | 'success' | 'warning' | 'error';\nexport type NotificationPriority = 'low' | 'normal' | 'high' | 'urgent';\n\nexport interface Notification {\n id: string;\n title: string;\n message?: string;\n type?: NotificationType;\n priority?: NotificationPriority;\n timestamp: Date;\n read?: boolean;\n icon?: string;\n category?: string;\n actionLabel?: string;\n actionUrl?: string;\n}\n\nconst TYPE_ICONS: Record<NotificationType, string> = {\n info: 'information-circle',\n success: 'check-circle',\n warning: 'exclamation-triangle',\n error: 'x-circle',\n};\n\nconst PRIORITY_LABELS: Record<NotificationPriority, string> = {\n low: 'Low',\n normal: 'Normal',\n high: 'High',\n urgent: 'Urgent',\n};\n\n@Component({\n selector: 'lc-notification-center',\n standalone: true,\n imports: [IconComponent, SearchInputComponent],\n viewProviders: [ɵprovideKitIcons([ICON_INFORMATION_CIRCLE, ICON_CHECK_CIRCLE, ICON_EXCLAMATION_TRIANGLE, ICON_CIRCLE_X])],\n templateUrl: './notification-center.component.html',\n styleUrls: ['./notification-center.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NotificationCenterComponent {\n readonly notifications = input.required<Notification[]>();\n readonly title = input('Notifications');\n readonly showFilter = input(true);\n readonly showTimestamp = input(true);\n readonly showPriority = input(false);\n readonly emptyMessage = input('No notifications');\n readonly maxHeight = input('480px');\n readonly groupByCategory = input(false);\n /** Locale used for absolute dates (older than a week). */\n readonly dateLocale = input('de-DE');\n\n /** Label of the mark-all-read action. */\n readonly markAllReadLabel = input('Mark all read');\n\n /** Label of the clear-all action. */\n readonly clearAllLabel = input('Clear all');\n\n /** Placeholder of the search field. */\n readonly searchPlaceholder = input('Search notifications…');\n\n /** Label of the \"all\" filter (the count follows in parentheses). */\n readonly filterAllLabel = input('All');\n\n /** Label of the error filter. */\n readonly filterErrorLabel = input('Error');\n\n /** Label of the warning filter. */\n readonly filterWarningLabel = input('Warning');\n\n /** Label of the success filter. */\n readonly filterSuccessLabel = input('Success');\n\n /** Label of the info filter. */\n readonly filterInfoLabel = input('Info');\n\n /** Accessible name of a dismiss button, followed by the notification's title. */\n readonly dismissAriaLabel = input('Dismiss notification:');\n\n /** Group header for notifications without `category` (`groupByCategory`). */\n readonly otherCategoryLabel = input('Other');\n\n /** Priority badge for `low` (`showPriority`). */\n readonly lowPriorityLabel = input('Low');\n\n /** Priority badge for `high` (`showPriority`). */\n readonly highPriorityLabel = input('High');\n\n /** Priority badge for `urgent` (`showPriority`). */\n readonly urgentPriorityLabel = input('Urgent');\n\n /** Timestamp of notifications younger than a minute. */\n readonly justNowLabel = input('Just now');\n\n /** Timestamp under an hour; `{n}` is replaced by the minutes. */\n readonly minutesAgoLabel = input('{n}m ago');\n\n /** Timestamp under a day; `{n}` is replaced by the hours. */\n readonly hoursAgoLabel = input('{n}h ago');\n\n /** Timestamp under a week; `{n}` is replaced by the days (older ones show the date in `dateLocale`). */\n readonly daysAgoLabel = input('{n}d ago');\n\n readonly notificationClick = output<Notification>();\n readonly notificationDismiss = output<string>();\n readonly notificationAction = output<Notification>();\n readonly markAllRead = output<void>();\n readonly clearAll = output<void>();\n\n protected activeFilter = signal<NotificationType | 'all'>('all');\n protected searchQuery = signal('');\n\n protected readonly unreadCount = computed(() =>\n this.notifications().filter(n => !n.read).length\n );\n\n protected readonly filteredNotifications = computed(() => {\n let items = this.notifications();\n const filter = this.activeFilter();\n const query = this.searchQuery().toLowerCase().trim();\n\n if (filter !== 'all') {\n items = items.filter(n => n.type === filter);\n }\n\n if (query) {\n items = items.filter(\n n =>\n n.title.toLowerCase().includes(query) ||\n n.message?.toLowerCase().includes(query) ||\n n.category?.toLowerCase().includes(query)\n );\n }\n\n // Copy before sorting: without a filter `items` is the caller's array and\n // `sort` would reorder it in place\n return [...items].sort((a, b) => {\n const prio = this.priorityWeight(b.priority) - this.priorityWeight(a.priority);\n if (prio !== 0) return prio;\n return b.timestamp.getTime() - a.timestamp.getTime();\n });\n });\n\n /**\n * The list as rendered: one group per category, or a single group without a\n * category (`null`, no header) when grouping is off.\n */\n protected readonly groupedNotifications = computed((): { category: string | null; items: Notification[] }[] => {\n const items = this.filteredNotifications();\n if (!this.groupByCategory()) return [{ category: null, items }];\n const map = new Map<string, Notification[]>();\n for (const n of items) {\n const cat = n.category || this.otherCategoryLabel();\n if (!map.has(cat)) map.set(cat, []);\n map.get(cat)!.push(n);\n }\n return Array.from(map.entries()).map(([category, items]) => ({ category, items }));\n });\n\n protected readonly filterCounts = computed(() => {\n const items = this.notifications();\n return {\n all: items.length,\n info: items.filter(n => n.type === 'info').length,\n success: items.filter(n => n.type === 'success').length,\n warning: items.filter(n => n.type === 'warning').length,\n error: items.filter(n => n.type === 'error').length,\n };\n });\n\n protected readonly hasNotifications = computed(() => this.filteredNotifications().length > 0);\n\n protected getTypeIcon(type?: NotificationType): string {\n return type ? TYPE_ICONS[type] : 'information-circle';\n }\n\n protected getPriorityLabel(priority?: NotificationPriority): string {\n switch (priority) {\n case 'low':\n return this.lowPriorityLabel();\n case 'high':\n return this.highPriorityLabel();\n case 'urgent':\n return this.urgentPriorityLabel();\n default:\n return priority ? PRIORITY_LABELS[priority] : '';\n }\n }\n\n protected formatTime(date: Date): string {\n const now = new Date();\n const diff = now.getTime() - date.getTime();\n const mins = Math.floor(diff / 60000);\n if (mins < 1) return this.justNowLabel();\n if (mins < 60) return this.minutesAgoLabel().replace('{n}', String(mins));\n const hours = Math.floor(mins / 60);\n if (hours < 24) return this.hoursAgoLabel().replace('{n}', String(hours));\n const days = Math.floor(hours / 24);\n if (days < 7) return this.daysAgoLabel().replace('{n}', String(days));\n return date.toLocaleDateString(this.dateLocale(), { day: '2-digit', month: '2-digit', year: 'numeric' });\n }\n\n protected setFilter(filter: NotificationType | 'all'): void {\n this.activeFilter.set(filter);\n }\n\n protected onSearch(query: string): void {\n this.searchQuery.set(query);\n }\n\n protected onClick(notification: Notification): void {\n this.notificationClick.emit(notification);\n }\n\n protected onDismiss(id: string, event: Event): void {\n event.stopPropagation();\n this.notificationDismiss.emit(id);\n }\n\n protected onAction(notification: Notification, event: Event): void {\n event.stopPropagation();\n this.notificationAction.emit(notification);\n }\n\n protected onMarkAllRead(): void {\n this.markAllRead.emit();\n }\n\n protected onClearAll(): void {\n this.clearAll.emit();\n }\n\n private priorityWeight(p?: NotificationPriority): number {\n switch (p) {\n case 'urgent': return 4;\n case 'high': return 3;\n case 'normal': return 2;\n case 'low': return 1;\n default: return 2;\n }\n }\n}\n","<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">{{ markAllReadLabel() }}</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">{{ clearAllLabel() }}</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <lc-search-input\n class=\"lc-nc__search-field\"\n [placeholder]=\"searchPlaceholder()\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n [attr.aria-pressed]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >{{ filterAllLabel() }} ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n [attr.aria-pressed]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >{{ filterErrorLabel() }} ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n [attr.aria-pressed]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >{{ filterWarningLabel() }} ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n [attr.aria-pressed]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >{{ filterSuccessLabel() }} ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n [attr.aria-pressed]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >{{ filterInfoLabel() }} ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else {\n @for (group of groupedNotifications(); track group.category ?? '') {\n <div class=\"lc-nc__group\">\n @if (group.category !== null) {\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n }\n <!-- The whole row is a mouse target; the title is a real button so\n keyboard and screen-reader users can activate it (its click bubbles\n to the row), and the dismiss/action buttons stop propagation. -->\n @for (n of group.items; track n.id) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- row is a mouse target; its title is a real button for keyboard users -->\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\" [decorative]=\"true\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <button type=\"button\" class=\"lc-nc__item-title\">{{ n.title }}</button>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n [attr.aria-label]=\"dismissAriaLabel() + ' ' + n.title\"\n >×</button>\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n"],"mappings":"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"}
|