@ndwnu/design-system 12.1.0 → 12.2.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.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ChangeDetectionStrategy, Component, input, forwardRef, Directive, model, computed, viewChild, ElementRef, signal, afterRenderEffect, effect, EventEmitter, inject, DestroyRef, ViewContainerRef, Output, output, contentChildren, PLATFORM_ID, contentChild, Renderer2, afterNextRender, Injectable, InjectionToken, ChangeDetectorRef, DOCUMENT, linkedSignal, untracked, TemplateRef, viewChildren } from '@angular/core';
|
|
2
|
+
import { ChangeDetectionStrategy, Component, input, forwardRef, Directive, model, computed, viewChild, ElementRef, signal, afterRenderEffect, effect, EventEmitter, inject, DestroyRef, ViewContainerRef, Output, output, contentChildren, PLATFORM_ID, contentChild, Renderer2, afterNextRender, CUSTOM_ELEMENTS_SCHEMA, Injectable, InjectionToken, ChangeDetectorRef, DOCUMENT, linkedSignal, untracked, TemplateRef, Injector, viewChildren } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
4
|
-
import { NgTemplateOutlet, NgClass, DatePipe, isPlatformBrowser, AsyncPipe, NgStyle } from '@angular/common';
|
|
4
|
+
import { NgTemplateOutlet, NgClass, DatePipe, isPlatformBrowser, CommonModule, AsyncPipe, NgStyle } from '@angular/common';
|
|
5
5
|
import { CoreBadgeComponent, CoreAutosuggestDirective, CoreIconComponent, CoreAutosuggestOptionComponent, MatchBoldPipe, CoreAutosuggestAddOptionComponent, CoreAutosuggestPanelComponent, CoreCheckboxComponent, CoreCheckboxGroupComponent, setRadioItemsName, checkRadioItems, CorePillComponent, CoreBreadcrumbComponent, CoreBreadcrumbGroupComponent, CoreFavoriteComponent, CoreKeyValueListComponent, CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
|
|
6
6
|
import * as i1$1 from '@angular/forms';
|
|
7
|
-
import { NG_VALUE_ACCESSOR, NgControl, Validators, FormsModule } from '@angular/forms';
|
|
7
|
+
import { NG_VALUE_ACCESSOR, NgControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
8
8
|
import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
|
|
9
9
|
import * as i1 from '@angular/material/datepicker';
|
|
10
10
|
import { MatDatepickerIntl, MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
|
|
@@ -20,14 +20,15 @@ import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
|
|
|
20
20
|
import { Dialog } from '@angular/cdk/dialog';
|
|
21
21
|
import * as i1$3 from '@angular/cdk/drag-drop';
|
|
22
22
|
import { CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
|
|
23
|
+
import { debounceTime } from 'rxjs/operators';
|
|
23
24
|
|
|
24
25
|
class BadgeComponent extends CoreBadgeComponent {
|
|
25
26
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'error') {\n !\n} @else if (value()
|
|
27
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'error') {\n !\n} @else if (value()) {\n @if (!displayLargeNumbers() && valueOutOfRange()) {\n <span class=\"dot\"></span>\n } @else {\n {{ value() }}\n }\n} @else {\n {{ value() }}\n}\n@if (ariaLabel()) {\n <span class=\"sr-only\">{{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{align-items:center;background-color:var(--badge-background-color);border:var(--badge-border);border-radius:var(--badge-min-size);box-sizing:border-box;color:var(--badge-color);display:flex;font-size:var(--badge-font-size);height:var(--badge-min-size);justify-content:center;letter-spacing:-1px;max-width:fit-content;min-width:var(--badge-min-size);padding-inline:var(--badge-padding-inline);text-align:center}.dot{display:block;background-color:var(--badge-color);border-radius:50%;height:var(--badge-dot-size);width:var(--badge-dot-size)}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--badge-background-color: var(--ndw-color-primary-050);--badge-border: var(--ndw-border-size-sm) solid var(--ndw-color-primary);--badge-color: var(--ndw-color-primary);--badge-dot-size: var(--ndw-spacing-2xs);--badge-min-size: 1.25rem;--badge-padding-inline: var(--ndw-spacing-2xs)}:host(.small){--badge-dot-size: var(--ndw-spacing-1xs);--badge-min-size: 1rem;--badge-padding-inline: var(--ndw-spacing-1xs)}:host(.error){--badge-background-color: var(--ndw-color-critical-500);--badge-border: none;--badge-color: var(--ndw-color-white);letter-spacing:0px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27
28
|
}
|
|
28
29
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
29
30
|
type: Component,
|
|
30
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (variant() === 'error') {\n !\n} @else if (value()
|
|
31
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (variant() === 'error') {\n !\n} @else if (value()) {\n @if (!displayLargeNumbers() && valueOutOfRange()) {\n <span class=\"dot\"></span>\n } @else {\n {{ value() }}\n }\n} @else {\n {{ value() }}\n}\n@if (ariaLabel()) {\n <span class=\"sr-only\">{{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{align-items:center;background-color:var(--badge-background-color);border:var(--badge-border);border-radius:var(--badge-min-size);box-sizing:border-box;color:var(--badge-color);display:flex;font-size:var(--badge-font-size);height:var(--badge-min-size);justify-content:center;letter-spacing:-1px;max-width:fit-content;min-width:var(--badge-min-size);padding-inline:var(--badge-padding-inline);text-align:center}.dot{display:block;background-color:var(--badge-color);border-radius:50%;height:var(--badge-dot-size);width:var(--badge-dot-size)}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--badge-background-color: var(--ndw-color-primary-050);--badge-border: var(--ndw-border-size-sm) solid var(--ndw-color-primary);--badge-color: var(--ndw-color-primary);--badge-dot-size: var(--ndw-spacing-2xs);--badge-min-size: 1.25rem;--badge-padding-inline: var(--ndw-spacing-2xs)}:host(.small){--badge-dot-size: var(--ndw-spacing-1xs);--badge-min-size: 1rem;--badge-padding-inline: var(--ndw-spacing-1xs)}:host(.error){--badge-background-color: var(--ndw-color-critical-500);--badge-border: none;--badge-color: var(--ndw-color-white);letter-spacing:0px}\n"] }]
|
|
31
32
|
}] });
|
|
32
33
|
|
|
33
34
|
class AutosuggestDirective extends CoreAutosuggestDirective {
|
|
@@ -847,6 +848,16 @@ class DatepickerComponent {
|
|
|
847
848
|
if (mode === 'single' || mode === 'month') {
|
|
848
849
|
this.#closeCalendar();
|
|
849
850
|
}
|
|
851
|
+
if (!this.popoverTrigger().isOpen()) {
|
|
852
|
+
this.input().control?.markAllAsTouched();
|
|
853
|
+
this.input().updateErrorAttribute();
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
onPopoverOpenChange(isOpen) {
|
|
857
|
+
if (!isOpen) {
|
|
858
|
+
this.input().control?.markAllAsTouched();
|
|
859
|
+
this.input().updateErrorAttribute();
|
|
860
|
+
}
|
|
850
861
|
}
|
|
851
862
|
#closeCalendar() {
|
|
852
863
|
if (this.popoverTrigger().isOpen()) {
|
|
@@ -873,7 +884,7 @@ class DatepickerComponent {
|
|
|
873
884
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
874
885
|
multi: true,
|
|
875
886
|
},
|
|
876
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: InputDirective, descendants: true, isSignal: true }, { propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n ndwInput\n [value]=\"showTags() ? '' : formattedValue()\"\n (blur)=\"onDateInput($event.target.value)\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n/>\n\n<button\n ndwButton\n class=\"calendar-button\"\n type=\"button\"\n extra-small\n tertiary\n [ndwPopoverTrigger]=\"calendarTemplate\"\n [toggleOnClick]=\"true\"\n [attr.aria-label]=\"openCalendarLabel()\"\n [disabled]=\"disabled()\"\n>\n <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #calendarTemplate>\n <ndw-calendar\n [ngModel]=\"value()\"\n (ngModelChange)=\"onDateSelected($event)\"\n [mode]=\"mode()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [startAt]=\"startAt()\"\n [dateEnabledFilter]=\"dateEnabledFilter()\"\n [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\n [elevated]=\"false\"\n />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n <div class=\"tag-container\">\n @for (value of value(); track value) {\n <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\n }\n </div>\n}\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: CalendarComponent, selector: "ndw-calendar", inputs: ["mode", "disabled", "minDate", "maxDate", "startAt", "dateEnabledFilter", "dateWithIndicatorFilter", "elevated"], outputs: ["disabledChange"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
887
|
+
], viewQueries: [{ propertyName: "input", first: true, predicate: InputDirective, descendants: true, isSignal: true }, { propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n ndwInput\n [value]=\"showTags() ? '' : formattedValue()\"\n (blur)=\"onDateInput($event.target.value)\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n/>\n\n<button\n ndwButton\n class=\"calendar-button\"\n type=\"button\"\n extra-small\n tertiary\n [ndwPopoverTrigger]=\"calendarTemplate\"\n [toggleOnClick]=\"true\"\n [attr.aria-label]=\"openCalendarLabel()\"\n [disabled]=\"disabled()\"\n (isOpenChange)=\"onPopoverOpenChange($event)\"\n>\n <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #calendarTemplate>\n <ndw-calendar\n [ngModel]=\"value()\"\n (ngModelChange)=\"onDateSelected($event)\"\n [mode]=\"mode()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [startAt]=\"startAt()\"\n [dateEnabledFilter]=\"dateEnabledFilter()\"\n [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\n [elevated]=\"false\"\n />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n <div class=\"tag-container\">\n @for (value of value(); track value) {\n <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\n }\n </div>\n}\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: CalendarComponent, selector: "ndw-calendar", inputs: ["mode", "disabled", "minDate", "maxDate", "startAt", "dateEnabledFilter", "dateWithIndicatorFilter", "elevated"], outputs: ["disabledChange"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
877
888
|
}
|
|
878
889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
879
890
|
type: Component,
|
|
@@ -892,7 +903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
892
903
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
893
904
|
multi: true,
|
|
894
905
|
},
|
|
895
|
-
], selector: 'ndw-datepicker', template: "<input\n ndwInput\n [value]=\"showTags() ? '' : formattedValue()\"\n (blur)=\"onDateInput($event.target.value)\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n/>\n\n<button\n ndwButton\n class=\"calendar-button\"\n type=\"button\"\n extra-small\n tertiary\n [ndwPopoverTrigger]=\"calendarTemplate\"\n [toggleOnClick]=\"true\"\n [attr.aria-label]=\"openCalendarLabel()\"\n [disabled]=\"disabled()\"\n>\n <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #calendarTemplate>\n <ndw-calendar\n [ngModel]=\"value()\"\n (ngModelChange)=\"onDateSelected($event)\"\n [mode]=\"mode()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [startAt]=\"startAt()\"\n [dateEnabledFilter]=\"dateEnabledFilter()\"\n [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\n [elevated]=\"false\"\n />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n <div class=\"tag-container\">\n @for (value of value(); track value) {\n <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\n }\n </div>\n}\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"] }]
|
|
906
|
+
], selector: 'ndw-datepicker', template: "<input\n ndwInput\n [value]=\"showTags() ? '' : formattedValue()\"\n (blur)=\"onDateInput($event.target.value)\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n/>\n\n<button\n ndwButton\n class=\"calendar-button\"\n type=\"button\"\n extra-small\n tertiary\n [ndwPopoverTrigger]=\"calendarTemplate\"\n [toggleOnClick]=\"true\"\n [attr.aria-label]=\"openCalendarLabel()\"\n [disabled]=\"disabled()\"\n (isOpenChange)=\"onPopoverOpenChange($event)\"\n>\n <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #calendarTemplate>\n <ndw-calendar\n [ngModel]=\"value()\"\n (ngModelChange)=\"onDateSelected($event)\"\n [mode]=\"mode()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [startAt]=\"startAt()\"\n [dateEnabledFilter]=\"dateEnabledFilter()\"\n [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\n [elevated]=\"false\"\n />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n <div class=\"tag-container\">\n @for (value of value(); track value) {\n <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\n }\n </div>\n}\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"] }]
|
|
896
907
|
}] });
|
|
897
908
|
|
|
898
909
|
class ErrorComponent {
|
|
@@ -1726,99 +1737,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
1726
1737
|
], selector: 'ndw-form-field', template: "@if (input() === undefined) {\n <fieldset>\n <legend ndwLabel [class.sr-only]=\"hideLabel()\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n </legend>\n <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n </fieldset>\n} @else {\n <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n </label>\n <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n}\n\n<ng-template #fieldTemplate>\n <div\n [class]=\"inputContainerClass\"\n [attr.success]=\"success() ? true : null\"\n [attr.error]=\"error() ? true : null\"\n >\n @if (isSearchInput()) {\n <ndw-input-icon>search</ndw-input-icon>\n }\n\n <ng-content />\n\n @if (isSearchInput()) {\n <ndw-clear-search-button\n [input]=\"input()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"suffixAriaLabel()\"\n (buttonClicked)=\"clearButtonClicked.emit()\"\n />\n }\n @if (hasPickerButton()) {\n <ndw-picker-button\n [input]=\"input()\"\n [disabled]=\"disabled()\"\n [ariaLabel]=\"suffixAriaLabel()\"\n />\n }\n </div>\n\n @if (info(); as info) {\n <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\n }\n @if (error(); as error) {\n <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\n }\n @if (success(); as success) {\n <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\n }\n</ng-template>\n\n<ng-template #labelTemplate>\n <span class=\"required-label required\"> * </span>\n {{ label() }}\n @if (tooltip(); as tooltip) {\n <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\n }\n</ng-template>\n", styles: [":host{position:relative;display:grid;color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0;word-break:break-word}label{word-break:break-word}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}\n"] }]
|
|
1727
1738
|
}], ctorParameters: () => [] });
|
|
1728
1739
|
|
|
1729
|
-
class RadioButtonComponent {
|
|
1730
|
-
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
1731
|
-
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1732
|
-
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1733
|
-
success = input(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
1734
|
-
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1735
|
-
value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
1736
|
-
name = signal(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
1737
|
-
uuid = crypto.randomUUID();
|
|
1738
|
-
onInputChange(event) {
|
|
1739
|
-
const input = event.target;
|
|
1740
|
-
this.checked.set(input.checked);
|
|
1741
|
-
}
|
|
1742
|
-
writeValue(value) {
|
|
1743
|
-
this.checked.set(value);
|
|
1744
|
-
}
|
|
1745
|
-
registerOnChange(fn) {
|
|
1746
|
-
this.checked.subscribe(fn);
|
|
1747
|
-
}
|
|
1748
|
-
registerOnTouched() {
|
|
1749
|
-
// noop
|
|
1750
|
-
}
|
|
1751
|
-
setDisabledState(isDisabled) {
|
|
1752
|
-
this.disabled.set(isDisabled);
|
|
1753
|
-
}
|
|
1754
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1755
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: RadioButtonComponent, isStandalone: true, selector: "ndw-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", value: "valueChange" }, host: { properties: { "class.checked": "checked()", "class.disabled": "disabled()" } }, providers: [
|
|
1756
|
-
{
|
|
1757
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1758
|
-
useExisting: RadioButtonComponent,
|
|
1759
|
-
multi: true,
|
|
1760
|
-
},
|
|
1761
|
-
], ngImport: i0, template: "<input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"'radio-button-' + uuid\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (change)=\"onInputChange($event)\"\n/>\n<label tabindex=\"-1\" id=\"radio-button-label-{{ uuid }}\" [for]=\"'radio-button-' + uuid\">\n <div class=\"radio-button\" aria-hidden=\"true\" [ngClass]=\"{ error: error(), success: success() }\">\n @if (checked()) {\n <span class=\"check\"></span>\n }\n </div>\n <ng-content />\n</label>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", ".radio-button{border-radius:50%}.radio-button .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) .radio-button{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) .radio-button{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1762
|
-
}
|
|
1763
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
1764
|
-
type: Component,
|
|
1765
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1766
|
-
'[class.checked]': 'checked()',
|
|
1767
|
-
'[class.disabled]': 'disabled()',
|
|
1768
|
-
}, imports: [NgClass], providers: [
|
|
1769
|
-
{
|
|
1770
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1771
|
-
useExisting: RadioButtonComponent,
|
|
1772
|
-
multi: true,
|
|
1773
|
-
},
|
|
1774
|
-
], selector: 'ndw-radio-button', template: "<input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"'radio-button-' + uuid\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (change)=\"onInputChange($event)\"\n/>\n<label tabindex=\"-1\" id=\"radio-button-label-{{ uuid }}\" [for]=\"'radio-button-' + uuid\">\n <div class=\"radio-button\" aria-hidden=\"true\" [ngClass]=\"{ error: error(), success: success() }\">\n @if (checked()) {\n <span class=\"check\"></span>\n }\n </div>\n <ng-content />\n</label>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", ".radio-button{border-radius:50%}.radio-button .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) .radio-button{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) .radio-button{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"] }]
|
|
1775
|
-
}] });
|
|
1776
|
-
|
|
1777
|
-
class RadioGroupComponent {
|
|
1778
|
-
radioButtons = contentChildren(RadioButtonComponent, ...(ngDevMode ? [{ debugName: "radioButtons" }] : []));
|
|
1779
|
-
uuid = crypto.randomUUID();
|
|
1780
|
-
onChange = noop;
|
|
1781
|
-
ngAfterContentInit() {
|
|
1782
|
-
const radioButtons = [...this.radioButtons()];
|
|
1783
|
-
setRadioItemsName(radioButtons, this.uuid);
|
|
1784
|
-
checkRadioItems(radioButtons, this.onChange);
|
|
1785
|
-
}
|
|
1786
|
-
writeValue(value) {
|
|
1787
|
-
this.radioButtons().forEach((radio) => {
|
|
1788
|
-
radio.checked.set(radio.value() === value);
|
|
1789
|
-
});
|
|
1790
|
-
}
|
|
1791
|
-
registerOnChange(fn) {
|
|
1792
|
-
this.onChange = fn;
|
|
1793
|
-
}
|
|
1794
|
-
registerOnTouched() {
|
|
1795
|
-
// noop
|
|
1796
|
-
}
|
|
1797
|
-
setDisabledState(isDisabled) {
|
|
1798
|
-
this.radioButtons().forEach((radio) => radio.disabled.set(isDisabled));
|
|
1799
|
-
}
|
|
1800
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1801
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: RadioGroupComponent, isStandalone: true, selector: "ndw-radio-group", host: { attributes: { "role": "radiogroup" } }, providers: [
|
|
1802
|
-
{
|
|
1803
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1804
|
-
useExisting: RadioGroupComponent,
|
|
1805
|
-
multi: true,
|
|
1806
|
-
},
|
|
1807
|
-
], queries: [{ propertyName: "radioButtons", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1808
|
-
}
|
|
1809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
1810
|
-
type: Component,
|
|
1811
|
-
args: [{ host: {
|
|
1812
|
-
role: 'radiogroup',
|
|
1813
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1814
|
-
{
|
|
1815
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1816
|
-
useExisting: RadioGroupComponent,
|
|
1817
|
-
multi: true,
|
|
1818
|
-
},
|
|
1819
|
-
], selector: 'ndw-radio-group', template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"] }]
|
|
1820
|
-
}] });
|
|
1821
|
-
|
|
1822
1740
|
/**
|
|
1823
1741
|
* Directive that automatically grows a textarea element to fit its content.
|
|
1824
1742
|
*
|
|
@@ -1983,6 +1901,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
1983
1901
|
}]
|
|
1984
1902
|
}], ctorParameters: () => [] });
|
|
1985
1903
|
|
|
1904
|
+
class MarkdownEditorComponent {
|
|
1905
|
+
ngControl = inject(NgControl, { optional: true });
|
|
1906
|
+
uuid = input(crypto.randomUUID(), ...(ngDevMode ? [{ debugName: "uuid" }] : []));
|
|
1907
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1908
|
+
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1909
|
+
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1910
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1911
|
+
success = input(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
1912
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1913
|
+
toolbar = input([
|
|
1914
|
+
'bold',
|
|
1915
|
+
'header',
|
|
1916
|
+
'italic',
|
|
1917
|
+
'unordered-list',
|
|
1918
|
+
'ordered-list',
|
|
1919
|
+
'task-list',
|
|
1920
|
+
], ...(ngDevMode ? [{ debugName: "toolbar" }] : []));
|
|
1921
|
+
bold = computed(() => this.toolbar().includes('bold'), ...(ngDevMode ? [{ debugName: "bold" }] : []));
|
|
1922
|
+
header = computed(() => this.toolbar().includes('header'), ...(ngDevMode ? [{ debugName: "header" }] : []));
|
|
1923
|
+
italic = computed(() => this.toolbar().includes('italic'), ...(ngDevMode ? [{ debugName: "italic" }] : []));
|
|
1924
|
+
quote = computed(() => this.toolbar().includes('quote'), ...(ngDevMode ? [{ debugName: "quote" }] : []));
|
|
1925
|
+
unorderedList = computed(() => this.toolbar().includes('unordered-list'), ...(ngDevMode ? [{ debugName: "unorderedList" }] : []));
|
|
1926
|
+
orderedList = computed(() => this.toolbar().includes('ordered-list'), ...(ngDevMode ? [{ debugName: "orderedList" }] : []));
|
|
1927
|
+
taskList = computed(() => this.toolbar().includes('task-list'), ...(ngDevMode ? [{ debugName: "taskList" }] : []));
|
|
1928
|
+
get isRequiredOrHasRequiredValidator() {
|
|
1929
|
+
return this.required() || this.ngControl?.control?.hasValidator(Validators.required)
|
|
1930
|
+
? true
|
|
1931
|
+
: null;
|
|
1932
|
+
}
|
|
1933
|
+
constructor() {
|
|
1934
|
+
if (this.ngControl) {
|
|
1935
|
+
this.ngControl.valueAccessor = this;
|
|
1936
|
+
}
|
|
1937
|
+
if (!customElements.get('markdown-toolbar')) {
|
|
1938
|
+
import('@github/markdown-toolbar-element');
|
|
1939
|
+
}
|
|
1940
|
+
}
|
|
1941
|
+
writeValue(value) {
|
|
1942
|
+
this.value.set(value);
|
|
1943
|
+
}
|
|
1944
|
+
registerOnChange(fn) {
|
|
1945
|
+
this.value.subscribe(fn);
|
|
1946
|
+
}
|
|
1947
|
+
registerOnTouched() {
|
|
1948
|
+
// noop
|
|
1949
|
+
}
|
|
1950
|
+
setDisabledState(isDisabled) {
|
|
1951
|
+
this.disabled.set(isDisabled);
|
|
1952
|
+
}
|
|
1953
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MarkdownEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1954
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MarkdownEditorComponent, isStandalone: true, selector: "ndw-markdown-editor", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class.disabled": "disabled()", "class.error": "error()", "class.readonly": "readonly()", "class.success": "success()", "class.required": "isRequiredOrHasRequiredValidator" } }, ngImport: i0, template: "<markdown-toolbar [attr.for]=\"uuid()\" [attr.inert]=\"disabled() || readonly() ? '' : null\">\n @if (bold()) {\n <md-bold>\n <button ndwButton tertiary alternative title=\"Bold\" aria-label=\"Bold\">\n <ndw-icon>format_bold</ndw-icon>\n </button>\n </md-bold>\n }\n @if (header()) {\n <md-header>\n <button ndwButton tertiary alternative title=\"Title\" aria-label=\"Title\">\n <ndw-icon>title</ndw-icon>\n </button>\n </md-header>\n }\n @if (italic()) {\n <md-italic>\n <button ndwButton tertiary alternative title=\"Italic\" aria-label=\"Italic\">\n <ndw-icon>format_italic</ndw-icon>\n </button>\n </md-italic>\n }\n @if (quote()) {\n <md-quote>\n <button ndwButton tertiary alternative title=\"Quote\" aria-label=\"Quote\">\n <ndw-icon>format_quote</ndw-icon>\n </button>\n </md-quote>\n }\n @if (unorderedList()) {\n <md-unordered-list>\n <button ndwButton tertiary alternative title=\"Unordered list\" aria-label=\"Unordered list\">\n <ndw-icon>format_list_bulleted</ndw-icon>\n </button>\n </md-unordered-list>\n }\n @if (orderedList()) {\n <md-ordered-list>\n <button ndwButton tertiary alternative title=\"Ordered list\" aria-label=\"Ordered list\">\n <ndw-icon>format_list_numbered</ndw-icon>\n </button>\n </md-ordered-list>\n }\n @if (taskList()) {\n <md-task-list>\n <button ndwButton tertiary alternative title=\"Task list\" aria-label=\"Task list\">\n <ndw-icon>checklist</ndw-icon>\n </button>\n </md-task-list>\n }\n</markdown-toolbar>\n\n<textarea\n [id]=\"uuid()\"\n class=\"markdown-editor\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n ndwAutoGrow\n></textarea>\n", styles: [":host{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-shadow:0 0 0 1px var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);outline:none;background:var(--ndw-color-white);display:flex;flex-direction:column}:host.error,:host.ng-invalid{border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500)}:host.success{border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500)}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled .markdown-editor,:host.readonly .markdown-editor{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled markdown-toolbar>*,:host.readonly markdown-toolbar>*{pointer-events:none}:host .markdown-editor{padding-left:var(--ndw-spacing-md);padding-right:var(--ndw-spacing-md);resize:none;border:none;overflow-y:hidden}:host .markdown-editor:focus{outline:none;border:none}:host.focus{border:var(--ndw-border-size-sm) solid var(--ndw-color-info-500);box-shadow:0 0 0 var(--ndw-border-size-sm) var(--ndw-color-info-500)}:host markdown-toolbar{display:flex;padding:var(--ndw-spacing-2xs);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);margin-bottom:var(--ndw-spacing-sm)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoGrowDirective, selector: "textarea[ndwAutoGrow]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1955
|
+
}
|
|
1956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
|
|
1957
|
+
type: Component,
|
|
1958
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, CommonModule, ReactiveFormsModule, FormsModule, AutoGrowDirective], selector: 'ndw-markdown-editor', host: {
|
|
1959
|
+
'[class.disabled]': 'disabled()',
|
|
1960
|
+
'[class.error]': 'error()',
|
|
1961
|
+
'[class.readonly]': 'readonly()',
|
|
1962
|
+
'[class.success]': 'success()',
|
|
1963
|
+
'[class.required]': 'isRequiredOrHasRequiredValidator',
|
|
1964
|
+
}, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<markdown-toolbar [attr.for]=\"uuid()\" [attr.inert]=\"disabled() || readonly() ? '' : null\">\n @if (bold()) {\n <md-bold>\n <button ndwButton tertiary alternative title=\"Bold\" aria-label=\"Bold\">\n <ndw-icon>format_bold</ndw-icon>\n </button>\n </md-bold>\n }\n @if (header()) {\n <md-header>\n <button ndwButton tertiary alternative title=\"Title\" aria-label=\"Title\">\n <ndw-icon>title</ndw-icon>\n </button>\n </md-header>\n }\n @if (italic()) {\n <md-italic>\n <button ndwButton tertiary alternative title=\"Italic\" aria-label=\"Italic\">\n <ndw-icon>format_italic</ndw-icon>\n </button>\n </md-italic>\n }\n @if (quote()) {\n <md-quote>\n <button ndwButton tertiary alternative title=\"Quote\" aria-label=\"Quote\">\n <ndw-icon>format_quote</ndw-icon>\n </button>\n </md-quote>\n }\n @if (unorderedList()) {\n <md-unordered-list>\n <button ndwButton tertiary alternative title=\"Unordered list\" aria-label=\"Unordered list\">\n <ndw-icon>format_list_bulleted</ndw-icon>\n </button>\n </md-unordered-list>\n }\n @if (orderedList()) {\n <md-ordered-list>\n <button ndwButton tertiary alternative title=\"Ordered list\" aria-label=\"Ordered list\">\n <ndw-icon>format_list_numbered</ndw-icon>\n </button>\n </md-ordered-list>\n }\n @if (taskList()) {\n <md-task-list>\n <button ndwButton tertiary alternative title=\"Task list\" aria-label=\"Task list\">\n <ndw-icon>checklist</ndw-icon>\n </button>\n </md-task-list>\n }\n</markdown-toolbar>\n\n<textarea\n [id]=\"uuid()\"\n class=\"markdown-editor\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n ndwAutoGrow\n></textarea>\n", styles: [":host{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-shadow:0 0 0 1px var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);outline:none;background:var(--ndw-color-white);display:flex;flex-direction:column}:host.error,:host.ng-invalid{border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500)}:host.success{border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500)}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled .markdown-editor,:host.readonly .markdown-editor{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled markdown-toolbar>*,:host.readonly markdown-toolbar>*{pointer-events:none}:host .markdown-editor{padding-left:var(--ndw-spacing-md);padding-right:var(--ndw-spacing-md);resize:none;border:none;overflow-y:hidden}:host .markdown-editor:focus{outline:none;border:none}:host.focus{border:var(--ndw-border-size-sm) solid var(--ndw-color-info-500);box-shadow:0 0 0 var(--ndw-border-size-sm) var(--ndw-color-info-500)}:host markdown-toolbar{display:flex;padding:var(--ndw-spacing-2xs);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);margin-bottom:var(--ndw-spacing-sm)}\n"] }]
|
|
1965
|
+
}], ctorParameters: () => [] });
|
|
1966
|
+
|
|
1967
|
+
class RadioButtonComponent {
|
|
1968
|
+
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
1969
|
+
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1970
|
+
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1971
|
+
success = input(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
1972
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1973
|
+
value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
1974
|
+
name = signal(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
1975
|
+
uuid = crypto.randomUUID();
|
|
1976
|
+
onInputChange(event) {
|
|
1977
|
+
const input = event.target;
|
|
1978
|
+
this.checked.set(input.checked);
|
|
1979
|
+
}
|
|
1980
|
+
writeValue(value) {
|
|
1981
|
+
this.checked.set(value);
|
|
1982
|
+
}
|
|
1983
|
+
registerOnChange(fn) {
|
|
1984
|
+
this.checked.subscribe(fn);
|
|
1985
|
+
}
|
|
1986
|
+
registerOnTouched() {
|
|
1987
|
+
// noop
|
|
1988
|
+
}
|
|
1989
|
+
setDisabledState(isDisabled) {
|
|
1990
|
+
this.disabled.set(isDisabled);
|
|
1991
|
+
}
|
|
1992
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1993
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: RadioButtonComponent, isStandalone: true, selector: "ndw-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", value: "valueChange" }, host: { properties: { "class.checked": "checked()", "class.disabled": "disabled()" } }, providers: [
|
|
1994
|
+
{
|
|
1995
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1996
|
+
useExisting: RadioButtonComponent,
|
|
1997
|
+
multi: true,
|
|
1998
|
+
},
|
|
1999
|
+
], ngImport: i0, template: "<input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"'radio-button-' + uuid\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (change)=\"onInputChange($event)\"\n/>\n<label tabindex=\"-1\" id=\"radio-button-label-{{ uuid }}\" [for]=\"'radio-button-' + uuid\">\n <div class=\"radio-button\" aria-hidden=\"true\" [ngClass]=\"{ error: error(), success: success() }\">\n @if (checked()) {\n <span class=\"check\"></span>\n }\n </div>\n <ng-content />\n</label>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", ".radio-button{border-radius:50%}.radio-button .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) .radio-button{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) .radio-button{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2000
|
+
}
|
|
2001
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
2002
|
+
type: Component,
|
|
2003
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2004
|
+
'[class.checked]': 'checked()',
|
|
2005
|
+
'[class.disabled]': 'disabled()',
|
|
2006
|
+
}, imports: [NgClass], providers: [
|
|
2007
|
+
{
|
|
2008
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2009
|
+
useExisting: RadioButtonComponent,
|
|
2010
|
+
multi: true,
|
|
2011
|
+
},
|
|
2012
|
+
], selector: 'ndw-radio-button', template: "<input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"'radio-button-' + uuid\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (change)=\"onInputChange($event)\"\n/>\n<label tabindex=\"-1\" id=\"radio-button-label-{{ uuid }}\" [for]=\"'radio-button-' + uuid\">\n <div class=\"radio-button\" aria-hidden=\"true\" [ngClass]=\"{ error: error(), success: success() }\">\n @if (checked()) {\n <span class=\"check\"></span>\n }\n </div>\n <ng-content />\n</label>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-secondary-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", ".radio-button{border-radius:50%}.radio-button .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) .radio-button{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) .radio-button{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"] }]
|
|
2013
|
+
}] });
|
|
2014
|
+
|
|
2015
|
+
class RadioGroupComponent {
|
|
2016
|
+
radioButtons = contentChildren(RadioButtonComponent, ...(ngDevMode ? [{ debugName: "radioButtons" }] : []));
|
|
2017
|
+
uuid = crypto.randomUUID();
|
|
2018
|
+
onChange = noop;
|
|
2019
|
+
ngAfterContentInit() {
|
|
2020
|
+
const radioButtons = [...this.radioButtons()];
|
|
2021
|
+
setRadioItemsName(radioButtons, this.uuid);
|
|
2022
|
+
checkRadioItems(radioButtons, this.onChange);
|
|
2023
|
+
}
|
|
2024
|
+
writeValue(value) {
|
|
2025
|
+
this.radioButtons().forEach((radio) => {
|
|
2026
|
+
radio.checked.set(radio.value() === value);
|
|
2027
|
+
});
|
|
2028
|
+
}
|
|
2029
|
+
registerOnChange(fn) {
|
|
2030
|
+
this.onChange = fn;
|
|
2031
|
+
}
|
|
2032
|
+
registerOnTouched() {
|
|
2033
|
+
// noop
|
|
2034
|
+
}
|
|
2035
|
+
setDisabledState(isDisabled) {
|
|
2036
|
+
this.radioButtons().forEach((radio) => radio.disabled.set(isDisabled));
|
|
2037
|
+
}
|
|
2038
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2039
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: RadioGroupComponent, isStandalone: true, selector: "ndw-radio-group", host: { attributes: { "role": "radiogroup" } }, providers: [
|
|
2040
|
+
{
|
|
2041
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2042
|
+
useExisting: RadioGroupComponent,
|
|
2043
|
+
multi: true,
|
|
2044
|
+
},
|
|
2045
|
+
], queries: [{ propertyName: "radioButtons", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2046
|
+
}
|
|
2047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
2048
|
+
type: Component,
|
|
2049
|
+
args: [{ host: {
|
|
2050
|
+
role: 'radiogroup',
|
|
2051
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2052
|
+
{
|
|
2053
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2054
|
+
useExisting: RadioGroupComponent,
|
|
2055
|
+
multi: true,
|
|
2056
|
+
},
|
|
2057
|
+
], selector: 'ndw-radio-group', template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"] }]
|
|
2058
|
+
}] });
|
|
2059
|
+
|
|
1986
2060
|
class PillComponent extends CorePillComponent {
|
|
1987
2061
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PillComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1988
2062
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: PillComponent, isStandalone: true, selector: "ndw-pill", host: { classAttribute: "ndw-paragraph-md" }, usesInheritance: true, ngImport: i0, template: "<div>\n <ng-content />\n</div>\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);font-weight:var(--pill-font-weight);padding:var(--pill-padding-vertical) var(--pill-padding-horizontal);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--pill-green-color);background-color:var(--pill-green-background-color)}:host.gray{color:var(--pill-gray-color);background-color:var(--pill-gray-background-color)}:host.blue{color:var(--pill-blue-color);background-color:var(--pill-blue-background-color)}:host.purple{color:var(--pill-purple-color);background-color:var(--pill-purple-background-color)}:host.yellow{color:var(--pill-yellow-color);background-color:var(--pill-yellow-background-color)}:host.red{color:var(--pill-red-color);background-color:var(--pill-red-background-color)}:host{--pill-border-radius: var(--ndw-border-radius-sm);--pill-padding-vertical: var(--ndw-spacing-3xs);--pill-padding-horizontal: var(--ndw-spacing-2xs);--pill-font-weight: var(--ndw-font-weight-regular);--pill-green-color: var(--ndw-color-positive-600);--pill-green-background-color: var(--ndw-color-positive-100);--pill-gray-color: var(--ndw-color-grey-600);--pill-gray-background-color: var(--ndw-color-grey-200);--pill-blue-color: var(--ndw-color-info-500);--pill-blue-background-color: var(--ndw-color-info-100);--pill-purple-color: var(--ndw-color-alternative-500);--pill-purple-background-color: var(--ndw-color-alternative-100);--pill-yellow-color: var(--ndw-color-grey-600);--pill-yellow-background-color: var(--ndw-color-warning-100);--pill-red-color: var(--ndw-color-critical-500);--pill-red-background-color: var(--ndw-color-critical-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
@@ -2533,11 +2607,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
2533
2607
|
class FavoriteComponent {
|
|
2534
2608
|
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
2535
2609
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FavoriteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2536
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: FavoriteComponent, isStandalone: true, selector: "ndw-favorite", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<core-favorite [(checked)]=\"checked\">\n <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</core-favorite>\n", styles: [".input-container:has(>[ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has(>[ndwInput]),.input-container:has(>ndw-datepicker>[ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;gap:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has([ndwInput]:hover),.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]):has([ndwInput]:active),.input-container:has(>[ndwInput]):has([ndwInput]:focus),.input-container:has(>[ndwInput]):has([ndwInput]:focus-visible),.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:active),.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:focus),.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has(>[ndwInput])[success],.input-container:has(>ndw-datepicker>[ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has(>[ndwInput])[success]:hover,.input-container:has(>ndw-datepicker>[ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[success]:active,.input-container:has(>[ndwInput])[success]:focus,.input-container:has(>[ndwInput])[success]:focus-visible,.input-container:has(>ndw-datepicker>[ndwInput])[success]:active,.input-container:has(>ndw-datepicker>[ndwInput])[success]:focus,.input-container:has(>ndw-datepicker>[ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[error],.input-container:has(>ndw-datepicker>[ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>[ndwInput])[error] [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has(>[ndwInput])[error]:hover,.input-container:has(>ndw-datepicker>[ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[error]:active,.input-container:has(>[ndwInput])[error]:focus,.input-container:has(>[ndwInput])[error]:focus-visible,.input-container:has(>ndw-datepicker>[ndwInput])[error]:active,.input-container:has(>ndw-datepicker>[ndwInput])[error]:focus,.input-container:has(>ndw-datepicker>[ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[disabled],.input-container:has(>[ndwInput])[readonly],.input-container:has(>[ndwInput]):has([ndwInput]:disabled),.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])),.input-container:has(>ndw-datepicker>[ndwInput])[disabled],.input-container:has(>ndw-datepicker>[ndwInput])[readonly],.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:disabled),.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has(>[ndwInput])[disabled] [ndwInput],.input-container:has(>[ndwInput])[readonly] [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput])[disabled] [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput])[readonly] [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}.input-container:has(>[ndwInput])[disabled] ndw-icon,.input-container:has(>[ndwInput])[readonly] ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon,.input-container:has(>ndw-datepicker>[ndwInput])[disabled] ndw-icon,.input-container:has(>ndw-datepicker>[ndwInput])[readonly] ndw-icon,.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}.input-container:has(>[ndwInput]):has(>ndw-input-icon),.input-container:has(>ndw-datepicker>[ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has(>ndw-picker-button),.input-container:has(>ndw-datepicker>[ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput])>*:has(~[ndwInput]),.input-container:has(>ndw-datepicker>[ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]) *+[ndwInput],.input-container:has(>ndw-datepicker>[ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has(>[ndwInput]) [ndwInput]:has(+*),.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]:is(textarea),.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has(>[ndwInput]) select[ndwInput]:has(+*),.input-container:has(>ndw-datepicker>[ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has(>[ndwInput]) [ndwInput]:hover,.input-container:has(>[ndwInput]) [ndwInput]:active,.input-container:has(>[ndwInput]) [ndwInput]:focus,.input-container:has(>[ndwInput]) [ndwInput]:focus-visible,.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:hover,.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:active,.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:focus,.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has(>[ndwInput]):has(textarea),.input-container:has(>ndw-datepicker>[ndwInput]):has(textarea){padding-inline:0}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host:hover,:host:has(core-favorite.checked){color:var(--ndw-color-critical-500);transition:color .15s ease-in-out}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: CoreFavoriteComponent, selector: "core-favorite", inputs: ["uuid", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2610
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: FavoriteComponent, isStandalone: true, selector: "ndw-favorite", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<core-favorite [(checked)]=\"checked\">\n <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</core-favorite>\n", styles: [".input-container:has([ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has([ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;gap:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has([ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[success]:active,.input-container:has([ndwInput])[success]:focus,.input-container:has([ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has([ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has([ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has([ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[error]:active,.input-container:has([ndwInput])[error]:focus,.input-container:has([ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has([ndwInput])[disabled],.input-container:has([ndwInput])[readonly],.input-container:has([ndwInput]):has([ndwInput]:disabled),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has([ndwInput])[disabled] [ndwInput],.input-container:has([ndwInput])[readonly] [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}.input-container:has([ndwInput])[disabled] ndw-icon,.input-container:has([ndwInput])[readonly] ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}.input-container:has([ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has([ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has([ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has([ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has([ndwInput]) [ndwInput]:hover,.input-container:has([ndwInput]) [ndwInput]:active,.input-container:has([ndwInput]) [ndwInput]:focus,.input-container:has([ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has([ndwInput]):has(textarea){padding-inline:0}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host:hover,:host:has(core-favorite.checked){color:var(--ndw-color-critical-500);transition:color .15s ease-in-out}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: CoreFavoriteComponent, selector: "core-favorite", inputs: ["uuid", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2537
2611
|
}
|
|
2538
2612
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FavoriteComponent, decorators: [{
|
|
2539
2613
|
type: Component,
|
|
2540
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, CoreFavoriteComponent], selector: 'ndw-favorite', template: "<core-favorite [(checked)]=\"checked\">\n <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</core-favorite>\n", styles: [".input-container:has(>[ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has(>[ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has(>[ndwInput]),.input-container:has(>ndw-datepicker>[ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;gap:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has([ndwInput]:hover),.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]):has([ndwInput]:active),.input-container:has(>[ndwInput]):has([ndwInput]:focus),.input-container:has(>[ndwInput]):has([ndwInput]:focus-visible),.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:active),.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:focus),.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has(>[ndwInput])[success],.input-container:has(>ndw-datepicker>[ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has(>[ndwInput])[success]:hover,.input-container:has(>ndw-datepicker>[ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[success]:active,.input-container:has(>[ndwInput])[success]:focus,.input-container:has(>[ndwInput])[success]:focus-visible,.input-container:has(>ndw-datepicker>[ndwInput])[success]:active,.input-container:has(>ndw-datepicker>[ndwInput])[success]:focus,.input-container:has(>ndw-datepicker>[ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[error],.input-container:has(>ndw-datepicker>[ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(>[ndwInput])[error] [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has(>[ndwInput])[error]:hover,.input-container:has(>ndw-datepicker>[ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has(>[ndwInput])[error]:active,.input-container:has(>[ndwInput])[error]:focus,.input-container:has(>[ndwInput])[error]:focus-visible,.input-container:has(>ndw-datepicker>[ndwInput])[error]:active,.input-container:has(>ndw-datepicker>[ndwInput])[error]:focus,.input-container:has(>ndw-datepicker>[ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has(>[ndwInput])[disabled],.input-container:has(>[ndwInput])[readonly],.input-container:has(>[ndwInput]):has([ndwInput]:disabled),.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])),.input-container:has(>ndw-datepicker>[ndwInput])[disabled],.input-container:has(>ndw-datepicker>[ndwInput])[readonly],.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:disabled),.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has(>[ndwInput])[disabled] [ndwInput],.input-container:has(>[ndwInput])[readonly] [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput])[disabled] [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput])[readonly] [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}.input-container:has(>[ndwInput])[disabled] ndw-icon,.input-container:has(>[ndwInput])[readonly] ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has(>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon,.input-container:has(>ndw-datepicker>[ndwInput])[disabled] ndw-icon,.input-container:has(>ndw-datepicker>[ndwInput])[readonly] ndw-icon,.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has(>ndw-datepicker>[ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}.input-container:has(>[ndwInput]):has(>ndw-input-icon),.input-container:has(>ndw-datepicker>[ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput]):has(>ndw-picker-button),.input-container:has(>ndw-datepicker>[ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has(>[ndwInput])>*:has(~[ndwInput]),.input-container:has(>ndw-datepicker>[ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has(>[ndwInput]) *+[ndwInput],.input-container:has(>ndw-datepicker>[ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has(>[ndwInput]) [ndwInput]:has(+*),.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput]:is(textarea),.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has(>[ndwInput]) select[ndwInput]:has(+*),.input-container:has(>ndw-datepicker>[ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has(>[ndwInput]) [ndwInput],.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has(>[ndwInput]) [ndwInput]:hover,.input-container:has(>[ndwInput]) [ndwInput]:active,.input-container:has(>[ndwInput]) [ndwInput]:focus,.input-container:has(>[ndwInput]) [ndwInput]:focus-visible,.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:hover,.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:active,.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:focus,.input-container:has(>ndw-datepicker>[ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has(>[ndwInput]):has(textarea),.input-container:has(>ndw-datepicker>[ndwInput]):has(textarea){padding-inline:0}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host:hover,:host:has(core-favorite.checked){color:var(--ndw-color-critical-500);transition:color .15s ease-in-out}\n"] }]
|
|
2614
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, CoreFavoriteComponent], selector: 'ndw-favorite', template: "<core-favorite [(checked)]=\"checked\">\n <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</core-favorite>\n", styles: [".input-container:has([ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has([ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;gap:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has([ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[success]:active,.input-container:has([ndwInput])[success]:focus,.input-container:has([ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has([ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has([ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has([ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[error]:active,.input-container:has([ndwInput])[error]:focus,.input-container:has([ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}.input-container:has([ndwInput])[disabled],.input-container:has([ndwInput])[readonly],.input-container:has([ndwInput]):has([ndwInput]:disabled),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has([ndwInput])[disabled] [ndwInput],.input-container:has([ndwInput])[readonly] [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}.input-container:has([ndwInput])[disabled] ndw-icon,.input-container:has([ndwInput])[readonly] ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}.input-container:has([ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has([ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has([ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has([ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has([ndwInput]) [ndwInput]:hover,.input-container:has([ndwInput]) [ndwInput]:active,.input-container:has([ndwInput]) [ndwInput]:focus,.input-container:has([ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has([ndwInput]):has(textarea){padding-inline:0}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out;width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-secondary-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100)}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500)}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host:hover,:host:has(core-favorite.checked){color:var(--ndw-color-critical-500);transition:color .15s ease-in-out}\n"] }]
|
|
2541
2615
|
}] });
|
|
2542
2616
|
|
|
2543
2617
|
class HoverableListItemComponent {
|
|
@@ -3247,6 +3321,11 @@ class MultiSelectComponent {
|
|
|
3247
3321
|
lastCheckedElementId = model(...(ngDevMode ? [undefined, { debugName: "lastCheckedElementId" }] : []));
|
|
3248
3322
|
searchInputValue = model('', ...(ngDevMode ? [{ debugName: "searchInputValue" }] : []));
|
|
3249
3323
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
3324
|
+
viewItems = computed(() => {
|
|
3325
|
+
const isOpen = this.isOpen();
|
|
3326
|
+
const items = untracked(this.dataSource);
|
|
3327
|
+
return isOpen ? items.slice().sort((a, b) => Number(b.value) - Number(a.value)) : items;
|
|
3328
|
+
}, ...(ngDevMode ? [{ debugName: "viewItems" }] : []));
|
|
3250
3329
|
selectAmount = computed(() => this.dataSource().filter((checkbox) => checkbox.value).length, ...(ngDevMode ? [{ debugName: "selectAmount" }] : []));
|
|
3251
3330
|
noSearchResults = computed(() => this.dataSource().filter((checkbox) => checkbox.label.toLowerCase().includes(this.searchInputValue().toLowerCase())).length === 0, ...(ngDevMode ? [{ debugName: "noSearchResults" }] : []));
|
|
3252
3331
|
filterSearch(value) {
|
|
@@ -3272,9 +3351,6 @@ class MultiSelectComponent {
|
|
|
3272
3351
|
isOpenChanged(isOpen) {
|
|
3273
3352
|
this.isOpen.set(isOpen);
|
|
3274
3353
|
if (isOpen) {
|
|
3275
|
-
this.dataSource.set(this.dataSource()
|
|
3276
|
-
.slice()
|
|
3277
|
-
.sort((a, b) => Number(b.value) - Number(a.value)));
|
|
3278
3354
|
this.searchInputValue.set('');
|
|
3279
3355
|
this.determineLastCheckedElement();
|
|
3280
3356
|
}
|
|
@@ -3290,7 +3366,7 @@ class MultiSelectComponent {
|
|
|
3290
3366
|
}
|
|
3291
3367
|
}
|
|
3292
3368
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3293
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAmountHidden: { classPropertyName: "selectAmountHidden", publicName: "selectAmountHidden", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, lastCheckedElementId: { classPropertyName: "lastCheckedElementId", publicName: "lastCheckedElementId", isSignal: true, isRequired: false, transformFunction: null }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", lastCheckedElementId: "lastCheckedElementIdChange", searchInputValue: "searchInputValueChange" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ndw-dropdown\n prefixIcon=\"filter_alt\"\n [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n (tagClicked)=\"toggleSelectAll(false)\"\n (isOpenChange)=\"isOpenChanged($event)\"\n [buttonText]=\"buttonText()\"\n [disabled]=\"disabled()\"\n [chevron]=\"chevron()\"\n [prefixIcon]=\"prefixIcon()\"\n>\n <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n <input\n ndwInput\n type=\"search\"\n [value]=\"searchInputValue()\"\n (input)=\"searchInputChanged($event)\"\n [placeholder]=\"searchPlaceholder()\"\n />\n </ndw-form-field>\n @if (noSearchResults()) {\n <div class=\"no-search-results\">\n <ndw-icon>sentiment_dissatisfied</ndw-icon>\n {{ noResultText() }}\n </div>\n } @else {\n <ndw-list class=\"multi-select-container\">\n @for (checkbox of
|
|
3369
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAmountHidden: { classPropertyName: "selectAmountHidden", publicName: "selectAmountHidden", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, lastCheckedElementId: { classPropertyName: "lastCheckedElementId", publicName: "lastCheckedElementId", isSignal: true, isRequired: false, transformFunction: null }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", lastCheckedElementId: "lastCheckedElementIdChange", searchInputValue: "searchInputValueChange" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ndw-dropdown\n prefixIcon=\"filter_alt\"\n [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n (tagClicked)=\"toggleSelectAll(false)\"\n (isOpenChange)=\"isOpenChanged($event)\"\n [buttonText]=\"buttonText()\"\n [disabled]=\"disabled()\"\n [chevron]=\"chevron()\"\n [prefixIcon]=\"prefixIcon()\"\n>\n <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n <input\n ndwInput\n type=\"search\"\n [value]=\"searchInputValue()\"\n (input)=\"searchInputChanged($event)\"\n [placeholder]=\"searchPlaceholder()\"\n />\n </ndw-form-field>\n @if (noSearchResults()) {\n <div class=\"no-search-results\">\n <ndw-icon>sentiment_dissatisfied</ndw-icon>\n {{ noResultText() }}\n </div>\n } @else {\n <ndw-list class=\"multi-select-container\">\n @for (checkbox of viewItems(); track checkbox.id) {\n @if (filterSearch(checkbox.label)) {\n <ndw-list-item\n [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n [checkable]=\"true\"\n [checked]=\"checkbox.value\"\n [prefixIcon]=\"checkbox.icon\"\n [subtitle]=\"checkbox.label\"\n (checkedChange)=\"checkboxChanged(checkbox.id)\"\n >\n @if (checkbox.image && isOpen()) {\n <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n }\n </ndw-list-item>\n }\n }\n </ndw-list>\n }\n <div class=\"ndw-dialog-footer\">\n @if (selectAmount() === dataSource().length) {\n <button ndwLink (click)=\"toggleSelectAll(false)\">\n {{ selectAllText().deselect }}\n </button>\n } @else {\n <button ndwLink (click)=\"toggleSelectAll(true)\">\n {{ selectAllText().select }}\n </button>\n }\n <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n Geselecteerd: <strong>{{ selectAmount() }}</strong>\n </div>\n </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "ndw-dropdown", inputs: ["disabled", "chevron", "buttonText", "prefixIcon", "selectAmount"], outputs: ["tagClicked", "isOpenChange"] }, { kind: "component", type: FormFieldComponent, selector: "ndw-form-field", inputs: ["label", "suffixAriaLabel", "hideLabel", "disabled", "error", "success", "info", "tooltip"], outputs: ["clearButtonClicked"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: ListComponent, selector: "ndw-list", inputs: ["elevated"] }, { kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "buttonIcon", "buttonLabel", "checkable", "checkType", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3294
3370
|
}
|
|
3295
3371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
3296
3372
|
type: Component,
|
|
@@ -3301,7 +3377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
3301
3377
|
IconComponent,
|
|
3302
3378
|
ListComponent,
|
|
3303
3379
|
ListItemComponent,
|
|
3304
|
-
], selector: 'ndw-multi-select', template: "<ndw-dropdown\n prefixIcon=\"filter_alt\"\n [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n (tagClicked)=\"toggleSelectAll(false)\"\n (isOpenChange)=\"isOpenChanged($event)\"\n [buttonText]=\"buttonText()\"\n [disabled]=\"disabled()\"\n [chevron]=\"chevron()\"\n [prefixIcon]=\"prefixIcon()\"\n>\n <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n <input\n ndwInput\n type=\"search\"\n [value]=\"searchInputValue()\"\n (input)=\"searchInputChanged($event)\"\n [placeholder]=\"searchPlaceholder()\"\n />\n </ndw-form-field>\n @if (noSearchResults()) {\n <div class=\"no-search-results\">\n <ndw-icon>sentiment_dissatisfied</ndw-icon>\n {{ noResultText() }}\n </div>\n } @else {\n <ndw-list class=\"multi-select-container\">\n @for (checkbox of
|
|
3380
|
+
], selector: 'ndw-multi-select', template: "<ndw-dropdown\n prefixIcon=\"filter_alt\"\n [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n (tagClicked)=\"toggleSelectAll(false)\"\n (isOpenChange)=\"isOpenChanged($event)\"\n [buttonText]=\"buttonText()\"\n [disabled]=\"disabled()\"\n [chevron]=\"chevron()\"\n [prefixIcon]=\"prefixIcon()\"\n>\n <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n <input\n ndwInput\n type=\"search\"\n [value]=\"searchInputValue()\"\n (input)=\"searchInputChanged($event)\"\n [placeholder]=\"searchPlaceholder()\"\n />\n </ndw-form-field>\n @if (noSearchResults()) {\n <div class=\"no-search-results\">\n <ndw-icon>sentiment_dissatisfied</ndw-icon>\n {{ noResultText() }}\n </div>\n } @else {\n <ndw-list class=\"multi-select-container\">\n @for (checkbox of viewItems(); track checkbox.id) {\n @if (filterSearch(checkbox.label)) {\n <ndw-list-item\n [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n [checkable]=\"true\"\n [checked]=\"checkbox.value\"\n [prefixIcon]=\"checkbox.icon\"\n [subtitle]=\"checkbox.label\"\n (checkedChange)=\"checkboxChanged(checkbox.id)\"\n >\n @if (checkbox.image && isOpen()) {\n <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n }\n </ndw-list-item>\n }\n }\n </ndw-list>\n }\n <div class=\"ndw-dialog-footer\">\n @if (selectAmount() === dataSource().length) {\n <button ndwLink (click)=\"toggleSelectAll(false)\">\n {{ selectAllText().deselect }}\n </button>\n } @else {\n <button ndwLink (click)=\"toggleSelectAll(true)\">\n {{ selectAllText().select }}\n </button>\n }\n <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n Geselecteerd: <strong>{{ selectAmount() }}</strong>\n </div>\n </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"] }]
|
|
3305
3381
|
}] });
|
|
3306
3382
|
|
|
3307
3383
|
class RouterBreadcrumbsComponent extends CoreRouterBreadcrumbsComponent {
|
|
@@ -3592,7 +3668,9 @@ class SwitcherComponent {
|
|
|
3592
3668
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
3593
3669
|
selectedValue = model(undefined, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
|
|
3594
3670
|
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3671
|
+
vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : []));
|
|
3595
3672
|
selectionChange = output();
|
|
3673
|
+
sliderHeight = '';
|
|
3596
3674
|
sliderWidth = '';
|
|
3597
3675
|
sliderPosition = '';
|
|
3598
3676
|
onChange = (_value) => {
|
|
@@ -3674,7 +3752,8 @@ class SwitcherComponent {
|
|
|
3674
3752
|
if (selectedIndex >= 0) {
|
|
3675
3753
|
// Use CSS calc() for precise positioning with design system variables
|
|
3676
3754
|
// Width: (100% - total padding) divided by number of options
|
|
3677
|
-
this.sliderWidth = `calc((100% - var(--ndw-spacing-xs)) / ${options.length})`;
|
|
3755
|
+
this.sliderWidth = `calc((100% - var(--ndw-spacing-xs)) / ${this.vertical() ? 1 : options.length})`;
|
|
3756
|
+
this.sliderHeight = `calc((100% - var(--ndw-spacing-xs)) / ${this.vertical() ? options.length : 1})`;
|
|
3678
3757
|
// Position: left padding + (selected index * width of each option)
|
|
3679
3758
|
this.sliderPosition = `calc(var(--ndw-spacing-2xs) + (${selectedIndex} * calc((100% - var(--ndw-spacing-xs)) / ${options.length})))`;
|
|
3680
3759
|
}
|
|
@@ -3687,17 +3766,17 @@ class SwitcherComponent {
|
|
|
3687
3766
|
return `switcher-${this.#componentId}`;
|
|
3688
3767
|
}
|
|
3689
3768
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3690
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SwitcherComponent, isStandalone: true, selector: "ndw-switcher", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", disabled: "disabledChange", selectionChange: "selectionChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "class.disabled": "disabled()" } }, providers: [
|
|
3769
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SwitcherComponent, isStandalone: true, selector: "ndw-switcher", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", disabled: "disabledChange", selectionChange: "selectionChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "class.disabled": "disabled()", "class.vertical": "vertical()" } }, providers: [
|
|
3691
3770
|
{
|
|
3692
3771
|
provide: NG_VALUE_ACCESSOR,
|
|
3693
3772
|
useExisting: forwardRef(() => SwitcherComponent),
|
|
3694
3773
|
multi: true,
|
|
3695
3774
|
},
|
|
3696
|
-
], ngImport: i0, template: "<div\n class=\"switch-slider\"\n [style.width]=\"sliderWidth\"\n [style.left]=\"sliderPosition\"\n [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n <label\n class=\"switch-option\"\n [class.active]=\"selectedValue() === option.value\"\n [class.disabled]=\"option.disabled || disabled()\"\n [attr.for]=\"generateId(i)\"\n >\n <input\n type=\"radio\"\n [id]=\"generateId(i)\"\n [name]=\"componentName\"\n [value]=\"option.value\"\n [checked]=\"selectedValue() === option.value\"\n [disabled]=\"option.disabled || disabled()\"\n (change)=\"selectOption(option.value)\"\n (keydown)=\"onKeyDown($event, i)\"\n [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n class=\"switch-radio\"\n />\n @if (option.icon) {\n <ndw-icon>{{ option.icon }}</ndw-icon>\n }\n <
|
|
3775
|
+
], ngImport: i0, template: "<div\n class=\"switch-slider\"\n [style.width]=\"sliderWidth\"\n [style.height]=\"sliderHeight\"\n [style.left]=\"vertical() ? null : sliderPosition\"\n [style.top]=\"vertical() ? sliderPosition : null\"\n [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n <label\n class=\"switch-option\"\n [class.active]=\"selectedValue() === option.value\"\n [class.disabled]=\"option.disabled || disabled()\"\n [attr.for]=\"generateId(i)\"\n >\n <input\n type=\"radio\"\n [id]=\"generateId(i)\"\n [name]=\"componentName\"\n [value]=\"option.value\"\n [checked]=\"selectedValue() === option.value\"\n [disabled]=\"option.disabled || disabled()\"\n (change)=\"selectOption(option.value)\"\n (keydown)=\"onKeyDown($event, i)\"\n [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n class=\"switch-radio\"\n />\n @if (option.icon) {\n <ndw-icon>{{ option.icon }}</ndw-icon>\n }\n <div class=\"switch-label\">{{ option.label }}</div>\n\n @if (option.disabled) {\n <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n }\n </label>\n}\n", styles: [":host{width:100%;position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}:host.vertical{flex-direction:column}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left var(--ndw-animation-speed-fast) ease,top var(--ndw-animation-speed-fast) ease,width var(--ndw-animation-speed-fast) ease;z-index:1}.switch-option{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color var(--ndw-animation-speed-fast) ease;height:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-xl))}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900)}.switch-option.active .switch-label{color:var(--ndw-color-text)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{display:flex;flex:1;justify-content:center}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3697
3776
|
}
|
|
3698
3777
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SwitcherComponent, decorators: [{
|
|
3699
3778
|
type: Component,
|
|
3700
|
-
args: [{ selector: 'ndw-switcher', imports: [IconComponent], providers: [
|
|
3779
|
+
args: [{ selector: 'ndw-switcher', imports: [IconComponent, CommonModule], providers: [
|
|
3701
3780
|
{
|
|
3702
3781
|
provide: NG_VALUE_ACCESSOR,
|
|
3703
3782
|
useExisting: forwardRef(() => SwitcherComponent),
|
|
@@ -3706,7 +3785,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
3706
3785
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3707
3786
|
role: 'radiogroup',
|
|
3708
3787
|
'[class.disabled]': 'disabled()',
|
|
3709
|
-
|
|
3788
|
+
'[class.vertical]': 'vertical()',
|
|
3789
|
+
}, template: "<div\n class=\"switch-slider\"\n [style.width]=\"sliderWidth\"\n [style.height]=\"sliderHeight\"\n [style.left]=\"vertical() ? null : sliderPosition\"\n [style.top]=\"vertical() ? sliderPosition : null\"\n [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n <label\n class=\"switch-option\"\n [class.active]=\"selectedValue() === option.value\"\n [class.disabled]=\"option.disabled || disabled()\"\n [attr.for]=\"generateId(i)\"\n >\n <input\n type=\"radio\"\n [id]=\"generateId(i)\"\n [name]=\"componentName\"\n [value]=\"option.value\"\n [checked]=\"selectedValue() === option.value\"\n [disabled]=\"option.disabled || disabled()\"\n (change)=\"selectOption(option.value)\"\n (keydown)=\"onKeyDown($event, i)\"\n [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n class=\"switch-radio\"\n />\n @if (option.icon) {\n <ndw-icon>{{ option.icon }}</ndw-icon>\n }\n <div class=\"switch-label\">{{ option.label }}</div>\n\n @if (option.disabled) {\n <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n }\n </label>\n}\n", styles: [":host{width:100%;position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}:host.vertical{flex-direction:column}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left var(--ndw-animation-speed-fast) ease,top var(--ndw-animation-speed-fast) ease,width var(--ndw-animation-speed-fast) ease;z-index:1}.switch-option{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color var(--ndw-animation-speed-fast) ease;height:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-xl))}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900)}.switch-option.active .switch-label{color:var(--ndw-color-text)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{display:flex;flex:1;justify-content:center}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"] }]
|
|
3710
3790
|
}] });
|
|
3711
3791
|
|
|
3712
3792
|
class TabComponent {
|
|
@@ -3739,15 +3819,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
3739
3819
|
}] });
|
|
3740
3820
|
|
|
3741
3821
|
class TabGroupComponent {
|
|
3822
|
+
_injector = inject(Injector);
|
|
3823
|
+
_destroyRef = inject(DestroyRef);
|
|
3742
3824
|
_tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "_tabs" }] : []));
|
|
3743
3825
|
_tabButtons = viewChildren('tabButton', ...(ngDevMode ? [{ debugName: "_tabButtons" }] : []));
|
|
3826
|
+
_tabGroupContainer = viewChild('tabGroupContainer', ...(ngDevMode ? [{ debugName: "_tabGroupContainer" }] : []));
|
|
3827
|
+
hasPadding = input(false, ...(ngDevMode ? [{ debugName: "hasPadding" }] : []));
|
|
3828
|
+
activeTabId = model(...(ngDevMode ? [undefined, { debugName: "activeTabId" }] : []));
|
|
3829
|
+
inlinePadding = input(0, ...(ngDevMode ? [{ debugName: "inlinePadding" }] : []));
|
|
3830
|
+
// Scroll state signals
|
|
3831
|
+
_scrollLeft = signal(0, ...(ngDevMode ? [{ debugName: "_scrollLeft" }] : []));
|
|
3832
|
+
_scrollWidth = signal(0, ...(ngDevMode ? [{ debugName: "_scrollWidth" }] : []));
|
|
3833
|
+
_clientWidth = signal(0, ...(ngDevMode ? [{ debugName: "_clientWidth" }] : []));
|
|
3744
3834
|
tabs = computed(() => this._tabs().map((tab) => {
|
|
3745
3835
|
tab.active = tab.id() === this.activeTabId();
|
|
3746
3836
|
return tab;
|
|
3747
3837
|
}), ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
3838
|
+
canScrollLeft = computed(() => this._scrollLeft() > 0, ...(ngDevMode ? [{ debugName: "canScrollLeft" }] : []));
|
|
3839
|
+
canScrollRight = computed(() => this._scrollLeft() < this._scrollWidth() - this._clientWidth() - 1, ...(ngDevMode ? [{ debugName: "canScrollRight" }] : []));
|
|
3840
|
+
_resizeObserver;
|
|
3751
3841
|
constructor() {
|
|
3752
3842
|
effect(() => {
|
|
3753
3843
|
const tabs = this._tabs();
|
|
@@ -3766,6 +3856,48 @@ class TabGroupComponent {
|
|
|
3766
3856
|
tab.active = tab.id() === id;
|
|
3767
3857
|
});
|
|
3768
3858
|
});
|
|
3859
|
+
// Setup scroll detection after render
|
|
3860
|
+
afterNextRender(() => {
|
|
3861
|
+
this._setupScrollDetection();
|
|
3862
|
+
}, { injector: this._injector });
|
|
3863
|
+
}
|
|
3864
|
+
ngOnDestroy() {
|
|
3865
|
+
this._resizeObserver?.disconnect();
|
|
3866
|
+
}
|
|
3867
|
+
_setupScrollDetection() {
|
|
3868
|
+
const container = this._tabGroupContainer()?.nativeElement;
|
|
3869
|
+
if (!container)
|
|
3870
|
+
return;
|
|
3871
|
+
this._updateScrollState(container);
|
|
3872
|
+
// Listen to scroll events
|
|
3873
|
+
fromEvent(container, 'scroll')
|
|
3874
|
+
.pipe(takeUntilDestroyed(this._destroyRef), debounceTime(50))
|
|
3875
|
+
.subscribe(() => {
|
|
3876
|
+
this._updateScrollState(container);
|
|
3877
|
+
});
|
|
3878
|
+
// Observe resize
|
|
3879
|
+
this._resizeObserver = new ResizeObserver(() => {
|
|
3880
|
+
this._updateScrollState(container);
|
|
3881
|
+
});
|
|
3882
|
+
this._resizeObserver.observe(container);
|
|
3883
|
+
}
|
|
3884
|
+
_updateScrollState(container) {
|
|
3885
|
+
this._scrollLeft.set(container.scrollLeft);
|
|
3886
|
+
this._scrollWidth.set(container.scrollWidth);
|
|
3887
|
+
this._clientWidth.set(container.clientWidth);
|
|
3888
|
+
}
|
|
3889
|
+
scrollTo(direction) {
|
|
3890
|
+
const container = this._tabGroupContainer()?.nativeElement;
|
|
3891
|
+
if (!container)
|
|
3892
|
+
return;
|
|
3893
|
+
const scrollAmount = 200; // Fixed scroll amount in pixels
|
|
3894
|
+
const newScrollLeft = direction === 'left'
|
|
3895
|
+
? container.scrollLeft - scrollAmount
|
|
3896
|
+
: container.scrollLeft + scrollAmount;
|
|
3897
|
+
container.scrollTo({
|
|
3898
|
+
left: newScrollLeft,
|
|
3899
|
+
behavior: 'smooth',
|
|
3900
|
+
});
|
|
3769
3901
|
}
|
|
3770
3902
|
selectTab(index) {
|
|
3771
3903
|
this.activeTabId.set(this._tabs()?.[index].id());
|
|
@@ -3786,11 +3918,11 @@ class TabGroupComponent {
|
|
|
3786
3918
|
break;
|
|
3787
3919
|
case 'Home':
|
|
3788
3920
|
event.preventDefault();
|
|
3789
|
-
this.selectTab(this.
|
|
3921
|
+
this.selectTab(this.getFirstEnabledIndex(tabCount));
|
|
3790
3922
|
break;
|
|
3791
3923
|
case 'End':
|
|
3792
3924
|
event.preventDefault();
|
|
3793
|
-
this.selectTab(this.
|
|
3925
|
+
this.selectTab(this.getLastEnabledIndex(tabCount));
|
|
3794
3926
|
break;
|
|
3795
3927
|
}
|
|
3796
3928
|
}
|
|
@@ -3802,12 +3934,26 @@ class TabGroupComponent {
|
|
|
3802
3934
|
}
|
|
3803
3935
|
return start;
|
|
3804
3936
|
}
|
|
3937
|
+
getFirstEnabledIndex(tabCount) {
|
|
3938
|
+
for (let i = 0; i < tabCount; i++) {
|
|
3939
|
+
if (!this.tabs()[i].disabled())
|
|
3940
|
+
return i;
|
|
3941
|
+
}
|
|
3942
|
+
return 0;
|
|
3943
|
+
}
|
|
3944
|
+
getLastEnabledIndex(tabCount) {
|
|
3945
|
+
for (let i = tabCount - 1; i >= 0; i--) {
|
|
3946
|
+
if (!this.tabs()[i].disabled())
|
|
3947
|
+
return i;
|
|
3948
|
+
}
|
|
3949
|
+
return tabCount - 1;
|
|
3950
|
+
}
|
|
3805
3951
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3806
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: { hasPadding: { classPropertyName: "hasPadding", publicName: "hasPadding", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, inlinePadding: { classPropertyName: "inlinePadding", publicName: "inlinePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabId: "activeTabIdChange" }, queries: [{ propertyName: "_tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n
|
|
3952
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: { hasPadding: { classPropertyName: "hasPadding", publicName: "hasPadding", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, inlinePadding: { classPropertyName: "inlinePadding", publicName: "inlinePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabId: "activeTabIdChange" }, queries: [{ propertyName: "_tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "_tabGroupContainer", first: true, predicate: ["tabGroupContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tab-group-wrapper\">\n @if (canScrollLeft()) {\n <button\n ndwButton\n secondary\n alternative\n extra-small\n class=\"scroll-arrow scroll-arrow-left\"\n type=\"button\"\n aria-label=\"Scroll naar links\"\n tabindex=\"-1\"\n (click)=\"scrollTo('left')\"\n >\n <ndw-icon>chevron_left</ndw-icon>\n </button>\n }\n\n <div #tabGroupContainer class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n @for (tab of tabs(); track tab.id(); let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n role=\"tab\"\n type=\"button\"\n [attr.active]=\"tab.active ? true : undefined\"\n [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n [attr.aria-selected]=\"tab.active\"\n [disabled]=\"tab.disabled() ? true : null\"\n [id]=\"'tab-' + tab.id\"\n [tabindex]=\"tab.active ? 0 : -1\"\n (click)=\"selectTab(i)\"\n (keydown)=\"onKeyDown($event)\"\n >\n {{ tab.title() }}\n @if (tab.hasError()) {\n <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\n }\n </button>\n }\n </div>\n\n @if (canScrollRight()) {\n <button\n ndwButton\n secondary\n alternative\n extra-small\n class=\"scroll-arrow scroll-arrow-right\"\n type=\"button\"\n aria-label=\"Scroll naar rechts\"\n tabindex=\"-1\"\n (click)=\"scrollTo('right')\"\n >\n <ndw-icon>chevron_right</ndw-icon>\n </button>\n }\n</div>\n@for (tab of tabs(); track tab.id(); let i = $index) {\n <div\n class=\"tab-content\"\n [ngClass]=\"{ 'is-hidden': !tab.active }\"\n [id]=\"'tab-panel-' + tab.id\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"'tab-' + tab.id\"\n [tabindex]=\"0\"\n >\n <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n </div>\n}\n", styles: [".tab-group-wrapper{position:relative}.tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;flex:1;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to bottom,transparent calc(100% - var(--ndw-border-size-sm)),var(--ndw-color-grey-200) calc(100% - var(--ndw-border-size-sm))) 0 0/100vw 100% no-repeat}.tab-group::-webkit-scrollbar{display:none}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.scroll-arrow{position:absolute;top:var(--ndw-spacing-sm);border-radius:100%;background-color:var(--ndw-color-white);z-index:2;color:var(--ndw-color-grey-600);transition:color .2s ease-out}.scroll-arrow:hover{background-color:var(--ndw-color-grey-50)!important}.scroll-arrow.scroll-arrow-left{left:0}.scroll-arrow.scroll-arrow-right{right:0}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;white-space:nowrap;flex-shrink:0}.tab-button ndw-badge{position:absolute;top:0rem;right:-1rem;pointer-events:none}.tab-button ndw-badge.small{top:.25rem;right:-.75rem}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3807
3953
|
}
|
|
3808
3954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TabGroupComponent, decorators: [{
|
|
3809
3955
|
type: Component,
|
|
3810
|
-
args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n
|
|
3956
|
+
args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass, BadgeComponent, ButtonDirective, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group-wrapper\">\n @if (canScrollLeft()) {\n <button\n ndwButton\n secondary\n alternative\n extra-small\n class=\"scroll-arrow scroll-arrow-left\"\n type=\"button\"\n aria-label=\"Scroll naar links\"\n tabindex=\"-1\"\n (click)=\"scrollTo('left')\"\n >\n <ndw-icon>chevron_left</ndw-icon>\n </button>\n }\n\n <div #tabGroupContainer class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n @for (tab of tabs(); track tab.id(); let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n role=\"tab\"\n type=\"button\"\n [attr.active]=\"tab.active ? true : undefined\"\n [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n [attr.aria-selected]=\"tab.active\"\n [disabled]=\"tab.disabled() ? true : null\"\n [id]=\"'tab-' + tab.id\"\n [tabindex]=\"tab.active ? 0 : -1\"\n (click)=\"selectTab(i)\"\n (keydown)=\"onKeyDown($event)\"\n >\n {{ tab.title() }}\n @if (tab.hasError()) {\n <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\n }\n </button>\n }\n </div>\n\n @if (canScrollRight()) {\n <button\n ndwButton\n secondary\n alternative\n extra-small\n class=\"scroll-arrow scroll-arrow-right\"\n type=\"button\"\n aria-label=\"Scroll naar rechts\"\n tabindex=\"-1\"\n (click)=\"scrollTo('right')\"\n >\n <ndw-icon>chevron_right</ndw-icon>\n </button>\n }\n</div>\n@for (tab of tabs(); track tab.id(); let i = $index) {\n <div\n class=\"tab-content\"\n [ngClass]=\"{ 'is-hidden': !tab.active }\"\n [id]=\"'tab-panel-' + tab.id\"\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"'tab-' + tab.id\"\n [tabindex]=\"0\"\n >\n <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n </div>\n}\n", styles: [".tab-group-wrapper{position:relative}.tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;flex:1;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to bottom,transparent calc(100% - var(--ndw-border-size-sm)),var(--ndw-color-grey-200) calc(100% - var(--ndw-border-size-sm))) 0 0/100vw 100% no-repeat}.tab-group::-webkit-scrollbar{display:none}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.scroll-arrow{position:absolute;top:var(--ndw-spacing-sm);border-radius:100%;background-color:var(--ndw-color-white);z-index:2;color:var(--ndw-color-grey-600);transition:color .2s ease-out}.scroll-arrow:hover{background-color:var(--ndw-color-grey-50)!important}.scroll-arrow.scroll-arrow-left{left:0}.scroll-arrow.scroll-arrow-right{right:0}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;white-space:nowrap;flex-shrink:0}.tab-button ndw-badge{position:absolute;top:0rem;right:-1rem;pointer-events:none}.tab-button ndw-badge.small{top:.25rem;right:-.75rem}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"] }]
|
|
3811
3957
|
}], ctorParameters: () => [] });
|
|
3812
3958
|
|
|
3813
3959
|
const ndwAgGridTheme = {
|
|
@@ -4021,5 +4167,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
4021
4167
|
* Generated bundle index. Do not edit.
|
|
4022
4168
|
*/
|
|
4023
4169
|
|
|
4024
|
-
export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, 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, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, SwitcherComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, fontMapButtonIcons, mapButtonIcons, ndwAgGridTheme, svgMapButtonIcons };
|
|
4170
|
+
export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, 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, 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, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, SwitcherComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, fontMapButtonIcons, mapButtonIcons, ndwAgGridTheme, svgMapButtonIcons };
|
|
4025
4171
|
//# sourceMappingURL=ndwnu-design-system.mjs.map
|