@ndwnu/design-system 14.2.1 → 14.2.2
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.
|
@@ -3279,6 +3279,7 @@ class MapButtonComponent {
|
|
|
3279
3279
|
active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
3280
3280
|
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
3281
3281
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3282
|
+
compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
|
|
3282
3283
|
clicked = output();
|
|
3283
3284
|
buttonIcon = computed(() => {
|
|
3284
3285
|
const icon = this.icon();
|
|
@@ -3335,12 +3336,12 @@ class MapButtonComponent {
|
|
|
3335
3336
|
mail: 'Maak een melding',
|
|
3336
3337
|
};
|
|
3337
3338
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3338
|
-
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\r\n class=\"map-control\"\r\n [class.active]=\"active()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"iconLabel()\"\r\n (click)=\"clicked.emit()\"\r\n [ndwTooltip]=\"iconLabel()\"\r\n>\r\n @if (svgIcon()) {\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\r\n </svg>\r\n } @else if (buttonIcon()) {\r\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\r\n }\r\n <div class=\"content-wrapper\">\r\n <ng-content />\r\n </div>\r\n</button>\r\n", styles: [".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", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3339
|
+
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 }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n class=\"map-control\"\r\n [class.active]=\"active()\"\r\n [class.map-control--compact]=\"compact()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"iconLabel()\"\r\n (click)=\"clicked.emit()\"\r\n [ndwTooltip]=\"iconLabel()\"\r\n>\r\n @if (svgIcon()) {\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\r\n </svg>\r\n } @else if (buttonIcon()) {\r\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\r\n }\r\n <div class=\"content-wrapper\">\r\n <ng-content />\r\n </div>\r\n</button>\r\n", styles: [".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", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3339
3340
|
}
|
|
3340
3341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapButtonComponent, decorators: [{
|
|
3341
3342
|
type: Component,
|
|
3342
|
-
args: [{ selector: 'ndw-map-button', imports: [IconComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n class=\"map-control\"\r\n [class.active]=\"active()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"iconLabel()\"\r\n (click)=\"clicked.emit()\"\r\n [ndwTooltip]=\"iconLabel()\"\r\n>\r\n @if (svgIcon()) {\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\r\n </svg>\r\n } @else if (buttonIcon()) {\r\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\r\n }\r\n <div class=\"content-wrapper\">\r\n <ng-content />\r\n </div>\r\n</button>\r\n", styles: [".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"] }]
|
|
3343
|
-
}], 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"] }] } });
|
|
3343
|
+
args: [{ selector: 'ndw-map-button', imports: [IconComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n class=\"map-control\"\r\n [class.active]=\"active()\"\r\n [class.map-control--compact]=\"compact()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"iconLabel()\"\r\n (click)=\"clicked.emit()\"\r\n [ndwTooltip]=\"iconLabel()\"\r\n>\r\n @if (svgIcon()) {\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\r\n </svg>\r\n } @else if (buttonIcon()) {\r\n <ndw-icon>{{ buttonIcon() }}</ndw-icon>\r\n }\r\n <div class=\"content-wrapper\">\r\n <ng-content />\r\n </div>\r\n</button>\r\n", styles: [".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"] }]
|
|
3344
|
+
}], 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 }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
3344
3345
|
|
|
3345
3346
|
class MapDisplayOptionComponent {
|
|
3346
3347
|
option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
|
|
@@ -3361,6 +3362,7 @@ class MapDisplayComponent {
|
|
|
3361
3362
|
backgroundsTitle = input('Achtergrond', ...(ngDevMode ? [{ debugName: "backgroundsTitle" }] : []));
|
|
3362
3363
|
layersTitle = input('Gegevens', ...(ngDevMode ? [{ debugName: "layersTitle" }] : []));
|
|
3363
3364
|
enableClearLayers = input(true, ...(ngDevMode ? [{ debugName: "enableClearLayers" }] : []));
|
|
3365
|
+
compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
|
|
3364
3366
|
layerOptionType = input('checkbox', ...(ngDevMode ? [{ debugName: "layerOptionType" }] : []));
|
|
3365
3367
|
backgroundOptions = input([], { ...(ngDevMode ? { debugName: "backgroundOptions" } : {}), transform: (options) => (options ?? []).map((bg) => ({ ...bg })) });
|
|
3366
3368
|
layerOptions = input([], { ...(ngDevMode ? { debugName: "layerOptions" } : {}), transform: (options) => (options ?? []).map((layer) => ({ ...layer })) });
|
|
@@ -3423,12 +3425,12 @@ class MapDisplayComponent {
|
|
|
3423
3425
|
}
|
|
3424
3426
|
}
|
|
3425
3427
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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
|
|
3428
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, compact: { classPropertyName: "compact", publicName: "compact", 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\r\n class=\"map-control\"\r\n [class.active]=\"open()\"\r\n [class.map-control--compact]=\"compact()\"\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n>\r\n @let activeBackground = activeBackgroundOption();\r\n @if (activeBackground) {\r\n <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\r\n }\r\n\r\n <button class=\"content-wrapper\" type=\"button\" (click)=\"open.set(!open())\">\r\n @if (!compact()) {\r\n {{ title() }}\r\n }\r\n </button>\r\n\r\n @if (numberOfSelectedLayers() && enableClearLayers()) {\r\n <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\r\n }\r\n\r\n @if (!compact()) {\r\n <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\r\n }\r\n</div>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"showPopover()\"\r\n (detach)=\"open.set(false)\"\r\n (overlayOutsideClick)=\"open.set(false)\"\r\n>\r\n <div class=\"map-control-dropdown\">\r\n <header>\r\n <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\r\n <button ndwButton tertiary type=\"button\" (click)=\"open.set(false)\">\r\n <ndw-icon>close</ndw-icon>\r\n <span class=\"sr-only\">Sluit {{ title() }}</span>\r\n </button>\r\n </header>\r\n\r\n <div class=\"map-control-dropdown__content\">\r\n @if (linkedBackgroundOptions().length) {\r\n <section class=\"map-control-dropdown__section\">\r\n <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">\r\n {{ backgroundsTitle() }}\r\n </h4>\r\n <ul class=\"map-control-dropdown__backgrounds\">\r\n @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\r\n <li>\r\n <ndw-map-display-option\r\n [option]=\"backgroundOption\"\r\n [group]=\"'map-backgrounds'\"\r\n [type]=\"'radio'\"\r\n [direction]=\"'column'\"\r\n (selectionChange)=\"selectBackground($event)\"\r\n />\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n }\r\n\r\n @if (linkedLayerOptions().length) {\r\n <section class=\"map-control-dropdown__section\">\r\n <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">{{ layersTitle() }}</h4>\r\n <ul>\r\n @for (layerOption of linkedLayerOptions(); track layerOption.id) {\r\n <li>\r\n <ndw-map-display-option\r\n [option]=\"layerOption\"\r\n [group]=\"'map-layers'\"\r\n [type]=\"layerOptionType()\"\r\n [direction]=\"'row'\"\r\n (selectionChange)=\"toggleLayer($event)\"\r\n />\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\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;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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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 });
|
|
3427
3429
|
}
|
|
3428
3430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapDisplayComponent, decorators: [{
|
|
3429
3431
|
type: Component,
|
|
3430
|
-
args: [{ selector: 'ndw-map-display', imports: [MapDisplayOptionComponent, OverlayModule, IconComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
3431
|
-
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], backgroundsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundsTitle", required: false }] }], layersTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "layersTitle", required: false }] }], enableClearLayers: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClearLayers", required: false }] }], layerOptionType: [{ type: i0.Input, args: [{ isSignal: true, alias: "layerOptionType", required: false }] }], backgroundOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundOptions", required: false }] }], layerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "layerOptions", required: false }] }], backgroundChange: [{ type: i0.Output, args: ["backgroundChange"] }], layerChange: [{ type: i0.Output, args: ["layerChange"] }], clearAllLayers: [{ type: i0.Output, args: ["clearAllLayers"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
|
|
3432
|
+
args: [{ selector: 'ndw-map-display', imports: [MapDisplayOptionComponent, OverlayModule, IconComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"map-control\"\r\n [class.active]=\"open()\"\r\n [class.map-control--compact]=\"compact()\"\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n>\r\n @let activeBackground = activeBackgroundOption();\r\n @if (activeBackground) {\r\n <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\r\n }\r\n\r\n <button class=\"content-wrapper\" type=\"button\" (click)=\"open.set(!open())\">\r\n @if (!compact()) {\r\n {{ title() }}\r\n }\r\n </button>\r\n\r\n @if (numberOfSelectedLayers() && enableClearLayers()) {\r\n <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\r\n }\r\n\r\n @if (!compact()) {\r\n <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\r\n }\r\n</div>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"showPopover()\"\r\n (detach)=\"open.set(false)\"\r\n (overlayOutsideClick)=\"open.set(false)\"\r\n>\r\n <div class=\"map-control-dropdown\">\r\n <header>\r\n <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\r\n <button ndwButton tertiary type=\"button\" (click)=\"open.set(false)\">\r\n <ndw-icon>close</ndw-icon>\r\n <span class=\"sr-only\">Sluit {{ title() }}</span>\r\n </button>\r\n </header>\r\n\r\n <div class=\"map-control-dropdown__content\">\r\n @if (linkedBackgroundOptions().length) {\r\n <section class=\"map-control-dropdown__section\">\r\n <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">\r\n {{ backgroundsTitle() }}\r\n </h4>\r\n <ul class=\"map-control-dropdown__backgrounds\">\r\n @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\r\n <li>\r\n <ndw-map-display-option\r\n [option]=\"backgroundOption\"\r\n [group]=\"'map-backgrounds'\"\r\n [type]=\"'radio'\"\r\n [direction]=\"'column'\"\r\n (selectionChange)=\"selectBackground($event)\"\r\n />\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n }\r\n\r\n @if (linkedLayerOptions().length) {\r\n <section class=\"map-control-dropdown__section\">\r\n <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">{{ layersTitle() }}</h4>\r\n <ul>\r\n @for (layerOption of linkedLayerOptions(); track layerOption.id) {\r\n <li>\r\n <ndw-map-display-option\r\n [option]=\"layerOption\"\r\n [group]=\"'map-layers'\"\r\n [type]=\"layerOptionType()\"\r\n [direction]=\"'row'\"\r\n (selectionChange)=\"toggleLayer($event)\"\r\n />\r\n </li>\r\n }\r\n </ul>\r\n </section>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\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;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"] }]
|
|
3433
|
+
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], backgroundsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundsTitle", required: false }] }], layersTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "layersTitle", required: false }] }], enableClearLayers: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClearLayers", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], layerOptionType: [{ type: i0.Input, args: [{ isSignal: true, alias: "layerOptionType", required: false }] }], backgroundOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundOptions", required: false }] }], layerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "layerOptions", required: false }] }], backgroundChange: [{ type: i0.Output, args: ["backgroundChange"] }], layerChange: [{ type: i0.Output, args: ["layerChange"] }], clearAllLayers: [{ type: i0.Output, args: ["clearAllLayers"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
|
|
3432
3434
|
|
|
3433
3435
|
const MAP_BACKGROUND_IMAGES = {
|
|
3434
3436
|
OSM_DEFAULT: 'images/map-backgrounds/osm-default.webp',
|
|
@@ -3639,6 +3641,7 @@ class MapLegendComponent {
|
|
|
3639
3641
|
icon = input('legend_toggle', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
3640
3642
|
title = input('Legenda', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
3641
3643
|
viewMode = input('dropdown', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
|
|
3644
|
+
compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
|
|
3642
3645
|
open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
|
|
3643
3646
|
htmlIsRendered = signal(false, ...(ngDevMode ? [{ debugName: "htmlIsRendered" }] : []));
|
|
3644
3647
|
showPopover = computed(() => this.open() && this.htmlIsRendered(), ...(ngDevMode ? [{ debugName: "showPopover" }] : []));
|
|
@@ -3649,12 +3652,12 @@ class MapLegendComponent {
|
|
|
3649
3652
|
afterNextRender(() => this.htmlIsRendered.set(true));
|
|
3650
3653
|
}
|
|
3651
3654
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3652
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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()) {\r\n <button\r\n class=\"map-control\"\r\n [class.active]=\"open()\"\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n (click)=\"open.set(!open())\"\r\n >\r\n <ndw-icon>{{ icon() }}</ndw-icon>\r\n <span class=\"content-wrapper\">\r\n
|
|
3655
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, compact: { classPropertyName: "compact", publicName: "compact", 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()) {\r\n <button\r\n class=\"map-control\"\r\n [class.active]=\"open()\"\r\n [class.map-control--compact]=\"compact()\"\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n (click)=\"open.set(!open())\"\r\n >\r\n <ndw-icon>{{ icon() }}</ndw-icon>\r\n @if (!compact()) {\r\n <span class=\"content-wrapper\">\r\n {{ title() }}\r\n </span>\r\n <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\r\n }\r\n </button>\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"showPopover()\"\r\n (detach)=\"open.set(false)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"dropdown\" />\r\n </ng-template>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"dropdown\" />\r\n}\r\n\r\n<ng-template #dropdown>\r\n <div class=\"map-control-dropdown\" [class.fixed]=\"isFixedViewMode()\">\r\n <header>\r\n <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\r\n\r\n @if (isDropdownViewMode()) {\r\n <button\r\n class=\"map-control-dropdown__close\"\r\n ndwButton\r\n tertiary\r\n type=\"button\"\r\n (click)=\"open.set(false)\"\r\n >\r\n <ndw-icon>close</ndw-icon>\r\n <span class=\"sr-only\">Sluit {{ title() }}</span>\r\n </button>\r\n }\r\n </header>\r\n\r\n <div class=\"map-control-dropdown__content\">\r\n @if (hasJustOneGroup()) {\r\n <ndw-map-legend-group [group]=\"groups()[0]\" [singleGroup]=\"true\" />\r\n } @else {\r\n <ul class=\"groups\">\r\n @for (group of groups(); let i = $index; track i) {\r\n @if (!!group.options.length) {\r\n <ndw-map-legend-group [group]=\"group\" [index]=\"i\" />\r\n }\r\n }\r\n </ul>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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 });
|
|
3653
3656
|
}
|
|
3654
3657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapLegendComponent, decorators: [{
|
|
3655
3658
|
type: Component,
|
|
3656
|
-
args: [{ selector: 'ndw-map-legend', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, OverlayModule, MapLegendGroupComponent], template: "@if (isDropdownViewMode()) {\r\n <button\r\n class=\"map-control\"\r\n [class.active]=\"open()\"\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n (click)=\"open.set(!open())\"\r\n >\r\n <ndw-icon>{{ icon() }}</ndw-icon>\r\n <span class=\"content-wrapper\">\r\n
|
|
3657
|
-
}], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
|
|
3659
|
+
args: [{ selector: 'ndw-map-legend', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, OverlayModule, MapLegendGroupComponent], template: "@if (isDropdownViewMode()) {\r\n <button\r\n class=\"map-control\"\r\n [class.active]=\"open()\"\r\n [class.map-control--compact]=\"compact()\"\r\n cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\"\r\n (click)=\"open.set(!open())\"\r\n >\r\n <ndw-icon>{{ icon() }}</ndw-icon>\r\n @if (!compact()) {\r\n <span class=\"content-wrapper\">\r\n {{ title() }}\r\n </span>\r\n <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\r\n }\r\n </button>\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"showPopover()\"\r\n (detach)=\"open.set(false)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"dropdown\" />\r\n </ng-template>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"dropdown\" />\r\n}\r\n\r\n<ng-template #dropdown>\r\n <div class=\"map-control-dropdown\" [class.fixed]=\"isFixedViewMode()\">\r\n <header>\r\n <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\r\n\r\n @if (isDropdownViewMode()) {\r\n <button\r\n class=\"map-control-dropdown__close\"\r\n ndwButton\r\n tertiary\r\n type=\"button\"\r\n (click)=\"open.set(false)\"\r\n >\r\n <ndw-icon>close</ndw-icon>\r\n <span class=\"sr-only\">Sluit {{ title() }}</span>\r\n </button>\r\n }\r\n </header>\r\n\r\n <div class=\"map-control-dropdown__content\">\r\n @if (hasJustOneGroup()) {\r\n <ndw-map-legend-group [group]=\"groups()[0]\" [singleGroup]=\"true\" />\r\n } @else {\r\n <ul class=\"groups\">\r\n @for (group of groups(); let i = $index; track i) {\r\n @if (!!group.options.length) {\r\n <ndw-map-legend-group [group]=\"group\" [index]=\"i\" />\r\n }\r\n }\r\n </ul>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["*{box-sizing:border-box}ul{list-style-type:none;padding:0;margin:0}.groups{padding:var(--ndw-spacing-2xs)}\n"] }]
|
|
3660
|
+
}], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
|
|
3658
3661
|
|
|
3659
3662
|
class ModalContentComponent {
|
|
3660
3663
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|