@ndwnu/design-system 13.1.1 → 13.2.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.
|
@@ -3224,25 +3224,29 @@ const svgMapButtonIcons = [
|
|
|
3224
3224
|
const mapButtonIcons = [...fontMapButtonIcons, ...svgMapButtonIcons];
|
|
3225
3225
|
|
|
3226
3226
|
class MapButtonComponent {
|
|
3227
|
-
icon = input
|
|
3227
|
+
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
3228
3228
|
active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
3229
3229
|
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
3230
3230
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3231
3231
|
clicked = output();
|
|
3232
|
-
buttonIcon = computed(() =>
|
|
3232
|
+
buttonIcon = computed(() => {
|
|
3233
|
+
const icon = this.icon();
|
|
3234
|
+
return icon ? this.#icons[icon] : undefined;
|
|
3235
|
+
}, ...(ngDevMode ? [{ debugName: "buttonIcon" }] : []));
|
|
3233
3236
|
svgIcon = computed(() => {
|
|
3234
3237
|
const svgIconNames = [...svgMapButtonIcons];
|
|
3235
3238
|
const icon = this.icon();
|
|
3236
3239
|
const active = this.active();
|
|
3237
|
-
if (svgIconNames.includes(icon)) {
|
|
3240
|
+
if (icon && svgIconNames.includes(icon)) {
|
|
3238
3241
|
return active ? `${icon}-active` : icon;
|
|
3239
3242
|
}
|
|
3240
3243
|
return undefined;
|
|
3241
3244
|
}, ...(ngDevMode ? [{ debugName: "svgIcon" }] : []));
|
|
3242
3245
|
iconLabel = computed(() => {
|
|
3243
3246
|
const ariaLabel = this.ariaLabel();
|
|
3244
|
-
const
|
|
3245
|
-
|
|
3247
|
+
const icon = this.icon();
|
|
3248
|
+
const iconLabel = icon ? this.#iconLabels[icon] : undefined;
|
|
3249
|
+
return ariaLabel || iconLabel || '';
|
|
3246
3250
|
}, ...(ngDevMode ? [{ debugName: "iconLabel" }] : []));
|
|
3247
3251
|
// Mapping from button icon names to Material icons or SVG icon IDs.
|
|
3248
3252
|
#icons = {
|
|
@@ -3280,12 +3284,12 @@ class MapButtonComponent {
|
|
|
3280
3284
|
mail: 'Maak een melding',
|
|
3281
3285
|
};
|
|
3282
3286
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3283
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MapButtonComponent, isStandalone: true, selector: "ndw-map-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired:
|
|
3287
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MapButtonComponent, isStandalone: true, selector: "ndw-map-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, 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 if (buttonIcon()) {\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 });
|
|
3284
3288
|
}
|
|
3285
3289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapButtonComponent, decorators: [{
|
|
3286
3290
|
type: Component,
|
|
3287
|
-
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"] }]
|
|
3288
|
-
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required:
|
|
3291
|
+
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 if (buttonIcon()) {\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"] }]
|
|
3292
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
3289
3293
|
|
|
3290
3294
|
class MapDisplayOptionComponent {
|
|
3291
3295
|
option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
|
|
@@ -3294,11 +3298,11 @@ class MapDisplayOptionComponent {
|
|
|
3294
3298
|
group = input(...(ngDevMode ? [undefined, { debugName: "group" }] : []));
|
|
3295
3299
|
selectionChange = output();
|
|
3296
3300
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapDisplayOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3297
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 });
|
|
3301
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 if (option().icon) {\n <ndw-icon [title]=\"option().name\">{{ option().icon }}</ndw-icon>\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 });
|
|
3298
3302
|
}
|
|
3299
3303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapDisplayOptionComponent, decorators: [{
|
|
3300
3304
|
type: Component,
|
|
3301
|
-
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"] }]
|
|
3305
|
+
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 if (option().icon) {\n <ndw-icon [title]=\"option().name\">{{ option().icon }}</ndw-icon>\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"] }]
|
|
3302
3306
|
}], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
3303
3307
|
|
|
3304
3308
|
class MapDisplayComponent {
|
|
@@ -4410,14 +4414,14 @@ class ToastComponent {
|
|
|
4410
4414
|
});
|
|
4411
4415
|
}
|
|
4412
4416
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4413
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", elementDimensions: "elementDimensions" }, host: { properties: { "class.info": "type() === \"info\"", "class.error": "type() === \"error\"" } }, ngImport: i0, template: "<ndw-icon class=\"toast-icon\">{{ type() }}</ndw-icon>\
|
|
4417
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", elementDimensions: "elementDimensions" }, host: { properties: { "class.info": "type() === \"info\"", "class.error": "type() === \"error\"" } }, ngImport: i0, template: "<ndw-icon class=\"toast-icon\">{{ type() }}</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@if (type() === 'info') {\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}\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;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.info{background-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}:host.info .toast-icon{color:var(--ndw-color-white)}:host.info [ndwButton] ndw-icon{color:var(--ndw-color-white)}:host.error{background-color:var(--ndw-color-critical-300);color:var(--ndw-color-grey-700)}:host.error .toast-icon{color:var(--ndw-color-critical-500)}:host.error [ndwButton] ndw-icon{color:var(--ndw-color-grey-700)}@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 });
|
|
4414
4418
|
}
|
|
4415
4419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastComponent, decorators: [{
|
|
4416
4420
|
type: Component,
|
|
4417
4421
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4418
4422
|
'[class.info]': 'type() === "info"',
|
|
4419
4423
|
'[class.error]': 'type() === "error"',
|
|
4420
|
-
}, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon class=\"toast-icon\">{{ type() }}</ndw-icon>\
|
|
4424
|
+
}, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon class=\"toast-icon\">{{ type() }}</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@if (type() === 'info') {\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}\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;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.info{background-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}:host.info .toast-icon{color:var(--ndw-color-white)}:host.info [ndwButton] ndw-icon{color:var(--ndw-color-white)}:host.error{background-color:var(--ndw-color-critical-300);color:var(--ndw-color-grey-700)}:host.error .toast-icon{color:var(--ndw-color-critical-500)}:host.error [ndwButton] ndw-icon{color:var(--ndw-color-grey-700)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
4421
4425
|
}], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], elementDimensions: [{ type: i0.Output, args: ["elementDimensions"] }] } });
|
|
4422
4426
|
|
|
4423
4427
|
class ToastListComponent {
|