@ndwnu/design-system 10.0.1 → 11.0.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/ndwnu-design-system.mjs +234 -58
- package/fesm2022/ndwnu-design-system.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/lib/components/hoverable-list-item/hoverable-list-item.component.d.ts +18 -0
- package/lib/components/hoverable-list-item/hoverable-list-item.model.d.ts +9 -0
- package/lib/components/hoverable-list-item/index.d.ts +2 -0
- package/lib/components/index.d.ts +3 -0
- package/lib/components/key-value-list/index.d.ts +1 -0
- package/lib/components/key-value-list/key-value-list.component.d.ts +6 -0
- package/lib/components/list-item/list-item.component.d.ts +1 -2
- package/lib/components/main-navigation/main-navigation-header/main-navigation-header.component.d.ts +1 -3
- package/lib/components/main-navigation/main-navigation.component.d.ts +1 -3
- package/lib/components/pill/index.d.ts +0 -1
- package/lib/components/pill/pill.component.d.ts +3 -11
- package/lib/components/switcher/index.d.ts +2 -0
- package/lib/components/switcher/model.d.ts +6 -0
- package/lib/components/switcher/switcher.component.d.ts +26 -0
- package/lib/components/tab/tab.component.d.ts +2 -2
- package/lib/components/tab-group/tab-group.component.d.ts +4 -2
- package/lib/components/toast/toast.component.d.ts +2 -1
- package/lib/components/toast/toast.service.d.ts +2 -1
- package/package.json +4 -4
- package/styles/base/_variables.scss +6 -1
- package/styles/components/_edit-bar.scss +1 -1
- package/styles/components/_list-item.scss +19 -0
- package/styles/components/index.scss +2 -1
- package/styles/layout/_grid.scss +1 -1
- package/styles/layout/grid.stories.ts +4 -4
- package/styles/storybook/overrides.css +12 -0
- package/lib/components/pill/pill.model.d.ts +0 -1
|
@@ -4,7 +4,7 @@ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
|
4
4
|
import { NgTemplateOutlet, NgClass, isPlatformBrowser, DOCUMENT, CommonModule, AsyncPipe, NgStyle } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { NG_VALUE_ACCESSOR, NgControl, Validators, FormsModule } from '@angular/forms';
|
|
7
|
-
import { CoreAutosuggestDirective, CoreIconComponent, CoreAutosuggestOptionComponent, MatchBoldPipe, CoreAutosuggestAddOptionComponent, CoreAutosuggestPanelComponent, setRadioItemsName, checkRadioItems, CoreBreadcrumbComponent, CoreBreadcrumbGroupComponent, CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
|
|
7
|
+
import { CoreAutosuggestDirective, CoreIconComponent, CoreAutosuggestOptionComponent, MatchBoldPipe, CoreAutosuggestAddOptionComponent, CoreAutosuggestPanelComponent, setRadioItemsName, checkRadioItems, CorePillComponent, CoreBreadcrumbComponent, CoreBreadcrumbGroupComponent, CoreKeyValueListComponent, CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
|
|
8
8
|
import { AriaDescriber, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
|
|
9
9
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
10
10
|
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
@@ -1591,25 +1591,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1591
1591
|
}]
|
|
1592
1592
|
}], ctorParameters: () => [] });
|
|
1593
1593
|
|
|
1594
|
-
class PillComponent {
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
*/
|
|
1598
|
-
color = input('green');
|
|
1599
|
-
/**
|
|
1600
|
-
* The content of the pill.
|
|
1601
|
-
*/
|
|
1602
|
-
content = viewChild('content');
|
|
1603
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1604
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.7", type: PillComponent, isStandalone: true, selector: "ndw-pill", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "color()", "attr.title": "this.content()?.nativeElement?.textContent" }, classAttribute: "ndw-paragraph-md" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #content>\n <ng-content />\n</div>\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--ndw-border-radius-sm);padding:var(--ndw-spacing-3xs) var(--ndw-spacing-2xs);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--ndw-color-positive-600);background-color:var(--ndw-color-positive-100)}:host.gray{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-200)}:host.blue{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host.purple{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host.yellow{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-warning-100)}:host.red{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1594
|
+
class PillComponent extends CorePillComponent {
|
|
1595
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PillComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1596
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PillComponent, isStandalone: true, selector: "ndw-pill", host: { classAttribute: "ndw-paragraph-md" }, usesInheritance: true, ngImport: i0, template: "<div>\n <ng-content />\n</div>\n", styles: [":host{--pill-border-radius: initial;--pill-padding-vertical: initial;--pill-padding-horizontal: initial;--pill-green-color: initial;--pill-green-background-color: initial;--pill-gray-color: initial;--pill-gray-background-color: initial;--pill-blue-color: initial;--pill-blue-background-color: initial;--pill-purple-color: initial;--pill-purple-background-color: initial;--pill-yellow-color: initial;--pill-yellow-background-color: initial;--pill-red-color: initial;--pill-red-background-color: initial;display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);padding:var(--pill-padding-vertical) var(--pill-padding-horizontal);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--pill-green-color);background-color:var(--pill-green-background-color)}:host.gray{color:var(--pill-gray-color);background-color:var(--pill-gray-background-color)}:host.blue{color:var(--pill-blue-color);background-color:var(--pill-blue-background-color)}:host.purple{color:var(--pill-purple-color);background-color:var(--pill-purple-background-color)}:host.yellow{color:var(--pill-yellow-color);background-color:var(--pill-yellow-background-color)}:host.red{color:var(--pill-red-color);background-color:var(--pill-red-background-color)}:host{--pill-border-radius: var(--ndw-border-radius-sm);--pill-padding-vertical: var(--ndw-spacing-3xs);--pill-padding-horizontal: var(--ndw-spacing-2xs);--pill-green-color: var(--ndw-color-positive-600);--pill-green-background-color: var(--ndw-color-positive-100);--pill-gray-color: var(--ndw-color-grey-600);--pill-gray-background-color: var(--ndw-color-grey-200);--pill-blue-color: var(--ndw-color-info-500);--pill-blue-background-color: var(--ndw-color-info-100);--pill-purple-color: var(--ndw-color-alternative-500);--pill-purple-background-color: var(--ndw-color-alternative-100);--pill-yellow-color: var(--ndw-color-grey-600);--pill-yellow-background-color: var(--ndw-color-warning-100);--pill-red-color: var(--ndw-color-critical-500);--pill-red-background-color: var(--ndw-color-critical-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1605
1597
|
}
|
|
1606
1598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PillComponent, decorators: [{
|
|
1607
1599
|
type: Component,
|
|
1608
1600
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1609
|
-
'[class]': 'color()',
|
|
1610
1601
|
class: 'ndw-paragraph-md',
|
|
1611
|
-
|
|
1612
|
-
}, selector: 'ndw-pill', template: "<div #content>\n <ng-content />\n</div>\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--ndw-border-radius-sm);padding:var(--ndw-spacing-3xs) var(--ndw-spacing-2xs);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--ndw-color-positive-600);background-color:var(--ndw-color-positive-100)}:host.gray{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-200)}:host.blue{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host.purple{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host.yellow{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-warning-100)}:host.red{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}\n"] }]
|
|
1602
|
+
}, selector: 'ndw-pill', template: "<div>\n <ng-content />\n</div>\n", styles: [":host{--pill-border-radius: initial;--pill-padding-vertical: initial;--pill-padding-horizontal: initial;--pill-green-color: initial;--pill-green-background-color: initial;--pill-gray-color: initial;--pill-gray-background-color: initial;--pill-blue-color: initial;--pill-blue-background-color: initial;--pill-purple-color: initial;--pill-purple-background-color: initial;--pill-yellow-color: initial;--pill-yellow-background-color: initial;--pill-red-color: initial;--pill-red-background-color: initial;display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);padding:var(--pill-padding-vertical) var(--pill-padding-horizontal);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--pill-green-color);background-color:var(--pill-green-background-color)}:host.gray{color:var(--pill-gray-color);background-color:var(--pill-gray-background-color)}:host.blue{color:var(--pill-blue-color);background-color:var(--pill-blue-background-color)}:host.purple{color:var(--pill-purple-color);background-color:var(--pill-purple-background-color)}:host.yellow{color:var(--pill-yellow-color);background-color:var(--pill-yellow-background-color)}:host.red{color:var(--pill-red-color);background-color:var(--pill-red-background-color)}:host{--pill-border-radius: var(--ndw-border-radius-sm);--pill-padding-vertical: var(--ndw-spacing-3xs);--pill-padding-horizontal: var(--ndw-spacing-2xs);--pill-green-color: var(--ndw-color-positive-600);--pill-green-background-color: var(--ndw-color-positive-100);--pill-gray-color: var(--ndw-color-grey-600);--pill-gray-background-color: var(--ndw-color-grey-200);--pill-blue-color: var(--ndw-color-info-500);--pill-blue-background-color: var(--ndw-color-info-100);--pill-purple-color: var(--ndw-color-alternative-500);--pill-purple-background-color: var(--ndw-color-alternative-100);--pill-yellow-color: var(--ndw-color-grey-600);--pill-yellow-background-color: var(--ndw-color-warning-100);--pill-red-color: var(--ndw-color-critical-500);--pill-red-background-color: var(--ndw-color-critical-100)}\n"] }]
|
|
1613
1603
|
}] });
|
|
1614
1604
|
|
|
1615
1605
|
class ListItemComponent {
|
|
@@ -1665,7 +1655,7 @@ class ListItemComponent {
|
|
|
1665
1655
|
this.expanded.update((expanded) => !expanded);
|
|
1666
1656
|
}
|
|
1667
1657
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1668
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ListItemComponent, isStandalone: true, selector: "ndw-list-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indented: { classPropertyName: "indented", publicName: "indented", isSignal: true, isRequired: false, transformFunction: null }, pillColor: { classPropertyName: "pillColor", publicName: "pillColor", isSignal: true, isRequired: false, transformFunction: null }, pillLabel: { classPropertyName: "pillLabel", publicName: "pillLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", buttonClicked: "buttonClicked", checked: "checkedChange", expanded: "expandedChange" }, host: { attributes: { "role": "listitem" } }, viewQueries: [{ propertyName: "radioButton", first: true, predicate: RadioButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (actionable()) {\n <button\n list-item\n class=\"actionable\"\n [attr.active]=\"active() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.disabled]=\"disabled() || undefined\"\n [class.indented]=\"indented()\"\n (click)=\"onListItemSelect()\"\n >\n @if (checkable()) {\n @if (checkType() === 'radio') {\n <ndw-radio-button\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n } @else {\n <ndw-checkbox\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n }\n }\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n} @else {\n <div list-item [class.indented]=\"indented()\">\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </div>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n @if (pillLabel(); as pillLabel) {\n <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n }\n @if (badgeValue(); as badgeValue) {\n <ndw-badge [value]=\"badgeValue\" />\n }\n @if (showButton()) {\n <button\n ndwButton\n tertiary\n class=\"suffix-button\"\n [attr.aria-label]=\"buttonLabel()\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n </button>\n }\n @if (collapsible()) {\n <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n }\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";[list-item]{--list-item-animation-speed: initial;--list-item-background-color: initial;--list-item-border-radius: initial;--list-item-color: initial;--list-item-disabled-background-color: initial;--list-item-disabled-color: initial;--list-item-font-size: initial;--list-item-gap: initial;--list-item-hover-background-color: initial;--list-item-min-height: initial;--list-item-padding: initial;align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[list-item]:hover,[list-item][active]{background-color:var(--list-item-hover-background-color)}[list-item][disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}[list-item]{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[list-item] ndw-checkbox.readonly,[list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { kind: "component", type: CheckboxComponent, selector: "ndw-checkbox", inputs: ["checked", "switch", "disabled", "error", "success", "indeterminate", "required"], outputs: ["checkedChange", "disabledChange"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillComponent, selector: "ndw-pill", inputs: ["color"] }, { kind: "component", type: RadioButtonComponent, selector: "ndw-radio-button", inputs: ["checked", "disabled", "error", "success", "required", "value"], outputs: ["checkedChange", "disabledChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1658
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ListItemComponent, isStandalone: true, selector: "ndw-list-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indented: { classPropertyName: "indented", publicName: "indented", isSignal: true, isRequired: false, transformFunction: null }, pillColor: { classPropertyName: "pillColor", publicName: "pillColor", isSignal: true, isRequired: false, transformFunction: null }, pillLabel: { classPropertyName: "pillLabel", publicName: "pillLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", buttonClicked: "buttonClicked", checked: "checkedChange", expanded: "expandedChange" }, host: { attributes: { "role": "listitem" } }, viewQueries: [{ propertyName: "radioButton", first: true, predicate: RadioButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (actionable()) {\n <button\n list-item\n ndwListItem\n class=\"actionable\"\n [attr.active]=\"active() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.disabled]=\"disabled() || undefined\"\n [class.indented]=\"indented()\"\n (click)=\"onListItemSelect()\"\n >\n @if (checkable()) {\n @if (checkType() === 'radio') {\n <ndw-radio-button\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n } @else {\n <ndw-checkbox\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n }\n }\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n} @else {\n <div list-item ndwListItem [class.indented]=\"indented()\">\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </div>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n @if (pillLabel(); as pillLabel) {\n <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n }\n @if (badgeValue(); as badgeValue) {\n <ndw-badge [value]=\"badgeValue\" />\n }\n @if (showButton()) {\n <button\n ndwButton\n tertiary\n class=\"suffix-button\"\n [attr.aria-label]=\"buttonLabel()\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n </button>\n }\n @if (collapsible()) {\n <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n }\n</ng-template>\n", styles: ["[list-item]{width:100%}[list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[list-item] ndw-checkbox.readonly,[list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { kind: "component", type: CheckboxComponent, selector: "ndw-checkbox", inputs: ["checked", "switch", "disabled", "error", "success", "indeterminate", "required"], outputs: ["checkedChange", "disabledChange"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillComponent, selector: "ndw-pill" }, { kind: "component", type: RadioButtonComponent, selector: "ndw-radio-button", inputs: ["checked", "disabled", "error", "success", "required", "value"], outputs: ["checkedChange", "disabledChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1669
1659
|
}
|
|
1670
1660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
1671
1661
|
type: Component,
|
|
@@ -1678,7 +1668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1678
1668
|
NgTemplateOutlet,
|
|
1679
1669
|
PillComponent,
|
|
1680
1670
|
RadioButtonComponent,
|
|
1681
|
-
], selector: 'ndw-list-item', template: "@if (actionable()) {\n <button\n list-item\n class=\"actionable\"\n [attr.active]=\"active() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.disabled]=\"disabled() || undefined\"\n [class.indented]=\"indented()\"\n (click)=\"onListItemSelect()\"\n >\n @if (checkable()) {\n @if (checkType() === 'radio') {\n <ndw-radio-button\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n } @else {\n <ndw-checkbox\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n }\n }\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n} @else {\n <div list-item [class.indented]=\"indented()\">\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </div>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n @if (pillLabel(); as pillLabel) {\n <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n }\n @if (badgeValue(); as badgeValue) {\n <ndw-badge [value]=\"badgeValue\" />\n }\n @if (showButton()) {\n <button\n ndwButton\n tertiary\n class=\"suffix-button\"\n [attr.aria-label]=\"buttonLabel()\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n </button>\n }\n @if (collapsible()) {\n <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n }\n</ng-template>\n", styles: ["
|
|
1671
|
+
], selector: 'ndw-list-item', template: "@if (actionable()) {\n <button\n list-item\n ndwListItem\n class=\"actionable\"\n [attr.active]=\"active() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.disabled]=\"disabled() || undefined\"\n [class.indented]=\"indented()\"\n (click)=\"onListItemSelect()\"\n >\n @if (checkable()) {\n @if (checkType() === 'radio') {\n <ndw-radio-button\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n } @else {\n <ndw-checkbox\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n }\n }\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n} @else {\n <div list-item ndwListItem [class.indented]=\"indented()\">\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </div>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n @if (pillLabel(); as pillLabel) {\n <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n }\n @if (badgeValue(); as badgeValue) {\n <ndw-badge [value]=\"badgeValue\" />\n }\n @if (showButton()) {\n <button\n ndwButton\n tertiary\n class=\"suffix-button\"\n [attr.aria-label]=\"buttonLabel()\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n </button>\n }\n @if (collapsible()) {\n <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n }\n</ng-template>\n", styles: ["[list-item]{width:100%}[list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[list-item] ndw-checkbox.readonly,[list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
|
|
1682
1672
|
}], ctorParameters: () => [] });
|
|
1683
1673
|
|
|
1684
1674
|
const collapsibleAnimation = [
|
|
@@ -1913,14 +1903,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1913
1903
|
class BreadcrumbGroupComponent extends CoreBreadcrumbGroupComponent {
|
|
1914
1904
|
breadcrumbs = contentChildren(BreadcrumbComponent);
|
|
1915
1905
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BreadcrumbGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1916
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: BreadcrumbGroupComponent, isStandalone: true, selector: "ndw-breadcrumb-group",
|
|
1906
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: BreadcrumbGroupComponent, isStandalone: true, selector: "ndw-breadcrumb-group", queries: [{ propertyName: "breadcrumbs", predicate: BreadcrumbComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\n @if ($count > 1 && $index === $count - 2) {\n <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\n }\n\n <a\n class=\"breadcrumb\"\n [class.current-page]=\"$last\"\n [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\n [attr.aria-current]=\"$last ? 'page' : null\"\n [routerLink]=\"$last ? null : breadcrumb.link()\"\n >\n <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\n </a>\n\n @if (!$last) {\n <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\n }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{--breadcrumb-color: initial;--breadcrumb-current-page-color: initial;--breadcrumb-current-page-font-weight: initial;--breadcrumb-font-family: initial;--breadcrumb-font-size: initial;--breadcrumb-font-weight: initial;--breadcrumb-line-height: initial}.breadcrumb{color:var(--breadcrumb-color);cursor:pointer;font-family:var(--breadcrumb-font-family);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height);position:relative;text-decoration:none}.breadcrumb.current-page{color:var(--breadcrumb-current-page-color);cursor:default;font-weight:var(--breadcrumb-current-page-font-weight);pointer-events:none}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--breadcrumb-color: var(--ndw-color-grey-500);--breadcrumb-current-page-color: var(--ndw-color-grey-700);--breadcrumb-current-page-font-weight: var(--ndw-font-weight-bold);--breadcrumb-font-family: var(--ndw-font-family-body);--breadcrumb-font-size: var(--ndw-font-size-sm);--breadcrumb-font-weight: var(--ndw-font-weight-bold);--breadcrumb-line-height: 100%}.breadcrumb{background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}\n", ":host{--breadcrumb-group-background-color: initial;--breadcrumb-group-chevron-size: initial;--breadcrumb-group-color: initial;--breadcrumb-group-padding: initial;align-items:center;background-color:var(--breadcrumb-group-background-color);color:var(--breadcrumb-group-color);display:flex;padding:var(--breadcrumb-group-padding)}.icon-back,.icon-forward{font-size:var(--breadcrumb-group-chevron-size)}.icon-back{display:none}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{--breadcrumb-group-background-color: var(--ndw-color-white);--breadcrumb-group-chevron-size: var(--ndw-font-size-md);--breadcrumb-group-color: var(--ndw-color-primary-500);--breadcrumb-group-padding: var(--ndw-spacing-md)}.icon-back,.icon-forward{margin-block-end:var(--ndw-spacing-3xs)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1917
1907
|
}
|
|
1918
1908
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BreadcrumbGroupComponent, decorators: [{
|
|
1919
1909
|
type: Component,
|
|
1920
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1921
|
-
'aria-label': 'Breadcrumb',
|
|
1922
|
-
role: 'navigation',
|
|
1923
|
-
}, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-breadcrumb-group', template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\n @if ($count > 1 && $index === $count - 2) {\n <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\n }\n\n <a\n class=\"breadcrumb\"\n [class.current-page]=\"$last\"\n [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\n [attr.aria-current]=\"$last ? 'page' : null\"\n [routerLink]=\"$last ? null : breadcrumb.link()\"\n >\n <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\n </a>\n\n @if (!$last) {\n <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\n }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{--breadcrumb-color: initial;--breadcrumb-current-page-color: initial;--breadcrumb-current-page-font-weight: initial;--breadcrumb-font-family: initial;--breadcrumb-font-size: initial;--breadcrumb-font-weight: initial;--breadcrumb-line-height: initial}.breadcrumb{color:var(--breadcrumb-color);cursor:pointer;font-family:var(--breadcrumb-font-family);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height);position:relative;text-decoration:none}.breadcrumb.current-page{color:var(--breadcrumb-current-page-color);cursor:default;font-weight:var(--breadcrumb-current-page-font-weight);pointer-events:none}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--breadcrumb-color: var(--ndw-color-grey-500);--breadcrumb-current-page-color: var(--ndw-color-grey-700);--breadcrumb-current-page-font-weight: var(--ndw-font-weight-bold);--breadcrumb-font-family: var(--ndw-font-family-body);--breadcrumb-font-size: var(--ndw-font-size-sm);--breadcrumb-font-weight: var(--ndw-font-weight-bold);--breadcrumb-line-height: 100%}.breadcrumb{background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}\n", ":host{--breadcrumb-group-background-color: initial;--breadcrumb-group-chevron-size: initial;--breadcrumb-group-color: initial;--breadcrumb-group-padding: initial;align-items:center;background-color:var(--breadcrumb-group-background-color);color:var(--breadcrumb-group-color);display:flex;padding:var(--breadcrumb-group-padding)}.icon-back,.icon-forward{font-size:var(--breadcrumb-group-chevron-size)}.icon-back{display:none}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 6.25rem}:host{--breadcrumb-group-background-color: var(--ndw-color-white);--breadcrumb-group-chevron-size: var(--ndw-font-size-md);--breadcrumb-group-color: var(--ndw-color-primary-500);--breadcrumb-group-padding: var(--ndw-spacing-md)}.icon-back,.icon-forward{margin-block-end:var(--ndw-spacing-3xs)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"] }]
|
|
1910
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-breadcrumb-group', template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\n @if ($count > 1 && $index === $count - 2) {\n <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\n }\n\n <a\n class=\"breadcrumb\"\n [class.current-page]=\"$last\"\n [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\n [attr.aria-current]=\"$last ? 'page' : null\"\n [routerLink]=\"$last ? null : breadcrumb.link()\"\n >\n <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\n </a>\n\n @if (!$last) {\n <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\n }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{--breadcrumb-color: initial;--breadcrumb-current-page-color: initial;--breadcrumb-current-page-font-weight: initial;--breadcrumb-font-family: initial;--breadcrumb-font-size: initial;--breadcrumb-font-weight: initial;--breadcrumb-line-height: initial}.breadcrumb{color:var(--breadcrumb-color);cursor:pointer;font-family:var(--breadcrumb-font-family);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height);position:relative;text-decoration:none}.breadcrumb.current-page{color:var(--breadcrumb-current-page-color);cursor:default;font-weight:var(--breadcrumb-current-page-font-weight);pointer-events:none}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--breadcrumb-color: var(--ndw-color-grey-500);--breadcrumb-current-page-color: var(--ndw-color-grey-700);--breadcrumb-current-page-font-weight: var(--ndw-font-weight-bold);--breadcrumb-font-family: var(--ndw-font-family-body);--breadcrumb-font-size: var(--ndw-font-size-sm);--breadcrumb-font-weight: var(--ndw-font-weight-bold);--breadcrumb-line-height: 100%}.breadcrumb{background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}\n", ":host{--breadcrumb-group-background-color: initial;--breadcrumb-group-chevron-size: initial;--breadcrumb-group-color: initial;--breadcrumb-group-padding: initial;align-items:center;background-color:var(--breadcrumb-group-background-color);color:var(--breadcrumb-group-color);display:flex;padding:var(--breadcrumb-group-padding)}.icon-back,.icon-forward{font-size:var(--breadcrumb-group-chevron-size)}.icon-back{display:none}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{--breadcrumb-group-background-color: var(--ndw-color-white);--breadcrumb-group-chevron-size: var(--ndw-font-size-md);--breadcrumb-group-color: var(--ndw-color-primary-500);--breadcrumb-group-padding: var(--ndw-spacing-md)}.icon-back,.icon-forward{margin-block-end:var(--ndw-spacing-3xs)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"] }]
|
|
1924
1911
|
}] });
|
|
1925
1912
|
|
|
1926
1913
|
class CardContentComponent {
|
|
@@ -2005,11 +1992,11 @@ class CardHeaderComponent {
|
|
|
2005
1992
|
this.isCollapsed.set(!this.isCollapsed());
|
|
2006
1993
|
}
|
|
2007
1994
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2008
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: CardHeaderComponent, isStandalone: true, selector: "ndw-card-header", inputs: { isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "@if (isCollapsible()) {\n <button\n class=\"float\"\n type=\"button\"\n ndwButton\n extra-small\n tertiary\n [attr.aria-controls]=\"cardId\"\n [attr.aria-expanded]=\"!isCollapsed()\"\n [class.collapsed]=\"isCollapsed()\"\n (click)=\"toggleCollapsed()\"\n >\n <ndw-icon>keyboard_arrow_down</ndw-icon>\n </button>\n}\n<ng-content />\n", styles: [":host{display:block;align-items:center;font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1995
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: CardHeaderComponent, isStandalone: true, selector: "ndw-card-header", inputs: { isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "@if (isCollapsible()) {\n <button\n class=\"float\"\n type=\"button\"\n ndwButton\n extra-small\n tertiary\n [attr.aria-controls]=\"cardId\"\n [attr.aria-expanded]=\"!isCollapsed()\"\n [class.collapsed]=\"isCollapsed()\"\n (click)=\"toggleCollapsed()\"\n >\n <ndw-icon>keyboard_arrow_down</ndw-icon>\n </button>\n}\n<ng-content />\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2009
1996
|
}
|
|
2010
1997
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
2011
1998
|
type: Component,
|
|
2012
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-header', imports: [IconComponent], template: "@if (isCollapsible()) {\n <button\n class=\"float\"\n type=\"button\"\n ndwButton\n extra-small\n tertiary\n [attr.aria-controls]=\"cardId\"\n [attr.aria-expanded]=\"!isCollapsed()\"\n [class.collapsed]=\"isCollapsed()\"\n (click)=\"toggleCollapsed()\"\n >\n <ndw-icon>keyboard_arrow_down</ndw-icon>\n </button>\n}\n<ng-content />\n", styles: [":host{display:block;align-items:center;font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n"] }]
|
|
1999
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-header', imports: [IconComponent], template: "@if (isCollapsible()) {\n <button\n class=\"float\"\n type=\"button\"\n ndwButton\n extra-small\n tertiary\n [attr.aria-controls]=\"cardId\"\n [attr.aria-expanded]=\"!isCollapsed()\"\n [class.collapsed]=\"isCollapsed()\"\n (click)=\"toggleCollapsed()\"\n >\n <ndw-icon>keyboard_arrow_down</ndw-icon>\n </button>\n}\n<ng-content />\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n"] }]
|
|
2013
2000
|
}] });
|
|
2014
2001
|
|
|
2015
2002
|
const CARD_COMPONENTS = [
|
|
@@ -2144,13 +2131,13 @@ class EditBarComponent {
|
|
|
2144
2131
|
this.#resizeObserver.observe(this.editBar().nativeElement);
|
|
2145
2132
|
}
|
|
2146
2133
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: EditBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2147
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: EditBarComponent, isStandalone: true, selector: "ndw-edit-bar", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionFixedWidth: { classPropertyName: "positionFixedWidth", publicName: "positionFixedWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height() + \"px\"" } }, viewQueries: [{ propertyName: "editBar", first: true, predicate: ["editBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #editBar\n class=\"ndw-edit-bar\"\n [class.ndw-edit-bar--grid]=\"grid()\"\n [class.ndw-edit-bar--fixed]=\"position() === 'fixed'\"\n [class.ndw-edit-bar--absolute]=\"position() === 'absolute'\"\n [class.ndw-edit-bar--static]=\"position() === 'static'\"\n [class.ndw-edit-bar--sticky]=\"position() === 'sticky'\"\n [class.ndw-edit-bar--full-width]=\"positionFixedWidth() === 'full'\"\n [class.ndw-edit-bar--layout-width]=\"positionFixedWidth() === 'layout'\"\n>\n @if (grid()) {\n <div class=\"grid\">\n <div class=\"column-12\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</div>\n\n<ng-template #content>\n <div class=\"ndw-edit-bar__inner\">\n <ng-content select=\"ndw-edit-bar-message\" />\n <ng-content select=\"ndw-edit-bar-actions\" />\n </div>\n</ng-template>\n", styles: [":host:has(.ndw-edit-bar--fixed){display:block;padding-block:var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2134
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: EditBarComponent, isStandalone: true, selector: "ndw-edit-bar", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionFixedWidth: { classPropertyName: "positionFixedWidth", publicName: "positionFixedWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height() + \"px\"" } }, viewQueries: [{ propertyName: "editBar", first: true, predicate: ["editBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #editBar\n class=\"ndw-edit-bar\"\n [class.ndw-edit-bar--grid]=\"grid()\"\n [class.ndw-edit-bar--fixed]=\"position() === 'fixed'\"\n [class.ndw-edit-bar--absolute]=\"position() === 'absolute'\"\n [class.ndw-edit-bar--static]=\"position() === 'static'\"\n [class.ndw-edit-bar--sticky]=\"position() === 'sticky'\"\n [class.ndw-edit-bar--full-width]=\"positionFixedWidth() === 'full'\"\n [class.ndw-edit-bar--layout-width]=\"positionFixedWidth() === 'layout'\"\n>\n @if (grid()) {\n <div class=\"ndw-grid\">\n <div class=\"column-12\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</div>\n\n<ng-template #content>\n <div class=\"ndw-edit-bar__inner\">\n <ng-content select=\"ndw-edit-bar-message\" />\n <ng-content select=\"ndw-edit-bar-actions\" />\n </div>\n</ng-template>\n", styles: [":host:has(.ndw-edit-bar--fixed){display:block;padding-block:var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2148
2135
|
}
|
|
2149
2136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: EditBarComponent, decorators: [{
|
|
2150
2137
|
type: Component,
|
|
2151
2138
|
args: [{ selector: 'ndw-edit-bar', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2152
2139
|
'[style.height]': 'height() + "px"',
|
|
2153
|
-
}, template: "<div\n #editBar\n class=\"ndw-edit-bar\"\n [class.ndw-edit-bar--grid]=\"grid()\"\n [class.ndw-edit-bar--fixed]=\"position() === 'fixed'\"\n [class.ndw-edit-bar--absolute]=\"position() === 'absolute'\"\n [class.ndw-edit-bar--static]=\"position() === 'static'\"\n [class.ndw-edit-bar--sticky]=\"position() === 'sticky'\"\n [class.ndw-edit-bar--full-width]=\"positionFixedWidth() === 'full'\"\n [class.ndw-edit-bar--layout-width]=\"positionFixedWidth() === 'layout'\"\n>\n @if (grid()) {\n <div class=\"grid\">\n <div class=\"column-12\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</div>\n\n<ng-template #content>\n <div class=\"ndw-edit-bar__inner\">\n <ng-content select=\"ndw-edit-bar-message\" />\n <ng-content select=\"ndw-edit-bar-actions\" />\n </div>\n</ng-template>\n", styles: [":host:has(.ndw-edit-bar--fixed){display:block;padding-block:var(--ndw-spacing-md)}\n"] }]
|
|
2140
|
+
}, template: "<div\n #editBar\n class=\"ndw-edit-bar\"\n [class.ndw-edit-bar--grid]=\"grid()\"\n [class.ndw-edit-bar--fixed]=\"position() === 'fixed'\"\n [class.ndw-edit-bar--absolute]=\"position() === 'absolute'\"\n [class.ndw-edit-bar--static]=\"position() === 'static'\"\n [class.ndw-edit-bar--sticky]=\"position() === 'sticky'\"\n [class.ndw-edit-bar--full-width]=\"positionFixedWidth() === 'full'\"\n [class.ndw-edit-bar--layout-width]=\"positionFixedWidth() === 'layout'\"\n>\n @if (grid()) {\n <div class=\"ndw-grid\">\n <div class=\"column-12\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</div>\n\n<ng-template #content>\n <div class=\"ndw-edit-bar__inner\">\n <ng-content select=\"ndw-edit-bar-message\" />\n <ng-content select=\"ndw-edit-bar-actions\" />\n </div>\n</ng-template>\n", styles: [":host:has(.ndw-edit-bar--fixed){display:block;padding-block:var(--ndw-spacing-md)}\n"] }]
|
|
2154
2141
|
}] });
|
|
2155
2142
|
|
|
2156
2143
|
class EditBarActionsComponent {
|
|
@@ -2188,12 +2175,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2188
2175
|
}, imports: [IconComponent, FormsModule], selector: 'ndw-favorite', template: "<input type=\"checkbox\" [id]=\"uuid\" [(ngModel)]=\"checked\" class=\"sr-only\" tabindex=\"0\" />\n\n<label [for]=\"uuid\">\n <span class=\"sr-only\">favorite</span>\n <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</label>\n", styles: [".input-container:has(>[ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has(>[ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;gap:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]):has([ndwInput]:active),.input-container:has(>[ndwInput]):has([ndwInput]:focus),.input-container:has(>[ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has(>[ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has(>[ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[success]:active,.input-container:has(>[ndwInput])[success]:focus,.input-container:has(>[ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>[ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has(>[ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[error]:active,.input-container:has(>[ndwInput])[error]:focus,.input-container:has(>[ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[disabled],.input-container:has(>[ndwInput])[readonly],.input-container:has(>[ndwInput]):has([ndwInput]:disabled),.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has(>[ndwInput])[disabled] [ndwInput],.input-container:has(>[ndwInput])[readonly] [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}.input-container:has(>[ndwInput])[disabled] ndw-icon,.input-container:has(>[ndwInput])[readonly] ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}.input-container:has(>[ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has(>[ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has(>[ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has(>[ndwInput]) [ndwInput]:hover,.input-container:has(>[ndwInput]) [ndwInput]:active,.input-container:has(>[ndwInput]) [ndwInput]:focus,.input-container:has(>[ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has(>[ndwInput]):has(textarea){padding-inline:0}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host label{cursor:pointer;transition:color .15s ease-in-out}:host:hover,:host.checked{color:var(--ndw-color-critical-500)}\n"] }]
|
|
2189
2176
|
}] });
|
|
2190
2177
|
|
|
2178
|
+
class HoverableListItemComponent {
|
|
2179
|
+
actions = input();
|
|
2180
|
+
disabled = input(false);
|
|
2181
|
+
path = input();
|
|
2182
|
+
prefixIcon = input();
|
|
2183
|
+
queryParams = input();
|
|
2184
|
+
subtitle = input();
|
|
2185
|
+
title = input();
|
|
2186
|
+
actionSelected = output();
|
|
2187
|
+
selected = output();
|
|
2188
|
+
onActionButtonClick(event, action) {
|
|
2189
|
+
event.stopPropagation();
|
|
2190
|
+
if (action.callback) {
|
|
2191
|
+
action.callback();
|
|
2192
|
+
}
|
|
2193
|
+
if (!action.path) {
|
|
2194
|
+
this.actionSelected.emit(action);
|
|
2195
|
+
}
|
|
2196
|
+
}
|
|
2197
|
+
onButtonClick(event) {
|
|
2198
|
+
event.stopPropagation();
|
|
2199
|
+
this.selected.emit();
|
|
2200
|
+
}
|
|
2201
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HoverableListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: HoverableListItemComponent, isStandalone: true, selector: "ndw-hoverable-list-item", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelected: "actionSelected", selected: "selected" }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@if (path(); as path) {\n <a\n list-item\n ndwListItem\n class=\"actionable\"\n [attr.aria-disabled]=\"disabled() || undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [queryParams]=\"queryParams()\"\n [routerLink]=\"path\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </a>\n} @else {\n <button\n list-item\n ndwListItem\n class=\"actionable\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n <div class=\"actions\">\n @for (action of actions(); track $index) {\n @if (action.path) {\n <a\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n [queryParams]=\"action.queryParams\"\n [routerLink]=\"action.path\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </a>\n } @else {\n <button\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </button>\n }\n }\n </div>\n</ng-template>\n", styles: ["[list-item]{width:100%}[list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[list-item] .actions{display:flex;gap:var(--ndw-spacing-sm);opacity:0;pointer-events:none;transition:opacity var(--list-item-animation-speed) ease-in-out}[list-item] .actions [ndwButton]{border-radius:50%;padding-inline:var(--ndw-spacing-3xs)}[list-item] .actions [ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[list-item] .actions [ndwButton][disabled]{background-color:transparent;border-color:transparent}[list-item]:is(:hover,:active,:focus,:focus-within) .actions{opacity:1;pointer-events:auto}[list-item][disabled] ndw-icon,[list-item][aria-disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2203
|
+
}
|
|
2204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: HoverableListItemComponent, decorators: [{
|
|
2205
|
+
type: Component,
|
|
2206
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2207
|
+
role: 'listitem',
|
|
2208
|
+
}, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-hoverable-list-item', template: "@if (path(); as path) {\n <a\n list-item\n ndwListItem\n class=\"actionable\"\n [attr.aria-disabled]=\"disabled() || undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [queryParams]=\"queryParams()\"\n [routerLink]=\"path\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </a>\n} @else {\n <button\n list-item\n ndwListItem\n class=\"actionable\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n <div class=\"actions\">\n @for (action of actions(); track $index) {\n @if (action.path) {\n <a\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n [queryParams]=\"action.queryParams\"\n [routerLink]=\"action.path\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </a>\n } @else {\n <button\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </button>\n }\n }\n </div>\n</ng-template>\n", styles: ["[list-item]{width:100%}[list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[list-item] .actions{display:flex;gap:var(--ndw-spacing-sm);opacity:0;pointer-events:none;transition:opacity var(--list-item-animation-speed) ease-in-out}[list-item] .actions [ndwButton]{border-radius:50%;padding-inline:var(--ndw-spacing-3xs)}[list-item] .actions [ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[list-item] .actions [ndwButton][disabled]{background-color:transparent;border-color:transparent}[list-item]:is(:hover,:active,:focus,:focus-within) .actions{opacity:1;pointer-events:auto}[list-item][disabled] ndw-icon,[list-item][aria-disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
|
|
2209
|
+
}] });
|
|
2210
|
+
|
|
2211
|
+
class KeyValueListComponent extends CoreKeyValueListComponent {
|
|
2212
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: KeyValueListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2213
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: KeyValueListComponent, isStandalone: true, selector: "ndw-key-value-list", usesInheritance: true, ngImport: i0, template: "<dl [class.striped]=\"hasZebraStripes()\">\n @for (keyValueRow of normalizedData(); track keyValueRow.key) {\n <dt>\n <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\n </dt>\n <dd>\n <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\n </dd>\n }\n</dl>\n\n<ng-template #cellData let-data>\n @if (data.url) {\n <a ndwLink target=\"_blank\" [href]=\"data.url\">\n {{ data.label }}\n <ndw-icon size=\"sm\">open_in_new</ndw-icon>\n </a>\n } @else {\n {{ data.label }}\n }\n\n @if (data.tooltip) {\n <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\n }\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2214
|
+
}
|
|
2215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: KeyValueListComponent, decorators: [{
|
|
2216
|
+
type: Component,
|
|
2217
|
+
args: [{ selector: 'ndw-key-value-list', imports: [IconComponent, NgTemplateOutlet, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl [class.striped]=\"hasZebraStripes()\">\n @for (keyValueRow of normalizedData(); track keyValueRow.key) {\n <dt>\n <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\n </dt>\n <dd>\n <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\n </dd>\n }\n</dl>\n\n<ng-template #cellData let-data>\n @if (data.url) {\n <a ndwLink target=\"_blank\" [href]=\"data.url\">\n {{ data.label }}\n <ndw-icon size=\"sm\">open_in_new</ndw-icon>\n </a>\n } @else {\n {{ data.label }}\n }\n\n @if (data.tooltip) {\n <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\n }\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}\n"] }]
|
|
2218
|
+
}] });
|
|
2219
|
+
|
|
2191
2220
|
class MainNavigationHeaderComponent {
|
|
2192
2221
|
applicationName = input.required();
|
|
2193
|
-
closeButtonLabel = input.required();
|
|
2194
2222
|
isExpanded = input.required();
|
|
2195
2223
|
isMobile = input.required();
|
|
2196
|
-
menuButtonLabel = input.required();
|
|
2197
2224
|
theme = input.required();
|
|
2198
2225
|
themeImagePath = input.required();
|
|
2199
2226
|
environment = input();
|
|
@@ -2214,11 +2241,11 @@ class MainNavigationHeaderComponent {
|
|
|
2214
2241
|
this.isMobileMenuOpen.update((open) => !open);
|
|
2215
2242
|
}
|
|
2216
2243
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MainNavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2217
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MainNavigationHeaderComponent, isStandalone: true, selector: "ndw-main-navigation-header", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null },
|
|
2244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MainNavigationHeaderComponent, isStandalone: true, selector: "ndw-main-navigation-header", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: true, transformFunction: null }, themeImagePath: { classPropertyName: "themeImagePath", publicName: "themeImagePath", isSignal: true, isRequired: true, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<header [class.expanded]=\"isExpanded()\">\n <a routerLink=\"/\">\n <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\n @if (isExpanded() || isMobile()) {\n {{ applicationName() }}\n }\n </a>\n @if (environment()) {\n <ndw-pill [color]=\"environmentColor()\">\n {{ !isExpanded() || isMobile() ? environment()?.charAt(0) : environment() }}\n </ndw-pill>\n }\n @if (isMobile()) {\n <button ndwButton tertiary class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\n <ndw-icon>\n {{ isMobileMenuOpen() ? 'close' : 'menu' }}\n </ndw-icon>\n </button>\n }\n</header>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;flex-direction:column;align-items:center;display:flex;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-md);text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{top:0;height:fit-content;padding:0;position:absolute;right:var(--ndw-spacing-sm);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg);color:var(--ndw-color-white)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{flex-direction:row;align-items:center;padding-inline:var(--ndw-spacing-md);margin-bottom:0}header.expanded{align-items:center}header.expanded a img{width:var(--ndw-spacing-md)}header.expanded.nwb{width:var(--ndw-spacing-md)}header a{flex-direction:row;letter-spacing:var(--ndw-letter-spacing-sm);line-height:150%;gap:var(--ndw-spacing-md)}header a img{width:var(--ndw-spacing-md)}header a img.nwb{width:var(--ndw-spacing-md)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: PillComponent, selector: "ndw-pill" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2218
2245
|
}
|
|
2219
2246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MainNavigationHeaderComponent, decorators: [{
|
|
2220
2247
|
type: Component,
|
|
2221
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, PillComponent, RouterLink], selector: 'ndw-main-navigation-header', template: "<header [class.expanded]=\"isExpanded()\">\n <a routerLink=\"/\">\n <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\n @if (isExpanded() || isMobile()) {\n {{ applicationName() }}\n }\n </a>\n @if (environment()) {\n <ndw-pill [color]=\"environmentColor()\">\n {{ isExpanded() || isMobile() ? environment() : environment()
|
|
2248
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, PillComponent, RouterLink], selector: 'ndw-main-navigation-header', template: "<header [class.expanded]=\"isExpanded()\">\n <a routerLink=\"/\">\n <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\n @if (isExpanded() || isMobile()) {\n {{ applicationName() }}\n }\n </a>\n @if (environment()) {\n <ndw-pill [color]=\"environmentColor()\">\n {{ !isExpanded() || isMobile() ? environment()?.charAt(0) : environment() }}\n </ndw-pill>\n }\n @if (isMobile()) {\n <button ndwButton tertiary class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\n <ndw-icon>\n {{ isMobileMenuOpen() ? 'close' : 'menu' }}\n </ndw-icon>\n </button>\n }\n</header>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;flex-direction:column;align-items:center;display:flex;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-md);text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{top:0;height:fit-content;padding:0;position:absolute;right:var(--ndw-spacing-sm);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg);color:var(--ndw-color-white)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{flex-direction:row;align-items:center;padding-inline:var(--ndw-spacing-md);margin-bottom:0}header.expanded{align-items:center}header.expanded a img{width:var(--ndw-spacing-md)}header.expanded.nwb{width:var(--ndw-spacing-md)}header a{flex-direction:row;letter-spacing:var(--ndw-letter-spacing-sm);line-height:150%;gap:var(--ndw-spacing-md)}header a img{width:var(--ndw-spacing-md)}header a img.nwb{width:var(--ndw-spacing-md)}}\n"] }]
|
|
2222
2249
|
}] });
|
|
2223
2250
|
|
|
2224
2251
|
class MainNavigationMenuComponent {
|
|
@@ -2254,11 +2281,19 @@ class MainNavigationMenuComponent {
|
|
|
2254
2281
|
this.setActiveMobileItem(this.activeMobileItem() === item ? undefined : item);
|
|
2255
2282
|
}
|
|
2256
2283
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MainNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n @for (item of items(); track getItemKey(item)) {\n @if (!item.children) {\n @if (item.callback) {\n <button cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n <ndw-icon>{{ item.icon }}</ndw-icon>\n @if (isExpanded() || isMobile()) {\n {
|
|
2284
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n @for (item of items(); track getItemKey(item)) {\n @if (!item.children) {\n @if (item.callback) {\n <button cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n <ndw-icon>{{ item.icon }}</ndw-icon>\n @if (isExpanded() || isMobile()) {\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n }\n </button>\n } @else {\n <a\n cdkMenuItem\n ndwButton\n menu\n [queryParams]=\"item.queryParams\"\n [routerLink]=\"item.path\"\n (click)=\"closeMobileMenu()\"\n >\n <ndw-icon>{{ item.icon }}</ndw-icon>\n @if (isExpanded() || isMobile()) {\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n }\n </a>\n }\n } @else {\n @if (isMobile()) {\n <button\n cdkMenuItem\n ndwButton\n menu\n [attr.active]=\"activeMobileItem() === item || undefined\"\n (click)=\"toggleActiveMobileItem(item)\"\n (keydown)=\"handleMobileItemKeydown($event, item)\"\n >\n <ndw-icon>{{ item.icon }}</ndw-icon>\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n <ndw-icon class=\"suffix\">\n {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n </ndw-icon>\n </button>\n @if (activeMobileItem() === item) {\n @for (subItem of item.children; track getItemKey(subItem)) {\n @if (subItem.callback) {\n <button\n cdkMenuItem\n ndwButton\n menu\n class=\"sub-menu-button\"\n (click)=\"closeMobileMenu(subItem)\"\n >\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </button>\n } @else {\n <a\n cdkMenuItem\n ndwButton\n menu\n class=\"sub-menu-button\"\n [queryParams]=\"subItem.queryParams\"\n [routerLink]=\"subItem.path\"\n (click)=\"closeMobileMenu(subItem)\"\n >\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </a>\n }\n }\n }\n } @else {\n <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\n <ndw-icon>{{ item.icon }}</ndw-icon>\n @if (isExpanded()) {\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n }\n </button>\n }\n\n <ng-template #subMenu>\n <div cdkMenu class=\"sub-menu\">\n @for (subItem of item.children; track getItemKey(subItem)) {\n @if (subItem.callback) {\n <button cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </button>\n } @else {\n <a\n cdkMenuItem\n ndwButton\n menu\n [queryParams]=\"subItem.queryParams\"\n [routerLink]=\"subItem.path\"\n >\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </a>\n }\n }\n </div>\n </ng-template>\n }\n }\n</div>\n\n<ng-template #label let-item>\n {{ item.label }}\n @if (item.notifications) {\n <ndw-badge [value]=\"item.notifications\" />\n }\n</ng-template>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2258
2285
|
}
|
|
2259
2286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MainNavigationMenuComponent, decorators: [{
|
|
2260
2287
|
type: Component,
|
|
2261
|
-
args: [{ imports: [
|
|
2288
|
+
args: [{ imports: [
|
|
2289
|
+
BadgeComponent,
|
|
2290
|
+
CdkMenu,
|
|
2291
|
+
CdkMenuItem,
|
|
2292
|
+
CdkMenuTrigger,
|
|
2293
|
+
IconComponent,
|
|
2294
|
+
RouterLink,
|
|
2295
|
+
NgTemplateOutlet,
|
|
2296
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-main-navigation-menu', template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n @for (item of items(); track getItemKey(item)) {\n @if (!item.children) {\n @if (item.callback) {\n <button cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n <ndw-icon>{{ item.icon }}</ndw-icon>\n @if (isExpanded() || isMobile()) {\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n }\n </button>\n } @else {\n <a\n cdkMenuItem\n ndwButton\n menu\n [queryParams]=\"item.queryParams\"\n [routerLink]=\"item.path\"\n (click)=\"closeMobileMenu()\"\n >\n <ndw-icon>{{ item.icon }}</ndw-icon>\n @if (isExpanded() || isMobile()) {\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n }\n </a>\n }\n } @else {\n @if (isMobile()) {\n <button\n cdkMenuItem\n ndwButton\n menu\n [attr.active]=\"activeMobileItem() === item || undefined\"\n (click)=\"toggleActiveMobileItem(item)\"\n (keydown)=\"handleMobileItemKeydown($event, item)\"\n >\n <ndw-icon>{{ item.icon }}</ndw-icon>\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n <ndw-icon class=\"suffix\">\n {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n </ndw-icon>\n </button>\n @if (activeMobileItem() === item) {\n @for (subItem of item.children; track getItemKey(subItem)) {\n @if (subItem.callback) {\n <button\n cdkMenuItem\n ndwButton\n menu\n class=\"sub-menu-button\"\n (click)=\"closeMobileMenu(subItem)\"\n >\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </button>\n } @else {\n <a\n cdkMenuItem\n ndwButton\n menu\n class=\"sub-menu-button\"\n [queryParams]=\"subItem.queryParams\"\n [routerLink]=\"subItem.path\"\n (click)=\"closeMobileMenu(subItem)\"\n >\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </a>\n }\n }\n }\n } @else {\n <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\n <ndw-icon>{{ item.icon }}</ndw-icon>\n @if (isExpanded()) {\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n }\n </button>\n }\n\n <ng-template #subMenu>\n <div cdkMenu class=\"sub-menu\">\n @for (subItem of item.children; track getItemKey(subItem)) {\n @if (subItem.callback) {\n <button cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </button>\n } @else {\n <a\n cdkMenuItem\n ndwButton\n menu\n [queryParams]=\"subItem.queryParams\"\n [routerLink]=\"subItem.path\"\n >\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </a>\n }\n }\n </div>\n </ng-template>\n }\n }\n</div>\n\n<ng-template #label let-item>\n {{ item.label }}\n @if (item.notifications) {\n <ndw-badge [value]=\"item.notifications\" />\n }\n</ng-template>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"] }]
|
|
2262
2297
|
}] });
|
|
2263
2298
|
|
|
2264
2299
|
class MainNavigationComponent {
|
|
@@ -2267,11 +2302,9 @@ class MainNavigationComponent {
|
|
|
2267
2302
|
applicationName = input.required();
|
|
2268
2303
|
topMenuItems = input.required();
|
|
2269
2304
|
bottomMenuItems = input();
|
|
2270
|
-
closeButtonLabel = input('Sluit');
|
|
2271
2305
|
environment = input();
|
|
2272
2306
|
footerTexts = input();
|
|
2273
2307
|
isCollapsible = input(true);
|
|
2274
|
-
menuButtonLabel = input('Menu');
|
|
2275
2308
|
version = input();
|
|
2276
2309
|
isMobile = signal(false);
|
|
2277
2310
|
isMobileMenuOpen = signal(false);
|
|
@@ -2279,7 +2312,7 @@ class MainNavigationComponent {
|
|
|
2279
2312
|
isExpanded = model(true);
|
|
2280
2313
|
mobileMenuItems = computed(() => [...this.topMenuItems(), ...(this.bottomMenuItems() || [])]);
|
|
2281
2314
|
themeImagePath = computed(() => {
|
|
2282
|
-
const variant = !this.isExpanded()
|
|
2315
|
+
const variant = !this.isExpanded() || this.isMobile() ? '-short' : '';
|
|
2283
2316
|
return `images/logos/${this.theme()}-logo${variant}.svg`;
|
|
2284
2317
|
});
|
|
2285
2318
|
ngAfterViewInit() {
|
|
@@ -2305,14 +2338,14 @@ class MainNavigationComponent {
|
|
|
2305
2338
|
this.#renderer.setAttribute(this.#document.body, 'data-main-navigation-expanded', this.isExpanded().toString());
|
|
2306
2339
|
}
|
|
2307
2340
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MainNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2308
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MainNavigationComponent, isStandalone: true, selector: "ndw-main-navigation", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, topMenuItems: { classPropertyName: "topMenuItems", publicName: "topMenuItems", isSignal: true, isRequired: true, transformFunction: null }, bottomMenuItems: { classPropertyName: "bottomMenuItems", publicName: "bottomMenuItems", isSignal: true, isRequired: false, transformFunction: null },
|
|
2341
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MainNavigationComponent, isStandalone: true, selector: "ndw-main-navigation", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, topMenuItems: { classPropertyName: "topMenuItems", publicName: "topMenuItems", isSignal: true, isRequired: true, transformFunction: null }, bottomMenuItems: { classPropertyName: "bottomMenuItems", publicName: "bottomMenuItems", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, footerTexts: { classPropertyName: "footerTexts", publicName: "footerTexts", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "class.expanded": "isExpanded()" } }, ngImport: i0, template: "<ndw-main-navigation-header\n [applicationName]=\"applicationName()\"\n [environment]=\"environment()\"\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [theme]=\"theme()\"\n [themeImagePath]=\"themeImagePath()\"\n [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\n/>\n@if (!isMobile()) {\n <div class=\"content\">\n <main>\n <ndw-main-navigation-menu\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [items]=\"topMenuItems()\"\n (closed)=\"closeMobileMenu()\"\n />\n </main>\n <footer>\n @if (bottomMenuItems(); as bottomMenuItems) {\n <ndw-main-navigation-menu\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [items]=\"bottomMenuItems\"\n (closed)=\"closeMobileMenu()\"\n />\n }\n <div class=\"texts\">\n @if (isExpanded() || isMobile()) {\n @for (text of footerTexts(); track $index) {\n <p>{{ text }}</p>\n }\n }\n </div>\n <div class=\"version\">\n <p>{{ version() }}</p>\n </div>\n @if (isCollapsible() && !isMobile()) {\n <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\n <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n </button>\n }\n </footer>\n </div>\n} @else {\n @if (isMobileMenuOpen()) {\n <div class=\"content\">\n <main>\n <ndw-main-navigation-menu\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [items]=\"mobileMenuItems()\"\n (closed)=\"closeMobileMenu()\"\n />\n </main>\n </div>\n }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-700);box-sizing:border-box;color:var(--ndw-color-grey-400);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width)}@media screen and (max-width: 1024px){:host{padding-top:var(--ndw-spacing-md);height:var(--main-navigation-mobile-header-height);width:100%}}.content{background-color:var(--ndw-color-grey-700);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width: 1024px){.content{position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){width:var(--main-navigation-expanded-width)}@media screen and (max-width: 1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle ndw-icon{transform:var(--ndw-rotate-half)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: MainNavigationHeaderComponent, selector: "ndw-main-navigation-header", inputs: ["applicationName", "isExpanded", "isMobile", "theme", "themeImagePath", "environment", "isMobileMenuOpen"], outputs: ["isMobileMenuOpenChange"] }, { kind: "component", type: MainNavigationMenuComponent, selector: "ndw-main-navigation-menu", inputs: ["isExpanded", "isMobile", "items"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2309
2342
|
}
|
|
2310
2343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MainNavigationComponent, decorators: [{
|
|
2311
2344
|
type: Component,
|
|
2312
2345
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2313
2346
|
'[class.expanded]': 'isExpanded()',
|
|
2314
2347
|
'(window:resize)': 'onWindowResize()',
|
|
2315
|
-
}, imports: [IconComponent, MainNavigationHeaderComponent, MainNavigationMenuComponent], selector: 'ndw-main-navigation', template: "<ndw-main-navigation-header\n [applicationName]=\"applicationName()\"\n [
|
|
2348
|
+
}, imports: [IconComponent, MainNavigationHeaderComponent, MainNavigationMenuComponent], selector: 'ndw-main-navigation', template: "<ndw-main-navigation-header\n [applicationName]=\"applicationName()\"\n [environment]=\"environment()\"\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [theme]=\"theme()\"\n [themeImagePath]=\"themeImagePath()\"\n [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\n/>\n@if (!isMobile()) {\n <div class=\"content\">\n <main>\n <ndw-main-navigation-menu\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [items]=\"topMenuItems()\"\n (closed)=\"closeMobileMenu()\"\n />\n </main>\n <footer>\n @if (bottomMenuItems(); as bottomMenuItems) {\n <ndw-main-navigation-menu\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [items]=\"bottomMenuItems\"\n (closed)=\"closeMobileMenu()\"\n />\n }\n <div class=\"texts\">\n @if (isExpanded() || isMobile()) {\n @for (text of footerTexts(); track $index) {\n <p>{{ text }}</p>\n }\n }\n </div>\n <div class=\"version\">\n <p>{{ version() }}</p>\n </div>\n @if (isCollapsible() && !isMobile()) {\n <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\n <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n </button>\n }\n </footer>\n </div>\n} @else {\n @if (isMobileMenuOpen()) {\n <div class=\"content\">\n <main>\n <ndw-main-navigation-menu\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [items]=\"mobileMenuItems()\"\n (closed)=\"closeMobileMenu()\"\n />\n </main>\n </div>\n }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-700);box-sizing:border-box;color:var(--ndw-color-grey-400);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width)}@media screen and (max-width: 1024px){:host{padding-top:var(--ndw-spacing-md);height:var(--main-navigation-mobile-header-height);width:100%}}.content{background-color:var(--ndw-color-grey-700);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width: 1024px){.content{position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){width:var(--main-navigation-expanded-width)}@media screen and (max-width: 1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle ndw-icon{transform:var(--ndw-rotate-half)}\n"] }]
|
|
2316
2349
|
}] });
|
|
2317
2350
|
|
|
2318
2351
|
class LayoutComponent {
|
|
@@ -2325,11 +2358,11 @@ class LayoutComponent {
|
|
|
2325
2358
|
menuFooterTexts = input();
|
|
2326
2359
|
version = input();
|
|
2327
2360
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2328
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: LayoutComponent, isStandalone: true, selector: "ndw-layout", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, topMenuItems: { classPropertyName: "topMenuItems", publicName: "topMenuItems", isSignal: true, isRequired: true, transformFunction: null }, bottomMenuItems: { classPropertyName: "bottomMenuItems", publicName: "bottomMenuItems", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, menuFooterTexts: { classPropertyName: "menuFooterTexts", publicName: "menuFooterTexts", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ndw-main-navigation\n [applicationName]=\"applicationName()\"\n [bottomMenuItems]=\"bottomMenuItems()\"\n [environment]=\"environment()\"\n [footerTexts]=\"menuFooterTexts()\"\n [isCollapsible]=\"isCollapsible()\"\n [isExpanded]=\"isExpanded()\"\n [topMenuItems]=\"topMenuItems()\"\n [version]=\"version()\"\n/>\n<main cdk-scrollable>\n <ng-content />\n</main>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height:
|
|
2361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: LayoutComponent, isStandalone: true, selector: "ndw-layout", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, topMenuItems: { classPropertyName: "topMenuItems", publicName: "topMenuItems", isSignal: true, isRequired: true, transformFunction: null }, bottomMenuItems: { classPropertyName: "bottomMenuItems", publicName: "bottomMenuItems", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, menuFooterTexts: { classPropertyName: "menuFooterTexts", publicName: "menuFooterTexts", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ndw-main-navigation\n [applicationName]=\"applicationName()\"\n [bottomMenuItems]=\"bottomMenuItems()\"\n [environment]=\"environment()\"\n [footerTexts]=\"menuFooterTexts()\"\n [isCollapsible]=\"isCollapsible()\"\n [isExpanded]=\"isExpanded()\"\n [topMenuItems]=\"topMenuItems()\"\n [version]=\"version()\"\n/>\n<main cdk-scrollable>\n <ng-content />\n</main>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-100);display:grid;grid-template-columns:auto 1fr;height:100svh;position:absolute;width:100svw}:host main{align-content:flex-start;display:grid;grid-template-columns:1fr;height:100%;overflow-y:auto;width:100%;z-index:1}@media screen and (max-width: 1024px){:host{grid-template-columns:1fr;grid-template-rows:auto 1fr}}\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: MainNavigationComponent, selector: "ndw-main-navigation", inputs: ["applicationName", "topMenuItems", "bottomMenuItems", "environment", "footerTexts", "isCollapsible", "version", "isExpanded"], outputs: ["isExpandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2329
2362
|
}
|
|
2330
2363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
2331
2364
|
type: Component,
|
|
2332
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkScrollable, MainNavigationComponent], selector: 'ndw-layout', template: "<ndw-main-navigation\n [applicationName]=\"applicationName()\"\n [bottomMenuItems]=\"bottomMenuItems()\"\n [environment]=\"environment()\"\n [footerTexts]=\"menuFooterTexts()\"\n [isCollapsible]=\"isCollapsible()\"\n [isExpanded]=\"isExpanded()\"\n [topMenuItems]=\"topMenuItems()\"\n [version]=\"version()\"\n/>\n<main cdk-scrollable>\n <ng-content />\n</main>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height:
|
|
2365
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkScrollable, MainNavigationComponent], selector: 'ndw-layout', template: "<ndw-main-navigation\n [applicationName]=\"applicationName()\"\n [bottomMenuItems]=\"bottomMenuItems()\"\n [environment]=\"environment()\"\n [footerTexts]=\"menuFooterTexts()\"\n [isCollapsible]=\"isCollapsible()\"\n [isExpanded]=\"isExpanded()\"\n [topMenuItems]=\"topMenuItems()\"\n [version]=\"version()\"\n/>\n<main cdk-scrollable>\n <ng-content />\n</main>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-100);display:grid;grid-template-columns:auto 1fr;height:100svh;position:absolute;width:100svw}:host main{align-content:flex-start;display:grid;grid-template-columns:1fr;height:100%;overflow-y:auto;width:100%;z-index:1}@media screen and (max-width: 1024px){:host{grid-template-columns:1fr;grid-template-rows:auto 1fr}}\n"] }]
|
|
2333
2366
|
}] });
|
|
2334
2367
|
|
|
2335
2368
|
class LayoutBannersComponent {
|
|
@@ -2444,7 +2477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2444
2477
|
}] });
|
|
2445
2478
|
|
|
2446
2479
|
class MapDisplayComponent {
|
|
2447
|
-
title = input('
|
|
2480
|
+
title = input('Kaartweergave');
|
|
2448
2481
|
backgroundsTitle = input('Achtergrond');
|
|
2449
2482
|
layersTitle = input('Gegevens');
|
|
2450
2483
|
enableClearLayers = input(true);
|
|
@@ -2801,11 +2834,11 @@ class ModalHeaderComponent {
|
|
|
2801
2834
|
this.#modalService?.close();
|
|
2802
2835
|
}
|
|
2803
2836
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2804
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: ModalHeaderComponent, isStandalone: true, selector: "ndw-modal-header", ngImport: i0, template: "<ng-content />\n<button\n ndwButton\n tertiary\n extra-small\n ariaLabel=\"Close\"\n data-testid=\"close-button\"\n (click)=\"detachModal()\"\n>\n <ndw-icon>close</ndw-icon>\n</button>\n", styles: [":host{display:block;align-items:center;font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n", ":host{display:grid;grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2837
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: ModalHeaderComponent, isStandalone: true, selector: "ndw-modal-header", ngImport: i0, template: "<ng-content />\n<button\n ndwButton\n tertiary\n extra-small\n ariaLabel=\"Close\"\n data-testid=\"close-button\"\n (click)=\"detachModal()\"\n>\n <ndw-icon>close</ndw-icon>\n</button>\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n", ":host{display:grid;font-family:var(--ndw-font-family-heading);grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2805
2838
|
}
|
|
2806
2839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ModalHeaderComponent, decorators: [{
|
|
2807
2840
|
type: Component,
|
|
2808
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent], selector: 'ndw-modal-header', template: "<ng-content />\n<button\n ndwButton\n tertiary\n extra-small\n ariaLabel=\"Close\"\n data-testid=\"close-button\"\n (click)=\"detachModal()\"\n>\n <ndw-icon>close</ndw-icon>\n</button>\n", styles: [":host{display:block;align-items:center;font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n", ":host{display:grid;grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\n"] }]
|
|
2841
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent], selector: 'ndw-modal-header', template: "<ng-content />\n<button\n ndwButton\n tertiary\n extra-small\n ariaLabel=\"Close\"\n data-testid=\"close-button\"\n (click)=\"detachModal()\"\n>\n <ndw-icon>close</ndw-icon>\n</button>\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n", ":host{display:grid;font-family:var(--ndw-font-family-heading);grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\n"] }]
|
|
2809
2842
|
}] });
|
|
2810
2843
|
|
|
2811
2844
|
class ModalComponent {
|
|
@@ -3185,6 +3218,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3185
3218
|
args: [{ selector: 'ndw-summary-card-subtitle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ndw-summary-card-subtitle\">\n <ng-content select=\"ndw-icon\" />\n\n <div class=\"ndw-summary-card-subtitle__text\">\n <ng-content />\n </div>\n</div>\n" }]
|
|
3186
3219
|
}] });
|
|
3187
3220
|
|
|
3221
|
+
class SwitcherComponent {
|
|
3222
|
+
options = input([]);
|
|
3223
|
+
selectedValue = model(undefined);
|
|
3224
|
+
disabled = model(false);
|
|
3225
|
+
selectionChange = output();
|
|
3226
|
+
sliderWidth = '';
|
|
3227
|
+
sliderPosition = '';
|
|
3228
|
+
onChange = (_value) => {
|
|
3229
|
+
// noop
|
|
3230
|
+
};
|
|
3231
|
+
onTouched = () => {
|
|
3232
|
+
// noop
|
|
3233
|
+
};
|
|
3234
|
+
ngOnInit() {
|
|
3235
|
+
this.#updateSliderProperties();
|
|
3236
|
+
}
|
|
3237
|
+
writeValue(value) {
|
|
3238
|
+
this.selectedValue.set(value);
|
|
3239
|
+
if (this.options().length > 0) {
|
|
3240
|
+
this.#updateSliderProperties();
|
|
3241
|
+
}
|
|
3242
|
+
}
|
|
3243
|
+
registerOnChange(fn) {
|
|
3244
|
+
this.onChange = fn;
|
|
3245
|
+
}
|
|
3246
|
+
registerOnTouched(fn) {
|
|
3247
|
+
this.onTouched = fn;
|
|
3248
|
+
}
|
|
3249
|
+
setDisabledState(isDisabled) {
|
|
3250
|
+
this.disabled.set(isDisabled);
|
|
3251
|
+
}
|
|
3252
|
+
selectOption(value) {
|
|
3253
|
+
if (this.disabled())
|
|
3254
|
+
return;
|
|
3255
|
+
const option = this.options().find((opt) => opt.value === value);
|
|
3256
|
+
if (option?.disabled)
|
|
3257
|
+
return;
|
|
3258
|
+
this.selectedValue.set(value);
|
|
3259
|
+
this.#updateSliderProperties();
|
|
3260
|
+
this.onChange(value);
|
|
3261
|
+
this.onTouched();
|
|
3262
|
+
this.selectionChange.emit(value);
|
|
3263
|
+
}
|
|
3264
|
+
onKeyDown(event, _currentIndex) {
|
|
3265
|
+
const enabledOptions = this.options().filter((opt) => !opt.disabled);
|
|
3266
|
+
const currentEnabledIndex = enabledOptions.findIndex((opt) => opt.value === this.selectedValue());
|
|
3267
|
+
const prevIndex = currentEnabledIndex > 0 ? currentEnabledIndex - 1 : enabledOptions.length - 1;
|
|
3268
|
+
const nextIndex = currentEnabledIndex < enabledOptions.length - 1 ? currentEnabledIndex + 1 : 0;
|
|
3269
|
+
const lastOption = enabledOptions[enabledOptions.length - 1];
|
|
3270
|
+
switch (event.key) {
|
|
3271
|
+
case 'ArrowLeft':
|
|
3272
|
+
case 'ArrowUp':
|
|
3273
|
+
event.preventDefault();
|
|
3274
|
+
this.selectOption(enabledOptions[prevIndex].value);
|
|
3275
|
+
this.#focusOption(this.options().indexOf(enabledOptions[prevIndex]));
|
|
3276
|
+
break;
|
|
3277
|
+
case 'ArrowRight':
|
|
3278
|
+
case 'ArrowDown':
|
|
3279
|
+
event.preventDefault();
|
|
3280
|
+
this.selectOption(enabledOptions[nextIndex].value);
|
|
3281
|
+
this.#focusOption(this.options().indexOf(enabledOptions[nextIndex]));
|
|
3282
|
+
break;
|
|
3283
|
+
case 'Home':
|
|
3284
|
+
event.preventDefault();
|
|
3285
|
+
this.selectOption(enabledOptions[0].value);
|
|
3286
|
+
this.#focusOption(this.options().indexOf(enabledOptions[0]));
|
|
3287
|
+
break;
|
|
3288
|
+
case 'End':
|
|
3289
|
+
event.preventDefault();
|
|
3290
|
+
this.selectOption(lastOption.value);
|
|
3291
|
+
this.#focusOption(this.options().indexOf(lastOption));
|
|
3292
|
+
break;
|
|
3293
|
+
}
|
|
3294
|
+
}
|
|
3295
|
+
#focusOption(index) {
|
|
3296
|
+
const optionElement = document.getElementById(this.generateId(index));
|
|
3297
|
+
optionElement?.focus();
|
|
3298
|
+
}
|
|
3299
|
+
#updateSliderProperties() {
|
|
3300
|
+
const options = this.options();
|
|
3301
|
+
if (options.length === 0)
|
|
3302
|
+
return;
|
|
3303
|
+
const selectedIndex = options.findIndex((opt) => opt.value === this.selectedValue());
|
|
3304
|
+
if (selectedIndex >= 0) {
|
|
3305
|
+
// Use CSS calc() for precise positioning with design system variables
|
|
3306
|
+
// Width: (100% - total padding) divided by number of options
|
|
3307
|
+
this.sliderWidth = `calc((100% - var(--ndw-spacing-xs)) / ${options.length})`;
|
|
3308
|
+
// Position: left padding + (selected index * width of each option)
|
|
3309
|
+
this.sliderPosition = `calc(var(--ndw-spacing-2xs) + (${selectedIndex} * calc((100% - var(--ndw-spacing-xs)) / ${options.length})))`;
|
|
3310
|
+
}
|
|
3311
|
+
}
|
|
3312
|
+
#componentId = crypto.randomUUID();
|
|
3313
|
+
generateId(index) {
|
|
3314
|
+
return `${this.#componentId}-option-${index}`;
|
|
3315
|
+
}
|
|
3316
|
+
get componentName() {
|
|
3317
|
+
return `switcher-${this.#componentId}`;
|
|
3318
|
+
}
|
|
3319
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3320
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SwitcherComponent, isStandalone: true, selector: "ndw-switcher", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", disabled: "disabledChange", selectionChange: "selectionChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "class.disabled": "disabled()" } }, providers: [
|
|
3321
|
+
{
|
|
3322
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3323
|
+
useExisting: forwardRef(() => SwitcherComponent),
|
|
3324
|
+
multi: true,
|
|
3325
|
+
},
|
|
3326
|
+
], ngImport: i0, template: "<div\n class=\"switch-slider\"\n [style.width]=\"sliderWidth\"\n [style.left]=\"sliderPosition\"\n [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n <label\n class=\"switch-option\"\n [class.active]=\"selectedValue() === option.value\"\n [class.disabled]=\"option.disabled || disabled()\"\n [attr.for]=\"generateId(i)\"\n >\n <input\n type=\"radio\"\n [id]=\"generateId(i)\"\n [name]=\"componentName\"\n [value]=\"option.value\"\n [checked]=\"selectedValue() === option.value\"\n [disabled]=\"option.disabled || disabled()\"\n (change)=\"selectOption(option.value)\"\n (keydown)=\"onKeyDown($event, i)\"\n [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n class=\"switch-radio\"\n />\n @if (option.icon) {\n <ndw-icon>{{ option.icon }}</ndw-icon>\n }\n <span class=\"switch-label\">{{ option.label }}</span>\n\n @if (option.disabled) {\n <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n }\n </label>\n}\n", styles: [":host{width:100%;position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left .2s ease,width .2s ease;z-index:1}.switch-option{box-sizing:border-box;position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color .2s ease,border-color .2s ease;height:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-xl))}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500)}.switch-option.active .switch-label{color:var(--ndw-color-black)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{white-space:nowrap}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3327
|
+
}
|
|
3328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SwitcherComponent, decorators: [{
|
|
3329
|
+
type: Component,
|
|
3330
|
+
args: [{ selector: 'ndw-switcher', imports: [IconComponent], providers: [
|
|
3331
|
+
{
|
|
3332
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3333
|
+
useExisting: forwardRef(() => SwitcherComponent),
|
|
3334
|
+
multi: true,
|
|
3335
|
+
},
|
|
3336
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3337
|
+
role: 'radiogroup',
|
|
3338
|
+
'[class.disabled]': 'disabled()',
|
|
3339
|
+
}, template: "<div\n class=\"switch-slider\"\n [style.width]=\"sliderWidth\"\n [style.left]=\"sliderPosition\"\n [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n <label\n class=\"switch-option\"\n [class.active]=\"selectedValue() === option.value\"\n [class.disabled]=\"option.disabled || disabled()\"\n [attr.for]=\"generateId(i)\"\n >\n <input\n type=\"radio\"\n [id]=\"generateId(i)\"\n [name]=\"componentName\"\n [value]=\"option.value\"\n [checked]=\"selectedValue() === option.value\"\n [disabled]=\"option.disabled || disabled()\"\n (change)=\"selectOption(option.value)\"\n (keydown)=\"onKeyDown($event, i)\"\n [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n class=\"switch-radio\"\n />\n @if (option.icon) {\n <ndw-icon>{{ option.icon }}</ndw-icon>\n }\n <span class=\"switch-label\">{{ option.label }}</span>\n\n @if (option.disabled) {\n <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n }\n </label>\n}\n", styles: [":host{width:100%;position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left .2s ease,width .2s ease;z-index:1}.switch-option{box-sizing:border-box;position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color .2s ease,border-color .2s ease;height:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-xl))}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500)}.switch-option.active .switch-label{color:var(--ndw-color-black)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{white-space:nowrap}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"] }]
|
|
3340
|
+
}] });
|
|
3341
|
+
|
|
3188
3342
|
class TabComponent {
|
|
3189
3343
|
_viewContainerRef = inject(ViewContainerRef);
|
|
3190
3344
|
_elementRef = inject(ElementRef);
|
|
@@ -3198,7 +3352,7 @@ class TabComponent {
|
|
|
3198
3352
|
title = input.required();
|
|
3199
3353
|
disabled = input(false);
|
|
3200
3354
|
active = false;
|
|
3201
|
-
id = crypto.randomUUID();
|
|
3355
|
+
id = input(crypto.randomUUID());
|
|
3202
3356
|
ngOnInit() {
|
|
3203
3357
|
this._content = new TemplatePortal(this._contentTemplate(), this._viewContainerRef);
|
|
3204
3358
|
}
|
|
@@ -3206,7 +3360,7 @@ class TabComponent {
|
|
|
3206
3360
|
return this._elementRef.nativeElement;
|
|
3207
3361
|
}
|
|
3208
3362
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3209
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.7", type: TabComponent, isStandalone: true, selector: "ndw-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Create a template for the content of the <ndw-tab> so that we can grab a reference to this\n TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n tab-group. -->\n<ng-template #content><ng-content></ng-content></ng-template>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3363
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.7", type: TabComponent, isStandalone: true, selector: "ndw-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Create a template for the content of the <ndw-tab> so that we can grab a reference to this\n TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n tab-group. -->\n<ng-template #content><ng-content></ng-content></ng-template>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3210
3364
|
}
|
|
3211
3365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TabComponent, decorators: [{
|
|
3212
3366
|
type: Component,
|
|
@@ -3216,14 +3370,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3216
3370
|
class TabGroupComponent {
|
|
3217
3371
|
_tabs = contentChildren(TabComponent);
|
|
3218
3372
|
_tabButtons = viewChildren('tabButton');
|
|
3219
|
-
tabs = computed(() => this._tabs().map((tab
|
|
3220
|
-
tab.active =
|
|
3373
|
+
tabs = computed(() => this._tabs().map((tab) => {
|
|
3374
|
+
tab.active = tab.id() === this.activeTabId();
|
|
3221
3375
|
return tab;
|
|
3222
3376
|
}));
|
|
3223
|
-
|
|
3377
|
+
hasPadding = input(false);
|
|
3378
|
+
activeTabId = model();
|
|
3224
3379
|
inlinePadding = input(0);
|
|
3380
|
+
constructor() {
|
|
3381
|
+
effect(() => {
|
|
3382
|
+
const tabs = this._tabs();
|
|
3383
|
+
const activeTab = this.activeTabId();
|
|
3384
|
+
if (activeTab === undefined && tabs.length) {
|
|
3385
|
+
const firstEnabledTab = tabs.find((tab) => !tab.disabled());
|
|
3386
|
+
if (firstEnabledTab) {
|
|
3387
|
+
this.activeTabId.set(firstEnabledTab.id());
|
|
3388
|
+
}
|
|
3389
|
+
}
|
|
3390
|
+
});
|
|
3391
|
+
effect(() => {
|
|
3392
|
+
const id = this.activeTabId();
|
|
3393
|
+
const tabs = this._tabs();
|
|
3394
|
+
tabs.forEach((tab) => {
|
|
3395
|
+
tab.active = tab.id() === id;
|
|
3396
|
+
});
|
|
3397
|
+
});
|
|
3398
|
+
}
|
|
3225
3399
|
selectTab(index) {
|
|
3226
|
-
this.
|
|
3400
|
+
this.activeTabId.set(this._tabs()?.[index].id());
|
|
3227
3401
|
const tabButtons = this._tabButtons();
|
|
3228
3402
|
if (tabButtons[index]?.nativeElement) {
|
|
3229
3403
|
tabButtons[index]?.nativeElement.focus();
|
|
@@ -3231,7 +3405,7 @@ class TabGroupComponent {
|
|
|
3231
3405
|
}
|
|
3232
3406
|
onKeyDown(event) {
|
|
3233
3407
|
const tabCount = this.tabs().length;
|
|
3234
|
-
const currentIndex = this.
|
|
3408
|
+
const currentIndex = this._tabs().findIndex((tab) => tab.id() === this.activeTabId());
|
|
3235
3409
|
switch (event.key) {
|
|
3236
3410
|
case 'ArrowRight':
|
|
3237
3411
|
this.selectTab(this.getNextEnabledIndex(tabCount, currentIndex, 1));
|
|
@@ -3258,12 +3432,12 @@ class TabGroupComponent {
|
|
|
3258
3432
|
return start;
|
|
3259
3433
|
}
|
|
3260
3434
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3261
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: {
|
|
3435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: { hasPadding: { classPropertyName: "hasPadding", publicName: "hasPadding", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, inlinePadding: { classPropertyName: "inlinePadding", publicName: "inlinePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabId: "activeTabIdChange" }, queries: [{ propertyName: "_tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n role=\"tab\"\n type=\"button\"\n [attr.active]=\"tab.active ? true : undefined\"\n [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n [attr.aria-selected]=\"tab.active\"\n [disabled]=\"tab.disabled() ? true : null\"\n [id]=\"'tab-' + tab.id\"\n [tabindex]=\"tab.active ? 0 : -1\"\n (click)=\"selectTab(i)\"\n (keydown)=\"onKeyDown($event)\"\n >\n {{ tab.title() }}\n </button>\n }\n</div>\n@for (tab of tabs(); track tab.id; let i = $index) {\n <div\n class=\"tab-content\"\n [ngClass]=\"{ 'is-hidden': !tab.active }\"\n [id]=\"'tab-panel-' + tab.id\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"'tab-' + tab.id\"\n [tabindex]=\"0\"\n >\n <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;left:0;right:0;width:auto;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3262
3436
|
}
|
|
3263
3437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TabGroupComponent, decorators: [{
|
|
3264
3438
|
type: Component,
|
|
3265
|
-
args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group\" role=\"tablist\" [
|
|
3266
|
-
}] });
|
|
3439
|
+
args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n role=\"tab\"\n type=\"button\"\n [attr.active]=\"tab.active ? true : undefined\"\n [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n [attr.aria-selected]=\"tab.active\"\n [disabled]=\"tab.disabled() ? true : null\"\n [id]=\"'tab-' + tab.id\"\n [tabindex]=\"tab.active ? 0 : -1\"\n (click)=\"selectTab(i)\"\n (keydown)=\"onKeyDown($event)\"\n >\n {{ tab.title() }}\n </button>\n }\n</div>\n@for (tab of tabs(); track tab.id; let i = $index) {\n <div\n class=\"tab-content\"\n [ngClass]=\"{ 'is-hidden': !tab.active }\"\n [id]=\"'tab-panel-' + tab.id\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"'tab-' + tab.id\"\n [tabindex]=\"0\"\n >\n <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;left:0;right:0;width:auto;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"] }]
|
|
3440
|
+
}], ctorParameters: () => [] });
|
|
3267
3441
|
|
|
3268
3442
|
const ndwAgGridTheme = {
|
|
3269
3443
|
accentColor: 'var(--ndw-color-primary)',
|
|
@@ -3289,6 +3463,7 @@ const ndwAgGridTheme = {
|
|
|
3289
3463
|
|
|
3290
3464
|
class ToastComponent {
|
|
3291
3465
|
message = input.required();
|
|
3466
|
+
closeButtonLabel = input('Sluit');
|
|
3292
3467
|
id = input();
|
|
3293
3468
|
duration = input(5000);
|
|
3294
3469
|
paused = input(false);
|
|
@@ -3303,11 +3478,11 @@ class ToastComponent {
|
|
|
3303
3478
|
});
|
|
3304
3479
|
}
|
|
3305
3480
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ToastComponent, isStandalone: true, selector: "ndw-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", elementDimensions: "elementDimensions" }, ngImport: i0, template: "<ndw-icon>info</ndw-icon>\n{{ message() }}\n<button
|
|
3481
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ToastComponent, isStandalone: true, selector: "ndw-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", elementDimensions: "elementDimensions" }, ngImport: i0, template: "<ndw-icon>info</ndw-icon>\n{{ message() }}\n<button\n ndwButton\n tertiary\n alternative\n extra-small\n (click)=\"closed.emit()\"\n [attr.aria-label]=\"closeButtonLabel()\"\n>\n <ndw-icon>close</ndw-icon>\n</button>\n<div\n class=\"progress-bar\"\n [ngStyle]=\"{\n 'animation-duration': duration() + 'ms',\n visibility: showProgress() ? 'visible' : 'hidden',\n }\"\n [class.paused]=\"paused()\"\n></div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;position:relative;align-items:center;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);max-width:20rem;width:20rem;opacity:1;overflow:hidden;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;z-index:2;box-shadow:var(--ndw-elevation-toast)}:host.hide-content{color:transparent}:host.hide-content>*{visibility:hidden}:host .progress-bar{animation:5s linear 0s 1 normal rightToLeft;background-color:var(--ndw-color-secondary-400);bottom:0;height:var(--ndw-spacing-2xs);left:-100%;position:absolute;width:100%;z-index:-1}:host .progress-bar.paused{animation-play-state:paused}:host>ndw-icon{font-size:1rem}:host [ndwButton] ndw-icon{color:var(--ndw-color-white)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3307
3482
|
}
|
|
3308
3483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastComponent, decorators: [{
|
|
3309
3484
|
type: Component,
|
|
3310
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon>info</ndw-icon>\n{{ message() }}\n<button
|
|
3485
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon>info</ndw-icon>\n{{ message() }}\n<button\n ndwButton\n tertiary\n alternative\n extra-small\n (click)=\"closed.emit()\"\n [attr.aria-label]=\"closeButtonLabel()\"\n>\n <ndw-icon>close</ndw-icon>\n</button>\n<div\n class=\"progress-bar\"\n [ngStyle]=\"{\n 'animation-duration': duration() + 'ms',\n visibility: showProgress() ? 'visible' : 'hidden',\n }\"\n [class.paused]=\"paused()\"\n></div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;position:relative;align-items:center;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);max-width:20rem;width:20rem;opacity:1;overflow:hidden;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;z-index:2;box-shadow:var(--ndw-elevation-toast)}:host.hide-content{color:transparent}:host.hide-content>*{visibility:hidden}:host .progress-bar{animation:5s linear 0s 1 normal rightToLeft;background-color:var(--ndw-color-secondary-400);bottom:0;height:var(--ndw-spacing-2xs);left:-100%;position:absolute;width:100%;z-index:-1}:host .progress-bar.paused{animation-play-state:paused}:host>ndw-icon{font-size:1rem}:host [ndwButton] ndw-icon{color:var(--ndw-color-white)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
3311
3486
|
}] });
|
|
3312
3487
|
|
|
3313
3488
|
class ToastListComponent {
|
|
@@ -3362,7 +3537,7 @@ class ToastListComponent {
|
|
|
3362
3537
|
this.toastService.resume();
|
|
3363
3538
|
}
|
|
3364
3539
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3365
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToastListComponent, isStandalone: true, selector: "ndw-toast-list", host: { listeners: { "mouseenter": "pause()", "mouseleave": "resume()" }, properties: { "style.--total-toast-height": "totalHeightExcludingGaps() + \"px\"", "style.--total-toast-count": "toastComponents().length", "style.--max-toast-width": "maxToastWidth() + \"px\"" } }, viewQueries: [{ propertyName: "toastComponents", predicate: ToastComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@for (toast of toastService.toasts(); track toast.id) {\n <ndw-toast\n class=\"toast\"\n [class.hide-content]=\"!toastService.paused() && $index > 0\"\n [ngStyle]=\"{\n '--index': $index,\n '--offset-height': toastOffsetHeights()[$index] + 'px',\n '--first-toast-height': firstToastHeight() + 'px',\n }\"\n [id]=\"toast.id\"\n [message]=\"toast.message\"\n [duration]=\"toast.duration\"\n [paused]=\"toastService.paused()\"\n [showProgress]=\"toastService.paused() || $first\"\n (closed)=\"toastService.close(toast.id)\"\n (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:var(--first-toast-height)}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "ndw-toast", inputs: ["message", "id", "duration", "paused", "showProgress"], outputs: ["closed", "elementDimensions"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3540
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToastListComponent, isStandalone: true, selector: "ndw-toast-list", host: { listeners: { "mouseenter": "pause()", "mouseleave": "resume()" }, properties: { "style.--total-toast-height": "totalHeightExcludingGaps() + \"px\"", "style.--total-toast-count": "toastComponents().length", "style.--max-toast-width": "maxToastWidth() + \"px\"" } }, viewQueries: [{ propertyName: "toastComponents", predicate: ToastComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@for (toast of toastService.toasts(); track toast.id) {\n <ndw-toast\n class=\"toast\"\n [class.hide-content]=\"!toastService.paused() && $index > 0\"\n [ngStyle]=\"{\n '--index': $index,\n '--offset-height': toastOffsetHeights()[$index] + 'px',\n '--first-toast-height': firstToastHeight() + 'px',\n }\"\n [id]=\"toast.id\"\n [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n [message]=\"toast.message\"\n [duration]=\"toast.duration\"\n [paused]=\"toastService.paused()\"\n [showProgress]=\"toastService.paused() || $first\"\n (closed)=\"toastService.close(toast.id)\"\n (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:var(--first-toast-height)}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "ndw-toast", inputs: ["message", "closeButtonLabel", "id", "duration", "paused", "showProgress"], outputs: ["closed", "elementDimensions"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3366
3541
|
}
|
|
3367
3542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastListComponent, decorators: [{
|
|
3368
3543
|
type: Component,
|
|
@@ -3372,7 +3547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3372
3547
|
'[style.--total-toast-height]': 'totalHeightExcludingGaps() + "px"',
|
|
3373
3548
|
'[style.--total-toast-count]': 'toastComponents().length',
|
|
3374
3549
|
'[style.--max-toast-width]': 'maxToastWidth() + "px"',
|
|
3375
|
-
}, imports: [ToastComponent, NgStyle], selector: 'ndw-toast-list', template: "@for (toast of toastService.toasts(); track toast.id) {\n <ndw-toast\n class=\"toast\"\n [class.hide-content]=\"!toastService.paused() && $index > 0\"\n [ngStyle]=\"{\n '--index': $index,\n '--offset-height': toastOffsetHeights()[$index] + 'px',\n '--first-toast-height': firstToastHeight() + 'px',\n }\"\n [id]=\"toast.id\"\n [message]=\"toast.message\"\n [duration]=\"toast.duration\"\n [paused]=\"toastService.paused()\"\n [showProgress]=\"toastService.paused() || $first\"\n (closed)=\"toastService.close(toast.id)\"\n (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:var(--first-toast-height)}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"] }]
|
|
3550
|
+
}, imports: [ToastComponent, NgStyle], selector: 'ndw-toast-list', template: "@for (toast of toastService.toasts(); track toast.id) {\n <ndw-toast\n class=\"toast\"\n [class.hide-content]=\"!toastService.paused() && $index > 0\"\n [ngStyle]=\"{\n '--index': $index,\n '--offset-height': toastOffsetHeights()[$index] + 'px',\n '--first-toast-height': firstToastHeight() + 'px',\n }\"\n [id]=\"toast.id\"\n [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n [message]=\"toast.message\"\n [duration]=\"toast.duration\"\n [paused]=\"toastService.paused()\"\n [showProgress]=\"toastService.paused() || $first\"\n (closed)=\"toastService.close(toast.id)\"\n (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:var(--first-toast-height)}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"] }]
|
|
3376
3551
|
}] });
|
|
3377
3552
|
|
|
3378
3553
|
class ToastService {
|
|
@@ -3418,13 +3593,14 @@ class ToastService {
|
|
|
3418
3593
|
* @param duration Optional duration in milliseconds for which the toast should be visible. Defaults to 5000ms.
|
|
3419
3594
|
* @returns The ID of the created toast. Can be used to close the toast.
|
|
3420
3595
|
*/
|
|
3421
|
-
open(message, duration) {
|
|
3596
|
+
open(message, duration, closeButtonLabel) {
|
|
3422
3597
|
const id = crypto.randomUUID();
|
|
3423
3598
|
this.#addToast({
|
|
3424
3599
|
id,
|
|
3425
3600
|
message,
|
|
3426
3601
|
duration: duration ?? 5000,
|
|
3427
3602
|
remainingTime: duration ?? 5000,
|
|
3603
|
+
closeButtonLabel,
|
|
3428
3604
|
});
|
|
3429
3605
|
if (!this.#overlayRef) {
|
|
3430
3606
|
this.#overlayRef = this.#overlay.create({
|
|
@@ -3474,5 +3650,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3474
3650
|
* Generated bundle index. Do not edit.
|
|
3475
3651
|
*/
|
|
3476
3652
|
|
|
3477
|
-
export { AccordionComponent, AccordionService, ActionIconComponent, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, fontMapButtonIcons, mapButtonIcons, ndwAgGridTheme, svgMapButtonIcons };
|
|
3653
|
+
export { AccordionComponent, AccordionService, ActionIconComponent, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, SwitcherComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, fontMapButtonIcons, mapButtonIcons, ndwAgGridTheme, svgMapButtonIcons };
|
|
3478
3654
|
//# sourceMappingURL=ndwnu-design-system.mjs.map
|