npm - @sebgroup/green-angular - Versions diffs - 0.0.0-v-angular-20250113082841 → 0.0.0-v-angular-20250123104942 - Mend

@sebgroup/green-angular 0.0.0-v-angular-20250113082841 → 0.0.0-v-angular-20250123104942

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.

Files changed (57) hide show

package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs CHANGED Viewed

@@ -1172,11 +1172,11 @@ class CalendarComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarComponent, selector: "nggv-calendar", inputs: { year: "year", month: "month", selected: "selected", locale: "locale", minCalendarRows: "minCalendarRows", firstDayOfWeek: "firstDayOfWeek", type: "type", disableDates: "disableDates", disableWeekDays: "disableWeekDays", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime" }, outputs: { dateClick: "dateClick" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, viewQueries: [{ propertyName: "dateButtonRefs", predicate: CalendarDateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n  <div class=\"nggv-calendar-row\">\n    <button\n      *ngFor=\"let date of weekRow\"\n      class=\"gds-button gds-button-alternative\"\n      [attr.data-thook]=\"\n        date | dateThook: (date | isDisabled: disableDateConfig)\n      \"\n      [attr.aria-label]=\"date\"\n      [calendarDate]=\"date\"\n      [notWithinMonth]=\"!(month === date?.getMonth())\"\n      [selected]=\"date | matches: selected\"\n      [disabled]=\"date | isDisabled: disableDateConfig\"\n      (click)=\"clickDate(date)\"\n    >\n      {{ date | date: 'd' : undefined : locale }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;width:15%;background:transparent;width:44px;height:44px;border-radius:4px;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CalendarDateDirective, selector: "[calendarDate]", inputs: ["calendarDate", "selected", "notWithinMonth", "disabled"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }, { kind: "pipe", type: DateThookPipe, name: "dateThook" }, { kind: "pipe", type: MatchesPipe, name: "matches" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarComponent, selector: "nggv-calendar", inputs: { year: "year", month: "month", selected: "selected", locale: "locale", minCalendarRows: "minCalendarRows", firstDayOfWeek: "firstDayOfWeek", type: "type", disableDates: "disableDates", disableWeekDays: "disableWeekDays", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime" }, outputs: { dateClick: "dateClick" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, viewQueries: [{ propertyName: "dateButtonRefs", predicate: CalendarDateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n  <div class=\"nggv-calendar-row\">\n    <button\n      *ngFor=\"let date of weekRow\"\n      class=\"gds-button gds-button-alternative\"\n      [attr.data-thook]=\"\n        date | dateThook: (date | isDisabled: disableDateConfig)\n      \"\n      [attr.aria-label]=\"date\"\n      [calendarDate]=\"date\"\n      [notWithinMonth]=\"!(month === date?.getMonth())\"\n      [selected]=\"date | matches: selected\"\n      [disabled]=\"date | isDisabled: disableDateConfig\"\n      (click)=\"clickDate(date)\"\n    >\n      {{ date | date: 'd' : undefined : locale }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{--sg-border-color: transparent;--sg-border-width: 0;--sg-border-radius: 4px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;width:15%;background:transparent;width:44px;height:44px;border-radius:4px;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CalendarDateDirective, selector: "[calendarDate]", inputs: ["calendarDate", "selected", "notWithinMonth", "disabled"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }, { kind: "pipe", type: DateThookPipe, name: "dateThook" }, { kind: "pipe", type: MatchesPipe, name: "matches" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-calendar', template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n  <div class=\"nggv-calendar-row\">\n    <button\n      *ngFor=\"let date of weekRow\"\n      class=\"gds-button gds-button-alternative\"\n      [attr.data-thook]=\"\n        date | dateThook: (date | isDisabled: disableDateConfig)\n      \"\n      [attr.aria-label]=\"date\"\n      [calendarDate]=\"date\"\n      [notWithinMonth]=\"!(month === date?.getMonth())\"\n      [selected]=\"date | matches: selected\"\n      [disabled]=\"date | isDisabled: disableDateConfig\"\n      (click)=\"clickDate(date)\"\n    >\n      {{ date | date: 'd' : undefined : locale }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;width:15%;background:transparent;width:44px;height:44px;border-radius:4px;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"] }]
+            args: [{ selector: 'nggv-calendar', template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n  <div class=\"nggv-calendar-row\">\n    <button\n      *ngFor=\"let date of weekRow\"\n      class=\"gds-button gds-button-alternative\"\n      [attr.data-thook]=\"\n        date | dateThook: (date | isDisabled: disableDateConfig)\n      \"\n      [attr.aria-label]=\"date\"\n      [calendarDate]=\"date\"\n      [notWithinMonth]=\"!(month === date?.getMonth())\"\n      [selected]=\"date | matches: selected\"\n      [disabled]=\"date | isDisabled: disableDateConfig\"\n      (click)=\"clickDate(date)\"\n    >\n      {{ date | date: 'd' : undefined : locale }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{--sg-border-color: transparent;--sg-border-width: 0;--sg-border-radius: 4px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;width:15%;background:transparent;width:44px;height:44px;border-radius:4px;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media (max-width: 35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"] }]
         }], propDecorators: { dateClick: [{
                 type: Output
             }], dateButtonRefs: [{
@@ -1350,11 +1350,11 @@ class CalendarControlComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarControlComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarControlComponent, selector: "nggv-calendar-control", inputs: { activeCalendar: "activeCalendar", locale: "locale", type: "type" }, outputs: { calendarChange: "calendarChange" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"previous-month\"\n  class=\"nggv-prev-button\"\n  (click)=\"viewPreviousMonth()\"\n>\n  <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-month\"\n    formControlName=\"month\"\n  >\n    <option\n      *ngFor=\"let month of monthArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"month.getMonth()\"\n    >\n      {{ month | date: 'MMMM' : undefined : locale }}\n    </option>\n  </select>\n\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-year\"\n    formControlName=\"year\"\n  >\n    <option\n      *ngFor=\"let year of yearArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"year.getFullYear()\"\n    >\n      {{ year | date: 'yyyy' : undefined : locale }}\n    </option>\n  </select>\n</ng-container>\n\n<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"next-month\"\n  class=\"nggv-next-button\"\n  (click)=\"viewNextMonth()\"\n>\n  <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;padding:.75rem 3rem .75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{--sg-border-radius: 4px;--sg-border-width: 0;--sg-border-color: transparent;background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;border:none;height:2rem;width:2rem;padding:0 .75em}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}@media (max-width: 47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarControlComponent, selector: "nggv-calendar-control", inputs: { activeCalendar: "activeCalendar", locale: "locale", type: "type" }, outputs: { calendarChange: "calendarChange" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"previous-month\"\n  class=\"nggv-prev-button\"\n  (click)=\"viewPreviousMonth()\"\n>\n  <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-month\"\n    formControlName=\"month\"\n  >\n    <option\n      *ngFor=\"let month of monthArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"month.getMonth()\"\n    >\n      {{ month | date: 'MMMM' : undefined : locale }}\n    </option>\n  </select>\n\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-year\"\n    formControlName=\"year\"\n  >\n    <option\n      *ngFor=\"let year of yearArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"year.getFullYear()\"\n    >\n      {{ year | date: 'yyyy' : undefined : locale }}\n    </option>\n  </select>\n</ng-container>\n\n<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"next-month\"\n  class=\"nggv-next-button\"\n  (click)=\"viewNextMonth()\"\n>\n  <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;padding:.75rem 3rem .75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);appearance:auto;background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{--sg-border-radius: 4px;--sg-border-width: 0;--sg-border-color: transparent;background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;border:none;height:2rem;width:2rem;padding:0 .75em}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}@media (max-width: 47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-calendar-control', template: "<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"previous-month\"\n  class=\"nggv-prev-button\"\n  (click)=\"viewPreviousMonth()\"\n>\n  <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-month\"\n    formControlName=\"month\"\n  >\n    <option\n      *ngFor=\"let month of monthArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"month.getMonth()\"\n    >\n      {{ month | date: 'MMMM' : undefined : locale }}\n    </option>\n  </select>\n\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-year\"\n    formControlName=\"year\"\n  >\n    <option\n      *ngFor=\"let year of yearArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"year.getFullYear()\"\n    >\n      {{ year | date: 'yyyy' : undefined : locale }}\n    </option>\n  </select>\n</ng-container>\n\n<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"next-month\"\n  class=\"nggv-next-button\"\n  (click)=\"viewNextMonth()\"\n>\n  <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;padding:.75rem 3rem .75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{--sg-border-radius: 4px;--sg-border-width: 0;--sg-border-color: transparent;background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;border:none;height:2rem;width:2rem;padding:0 .75em}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}@media (max-width: 47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"] }]
+            args: [{ selector: 'nggv-calendar-control', template: "<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"previous-month\"\n  class=\"nggv-prev-button\"\n  (click)=\"viewPreviousMonth()\"\n>\n  <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-month\"\n    formControlName=\"month\"\n  >\n    <option\n      *ngFor=\"let month of monthArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"month.getMonth()\"\n    >\n      {{ month | date: 'MMMM' : undefined : locale }}\n    </option>\n  </select>\n\n  <select\n    class=\"nggv-calendar-select\"\n    data-thook=\"select-year\"\n    formControlName=\"year\"\n  >\n    <option\n      *ngFor=\"let year of yearArray\"\n      class=\"gds-field-dropdown__label\"\n      tabindex=\"0\"\n      [value]=\"year.getFullYear()\"\n    >\n      {{ year | date: 'yyyy' : undefined : locale }}\n    </option>\n  </select>\n</ng-container>\n\n<button\n  *ngIf=\"type === 'normal'\"\n  data-thook=\"next-month\"\n  class=\"nggv-next-button\"\n  (click)=\"viewNextMonth()\"\n>\n  <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;padding:.75rem 3rem .75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);appearance:auto;background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{--sg-border-radius: 4px;--sg-border-width: 0;--sg-border-color: transparent;background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;border:none;height:2rem;width:2rem;padding:0 .75em}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}@media (max-width: 47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media (max-width: 35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"] }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }], propDecorators: { calendarChange: [{
                 type: Output
             }], activeCalendar: [{
@@ -1652,11 +1652,11 @@ class DateInputComponent extends DateControlValueAccessorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i2.TranslocoService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateInputComponent, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleCalendarButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"gds-field-label--small description hide-if-empty\">\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        {{ state | nggvInputMaskFormat: dateInputMask }}\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"field-wrap\" *ngIf=\"showInput$ | async\">\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        [class.nggv-field--error]=\"invalid\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        [class.nggv-field--error]=\"invalid\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        <gds-icon-calendar\n          *nggCoreElement\n          width=\"20\"\n          height=\"20\"\n        ></gds-icon-calendar>\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\" *ngIf=\"withErrorIcon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              width=\"20\"\n              height=\"20\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\" *ngIf=\"withErrorIcon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              width=\"20\"\n              height=\"20\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host .gds-field-label:is(label){margin-bottom:.5rem}:host .gds-field-label--optional{margin-bottom:.5rem}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #d81a1a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #d81a1a!important}:host .error-item:has(span:first-child:nth-last-child(2)){display:flex}:host .error-item--icon{padding-right:.75rem}:host .error-item--text{color:#bb000c}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "component", type: DatepickerComponent, selector: "nggv-datepicker", inputs: ["firstDayOfWeek", "disableDates", "disableWeekDays", "minCalendarRows", "selected", "locale", "type", "firstValid", "lastValid", "closingTime"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateInputComponent, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleCalendarButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"gds-field-label--small description hide-if-empty\">\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        {{ state | nggvInputMaskFormat: dateInputMask }}\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div\n      class=\"field-wrap\"\n      [class.nggv-field--error]=\"invalid\"\n      *ngIf=\"showInput$ | async\"\n    >\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        <gds-icon-calendar\n          *nggCoreElement\n          width=\"20\"\n          height=\"20\"\n        ></gds-icon-calendar>\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              width=\"16\"\n              height=\"16\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              width=\"16\"\n              height=\"16\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host .gds-field-label:is(label){margin-bottom:.5rem}:host .gds-field-label--optional{margin-bottom:.5rem}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "component", type: DatepickerComponent, selector: "nggv-datepicker", inputs: ["firstDayOfWeek", "disableDates", "disableWeekDays", "minCalendarRows", "selected", "locale", "type", "firstValid", "lastValid", "closingTime"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"gds-field-label--small description hide-if-empty\">\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        {{ state | nggvInputMaskFormat: dateInputMask }}\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"field-wrap\" *ngIf=\"showInput$ | async\">\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        [class.nggv-field--error]=\"invalid\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        [class.nggv-field--error]=\"invalid\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        <gds-icon-calendar\n          *nggCoreElement\n          width=\"20\"\n          height=\"20\"\n        ></gds-icon-calendar>\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\" *ngIf=\"withErrorIcon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              width=\"20\"\n              height=\"20\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\" *ngIf=\"withErrorIcon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              width=\"20\"\n              height=\"20\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host .gds-field-label:is(label){margin-bottom:.5rem}:host .gds-field-label--optional{margin-bottom:.5rem}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #d81a1a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #d81a1a!important}:host .error-item:has(span:first-child:nth-last-child(2)){display:flex}:host .error-item--icon{padding-right:.75rem}:host .error-item--text{color:#bb000c}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}\n"] }]
+            args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-input'\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"gds-field-label--small description hide-if-empty\">\n    {{ description }}\n  </div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        {{ state | nggvInputMaskFormat: dateInputMask }}\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT WRAPPER -->\n  <ng-container *ngIf=\"!locked\">\n    <div\n      class=\"field-wrap\"\n      [class.nggv-field--error]=\"invalid\"\n      *ngIf=\"showInput$ | async\"\n    >\n      <!-- INPUT FIELD -->\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"nggv-field-date\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [nggvInputMask]=\"dateInputMask\"\n        [value]=\"state\"\n        title=\"\"\n        (change)=\"onValueChange($event.target)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <button\n        aria-label=\"toggle calendar\"\n        #toggleCalendarButton\n        class=\"nggv-button-date\"\n        type=\"button\"\n        data-thook=\"toggle-calendar-button\"\n        (click)=\"toggleDatepicker()\"\n        [disabled]=\"disabled\"\n      >\n        <gds-icon-calendar\n          *nggCoreElement\n          width=\"20\"\n          height=\"20\"\n        ></gds-icon-calendar>\n      </button>\n    </div>\n\n    <!-- DATEPICKER -->\n    <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n      <nggv-datepicker\n        #input\n        [type]=\"type\"\n        [disableDates]=\"disableDates\"\n        [disableWeekDays]=\"disableWeekDays\"\n        [selected]=\"state\"\n        [locale]=\"locale\"\n        [minCalendarRows]=\"minRows\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [firstValid]=\"firstValid\"\n        [lastValid]=\"lastValid\"\n        [closingTime]=\"closingTime\"\n        (ngvDateChange)=\"onDateChange($event)\"\n      >\n        <ng-content></ng-content>\n      </nggv-datepicker>\n    </div>\n\n    <!-- ERRORS -->\n    <ng-container\n      *ngIf=\"\n        invalid &&\n        (error || ngControl?.invalid) &&\n        (!errorList || !errorList.length)\n      \"\n    >\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              width=\"16\"\n              height=\"16\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n          <ng-template #errorsRef>\n            <span\n              *ngIf=\"firstError as error\"\n              class=\"error-item--text\"\n              [attr.data-thook]=\"thook + '-errorlabel'\"\n            >\n              {{ t('error.field' + error?.code, error?.params) }}\n            </span>\n          </ng-template>\n        </span>\n      </label>\n    </ng-container>\n\n    <ng-container *ngFor=\"let error of errorList ?? []\">\n      <label\n        class=\"gds-field-notice gds-field-notice--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && error\"\n      >\n        <span class=\"error-item\">\n          <span class=\"error-item--icon\">\n            <gds-icon-triangle-exclamation\n              *nggCoreElement\n              [solid]=\"true\"\n              width=\"16\"\n              height=\"16\"\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            class=\"error-item--text\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n      </label>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media (max-width: 47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label{display:block}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host .gds-field-label:is(label){margin-bottom:.5rem}:host .gds-field-label--optional{margin-bottom:.5rem}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51);background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media (max-width: 47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px 0 0 4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%;padding-left:1rem}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {