@ndwnu/design-system 11.1.1 → 12.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/map-button-icons.svg +5 -1
- package/fesm2022/ndwnu-design-system.mjs +605 -670
- package/fesm2022/ndwnu-design-system.mjs.map +1 -1
- package/index.d.ts +1288 -2
- package/package.json +9 -11
- package/styles/components/_divider.scss +1 -1
- package/styles/components/divider.stories.ts +1 -1
- package/lib/components/accordion/accordion.component.d.ts +0 -12
- package/lib/components/accordion/accordion.service.d.ts +0 -8
- package/lib/components/accordion/index.d.ts +0 -2
- package/lib/components/alert/alert.component.d.ts +0 -26
- package/lib/components/alert/alert.model.d.ts +0 -1
- package/lib/components/alert/index.d.ts +0 -2
- package/lib/components/avatar/avatar.component.d.ts +0 -9
- package/lib/components/avatar/avatar.model.d.ts +0 -2
- package/lib/components/avatar/index.d.ts +0 -2
- package/lib/components/badge/badge.component.d.ts +0 -18
- package/lib/components/badge/index.d.ts +0 -1
- package/lib/components/banner/banner.component.d.ts +0 -38
- package/lib/components/banner/banner.model.d.ts +0 -1
- package/lib/components/banner/index.d.ts +0 -2
- package/lib/components/breadcrumb/breadcrumb.component.d.ts +0 -6
- package/lib/components/breadcrumb/index.d.ts +0 -1
- package/lib/components/breadcrumb-group/breadcrumb-group.component.d.ts +0 -8
- package/lib/components/breadcrumb-group/index.d.ts +0 -1
- package/lib/components/button/button.directive.d.ts +0 -9
- package/lib/components/button/index.d.ts +0 -1
- package/lib/components/card/card-content/card-content.component.d.ts +0 -5
- package/lib/components/card/card-content/index.d.ts +0 -1
- package/lib/components/card/card-footer/card-footer.component.d.ts +0 -5
- package/lib/components/card/card-footer/index.d.ts +0 -1
- package/lib/components/card/card-header/card-header.component.d.ts +0 -11
- package/lib/components/card/card-header/index.d.ts +0 -1
- package/lib/components/card/card.animation.d.ts +0 -1
- package/lib/components/card/card.component.d.ts +0 -19
- package/lib/components/card/index.d.ts +0 -6
- package/lib/components/collapsible/collapsible.animation.d.ts +0 -1
- package/lib/components/collapsible/collapsible.component.d.ts +0 -17
- package/lib/components/collapsible/index.d.ts +0 -1
- package/lib/components/dashboard-card/dashboard-card.component.d.ts +0 -22
- package/lib/components/dashboard-card/index.d.ts +0 -1
- package/lib/components/dropdown/dropdown.component.d.ts +0 -22
- package/lib/components/dropdown/index.d.ts +0 -1
- package/lib/components/edit-bar/edit-bar-actions/edit-bar-actions.component.d.ts +0 -5
- package/lib/components/edit-bar/edit-bar-message/edit-bar-message.component.d.ts +0 -5
- package/lib/components/edit-bar/edit-bar.component.d.ts +0 -15
- package/lib/components/edit-bar/edit-bar.model.d.ts +0 -2
- package/lib/components/edit-bar/index.d.ts +0 -4
- package/lib/components/favorite/favorite.component.d.ts +0 -7
- package/lib/components/favorite/index.d.ts +0 -1
- package/lib/components/form-field/autosuggest/autosuggest-add-option/autosuggest-add-option.component.d.ts +0 -6
- package/lib/components/form-field/autosuggest/autosuggest-add-option/index.d.ts +0 -1
- package/lib/components/form-field/autosuggest/autosuggest-option/autosuggest-option.component.d.ts +0 -8
- package/lib/components/form-field/autosuggest/autosuggest-option/index.d.ts +0 -1
- package/lib/components/form-field/autosuggest/autosuggest-panel/autosuggest-panel.component.d.ts +0 -6
- package/lib/components/form-field/autosuggest/autosuggest-panel/index.d.ts +0 -1
- package/lib/components/form-field/autosuggest/autosuggest.directive.d.ts +0 -9
- package/lib/components/form-field/autosuggest/index.d.ts +0 -5
- package/lib/components/form-field/checkbox/checkbox.component.d.ts +0 -21
- package/lib/components/form-field/checkbox/index.d.ts +0 -1
- package/lib/components/form-field/checkbox-group/checkbox-group.component.d.ts +0 -7
- package/lib/components/form-field/checkbox-group/index.d.ts +0 -1
- package/lib/components/form-field/clear-search-button/clear-search-button.component.d.ts +0 -16
- package/lib/components/form-field/clear-search-button/index.d.ts +0 -1
- package/lib/components/form-field/datepicker/datepicker.component.d.ts +0 -7
- package/lib/components/form-field/datepicker/index.d.ts +0 -1
- package/lib/components/form-field/error/error.component.d.ts +0 -5
- package/lib/components/form-field/error/index.d.ts +0 -1
- package/lib/components/form-field/file-upload/file-upload-text.interface.d.ts +0 -4
- package/lib/components/form-field/file-upload/file-upload.component.d.ts +0 -47
- package/lib/components/form-field/file-upload/index.d.ts +0 -2
- package/lib/components/form-field/form-field.component.d.ts +0 -32
- package/lib/components/form-field/form-field.constant.d.ts +0 -1
- package/lib/components/form-field/form-field.model.d.ts +0 -7
- package/lib/components/form-field/index.d.ts +0 -17
- package/lib/components/form-field/info/index.d.ts +0 -1
- package/lib/components/form-field/info/info.component.d.ts +0 -5
- package/lib/components/form-field/input/index.d.ts +0 -1
- package/lib/components/form-field/input/input.directive.d.ts +0 -22
- package/lib/components/form-field/input-button/index.d.ts +0 -1
- package/lib/components/form-field/input-button/input-button.component.d.ts +0 -12
- package/lib/components/form-field/input-icon/index.d.ts +0 -1
- package/lib/components/form-field/input-icon/input-icon.component.d.ts +0 -5
- package/lib/components/form-field/month-input/date-validators.d.ts +0 -3
- package/lib/components/form-field/month-input/index.d.ts +0 -1
- package/lib/components/form-field/month-input/month-input-utils.d.ts +0 -6
- package/lib/components/form-field/month-input/month-input.component.d.ts +0 -47
- package/lib/components/form-field/option-group/index.d.ts +0 -3
- package/lib/components/form-field/option-group/option-group.component.d.ts +0 -29
- package/lib/components/form-field/option-group/option-group.model.d.ts +0 -1
- package/lib/components/form-field/option-group/option.component.d.ts +0 -10
- package/lib/components/form-field/picker-button/index.d.ts +0 -1
- package/lib/components/form-field/picker-button/picker-button.component.d.ts +0 -15
- package/lib/components/form-field/radio-button/index.d.ts +0 -1
- package/lib/components/form-field/radio-button/radio-button.component.d.ts +0 -20
- package/lib/components/form-field/radio-group/index.d.ts +0 -1
- package/lib/components/form-field/radio-group/radio-group.component.d.ts +0 -16
- package/lib/components/form-field/success/index.d.ts +0 -1
- package/lib/components/form-field/success/success.component.d.ts +0 -5
- package/lib/components/form-field/textarea/auto-grow.directive.d.ts +0 -22
- package/lib/components/form-field/textarea/index.d.ts +0 -2
- package/lib/components/form-field/textarea/max-char.directive.d.ts +0 -27
- package/lib/components/hoverable-list-item/hoverable-list-item.component.d.ts +0 -18
- package/lib/components/hoverable-list-item/hoverable-list-item.model.d.ts +0 -9
- package/lib/components/hoverable-list-item/index.d.ts +0 -2
- package/lib/components/icon/action-icon/action-icon.component.d.ts +0 -33
- package/lib/components/icon/action-icon/index.d.ts +0 -1
- package/lib/components/icon/icon.component.d.ts +0 -6
- package/lib/components/icon/index.d.ts +0 -2
- package/lib/components/index.d.ts +0 -42
- package/lib/components/key-value-list/index.d.ts +0 -1
- package/lib/components/key-value-list/key-value-list.component.d.ts +0 -6
- package/lib/components/layout/index.d.ts +0 -1
- package/lib/components/layout/layout.component.d.ts +0 -14
- package/lib/components/layout-banners/index.d.ts +0 -1
- package/lib/components/layout-banners/layout-banners.component.d.ts +0 -5
- package/lib/components/list/index.d.ts +0 -1
- package/lib/components/list/list.component.d.ts +0 -11
- package/lib/components/list-item/index.d.ts +0 -1
- package/lib/components/list-item/list-item.component.d.ts +0 -33
- package/lib/components/loader/index.d.ts +0 -1
- package/lib/components/loader/loader.component.d.ts +0 -5
- package/lib/components/main-navigation/index.d.ts +0 -2
- package/lib/components/main-navigation/main-navigation-header/index.d.ts +0 -1
- package/lib/components/main-navigation/main-navigation-header/main-navigation-header.component.d.ts +0 -15
- package/lib/components/main-navigation/main-navigation-menu/index.d.ts +0 -1
- package/lib/components/main-navigation/main-navigation-menu/main-navigation-menu.component.d.ts +0 -16
- package/lib/components/main-navigation/main-navigation.component.d.ts +0 -25
- package/lib/components/main-navigation/main-navigation.model.d.ts +0 -15
- package/lib/components/map-button/index.d.ts +0 -2
- package/lib/components/map-button/map-button.component.d.ts +0 -14
- package/lib/components/map-button/map-button.model.d.ts +0 -4
- package/lib/components/map-display/backgrounds.d.ts +0 -21
- package/lib/components/map-display/index.d.ts +0 -3
- package/lib/components/map-display/layers.d.ts +0 -10
- package/lib/components/map-display/map-display-option/index.d.ts +0 -2
- package/lib/components/map-display/map-display-option/map-display-option.component.d.ts +0 -11
- package/lib/components/map-display/map-display-option/map-display-option.model.d.ts +0 -14
- package/lib/components/map-display/map-display.component.d.ts +0 -30
- package/lib/components/map-legend/index.d.ts +0 -2
- package/lib/components/map-legend/map-legend-group/map-legend-group.component.d.ts +0 -9
- package/lib/components/map-legend/map-legend-option/map-legend-option.component.d.ts +0 -7
- package/lib/components/map-legend/map-legend.component.d.ts +0 -17
- package/lib/components/map-legend/map-legend.model.d.ts +0 -33
- package/lib/components/modal/index.d.ts +0 -7
- package/lib/components/modal/modal-content/index.d.ts +0 -1
- package/lib/components/modal/modal-content/modal-content.component.d.ts +0 -5
- package/lib/components/modal/modal-footer/index.d.ts +0 -1
- package/lib/components/modal/modal-footer/modal-footer.component.d.ts +0 -5
- package/lib/components/modal/modal-header/index.d.ts +0 -1
- package/lib/components/modal/modal-header/modal-header.component.d.ts +0 -7
- package/lib/components/modal/modal-ref.d.ts +0 -3
- package/lib/components/modal/modal.component.d.ts +0 -7
- package/lib/components/modal/modal.service.d.ts +0 -17
- package/lib/components/multi-select/checkbox-data.interface.d.ts +0 -8
- package/lib/components/multi-select/index.d.ts +0 -3
- package/lib/components/multi-select/multi-select.component.d.ts +0 -29
- package/lib/components/multi-select/select-all-text.interface.d.ts +0 -4
- package/lib/components/pill/index.d.ts +0 -1
- package/lib/components/pill/pill.component.d.ts +0 -6
- package/lib/components/popover/index.d.ts +0 -1
- package/lib/components/popover/popover-trigger.directive.d.ts +0 -29
- package/lib/components/router-breadcrumbs/index.d.ts +0 -1
- package/lib/components/router-breadcrumbs/router-breadcrumbs.component.d.ts +0 -6
- package/lib/components/splitter/index.d.ts +0 -1
- package/lib/components/splitter/splitter.component.d.ts +0 -69
- package/lib/components/summary-card/index.d.ts +0 -9
- package/lib/components/summary-card/summary-card-action/summary-card-action.component.d.ts +0 -11
- package/lib/components/summary-card/summary-card-actions/summary-card-actions.component.d.ts +0 -9
- package/lib/components/summary-card/summary-card-content/summary-card-content.component.d.ts +0 -5
- package/lib/components/summary-card/summary-card-header/summary-card-header.component.d.ts +0 -5
- package/lib/components/summary-card/summary-card-subtitle/summary-card-subtitle.component.d.ts +0 -5
- package/lib/components/summary-card/summary-card-tag/summary-card-tag.component.d.ts +0 -5
- package/lib/components/summary-card/summary-card-tags/summary-card-tags.component.d.ts +0 -5
- package/lib/components/summary-card/summary-card.component.d.ts +0 -5
- package/lib/components/summary-card/summary-card.model.d.ts +0 -1
- package/lib/components/switcher/index.d.ts +0 -2
- package/lib/components/switcher/model.d.ts +0 -6
- package/lib/components/switcher/switcher.component.d.ts +0 -26
- package/lib/components/tab/index.d.ts +0 -1
- package/lib/components/tab/tab.component.d.ts +0 -18
- package/lib/components/tab-group/index.d.ts +0 -1
- package/lib/components/tab-group/tab-group.component.d.ts +0 -16
- package/lib/components/table/ag-grid-theme.d.ts +0 -2
- package/lib/components/table/index.d.ts +0 -1
- package/lib/components/tag/index.d.ts +0 -1
- package/lib/components/tag/tag.component.d.ts +0 -18
- package/lib/components/toast/index.d.ts +0 -2
- package/lib/components/toast/toast-list/toast-list.component.d.ts +0 -17
- package/lib/components/toast/toast.component.d.ts +0 -20
- package/lib/components/toast/toast.service.d.ts +0 -32
- package/lib/components/tooltip/index.d.ts +0 -2
- package/lib/components/tooltip/tooltip.component.d.ts +0 -6
- package/lib/components/tooltip/tooltip.directive.d.ts +0 -19
- package/lib/models/aria.model.d.ts +0 -1
- package/lib/models/index.d.ts +0 -2
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input,
|
|
2
|
+
import { input, ChangeDetectionStrategy, Component, forwardRef, Directive, model, computed, viewChild, inject, ElementRef, output, signal, DestroyRef, EventEmitter, ViewContainerRef, Output, contentChildren, PLATFORM_ID, contentChild, effect, Renderer2, afterNextRender, Injectable, InjectionToken, ChangeDetectorRef, DOCUMENT, linkedSignal, untracked, TemplateRef, viewChildren } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
4
|
-
import { NgTemplateOutlet, NgClass, isPlatformBrowser,
|
|
4
|
+
import { NgTemplateOutlet, NgClass, isPlatformBrowser, AsyncPipe, NgStyle } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/forms';
|
|
6
6
|
import { NG_VALUE_ACCESSOR, NgControl, Validators, FormsModule } from '@angular/forms';
|
|
7
|
-
import { CoreAutosuggestDirective, CoreIconComponent, CoreAutosuggestOptionComponent, MatchBoldPipe, CoreAutosuggestAddOptionComponent, CoreAutosuggestPanelComponent, setRadioItemsName, checkRadioItems, CorePillComponent, CoreBreadcrumbComponent, CoreBreadcrumbGroupComponent, CoreKeyValueListComponent, CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
|
|
7
|
+
import { CoreAutosuggestDirective, CoreIconComponent, CoreAutosuggestOptionComponent, MatchBoldPipe, CoreAutosuggestAddOptionComponent, CoreAutosuggestPanelComponent, CoreCheckboxComponent, CoreCheckboxGroupComponent, setRadioItemsName, checkRadioItems, CorePillComponent, CoreBreadcrumbComponent, CoreBreadcrumbGroupComponent, CoreFavoriteComponent, CoreKeyValueListComponent, CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
|
|
8
8
|
import { provideNativeDateAdapter } from '@angular/material/core';
|
|
9
9
|
import * as i1 from '@angular/material/datepicker';
|
|
10
10
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
@@ -13,7 +13,7 @@ import * as i1$2 from '@angular/cdk/overlay';
|
|
|
13
13
|
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
14
14
|
import { ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
|
|
15
15
|
import { fromEvent, take, noop, startWith, Subject, BehaviorSubject, interval, map, pairwise, takeWhile, filter, skipWhile, switchMap, tap } from 'rxjs';
|
|
16
|
-
import { trigger, state,
|
|
16
|
+
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
17
17
|
import { RouterLink } from '@angular/router';
|
|
18
18
|
import { CdkScrollable } from '@angular/cdk/scrolling';
|
|
19
19
|
import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
|
|
@@ -25,31 +25,31 @@ class BadgeComponent {
|
|
|
25
25
|
/**
|
|
26
26
|
* The value of the badge
|
|
27
27
|
*/
|
|
28
|
-
value = input();
|
|
28
|
+
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
29
29
|
/**
|
|
30
30
|
* The aria label, used by screen readers to give context.
|
|
31
31
|
*/
|
|
32
|
-
ariaLabel = input();
|
|
32
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
33
33
|
/**
|
|
34
34
|
* When true, the badge will display values above 99.
|
|
35
35
|
* When false (default), the badge will display values above 99 as a dot
|
|
36
36
|
*/
|
|
37
|
-
displayLargeNumbers = input(false);
|
|
38
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
39
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
37
|
+
displayLargeNumbers = input(false, ...(ngDevMode ? [{ debugName: "displayLargeNumbers" }] : []));
|
|
38
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 }, displayLargeNumbers: { classPropertyName: "displayLargeNumbers", publicName: "displayLargeNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\n @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n <span class=\"dot\"></span>\n } @else {\n {{ value }}\n }\n} @else {\n {{ value() }}\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,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{align-items:center;background-color:var(--badge-background-color);border:var(--badge-border);border-radius:var(--badge-min-size);box-sizing:border-box;color:var(--badge-color);display:flex;font-size:var(--badge-font-size);height:var(--badge-min-size);justify-content:center;letter-spacing:-1px;max-width:fit-content;min-width:var(--badge-min-size);padding-inline:var(--badge-padding-inline);text-align:center}.dot{display:block;background-color:var(--badge-color);border-radius:50%;height:var(--badge-dot-size);width:var(--badge-dot-size)}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--badge-background-color: var(--ndw-color-primary-050);--badge-border: var(--ndw-border-size-sm) solid var(--ndw-color-primary);--badge-color: var(--ndw-color-primary);--badge-dot-size: var(--ndw-spacing-2xs);--badge-min-size: 1.25rem;--badge-padding-inline: var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
40
40
|
}
|
|
41
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
42
42
|
type: Component,
|
|
43
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (value(); as value) {\n @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n <span class=\"dot\"></span>\n } @else {\n {{ value }}\n }\n} @else {\n {{ value() }}\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,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{
|
|
43
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (value(); as value) {\n @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n <span class=\"dot\"></span>\n } @else {\n {{ value }}\n }\n} @else {\n {{ value() }}\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,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{align-items:center;background-color:var(--badge-background-color);border:var(--badge-border);border-radius:var(--badge-min-size);box-sizing:border-box;color:var(--badge-color);display:flex;font-size:var(--badge-font-size);height:var(--badge-min-size);justify-content:center;letter-spacing:-1px;max-width:fit-content;min-width:var(--badge-min-size);padding-inline:var(--badge-padding-inline);text-align:center}.dot{display:block;background-color:var(--badge-color);border-radius:50%;height:var(--badge-dot-size);width:var(--badge-dot-size)}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--badge-background-color: var(--ndw-color-primary-050);--badge-border: var(--ndw-border-size-sm) solid var(--ndw-color-primary);--badge-color: var(--ndw-color-primary);--badge-dot-size: var(--ndw-spacing-2xs);--badge-min-size: 1.25rem;--badge-padding-inline: var(--ndw-spacing-2xs)}\n"] }]
|
|
44
44
|
}] });
|
|
45
45
|
|
|
46
46
|
class AutosuggestDirective extends CoreAutosuggestDirective {
|
|
47
|
-
ndwAutosuggest = input.required();
|
|
47
|
+
ndwAutosuggest = input.required(...(ngDevMode ? [{ debugName: "ndwAutosuggest" }] : []));
|
|
48
48
|
get autosuggest() {
|
|
49
49
|
return this.ndwAutosuggest();
|
|
50
50
|
}
|
|
51
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
52
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
51
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutosuggestDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
52
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: AutosuggestDirective, isStandalone: true, selector: "input[ndwAutosuggest], textarea[ndwAutosuggest]", inputs: { ndwAutosuggest: { classPropertyName: "ndwAutosuggest", publicName: "ndwAutosuggest", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "true", "autocomplete": "off" }, listeners: { "blur": "onTouched()", "click": "handleClick()", "focus": "handleFocus()", "input": "handleInput($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "panelOpen.toString()", "attr.aria-owns": "!panelOpen ? null : ndwAutosuggest()?.id" } }, providers: [
|
|
53
53
|
{
|
|
54
54
|
provide: NG_VALUE_ACCESSOR,
|
|
55
55
|
useExisting: forwardRef(() => AutosuggestDirective),
|
|
@@ -57,7 +57,7 @@ class AutosuggestDirective extends CoreAutosuggestDirective {
|
|
|
57
57
|
},
|
|
58
58
|
], usesInheritance: true, ngImport: i0 });
|
|
59
59
|
}
|
|
60
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutosuggestDirective, decorators: [{
|
|
61
61
|
type: Directive,
|
|
62
62
|
args: [{
|
|
63
63
|
host: {
|
|
@@ -86,10 +86,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
86
86
|
}] });
|
|
87
87
|
|
|
88
88
|
class IconComponent extends CoreIconComponent {
|
|
89
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
90
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
89
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
90
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: IconComponent, isStandalone: true, selector: "ndw-icon", host: { attributes: { "aria-hidden": "true", "translate": "no" }, classAttribute: "material-symbols-rounded notranslate" }, usesInheritance: true, 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)}:host.icon--filled{font-variation-settings:\"FILL\" 1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
91
91
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
92
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconComponent, decorators: [{
|
|
93
93
|
type: Component,
|
|
94
94
|
args: [{ selector: 'ndw-icon', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
95
95
|
'aria-hidden': 'true',
|
|
@@ -98,48 +98,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
98
98
|
}, 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)}:host.icon--filled{font-variation-settings:\"FILL\" 1}\n"] }]
|
|
99
99
|
}] });
|
|
100
100
|
|
|
101
|
-
class ActionIconComponent {
|
|
102
|
-
// ! This component is deprecated, use `button` with `extra-small` attribute instead.
|
|
103
|
-
/**
|
|
104
|
-
* Used to give meaning to the button, used by screen readers.
|
|
105
|
-
*/
|
|
106
|
-
ariaLabel = input.required();
|
|
107
|
-
/**
|
|
108
|
-
* Color scheme of the ActionIcon, available `primary`, `link`,
|
|
109
|
-
* `grey` and `white` (defaults to primary).
|
|
110
|
-
*/
|
|
111
|
-
variant = input('primary');
|
|
112
|
-
/**
|
|
113
|
-
* Specify button type, defaults to `button`
|
|
114
|
-
*/
|
|
115
|
-
buttonType = input('button');
|
|
116
|
-
/**
|
|
117
|
-
* Disables the button, defaults to `false`.
|
|
118
|
-
*/
|
|
119
|
-
disabled = input(false);
|
|
120
|
-
/**
|
|
121
|
-
* Sets the size of the button, defaults to `md`.
|
|
122
|
-
*/
|
|
123
|
-
size = input('md');
|
|
124
|
-
/**
|
|
125
|
-
* Event emitted when the button is clicked.
|
|
126
|
-
*/
|
|
127
|
-
clicked = output();
|
|
128
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ActionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
129
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", 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: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"ndw-action-icon ndw-action-icon--{{ variant() }}\"\n [type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n (click)=\"clicked.emit()\"\n>\n <span class=\"sr-only\">{{ ariaLabel() }}</span>\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
130
|
-
}
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ActionIconComponent, decorators: [{
|
|
132
|
-
type: Component,
|
|
133
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-action-icon', template: "<button\n class=\"ndw-action-icon ndw-action-icon--{{ variant() }}\"\n [type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n (click)=\"clicked.emit()\"\n>\n <span class=\"sr-only\">{{ ariaLabel() }}</span>\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"] }]
|
|
134
|
-
}] });
|
|
135
|
-
|
|
136
101
|
class AutosuggestOptionComponent extends CoreAutosuggestOptionComponent {
|
|
137
|
-
icon = input();
|
|
138
|
-
image = input();
|
|
139
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
102
|
+
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
103
|
+
image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : []));
|
|
104
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutosuggestOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AutosuggestOptionComponent, isStandalone: true, selector: "ndw-autosuggest-option", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "selectViaInteraction()", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "class.ndw-autosuggest-option--active": "active()", "class.ndw-autosuggest-option--selected": "selected()", "id": "id" }, classAttribute: "ndw-autosuggest-option" }, usesInheritance: true, ngImport: i0, template: "@if (icon(); as icon) {\n <ndw-icon>{{ icon }}</ndw-icon>\n}\n@if (image(); as image) {\n <img [alt]=\"image.alt\" [src]=\"image.src\" />\n}\n<span class=\"ndw-option-text\" [innerHTML]=\"label() | matchBold: searchTerm()\"></span>\n", styles: [":host{align-items:center;box-sizing:border-box;display:flex;gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%;color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);cursor:pointer;text-align:left;font:inherit;font-size:var(--ndw-font-size-sm);transition:background-color var(--ndw-animation-speed-very-fast) ease-in-out}:host img{width:var(--ndw-spacing-lg)}:host.ndw-autosuggest-option--active,:host:hover:not([aria-disabled=true]){background-color:var(--ndw-color-secondary-050)}:host[aria-disabled=true]{-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--ndw-color-grey-100)}:host.ndw-autosuggest-option--add{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:var(--ndw-color-link-400)}:host.ndw-autosuggest-option--add .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ndw-spacing-3xs)}:host:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}:host span{word-break:break-word}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "pipe", type: MatchBoldPipe, name: "matchBold" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
141
106
|
}
|
|
142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutosuggestOptionComponent, decorators: [{
|
|
143
108
|
type: Component,
|
|
144
109
|
args: [{ selector: 'ndw-autosuggest-option', imports: [IconComponent, MatchBoldPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
145
110
|
class: 'ndw-autosuggest-option',
|
|
@@ -154,10 +119,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
154
119
|
}] });
|
|
155
120
|
|
|
156
121
|
class AutosuggestAddOptionComponent extends CoreAutosuggestAddOptionComponent {
|
|
157
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
158
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
122
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutosuggestAddOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
123
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: AutosuggestAddOptionComponent, isStandalone: true, selector: "ndw-autosuggest-add-option", host: { attributes: { "role": "option" }, listeners: { "click": "selectViaInteraction()", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "class.ndw-autosuggest-option--active": "active()", "class.ndw-autosuggest-option--selected": "selected()" }, classAttribute: "ndw-autosuggest-option ndw-autosuggest-option--add" }, usesInheritance: true, ngImport: i0, template: "<ndw-icon [size]=\"'sm'\">add</ndw-icon> Voeg <span class=\"truncate\">'{{ value().label }}'</span> toe\n", styles: [":host{align-items:center;box-sizing:border-box;display:flex;gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%;color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);cursor:pointer;text-align:left;font:inherit;font-size:var(--ndw-font-size-sm);transition:background-color var(--ndw-animation-speed-very-fast) ease-in-out}:host img{width:var(--ndw-spacing-lg)}:host.ndw-autosuggest-option--active,:host:hover:not([aria-disabled=true]){background-color:var(--ndw-color-secondary-050)}:host[aria-disabled=true]{-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--ndw-color-grey-100)}:host.ndw-autosuggest-option--add{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:var(--ndw-color-link-400)}:host.ndw-autosuggest-option--add .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ndw-spacing-3xs)}:host:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}:host span{word-break:break-word}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
159
124
|
}
|
|
160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutosuggestAddOptionComponent, decorators: [{
|
|
161
126
|
type: Component,
|
|
162
127
|
args: [{ selector: 'ndw-autosuggest-add-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], host: {
|
|
163
128
|
class: 'ndw-autosuggest-option ndw-autosuggest-option--add',
|
|
@@ -171,10 +136,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
171
136
|
}] });
|
|
172
137
|
|
|
173
138
|
class AutosuggestPanelComponent extends CoreAutosuggestPanelComponent {
|
|
174
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
139
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutosuggestPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AutosuggestPanelComponent, isStandalone: true, selector: "ndw-autosuggest", usesInheritance: true, ngImport: i0, template: "<ng-template>\n @if (suggestions().length === 0 && !enableAddOption()) {\n <div class=\"ndw-autosuggest-panel\">\n <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n </div>\n } @else {\n <datalist #panel class=\"ndw-autosuggest-panel\">\n @for (option of slicedOptions(); track option) {\n <ndw-autosuggest-option\n #option\n [icon]=\"option.icon\"\n [image]=\"option.image\"\n [label]=\"option.label\"\n [value]=\"option\"\n [searchTerm]=\"searchTerm()\"\n />\n }\n @if (enableAddOption()) {\n @if (!!searchTerm().trim()) {\n <ndw-autosuggest-add-option\n #option\n [value]=\"createNewOption(searchTerm())\"\n (addOption)=\"addNewOption($event)\"\n />\n } @else if (!suggestions().length) {\n <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n }\n }\n @if (hasMoreResults()) {\n <p class=\"ndw-autosuggest-panel__more-results\">\n {{ hiddenResultsText() }}\n </p>\n }\n </datalist>\n }\n</ng-template>\n\n<ng-template #emptyResults>\n <div class=\"ndw-autosuggest-panel__empty\">\n <ndw-icon>sentiment_dissatisfied</ndw-icon>\n {{ noResultText() }}\n </div>\n</ng-template>\n", styles: [".ndw-autosuggest-panel{--dropdown-line-height: 26px;--dropdown-max-line-items: 7;--dropdown-max-height: calc(var(--dropdown-line-height) * var(--dropdown-max-line-items));display:block;overflow:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;max-height:var(--dropdown-max-height);width:100%;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);padding:0;margin-top:2px;background-color:var(--ndw-color-white);box-shadow:var(--ndw-elevation-popover)}.ndw-autosuggest-panel>ndw-autosuggest-option:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}.ndw-autosuggest-panel__more-results{font-size:var(--ndw-font-size-sm);color:var(--ndw-color-grey-400);padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);text-align:center}.ndw-autosuggest-panel__empty{display:grid;justify-items:center;margin:auto;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);gap:var(--ndw-spacing-xs);max-width:300px;box-sizing:border-box;font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}\n"], dependencies: [{ kind: "component", type: AutosuggestAddOptionComponent, selector: "ndw-autosuggest-add-option" }, { kind: "component", type: AutosuggestOptionComponent, selector: "ndw-autosuggest-option", inputs: ["icon", "image"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
176
141
|
}
|
|
177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutosuggestPanelComponent, decorators: [{
|
|
178
143
|
type: Component,
|
|
179
144
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
180
145
|
AutosuggestAddOptionComponent,
|
|
@@ -184,54 +149,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
184
149
|
], selector: 'ndw-autosuggest', template: "<ng-template>\n @if (suggestions().length === 0 && !enableAddOption()) {\n <div class=\"ndw-autosuggest-panel\">\n <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n </div>\n } @else {\n <datalist #panel class=\"ndw-autosuggest-panel\">\n @for (option of slicedOptions(); track option) {\n <ndw-autosuggest-option\n #option\n [icon]=\"option.icon\"\n [image]=\"option.image\"\n [label]=\"option.label\"\n [value]=\"option\"\n [searchTerm]=\"searchTerm()\"\n />\n }\n @if (enableAddOption()) {\n @if (!!searchTerm().trim()) {\n <ndw-autosuggest-add-option\n #option\n [value]=\"createNewOption(searchTerm())\"\n (addOption)=\"addNewOption($event)\"\n />\n } @else if (!suggestions().length) {\n <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n }\n }\n @if (hasMoreResults()) {\n <p class=\"ndw-autosuggest-panel__more-results\">\n {{ hiddenResultsText() }}\n </p>\n }\n </datalist>\n }\n</ng-template>\n\n<ng-template #emptyResults>\n <div class=\"ndw-autosuggest-panel__empty\">\n <ndw-icon>sentiment_dissatisfied</ndw-icon>\n {{ noResultText() }}\n </div>\n</ng-template>\n", styles: [".ndw-autosuggest-panel{--dropdown-line-height: 26px;--dropdown-max-line-items: 7;--dropdown-max-height: calc(var(--dropdown-line-height) * var(--dropdown-max-line-items));display:block;overflow:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;max-height:var(--dropdown-max-height);width:100%;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);padding:0;margin-top:2px;background-color:var(--ndw-color-white);box-shadow:var(--ndw-elevation-popover)}.ndw-autosuggest-panel>ndw-autosuggest-option:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}.ndw-autosuggest-panel__more-results{font-size:var(--ndw-font-size-sm);color:var(--ndw-color-grey-400);padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);text-align:center}.ndw-autosuggest-panel__empty{display:grid;justify-items:center;margin:auto;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);gap:var(--ndw-spacing-xs);max-width:300px;box-sizing:border-box;font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}\n"] }]
|
|
185
150
|
}] });
|
|
186
151
|
|
|
187
|
-
class CheckboxComponent {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
success = input(false);
|
|
193
|
-
indeterminate = input(false);
|
|
194
|
-
required = input(false);
|
|
195
|
-
uuid = crypto.randomUUID();
|
|
196
|
-
onClick() {
|
|
197
|
-
if (this.disabled()) {
|
|
198
|
-
return;
|
|
199
|
-
}
|
|
200
|
-
this.checked.set(!this.checked());
|
|
201
|
-
}
|
|
202
|
-
onKeyDown(event) {
|
|
203
|
-
if (event.key !== 'Enter' || this.disabled()) {
|
|
204
|
-
return;
|
|
205
|
-
}
|
|
206
|
-
this.checked.set(!this.checked());
|
|
207
|
-
event.preventDefault();
|
|
208
|
-
}
|
|
209
|
-
onInputChange(event) {
|
|
210
|
-
const input = event.target;
|
|
211
|
-
this.checked.set(input.checked);
|
|
212
|
-
}
|
|
213
|
-
writeValue(value) {
|
|
214
|
-
this.checked.set(value);
|
|
215
|
-
}
|
|
216
|
-
registerOnChange(fn) {
|
|
217
|
-
this.checked.subscribe(fn);
|
|
218
|
-
}
|
|
219
|
-
registerOnTouched() {
|
|
220
|
-
// noop
|
|
221
|
-
}
|
|
222
|
-
setDisabledState(isDisabled) {
|
|
223
|
-
this.disabled.set(isDisabled);
|
|
224
|
-
}
|
|
225
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
226
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", 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", disabled: "disabledChange" }, host: { properties: { "class.checked": "checked()", "class.disabled": "disabled()", "class.indeterminate": "indeterminate()" } }, providers: [
|
|
152
|
+
class CheckboxComponent extends CoreCheckboxComponent {
|
|
153
|
+
switch = input(false, ...(ngDevMode ? [{ debugName: "switch" }] : []));
|
|
154
|
+
success = input(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
155
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CheckboxComponent, isStandalone: true, selector: "ndw-checkbox", inputs: { switch: { classPropertyName: "switch", publicName: "switch", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.checked": "checked()", "class.disabled": "disabled()", "class.indeterminate": "indeterminate()" } }, providers: [
|
|
227
157
|
{
|
|
228
158
|
provide: NG_VALUE_ACCESSOR,
|
|
229
159
|
useExisting: CheckboxComponent,
|
|
230
160
|
multi: true,
|
|
231
161
|
},
|
|
232
|
-
], ngImport: i0, template: "<input\n type=\"checkbox\"\n class=\"sr-only\"\n [id]=\"'checkbox-' + uuid\"\n [checked]=\"checked()\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"onInputChange($event)\"\n/>\n<label [for]=\"'checkbox-' + uuid\" [ngClass]=\"{ 'switch-text': switch() }\">\n <div\n aria-hidden=\"true\"\n [ngClass]=\"{ error: error(), success: success(), checkbox: !switch(), switch: switch() }\"\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 <span id=\"checkbox-label-{{ uuid }}\">\n <ng-content />\n </span>\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,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}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);flex-shrink:0}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;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}: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-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) 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-within) 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" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
162
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n type=\"checkbox\"\n class=\"sr-only\"\n [id]=\"'checkbox-' + uuid\"\n [checked]=\"checked()\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"onInputChange($event)\"\n/>\n<label [for]=\"'checkbox-' + uuid\" [ngClass]=\"{ 'switch-text': switch() }\">\n <div\n aria-hidden=\"true\"\n [ngClass]=\"{ error: error(), success: success(), checkbox: !switch(), switch: switch() }\"\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 <span id=\"checkbox-label-{{ uuid }}\">\n <ng-content />\n </span>\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,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}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);flex-shrink:0}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;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}: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-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) 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-within) 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" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
233
163
|
}
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
235
165
|
type: Component,
|
|
236
166
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
237
167
|
'[class.checked]': 'checked()',
|
|
@@ -246,14 +176,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
246
176
|
], selector: 'ndw-checkbox', template: "<input\n type=\"checkbox\"\n class=\"sr-only\"\n [id]=\"'checkbox-' + uuid\"\n [checked]=\"checked()\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"onInputChange($event)\"\n/>\n<label [for]=\"'checkbox-' + uuid\" [ngClass]=\"{ 'switch-text': switch() }\">\n <div\n aria-hidden=\"true\"\n [ngClass]=\"{ error: error(), success: success(), checkbox: !switch(), switch: switch() }\"\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 <span id=\"checkbox-label-{{ uuid }}\">\n <ng-content />\n </span>\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,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}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);flex-shrink:0}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;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}: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-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) 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-within) 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"] }]
|
|
247
177
|
}] });
|
|
248
178
|
|
|
249
|
-
class CheckboxGroupComponent {
|
|
250
|
-
|
|
251
|
-
static
|
|
252
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.7", type: CheckboxGroupComponent, isStandalone: true, selector: "ndw-checkbox-group", queries: [{ propertyName: "checkboxes", predicate: CheckboxComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
179
|
+
class CheckboxGroupComponent extends CoreCheckboxGroupComponent {
|
|
180
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CheckboxGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
181
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: CheckboxGroupComponent, isStandalone: true, selector: "ndw-checkbox-group", usesInheritance: true, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--checkbox-group-gap)}:host{--checkbox-group-gap: var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
253
182
|
}
|
|
254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
255
184
|
type: Component,
|
|
256
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-checkbox-group', template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"] }]
|
|
185
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-checkbox-group', template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--checkbox-group-gap)}:host{--checkbox-group-gap: var(--ndw-spacing-2xs)}\n"] }]
|
|
257
186
|
}] });
|
|
258
187
|
|
|
259
188
|
class DatepickerComponent {
|
|
@@ -267,19 +196,19 @@ class DatepickerComponent {
|
|
|
267
196
|
}
|
|
268
197
|
return className;
|
|
269
198
|
};
|
|
270
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
271
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
199
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: DatepickerComponent, isStandalone: true, selector: "ndw-datepicker", providers: [provideNativeDateAdapter()], ngImport: i0, template: "<input ndwInput [matDatepicker]=\"picker\" placeholder=\"Select a date\" />\n<mat-datepicker-toggle [for]=\"picker\" />\n<mat-datepicker [dateClass]=\"dateClass\" panelClass=\"ndw-calendar\" #picker />\n", styles: [":host{position:relative}mat-datepicker-toggle{position:absolute;right:0;top:0;transform:scale(.75)}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
272
201
|
}
|
|
273
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
274
203
|
type: Component,
|
|
275
204
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDatepickerModule], providers: [provideNativeDateAdapter()], selector: 'ndw-datepicker', template: "<input ndwInput [matDatepicker]=\"picker\" placeholder=\"Select a date\" />\n<mat-datepicker-toggle [for]=\"picker\" />\n<mat-datepicker [dateClass]=\"dateClass\" panelClass=\"ndw-calendar\" #picker />\n", styles: [":host{position:relative}mat-datepicker-toggle{position:absolute;right:0;top:0;transform:scale(.75)}\n"] }]
|
|
276
205
|
}] });
|
|
277
206
|
|
|
278
207
|
class ErrorComponent {
|
|
279
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
280
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
208
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: ErrorComponent, isStandalone: true, selector: "ndw-error", ngImport: i0, template: "<ndw-icon>warning</ndw-icon>\n<ng-content />\n", styles: [":host{align-content: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:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
281
210
|
}
|
|
282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ErrorComponent, decorators: [{
|
|
283
212
|
type: Component,
|
|
284
213
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-error', template: "<ndw-icon>warning</ndw-icon>\n<ng-content />\n", styles: [":host{align-content: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:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"] }]
|
|
285
214
|
}] });
|
|
@@ -288,22 +217,22 @@ const MIME_TYPE_MAP = {
|
|
|
288
217
|
geojson: 'application/geo+json',
|
|
289
218
|
};
|
|
290
219
|
class FileUploadComponent {
|
|
291
|
-
allowedFileTypeRegex = input();
|
|
292
|
-
disabled = model(false);
|
|
220
|
+
allowedFileTypeRegex = input(...(ngDevMode ? [undefined, { debugName: "allowedFileTypeRegex" }] : []));
|
|
221
|
+
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
293
222
|
fileUploadText = input({
|
|
294
223
|
dragText: 'Klik of sleep je bestanden hierheen',
|
|
295
224
|
dragOverText: 'Laat los om te uploaden',
|
|
296
|
-
});
|
|
297
|
-
maxFileSizeInBytes = input(1000000);
|
|
298
|
-
readonly = input(false);
|
|
299
|
-
uploadDate = input('');
|
|
300
|
-
draggingOver = model(false);
|
|
301
|
-
error = model(false);
|
|
302
|
-
incorrectFileSize = model(false);
|
|
303
|
-
incorrectFileType = model(false);
|
|
304
|
-
selectedFile = model();
|
|
305
|
-
success = model(false);
|
|
306
|
-
canEdit = computed(() => !this.selectedFile() && !this.disabled() && !this.readonly());
|
|
225
|
+
}, ...(ngDevMode ? [{ debugName: "fileUploadText" }] : []));
|
|
226
|
+
maxFileSizeInBytes = input(1000000, ...(ngDevMode ? [{ debugName: "maxFileSizeInBytes" }] : []));
|
|
227
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
228
|
+
uploadDate = input('', ...(ngDevMode ? [{ debugName: "uploadDate" }] : []));
|
|
229
|
+
draggingOver = model(false, ...(ngDevMode ? [{ debugName: "draggingOver" }] : []));
|
|
230
|
+
error = model(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
231
|
+
incorrectFileSize = model(false, ...(ngDevMode ? [{ debugName: "incorrectFileSize" }] : []));
|
|
232
|
+
incorrectFileType = model(false, ...(ngDevMode ? [{ debugName: "incorrectFileType" }] : []));
|
|
233
|
+
selectedFile = model(...(ngDevMode ? [undefined, { debugName: "selectedFile" }] : []));
|
|
234
|
+
success = model(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
235
|
+
canEdit = computed(() => !this.selectedFile() && !this.disabled() && !this.readonly(), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
|
|
307
236
|
fileInputElement = viewChild.required('fileInput');
|
|
308
237
|
onKeyDown(event) {
|
|
309
238
|
if (event.key !== 'Enter' && event.key !== ' ') {
|
|
@@ -349,10 +278,14 @@ class FileUploadComponent {
|
|
|
349
278
|
}
|
|
350
279
|
}
|
|
351
280
|
onDownloadFileClick() {
|
|
352
|
-
const
|
|
281
|
+
const selectedFile = this.selectedFile();
|
|
282
|
+
if (!selectedFile) {
|
|
283
|
+
return;
|
|
284
|
+
}
|
|
285
|
+
const url = window.URL.createObjectURL(selectedFile);
|
|
353
286
|
const linkElement = document.createElement('a');
|
|
354
287
|
linkElement.href = url;
|
|
355
|
-
linkElement.download =
|
|
288
|
+
linkElement.download = selectedFile.name;
|
|
356
289
|
document.body.appendChild(linkElement);
|
|
357
290
|
linkElement.click();
|
|
358
291
|
document.body.removeChild(linkElement);
|
|
@@ -449,8 +382,8 @@ class FileUploadComponent {
|
|
|
449
382
|
console.warn(`Unable to determine MIME type for "${file.name}". Unrecognized file extension "${extension}".`);
|
|
450
383
|
return file;
|
|
451
384
|
}
|
|
452
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
453
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
385
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FileUploadComponent, isStandalone: true, selector: "ndw-file-upload", inputs: { allowedFileTypeRegex: { classPropertyName: "allowedFileTypeRegex", publicName: "allowedFileTypeRegex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fileUploadText: { classPropertyName: "fileUploadText", publicName: "fileUploadText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeInBytes: { classPropertyName: "maxFileSizeInBytes", publicName: "maxFileSizeInBytes", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, uploadDate: { classPropertyName: "uploadDate", publicName: "uploadDate", isSignal: true, isRequired: false, transformFunction: null }, draggingOver: { classPropertyName: "draggingOver", publicName: "draggingOver", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, incorrectFileSize: { classPropertyName: "incorrectFileSize", publicName: "incorrectFileSize", isSignal: true, isRequired: false, transformFunction: null }, incorrectFileType: { classPropertyName: "incorrectFileType", publicName: "incorrectFileType", isSignal: true, isRequired: false, transformFunction: null }, selectedFile: { classPropertyName: "selectedFile", publicName: "selectedFile", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", draggingOver: "draggingOverChange", error: "errorChange", incorrectFileSize: "incorrectFileSizeChange", incorrectFileType: "incorrectFileTypeChange", selectedFile: "selectedFileChange", success: "successChange" }, host: { listeners: { "click": "onClick()", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "dragover": "onDragOver($event)", "drop": "onDrop($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "!this.canEdit() ? -1 : 0", "class.disabled": "disabled()", "class.dragging": "draggingOver()", "class.error": "error()", "class.file-selected": "!!selectedFile()", "class.readonly": "readonly()", "class.success": "success()" } }, providers: [
|
|
454
387
|
{
|
|
455
388
|
provide: NG_VALUE_ACCESSOR,
|
|
456
389
|
useExisting: FileUploadComponent,
|
|
@@ -458,7 +391,7 @@ class FileUploadComponent {
|
|
|
458
391
|
},
|
|
459
392
|
], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
460
393
|
}
|
|
461
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
394
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
462
395
|
type: Component,
|
|
463
396
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
464
397
|
'[attr.tabindex]': '!this.canEdit() ? -1 : 0',
|
|
@@ -484,11 +417,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
484
417
|
}] });
|
|
485
418
|
|
|
486
419
|
class TooltipComponent {
|
|
487
|
-
text = input.required();
|
|
488
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
489
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
420
|
+
text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
|
|
421
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
422
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;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;max-width:18.75rem;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-2xs) var(--ndw-spacing-3xs);position:relative;word-break:break-word}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
490
423
|
}
|
|
491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
492
425
|
type: Component,
|
|
493
426
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
494
427
|
role: 'tooltip',
|
|
@@ -499,7 +432,7 @@ class TooltipDirective {
|
|
|
499
432
|
elementRef = inject(ElementRef);
|
|
500
433
|
overlay = inject(Overlay);
|
|
501
434
|
ariaDescriber = inject(AriaDescriber);
|
|
502
|
-
text = input.required({ alias: 'ndwTooltip' });
|
|
435
|
+
text = input.required(...(ngDevMode ? [{ debugName: "text", alias: 'ndwTooltip' }] : [{ alias: 'ndwTooltip' }]));
|
|
503
436
|
overlayRef = null;
|
|
504
437
|
ngOnInit() {
|
|
505
438
|
const positionStrategy = this.getFlexibleConnectedPositionStrategy();
|
|
@@ -555,10 +488,10 @@ class TooltipDirective {
|
|
|
555
488
|
},
|
|
556
489
|
]);
|
|
557
490
|
}
|
|
558
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
559
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
491
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
492
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: TooltipDirective, isStandalone: true, selector: "[ndwTooltip]", inputs: { text: { classPropertyName: "text", publicName: "ndwTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-hidden": "false", "tabindex": "0" }, listeners: { "focus": "show()", "blur": "hide()", "document:keydown.escape": "hideOnEscape()", "keydown.escape": "hide()", "mouseenter": "show()", "mouseleave": "hide()" } }, usesOnChanges: true, ngImport: i0 });
|
|
560
493
|
}
|
|
561
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
494
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
562
495
|
type: Directive,
|
|
563
496
|
args: [{
|
|
564
497
|
selector: '[ndwTooltip]',
|
|
@@ -576,29 +509,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
576
509
|
}] });
|
|
577
510
|
|
|
578
511
|
class InputButtonComponent {
|
|
579
|
-
disabled = input(false);
|
|
580
|
-
input = input();
|
|
581
|
-
ariaLabel = input('');
|
|
582
|
-
alternative = input(false);
|
|
512
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
513
|
+
input = input(...(ngDevMode ? [undefined, { debugName: "input" }] : []));
|
|
514
|
+
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
515
|
+
alternative = input(false, ...(ngDevMode ? [{ debugName: "alternative" }] : []));
|
|
583
516
|
buttonClicked = output();
|
|
584
517
|
onClick() {
|
|
585
518
|
this.input()?.element?.focus();
|
|
586
519
|
this.buttonClicked.emit();
|
|
587
520
|
}
|
|
588
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
521
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
522
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: InputButtonComponent, isStandalone: true, selector: "ndw-input-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, alternative: { classPropertyName: "alternative", publicName: "alternative", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button\n ndwButton\n extra-small\n tertiary\n type=\"button\"\n [attr.alternative]=\"alternative() ? true : null\"\n class=\"input-icon\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onClick()\"\n>\n <span class=\"sr-only\">{{ ariaLabel() }}</span>\n <ndw-icon>\n <ng-content />\n </ndw-icon>\n</button>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
590
523
|
}
|
|
591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
524
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputButtonComponent, decorators: [{
|
|
592
525
|
type: Component,
|
|
593
526
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-input-button', template: "<button\n ndwButton\n extra-small\n tertiary\n type=\"button\"\n [attr.alternative]=\"alternative() ? true : null\"\n class=\"input-icon\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onClick()\"\n>\n <span class=\"sr-only\">{{ ariaLabel() }}</span>\n <ndw-icon>\n <ng-content />\n </ndw-icon>\n</button>\n" }]
|
|
594
527
|
}] });
|
|
595
528
|
|
|
596
529
|
class ClearSearchButtonComponent {
|
|
597
|
-
disabled = input(false);
|
|
598
|
-
input = input();
|
|
599
|
-
ariaLabel = input('');
|
|
530
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
531
|
+
input = input(...(ngDevMode ? [undefined, { debugName: "input" }] : []));
|
|
532
|
+
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
600
533
|
buttonClicked = output();
|
|
601
|
-
inputValue = signal('');
|
|
534
|
+
inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
602
535
|
onInput = () => {
|
|
603
536
|
this.inputValue.set(this.input()?.element.value ?? '');
|
|
604
537
|
};
|
|
@@ -619,10 +552,10 @@ class ClearSearchButtonComponent {
|
|
|
619
552
|
this.inputValue.set('');
|
|
620
553
|
this.buttonClicked.emit();
|
|
621
554
|
}
|
|
622
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
623
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
555
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ClearSearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
556
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ClearSearchButtonComponent, isStandalone: true, selector: "ndw-clear-search-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "@if (inputValue() !== '') {\n <ndw-input-button [alternative]=\"true\" (buttonClicked)=\"clear()\">close</ndw-input-button>\n}\n", styles: [":host:empty{display:none}\n"], dependencies: [{ kind: "component", type: InputButtonComponent, selector: "ndw-input-button", inputs: ["disabled", "input", "ariaLabel", "alternative"], outputs: ["buttonClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
624
557
|
}
|
|
625
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
558
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ClearSearchButtonComponent, decorators: [{
|
|
626
559
|
type: Component,
|
|
627
560
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [InputButtonComponent], selector: 'ndw-clear-search-button', template: "@if (inputValue() !== '') {\n <ndw-input-button [alternative]=\"true\" (buttonClicked)=\"clear()\">close</ndw-input-button>\n}\n", styles: [":host:empty{display:none}\n"] }]
|
|
628
561
|
}] });
|
|
@@ -638,10 +571,10 @@ var FormFieldElement;
|
|
|
638
571
|
})(FormFieldElement || (FormFieldElement = {}));
|
|
639
572
|
|
|
640
573
|
class InfoComponent {
|
|
641
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
642
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
574
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
575
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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);word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
643
576
|
}
|
|
644
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
577
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InfoComponent, decorators: [{
|
|
645
578
|
type: Component,
|
|
646
579
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-info', 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);word-break:break-word}\n"] }]
|
|
647
580
|
}] });
|
|
@@ -711,10 +644,10 @@ class InputDirective {
|
|
|
711
644
|
this.element.required = this.control.hasValidator(Validators.required);
|
|
712
645
|
}
|
|
713
646
|
}
|
|
714
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
715
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
647
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
648
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: InputDirective, isStandalone: true, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]", ngImport: i0 });
|
|
716
649
|
}
|
|
717
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
650
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputDirective, decorators: [{
|
|
718
651
|
type: Directive,
|
|
719
652
|
args: [{
|
|
720
653
|
selector: 'input[ndwInput], select[ndwInput], textarea[ndwInput]',
|
|
@@ -722,10 +655,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
722
655
|
}] });
|
|
723
656
|
|
|
724
657
|
class InputIconComponent {
|
|
725
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
726
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
658
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
659
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: InputIconComponent, isStandalone: true, selector: "ndw-input-icon", ngImport: i0, template: "<ndw-icon class=\"input-icon\">\n <ng-content />\n</ndw-icon>\n", styles: [":host{height:var(--ndw-font-size-lg)}.input-icon{font-size:var(--ndw-font-size-lg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
727
660
|
}
|
|
728
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
661
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputIconComponent, decorators: [{
|
|
729
662
|
type: Component,
|
|
730
663
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-input-icon', template: "<ndw-icon class=\"input-icon\">\n <ng-content />\n</ndw-icon>\n", styles: [":host{height:var(--ndw-font-size-lg)}.input-icon{font-size:var(--ndw-font-size-lg)}\n"] }]
|
|
731
664
|
}] });
|
|
@@ -752,10 +685,10 @@ class ButtonDirective {
|
|
|
752
685
|
}
|
|
753
686
|
});
|
|
754
687
|
}
|
|
755
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
756
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
688
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
689
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: ButtonDirective, isStandalone: true, selector: "[ndwButton]", ngImport: i0 });
|
|
757
690
|
}
|
|
758
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ButtonDirective, decorators: [{
|
|
759
692
|
type: Directive,
|
|
760
693
|
args: [{
|
|
761
694
|
selector: '[ndwButton]',
|
|
@@ -764,10 +697,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
764
697
|
|
|
765
698
|
class PopoverTriggerDirective {
|
|
766
699
|
popoverToggled = new EventEmitter();
|
|
767
|
-
popoverPosition = input('nextToTriggerButton');
|
|
768
|
-
popoverContent = input.required({ alias: 'ndwPopoverTrigger' });
|
|
769
|
-
toggleOnClick = input(true);
|
|
770
|
-
isOpen = model(false);
|
|
700
|
+
popoverPosition = input('nextToTriggerButton', ...(ngDevMode ? [{ debugName: "popoverPosition" }] : []));
|
|
701
|
+
popoverContent = input.required(...(ngDevMode ? [{ debugName: "popoverContent", alias: 'ndwPopoverTrigger' }] : [{ alias: 'ndwPopoverTrigger' }]));
|
|
702
|
+
toggleOnClick = input(true, ...(ngDevMode ? [{ debugName: "toggleOnClick" }] : []));
|
|
703
|
+
isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
771
704
|
toggle() {
|
|
772
705
|
if (!this.toggleOnClick()) {
|
|
773
706
|
return;
|
|
@@ -930,10 +863,10 @@ class PopoverTriggerDirective {
|
|
|
930
863
|
})),
|
|
931
864
|
];
|
|
932
865
|
}
|
|
933
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
934
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
866
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
867
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: PopoverTriggerDirective, isStandalone: true, selector: "[ndwPopoverTrigger]", inputs: { popoverPosition: { classPropertyName: "popoverPosition", publicName: "popoverPosition", isSignal: true, isRequired: false, transformFunction: null }, popoverContent: { classPropertyName: "popoverContent", publicName: "ndwPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggleOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popoverToggled: "popoverToggled", isOpen: "isOpenChange" }, host: { listeners: { "click": "toggle()" } }, exportAs: ["ndwPopoverTrigger"], ngImport: i0 });
|
|
935
868
|
}
|
|
936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
869
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
|
|
937
870
|
type: Directive,
|
|
938
871
|
args: [{
|
|
939
872
|
exportAs: 'ndwPopoverTrigger',
|
|
@@ -947,15 +880,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
947
880
|
}] } });
|
|
948
881
|
|
|
949
882
|
class OptionComponent {
|
|
950
|
-
value = input.required();
|
|
951
|
-
label = input.required();
|
|
952
|
-
description = input();
|
|
953
|
-
required = input(false);
|
|
954
|
-
disabled = input(false);
|
|
955
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
956
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
883
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
884
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
885
|
+
description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
|
|
886
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
887
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
888
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
889
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
957
890
|
}
|
|
958
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
891
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: OptionComponent, decorators: [{
|
|
959
892
|
type: Component,
|
|
960
893
|
args: [{
|
|
961
894
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -966,17 +899,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
966
899
|
|
|
967
900
|
class OptionGroupComponent {
|
|
968
901
|
ngControl = inject(NgControl, { optional: true });
|
|
969
|
-
error = input(false);
|
|
970
|
-
readonly = input(false);
|
|
971
|
-
fluid = input(false);
|
|
972
|
-
fluidColumns = input(null);
|
|
973
|
-
mode = input('multiple');
|
|
974
|
-
required = input(false);
|
|
975
|
-
success = input(false);
|
|
976
|
-
checkedValues = model([]);
|
|
977
|
-
disabled = model(false);
|
|
978
|
-
fluidColumnStyle = computed(() => this.fluidColumns() ? `repeat(${this.fluidColumns()}, 1fr)` : null);
|
|
979
|
-
children = contentChildren(OptionComponent);
|
|
902
|
+
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
903
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
904
|
+
fluid = input(false, ...(ngDevMode ? [{ debugName: "fluid" }] : []));
|
|
905
|
+
fluidColumns = input(null, ...(ngDevMode ? [{ debugName: "fluidColumns" }] : []));
|
|
906
|
+
mode = input('multiple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
907
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
908
|
+
success = input(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
909
|
+
checkedValues = model([], ...(ngDevMode ? [{ debugName: "checkedValues" }] : []));
|
|
910
|
+
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
911
|
+
fluidColumnStyle = computed(() => this.fluidColumns() ? `repeat(${this.fluidColumns()}, 1fr)` : null, ...(ngDevMode ? [{ debugName: "fluidColumnStyle" }] : []));
|
|
912
|
+
children = contentChildren(OptionComponent, ...(ngDevMode ? [{ debugName: "children" }] : []));
|
|
980
913
|
uuid = crypto.randomUUID();
|
|
981
914
|
constructor() {
|
|
982
915
|
if (this.ngControl) {
|
|
@@ -1019,10 +952,10 @@ class OptionGroupComponent {
|
|
|
1019
952
|
setDisabledState(isDisabled) {
|
|
1020
953
|
this.disabled.set(isDisabled);
|
|
1021
954
|
}
|
|
1022
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1023
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
955
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
956
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: OptionGroupComponent, isStandalone: true, selector: "ndw-option-group", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, fluidColumns: { classPropertyName: "fluidColumns", publicName: "fluidColumns", 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 }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, checkedValues: { classPropertyName: "checkedValues", publicName: "checkedValues", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedValues: "checkedValuesChange", disabled: "disabledChange" }, host: { properties: { "attr.error": "error() || null", "attr.required": "isRequiredOrHasRequiredValidator", "attr.success": "success() || null", "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]=\"child.disabled() || disabled() || readonly() ? 'true' : null\"\n [attr.secondary]=\"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]=\"child.disabled() || disabled() || readonly()\"\n [readonly]=\"readonly()\"\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],:host label[ndwButton][readonly]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-600)}:host label[ndwButton][secondary]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:hover{background-color:var(--ndw-color-primary-050);border-color:var(--ndw-color-primary-500);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:active,:host label[ndwButton][secondary]:focus-within{background-color:var(--ndw-color-primary-050);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:focus-within{border-color:var(--ndw-color-secondary-500)}:host label[ndwButton][secondary][disabled],:host label[ndwButton][secondary][readonly]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-400)}:host[error] label[ndwButton][secondary]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}:host[success] label[ndwButton][secondary]{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][secondary]{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 });
|
|
1024
957
|
}
|
|
1025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: OptionGroupComponent, decorators: [{
|
|
1026
959
|
type: Component,
|
|
1027
960
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1028
961
|
'[attr.error]': 'error() || null',
|
|
@@ -1088,36 +1021,36 @@ const defaultMonthLabels = [
|
|
|
1088
1021
|
class MonthInputComponent {
|
|
1089
1022
|
destroyRef = inject(DestroyRef);
|
|
1090
1023
|
ngControl = inject(NgControl, { optional: true });
|
|
1091
|
-
required = input(false);
|
|
1092
|
-
showMonthPickerLabel = input('Selecteer maand');
|
|
1093
|
-
placeholder = input('JJJJ-MM');
|
|
1094
|
-
yearPlaceholder = input('Jaar');
|
|
1095
|
-
minDate = input(new Date(2020, 0, 1));
|
|
1096
|
-
maxDate = input(new Date(2099, 11, 31));
|
|
1097
|
-
monthLabels = input(defaultMonthLabels);
|
|
1098
|
-
addValidators = input(true);
|
|
1099
|
-
disabled = model(false);
|
|
1100
|
-
readonly = input(false);
|
|
1101
|
-
selectedYear = model(new Date().getFullYear());
|
|
1102
|
-
selectedMonth = model(null);
|
|
1103
|
-
inputElement = computed(() => this.input()?.element);
|
|
1024
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1025
|
+
showMonthPickerLabel = input('Selecteer maand', ...(ngDevMode ? [{ debugName: "showMonthPickerLabel" }] : []));
|
|
1026
|
+
placeholder = input('JJJJ-MM', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1027
|
+
yearPlaceholder = input('Jaar', ...(ngDevMode ? [{ debugName: "yearPlaceholder" }] : []));
|
|
1028
|
+
minDate = input(new Date(2020, 0, 1), ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
1029
|
+
maxDate = input(new Date(2099, 11, 31), ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
1030
|
+
monthLabels = input(defaultMonthLabels, ...(ngDevMode ? [{ debugName: "monthLabels" }] : []));
|
|
1031
|
+
addValidators = input(true, ...(ngDevMode ? [{ debugName: "addValidators" }] : []));
|
|
1032
|
+
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1033
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1034
|
+
selectedYear = model(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "selectedYear" }] : []));
|
|
1035
|
+
selectedMonth = model(null, ...(ngDevMode ? [{ debugName: "selectedMonth" }] : []));
|
|
1036
|
+
inputElement = computed(() => this.input()?.element, ...(ngDevMode ? [{ debugName: "inputElement" }] : []));
|
|
1104
1037
|
selectedDate = computed(() => {
|
|
1105
1038
|
const year = this.selectedYear();
|
|
1106
1039
|
const month = this.selectedMonth();
|
|
1107
1040
|
return year && month ? new Date(year, month - 1, 1) : null;
|
|
1108
|
-
});
|
|
1041
|
+
}, ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
|
|
1109
1042
|
inputValue = computed(() => {
|
|
1110
1043
|
const year = this.selectedYear();
|
|
1111
1044
|
const month = this.selectedMonth();
|
|
1112
1045
|
return year && month ? `${year}-${month.toString().padStart(2, '0')}` : null;
|
|
1113
|
-
});
|
|
1114
|
-
years = computed(() => createYearRange(this.minDate(), this.maxDate()));
|
|
1115
|
-
months = computed(() => createMonthOptions(this.monthLabels(), this.selectedYear(), this.minDate(), this.maxDate()));
|
|
1046
|
+
}, ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
1047
|
+
years = computed(() => createYearRange(this.minDate(), this.maxDate()), ...(ngDevMode ? [{ debugName: "years" }] : []));
|
|
1048
|
+
months = computed(() => createMonthOptions(this.monthLabels(), this.selectedYear(), this.minDate(), this.maxDate()), ...(ngDevMode ? [{ debugName: "months" }] : []));
|
|
1116
1049
|
isYearValid = computed(() => {
|
|
1117
1050
|
const year = this.selectedYear();
|
|
1118
1051
|
return year >= this.minDate().getFullYear() && year <= this.maxDate().getFullYear();
|
|
1119
|
-
});
|
|
1120
|
-
input = viewChild(InputDirective);
|
|
1052
|
+
}, ...(ngDevMode ? [{ debugName: "isYearValid" }] : []));
|
|
1053
|
+
input = viewChild(InputDirective, ...(ngDevMode ? [{ debugName: "input" }] : []));
|
|
1121
1054
|
showMonthPicker = false;
|
|
1122
1055
|
onChange = noop;
|
|
1123
1056
|
constructor() {
|
|
@@ -1222,10 +1155,10 @@ class MonthInputComponent {
|
|
|
1222
1155
|
this.onChange(this.selectedDate());
|
|
1223
1156
|
}
|
|
1224
1157
|
}
|
|
1225
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1226
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1158
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MonthInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1159
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MonthInputComponent, isStandalone: true, selector: "ndw-month-input", inputs: { 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 }, addValidators: { classPropertyName: "addValidators", publicName: "addValidators", 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 }, 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 #input\n ndwInput\n type=\"text\"\n minlength=\"6\"\n maxlength=\"7\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [placeholder]=\"placeholder()\"\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 [attr.aria-label]=\"showMonthPickerLabel() || undefined\"\n [disabled]=\"disabled() || readonly()\"\n [ndwPopoverTrigger]=\"monthPicker\"\n [popoverPosition]=\"'nextToTriggerButton'\"\n (click)=\"showMonthPicker = !showMonthPicker\"\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 [attr.error]=\"isYearValid() ? null : true\"\n />\n\n <ndw-option-group\n mode=\"single\"\n [fluid]=\"true\"\n [fluidColumns]=\"4\"\n [ngModel]=\"selectedMonth() ? [selectedMonth()] : []\"\n (ngModelChange)=\"onMonthSelected($event?.[0])\"\n >\n @for (month of months(); track month) {\n <ndw-option [label]=\"month.label\" [value]=\"month.value\" [disabled]=\"month.disabled\">\n {{ month }}\n </ndw-option>\n }\n </ndw-option-group>\n</ng-template>\n", styles: [":host{display:block;position:relative;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-500)}input[type=number]{margin-bottom:var(--ndw-spacing-xs)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: OptionGroupComponent, selector: "ndw-option-group", inputs: ["error", "readonly", "fluid", "fluidColumns", "mode", "required", "success", "checkedValues", "disabled"], outputs: ["checkedValuesChange", "disabledChange"] }, { kind: "component", type: OptionComponent, selector: "ndw-option", inputs: ["value", "label", "description", "required", "disabled"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1227
1160
|
}
|
|
1228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MonthInputComponent, decorators: [{
|
|
1229
1162
|
type: Component,
|
|
1230
1163
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1231
1164
|
ButtonDirective,
|
|
@@ -1239,12 +1172,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1239
1172
|
}], ctorParameters: () => [] });
|
|
1240
1173
|
|
|
1241
1174
|
class PickerButtonComponent {
|
|
1242
|
-
disabled = input(false);
|
|
1243
|
-
input = input();
|
|
1244
|
-
ariaLabel = input('');
|
|
1245
|
-
required = input();
|
|
1175
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1176
|
+
input = input(...(ngDevMode ? [undefined, { debugName: "input" }] : []));
|
|
1177
|
+
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
1178
|
+
required = input(...(ngDevMode ? [undefined, { debugName: "required" }] : []));
|
|
1246
1179
|
platform = inject(PLATFORM_ID);
|
|
1247
|
-
icon = computed(() => this.getIcon());
|
|
1180
|
+
icon = computed(() => this.getIcon(), ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
1248
1181
|
onClick() {
|
|
1249
1182
|
const inputElement = this.input()?.element;
|
|
1250
1183
|
if (!inputElement) {
|
|
@@ -1272,41 +1205,41 @@ class PickerButtonComponent {
|
|
|
1272
1205
|
}
|
|
1273
1206
|
return undefined;
|
|
1274
1207
|
}
|
|
1275
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1276
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1208
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PickerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: PickerButtonComponent, isStandalone: true, selector: "ndw-picker-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon(); as icon) {\n <ndw-input-button (buttonClicked)=\"onClick()\">{{ icon }}</ndw-input-button>\n}\n", dependencies: [{ kind: "component", type: InputButtonComponent, selector: "ndw-input-button", inputs: ["disabled", "input", "ariaLabel", "alternative"], outputs: ["buttonClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1277
1210
|
}
|
|
1278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PickerButtonComponent, decorators: [{
|
|
1279
1212
|
type: Component,
|
|
1280
1213
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [InputButtonComponent], selector: 'ndw-picker-button', template: "@if (icon(); as icon) {\n <ndw-input-button (buttonClicked)=\"onClick()\">{{ icon }}</ndw-input-button>\n}\n" }]
|
|
1281
1214
|
}] });
|
|
1282
1215
|
|
|
1283
1216
|
class SuccessComponent {
|
|
1284
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1285
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1217
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1218
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SuccessComponent, isStandalone: true, selector: "ndw-success", ngImport: i0, template: "<ndw-icon>check</ndw-icon>\n<ng-content />\n", styles: [":host{align-content: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:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1286
1219
|
}
|
|
1287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SuccessComponent, decorators: [{
|
|
1288
1221
|
type: Component,
|
|
1289
1222
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-success', template: "<ndw-icon>check</ndw-icon>\n<ng-content />\n", styles: [":host{align-content: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:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"] }]
|
|
1290
1223
|
}] });
|
|
1291
1224
|
|
|
1292
1225
|
class FormFieldComponent {
|
|
1293
|
-
label = input.required();
|
|
1294
|
-
suffixAriaLabel = input('');
|
|
1295
|
-
hideLabel = input(false);
|
|
1296
|
-
disabled = input(false);
|
|
1297
|
-
error = input();
|
|
1298
|
-
success = input();
|
|
1299
|
-
info = input();
|
|
1300
|
-
tooltip = input('');
|
|
1226
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1227
|
+
suffixAriaLabel = input('', ...(ngDevMode ? [{ debugName: "suffixAriaLabel" }] : []));
|
|
1228
|
+
hideLabel = input(false, ...(ngDevMode ? [{ debugName: "hideLabel" }] : []));
|
|
1229
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1230
|
+
error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
|
|
1231
|
+
success = input(...(ngDevMode ? [undefined, { debugName: "success" }] : []));
|
|
1232
|
+
info = input(...(ngDevMode ? [undefined, { debugName: "info" }] : []));
|
|
1233
|
+
tooltip = input('', ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
|
|
1301
1234
|
clearButtonClicked = output();
|
|
1302
|
-
monthInput = contentChild(MonthInputComponent);
|
|
1303
|
-
regularInput = contentChild(InputDirective);
|
|
1304
|
-
input = computed(() => this.regularInput() ?? this.monthInput()?.input());
|
|
1305
|
-
inputType = computed(() => this.input()?.element.type);
|
|
1306
|
-
isSearchInput = computed(() => this.inputType() === 'search');
|
|
1235
|
+
monthInput = contentChild(MonthInputComponent, ...(ngDevMode ? [{ debugName: "monthInput" }] : []));
|
|
1236
|
+
regularInput = contentChild(InputDirective, ...(ngDevMode ? [{ debugName: "regularInput" }] : []));
|
|
1237
|
+
input = computed(() => this.regularInput() ?? this.monthInput()?.input(), ...(ngDevMode ? [{ debugName: "input" }] : []));
|
|
1238
|
+
inputType = computed(() => this.input()?.element.type, ...(ngDevMode ? [{ debugName: "inputType" }] : []));
|
|
1239
|
+
isSearchInput = computed(() => this.inputType() === 'search', ...(ngDevMode ? [{ debugName: "isSearchInput" }] : []));
|
|
1307
1240
|
hasPickerButton = computed(() => this.inputType() === 'date' ||
|
|
1308
1241
|
this.inputType() === 'time' ||
|
|
1309
|
-
this.input()?.element.nodeName.toLowerCase() === FormFieldElement.Select);
|
|
1242
|
+
this.input()?.element.nodeName.toLowerCase() === FormFieldElement.Select, ...(ngDevMode ? [{ debugName: "hasPickerButton" }] : []));
|
|
1310
1243
|
uuid = crypto.randomUUID();
|
|
1311
1244
|
descriptionUuid = crypto.randomUUID();
|
|
1312
1245
|
inputContainerClass = INPUT_CONTAINER_CLASS;
|
|
@@ -1338,10 +1271,10 @@ class FormFieldComponent {
|
|
|
1338
1271
|
setAriaDescribedBy(input) {
|
|
1339
1272
|
input.ariaDescribedBy = this.descriptionUuid;
|
|
1340
1273
|
}
|
|
1341
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1342
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1274
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1275
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FormFieldComponent, isStandalone: true, selector: "ndw-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, suffixAriaLabel: { classPropertyName: "suffixAriaLabel", publicName: "suffixAriaLabel", 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 } }, outputs: { clearButtonClicked: "clearButtonClicked" }, 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 <div\n [class]=\"inputContainerClass\"\n [attr.success]=\"success() ? true : null\"\n [attr.error]=\"error() ? true : null\"\n >\n @if (isSearchInput()) {\n <ndw-input-icon>search</ndw-input-icon>\n }\n\n <ng-content />\n\n @if (isSearchInput()) {\n <ndw-clear-search-button\n [input]=\"input()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"suffixAriaLabel()\"\n (buttonClicked)=\"clearButtonClicked.emit()\"\n />\n }\n @if (hasPickerButton()) {\n <ndw-picker-button\n [input]=\"input()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"suffixAriaLabel()\"\n />\n }\n </div>\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;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;word-break:break-word}label{word-break:break-word}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: ClearSearchButtonComponent, selector: "ndw-clear-search-button", inputs: ["disabled", "input", "ariaLabel"], outputs: ["buttonClicked"] }, { kind: "component", type: ErrorComponent, selector: "ndw-error" }, { kind: "component", type: InfoComponent, selector: "ndw-info" }, { kind: "component", type: InputIconComponent, selector: "ndw-input-icon" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PickerButtonComponent, selector: "ndw-picker-button", inputs: ["disabled", "input", "ariaLabel", "required"] }, { kind: "component", type: SuccessComponent, selector: "ndw-success" }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1343
1276
|
}
|
|
1344
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1277
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
1345
1278
|
type: Component,
|
|
1346
1279
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1347
1280
|
ClearSearchButtonComponent,
|
|
@@ -1357,13 +1290,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1357
1290
|
}], ctorParameters: () => [] });
|
|
1358
1291
|
|
|
1359
1292
|
class RadioButtonComponent {
|
|
1360
|
-
checked = model(false);
|
|
1361
|
-
disabled = model(false);
|
|
1362
|
-
error = input(false);
|
|
1363
|
-
success = input(false);
|
|
1364
|
-
required = input(false);
|
|
1365
|
-
value = model();
|
|
1366
|
-
name = signal(undefined);
|
|
1293
|
+
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
1294
|
+
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1295
|
+
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1296
|
+
success = input(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
1297
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1298
|
+
value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
1299
|
+
name = signal(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
1367
1300
|
uuid = crypto.randomUUID();
|
|
1368
1301
|
onInputChange(event) {
|
|
1369
1302
|
const input = event.target;
|
|
@@ -1381,8 +1314,8 @@ class RadioButtonComponent {
|
|
|
1381
1314
|
setDisabledState(isDisabled) {
|
|
1382
1315
|
this.disabled.set(isDisabled);
|
|
1383
1316
|
}
|
|
1384
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1385
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1317
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1318
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 }, 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", value: "valueChange" }, host: { properties: { "class.checked": "checked()", "class.disabled": "disabled()" } }, providers: [
|
|
1386
1319
|
{
|
|
1387
1320
|
provide: NG_VALUE_ACCESSOR,
|
|
1388
1321
|
useExisting: RadioButtonComponent,
|
|
@@ -1390,7 +1323,7 @@ class RadioButtonComponent {
|
|
|
1390
1323
|
},
|
|
1391
1324
|
], ngImport: i0, template: "<input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"'radio-button-' + uuid\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (change)=\"onInputChange($event)\"\n/>\n<label tabindex=\"-1\" id=\"radio-button-label-{{ uuid }}\" [for]=\"'radio-button-' + uuid\">\n <div class=\"radio-button\" aria-hidden=\"true\" [ngClass]=\"{ error: error(), success: success() }\">\n @if (checked()) {\n <span class=\"check\"></span>\n }\n </div>\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,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}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);flex-shrink:0}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;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}: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-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) 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", ".radio-button{border-radius:50%}.radio-button .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) .radio-button{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) .radio-button{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 });
|
|
1392
1325
|
}
|
|
1393
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
1394
1327
|
type: Component,
|
|
1395
1328
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1396
1329
|
'[class.checked]': 'checked()',
|
|
@@ -1405,7 +1338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1405
1338
|
}] });
|
|
1406
1339
|
|
|
1407
1340
|
class RadioGroupComponent {
|
|
1408
|
-
radioButtons = contentChildren(RadioButtonComponent);
|
|
1341
|
+
radioButtons = contentChildren(RadioButtonComponent, ...(ngDevMode ? [{ debugName: "radioButtons" }] : []));
|
|
1409
1342
|
uuid = crypto.randomUUID();
|
|
1410
1343
|
onChange = noop;
|
|
1411
1344
|
ngAfterContentInit() {
|
|
@@ -1427,8 +1360,8 @@ class RadioGroupComponent {
|
|
|
1427
1360
|
setDisabledState(isDisabled) {
|
|
1428
1361
|
this.radioButtons().forEach((radio) => radio.disabled.set(isDisabled));
|
|
1429
1362
|
}
|
|
1430
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1431
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
1363
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1364
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: RadioGroupComponent, isStandalone: true, selector: "ndw-radio-group", host: { attributes: { "role": "radiogroup" } }, providers: [
|
|
1432
1365
|
{
|
|
1433
1366
|
provide: NG_VALUE_ACCESSOR,
|
|
1434
1367
|
useExisting: RadioGroupComponent,
|
|
@@ -1436,7 +1369,7 @@ class RadioGroupComponent {
|
|
|
1436
1369
|
},
|
|
1437
1370
|
], queries: [{ propertyName: "radioButtons", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1438
1371
|
}
|
|
1439
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
1440
1373
|
type: Component,
|
|
1441
1374
|
args: [{ host: {
|
|
1442
1375
|
role: 'radiogroup',
|
|
@@ -1485,10 +1418,10 @@ class AutoGrowDirective {
|
|
|
1485
1418
|
.pipe(startWith(this.ngControl.value), takeUntilDestroyed(this.destroyRef))
|
|
1486
1419
|
.subscribe(() => this.fitContentInTextArea());
|
|
1487
1420
|
}
|
|
1488
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1489
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1421
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutoGrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1422
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: AutoGrowDirective, isStandalone: true, selector: "textarea[ndwAutoGrow]", host: { listeners: { "input": "fitContentInTextArea()" } }, ngImport: i0 });
|
|
1490
1423
|
}
|
|
1491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutoGrowDirective, decorators: [{
|
|
1492
1425
|
type: Directive,
|
|
1493
1426
|
args: [{
|
|
1494
1427
|
selector: 'textarea[ndwAutoGrow]',
|
|
@@ -1499,8 +1432,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1499
1432
|
}] });
|
|
1500
1433
|
|
|
1501
1434
|
class MaxCharDirective {
|
|
1502
|
-
ndwMaxChar = input(0);
|
|
1503
|
-
maxCharText = input('');
|
|
1435
|
+
ndwMaxChar = input(0, ...(ngDevMode ? [{ debugName: "ndwMaxChar" }] : []));
|
|
1436
|
+
maxCharText = input('', ...(ngDevMode ? [{ debugName: "maxCharText" }] : []));
|
|
1504
1437
|
elementRef = inject(ElementRef);
|
|
1505
1438
|
renderer = inject(Renderer2);
|
|
1506
1439
|
destroyRef = inject(DestroyRef);
|
|
@@ -1516,8 +1449,8 @@ class MaxCharDirective {
|
|
|
1516
1449
|
}
|
|
1517
1450
|
return this.element.parentElement.style;
|
|
1518
1451
|
}
|
|
1519
|
-
isRendered = signal(false);
|
|
1520
|
-
isDisabled = signal(false);
|
|
1452
|
+
isRendered = signal(false, ...(ngDevMode ? [{ debugName: "isRendered" }] : []));
|
|
1453
|
+
isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
1521
1454
|
ngControl = inject(NgControl, { optional: true });
|
|
1522
1455
|
disabledAttrObserver = null;
|
|
1523
1456
|
constructor() {
|
|
@@ -1600,10 +1533,10 @@ class MaxCharDirective {
|
|
|
1600
1533
|
this.element.style.paddingBottom = this.originalElementStyle?.paddingBottom ?? '';
|
|
1601
1534
|
this.element.style.scrollPaddingBottom = this.originalElementStyle?.scrollPaddingBottom ?? '';
|
|
1602
1535
|
}
|
|
1603
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1604
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1536
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MaxCharDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1537
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: MaxCharDirective, isStandalone: true, selector: "textarea[ndwMaxChar]", inputs: { ndwMaxChar: { classPropertyName: "ndwMaxChar", publicName: "ndwMaxChar", isSignal: true, isRequired: false, transformFunction: null }, maxCharText: { classPropertyName: "maxCharText", publicName: "maxCharText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()" } }, ngImport: i0 });
|
|
1605
1538
|
}
|
|
1606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MaxCharDirective, decorators: [{
|
|
1607
1540
|
type: Directive,
|
|
1608
1541
|
args: [{
|
|
1609
1542
|
selector: 'textarea[ndwMaxChar]',
|
|
@@ -1614,38 +1547,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1614
1547
|
}], ctorParameters: () => [] });
|
|
1615
1548
|
|
|
1616
1549
|
class PillComponent extends CorePillComponent {
|
|
1617
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1618
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1550
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PillComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1551
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: PillComponent, isStandalone: true, selector: "ndw-pill", host: { classAttribute: "ndw-paragraph-md" }, usesInheritance: true, ngImport: i0, template: "<div>\n <ng-content />\n</div>\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);padding:var(--pill-padding-vertical) var(--pill-padding-horizontal);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--pill-green-color);background-color:var(--pill-green-background-color)}:host.gray{color:var(--pill-gray-color);background-color:var(--pill-gray-background-color)}:host.blue{color:var(--pill-blue-color);background-color:var(--pill-blue-background-color)}:host.purple{color:var(--pill-purple-color);background-color:var(--pill-purple-background-color)}:host.yellow{color:var(--pill-yellow-color);background-color:var(--pill-yellow-background-color)}:host.red{color:var(--pill-red-color);background-color:var(--pill-red-background-color)}:host{--pill-border-radius: var(--ndw-border-radius-sm);--pill-padding-vertical: var(--ndw-spacing-3xs);--pill-padding-horizontal: var(--ndw-spacing-2xs);--pill-green-color: var(--ndw-color-positive-600);--pill-green-background-color: var(--ndw-color-positive-100);--pill-gray-color: var(--ndw-color-grey-600);--pill-gray-background-color: var(--ndw-color-grey-200);--pill-blue-color: var(--ndw-color-info-500);--pill-blue-background-color: var(--ndw-color-info-100);--pill-purple-color: var(--ndw-color-alternative-500);--pill-purple-background-color: var(--ndw-color-alternative-100);--pill-yellow-color: var(--ndw-color-grey-600);--pill-yellow-background-color: var(--ndw-color-warning-100);--pill-red-color: var(--ndw-color-critical-500);--pill-red-background-color: var(--ndw-color-critical-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1619
1552
|
}
|
|
1620
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1553
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PillComponent, decorators: [{
|
|
1621
1554
|
type: Component,
|
|
1622
1555
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1623
1556
|
class: 'ndw-paragraph-md',
|
|
1624
|
-
}, selector: 'ndw-pill', template: "<div>\n <ng-content />\n</div>\n", styles: [":host{
|
|
1557
|
+
}, selector: 'ndw-pill', template: "<div>\n <ng-content />\n</div>\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);padding:var(--pill-padding-vertical) var(--pill-padding-horizontal);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--pill-green-color);background-color:var(--pill-green-background-color)}:host.gray{color:var(--pill-gray-color);background-color:var(--pill-gray-background-color)}:host.blue{color:var(--pill-blue-color);background-color:var(--pill-blue-background-color)}:host.purple{color:var(--pill-purple-color);background-color:var(--pill-purple-background-color)}:host.yellow{color:var(--pill-yellow-color);background-color:var(--pill-yellow-background-color)}:host.red{color:var(--pill-red-color);background-color:var(--pill-red-background-color)}:host{--pill-border-radius: var(--ndw-border-radius-sm);--pill-padding-vertical: var(--ndw-spacing-3xs);--pill-padding-horizontal: var(--ndw-spacing-2xs);--pill-green-color: var(--ndw-color-positive-600);--pill-green-background-color: var(--ndw-color-positive-100);--pill-gray-color: var(--ndw-color-grey-600);--pill-gray-background-color: var(--ndw-color-grey-200);--pill-blue-color: var(--ndw-color-info-500);--pill-blue-background-color: var(--ndw-color-info-100);--pill-purple-color: var(--ndw-color-alternative-500);--pill-purple-background-color: var(--ndw-color-alternative-100);--pill-yellow-color: var(--ndw-color-grey-600);--pill-yellow-background-color: var(--ndw-color-warning-100);--pill-red-color: var(--ndw-color-critical-500);--pill-red-background-color: var(--ndw-color-critical-100)}\n"] }]
|
|
1625
1558
|
}] });
|
|
1626
1559
|
|
|
1627
1560
|
class ListItemComponent {
|
|
1628
|
-
active = model(false);
|
|
1629
|
-
badgeValue = input();
|
|
1630
|
-
buttonIcon = input();
|
|
1631
|
-
buttonLabel = input();
|
|
1632
|
-
checkable = input(false);
|
|
1633
|
-
checkType = input('checkbox');
|
|
1634
|
-
collapsible = input(false);
|
|
1635
|
-
disabled = input(false);
|
|
1636
|
-
indented = input(false);
|
|
1637
|
-
pillColor = input('green');
|
|
1638
|
-
pillLabel = input();
|
|
1639
|
-
prefixIcon = input();
|
|
1640
|
-
showButton = input(false);
|
|
1641
|
-
subtitle = input();
|
|
1642
|
-
title = input();
|
|
1561
|
+
active = model(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
1562
|
+
badgeValue = input(...(ngDevMode ? [undefined, { debugName: "badgeValue" }] : []));
|
|
1563
|
+
buttonIcon = input(...(ngDevMode ? [undefined, { debugName: "buttonIcon" }] : []));
|
|
1564
|
+
buttonLabel = input(...(ngDevMode ? [undefined, { debugName: "buttonLabel" }] : []));
|
|
1565
|
+
checkable = input(false, ...(ngDevMode ? [{ debugName: "checkable" }] : []));
|
|
1566
|
+
checkType = input('checkbox', ...(ngDevMode ? [{ debugName: "checkType" }] : []));
|
|
1567
|
+
collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
|
|
1568
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1569
|
+
indented = input(false, ...(ngDevMode ? [{ debugName: "indented" }] : []));
|
|
1570
|
+
pillColor = input('green', ...(ngDevMode ? [{ debugName: "pillColor" }] : []));
|
|
1571
|
+
pillLabel = input(...(ngDevMode ? [undefined, { debugName: "pillLabel" }] : []));
|
|
1572
|
+
prefixIcon = input(...(ngDevMode ? [undefined, { debugName: "prefixIcon" }] : []));
|
|
1573
|
+
showButton = input(false, ...(ngDevMode ? [{ debugName: "showButton" }] : []));
|
|
1574
|
+
subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
|
|
1575
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
1643
1576
|
buttonClicked = output();
|
|
1644
|
-
checked = model(false);
|
|
1645
|
-
expanded = model(false);
|
|
1646
|
-
radioButton = viewChild(RadioButtonComponent);
|
|
1647
|
-
name = signal(undefined);
|
|
1648
|
-
actionable = computed(() => this.checkable() || this.collapsible());
|
|
1577
|
+
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
1578
|
+
expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
|
|
1579
|
+
radioButton = viewChild(RadioButtonComponent, ...(ngDevMode ? [{ debugName: "radioButton" }] : []));
|
|
1580
|
+
name = signal(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
1581
|
+
actionable = computed(() => this.checkable() || this.collapsible(), ...(ngDevMode ? [{ debugName: "actionable" }] : []));
|
|
1649
1582
|
constructor() {
|
|
1650
1583
|
effect(() => {
|
|
1651
1584
|
const name = this.name();
|
|
@@ -1676,10 +1609,10 @@ class ListItemComponent {
|
|
|
1676
1609
|
#toggleExpanded() {
|
|
1677
1610
|
this.expanded.update((expanded) => !expanded);
|
|
1678
1611
|
}
|
|
1679
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1680
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1612
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1613
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ListItemComponent, isStandalone: true, selector: "ndw-list-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indented: { classPropertyName: "indented", publicName: "indented", isSignal: true, isRequired: false, transformFunction: null }, pillColor: { classPropertyName: "pillColor", publicName: "pillColor", isSignal: true, isRequired: false, transformFunction: null }, pillLabel: { classPropertyName: "pillLabel", publicName: "pillLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", buttonClicked: "buttonClicked", checked: "checkedChange", expanded: "expandedChange" }, host: { attributes: { "role": "listitem" } }, viewQueries: [{ propertyName: "radioButton", first: true, predicate: RadioButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (actionable()) {\n <button\n ndw-list-item\n class=\"actionable\"\n [attr.active]=\"active() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.disabled]=\"disabled() || undefined\"\n [class.indented]=\"indented()\"\n (click)=\"onListItemSelect()\"\n >\n @if (checkable()) {\n @if (checkType() === 'radio') {\n <ndw-radio-button\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n } @else {\n <ndw-checkbox\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n }\n }\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n} @else {\n <div ndw-list-item [class.indented]=\"indented()\">\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </div>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n @if (pillLabel(); as pillLabel) {\n <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n }\n @if (badgeValue(); as badgeValue) {\n <ndw-badge [value]=\"badgeValue\" />\n }\n @if (showButton()) {\n <button\n ndwButton\n tertiary\n class=\"suffix-button\"\n [attr.aria-label]=\"buttonLabel()\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n </button>\n }\n @if (collapsible()) {\n <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n }\n</ng-template>\n", styles: ["[ndw-list-item]{align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[ndw-list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[ndw-list-item] ndw-checkbox.readonly,[ndw-list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[ndw-list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[ndw-list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[ndw-list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[ndw-list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { kind: "component", type: CheckboxComponent, selector: "ndw-checkbox", inputs: ["switch", "success"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillComponent, selector: "ndw-pill" }, { kind: "component", type: RadioButtonComponent, selector: "ndw-radio-button", inputs: ["checked", "disabled", "error", "success", "required", "value"], outputs: ["checkedChange", "disabledChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1681
1614
|
}
|
|
1682
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
1683
1616
|
type: Component,
|
|
1684
1617
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1685
1618
|
role: 'listitem',
|
|
@@ -1690,7 +1623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1690
1623
|
NgTemplateOutlet,
|
|
1691
1624
|
PillComponent,
|
|
1692
1625
|
RadioButtonComponent,
|
|
1693
|
-
], selector: 'ndw-list-item', template: "@if (actionable()) {\n <button\n ndw-list-item\n class=\"actionable\"\n [attr.active]=\"active() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.disabled]=\"disabled() || undefined\"\n [class.indented]=\"indented()\"\n (click)=\"onListItemSelect()\"\n >\n @if (checkable()) {\n @if (checkType() === 'radio') {\n <ndw-radio-button\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n } @else {\n <ndw-checkbox\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n }\n }\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n} @else {\n <div ndw-list-item [class.indented]=\"indented()\">\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </div>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n @if (pillLabel(); as pillLabel) {\n <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n }\n @if (badgeValue(); as badgeValue) {\n <ndw-badge [value]=\"badgeValue\" />\n }\n @if (showButton()) {\n <button\n ndwButton\n tertiary\n class=\"suffix-button\"\n [attr.aria-label]=\"buttonLabel()\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n </button>\n }\n @if (collapsible()) {\n <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n }\n</ng-template>\n", styles: ["[ndw-list-item]{
|
|
1626
|
+
], selector: 'ndw-list-item', template: "@if (actionable()) {\n <button\n ndw-list-item\n class=\"actionable\"\n [attr.active]=\"active() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.disabled]=\"disabled() || undefined\"\n [class.indented]=\"indented()\"\n (click)=\"onListItemSelect()\"\n >\n @if (checkable()) {\n @if (checkType() === 'radio') {\n <ndw-radio-button\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n } @else {\n <ndw-checkbox\n [disabled]=\"disabled()\"\n [class.readonly]=\"!collapsible() && !indented()\"\n [(checked)]=\"checked\"\n (click)=\"onCheckClick($event)\"\n />\n }\n }\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n} @else {\n <div ndw-list-item [class.indented]=\"indented()\">\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </div>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n @if (pillLabel(); as pillLabel) {\n <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n }\n @if (badgeValue(); as badgeValue) {\n <ndw-badge [value]=\"badgeValue\" />\n }\n @if (showButton()) {\n <button\n ndwButton\n tertiary\n class=\"suffix-button\"\n [attr.aria-label]=\"buttonLabel()\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n </button>\n }\n @if (collapsible()) {\n <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n }\n</ng-template>\n", styles: ["[ndw-list-item]{align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[ndw-list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[ndw-list-item] ndw-checkbox.readonly,[ndw-list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[ndw-list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[ndw-list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[ndw-list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[ndw-list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
|
|
1694
1627
|
}], ctorParameters: () => [] });
|
|
1695
1628
|
|
|
1696
1629
|
const collapsibleAnimation = [
|
|
@@ -1719,27 +1652,27 @@ const collapsibleAnimation = [
|
|
|
1719
1652
|
];
|
|
1720
1653
|
|
|
1721
1654
|
class CollapsibleComponent {
|
|
1722
|
-
index = input.required();
|
|
1723
|
-
title = input.required();
|
|
1724
|
-
checkable = input(false);
|
|
1725
|
-
subtitle = input();
|
|
1726
|
-
value = input();
|
|
1727
|
-
expanded = model(false);
|
|
1655
|
+
index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
|
|
1656
|
+
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
1657
|
+
checkable = input(false, ...(ngDevMode ? [{ debugName: "checkable" }] : []));
|
|
1658
|
+
subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
|
|
1659
|
+
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
1660
|
+
expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
|
|
1728
1661
|
accordionService = inject(AccordionService);
|
|
1729
1662
|
uuid = crypto.randomUUID();
|
|
1730
1663
|
toggleUuid = `toggle-${this.uuid}`;
|
|
1731
1664
|
sectionUuid = `section-${this.uuid}`;
|
|
1732
|
-
animationState = computed(() => (this.expanded() ? 'open' : 'closed'));
|
|
1665
|
+
animationState = computed(() => (this.expanded() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "animationState" }] : []));
|
|
1733
1666
|
toggle() {
|
|
1734
1667
|
this.expanded.set(!this.expanded());
|
|
1735
1668
|
if (this.expanded()) {
|
|
1736
1669
|
this.accordionService.setExpandedCollapsible(this.index());
|
|
1737
1670
|
}
|
|
1738
1671
|
}
|
|
1739
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1740
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1672
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1673
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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 }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, 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": "expanded()" } }, ngImport: i0, template: "<ndw-list-item\n [attr.aria-controls]=\"sectionUuid\"\n [badgeValue]=\"value()\"\n [checkable]=\"checkable()\"\n [collapsible]=\"true\"\n [expanded]=\"expanded()\"\n [subtitle]=\"subtitle()\"\n [title]=\"title()\"\n (expandedChange)=\"toggle()\"\n>\n <ng-content select=\"custom-header-content\" />\n</ndw-list-item>\n<section\n role=\"region\"\n class=\"content\"\n [id]=\"sectionUuid\"\n [attr.aria-labelledby]=\"toggleUuid\"\n [@collapsible]=\"animationState()\"\n>\n <ng-content />\n</section>\n", styles: [":host{display:block}:host .content{border-block-start:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-bottom-left-radius:var(--ndw-border-radius-sm);border-bottom-right-radius:var(--ndw-border-radius-sm);display:none;height:fit-content;margin-block:0;overflow:hidden;transition:height var(--ndw-animation-speed-fast) ease-in-out}:host.expanded .content{display:block}\n"], dependencies: [{ kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "buttonIcon", "buttonLabel", "checkable", "checkType", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], animations: [collapsibleAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1741
1674
|
}
|
|
1742
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CollapsibleComponent, decorators: [{
|
|
1743
1676
|
type: Component,
|
|
1744
1677
|
args: [{ animations: [collapsibleAnimation], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1745
1678
|
'[class.expanded]': 'expanded()',
|
|
@@ -1747,8 +1680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1747
1680
|
}] });
|
|
1748
1681
|
|
|
1749
1682
|
class ListComponent {
|
|
1750
|
-
elevated = input(false);
|
|
1751
|
-
listItems = contentChildren(ListItemComponent);
|
|
1683
|
+
elevated = input(false, ...(ngDevMode ? [{ debugName: "elevated" }] : []));
|
|
1684
|
+
listItems = contentChildren(ListItemComponent, ...(ngDevMode ? [{ debugName: "listItems" }] : []));
|
|
1752
1685
|
#uuid = crypto.randomUUID();
|
|
1753
1686
|
ngAfterContentInit() {
|
|
1754
1687
|
const items = [...this.listItems()];
|
|
@@ -1758,15 +1691,15 @@ class ListComponent {
|
|
|
1758
1691
|
setRadioItemsName(items, this.#uuid);
|
|
1759
1692
|
checkRadioItems(items);
|
|
1760
1693
|
}
|
|
1761
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1762
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
1694
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1695
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: ListComponent, isStandalone: true, selector: "ndw-list", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class.elevated": "elevated()" } }, queries: [{ propertyName: "listItems", predicate: ListItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{background-color:var(--list-background-color);border:var(--list-border);border-radius:var(--list-border-radius);display:grid;overflow:hidden}:host{--list-border-radius: var(--ndw-border-radius-md);padding:var(--ndw-spacing-xs)}:host.elevated{box-shadow:var(--ndw-elevation-popover)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1763
1696
|
}
|
|
1764
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1697
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ListComponent, decorators: [{
|
|
1765
1698
|
type: Component,
|
|
1766
1699
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1767
1700
|
role: 'list',
|
|
1768
1701
|
'[class.elevated]': 'elevated()',
|
|
1769
|
-
}, selector: 'ndw-list', template: "<ng-content />\n", styles: [":host{
|
|
1702
|
+
}, selector: 'ndw-list', template: "<ng-content />\n", styles: [":host{background-color:var(--list-background-color);border:var(--list-border);border-radius:var(--list-border-radius);display:grid;overflow:hidden}:host{--list-border-radius: var(--ndw-border-radius-md);padding:var(--ndw-spacing-xs)}:host.elevated{box-shadow:var(--ndw-elevation-popover)}\n"] }]
|
|
1770
1703
|
}] });
|
|
1771
1704
|
|
|
1772
1705
|
class AccordionService {
|
|
@@ -1774,18 +1707,18 @@ class AccordionService {
|
|
|
1774
1707
|
setExpandedCollapsible(index) {
|
|
1775
1708
|
this.expanded$.next(index);
|
|
1776
1709
|
}
|
|
1777
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1778
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1710
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1711
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionService });
|
|
1779
1712
|
}
|
|
1780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionService, decorators: [{
|
|
1781
1714
|
type: Injectable
|
|
1782
1715
|
}] });
|
|
1783
1716
|
|
|
1784
1717
|
class AccordionComponent extends ListComponent {
|
|
1785
1718
|
#accordionService = inject(AccordionService);
|
|
1786
1719
|
#destroyRef = inject(DestroyRef);
|
|
1787
|
-
collapseOthers = input(false);
|
|
1788
|
-
collapsibles = contentChildren(CollapsibleComponent);
|
|
1720
|
+
collapseOthers = input(false, ...(ngDevMode ? [{ debugName: "collapseOthers" }] : []));
|
|
1721
|
+
collapsibles = contentChildren(CollapsibleComponent, ...(ngDevMode ? [{ debugName: "collapsibles" }] : []));
|
|
1789
1722
|
ngOnInit() {
|
|
1790
1723
|
this.#accordionService.expanded$
|
|
1791
1724
|
.pipe(takeUntilDestroyed(this.#destroyRef))
|
|
@@ -1798,10 +1731,10 @@ class AccordionComponent extends ListComponent {
|
|
|
1798
1731
|
});
|
|
1799
1732
|
});
|
|
1800
1733
|
}
|
|
1801
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1802
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
1734
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1735
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", 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 }], usesInheritance: true, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1803
1736
|
}
|
|
1804
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1737
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
1805
1738
|
type: Component,
|
|
1806
1739
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [AccordionService], selector: 'ndw-accordion', template: "<ng-content />\n" }]
|
|
1807
1740
|
}] });
|
|
@@ -1810,29 +1743,29 @@ class AlertComponent {
|
|
|
1810
1743
|
/**
|
|
1811
1744
|
* Whether the alert is actionable, shows a close icon and a title.
|
|
1812
1745
|
*/
|
|
1813
|
-
actionable = input(false);
|
|
1746
|
+
actionable = input(false, ...(ngDevMode ? [{ debugName: "actionable" }] : []));
|
|
1814
1747
|
/**
|
|
1815
1748
|
* The title of the alert. Only used when actionable is true.
|
|
1816
1749
|
*/
|
|
1817
|
-
title = input();
|
|
1750
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
1818
1751
|
/**
|
|
1819
1752
|
* Use info, info-grey, warning or critical to indicate the type of alert.
|
|
1820
1753
|
*/
|
|
1821
|
-
type = input('info-grey');
|
|
1754
|
+
type = input('info-grey', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
1822
1755
|
/**
|
|
1823
1756
|
* Use polite, assertive or off to indicate whether the alert is
|
|
1824
1757
|
* announced automatically by the screen reader.
|
|
1825
1758
|
*/
|
|
1826
|
-
ariaLive = input('off');
|
|
1759
|
+
ariaLive = input('off', ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
|
|
1827
1760
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
1828
1761
|
close = output();
|
|
1829
1762
|
onClose() {
|
|
1830
1763
|
this.close.emit();
|
|
1831
1764
|
}
|
|
1832
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1833
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1765
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1766
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: { attributes: { "role": "alert" }, properties: { "attr.aria-live": "ariaLive()", "class": "type()", "class.actionable": "actionable()" } }, 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 ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose()\">\n <span class=\"sr-only\">Sluit melding</span>\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,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;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;column-gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;padding-block:var(--ndw-spacing-xs) var(--ndw-spacing-2xs);padding-inline:var(--ndw-spacing-xs);word-break:break-word}: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:100%;margin:0}:host.actionable{grid-template-columns:1fr;padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}: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-info-100);border-color:var(--ndw-color-info-500)}:host.info section .info-icon{color:var(--ndw-color-info-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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1834
1767
|
}
|
|
1835
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AlertComponent, decorators: [{
|
|
1836
1769
|
type: Component,
|
|
1837
1770
|
args: [{ host: {
|
|
1838
1771
|
'[attr.aria-live]': 'ariaLive()',
|
|
@@ -1843,13 +1776,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1843
1776
|
}] });
|
|
1844
1777
|
|
|
1845
1778
|
class AvatarComponent {
|
|
1846
|
-
status = input('none');
|
|
1847
|
-
initials = input(false);
|
|
1848
|
-
color = input();
|
|
1849
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1850
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1779
|
+
status = input('none', ...(ngDevMode ? [{ debugName: "status" }] : []));
|
|
1780
|
+
initials = input(false, ...(ngDevMode ? [{ debugName: "initials" }] : []));
|
|
1781
|
+
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
1782
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1783
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AvatarComponent, isStandalone: true, selector: "ndw-avatar", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()" } }, ngImport: i0, template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\n <ng-content />\n</div>\n\n@if (status() !== 'none') {\n <div class=\"status-circle\" [ngClass]=\"{ approved: status() === 'approved' }\">\n @if (status() === 'approved') {\n <ndw-icon>check</ndw-icon>\n }\n </div>\n}\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1851
1784
|
}
|
|
1852
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
1853
1786
|
type: Component,
|
|
1854
1787
|
args: [{ host: {
|
|
1855
1788
|
'[attr.color]': 'color()',
|
|
@@ -1860,30 +1793,30 @@ class BannerComponent {
|
|
|
1860
1793
|
/**
|
|
1861
1794
|
* The title of the banner.
|
|
1862
1795
|
*/
|
|
1863
|
-
title = input.required();
|
|
1796
|
+
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
1864
1797
|
/**
|
|
1865
1798
|
* The message of the banner.
|
|
1866
1799
|
*/
|
|
1867
|
-
message = input.required();
|
|
1800
|
+
message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
1868
1801
|
/**
|
|
1869
1802
|
* The read more label if the message is truncated.
|
|
1870
1803
|
*/
|
|
1871
|
-
readMoreLabel = input('lees verder');
|
|
1804
|
+
readMoreLabel = input('lees verder', ...(ngDevMode ? [{ debugName: "readMoreLabel" }] : []));
|
|
1872
1805
|
/**
|
|
1873
1806
|
* Use info, info-grey, warning, positive or critical to indicate the type of banner.
|
|
1874
1807
|
*/
|
|
1875
|
-
type = input('info');
|
|
1808
|
+
type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
1876
1809
|
/**
|
|
1877
1810
|
* Use polite, assertive or off to indicate whether the alert is
|
|
1878
1811
|
* announced automatically by the screen reader.
|
|
1879
1812
|
*/
|
|
1880
|
-
ariaLive = input('off');
|
|
1813
|
+
ariaLive = input('off', ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
|
|
1881
1814
|
/**
|
|
1882
1815
|
* Emits when the banner close button is clicked.
|
|
1883
1816
|
*/
|
|
1884
1817
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
1885
1818
|
close = output();
|
|
1886
|
-
textContent = viewChild('textContent');
|
|
1819
|
+
textContent = viewChild('textContent', ...(ngDevMode ? [{ debugName: "textContent" }] : []));
|
|
1887
1820
|
showReadMore = false;
|
|
1888
1821
|
ngAfterViewInit() {
|
|
1889
1822
|
this.setReadMore();
|
|
@@ -1896,10 +1829,10 @@ class BannerComponent {
|
|
|
1896
1829
|
this.showReadMore =
|
|
1897
1830
|
this.textContent()?.nativeElement.scrollWidth > this.textContent()?.nativeElement.clientWidth;
|
|
1898
1831
|
}
|
|
1899
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1900
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1832
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1833
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BannerComponent, isStandalone: true, selector: "ndw-banner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, readMoreLabel: { classPropertyName: "readMoreLabel", publicName: "readMoreLabel", 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: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "window:resize": "setReadMore()" }, properties: { "attr.aria-live": "ariaLive()", "attr.title": "message()", "class": "type()" } }, viewQueries: [{ propertyName: "textContent", first: true, predicate: ["textContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<section>\n <ndw-icon class=\"info-icon\">info</ndw-icon>\n <p #textContent>\n <strong>{{ title() }}:</strong>\n {{ message() }}\n </p>\n @if (showReadMore) {\n <p>{{ readMoreLabel() }}</p>\n }\n</section>\n<button ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose($event)\">\n <span class=\"sr-only\">Sluit melding</span>\n <ndw-icon>close</ndw-icon>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;background-color:var(--ndw-color-secondary-050);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-alpha-black-015);color:var(--ndw-color-info-500);cursor:pointer;display:grid;gap:var(--ndw-spacing-xs);grid-template-columns:1fr auto;height:var(--ndw-spacing-xl);padding-inline:var(--ndw-spacing-2xs);transition:background-color var(--ndw-animation-speed-default) ease-out}:host section{align-items:center;display:grid;gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr auto;justify-content:center;text-align:center}:host section .info-icon{font-size:var(--ndw-font-size-lg)}:host section p{font-size:var(--ndw-font-size-sm);line-height:var(--ndw-line-height-md);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host section p strong{font-weight:var(--ndw-font-weight-bold)}:host button ndw-icon{color:var(--ndw-color-info-500)}:host:hover{background-color:var(--ndw-color-info-200)}:host:active,:host:focus{background-color:var(--ndw-color-info-300)}:host.critical{background-color:var(--ndw-color-critical-100);color:var(--ndw-color-critical-500)}:host.critical section .info-icon,:host.critical button ndw-icon{color:var(--ndw-color-critical-500)}:host.critical:hover{background-color:var(--ndw-color-critical-200)}:host.critical:active,:host.critical:focus{background-color:var(--ndw-color-critical-300)}:host.positive{background-color:var(--ndw-color-positive-100);color:var(--ndw-color-grey-600)}:host.positive section .info-icon,:host.positive button ndw-icon{color:var(--ndw-color-positive-500)}:host.positive:hover{background-color:var(--ndw-color-positive-200)}:host.positive:active,:host.positive:focus{background-color:var(--ndw-color-positive-300)}:host.info-grey{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}:host.info-grey section .info-icon,:host.info-grey button ndw-icon{color:var(--ndw-color-grey-500)}:host.info-grey:hover{background-color:var(--ndw-color-grey-200)}:host.info-grey:active,:host.info-grey:focus{background-color:var(--ndw-color-grey-300)}:host.warning{background-color:var(--ndw-color-warning-100);color:var(--ndw-color-grey-600)}:host.warning section .info-icon,:host.warning button ndw-icon{color:var(--ndw-color-warning-500)}:host.warning:hover{background-color:var(--ndw-color-warning-200)}:host.warning:active,:host.warning:focus{background-color:var(--ndw-color-warning-300)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1901
1834
|
}
|
|
1902
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1835
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BannerComponent, decorators: [{
|
|
1903
1836
|
type: Component,
|
|
1904
1837
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1905
1838
|
'[attr.aria-live]': 'ariaLive()',
|
|
@@ -1912,10 +1845,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1912
1845
|
}] });
|
|
1913
1846
|
|
|
1914
1847
|
class BreadcrumbComponent extends CoreBreadcrumbComponent {
|
|
1915
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1916
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1848
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1849
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BreadcrumbComponent, isStandalone: true, selector: "ndw-breadcrumb", host: { attributes: { "role": "link" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #content>\n <ng-content />\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1917
1850
|
}
|
|
1918
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
1919
1852
|
type: Component,
|
|
1920
1853
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1921
1854
|
role: 'link',
|
|
@@ -1923,29 +1856,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1923
1856
|
}] });
|
|
1924
1857
|
|
|
1925
1858
|
class BreadcrumbGroupComponent extends CoreBreadcrumbGroupComponent {
|
|
1926
|
-
breadcrumbs = contentChildren(BreadcrumbComponent);
|
|
1927
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1928
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1859
|
+
breadcrumbs = contentChildren(BreadcrumbComponent, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
|
|
1860
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BreadcrumbGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1861
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BreadcrumbGroupComponent, isStandalone: true, selector: "ndw-breadcrumb-group", queries: [{ propertyName: "breadcrumbs", predicate: BreadcrumbComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\n @if ($count > 1 && $index === $count - 2) {\n <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\n }\n\n <a\n class=\"breadcrumb\"\n [class.current-page]=\"$last\"\n [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\n [attr.aria-current]=\"$last ? 'page' : null\"\n [routerLink]=\"$last ? null : breadcrumb.link()\"\n >\n <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\n </a>\n\n @if (!$last) {\n <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\n }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.breadcrumb{color:var(--breadcrumb-color);cursor:pointer;font-family:var(--breadcrumb-font-family);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height);position:relative;text-decoration:none}.breadcrumb.current-page{color:var(--breadcrumb-current-page-color);cursor:default;font-weight:var(--breadcrumb-current-page-font-weight);pointer-events:none}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--breadcrumb-color: var(--ndw-color-grey-500);--breadcrumb-current-page-color: var(--ndw-color-grey-700);--breadcrumb-current-page-font-weight: var(--ndw-font-weight-bold);--breadcrumb-font-family: var(--ndw-font-family-body);--breadcrumb-font-size: var(--ndw-font-size-sm);--breadcrumb-font-weight: var(--ndw-font-weight-bold);--breadcrumb-line-height: 100%}.breadcrumb{background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}\n", ":host{align-items:center;background-color:var(--breadcrumb-group-background-color);color:var(--breadcrumb-group-color);display:flex;padding:var(--breadcrumb-group-padding)}.icon-back,.icon-forward{font-size:var(--breadcrumb-group-chevron-size)}.icon-back{display:none}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{--breadcrumb-group-background-color: var(--ndw-color-white);--breadcrumb-group-chevron-size: var(--ndw-font-size-md);--breadcrumb-group-color: var(--ndw-color-primary-500);--breadcrumb-group-padding: var(--ndw-spacing-md)}.icon-back,.icon-forward{margin-block-end:var(--ndw-spacing-3xs)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1929
1862
|
}
|
|
1930
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BreadcrumbGroupComponent, decorators: [{
|
|
1931
1864
|
type: Component,
|
|
1932
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-breadcrumb-group', template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\n @if ($count > 1 && $index === $count - 2) {\n <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\n }\n\n <a\n class=\"breadcrumb\"\n [class.current-page]=\"$last\"\n [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\n [attr.aria-current]=\"$last ? 'page' : null\"\n [routerLink]=\"$last ? null : breadcrumb.link()\"\n >\n <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\n </a>\n\n @if (!$last) {\n <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\n }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\"
|
|
1865
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-breadcrumb-group', template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\n @if ($count > 1 && $index === $count - 2) {\n <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\n }\n\n <a\n class=\"breadcrumb\"\n [class.current-page]=\"$last\"\n [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\n [attr.aria-current]=\"$last ? 'page' : null\"\n [routerLink]=\"$last ? null : breadcrumb.link()\"\n >\n <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\n </a>\n\n @if (!$last) {\n <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\n }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.breadcrumb{color:var(--breadcrumb-color);cursor:pointer;font-family:var(--breadcrumb-font-family);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height);position:relative;text-decoration:none}.breadcrumb.current-page{color:var(--breadcrumb-current-page-color);cursor:default;font-weight:var(--breadcrumb-current-page-font-weight);pointer-events:none}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--breadcrumb-color: var(--ndw-color-grey-500);--breadcrumb-current-page-color: var(--ndw-color-grey-700);--breadcrumb-current-page-font-weight: var(--ndw-font-weight-bold);--breadcrumb-font-family: var(--ndw-font-family-body);--breadcrumb-font-size: var(--ndw-font-size-sm);--breadcrumb-font-weight: var(--ndw-font-weight-bold);--breadcrumb-line-height: 100%}.breadcrumb{background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}\n", ":host{align-items:center;background-color:var(--breadcrumb-group-background-color);color:var(--breadcrumb-group-color);display:flex;padding:var(--breadcrumb-group-padding)}.icon-back,.icon-forward{font-size:var(--breadcrumb-group-chevron-size)}.icon-back{display:none}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{--breadcrumb-group-background-color: var(--ndw-color-white);--breadcrumb-group-chevron-size: var(--ndw-font-size-md);--breadcrumb-group-color: var(--ndw-color-primary-500);--breadcrumb-group-padding: var(--ndw-spacing-md)}.icon-back,.icon-forward{margin-block-end:var(--ndw-spacing-3xs)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"] }]
|
|
1933
1866
|
}] });
|
|
1934
1867
|
|
|
1935
1868
|
class CardContentComponent {
|
|
1936
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1937
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1869
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1870
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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;word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1938
1871
|
}
|
|
1939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1872
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CardContentComponent, decorators: [{
|
|
1940
1873
|
type: Component,
|
|
1941
1874
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-content', template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto;word-break:break-word}\n"] }]
|
|
1942
1875
|
}] });
|
|
1943
1876
|
|
|
1944
1877
|
class CardFooterComponent {
|
|
1945
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1946
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1878
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1879
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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);word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1947
1880
|
}
|
|
1948
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CardFooterComponent, decorators: [{
|
|
1949
1882
|
type: Component,
|
|
1950
1883
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-footer', 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);word-break:break-word}\n"] }]
|
|
1951
1884
|
}] });
|
|
@@ -1962,11 +1895,11 @@ const CARD_ANIMATION = trigger('cardAnimation', [
|
|
|
1962
1895
|
|
|
1963
1896
|
const CARD_ID_TOKEN = new InjectionToken('CARD_ID_TOKEN');
|
|
1964
1897
|
class CardComponent {
|
|
1965
|
-
header = contentChild(CardHeaderComponent);
|
|
1966
|
-
headerHeight = signal(0);
|
|
1898
|
+
header = contentChild(CardHeaderComponent, ...(ngDevMode ? [{ debugName: "header" }] : []));
|
|
1899
|
+
headerHeight = signal(0, ...(ngDevMode ? [{ debugName: "headerHeight" }] : []));
|
|
1967
1900
|
cardId = inject(CARD_ID_TOKEN);
|
|
1968
|
-
isCollapsable = computed(() => this.header()?.isCollapsible() ?? false);
|
|
1969
|
-
isCollapsed = model(false);
|
|
1901
|
+
isCollapsable = computed(() => this.header()?.isCollapsible() ?? false, ...(ngDevMode ? [{ debugName: "isCollapsable" }] : []));
|
|
1902
|
+
isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
|
|
1970
1903
|
ngAfterContentInit() {
|
|
1971
1904
|
const header = this.header();
|
|
1972
1905
|
if (header) {
|
|
@@ -1979,16 +1912,16 @@ class CardComponent {
|
|
|
1979
1912
|
animationState = computed(() => ({
|
|
1980
1913
|
value: this.isCollapsed() ? 'closed' : 'open',
|
|
1981
1914
|
params: { headerHeight: this.headerHeight() },
|
|
1982
|
-
}));
|
|
1983
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1984
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
1915
|
+
}), ...(ngDevMode ? [{ debugName: "animationState" }] : []));
|
|
1916
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1917
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: CardComponent, isStandalone: true, selector: "ndw-card", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, host: { attributes: { "id": "cardId" }, properties: { "@cardAnimation": "animationState()", "class.collapsible": "isCollapsable()" } }, providers: [
|
|
1985
1918
|
{
|
|
1986
1919
|
provide: CARD_ID_TOKEN,
|
|
1987
1920
|
useFactory: () => `ndw-card-${crypto.randomUUID()}`,
|
|
1988
1921
|
},
|
|
1989
1922
|
], queries: [{ propertyName: "header", first: true, predicate: CardHeaderComponent, descendants: true, isSignal: 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)}:host.collapsible{box-sizing:content-box}\n"], animations: [CARD_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1990
1923
|
}
|
|
1991
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
1992
1925
|
type: Component,
|
|
1993
1926
|
args: [{ animations: [CARD_ANIMATION], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card', providers: [
|
|
1994
1927
|
{
|
|
@@ -2004,8 +1937,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2004
1937
|
|
|
2005
1938
|
class CardHeaderComponent {
|
|
2006
1939
|
cardId = inject(CARD_ID_TOKEN, { optional: true });
|
|
2007
|
-
isCollapsible = input(false);
|
|
2008
|
-
isCollapsed = model(false);
|
|
1940
|
+
isCollapsible = input(false, ...(ngDevMode ? [{ debugName: "isCollapsible" }] : []));
|
|
1941
|
+
isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
|
|
2009
1942
|
elementRef = inject(ElementRef);
|
|
2010
1943
|
get height() {
|
|
2011
1944
|
return this.elementRef.nativeElement.offsetHeight;
|
|
@@ -2013,10 +1946,10 @@ class CardHeaderComponent {
|
|
|
2013
1946
|
toggleCollapsed() {
|
|
2014
1947
|
this.isCollapsed.set(!this.isCollapsed());
|
|
2015
1948
|
}
|
|
2016
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2017
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1949
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1950
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CardHeaderComponent, isStandalone: true, selector: "ndw-card-header", inputs: { isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "@if (isCollapsible()) {\n <button\n class=\"float\"\n type=\"button\"\n ndwButton\n extra-small\n tertiary\n [attr.aria-controls]=\"cardId\"\n [attr.aria-expanded]=\"!isCollapsed()\"\n [class.collapsed]=\"isCollapsed()\"\n (click)=\"toggleCollapsed()\"\n >\n <ndw-icon>keyboard_arrow_down</ndw-icon>\n </button>\n}\n<ng-content />\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2018
1951
|
}
|
|
2019
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1952
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
2020
1953
|
type: Component,
|
|
2021
1954
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-header', imports: [IconComponent], template: "@if (isCollapsible()) {\n <button\n class=\"float\"\n type=\"button\"\n ndwButton\n extra-small\n tertiary\n [attr.aria-controls]=\"cardId\"\n [attr.aria-expanded]=\"!isCollapsed()\"\n [class.collapsed]=\"isCollapsed()\"\n (click)=\"toggleCollapsed()\"\n >\n <ndw-icon>keyboard_arrow_down</ndw-icon>\n </button>\n}\n<ng-content />\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n"] }]
|
|
2022
1955
|
}] });
|
|
@@ -2032,24 +1965,24 @@ class DashboardCardComponent {
|
|
|
2032
1965
|
/**
|
|
2033
1966
|
* The title of the card.
|
|
2034
1967
|
*/
|
|
2035
|
-
title = input.required();
|
|
1968
|
+
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
2036
1969
|
/**
|
|
2037
1970
|
* The URL to the icon to display on the card. The icon is assumed to be rectangular.
|
|
2038
1971
|
*/
|
|
2039
|
-
imgSource = input.required();
|
|
1972
|
+
imgSource = input.required(...(ngDevMode ? [{ debugName: "imgSource" }] : []));
|
|
2040
1973
|
/**
|
|
2041
1974
|
* The url to open in a new window when the card is clicked.
|
|
2042
1975
|
*/
|
|
2043
|
-
link = input.required();
|
|
1976
|
+
link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
|
|
2044
1977
|
/**
|
|
2045
1978
|
* Specifies where to open the linked document.
|
|
2046
1979
|
* Valid values are `_blank`, `_parent`, `_self`, or `_top`.
|
|
2047
1980
|
*/
|
|
2048
|
-
linkTarget = input('_blank');
|
|
2049
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2050
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1981
|
+
linkTarget = input('_blank', ...(ngDevMode ? [{ debugName: "linkTarget" }] : []));
|
|
1982
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DashboardCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1983
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: DashboardCardComponent, isStandalone: true, selector: "ndw-dashboard-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, imgSource: { classPropertyName: "imgSource", publicName: "imgSource", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a [href]=\"link()\" [target]=\"linkTarget()\" rel=\"noreferrer noopener\" [title]=\"title()\">\n <ndw-card class=\"card\">\n <ndw-card-content class=\"card-content\">\n <img [src]=\"imgSource()\" [alt]=\"title()\" />\n <span class=\"ndw-heading-sm title\">{{ title() }}</span>\n <div class=\"ndw-paragraph-md description\"><ng-content /></div>\n </ndw-card-content>\n </ndw-card>\n</a>\n", styles: [":host{display:block}a{text-decoration:none}.card{padding:var(--ndw-spacing-3xl);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover{background-color:var(--ndw-color-secondary-050);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover .title{color:var(--ndw-color-secondary-500);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active{background-color:var(--ndw-color-secondary-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .title{color:var(--ndw-color-secondary-600);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .description{color:var(--ndw-color-grey-700);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card-content{display:flex;flex-direction:column;align-items:center;gap:var(--ndw-spacing-xs)}.card-content img{height:50px;width:50px;object-fit:contain}.card-content .title{text-align:center;color:var(--ndw-color-grey-700);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-content .description{text-align:center;color:var(--ndw-color-grey-500);width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ndw-card", inputs: ["isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: CardContentComponent, selector: "ndw-card-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2051
1984
|
}
|
|
2052
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1985
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DashboardCardComponent, decorators: [{
|
|
2053
1986
|
type: Component,
|
|
2054
1987
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CardComponent, CardContentComponent], selector: 'ndw-dashboard-card', template: "<a [href]=\"link()\" [target]=\"linkTarget()\" rel=\"noreferrer noopener\" [title]=\"title()\">\n <ndw-card class=\"card\">\n <ndw-card-content class=\"card-content\">\n <img [src]=\"imgSource()\" [alt]=\"title()\" />\n <span class=\"ndw-heading-sm title\">{{ title() }}</span>\n <div class=\"ndw-paragraph-md description\"><ng-content /></div>\n </ndw-card-content>\n </ndw-card>\n</a>\n", styles: [":host{display:block}a{text-decoration:none}.card{padding:var(--ndw-spacing-3xl);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover{background-color:var(--ndw-color-secondary-050);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover .title{color:var(--ndw-color-secondary-500);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active{background-color:var(--ndw-color-secondary-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .title{color:var(--ndw-color-secondary-600);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .description{color:var(--ndw-color-grey-700);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card-content{display:flex;flex-direction:column;align-items:center;gap:var(--ndw-spacing-xs)}.card-content img{height:50px;width:50px;object-fit:contain}.card-content .title{text-align:center;color:var(--ndw-color-grey-700);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-content .description{text-align:center;color:var(--ndw-color-grey-500);width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}\n"] }]
|
|
2055
1988
|
}] });
|
|
@@ -2058,20 +1991,20 @@ class TagComponent {
|
|
|
2058
1991
|
/**
|
|
2059
1992
|
* Disables the tag
|
|
2060
1993
|
*/
|
|
2061
|
-
disabled = input(false);
|
|
1994
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2062
1995
|
/**
|
|
2063
1996
|
* Aria label for the interactive button
|
|
2064
1997
|
*/
|
|
2065
|
-
suffixAriaLabel = input('Verwijder');
|
|
1998
|
+
suffixAriaLabel = input('Verwijder', ...(ngDevMode ? [{ debugName: "suffixAriaLabel" }] : []));
|
|
2066
1999
|
/**
|
|
2067
2000
|
* The name of the icon to display
|
|
2068
2001
|
*/
|
|
2069
|
-
suffixIcon = input('close');
|
|
2002
|
+
suffixIcon = input('close', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
|
|
2070
2003
|
clicked = output();
|
|
2071
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2072
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
2004
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2005
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: TagComponent, isStandalone: true, selector: "ndw-tag", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suffixAriaLabel: { classPropertyName: "suffixAriaLabel", publicName: "suffixAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.disabled": "disabled()" } }, ngImport: i0, template: "<ng-content />\n<button type=\"button\" [disabled]=\"disabled()\" (click)=\"clicked.emit($event)\">\n <span class=\"sr-only\">{{ suffixAriaLabel() }}</span>\n <ndw-icon>{{ suffixIcon() }}</ndw-icon>\n</button>\n", styles: [":host{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}:host:hover{border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);background-color:var(--ndw-color-primary);color:var(--ndw-color-white)}:host:active,:host: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)}:host.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}:host button{background-color:transparent;border:0;color:inherit;padding:0}:host button:focus{outline:none}:host button:after{content:\"\";inset:0;position:absolute}:host button ndw-icon{display:grid;font-size:var(--ndw-font-size-sm);width:var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2073
2006
|
}
|
|
2074
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2007
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TagComponent, decorators: [{
|
|
2075
2008
|
type: Component,
|
|
2076
2009
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2077
2010
|
'[class.disabled]': 'disabled()',
|
|
@@ -2079,16 +2012,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2079
2012
|
}] });
|
|
2080
2013
|
|
|
2081
2014
|
class DropdownComponent {
|
|
2082
|
-
disabled = input(false);
|
|
2083
|
-
chevron = input(true);
|
|
2084
|
-
buttonText = input.required();
|
|
2085
|
-
prefixIcon = input('');
|
|
2086
|
-
selectAmount = input(0);
|
|
2015
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2016
|
+
chevron = input(true, ...(ngDevMode ? [{ debugName: "chevron" }] : []));
|
|
2017
|
+
buttonText = input.required(...(ngDevMode ? [{ debugName: "buttonText" }] : []));
|
|
2018
|
+
prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
|
|
2019
|
+
selectAmount = input(0, ...(ngDevMode ? [{ debugName: "selectAmount" }] : []));
|
|
2087
2020
|
tagClicked = output();
|
|
2088
2021
|
isOpenChange = output();
|
|
2089
2022
|
popoverTrigger = viewChild.required(PopoverTriggerDirective);
|
|
2090
2023
|
dropdownButton = viewChild.required('dropdownButton');
|
|
2091
|
-
buttonIcon = computed(() => this.popoverTrigger().isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down');
|
|
2024
|
+
buttonIcon = computed(() => this.popoverTrigger().isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down', ...(ngDevMode ? [{ debugName: "buttonIcon" }] : []));
|
|
2092
2025
|
onTagClicked($event) {
|
|
2093
2026
|
$event.stopPropagation();
|
|
2094
2027
|
this.tagClicked.emit();
|
|
@@ -2119,20 +2052,20 @@ class DropdownComponent {
|
|
|
2119
2052
|
isOpenChanged(isOpen) {
|
|
2120
2053
|
this.isOpenChange.emit(isOpen);
|
|
2121
2054
|
}
|
|
2122
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2123
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2055
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2056
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: { tagClicked: "tagClicked", 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-tag\n [attr.disabled]=\"disabled() ? true : null\"\n (keydown)=\"onTagKeyDown($event)\"\n (clicked)=\"onTagClicked($event)\"\n >\n {{ selectAmount() }}\n </ndw-tag>\n }\n @if (chevron()) {\n <div class=\"button-end\">\n <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n </div>\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}.button-end{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ndw-spacing-2xs)}.button-end ndw-icon{display:flex;align-items:center}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}div[role=dialog]{max-height:70vh;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2124
2057
|
}
|
|
2125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
2126
2059
|
type: Component,
|
|
2127
2060
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent, PopoverTriggerDirective, TagComponent], selector: 'ndw-dropdown', 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-tag\n [attr.disabled]=\"disabled() ? true : null\"\n (keydown)=\"onTagKeyDown($event)\"\n (clicked)=\"onTagClicked($event)\"\n >\n {{ selectAmount() }}\n </ndw-tag>\n }\n @if (chevron()) {\n <div class=\"button-end\">\n <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n </div>\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}.button-end{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ndw-spacing-2xs)}.button-end ndw-icon{display:flex;align-items:center}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}div[role=dialog]{max-height:70vh;display:flex;flex-direction:column}\n"] }]
|
|
2128
2061
|
}] });
|
|
2129
2062
|
|
|
2130
2063
|
class EditBarComponent {
|
|
2131
|
-
grid = input(false);
|
|
2132
|
-
position = input('fixed');
|
|
2133
|
-
positionFixedWidth = input('layout');
|
|
2064
|
+
grid = input(false, ...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
2065
|
+
position = input('fixed', ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
2066
|
+
positionFixedWidth = input('layout', ...(ngDevMode ? [{ debugName: "positionFixedWidth" }] : []));
|
|
2134
2067
|
editBar = viewChild.required('editBar');
|
|
2135
|
-
height = signal(null);
|
|
2068
|
+
height = signal(null, ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
2136
2069
|
#changeDetectorRef = inject(ChangeDetectorRef);
|
|
2137
2070
|
#resizeObserver;
|
|
2138
2071
|
ngAfterViewInit() {
|
|
@@ -2152,10 +2085,10 @@ class EditBarComponent {
|
|
|
2152
2085
|
});
|
|
2153
2086
|
this.#resizeObserver.observe(this.editBar().nativeElement);
|
|
2154
2087
|
}
|
|
2155
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2156
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2088
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EditBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2089
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EditBarComponent, isStandalone: true, selector: "ndw-edit-bar", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionFixedWidth: { classPropertyName: "positionFixedWidth", publicName: "positionFixedWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height() + \"px\"" } }, viewQueries: [{ propertyName: "editBar", first: true, predicate: ["editBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #editBar\n class=\"ndw-edit-bar\"\n [class.ndw-edit-bar--grid]=\"grid()\"\n [class.ndw-edit-bar--fixed]=\"position() === 'fixed'\"\n [class.ndw-edit-bar--absolute]=\"position() === 'absolute'\"\n [class.ndw-edit-bar--static]=\"position() === 'static'\"\n [class.ndw-edit-bar--sticky]=\"position() === 'sticky'\"\n [class.ndw-edit-bar--full-width]=\"positionFixedWidth() === 'full'\"\n [class.ndw-edit-bar--layout-width]=\"positionFixedWidth() === 'layout'\"\n>\n @if (grid()) {\n <div class=\"ndw-grid\">\n <div class=\"column-12\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</div>\n\n<ng-template #content>\n <div class=\"ndw-edit-bar__inner\">\n <ng-content select=\"ndw-edit-bar-message\" />\n <ng-content select=\"ndw-edit-bar-actions\" />\n </div>\n</ng-template>\n", styles: [":host:has(.ndw-edit-bar--fixed){display:block;padding-block:var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2157
2090
|
}
|
|
2158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2091
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EditBarComponent, decorators: [{
|
|
2159
2092
|
type: Component,
|
|
2160
2093
|
args: [{ selector: 'ndw-edit-bar', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2161
2094
|
'[style.height]': 'height() + "px"',
|
|
@@ -2163,10 +2096,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2163
2096
|
}] });
|
|
2164
2097
|
|
|
2165
2098
|
class EditBarActionsComponent {
|
|
2166
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2167
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2099
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EditBarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2100
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: EditBarActionsComponent, isStandalone: true, selector: "ndw-edit-bar-actions", host: { classAttribute: "ndw-edit-bar-actions" }, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2168
2101
|
}
|
|
2169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EditBarActionsComponent, decorators: [{
|
|
2170
2103
|
type: Component,
|
|
2171
2104
|
args: [{ selector: 'ndw-edit-bar-actions', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2172
2105
|
class: 'ndw-edit-bar-actions',
|
|
@@ -2174,10 +2107,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2174
2107
|
}] });
|
|
2175
2108
|
|
|
2176
2109
|
class EditBarMessageComponent {
|
|
2177
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2178
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2110
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EditBarMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: EditBarMessageComponent, isStandalone: true, selector: "ndw-edit-bar-message", host: { classAttribute: "ndw-edit-bar-message" }, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2179
2112
|
}
|
|
2180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EditBarMessageComponent, decorators: [{
|
|
2181
2114
|
type: Component,
|
|
2182
2115
|
args: [{ selector: 'ndw-edit-bar-message', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2183
2116
|
class: 'ndw-edit-bar-message',
|
|
@@ -2185,26 +2118,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2185
2118
|
}] });
|
|
2186
2119
|
|
|
2187
2120
|
class FavoriteComponent {
|
|
2188
|
-
checked = model(false);
|
|
2189
|
-
|
|
2190
|
-
static
|
|
2191
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: FavoriteComponent, isStandalone: true, selector: "ndw-favorite", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class.checked": "checked()" } }, ngImport: i0, template: "<input type=\"checkbox\" [id]=\"uuid\" [(ngModel)]=\"checked\" class=\"sr-only\" tabindex=\"0\" />\n\n<label [for]=\"uuid\">\n <span class=\"sr-only\">favorite</span>\n <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</label>\n", styles: [".input-container:has(>[ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has(>[ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;gap:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]):has([ndwInput]:active),.input-container:has(>[ndwInput]):has([ndwInput]:focus),.input-container:has(>[ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has(>[ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has(>[ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[success]:active,.input-container:has(>[ndwInput])[success]:focus,.input-container:has(>[ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>[ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has(>[ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[error]:active,.input-container:has(>[ndwInput])[error]:focus,.input-container:has(>[ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[disabled],.input-container:has(>[ndwInput])[readonly],.input-container:has(>[ndwInput]):has([ndwInput]:disabled),.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has(>[ndwInput])[disabled] [ndwInput],.input-container:has(>[ndwInput])[readonly] [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}.input-container:has(>[ndwInput])[disabled] ndw-icon,.input-container:has(>[ndwInput])[readonly] ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}.input-container:has(>[ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has(>[ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has(>[ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has(>[ndwInput]) [ndwInput]:hover,.input-container:has(>[ndwInput]) [ndwInput]:active,.input-container:has(>[ndwInput]) [ndwInput]:focus,.input-container:has(>[ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has(>[ndwInput]):has(textarea){padding-inline:0}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host label{cursor:pointer;transition:color .15s ease-in-out}:host:hover,:host.checked{color:var(--ndw-color-critical-500)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2121
|
+
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
2122
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FavoriteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2123
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: FavoriteComponent, isStandalone: true, selector: "ndw-favorite", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<core-favorite [(checked)]=\"checked\">\n <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</core-favorite>\n", styles: [".input-container:has(>[ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has(>[ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;gap:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]):has([ndwInput]:active),.input-container:has(>[ndwInput]):has([ndwInput]:focus),.input-container:has(>[ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has(>[ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has(>[ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[success]:active,.input-container:has(>[ndwInput])[success]:focus,.input-container:has(>[ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>[ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has(>[ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[error]:active,.input-container:has(>[ndwInput])[error]:focus,.input-container:has(>[ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[disabled],.input-container:has(>[ndwInput])[readonly],.input-container:has(>[ndwInput]):has([ndwInput]:disabled),.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has(>[ndwInput])[disabled] [ndwInput],.input-container:has(>[ndwInput])[readonly] [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}.input-container:has(>[ndwInput])[disabled] ndw-icon,.input-container:has(>[ndwInput])[readonly] ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}.input-container:has(>[ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has(>[ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has(>[ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has(>[ndwInput]) [ndwInput]:hover,.input-container:has(>[ndwInput]) [ndwInput]:active,.input-container:has(>[ndwInput]) [ndwInput]:focus,.input-container:has(>[ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has(>[ndwInput]):has(textarea){padding-inline:0}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host:hover,:host:has(core-favorite.checked){color:var(--ndw-color-critical-500);transition:color .15s ease-in-out}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: CoreFavoriteComponent, selector: "core-favorite", inputs: ["uuid", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2192
2124
|
}
|
|
2193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FavoriteComponent, decorators: [{
|
|
2194
2126
|
type: Component,
|
|
2195
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2196
|
-
'[class.checked]': 'checked()',
|
|
2197
|
-
}, imports: [IconComponent, FormsModule], selector: 'ndw-favorite', template: "<input type=\"checkbox\" [id]=\"uuid\" [(ngModel)]=\"checked\" class=\"sr-only\" tabindex=\"0\" />\n\n<label [for]=\"uuid\">\n <span class=\"sr-only\">favorite</span>\n <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</label>\n", styles: [".input-container:has(>[ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has(>[ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;gap:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]):has([ndwInput]:active),.input-container:has(>[ndwInput]):has([ndwInput]:focus),.input-container:has(>[ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has(>[ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has(>[ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[success]:active,.input-container:has(>[ndwInput])[success]:focus,.input-container:has(>[ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>[ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has(>[ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[error]:active,.input-container:has(>[ndwInput])[error]:focus,.input-container:has(>[ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[disabled],.input-container:has(>[ndwInput])[readonly],.input-container:has(>[ndwInput]):has([ndwInput]:disabled),.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has(>[ndwInput])[disabled] [ndwInput],.input-container:has(>[ndwInput])[readonly] [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}.input-container:has(>[ndwInput])[disabled] ndw-icon,.input-container:has(>[ndwInput])[readonly] ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}.input-container:has(>[ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has(>[ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has(>[ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has(>[ndwInput]) [ndwInput]:hover,.input-container:has(>[ndwInput]) [ndwInput]:active,.input-container:has(>[ndwInput]) [ndwInput]:focus,.input-container:has(>[ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has(>[ndwInput]):has(textarea){padding-inline:0}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host label{cursor:pointer;transition:color .15s ease-in-out}:host:hover,:host.checked{color:var(--ndw-color-critical-500)}\n"] }]
|
|
2127
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, CoreFavoriteComponent], selector: 'ndw-favorite', template: "<core-favorite [(checked)]=\"checked\">\n <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</core-favorite>\n", styles: [".input-container:has(>[ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has(>[ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;gap:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]):has([ndwInput]:active),.input-container:has(>[ndwInput]):has([ndwInput]:focus),.input-container:has(>[ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has(>[ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has(>[ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[success]:active,.input-container:has(>[ndwInput])[success]:focus,.input-container:has(>[ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>[ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has(>[ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[error]:active,.input-container:has(>[ndwInput])[error]:focus,.input-container:has(>[ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[disabled],.input-container:has(>[ndwInput])[readonly],.input-container:has(>[ndwInput]):has([ndwInput]:disabled),.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has(>[ndwInput])[disabled] [ndwInput],.input-container:has(>[ndwInput])[readonly] [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}.input-container:has(>[ndwInput])[disabled] ndw-icon,.input-container:has(>[ndwInput])[readonly] ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}.input-container:has(>[ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has(>[ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has(>[ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has(>[ndwInput]) [ndwInput]:hover,.input-container:has(>[ndwInput]) [ndwInput]:active,.input-container:has(>[ndwInput]) [ndwInput]:focus,.input-container:has(>[ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has(>[ndwInput]):has(textarea){padding-inline:0}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host:hover,:host:has(core-favorite.checked){color:var(--ndw-color-critical-500);transition:color .15s ease-in-out}\n"] }]
|
|
2198
2128
|
}] });
|
|
2199
2129
|
|
|
2200
2130
|
class HoverableListItemComponent {
|
|
2201
|
-
actions = input();
|
|
2202
|
-
disabled = input(false);
|
|
2203
|
-
path = input();
|
|
2204
|
-
prefixIcon = input();
|
|
2205
|
-
queryParams = input();
|
|
2206
|
-
subtitle = input();
|
|
2207
|
-
title = input();
|
|
2131
|
+
actions = input(...(ngDevMode ? [undefined, { debugName: "actions" }] : []));
|
|
2132
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2133
|
+
path = input(...(ngDevMode ? [undefined, { debugName: "path" }] : []));
|
|
2134
|
+
prefixIcon = input(...(ngDevMode ? [undefined, { debugName: "prefixIcon" }] : []));
|
|
2135
|
+
queryParams = input(...(ngDevMode ? [undefined, { debugName: "queryParams" }] : []));
|
|
2136
|
+
subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
|
|
2137
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
2208
2138
|
actionSelected = output();
|
|
2209
2139
|
selected = output();
|
|
2210
2140
|
onActionButtonClick(event, action) {
|
|
@@ -2220,33 +2150,33 @@ class HoverableListItemComponent {
|
|
|
2220
2150
|
event.stopPropagation();
|
|
2221
2151
|
this.selected.emit();
|
|
2222
2152
|
}
|
|
2223
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2153
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: HoverableListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: HoverableListItemComponent, isStandalone: true, selector: "ndw-hoverable-list-item", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelected: "actionSelected", selected: "selected" }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@if (path(); as path) {\n <a\n ndw-list-item\n class=\"actionable\"\n [attr.aria-disabled]=\"disabled() || undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [queryParams]=\"queryParams()\"\n [routerLink]=\"path\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </a>\n} @else {\n <button\n ndw-list-item\n class=\"actionable\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n <div class=\"actions\">\n @for (action of actions(); track $index) {\n @if (action.path) {\n <a\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n [queryParams]=\"action.queryParams\"\n [routerLink]=\"action.path\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </a>\n } @else {\n <button\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </button>\n }\n }\n </div>\n</ng-template>\n", styles: ["[ndw-list-item]{align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .actions{display:flex;gap:var(--ndw-spacing-sm);opacity:0;pointer-events:none;transition:opacity var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .actions [ndwButton]{border-radius:50%;padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .actions [ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndw-list-item] .actions [ndwButton][disabled]{background-color:transparent;border-color:transparent}[ndw-list-item]:is(:hover,:active,:focus,:focus-within) .actions{opacity:1;pointer-events:auto}[ndw-list-item][disabled] ndw-icon,[ndw-list-item][aria-disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2225
2155
|
}
|
|
2226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: HoverableListItemComponent, decorators: [{
|
|
2227
2157
|
type: Component,
|
|
2228
2158
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2229
2159
|
role: 'listitem',
|
|
2230
|
-
}, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-hoverable-list-item', template: "@if (path(); as path) {\n <a\n ndw-list-item\n class=\"actionable\"\n [attr.aria-disabled]=\"disabled() || undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [queryParams]=\"queryParams()\"\n [routerLink]=\"path\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </a>\n} @else {\n <button\n ndw-list-item\n class=\"actionable\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n <div class=\"actions\">\n @for (action of actions(); track $index) {\n @if (action.path) {\n <a\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n [queryParams]=\"action.queryParams\"\n [routerLink]=\"action.path\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </a>\n } @else {\n <button\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </button>\n }\n }\n </div>\n</ng-template>\n", styles: ["[ndw-list-item]{
|
|
2160
|
+
}, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-hoverable-list-item', template: "@if (path(); as path) {\n <a\n ndw-list-item\n class=\"actionable\"\n [attr.aria-disabled]=\"disabled() || undefined\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [queryParams]=\"queryParams()\"\n [routerLink]=\"path\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </a>\n} @else {\n <button\n ndw-list-item\n class=\"actionable\"\n [attr.disabled]=\"disabled() || undefined\"\n (click)=\"onButtonClick($event)\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\" />\n </button>\n}\n\n<ng-template #listItem>\n @if (prefixIcon(); as prefix) {\n <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n }\n <ng-content />\n <div class=\"content\">\n @if (title(); as title) {\n <span class=\"title\">{{ title }}</span>\n }\n @if (subtitle(); as subtitle) {\n {{ subtitle }}\n }\n </div>\n <div class=\"actions\">\n @for (action of actions(); track $index) {\n @if (action.path) {\n <a\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n [queryParams]=\"action.queryParams\"\n [routerLink]=\"action.path\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </a>\n } @else {\n <button\n ndwButton\n tertiary\n extra-small\n [attr.aria-label]=\"action.label\"\n (click)=\"onActionButtonClick($event, action)\"\n >\n <ndw-icon>{{ action.icon }}</ndw-icon>\n </button>\n }\n }\n </div>\n</ng-template>\n", styles: ["[ndw-list-item]{align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .actions{display:flex;gap:var(--ndw-spacing-sm);opacity:0;pointer-events:none;transition:opacity var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .actions [ndwButton]{border-radius:50%;padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .actions [ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndw-list-item] .actions [ndwButton][disabled]{background-color:transparent;border-color:transparent}[ndw-list-item]:is(:hover,:active,:focus,:focus-within) .actions{opacity:1;pointer-events:auto}[ndw-list-item][disabled] ndw-icon,[ndw-list-item][aria-disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
|
|
2231
2161
|
}] });
|
|
2232
2162
|
|
|
2233
2163
|
class KeyValueListComponent extends CoreKeyValueListComponent {
|
|
2234
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2235
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2164
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: KeyValueListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2165
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: KeyValueListComponent, isStandalone: true, selector: "ndw-key-value-list", usesInheritance: true, ngImport: i0, template: "<dl [class.striped]=\"hasZebraStripes()\">\n @for (keyValueRow of normalizedData(); track keyValueRow.key) {\n <dt>\n <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\n </dt>\n <dd>\n <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\n </dd>\n }\n</dl>\n\n<ng-template #cellData let-data>\n @if (data.url) {\n <a ndwLink target=\"_blank\" [href]=\"data.url\">\n {{ data.label }}\n <ndw-icon size=\"sm\">open_in_new</ndw-icon>\n </a>\n } @else {\n {{ data.label }}\n }\n\n @if (data.tooltip) {\n <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\n }\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2236
2166
|
}
|
|
2237
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: KeyValueListComponent, decorators: [{
|
|
2238
2168
|
type: Component,
|
|
2239
2169
|
args: [{ selector: 'ndw-key-value-list', imports: [IconComponent, NgTemplateOutlet, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl [class.striped]=\"hasZebraStripes()\">\n @for (keyValueRow of normalizedData(); track keyValueRow.key) {\n <dt>\n <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\n </dt>\n <dd>\n <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\n </dd>\n }\n</dl>\n\n<ng-template #cellData let-data>\n @if (data.url) {\n <a ndwLink target=\"_blank\" [href]=\"data.url\">\n {{ data.label }}\n <ndw-icon size=\"sm\">open_in_new</ndw-icon>\n </a>\n } @else {\n {{ data.label }}\n }\n\n @if (data.tooltip) {\n <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\n }\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}\n"] }]
|
|
2240
2170
|
}] });
|
|
2241
2171
|
|
|
2242
2172
|
class MainNavigationHeaderComponent {
|
|
2243
|
-
applicationName = input.required();
|
|
2244
|
-
isExpanded = input.required();
|
|
2245
|
-
isMobile = input.required();
|
|
2246
|
-
theme = input.required();
|
|
2247
|
-
themeImagePath = input.required();
|
|
2248
|
-
environment = input();
|
|
2249
|
-
isMobileMenuOpen = model.required();
|
|
2173
|
+
applicationName = input.required(...(ngDevMode ? [{ debugName: "applicationName" }] : []));
|
|
2174
|
+
isExpanded = input.required(...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
|
|
2175
|
+
isMobile = input.required(...(ngDevMode ? [{ debugName: "isMobile" }] : []));
|
|
2176
|
+
theme = input.required(...(ngDevMode ? [{ debugName: "theme" }] : []));
|
|
2177
|
+
themeImagePath = input.required(...(ngDevMode ? [{ debugName: "themeImagePath" }] : []));
|
|
2178
|
+
environment = input(...(ngDevMode ? [undefined, { debugName: "environment" }] : []));
|
|
2179
|
+
isMobileMenuOpen = model.required(...(ngDevMode ? [{ debugName: "isMobileMenuOpen" }] : []));
|
|
2250
2180
|
environmentColor = computed(() => {
|
|
2251
2181
|
switch (this.environment()) {
|
|
2252
2182
|
case 'Local':
|
|
@@ -2258,24 +2188,24 @@ class MainNavigationHeaderComponent {
|
|
|
2258
2188
|
default:
|
|
2259
2189
|
return 'yellow';
|
|
2260
2190
|
}
|
|
2261
|
-
});
|
|
2191
|
+
}, ...(ngDevMode ? [{ debugName: "environmentColor" }] : []));
|
|
2262
2192
|
toggleMobileMenu() {
|
|
2263
2193
|
this.isMobileMenuOpen.update((open) => !open);
|
|
2264
2194
|
}
|
|
2265
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2266
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2195
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MainNavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2196
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MainNavigationHeaderComponent, isStandalone: true, selector: "ndw-main-navigation-header", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: true, transformFunction: null }, themeImagePath: { classPropertyName: "themeImagePath", publicName: "themeImagePath", isSignal: true, isRequired: true, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<header [class.expanded]=\"isExpanded()\">\n <a routerLink=\"/\">\n <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\n @if (isExpanded() || isMobile()) {\n {{ applicationName() }}\n }\n </a>\n @if (environment()) {\n <ndw-pill [color]=\"environmentColor()\">\n {{ !isExpanded() || isMobile() ? environment()?.charAt(0) : environment() }}\n </ndw-pill>\n }\n @if (isMobile()) {\n <button ndwButton tertiary class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\n <ndw-icon>\n {{ isMobileMenuOpen() ? 'close' : 'menu' }}\n </ndw-icon>\n </button>\n }\n</header>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;flex-direction:column;align-items:center;display:flex;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-md);text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{top:0;height:fit-content;padding:0;position:absolute;right:var(--ndw-spacing-sm);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg);color:var(--ndw-color-white)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{flex-direction:row;align-items:center;padding-inline:var(--ndw-spacing-md);margin-bottom:0}header.expanded{align-items:center}header.expanded a img{width:var(--ndw-spacing-md)}header.expanded.nwb{width:var(--ndw-spacing-md)}header a{flex-direction:row;letter-spacing:var(--ndw-letter-spacing-sm);line-height:150%;gap:var(--ndw-spacing-md)}header a img{width:var(--ndw-spacing-md)}header a img.nwb{width:var(--ndw-spacing-md)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: PillComponent, selector: "ndw-pill" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2267
2197
|
}
|
|
2268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MainNavigationHeaderComponent, decorators: [{
|
|
2269
2199
|
type: Component,
|
|
2270
2200
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, PillComponent, RouterLink], selector: 'ndw-main-navigation-header', template: "<header [class.expanded]=\"isExpanded()\">\n <a routerLink=\"/\">\n <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\n @if (isExpanded() || isMobile()) {\n {{ applicationName() }}\n }\n </a>\n @if (environment()) {\n <ndw-pill [color]=\"environmentColor()\">\n {{ !isExpanded() || isMobile() ? environment()?.charAt(0) : environment() }}\n </ndw-pill>\n }\n @if (isMobile()) {\n <button ndwButton tertiary class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\n <ndw-icon>\n {{ isMobileMenuOpen() ? 'close' : 'menu' }}\n </ndw-icon>\n </button>\n }\n</header>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;flex-direction:column;align-items:center;display:flex;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-md);text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{top:0;height:fit-content;padding:0;position:absolute;right:var(--ndw-spacing-sm);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg);color:var(--ndw-color-white)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{flex-direction:row;align-items:center;padding-inline:var(--ndw-spacing-md);margin-bottom:0}header.expanded{align-items:center}header.expanded a img{width:var(--ndw-spacing-md)}header.expanded.nwb{width:var(--ndw-spacing-md)}header a{flex-direction:row;letter-spacing:var(--ndw-letter-spacing-sm);line-height:150%;gap:var(--ndw-spacing-md)}header a img{width:var(--ndw-spacing-md)}header a img.nwb{width:var(--ndw-spacing-md)}}\n"] }]
|
|
2271
2201
|
}] });
|
|
2272
2202
|
|
|
2273
2203
|
class MainNavigationMenuComponent {
|
|
2274
|
-
isExpanded = input.required();
|
|
2275
|
-
isMobile = input.required();
|
|
2276
|
-
items = input.required();
|
|
2204
|
+
isExpanded = input.required(...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
|
|
2205
|
+
isMobile = input.required(...(ngDevMode ? [{ debugName: "isMobile" }] : []));
|
|
2206
|
+
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
2277
2207
|
closed = output();
|
|
2278
|
-
activeMobileItem = signal(undefined);
|
|
2208
|
+
activeMobileItem = signal(undefined, ...(ngDevMode ? [{ debugName: "activeMobileItem" }] : []));
|
|
2279
2209
|
closeMobileMenu(item) {
|
|
2280
2210
|
item?.callback?.();
|
|
2281
2211
|
this.setActiveMobileItem(undefined);
|
|
@@ -2302,10 +2232,10 @@ class MainNavigationMenuComponent {
|
|
|
2302
2232
|
item.callback?.();
|
|
2303
2233
|
this.setActiveMobileItem(this.activeMobileItem() === item ? undefined : item);
|
|
2304
2234
|
}
|
|
2305
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2235
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MainNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2236
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n @for (item of items(); track getItemKey(item)) {\n @if (!item.children) {\n @if (item.callback) {\n <button cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n <ndw-icon>{{ item.icon }}</ndw-icon>\n @if (isExpanded() || isMobile()) {\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n }\n </button>\n } @else {\n <a\n cdkMenuItem\n ndwButton\n menu\n [queryParams]=\"item.queryParams\"\n [routerLink]=\"item.path\"\n (click)=\"closeMobileMenu()\"\n >\n <ndw-icon>{{ item.icon }}</ndw-icon>\n @if (isExpanded() || isMobile()) {\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n }\n </a>\n }\n } @else {\n @if (isMobile()) {\n <button\n cdkMenuItem\n ndwButton\n menu\n [attr.active]=\"activeMobileItem() === item || undefined\"\n (click)=\"toggleActiveMobileItem(item)\"\n (keydown)=\"handleMobileItemKeydown($event, item)\"\n >\n <ndw-icon>{{ item.icon }}</ndw-icon>\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n <ndw-icon class=\"suffix\">\n {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n </ndw-icon>\n </button>\n @if (activeMobileItem() === item) {\n @for (subItem of item.children; track getItemKey(subItem)) {\n @if (subItem.callback) {\n <button\n cdkMenuItem\n ndwButton\n menu\n class=\"sub-menu-button\"\n (click)=\"closeMobileMenu(subItem)\"\n >\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </button>\n } @else {\n <a\n cdkMenuItem\n ndwButton\n menu\n class=\"sub-menu-button\"\n [queryParams]=\"subItem.queryParams\"\n [routerLink]=\"subItem.path\"\n (click)=\"closeMobileMenu(subItem)\"\n >\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </a>\n }\n }\n }\n } @else {\n <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\n <ndw-icon>{{ item.icon }}</ndw-icon>\n @if (isExpanded()) {\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n }\n </button>\n }\n\n <ng-template #subMenu>\n <div cdkMenu class=\"sub-menu\">\n @for (subItem of item.children; track getItemKey(subItem)) {\n @if (subItem.callback) {\n <button cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </button>\n } @else {\n <a\n cdkMenuItem\n ndwButton\n menu\n [queryParams]=\"subItem.queryParams\"\n [routerLink]=\"subItem.path\"\n >\n <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n </a>\n }\n }\n </div>\n </ng-template>\n }\n }\n</div>\n\n<ng-template #label let-item>\n {{ item.label }}\n @if (item.notifications) {\n <ndw-badge [value]=\"item.notifications\" />\n }\n</ng-template>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2307
2237
|
}
|
|
2308
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MainNavigationMenuComponent, decorators: [{
|
|
2309
2239
|
type: Component,
|
|
2310
2240
|
args: [{ imports: [
|
|
2311
2241
|
BadgeComponent,
|
|
@@ -2321,22 +2251,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2321
2251
|
class MainNavigationComponent {
|
|
2322
2252
|
#document = inject(DOCUMENT);
|
|
2323
2253
|
#renderer = inject(Renderer2);
|
|
2324
|
-
applicationName = input.required();
|
|
2325
|
-
topMenuItems = input.required();
|
|
2326
|
-
bottomMenuItems = input();
|
|
2327
|
-
environment = input();
|
|
2328
|
-
footerTexts = input();
|
|
2329
|
-
isCollapsible = input(true);
|
|
2330
|
-
version = input();
|
|
2331
|
-
isMobile = signal(false);
|
|
2332
|
-
isMobileMenuOpen = signal(false);
|
|
2333
|
-
theme = signal('ndw');
|
|
2334
|
-
isExpanded = model(true);
|
|
2335
|
-
mobileMenuItems = computed(() => [...this.topMenuItems(), ...(this.bottomMenuItems() || [])]);
|
|
2254
|
+
applicationName = input.required(...(ngDevMode ? [{ debugName: "applicationName" }] : []));
|
|
2255
|
+
topMenuItems = input.required(...(ngDevMode ? [{ debugName: "topMenuItems" }] : []));
|
|
2256
|
+
bottomMenuItems = input(...(ngDevMode ? [undefined, { debugName: "bottomMenuItems" }] : []));
|
|
2257
|
+
environment = input(...(ngDevMode ? [undefined, { debugName: "environment" }] : []));
|
|
2258
|
+
footerTexts = input(...(ngDevMode ? [undefined, { debugName: "footerTexts" }] : []));
|
|
2259
|
+
isCollapsible = input(true, ...(ngDevMode ? [{ debugName: "isCollapsible" }] : []));
|
|
2260
|
+
version = input(...(ngDevMode ? [undefined, { debugName: "version" }] : []));
|
|
2261
|
+
isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
|
|
2262
|
+
isMobileMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMobileMenuOpen" }] : []));
|
|
2263
|
+
theme = signal('ndw', ...(ngDevMode ? [{ debugName: "theme" }] : []));
|
|
2264
|
+
isExpanded = model(true, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
|
|
2265
|
+
mobileMenuItems = computed(() => [...this.topMenuItems(), ...(this.bottomMenuItems() || [])], ...(ngDevMode ? [{ debugName: "mobileMenuItems" }] : []));
|
|
2336
2266
|
themeImagePath = computed(() => {
|
|
2337
2267
|
const variant = !this.isExpanded() || this.isMobile() ? '-short' : '';
|
|
2338
2268
|
return `images/logos/${this.theme()}-logo${variant}.svg`;
|
|
2339
|
-
});
|
|
2269
|
+
}, ...(ngDevMode ? [{ debugName: "themeImagePath" }] : []));
|
|
2340
2270
|
ngAfterViewInit() {
|
|
2341
2271
|
const theme = this.#document.documentElement.getAttribute('data-theme');
|
|
2342
2272
|
if (theme) {
|
|
@@ -2359,10 +2289,10 @@ class MainNavigationComponent {
|
|
|
2359
2289
|
#toggleMainNavigationExpandedDataAttributeOnBody() {
|
|
2360
2290
|
this.#renderer.setAttribute(this.#document.body, 'data-main-navigation-expanded', this.isExpanded().toString());
|
|
2361
2291
|
}
|
|
2362
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2292
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MainNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2293
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MainNavigationComponent, isStandalone: true, selector: "ndw-main-navigation", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, topMenuItems: { classPropertyName: "topMenuItems", publicName: "topMenuItems", isSignal: true, isRequired: true, transformFunction: null }, bottomMenuItems: { classPropertyName: "bottomMenuItems", publicName: "bottomMenuItems", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, footerTexts: { classPropertyName: "footerTexts", publicName: "footerTexts", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "class.expanded": "isExpanded()" } }, ngImport: i0, template: "<ndw-main-navigation-header\n [applicationName]=\"applicationName()\"\n [environment]=\"environment()\"\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [theme]=\"theme()\"\n [themeImagePath]=\"themeImagePath()\"\n [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\n/>\n@if (!isMobile()) {\n <div class=\"content\">\n <main>\n <ndw-main-navigation-menu\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [items]=\"topMenuItems()\"\n (closed)=\"closeMobileMenu()\"\n />\n </main>\n <footer>\n @if (bottomMenuItems(); as bottomMenuItems) {\n <ndw-main-navigation-menu\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [items]=\"bottomMenuItems\"\n (closed)=\"closeMobileMenu()\"\n />\n }\n <div class=\"texts\">\n @if (isExpanded() || isMobile()) {\n @for (text of footerTexts(); track $index) {\n <p>{{ text }}</p>\n }\n }\n </div>\n <div class=\"version\">\n <p>{{ version() }}</p>\n </div>\n @if (isCollapsible() && !isMobile()) {\n <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\n <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n </button>\n }\n </footer>\n </div>\n} @else {\n @if (isMobileMenuOpen()) {\n <div class=\"content\">\n <main>\n <ndw-main-navigation-menu\n [isExpanded]=\"isExpanded()\"\n [isMobile]=\"isMobile()\"\n [items]=\"mobileMenuItems()\"\n (closed)=\"closeMobileMenu()\"\n />\n </main>\n </div>\n }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-700);box-sizing:border-box;color:var(--ndw-color-grey-400);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width)}@media screen and (max-width: 1024px){:host{padding-top:var(--ndw-spacing-md);height:var(--main-navigation-mobile-header-height);width:100%}}.content{background-color:var(--ndw-color-grey-700);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width: 1024px){.content{position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){width:var(--main-navigation-expanded-width)}@media screen and (max-width: 1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle ndw-icon{transform:var(--ndw-rotate-half)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: MainNavigationHeaderComponent, selector: "ndw-main-navigation-header", inputs: ["applicationName", "isExpanded", "isMobile", "theme", "themeImagePath", "environment", "isMobileMenuOpen"], outputs: ["isMobileMenuOpenChange"] }, { kind: "component", type: MainNavigationMenuComponent, selector: "ndw-main-navigation-menu", inputs: ["isExpanded", "isMobile", "items"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2364
2294
|
}
|
|
2365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MainNavigationComponent, decorators: [{
|
|
2366
2296
|
type: Component,
|
|
2367
2297
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2368
2298
|
'[class.expanded]': 'isExpanded()',
|
|
@@ -2371,36 +2301,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2371
2301
|
}] });
|
|
2372
2302
|
|
|
2373
2303
|
class LayoutComponent {
|
|
2374
|
-
applicationName = input.required();
|
|
2375
|
-
topMenuItems = input.required();
|
|
2376
|
-
bottomMenuItems = input();
|
|
2377
|
-
environment = input();
|
|
2378
|
-
isCollapsible = input(true);
|
|
2379
|
-
isExpanded = input(true);
|
|
2380
|
-
menuFooterTexts = input();
|
|
2381
|
-
version = input();
|
|
2382
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
2384
|
-
}
|
|
2385
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2304
|
+
applicationName = input.required(...(ngDevMode ? [{ debugName: "applicationName" }] : []));
|
|
2305
|
+
topMenuItems = input.required(...(ngDevMode ? [{ debugName: "topMenuItems" }] : []));
|
|
2306
|
+
bottomMenuItems = input(...(ngDevMode ? [undefined, { debugName: "bottomMenuItems" }] : []));
|
|
2307
|
+
environment = input(...(ngDevMode ? [undefined, { debugName: "environment" }] : []));
|
|
2308
|
+
isCollapsible = input(true, ...(ngDevMode ? [{ debugName: "isCollapsible" }] : []));
|
|
2309
|
+
isExpanded = input(true, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
|
|
2310
|
+
menuFooterTexts = input(...(ngDevMode ? [undefined, { debugName: "menuFooterTexts" }] : []));
|
|
2311
|
+
version = input(...(ngDevMode ? [undefined, { debugName: "version" }] : []));
|
|
2312
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2313
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: LayoutComponent, isStandalone: true, selector: "ndw-layout", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, topMenuItems: { classPropertyName: "topMenuItems", publicName: "topMenuItems", isSignal: true, isRequired: true, transformFunction: null }, bottomMenuItems: { classPropertyName: "bottomMenuItems", publicName: "bottomMenuItems", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, menuFooterTexts: { classPropertyName: "menuFooterTexts", publicName: "menuFooterTexts", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ndw-main-navigation\n [applicationName]=\"applicationName()\"\n [bottomMenuItems]=\"bottomMenuItems()\"\n [environment]=\"environment()\"\n [footerTexts]=\"menuFooterTexts()\"\n [isCollapsible]=\"isCollapsible()\"\n [isExpanded]=\"isExpanded()\"\n [topMenuItems]=\"topMenuItems()\"\n [version]=\"version()\"\n/>\n<main cdk-scrollable>\n <ng-content />\n</main>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-100);display:grid;grid-template-columns:auto 1fr;height:100svh;position:absolute;width:100svw}:host main{align-content:flex-start;display:grid;grid-template-columns:1fr;height:100%;overflow-y:auto;width:100%;z-index:1}@media screen and (max-width: 1024px){:host{grid-template-columns:1fr;grid-template-rows:auto 1fr}}\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: MainNavigationComponent, selector: "ndw-main-navigation", inputs: ["applicationName", "topMenuItems", "bottomMenuItems", "environment", "footerTexts", "isCollapsible", "version", "isExpanded"], outputs: ["isExpandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2314
|
+
}
|
|
2315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
2386
2316
|
type: Component,
|
|
2387
2317
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkScrollable, MainNavigationComponent], selector: 'ndw-layout', template: "<ndw-main-navigation\n [applicationName]=\"applicationName()\"\n [bottomMenuItems]=\"bottomMenuItems()\"\n [environment]=\"environment()\"\n [footerTexts]=\"menuFooterTexts()\"\n [isCollapsible]=\"isCollapsible()\"\n [isExpanded]=\"isExpanded()\"\n [topMenuItems]=\"topMenuItems()\"\n [version]=\"version()\"\n/>\n<main cdk-scrollable>\n <ng-content />\n</main>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-100);display:grid;grid-template-columns:auto 1fr;height:100svh;position:absolute;width:100svw}:host main{align-content:flex-start;display:grid;grid-template-columns:1fr;height:100%;overflow-y:auto;width:100%;z-index:1}@media screen and (max-width: 1024px){:host{grid-template-columns:1fr;grid-template-rows:auto 1fr}}\n"] }]
|
|
2388
2318
|
}] });
|
|
2389
2319
|
|
|
2390
2320
|
class LayoutBannersComponent {
|
|
2391
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2392
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2321
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutBannersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2322
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: LayoutBannersComponent, isStandalone: true, selector: "ndw-layout-banners", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;position:sticky;top:0;z-index:10}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2393
2323
|
}
|
|
2394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutBannersComponent, decorators: [{
|
|
2395
2325
|
type: Component,
|
|
2396
2326
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-layout-banners', template: "<ng-content />\n", styles: [":host{display:grid;position:sticky;top:0;z-index:10}\n"] }]
|
|
2397
2327
|
}] });
|
|
2398
2328
|
|
|
2399
2329
|
class LoaderComponent {
|
|
2400
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2330
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2331
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: LoaderComponent, isStandalone: true, selector: "ndw-loader", ngImport: i0, template: "<svg viewBox=\"0 0 32 32\">\n <circle cx=\"4\" cy=\"16\" r=\"4\" />\n <circle cx=\"16\" cy=\"16\" r=\"4\" />\n <circle cx=\"28\" cy=\"16\" r=\"4\" />\n</svg>\n", styles: [":host{box-sizing:border-box;display:block;height:var(--ndw-spacing-xl);position:relative;width:var(--ndw-spacing-xl)}:host svg{display:block;inset:var(--ndw-border-size-sm);position:absolute}:host svg circle{animation:traffic 1.5s infinite;animation-delay:.1s;fill:currentColor}:host svg circle:first-of-type{animation-delay:.2s}:host svg circle:last-of-type{animation-delay:0s}@keyframes traffic{0%{transform:translate(calc(var(--ndw-spacing-xl) * -1))}33.33%,66.67%{transform:translate(0)}to{transform:translate(var(--ndw-spacing-xl))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2402
2332
|
}
|
|
2403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2333
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
2404
2334
|
type: Component,
|
|
2405
2335
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-loader', template: "<svg viewBox=\"0 0 32 32\">\n <circle cx=\"4\" cy=\"16\" r=\"4\" />\n <circle cx=\"16\" cy=\"16\" r=\"4\" />\n <circle cx=\"28\" cy=\"16\" r=\"4\" />\n</svg>\n", styles: [":host{box-sizing:border-box;display:block;height:var(--ndw-spacing-xl);position:relative;width:var(--ndw-spacing-xl)}:host svg{display:block;inset:var(--ndw-border-size-sm);position:absolute}:host svg circle{animation:traffic 1.5s infinite;animation-delay:.1s;fill:currentColor}:host svg circle:first-of-type{animation-delay:.2s}:host svg circle:last-of-type{animation-delay:0s}@keyframes traffic{0%{transform:translate(calc(var(--ndw-spacing-xl) * -1))}33.33%,66.67%{transform:translate(0)}to{transform:translate(var(--ndw-spacing-xl))}}\n"] }]
|
|
2406
2336
|
}] });
|
|
@@ -2418,6 +2348,7 @@ const fontMapButtonIcons = [
|
|
|
2418
2348
|
const svgMapButtonIcons = [
|
|
2419
2349
|
'add-traffic-sign',
|
|
2420
2350
|
'add-zone',
|
|
2351
|
+
'download',
|
|
2421
2352
|
'hectometer',
|
|
2422
2353
|
'low-res',
|
|
2423
2354
|
'zoom-to-content',
|
|
@@ -2425,12 +2356,12 @@ const svgMapButtonIcons = [
|
|
|
2425
2356
|
const mapButtonIcons = [...fontMapButtonIcons, ...svgMapButtonIcons];
|
|
2426
2357
|
|
|
2427
2358
|
class MapButtonComponent {
|
|
2428
|
-
icon = input.required();
|
|
2429
|
-
active = input(false);
|
|
2430
|
-
ariaLabel = input();
|
|
2431
|
-
disabled = input(false);
|
|
2359
|
+
icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
2360
|
+
active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
2361
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
2362
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2432
2363
|
clicked = output();
|
|
2433
|
-
buttonIcon = computed(() => this.#icons[this.icon()]);
|
|
2364
|
+
buttonIcon = computed(() => this.#icons[this.icon()], ...(ngDevMode ? [{ debugName: "buttonIcon" }] : []));
|
|
2434
2365
|
svgIcon = computed(() => {
|
|
2435
2366
|
const svgIconNames = [...svgMapButtonIcons];
|
|
2436
2367
|
const icon = this.icon();
|
|
@@ -2439,17 +2370,18 @@ class MapButtonComponent {
|
|
|
2439
2370
|
return active ? `${icon}-active` : icon;
|
|
2440
2371
|
}
|
|
2441
2372
|
return undefined;
|
|
2442
|
-
});
|
|
2373
|
+
}, ...(ngDevMode ? [{ debugName: "svgIcon" }] : []));
|
|
2443
2374
|
iconLabel = computed(() => {
|
|
2444
2375
|
const ariaLabel = this.ariaLabel();
|
|
2445
2376
|
const iconLabel = this.#iconLabels[this.icon()];
|
|
2446
2377
|
return ariaLabel || iconLabel;
|
|
2447
|
-
});
|
|
2378
|
+
}, ...(ngDevMode ? [{ debugName: "iconLabel" }] : []));
|
|
2448
2379
|
// Mapping from button icon names to Material icons or SVG icon IDs.
|
|
2449
2380
|
#icons = {
|
|
2450
2381
|
'add-traffic-sign': 'add_traffic_sign',
|
|
2451
2382
|
'add-zone': 'add_zone',
|
|
2452
2383
|
direction: 'explore',
|
|
2384
|
+
download: 'download',
|
|
2453
2385
|
gps: 'my_location',
|
|
2454
2386
|
hectometer: 'hectometer',
|
|
2455
2387
|
'high-res': 'high_res',
|
|
@@ -2465,6 +2397,7 @@ class MapButtonComponent {
|
|
|
2465
2397
|
'add-traffic-sign': 'Voeg verkeersbord toe',
|
|
2466
2398
|
'add-zone': 'Voeg een zone toe',
|
|
2467
2399
|
direction: 'Herstel kaartrichting',
|
|
2400
|
+
download: 'Download kaartgegevens',
|
|
2468
2401
|
gps: 'Ga naar mijn locatie',
|
|
2469
2402
|
hectometer: 'Toon hectometrering',
|
|
2470
2403
|
'high-res': 'Hoge resolutie',
|
|
@@ -2476,50 +2409,50 @@ class MapButtonComponent {
|
|
|
2476
2409
|
'zoom-out': 'Zoom uit',
|
|
2477
2410
|
'zoom-to-content': 'Zoom naar inhoud',
|
|
2478
2411
|
};
|
|
2479
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2480
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2412
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2413
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MapButtonComponent, isStandalone: true, selector: "ndw-map-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"map-control\"\n [class.active]=\"active()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"iconLabel()\"\n (click)=\"clicked.emit()\"\n [ndwTooltip]=\"iconLabel()\"\n>\n @if (svgIcon()) {\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\n </svg>\n } @else {\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n }\n <div class=\"content-wrapper\">\n <ng-content />\n </div>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{width:fit-content}.map-control{justify-content:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2481
2414
|
}
|
|
2482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapButtonComponent, decorators: [{
|
|
2483
2416
|
type: Component,
|
|
2484
2417
|
args: [{ selector: 'ndw-map-button', imports: [IconComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"map-control\"\n [class.active]=\"active()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"iconLabel()\"\n (click)=\"clicked.emit()\"\n [ndwTooltip]=\"iconLabel()\"\n>\n @if (svgIcon()) {\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\n </svg>\n } @else {\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n }\n <div class=\"content-wrapper\">\n <ng-content />\n </div>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{width:fit-content}.map-control{justify-content:center}\n"] }]
|
|
2485
2418
|
}] });
|
|
2486
2419
|
|
|
2487
2420
|
class MapDisplayOptionComponent {
|
|
2488
|
-
option = input.required();
|
|
2489
|
-
direction = input('row');
|
|
2490
|
-
type = input('checkbox');
|
|
2491
|
-
group = input();
|
|
2421
|
+
option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
|
|
2422
|
+
direction = input('row', ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
2423
|
+
type = input('checkbox', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
2424
|
+
group = input(...(ngDevMode ? [undefined, { debugName: "group" }] : []));
|
|
2492
2425
|
selectionChange = output();
|
|
2493
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2494
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2426
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapDisplayOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2427
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MapDisplayOptionComponent, isStandalone: true, selector: "ndw-map-display-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "@if (type() === 'button') {\n <button\n type=\"button\"\n [title]=\"option().description ?? ''\"\n [class.column]=\"direction() === 'column'\"\n (click)=\"selectionChange.emit(option())\"\n >\n <ng-container *ngTemplateOutlet=\"template\" />\n <span class=\"name\">{{ option().name }}</span>\n </button>\n} @else if (type() === 'radio' || type() === 'checkbox') {\n <label [class.column]=\"direction() === 'column'\" [title]=\"option().description ?? ''\">\n <input\n [type]=\"type()\"\n name=\"{{ group() }}\"\n [checked]=\"option().active\"\n (change)=\"selectionChange.emit(option())\"\n />\n <ng-container *ngTemplateOutlet=\"template\" />\n <span class=\"name\">{{ option().name }}</span>\n </label>\n} @else {\n <ng-container *ngTemplateOutlet=\"template\" />\n}\n\n<ng-template #template>\n @if (option().imageLink) {\n <img [src]=\"option().imageLink\" [alt]=\"option().name\" />\n } @else {\n <ndw-icon>stacks</ndw-icon>\n }\n</ng-template>\n", styles: ["button,label{padding:0;border:0;display:flex;align-items:center;width:100%;height:40px;gap:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);transition:background-color var(--ndw-animation-speed-default) ease-out;border-radius:var(--ndw-border-radius-sm);cursor:pointer}button.column,label.column{flex-direction:column;justify-content:end;width:64px;height:64px}button:not(.column),label:not(.column){padding:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs)}button:not(.column):has(input:checked),label:not(.column):has(input:checked){font-weight:var(--ndw-font-weight-bold)}button:hover,label:hover{background-color:var(--ndw-color-grey-100)}button:has(input:checked) img,button:has(input:checked) ndw-icon,label:has(input:checked) img,label:has(input:checked) ndw-icon{box-shadow:0 0 0 2px var(--ndw-color-secondary-400)}button input,label input{visibility:hidden;position:absolute;width:0;height:0;opacity:0;pointer-events:none;z-index:-1;left:-9999px;top:-9999px}img,ndw-icon{display:block;overflow:hidden;padding:var(--ndw-spacing-2xs);width:32px;height:32px;object-fit:cover;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-xs)}.name{font-size:var(--ndw-font-size-sm);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2495
2428
|
}
|
|
2496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapDisplayOptionComponent, decorators: [{
|
|
2497
2430
|
type: Component,
|
|
2498
2431
|
args: [{ selector: 'ndw-map-display-option', imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (type() === 'button') {\n <button\n type=\"button\"\n [title]=\"option().description ?? ''\"\n [class.column]=\"direction() === 'column'\"\n (click)=\"selectionChange.emit(option())\"\n >\n <ng-container *ngTemplateOutlet=\"template\" />\n <span class=\"name\">{{ option().name }}</span>\n </button>\n} @else if (type() === 'radio' || type() === 'checkbox') {\n <label [class.column]=\"direction() === 'column'\" [title]=\"option().description ?? ''\">\n <input\n [type]=\"type()\"\n name=\"{{ group() }}\"\n [checked]=\"option().active\"\n (change)=\"selectionChange.emit(option())\"\n />\n <ng-container *ngTemplateOutlet=\"template\" />\n <span class=\"name\">{{ option().name }}</span>\n </label>\n} @else {\n <ng-container *ngTemplateOutlet=\"template\" />\n}\n\n<ng-template #template>\n @if (option().imageLink) {\n <img [src]=\"option().imageLink\" [alt]=\"option().name\" />\n } @else {\n <ndw-icon>stacks</ndw-icon>\n }\n</ng-template>\n", styles: ["button,label{padding:0;border:0;display:flex;align-items:center;width:100%;height:40px;gap:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);transition:background-color var(--ndw-animation-speed-default) ease-out;border-radius:var(--ndw-border-radius-sm);cursor:pointer}button.column,label.column{flex-direction:column;justify-content:end;width:64px;height:64px}button:not(.column),label:not(.column){padding:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs)}button:not(.column):has(input:checked),label:not(.column):has(input:checked){font-weight:var(--ndw-font-weight-bold)}button:hover,label:hover{background-color:var(--ndw-color-grey-100)}button:has(input:checked) img,button:has(input:checked) ndw-icon,label:has(input:checked) img,label:has(input:checked) ndw-icon{box-shadow:0 0 0 2px var(--ndw-color-secondary-400)}button input,label input{visibility:hidden;position:absolute;width:0;height:0;opacity:0;pointer-events:none;z-index:-1;left:-9999px;top:-9999px}img,ndw-icon{display:block;overflow:hidden;padding:var(--ndw-spacing-2xs);width:32px;height:32px;object-fit:cover;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-xs)}.name{font-size:var(--ndw-font-size-sm);white-space:nowrap}\n"] }]
|
|
2499
2432
|
}] });
|
|
2500
2433
|
|
|
2501
2434
|
class MapDisplayComponent {
|
|
2502
|
-
title = input('Kaartweergave');
|
|
2503
|
-
backgroundsTitle = input('Achtergrond');
|
|
2504
|
-
layersTitle = input('Gegevens');
|
|
2505
|
-
enableClearLayers = input(true);
|
|
2506
|
-
layerOptionType = input('checkbox');
|
|
2507
|
-
backgroundOptions = input([], {
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
layerOptions = input([], {
|
|
2511
|
-
|
|
2512
|
-
|
|
2435
|
+
title = input('Kaartweergave', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
2436
|
+
backgroundsTitle = input('Achtergrond', ...(ngDevMode ? [{ debugName: "backgroundsTitle" }] : []));
|
|
2437
|
+
layersTitle = input('Gegevens', ...(ngDevMode ? [{ debugName: "layersTitle" }] : []));
|
|
2438
|
+
enableClearLayers = input(true, ...(ngDevMode ? [{ debugName: "enableClearLayers" }] : []));
|
|
2439
|
+
layerOptionType = input('checkbox', ...(ngDevMode ? [{ debugName: "layerOptionType" }] : []));
|
|
2440
|
+
backgroundOptions = input([], ...(ngDevMode ? [{ debugName: "backgroundOptions", transform: (options) => (options ?? []).map((bg) => ({ ...bg })) }] : [{
|
|
2441
|
+
transform: (options) => (options ?? []).map((bg) => ({ ...bg })),
|
|
2442
|
+
}]));
|
|
2443
|
+
layerOptions = input([], ...(ngDevMode ? [{ debugName: "layerOptions", transform: (options) => (options ?? []).map((layer) => ({ ...layer })) }] : [{
|
|
2444
|
+
transform: (options) => (options ?? []).map((layer) => ({ ...layer })),
|
|
2445
|
+
}]));
|
|
2513
2446
|
backgroundChange = output();
|
|
2514
2447
|
layerChange = output();
|
|
2515
2448
|
clearAllLayers = output();
|
|
2516
|
-
open = model(false);
|
|
2517
|
-
htmlIsRendered = signal(false);
|
|
2518
|
-
showPopover = computed(() => this.open() && this.htmlIsRendered());
|
|
2449
|
+
open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
|
|
2450
|
+
htmlIsRendered = signal(false, ...(ngDevMode ? [{ debugName: "htmlIsRendered" }] : []));
|
|
2451
|
+
showPopover = computed(() => this.open() && this.htmlIsRendered(), ...(ngDevMode ? [{ debugName: "showPopover" }] : []));
|
|
2519
2452
|
linkedBackgroundOptions = linkedSignal(this.backgroundOptions);
|
|
2520
|
-
activeBackgroundOption = computed(() => this.linkedBackgroundOptions()?.find((opt) => opt.active));
|
|
2453
|
+
activeBackgroundOption = computed(() => this.linkedBackgroundOptions()?.find((opt) => opt.active), ...(ngDevMode ? [{ debugName: "activeBackgroundOption" }] : []));
|
|
2521
2454
|
linkedLayerOptions = linkedSignal(this.layerOptions);
|
|
2522
|
-
numberOfSelectedLayers = computed(() => this.linkedLayerOptions()?.filter((opt) => opt.active)?.length ?? 0);
|
|
2455
|
+
numberOfSelectedLayers = computed(() => this.linkedLayerOptions()?.filter((opt) => opt.active)?.length ?? 0, ...(ngDevMode ? [{ debugName: "numberOfSelectedLayers" }] : []));
|
|
2523
2456
|
constructor() {
|
|
2524
2457
|
afterNextRender(() => this.htmlIsRendered.set(true));
|
|
2525
2458
|
}
|
|
@@ -2568,12 +2501,12 @@ class MapDisplayComponent {
|
|
|
2568
2501
|
this.selectBackground(options[0]);
|
|
2569
2502
|
}
|
|
2570
2503
|
}
|
|
2571
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2572
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2504
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2505
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MapDisplayComponent, isStandalone: true, selector: "ndw-map-display", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, backgroundsTitle: { classPropertyName: "backgroundsTitle", publicName: "backgroundsTitle", isSignal: true, isRequired: false, transformFunction: null }, layersTitle: { classPropertyName: "layersTitle", publicName: "layersTitle", isSignal: true, isRequired: false, transformFunction: null }, enableClearLayers: { classPropertyName: "enableClearLayers", publicName: "enableClearLayers", isSignal: true, isRequired: false, transformFunction: null }, layerOptionType: { classPropertyName: "layerOptionType", publicName: "layerOptionType", isSignal: true, isRequired: false, transformFunction: null }, backgroundOptions: { classPropertyName: "backgroundOptions", publicName: "backgroundOptions", isSignal: true, isRequired: false, transformFunction: null }, layerOptions: { classPropertyName: "layerOptions", publicName: "layerOptions", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backgroundChange: "backgroundChange", layerChange: "layerChange", clearAllLayers: "clearAllLayers", open: "openChange" }, ngImport: i0, template: "<div class=\"map-control\" [class.active]=\"open()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n @let activeBackground = activeBackgroundOption();\n @if (activeBackground) {\n <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\n }\n\n <button class=\"content-wrapper\" type=\"button\" (click)=\"open.set(!open())\">\n {{ title() }}\n </button>\n\n @if (numberOfSelectedLayers() && enableClearLayers()) {\n <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\n }\n\n <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"showPopover()\"\n (detach)=\"open.set(false)\"\n (overlayOutsideClick)=\"open.set(false)\"\n>\n <div class=\"map-control-dropdown\">\n <header>\n <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n <button ndwButton tertiary type=\"button\" (click)=\"open.set(false)\">\n <ndw-icon>close</ndw-icon>\n <span class=\"sr-only\">Sluit {{ title() }}</span>\n </button>\n </header>\n\n <div class=\"map-control-dropdown__content\">\n @if (linkedBackgroundOptions().length) {\n <section class=\"map-control-dropdown__section\">\n <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">\n {{ backgroundsTitle() }}\n </h4>\n <ul class=\"map-control-dropdown__backgrounds\">\n @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\n <li>\n <ndw-map-display-option\n [option]=\"backgroundOption\"\n [group]=\"'map-backgrounds'\"\n [type]=\"'radio'\"\n [direction]=\"'column'\"\n (selectionChange)=\"selectBackground($event)\"\n />\n </li>\n }\n </ul>\n </section>\n }\n\n @if (linkedLayerOptions().length) {\n <section class=\"map-control-dropdown__section\">\n <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">{{ layersTitle() }}</h4>\n <ul>\n @for (layerOption of linkedLayerOptions(); track layerOption.id) {\n <li>\n <ndw-map-display-option\n [option]=\"layerOption\"\n [group]=\"'map-layers'\"\n [type]=\"layerOptionType()\"\n [direction]=\"'row'\"\n (selectionChange)=\"toggleLayer($event)\"\n />\n </li>\n }\n </ul>\n </section>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".map-control{padding:.25rem}.map-control-dropdown__section:not(:first-of-type){margin-top:var(--ndw-spacing-md)}.map-control-dropdown ul{margin-block-start:var(--ndw-spacing-xs);margin-block-end:0;list-style-type:none;padding:0}.map-control-dropdown ul.map-control-dropdown__backgrounds{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:var(--ndw-spacing-2xs)}.map-control-dropdown__subtitle{color:var(--ndw-color-grey-600);padding-inline:var(--ndw-spacing-2xs);margin-block:0}\n"], dependencies: [{ kind: "component", type: MapDisplayOptionComponent, selector: "ndw-map-display-option", inputs: ["option", "direction", "type", "group"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2573
2506
|
}
|
|
2574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapDisplayComponent, decorators: [{
|
|
2575
2508
|
type: Component,
|
|
2576
|
-
args: [{ selector: 'ndw-map-display', imports: [
|
|
2509
|
+
args: [{ selector: 'ndw-map-display', imports: [MapDisplayOptionComponent, OverlayModule, IconComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"map-control\" [class.active]=\"open()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n @let activeBackground = activeBackgroundOption();\n @if (activeBackground) {\n <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\n }\n\n <button class=\"content-wrapper\" type=\"button\" (click)=\"open.set(!open())\">\n {{ title() }}\n </button>\n\n @if (numberOfSelectedLayers() && enableClearLayers()) {\n <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\n }\n\n <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"showPopover()\"\n (detach)=\"open.set(false)\"\n (overlayOutsideClick)=\"open.set(false)\"\n>\n <div class=\"map-control-dropdown\">\n <header>\n <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n <button ndwButton tertiary type=\"button\" (click)=\"open.set(false)\">\n <ndw-icon>close</ndw-icon>\n <span class=\"sr-only\">Sluit {{ title() }}</span>\n </button>\n </header>\n\n <div class=\"map-control-dropdown__content\">\n @if (linkedBackgroundOptions().length) {\n <section class=\"map-control-dropdown__section\">\n <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">\n {{ backgroundsTitle() }}\n </h4>\n <ul class=\"map-control-dropdown__backgrounds\">\n @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\n <li>\n <ndw-map-display-option\n [option]=\"backgroundOption\"\n [group]=\"'map-backgrounds'\"\n [type]=\"'radio'\"\n [direction]=\"'column'\"\n (selectionChange)=\"selectBackground($event)\"\n />\n </li>\n }\n </ul>\n </section>\n }\n\n @if (linkedLayerOptions().length) {\n <section class=\"map-control-dropdown__section\">\n <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">{{ layersTitle() }}</h4>\n <ul>\n @for (layerOption of linkedLayerOptions(); track layerOption.id) {\n <li>\n <ndw-map-display-option\n [option]=\"layerOption\"\n [group]=\"'map-layers'\"\n [type]=\"layerOptionType()\"\n [direction]=\"'row'\"\n (selectionChange)=\"toggleLayer($event)\"\n />\n </li>\n }\n </ul>\n </section>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".map-control{padding:.25rem}.map-control-dropdown__section:not(:first-of-type){margin-top:var(--ndw-spacing-md)}.map-control-dropdown ul{margin-block-start:var(--ndw-spacing-xs);margin-block-end:0;list-style-type:none;padding:0}.map-control-dropdown ul.map-control-dropdown__backgrounds{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:var(--ndw-spacing-2xs)}.map-control-dropdown__subtitle{color:var(--ndw-color-grey-600);padding-inline:var(--ndw-spacing-2xs);margin-block:0}\n"] }]
|
|
2577
2510
|
}], ctorParameters: () => [] });
|
|
2578
2511
|
|
|
2579
2512
|
const MAP_BACKGROUND_IMAGES = {
|
|
@@ -2755,11 +2688,11 @@ const MAP_LAYERS = {
|
|
|
2755
2688
|
};
|
|
2756
2689
|
|
|
2757
2690
|
class MapLegendOptionComponent {
|
|
2758
|
-
option = input.required();
|
|
2759
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2760
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2691
|
+
option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
|
|
2692
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapLegendOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2693
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MapLegendOptionComponent, isStandalone: true, selector: "ndw-map-legend-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@let opt = option();\n<div class=\"option-type\">\n @switch (opt.type) {\n @case ('circle') {\n <div class=\"circle\" [style.--map-legend-option-color]=\"opt.color\"></div>\n }\n\n @case ('line') {\n <div\n class=\"line\"\n [class.dashed]=\"opt.fillMode === 'dashed'\"\n [style.--map-legend-option-color]=\"opt.color\"\n ></div>\n }\n\n @case ('icon') {\n <ndw-icon class=\"icon\">{{ opt.iconName }}</ndw-icon>\n }\n\n @case ('image') {\n <img\n class=\"image\"\n [class.contain]=\"opt.objectFit === 'contain'\"\n [src]=\"opt.src\"\n [alt]=\"opt.label\"\n />\n }\n\n @case ('polygon') {\n <div class=\"polygon\" [style.--map-legend-option-color]=\"opt.color\">\n <svg viewBox=\"0 0 20 20\">\n <polygon points=\"10,1 1,19 19,19\" />\n </svg>\n <div class=\"dot\"></div>\n <div class=\"dot\"></div>\n <div class=\"dot\"></div>\n </div>\n }\n }\n</div>\n\n<span class=\"ndw-paragraph-md option-label\">\n {{ opt.label }}\n</span>\n", styles: ["*{box-sizing:border-box}:host{display:grid;grid-template-columns:1.5rem 1fr;align-items:flex-start;justify-content:flex-start;min-height:2rem;padding-block:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs);color:var(--ndw-color-grey-600)}:host .option-type{display:flex;min-height:1.5rem;align-items:center;justify-content:center}:host .option-label{display:block;margin-block-start:var(--ndw-spacing-2xs)}:host .circle{border-radius:50%;width:var(--ndw-spacing-xs);aspect-ratio:1;background-color:var(--map-legend-option-color)}:host .line{--line-width: 14px;--line-height: 4px;width:var(--line-width);height:var(--line-height);background-color:var(--map-legend-option-color);border-radius:var(--ndw-border-radius-md)}:host .line.dashed{background-color:transparent;background-image:linear-gradient(to right,var(--map-legend-option-color) 20%,white 20%,white 37.5%,var(--map-legend-option-color) 37.5%,var(--map-legend-option-color) 62.5%,white 62.5%,white 80%,var(--map-legend-option-color) 80%);background-size:var(--line-width) var(--line-height);background-repeat:no-repeat}:host .icon{font-size:.875rem}:host .image{width:16px;height:16px;object-fit:cover;border-radius:var(--ndw-border-radius-sm)}:host .image.contain{object-fit:contain}:host .polygon{--polygon-size: 12px;--dot-size: 5px;position:relative;width:var(--polygon-size);height:var(--polygon-size)}:host .polygon svg{position:absolute;inset:0}:host .polygon svg polygon{fill:#fff;stroke:var(--map-legend-option-color);stroke-width:3}:host .polygon .dot{position:absolute;width:var(--dot-size);height:var(--dot-size);background-color:var(--map-legend-option-color);border-radius:50%}:host .polygon .dot:nth-child(2){top:0;left:50%;transform:translate(-50%,-50%)}:host .polygon .dot:nth-child(3){bottom:0;left:0;transform:translate(-50%,50%)}:host .polygon .dot:nth-child(4){bottom:0;right:0;transform:translate(50%,50%)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2761
2694
|
}
|
|
2762
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2695
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapLegendOptionComponent, decorators: [{
|
|
2763
2696
|
type: Component,
|
|
2764
2697
|
args: [{ selector: 'ndw-map-legend-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], host: {
|
|
2765
2698
|
role: 'listitem',
|
|
@@ -2767,13 +2700,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2767
2700
|
}] });
|
|
2768
2701
|
|
|
2769
2702
|
class MapLegendGroupComponent {
|
|
2770
|
-
group = input.required();
|
|
2771
|
-
singleGroup = input(false);
|
|
2772
|
-
index = input(0);
|
|
2773
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2774
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2703
|
+
group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
|
|
2704
|
+
singleGroup = input(false, ...(ngDevMode ? [{ debugName: "singleGroup" }] : []));
|
|
2705
|
+
index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : []));
|
|
2706
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapLegendGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2707
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MapLegendGroupComponent, isStandalone: true, selector: "ndw-map-legend-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, singleGroup: { classPropertyName: "singleGroup", publicName: "singleGroup", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@if (group().label) {\n <h4\n class=\"ndw-paragraph-bold-md group-title\"\n [class.sr-only]=\"singleGroup()\"\n [class.group-title--first]=\"index() === 0\"\n >\n {{ group().label }}\n </h4>\n}\n<ul>\n @for (option of group().options; let i = $index; track i) {\n <ndw-map-legend-option [option]=\"option\" />\n }\n</ul>\n", styles: ["*{box-sizing:border-box}.group-title{display:block;margin-block-start:var(--ndw-spacing-sm);margin-block-end:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-600)}.group-title--first{margin-block-start:0}ul{list-style:none;padding:0;margin:0}\n"], dependencies: [{ kind: "component", type: MapLegendOptionComponent, selector: "ndw-map-legend-option", inputs: ["option"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2775
2708
|
}
|
|
2776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2709
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapLegendGroupComponent, decorators: [{
|
|
2777
2710
|
type: Component,
|
|
2778
2711
|
args: [{ selector: 'ndw-map-legend-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MapLegendOptionComponent], host: {
|
|
2779
2712
|
role: 'listitem',
|
|
@@ -2781,41 +2714,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2781
2714
|
}] });
|
|
2782
2715
|
|
|
2783
2716
|
class MapLegendComponent {
|
|
2784
|
-
groups = input.required();
|
|
2785
|
-
icon = input('legend_toggle');
|
|
2786
|
-
title = input('Legenda');
|
|
2787
|
-
viewMode = input('dropdown');
|
|
2788
|
-
open = model(false);
|
|
2789
|
-
htmlIsRendered = signal(false);
|
|
2790
|
-
showPopover = computed(() => this.open() && this.htmlIsRendered());
|
|
2791
|
-
isDropdownViewMode = computed(() => this.viewMode() === 'dropdown');
|
|
2792
|
-
isFixedViewMode = computed(() => this.viewMode() === 'fixed');
|
|
2793
|
-
hasJustOneGroup = computed(() => this.groups().length === 1);
|
|
2717
|
+
groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : []));
|
|
2718
|
+
icon = input('legend_toggle', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
2719
|
+
title = input('Legenda', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
2720
|
+
viewMode = input('dropdown', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
|
|
2721
|
+
open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
|
|
2722
|
+
htmlIsRendered = signal(false, ...(ngDevMode ? [{ debugName: "htmlIsRendered" }] : []));
|
|
2723
|
+
showPopover = computed(() => this.open() && this.htmlIsRendered(), ...(ngDevMode ? [{ debugName: "showPopover" }] : []));
|
|
2724
|
+
isDropdownViewMode = computed(() => this.viewMode() === 'dropdown', ...(ngDevMode ? [{ debugName: "isDropdownViewMode" }] : []));
|
|
2725
|
+
isFixedViewMode = computed(() => this.viewMode() === 'fixed', ...(ngDevMode ? [{ debugName: "isFixedViewMode" }] : []));
|
|
2726
|
+
hasJustOneGroup = computed(() => this.groups().length === 1, ...(ngDevMode ? [{ debugName: "hasJustOneGroup" }] : []));
|
|
2794
2727
|
constructor() {
|
|
2795
2728
|
afterNextRender(() => this.htmlIsRendered.set(true));
|
|
2796
2729
|
}
|
|
2797
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2798
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2730
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2731
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MapLegendComponent, isStandalone: true, selector: "ndw-map-legend", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "@if (isDropdownViewMode()) {\n <button\n class=\"map-control\"\n [class.active]=\"open()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"open.set(!open())\"\n >\n <ndw-icon>{{ icon() }}</ndw-icon>\n <span class=\"content-wrapper\">\n {{ title() }}\n </span>\n <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\n </button>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"showPopover()\"\n (detach)=\"open.set(false)\"\n >\n <ng-container *ngTemplateOutlet=\"dropdown\" />\n </ng-template>\n} @else {\n <ng-container *ngTemplateOutlet=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n <div class=\"map-control-dropdown\" [class.fixed]=\"isFixedViewMode()\">\n <header>\n <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n\n @if (isDropdownViewMode()) {\n <button\n class=\"map-control-dropdown__close\"\n ndwButton\n tertiary\n type=\"button\"\n (click)=\"open.set(false)\"\n >\n <ndw-icon>close</ndw-icon>\n <span class=\"sr-only\">Sluit {{ title() }}</span>\n </button>\n }\n </header>\n\n <div class=\"map-control-dropdown__content\">\n @if (hasJustOneGroup()) {\n <ndw-map-legend-group [group]=\"groups()[0]\" [singleGroup]=\"true\" />\n } @else {\n <ul class=\"groups\">\n @for (group of groups(); let i = $index; track i) {\n @if (!!group.options.length) {\n <ndw-map-legend-group [group]=\"group\" [index]=\"i\" />\n }\n }\n </ul>\n }\n </div>\n </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}ul{list-style-type:none;padding:0;margin:0}.groups{padding:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: MapLegendGroupComponent, selector: "ndw-map-legend-group", inputs: ["group", "singleGroup", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2799
2732
|
}
|
|
2800
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2733
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MapLegendComponent, decorators: [{
|
|
2801
2734
|
type: Component,
|
|
2802
2735
|
args: [{ selector: 'ndw-map-legend', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, OverlayModule, MapLegendGroupComponent], template: "@if (isDropdownViewMode()) {\n <button\n class=\"map-control\"\n [class.active]=\"open()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"open.set(!open())\"\n >\n <ndw-icon>{{ icon() }}</ndw-icon>\n <span class=\"content-wrapper\">\n {{ title() }}\n </span>\n <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\n </button>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"showPopover()\"\n (detach)=\"open.set(false)\"\n >\n <ng-container *ngTemplateOutlet=\"dropdown\" />\n </ng-template>\n} @else {\n <ng-container *ngTemplateOutlet=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n <div class=\"map-control-dropdown\" [class.fixed]=\"isFixedViewMode()\">\n <header>\n <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n\n @if (isDropdownViewMode()) {\n <button\n class=\"map-control-dropdown__close\"\n ndwButton\n tertiary\n type=\"button\"\n (click)=\"open.set(false)\"\n >\n <ndw-icon>close</ndw-icon>\n <span class=\"sr-only\">Sluit {{ title() }}</span>\n </button>\n }\n </header>\n\n <div class=\"map-control-dropdown__content\">\n @if (hasJustOneGroup()) {\n <ndw-map-legend-group [group]=\"groups()[0]\" [singleGroup]=\"true\" />\n } @else {\n <ul class=\"groups\">\n @for (group of groups(); let i = $index; track i) {\n @if (!!group.options.length) {\n <ndw-map-legend-group [group]=\"group\" [index]=\"i\" />\n }\n }\n </ul>\n }\n </div>\n </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}ul{list-style-type:none;padding:0;margin:0}.groups{padding:var(--ndw-spacing-2xs)}\n"] }]
|
|
2803
2736
|
}], ctorParameters: () => [] });
|
|
2804
2737
|
|
|
2805
2738
|
class ModalContentComponent {
|
|
2806
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2807
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2739
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2740
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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;word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2808
2741
|
}
|
|
2809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalContentComponent, decorators: [{
|
|
2810
2743
|
type: Component,
|
|
2811
2744
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-modal-content', template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto;word-break:break-word}\n"] }]
|
|
2812
2745
|
}] });
|
|
2813
2746
|
|
|
2814
2747
|
class ModalFooterComponent {
|
|
2815
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2816
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2748
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2749
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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);word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2817
2750
|
}
|
|
2818
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2751
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalFooterComponent, decorators: [{
|
|
2819
2752
|
type: Component,
|
|
2820
2753
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-modal-footer', 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);word-break:break-word}\n"] }]
|
|
2821
2754
|
}] });
|
|
@@ -2840,10 +2773,10 @@ class ModalService extends Dialog {
|
|
|
2840
2773
|
this.backdropClick$ = this.#modalRef.backdropClick;
|
|
2841
2774
|
this.closed$ = this.#modalRef.closed;
|
|
2842
2775
|
}
|
|
2843
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2844
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2776
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
2777
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalService, providedIn: 'root' });
|
|
2845
2778
|
}
|
|
2846
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2779
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalService, decorators: [{
|
|
2847
2780
|
type: Injectable,
|
|
2848
2781
|
args: [{
|
|
2849
2782
|
providedIn: 'root',
|
|
@@ -2855,20 +2788,20 @@ class ModalHeaderComponent {
|
|
|
2855
2788
|
detachModal() {
|
|
2856
2789
|
this.#modalService?.close();
|
|
2857
2790
|
}
|
|
2858
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2859
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2791
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2792
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: ModalHeaderComponent, isStandalone: true, selector: "ndw-modal-header", ngImport: i0, template: "<ng-content />\n<button\n ndwButton\n tertiary\n extra-small\n ariaLabel=\"Close\"\n data-testid=\"close-button\"\n (click)=\"detachModal()\"\n>\n <ndw-icon>close</ndw-icon>\n</button>\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n", ":host{display:grid;font-family:var(--ndw-font-family-heading);grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2860
2793
|
}
|
|
2861
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalHeaderComponent, decorators: [{
|
|
2862
2795
|
type: Component,
|
|
2863
2796
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent], selector: 'ndw-modal-header', template: "<ng-content />\n<button\n ndwButton\n tertiary\n extra-small\n ariaLabel=\"Close\"\n data-testid=\"close-button\"\n (click)=\"detachModal()\"\n>\n <ndw-icon>close</ndw-icon>\n</button>\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n", ":host{display:grid;font-family:var(--ndw-font-family-heading);grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\n"] }]
|
|
2864
2797
|
}] });
|
|
2865
2798
|
|
|
2866
2799
|
class ModalComponent {
|
|
2867
|
-
size = input('sm');
|
|
2868
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2869
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
2800
|
+
size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
2801
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2802
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: ModalComponent, isStandalone: true, selector: "ndw-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.modal-size-md": "size() === \"md\"", "class.modal-size-sm": "size() === \"sm\"" } }, 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)}:host.collapsible{box-sizing:content-box}\n", ":host{box-sizing:border-box;display:flex;flex-direction:column;max-height:100svh;max-width:var(--ndw-modal-width-sm);width:100vw}:host.modal-size-md{max-width:var(--ndw-modal-width-md)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2870
2803
|
}
|
|
2871
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ModalComponent, decorators: [{
|
|
2872
2805
|
type: Component,
|
|
2873
2806
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2874
2807
|
'[class.modal-size-md]': 'size() === "md"',
|
|
@@ -2885,23 +2818,24 @@ const MODAL_COMPONENTS = [
|
|
|
2885
2818
|
|
|
2886
2819
|
class MultiSelectComponent {
|
|
2887
2820
|
dropdownTrigger = viewChild.required(PopoverTriggerDirective);
|
|
2888
|
-
buttonText = input.required();
|
|
2889
|
-
searchLabel = input('Zoek in lijst.');
|
|
2890
|
-
prefixIcon = input('');
|
|
2891
|
-
searchPlaceholder = input('Zoek in lijst...');
|
|
2892
|
-
noResultText = input('Oeps, geen resultaten gevonden. Probeer een andere zoekterm.');
|
|
2893
|
-
chevron = input(true);
|
|
2894
|
-
disabled = input(false);
|
|
2895
|
-
selectAmountHidden = input(false);
|
|
2821
|
+
buttonText = input.required(...(ngDevMode ? [{ debugName: "buttonText" }] : []));
|
|
2822
|
+
searchLabel = input('Zoek in lijst.', ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
|
|
2823
|
+
prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
|
|
2824
|
+
searchPlaceholder = input('Zoek in lijst...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
|
|
2825
|
+
noResultText = input('Oeps, geen resultaten gevonden. Probeer een andere zoekterm.', ...(ngDevMode ? [{ debugName: "noResultText" }] : []));
|
|
2826
|
+
chevron = input(true, ...(ngDevMode ? [{ debugName: "chevron" }] : []));
|
|
2827
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2828
|
+
selectAmountHidden = input(false, ...(ngDevMode ? [{ debugName: "selectAmountHidden" }] : []));
|
|
2896
2829
|
selectAllText = input({
|
|
2897
2830
|
deselect: 'Deselecteer alles',
|
|
2898
2831
|
select: 'Selecteer alles',
|
|
2899
|
-
});
|
|
2900
|
-
dataSource = model([]);
|
|
2901
|
-
lastCheckedElementId = model();
|
|
2902
|
-
searchInputValue = model('');
|
|
2903
|
-
|
|
2904
|
-
|
|
2832
|
+
}, ...(ngDevMode ? [{ debugName: "selectAllText" }] : []));
|
|
2833
|
+
dataSource = model([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
|
|
2834
|
+
lastCheckedElementId = model(...(ngDevMode ? [undefined, { debugName: "lastCheckedElementId" }] : []));
|
|
2835
|
+
searchInputValue = model('', ...(ngDevMode ? [{ debugName: "searchInputValue" }] : []));
|
|
2836
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
2837
|
+
selectAmount = computed(() => this.dataSource().filter((checkbox) => checkbox.value).length, ...(ngDevMode ? [{ debugName: "selectAmount" }] : []));
|
|
2838
|
+
noSearchResults = computed(() => this.dataSource().filter((checkbox) => checkbox.label.toLowerCase().includes(this.searchInputValue().toLowerCase())).length === 0, ...(ngDevMode ? [{ debugName: "noSearchResults" }] : []));
|
|
2905
2839
|
filterSearch(value) {
|
|
2906
2840
|
return value.toLowerCase().includes(this.searchInputValue().toLowerCase());
|
|
2907
2841
|
}
|
|
@@ -2923,6 +2857,7 @@ class MultiSelectComponent {
|
|
|
2923
2857
|
});
|
|
2924
2858
|
}
|
|
2925
2859
|
isOpenChanged(isOpen) {
|
|
2860
|
+
this.isOpen.set(isOpen);
|
|
2926
2861
|
if (isOpen) {
|
|
2927
2862
|
this.dataSource.set(this.dataSource()
|
|
2928
2863
|
.slice()
|
|
@@ -2941,10 +2876,10 @@ class MultiSelectComponent {
|
|
|
2941
2876
|
this.lastCheckedElementId.set(null);
|
|
2942
2877
|
}
|
|
2943
2878
|
}
|
|
2944
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2945
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2879
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2880
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: false, 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 }, selectAmountHidden: { classPropertyName: "selectAmountHidden", publicName: "selectAmountHidden", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, lastCheckedElementId: { classPropertyName: "lastCheckedElementId", publicName: "lastCheckedElementId", isSignal: true, isRequired: false, transformFunction: null }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", lastCheckedElementId: "lastCheckedElementIdChange", searchInputValue: "searchInputValueChange" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ndw-dropdown\n prefixIcon=\"filter_alt\"\n [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n (tagClicked)=\"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-list class=\"multi-select-container\">\n @for (checkbox of dataSource(); track checkbox.id) {\n @if (filterSearch(checkbox.label)) {\n <ndw-list-item\n [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n [checkable]=\"true\"\n [checked]=\"checkbox.value\"\n [prefixIcon]=\"checkbox.icon\"\n [subtitle]=\"checkbox.label\"\n (checkedChange)=\"checkboxChanged(checkbox.id)\"\n >\n @if (checkbox.image && isOpen()) {\n <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n }\n </ndw-list-item>\n }\n }\n </ndw-list>\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: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.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{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{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-dropdown{width:inherit}.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: DropdownComponent, selector: "ndw-dropdown", inputs: ["disabled", "chevron", "buttonText", "prefixIcon", "selectAmount"], outputs: ["tagClicked", "isOpenChange"] }, { kind: "component", type: FormFieldComponent, selector: "ndw-form-field", inputs: ["label", "suffixAriaLabel", "hideLabel", "disabled", "error", "success", "info", "tooltip"], outputs: ["clearButtonClicked"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: ListComponent, selector: "ndw-list", inputs: ["elevated"] }, { kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "buttonIcon", "buttonLabel", "checkable", "checkType", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2946
2881
|
}
|
|
2947
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
2948
2883
|
type: Component,
|
|
2949
2884
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2950
2885
|
DropdownComponent,
|
|
@@ -2953,31 +2888,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2953
2888
|
IconComponent,
|
|
2954
2889
|
ListComponent,
|
|
2955
2890
|
ListItemComponent,
|
|
2956
|
-
], selector: 'ndw-multi-select', template: "<ndw-dropdown\n prefixIcon=\"filter_alt\"\n [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n (tagClicked)=\"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-list class=\"multi-select-container\">\n @for (checkbox of dataSource(); track checkbox.id) {\n @if (filterSearch(checkbox.label)) {\n <ndw-list-item\n [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n [checkable]=\"true\"\n [checked]=\"checkbox.value\"\n [prefixIcon]=\"checkbox.icon\"\n [subtitle]=\"checkbox.label\"\n (checkedChange)=\"checkboxChanged(checkbox.id)\"\n >\n @if (checkbox.image
|
|
2891
|
+
], selector: 'ndw-multi-select', template: "<ndw-dropdown\n prefixIcon=\"filter_alt\"\n [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n (tagClicked)=\"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-list class=\"multi-select-container\">\n @for (checkbox of dataSource(); track checkbox.id) {\n @if (filterSearch(checkbox.label)) {\n <ndw-list-item\n [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n [checkable]=\"true\"\n [checked]=\"checkbox.value\"\n [prefixIcon]=\"checkbox.icon\"\n [subtitle]=\"checkbox.label\"\n (checkedChange)=\"checkboxChanged(checkbox.id)\"\n >\n @if (checkbox.image && isOpen()) {\n <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n }\n </ndw-list-item>\n }\n }\n </ndw-list>\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: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.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{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{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-dropdown{width:inherit}.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"] }]
|
|
2957
2892
|
}] });
|
|
2958
2893
|
|
|
2959
2894
|
class RouterBreadcrumbsComponent extends CoreRouterBreadcrumbsComponent {
|
|
2960
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2961
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2895
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RouterBreadcrumbsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2896
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: RouterBreadcrumbsComponent, isStandalone: true, selector: "ndw-router-breadcrumbs", usesInheritance: true, ngImport: i0, template: "<ndw-breadcrumb-group>\n @for (breadcrumb of breadcrumbs$ | async; track breadcrumb.url) {\n <ndw-breadcrumb [link]=\"breadcrumb.url\">{{ breadcrumb.title }}</ndw-breadcrumb>\n }\n</ndw-breadcrumb-group>\n", dependencies: [{ kind: "component", type: BreadcrumbGroupComponent, selector: "ndw-breadcrumb-group" }, { kind: "component", type: BreadcrumbComponent, selector: "ndw-breadcrumb" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2962
2897
|
}
|
|
2963
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2898
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RouterBreadcrumbsComponent, decorators: [{
|
|
2964
2899
|
type: Component,
|
|
2965
2900
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [BreadcrumbGroupComponent, BreadcrumbComponent, AsyncPipe], selector: 'ndw-router-breadcrumbs', template: "<ndw-breadcrumb-group>\n @for (breadcrumb of breadcrumbs$ | async; track breadcrumb.url) {\n <ndw-breadcrumb [link]=\"breadcrumb.url\">{{ breadcrumb.title }}</ndw-breadcrumb>\n }\n</ndw-breadcrumb-group>\n" }]
|
|
2966
2901
|
}] });
|
|
2967
2902
|
|
|
2968
2903
|
class SplitterComponent {
|
|
2969
|
-
disabled = input(false);
|
|
2904
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2970
2905
|
/**
|
|
2971
2906
|
* Optional width of the first panel (in pixels) when the component is initialized.
|
|
2972
2907
|
*/
|
|
2973
|
-
initialPanelWidth = input();
|
|
2908
|
+
initialPanelWidth = input(...(ngDevMode ? [undefined, { debugName: "initialPanelWidth" }] : []));
|
|
2974
2909
|
/**
|
|
2975
2910
|
* Minimum width of both panels (in pixels).
|
|
2976
2911
|
*/
|
|
2977
|
-
minimumPanelWidth = input(0);
|
|
2978
|
-
firstPanelWidth = signal(0);
|
|
2979
|
-
secondPanelWidth = computed(() => this.clampPanelWidth(this.availableWidth() - this.firstPanelWidth()));
|
|
2980
|
-
isDragging = signal(false);
|
|
2912
|
+
minimumPanelWidth = input(0, ...(ngDevMode ? [{ debugName: "minimumPanelWidth" }] : []));
|
|
2913
|
+
firstPanelWidth = signal(0, ...(ngDevMode ? [{ debugName: "firstPanelWidth" }] : []));
|
|
2914
|
+
secondPanelWidth = computed(() => this.clampPanelWidth(this.availableWidth() - this.firstPanelWidth()), ...(ngDevMode ? [{ debugName: "secondPanelWidth" }] : []));
|
|
2915
|
+
isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
|
|
2981
2916
|
container = viewChild.required('container');
|
|
2982
2917
|
splitter = viewChild.required('splitter');
|
|
2983
2918
|
cdkDrag = viewChild.required(CdkDrag);
|
|
@@ -2995,7 +2930,7 @@ class SplitterComponent {
|
|
|
2995
2930
|
containerWidth: 0,
|
|
2996
2931
|
containerLeft: 0,
|
|
2997
2932
|
splitterWidth: 0,
|
|
2998
|
-
});
|
|
2933
|
+
}, ...(ngDevMode ? [{ debugName: "dragElementDimensions" }] : []));
|
|
2999
2934
|
resizeObserver = new ResizeObserver(() => {
|
|
3000
2935
|
const container = this.container().nativeElement.getBoundingClientRect();
|
|
3001
2936
|
const splitter = this.splitter().nativeElement.getBoundingClientRect();
|
|
@@ -3011,22 +2946,22 @@ class SplitterComponent {
|
|
|
3011
2946
|
availableWidth = computed(() => {
|
|
3012
2947
|
const { containerWidth, splitterWidth } = this.dragElementDimensions();
|
|
3013
2948
|
return containerWidth - splitterWidth;
|
|
3014
|
-
});
|
|
2949
|
+
}, ...(ngDevMode ? [{ debugName: "availableWidth" }] : []));
|
|
3015
2950
|
/**
|
|
3016
2951
|
* Position of the drag handle when the component is initialized.
|
|
3017
2952
|
* The drag position is always relative to this starting position.
|
|
3018
2953
|
*/
|
|
3019
|
-
dragStartPosition = computed(() => this.availableWidth() / 2);
|
|
2954
|
+
dragStartPosition = computed(() => this.availableWidth() / 2, ...(ngDevMode ? [{ debugName: "dragStartPosition" }] : []));
|
|
3020
2955
|
/**
|
|
3021
2956
|
* Minimum panel width that is safe to use, considering the
|
|
3022
2957
|
* available container width and the `minimumPanelWidth` input.
|
|
3023
2958
|
*/
|
|
3024
|
-
safeMinPanelWidth = computed(() => clamp(this.minimumPanelWidth(), 0, this.availableWidth()));
|
|
2959
|
+
safeMinPanelWidth = computed(() => clamp(this.minimumPanelWidth(), 0, this.availableWidth()), ...(ngDevMode ? [{ debugName: "safeMinPanelWidth" }] : []));
|
|
3025
2960
|
/**
|
|
3026
2961
|
* Maximum panel width that is safe to use, considering the
|
|
3027
2962
|
* available container width and the `minimumPanelWidth
|
|
3028
2963
|
*/
|
|
3029
|
-
safeMaxPanelWidth = computed(() => clamp(this.availableWidth() - this.safeMinPanelWidth(), this.safeMinPanelWidth(), this.availableWidth()));
|
|
2964
|
+
safeMaxPanelWidth = computed(() => clamp(this.availableWidth() - this.safeMinPanelWidth(), this.safeMinPanelWidth(), this.availableWidth()), ...(ngDevMode ? [{ debugName: "safeMaxPanelWidth" }] : []));
|
|
3030
2965
|
constructor() {
|
|
3031
2966
|
// Update panel width and drag position when the minimum panel or container width change
|
|
3032
2967
|
effect(() => {
|
|
@@ -3112,10 +3047,10 @@ class SplitterComponent {
|
|
|
3112
3047
|
clampPanelWidth(width) {
|
|
3113
3048
|
return clamp(width, this.safeMinPanelWidth(), this.safeMaxPanelWidth());
|
|
3114
3049
|
}
|
|
3115
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3050
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3051
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SplitterComponent, isStandalone: true, selector: "ndw-splitter", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, initialPanelWidth: { classPropertyName: "initialPanelWidth", publicName: "initialPanelWidth", isSignal: true, isRequired: false, transformFunction: null }, minimumPanelWidth: { classPropertyName: "minimumPanelWidth", publicName: "minimumPanelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true, isSignal: true }, { propertyName: "cdkDrag", first: true, predicate: CdkDrag, descendants: true, isSignal: true }], ngImport: i0, template: "<div #container class=\"panels\" [class.dragging]=\"isDragging()\">\n <div class=\"panel\" [style.width]=\"firstPanelWidth() + 'px'\">\n <ng-content select=\"[first-panel]\"></ng-content>\n </div>\n <div\n #splitter\n class=\"splitter\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n [attr.aria-valuenow]=\"firstPanelWidth()\"\n [attr.aria-valuemin]=\"safeMinPanelWidth()\"\n [attr.aria-valuemax]=\"safeMaxPanelWidth()\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n [class.disabled]=\"disabled()\"\n [cdkDragBoundary]=\"container\"\n (cdkDragStarted)=\"onDragStarted()\"\n (cdkDragMoved)=\"onDragMoved()\"\n (cdkDragEnded)=\"onDragEnded()\"\n (mousedown)=\"onSplitterMouseDown()\"\n (mouseup)=\"onSplitterMouseUp()\"\n [cdkDragConstrainPosition]=\"constrainPosition\"\n >\n <svg viewBox=\"0 0 4 28\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\n @for (i of [0, 1, 2]; track i) {\n <circle cx=\"2\" [attr.cy]=\"2 + i * 12\" r=\"2\" fill=\"currentColor\" />\n }\n </svg>\n </div>\n <div class=\"panel\" [style.width]=\"secondPanelWidth() + 'px'\">\n <ng-content select=\"[second-panel]\"></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;--splitter-width: var(--ndw-spacing-sm);--half-splitter-width: calc(var(--splitter-width) / 2)}:host.disabled{--splitter-width: var(--ndw-spacing-2xs)}.panels{position:relative;display:flex;height:100%;width:100%}.panels .panel{display:flex;height:100%;width:50%;min-width:0;flex-grow:1;overflow:auto}.panels .panel:first-of-type{margin-right:calc(var(--half-splitter-width) - .5px)}.panels .panel:last-of-type{margin-left:calc(var(--half-splitter-width) - .5px)}.panels .splitter{position:absolute;left:calc(50% - var(--half-splitter-width));height:100%;width:var(--splitter-width);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:ew-resize;background-color:var(--ndw-color-grey-200)}.panels .splitter:hover,.panels .splitter.dragging{background-color:var(--ndw-color-grey-300);transition:background-color var(--ndw-animation-speed-fast) ease-in-out}.panels .splitter svg{color:var(--ndw-color-grey-400);width:var(--ndw-spacing-2xs)}.panels .splitter.disabled{pointer-events:none}.panels .splitter.disabled svg{display:none}.panels.dragging .splitter{background-color:var(--ndw-color-grey-300)}.panels:not(:hover .dragging) .panel{transition:width var(--ndw-animation-speed-fast) ease-in-out}.panels:not(:hover .dragging) .splitter{transition:all var(--ndw-animation-speed-fast) ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3117
3052
|
}
|
|
3118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3053
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SplitterComponent, decorators: [{
|
|
3119
3054
|
type: Component,
|
|
3120
3055
|
args: [{ selector: 'ndw-splitter', imports: [DragDropModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3121
3056
|
'[class.disabled]': 'disabled()',
|
|
@@ -3126,10 +3061,10 @@ function clamp(width, min, max) {
|
|
|
3126
3061
|
}
|
|
3127
3062
|
|
|
3128
3063
|
class SummaryCardComponent {
|
|
3129
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3130
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3064
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3065
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SummaryCardComponent, isStandalone: true, selector: "ndw-summary-card", host: { classAttribute: "ndw-summary-card" }, ngImport: i0, template: "<div class=\"ndw-summary-card__wrapper\">\n <ng-content select=\"ndw-avatar\" />\n <div class=\"ndw-summary-card__content\">\n <ng-content select=\"ndw-summary-card-header\" />\n <ng-content select=\"ndw-summary-card-content\" />\n <ng-content select=\"ndw-summary-card-tags\" />\n </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3131
3066
|
}
|
|
3132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3067
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardComponent, decorators: [{
|
|
3133
3068
|
type: Component,
|
|
3134
3069
|
args: [{ selector: 'ndw-summary-card', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3135
3070
|
class: 'ndw-summary-card',
|
|
@@ -3137,15 +3072,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3137
3072
|
}] });
|
|
3138
3073
|
|
|
3139
3074
|
class SummaryCardActionComponent {
|
|
3140
|
-
iconName = input.required();
|
|
3141
|
-
label = input.required();
|
|
3142
|
-
disabled = input();
|
|
3075
|
+
iconName = input.required(...(ngDevMode ? [{ debugName: "iconName" }] : []));
|
|
3076
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
3077
|
+
disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
|
|
3143
3078
|
action = output();
|
|
3144
3079
|
template = viewChild.required(TemplateRef);
|
|
3145
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3146
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
3080
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3081
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: SummaryCardActionComponent, isStandalone: true, selector: "ndw-summary-card-action", inputs: { iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { attributes: { "role": "listitem" }, classAttribute: "ndw-summary-card-action" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n <button\n ndwButton\n type=\"button\"\n tertiary\n extra-small\n [title]=\"label()\"\n [disabled]=\"disabled()\"\n (click)=\"action.emit()\"\n >\n <span class=\"sr-only\">{{ label() }}</span>\n <ndw-icon>{{ iconName() }}</ndw-icon>\n </button>\n</ng-template>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3147
3082
|
}
|
|
3148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardActionComponent, decorators: [{
|
|
3149
3084
|
type: Component,
|
|
3150
3085
|
args: [{ selector: 'ndw-summary-card-action', imports: [IconComponent, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3151
3086
|
role: 'listitem',
|
|
@@ -3154,14 +3089,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3154
3089
|
}] });
|
|
3155
3090
|
|
|
3156
3091
|
class SummaryCardActionsComponent {
|
|
3157
|
-
view = input('auto');
|
|
3158
|
-
actions = contentChildren(SummaryCardActionComponent, {
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3162
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3092
|
+
view = input('auto', ...(ngDevMode ? [{ debugName: "view" }] : []));
|
|
3093
|
+
actions = contentChildren(SummaryCardActionComponent, ...(ngDevMode ? [{ debugName: "actions", descendants: true }] : [{
|
|
3094
|
+
descendants: true,
|
|
3095
|
+
}]));
|
|
3096
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3097
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SummaryCardActionsComponent, isStandalone: true, selector: "ndw-summary-card-actions", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class.ndw-summary-card-actions--auto": "view() === \"auto\"" }, classAttribute: "ndw-summary-card-actions" }, queries: [{ propertyName: "actions", predicate: SummaryCardActionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"ndw-favorite\" />\n\n@if (view() === 'popover') {\n <ng-container *ngTemplateOutlet=\"popoverActions\"></ng-container>\n} @else if (view() === 'visible') {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <div class=\"popover-wrapper\">\n <ng-container *ngTemplateOutlet=\"popoverActions\"></ng-container>\n </div>\n <div class=\"regular-wrapper\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n}\n\n<ng-template #popoverActions>\n <button\n ndwButton\n extra-small\n tertiary\n [ndwPopoverTrigger]=\"content\"\n [popoverPosition]=\"'nextToTriggerButton'\"\n >\n <span class=\"sr-only\">Open menu</span>\n <ndw-icon>more_horiz</ndw-icon>\n </button>\n</ng-template>\n\n<ng-template #content>\n <div\n class=\"actions\"\n [ngClass]=\"{\n 'actions--popover': view() === 'popover',\n 'actions--visible': view() === 'visible',\n 'actions--auto': view() === 'auto',\n }\"\n >\n @for (action of actions(); track action) {\n <ng-template [ngTemplateOutlet]=\"action.template()\" />\n }\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3163
3098
|
}
|
|
3164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardActionsComponent, decorators: [{
|
|
3165
3100
|
type: Component,
|
|
3166
3101
|
args: [{ selector: 'ndw-summary-card-actions', imports: [PopoverTriggerDirective, IconComponent, NgTemplateOutlet, NgClass, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3167
3102
|
role: 'list',
|
|
@@ -3171,10 +3106,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3171
3106
|
}] });
|
|
3172
3107
|
|
|
3173
3108
|
class SummaryCardContentComponent {
|
|
3174
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3109
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SummaryCardContentComponent, isStandalone: true, selector: "ndw-summary-card-content", host: { classAttribute: "ndw-summary-card-content" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3176
3111
|
}
|
|
3177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardContentComponent, decorators: [{
|
|
3178
3113
|
type: Component,
|
|
3179
3114
|
args: [{
|
|
3180
3115
|
selector: 'ndw-summary-card-content',
|
|
@@ -3187,10 +3122,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3187
3122
|
}] });
|
|
3188
3123
|
|
|
3189
3124
|
class SummaryCardHeaderComponent {
|
|
3190
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3191
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3125
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3126
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SummaryCardHeaderComponent, isStandalone: true, selector: "ndw-summary-card-header", host: { classAttribute: "ndw-summary-card-header" }, ngImport: i0, template: "<div class=\"ndw-summary-card-header__wrapper\">\n <ng-content select=\"ndw-pill\" />\n <h3 class=\"ndw-summary-card-header__title\"><ng-content /></h3>\n <ng-content select=\"ndw-summary-card-subtitle\" />\n</div>\n\n<ng-content select=\"ndw-summary-card-actions\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3192
3127
|
}
|
|
3193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardHeaderComponent, decorators: [{
|
|
3194
3129
|
type: Component,
|
|
3195
3130
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3196
3131
|
class: 'ndw-summary-card-header',
|
|
@@ -3198,10 +3133,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3198
3133
|
}] });
|
|
3199
3134
|
|
|
3200
3135
|
class SummaryCardTagsComponent {
|
|
3201
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3136
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SummaryCardTagsComponent, isStandalone: true, selector: "ndw-summary-card-tags", host: { attributes: { "role": "list" }, classAttribute: "ndw-summary-card-tags" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3203
3138
|
}
|
|
3204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardTagsComponent, decorators: [{
|
|
3205
3140
|
type: Component,
|
|
3206
3141
|
args: [{
|
|
3207
3142
|
selector: 'ndw-summary-card-tags',
|
|
@@ -3215,10 +3150,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3215
3150
|
}] });
|
|
3216
3151
|
|
|
3217
3152
|
class SummaryCardTagComponent {
|
|
3218
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3153
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SummaryCardTagComponent, isStandalone: true, selector: "ndw-summary-card-tag", host: { attributes: { "role": "listitem" }, classAttribute: "ndw-summary-card-tag" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3220
3155
|
}
|
|
3221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardTagComponent, decorators: [{
|
|
3222
3157
|
type: Component,
|
|
3223
3158
|
args: [{
|
|
3224
3159
|
selector: 'ndw-summary-card-tag',
|
|
@@ -3232,18 +3167,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3232
3167
|
}] });
|
|
3233
3168
|
|
|
3234
3169
|
class SummaryCardSubtitleComponent {
|
|
3235
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3170
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardSubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3171
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SummaryCardSubtitleComponent, isStandalone: true, selector: "ndw-summary-card-subtitle", ngImport: i0, template: "<div class=\"ndw-summary-card-subtitle\">\n <ng-content select=\"ndw-icon\" />\n\n <div class=\"ndw-summary-card-subtitle__text\">\n <ng-content />\n </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3237
3172
|
}
|
|
3238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SummaryCardSubtitleComponent, decorators: [{
|
|
3239
3174
|
type: Component,
|
|
3240
3175
|
args: [{ selector: 'ndw-summary-card-subtitle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ndw-summary-card-subtitle\">\n <ng-content select=\"ndw-icon\" />\n\n <div class=\"ndw-summary-card-subtitle__text\">\n <ng-content />\n </div>\n</div>\n" }]
|
|
3241
3176
|
}] });
|
|
3242
3177
|
|
|
3243
3178
|
class SwitcherComponent {
|
|
3244
|
-
options = input([]);
|
|
3245
|
-
selectedValue = model(undefined);
|
|
3246
|
-
disabled = model(false);
|
|
3179
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
3180
|
+
selectedValue = model(undefined, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
|
|
3181
|
+
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3247
3182
|
selectionChange = output();
|
|
3248
3183
|
sliderWidth = '';
|
|
3249
3184
|
sliderPosition = '';
|
|
@@ -3338,8 +3273,8 @@ class SwitcherComponent {
|
|
|
3338
3273
|
get componentName() {
|
|
3339
3274
|
return `switcher-${this.#componentId}`;
|
|
3340
3275
|
}
|
|
3341
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3342
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3276
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3277
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SwitcherComponent, isStandalone: true, selector: "ndw-switcher", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", disabled: "disabledChange", selectionChange: "selectionChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "class.disabled": "disabled()" } }, providers: [
|
|
3343
3278
|
{
|
|
3344
3279
|
provide: NG_VALUE_ACCESSOR,
|
|
3345
3280
|
useExisting: forwardRef(() => SwitcherComponent),
|
|
@@ -3347,7 +3282,7 @@ class SwitcherComponent {
|
|
|
3347
3282
|
},
|
|
3348
3283
|
], ngImport: i0, template: "<div\n class=\"switch-slider\"\n [style.width]=\"sliderWidth\"\n [style.left]=\"sliderPosition\"\n [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n <label\n class=\"switch-option\"\n [class.active]=\"selectedValue() === option.value\"\n [class.disabled]=\"option.disabled || disabled()\"\n [attr.for]=\"generateId(i)\"\n >\n <input\n type=\"radio\"\n [id]=\"generateId(i)\"\n [name]=\"componentName\"\n [value]=\"option.value\"\n [checked]=\"selectedValue() === option.value\"\n [disabled]=\"option.disabled || disabled()\"\n (change)=\"selectOption(option.value)\"\n (keydown)=\"onKeyDown($event, i)\"\n [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n class=\"switch-radio\"\n />\n @if (option.icon) {\n <ndw-icon>{{ option.icon }}</ndw-icon>\n }\n <span class=\"switch-label\">{{ option.label }}</span>\n\n @if (option.disabled) {\n <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n }\n </label>\n}\n", styles: [":host{width:100%;position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left .2s ease,width .2s ease;z-index:1}.switch-option{box-sizing:border-box;position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color .2s ease,border-color .2s ease;height:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-xl))}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500)}.switch-option.active .switch-label{color:var(--ndw-color-black)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{white-space:nowrap}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3349
3284
|
}
|
|
3350
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SwitcherComponent, decorators: [{
|
|
3351
3286
|
type: Component,
|
|
3352
3287
|
args: [{ selector: 'ndw-switcher', imports: [IconComponent], providers: [
|
|
3353
3288
|
{
|
|
@@ -3371,34 +3306,34 @@ class TabComponent {
|
|
|
3371
3306
|
get content() {
|
|
3372
3307
|
return this._content;
|
|
3373
3308
|
}
|
|
3374
|
-
title = input.required();
|
|
3375
|
-
disabled = input(false);
|
|
3309
|
+
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
3310
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3376
3311
|
active = false;
|
|
3377
|
-
id = input(crypto.randomUUID());
|
|
3312
|
+
id = input(crypto.randomUUID(), ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
3378
3313
|
ngOnInit() {
|
|
3379
3314
|
this._content = new TemplatePortal(this._contentTemplate(), this._viewContainerRef);
|
|
3380
3315
|
}
|
|
3381
3316
|
getNativeElement() {
|
|
3382
3317
|
return this._elementRef.nativeElement;
|
|
3383
3318
|
}
|
|
3384
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3385
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
3319
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3320
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: TabComponent, isStandalone: true, selector: "ndw-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Create a template for the content of the <ndw-tab> so that we can grab a reference to this\n TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n tab-group. -->\n<ng-template #content><ng-content></ng-content></ng-template>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3386
3321
|
}
|
|
3387
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3322
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TabComponent, decorators: [{
|
|
3388
3323
|
type: Component,
|
|
3389
3324
|
args: [{ selector: 'ndw-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Create a template for the content of the <ndw-tab> so that we can grab a reference to this\n TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n tab-group. -->\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
|
|
3390
3325
|
}] });
|
|
3391
3326
|
|
|
3392
3327
|
class TabGroupComponent {
|
|
3393
|
-
_tabs = contentChildren(TabComponent);
|
|
3394
|
-
_tabButtons = viewChildren('tabButton');
|
|
3328
|
+
_tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "_tabs" }] : []));
|
|
3329
|
+
_tabButtons = viewChildren('tabButton', ...(ngDevMode ? [{ debugName: "_tabButtons" }] : []));
|
|
3395
3330
|
tabs = computed(() => this._tabs().map((tab) => {
|
|
3396
3331
|
tab.active = tab.id() === this.activeTabId();
|
|
3397
3332
|
return tab;
|
|
3398
|
-
}));
|
|
3399
|
-
hasPadding = input(false);
|
|
3400
|
-
activeTabId = model();
|
|
3401
|
-
inlinePadding = input(0);
|
|
3333
|
+
}), ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
3334
|
+
hasPadding = input(false, ...(ngDevMode ? [{ debugName: "hasPadding" }] : []));
|
|
3335
|
+
activeTabId = model(...(ngDevMode ? [undefined, { debugName: "activeTabId" }] : []));
|
|
3336
|
+
inlinePadding = input(0, ...(ngDevMode ? [{ debugName: "inlinePadding" }] : []));
|
|
3402
3337
|
constructor() {
|
|
3403
3338
|
effect(() => {
|
|
3404
3339
|
const tabs = this._tabs();
|
|
@@ -3453,12 +3388,12 @@ class TabGroupComponent {
|
|
|
3453
3388
|
}
|
|
3454
3389
|
return start;
|
|
3455
3390
|
}
|
|
3456
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3457
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3391
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3392
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: { hasPadding: { classPropertyName: "hasPadding", publicName: "hasPadding", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, inlinePadding: { classPropertyName: "inlinePadding", publicName: "inlinePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabId: "activeTabIdChange" }, queries: [{ propertyName: "_tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n @for (tab of tabs(); track tab.id(); let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n role=\"tab\"\n type=\"button\"\n [attr.active]=\"tab.active ? true : undefined\"\n [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n [attr.aria-selected]=\"tab.active\"\n [disabled]=\"tab.disabled() ? true : null\"\n [id]=\"'tab-' + tab.id\"\n [tabindex]=\"tab.active ? 0 : -1\"\n (click)=\"selectTab(i)\"\n (keydown)=\"onKeyDown($event)\"\n >\n {{ tab.title() }}\n </button>\n }\n</div>\n@for (tab of tabs(); track tab.id(); let i = $index) {\n <div\n class=\"tab-content\"\n [ngClass]=\"{ 'is-hidden': !tab.active }\"\n [id]=\"'tab-panel-' + tab.id\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"'tab-' + tab.id\"\n [tabindex]=\"0\"\n >\n <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;left:0;right:0;width:auto;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3458
3393
|
}
|
|
3459
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3394
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TabGroupComponent, decorators: [{
|
|
3460
3395
|
type: Component,
|
|
3461
|
-
args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n role=\"tab\"\n type=\"button\"\n [attr.active]=\"tab.active ? true : undefined\"\n [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n [attr.aria-selected]=\"tab.active\"\n [disabled]=\"tab.disabled() ? true : null\"\n [id]=\"'tab-' + tab.id\"\n [tabindex]=\"tab.active ? 0 : -1\"\n (click)=\"selectTab(i)\"\n (keydown)=\"onKeyDown($event)\"\n >\n {{ tab.title() }}\n </button>\n }\n</div>\n@for (tab of tabs(); track tab.id; let i = $index) {\n <div\n class=\"tab-content\"\n [ngClass]=\"{ 'is-hidden': !tab.active }\"\n [id]=\"'tab-panel-' + tab.id\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"'tab-' + tab.id\"\n [tabindex]=\"0\"\n >\n <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;left:0;right:0;width:auto;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"] }]
|
|
3396
|
+
args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n @for (tab of tabs(); track tab.id(); let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n role=\"tab\"\n type=\"button\"\n [attr.active]=\"tab.active ? true : undefined\"\n [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n [attr.aria-selected]=\"tab.active\"\n [disabled]=\"tab.disabled() ? true : null\"\n [id]=\"'tab-' + tab.id\"\n [tabindex]=\"tab.active ? 0 : -1\"\n (click)=\"selectTab(i)\"\n (keydown)=\"onKeyDown($event)\"\n >\n {{ tab.title() }}\n </button>\n }\n</div>\n@for (tab of tabs(); track tab.id(); let i = $index) {\n <div\n class=\"tab-content\"\n [ngClass]=\"{ 'is-hidden': !tab.active }\"\n [id]=\"'tab-panel-' + tab.id\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"'tab-' + tab.id\"\n [tabindex]=\"0\"\n >\n <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;left:0;right:0;width:auto;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"] }]
|
|
3462
3397
|
}], ctorParameters: () => [] });
|
|
3463
3398
|
|
|
3464
3399
|
const ndwAgGridTheme = {
|
|
@@ -3484,12 +3419,12 @@ const ndwAgGridTheme = {
|
|
|
3484
3419
|
};
|
|
3485
3420
|
|
|
3486
3421
|
class ToastComponent {
|
|
3487
|
-
message = input.required();
|
|
3488
|
-
closeButtonLabel = input('Sluit');
|
|
3489
|
-
id = input();
|
|
3490
|
-
duration = input(5000);
|
|
3491
|
-
paused = input(false);
|
|
3492
|
-
showProgress = input(true);
|
|
3422
|
+
message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
3423
|
+
closeButtonLabel = input('Sluit', ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : []));
|
|
3424
|
+
id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
3425
|
+
duration = input(5000, ...(ngDevMode ? [{ debugName: "duration" }] : []));
|
|
3426
|
+
paused = input(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
|
|
3427
|
+
showProgress = input(true, ...(ngDevMode ? [{ debugName: "showProgress" }] : []));
|
|
3493
3428
|
closed = output();
|
|
3494
3429
|
elementDimensions = output();
|
|
3495
3430
|
#elementRef = inject(ElementRef);
|
|
@@ -3499,18 +3434,18 @@ class ToastComponent {
|
|
|
3499
3434
|
height: this.#elementRef.nativeElement.offsetHeight,
|
|
3500
3435
|
});
|
|
3501
3436
|
}
|
|
3502
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3503
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
3437
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3438
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: ToastComponent, isStandalone: true, selector: "ndw-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", elementDimensions: "elementDimensions" }, ngImport: i0, template: "<ndw-icon>info</ndw-icon>\n{{ message() }}\n<button\n ndwButton\n tertiary\n alternative\n extra-small\n (click)=\"closed.emit()\"\n [attr.aria-label]=\"closeButtonLabel()\"\n>\n <ndw-icon>close</ndw-icon>\n</button>\n<div\n class=\"progress-bar\"\n [ngStyle]=\"{\n 'animation-duration': duration() + 'ms',\n visibility: showProgress() ? 'visible' : 'hidden',\n }\"\n [class.paused]=\"paused()\"\n></div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;position:relative;align-items:center;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);max-width:20rem;width:20rem;opacity:1;overflow:hidden;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;z-index:2;box-shadow:var(--ndw-elevation-toast)}:host.hide-content{color:transparent}:host.hide-content>*{visibility:hidden}:host .progress-bar{animation:5s linear 0s 1 normal rightToLeft;background-color:var(--ndw-color-secondary-400);bottom:0;height:var(--ndw-spacing-2xs);left:-100%;position:absolute;width:100%;z-index:-1}:host .progress-bar.paused{animation-play-state:paused}:host>ndw-icon{font-size:1rem}:host [ndwButton] ndw-icon{color:var(--ndw-color-white)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3504
3439
|
}
|
|
3505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastComponent, decorators: [{
|
|
3506
3441
|
type: Component,
|
|
3507
3442
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon>info</ndw-icon>\n{{ message() }}\n<button\n ndwButton\n tertiary\n alternative\n extra-small\n (click)=\"closed.emit()\"\n [attr.aria-label]=\"closeButtonLabel()\"\n>\n <ndw-icon>close</ndw-icon>\n</button>\n<div\n class=\"progress-bar\"\n [ngStyle]=\"{\n 'animation-duration': duration() + 'ms',\n visibility: showProgress() ? 'visible' : 'hidden',\n }\"\n [class.paused]=\"paused()\"\n></div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;position:relative;align-items:center;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);max-width:20rem;width:20rem;opacity:1;overflow:hidden;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;z-index:2;box-shadow:var(--ndw-elevation-toast)}:host.hide-content{color:transparent}:host.hide-content>*{visibility:hidden}:host .progress-bar{animation:5s linear 0s 1 normal rightToLeft;background-color:var(--ndw-color-secondary-400);bottom:0;height:var(--ndw-spacing-2xs);left:-100%;position:absolute;width:100%;z-index:-1}:host .progress-bar.paused{animation-play-state:paused}:host>ndw-icon{font-size:1rem}:host [ndwButton] ndw-icon{color:var(--ndw-color-white)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
3508
3443
|
}] });
|
|
3509
3444
|
|
|
3510
3445
|
class ToastListComponent {
|
|
3511
3446
|
toastService = inject(ToastService);
|
|
3512
|
-
toastComponents = viewChildren(ToastComponent);
|
|
3513
|
-
toastDimensions = signal(new Map());
|
|
3447
|
+
toastComponents = viewChildren(ToastComponent, ...(ngDevMode ? [{ debugName: "toastComponents" }] : []));
|
|
3448
|
+
toastDimensions = signal(new Map(), ...(ngDevMode ? [{ debugName: "toastDimensions" }] : []));
|
|
3514
3449
|
toastOffsetHeights = computed(() => {
|
|
3515
3450
|
const dimensions = this.toastDimensions();
|
|
3516
3451
|
const components = this.toastComponents();
|
|
@@ -3521,7 +3456,7 @@ class ToastListComponent {
|
|
|
3521
3456
|
const height = dimensions.get(id)?.height ?? 0;
|
|
3522
3457
|
return [...acc, acc[acc.length - 1] + height];
|
|
3523
3458
|
}, [0]);
|
|
3524
|
-
});
|
|
3459
|
+
}, ...(ngDevMode ? [{ debugName: "toastOffsetHeights" }] : []));
|
|
3525
3460
|
firstToastHeight = computed(() => {
|
|
3526
3461
|
const firstComponent = this.toastComponents()?.[0];
|
|
3527
3462
|
const firstId = firstComponent?.id();
|
|
@@ -3530,11 +3465,11 @@ class ToastListComponent {
|
|
|
3530
3465
|
return 0;
|
|
3531
3466
|
}
|
|
3532
3467
|
return dimensions.get(firstId)?.height ?? 0;
|
|
3533
|
-
});
|
|
3468
|
+
}, ...(ngDevMode ? [{ debugName: "firstToastHeight" }] : []));
|
|
3534
3469
|
totalHeightExcludingGaps = computed(() => {
|
|
3535
3470
|
const heights = this.toastOffsetHeights();
|
|
3536
3471
|
return heights.length > 0 ? heights[heights.length - 1] : 0;
|
|
3537
|
-
});
|
|
3472
|
+
}, ...(ngDevMode ? [{ debugName: "totalHeightExcludingGaps" }] : []));
|
|
3538
3473
|
maxToastWidth = computed(() => {
|
|
3539
3474
|
const dimensions = this.toastDimensions();
|
|
3540
3475
|
const components = this.toastComponents();
|
|
@@ -3545,7 +3480,7 @@ class ToastListComponent {
|
|
|
3545
3480
|
const width = dimensions.get(id)?.width ?? 0;
|
|
3546
3481
|
return Math.max(max, width);
|
|
3547
3482
|
}, 0);
|
|
3548
|
-
});
|
|
3483
|
+
}, ...(ngDevMode ? [{ debugName: "maxToastWidth" }] : []));
|
|
3549
3484
|
setToastDimensions(id, dimensions) {
|
|
3550
3485
|
this.toastDimensions.update((heights) => {
|
|
3551
3486
|
heights.set(id, dimensions);
|
|
@@ -3558,10 +3493,10 @@ class ToastListComponent {
|
|
|
3558
3493
|
resume() {
|
|
3559
3494
|
this.toastService.resume();
|
|
3560
3495
|
}
|
|
3561
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3562
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3496
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3497
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ToastListComponent, isStandalone: true, selector: "ndw-toast-list", host: { listeners: { "mouseenter": "pause()", "mouseleave": "resume()" }, properties: { "style.--total-toast-height": "totalHeightExcludingGaps() + \"px\"", "style.--total-toast-count": "toastComponents().length", "style.--max-toast-width": "maxToastWidth() + \"px\"" } }, viewQueries: [{ propertyName: "toastComponents", predicate: ToastComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@for (toast of toastService.toasts(); track toast.id) {\n <ndw-toast\n class=\"toast\"\n [class.hide-content]=\"!toastService.paused() && $index > 0\"\n [ngStyle]=\"{\n '--index': $index,\n '--offset-height': toastOffsetHeights()[$index] + 'px',\n '--first-toast-height': firstToastHeight() + 'px',\n }\"\n [id]=\"toast.id\"\n [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n [message]=\"toast.message\"\n [duration]=\"toast.duration\"\n [paused]=\"toastService.paused()\"\n [showProgress]=\"toastService.paused() || $first\"\n (closed)=\"toastService.close(toast.id)\"\n (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:var(--first-toast-height)}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "ndw-toast", inputs: ["message", "closeButtonLabel", "id", "duration", "paused", "showProgress"], outputs: ["closed", "elementDimensions"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3563
3498
|
}
|
|
3564
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastListComponent, decorators: [{
|
|
3565
3500
|
type: Component,
|
|
3566
3501
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3567
3502
|
'(mouseenter)': 'pause()',
|
|
@@ -3574,7 +3509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3574
3509
|
|
|
3575
3510
|
class ToastService {
|
|
3576
3511
|
#maxToasts = 3;
|
|
3577
|
-
#toasts = signal([]);
|
|
3512
|
+
#toasts = signal([], ...(ngDevMode ? [{ debugName: "#toasts" }] : []));
|
|
3578
3513
|
#overlay = inject(Overlay);
|
|
3579
3514
|
#paused$ = new BehaviorSubject(false);
|
|
3580
3515
|
#active$ = new BehaviorSubject(false);
|
|
@@ -3658,10 +3593,10 @@ class ToastService {
|
|
|
3658
3593
|
}
|
|
3659
3594
|
});
|
|
3660
3595
|
}
|
|
3661
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3662
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3596
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3597
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
3663
3598
|
}
|
|
3664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3599
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastService, decorators: [{
|
|
3665
3600
|
type: Injectable,
|
|
3666
3601
|
args: [{
|
|
3667
3602
|
providedIn: 'root',
|
|
@@ -3672,5 +3607,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
3672
3607
|
* Generated bundle index. Do not edit.
|
|
3673
3608
|
*/
|
|
3674
3609
|
|
|
3675
|
-
export { AccordionComponent, AccordionService,
|
|
3610
|
+
export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, SwitcherComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, fontMapButtonIcons, mapButtonIcons, ndwAgGridTheme, svgMapButtonIcons };
|
|
3676
3611
|
//# sourceMappingURL=ndwnu-design-system.mjs.map
|