@ndwnu/design-system 13.1.0 → 13.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/flags/de.svg +1 -0
- package/assets/images/flags/en.svg +1 -0
- package/assets/images/flags/fr.svg +1 -0
- package/assets/images/flags/nl.svg +1 -0
- package/fesm2022/ndwnu-design-system.mjs +57 -8
- package/fesm2022/ndwnu-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/components/_datepicker.scss +13 -0
- package/types/ndwnu-design-system.d.ts +26 -4
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><clipPath id="de"><circle cx="32" cy="32" r="32"/></clipPath><g clip-path="url(#de)"><rect y="0" width="64" height="21.3" fill="#000"/><rect y="21.3" width="64" height="21.4" fill="#DD0000"/><rect y="42.7" width="64" height="21.3" fill="#FFCC00"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><clipPath id="en"><circle cx="32" cy="32" r="32"/></clipPath><g clip-path="url(#en)"><rect width="64" height="64" fill="#012169"/><path d="M0 0L64 64M64 0L0 64" stroke="#FFF" stroke-width="10"/><path d="M0 0L64 64M64 0L0 64" stroke="#C8102E" stroke-width="6"/><path d="M32 0V64M0 32H64" stroke="#FFF" stroke-width="16"/><path d="M32 0V64M0 32H64" stroke="#C8102E" stroke-width="10"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><clipPath id="fr"><circle cx="32" cy="32" r="32"/></clipPath><g clip-path="url(#fr)"><rect x="0" width="21.3" height="64" fill="#002395"/><rect x="21.3" width="21.4" height="64" fill="#FFF"/><rect x="42.7" width="21.3" height="64" fill="#ED2939"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><clipPath id="nl"><circle cx="32" cy="32" r="32"/></clipPath><g clip-path="url(#nl)"><rect y="0" width="64" height="21.3" fill="#AE1C28"/><rect y="21.3" width="64" height="21.4" fill="#FFF"/><rect y="42.7" width="64" height="21.3" fill="#21468B"/></g></svg>
|
|
@@ -2993,6 +2993,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
2993
2993
|
args: [{ selector: 'ndw-key-value-list', imports: [IconComponent, NgTemplateOutlet, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl\n [class.striped]=\"hasZebraStripes()\"\n [class.fluid]=\"fluid()\"\n [class.font-md]=\"fontSize() === 'md'\"\n [class.font-lg]=\"fontSize() === 'lg'\"\n>\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.font-md dt{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-md dd{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.font-lg dt{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-lg dd{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}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)}dl.fluid{width:100%}\n"] }]
|
|
2994
2994
|
}] });
|
|
2995
2995
|
|
|
2996
|
+
const LANGUAGE_FLAGS = {
|
|
2997
|
+
NL: 'images/flags/nl.svg',
|
|
2998
|
+
EN: 'images/flags/en.svg',
|
|
2999
|
+
FR: 'images/flags/fr.svg',
|
|
3000
|
+
DE: 'images/flags/de.svg',
|
|
3001
|
+
};
|
|
3002
|
+
const LANGUAGE_LABELS = {
|
|
3003
|
+
NL: 'Nederlands',
|
|
3004
|
+
EN: 'English',
|
|
3005
|
+
FR: 'Français',
|
|
3006
|
+
DE: 'Deutsch',
|
|
3007
|
+
};
|
|
3008
|
+
|
|
3009
|
+
class LanguageSwitcherComponent {
|
|
3010
|
+
languages = input(['NL', 'EN'], ...(ngDevMode ? [{ debugName: "languages" }] : []));
|
|
3011
|
+
selected = model('NL', ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
3012
|
+
displayMode = input('flag-only', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
|
|
3013
|
+
flagSrc(lang) {
|
|
3014
|
+
return LANGUAGE_FLAGS[lang] ?? '';
|
|
3015
|
+
}
|
|
3016
|
+
labelFor(lang) {
|
|
3017
|
+
const language = lang;
|
|
3018
|
+
switch (this.displayMode()) {
|
|
3019
|
+
case 'abbreviation':
|
|
3020
|
+
return language;
|
|
3021
|
+
case 'full':
|
|
3022
|
+
return LANGUAGE_LABELS[language];
|
|
3023
|
+
default:
|
|
3024
|
+
return '';
|
|
3025
|
+
}
|
|
3026
|
+
}
|
|
3027
|
+
selectLanguage(lang) {
|
|
3028
|
+
this.selected.set(lang);
|
|
3029
|
+
}
|
|
3030
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LanguageSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3031
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LanguageSwitcherComponent, isStandalone: true, selector: "ndw-language-switcher", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<button type=\"button\" class=\"flag-trigger\" [ndwPopoverTrigger]=\"languageList\">\n <img class=\"flag\" [src]=\"flagSrc(selected())\" [alt]=\"selected()\" />\n @if (labelFor(selected()); as label) {\n <span class=\"label\">{{ label }}</span>\n }\n</button>\n\n<ng-template #languageList>\n @for (lang of languages(); track lang) {\n <button\n type=\"button\"\n class=\"language-option\"\n [class.active]=\"selected() === lang\"\n ndwPopoverCloseTrigger\n (click)=\"selectLanguage(lang)\"\n >\n <img class=\"flag\" [src]=\"flagSrc(lang)\" [alt]=\"lang\" />\n @if (labelFor(lang); as label) {\n <span class=\"label\">{{ label }}</span>\n }\n </button>\n }\n</ng-template>\n", styles: [".flag-trigger,.language-option{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-2xs);border:none;background:transparent;border-radius:var(--ndw-border-radius-sm);font-size:var(--ndw-font-size-sm)}.flag-trigger:hover,.language-option:hover{background-color:var(--ndw-color-grey-100)}.language-option{gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}.language-option.active{color:var(--ndw-color-primary-500);font-weight:var(--ndw-font-weight-bold)}.flag{width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3032
|
+
}
|
|
3033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
|
|
3034
|
+
type: Component,
|
|
3035
|
+
args: [{ selector: 'ndw-language-switcher', imports: [PopoverTriggerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"flag-trigger\" [ndwPopoverTrigger]=\"languageList\">\n <img class=\"flag\" [src]=\"flagSrc(selected())\" [alt]=\"selected()\" />\n @if (labelFor(selected()); as label) {\n <span class=\"label\">{{ label }}</span>\n }\n</button>\n\n<ng-template #languageList>\n @for (lang of languages(); track lang) {\n <button\n type=\"button\"\n class=\"language-option\"\n [class.active]=\"selected() === lang\"\n ndwPopoverCloseTrigger\n (click)=\"selectLanguage(lang)\"\n >\n <img class=\"flag\" [src]=\"flagSrc(lang)\" [alt]=\"lang\" />\n @if (labelFor(lang); as label) {\n <span class=\"label\">{{ label }}</span>\n }\n </button>\n }\n</ng-template>\n", styles: [".flag-trigger,.language-option{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-2xs);border:none;background:transparent;border-radius:var(--ndw-border-radius-sm);font-size:var(--ndw-font-size-sm)}.flag-trigger:hover,.language-option:hover{background-color:var(--ndw-color-grey-100)}.language-option{gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}.language-option.active{color:var(--ndw-color-primary-500);font-weight:var(--ndw-font-weight-bold)}.flag{width:20px;height:20px}\n"] }]
|
|
3036
|
+
}], propDecorators: { languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }] } });
|
|
3037
|
+
|
|
2996
3038
|
class MainNavigationHeaderComponent {
|
|
2997
3039
|
applicationName = input.required(...(ngDevMode ? [{ debugName: "applicationName" }] : []));
|
|
2998
3040
|
isExpanded = input.required(...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
|
|
@@ -4357,6 +4399,7 @@ class ToastComponent {
|
|
|
4357
4399
|
duration = input(5000, ...(ngDevMode ? [{ debugName: "duration" }] : []));
|
|
4358
4400
|
paused = input(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
|
|
4359
4401
|
showProgress = input(true, ...(ngDevMode ? [{ debugName: "showProgress" }] : []));
|
|
4402
|
+
type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
4360
4403
|
closed = output();
|
|
4361
4404
|
elementDimensions = output();
|
|
4362
4405
|
#elementRef = inject(ElementRef);
|
|
@@ -4367,12 +4410,15 @@ class ToastComponent {
|
|
|
4367
4410
|
});
|
|
4368
4411
|
}
|
|
4369
4412
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4370
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
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>\r\n{{ message() }}\r\n<button\r\n ndwButton\r\n tertiary\r\n alternative\r\n extra-small\r\n (click)=\"closed.emit()\"\r\n [attr.aria-label]=\"closeButtonLabel()\"\r\n>\r\n <ndw-icon>close</ndw-icon>\r\n</button>\r\n@if (type() === 'info') {\r\n <div\r\n class=\"progress-bar\"\r\n [ngStyle]=\"{\r\n 'animation-duration': duration() + 'ms',\r\n visibility: showProgress() ? 'visible' : 'hidden',\r\n }\"\r\n [class.paused]=\"paused()\"\r\n ></div>\r\n}\r\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 });
|
|
4371
4414
|
}
|
|
4372
4415
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastComponent, decorators: [{
|
|
4373
4416
|
type: Component,
|
|
4374
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4375
|
-
|
|
4417
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4418
|
+
'[class.info]': 'type() === "info"',
|
|
4419
|
+
'[class.error]': 'type() === "error"',
|
|
4420
|
+
}, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon class=\"toast-icon\">{{ type() }}</ndw-icon>\r\n{{ message() }}\r\n<button\r\n ndwButton\r\n tertiary\r\n alternative\r\n extra-small\r\n (click)=\"closed.emit()\"\r\n [attr.aria-label]=\"closeButtonLabel()\"\r\n>\r\n <ndw-icon>close</ndw-icon>\r\n</button>\r\n@if (type() === 'info') {\r\n <div\r\n class=\"progress-bar\"\r\n [ngStyle]=\"{\r\n 'animation-duration': duration() + 'ms',\r\n visibility: showProgress() ? 'visible' : 'hidden',\r\n }\"\r\n [class.paused]=\"paused()\"\r\n ></div>\r\n}\r\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
|
+
}], 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"] }] } });
|
|
4376
4422
|
|
|
4377
4423
|
class ToastListComponent {
|
|
4378
4424
|
toastService = inject(ToastService);
|
|
@@ -4426,7 +4472,7 @@ class ToastListComponent {
|
|
|
4426
4472
|
this.toastService.resume();
|
|
4427
4473
|
}
|
|
4428
4474
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4429
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 });
|
|
4475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 [type]=\"toast.type\"\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", "type"], outputs: ["closed", "elementDimensions"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4430
4476
|
}
|
|
4431
4477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastListComponent, decorators: [{
|
|
4432
4478
|
type: Component,
|
|
@@ -4436,7 +4482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
4436
4482
|
'[style.--total-toast-height]': 'totalHeightExcludingGaps() + "px"',
|
|
4437
4483
|
'[style.--total-toast-count]': 'toastComponents().length',
|
|
4438
4484
|
'[style.--max-toast-width]': 'maxToastWidth() + "px"',
|
|
4439
|
-
}, imports: [ToastComponent, NgStyle], selector: 'ndw-toast-list', template: "@for (toast of toastService.toasts(); track toast.id) {\n <ndw-toast\n class=\"toast\"\n [class.hide-content]=\"!toastService.paused() && $index > 0\"\n [ngStyle]=\"{\n '--index': $index,\n '--offset-height': toastOffsetHeights()[$index] + 'px',\n '--first-toast-height': firstToastHeight() + 'px',\n }\"\n [id]=\"toast.id\"\n [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n [message]=\"toast.message\"\n [duration]=\"toast.duration\"\n [paused]=\"toastService.paused()\"\n [showProgress]=\"toastService.paused() || $first\"\n (closed)=\"toastService.close(toast.id)\"\n (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:var(--first-toast-height)}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"] }]
|
|
4485
|
+
}, imports: [ToastComponent, NgStyle], selector: 'ndw-toast-list', template: "@for (toast of toastService.toasts(); track toast.id) {\n <ndw-toast\n class=\"toast\"\n [class.hide-content]=\"!toastService.paused() && $index > 0\"\n [ngStyle]=\"{\n '--index': $index,\n '--offset-height': toastOffsetHeights()[$index] + 'px',\n '--first-toast-height': firstToastHeight() + 'px',\n }\"\n [id]=\"toast.id\"\n [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n [message]=\"toast.message\"\n [duration]=\"toast.duration\"\n [paused]=\"toastService.paused()\"\n [showProgress]=\"toastService.paused() || $first\"\n [type]=\"toast.type\"\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"] }]
|
|
4440
4486
|
}], propDecorators: { toastComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => ToastComponent), { isSignal: true }] }] } });
|
|
4441
4487
|
|
|
4442
4488
|
class ToastService {
|
|
@@ -4480,9 +4526,11 @@ class ToastService {
|
|
|
4480
4526
|
* Open a toast notification with the given message and optional duration.
|
|
4481
4527
|
* @param message The message to display in the toast.
|
|
4482
4528
|
* @param duration Optional duration in milliseconds for which the toast should be visible. Defaults to 5000ms.
|
|
4529
|
+
* @param closeButtonLabel
|
|
4530
|
+
* @param type The type of toast. Based on type the behavior and visuals of the toast will change.
|
|
4483
4531
|
* @returns The ID of the created toast. Can be used to close the toast.
|
|
4484
4532
|
*/
|
|
4485
|
-
open(message, duration, closeButtonLabel) {
|
|
4533
|
+
open(message, duration, closeButtonLabel, type = 'info') {
|
|
4486
4534
|
const id = crypto.randomUUID();
|
|
4487
4535
|
this.#addToast({
|
|
4488
4536
|
id,
|
|
@@ -4490,6 +4538,7 @@ class ToastService {
|
|
|
4490
4538
|
duration: duration ?? 5000,
|
|
4491
4539
|
remainingTime: duration ?? 5000,
|
|
4492
4540
|
closeButtonLabel,
|
|
4541
|
+
type,
|
|
4493
4542
|
});
|
|
4494
4543
|
if (!this.#overlayRef) {
|
|
4495
4544
|
this.#overlayRef = this.#overlay.create({
|
|
@@ -4520,7 +4569,7 @@ class ToastService {
|
|
|
4520
4569
|
#updateToastExpiration(elapsedMs) {
|
|
4521
4570
|
this.#toasts.update((toasts) => toasts.map((toast) => ({ ...toast, remainingTime: toast.remainingTime - elapsedMs })));
|
|
4522
4571
|
this.#toasts().forEach((toast) => {
|
|
4523
|
-
if (toast.remainingTime <= 0) {
|
|
4572
|
+
if (toast.remainingTime <= 0 && toast.type !== 'error') {
|
|
4524
4573
|
this.close(toast.id);
|
|
4525
4574
|
}
|
|
4526
4575
|
});
|
|
@@ -4539,5 +4588,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
4539
4588
|
* Generated bundle index. Do not edit.
|
|
4540
4589
|
*/
|
|
4541
4590
|
|
|
4542
|
-
export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BROWSER_STORAGE, BadgeComponent, BannerComponent, BaseTourService, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, GuidedTourService, 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, MarkdownEditorComponent, MarkdownParserComponent, 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, backButton, cancelButton, defaultStepOptions, elementIsHidden, finishButton, fontMapButtonIcons, formatStepWithImage, makeButton, mapButtonIcons, ndwAgGridTheme, nextButton, svgMapButtonIcons };
|
|
4591
|
+
export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BROWSER_STORAGE, BadgeComponent, BannerComponent, BaseTourService, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, GuidedTourService, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LANGUAGE_FLAGS, LANGUAGE_LABELS, LanguageSwitcherComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MarkdownEditorComponent, MarkdownParserComponent, 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, backButton, cancelButton, defaultStepOptions, elementIsHidden, finishButton, fontMapButtonIcons, formatStepWithImage, makeButton, mapButtonIcons, ndwAgGridTheme, nextButton, svgMapButtonIcons };
|
|
4543
4592
|
//# sourceMappingURL=ndwnu-design-system.mjs.map
|