@ndwnu/design-system 1.1.1 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/ndw-logo-short.svg +3 -3
- package/assets/images/ndw-logo.svg +3 -3
- package/assets/images/nwb-logo-short.svg +10 -10
- package/assets/images/nwb-logo.svg +4 -4
- package/components/accordion/accordion.component.d.ts +1 -0
- package/components/alert/alert.component.d.ts +18 -2
- package/components/alert/alert.model.d.ts +1 -0
- package/components/badge/badge.component.d.ts +8 -1
- package/components/card/card-footer/card-footer.component.d.ts +0 -1
- package/components/card/card-header/card-header.component.d.ts +0 -3
- package/components/card/card.component.d.ts +2 -8
- package/components/card/index.d.ts +3 -1
- package/components/collapsible/collapsible.component.d.ts +4 -3
- package/components/dropdown/dropdown.component.d.ts +10 -5
- package/components/form-field/checkbox/checkbox.component.d.ts +2 -1
- package/components/form-field/file-upload/file-upload-text.interface.d.ts +4 -0
- package/components/form-field/file-upload/file-upload.component.d.ts +46 -0
- package/components/form-field/file-upload/index.d.ts +2 -0
- package/components/form-field/form-field.component.d.ts +13 -8
- package/components/form-field/index.d.ts +4 -0
- package/components/form-field/input/input.directive.d.ts +2 -0
- package/components/form-field/input/input.model.d.ts +1 -3
- package/components/form-field/month-input/index.d.ts +1 -0
- package/components/form-field/month-input/month-input-utils.d.ts +5 -0
- package/components/form-field/month-input/month-input.component.d.ts +42 -0
- package/components/form-field/option-group/index.d.ts +3 -0
- package/components/form-field/option-group/option-group.component.d.ts +26 -0
- package/components/form-field/option-group/option-group.model.d.ts +1 -0
- package/components/form-field/option-group/option.component.d.ts +9 -0
- package/components/form-field/radio-button/radio-button.component.d.ts +2 -1
- package/components/form-field/radio-group/radio-group.component.d.ts +1 -1
- package/components/form-field/success/index.d.ts +1 -0
- package/components/form-field/success/success.component.d.ts +5 -0
- package/components/form-field/textarea/auto-grow.directive.d.ts +19 -0
- package/components/form-field/textarea/index.d.ts +1 -0
- package/components/icon/action-icon/action-icon.component.d.ts +33 -0
- package/components/icon/action-icon/index.d.ts +1 -0
- package/components/icon/icon.component.d.ts +4 -6
- package/components/icon/index.d.ts +1 -0
- package/components/index.d.ts +1 -0
- package/components/main-navigation/main-navigation.component.d.ts +19 -6
- package/components/main-navigation/main-navigation.imports.d.ts +9 -0
- package/components/main-navigation-menu/main-navigation-menu.component.d.ts +4 -1
- package/components/modal/index.d.ts +7 -1
- package/components/modal/modal-content/index.d.ts +1 -0
- package/components/modal/modal-content/modal-content.component.d.ts +5 -0
- package/components/modal/modal-footer/index.d.ts +1 -0
- package/components/modal/modal-footer/modal-footer.component.d.ts +5 -0
- package/components/modal/modal-header/index.d.ts +1 -0
- package/components/modal/modal-header/modal-header.component.d.ts +7 -0
- package/components/modal/modal.component.d.ts +11 -0
- package/components/modal/modal.service.d.ts +0 -1
- package/components/multi-select/multi-select.component.d.ts +6 -5
- package/components/pill/pill.component.d.ts +8 -0
- package/components/popover/popover-trigger.directive.d.ts +1 -1
- package/components/removable-pill/removable-pill.component.d.ts +9 -2
- package/components/toast/index.d.ts +2 -0
- package/components/toast/toast.component.d.ts +19 -0
- package/components/toast/toast.service.d.ts +12 -0
- package/components/tooltip/tooltip.directive.d.ts +7 -2
- package/core/styles/ndw-styles.scss +89 -37
- package/core/styles/nwb-styles.scss +89 -37
- package/esm2022/components/accordion/accordion.component.mjs +9 -5
- package/esm2022/components/accordion/accordion.service.mjs +3 -6
- package/esm2022/components/alert/alert.component.mjs +28 -3
- package/esm2022/components/alert/alert.model.mjs +1 -1
- package/esm2022/components/badge/badge.component.mjs +10 -3
- package/esm2022/components/breadcrumb-group/breadcrumb-group.component.mjs +3 -3
- package/esm2022/components/button/button.directive.mjs +4 -3
- package/esm2022/components/card/card-footer/card-footer.component.mjs +3 -6
- package/esm2022/components/card/card-header/card-header.component.mjs +4 -12
- package/esm2022/components/card/card.component.mjs +5 -22
- package/esm2022/components/card/index.mjs +12 -2
- package/esm2022/components/collapsible/collapsible.component.mjs +6 -13
- package/esm2022/components/dropdown/dropdown.component.mjs +32 -8
- package/esm2022/components/form-field/checkbox/checkbox.component.mjs +5 -4
- package/esm2022/components/form-field/error/error.component.mjs +3 -3
- package/esm2022/components/form-field/file-upload/file-upload-text.interface.mjs +2 -0
- package/esm2022/components/form-field/file-upload/file-upload.component.mjs +217 -0
- package/esm2022/components/form-field/file-upload/index.mjs +3 -0
- package/esm2022/components/form-field/form-field.component.mjs +48 -28
- package/esm2022/components/form-field/index.mjs +5 -1
- package/esm2022/components/form-field/info/info.component.mjs +2 -2
- package/esm2022/components/form-field/input/input.directive.mjs +8 -3
- package/esm2022/components/form-field/input/input.model.mjs +1 -3
- package/esm2022/components/form-field/month-input/index.mjs +2 -0
- package/esm2022/components/form-field/month-input/month-input-utils.mjs +13 -0
- package/esm2022/components/form-field/month-input/month-input.component.mjs +155 -0
- package/esm2022/components/form-field/option-group/index.mjs +4 -0
- package/esm2022/components/form-field/option-group/option-group.component.mjs +64 -0
- package/esm2022/components/form-field/option-group/option-group.model.mjs +2 -0
- package/esm2022/components/form-field/option-group/option.component.mjs +23 -0
- package/esm2022/components/form-field/radio-button/radio-button.component.mjs +5 -4
- package/esm2022/components/form-field/radio-group/radio-group.component.mjs +4 -6
- package/esm2022/components/form-field/success/index.mjs +2 -0
- package/esm2022/components/form-field/success/success.component.mjs +12 -0
- package/esm2022/components/form-field/textarea/auto-grow.directive.mjs +45 -0
- package/esm2022/components/form-field/textarea/index.mjs +2 -0
- package/esm2022/components/icon/action-icon/action-icon.component.mjs +40 -0
- package/esm2022/components/icon/action-icon/index.mjs +2 -0
- package/esm2022/components/icon/icon.component.mjs +9 -24
- package/esm2022/components/icon/index.mjs +2 -1
- package/esm2022/components/index.mjs +2 -1
- package/esm2022/components/main-navigation/main-navigation.component.mjs +70 -31
- package/esm2022/components/main-navigation/main-navigation.imports.mjs +20 -0
- package/esm2022/components/main-navigation-menu/main-navigation-menu.component.mjs +10 -4
- package/esm2022/components/modal/index.mjs +18 -2
- package/esm2022/components/modal/modal-content/index.mjs +2 -0
- package/esm2022/components/modal/modal-content/modal-content.component.mjs +11 -0
- package/esm2022/components/modal/modal-footer/index.mjs +2 -0
- package/esm2022/components/modal/modal-footer/modal-footer.component.mjs +11 -0
- package/esm2022/components/modal/modal-header/index.mjs +2 -0
- package/esm2022/components/modal/modal-header/modal-header.component.mjs +20 -0
- package/esm2022/components/modal/modal.component.mjs +32 -0
- package/esm2022/components/modal/modal.service.mjs +6 -11
- package/esm2022/components/multi-select/multi-select.component.mjs +10 -8
- package/esm2022/components/pill/pill.component.mjs +17 -4
- package/esm2022/components/popover/popover-trigger.directive.mjs +1 -2
- package/esm2022/components/removable-pill/removable-pill.component.mjs +13 -11
- package/esm2022/components/toast/index.mjs +3 -0
- package/esm2022/components/toast/toast.component.mjs +77 -0
- package/esm2022/components/toast/toast.service.mjs +43 -0
- package/esm2022/components/tooltip/tooltip.component.mjs +5 -3
- package/esm2022/components/tooltip/tooltip.directive.mjs +47 -18
- package/fesm2022/ndwnu-design-system.mjs +1275 -419
- package/fesm2022/ndwnu-design-system.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, input, Component, inject, ElementRef, Renderer2, ChangeDetectionStrategy, HostBinding, model, computed, contentChildren,
|
|
3
|
-
import { Subject,
|
|
4
|
-
import * as
|
|
2
|
+
import { Injectable, input, Component, inject, ElementRef, Renderer2, ChangeDetectionStrategy, HostBinding, output, model, computed, contentChildren, DestroyRef, Directive, viewChild, EventEmitter, ViewContainerRef, Output, HostListener, contentChild, effect, viewChildren, signal } from '@angular/core';
|
|
3
|
+
import { Subject, take, fromEvent, filter, map } from 'rxjs';
|
|
4
|
+
import * as i5 from '@angular/common';
|
|
5
5
|
import { NgClass, NgTemplateOutlet, CommonModule, AsyncPipe } from '@angular/common';
|
|
6
6
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
7
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
|
+
import * as i7 from '@angular/router';
|
|
7
9
|
import { RouterLink, ActivatedRoute, Router, NavigationEnd } from '@angular/router';
|
|
10
|
+
import { ConfigurableFocusTrapFactory, AriaDescriber } from '@angular/cdk/a11y';
|
|
11
|
+
import * as i6 from '@angular/cdk/overlay';
|
|
8
12
|
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import
|
|
12
|
-
import { NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
|
|
13
|
+
import * as i2 from '@angular/cdk/portal';
|
|
14
|
+
import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
|
|
15
|
+
import * as i1 from '@angular/forms';
|
|
16
|
+
import { NG_VALUE_ACCESSOR, NgControl, Validators, FormsModule } from '@angular/forms';
|
|
13
17
|
|
|
14
18
|
class AccordionService {
|
|
15
19
|
constructor() {
|
|
@@ -19,42 +23,39 @@ class AccordionService {
|
|
|
19
23
|
this.expanded$.next(index);
|
|
20
24
|
}
|
|
21
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
22
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService
|
|
26
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService }); }
|
|
23
27
|
}
|
|
24
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionService, decorators: [{
|
|
25
|
-
type: Injectable
|
|
26
|
-
args: [{
|
|
27
|
-
providedIn: 'root',
|
|
28
|
-
}]
|
|
29
|
+
type: Injectable
|
|
29
30
|
}] });
|
|
30
31
|
|
|
31
32
|
class BadgeComponent {
|
|
32
33
|
constructor() {
|
|
34
|
+
/**
|
|
35
|
+
* The value of the badge
|
|
36
|
+
*/
|
|
33
37
|
this.value = input();
|
|
38
|
+
/**
|
|
39
|
+
* The aria label, used by screen readers to give context.
|
|
40
|
+
*/
|
|
41
|
+
this.ariaLabel = input();
|
|
34
42
|
}
|
|
35
43
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\n @if (value === 0 || value < -9 || value > 99) {\n <span class=\"dot\"></span>\n } @else {\n {{ value }}\n }\n} @else {\n {{ value() }}\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--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-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-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.375em;--ndw-line-height-md: 1.5em;--ndw-rotate-half: rotate(180deg)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][outline]{background-color:transparent;border-color:var(--ndw-background-primary);color:var(--ndw-text-primary)}[ndwButton][outline]:hover{background-color:var(--ndw-background-primary);border-color:var(--ndw-background-primary);color:var(--ndw-foreground-primary)}[ndwButton][outline]:active{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton][secondary]{background-color:transparent;border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}[ndwButton][secondary]:hover{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500);color:var(--ndw-color-white)}[ndwButton][secondary]:active{background-color:var(--ndw-color-grey-700);border-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;padding-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}a[ndwLink]{align-items:baseline;color:var(--ndw-color-link-400);display:inline-flex;font-size:inherit;gap:var(--ndw-spacing-2xs);text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}a[ndwLink]>*{align-self:center}a[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}a[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}a[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-default) ease-in;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;background-color:var(--ndw-color-notification);border-radius:50%;box-sizing:border-box;color:var(--ndw-color-white);display:grid;height:var(--ndw-spacing-md);letter-spacing:-1px;text-align:center;width:var(--ndw-spacing-md)}.dot{background-color:var(--ndw-color-white);border-radius:50%;height:var(--ndw-spacing-2xs);margin:auto;width:var(--ndw-spacing-2xs)}\n"] }); }
|
|
44
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\n @if (value === 0 || value < -9 || value > 99) {\n <span class=\"dot\"></span>\n } @else {\n {{ value }}\n }\n} @else {\n {{ value() }}\n}\n\n@if (ariaLabel()) {\n <span class=\"sr-only\"> {{ ariaLabel() }}</span>\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));--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-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}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border-width:0;white-space:nowrap;clip:rect(0,0,0,0)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}button:not(:disabled){cursor:pointer}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);justify-content:center;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start;text-decoration:none}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][secondary],[ndwButton][tertiary]{background-color:transparent;color:var(--ndw-text-primary)}[ndwButton][secondary]:hover,[ndwButton][tertiary]:hover{background-color:var(--ndw-alpha-primary-007);color:var(--ndw-text-primary)}[ndwButton][secondary]:active,[ndwButton][tertiary]:active{background-color:var(--ndw-alpha-primary-015)}[ndwButton][secondary][alternative],[ndwButton][tertiary][alternative]{color:var(--ndw-color-grey-700)}[ndwButton][secondary][alternative]:hover,[ndwButton][tertiary][alternative]:hover{background-color:var(--ndw-alpha-black-007)}[ndwButton][secondary][alternative]:active,[ndwButton][tertiary][alternative]:active{background-color:var(--ndw-alpha-black-015)}[ndwButton][secondary]{border-color:var(--ndw-background-primary)}[ndwButton][secondary]:active{border-color:var(--ndw-background-primary-hover)}[ndwButton][secondary][alternative]{border-color:var(--ndw-color-grey-300)}[ndwButton][secondary][alternative]:hover{border-color:var(--ndw-color-grey-500)}[ndwButton][secondary][alternative]:active{border-color:var(--ndw-color-grey-700)}[ndwButton][tertiary]{border-color:transparent}[ndwButton][extra-small]{height:var(--ndw-spacing-lg);padding-inline:var(--ndw-spacing-2xs)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding-inline:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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}[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]: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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}[ndwLink]{display:inline-flex;align-items:baseline;gap:var(--ndw-spacing-2xs);padding:0;border:0;font-size:inherit;text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);color:var(--ndw-color-link-400);background-color:transparent;transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}[ndwLink]>*{align-self:center}[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-fast) ease-out;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover,[ndwButton][menu][active]{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;background-color:var(--ndw-color-notification);border-radius:50%;box-sizing:border-box;color:var(--ndw-color-white);display:grid;height:var(--ndw-spacing-md);letter-spacing:-1px;text-align:center;width:var(--ndw-spacing-md)}.dot{background-color:var(--ndw-color-white);border-radius:50%;height:var(--ndw-spacing-2xs);margin:auto;width:var(--ndw-spacing-2xs)}\n"] }); }
|
|
37
45
|
}
|
|
38
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
39
47
|
type: Component,
|
|
40
|
-
args: [{ selector: 'ndw-badge', standalone: true, imports: [], template: "@if (value(); as value) {\n @if (value === 0 || value < -9 || value > 99) {\n <span class=\"dot\"></span>\n } @else {\n {{ value }}\n }\n} @else {\n {{ value() }}\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--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-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-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.375em;--ndw-line-height-md: 1.5em;--ndw-rotate-half: rotate(180deg)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][outline]{background-color:transparent;border-color:var(--ndw-background-primary);color:var(--ndw-text-primary)}[ndwButton][outline]:hover{background-color:var(--ndw-background-primary);border-color:var(--ndw-background-primary);color:var(--ndw-foreground-primary)}[ndwButton][outline]:active{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton][secondary]{background-color:transparent;border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}[ndwButton][secondary]:hover{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500);color:var(--ndw-color-white)}[ndwButton][secondary]:active{background-color:var(--ndw-color-grey-700);border-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;padding-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}a[ndwLink]{align-items:baseline;color:var(--ndw-color-link-400);display:inline-flex;font-size:inherit;gap:var(--ndw-spacing-2xs);text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}a[ndwLink]>*{align-self:center}a[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}a[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}a[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-default) ease-in;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;background-color:var(--ndw-color-notification);border-radius:50%;box-sizing:border-box;color:var(--ndw-color-white);display:grid;height:var(--ndw-spacing-md);letter-spacing:-1px;text-align:center;width:var(--ndw-spacing-md)}.dot{background-color:var(--ndw-color-white);border-radius:50%;height:var(--ndw-spacing-2xs);margin:auto;width:var(--ndw-spacing-2xs)}\n"] }]
|
|
48
|
+
args: [{ selector: 'ndw-badge', standalone: true, imports: [], template: "@if (value(); as value) {\n @if (value === 0 || value < -9 || value > 99) {\n <span class=\"dot\"></span>\n } @else {\n {{ value }}\n }\n} @else {\n {{ value() }}\n}\n\n@if (ariaLabel()) {\n <span class=\"sr-only\"> {{ ariaLabel() }}</span>\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));--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-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}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border-width:0;white-space:nowrap;clip:rect(0,0,0,0)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}button:not(:disabled){cursor:pointer}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);justify-content:center;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start;text-decoration:none}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][secondary],[ndwButton][tertiary]{background-color:transparent;color:var(--ndw-text-primary)}[ndwButton][secondary]:hover,[ndwButton][tertiary]:hover{background-color:var(--ndw-alpha-primary-007);color:var(--ndw-text-primary)}[ndwButton][secondary]:active,[ndwButton][tertiary]:active{background-color:var(--ndw-alpha-primary-015)}[ndwButton][secondary][alternative],[ndwButton][tertiary][alternative]{color:var(--ndw-color-grey-700)}[ndwButton][secondary][alternative]:hover,[ndwButton][tertiary][alternative]:hover{background-color:var(--ndw-alpha-black-007)}[ndwButton][secondary][alternative]:active,[ndwButton][tertiary][alternative]:active{background-color:var(--ndw-alpha-black-015)}[ndwButton][secondary]{border-color:var(--ndw-background-primary)}[ndwButton][secondary]:active{border-color:var(--ndw-background-primary-hover)}[ndwButton][secondary][alternative]{border-color:var(--ndw-color-grey-300)}[ndwButton][secondary][alternative]:hover{border-color:var(--ndw-color-grey-500)}[ndwButton][secondary][alternative]:active{border-color:var(--ndw-color-grey-700)}[ndwButton][tertiary]{border-color:transparent}[ndwButton][extra-small]{height:var(--ndw-spacing-lg);padding-inline:var(--ndw-spacing-2xs)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding-inline:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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}[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]: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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}[ndwLink]{display:inline-flex;align-items:baseline;gap:var(--ndw-spacing-2xs);padding:0;border:0;font-size:inherit;text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);color:var(--ndw-color-link-400);background-color:transparent;transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}[ndwLink]>*{align-self:center}[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-fast) ease-out;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover,[ndwButton][menu][active]{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;background-color:var(--ndw-color-notification);border-radius:50%;box-sizing:border-box;color:var(--ndw-color-white);display:grid;height:var(--ndw-spacing-md);letter-spacing:-1px;text-align:center;width:var(--ndw-spacing-md)}.dot{background-color:var(--ndw-color-white);border-radius:50%;height:var(--ndw-spacing-2xs);margin:auto;width:var(--ndw-spacing-2xs)}\n"] }]
|
|
41
49
|
}] });
|
|
42
50
|
|
|
43
51
|
class IconComponent {
|
|
44
52
|
constructor() {
|
|
53
|
+
this.size = input('md');
|
|
45
54
|
this.elementRef = inject(ElementRef);
|
|
46
55
|
this.renderer = inject(Renderer2);
|
|
47
|
-
this.interactive = input(false);
|
|
48
|
-
this.iconClass = 'material-symbols-rounded';
|
|
49
|
-
}
|
|
50
|
-
get interactiveClass() {
|
|
51
|
-
return this.interactive();
|
|
52
|
-
}
|
|
53
|
-
get role() {
|
|
54
|
-
return this.interactive() ? 'button' : 'img';
|
|
55
56
|
}
|
|
56
|
-
get
|
|
57
|
-
return this.
|
|
57
|
+
get hostClass() {
|
|
58
|
+
return `icon--${this.size()}`;
|
|
58
59
|
}
|
|
59
60
|
ngOnInit() {
|
|
60
61
|
const { nativeElement } = this.elementRef;
|
|
@@ -63,27 +64,56 @@ class IconComponent {
|
|
|
63
64
|
this.renderer.setStyle(nativeElement, 'width', height + paddingInline);
|
|
64
65
|
}
|
|
65
66
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
66
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: IconComponent, isStandalone: true, selector: "ndw-icon", inputs: {
|
|
67
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: IconComponent, isStandalone: true, selector: "ndw-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "this.hostClass" }, classAttribute: "material-symbols-rounded" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:inline-block;font-size:var(--ndw-spacing-lg);position:relative;-webkit-user-select:none;user-select:none}:host.icon--sm{font-size:var(--ndw-spacing-md)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
67
68
|
}
|
|
68
69
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: IconComponent, decorators: [{
|
|
69
70
|
type: Component,
|
|
70
71
|
args: [{ selector: 'ndw-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
class: 'material-symbols-rounded',
|
|
73
|
+
'aria-hidden': 'true',
|
|
74
|
+
}, template: "<ng-content />\n", styles: [":host{display:inline-block;font-size:var(--ndw-spacing-lg);position:relative;-webkit-user-select:none;user-select:none}:host.icon--sm{font-size:var(--ndw-spacing-md)}\n"] }]
|
|
75
|
+
}], propDecorators: { hostClass: [{
|
|
74
76
|
type: HostBinding,
|
|
75
77
|
args: ['class']
|
|
76
|
-
}], interactiveClass: [{
|
|
77
|
-
type: HostBinding,
|
|
78
|
-
args: ['class.interactive']
|
|
79
|
-
}], role: [{
|
|
80
|
-
type: HostBinding,
|
|
81
|
-
args: ['attr.role']
|
|
82
|
-
}], tabIndex: [{
|
|
83
|
-
type: HostBinding,
|
|
84
|
-
args: ['attr.tabindex']
|
|
85
78
|
}] } });
|
|
86
79
|
|
|
80
|
+
class ActionIconComponent {
|
|
81
|
+
constructor() {
|
|
82
|
+
// ! This component is deprecated, use `button` with `extra-small` attribute instead.
|
|
83
|
+
/**
|
|
84
|
+
* Used to give meaning to the button, used by screen readers.
|
|
85
|
+
*/
|
|
86
|
+
this.ariaLabel = input.required();
|
|
87
|
+
/**
|
|
88
|
+
* Color scheme of the ActionIcon, available `primary`, `link`,
|
|
89
|
+
* `grey` and `white` (defaults to primary).
|
|
90
|
+
*/
|
|
91
|
+
this.variant = input('primary');
|
|
92
|
+
/**
|
|
93
|
+
* Specify button type, defaults to `button`
|
|
94
|
+
*/
|
|
95
|
+
this.buttonType = input('button');
|
|
96
|
+
/**
|
|
97
|
+
* Disables the button, defaults to `false`.
|
|
98
|
+
*/
|
|
99
|
+
this.disabled = input(false);
|
|
100
|
+
/**
|
|
101
|
+
* Sets the size of the button, defaults to `md`.
|
|
102
|
+
*/
|
|
103
|
+
this.size = input('md');
|
|
104
|
+
/**
|
|
105
|
+
* Event emitted when the button is clicked.
|
|
106
|
+
*/
|
|
107
|
+
this.onClick = output();
|
|
108
|
+
}
|
|
109
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ActionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
110
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: ActionIconComponent, isStandalone: true, selector: "ndw-action-icon", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n class=\"ndw-action-icon ndw-action-icon--{{ variant() }}\"\n [type]=\"buttonType()\"\n [attr.aria-label]=\"ariaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick.emit()\"\n>\n <ndw-icon [size]=\"size()\"><ng-content /></ndw-icon>\n</button>\n", styles: [":host{display:inline-block}.ndw-action-icon{position:relative;box-sizing:border-box;display:inline-block;padding:0;border:0;border-radius:var(--ndw-border-radius-md);background-color:transparent;transition:background-color .15s ease-in-out}.ndw-action-icon--primary{color:var(--ndw-color-primary)}.ndw-action-icon--link{color:var(--ndw-color-link-400)}.ndw-action-icon--grey{color:var(--ndw-color-grey-400)}.ndw-action-icon--white{color:var(--ndw-color-white)}.ndw-action-icon:disabled{opacity:.5;pointer-events:none}.ndw-action-icon:not(:disabled):hover{background-color:var(--ndw-alpha-black-007)}.ndw-action-icon:not(:disabled):active,.ndw-action-icon:not(:disabled):focus,.ndw-action-icon:not(:disabled):focus-visible{background-color:var(--ndw-alpha-black-015)}.ndw-action-icon:not(:disabled):focus-visible{outline-color:var(--ndw-color-secondary-500)}.ndw-action-icon ndw-icon{padding:var(--ndw-spacing-2xs);vertical-align:middle}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
111
|
+
}
|
|
112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ActionIconComponent, decorators: [{
|
|
113
|
+
type: Component,
|
|
114
|
+
args: [{ selector: 'ndw-action-icon', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"ndw-action-icon ndw-action-icon--{{ variant() }}\"\n [type]=\"buttonType()\"\n [attr.aria-label]=\"ariaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick.emit()\"\n>\n <ndw-icon [size]=\"size()\"><ng-content /></ndw-icon>\n</button>\n", styles: [":host{display:inline-block}.ndw-action-icon{position:relative;box-sizing:border-box;display:inline-block;padding:0;border:0;border-radius:var(--ndw-border-radius-md);background-color:transparent;transition:background-color .15s ease-in-out}.ndw-action-icon--primary{color:var(--ndw-color-primary)}.ndw-action-icon--link{color:var(--ndw-color-link-400)}.ndw-action-icon--grey{color:var(--ndw-color-grey-400)}.ndw-action-icon--white{color:var(--ndw-color-white)}.ndw-action-icon:disabled{opacity:.5;pointer-events:none}.ndw-action-icon:not(:disabled):hover{background-color:var(--ndw-alpha-black-007)}.ndw-action-icon:not(:disabled):active,.ndw-action-icon:not(:disabled):focus,.ndw-action-icon:not(:disabled):focus-visible{background-color:var(--ndw-alpha-black-015)}.ndw-action-icon:not(:disabled):focus-visible{outline-color:var(--ndw-color-secondary-500)}.ndw-action-icon ndw-icon{padding:var(--ndw-spacing-2xs);vertical-align:middle}\n"] }]
|
|
115
|
+
}] });
|
|
116
|
+
|
|
87
117
|
const collapsibleAnimation = [
|
|
88
118
|
trigger('collapsible', [
|
|
89
119
|
state('open', style({
|
|
@@ -116,21 +146,14 @@ class CollapsibleComponent {
|
|
|
116
146
|
this.value = input();
|
|
117
147
|
this.expanded = model(false);
|
|
118
148
|
this.accordionService = inject(AccordionService);
|
|
149
|
+
this.uuid = crypto.randomUUID();
|
|
150
|
+
this.toggleUuid = `toggle-${this.uuid}`;
|
|
151
|
+
this.sectionUuid = `section-${this.uuid}`;
|
|
119
152
|
this.animationState = computed(() => (this.expanded() ? 'open' : 'closed'));
|
|
120
153
|
}
|
|
121
154
|
get expandedClass() {
|
|
122
155
|
return this.expanded();
|
|
123
156
|
}
|
|
124
|
-
onClick() {
|
|
125
|
-
this.toggle();
|
|
126
|
-
}
|
|
127
|
-
onKeydown(event) {
|
|
128
|
-
if (event.key !== 'Enter') {
|
|
129
|
-
return;
|
|
130
|
-
}
|
|
131
|
-
event.preventDefault();
|
|
132
|
-
this.toggle();
|
|
133
|
-
}
|
|
134
157
|
toggle() {
|
|
135
158
|
this.expanded.set(!this.expanded());
|
|
136
159
|
if (this.expanded()) {
|
|
@@ -138,11 +161,11 @@ class CollapsibleComponent {
|
|
|
138
161
|
}
|
|
139
162
|
}
|
|
140
163
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
141
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CollapsibleComponent, isStandalone: true, selector: "ndw-collapsible", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "this.expandedClass" } }, ngImport: i0, template: "<
|
|
164
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CollapsibleComponent, isStandalone: true, selector: "ndw-collapsible", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "this.expandedClass" } }, ngImport: i0, template: "<div class=\"collapsible\">\n <h3 class=\"collapsible__header\">\n <button\n class=\"collapsible__button\"\n type=\"button\"\n [id]=\"toggleUuid\"\n [attr.aria-controls]=\"sectionUuid\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n\n @if (value(); as value) {\n <ndw-badge [value]=\"value\" />\n }\n\n <ndw-icon>keyboard_arrow_down</ndw-icon>\n </button>\n </h3>\n\n <section\n role=\"region\"\n class=\"collapsible__section\"\n [id]=\"sectionUuid\"\n [attr.aria-labelledby]=\"toggleUuid\"\n [@collapsible]=\"animationState()\"\n >\n <ng-content />\n </section>\n</div>\n", styles: [".collapsible{display:block;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}.collapsible__header{margin:0}.collapsible__button{overflow:hidden;display:flex;gap:var(--ndw-spacing-xs);justify-content:space-between;align-items:center;padding:0;width:100%;padding-block:var(--ndw-spacing-md);border:none;font-size:var(--ndw-font-size-sm);font-family:var(--ndw-font-family-body);font-weight:var(--ndw-font-weight-bold);cursor:pointer;background-color:transparent;transition:color var(--ndw-animation-speed-fast) ease-in-out}.collapsible__button:hover{color:var(--ndw-color-primary)}.collapsible__button:focus-visible{box-shadow:var(--ndw-elevation-info);outline:none;color:var(--ndw-color-primary)}.collapsible__button ndw-icon{margin-left:auto;color:var(--ndw-color-primary);transition:transform var(--ndw-animation-speed-fast) ease-in-out;font-size:var(--ndw-spacing-lg)}.collapsible__section{display:none;height:fit-content;margin-block:0;overflow:hidden;transition:height var(--ndw-animation-speed-fast) ease-in-out}:host(.expanded) .collapsible__header ndw-icon{transform:rotate(-180deg)}:host(.expanded) .collapsible__section{display:block;margin-block:var(--ndw-spacing-sm) var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }], animations: [collapsibleAnimation] }); }
|
|
142
165
|
}
|
|
143
166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CollapsibleComponent, decorators: [{
|
|
144
167
|
type: Component,
|
|
145
|
-
args: [{ selector: 'ndw-collapsible', standalone: true, imports: [BadgeComponent, IconComponent, NgClass], animations: [collapsibleAnimation], template: "<
|
|
168
|
+
args: [{ selector: 'ndw-collapsible', standalone: true, imports: [BadgeComponent, IconComponent, NgClass], animations: [collapsibleAnimation], template: "<div class=\"collapsible\">\n <h3 class=\"collapsible__header\">\n <button\n class=\"collapsible__button\"\n type=\"button\"\n [id]=\"toggleUuid\"\n [attr.aria-controls]=\"sectionUuid\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n\n @if (value(); as value) {\n <ndw-badge [value]=\"value\" />\n }\n\n <ndw-icon>keyboard_arrow_down</ndw-icon>\n </button>\n </h3>\n\n <section\n role=\"region\"\n class=\"collapsible__section\"\n [id]=\"sectionUuid\"\n [attr.aria-labelledby]=\"toggleUuid\"\n [@collapsible]=\"animationState()\"\n >\n <ng-content />\n </section>\n</div>\n", styles: [".collapsible{display:block;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}.collapsible__header{margin:0}.collapsible__button{overflow:hidden;display:flex;gap:var(--ndw-spacing-xs);justify-content:space-between;align-items:center;padding:0;width:100%;padding-block:var(--ndw-spacing-md);border:none;font-size:var(--ndw-font-size-sm);font-family:var(--ndw-font-family-body);font-weight:var(--ndw-font-weight-bold);cursor:pointer;background-color:transparent;transition:color var(--ndw-animation-speed-fast) ease-in-out}.collapsible__button:hover{color:var(--ndw-color-primary)}.collapsible__button:focus-visible{box-shadow:var(--ndw-elevation-info);outline:none;color:var(--ndw-color-primary)}.collapsible__button ndw-icon{margin-left:auto;color:var(--ndw-color-primary);transition:transform var(--ndw-animation-speed-fast) ease-in-out;font-size:var(--ndw-spacing-lg)}.collapsible__section{display:none;height:fit-content;margin-block:0;overflow:hidden;transition:height var(--ndw-animation-speed-fast) ease-in-out}:host(.expanded) .collapsible__header ndw-icon{transform:rotate(-180deg)}:host(.expanded) .collapsible__section{display:block;margin-block:var(--ndw-spacing-sm) var(--ndw-spacing-md)}\n"] }]
|
|
146
169
|
}], propDecorators: { expandedClass: [{
|
|
147
170
|
type: HostBinding,
|
|
148
171
|
args: ['class.expanded']
|
|
@@ -153,9 +176,12 @@ class AccordionComponent {
|
|
|
153
176
|
this.collapseOthers = input(false);
|
|
154
177
|
this.collapsibles = contentChildren(CollapsibleComponent);
|
|
155
178
|
this.accordionService = inject(AccordionService);
|
|
179
|
+
this.destroyRef = inject(DestroyRef);
|
|
156
180
|
}
|
|
157
181
|
ngOnInit() {
|
|
158
|
-
this.accordionService.expanded
|
|
182
|
+
this.accordionService.expanded$
|
|
183
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
184
|
+
.subscribe((index) => {
|
|
159
185
|
if (!this.collapseOthers()) {
|
|
160
186
|
return;
|
|
161
187
|
}
|
|
@@ -165,11 +191,46 @@ class AccordionComponent {
|
|
|
165
191
|
});
|
|
166
192
|
}
|
|
167
193
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: AccordionComponent, isStandalone: true, selector: "ndw-accordion", inputs: { collapseOthers: { classPropertyName: "collapseOthers", publicName: "collapseOthers", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "collapsibles", predicate: CollapsibleComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [""] }); }
|
|
194
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: AccordionComponent, isStandalone: true, selector: "ndw-accordion", inputs: { collapseOthers: { classPropertyName: "collapseOthers", publicName: "collapseOthers", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AccordionService], queries: [{ propertyName: "collapsibles", predicate: CollapsibleComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [""] }); }
|
|
169
195
|
}
|
|
170
196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
171
197
|
type: Component,
|
|
172
|
-
args: [{ selector: 'ndw-accordion', standalone: true, imports: [], template: "<ng-content />\n" }]
|
|
198
|
+
args: [{ selector: 'ndw-accordion', standalone: true, imports: [], providers: [AccordionService], template: "<ng-content />\n" }]
|
|
199
|
+
}] });
|
|
200
|
+
|
|
201
|
+
class ButtonDirective {
|
|
202
|
+
constructor() {
|
|
203
|
+
this.elementRef = inject(ElementRef);
|
|
204
|
+
}
|
|
205
|
+
get element() {
|
|
206
|
+
return this.elementRef.nativeElement;
|
|
207
|
+
}
|
|
208
|
+
ngOnInit() {
|
|
209
|
+
// If the text content of a child node is longer than 35 characters, truncate it
|
|
210
|
+
if (!this.element.childNodes.length) {
|
|
211
|
+
return;
|
|
212
|
+
}
|
|
213
|
+
this.element.childNodes.forEach((node) => {
|
|
214
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
215
|
+
if (!node.textContent) {
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
const text = node.textContent.trim();
|
|
219
|
+
if (text.length > 35) {
|
|
220
|
+
node.textContent = text.slice(0, 35) + '...';
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
226
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: ButtonDirective, isStandalone: true, selector: "[ndwButton]", ngImport: i0 }); }
|
|
227
|
+
}
|
|
228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ButtonDirective, decorators: [{
|
|
229
|
+
type: Directive,
|
|
230
|
+
args: [{
|
|
231
|
+
selector: '[ndwButton]',
|
|
232
|
+
standalone: true,
|
|
233
|
+
}]
|
|
173
234
|
}] });
|
|
174
235
|
|
|
175
236
|
var AlertType;
|
|
@@ -182,10 +243,25 @@ var AlertType;
|
|
|
182
243
|
|
|
183
244
|
class AlertComponent {
|
|
184
245
|
constructor() {
|
|
246
|
+
/**
|
|
247
|
+
* Whether the alert is actionable, shows a close icon and a title.
|
|
248
|
+
*/
|
|
185
249
|
this.actionable = input(false);
|
|
250
|
+
/**
|
|
251
|
+
* The title of the alert. Only used when actionable is true.
|
|
252
|
+
*/
|
|
186
253
|
this.title = input();
|
|
254
|
+
/**
|
|
255
|
+
* Use info, info-grey, warning or critical to indicate the type of alert.
|
|
256
|
+
*/
|
|
187
257
|
this.type = input(AlertType.InfoGrey);
|
|
258
|
+
/**
|
|
259
|
+
* Use polite, assertive or off to indicate whether the alert is
|
|
260
|
+
* announced automatically by the screen reader.
|
|
261
|
+
*/
|
|
262
|
+
this.ariaLive = input('off');
|
|
188
263
|
this.close = output();
|
|
264
|
+
this.role = 'alert';
|
|
189
265
|
}
|
|
190
266
|
get alertTypeClass() {
|
|
191
267
|
return this.type();
|
|
@@ -193,21 +269,30 @@ class AlertComponent {
|
|
|
193
269
|
get actionableClass() {
|
|
194
270
|
return this.actionable();
|
|
195
271
|
}
|
|
272
|
+
get ariaLiveAttribute() {
|
|
273
|
+
return this.ariaLive();
|
|
274
|
+
}
|
|
196
275
|
onClose() {
|
|
197
276
|
this.close.emit();
|
|
198
277
|
}
|
|
199
278
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
200
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: AlertComponent, isStandalone: true, selector: "ndw-alert", inputs: { actionable: { classPropertyName: "actionable", publicName: "actionable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { properties: { "class": "this.alertTypeClass", "class.actionable": "this.actionableClass" } }, ngImport: i0, template: "<section>\n <ndw-icon class=\"info-icon\">info</ndw-icon>\n @if (actionable()) {\n @if (title(); as title) {\n <h2>{{ title }}</h2>\n }\n <ndw-icon class=\"close-icon\" role=\"button\" [interactive]=\"true\" (click)=\"onClose()\">\n close\n </ndw-icon>\n }\n</section>\n<ng-content />\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--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-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-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.375em;--ndw-line-height-md: 1.5em;--ndw-rotate-half: rotate(180deg)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][outline]{background-color:transparent;border-color:var(--ndw-background-primary);color:var(--ndw-text-primary)}[ndwButton][outline]:hover{background-color:var(--ndw-background-primary);border-color:var(--ndw-background-primary);color:var(--ndw-foreground-primary)}[ndwButton][outline]:active{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton][secondary]{background-color:transparent;border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}[ndwButton][secondary]:hover{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500);color:var(--ndw-color-white)}[ndwButton][secondary]:active{background-color:var(--ndw-color-grey-700);border-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;padding-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}a[ndwLink]{align-items:baseline;color:var(--ndw-color-link-400);display:inline-flex;font-size:inherit;gap:var(--ndw-spacing-2xs);text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}a[ndwLink]>*{align-self:center}a[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}a[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}a[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-default) ease-in;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:flex-start;background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);border-radius:var(--ndw-border-radius-sm);color:var(--ndw-color-grey-600);display:grid;gap:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);grid-template-columns:auto 1fr;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-spacing-2xs)) var(--ndw-spacing-xs);padding-inline:var(--ndw-spacing-sm)}:host section{align-items:center;display:grid;gap:var(--ndw-spacing-xs);grid-template-columns:1fr;min-height:var(--ndw-spacing-lg);margin-top:-.125rem}:host section ndw-icon{color:var(--ndw-color-grey-400)}:host section ndw-icon.info-icon{font-size:var(--ndw-spacing-md);margin-top:-.125rem}:host section ndw-icon.close-icon{font-size:var(--ndw-spacing-md);margin-top:calc(var(--ndw-spacing-2xs) * -1);margin-right:calc(var(--ndw-spacing-xs) * -1)}:host section h2{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:var(--ndw-line-height-sm);margin:0}:host.actionable{grid-template-columns:1fr;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md)}:host.actionable section{grid-template-columns:auto 1fr auto}:host.actionable section .info-icon{color:var(--ndw-color-grey-700)}:host.info{background-color:var(--ndw-color-secondary-100);border-color:var(--ndw-color-secondary-500)}:host.info section .info-icon{color:var(--ndw-color-secondary-500)}:host.warning{background-color:var(--ndw-color-warning-100);border-color:var(--ndw-color-warning-500)}:host.warning section .info-icon{color:var(--ndw-color-warning-500)}:host.critical{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}:host.critical section .info-icon{color:var(--ndw-color-critical-500)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["interactive"] }] }); }
|
|
279
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: AlertComponent, isStandalone: true, selector: "ndw-alert", inputs: { actionable: { classPropertyName: "actionable", publicName: "actionable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { properties: { "class": "this.alertTypeClass", "class.actionable": "this.actionableClass", "role": "this.role", "attr.aria-live": "this.ariaLiveAttribute" } }, ngImport: i0, template: "<section>\n <ndw-icon class=\"info-icon\">info</ndw-icon>\n @if (actionable()) {\n @if (title(); as title) {\n <h2>{{ title }}</h2>\n }\n\n <button\n ndwButton\n alternative\n extra-small\n tertiary\n class=\"close-button\"\n ariaLabel=\"Sluit melding\"\n (click)=\"onClose()\"\n >\n <ndw-icon>close</ndw-icon>\n </button>\n }\n</section>\n<ng-content />\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));--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-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}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border-width:0;white-space:nowrap;clip:rect(0,0,0,0)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}button:not(:disabled){cursor:pointer}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);justify-content:center;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start;text-decoration:none}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][secondary],[ndwButton][tertiary]{background-color:transparent;color:var(--ndw-text-primary)}[ndwButton][secondary]:hover,[ndwButton][tertiary]:hover{background-color:var(--ndw-alpha-primary-007);color:var(--ndw-text-primary)}[ndwButton][secondary]:active,[ndwButton][tertiary]:active{background-color:var(--ndw-alpha-primary-015)}[ndwButton][secondary][alternative],[ndwButton][tertiary][alternative]{color:var(--ndw-color-grey-700)}[ndwButton][secondary][alternative]:hover,[ndwButton][tertiary][alternative]:hover{background-color:var(--ndw-alpha-black-007)}[ndwButton][secondary][alternative]:active,[ndwButton][tertiary][alternative]:active{background-color:var(--ndw-alpha-black-015)}[ndwButton][secondary]{border-color:var(--ndw-background-primary)}[ndwButton][secondary]:active{border-color:var(--ndw-background-primary-hover)}[ndwButton][secondary][alternative]{border-color:var(--ndw-color-grey-300)}[ndwButton][secondary][alternative]:hover{border-color:var(--ndw-color-grey-500)}[ndwButton][secondary][alternative]:active{border-color:var(--ndw-color-grey-700)}[ndwButton][tertiary]{border-color:transparent}[ndwButton][extra-small]{height:var(--ndw-spacing-lg);padding-inline:var(--ndw-spacing-2xs)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding-inline:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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}[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]: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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}[ndwLink]{display:inline-flex;align-items:baseline;gap:var(--ndw-spacing-2xs);padding:0;border:0;font-size:inherit;text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);color:var(--ndw-color-link-400);background-color:transparent;transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}[ndwLink]>*{align-self:center}[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-fast) ease-out;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover,[ndwButton][menu][active]{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:flex-start;background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);border-radius:var(--ndw-border-radius-sm);color:var(--ndw-color-grey-600);display:grid;gap:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);grid-template-columns:auto 1fr;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-spacing-2xs)) var(--ndw-spacing-xs);padding-inline:var(--ndw-spacing-sm)}:host section{align-items:center;display:grid;gap:var(--ndw-spacing-xs);grid-template-columns:1fr;min-height:var(--ndw-spacing-lg);margin-top:-.125rem}:host section .info-icon{font-size:var(--ndw-spacing-md);margin-top:-.125rem}:host section .close-button{margin-left:auto;margin-top:calc(var(--ndw-spacing-2xs) * -1);margin-right:calc(var(--ndw-spacing-xs) * -1)}:host section h2{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:var(--ndw-line-height-sm);margin:0}:host.actionable{grid-template-columns:1fr;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md)}:host.actionable section{grid-template-columns:auto 1fr auto}:host.actionable section .info-icon{color:var(--ndw-color-grey-700)}:host.info{background-color:var(--ndw-color-secondary-100);border-color:var(--ndw-color-secondary-500)}:host.info section .info-icon{color:var(--ndw-color-secondary-500)}:host.warning{background-color:var(--ndw-color-warning-100);border-color:var(--ndw-color-warning-500)}:host.warning section .info-icon{color:var(--ndw-color-warning-500)}:host.critical{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}:host.critical section .info-icon{color:var(--ndw-color-critical-500)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }] }); }
|
|
201
280
|
}
|
|
202
281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AlertComponent, decorators: [{
|
|
203
282
|
type: Component,
|
|
204
|
-
args: [{ selector: 'ndw-alert', standalone: true, imports: [IconComponent], template: "<section>\n <ndw-icon class=\"info-icon\">info</ndw-icon>\n @if (actionable()) {\n @if (title(); as title) {\n <h2>{{ title }}</h2>\n }\n <ndw-icon class=\"close-icon\" role=\"button\" [interactive]=\"true\" (click)=\"onClose()\">\n close\n </ndw-icon>\n }\n</section>\n<ng-content />\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--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-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-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.375em;--ndw-line-height-md: 1.5em;--ndw-rotate-half: rotate(180deg)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][outline]{background-color:transparent;border-color:var(--ndw-background-primary);color:var(--ndw-text-primary)}[ndwButton][outline]:hover{background-color:var(--ndw-background-primary);border-color:var(--ndw-background-primary);color:var(--ndw-foreground-primary)}[ndwButton][outline]:active{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton][secondary]{background-color:transparent;border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}[ndwButton][secondary]:hover{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500);color:var(--ndw-color-white)}[ndwButton][secondary]:active{background-color:var(--ndw-color-grey-700);border-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;padding-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}a[ndwLink]{align-items:baseline;color:var(--ndw-color-link-400);display:inline-flex;font-size:inherit;gap:var(--ndw-spacing-2xs);text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}a[ndwLink]>*{align-self:center}a[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}a[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}a[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-default) ease-in;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:flex-start;background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);border-radius:var(--ndw-border-radius-sm);color:var(--ndw-color-grey-600);display:grid;gap:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);grid-template-columns:auto 1fr;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-spacing-2xs)) var(--ndw-spacing-xs);padding-inline:var(--ndw-spacing-sm)}:host section{align-items:center;display:grid;gap:var(--ndw-spacing-xs);grid-template-columns:1fr;min-height:var(--ndw-spacing-lg);margin-top:-.125rem}:host section ndw-icon{color:var(--ndw-color-grey-400)}:host section ndw-icon.info-icon{font-size:var(--ndw-spacing-md);margin-top:-.125rem}:host section ndw-icon.close-icon{font-size:var(--ndw-spacing-md);margin-top:calc(var(--ndw-spacing-2xs) * -1);margin-right:calc(var(--ndw-spacing-xs) * -1)}:host section h2{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:var(--ndw-line-height-sm);margin:0}:host.actionable{grid-template-columns:1fr;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md)}:host.actionable section{grid-template-columns:auto 1fr auto}:host.actionable section .info-icon{color:var(--ndw-color-grey-700)}:host.info{background-color:var(--ndw-color-secondary-100);border-color:var(--ndw-color-secondary-500)}:host.info section .info-icon{color:var(--ndw-color-secondary-500)}:host.warning{background-color:var(--ndw-color-warning-100);border-color:var(--ndw-color-warning-500)}:host.warning section .info-icon{color:var(--ndw-color-warning-500)}:host.critical{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}:host.critical section .info-icon{color:var(--ndw-color-critical-500)}\n"] }]
|
|
283
|
+
args: [{ selector: 'ndw-alert', standalone: true, imports: [ButtonDirective, IconComponent], template: "<section>\n <ndw-icon class=\"info-icon\">info</ndw-icon>\n @if (actionable()) {\n @if (title(); as title) {\n <h2>{{ title }}</h2>\n }\n\n <button\n ndwButton\n alternative\n extra-small\n tertiary\n class=\"close-button\"\n ariaLabel=\"Sluit melding\"\n (click)=\"onClose()\"\n >\n <ndw-icon>close</ndw-icon>\n </button>\n }\n</section>\n<ng-content />\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));--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-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}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border-width:0;white-space:nowrap;clip:rect(0,0,0,0)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}button:not(:disabled){cursor:pointer}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);justify-content:center;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start;text-decoration:none}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][secondary],[ndwButton][tertiary]{background-color:transparent;color:var(--ndw-text-primary)}[ndwButton][secondary]:hover,[ndwButton][tertiary]:hover{background-color:var(--ndw-alpha-primary-007);color:var(--ndw-text-primary)}[ndwButton][secondary]:active,[ndwButton][tertiary]:active{background-color:var(--ndw-alpha-primary-015)}[ndwButton][secondary][alternative],[ndwButton][tertiary][alternative]{color:var(--ndw-color-grey-700)}[ndwButton][secondary][alternative]:hover,[ndwButton][tertiary][alternative]:hover{background-color:var(--ndw-alpha-black-007)}[ndwButton][secondary][alternative]:active,[ndwButton][tertiary][alternative]:active{background-color:var(--ndw-alpha-black-015)}[ndwButton][secondary]{border-color:var(--ndw-background-primary)}[ndwButton][secondary]:active{border-color:var(--ndw-background-primary-hover)}[ndwButton][secondary][alternative]{border-color:var(--ndw-color-grey-300)}[ndwButton][secondary][alternative]:hover{border-color:var(--ndw-color-grey-500)}[ndwButton][secondary][alternative]:active{border-color:var(--ndw-color-grey-700)}[ndwButton][tertiary]{border-color:transparent}[ndwButton][extra-small]{height:var(--ndw-spacing-lg);padding-inline:var(--ndw-spacing-2xs)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding-inline:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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}[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]: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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}[ndwLink]{display:inline-flex;align-items:baseline;gap:var(--ndw-spacing-2xs);padding:0;border:0;font-size:inherit;text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);color:var(--ndw-color-link-400);background-color:transparent;transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}[ndwLink]>*{align-self:center}[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-fast) ease-out;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover,[ndwButton][menu][active]{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:flex-start;background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);border-radius:var(--ndw-border-radius-sm);color:var(--ndw-color-grey-600);display:grid;gap:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);grid-template-columns:auto 1fr;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-spacing-2xs)) var(--ndw-spacing-xs);padding-inline:var(--ndw-spacing-sm)}:host section{align-items:center;display:grid;gap:var(--ndw-spacing-xs);grid-template-columns:1fr;min-height:var(--ndw-spacing-lg);margin-top:-.125rem}:host section .info-icon{font-size:var(--ndw-spacing-md);margin-top:-.125rem}:host section .close-button{margin-left:auto;margin-top:calc(var(--ndw-spacing-2xs) * -1);margin-right:calc(var(--ndw-spacing-xs) * -1)}:host section h2{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:var(--ndw-line-height-sm);margin:0}:host.actionable{grid-template-columns:1fr;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md)}:host.actionable section{grid-template-columns:auto 1fr auto}:host.actionable section .info-icon{color:var(--ndw-color-grey-700)}:host.info{background-color:var(--ndw-color-secondary-100);border-color:var(--ndw-color-secondary-500)}:host.info section .info-icon{color:var(--ndw-color-secondary-500)}:host.warning{background-color:var(--ndw-color-warning-100);border-color:var(--ndw-color-warning-500)}:host.warning section .info-icon{color:var(--ndw-color-warning-500)}:host.critical{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}:host.critical section .info-icon{color:var(--ndw-color-critical-500)}\n"] }]
|
|
205
284
|
}], propDecorators: { alertTypeClass: [{
|
|
206
285
|
type: HostBinding,
|
|
207
286
|
args: ['class']
|
|
208
287
|
}], actionableClass: [{
|
|
209
288
|
type: HostBinding,
|
|
210
289
|
args: ['class.actionable']
|
|
290
|
+
}], role: [{
|
|
291
|
+
type: HostBinding,
|
|
292
|
+
args: ['role']
|
|
293
|
+
}], ariaLiveAttribute: [{
|
|
294
|
+
type: HostBinding,
|
|
295
|
+
args: ['attr.aria-live']
|
|
211
296
|
}] } });
|
|
212
297
|
|
|
213
298
|
class BreadcrumbComponent {
|
|
@@ -228,205 +313,58 @@ class BreadcrumbGroupComponent {
|
|
|
228
313
|
this.breadcrumbs = contentChildren(BreadcrumbComponent);
|
|
229
314
|
}
|
|
230
315
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BreadcrumbGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
231
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: BreadcrumbGroupComponent, isStandalone: true, selector: "ndw-breadcrumb-group", host: { attributes: { "role": "navigation", "aria-label": "Breadcrumb" } }, queries: [{ propertyName: "breadcrumbs", predicate: BreadcrumbComponent, isSignal: 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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--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-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-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.375em;--ndw-line-height-md: 1.5em;--ndw-rotate-half: rotate(180deg)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][outline]{background-color:transparent;border-color:var(--ndw-background-primary);color:var(--ndw-text-primary)}[ndwButton][outline]:hover{background-color:var(--ndw-background-primary);border-color:var(--ndw-background-primary);color:var(--ndw-foreground-primary)}[ndwButton][outline]:active{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton][secondary]{background-color:transparent;border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}[ndwButton][secondary]:hover{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500);color:var(--ndw-color-white)}[ndwButton][secondary]:active{background-color:var(--ndw-color-grey-700);border-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;padding-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}a[ndwLink]{align-items:baseline;color:var(--ndw-color-link-400);display:inline-flex;font-size:inherit;gap:var(--ndw-spacing-2xs);text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}a[ndwLink]>*{align-self:center}a[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}a[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}a[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-default) ease-in;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{display:flex;align-items:center;background-color:var(--ndw-color-white);padding:var(--ndw-spacing-md)}.breadcrumb{--transition: color var(--ndw-animation-speed-fast) ease-out, background-color var(--ndw-animation-speed-fast) ease-out;font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;text-decoration:none;line-height:100%;color:var(--ndw-color-grey-500);background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition:var(--transition)}.breadcrumb:hover{text-decoration:none}.breadcrumb:not(.current-page):hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition:var(--transition)}.breadcrumb:not(.current-page):focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:not(.current-page):active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition:var(--transition)}.breadcrumb.current-page{color:var(--ndw-color-grey-700)}.icon-back{display:none}.icon-forward{display:block}.icon-back,.icon-forward{margin:0 0 var(--ndw-spacing-3xs) 0;font-size:var(--ndw-font-size-md);color:var(--ndw-color-primary-500)}@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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["interactive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
316
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: BreadcrumbGroupComponent, isStandalone: true, selector: "ndw-breadcrumb-group", host: { attributes: { "role": "navigation", "aria-label": "Breadcrumb" } }, queries: [{ propertyName: "breadcrumbs", predicate: BreadcrumbComponent, isSignal: 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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));--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-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}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border-width:0;white-space:nowrap;clip:rect(0,0,0,0)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}button:not(:disabled){cursor:pointer}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);justify-content:center;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start;text-decoration:none}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][secondary],[ndwButton][tertiary]{background-color:transparent;color:var(--ndw-text-primary)}[ndwButton][secondary]:hover,[ndwButton][tertiary]:hover{background-color:var(--ndw-alpha-primary-007);color:var(--ndw-text-primary)}[ndwButton][secondary]:active,[ndwButton][tertiary]:active{background-color:var(--ndw-alpha-primary-015)}[ndwButton][secondary][alternative],[ndwButton][tertiary][alternative]{color:var(--ndw-color-grey-700)}[ndwButton][secondary][alternative]:hover,[ndwButton][tertiary][alternative]:hover{background-color:var(--ndw-alpha-black-007)}[ndwButton][secondary][alternative]:active,[ndwButton][tertiary][alternative]:active{background-color:var(--ndw-alpha-black-015)}[ndwButton][secondary]{border-color:var(--ndw-background-primary)}[ndwButton][secondary]:active{border-color:var(--ndw-background-primary-hover)}[ndwButton][secondary][alternative]{border-color:var(--ndw-color-grey-300)}[ndwButton][secondary][alternative]:hover{border-color:var(--ndw-color-grey-500)}[ndwButton][secondary][alternative]:active{border-color:var(--ndw-color-grey-700)}[ndwButton][tertiary]{border-color:transparent}[ndwButton][extra-small]{height:var(--ndw-spacing-lg);padding-inline:var(--ndw-spacing-2xs)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding-inline:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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}[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]: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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}[ndwLink]{display:inline-flex;align-items:baseline;gap:var(--ndw-spacing-2xs);padding:0;border:0;font-size:inherit;text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);color:var(--ndw-color-link-400);background-color:transparent;transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}[ndwLink]>*{align-self:center}[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-fast) ease-out;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover,[ndwButton][menu][active]{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{display:flex;align-items:center;background-color:var(--ndw-color-white);padding:var(--ndw-spacing-md)}.breadcrumb{--transition: color var(--ndw-animation-speed-fast) ease-out, background-color var(--ndw-animation-speed-fast) ease-out;font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;text-decoration:none;line-height:100%;color:var(--ndw-color-grey-500);background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition:var(--transition)}.breadcrumb:hover{text-decoration:none}.breadcrumb:not(.current-page):hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition:var(--transition)}.breadcrumb:not(.current-page):focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:not(.current-page):active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition:var(--transition)}.breadcrumb.current-page{color:var(--ndw-color-grey-700)}.icon-back{display:none}.icon-forward{display:block}.icon-back,.icon-forward{margin:0 0 var(--ndw-spacing-3xs) 0;font-size:var(--ndw-font-size-md);color:var(--ndw-color-primary-500)}@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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
232
317
|
}
|
|
233
318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BreadcrumbGroupComponent, decorators: [{
|
|
234
319
|
type: Component,
|
|
235
320
|
args: [{ selector: 'ndw-breadcrumb-group', standalone: true, imports: [NgTemplateOutlet, IconComponent, NgClass, RouterLink], host: {
|
|
236
321
|
role: 'navigation',
|
|
237
322
|
'aria-label': 'Breadcrumb',
|
|
238
|
-
}, 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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--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-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-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.375em;--ndw-line-height-md: 1.5em;--ndw-rotate-half: rotate(180deg)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][outline]{background-color:transparent;border-color:var(--ndw-background-primary);color:var(--ndw-text-primary)}[ndwButton][outline]:hover{background-color:var(--ndw-background-primary);border-color:var(--ndw-background-primary);color:var(--ndw-foreground-primary)}[ndwButton][outline]:active{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton][secondary]{background-color:transparent;border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}[ndwButton][secondary]:hover{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500);color:var(--ndw-color-white)}[ndwButton][secondary]:active{background-color:var(--ndw-color-grey-700);border-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;padding-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}a[ndwLink]{align-items:baseline;color:var(--ndw-color-link-400);display:inline-flex;font-size:inherit;gap:var(--ndw-spacing-2xs);text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}a[ndwLink]>*{align-self:center}a[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}a[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}a[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-default) ease-in;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{display:flex;align-items:center;background-color:var(--ndw-color-white);padding:var(--ndw-spacing-md)}.breadcrumb{--transition: color var(--ndw-animation-speed-fast) ease-out, background-color var(--ndw-animation-speed-fast) ease-out;font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;text-decoration:none;line-height:100%;color:var(--ndw-color-grey-500);background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition:var(--transition)}.breadcrumb:hover{text-decoration:none}.breadcrumb:not(.current-page):hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition:var(--transition)}.breadcrumb:not(.current-page):focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:not(.current-page):active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition:var(--transition)}.breadcrumb.current-page{color:var(--ndw-color-grey-700)}.icon-back{display:none}.icon-forward{display:block}.icon-back,.icon-forward{margin:0 0 var(--ndw-spacing-3xs) 0;font-size:var(--ndw-font-size-md);color:var(--ndw-color-primary-500)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"] }]
|
|
323
|
+
}, 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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));--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-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}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border-width:0;white-space:nowrap;clip:rect(0,0,0,0)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}button:not(:disabled){cursor:pointer}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);justify-content:center;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start;text-decoration:none}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][secondary],[ndwButton][tertiary]{background-color:transparent;color:var(--ndw-text-primary)}[ndwButton][secondary]:hover,[ndwButton][tertiary]:hover{background-color:var(--ndw-alpha-primary-007);color:var(--ndw-text-primary)}[ndwButton][secondary]:active,[ndwButton][tertiary]:active{background-color:var(--ndw-alpha-primary-015)}[ndwButton][secondary][alternative],[ndwButton][tertiary][alternative]{color:var(--ndw-color-grey-700)}[ndwButton][secondary][alternative]:hover,[ndwButton][tertiary][alternative]:hover{background-color:var(--ndw-alpha-black-007)}[ndwButton][secondary][alternative]:active,[ndwButton][tertiary][alternative]:active{background-color:var(--ndw-alpha-black-015)}[ndwButton][secondary]{border-color:var(--ndw-background-primary)}[ndwButton][secondary]:active{border-color:var(--ndw-background-primary-hover)}[ndwButton][secondary][alternative]{border-color:var(--ndw-color-grey-300)}[ndwButton][secondary][alternative]:hover{border-color:var(--ndw-color-grey-500)}[ndwButton][secondary][alternative]:active{border-color:var(--ndw-color-grey-700)}[ndwButton][tertiary]{border-color:transparent}[ndwButton][extra-small]{height:var(--ndw-spacing-lg);padding-inline:var(--ndw-spacing-2xs)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding-inline:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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}[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]: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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}[ndwLink]{display:inline-flex;align-items:baseline;gap:var(--ndw-spacing-2xs);padding:0;border:0;font-size:inherit;text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);color:var(--ndw-color-link-400);background-color:transparent;transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}[ndwLink]>*{align-self:center}[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-fast) ease-out;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover,[ndwButton][menu][active]{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{display:flex;align-items:center;background-color:var(--ndw-color-white);padding:var(--ndw-spacing-md)}.breadcrumb{--transition: color var(--ndw-animation-speed-fast) ease-out, background-color var(--ndw-animation-speed-fast) ease-out;font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;text-decoration:none;line-height:100%;color:var(--ndw-color-grey-500);background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition:var(--transition)}.breadcrumb:hover{text-decoration:none}.breadcrumb:not(.current-page):hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition:var(--transition)}.breadcrumb:not(.current-page):focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:not(.current-page):active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition:var(--transition)}.breadcrumb.current-page{color:var(--ndw-color-grey-700)}.icon-back{display:none}.icon-forward{display:block}.icon-back,.icon-forward{margin:0 0 var(--ndw-spacing-3xs) 0;font-size:var(--ndw-font-size-md);color:var(--ndw-color-primary-500)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"] }]
|
|
239
324
|
}] });
|
|
240
325
|
|
|
241
|
-
class
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
}
|
|
245
|
-
get element() {
|
|
246
|
-
return this.elementRef.nativeElement;
|
|
247
|
-
}
|
|
248
|
-
ngOnInit() {
|
|
249
|
-
// If the text content of a child node is longer than 35 characters, truncate it
|
|
250
|
-
if (!this.element.childNodes.length) {
|
|
251
|
-
return;
|
|
252
|
-
}
|
|
253
|
-
this.element.childNodes.forEach((node) => {
|
|
254
|
-
if (node.nodeType === Node.TEXT_NODE) {
|
|
255
|
-
if (!node.textContent) {
|
|
256
|
-
return;
|
|
257
|
-
}
|
|
258
|
-
if (node.textContent.length > 35) {
|
|
259
|
-
node.textContent = node.textContent.slice(0, 35) + '...';
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
});
|
|
263
|
-
}
|
|
264
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
265
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: ButtonDirective, isStandalone: true, selector: "[ndwButton]", ngImport: i0 }); }
|
|
326
|
+
class CardContentComponent {
|
|
327
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
328
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: CardContentComponent, isStandalone: true, selector: "ndw-card-content", ngImport: i0, template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto}\n"] }); }
|
|
266
329
|
}
|
|
267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type:
|
|
268
|
-
type:
|
|
269
|
-
args: [{
|
|
270
|
-
selector: '[ndwButton]',
|
|
271
|
-
standalone: true,
|
|
272
|
-
}]
|
|
330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardContentComponent, decorators: [{
|
|
331
|
+
type: Component,
|
|
332
|
+
args: [{ selector: 'ndw-card-content', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto}\n"] }]
|
|
273
333
|
}] });
|
|
274
334
|
|
|
275
|
-
class
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
this.overlay = inject(Overlay);
|
|
279
|
-
this.isOpen$ = new Subject();
|
|
280
|
-
this.isOpen = false;
|
|
281
|
-
}
|
|
282
|
-
detach() {
|
|
283
|
-
this.overlayRef?.detach();
|
|
284
|
-
this.isOpen = false;
|
|
285
|
-
this.isOpen$.next(this.isOpen);
|
|
286
|
-
}
|
|
287
|
-
dispose() {
|
|
288
|
-
this.overlayRef?.dispose();
|
|
289
|
-
}
|
|
290
|
-
open(templateRef, viewContainerRef) {
|
|
291
|
-
if (this.isOpen) {
|
|
292
|
-
return;
|
|
293
|
-
}
|
|
294
|
-
const templatePortal = new TemplatePortal(templateRef, viewContainerRef);
|
|
295
|
-
this.overlayRef = this.overlay.create({
|
|
296
|
-
hasBackdrop: true,
|
|
297
|
-
backdropClass: 'ndw-overlay-backdrop',
|
|
298
|
-
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
299
|
-
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
|
|
300
|
-
});
|
|
301
|
-
this.overlayRef.attach(templatePortal);
|
|
302
|
-
this.isOpen = true;
|
|
303
|
-
this.isOpen$.next(this.isOpen);
|
|
304
|
-
this.actions()
|
|
305
|
-
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
306
|
-
.subscribe(() => {
|
|
307
|
-
this.detach();
|
|
308
|
-
});
|
|
309
|
-
}
|
|
310
|
-
actions() {
|
|
311
|
-
if (!this.overlayRef) {
|
|
312
|
-
return EMPTY;
|
|
313
|
-
}
|
|
314
|
-
return this.overlayRef._outsidePointerEvents;
|
|
315
|
-
}
|
|
316
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
317
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalService, providedIn: 'root' }); }
|
|
335
|
+
class CardFooterComponent {
|
|
336
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
337
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: CardFooterComponent, isStandalone: true, selector: "ndw-card-footer", ngImport: i0, template: "<ng-content />\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs)}\n"] }); }
|
|
318
338
|
}
|
|
319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type:
|
|
320
|
-
type:
|
|
321
|
-
args: [{
|
|
322
|
-
providedIn: 'root',
|
|
323
|
-
}]
|
|
339
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardFooterComponent, decorators: [{
|
|
340
|
+
type: Component,
|
|
341
|
+
args: [{ selector: 'ndw-card-footer', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs)}\n"] }]
|
|
324
342
|
}] });
|
|
325
343
|
|
|
326
|
-
class ModalTriggerDirective {
|
|
327
|
-
constructor() {
|
|
328
|
-
this.modalService = inject(ModalService);
|
|
329
|
-
this.viewContainerRef = inject(ViewContainerRef);
|
|
330
|
-
this.ndwModalTrigger = input.required();
|
|
331
|
-
this.isOpen = model(false);
|
|
332
|
-
}
|
|
333
|
-
onClick() {
|
|
334
|
-
this.open();
|
|
335
|
-
}
|
|
336
|
-
ngOnChanges() {
|
|
337
|
-
if (this.isOpen()) {
|
|
338
|
-
this.open();
|
|
339
|
-
}
|
|
340
|
-
else {
|
|
341
|
-
this.modalService.detach();
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
ngOnInit() {
|
|
345
|
-
this.modalService.isOpen$.subscribe((isOpen) => {
|
|
346
|
-
this.isOpen.set(isOpen);
|
|
347
|
-
});
|
|
348
|
-
}
|
|
349
|
-
ngOnDestroy() {
|
|
350
|
-
this.modalService.dispose();
|
|
351
|
-
}
|
|
352
|
-
open() {
|
|
353
|
-
this.modalService.open(this.ndwModalTrigger(), this.viewContainerRef);
|
|
354
|
-
}
|
|
355
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
356
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.3", type: ModalTriggerDirective, isStandalone: true, selector: "[ndwModalTrigger]", inputs: { ndwModalTrigger: { classPropertyName: "ndwModalTrigger", publicName: "ndwModalTrigger", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
357
|
-
}
|
|
358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalTriggerDirective, decorators: [{
|
|
359
|
-
type: Directive,
|
|
360
|
-
args: [{
|
|
361
|
-
selector: '[ndwModalTrigger]',
|
|
362
|
-
standalone: true,
|
|
363
|
-
}]
|
|
364
|
-
}], propDecorators: { onClick: [{
|
|
365
|
-
type: HostListener,
|
|
366
|
-
args: ['click', ['$event']]
|
|
367
|
-
}] } });
|
|
368
|
-
|
|
369
344
|
class CardHeaderComponent {
|
|
370
|
-
constructor() {
|
|
371
|
-
this.modalService = inject(ModalService);
|
|
372
|
-
this.isModal = false;
|
|
373
|
-
}
|
|
374
|
-
detachModal() {
|
|
375
|
-
this.modalService.detach();
|
|
376
|
-
}
|
|
377
345
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
346
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: CardHeaderComponent, isStandalone: true, selector: "ndw-card-header", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;align-items:center;font-size:var(--ndw-font-size-lg);font-weight:700}\n"] }); }
|
|
379
347
|
}
|
|
380
348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
381
349
|
type: Component,
|
|
382
|
-
args: [{ selector: 'ndw-card-header', standalone: true, imports: [IconComponent], template: "<ng-content />\n
|
|
350
|
+
args: [{ selector: 'ndw-card-header', standalone: true, imports: [IconComponent], template: "<ng-content />\n", styles: [":host{display:grid;align-items:center;font-size:var(--ndw-font-size-lg);font-weight:700}\n"] }]
|
|
383
351
|
}] });
|
|
384
352
|
|
|
385
353
|
class CardComponent {
|
|
386
|
-
constructor() {
|
|
387
|
-
this.isModal = input(false);
|
|
388
|
-
this.header = contentChild(CardHeaderComponent);
|
|
389
|
-
}
|
|
390
|
-
get modalClass() {
|
|
391
|
-
return this.isModal();
|
|
392
|
-
}
|
|
393
|
-
ngOnInit() {
|
|
394
|
-
const header = this.header();
|
|
395
|
-
if (header) {
|
|
396
|
-
header.isModal = this.isModal();
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
354
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
400
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
355
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: CardComponent, isStandalone: true, selector: "ndw-card", ngImport: i0, template: "<ng-content />\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);display:grid;gap:var(--ndw-spacing-md);padding:var(--ndw-spacing-lg)}\n"] }); }
|
|
401
356
|
}
|
|
402
357
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardComponent, decorators: [{
|
|
403
358
|
type: Component,
|
|
404
|
-
args: [{ selector: 'ndw-card', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);display:grid;gap:var(--ndw-spacing-
|
|
405
|
-
}], propDecorators: { modalClass: [{
|
|
406
|
-
type: HostBinding,
|
|
407
|
-
args: ['class.modal']
|
|
408
|
-
}] } });
|
|
409
|
-
|
|
410
|
-
class CardContentComponent {
|
|
411
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
412
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: CardContentComponent, isStandalone: true, selector: "ndw-card-content", ngImport: i0, template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto}\n"] }); }
|
|
413
|
-
}
|
|
414
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardContentComponent, decorators: [{
|
|
415
|
-
type: Component,
|
|
416
|
-
args: [{ selector: 'ndw-card-content', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto}\n"] }]
|
|
359
|
+
args: [{ selector: 'ndw-card', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);display:grid;gap:var(--ndw-spacing-md);padding:var(--ndw-spacing-lg)}\n"] }]
|
|
417
360
|
}] });
|
|
418
361
|
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
}
|
|
426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CardFooterComponent, decorators: [{
|
|
427
|
-
type: Component,
|
|
428
|
-
args: [{ selector: 'ndw-card-footer', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md)}\n"] }]
|
|
429
|
-
}] });
|
|
362
|
+
const CARD_COMPONENTS = [
|
|
363
|
+
CardComponent,
|
|
364
|
+
CardHeaderComponent,
|
|
365
|
+
CardContentComponent,
|
|
366
|
+
CardFooterComponent,
|
|
367
|
+
];
|
|
430
368
|
|
|
431
369
|
class PopoverTriggerDirective {
|
|
432
370
|
constructor() {
|
|
@@ -517,7 +455,6 @@ class PopoverTriggerDirective {
|
|
|
517
455
|
}
|
|
518
456
|
close() {
|
|
519
457
|
this.overlayRef?.dispose();
|
|
520
|
-
this.elementRef.nativeElement.focus();
|
|
521
458
|
}
|
|
522
459
|
getPopoverPosition(popoverPosition) {
|
|
523
460
|
if (popoverPosition === 'overTriggerButton') {
|
|
@@ -606,43 +543,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
606
543
|
|
|
607
544
|
class RemovablePillComponent {
|
|
608
545
|
constructor() {
|
|
546
|
+
/**
|
|
547
|
+
* Disables the pill
|
|
548
|
+
*/
|
|
609
549
|
this.disabled = input(false);
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
550
|
+
/**
|
|
551
|
+
* Aria label for the remove button
|
|
552
|
+
*/
|
|
553
|
+
this.removeAriaLabel = input('Verwijder');
|
|
554
|
+
this.onClick = output();
|
|
613
555
|
}
|
|
614
556
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: RemovablePillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
615
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: RemovablePillComponent, isStandalone: true, selector: "ndw-removable-pill", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }
|
|
557
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: RemovablePillComponent, isStandalone: true, selector: "ndw-removable-pill", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"ndw-removable-pill\" [class.ndw-removable-pill--disabled]=\"disabled()\">\n <ng-content />\n\n <button\n type=\"button\"\n class=\"ndw-removable-pill__button\"\n [attr.aria-label]=\"removeAriaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick.emit($event)\"\n >\n <ndw-icon>close</ndw-icon>\n </button>\n</div>\n", styles: [".ndw-removable-pill{position:relative;overflow:hidden;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;height:1.5rem;padding:0 var(--ndw-spacing-2xs) 0 var(--ndw-spacing-xs);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);border-radius:45px;outline:none;color:var(--ndw-color-primary);background-color:var(--ndw-color-primary-050);font-size:var(--ndw-font-size-sm);cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}.ndw-removable-pill:hover{border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);background-color:var(--ndw-color-primary);color:var(--ndw-color-white)}.ndw-removable-pill:active,.ndw-removable-pill:focus-within{border:var(--ndw-border-size-sm) solid var(--ndw-color-link-400);background-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}.ndw-removable-pill--disabled{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-400);pointer-events:none}.ndw-removable-pill__button{border:0;padding:0;background-color:transparent;color:inherit}.ndw-removable-pill__button:focus{outline:none}.ndw-removable-pill__button:after{content:\"\";position:absolute;inset:0}.ndw-removable-pill ndw-icon{display:grid;width:var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }] }); }
|
|
616
558
|
}
|
|
617
559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: RemovablePillComponent, decorators: [{
|
|
618
560
|
type: Component,
|
|
619
|
-
args: [{ selector: 'ndw-removable-pill', standalone: true, imports: [IconComponent], template: "<ng-content
|
|
620
|
-
}]
|
|
621
|
-
type: HostBinding,
|
|
622
|
-
args: ['attr.tabindex']
|
|
623
|
-
}] } });
|
|
561
|
+
args: [{ selector: 'ndw-removable-pill', standalone: true, imports: [IconComponent], template: "<div class=\"ndw-removable-pill\" [class.ndw-removable-pill--disabled]=\"disabled()\">\n <ng-content />\n\n <button\n type=\"button\"\n class=\"ndw-removable-pill__button\"\n [attr.aria-label]=\"removeAriaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick.emit($event)\"\n >\n <ndw-icon>close</ndw-icon>\n </button>\n</div>\n", styles: [".ndw-removable-pill{position:relative;overflow:hidden;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;height:1.5rem;padding:0 var(--ndw-spacing-2xs) 0 var(--ndw-spacing-xs);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);border-radius:45px;outline:none;color:var(--ndw-color-primary);background-color:var(--ndw-color-primary-050);font-size:var(--ndw-font-size-sm);cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}.ndw-removable-pill:hover{border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);background-color:var(--ndw-color-primary);color:var(--ndw-color-white)}.ndw-removable-pill:active,.ndw-removable-pill:focus-within{border:var(--ndw-border-size-sm) solid var(--ndw-color-link-400);background-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}.ndw-removable-pill--disabled{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-400);pointer-events:none}.ndw-removable-pill__button{border:0;padding:0;background-color:transparent;color:inherit}.ndw-removable-pill__button:focus{outline:none}.ndw-removable-pill__button:after{content:\"\";position:absolute;inset:0}.ndw-removable-pill ndw-icon{display:grid;width:var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm)}\n"] }]
|
|
562
|
+
}] });
|
|
624
563
|
|
|
625
564
|
class DropdownComponent {
|
|
626
565
|
constructor() {
|
|
627
|
-
this.removablePillClicked = output();
|
|
628
566
|
this.disabled = input(false);
|
|
629
|
-
this.isOpenChange = output();
|
|
630
|
-
this.dropdownTrigger = viewChild.required(PopoverTriggerDirective);
|
|
631
|
-
this.buttonIcon = computed(() => this.dropdownTrigger().isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down');
|
|
632
567
|
this.chevron = input();
|
|
633
568
|
this.buttonText = input.required();
|
|
634
569
|
this.prefixIcon = input('');
|
|
635
570
|
this.selectAmount = input(0);
|
|
571
|
+
this.removablePillClicked = output();
|
|
572
|
+
this.isOpenChange = output();
|
|
573
|
+
this.popoverTrigger = viewChild.required(PopoverTriggerDirective);
|
|
574
|
+
this.dropdownButton = viewChild.required('dropdownButton');
|
|
575
|
+
this.buttonIcon = computed(() => this.popoverTrigger().isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down');
|
|
576
|
+
}
|
|
577
|
+
onRemovablePillClicked($event) {
|
|
578
|
+
$event.stopPropagation();
|
|
579
|
+
this.removablePillClicked.emit();
|
|
636
580
|
}
|
|
637
|
-
|
|
581
|
+
onKeyDown(event) {
|
|
582
|
+
if (event.key === 'Escape') {
|
|
583
|
+
this.popoverTrigger().isOpen.set(false);
|
|
584
|
+
this.popoverTrigger().togglePopover();
|
|
585
|
+
}
|
|
586
|
+
else if (event.key === 'Enter' && !this.disabled()) {
|
|
587
|
+
this.popoverTrigger().toggle();
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
closeDropdown() {
|
|
591
|
+
this.dropdownButton().nativeElement.focus();
|
|
592
|
+
}
|
|
593
|
+
onKeyDownRemovablePill(event) {
|
|
594
|
+
if (event.key !== 'Enter' || this.disabled()) {
|
|
595
|
+
return;
|
|
596
|
+
}
|
|
638
597
|
event.stopPropagation();
|
|
598
|
+
event.preventDefault();
|
|
639
599
|
this.removablePillClicked.emit();
|
|
600
|
+
setTimeout(() => {
|
|
601
|
+
this.dropdownButton().nativeElement.focus();
|
|
602
|
+
});
|
|
640
603
|
}
|
|
641
604
|
isOpenChanged(isOpen) {
|
|
642
605
|
this.isOpenChange.emit(isOpen);
|
|
643
606
|
}
|
|
644
607
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
645
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: DropdownComponent, isStandalone: true, selector: "ndw-dropdown", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, selectAmount: { classPropertyName: "selectAmount", publicName: "selectAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removablePillClicked: "removablePillClicked", isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "
|
|
608
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: DropdownComponent, isStandalone: true, selector: "ndw-dropdown", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, selectAmount: { classPropertyName: "selectAmount", publicName: "selectAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removablePillClicked: "removablePillClicked", isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n #dropdownButton\n ndwButton\n filter\n [ndwPopoverTrigger]=\"dropdownContent\"\n (isOpenChange)=\"isOpenChanged($event)\"\n (keydown)=\"onKeyDown($event)\"\n [disabled]=\"disabled()\"\n aria-haspopup=\"dialog\"\n>\n @if (prefixIcon(); as prefixIconName) {\n <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n }\n\n {{ buttonText() }}\n\n @if (selectAmount()) {\n <ndw-removable-pill\n [attr.disabled]=\"disabled() ? true : null\"\n (keydown)=\"onKeyDownRemovablePill($event)\"\n (onClick)=\"onRemovablePillClicked($event)\"\n >\n {{ selectAmount() }}\n </ndw-removable-pill>\n }\n\n @if (chevron()) {\n <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n }\n</button>\n\n<ng-template #dropdownContent>\n <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\n <ng-content />\n </div>\n</ng-template>\n", styles: [":host{display:inline-block}button{width:100%;display:flex;justify-content:space-between}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: RemovablePillComponent, selector: "ndw-removable-pill", inputs: ["disabled", "removeAriaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
646
609
|
}
|
|
647
610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
648
611
|
type: Component,
|
|
@@ -652,7 +615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
652
615
|
IconComponent,
|
|
653
616
|
CommonModule,
|
|
654
617
|
RemovablePillComponent,
|
|
655
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n ndwButton\n filter\n [ndwPopoverTrigger]=\"dropdownContent\"\n (isOpenChange)=\"isOpenChanged($event)\"\n [disabled]=\"disabled()\"\n aria-haspopup=\"dialog\"\n>\n @if (prefixIcon(); as prefixIconName) {\n <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n }\n\n {{ buttonText() }}\n\n @if (selectAmount()) {\n <ndw-removable-pill\n
|
|
618
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n #dropdownButton\n ndwButton\n filter\n [ndwPopoverTrigger]=\"dropdownContent\"\n (isOpenChange)=\"isOpenChanged($event)\"\n (keydown)=\"onKeyDown($event)\"\n [disabled]=\"disabled()\"\n aria-haspopup=\"dialog\"\n>\n @if (prefixIcon(); as prefixIconName) {\n <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n }\n\n {{ buttonText() }}\n\n @if (selectAmount()) {\n <ndw-removable-pill\n [attr.disabled]=\"disabled() ? true : null\"\n (keydown)=\"onKeyDownRemovablePill($event)\"\n (onClick)=\"onRemovablePillClicked($event)\"\n >\n {{ selectAmount() }}\n </ndw-removable-pill>\n }\n\n @if (chevron()) {\n <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n }\n</button>\n\n<ng-template #dropdownContent>\n <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\n <ng-content />\n </div>\n</ng-template>\n", styles: [":host{display:inline-block}button{width:100%;display:flex;justify-content:space-between}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}\n"] }]
|
|
656
619
|
}] });
|
|
657
620
|
|
|
658
621
|
class CheckboxComponent {
|
|
@@ -661,6 +624,7 @@ class CheckboxComponent {
|
|
|
661
624
|
this.switch = input(false);
|
|
662
625
|
this.disabled = input(false);
|
|
663
626
|
this.error = input(false);
|
|
627
|
+
this.success = input(false);
|
|
664
628
|
this.indeterminate = input(false);
|
|
665
629
|
this.required = input(false);
|
|
666
630
|
this.uuid = crypto.randomUUID();
|
|
@@ -697,13 +661,13 @@ class CheckboxComponent {
|
|
|
697
661
|
// noop
|
|
698
662
|
}
|
|
699
663
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
700
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CheckboxComponent, isStandalone: true, selector: "ndw-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, switch: { classPropertyName: "switch", publicName: "switch", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class.checked": "this.checkedClass", "class.disabled": "this.disabledClass", "class.indeterminate": "this.indeterminateClass" } }, providers: [
|
|
664
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: CheckboxComponent, isStandalone: true, selector: "ndw-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, switch: { classPropertyName: "switch", publicName: "switch", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class.checked": "this.checkedClass", "class.disabled": "this.disabledClass", "class.indeterminate": "this.indeterminateClass" } }, providers: [
|
|
701
665
|
{
|
|
702
666
|
provide: NG_VALUE_ACCESSOR,
|
|
703
667
|
useExisting: CheckboxComponent,
|
|
704
668
|
multi: true,
|
|
705
669
|
},
|
|
706
|
-
], ngImport: i0, template: "<input\n type=\"checkbox\"\n [id]=\"'checkbox-' + uuid\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n aria-hidden=\"true\"\n/>\n<div\n [ngClass]=\"{ error: error(), checkbox: !switch(), switch: switch() }\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"'checkbox-label-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n [tabindex]=\"disabled() ? -1 : 0\"\n>\n @if (!switch()) {\n @if (checked()) {\n <ndw-icon>check</ndw-icon>\n } @else if (indeterminate()) {\n <ndw-icon>remove</ndw-icon>\n }\n } @else {\n <span class=\"switch-icon\">\n @if (checked()) {\n <ndw-icon>check</ndw-icon>\n } @else {\n <ndw-icon>close</ndw-icon>\n }\n </span>\n }\n</div>\n<label\n id=\"checkbox-label-{{ uuid }}\"\n tabindex=\"-1\"\n [for]=\"'checkbox-' + uuid\"\n [ngClass]=\"{ 'switch-text': switch() }\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content />\n</label>\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@20..48,400&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{--checkable-input-size: 1.25rem;cursor:pointer;display:inline-grid;gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;min-height:1.375rem;width:fit-content}input{display:none}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;margin-top:var(--ndw-spacing-3xs);width:fit-content}label:focus{outline:none}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus){outline:none}:host(:focus) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus) div,:host(.indeterminate:focus) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:var(--ndw-border-radius-sm)}div.checkbox ndw-icon{font-size:1.25rem;inset:calc(var(--ndw-border-size-sm) * -1);position:absolute}div.switch{width:2.75rem;height:var(--ndw-spacing-lg);border-radius:calc(var(--ndw-spacing-lg) / 2);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-border-size-lg)}div.switch .switch-icon{background-color:var(--ndw-color-grey-400);border-radius:50%;width:var(--ndw-spacing-md);height:var(--ndw-spacing-md);display:flex;align-items:center;justify-content:center;animation:translateToLeft var(--ndw-animation-speed-fast) ease-out forwards}div.switch .switch-icon ndw-icon{color:var(--ndw-color-white);font-size:var(--ndw-spacing-sm)}div.switch.error{background-color:var(--ndw-color-white)}label.switch-text{margin-top:var(--ndw-spacing-2xs)}:host(.checked) div.switch,:host(.indeterminate) div.switch{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.switch .switch-icon,:host(.indeterminate) div.switch .switch-icon{background-color:var(--ndw-color-white);animation:translateToRight var(--ndw-animation-speed-fast) ease-out forwards}:host(.checked) div.switch .switch-icon ndw-icon,:host(.indeterminate) div.switch .switch-icon ndw-icon{color:var(--ndw-color-positive-500)}:host(.checked) div.switch.error,:host(.indeterminate) div.switch.error{background-color:var(--ndw-color-positive-500)}:host(:hover) div{background-color:var(--ndw-color-white)}:host(:hover) div.checkbox{border-color:var(--ndw-color-primary-500)}:host(:hover) div.switch{border-color:var(--ndw-color-grey-500)}:host(:hover) div.switch ndw-icon{color:var(--ndw-color-white)}:host(.checked:hover) div.checkbox,:host(.indeterminate:hover) div.checkbox{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(.checked:hover) div.switch,:host(.indeterminate:hover) div.switch{background-color:var(--ndw-color-positive-600);border-color:var(--ndw-color-positive-600)}:host(.checked:hover) div.switch ndw-icon,:host(.indeterminate:hover) div.switch ndw-icon{color:var(--ndw-color-positive-600)}:host(:focus) div.switch{border-color:var(--ndw-color-secondary-500)}:host(.disabled) div.switch .switch-icon{background-color:var(--ndw-color-grey-200)}:host(.disabled) div.switch .switch-
|
|
670
|
+
], ngImport: i0, template: "<input\n type=\"checkbox\"\n [id]=\"'checkbox-' + uuid\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n aria-hidden=\"true\"\n/>\n<div\n [ngClass]=\"{ error: error(), success: success(), checkbox: !switch(), switch: switch() }\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"'checkbox-label-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n [tabindex]=\"disabled() ? -1 : 0\"\n>\n @if (!switch()) {\n @if (checked()) {\n <ndw-icon>check</ndw-icon>\n } @else if (indeterminate()) {\n <ndw-icon>remove</ndw-icon>\n }\n } @else {\n <span class=\"switch-icon\">\n @if (checked()) {\n <ndw-icon>check</ndw-icon>\n } @else {\n <ndw-icon>close</ndw-icon>\n }\n </span>\n }\n</div>\n<label\n id=\"checkbox-label-{{ uuid }}\"\n tabindex=\"-1\"\n [for]=\"'checkbox-' + uuid\"\n [ngClass]=\"{ 'switch-text': switch() }\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content />\n</label>\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@20..48,400&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{--checkable-input-size: 1.25rem;cursor:pointer;display:inline-grid;gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;min-height:1.375rem;width:fit-content}input{display:none}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size)}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;margin-top:var(--ndw-spacing-3xs);width:fit-content}label:focus{outline:none}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus){outline:none}:host(:focus) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus) div,:host(.indeterminate:focus) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:var(--ndw-border-radius-sm)}div.checkbox ndw-icon{font-size:1.25rem;inset:calc(var(--ndw-border-size-sm) * -1);position:absolute}div.switch{width:2.75rem;height:var(--ndw-spacing-lg);border-radius:calc(var(--ndw-spacing-lg) / 2);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-border-size-lg)}div.switch .switch-icon{background-color:var(--ndw-color-grey-400);border-radius:50%;width:var(--ndw-spacing-md);height:var(--ndw-spacing-md);display:flex;align-items:center;justify-content:center;animation:translateToLeft var(--ndw-animation-speed-fast) ease-out forwards}div.switch .switch-icon ndw-icon{color:var(--ndw-color-white);font-size:var(--ndw-spacing-sm)}div.switch.error{background-color:var(--ndw-color-white)}label.switch-text{margin-top:var(--ndw-spacing-2xs)}:host(.checked) div.switch,:host(.indeterminate) div.switch{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.switch .switch-icon,:host(.indeterminate) div.switch .switch-icon{background-color:var(--ndw-color-white);animation:translateToRight var(--ndw-animation-speed-fast) ease-out forwards}:host(.checked) div.switch .switch-icon ndw-icon,:host(.indeterminate) div.switch .switch-icon ndw-icon{color:var(--ndw-color-positive-500)}:host(.checked) div.switch.error,:host(.indeterminate) div.switch.error{background-color:var(--ndw-color-positive-500)}:host(:hover) div{background-color:var(--ndw-color-white)}:host(:hover) div.checkbox{border-color:var(--ndw-color-primary-500)}:host(:hover) div.switch{border-color:var(--ndw-color-grey-500)}:host(:hover) div.switch ndw-icon{color:var(--ndw-color-white)}:host(.checked:hover) div.checkbox,:host(.indeterminate:hover) div.checkbox{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(.checked:hover) div.switch,:host(.indeterminate:hover) div.switch{background-color:var(--ndw-color-positive-600);border-color:var(--ndw-color-positive-600)}:host(.checked:hover) div.switch ndw-icon,:host(.indeterminate:hover) div.switch ndw-icon{color:var(--ndw-color-positive-600)}:host(:focus) div.switch{border-color:var(--ndw-color-secondary-500)}:host(.disabled) div.switch{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300)}:host(.disabled) div.switch .switch-icon{background-color:var(--ndw-color-grey-200)}:host(.checked.disabled) div.switch,:host(.indeterminate.disabled) div.switch{background-color:var(--ndw-color-grey-400);border-color:var(--ndw-color-grey-400)}:host(.checked.disabled) div.switch .switch-icon,:host(.indeterminate.disabled) div.switch .switch-icon{background-color:var(--ndw-color-white)}:host(.checked.disabled) div.switch .switch-icon ndw-icon,:host(.indeterminate.disabled) div.switch .switch-icon ndw-icon{background-color:var(--ndw-color-white);color:var(--ndw-color-grey-400)}@keyframes translateToRight{0%{transform:translate(0);background-color:var(--ndw-color-grey-300)}to{transform:translate(20px);background-color:var(--ndw-color-white)}}@keyframes translateToLeft{0%{transform:translate(20px);background-color:var(--ndw-color-white)}to{transform:translate(0);background-color:var(--ndw-color-grey-300)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
707
671
|
}
|
|
708
672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
709
673
|
type: Component,
|
|
@@ -713,7 +677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
713
677
|
useExisting: CheckboxComponent,
|
|
714
678
|
multi: true,
|
|
715
679
|
},
|
|
716
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n type=\"checkbox\"\n [id]=\"'checkbox-' + uuid\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n aria-hidden=\"true\"\n/>\n<div\n [ngClass]=\"{ error: error(), checkbox: !switch(), switch: switch() }\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"'checkbox-label-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n [tabindex]=\"disabled() ? -1 : 0\"\n>\n @if (!switch()) {\n @if (checked()) {\n <ndw-icon>check</ndw-icon>\n } @else if (indeterminate()) {\n <ndw-icon>remove</ndw-icon>\n }\n } @else {\n <span class=\"switch-icon\">\n @if (checked()) {\n <ndw-icon>check</ndw-icon>\n } @else {\n <ndw-icon>close</ndw-icon>\n }\n </span>\n }\n</div>\n<label\n id=\"checkbox-label-{{ uuid }}\"\n tabindex=\"-1\"\n [for]=\"'checkbox-' + uuid\"\n [ngClass]=\"{ 'switch-text': switch() }\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content />\n</label>\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@20..48,400&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{--checkable-input-size: 1.25rem;cursor:pointer;display:inline-grid;gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;min-height:1.375rem;width:fit-content}input{display:none}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;margin-top:var(--ndw-spacing-3xs);width:fit-content}label:focus{outline:none}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus){outline:none}:host(:focus) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus) div,:host(.indeterminate:focus) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:var(--ndw-border-radius-sm)}div.checkbox ndw-icon{font-size:1.25rem;inset:calc(var(--ndw-border-size-sm) * -1);position:absolute}div.switch{width:2.75rem;height:var(--ndw-spacing-lg);border-radius:calc(var(--ndw-spacing-lg) / 2);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-border-size-lg)}div.switch .switch-icon{background-color:var(--ndw-color-grey-400);border-radius:50%;width:var(--ndw-spacing-md);height:var(--ndw-spacing-md);display:flex;align-items:center;justify-content:center;animation:translateToLeft var(--ndw-animation-speed-fast) ease-out forwards}div.switch .switch-icon ndw-icon{color:var(--ndw-color-white);font-size:var(--ndw-spacing-sm)}div.switch.error{background-color:var(--ndw-color-white)}label.switch-text{margin-top:var(--ndw-spacing-2xs)}:host(.checked) div.switch,:host(.indeterminate) div.switch{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.switch .switch-icon,:host(.indeterminate) div.switch .switch-icon{background-color:var(--ndw-color-white);animation:translateToRight var(--ndw-animation-speed-fast) ease-out forwards}:host(.checked) div.switch .switch-icon ndw-icon,:host(.indeterminate) div.switch .switch-icon ndw-icon{color:var(--ndw-color-positive-500)}:host(.checked) div.switch.error,:host(.indeterminate) div.switch.error{background-color:var(--ndw-color-positive-500)}:host(:hover) div{background-color:var(--ndw-color-white)}:host(:hover) div.checkbox{border-color:var(--ndw-color-primary-500)}:host(:hover) div.switch{border-color:var(--ndw-color-grey-500)}:host(:hover) div.switch ndw-icon{color:var(--ndw-color-white)}:host(.checked:hover) div.checkbox,:host(.indeterminate:hover) div.checkbox{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(.checked:hover) div.switch,:host(.indeterminate:hover) div.switch{background-color:var(--ndw-color-positive-600);border-color:var(--ndw-color-positive-600)}:host(.checked:hover) div.switch ndw-icon,:host(.indeterminate:hover) div.switch ndw-icon{color:var(--ndw-color-positive-600)}:host(:focus) div.switch{border-color:var(--ndw-color-secondary-500)}:host(.disabled) div.switch .switch-icon{background-color:var(--ndw-color-grey-200)}:host(.disabled) div.switch .switch-
|
|
680
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n type=\"checkbox\"\n [id]=\"'checkbox-' + uuid\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n aria-hidden=\"true\"\n/>\n<div\n [ngClass]=\"{ error: error(), success: success(), checkbox: !switch(), switch: switch() }\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"'checkbox-label-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n [tabindex]=\"disabled() ? -1 : 0\"\n>\n @if (!switch()) {\n @if (checked()) {\n <ndw-icon>check</ndw-icon>\n } @else if (indeterminate()) {\n <ndw-icon>remove</ndw-icon>\n }\n } @else {\n <span class=\"switch-icon\">\n @if (checked()) {\n <ndw-icon>check</ndw-icon>\n } @else {\n <ndw-icon>close</ndw-icon>\n }\n </span>\n }\n</div>\n<label\n id=\"checkbox-label-{{ uuid }}\"\n tabindex=\"-1\"\n [for]=\"'checkbox-' + uuid\"\n [ngClass]=\"{ 'switch-text': switch() }\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content />\n</label>\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@20..48,400&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{--checkable-input-size: 1.25rem;cursor:pointer;display:inline-grid;gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;min-height:1.375rem;width:fit-content}input{display:none}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size)}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;margin-top:var(--ndw-spacing-3xs);width:fit-content}label:focus{outline:none}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus){outline:none}:host(:focus) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus) div,:host(.indeterminate:focus) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:var(--ndw-border-radius-sm)}div.checkbox ndw-icon{font-size:1.25rem;inset:calc(var(--ndw-border-size-sm) * -1);position:absolute}div.switch{width:2.75rem;height:var(--ndw-spacing-lg);border-radius:calc(var(--ndw-spacing-lg) / 2);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-border-size-lg)}div.switch .switch-icon{background-color:var(--ndw-color-grey-400);border-radius:50%;width:var(--ndw-spacing-md);height:var(--ndw-spacing-md);display:flex;align-items:center;justify-content:center;animation:translateToLeft var(--ndw-animation-speed-fast) ease-out forwards}div.switch .switch-icon ndw-icon{color:var(--ndw-color-white);font-size:var(--ndw-spacing-sm)}div.switch.error{background-color:var(--ndw-color-white)}label.switch-text{margin-top:var(--ndw-spacing-2xs)}:host(.checked) div.switch,:host(.indeterminate) div.switch{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.switch .switch-icon,:host(.indeterminate) div.switch .switch-icon{background-color:var(--ndw-color-white);animation:translateToRight var(--ndw-animation-speed-fast) ease-out forwards}:host(.checked) div.switch .switch-icon ndw-icon,:host(.indeterminate) div.switch .switch-icon ndw-icon{color:var(--ndw-color-positive-500)}:host(.checked) div.switch.error,:host(.indeterminate) div.switch.error{background-color:var(--ndw-color-positive-500)}:host(:hover) div{background-color:var(--ndw-color-white)}:host(:hover) div.checkbox{border-color:var(--ndw-color-primary-500)}:host(:hover) div.switch{border-color:var(--ndw-color-grey-500)}:host(:hover) div.switch ndw-icon{color:var(--ndw-color-white)}:host(.checked:hover) div.checkbox,:host(.indeterminate:hover) div.checkbox{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(.checked:hover) div.switch,:host(.indeterminate:hover) div.switch{background-color:var(--ndw-color-positive-600);border-color:var(--ndw-color-positive-600)}:host(.checked:hover) div.switch ndw-icon,:host(.indeterminate:hover) div.switch ndw-icon{color:var(--ndw-color-positive-600)}:host(:focus) div.switch{border-color:var(--ndw-color-secondary-500)}:host(.disabled) div.switch{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300)}:host(.disabled) div.switch .switch-icon{background-color:var(--ndw-color-grey-200)}:host(.checked.disabled) div.switch,:host(.indeterminate.disabled) div.switch{background-color:var(--ndw-color-grey-400);border-color:var(--ndw-color-grey-400)}:host(.checked.disabled) div.switch .switch-icon,:host(.indeterminate.disabled) div.switch .switch-icon{background-color:var(--ndw-color-white)}:host(.checked.disabled) div.switch .switch-icon ndw-icon,:host(.indeterminate.disabled) div.switch .switch-icon ndw-icon{background-color:var(--ndw-color-white);color:var(--ndw-color-grey-400)}@keyframes translateToRight{0%{transform:translate(0);background-color:var(--ndw-color-grey-300)}to{transform:translate(20px);background-color:var(--ndw-color-white)}}@keyframes translateToLeft{0%{transform:translate(20px);background-color:var(--ndw-color-white)}to{transform:translate(0);background-color:var(--ndw-color-grey-300)}}\n"] }]
|
|
717
681
|
}], propDecorators: { checkedClass: [{
|
|
718
682
|
type: HostBinding,
|
|
719
683
|
args: ['class.checked']
|
|
@@ -739,23 +703,238 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
739
703
|
|
|
740
704
|
class ErrorComponent {
|
|
741
705
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
742
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: ErrorComponent, isStandalone: true, selector: "ndw-error", ngImport: i0, template: "<ndw-icon>
|
|
706
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: ErrorComponent, isStandalone: true, selector: "ndw-error", ngImport: i0, template: "<ndw-icon>warning</ndw-icon>\n<ng-content />\n", styles: [":host{align-content:center;align-items:center;color:var(--ndw-color-critical-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:start}ndw-icon{font-size:.875rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }] }); }
|
|
743
707
|
}
|
|
744
708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ErrorComponent, decorators: [{
|
|
745
709
|
type: Component,
|
|
746
|
-
args: [{ selector: 'ndw-error', standalone: true, imports: [IconComponent], template: "<ndw-icon>
|
|
710
|
+
args: [{ selector: 'ndw-error', standalone: true, imports: [IconComponent], template: "<ndw-icon>warning</ndw-icon>\n<ng-content />\n", styles: [":host{align-content:center;align-items:center;color:var(--ndw-color-critical-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:start}ndw-icon{font-size:.875rem}\n"] }]
|
|
747
711
|
}] });
|
|
748
712
|
|
|
749
|
-
class
|
|
713
|
+
class FileUploadComponent {
|
|
750
714
|
constructor() {
|
|
751
|
-
this.
|
|
715
|
+
this.fileInputElement = viewChild.required('fileInput');
|
|
716
|
+
this.allowedFileTypeRegex = input();
|
|
717
|
+
this.fileUploadText = input({ dragText: '', dragOverText: '' });
|
|
718
|
+
this.uploadDate = input('');
|
|
719
|
+
this.maxFileSizeInBytes = input(1000000);
|
|
720
|
+
this.disabled = input(false);
|
|
721
|
+
this.readonly = input(false);
|
|
722
|
+
this.draggingOver = model(false);
|
|
723
|
+
this.selectedFile = model();
|
|
724
|
+
this.error = model(false);
|
|
725
|
+
this.success = model(false);
|
|
726
|
+
this.incorrectFileType = model(false);
|
|
727
|
+
this.incorrectFileSize = model(false);
|
|
728
|
+
this.canEdit = computed(() => !this.selectedFile() && !this.disabled() && !this.readonly());
|
|
752
729
|
}
|
|
753
|
-
|
|
754
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: TooltipComponent, isStandalone: true, selector: "ndw-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "{{ text() }}\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--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-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-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.375em;--ndw-line-height-md: 1.5em;--ndw-rotate-half: rotate(180deg)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][outline]{background-color:transparent;border-color:var(--ndw-background-primary);color:var(--ndw-text-primary)}[ndwButton][outline]:hover{background-color:var(--ndw-background-primary);border-color:var(--ndw-background-primary);color:var(--ndw-foreground-primary)}[ndwButton][outline]:active{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton][secondary]{background-color:transparent;border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}[ndwButton][secondary]:hover{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500);color:var(--ndw-color-white)}[ndwButton][secondary]:active{background-color:var(--ndw-color-grey-700);border-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;padding-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}a[ndwLink]{align-items:baseline;color:var(--ndw-color-link-400);display:inline-flex;font-size:inherit;gap:var(--ndw-spacing-2xs);text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}a[ndwLink]>*{align-self:center}a[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}a[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}a[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-default) ease-in;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;animation:.3s fadeIn;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-border-radius-sm);color:var(--ndw-color-white);display:inline-block;line-height:var(--ndw-line-height-md);max-width:18.75rem;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-2xs) var(--ndw-spacing-3xs);position:relative}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }); }
|
|
755
|
-
}
|
|
756
|
-
|
|
730
|
+
get tabindexAttr() {
|
|
731
|
+
return !this.canEdit() ? -1 : 0;
|
|
732
|
+
}
|
|
733
|
+
get hasError() {
|
|
734
|
+
return this.error();
|
|
735
|
+
}
|
|
736
|
+
get hasSuccess() {
|
|
737
|
+
return this.success();
|
|
738
|
+
}
|
|
739
|
+
get isDisabled() {
|
|
740
|
+
return this.disabled();
|
|
741
|
+
}
|
|
742
|
+
get isReadonly() {
|
|
743
|
+
return this.readonly();
|
|
744
|
+
}
|
|
745
|
+
get isDragging() {
|
|
746
|
+
return this.draggingOver();
|
|
747
|
+
}
|
|
748
|
+
get hasSelectedFile() {
|
|
749
|
+
return this.selectedFile() ? true : false;
|
|
750
|
+
}
|
|
751
|
+
onKeyDown(event) {
|
|
752
|
+
if (event.key !== 'Enter' && event.key !== ' ') {
|
|
753
|
+
return;
|
|
754
|
+
}
|
|
755
|
+
const target = event.target;
|
|
756
|
+
if (target.tagName.toLowerCase() === 'button') {
|
|
757
|
+
return;
|
|
758
|
+
}
|
|
759
|
+
if (this.canEdit()) {
|
|
760
|
+
this.fileInputElement().nativeElement.click();
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
onClick() {
|
|
764
|
+
if (this.canEdit()) {
|
|
765
|
+
this.fileInputElement().nativeElement.click();
|
|
766
|
+
}
|
|
767
|
+
}
|
|
768
|
+
onDragLeave(event) {
|
|
769
|
+
event?.preventDefault();
|
|
770
|
+
this.draggingOver.set(false);
|
|
771
|
+
}
|
|
772
|
+
onDragOver(event) {
|
|
773
|
+
event?.preventDefault();
|
|
774
|
+
if (this.canEdit()) {
|
|
775
|
+
this.draggingOver.set(true);
|
|
776
|
+
}
|
|
777
|
+
}
|
|
778
|
+
onDragEnter(event) {
|
|
779
|
+
event?.preventDefault();
|
|
780
|
+
if (this.canEdit()) {
|
|
781
|
+
this.draggingOver.set(true);
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
onDrop(event) {
|
|
785
|
+
event.preventDefault();
|
|
786
|
+
if (this.canEdit()) {
|
|
787
|
+
const file = event.dataTransfer?.files[0];
|
|
788
|
+
if (file) {
|
|
789
|
+
this.selectFile(file);
|
|
790
|
+
}
|
|
791
|
+
this.draggingOver.set(false);
|
|
792
|
+
}
|
|
793
|
+
}
|
|
794
|
+
onDownloadFileClick() {
|
|
795
|
+
const url = window.URL.createObjectURL(this.selectedFile());
|
|
796
|
+
const linkElement = document.createElement('a');
|
|
797
|
+
linkElement.href = url;
|
|
798
|
+
linkElement.download = this.selectedFile().name;
|
|
799
|
+
document.body.appendChild(linkElement);
|
|
800
|
+
linkElement.click();
|
|
801
|
+
document.body.removeChild(linkElement);
|
|
802
|
+
window.URL.revokeObjectURL(url);
|
|
803
|
+
}
|
|
804
|
+
onDeleteClick(event) {
|
|
805
|
+
event?.stopPropagation();
|
|
806
|
+
this.resetFile();
|
|
807
|
+
this.incorrectFileType.set(false);
|
|
808
|
+
this.incorrectFileSize.set(false);
|
|
809
|
+
}
|
|
810
|
+
displayText() {
|
|
811
|
+
if (!this.selectedFile()) {
|
|
812
|
+
return this.draggingOver()
|
|
813
|
+
? this.fileUploadText().dragOverText
|
|
814
|
+
: this.fileUploadText().dragText;
|
|
815
|
+
}
|
|
816
|
+
else {
|
|
817
|
+
return '';
|
|
818
|
+
}
|
|
819
|
+
}
|
|
820
|
+
onFileSelected(event) {
|
|
821
|
+
if (this.canEdit()) {
|
|
822
|
+
const inputElement = event.target;
|
|
823
|
+
if (inputElement.files) {
|
|
824
|
+
const file = inputElement.files[0];
|
|
825
|
+
this.selectFile(file);
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
selectFile(file) {
|
|
830
|
+
if (file) {
|
|
831
|
+
if (!this.correctFileType(file.type)) {
|
|
832
|
+
this.resetFile();
|
|
833
|
+
this.incorrectFileSize.set(false);
|
|
834
|
+
this.incorrectFileType.set(true);
|
|
835
|
+
return;
|
|
836
|
+
}
|
|
837
|
+
if (!this.correctFileSize(file.size)) {
|
|
838
|
+
this.resetFile();
|
|
839
|
+
this.incorrectFileType.set(false);
|
|
840
|
+
this.incorrectFileSize.set(true);
|
|
841
|
+
return;
|
|
842
|
+
}
|
|
843
|
+
this.incorrectFileSize.set(false);
|
|
844
|
+
this.incorrectFileType.set(false);
|
|
845
|
+
this.selectedFile.set(file);
|
|
846
|
+
}
|
|
847
|
+
}
|
|
848
|
+
resetFile() {
|
|
849
|
+
this.selectedFile.set(null);
|
|
850
|
+
this.fileInputElement().nativeElement.value = '';
|
|
851
|
+
}
|
|
852
|
+
correctFileSize(fileSize) {
|
|
853
|
+
return this.maxFileSizeInBytes() > fileSize;
|
|
854
|
+
}
|
|
855
|
+
correctFileType(fileType) {
|
|
856
|
+
return this.allowedFileTypeRegex()?.test(fileType) ? true : false;
|
|
857
|
+
}
|
|
858
|
+
writeValue(value) {
|
|
859
|
+
this.selectedFile.set(value);
|
|
860
|
+
}
|
|
861
|
+
registerOnChange(fn) {
|
|
862
|
+
this.selectedFile.subscribe(fn);
|
|
863
|
+
}
|
|
864
|
+
registerOnTouched() {
|
|
865
|
+
// noop
|
|
866
|
+
}
|
|
867
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
868
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: FileUploadComponent, isStandalone: true, selector: "ndw-file-upload", inputs: { allowedFileTypeRegex: { classPropertyName: "allowedFileTypeRegex", publicName: "allowedFileTypeRegex", isSignal: true, isRequired: false, transformFunction: null }, fileUploadText: { classPropertyName: "fileUploadText", publicName: "fileUploadText", isSignal: true, isRequired: false, transformFunction: null }, uploadDate: { classPropertyName: "uploadDate", publicName: "uploadDate", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeInBytes: { classPropertyName: "maxFileSizeInBytes", publicName: "maxFileSizeInBytes", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggingOver: { classPropertyName: "draggingOver", publicName: "draggingOver", isSignal: true, isRequired: false, transformFunction: null }, selectedFile: { classPropertyName: "selectedFile", publicName: "selectedFile", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, incorrectFileType: { classPropertyName: "incorrectFileType", publicName: "incorrectFileType", isSignal: true, isRequired: false, transformFunction: null }, incorrectFileSize: { classPropertyName: "incorrectFileSize", publicName: "incorrectFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { draggingOver: "draggingOverChange", selectedFile: "selectedFileChange", error: "errorChange", success: "successChange", incorrectFileType: "incorrectFileTypeChange", incorrectFileSize: "incorrectFileSizeChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "onClick()", "dragleave": "onDragLeave($event)", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "drop": "onDrop($event)" }, properties: { "attr.tabindex": "this.tabindexAttr", "class.error": "this.hasError", "class.success": "this.hasSuccess", "class.disabled": "this.isDisabled", "class.readonly": "this.isReadonly", "class.dragging": "this.isDragging", "class.file-selected": "this.hasSelectedFile" } }, providers: [
|
|
869
|
+
{
|
|
870
|
+
provide: NG_VALUE_ACCESSOR,
|
|
871
|
+
useExisting: FileUploadComponent,
|
|
872
|
+
multi: true,
|
|
873
|
+
},
|
|
874
|
+
], viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!draggingOver() && !selectedFile()) {\n <ndw-icon>cloud_upload</ndw-icon>\n} @else if (draggingOver() && !selectedFile()) {\n <ndw-icon>pageless</ndw-icon>\n}\n\n{{ displayText() }}\n\n@if (selectedFile()) {\n <div class=\"file-name\">\n <button\n class=\"file-name-text\"\n (click)=\"onDownloadFileClick()\"\n (keydown.enter)=\"onDownloadFileClick()\"\n >\n {{ selectedFile()?.name }}\n </button>\n\n <div class=\"file-delete-icon\">\n <button (click)=\"onDeleteClick($event)\" (keydown.enter)=\"onDeleteClick($event)\">\n <ndw-icon>delete</ndw-icon>\n </button>\n </div>\n </div>\n\n <p class=\"file-date\">\n {{ uploadDate() }}\n </p>\n}\n\n<input type=\"file\" #fileInput hidden aria-hidden=\"true\" (change)=\"onFileSelected($event)\" />\n", styles: [":host{display:grid;align-items:center;border-radius:var(--ndw-border-radius-sm);border:var(--ndw-border-size-sm) dashed var(--ndw-color-secondary-500);background-color:var(--ndw-color-secondary-050);color:var(--ndw-color-secondary-500);padding:var(--ndw-spacing-lg);text-align:center;cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}:host ndw-icon{color:var(--ndw-color-secondary-500);font-size:var(--ndw-font-size-md);pointer-events:none}:host.dragging,:host:hover,:host:focus{background-color:var(--ndw-color-secondary-100);outline:none}:host.success.file-selected{background-color:var(--ndw-color-positive-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500);color:var(--ndw-color-positive-500)}:host.error{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error ndw-icon{color:var(--ndw-color-critical-500);pointer-events:none}:host.error.file-selected{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error.file-selected ndw-icon{color:var(--ndw-color-secondary-500);pointer-events:all}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-grey-500);color:var(--ndw-color-grey-500);cursor:not-allowed}:host.disabled ndw-icon,:host.readonly ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}:host.disabled.file-selected .file-name,:host.readonly.file-selected .file-name{color:var(--ndw-color-secondary-500)}:host.disabled.file-selected .file-name .file-name-text:hover,:host.readonly.file-selected .file-name .file-name-text:hover{text-decoration:none}:host.disabled.file-selected .file-delete-icon,:host.readonly.file-selected .file-delete-icon{display:none}:host.file-selected{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-spacing-sm);align-items:baseline;word-break:break-all;cursor:auto;text-align:left}:host.file-selected .file-name{display:flex;align-items:center}:host.file-selected .file-name .file-name-text{background:transparent;border:none;padding:0;color:var(--ndw-color-secondary-500);cursor:pointer}:host.file-selected .file-name .file-name-text:hover,:host.file-selected .file-name .file-name-text:focus{text-decoration:underline;outline:none}:host.file-selected .file-date{font-size:var(--ndw-font-size-xs);color:var(--ndw-color-grey-500);margin:0}:host.file-selected .file-delete-icon{display:flex;flex:1;justify-content:end;pointer-events:all}:host.file-selected .file-delete-icon button{background:transparent;border:none;cursor:pointer;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);transition:background-color .15s ease-in-out}:host.file-selected .file-delete-icon button:hover{background-color:var(--ndw-alpha-black-007)}:host.file-selected .file-delete-icon button:active,:host.file-selected .file-delete-icon button:focus,:host.file-selected .file-delete-icon button:focus-visible{background-color:var(--ndw-alpha-black-015)}:host.file-selected .file-delete-icon button:focus-visible{color:var(--ndw-color-primary);outline-color:var(--ndw-color-secondary-500)}:host.file-selected .file-delete-icon ndw-icon{pointer-events:all}:host.file-selected .file-delete-icon ndw-icon:focus{color:var(--ndw-color-secondary-500);outline:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }] }); }
|
|
875
|
+
}
|
|
876
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
877
|
+
type: Component,
|
|
878
|
+
args: [{ selector: 'ndw-file-upload', standalone: true, imports: [IconComponent], providers: [
|
|
879
|
+
{
|
|
880
|
+
provide: NG_VALUE_ACCESSOR,
|
|
881
|
+
useExisting: FileUploadComponent,
|
|
882
|
+
multi: true,
|
|
883
|
+
},
|
|
884
|
+
], template: "@if (!draggingOver() && !selectedFile()) {\n <ndw-icon>cloud_upload</ndw-icon>\n} @else if (draggingOver() && !selectedFile()) {\n <ndw-icon>pageless</ndw-icon>\n}\n\n{{ displayText() }}\n\n@if (selectedFile()) {\n <div class=\"file-name\">\n <button\n class=\"file-name-text\"\n (click)=\"onDownloadFileClick()\"\n (keydown.enter)=\"onDownloadFileClick()\"\n >\n {{ selectedFile()?.name }}\n </button>\n\n <div class=\"file-delete-icon\">\n <button (click)=\"onDeleteClick($event)\" (keydown.enter)=\"onDeleteClick($event)\">\n <ndw-icon>delete</ndw-icon>\n </button>\n </div>\n </div>\n\n <p class=\"file-date\">\n {{ uploadDate() }}\n </p>\n}\n\n<input type=\"file\" #fileInput hidden aria-hidden=\"true\" (change)=\"onFileSelected($event)\" />\n", styles: [":host{display:grid;align-items:center;border-radius:var(--ndw-border-radius-sm);border:var(--ndw-border-size-sm) dashed var(--ndw-color-secondary-500);background-color:var(--ndw-color-secondary-050);color:var(--ndw-color-secondary-500);padding:var(--ndw-spacing-lg);text-align:center;cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}:host ndw-icon{color:var(--ndw-color-secondary-500);font-size:var(--ndw-font-size-md);pointer-events:none}:host.dragging,:host:hover,:host:focus{background-color:var(--ndw-color-secondary-100);outline:none}:host.success.file-selected{background-color:var(--ndw-color-positive-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500);color:var(--ndw-color-positive-500)}:host.error{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error ndw-icon{color:var(--ndw-color-critical-500);pointer-events:none}:host.error.file-selected{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error.file-selected ndw-icon{color:var(--ndw-color-secondary-500);pointer-events:all}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-grey-500);color:var(--ndw-color-grey-500);cursor:not-allowed}:host.disabled ndw-icon,:host.readonly ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}:host.disabled.file-selected .file-name,:host.readonly.file-selected .file-name{color:var(--ndw-color-secondary-500)}:host.disabled.file-selected .file-name .file-name-text:hover,:host.readonly.file-selected .file-name .file-name-text:hover{text-decoration:none}:host.disabled.file-selected .file-delete-icon,:host.readonly.file-selected .file-delete-icon{display:none}:host.file-selected{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-spacing-sm);align-items:baseline;word-break:break-all;cursor:auto;text-align:left}:host.file-selected .file-name{display:flex;align-items:center}:host.file-selected .file-name .file-name-text{background:transparent;border:none;padding:0;color:var(--ndw-color-secondary-500);cursor:pointer}:host.file-selected .file-name .file-name-text:hover,:host.file-selected .file-name .file-name-text:focus{text-decoration:underline;outline:none}:host.file-selected .file-date{font-size:var(--ndw-font-size-xs);color:var(--ndw-color-grey-500);margin:0}:host.file-selected .file-delete-icon{display:flex;flex:1;justify-content:end;pointer-events:all}:host.file-selected .file-delete-icon button{background:transparent;border:none;cursor:pointer;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);transition:background-color .15s ease-in-out}:host.file-selected .file-delete-icon button:hover{background-color:var(--ndw-alpha-black-007)}:host.file-selected .file-delete-icon button:active,:host.file-selected .file-delete-icon button:focus,:host.file-selected .file-delete-icon button:focus-visible{background-color:var(--ndw-alpha-black-015)}:host.file-selected .file-delete-icon button:focus-visible{color:var(--ndw-color-primary);outline-color:var(--ndw-color-secondary-500)}:host.file-selected .file-delete-icon ndw-icon{pointer-events:all}:host.file-selected .file-delete-icon ndw-icon:focus{color:var(--ndw-color-secondary-500);outline:none}\n"] }]
|
|
885
|
+
}], propDecorators: { tabindexAttr: [{
|
|
886
|
+
type: HostBinding,
|
|
887
|
+
args: ['attr.tabindex']
|
|
888
|
+
}], hasError: [{
|
|
889
|
+
type: HostBinding,
|
|
890
|
+
args: ['class.error']
|
|
891
|
+
}], hasSuccess: [{
|
|
892
|
+
type: HostBinding,
|
|
893
|
+
args: ['class.success']
|
|
894
|
+
}], isDisabled: [{
|
|
895
|
+
type: HostBinding,
|
|
896
|
+
args: ['class.disabled']
|
|
897
|
+
}], isReadonly: [{
|
|
898
|
+
type: HostBinding,
|
|
899
|
+
args: ['class.readonly']
|
|
900
|
+
}], isDragging: [{
|
|
901
|
+
type: HostBinding,
|
|
902
|
+
args: ['class.dragging']
|
|
903
|
+
}], hasSelectedFile: [{
|
|
904
|
+
type: HostBinding,
|
|
905
|
+
args: ['class.file-selected']
|
|
906
|
+
}], onKeyDown: [{
|
|
907
|
+
type: HostListener,
|
|
908
|
+
args: ['keydown', ['$event']]
|
|
909
|
+
}], onClick: [{
|
|
910
|
+
type: HostListener,
|
|
911
|
+
args: ['click']
|
|
912
|
+
}], onDragLeave: [{
|
|
913
|
+
type: HostListener,
|
|
914
|
+
args: ['dragleave', ['$event']]
|
|
915
|
+
}], onDragOver: [{
|
|
916
|
+
type: HostListener,
|
|
917
|
+
args: ['dragover', ['$event']]
|
|
918
|
+
}], onDragEnter: [{
|
|
919
|
+
type: HostListener,
|
|
920
|
+
args: ['dragenter', ['$event']]
|
|
921
|
+
}], onDrop: [{
|
|
922
|
+
type: HostListener,
|
|
923
|
+
args: ['drop', ['$event']]
|
|
924
|
+
}] } });
|
|
925
|
+
|
|
926
|
+
class TooltipComponent {
|
|
927
|
+
constructor() {
|
|
928
|
+
this.text = input.required();
|
|
929
|
+
}
|
|
930
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
931
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: TooltipComponent, isStandalone: true, selector: "ndw-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tooltip" } }, ngImport: i0, template: "{{ text() }}\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));--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-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}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border-width:0;white-space:nowrap;clip:rect(0,0,0,0)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}button:not(:disabled){cursor:pointer}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);justify-content:center;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start;text-decoration:none}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][secondary],[ndwButton][tertiary]{background-color:transparent;color:var(--ndw-text-primary)}[ndwButton][secondary]:hover,[ndwButton][tertiary]:hover{background-color:var(--ndw-alpha-primary-007);color:var(--ndw-text-primary)}[ndwButton][secondary]:active,[ndwButton][tertiary]:active{background-color:var(--ndw-alpha-primary-015)}[ndwButton][secondary][alternative],[ndwButton][tertiary][alternative]{color:var(--ndw-color-grey-700)}[ndwButton][secondary][alternative]:hover,[ndwButton][tertiary][alternative]:hover{background-color:var(--ndw-alpha-black-007)}[ndwButton][secondary][alternative]:active,[ndwButton][tertiary][alternative]:active{background-color:var(--ndw-alpha-black-015)}[ndwButton][secondary]{border-color:var(--ndw-background-primary)}[ndwButton][secondary]:active{border-color:var(--ndw-background-primary-hover)}[ndwButton][secondary][alternative]{border-color:var(--ndw-color-grey-300)}[ndwButton][secondary][alternative]:hover{border-color:var(--ndw-color-grey-500)}[ndwButton][secondary][alternative]:active{border-color:var(--ndw-color-grey-700)}[ndwButton][tertiary]{border-color:transparent}[ndwButton][extra-small]{height:var(--ndw-spacing-lg);padding-inline:var(--ndw-spacing-2xs)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding-inline:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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}[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]: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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}[ndwLink]{display:inline-flex;align-items:baseline;gap:var(--ndw-spacing-2xs);padding:0;border:0;font-size:inherit;text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);color:var(--ndw-color-link-400);background-color:transparent;transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}[ndwLink]>*{align-self:center}[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-fast) ease-out;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover,[ndwButton][menu][active]{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;animation:.3s fadeIn;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-border-radius-sm);box-shadow:0 0 var(--ndw-border-size-md) 0 var(--ndw-alpha-white-040);color:var(--ndw-color-white);display:inline-block;line-height:var(--ndw-line-height-md);max-width:18.75rem;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-2xs) var(--ndw-spacing-3xs);position:relative}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }); }
|
|
932
|
+
}
|
|
933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
757
934
|
type: Component,
|
|
758
|
-
args: [{ selector: 'ndw-tooltip', standalone: true, imports: [], template: "{{ text() }}\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--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-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-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.375em;--ndw-line-height-md: 1.5em;--ndw-rotate-half: rotate(180deg)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][outline]{background-color:transparent;border-color:var(--ndw-background-primary);color:var(--ndw-text-primary)}[ndwButton][outline]:hover{background-color:var(--ndw-background-primary);border-color:var(--ndw-background-primary);color:var(--ndw-foreground-primary)}[ndwButton][outline]:active{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton][secondary]{background-color:transparent;border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}[ndwButton][secondary]:hover{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500);color:var(--ndw-color-white)}[ndwButton][secondary]:active{background-color:var(--ndw-color-grey-700);border-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;padding-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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-top:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}a[ndwLink]{align-items:baseline;color:var(--ndw-color-link-400);display:inline-flex;font-size:inherit;gap:var(--ndw-spacing-2xs);text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}a[ndwLink]>*{align-self:center}a[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}a[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}a[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-default) ease-in;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;animation:.3s fadeIn;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-border-radius-sm);color:var(--ndw-color-white);display:inline-block;line-height:var(--ndw-line-height-md);max-width:18.75rem;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-2xs) var(--ndw-spacing-3xs);position:relative}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
935
|
+
args: [{ selector: 'ndw-tooltip', standalone: true, imports: [], host: {
|
|
936
|
+
role: 'tooltip',
|
|
937
|
+
}, template: "{{ text() }}\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@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));--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-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}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border-width:0;white-space:nowrap;clip:rect(0,0,0,0)}.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%}.grid{display:grid;justify-items:stretch;grid-template-columns:repeat(var(--grid-columns),minmax(1rem,1fr));gap:var(--grid-spacing);padding:0 var(--grid-spacing);margin:0 auto;width:100%;min-width:min-content;max-width:1440px}.grid .column-1{grid-column:span min(1,var(--grid-columns));overflow:auto}.grid .column-2{grid-column:span min(2,var(--grid-columns));overflow:auto}.grid .column-3{grid-column:span min(3,var(--grid-columns));overflow:auto}.grid .column-4{grid-column:span min(4,var(--grid-columns));overflow:auto}.grid .column-5{grid-column:span min(5,var(--grid-columns));overflow:auto}.grid .column-6{grid-column:span min(6,var(--grid-columns));overflow:auto}.grid .column-7{grid-column:span min(7,var(--grid-columns));overflow:auto}.grid .column-8{grid-column:span min(8,var(--grid-columns));overflow:auto}.grid .column-9{grid-column:span min(9,var(--grid-columns));overflow:auto}.grid .column-10{grid-column:span min(10,var(--grid-columns));overflow:auto}.grid .column-11{grid-column:span min(11,var(--grid-columns));overflow:auto}.grid .column-12{grid-column:span min(12,var(--grid-columns));overflow:auto}@media screen and (max-width: 1024px){.grid{--grid-columns: 6;--grid-spacing: var(--ndw-spacing-md)}.grid .column-md-1,.grid .column-md-2,.grid .column-md-3,.grid .column-md-4,.grid .column-md-5,.grid .column-md-6,.grid .column-md-7,.grid .column-md-8,.grid .column-md-9,.grid .column-md-10,.grid .column-md-11,.grid .column-md-12{display:none}.grid .column-sm-1{grid-column:span 1;overflow:auto;display:block}.grid .column-sm-2{grid-column:span 2;overflow:auto;display:block}.grid .column-sm-3{grid-column:span 3;overflow:auto;display:block}.grid .column-sm-4{grid-column:span 4;overflow:auto;display:block}.grid .column-sm-5{grid-column:span 5;overflow:auto;display:block}.grid .column-sm-6{grid-column:span 6;overflow:auto;display:block}}@media screen and (min-width: 1025px){.grid{--grid-columns: 12;--grid-spacing: var(--ndw-spacing-lg)}.grid .column-md-1{grid-column:span 1;overflow:auto;display:block}.grid .column-md-2{grid-column:span 2;overflow:auto;display:block}.grid .column-md-3{grid-column:span 3;overflow:auto;display:block}.grid .column-md-4{grid-column:span 4;overflow:auto;display:block}.grid .column-md-5{grid-column:span 5;overflow:auto;display:block}.grid .column-md-6{grid-column:span 6;overflow:auto;display:block}.grid .column-md-7{grid-column:span 7;overflow:auto;display:block}.grid .column-md-8{grid-column:span 8;overflow:auto;display:block}.grid .column-md-9{grid-column:span 9;overflow:auto;display:block}.grid .column-md-10{grid-column:span 10;overflow:auto;display:block}.grid .column-md-11{grid-column:span 11;overflow:auto;display:block}.grid .column-md-12{grid-column:span 12;overflow:auto;display:block}}.ndw-overlay-backdrop{background-color:var(--ndw-backdrop-color)}button:not(:disabled){cursor:pointer}[ndwButton]{box-sizing:border-box;display:flex;align-items:center;gap:var(--ndw-spacing-2xs);height:var(--ndw-spacing-xl);justify-content:center;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);width:fit-content;cursor:pointer;background-color:var(--ndw-background-primary);border:var(--ndw-border-size-sm) solid var(--ndw-background-primary);border-radius:var(--ndw-border-radius-sm);transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;color:var(--ndw-foreground-primary);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-regular);text-align:start;text-decoration:none}[ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndwButton]:hover{background-color:var(--ndw-background-primary-hover);border-color:var(--ndw-background-primary-hover);color:var(--ndw-foreground-primary-hover)}[ndwButton]:active{background-color:var(--ndw-background-primary-active);border-color:var(--ndw-background-primary-active);color:var(--ndw-foreground-primary-active)}[ndwButton][secondary],[ndwButton][tertiary]{background-color:transparent;color:var(--ndw-text-primary)}[ndwButton][secondary]:hover,[ndwButton][tertiary]:hover{background-color:var(--ndw-alpha-primary-007);color:var(--ndw-text-primary)}[ndwButton][secondary]:active,[ndwButton][tertiary]:active{background-color:var(--ndw-alpha-primary-015)}[ndwButton][secondary][alternative],[ndwButton][tertiary][alternative]{color:var(--ndw-color-grey-700)}[ndwButton][secondary][alternative]:hover,[ndwButton][tertiary][alternative]:hover{background-color:var(--ndw-alpha-black-007)}[ndwButton][secondary][alternative]:active,[ndwButton][tertiary][alternative]:active{background-color:var(--ndw-alpha-black-015)}[ndwButton][secondary]{border-color:var(--ndw-background-primary)}[ndwButton][secondary]:active{border-color:var(--ndw-background-primary-hover)}[ndwButton][secondary][alternative]{border-color:var(--ndw-color-grey-300)}[ndwButton][secondary][alternative]:hover{border-color:var(--ndw-color-grey-500)}[ndwButton][secondary][alternative]:active{border-color:var(--ndw-color-grey-700)}[ndwButton][tertiary]{border-color:transparent}[ndwButton][extra-small]{height:var(--ndw-spacing-lg);padding-inline:var(--ndw-spacing-2xs)}[ndwButton][large]{height:var(--ndw-spacing-2xl);padding-inline:var(--ndw-spacing-sm)}[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700);height:var(--ndw-spacing-2xl)}[ndwButton][filter] ndw-icon.button-icon{color:var(--ndw-color-primary)}[ndwButton][filter] ndw-icon.prefix-icon{color:var(--ndw-color-grey-300)}[ndwButton][filter]:hover{border-color:var(--ndw-color-primary)}[ndwButton][filter]:active,[ndwButton][filter]:focus,[ndwButton][filter]:focus-visible{border-color:var(--ndw-color-secondary-500);box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-500)}[ndwButton][filter][disabled]{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500);pointer-events:none;-webkit-user-select:none;user-select:none}[ndwButton][filter][disabled] ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]{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;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);outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);padding-inline:var(--ndw-spacing-sm);position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:hover{border-color:var(--ndw-color-grey-400)}[ndwInput]:active,[ndwInput]:focus,[ndwInput]:focus-visible{border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-secondary-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}[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]: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]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput].prefix-icon{padding-left:calc(var(--ndw-font-size-lg) + var(--ndw-spacing-md))}select[ndwInput]{appearance:none;cursor:pointer;width:100%;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--ndw-spacing-xl)}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));resize:vertical}[ndwLabel]{align-content:center;align-items:center;display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold);gap:var(--ndw-spacing-3xs);grid-template-columns:repeat(3,auto);height:1.5rem;justify-content:start;line-height:100%}[ndwLabel] ndw-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-icon-size-md);margin-top:calc(var(--ndw-spacing-3xs) * -1)}[ndwLabel] .required{color:var(--ndw-color-grey-400)}[ndwLink]{display:inline-flex;align-items:baseline;gap:var(--ndw-spacing-2xs);padding:0;border:0;font-size:inherit;text-decoration:underline var(--ndw-border-size-sm) transparent;text-underline-offset:var(--ndw-border-size-md);color:var(--ndw-color-link-400);background-color:transparent;transition:text-decoration-color var(--ndw-animation-speed-fast) ease-in-out}[ndwLink]>*{align-self:center}[ndwLink] ndw-icon{font-size:1.25em;overflow:hidden}[ndwLink]:hover{color:var(--ndw-color-link-500);text-decoration-color:var(--ndw-color-link-500)}[ndwLink][disabled]{color:var(--ndw-color-grey-400);pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes show{0%{opacity:0}to{opacity:1}}.cdk-overlay-pane.ndw-popover-panel{animation:show var(--ndw-animation-speed-fast) ease-out;background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-popover);display:grid;padding:var(--ndw-spacing-sm)}[ndwButton][menu]{background-color:transparent;border-color:transparent;border-radius:0;color:var(--ndw-color-grey-400);gap:var(--ndw-spacing-xs);height:2.625rem;padding-inline:0;position:relative;width:100%}[ndwButton][menu]:hover,[ndwButton][menu][active]{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);color:var(--ndw-color-white)}[ndwButton][menu]:active{background-color:transparent;border-color:transparent;color:var(--ndw-color-white)}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;animation:.3s fadeIn;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-border-radius-sm);box-shadow:0 0 var(--ndw-border-size-md) 0 var(--ndw-alpha-white-040);color:var(--ndw-color-white);display:inline-block;line-height:var(--ndw-line-height-md);max-width:18.75rem;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-2xs) var(--ndw-spacing-3xs);position:relative}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
759
938
|
}] });
|
|
760
939
|
|
|
761
940
|
class TooltipDirective {
|
|
@@ -763,9 +942,42 @@ class TooltipDirective {
|
|
|
763
942
|
this.text = input.required({ alias: 'ndwTooltip' });
|
|
764
943
|
this.elementRef = inject(ElementRef);
|
|
765
944
|
this.overlay = inject(Overlay);
|
|
945
|
+
this.ariaDescriber = inject(AriaDescriber);
|
|
946
|
+
this.overlayRef = null;
|
|
766
947
|
}
|
|
767
948
|
ngOnInit() {
|
|
768
|
-
const positionStrategy = this.
|
|
949
|
+
const positionStrategy = this.getFlexibleConnectedPositionStrategy();
|
|
950
|
+
this.overlayRef = this.overlay.create({ positionStrategy });
|
|
951
|
+
this.updateAriaDescription();
|
|
952
|
+
}
|
|
953
|
+
ngOnChanges() {
|
|
954
|
+
const positionStrategy = this.getFlexibleConnectedPositionStrategy();
|
|
955
|
+
this.overlayRef?.updatePositionStrategy(positionStrategy);
|
|
956
|
+
}
|
|
957
|
+
ngOnDestroy() {
|
|
958
|
+
this.hide();
|
|
959
|
+
this.overlayRef?.dispose();
|
|
960
|
+
}
|
|
961
|
+
show() {
|
|
962
|
+
if (!this.text().length || this.overlayRef === null || this.overlayRef.hasAttached()) {
|
|
963
|
+
return;
|
|
964
|
+
}
|
|
965
|
+
const portal = new ComponentPortal(TooltipComponent);
|
|
966
|
+
const tooltipRef = this.overlayRef.attach(portal);
|
|
967
|
+
tooltipRef.instance.text = this.text;
|
|
968
|
+
}
|
|
969
|
+
hide() {
|
|
970
|
+
this.overlayRef?.detach();
|
|
971
|
+
}
|
|
972
|
+
hideOnEscape() {
|
|
973
|
+
this.hide();
|
|
974
|
+
}
|
|
975
|
+
updateAriaDescription() {
|
|
976
|
+
const element = this.elementRef.nativeElement;
|
|
977
|
+
this.ariaDescriber.describe(element, this.text());
|
|
978
|
+
}
|
|
979
|
+
getFlexibleConnectedPositionStrategy() {
|
|
980
|
+
return this.overlay
|
|
769
981
|
.position()
|
|
770
982
|
.flexibleConnectedTo(this.elementRef.nativeElement)
|
|
771
983
|
.withPositions([
|
|
@@ -786,30 +998,22 @@ class TooltipDirective {
|
|
|
786
998
|
overlayY: 'top',
|
|
787
999
|
},
|
|
788
1000
|
]);
|
|
789
|
-
this.overlayRef = this.overlay.create({ positionStrategy });
|
|
790
|
-
}
|
|
791
|
-
ngOnDestroy() {
|
|
792
|
-
this.hide();
|
|
793
|
-
}
|
|
794
|
-
show() {
|
|
795
|
-
if (!this.text().length) {
|
|
796
|
-
return;
|
|
797
|
-
}
|
|
798
|
-
const portal = new ComponentPortal(TooltipComponent);
|
|
799
|
-
const tooltipRef = this.overlayRef.attach(portal);
|
|
800
|
-
tooltipRef.instance.text = this.text;
|
|
801
|
-
}
|
|
802
|
-
hide() {
|
|
803
|
-
this.overlayRef.detach();
|
|
804
1001
|
}
|
|
805
1002
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
806
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.3", type: TooltipDirective, isStandalone: true, selector: "[ndwTooltip]", inputs: { text: { classPropertyName: "text", publicName: "ndwTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0 }); }
|
|
1003
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.3", type: TooltipDirective, isStandalone: true, selector: "[ndwTooltip]", inputs: { text: { classPropertyName: "text", publicName: "ndwTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "0", "aria-hidden": "false" }, listeners: { "focus": "show()", "blur": "hide()", "keydown.escape": "hide()", "mouseenter": "show()", "mouseleave": "hide()", "document:keydown.escape": "hideOnEscape()" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
807
1004
|
}
|
|
808
1005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
809
1006
|
type: Directive,
|
|
810
1007
|
args: [{
|
|
811
1008
|
selector: '[ndwTooltip]',
|
|
812
1009
|
standalone: true,
|
|
1010
|
+
host: {
|
|
1011
|
+
tabindex: '0',
|
|
1012
|
+
'aria-hidden': 'false',
|
|
1013
|
+
'(focus)': 'show()',
|
|
1014
|
+
'(blur)': 'hide()',
|
|
1015
|
+
'(keydown.escape)': 'hide()',
|
|
1016
|
+
},
|
|
813
1017
|
}]
|
|
814
1018
|
}], propDecorators: { show: [{
|
|
815
1019
|
type: HostListener,
|
|
@@ -817,6 +1021,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
817
1021
|
}], hide: [{
|
|
818
1022
|
type: HostListener,
|
|
819
1023
|
args: ['mouseleave']
|
|
1024
|
+
}], hideOnEscape: [{
|
|
1025
|
+
type: HostListener,
|
|
1026
|
+
args: ['document:keydown.escape']
|
|
820
1027
|
}] } });
|
|
821
1028
|
|
|
822
1029
|
var FormFieldElement;
|
|
@@ -829,11 +1036,11 @@ var FormFieldElement;
|
|
|
829
1036
|
|
|
830
1037
|
class InfoComponent {
|
|
831
1038
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
832
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: InfoComponent, isStandalone: true, selector: "ndw-info", ngImport: i0, template: "<ng-content />\n", styles: [":host{align-items:center;color:var(--ndw-color-grey-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs)
|
|
1039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: InfoComponent, isStandalone: true, selector: "ndw-info", ngImport: i0, template: "<ng-content />\n", styles: [":host{align-items:center;color:var(--ndw-color-grey-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs)}\n"] }); }
|
|
833
1040
|
}
|
|
834
1041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: InfoComponent, decorators: [{
|
|
835
1042
|
type: Component,
|
|
836
|
-
args: [{ selector: 'ndw-info', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{align-items:center;color:var(--ndw-color-grey-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs)
|
|
1043
|
+
args: [{ selector: 'ndw-info', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{align-items:center;color:var(--ndw-color-grey-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs)}\n"] }]
|
|
837
1044
|
}] });
|
|
838
1045
|
|
|
839
1046
|
class InputDirective {
|
|
@@ -848,9 +1055,15 @@ class InputDirective {
|
|
|
848
1055
|
set error(error) {
|
|
849
1056
|
this.element.toggleAttribute('error', error);
|
|
850
1057
|
}
|
|
1058
|
+
set success(success) {
|
|
1059
|
+
this.element.toggleAttribute('success', success);
|
|
1060
|
+
}
|
|
851
1061
|
set id(id) {
|
|
852
1062
|
this.element.id = id;
|
|
853
1063
|
}
|
|
1064
|
+
set ariaDescribedBy(id) {
|
|
1065
|
+
this.element.setAttribute('aria-describedby', id);
|
|
1066
|
+
}
|
|
854
1067
|
get element() {
|
|
855
1068
|
return this.elementRef.nativeElement;
|
|
856
1069
|
}
|
|
@@ -885,8 +1098,7 @@ class InputDirective {
|
|
|
885
1098
|
if (this.control) {
|
|
886
1099
|
// Mark element as required when the control has a 'required' validator.
|
|
887
1100
|
// This will show an asterisk (*)
|
|
888
|
-
|
|
889
|
-
this.element.required = isRequired;
|
|
1101
|
+
this.element.required = this.control.hasValidator(Validators.required);
|
|
890
1102
|
}
|
|
891
1103
|
}
|
|
892
1104
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: InputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -904,7 +1116,6 @@ var InputType;
|
|
|
904
1116
|
(function (InputType) {
|
|
905
1117
|
InputType["Date"] = "date";
|
|
906
1118
|
InputType["Email"] = "email";
|
|
907
|
-
InputType["Month"] = "month";
|
|
908
1119
|
InputType["Number"] = "number";
|
|
909
1120
|
InputType["Password"] = "password";
|
|
910
1121
|
InputType["Search"] = "search";
|
|
@@ -912,14 +1123,379 @@ var InputType;
|
|
|
912
1123
|
InputType["Text"] = "text";
|
|
913
1124
|
InputType["Time"] = "time";
|
|
914
1125
|
InputType["Url"] = "url";
|
|
915
|
-
InputType["Week"] = "week";
|
|
916
1126
|
})(InputType || (InputType = {}));
|
|
917
1127
|
|
|
1128
|
+
class OptionComponent {
|
|
1129
|
+
constructor() {
|
|
1130
|
+
this.value = input.required();
|
|
1131
|
+
this.label = input.required();
|
|
1132
|
+
this.description = input();
|
|
1133
|
+
this.required = input(false);
|
|
1134
|
+
}
|
|
1135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: OptionComponent, isStandalone: true, selector: "ndw-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1137
|
+
}
|
|
1138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: OptionComponent, decorators: [{
|
|
1139
|
+
type: Component,
|
|
1140
|
+
args: [{
|
|
1141
|
+
selector: 'ndw-option',
|
|
1142
|
+
standalone: true,
|
|
1143
|
+
imports: [],
|
|
1144
|
+
template: '',
|
|
1145
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1146
|
+
}]
|
|
1147
|
+
}] });
|
|
1148
|
+
|
|
1149
|
+
class OptionGroupComponent {
|
|
1150
|
+
constructor() {
|
|
1151
|
+
this.fluid = input(false);
|
|
1152
|
+
this.fluidColumns = input(null);
|
|
1153
|
+
this.disabled = model(false);
|
|
1154
|
+
this.mode = input('multiple');
|
|
1155
|
+
this.required = input(false);
|
|
1156
|
+
this.children = contentChildren(OptionComponent);
|
|
1157
|
+
this.checkedValues = model([]);
|
|
1158
|
+
this.ngControl = inject(NgControl, { optional: true });
|
|
1159
|
+
this.fluidColumnStyle = computed(() => this.fluidColumns() ? `repeat(${this.fluidColumns()}, 1fr)` : null);
|
|
1160
|
+
this.uuid = crypto.randomUUID();
|
|
1161
|
+
this.onChange = () => { };
|
|
1162
|
+
if (this.ngControl) {
|
|
1163
|
+
this.ngControl.valueAccessor = this;
|
|
1164
|
+
}
|
|
1165
|
+
}
|
|
1166
|
+
get isRequiredOrHasRequiredValidator() {
|
|
1167
|
+
return this.required() || this.ngControl?.control?.hasValidator(Validators.required)
|
|
1168
|
+
? true
|
|
1169
|
+
: null;
|
|
1170
|
+
}
|
|
1171
|
+
toggleValue(value) {
|
|
1172
|
+
if (this.mode() === 'single') {
|
|
1173
|
+
this.checkedValues.set([value]);
|
|
1174
|
+
this.onChange(this.checkedValues());
|
|
1175
|
+
}
|
|
1176
|
+
else {
|
|
1177
|
+
const state = [...this.checkedValues()];
|
|
1178
|
+
const index = state.indexOf(value);
|
|
1179
|
+
index >= 0 ? state.splice(index, 1) : state.push(value);
|
|
1180
|
+
this.checkedValues.set(state);
|
|
1181
|
+
this.onChange(this.checkedValues());
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
writeValue(value) {
|
|
1185
|
+
this.checkedValues.set(value ?? []);
|
|
1186
|
+
}
|
|
1187
|
+
registerOnChange(fn) {
|
|
1188
|
+
this.onChange = fn;
|
|
1189
|
+
}
|
|
1190
|
+
registerOnTouched() {
|
|
1191
|
+
// noop
|
|
1192
|
+
}
|
|
1193
|
+
setDisabledState(isDisabled) {
|
|
1194
|
+
this.disabled.set(isDisabled);
|
|
1195
|
+
}
|
|
1196
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1197
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: OptionGroupComponent, isStandalone: true, selector: "ndw-option-group", inputs: { fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, fluidColumns: { classPropertyName: "fluidColumns", publicName: "fluidColumns", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, checkedValues: { classPropertyName: "checkedValues", publicName: "checkedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checkedValues: "checkedValuesChange" }, host: { properties: { "attr.required": "isRequiredOrHasRequiredValidator", "class.grid-columns": "fluidColumns() !== null", "style.gridTemplateColumns": "fluidColumnStyle()" } }, queries: [{ propertyName: "children", predicate: OptionComponent, isSignal: true }], ngImport: i0, template: "@for (child of children(); track child.value()) {\n <label\n ndwButton\n [class.fluid]=\"fluid() && fluidColumns() === null\"\n [class.gridCell]=\"fluidColumns() !== null\"\n [attr.disabled]=\"disabled() ? 'true' : null\"\n [attr.outline]=\"checkedValues().includes(child.value()) ? null : 'true'\"\n [attr.aria-label]=\"child.description() ?? child.label()\"\n >\n <input\n [type]=\"mode() === 'multiple' ? 'checkbox' : 'radio'\"\n [name]=\"mode() === 'multiple' ? 'option-group-radio-' + uuid : null\"\n [value]=\"child.value()\"\n [disabled]=\"disabled()\"\n [checked]=\"checkedValues().includes(child.value())\"\n (change)=\"toggleValue(child.value())\"\n />\n {{ child.label() }}\n </label>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;gap:var(--ndw-spacing-xs)}:host.grid-columns{display:grid}:host .fluid{flex-grow:1;display:flex;justify-content:center}:host .gridCell{width:100%;display:flex;justify-content:center}:host input[type=checkbox],:host input[type=radio]{position:absolute;top:0;left:0;opacity:0}:host label[ndwButton]{background-color:var(--ndw-color-primary-500);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);color:var(--ndw-color-white)}:host label[ndwButton]:hover,:host label[ndwButton]:active{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}:host label[ndwButton]:focus-within{border-color:var(--ndw-color-secondary-500)}:host label[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-600)}:host label[ndwButton][outline]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}:host label[ndwButton][outline]:hover{background-color:var(--ndw-color-primary-050);border-color:var(--ndw-color-primary-500);color:var(--ndw-color-grey-700)}:host label[ndwButton][outline]:active,:host label[ndwButton][outline]:focus-within{background-color:var(--ndw-color-primary-050);color:var(--ndw-color-grey-700)}:host label[ndwButton][outline]:focus-within{border-color:var(--ndw-color-secondary-500)}:host label[ndwButton][outline][disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-400)}:host label[ndwButton][outline].error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}:host[success] label[ndwButton][outline]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500);color:var(--ndw-color-gray-700)}:host.ng-invalid label[ndwButton][outline]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1198
|
+
}
|
|
1199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: OptionGroupComponent, decorators: [{
|
|
1200
|
+
type: Component,
|
|
1201
|
+
args: [{ selector: 'ndw-option-group', standalone: true, imports: [ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1202
|
+
'[attr.required]': 'isRequiredOrHasRequiredValidator',
|
|
1203
|
+
'[class.grid-columns]': 'fluidColumns() !== null',
|
|
1204
|
+
'[style.gridTemplateColumns]': 'fluidColumnStyle()',
|
|
1205
|
+
}, template: "@for (child of children(); track child.value()) {\n <label\n ndwButton\n [class.fluid]=\"fluid() && fluidColumns() === null\"\n [class.gridCell]=\"fluidColumns() !== null\"\n [attr.disabled]=\"disabled() ? 'true' : null\"\n [attr.outline]=\"checkedValues().includes(child.value()) ? null : 'true'\"\n [attr.aria-label]=\"child.description() ?? child.label()\"\n >\n <input\n [type]=\"mode() === 'multiple' ? 'checkbox' : 'radio'\"\n [name]=\"mode() === 'multiple' ? 'option-group-radio-' + uuid : null\"\n [value]=\"child.value()\"\n [disabled]=\"disabled()\"\n [checked]=\"checkedValues().includes(child.value())\"\n (change)=\"toggleValue(child.value())\"\n />\n {{ child.label() }}\n </label>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;gap:var(--ndw-spacing-xs)}:host.grid-columns{display:grid}:host .fluid{flex-grow:1;display:flex;justify-content:center}:host .gridCell{width:100%;display:flex;justify-content:center}:host input[type=checkbox],:host input[type=radio]{position:absolute;top:0;left:0;opacity:0}:host label[ndwButton]{background-color:var(--ndw-color-primary-500);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);color:var(--ndw-color-white)}:host label[ndwButton]:hover,:host label[ndwButton]:active{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}:host label[ndwButton]:focus-within{border-color:var(--ndw-color-secondary-500)}:host label[ndwButton][disabled]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-600)}:host label[ndwButton][outline]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}:host label[ndwButton][outline]:hover{background-color:var(--ndw-color-primary-050);border-color:var(--ndw-color-primary-500);color:var(--ndw-color-grey-700)}:host label[ndwButton][outline]:active,:host label[ndwButton][outline]:focus-within{background-color:var(--ndw-color-primary-050);color:var(--ndw-color-grey-700)}:host label[ndwButton][outline]:focus-within{border-color:var(--ndw-color-secondary-500)}:host label[ndwButton][outline][disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-400)}:host label[ndwButton][outline].error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}:host[success] label[ndwButton][outline]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500);color:var(--ndw-color-gray-700)}:host.ng-invalid label[ndwButton][outline]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}\n"] }]
|
|
1206
|
+
}], ctorParameters: () => [] });
|
|
1207
|
+
|
|
1208
|
+
function createYearRange(minDate, maxDate) {
|
|
1209
|
+
const minYear = minDate.getFullYear();
|
|
1210
|
+
const maxYear = maxDate.getFullYear();
|
|
1211
|
+
const yearCount = maxYear - minYear + 1;
|
|
1212
|
+
return Array.from({ length: yearCount }, (_, index) => minYear + index);
|
|
1213
|
+
}
|
|
1214
|
+
function createMonthOptions(monthLabels) {
|
|
1215
|
+
return monthLabels.map((month, index) => ({
|
|
1216
|
+
label: month,
|
|
1217
|
+
value: index + 1,
|
|
1218
|
+
}));
|
|
1219
|
+
}
|
|
1220
|
+
|
|
1221
|
+
const defaultMonthLabels = [
|
|
1222
|
+
'Jan',
|
|
1223
|
+
'Feb',
|
|
1224
|
+
'Mrt',
|
|
1225
|
+
'Apr',
|
|
1226
|
+
'Mei',
|
|
1227
|
+
'Jun',
|
|
1228
|
+
'Jul',
|
|
1229
|
+
'Aug',
|
|
1230
|
+
'Sep',
|
|
1231
|
+
'Okt',
|
|
1232
|
+
'Nov',
|
|
1233
|
+
'Dec',
|
|
1234
|
+
];
|
|
1235
|
+
class MonthInputComponent {
|
|
1236
|
+
constructor() {
|
|
1237
|
+
this.disabled = model(false);
|
|
1238
|
+
this.required = input(false);
|
|
1239
|
+
this.showMonthPickerLabel = input('Selecteer maand');
|
|
1240
|
+
this.placeholder = input('JJJJ-MM');
|
|
1241
|
+
this.yearPlaceholder = input('Jaar');
|
|
1242
|
+
this.minDate = input(new Date(2020, 0, 1));
|
|
1243
|
+
this.maxDate = input(new Date(2026, 11, 31));
|
|
1244
|
+
this.monthLabels = input(defaultMonthLabels);
|
|
1245
|
+
this.input = viewChild(InputDirective);
|
|
1246
|
+
this.inputElement = computed(() => this.input()?.element);
|
|
1247
|
+
this.showMonthPicker = false;
|
|
1248
|
+
this.selectedYear = model(new Date().getFullYear());
|
|
1249
|
+
this.selectedMonth = model(null);
|
|
1250
|
+
this.selectedDate = computed(() => {
|
|
1251
|
+
const year = this.selectedYear();
|
|
1252
|
+
const month = this.selectedMonth();
|
|
1253
|
+
const date = year && month ? new Date(year, month - 1, 1) : null;
|
|
1254
|
+
return date && date >= this.minDate() && date <= this.maxDate() ? date : null;
|
|
1255
|
+
});
|
|
1256
|
+
this.inputValue = computed(() => {
|
|
1257
|
+
const year = this.selectedYear();
|
|
1258
|
+
const month = this.selectedMonth();
|
|
1259
|
+
return year && month ? `${year}-${month.toString().padStart(2, '0')}` : null;
|
|
1260
|
+
});
|
|
1261
|
+
this.ngControl = inject(NgControl, { optional: true });
|
|
1262
|
+
this.years = computed(() => createYearRange(this.minDate(), this.maxDate()));
|
|
1263
|
+
this.months = computed(() => createMonthOptions(this.monthLabels()));
|
|
1264
|
+
this.onChange = () => { };
|
|
1265
|
+
this.destroyRef = inject(DestroyRef);
|
|
1266
|
+
if (this.ngControl) {
|
|
1267
|
+
this.ngControl.valueAccessor = this;
|
|
1268
|
+
}
|
|
1269
|
+
}
|
|
1270
|
+
ngOnInit() {
|
|
1271
|
+
if (this.ngControl) {
|
|
1272
|
+
this.ngControl.statusChanges?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
1273
|
+
const input = this.input();
|
|
1274
|
+
if (input && this.ngControl) {
|
|
1275
|
+
input.error = this.ngControl.invalid === true;
|
|
1276
|
+
}
|
|
1277
|
+
});
|
|
1278
|
+
}
|
|
1279
|
+
}
|
|
1280
|
+
writeValue(value) {
|
|
1281
|
+
if (value) {
|
|
1282
|
+
this.selectedYear.set(value.getFullYear());
|
|
1283
|
+
this.selectedMonth.set(value.getMonth() + 1);
|
|
1284
|
+
}
|
|
1285
|
+
else {
|
|
1286
|
+
this.selectedYear.set(new Date().getFullYear());
|
|
1287
|
+
this.selectedMonth.set(null);
|
|
1288
|
+
}
|
|
1289
|
+
}
|
|
1290
|
+
registerOnChange(fn) {
|
|
1291
|
+
this.onChange = fn;
|
|
1292
|
+
}
|
|
1293
|
+
setDisabledState(isDisabled) {
|
|
1294
|
+
this.disabled.set(isDisabled);
|
|
1295
|
+
}
|
|
1296
|
+
registerOnTouched() {
|
|
1297
|
+
// noop
|
|
1298
|
+
}
|
|
1299
|
+
onInputChanged(value) {
|
|
1300
|
+
const [year, month] = value.split('-');
|
|
1301
|
+
this.selectedYear.set(parseInt(year, 10));
|
|
1302
|
+
this.selectedMonth.set(parseInt(month, 10));
|
|
1303
|
+
this.onChange(this.selectedDate());
|
|
1304
|
+
}
|
|
1305
|
+
onYearSelected(year) {
|
|
1306
|
+
this.selectedYear.set(parseInt(year, 10));
|
|
1307
|
+
this.onChange(this.selectedDate());
|
|
1308
|
+
}
|
|
1309
|
+
onMonthSelected(month) {
|
|
1310
|
+
this.selectedMonth.set(month);
|
|
1311
|
+
this.onChange(this.selectedDate());
|
|
1312
|
+
}
|
|
1313
|
+
onKeyDown(event) {
|
|
1314
|
+
if (event.key === 'ArrowDown') {
|
|
1315
|
+
this.adjustMonth(-1);
|
|
1316
|
+
event.preventDefault();
|
|
1317
|
+
return;
|
|
1318
|
+
}
|
|
1319
|
+
else if (event.key === 'ArrowUp') {
|
|
1320
|
+
this.adjustMonth(+1);
|
|
1321
|
+
event.preventDefault();
|
|
1322
|
+
return;
|
|
1323
|
+
}
|
|
1324
|
+
const currentValue = event.target?.value;
|
|
1325
|
+
const validKeys = [];
|
|
1326
|
+
if (currentValue.length === 4) {
|
|
1327
|
+
validKeys.push('-');
|
|
1328
|
+
}
|
|
1329
|
+
else {
|
|
1330
|
+
validKeys.push('0', '1', '2', '3', '4', '5', '6', '7', '8', '9');
|
|
1331
|
+
}
|
|
1332
|
+
const isValidKey = validKeys.includes(event.key);
|
|
1333
|
+
const isPrintableKey = event.key.length === 1; // Allow pressing special keys like F12, etc.
|
|
1334
|
+
if (!isValidKey && isPrintableKey) {
|
|
1335
|
+
event.preventDefault();
|
|
1336
|
+
}
|
|
1337
|
+
}
|
|
1338
|
+
adjustMonth(monthIncrement) {
|
|
1339
|
+
const now = new Date();
|
|
1340
|
+
const date = this.selectedDate() ?? new Date(now.getFullYear(), now.getMonth(), 1);
|
|
1341
|
+
const adjustedDate = new Date(date); // Prevent mutating this.selectedDate()
|
|
1342
|
+
adjustedDate.setMonth(adjustedDate.getMonth() + monthIncrement);
|
|
1343
|
+
if (adjustedDate >= this.minDate() && adjustedDate <= this.maxDate()) {
|
|
1344
|
+
this.selectedYear.set(adjustedDate.getFullYear());
|
|
1345
|
+
this.selectedMonth.set(adjustedDate.getMonth() + 1);
|
|
1346
|
+
}
|
|
1347
|
+
}
|
|
1348
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: MonthInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: MonthInputComponent, isStandalone: true, selector: "ndw-month-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showMonthPickerLabel: { classPropertyName: "showMonthPickerLabel", publicName: "showMonthPickerLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, yearPlaceholder: { classPropertyName: "yearPlaceholder", publicName: "yearPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, monthLabels: { classPropertyName: "monthLabels", publicName: "monthLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedYear: { classPropertyName: "selectedYear", publicName: "selectedYear", isSignal: true, isRequired: false, transformFunction: null }, selectedMonth: { classPropertyName: "selectedMonth", publicName: "selectedMonth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selectedYear: "selectedYearChange", selectedMonth: "selectedMonthChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: InputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n ndwInput\n #input\n type=\"text\"\n minlength=\"6\"\n maxlength=\"7\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [value]=\"inputValue()\"\n (change)=\"onInputChanged(input.value)\"\n (keydown)=\"onKeyDown($event)\"\n/>\n\n<button\n ndwButton\n extra-small\n tertiary\n class=\"input-suffix-button\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"showMonthPickerLabel()\"\n (click)=\"showMonthPicker = !showMonthPicker\"\n [ndwPopoverTrigger]=\"monthPicker\"\n [popoverPosition]=\"'nextToTriggerButton'\"\n>\n <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #monthPicker>\n <input\n ndwInput\n #yearSelect\n type=\"number\"\n [placeholder]=\"yearPlaceholder()\"\n [min]=\"minDate().getFullYear()\"\n [max]=\"maxDate().getFullYear()\"\n [ngModel]=\"selectedYear()\"\n (ngModelChange)=\"onYearSelected(yearSelect.value)\"\n />\n\n <ndw-option-group\n [ngModel]=\"selectedMonth() ? [selectedMonth()] : []\"\n (ngModelChange)=\"onMonthSelected($event?.[0])\"\n [fluid]=\"true\"\n [fluidColumns]=\"4\"\n mode=\"single\"\n >\n @for (month of months(); track month) {\n <ndw-option [label]=\"month.label\" [value]=\"month.value\">\n {{ month }}\n </ndw-option>\n }\n </ndw-option-group>\n</ng-template>\n", styles: [":host{display:block;position:relative}input{width:100%}.input-suffix-button{position:absolute;z-index:1;top:var(--ndw-spacing-xs);right:var(--ndw-spacing-xs)}.input-suffix-button[disabled]{background-color:transparent;border-color:transparent;color:var(--ndw-color-grey-400)}input[type=number]{margin-bottom:var(--ndw-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: OptionGroupComponent, selector: "ndw-option-group", inputs: ["fluid", "fluidColumns", "disabled", "mode", "required", "checkedValues"], outputs: ["disabledChange", "checkedValuesChange"] }, { kind: "component", type: OptionComponent, selector: "ndw-option", inputs: ["value", "label", "description", "required"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1350
|
+
}
|
|
1351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: MonthInputComponent, decorators: [{
|
|
1352
|
+
type: Component,
|
|
1353
|
+
args: [{ selector: 'ndw-month-input', standalone: true, imports: [
|
|
1354
|
+
FormsModule,
|
|
1355
|
+
IconComponent,
|
|
1356
|
+
PopoverTriggerDirective,
|
|
1357
|
+
OptionGroupComponent,
|
|
1358
|
+
OptionComponent,
|
|
1359
|
+
InputDirective,
|
|
1360
|
+
ButtonDirective,
|
|
1361
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n ndwInput\n #input\n type=\"text\"\n minlength=\"6\"\n maxlength=\"7\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [value]=\"inputValue()\"\n (change)=\"onInputChanged(input.value)\"\n (keydown)=\"onKeyDown($event)\"\n/>\n\n<button\n ndwButton\n extra-small\n tertiary\n class=\"input-suffix-button\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"showMonthPickerLabel()\"\n (click)=\"showMonthPicker = !showMonthPicker\"\n [ndwPopoverTrigger]=\"monthPicker\"\n [popoverPosition]=\"'nextToTriggerButton'\"\n>\n <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #monthPicker>\n <input\n ndwInput\n #yearSelect\n type=\"number\"\n [placeholder]=\"yearPlaceholder()\"\n [min]=\"minDate().getFullYear()\"\n [max]=\"maxDate().getFullYear()\"\n [ngModel]=\"selectedYear()\"\n (ngModelChange)=\"onYearSelected(yearSelect.value)\"\n />\n\n <ndw-option-group\n [ngModel]=\"selectedMonth() ? [selectedMonth()] : []\"\n (ngModelChange)=\"onMonthSelected($event?.[0])\"\n [fluid]=\"true\"\n [fluidColumns]=\"4\"\n mode=\"single\"\n >\n @for (month of months(); track month) {\n <ndw-option [label]=\"month.label\" [value]=\"month.value\">\n {{ month }}\n </ndw-option>\n }\n </ndw-option-group>\n</ng-template>\n", styles: [":host{display:block;position:relative}input{width:100%}.input-suffix-button{position:absolute;z-index:1;top:var(--ndw-spacing-xs);right:var(--ndw-spacing-xs)}.input-suffix-button[disabled]{background-color:transparent;border-color:transparent;color:var(--ndw-color-grey-400)}input[type=number]{margin-bottom:var(--ndw-spacing-xs)}\n"] }]
|
|
1362
|
+
}], ctorParameters: () => [] });
|
|
1363
|
+
|
|
1364
|
+
class SuccessComponent {
|
|
1365
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: SuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1366
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: SuccessComponent, isStandalone: true, selector: "ndw-success", ngImport: i0, template: "<ndw-icon>check</ndw-icon>\n<ng-content />\n", styles: [":host{align-content:center;align-items:center;color:var(--ndw-color-positive-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:start}ndw-icon{font-size:.875rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }] }); }
|
|
1367
|
+
}
|
|
1368
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: SuccessComponent, decorators: [{
|
|
1369
|
+
type: Component,
|
|
1370
|
+
args: [{ selector: 'ndw-success', standalone: true, imports: [IconComponent], template: "<ndw-icon>check</ndw-icon>\n<ng-content />\n", styles: [":host{align-content:center;align-items:center;color:var(--ndw-color-positive-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:start}ndw-icon{font-size:.875rem}\n"] }]
|
|
1371
|
+
}] });
|
|
1372
|
+
|
|
1373
|
+
const inputTypesWithPrefixIcon = [InputType.Search];
|
|
1374
|
+
const inputTypesWithSuffixButton = [InputType.Date, InputType.Time];
|
|
1375
|
+
class FormFieldComponent {
|
|
1376
|
+
constructor() {
|
|
1377
|
+
this.monthInput = contentChild(MonthInputComponent);
|
|
1378
|
+
this.regularInput = contentChild(InputDirective);
|
|
1379
|
+
this.input = computed(() => this.regularInput() ?? this.monthInput()?.input());
|
|
1380
|
+
this.label = input.required();
|
|
1381
|
+
this.clearSearchAriaLabel = input();
|
|
1382
|
+
this.suffixButtonAriaLabel = input();
|
|
1383
|
+
this.hideLabel = input(false);
|
|
1384
|
+
this.disabled = input(false);
|
|
1385
|
+
this.error = input();
|
|
1386
|
+
this.success = input();
|
|
1387
|
+
this.info = input();
|
|
1388
|
+
this.tooltip = input('');
|
|
1389
|
+
this.inputPrefix = computed(() => this.setInputPrefix());
|
|
1390
|
+
this.inputSuffix = computed(() => this.setInputSuffix());
|
|
1391
|
+
this.uuid = crypto.randomUUID();
|
|
1392
|
+
this.descriptionUuid = crypto.randomUUID();
|
|
1393
|
+
effect(() => {
|
|
1394
|
+
const input = this.input();
|
|
1395
|
+
if (!input) {
|
|
1396
|
+
return;
|
|
1397
|
+
}
|
|
1398
|
+
this.addInputTypeBasedClass(input);
|
|
1399
|
+
this.setInputDisabledState(input);
|
|
1400
|
+
this.setInputErrorState(input);
|
|
1401
|
+
this.setInputSuccessState(input);
|
|
1402
|
+
this.setInputId(input);
|
|
1403
|
+
this.setAriaDescribedBy(input);
|
|
1404
|
+
});
|
|
1405
|
+
}
|
|
1406
|
+
clearInput() {
|
|
1407
|
+
const input = this.input();
|
|
1408
|
+
if (input) {
|
|
1409
|
+
input.element.value = '';
|
|
1410
|
+
// Trigger 'ndw-changed' attribute update on the input element
|
|
1411
|
+
input.element.dispatchEvent(new Event('input'));
|
|
1412
|
+
}
|
|
1413
|
+
}
|
|
1414
|
+
onSuffixButtonClick() {
|
|
1415
|
+
const inputElement = this.input()?.element;
|
|
1416
|
+
if (!inputElement) {
|
|
1417
|
+
return;
|
|
1418
|
+
}
|
|
1419
|
+
inputElement.focus();
|
|
1420
|
+
if ('showPicker' in inputElement) {
|
|
1421
|
+
inputElement.showPicker();
|
|
1422
|
+
}
|
|
1423
|
+
}
|
|
1424
|
+
addInputTypeBasedClass(input) {
|
|
1425
|
+
const element = input.element;
|
|
1426
|
+
if (!element) {
|
|
1427
|
+
return;
|
|
1428
|
+
}
|
|
1429
|
+
inputTypesWithPrefixIcon.includes(element.type)
|
|
1430
|
+
? element.classList.add('prefix-icon')
|
|
1431
|
+
: element.classList.remove('prefix-icon');
|
|
1432
|
+
inputTypesWithSuffixButton.includes(element.type)
|
|
1433
|
+
? element.classList.add('suffix-button')
|
|
1434
|
+
: element.classList.remove('suffix-button');
|
|
1435
|
+
}
|
|
1436
|
+
setInputDisabledState(input) {
|
|
1437
|
+
input.disabled = this.disabled();
|
|
1438
|
+
}
|
|
1439
|
+
setInputErrorState(input) {
|
|
1440
|
+
input.error = !!this.error()?.length;
|
|
1441
|
+
}
|
|
1442
|
+
setInputSuccessState(input) {
|
|
1443
|
+
input.success = !!this.success()?.length;
|
|
1444
|
+
}
|
|
1445
|
+
setInputId(input) {
|
|
1446
|
+
input.id = `input-${this.uuid}`;
|
|
1447
|
+
}
|
|
1448
|
+
setAriaDescribedBy(input) {
|
|
1449
|
+
input.ariaDescribedBy = this.descriptionUuid;
|
|
1450
|
+
}
|
|
1451
|
+
setInputPrefix() {
|
|
1452
|
+
const input = this.input();
|
|
1453
|
+
if (!input) {
|
|
1454
|
+
return;
|
|
1455
|
+
}
|
|
1456
|
+
// Set the input icon for search inputs
|
|
1457
|
+
return inputTypesWithPrefixIcon.includes(input.element.type)
|
|
1458
|
+
? 'search'
|
|
1459
|
+
: undefined;
|
|
1460
|
+
}
|
|
1461
|
+
setInputSuffix() {
|
|
1462
|
+
const input = this.input();
|
|
1463
|
+
if (!input) {
|
|
1464
|
+
return;
|
|
1465
|
+
}
|
|
1466
|
+
// Set the input icon for date inputs
|
|
1467
|
+
if (inputTypesWithSuffixButton.includes(input.element.type)) {
|
|
1468
|
+
return input.element.type === InputType.Time ? 'schedule' : 'calendar_month';
|
|
1469
|
+
}
|
|
1470
|
+
// Set the input icon for select inputs
|
|
1471
|
+
if (input.element.nodeName.toLowerCase() === FormFieldElement.Select) {
|
|
1472
|
+
return 'keyboard_arrow_down';
|
|
1473
|
+
}
|
|
1474
|
+
return undefined;
|
|
1475
|
+
}
|
|
1476
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1477
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: FormFieldComponent, isStandalone: true, selector: "ndw-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, clearSearchAriaLabel: { classPropertyName: "clearSearchAriaLabel", publicName: "clearSearchAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, suffixButtonAriaLabel: { classPropertyName: "suffixButtonAriaLabel", publicName: "suffixButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "monthInput", first: true, predicate: MonthInputComponent, descendants: true, isSignal: true }, { propertyName: "regularInput", first: true, predicate: InputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (input() === undefined) {\n <fieldset>\n <legend ndwLabel [class.sr-only]=\"hideLabel()\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n </legend>\n <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n </fieldset>\n} @else {\n <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n </label>\n <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n}\n\n<ng-template #fieldTemplate>\n @if (inputPrefix(); as icon) {\n <ndw-icon class=\"input-prefix-icon\" [ngClass]=\"{ disabled: disabled() }\">\n {{ icon }}\n </ndw-icon>\n }\n @if (inputSuffix(); as icon) {\n <button\n ndwButton\n extra-small\n tertiary\n class=\"input-suffix-button\"\n [ngClass]=\"{ disabled: disabled() }\"\n [ariaLabel]=\"suffixButtonAriaLabel() ?? ''\"\n (click)=\"onSuffixButtonClick()\"\n >\n <ndw-icon>{{ icon }}</ndw-icon>\n </button>\n }\n\n @if (input()?.element?.type === 'search' && input()?.element?.value !== '') {\n <button\n ndwButton\n alternative\n extra-small\n tertiary\n class=\"input-suffix-button\"\n [ariaLabel]=\"clearSearchAriaLabel() ?? ''\"\n (click)=\"clearInput()\"\n >\n <ndw-icon>close</ndw-icon>\n </button>\n }\n\n <ng-content />\n\n @if (info(); as info) {\n <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\n }\n @if (error(); as error) {\n <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\n }\n @if (success(); as success) {\n <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\n }\n</ng-template>\n\n<ng-template #labelTemplate>\n <span class=\"required-label required\"> * </span>\n {{ label() }}\n @if (tooltip(); as tooltip) {\n <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\n }\n</ng-template>\n", styles: [":host{position:relative;display:grid;margin-bottom:var(--ndw-spacing-md);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}.input-prefix-icon,.input-suffix-button{position:absolute;z-index:1}.input-prefix-icon.disabled,.input-suffix-button.disabled{color:var(--ndw-color-grey-300)}.input-prefix-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-font-size-lg);left:var(--ndw-spacing-sm);top:.625rem}label:not(.sr-only)~.input-prefix-icon{top:2.125rem}.input-suffix-button{top:.5rem;right:var(--ndw-spacing-xs)}label:not(.sr-only)~.input-suffix-button{top:2rem}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: ErrorComponent, selector: "ndw-error" }, { kind: "component", type: SuccessComponent, selector: "ndw-success" }, { kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }, { kind: "component", type: InfoComponent, selector: "ndw-info" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }] }); }
|
|
1478
|
+
}
|
|
1479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
1480
|
+
type: Component,
|
|
1481
|
+
args: [{ selector: 'ndw-form-field', standalone: true, imports: [
|
|
1482
|
+
ButtonDirective,
|
|
1483
|
+
ErrorComponent,
|
|
1484
|
+
SuccessComponent,
|
|
1485
|
+
IconComponent,
|
|
1486
|
+
InfoComponent,
|
|
1487
|
+
NgClass,
|
|
1488
|
+
NgTemplateOutlet,
|
|
1489
|
+
TooltipDirective,
|
|
1490
|
+
], template: "@if (input() === undefined) {\n <fieldset>\n <legend ndwLabel [class.sr-only]=\"hideLabel()\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n </legend>\n <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n </fieldset>\n} @else {\n <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n </label>\n <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n}\n\n<ng-template #fieldTemplate>\n @if (inputPrefix(); as icon) {\n <ndw-icon class=\"input-prefix-icon\" [ngClass]=\"{ disabled: disabled() }\">\n {{ icon }}\n </ndw-icon>\n }\n @if (inputSuffix(); as icon) {\n <button\n ndwButton\n extra-small\n tertiary\n class=\"input-suffix-button\"\n [ngClass]=\"{ disabled: disabled() }\"\n [ariaLabel]=\"suffixButtonAriaLabel() ?? ''\"\n (click)=\"onSuffixButtonClick()\"\n >\n <ndw-icon>{{ icon }}</ndw-icon>\n </button>\n }\n\n @if (input()?.element?.type === 'search' && input()?.element?.value !== '') {\n <button\n ndwButton\n alternative\n extra-small\n tertiary\n class=\"input-suffix-button\"\n [ariaLabel]=\"clearSearchAriaLabel() ?? ''\"\n (click)=\"clearInput()\"\n >\n <ndw-icon>close</ndw-icon>\n </button>\n }\n\n <ng-content />\n\n @if (info(); as info) {\n <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\n }\n @if (error(); as error) {\n <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\n }\n @if (success(); as success) {\n <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\n }\n</ng-template>\n\n<ng-template #labelTemplate>\n <span class=\"required-label required\"> * </span>\n {{ label() }}\n @if (tooltip(); as tooltip) {\n <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\n }\n</ng-template>\n", styles: [":host{position:relative;display:grid;margin-bottom:var(--ndw-spacing-md);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}.input-prefix-icon,.input-suffix-button{position:absolute;z-index:1}.input-prefix-icon.disabled,.input-suffix-button.disabled{color:var(--ndw-color-grey-300)}.input-prefix-icon{color:var(--ndw-color-grey-400);font-size:var(--ndw-font-size-lg);left:var(--ndw-spacing-sm);top:.625rem}label:not(.sr-only)~.input-prefix-icon{top:2.125rem}.input-suffix-button{top:.5rem;right:var(--ndw-spacing-xs)}label:not(.sr-only)~.input-suffix-button{top:2rem}\n"] }]
|
|
1491
|
+
}], ctorParameters: () => [] });
|
|
1492
|
+
|
|
918
1493
|
class RadioButtonComponent {
|
|
919
1494
|
constructor() {
|
|
920
1495
|
this.checked = model(false);
|
|
921
1496
|
this.disabled = model(false);
|
|
922
1497
|
this.error = input(false);
|
|
1498
|
+
this.success = input(false);
|
|
923
1499
|
this.name = model('');
|
|
924
1500
|
this.required = input(false);
|
|
925
1501
|
this.value = model();
|
|
@@ -957,13 +1533,13 @@ class RadioButtonComponent {
|
|
|
957
1533
|
this.disabled.set(isDisabled);
|
|
958
1534
|
}
|
|
959
1535
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
960
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: RadioButtonComponent, isStandalone: true, selector: "ndw-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", name: "nameChange", value: "valueChange" }, host: { properties: { "class.checked": "this.checkedClass", "class.disabled": "this.disabledClass" } }, providers: [
|
|
1536
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: RadioButtonComponent, isStandalone: true, selector: "ndw-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", name: "nameChange", value: "valueChange" }, host: { properties: { "class.checked": "this.checkedClass", "class.disabled": "this.disabledClass" } }, providers: [
|
|
961
1537
|
{
|
|
962
1538
|
provide: NG_VALUE_ACCESSOR,
|
|
963
1539
|
useExisting: RadioButtonComponent,
|
|
964
1540
|
multi: true,
|
|
965
1541
|
},
|
|
966
|
-
], ngImport: i0, template: "<input\n type=\"radio\"\n [id]=\"'radio-button-' + uuid\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n aria-hidden=\"true\"\n/>\n<div\n class=\"radio-button\"\n role=\"radio\"\n [ngClass]=\"{ error: error() }\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"'radio-button-label-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n @if (checked()) {\n <span class=\"check\"></span>\n }\n</div>\n<label\n tabindex=\"-1\"\n id=\"radio-button-label-{{ uuid }}\"\n [for]=\"'radio-button-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content />\n</label>\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@20..48,400&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{--checkable-input-size: 1.25rem;cursor:pointer;display:inline-grid;gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;min-height:1.375rem;width:fit-content}input{display:none}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;margin-top:var(--ndw-spacing-3xs);width:fit-content}label:focus{outline:none}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus){outline:none}:host(:focus) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus) div,:host(.indeterminate:focus) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:50%}div .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) div{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) div{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1542
|
+
], ngImport: i0, template: "<input\n type=\"radio\"\n [id]=\"'radio-button-' + uuid\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n aria-hidden=\"true\"\n/>\n<div\n class=\"radio-button\"\n role=\"radio\"\n [ngClass]=\"{ error: error(), success: success() }\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"'radio-button-label-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n @if (checked()) {\n <span class=\"check\"></span>\n }\n</div>\n<label\n tabindex=\"-1\"\n id=\"radio-button-label-{{ uuid }}\"\n [for]=\"'radio-button-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content />\n</label>\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@20..48,400&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{--checkable-input-size: 1.25rem;cursor:pointer;display:inline-grid;gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;min-height:1.375rem;width:fit-content}input{display:none}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size)}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;margin-top:var(--ndw-spacing-3xs);width:fit-content}label:focus{outline:none}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus){outline:none}:host(:focus) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus) div,:host(.indeterminate:focus) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:50%}div .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) div{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) div{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
967
1543
|
}
|
|
968
1544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
969
1545
|
type: Component,
|
|
@@ -973,7 +1549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
973
1549
|
useExisting: RadioButtonComponent,
|
|
974
1550
|
multi: true,
|
|
975
1551
|
},
|
|
976
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n type=\"radio\"\n [id]=\"'radio-button-' + uuid\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n aria-hidden=\"true\"\n/>\n<div\n class=\"radio-button\"\n role=\"radio\"\n [ngClass]=\"{ error: error() }\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"'radio-button-label-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n @if (checked()) {\n <span class=\"check\"></span>\n }\n</div>\n<label\n tabindex=\"-1\"\n id=\"radio-button-label-{{ uuid }}\"\n [for]=\"'radio-button-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content />\n</label>\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@20..48,400&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{--checkable-input-size: 1.25rem;cursor:pointer;display:inline-grid;gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;min-height:1.375rem;width:fit-content}input{display:none}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;margin-top:var(--ndw-spacing-3xs);width:fit-content}label:focus{outline:none}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus){outline:none}:host(:focus) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus) div,:host(.indeterminate:focus) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:50%}div .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) div{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) div{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"] }]
|
|
1552
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n type=\"radio\"\n [id]=\"'radio-button-' + uuid\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n aria-hidden=\"true\"\n/>\n<div\n class=\"radio-button\"\n role=\"radio\"\n [ngClass]=\"{ error: error(), success: success() }\"\n [tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"'radio-button-label-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n @if (checked()) {\n <span class=\"check\"></span>\n }\n</div>\n<label\n tabindex=\"-1\"\n id=\"radio-button-label-{{ uuid }}\"\n [for]=\"'radio-button-' + uuid\"\n (click)=\"onClick()\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content />\n</label>\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@20..48,400&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{--checkable-input-size: 1.25rem;cursor:pointer;display:inline-grid;gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;min-height:1.375rem;width:fit-content}input{display:none}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size)}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;margin-top:var(--ndw-spacing-3xs);width:fit-content}label:focus{outline:none}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus){outline:none}:host(:focus) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus) div,:host(.indeterminate:focus) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:50%}div .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) div{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) div{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"] }]
|
|
977
1553
|
}], propDecorators: { checkedClass: [{
|
|
978
1554
|
type: HostBinding,
|
|
979
1555
|
args: ['class.checked']
|
|
@@ -987,9 +1563,7 @@ class RadioGroupComponent {
|
|
|
987
1563
|
this.radioButtons = contentChildren(RadioButtonComponent);
|
|
988
1564
|
this.uuid = crypto.randomUUID();
|
|
989
1565
|
this.onChange = () => { };
|
|
990
|
-
|
|
991
|
-
get role() {
|
|
992
|
-
return 'radiogroup';
|
|
1566
|
+
this.roleAttr = 'radiogroup';
|
|
993
1567
|
}
|
|
994
1568
|
ngAfterContentInit() {
|
|
995
1569
|
this.setRadioButtonsName();
|
|
@@ -1030,7 +1604,7 @@ class RadioGroupComponent {
|
|
|
1030
1604
|
});
|
|
1031
1605
|
}
|
|
1032
1606
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1033
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: RadioGroupComponent, isStandalone: true, selector: "ndw-radio-group", host: { properties: { "attr.role": "this.
|
|
1607
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: RadioGroupComponent, isStandalone: true, selector: "ndw-radio-group", host: { properties: { "attr.role": "this.roleAttr" } }, providers: [
|
|
1034
1608
|
{
|
|
1035
1609
|
provide: NG_VALUE_ACCESSOR,
|
|
1036
1610
|
useExisting: RadioGroupComponent,
|
|
@@ -1047,128 +1621,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1047
1621
|
multi: true,
|
|
1048
1622
|
},
|
|
1049
1623
|
], template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"] }]
|
|
1050
|
-
}], propDecorators: {
|
|
1624
|
+
}], propDecorators: { roleAttr: [{
|
|
1051
1625
|
type: HostBinding,
|
|
1052
1626
|
args: ['attr.role']
|
|
1053
1627
|
}] } });
|
|
1054
1628
|
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
this.
|
|
1067
|
-
this.required = computed(() => this.setRequiredState());
|
|
1068
|
-
this.inputPrefix = computed(() => this.setInputPrefix());
|
|
1069
|
-
this.inputSuffix = computed(() => this.setInputSuffix());
|
|
1070
|
-
this.uuid = crypto.randomUUID();
|
|
1071
|
-
effect(() => {
|
|
1072
|
-
const input = this.input();
|
|
1073
|
-
if (!input) {
|
|
1074
|
-
return;
|
|
1075
|
-
}
|
|
1076
|
-
this.addInputTypeBasedClass(input);
|
|
1077
|
-
this.setInputDisabledState(input);
|
|
1078
|
-
this.setInputErrorState(input);
|
|
1079
|
-
this.setInputId(input);
|
|
1080
|
-
});
|
|
1081
|
-
}
|
|
1082
|
-
clearInput() {
|
|
1083
|
-
const input = this.input();
|
|
1084
|
-
if (input) {
|
|
1085
|
-
input.element.value = '';
|
|
1086
|
-
// Trigger 'ndw-changed' attribute update on the input element
|
|
1087
|
-
input.element.dispatchEvent(new Event('input'));
|
|
1088
|
-
}
|
|
1089
|
-
}
|
|
1090
|
-
addInputTypeBasedClass(input) {
|
|
1091
|
-
const element = input.element;
|
|
1092
|
-
if (!element) {
|
|
1093
|
-
return;
|
|
1094
|
-
}
|
|
1095
|
-
inputTypesWithPrefixIcon.includes(element.type)
|
|
1096
|
-
? element.classList.add('prefix-icon')
|
|
1097
|
-
: element.classList.remove('prefix-icon');
|
|
1098
|
-
inputTypesWithSuffixIcon.includes(element.type)
|
|
1099
|
-
? element.classList.add('suffix-icon')
|
|
1100
|
-
: element.classList.remove('suffix-icon');
|
|
1101
|
-
}
|
|
1102
|
-
setInputDisabledState(input) {
|
|
1103
|
-
input.disabled = this.disabled();
|
|
1104
|
-
}
|
|
1105
|
-
setInputErrorState(input) {
|
|
1106
|
-
input.error = !!this.error()?.length;
|
|
1107
|
-
}
|
|
1108
|
-
setInputId(input) {
|
|
1109
|
-
input.id = `input-${this.uuid}`;
|
|
1110
|
-
}
|
|
1111
|
-
setInputPrefix() {
|
|
1112
|
-
const input = this.input();
|
|
1113
|
-
if (!input) {
|
|
1114
|
-
return;
|
|
1115
|
-
}
|
|
1116
|
-
// Set the input icon for search inputs
|
|
1117
|
-
return inputTypesWithPrefixIcon.includes(input.element.type)
|
|
1118
|
-
? 'search'
|
|
1119
|
-
: undefined;
|
|
1629
|
+
/**
|
|
1630
|
+
* Directive that automatically grows a textarea element to fit its content.
|
|
1631
|
+
*
|
|
1632
|
+
* Note that at this moment (2024-09-06) there is an experimental CSS property
|
|
1633
|
+
* `field-sizing: content;` that can be used to achieve the same effect. At this
|
|
1634
|
+
* moment not all browsers support this property (FF and Safari do not for example).
|
|
1635
|
+
*
|
|
1636
|
+
* So for now a directive is used to achieve the same effect.
|
|
1637
|
+
*/
|
|
1638
|
+
class AutoGrowDirective {
|
|
1639
|
+
constructor() {
|
|
1640
|
+
this.elementRef = inject(ElementRef);
|
|
1120
1641
|
}
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
if (!input) {
|
|
1124
|
-
return;
|
|
1125
|
-
}
|
|
1126
|
-
// Set the input icon for date inputs
|
|
1127
|
-
if (inputTypesWithSuffixIcon.includes(input.element.type)) {
|
|
1128
|
-
return input.element.type === InputType.Time ? 'schedule' : 'calendar_month';
|
|
1129
|
-
}
|
|
1130
|
-
// Set the input icon for select inputs
|
|
1131
|
-
if (input.element.nodeName.toLowerCase() === FormFieldElement.Select) {
|
|
1132
|
-
return 'keyboard_arrow_down';
|
|
1133
|
-
}
|
|
1134
|
-
return undefined;
|
|
1642
|
+
get element() {
|
|
1643
|
+
return this.elementRef.nativeElement;
|
|
1135
1644
|
}
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
?.radioButtons()
|
|
1144
|
-
.some((radioButton) => radioButton.required());
|
|
1145
|
-
return requiredInput || requiredCheckboxes || requiredRadioButtons || false;
|
|
1645
|
+
ngAfterViewInit() {
|
|
1646
|
+
this.element.style.resize = 'none';
|
|
1647
|
+
this.element.style.overflow = 'hidden';
|
|
1648
|
+
this.element.addEventListener('input', fitContentInTextArea);
|
|
1649
|
+
// Use set timeout to make sure the textarea is rendered before
|
|
1650
|
+
// we set the initial height. This is needed for Firefox.
|
|
1651
|
+
setTimeout(() => fitContentInTextArea({ target: this.element }));
|
|
1146
1652
|
}
|
|
1147
|
-
|
|
1148
|
-
|
|
1653
|
+
ngOnDestroy() {
|
|
1654
|
+
this.element.removeEventListener('input', fitContentInTextArea);
|
|
1655
|
+
}
|
|
1656
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AutoGrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1657
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: AutoGrowDirective, isStandalone: true, selector: "textarea[ndwAutoGrow]", ngImport: i0 }); }
|
|
1149
1658
|
}
|
|
1150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type:
|
|
1151
|
-
type:
|
|
1152
|
-
args: [{
|
|
1153
|
-
|
|
1659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AutoGrowDirective, decorators: [{
|
|
1660
|
+
type: Directive,
|
|
1661
|
+
args: [{
|
|
1662
|
+
selector: 'textarea[ndwAutoGrow]',
|
|
1663
|
+
standalone: true,
|
|
1664
|
+
}]
|
|
1665
|
+
}] });
|
|
1666
|
+
function fitContentInTextArea(event) {
|
|
1667
|
+
const element = event.target;
|
|
1668
|
+
element.style.height = 'auto'; // Make the textarea shrink when a lot of text is removed.
|
|
1669
|
+
element.style.height = `${element.scrollHeight}px`;
|
|
1670
|
+
}
|
|
1671
|
+
|
|
1672
|
+
var NdwBrand;
|
|
1673
|
+
(function (NdwBrand) {
|
|
1674
|
+
NdwBrand["NDW"] = "NDW";
|
|
1675
|
+
NdwBrand["NWB"] = "NWB";
|
|
1676
|
+
})(NdwBrand || (NdwBrand = {}));
|
|
1154
1677
|
|
|
1155
1678
|
class MainNavigationMenuComponent {
|
|
1156
1679
|
constructor() {
|
|
1157
1680
|
this.menuItems = input.required();
|
|
1681
|
+
this.isMobile = input(false);
|
|
1682
|
+
this.close = output();
|
|
1683
|
+
}
|
|
1684
|
+
handleSelected(item) {
|
|
1685
|
+
item.callback?.(item.id);
|
|
1686
|
+
this.close.emit();
|
|
1158
1687
|
}
|
|
1159
1688
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: MainNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1160
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (item of menuItems(); track item.id) {\n <button ndwButton menu (click)=\"
|
|
1689
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@for (item of menuItems(); track item.id) {\n <button ndwButton menu [attr.active]=\"isMobile() || undefined\" (click)=\"handleSelected(item)\">\n {{ item.label }}\n </button>\n}\n", styles: [":host{background-color:var(--ndw-color-grey-700);min-width:10rem}[ndwButton][menu]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"] }); }
|
|
1161
1690
|
}
|
|
1162
1691
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: MainNavigationMenuComponent, decorators: [{
|
|
1163
1692
|
type: Component,
|
|
1164
|
-
args: [{ selector: 'ndw-main-navigation-menu', standalone: true,
|
|
1693
|
+
args: [{ selector: 'ndw-main-navigation-menu', standalone: true, template: "@for (item of menuItems(); track item.id) {\n <button ndwButton menu [attr.active]=\"isMobile() || undefined\" (click)=\"handleSelected(item)\">\n {{ item.label }}\n </button>\n}\n", styles: [":host{background-color:var(--ndw-color-grey-700);min-width:10rem}[ndwButton][menu]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"] }]
|
|
1165
1694
|
}] });
|
|
1166
1695
|
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1696
|
+
const MAIN_NAVIGATION_IMPORTS = [
|
|
1697
|
+
BadgeComponent,
|
|
1698
|
+
CdkPortalOutlet,
|
|
1699
|
+
IconComponent,
|
|
1700
|
+
MainNavigationMenuComponent,
|
|
1701
|
+
NgClass,
|
|
1702
|
+
NgTemplateOutlet,
|
|
1703
|
+
OverlayModule,
|
|
1704
|
+
RouterLink,
|
|
1705
|
+
TooltipDirective,
|
|
1706
|
+
];
|
|
1172
1707
|
|
|
1173
1708
|
class MainNavigationComponent {
|
|
1174
1709
|
constructor() {
|
|
@@ -1178,15 +1713,19 @@ class MainNavigationComponent {
|
|
|
1178
1713
|
this.brand = input(NdwBrand.NDW);
|
|
1179
1714
|
this.footerTexts = input();
|
|
1180
1715
|
this.isCollapsible = input(true);
|
|
1181
|
-
this.
|
|
1716
|
+
this.version = input();
|
|
1717
|
+
// Mobile inputs
|
|
1718
|
+
this.closeButtonLabel = input('Sluit');
|
|
1719
|
+
this.menuButtonLabel = input('Menu');
|
|
1182
1720
|
this.isExpanded = model(true);
|
|
1721
|
+
this.isMobileExpanded = model(false);
|
|
1183
1722
|
this.buttons = viewChildren('menuTrigger');
|
|
1184
1723
|
this.childMenuTemplate = viewChild.required('childMenu');
|
|
1724
|
+
this.isMobile = signal(window.innerWidth <= 1024);
|
|
1185
1725
|
this.brandImagePath = computed(() => {
|
|
1186
1726
|
const brand = this.brand().toLowerCase();
|
|
1187
|
-
const variant = !this.isExpanded() ? '-short' : '';
|
|
1188
|
-
|
|
1189
|
-
return `assets/images/${brand}-logo${variant}${extension}`;
|
|
1727
|
+
const variant = !this.isExpanded() && !this.isMobile() ? '-short' : '';
|
|
1728
|
+
return `assets/images/${brand}-logo${variant}.svg`;
|
|
1190
1729
|
});
|
|
1191
1730
|
this.activeChildItems = [];
|
|
1192
1731
|
this.overlayPositions = [
|
|
@@ -1212,40 +1751,71 @@ class MainNavigationComponent {
|
|
|
1212
1751
|
get expandedClass() {
|
|
1213
1752
|
return this.isExpanded();
|
|
1214
1753
|
}
|
|
1754
|
+
get mobileClass() {
|
|
1755
|
+
return this.isMobile();
|
|
1756
|
+
}
|
|
1215
1757
|
// Only close the menu when the cursor is not over the button or the child menu
|
|
1216
1758
|
onMouseMove(event) {
|
|
1217
1759
|
const isCursorOverButton = this.activeButton?.nativeElement.contains(event.target);
|
|
1218
1760
|
const isCursorOverChildMenu = this.overlayRef?.overlayElement.contains(event.target);
|
|
1219
|
-
if (!isCursorOverButton && !isCursorOverChildMenu) {
|
|
1761
|
+
if (!this.mobilePortal && !isCursorOverButton && !isCursorOverChildMenu) {
|
|
1220
1762
|
this.close();
|
|
1221
1763
|
}
|
|
1222
1764
|
}
|
|
1765
|
+
onWindowResize() {
|
|
1766
|
+
this.isMobile.set(window.innerWidth <= 1024);
|
|
1767
|
+
}
|
|
1223
1768
|
ngAfterViewInit() {
|
|
1224
1769
|
this.overlayRef = this.overlay.create({
|
|
1225
1770
|
positionStrategy: this.setPositionStrategy(),
|
|
1226
1771
|
});
|
|
1227
1772
|
}
|
|
1228
|
-
|
|
1229
|
-
this.
|
|
1773
|
+
ngOnDestroy() {
|
|
1774
|
+
this.mobilePortal?.detach();
|
|
1775
|
+
this.overlayRef?.dispose();
|
|
1776
|
+
}
|
|
1777
|
+
close(toggleMobileView) {
|
|
1778
|
+
this.activeChildItems = [];
|
|
1779
|
+
this.isMobile() ? this.mobilePortal?.detach() : this.overlayRef?.detach();
|
|
1780
|
+
toggleMobileView && this.toggleMobileView();
|
|
1781
|
+
}
|
|
1782
|
+
handleClick(item) {
|
|
1783
|
+
item.callback?.(item.id);
|
|
1784
|
+
if (!item.children && this.isMobile()) {
|
|
1785
|
+
this.toggleMobileView();
|
|
1786
|
+
}
|
|
1787
|
+
}
|
|
1788
|
+
handleLogoClick() {
|
|
1789
|
+
this.isMobileExpanded.set(false);
|
|
1230
1790
|
}
|
|
1231
1791
|
open(item) {
|
|
1232
|
-
this.
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
return;
|
|
1792
|
+
this.activeId = item.id;
|
|
1793
|
+
if (!this.isMobile()) {
|
|
1794
|
+
this.close();
|
|
1236
1795
|
}
|
|
1237
|
-
|
|
1796
|
+
this.activeButton = this.buttons().find((button) => Number(button.nativeElement.id) === item.id);
|
|
1797
|
+
if (!this.activeButton?.nativeElement || !item.children) {
|
|
1238
1798
|
return;
|
|
1239
1799
|
}
|
|
1240
1800
|
this.activeChildItems = item.children;
|
|
1241
1801
|
const portal = new TemplatePortal(this.childMenuTemplate(), this.viewContainerRef);
|
|
1802
|
+
if (this.isMobile()) {
|
|
1803
|
+
this.mobilePortal = portal;
|
|
1804
|
+
return;
|
|
1805
|
+
}
|
|
1806
|
+
this.mobilePortal = undefined;
|
|
1242
1807
|
// Update the position strategy with the active button as the trigger
|
|
1243
1808
|
this.overlayRef?.updatePositionStrategy(this.setPositionStrategy(this.activeButton.nativeElement));
|
|
1244
1809
|
this.overlayRef?.attach(portal);
|
|
1245
1810
|
}
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1811
|
+
toggleChildMenu(item, event) {
|
|
1812
|
+
if (event && event?.key !== 'Enter') {
|
|
1813
|
+
return;
|
|
1814
|
+
}
|
|
1815
|
+
this.mobilePortal?.isAttached && this.activeId === item.id ? this.close() : this.open(item);
|
|
1816
|
+
}
|
|
1817
|
+
toggleMobileView() {
|
|
1818
|
+
this.isMobileExpanded.set(!this.isMobileExpanded());
|
|
1249
1819
|
}
|
|
1250
1820
|
toggleView() {
|
|
1251
1821
|
this.isExpanded.set(!this.isExpanded());
|
|
@@ -1260,43 +1830,203 @@ class MainNavigationComponent {
|
|
|
1260
1830
|
.withPositions(this.overlayPositions);
|
|
1261
1831
|
}
|
|
1262
1832
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: MainNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1263
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", 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 }, brand: { classPropertyName: "brand", publicName: "brand", 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 }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", isExpanded: "isExpandedChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)" }, properties: { "attr.brand": "this.brandAttribute", "class.expanded": "this.expandedClass" } }, viewQueries: [{ propertyName: "buttons", predicate: ["menuTrigger"], descendants: true, isSignal: true }, { propertyName: "childMenuTemplate", first: true, predicate: ["childMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<header>\n <img [src]=\"brandImagePath()\" [alt]=\"brand() + ' logo'\" />\n @if (isExpanded()) {\n {{ applicationName() }}\n }\n</header>\n<main>\n @for (item of topMenuItems(); track $index) {\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item }\" />\n }\n</main>\n<footer>\n @for (item of bottomMenuItems(); track $index) {\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item }\" />\n }\n @if (isExpanded()) {\n @for (text of footerTexts(); track $index) {\n <p>{{ text }}</p>\n }\n }\n @if (isCollapsible()) {\n <button\n class=\"collapse-button\"\n ndwButton\n menu\n aria-label=\"expand-button\"\n [ngClass]=\"{ collapsed: !isExpanded() }\"\n (click)=\"toggleView()\"\n >\n <ndw-icon>keyboard_double_arrow_left</ndw-icon>\n </button>\n }\n</footer>\n\n<!-- Templates -->\n<ng-template #menuItem let-item>\n <button\n ndwButton\n menu\n #menuTrigger\n [id]=\"item.id\"\n (click)=\"item.callback?.(item.id)\"\n (focus)=\"open(item)\"\n (mouseover)=\"open(item)\"\n >\n @if (item.icon) {\n <ndw-icon>{{ item.icon }}</ndw-icon>\n }\n @if (isExpanded()) {\n {{ item.label }}\n }\n @if (item.notifications) {\n <ndw-badge [ngClass]=\"{ collapsed: !isExpanded() }\" [value]=\"item.notifications\" />\n }\n @if (isExpanded() && item.children) {\n <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n }\n </button>\n</ng-template>\n\n<ng-template #childMenu>\n <ndw-main-navigation-menu [menuItems]=\"activeChildItems\" />\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@20..48,400&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{--main-navigation-collapse-button-bottom: 2.125rem;background-color:var(--ndw-color-grey-700);box-sizing:border-box;color:var(--ndw-color-grey-400);display:grid;grid-template-rows:auto 1fr auto;height:100%;padding-block:var(--ndw-spacing-lg) var(--ndw-spacing-xs);width:2.75rem}header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:baseline;color:var(--ndw-color-white);display:flex;flex-wrap:wrap;gap:var(--ndw-spacing-xs);justify-content:center;letter-spacing:.2em;margin-bottom:var(--ndw-spacing-xl);padding-inline:0;text-transform:uppercase}header img{width:var(--ndw-spacing-md)}main [ndwButton],footer [ndwButton]{justify-content:center}main [ndwButton] ndw-badge,footer [ndwButton] ndw-badge{margin-left:var(--ndw-spacing-2xs)}main [ndwButton] ndw-badge.collapsed,footer [ndwButton] ndw-badge.collapsed{position:absolute;right:.375rem;top:.375rem}main [ndwButton] .suffix,footer [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}footer{margin-bottom:var(--main-navigation-collapse-button-bottom);position:relative}footer p{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;margin:0;text-align:center}footer p:first-of-type{margin-top:var(--ndw-spacing-md)}footer p:not(:last-of-type){margin-bottom:var(--ndw-spacing-lg)}footer p:last-of-type{margin-left:var(--ndw-spacing-2xl);width:calc(100% - var(--ndw-spacing-4xl))}footer .collapse-button{bottom:calc(var(--main-navigation-collapse-button-bottom) * -1 - var(--ndw-spacing-xs));height:2.25rem;justify-content:center;position:absolute;right:0;width:100%}footer .collapse-button.collapsed ndw-icon{transform:var(--ndw-rotate-half)}:host(.expanded){padding-top:var(--ndw-spacing-xl);width:12.5rem}:host(.expanded) header{justify-content:initial;padding-inline:var(--ndw-spacing-md)}:host(.expanded) header img{width:4rem}:host(.expanded) main [ndwButton],:host(.expanded) footer [ndwButton]{justify-content:initial;padding-inline:var(--ndw-spacing-md)}:host(.expanded) footer{margin-bottom:var(--ndw-spacing-3xs)}:host(.expanded) footer .collapse-button{bottom:calc(var(--ndw-spacing-xs) * -1 - var(--ndw-spacing-3xs));padding-inline:var(--ndw-spacing-sm);width:fit-content}:host([brand=nwb]) header{font-size:.5rem}:host(.expanded[brand=nwb]) header{flex-direction:column}:host(.expanded[brand=nwb]) header img{width:8rem}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["interactive"] }, { kind: "component", type: MainNavigationMenuComponent, selector: "ndw-main-navigation-menu", inputs: ["menuItems"] }, { kind: "ngmodule", type: OverlayModule }] }); }
|
|
1833
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", 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 }, brand: { classPropertyName: "brand", publicName: "brand", 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 }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, menuButtonLabel: { classPropertyName: "menuButtonLabel", publicName: "menuButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, isMobileExpanded: { classPropertyName: "isMobileExpanded", publicName: "isMobileExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange", isMobileExpanded: "isMobileExpandedChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "window:resize": "onWindowResize()" }, properties: { "attr.brand": "this.brandAttribute", "class.expanded": "this.expandedClass", "class.mobile": "this.mobileClass" } }, viewQueries: [{ propertyName: "buttons", predicate: ["menuTrigger"], descendants: true, isSignal: true }, { propertyName: "childMenuTemplate", first: true, predicate: ["childMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<header>\n <a routerLink=\"/\" (click)=\"handleLogoClick()\" (keydown)=\"handleLogoClick()\">\n <img [src]=\"brandImagePath()\" [alt]=\"brand() + ' logo'\" />\n @if (isExpanded() || isMobile()) {\n {{ applicationName() }}\n }\n </a>\n <button ndwButton class=\"menu-button\" aria-label=\"menu-button\" (click)=\"toggleMobileView()\">\n @if (!isMobileExpanded()) {\n {{ menuButtonLabel() }}\n <ndw-icon>menu</ndw-icon>\n } @else {\n {{ closeButtonLabel() }}\n <ndw-icon>close</ndw-icon>\n }\n </button>\n</header>\n<div class=\"content\" [ngClass]=\"{ expanded: isMobileExpanded() }\">\n <main>\n <div class=\"menu-items\">\n @for (item of topMenuItems(); track $index) {\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item }\" />\n }\n </div>\n </main>\n <footer>\n <div class=\"menu-items\">\n @for (item of bottomMenuItems(); track $index) {\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item }\" />\n }\n </div>\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 @if (isCollapsible()) {\n <button ndwButton menu aria-label=\"expand-button\" (click)=\"toggleView()\">\n <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n </button>\n }\n </div>\n </footer>\n</div>\n\n<!-- Templates -->\n<ng-template #menuItem let-item>\n <button\n ndwButton\n menu\n #menuTrigger\n [attr.active]=\"(isMobile() && activeChildItems === item.children) || undefined\"\n [id]=\"item.id\"\n [ndwTooltip]=\"!isExpanded() && !isMobile() ? item.label : ''\"\n (click)=\"handleClick(item)\"\n (focus)=\"!isMobile() && open(item)\"\n (keydown)=\"isMobile() && toggleChildMenu(item, $event)\"\n (mousedown)=\"isMobile() && toggleChildMenu(item)\"\n (mouseover)=\"!isMobile() && open(item)\"\n >\n @if (item.icon) {\n <ndw-icon>{{ item.icon }}</ndw-icon>\n }\n @if (isExpanded() || isMobile()) {\n {{ item.label }}\n }\n @if (item.notifications) {\n <ndw-badge [ngClass]=\"{ collapsed: !isExpanded() }\" [value]=\"item.notifications\" />\n }\n @if (isExpanded() && item.children) {\n <ndw-icon\n class=\"suffix\"\n [ngClass]=\"{ open: !!mobilePortal && activeChildItems === item.children }\"\n >arrow_right</ndw-icon\n >\n }\n </button>\n @if (activeChildItems === item.children) {\n <ng-template [cdkPortalOutlet]=\"mobilePortal\" />\n }\n</ng-template>\n\n<ng-template #childMenu>\n <ndw-main-navigation-menu\n [isMobile]=\"isMobile()\"\n [menuItems]=\"activeChildItems\"\n (close)=\"close(true)\"\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@20..48,400&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{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));--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-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}:host{--main-navigation-collapse-width: 2.75rem;--main-navigation-mobile-header-height: 6.25rem;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)}:host header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;color:var(--ndw-color-white);display:flex;gap:var(--ndw-spacing-xs);justify-content:center;letter-spacing:.2em;margin-bottom:var(--ndw-spacing-xl);padding-inline:0;text-transform:uppercase}:host header a{align-items:baseline;color:var(--ndw-color-white);cursor:pointer;display:flex;flex-wrap:wrap;gap:var(--ndw-spacing-xs);text-decoration:none}:host header a img{width:1rem}:host header .menu-button{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);border-radius:var(--ndw-border-radius-lg);display:none;text-transform:uppercase}:host header .menu-button ndw-icon{font-size:var(--ndw-font-size-lg)}:host .content{background-color:var(--ndw-color-grey-700);display:grid;grid-template-rows:1fr auto;overflow-y:auto}:host .content main [ndwButton],:host .content footer [ndwButton]{justify-content:center}:host .content main [ndwButton] ndw-badge,:host .content footer [ndwButton] ndw-badge{margin-left:var(--ndw-spacing-2xs);position:absolute;right:.375rem;top:.375rem}:host .content main [ndwButton] .suffix,:host .content footer [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}:host .content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;display:grid;gap:var(--ndw-spacing-xs);min-height:2.625rem;padding-inline:var(--ndw-spacing-md);padding-top:var(--ndw-spacing-md)}:host .content footer .texts p{margin:auto;text-align:center}:host .content footer .version{align-items:center;display:grid;grid-template-columns:1fr}:host .content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);padding-left:var(--main-navigation-collapse-width);text-align:center}:host.expanded header,:host.mobile header{padding-inline:var(--ndw-spacing-md)}:host.expanded header a img,:host.mobile header a img{width:4rem}:host.expanded .content main .menu-items [ndwButton],:host.expanded .content footer .menu-items [ndwButton],:host.mobile .content main .menu-items [ndwButton],:host.mobile .content footer .menu-items [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}:host.expanded .content main .menu-items [ndwButton] ndw-badge,:host.expanded .content footer .menu-items [ndwButton] ndw-badge,:host.mobile .content main .menu-items [ndwButton] ndw-badge,:host.mobile .content footer .menu-items [ndwButton] ndw-badge{position:relative;right:auto;top:auto}:host.expanded{width:12.5rem}:host.expanded header{justify-content:flex-start}:host.expanded .content footer{position:relative}:host.expanded .content footer .version{grid-template-columns:1fr var(--main-navigation-collapse-width)}:host.expanded .content footer .version p{display:block}:host.expanded .content footer .version [ndwButton] ndw-icon{transform:var(--ndw-rotate-half)}:host[brand=nwb] header{font-size:.5rem}:host.expanded[brand=nwb] header{flex-direction:column}:host.expanded[brand=nwb] header img{width:8rem}@media screen and (max-width: 1024px){:host{align-items:flex-end;grid-template-rows:initial;height:var(--main-navigation-mobile-header-height);width:100%}:host header{align-items:flex-end;justify-content:space-between;margin-bottom:var(--ndw-spacing-md)}:host header .menu-button{display:flex}:host .content{display:none;grid-template-rows:auto 1fr;inset:var(--main-navigation-mobile-header-height) 0 0;position:absolute;z-index:9999}:host .content [ndwButton] .suffix{rotate:90deg}:host .content [ndwButton] .suffix.open{rotate:-90deg}:host .content footer{display:grid;grid-template-rows:1fr repeat(2,auto)}:host .content footer .version button{display:none}:host .content.expanded{display:grid}:host.expanded{width:100%}:host.expanded header{justify-content:space-between}}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel"] }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }, { kind: "component", type: MainNavigationMenuComponent, selector: "ndw-main-navigation-menu", inputs: ["menuItems", "isMobile"], outputs: ["close"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i6.OverlayModule }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }] }); }
|
|
1264
1834
|
}
|
|
1265
1835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: MainNavigationComponent, decorators: [{
|
|
1266
1836
|
type: Component,
|
|
1267
|
-
args: [{ selector: 'ndw-main-navigation', standalone: true, imports: [
|
|
1268
|
-
BadgeComponent,
|
|
1269
|
-
CommonModule,
|
|
1270
|
-
IconComponent,
|
|
1271
|
-
MainNavigationMenuComponent,
|
|
1272
|
-
OverlayModule,
|
|
1273
|
-
], template: "<header>\n <img [src]=\"brandImagePath()\" [alt]=\"brand() + ' logo'\" />\n @if (isExpanded()) {\n {{ applicationName() }}\n }\n</header>\n<main>\n @for (item of topMenuItems(); track $index) {\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item }\" />\n }\n</main>\n<footer>\n @for (item of bottomMenuItems(); track $index) {\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item }\" />\n }\n @if (isExpanded()) {\n @for (text of footerTexts(); track $index) {\n <p>{{ text }}</p>\n }\n }\n @if (isCollapsible()) {\n <button\n class=\"collapse-button\"\n ndwButton\n menu\n aria-label=\"expand-button\"\n [ngClass]=\"{ collapsed: !isExpanded() }\"\n (click)=\"toggleView()\"\n >\n <ndw-icon>keyboard_double_arrow_left</ndw-icon>\n </button>\n }\n</footer>\n\n<!-- Templates -->\n<ng-template #menuItem let-item>\n <button\n ndwButton\n menu\n #menuTrigger\n [id]=\"item.id\"\n (click)=\"item.callback?.(item.id)\"\n (focus)=\"open(item)\"\n (mouseover)=\"open(item)\"\n >\n @if (item.icon) {\n <ndw-icon>{{ item.icon }}</ndw-icon>\n }\n @if (isExpanded()) {\n {{ item.label }}\n }\n @if (item.notifications) {\n <ndw-badge [ngClass]=\"{ collapsed: !isExpanded() }\" [value]=\"item.notifications\" />\n }\n @if (isExpanded() && item.children) {\n <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n }\n </button>\n</ng-template>\n\n<ng-template #childMenu>\n <ndw-main-navigation-menu [menuItems]=\"activeChildItems\" />\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@20..48,400&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{--main-navigation-collapse-button-bottom: 2.125rem;background-color:var(--ndw-color-grey-700);box-sizing:border-box;color:var(--ndw-color-grey-400);display:grid;grid-template-rows:auto 1fr auto;height:100%;padding-block:var(--ndw-spacing-lg) var(--ndw-spacing-xs);width:2.75rem}header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:baseline;color:var(--ndw-color-white);display:flex;flex-wrap:wrap;gap:var(--ndw-spacing-xs);justify-content:center;letter-spacing:.2em;margin-bottom:var(--ndw-spacing-xl);padding-inline:0;text-transform:uppercase}header img{width:var(--ndw-spacing-md)}main [ndwButton],footer [ndwButton]{justify-content:center}main [ndwButton] ndw-badge,footer [ndwButton] ndw-badge{margin-left:var(--ndw-spacing-2xs)}main [ndwButton] ndw-badge.collapsed,footer [ndwButton] ndw-badge.collapsed{position:absolute;right:.375rem;top:.375rem}main [ndwButton] .suffix,footer [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}footer{margin-bottom:var(--main-navigation-collapse-button-bottom);position:relative}footer p{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;margin:0;text-align:center}footer p:first-of-type{margin-top:var(--ndw-spacing-md)}footer p:not(:last-of-type){margin-bottom:var(--ndw-spacing-lg)}footer p:last-of-type{margin-left:var(--ndw-spacing-2xl);width:calc(100% - var(--ndw-spacing-4xl))}footer .collapse-button{bottom:calc(var(--main-navigation-collapse-button-bottom) * -1 - var(--ndw-spacing-xs));height:2.25rem;justify-content:center;position:absolute;right:0;width:100%}footer .collapse-button.collapsed ndw-icon{transform:var(--ndw-rotate-half)}:host(.expanded){padding-top:var(--ndw-spacing-xl);width:12.5rem}:host(.expanded) header{justify-content:initial;padding-inline:var(--ndw-spacing-md)}:host(.expanded) header img{width:4rem}:host(.expanded) main [ndwButton],:host(.expanded) footer [ndwButton]{justify-content:initial;padding-inline:var(--ndw-spacing-md)}:host(.expanded) footer{margin-bottom:var(--ndw-spacing-3xs)}:host(.expanded) footer .collapse-button{bottom:calc(var(--ndw-spacing-xs) * -1 - var(--ndw-spacing-3xs));padding-inline:var(--ndw-spacing-sm);width:fit-content}:host([brand=nwb]) header{font-size:.5rem}:host(.expanded[brand=nwb]) header{flex-direction:column}:host(.expanded[brand=nwb]) header img{width:8rem}\n"] }]
|
|
1837
|
+
args: [{ selector: 'ndw-main-navigation', standalone: true, imports: MAIN_NAVIGATION_IMPORTS, template: "<header>\n <a routerLink=\"/\" (click)=\"handleLogoClick()\" (keydown)=\"handleLogoClick()\">\n <img [src]=\"brandImagePath()\" [alt]=\"brand() + ' logo'\" />\n @if (isExpanded() || isMobile()) {\n {{ applicationName() }}\n }\n </a>\n <button ndwButton class=\"menu-button\" aria-label=\"menu-button\" (click)=\"toggleMobileView()\">\n @if (!isMobileExpanded()) {\n {{ menuButtonLabel() }}\n <ndw-icon>menu</ndw-icon>\n } @else {\n {{ closeButtonLabel() }}\n <ndw-icon>close</ndw-icon>\n }\n </button>\n</header>\n<div class=\"content\" [ngClass]=\"{ expanded: isMobileExpanded() }\">\n <main>\n <div class=\"menu-items\">\n @for (item of topMenuItems(); track $index) {\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item }\" />\n }\n </div>\n </main>\n <footer>\n <div class=\"menu-items\">\n @for (item of bottomMenuItems(); track $index) {\n <ng-container *ngTemplateOutlet=\"menuItem; context: { $implicit: item }\" />\n }\n </div>\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 @if (isCollapsible()) {\n <button ndwButton menu aria-label=\"expand-button\" (click)=\"toggleView()\">\n <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n </button>\n }\n </div>\n </footer>\n</div>\n\n<!-- Templates -->\n<ng-template #menuItem let-item>\n <button\n ndwButton\n menu\n #menuTrigger\n [attr.active]=\"(isMobile() && activeChildItems === item.children) || undefined\"\n [id]=\"item.id\"\n [ndwTooltip]=\"!isExpanded() && !isMobile() ? item.label : ''\"\n (click)=\"handleClick(item)\"\n (focus)=\"!isMobile() && open(item)\"\n (keydown)=\"isMobile() && toggleChildMenu(item, $event)\"\n (mousedown)=\"isMobile() && toggleChildMenu(item)\"\n (mouseover)=\"!isMobile() && open(item)\"\n >\n @if (item.icon) {\n <ndw-icon>{{ item.icon }}</ndw-icon>\n }\n @if (isExpanded() || isMobile()) {\n {{ item.label }}\n }\n @if (item.notifications) {\n <ndw-badge [ngClass]=\"{ collapsed: !isExpanded() }\" [value]=\"item.notifications\" />\n }\n @if (isExpanded() && item.children) {\n <ndw-icon\n class=\"suffix\"\n [ngClass]=\"{ open: !!mobilePortal && activeChildItems === item.children }\"\n >arrow_right</ndw-icon\n >\n }\n </button>\n @if (activeChildItems === item.children) {\n <ng-template [cdkPortalOutlet]=\"mobilePortal\" />\n }\n</ng-template>\n\n<ng-template #childMenu>\n <ndw-main-navigation-menu\n [isMobile]=\"isMobile()\"\n [menuItems]=\"activeChildItems\"\n (close)=\"close(true)\"\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@20..48,400&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{--_grey-700: 195, 100%, 10%;--_grey-600: 196, 13%, 29%;--_grey-500: 197, 7%, 40%;--_grey-400: 204, 2%, 54%;--_grey-300: 192, 5%, 82%;--_grey-200: 204, 11%, 91%;--_grey-100: 200, 16%, 96%;--_white: 0, 0%, 100%;--ndw-color-grey-700: hsl(var(--_grey-700));--ndw-color-grey-600: hsl(var(--_grey-600));--ndw-color-grey-500: hsl(var(--_grey-500));--ndw-color-grey-400: hsl(var(--_grey-400));--ndw-color-grey-300: hsl(var(--_grey-300));--ndw-color-grey-200: hsl(var(--_grey-200));--ndw-color-grey-100: hsl(var(--_grey-100));--ndw-color-white: hsl(var(--_white));--_link: 208, 100%;--_link-400: var(--_link), 41%;--_link-500: var(--_link), 32%;--ndw-color-link-400: hsl(var(--_link-400));--ndw-color-link-500: hsl(var(--_link-500));--_positive: 133, 92%;--_positive-100: 117, 56%, 92%;--_positive-500: var(--_positive), 33%;--_positive-600: var(--_positive), 24%;--_warning: 43, 93%;--_warning-100: 44, 100%, 94%;--_warning-500: var(--_warning), 43%;--_warning-600: 42, 83%, 32%;--_alternative: 292, 100%;--_alternative-100: var(--_alternative), 95%;--_alternative-500: 292, 95%, 33%;--_critical: 0, 100%;--_critical-100: var(--_critical), 98%;--_critical-500: var(--_critical), 46%;--ndw-color-positive-100: hsl(var(--_positive-100));--ndw-color-positive-500: hsl(var(--_positive-500));--ndw-color-positive-600: hsl(var(--_positive-600));--ndw-color-warning-100: hsl(var(--_warning-100));--ndw-color-warning-500: hsl(var(--_warning-500));--ndw-color-warning-600: hsl(var(--_warning-600));--ndw-color-alternative-100: hsl(var(--_alternative-100));--ndw-color-alternative-500: hsl(var(--_alternative-500));--ndw-color-critical-100: hsl(var(--_critical-100));--ndw-color-critical-500: hsl(var(--_critical-500));--ndw-color-notification: hsl(19, 100%, 35%);--_data-a-500: 133, 100%, 21%;--_data-a-100: 101, 61%, 81%;--_data-b-500: 0, 0%, 27%;--_data-b-100: 0, 0%, 87%;--_data-c-500: 209, 97%, 38%;--_data-c-100: 194, 95%, 84%;--_data-d-500: 292, 95%, 33%;--_data-d-100: 292, 100%, 87%;--_data-e-500: 51, 95%, 23%;--_data-e-100: 54, 89%, 79%;--_data-f-500: 0, 97%, 35%;--_data-f-100: 0, 100%, 94%;--ndw-color-data-a-500: hsl(var(--_data-a-500));--ndw-color-data-a-100: hsl(var(--_data-a-100));--ndw-color-data-b-500: hsl(var(--_data-b-500));--ndw-color-data-b-100: hsl(var(--_data-b-100));--ndw-color-data-c-500: hsl(var(--_data-c-500));--ndw-color-data-c-100: hsl(var(--_data-c-100));--ndw-color-data-d-500: hsl(var(--_data-d-500));--ndw-color-data-d-100: hsl(var(--_data-d-100));--ndw-color-data-e-500: hsl(var(--_data-e-500));--ndw-color-data-e-100: hsl(var(--_data-e-100));--ndw-color-data-f-500: hsl(var(--_data-f-500));--ndw-color-data-f-100: hsl(var(--_data-f-100));--_alpha-black: 0, 0%, 0%;--_alpha-007: .07;--_alpha-015: .15;--_alpha-040: .4;--ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));--ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));--ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));--ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));--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-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}:host{--main-navigation-collapse-width: 2.75rem;--main-navigation-mobile-header-height: 6.25rem;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)}:host header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;color:var(--ndw-color-white);display:flex;gap:var(--ndw-spacing-xs);justify-content:center;letter-spacing:.2em;margin-bottom:var(--ndw-spacing-xl);padding-inline:0;text-transform:uppercase}:host header a{align-items:baseline;color:var(--ndw-color-white);cursor:pointer;display:flex;flex-wrap:wrap;gap:var(--ndw-spacing-xs);text-decoration:none}:host header a img{width:1rem}:host header .menu-button{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);border-radius:var(--ndw-border-radius-lg);display:none;text-transform:uppercase}:host header .menu-button ndw-icon{font-size:var(--ndw-font-size-lg)}:host .content{background-color:var(--ndw-color-grey-700);display:grid;grid-template-rows:1fr auto;overflow-y:auto}:host .content main [ndwButton],:host .content footer [ndwButton]{justify-content:center}:host .content main [ndwButton] ndw-badge,:host .content footer [ndwButton] ndw-badge{margin-left:var(--ndw-spacing-2xs);position:absolute;right:.375rem;top:.375rem}:host .content main [ndwButton] .suffix,:host .content footer [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}:host .content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;display:grid;gap:var(--ndw-spacing-xs);min-height:2.625rem;padding-inline:var(--ndw-spacing-md);padding-top:var(--ndw-spacing-md)}:host .content footer .texts p{margin:auto;text-align:center}:host .content footer .version{align-items:center;display:grid;grid-template-columns:1fr}:host .content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);padding-left:var(--main-navigation-collapse-width);text-align:center}:host.expanded header,:host.mobile header{padding-inline:var(--ndw-spacing-md)}:host.expanded header a img,:host.mobile header a img{width:4rem}:host.expanded .content main .menu-items [ndwButton],:host.expanded .content footer .menu-items [ndwButton],:host.mobile .content main .menu-items [ndwButton],:host.mobile .content footer .menu-items [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}:host.expanded .content main .menu-items [ndwButton] ndw-badge,:host.expanded .content footer .menu-items [ndwButton] ndw-badge,:host.mobile .content main .menu-items [ndwButton] ndw-badge,:host.mobile .content footer .menu-items [ndwButton] ndw-badge{position:relative;right:auto;top:auto}:host.expanded{width:12.5rem}:host.expanded header{justify-content:flex-start}:host.expanded .content footer{position:relative}:host.expanded .content footer .version{grid-template-columns:1fr var(--main-navigation-collapse-width)}:host.expanded .content footer .version p{display:block}:host.expanded .content footer .version [ndwButton] ndw-icon{transform:var(--ndw-rotate-half)}:host[brand=nwb] header{font-size:.5rem}:host.expanded[brand=nwb] header{flex-direction:column}:host.expanded[brand=nwb] header img{width:8rem}@media screen and (max-width: 1024px){:host{align-items:flex-end;grid-template-rows:initial;height:var(--main-navigation-mobile-header-height);width:100%}:host header{align-items:flex-end;justify-content:space-between;margin-bottom:var(--ndw-spacing-md)}:host header .menu-button{display:flex}:host .content{display:none;grid-template-rows:auto 1fr;inset:var(--main-navigation-mobile-header-height) 0 0;position:absolute;z-index:9999}:host .content [ndwButton] .suffix{rotate:90deg}:host .content [ndwButton] .suffix.open{rotate:-90deg}:host .content footer{display:grid;grid-template-rows:1fr repeat(2,auto)}:host .content footer .version button{display:none}:host .content.expanded{display:grid}:host.expanded{width:100%}:host.expanded header{justify-content:space-between}}\n"] }]
|
|
1274
1838
|
}], propDecorators: { brandAttribute: [{
|
|
1275
1839
|
type: HostBinding,
|
|
1276
1840
|
args: ['attr.brand']
|
|
1277
1841
|
}], expandedClass: [{
|
|
1278
1842
|
type: HostBinding,
|
|
1279
1843
|
args: ['class.expanded']
|
|
1844
|
+
}], mobileClass: [{
|
|
1845
|
+
type: HostBinding,
|
|
1846
|
+
args: ['class.mobile']
|
|
1280
1847
|
}], onMouseMove: [{
|
|
1281
1848
|
type: HostListener,
|
|
1282
1849
|
args: ['document:mousemove', ['$event']]
|
|
1850
|
+
}], onWindowResize: [{
|
|
1851
|
+
type: HostListener,
|
|
1852
|
+
args: ['window:resize']
|
|
1853
|
+
}] } });
|
|
1854
|
+
|
|
1855
|
+
class ModalContentComponent {
|
|
1856
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: ModalContentComponent, isStandalone: true, selector: "ndw-modal-content", ngImport: i0, template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto}\n"] }); }
|
|
1858
|
+
}
|
|
1859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalContentComponent, decorators: [{
|
|
1860
|
+
type: Component,
|
|
1861
|
+
args: [{ selector: 'ndw-modal-content', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto}\n"] }]
|
|
1862
|
+
}] });
|
|
1863
|
+
|
|
1864
|
+
class ModalFooterComponent {
|
|
1865
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1866
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: ModalFooterComponent, isStandalone: true, selector: "ndw-modal-footer", ngImport: i0, template: "<ng-content />\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs)}\n"] }); }
|
|
1867
|
+
}
|
|
1868
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalFooterComponent, decorators: [{
|
|
1869
|
+
type: Component,
|
|
1870
|
+
args: [{ selector: 'ndw-modal-footer', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs)}\n"] }]
|
|
1871
|
+
}] });
|
|
1872
|
+
|
|
1873
|
+
class ModalHeaderComponent {
|
|
1874
|
+
constructor() {
|
|
1875
|
+
this.modalService = inject(ModalService);
|
|
1876
|
+
}
|
|
1877
|
+
detachModal() {
|
|
1878
|
+
this.modalService.detach();
|
|
1879
|
+
}
|
|
1880
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1881
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", 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:grid;align-items:center;font-size:var(--ndw-font-size-lg);font-weight:700}\n", ":host{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", inputs: ["size"] }] }); }
|
|
1882
|
+
}
|
|
1883
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalHeaderComponent, decorators: [{
|
|
1884
|
+
type: Component,
|
|
1885
|
+
args: [{ selector: 'ndw-modal-header', standalone: true, imports: [ButtonDirective, IconComponent], 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:grid;align-items:center;font-size:var(--ndw-font-size-lg);font-weight:700}\n", ":host{grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\n"] }]
|
|
1886
|
+
}] });
|
|
1887
|
+
|
|
1888
|
+
class ModalService {
|
|
1889
|
+
constructor() {
|
|
1890
|
+
this.destroyRef = inject(DestroyRef);
|
|
1891
|
+
this.overlay = inject(Overlay);
|
|
1892
|
+
this.isOpen$ = new Subject();
|
|
1893
|
+
this.isOpen = false;
|
|
1894
|
+
}
|
|
1895
|
+
detach() {
|
|
1896
|
+
this.overlayRef?.detach();
|
|
1897
|
+
this.isOpen = false;
|
|
1898
|
+
this.isOpen$.next(this.isOpen);
|
|
1899
|
+
}
|
|
1900
|
+
dispose() {
|
|
1901
|
+
this.overlayRef?.dispose();
|
|
1902
|
+
}
|
|
1903
|
+
open(templateRef, viewContainerRef) {
|
|
1904
|
+
if (this.isOpen) {
|
|
1905
|
+
this.detach();
|
|
1906
|
+
}
|
|
1907
|
+
const templatePortal = new TemplatePortal(templateRef, viewContainerRef);
|
|
1908
|
+
this.overlayRef = this.overlay.create({
|
|
1909
|
+
hasBackdrop: true,
|
|
1910
|
+
backdropClass: 'ndw-overlay-backdrop',
|
|
1911
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
1912
|
+
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
|
|
1913
|
+
});
|
|
1914
|
+
this.overlayRef.attach(templatePortal);
|
|
1915
|
+
this.isOpen = true;
|
|
1916
|
+
this.isOpen$.next(this.isOpen);
|
|
1917
|
+
this.overlayRef
|
|
1918
|
+
.backdropClick()
|
|
1919
|
+
.pipe(takeUntilDestroyed(this.destroyRef), take(1))
|
|
1920
|
+
.subscribe(() => {
|
|
1921
|
+
this.detach();
|
|
1922
|
+
});
|
|
1923
|
+
}
|
|
1924
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1925
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalService, providedIn: 'root' }); }
|
|
1926
|
+
}
|
|
1927
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalService, decorators: [{
|
|
1928
|
+
type: Injectable,
|
|
1929
|
+
args: [{
|
|
1930
|
+
providedIn: 'root',
|
|
1931
|
+
}]
|
|
1932
|
+
}] });
|
|
1933
|
+
|
|
1934
|
+
class ModalTriggerDirective {
|
|
1935
|
+
constructor() {
|
|
1936
|
+
this.modalService = inject(ModalService);
|
|
1937
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
1938
|
+
this.ndwModalTrigger = input.required();
|
|
1939
|
+
this.isOpen = model(false);
|
|
1940
|
+
}
|
|
1941
|
+
onClick() {
|
|
1942
|
+
this.open();
|
|
1943
|
+
}
|
|
1944
|
+
ngOnChanges() {
|
|
1945
|
+
if (this.isOpen()) {
|
|
1946
|
+
this.open();
|
|
1947
|
+
}
|
|
1948
|
+
else {
|
|
1949
|
+
this.modalService.detach();
|
|
1950
|
+
}
|
|
1951
|
+
}
|
|
1952
|
+
ngOnInit() {
|
|
1953
|
+
this.modalService.isOpen$.subscribe((isOpen) => {
|
|
1954
|
+
this.isOpen.set(isOpen);
|
|
1955
|
+
});
|
|
1956
|
+
}
|
|
1957
|
+
ngOnDestroy() {
|
|
1958
|
+
this.modalService.dispose();
|
|
1959
|
+
}
|
|
1960
|
+
open() {
|
|
1961
|
+
this.modalService.open(this.ndwModalTrigger(), this.viewContainerRef);
|
|
1962
|
+
}
|
|
1963
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1964
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.3", type: ModalTriggerDirective, isStandalone: true, selector: "[ndwModalTrigger]", inputs: { ndwModalTrigger: { classPropertyName: "ndwModalTrigger", publicName: "ndwModalTrigger", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
1965
|
+
}
|
|
1966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalTriggerDirective, decorators: [{
|
|
1967
|
+
type: Directive,
|
|
1968
|
+
args: [{
|
|
1969
|
+
selector: '[ndwModalTrigger]',
|
|
1970
|
+
standalone: true,
|
|
1971
|
+
}]
|
|
1972
|
+
}], propDecorators: { onClick: [{
|
|
1973
|
+
type: HostListener,
|
|
1974
|
+
args: ['click', ['$event']]
|
|
1283
1975
|
}] } });
|
|
1284
1976
|
|
|
1977
|
+
class ModalComponent extends CardComponent {
|
|
1978
|
+
constructor() {
|
|
1979
|
+
super(...arguments);
|
|
1980
|
+
this.size = input('sm');
|
|
1981
|
+
this.roleAttr = 'dialog';
|
|
1982
|
+
}
|
|
1983
|
+
get isSmall() {
|
|
1984
|
+
return this.size() === 'sm';
|
|
1985
|
+
}
|
|
1986
|
+
get isMedium() {
|
|
1987
|
+
return this.size() === 'md';
|
|
1988
|
+
}
|
|
1989
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1990
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: ModalComponent, isStandalone: true, selector: "ndw-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.modal-size-sm": "this.isSmall", "class.modal-size-md": "this.isMedium", "attr.role": "this.roleAttr" } }, usesInheritance: true, ngImport: i0, template: "<ng-content />\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);display:grid;gap:var(--ndw-spacing-md);padding:var(--ndw-spacing-lg)}\n", ":host{width:var(--ndw-modal-width-sm)}:host.modal-size-md{width:var(--ndw-modal-width-md)}\n"] }); }
|
|
1991
|
+
}
|
|
1992
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1993
|
+
type: Component,
|
|
1994
|
+
args: [{ selector: 'ndw-modal', standalone: true, imports: [], template: "<ng-content />\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);display:grid;gap:var(--ndw-spacing-md);padding:var(--ndw-spacing-lg)}\n", ":host{width:var(--ndw-modal-width-sm)}:host.modal-size-md{width:var(--ndw-modal-width-md)}\n"] }]
|
|
1995
|
+
}], propDecorators: { isSmall: [{
|
|
1996
|
+
type: HostBinding,
|
|
1997
|
+
args: ['class.modal-size-sm']
|
|
1998
|
+
}], isMedium: [{
|
|
1999
|
+
type: HostBinding,
|
|
2000
|
+
args: ['class.modal-size-md']
|
|
2001
|
+
}], roleAttr: [{
|
|
2002
|
+
type: HostBinding,
|
|
2003
|
+
args: ['attr.role']
|
|
2004
|
+
}] } });
|
|
2005
|
+
|
|
2006
|
+
const MODAL_COMPONENTS = [
|
|
2007
|
+
ModalComponent,
|
|
2008
|
+
ModalHeaderComponent,
|
|
2009
|
+
ModalContentComponent,
|
|
2010
|
+
ModalFooterComponent,
|
|
2011
|
+
ModalTriggerDirective,
|
|
2012
|
+
];
|
|
2013
|
+
|
|
1285
2014
|
class MultiSelectComponent {
|
|
1286
2015
|
constructor() {
|
|
1287
|
-
this.disabled = input(false);
|
|
1288
2016
|
this.dropdownTrigger = viewChild.required(PopoverTriggerDirective);
|
|
1289
2017
|
this.buttonText = input.required();
|
|
2018
|
+
this.searchLabel = input.required();
|
|
1290
2019
|
this.prefixIcon = input('');
|
|
1291
|
-
this.chevron = input(false);
|
|
1292
|
-
this.searchInputValue = model('');
|
|
1293
2020
|
this.searchPlaceholder = input('');
|
|
1294
2021
|
this.noResultText = input('');
|
|
2022
|
+
this.chevron = input(false);
|
|
2023
|
+
this.disabled = input(false);
|
|
1295
2024
|
this.selectAllText = input({ deselect: '', select: '' });
|
|
1296
2025
|
this.lastCheckedElementId = model();
|
|
2026
|
+
this.dataSource = model([]);
|
|
2027
|
+
this.searchInputValue = model('');
|
|
1297
2028
|
this.selectAmount = computed(() => this.dataSource().filter((checkbox) => checkbox.value).length);
|
|
1298
2029
|
this.noSearchResults = computed(() => this.dataSource().filter((checkbox) => checkbox.label.toLowerCase().includes(this.searchInputValue().toLowerCase())).length === 0);
|
|
1299
|
-
this.dataSource = model([]);
|
|
1300
2030
|
}
|
|
1301
2031
|
filterSearch(value) {
|
|
1302
2032
|
return value.toLowerCase().includes(this.searchInputValue().toLowerCase());
|
|
@@ -1335,7 +2065,7 @@ class MultiSelectComponent {
|
|
|
1335
2065
|
}
|
|
1336
2066
|
}
|
|
1337
2067
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1338
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: {
|
|
2068
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, lastCheckedElementId: { classPropertyName: "lastCheckedElementId", publicName: "lastCheckedElementId", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lastCheckedElementId: "lastCheckedElementIdChange", dataSource: "dataSourceChange", searchInputValue: "searchInputValueChange" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ndw-dropdown\n prefixIcon=\"filter_alt\"\n [selectAmount]=\"selectAmount()\"\n (removablePillClicked)=\"toggleSelectAll(false)\"\n (isOpenChange)=\"isOpenChanged($event)\"\n [buttonText]=\"buttonText()\"\n [disabled]=\"disabled()\"\n [chevron]=\"chevron()\"\n [prefixIcon]=\"prefixIcon()\"\n>\n <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n <input\n ndwInput\n type=\"search\"\n [value]=\"searchInputValue()\"\n (input)=\"searchInputChanged($event)\"\n [placeholder]=\"searchPlaceholder()\"\n />\n </ndw-form-field>\n @if (noSearchResults()) {\n <div class=\"no-search-results\">\n <ndw-icon>sentiment_dissatisfied</ndw-icon>\n {{ noResultText() }}\n </div>\n } @else {\n <ndw-checkbox-group class=\"multi-select-container\">\n @for (checkbox of dataSource(); track checkbox.id) {\n @if (filterSearch(checkbox.label)) {\n <ndw-checkbox\n [ngClass]=\"{ 'last-checked': lastCheckedElementId() === checkbox.id }\"\n [checked]=\"checkbox.value\"\n (checkedChange)=\"checkboxChanged(checkbox.id)\"\n >\n {{ checkbox.label }}\n </ndw-checkbox>\n }\n }\n </ndw-checkbox-group>\n }\n <div class=\"ndw-dialog-footer\">\n @if (selectAmount() === dataSource().length) {\n <button ndwLink (click)=\"toggleSelectAll(false)\">\n {{ selectAllText().deselect }}\n </button>\n } @else {\n <button ndwLink (click)=\"toggleSelectAll(true)\">\n {{ selectAllText().select }}\n </button>\n }\n <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n Geselecteerd: <strong>{{ selectAmount() }}</strong>\n </div>\n </div>\n</ndw-dropdown>\n", styles: [".no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-checkbox.last-checked{width:100%;height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "ndw-form-field", inputs: ["label", "clearSearchAriaLabel", "suffixButtonAriaLabel", "hideLabel", "disabled", "error", "success", "info", "tooltip"] }, { kind: "component", type: CheckboxComponent, selector: "ndw-checkbox", inputs: ["checked", "switch", "disabled", "error", "success", "indeterminate", "required"], outputs: ["checkedChange"] }, { kind: "component", type: CheckboxGroupComponent, selector: "ndw-checkbox-group" }, { kind: "component", type: DropdownComponent, selector: "ndw-dropdown", inputs: ["disabled", "chevron", "buttonText", "prefixIcon", "selectAmount"], outputs: ["removablePillClicked", "isOpenChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1339
2069
|
}
|
|
1340
2070
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
1341
2071
|
type: Component,
|
|
@@ -1347,25 +2077,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1347
2077
|
DropdownComponent,
|
|
1348
2078
|
CommonModule,
|
|
1349
2079
|
IconComponent,
|
|
1350
|
-
|
|
2080
|
+
InputDirective,
|
|
2081
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ndw-dropdown\n prefixIcon=\"filter_alt\"\n [selectAmount]=\"selectAmount()\"\n (removablePillClicked)=\"toggleSelectAll(false)\"\n (isOpenChange)=\"isOpenChanged($event)\"\n [buttonText]=\"buttonText()\"\n [disabled]=\"disabled()\"\n [chevron]=\"chevron()\"\n [prefixIcon]=\"prefixIcon()\"\n>\n <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n <input\n ndwInput\n type=\"search\"\n [value]=\"searchInputValue()\"\n (input)=\"searchInputChanged($event)\"\n [placeholder]=\"searchPlaceholder()\"\n />\n </ndw-form-field>\n @if (noSearchResults()) {\n <div class=\"no-search-results\">\n <ndw-icon>sentiment_dissatisfied</ndw-icon>\n {{ noResultText() }}\n </div>\n } @else {\n <ndw-checkbox-group class=\"multi-select-container\">\n @for (checkbox of dataSource(); track checkbox.id) {\n @if (filterSearch(checkbox.label)) {\n <ndw-checkbox\n [ngClass]=\"{ 'last-checked': lastCheckedElementId() === checkbox.id }\"\n [checked]=\"checkbox.value\"\n (checkedChange)=\"checkboxChanged(checkbox.id)\"\n >\n {{ checkbox.label }}\n </ndw-checkbox>\n }\n }\n </ndw-checkbox-group>\n }\n <div class=\"ndw-dialog-footer\">\n @if (selectAmount() === dataSource().length) {\n <button ndwLink (click)=\"toggleSelectAll(false)\">\n {{ selectAllText().deselect }}\n </button>\n } @else {\n <button ndwLink (click)=\"toggleSelectAll(true)\">\n {{ selectAllText().select }}\n </button>\n }\n <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n Geselecteerd: <strong>{{ selectAmount() }}</strong>\n </div>\n </div>\n</ndw-dropdown>\n", styles: [".no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-checkbox.last-checked{width:100%;height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"] }]
|
|
1351
2082
|
}] });
|
|
1352
2083
|
|
|
1353
2084
|
class PillComponent {
|
|
1354
2085
|
constructor() {
|
|
2086
|
+
/**
|
|
2087
|
+
* The color of the pill.
|
|
2088
|
+
*/
|
|
1355
2089
|
this.color = input("green" /* PillColor.Green */);
|
|
2090
|
+
/**
|
|
2091
|
+
* The content of the pill.
|
|
2092
|
+
*/
|
|
2093
|
+
this.content = viewChild('content');
|
|
1356
2094
|
}
|
|
1357
2095
|
get hostClass() {
|
|
1358
2096
|
return ['ndw-paragraph-md', this.color()];
|
|
1359
2097
|
}
|
|
2098
|
+
get title() {
|
|
2099
|
+
return this.content?.toString();
|
|
2100
|
+
}
|
|
1360
2101
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1361
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
2102
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: PillComponent, isStandalone: true, selector: "ndw-pill", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "title": "this.title" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container #content>\n <ng-content />\n</ng-container>\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;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--ndw-color-data-a-500);background-color:var(--ndw-color-data-a-100)}:host.gray{color:var(--ndw-color-data-b-500);background-color:var(--ndw-color-data-b-100)}:host.blue{color:var(--ndw-color-data-c-500);background-color:var(--ndw-color-data-c-100)}:host.purple{color:var(--ndw-color-data-d-500);background-color:var(--ndw-color-data-d-100)}:host.yellow{color:var(--ndw-color-data-e-500);background-color:var(--ndw-color-data-e-100)}:host.red{color:var(--ndw-color-data-f-500);background-color:var(--ndw-color-data-f-100)}\n"] }); }
|
|
1362
2103
|
}
|
|
1363
2104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: PillComponent, decorators: [{
|
|
1364
2105
|
type: Component,
|
|
1365
|
-
args: [{ selector: 'ndw-pill', standalone: true, template: "<ng-content />\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;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--ndw-color-data-a-500);background-color:var(--ndw-color-data-a-100)}:host.gray{color:var(--ndw-color-data-b-500);background-color:var(--ndw-color-data-b-100)}:host.blue{color:var(--ndw-color-data-c-500);background-color:var(--ndw-color-data-c-100)}:host.purple{color:var(--ndw-color-data-d-500);background-color:var(--ndw-color-data-d-100)}:host.yellow{color:var(--ndw-color-data-e-500);background-color:var(--ndw-color-data-e-100)}:host.red{color:var(--ndw-color-data-f-500);background-color:var(--ndw-color-data-f-100)}\n"] }]
|
|
2106
|
+
args: [{ selector: 'ndw-pill', standalone: true, template: "<ng-container #content>\n <ng-content />\n</ng-container>\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;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--ndw-color-data-a-500);background-color:var(--ndw-color-data-a-100)}:host.gray{color:var(--ndw-color-data-b-500);background-color:var(--ndw-color-data-b-100)}:host.blue{color:var(--ndw-color-data-c-500);background-color:var(--ndw-color-data-c-100)}:host.purple{color:var(--ndw-color-data-d-500);background-color:var(--ndw-color-data-d-100)}:host.yellow{color:var(--ndw-color-data-e-500);background-color:var(--ndw-color-data-e-100)}:host.red{color:var(--ndw-color-data-f-500);background-color:var(--ndw-color-data-f-100)}\n"] }]
|
|
1366
2107
|
}], propDecorators: { hostClass: [{
|
|
1367
2108
|
type: HostBinding,
|
|
1368
2109
|
args: ['class']
|
|
2110
|
+
}], title: [{
|
|
2111
|
+
type: HostBinding,
|
|
2112
|
+
args: ['title']
|
|
1369
2113
|
}] } });
|
|
1370
2114
|
|
|
1371
2115
|
const breadcrumbRouteDataKey = 'breadcrumb';
|
|
@@ -1476,6 +2220,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1476
2220
|
args: ['attr.role']
|
|
1477
2221
|
}] } });
|
|
1478
2222
|
|
|
2223
|
+
class ToastComponent {
|
|
2224
|
+
constructor() {
|
|
2225
|
+
this.message = model('');
|
|
2226
|
+
this.close = output();
|
|
2227
|
+
this.interval = null;
|
|
2228
|
+
this.renderer = inject(Renderer2);
|
|
2229
|
+
this.toastContainer = viewChild('toastContainer');
|
|
2230
|
+
}
|
|
2231
|
+
ngOnInit() {
|
|
2232
|
+
this.message.set(this.truncateText(this.message()));
|
|
2233
|
+
this.open();
|
|
2234
|
+
}
|
|
2235
|
+
ngOnDestroy() {
|
|
2236
|
+
this.clearInterval();
|
|
2237
|
+
this.close.emit();
|
|
2238
|
+
}
|
|
2239
|
+
open() {
|
|
2240
|
+
const intervalTime = 10;
|
|
2241
|
+
const totalTicks = 10000 / intervalTime;
|
|
2242
|
+
let currentTick = 0;
|
|
2243
|
+
this.interval = setInterval(() => {
|
|
2244
|
+
currentTick++;
|
|
2245
|
+
const percentage = (currentTick / totalTicks) * 100;
|
|
2246
|
+
this.updateGradient(percentage);
|
|
2247
|
+
if (currentTick >= totalTicks) {
|
|
2248
|
+
this.startFadeOut();
|
|
2249
|
+
}
|
|
2250
|
+
}, intervalTime);
|
|
2251
|
+
}
|
|
2252
|
+
updateGradient(percentage) {
|
|
2253
|
+
if (!this.checkForExistingToast()) {
|
|
2254
|
+
return;
|
|
2255
|
+
}
|
|
2256
|
+
const toastElement = this.toastContainer()?.nativeElement;
|
|
2257
|
+
toastElement.style.background =
|
|
2258
|
+
'linear-gradient(to left, var(--ndw-color-grey-600) ' +
|
|
2259
|
+
`${percentage}%, var(--ndw-color-grey-700) ${percentage}%)`;
|
|
2260
|
+
}
|
|
2261
|
+
startFadeOut() {
|
|
2262
|
+
if (!this.checkForExistingToast()) {
|
|
2263
|
+
return;
|
|
2264
|
+
}
|
|
2265
|
+
const toastElement = this.toastContainer()?.nativeElement;
|
|
2266
|
+
this.renderer.addClass(toastElement, 'fade-out');
|
|
2267
|
+
setTimeout(() => {
|
|
2268
|
+
this.clearInterval();
|
|
2269
|
+
}, 200);
|
|
2270
|
+
}
|
|
2271
|
+
checkForExistingToast() {
|
|
2272
|
+
if (!this.toastContainer()?.nativeElement) {
|
|
2273
|
+
this.clearInterval();
|
|
2274
|
+
return false;
|
|
2275
|
+
}
|
|
2276
|
+
return true;
|
|
2277
|
+
}
|
|
2278
|
+
clearInterval() {
|
|
2279
|
+
if (this.interval !== null) {
|
|
2280
|
+
clearInterval(this.interval);
|
|
2281
|
+
}
|
|
2282
|
+
}
|
|
2283
|
+
truncateText(text) {
|
|
2284
|
+
if (text.length > 75) {
|
|
2285
|
+
return text.substring(0, 75) + '...';
|
|
2286
|
+
}
|
|
2287
|
+
return text;
|
|
2288
|
+
}
|
|
2289
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2290
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: ToastComponent, isStandalone: true, selector: "ndw-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { message: "messageChange", close: "close" }, viewQueries: [{ propertyName: "toastContainer", first: true, predicate: ["toastContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #toastContainer>\n <p>\n {{ message() }}\n </p>\n <button ndwButton tertiary alternative extra-small (click)=\"startFadeOut()\">\n <ndw-icon>close</ndw-icon>\n </button>\n</div>\n", styles: ["div{align-items:center;background: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:1fr auto;height:var(--ndw-spacing-lg);opacity:1;padding-left:var(--ndw-spacing-xs);transition:opacity .2s ease-in;width:fit-content}div.fade-out{opacity:0}div p{display:inline-block;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}div [ndwButton] ndw-icon{color:var(--ndw-color-white)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon", inputs: ["size"] }] }); }
|
|
2291
|
+
}
|
|
2292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ToastComponent, decorators: [{
|
|
2293
|
+
type: Component,
|
|
2294
|
+
args: [{ selector: 'ndw-toast', standalone: true, imports: [IconComponent], template: "<div #toastContainer>\n <p>\n {{ message() }}\n </p>\n <button ndwButton tertiary alternative extra-small (click)=\"startFadeOut()\">\n <ndw-icon>close</ndw-icon>\n </button>\n</div>\n", styles: ["div{align-items:center;background: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:1fr auto;height:var(--ndw-spacing-lg);opacity:1;padding-left:var(--ndw-spacing-xs);transition:opacity .2s ease-in;width:fit-content}div.fade-out{opacity:0}div p{display:inline-block;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}div [ndwButton] ndw-icon{color:var(--ndw-color-white)}\n"] }]
|
|
2295
|
+
}] });
|
|
2296
|
+
|
|
2297
|
+
class ToastService {
|
|
2298
|
+
constructor() {
|
|
2299
|
+
this.overlay = inject(Overlay);
|
|
2300
|
+
this.isOpen = false;
|
|
2301
|
+
}
|
|
2302
|
+
detach() {
|
|
2303
|
+
this.overlayRef?.detach();
|
|
2304
|
+
this.isOpen = false;
|
|
2305
|
+
}
|
|
2306
|
+
dispose() {
|
|
2307
|
+
this.overlayRef?.dispose();
|
|
2308
|
+
}
|
|
2309
|
+
open(message) {
|
|
2310
|
+
if (this.isOpen) {
|
|
2311
|
+
this.detach();
|
|
2312
|
+
}
|
|
2313
|
+
this.overlayRef = this.overlay.create({
|
|
2314
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
2315
|
+
positionStrategy: this.overlay.position().global().centerHorizontally().top('1.5rem'),
|
|
2316
|
+
});
|
|
2317
|
+
const toastPortal = new ComponentPortal(ToastComponent);
|
|
2318
|
+
const toastComponentRef = this.overlayRef.attach(toastPortal);
|
|
2319
|
+
toastComponentRef.instance.message.set(message);
|
|
2320
|
+
toastComponentRef.instance.close.subscribe(() => {
|
|
2321
|
+
this.detach();
|
|
2322
|
+
});
|
|
2323
|
+
this.isOpen = true;
|
|
2324
|
+
}
|
|
2325
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2326
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ToastService, providedIn: 'root' }); }
|
|
2327
|
+
}
|
|
2328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ToastService, decorators: [{
|
|
2329
|
+
type: Injectable,
|
|
2330
|
+
args: [{
|
|
2331
|
+
providedIn: 'root',
|
|
2332
|
+
}]
|
|
2333
|
+
}] });
|
|
2334
|
+
|
|
1479
2335
|
/*
|
|
1480
2336
|
* Public API Surface of ndw
|
|
1481
2337
|
*/
|
|
@@ -1484,5 +2340,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
|
|
|
1484
2340
|
* Generated bundle index. Do not edit.
|
|
1485
2341
|
*/
|
|
1486
2342
|
|
|
1487
|
-
export { AccordionComponent, AccordionService, AlertComponent, AlertType, BadgeComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DropdownComponent, ErrorComponent, FormFieldComponent, FormFieldElement, IconComponent, InfoComponent, InputDirective, InputType, MainNavigationComponent, ModalService, ModalTriggerDirective, MultiSelectComponent, NdwBrand, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RemovablePillComponent, RouterBreadcrumbsComponent, TabComponent, TabGroupComponent, TooltipComponent, TooltipDirective, breadcrumbRouteDataKey };
|
|
2343
|
+
export { AccordionComponent, AccordionService, ActionIconComponent, AlertComponent, AlertType, AutoGrowDirective, BadgeComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DropdownComponent, ErrorComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, IconComponent, InfoComponent, InputDirective, InputType, MODAL_COMPONENTS, MainNavigationComponent, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, ModalTriggerDirective, MonthInputComponent, MultiSelectComponent, NdwBrand, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RemovablePillComponent, RouterBreadcrumbsComponent, TabComponent, TabGroupComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, breadcrumbRouteDataKey };
|
|
1488
2344
|
//# sourceMappingURL=ndwnu-design-system.mjs.map
|