@sebgroup/green-angular 0.0.0-v-angular-20250113103719 → 0.0.0-v-angular-20250130080915

package/fesm2022/sebgroup-green-angular-v-angular.mjs

@@ -515,11 +515,11 @@ class NggvButtonComponent extends NggvBaseControlValueAccessorComponent$1 {
         this.nggvClick.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvButtonComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvButtonComponent, selector: "nggv-button", inputs: { thook: "thook", type: "type", buttonStyle: "buttonStyle", small: "small", href: "href" }, outputs: { nggvClick: "nggvClick" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\n  #input\n  [ngClass]=\"buttonClasses\"\n  [id]=\"id + '-button'\"\n  [attr.name]=\"name\"\n  [attr.value]=\"value\"\n  [type]=\"type\"\n  [autofocus]=\"autofocus\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type !== 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n  #input\n  [ngClass]=\"buttonClasses\"\n  role=\"button\"\n  [id]=\"id + '-link'\"\n  [routerLink]=\"href\"\n  [external]=\"external\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type === 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686}:host button,:host a{background-color:transparent;border:0;cursor:pointer;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;font-size:1rem;font-family:inherit}:host button:focus:not(:focus-visible),:host a:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible,:host a:focus,:host a: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,:host a{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button,:host a{border:2px solid currentcolor}}:host button.small,:host a.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large,:host a.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .primary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .primary[aria-selected=true],:host .primary:active,:host .primary.active,:host .primary.active:hover,:host .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .primary:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .primary:disabled,:host .primary.disabled,:host .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .primary:disabled::placeholder,:host .primary.disabled::placeholder,:host .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .secondary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .secondary:focus,:host .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .secondary[aria-selected=true],:host .secondary:active,:host .secondary.active,:host .secondary.active:hover,:host .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .secondary:disabled,:host .secondary.disabled,:host .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .secondary:disabled::placeholder,:host .secondary.disabled::placeholder,:host .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .tertiary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:transparent;color:#007ac7;--color: rgb(0, 122, 199)}:host .tertiary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .tertiary:focus,:host .tertiary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .tertiary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .tertiary[aria-selected=true],:host .tertiary:active,:host .tertiary.active,:host .tertiary.active:hover,:host .tertiary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .tertiary:disabled,:host .tertiary.disabled,:host .tertiary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .tertiary:disabled::placeholder,:host .tertiary.disabled::placeholder,:host .tertiary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost-light{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}:host .ghost-light:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected=true],:host .ghost-light:active,:host .ghost-light.active,:host .ghost-light.active:hover,:host .ghost-light:active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected]:hover,:host .ghost-light.active:hover,:host .ghost-light:active:hover{opacity:.9}:host .ghost-light:focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}:host .ghost-light:disabled,:host .ghost-light.disabled,:host .ghost-light[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost-light:disabled::placeholder,:host .ghost-light.disabled::placeholder,:host .ghost-light[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost{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)}:host .ghost: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 .ghost[aria-selected=true],:host .ghost:active,:host .ghost.active,:host .ghost.active:hover,:host .ghost:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected]:hover,:host .ghost.active:hover,:host .ghost:active:hover{opacity:.9}:host .ghost:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .ghost:disabled,:host .ghost.disabled,:host .ghost[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost:disabled::placeholder,:host .ghost.disabled::placeholder,:host .ghost[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger.primary{background:#bb000c;border-color:#bb000c;color:#fff;--color: #fff;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger.primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger.primary[aria-selected=true],:host .danger.primary:active,:host .danger.primary.active,:host .danger.primary.active:hover,:host .danger.primary:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger.primary[aria-selected]:hover,:host .danger.primary.active:hover,:host .danger.primary:active:hover{opacity:.9}:host .danger.primary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger.primary:focus,:host .danger.primary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .danger.primary:disabled,:host .danger.primary.disabled,:host .danger.primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .danger.primary:disabled::placeholder,:host .danger.primary.disabled::placeholder,:host .danger.primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger:not(.primary){color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger:not(.primary):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger:not(.primary)[aria-selected=true],:host .danger:not(.primary):active,:host .danger:not(.primary).active,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger:not(.primary)[aria-selected]:hover,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{opacity:.9}:host .danger:not(.primary):focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger:not(.primary):focus,:host .danger:not(.primary):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NggvExternalLinkDirective, selector: "a[routerLink]", inputs: ["external"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvButtonComponent, selector: "nggv-button", inputs: { thook: "thook", type: "type", buttonStyle: "buttonStyle", small: "small", href: "href" }, outputs: { nggvClick: "nggvClick" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\n  #input\n  [ngClass]=\"buttonClasses\"\n  [id]=\"id + '-button'\"\n  [attr.name]=\"name\"\n  [attr.value]=\"value\"\n  [type]=\"type\"\n  [autofocus]=\"autofocus\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type !== 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n  #input\n  [ngClass]=\"buttonClasses\"\n  role=\"button\"\n  [id]=\"id + '-link'\"\n  [routerLink]=\"href\"\n  [external]=\"external\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type === 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--gds-sys-color-focus-outline: #1a1a1a}:host button,:host a{background-color:transparent;border:0;cursor:pointer;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;font-size:1rem;font-family:inherit}:host button:focus:not(:focus-visible),:host a:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible,:host a:focus,:host a: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,:host a{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button,:host a{border:2px solid currentcolor}}:host button.small,:host a.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large,:host a.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .primary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .primary[aria-selected=true],:host .primary:active,:host .primary.active,:host .primary.active:hover,:host .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .primary:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .primary:disabled,:host .primary.disabled,:host .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .primary:disabled::placeholder,:host .primary.disabled::placeholder,:host .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .secondary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .secondary:focus,:host .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .secondary[aria-selected=true],:host .secondary:active,:host .secondary.active,:host .secondary.active:hover,:host .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .secondary:disabled,:host .secondary.disabled,:host .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .secondary:disabled::placeholder,:host .secondary.disabled::placeholder,:host .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .tertiary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:transparent;color:#007ac7;--color: rgb(0, 122, 199)}:host .tertiary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .tertiary:focus,:host .tertiary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .tertiary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .tertiary[aria-selected=true],:host .tertiary:active,:host .tertiary.active,:host .tertiary.active:hover,:host .tertiary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .tertiary:disabled,:host .tertiary.disabled,:host .tertiary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .tertiary:disabled::placeholder,:host .tertiary.disabled::placeholder,:host .tertiary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost-light{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}:host .ghost-light:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected=true],:host .ghost-light:active,:host .ghost-light.active,:host .ghost-light.active:hover,:host .ghost-light:active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected]:hover,:host .ghost-light.active:hover,:host .ghost-light:active:hover{opacity:.9}:host .ghost-light:focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}:host .ghost-light:disabled,:host .ghost-light.disabled,:host .ghost-light[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost-light:disabled::placeholder,:host .ghost-light.disabled::placeholder,:host .ghost-light[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost{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)}:host .ghost: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 .ghost[aria-selected=true],:host .ghost:active,:host .ghost.active,:host .ghost.active:hover,:host .ghost:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected]:hover,:host .ghost.active:hover,:host .ghost:active:hover{opacity:.9}:host .ghost:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .ghost:disabled,:host .ghost.disabled,:host .ghost[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost:disabled::placeholder,:host .ghost.disabled::placeholder,:host .ghost[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger.primary{background:#bb000c;border-color:#bb000c;color:#fff;--color: #fff;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger.primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger.primary[aria-selected=true],:host .danger.primary:active,:host .danger.primary.active,:host .danger.primary.active:hover,:host .danger.primary:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger.primary[aria-selected]:hover,:host .danger.primary.active:hover,:host .danger.primary:active:hover{opacity:.9}:host .danger.primary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger.primary:focus,:host .danger.primary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .danger.primary:disabled,:host .danger.primary.disabled,:host .danger.primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .danger.primary:disabled::placeholder,:host .danger.primary.disabled::placeholder,:host .danger.primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger:not(.primary){color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger:not(.primary):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger:not(.primary)[aria-selected=true],:host .danger:not(.primary):active,:host .danger:not(.primary).active,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger:not(.primary)[aria-selected]:hover,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{opacity:.9}:host .danger:not(.primary):focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger:not(.primary):focus,:host .danger:not(.primary):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NggvExternalLinkDirective, selector: "a[routerLink]", inputs: ["external"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-button', template: "<button\n  #input\n  [ngClass]=\"buttonClasses\"\n  [id]=\"id + '-button'\"\n  [attr.name]=\"name\"\n  [attr.value]=\"value\"\n  [type]=\"type\"\n  [autofocus]=\"autofocus\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type !== 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n  #input\n  [ngClass]=\"buttonClasses\"\n  role=\"button\"\n  [id]=\"id + '-link'\"\n  [routerLink]=\"href\"\n  [external]=\"external\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type === 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686}:host button,:host a{background-color:transparent;border:0;cursor:pointer;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;font-size:1rem;font-family:inherit}:host button:focus:not(:focus-visible),:host a:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible,:host a:focus,:host a: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,:host a{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button,:host a{border:2px solid currentcolor}}:host button.small,:host a.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large,:host a.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .primary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .primary[aria-selected=true],:host .primary:active,:host .primary.active,:host .primary.active:hover,:host .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .primary:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .primary:disabled,:host .primary.disabled,:host .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .primary:disabled::placeholder,:host .primary.disabled::placeholder,:host .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .secondary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .secondary:focus,:host .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .secondary[aria-selected=true],:host .secondary:active,:host .secondary.active,:host .secondary.active:hover,:host .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .secondary:disabled,:host .secondary.disabled,:host .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .secondary:disabled::placeholder,:host .secondary.disabled::placeholder,:host .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .tertiary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:transparent;color:#007ac7;--color: rgb(0, 122, 199)}:host .tertiary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .tertiary:focus,:host .tertiary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .tertiary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .tertiary[aria-selected=true],:host .tertiary:active,:host .tertiary.active,:host .tertiary.active:hover,:host .tertiary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .tertiary:disabled,:host .tertiary.disabled,:host .tertiary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .tertiary:disabled::placeholder,:host .tertiary.disabled::placeholder,:host .tertiary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost-light{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}:host .ghost-light:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected=true],:host .ghost-light:active,:host .ghost-light.active,:host .ghost-light.active:hover,:host .ghost-light:active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected]:hover,:host .ghost-light.active:hover,:host .ghost-light:active:hover{opacity:.9}:host .ghost-light:focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}:host .ghost-light:disabled,:host .ghost-light.disabled,:host .ghost-light[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost-light:disabled::placeholder,:host .ghost-light.disabled::placeholder,:host .ghost-light[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost{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)}:host .ghost: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 .ghost[aria-selected=true],:host .ghost:active,:host .ghost.active,:host .ghost.active:hover,:host .ghost:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected]:hover,:host .ghost.active:hover,:host .ghost:active:hover{opacity:.9}:host .ghost:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .ghost:disabled,:host .ghost.disabled,:host .ghost[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost:disabled::placeholder,:host .ghost.disabled::placeholder,:host .ghost[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger.primary{background:#bb000c;border-color:#bb000c;color:#fff;--color: #fff;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger.primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger.primary[aria-selected=true],:host .danger.primary:active,:host .danger.primary.active,:host .danger.primary.active:hover,:host .danger.primary:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger.primary[aria-selected]:hover,:host .danger.primary.active:hover,:host .danger.primary:active:hover{opacity:.9}:host .danger.primary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger.primary:focus,:host .danger.primary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .danger.primary:disabled,:host .danger.primary.disabled,:host .danger.primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .danger.primary:disabled::placeholder,:host .danger.primary.disabled::placeholder,:host .danger.primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger:not(.primary){color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger:not(.primary):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger:not(.primary)[aria-selected=true],:host .danger:not(.primary):active,:host .danger:not(.primary).active,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger:not(.primary)[aria-selected]:hover,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{opacity:.9}:host .danger:not(.primary):focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger:not(.primary):focus,:host .danger:not(.primary):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"] }]
+            args: [{ selector: 'nggv-button', template: "<button\n  #input\n  [ngClass]=\"buttonClasses\"\n  [id]=\"id + '-button'\"\n  [attr.name]=\"name\"\n  [attr.value]=\"value\"\n  [type]=\"type\"\n  [autofocus]=\"autofocus\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type !== 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n  #input\n  [ngClass]=\"buttonClasses\"\n  role=\"button\"\n  [id]=\"id + '-link'\"\n  [routerLink]=\"href\"\n  [external]=\"external\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type === 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--gds-sys-color-focus-outline: #1a1a1a}:host button,:host a{background-color:transparent;border:0;cursor:pointer;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;font-size:1rem;font-family:inherit}:host button:focus:not(:focus-visible),:host a:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible,:host a:focus,:host a: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,:host a{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button,:host a{border:2px solid currentcolor}}:host button.small,:host a.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large,:host a.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .primary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .primary[aria-selected=true],:host .primary:active,:host .primary.active,:host .primary.active:hover,:host .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .primary:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .primary:disabled,:host .primary.disabled,:host .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .primary:disabled::placeholder,:host .primary.disabled::placeholder,:host .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .secondary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .secondary:focus,:host .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .secondary[aria-selected=true],:host .secondary:active,:host .secondary.active,:host .secondary.active:hover,:host .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .secondary:disabled,:host .secondary.disabled,:host .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .secondary:disabled::placeholder,:host .secondary.disabled::placeholder,:host .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .tertiary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:transparent;color:#007ac7;--color: rgb(0, 122, 199)}:host .tertiary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .tertiary:focus,:host .tertiary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .tertiary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .tertiary[aria-selected=true],:host .tertiary:active,:host .tertiary.active,:host .tertiary.active:hover,:host .tertiary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .tertiary:disabled,:host .tertiary.disabled,:host .tertiary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .tertiary:disabled::placeholder,:host .tertiary.disabled::placeholder,:host .tertiary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost-light{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}:host .ghost-light:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected=true],:host .ghost-light:active,:host .ghost-light.active,:host .ghost-light.active:hover,:host .ghost-light:active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected]:hover,:host .ghost-light.active:hover,:host .ghost-light:active:hover{opacity:.9}:host .ghost-light:focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}:host .ghost-light:disabled,:host .ghost-light.disabled,:host .ghost-light[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost-light:disabled::placeholder,:host .ghost-light.disabled::placeholder,:host .ghost-light[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost{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)}:host .ghost: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 .ghost[aria-selected=true],:host .ghost:active,:host .ghost.active,:host .ghost.active:hover,:host .ghost:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected]:hover,:host .ghost.active:hover,:host .ghost:active:hover{opacity:.9}:host .ghost:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .ghost:disabled,:host .ghost.disabled,:host .ghost[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost:disabled::placeholder,:host .ghost.disabled::placeholder,:host .ghost[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger.primary{background:#bb000c;border-color:#bb000c;color:#fff;--color: #fff;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger.primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger.primary[aria-selected=true],:host .danger.primary:active,:host .danger.primary.active,:host .danger.primary.active:hover,:host .danger.primary:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger.primary[aria-selected]:hover,:host .danger.primary.active:hover,:host .danger.primary:active:hover{opacity:.9}:host .danger.primary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger.primary:focus,:host .danger.primary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .danger.primary:disabled,:host .danger.primary.disabled,:host .danger.primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .danger.primary:disabled::placeholder,:host .danger.primary.disabled::placeholder,:host .danger.primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger:not(.primary){color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger:not(.primary):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger:not(.primary)[aria-selected=true],:host .danger:not(.primary):active,:host .danger:not(.primary).active,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger:not(.primary)[aria-selected]:hover,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{opacity:.9}:host .danger:not(.primary):focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger:not(.primary):focus,:host .danger:not(.primary):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -685,11 +685,11 @@ class NggvCheckboxComponent extends NggvBaseControlValueAccessorComponent$1 {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvCheckboxComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvCheckboxComponent, selector: "nggv-checkbox", inputs: { thook: "thook", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div>\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\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          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"gds-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          [solid]=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n      >\n        {{ error }}\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color);position:relative;border-radius:var(--gds-comp-checkbox-border-radius);background-color:var(--gds-comp-checkbox-container-color);flex:0 0 auto;height:var(--gds-comp-checkbox-container-width, 1rem);width:var(--gds-comp-checkbox-container-width, 1rem);transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]~i:after{transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color-focus)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{border-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control:hover input[type=checkbox]:not(:checked,:indeterminate,:disabled,.disabled)~i:after{border-color:var(--gds-comp-checkbox-hover-border-color);opacity:1}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control:hover input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvCheckboxComponent, selector: "nggv-checkbox", inputs: { thook: "thook", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div>\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\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          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"gds-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          [solid]=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n      >\n        {{ error }}\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color);position:relative;border-radius:var(--gds-comp-checkbox-border-radius);background-color:var(--gds-comp-checkbox-container-color);flex:0 0 auto;height:var(--gds-comp-checkbox-container-width, 1rem);width:var(--gds-comp-checkbox-container-width, 1rem);transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]~i:after{transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color-focus)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{border-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control:hover input[type=checkbox]:not(:checked,:indeterminate,:disabled,.disabled)~i:after{border-color:var(--gds-comp-checkbox-hover-border-color);opacity:1}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control:hover input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div>\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\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          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"gds-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          [solid]=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n      >\n        {{ error }}\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color);position:relative;border-radius:var(--gds-comp-checkbox-border-radius);background-color:var(--gds-comp-checkbox-container-color);flex:0 0 auto;height:var(--gds-comp-checkbox-container-width, 1rem);width:var(--gds-comp-checkbox-container-width, 1rem);transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]~i:after{transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color-focus)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{border-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control:hover input[type=checkbox]:not(:checked,:indeterminate,:disabled,.disabled)~i:after{border-color:var(--gds-comp-checkbox-hover-border-color);opacity:1}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control:hover input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}\n"] }]
+            args: [{ selector: 'nggv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div>\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\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          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"gds-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          [solid]=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n      >\n        {{ error }}\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color);position:relative;border-radius:var(--gds-comp-checkbox-border-radius);background-color:var(--gds-comp-checkbox-container-color);flex:0 0 auto;height:var(--gds-comp-checkbox-container-width, 1rem);width:var(--gds-comp-checkbox-container-width, 1rem);transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]~i:after{transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color-focus)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{border-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control:hover input[type=checkbox]:not(:checked,:indeterminate,:disabled,.disabled)~i:after{border-color:var(--gds-comp-checkbox-hover-border-color);opacity:1}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control:hover input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1880,11 +1880,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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CalendarDateDirective, selector: "[calendarDate]", inputs: ["calendarDate", "selected", "notWithinMonth", "disabled"] }, { kind: "pipe", type: i1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CalendarDateDirective, selector: "[calendarDate]", inputs: ["calendarDate", "selected", "notWithinMonth", "disabled"] }, { kind: "pipe", type: i1.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: [{
@@ -2058,11 +2058,11 @@ class CalendarControlComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarControlComponent, deps: [{ token: i1$1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.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$1.UntypedFormBuilder }], propDecorators: { calendarChange: [{
                 type: Output
             }], activeCalendar: [{
@@ -2360,11 +2360,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$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i3.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i4.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.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i4.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.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.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$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -3413,11 +3413,11 @@ class NggvDropdownListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: { expanded: "expanded", state: "state", scrollOffset: "scrollOffset", optionContentTpl: "optionContentTpl", groupLabelTpl: "groupLabelTpl", id: "id", thook: "thook", options: "options", textToHighlight: "textToHighlight", onlyEmitDistinctChanges: "onlyEmitDistinctChanges" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed" }, host: { listeners: { "document:keydown": "onKeyDown($event)", "document:keyup": "onKeyUp($event)" }, properties: { "attr.id": "this.id", "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <!-- group label template (default or custom) -->\n        <ng-template\n          *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n        ></ng-template>\n\n        <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #listGroupTemplate let-item>\n    <ng-container *ngIf=\"groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"!groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicGroupLabelTpl let-item>\n    <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n  </ng-template>\n</ng-container>\n", styles: [":host{--gds-ref-pallet-base400: hsl(0, 0%, 81%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-z-index-dropdown: ;--sg-z-index-popover: 1060;--sg-z-index-dropdown-backdrop: 990;--sg-z-index-dropdown: 2000;--sg-popover-background: #fff;--sg-popover-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--text-primary-color: #333;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NggvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }, { kind: "directive", type: i3$1.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: { expanded: "expanded", state: "state", scrollOffset: "scrollOffset", optionContentTpl: "optionContentTpl", groupLabelTpl: "groupLabelTpl", id: "id", thook: "thook", options: "options", textToHighlight: "textToHighlight", onlyEmitDistinctChanges: "onlyEmitDistinctChanges" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed" }, host: { listeners: { "document:keydown": "onKeyDown($event)", "document:keyup": "onKeyUp($event)" }, properties: { "attr.id": "this.id", "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <!-- group label template (default or custom) -->\n        <ng-template\n          *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n        ></ng-template>\n\n        <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #listGroupTemplate let-item>\n    <ng-container *ngIf=\"groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"!groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicGroupLabelTpl let-item>\n    <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n  </ng-template>\n</ng-container>\n", styles: [":host{--gds-ref-pallet-base300: hsl(0, 0%, 87%);--gds-ref-pallet-base400: hsl(0, 0%, 81%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-z-index-dropdown: ;--sg-z-index-popover: 1060;--sg-z-index-dropdown-backdrop: 990;--sg-z-index-dropdown: 2000;--sg-popover-background: #fff;--sg-popover-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--text-primary-color: #333;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base300)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NggvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }, { kind: "directive", type: i3$1.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDropdownListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <!-- group label template (default or custom) -->\n        <ng-template\n          *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n        ></ng-template>\n\n        <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #listGroupTemplate let-item>\n    <ng-container *ngIf=\"groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"!groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicGroupLabelTpl let-item>\n    <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n  </ng-template>\n</ng-container>\n", styles: [":host{--gds-ref-pallet-base400: hsl(0, 0%, 81%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-z-index-dropdown: ;--sg-z-index-popover: 1060;--sg-z-index-dropdown-backdrop: 990;--sg-z-index-dropdown: 2000;--sg-popover-background: #fff;--sg-popover-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--text-primary-color: #333;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"] }]
+            args: [{ selector: 'nggv-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <!-- group label template (default or custom) -->\n        <ng-template\n          *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n        ></ng-template>\n\n        <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #listGroupTemplate let-item>\n    <ng-container *ngIf=\"groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"!groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicGroupLabelTpl let-item>\n    <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n  </ng-template>\n</ng-container>\n", styles: [":host{--gds-ref-pallet-base300: hsl(0, 0%, 87%);--gds-ref-pallet-base400: hsl(0, 0%, 81%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-z-index-dropdown: ;--sg-z-index-popover: 1060;--sg-z-index-dropdown-backdrop: 990;--sg-z-index-dropdown: 2000;--sg-popover-background: #fff;--sg-popover-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--text-primary-color: #333;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base300)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3647,11 +3647,11 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent$1 {
         return !('options' in option);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDropdownComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2$2.DropdownUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: 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 + '-toggle'\"\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=\"description\">{{ description }}</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      [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n      <button\n        [id]=\"id + '-toggle'\"\n        [disabled]=\"disabled\"\n        type=\"button\"\n        class=\"nggv-field-dropdown__label toggle\"\n        [class.nggv-field--error]=\"invalid\"\n        aria-haspopup=\"listbox\"\n        [attr.data-thook]=\"thook + '-toggle'\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.aria-labelledby]=\"\n          ariaLabel ? null : id + '-label ' + id + '-toggle'\n        \"\n        [attr.aria-label]=\"ariaLabel || null\"\n        (click)=\"toggleDropdown()\"\n      >\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </button>\n\n      <nggv-dropdown-list\n        #dropDownList\n        [options]=\"options\"\n        [scrollOffset]=\"scrollOffset\"\n        [state]=\"state\"\n        [expanded]=\"expanded\"\n        [optionContentTpl]=\"optionContentTpl\"\n        [groupLabelTpl]=\"groupLabelTpl\"\n        [textToHighlight]=\"textToHighlight\"\n        (closed)=\"setExpanded(false)\"\n        (selectedValueChanged)=\"onSelectChange($event)\"\n      >\n      </nggv-dropdown-list>\n    </div>\n    <!-- ERRORS -->\n    <div class=\"gds-form-item__footer error-wrapper\">\n      <span\n        class=\"form-info form-info--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && (error || ngControl?.invalid)\"\n      >\n        <span class=\"error-icon\">\n          <gds-icon-triangle-exclamation\n            width=\"16\"\n            height=\"16\"\n            [solid]=\"true\"\n            *nggCoreElement\n          ></gds-icon-triangle-exclamation>\n        </span>\n        <span\n          *ngIf=\"error; else errorsRef\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n          >{{ error }}</span\n        >\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n\n    <!-- CHILDREN -->\n    <ng-content></ng-content>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%)}:host label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host button{font-weight:500;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199);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);--border-color: var(--grey-800);--sg-border-color: var(--grey-800);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:inherit;font-weight:400;line-height:1.125;margin-bottom:.5rem;margin-top:.5rem;width:100%}@media screen and (-ms-high-contrast: active){:host button{border:2px solid currentcolor}}:host button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host button[aria-selected=true],:host button:active,:host button.active,:host button.active:hover,:host button:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host button:disabled,:host button.disabled,:host button[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host button:disabled::placeholder,:host button.disabled::placeholder,:host button[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--grey-400);--color: var(--grey-1000);background-color:var(--grey-400);color:var(--grey-1000);border-color:var(--grey-1000)}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges"], outputs: ["selectedValueChanged", "closed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: 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 + '-toggle'\"\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=\"description\">{{ description }}</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      [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n      <button\n        [id]=\"id + '-toggle'\"\n        [disabled]=\"disabled\"\n        type=\"button\"\n        class=\"nggv-field-dropdown__label toggle\"\n        [class.nggv-field--error]=\"invalid\"\n        aria-haspopup=\"listbox\"\n        [attr.data-thook]=\"thook + '-toggle'\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.aria-labelledby]=\"\n          ariaLabel ? null : id + '-label ' + id + '-toggle'\n        \"\n        [attr.aria-label]=\"ariaLabel || null\"\n        (click)=\"toggleDropdown()\"\n      >\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </button>\n\n      <nggv-dropdown-list\n        #dropDownList\n        [options]=\"options\"\n        [scrollOffset]=\"scrollOffset\"\n        [state]=\"state\"\n        [expanded]=\"expanded\"\n        [optionContentTpl]=\"optionContentTpl\"\n        [groupLabelTpl]=\"groupLabelTpl\"\n        [textToHighlight]=\"textToHighlight\"\n        (closed)=\"setExpanded(false)\"\n        (selectedValueChanged)=\"onSelectChange($event)\"\n      >\n      </nggv-dropdown-list>\n    </div>\n    <!-- ERRORS -->\n    <div class=\"gds-form-item__footer error-wrapper\">\n      <span\n        class=\"form-info form-info--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && (error || ngControl?.invalid)\"\n      >\n        <span class=\"error-icon\">\n          <gds-icon-triangle-exclamation\n            width=\"16\"\n            height=\"16\"\n            [solid]=\"true\"\n            *nggCoreElement\n          ></gds-icon-triangle-exclamation>\n        </span>\n        <span\n          *ngIf=\"error; else errorsRef\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n          >{{ error }}</span\n        >\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n\n    <!-- CHILDREN -->\n    <ng-content></ng-content>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%)}:host label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional{font-weight:400}:host button{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);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges"], outputs: ["selectedValueChanged", "closed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-dropdown', 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 + '-toggle'\"\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=\"description\">{{ description }}</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      [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n      <button\n        [id]=\"id + '-toggle'\"\n        [disabled]=\"disabled\"\n        type=\"button\"\n        class=\"nggv-field-dropdown__label toggle\"\n        [class.nggv-field--error]=\"invalid\"\n        aria-haspopup=\"listbox\"\n        [attr.data-thook]=\"thook + '-toggle'\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.aria-labelledby]=\"\n          ariaLabel ? null : id + '-label ' + id + '-toggle'\n        \"\n        [attr.aria-label]=\"ariaLabel || null\"\n        (click)=\"toggleDropdown()\"\n      >\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </button>\n\n      <nggv-dropdown-list\n        #dropDownList\n        [options]=\"options\"\n        [scrollOffset]=\"scrollOffset\"\n        [state]=\"state\"\n        [expanded]=\"expanded\"\n        [optionContentTpl]=\"optionContentTpl\"\n        [groupLabelTpl]=\"groupLabelTpl\"\n        [textToHighlight]=\"textToHighlight\"\n        (closed)=\"setExpanded(false)\"\n        (selectedValueChanged)=\"onSelectChange($event)\"\n      >\n      </nggv-dropdown-list>\n    </div>\n    <!-- ERRORS -->\n    <div class=\"gds-form-item__footer error-wrapper\">\n      <span\n        class=\"form-info form-info--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && (error || ngControl?.invalid)\"\n      >\n        <span class=\"error-icon\">\n          <gds-icon-triangle-exclamation\n            width=\"16\"\n            height=\"16\"\n            [solid]=\"true\"\n            *nggCoreElement\n          ></gds-icon-triangle-exclamation>\n        </span>\n        <span\n          *ngIf=\"error; else errorsRef\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n          >{{ error }}</span\n        >\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n\n    <!-- CHILDREN -->\n    <ng-content></ng-content>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%)}:host label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host button{font-weight:500;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199);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);--border-color: var(--grey-800);--sg-border-color: var(--grey-800);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:inherit;font-weight:400;line-height:1.125;margin-bottom:.5rem;margin-top:.5rem;width:100%}@media screen and (-ms-high-contrast: active){:host button{border:2px solid currentcolor}}:host button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host button[aria-selected=true],:host button:active,:host button.active,:host button.active:hover,:host button:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host button:disabled,:host button.disabled,:host button[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host button:disabled::placeholder,:host button.disabled::placeholder,:host button[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--grey-400);--color: var(--grey-1000);background-color:var(--grey-400);color:var(--grey-1000);border-color:var(--grey-1000)}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}\n"] }]
+            args: [{ selector: 'nggv-dropdown', 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 + '-toggle'\"\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=\"description\">{{ description }}</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      [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n      <button\n        [id]=\"id + '-toggle'\"\n        [disabled]=\"disabled\"\n        type=\"button\"\n        class=\"nggv-field-dropdown__label toggle\"\n        [class.nggv-field--error]=\"invalid\"\n        aria-haspopup=\"listbox\"\n        [attr.data-thook]=\"thook + '-toggle'\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.aria-labelledby]=\"\n          ariaLabel ? null : id + '-label ' + id + '-toggle'\n        \"\n        [attr.aria-label]=\"ariaLabel || null\"\n        (click)=\"toggleDropdown()\"\n      >\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </button>\n\n      <nggv-dropdown-list\n        #dropDownList\n        [options]=\"options\"\n        [scrollOffset]=\"scrollOffset\"\n        [state]=\"state\"\n        [expanded]=\"expanded\"\n        [optionContentTpl]=\"optionContentTpl\"\n        [groupLabelTpl]=\"groupLabelTpl\"\n        [textToHighlight]=\"textToHighlight\"\n        (closed)=\"setExpanded(false)\"\n        (selectedValueChanged)=\"onSelectChange($event)\"\n      >\n      </nggv-dropdown-list>\n    </div>\n    <!-- ERRORS -->\n    <div class=\"gds-form-item__footer error-wrapper\">\n      <span\n        class=\"form-info form-info--error\"\n        [attr.for]=\"id + '-input'\"\n        *ngIf=\"invalid && (error || ngControl?.invalid)\"\n      >\n        <span class=\"error-icon\">\n          <gds-icon-triangle-exclamation\n            width=\"16\"\n            height=\"16\"\n            [solid]=\"true\"\n            *nggCoreElement\n          ></gds-icon-triangle-exclamation>\n        </span>\n        <span\n          *ngIf=\"error; else errorsRef\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n          >{{ error }}</span\n        >\n      </span>\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </div>\n\n    <!-- CHILDREN -->\n    <ng-content></ng-content>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%)}:host label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional{font-weight:400}:host button{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);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -3765,11 +3765,11 @@ class NggvTypeaheadDropdownListComponent extends NggvDropdownListComponent {
         return this.selectedFormatter(value) ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTypeaheadDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true, skipSelf: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTypeaheadDropdownListComponent, selector: "nggv-typeahead-dropdown-list", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <!-- group label template (default or custom) -->\n        <ng-template\n          *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n        ></ng-template>\n\n        <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #listGroupTemplate let-item>\n    <ng-container *ngIf=\"groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"!groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicGroupLabelTpl let-item>\n    <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{--gds-ref-pallet-base400: hsl(0, 0%, 81%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-z-index-dropdown: ;--sg-z-index-popover: 1060;--sg-z-index-dropdown-backdrop: 990;--sg-z-index-dropdown: 2000;--sg-popover-background: #fff;--sg-popover-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--text-primary-color: #333;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "component", type: NggvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTypeaheadDropdownListComponent, selector: "nggv-typeahead-dropdown-list", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <!-- group label template (default or custom) -->\n        <ng-template\n          *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n        ></ng-template>\n\n        <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #listGroupTemplate let-item>\n    <ng-container *ngIf=\"groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"!groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicGroupLabelTpl let-item>\n    <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{--gds-ref-pallet-base300: hsl(0, 0%, 87%);--gds-ref-pallet-base400: hsl(0, 0%, 81%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-z-index-dropdown: ;--sg-z-index-popover: 1060;--sg-z-index-dropdown-backdrop: 990;--sg-z-index-dropdown: 2000;--sg-popover-background: #fff;--sg-popover-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--text-primary-color: #333;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base300)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "component", type: NggvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTypeaheadDropdownListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-typeahead-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <!-- group label template (default or custom) -->\n        <ng-template\n          *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n        ></ng-template>\n\n        <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #listGroupTemplate let-item>\n    <ng-container *ngIf=\"groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"!groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicGroupLabelTpl let-item>\n    <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{--gds-ref-pallet-base400: hsl(0, 0%, 81%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-z-index-dropdown: ;--sg-z-index-popover: 1060;--sg-z-index-dropdown-backdrop: 990;--sg-z-index-dropdown: 2000;--sg-popover-background: #fff;--sg-popover-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--text-primary-color: #333;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"] }]
+            args: [{ selector: 'nggv-typeahead-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <!-- group label template (default or custom) -->\n        <ng-template\n          *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n        ></ng-template>\n\n        <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n          <ng-container *ngFor=\"let option of castGroup(item).options\">\n            <ng-template\n              *ngTemplateOutlet=\"\n                listItemTemplate;\n                context: { $implicit: option }\n              \"\n            ></ng-template>\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n\n  <!-- TEMPLATE -->\n  <ng-template #listItemTemplate let-option>\n    <li\n      #optionRefs\n      *ngIf=\"!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          basicOptionContentTpl;\n          context: { $implicit: option }\n        \"\n      >\n      </ng-template>\n    </li>\n    <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n    <li\n      #optionRefs\n      *ngIf=\"!!optionContentTpl\"\n      tabindex=\"-1\"\n      [id]=\"id + '-option-' + option.key\"\n      class=\"gds-dropdown__options__label option\"\n      role=\"option\"\n      #liElem\n      [attr.data-thook]=\"thook + '-option-' + option.key\"\n      [attr.aria-disabled]=\"option.disabled\"\n      [attr.aria-selected]=\"\n        option.key === selectedValue?.key && !!selectedValue?.key\n      \"\n      [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n      (click)=\"updateState(option, $event)\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n      >\n      </ng-template>\n    </li>\n  </ng-template>\n\n  <ng-template #listGroupTemplate let-item>\n    <ng-container *ngIf=\"groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"!groupLabelTpl\">\n      <ng-template\n        *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n      ></ng-template>\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicOptionContentTpl let-option>\n    <nggv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </nggv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n\n  <ng-template #basicGroupLabelTpl let-item>\n    <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{--gds-ref-pallet-base300: hsl(0, 0%, 87%);--gds-ref-pallet-base400: hsl(0, 0%, 81%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-z-index-dropdown: ;--sg-z-index-popover: 1060;--sg-z-index-dropdown-backdrop: 990;--sg-z-index-dropdown: 2000;--sg-popover-background: #fff;--sg-popover-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--text-primary-color: #333;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base300)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: SkipSelf
                 }, {
@@ -3798,6 +3798,8 @@ class NggvTypeaheadInputComponent extends NggvInputComponent$1 {
         this.cdr = cdr;
         /** Boolean to indicate wether the dropdown is expanded or not, to apply appropriate styling */
         this.expanded = false;
+        /** @internal Used to determine wether the input has been moved or not */
+        this.inputMoved = false;
         super.ngOnInit();
     }
     ngOnInit() {
@@ -3813,7 +3815,7 @@ class NggvTypeaheadInputComponent extends NggvInputComponent$1 {
      * @param event fired containing which key was released.
      */
     onKeyUp(event) {
-        if (event.code === 'Space') {
+        if (event.code === 'Space' && this.expanded) {
             event.preventDefault();
         }
     }
@@ -3831,6 +3833,7 @@ class NggvTypeaheadInputComponent extends NggvInputComponent$1 {
                 // Get the height of the parent button so the input can be explicitly set to the same height since it's absolutely positioned
                 this.buttonHeight =
                     this.dropdownButton.getBoundingClientRect().height || 32; // Default to 2em;
+                this.inputMoved = true;
             }
         }, 0);
     }
@@ -3844,6 +3847,10 @@ class NggvTypeaheadInputComponent extends NggvInputComponent$1 {
             .pipe(takeUntil$1(this._destroy$))
             .subscribe((state) => {
             this.expanded = state;
+            // Calling this function from onInit caused issues when DOM has not fully been initialized because of
+            // different CSS used to hide (but not remove) from DOM
+            if (!this.inputMoved)
+                this.moveInput();
             if (this.expanded) {
                 // Weird workaround for setting focus. Didn't set focus, but wrapping in setTimeout solved it.
                 // See suggestion here: https://github.com/ionic-team/stencil/issues/3772#issuecomment-1292599609
@@ -3883,7 +3890,7 @@ class NggvTypeaheadInputComponent extends NggvInputComponent$1 {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTypeaheadInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTypeaheadInputComponent, selector: "nggv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "document:keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div\n    class=\"input-wrapper\"\n    [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n    [ngStyle]=\"{ 'height.px': buttonHeight }\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;top:0;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.gds-field{height:100%;width:100%;min-height:unset;margin-left:1px;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTypeaheadInputComponent, selector: "nggv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div\n    class=\"input-wrapper\"\n    [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n    [ngStyle]=\"{ 'height.px': buttonHeight }\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;top:0;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.gds-field{height:100%;width:100%;min-height:unset;margin-left:1px;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTypeaheadInputComponent, decorators: [{
             type: Component,
@@ -3905,7 +3912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], onKeyUp: [{
                 type: HostListener,
-                args: ['document:keyup', ['$event']]
+                args: ['keyup', ['$event']]
             }] } });
 
 class NggvTypeaheadModule {
@@ -3987,7 +3994,11 @@ class NggvTypeaheadDirective {
         return { key: null, label: this.unselectLabel || '\u00A0' };
     }
     get emptyOption() {
-        return { key: null, label: 'label.nomatchingoptions', disabled: true };
+        return {
+            key: null,
+            label: this.emptyOptionLabel || 'label.nomatchingoptions',
+            disabled: true,
+        };
     }
     /** Name of the component. nggv-dropdown if NggvDropdownComponent or nggv-input if NggvInputComponent */
     get localName() {
@@ -4007,7 +4018,6 @@ class NggvTypeaheadDirective {
     }
     ngOnInit() {
         this.handleInputChanges();
-        this.inputValue$.next('');
         if (this.hostIsDropdown)
             this.createInput();
         else
@@ -4027,6 +4037,8 @@ class NggvTypeaheadDirective {
         this.inputSubscription$ = this.inputValue$
             .pipe(takeUntil$1(this.onDestroy$), distinctUntilChanged$1(), tap$1((inputValue) => this.filterPhraseChange.emit(inputValue)), this.typeaheadFunction ? this.typeaheadFunction : () => from([]), withLatestFrom(this.inputValue$))
             .subscribe(([filteredValues, input]) => this.setOptions(filteredValues, input));
+        // Trigger the pipe when this function have been called
+        this.inputValue$.next('');
     }
     /**
      * @internal
@@ -4064,8 +4076,8 @@ class NggvTypeaheadDirective {
         // Conditionally add empty or nullish option if it's allowed, the input is empty and does not already contain nullish
         const allowNullish = this.allowUnselect &&
             !input &&
-            !(Object.keys(filteredValues[0]).includes('key') &&
-                filteredValues[0].key == null);
+            !(Object.keys(filteredValues[0] ?? {}).includes('key') &&
+                filteredValues[0]?.key == null);
         if (filteredValues.length === 0) {
             filteredValues = [this.emptyOption];
         }
@@ -4098,7 +4110,7 @@ class NggvTypeaheadDirective {
         return options.map((value) => value?.label ? this.resultFormatter?.(value) : value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTypeaheadDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: NggvDropdownComponent, host: true, optional: true }, { token: i2$3.NggvInputComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggvTypeaheadDirective, isStandalone: true, selector: "nggv-input[nggvTypeahead], nggv-dropdown[nggvTypeahead]", inputs: { nggvTypeahead: "nggvTypeahead", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter", allowUnselect: "allowUnselect", unselectLabel: "unselectLabel" }, outputs: { filterPhraseChange: "filterPhraseChange" }, host: { listeners: { "nggvInput": "onNggvInput($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggvTypeaheadDirective, isStandalone: true, selector: "nggv-input[nggvTypeahead], nggv-dropdown[nggvTypeahead]", inputs: { nggvTypeahead: "nggvTypeahead", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter", allowUnselect: "allowUnselect", unselectLabel: "unselectLabel", emptyOptionLabel: "emptyOptionLabel" }, outputs: { filterPhraseChange: "filterPhraseChange" }, host: { listeners: { "nggvInput": "onNggvInput($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTypeaheadDirective, decorators: [{
             type: Directive,
@@ -4124,6 +4136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], unselectLabel: [{
                 type: Input
+            }], emptyOptionLabel: [{
+                type: Input
             }], filterPhraseChange: [{
                 type: Output
             }], onNggvInput: [{
@@ -4550,11 +4564,11 @@ class NggvInputComponent extends NggvBaseControlValueAccessorComponent$1 {
         this.inputChange$.next(this.state);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvInputComponent, selector: "nggv-input", inputs: { thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.class", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\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=\"form-info description hide-if-empty\" *ngIf=\"descriptionIsVisible\">\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      <ng-container *ngIf=\"!inputMask\">\n        {{ state }}\n      </ng-container>\n      <ng-container *ngIf=\"!!inputMask\">\n        {{ state | nggvInputMaskFormat: inputMask }}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}:host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.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-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem}:host .gds-input-wrapper{display:flex;flex-direction:column;position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { 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: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvInputComponent, selector: "nggv-input", inputs: { thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.class", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\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=\"form-info description hide-if-empty\" *ngIf=\"descriptionIsVisible\">\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      <ng-container *ngIf=\"!inputMask\">\n        {{ state }}\n      </ng-container>\n      <ng-container *ngIf=\"!!inputMask\">\n        {{ state | nggvInputMaskFormat: inputMask }}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}:host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.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-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{display:flex;flex-direction:column;position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { 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: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\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=\"form-info description hide-if-empty\" *ngIf=\"descriptionIsVisible\">\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      <ng-container *ngIf=\"!inputMask\">\n        {{ state }}\n      </ng-container>\n      <ng-container *ngIf=\"!!inputMask\">\n        {{ state | nggvInputMaskFormat: inputMask }}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}:host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.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-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem}:host .gds-input-wrapper{display:flex;flex-direction:column;position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"] }]
+            args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\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=\"form-info description hide-if-empty\" *ngIf=\"descriptionIsVisible\">\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      <ng-container *ngIf=\"!inputMask\">\n        {{ state }}\n      </ng-container>\n      <ng-container *ngIf=\"!!inputMask\">\n        {{ state | nggvInputMaskFormat: inputMask }}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}:host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.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-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{display:flex;flex-direction:column;position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -6378,11 +6392,11 @@ class TableComponent {
         return column.ariaLabelSortable?.replace('{{sortOrder}}', sortOrder);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", allowLocalSort: "allowLocalSort", thook: "thook", trThookFn: "trThookFn", ariaLabelCheckboxTh: "ariaLabelCheckboxTh", ariaLabelCheckboxTr: "ariaLabelCheckboxTr", ariaLabelsOrderBy: "ariaLabelsOrderBy" }, outputs: { ngvRowClick: "ngvRowClick", ngvRowSelect: "ngvRowSelect", ngvOrderBy: "ngvOrderBy" }, queries: [{ propertyName: "appendedRowsTemplate", first: true, predicate: TableAppendableRowsTemplateDirective, descendants: true }, { propertyName: "customFooterTemplate", first: true, predicate: TableFooterTemplateDirective, descendants: true }, { propertyName: "customTemplates", predicate: TableTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table class=\"gds-table\" *transloco=\"let t\">\n  <!-- Table header -->\n  <thead>\n    <tr>\n      <!-- Checkbox column for header -->\n      <th *ngIf=\"selectable\" class=\"column__check\">\n        <div class=\"gds-field-checkbox-wrap\">\n          <input\n            type=\"checkbox\"\n            [formControl]=\"groupSelector\"\n            [attr.aria-label]=\"ariaLabelCheckboxTh\"\n            [attr.id]=\"'cb_header__' + initId\"\n            [attr.data-thook]=\"thook\"\n          />\n          <label [attr.for]=\"'cb_header__' + initId\"></label>\n        </div>\n      </th>\n\n      <!-- Other columns -->\n      <th\n        *ngFor=\"let column of tableColumns\"\n        [columnType]=\"column.valueType\"\n        [sortable]=\"column.sortable\"\n        [sortOrder]=\"column.order\"\n        [thook]=\"'column-header-' + !!column.property\"\n        (click)=\"toggleSortOrder(column)\"\n        (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n        [attr.aria-label]=\"getAriaLabel(column)\"\n        [attr.aria-sort]=\"column.order + 'ending'\"\n      >\n        <ng-container\n          *ngIf=\"\n            customHeaderTemplates.get(column.property) as thTemplate;\n            else defaultThTemplate\n          \"\n        >\n          <!-- Cannot infer thTemplate as TemplateRef therefore null -->\n          <ng-template\n            *ngTemplateOutlet=\"\n              thTemplate || null;\n              context: { $implicit: column }\n            \"\n          >\n          </ng-template>\n        </ng-container>\n\n        <ng-template #defaultThTemplate>\n          <button class=\"sg-table-sort\">\n            {{ t(column.label ?? '') }}\n          </button>\n        </ng-template>\n      </th>\n    </tr>\n  </thead>\n\n  <!-- Table body -->\n  <tbody [formGroup]=\"rowSelectors\">\n    <ng-container *ngFor=\"let item of tableData; let i = index\">\n      <tr\n        [attr.data-thook]=\"item | trThook: i : trThookFn\"\n        [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n      >\n        <!-- Checkbox column for row -->\n        <td *ngIf=\"selectable\" class=\"column__check\">\n          <div class=\"gds-field-checkbox-wrap\">\n            <input\n              *ngIf=\"rowSelectors.get(item[rowId])\"\n              type=\"checkbox\"\n              [formControlName]=\"item[rowId]\"\n              [attr.aria-label]=\"ariaLabelCheckboxTr\"\n              [attr.id]=\"'cb_row__' + initId + '_' + i\"\n              [attr.data-thook]=\"'row-select-' + i\"\n            />\n            <label [attr.for]=\"'cb_row__' + initId + '_' + i\"></label>\n          </div>\n        </td>\n\n        <!-- Other columns -->\n        <td\n          *ngFor=\"let column of tableColumns\"\n          (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n          [columnType]=\"column.valueType\"\n          [value]=\"item[column.property]\"\n        >\n          <ng-container\n            *ngIf=\"\n              customRowTemplates.get(column.property) as tdTemplate;\n              else defaultTdTemplate\n            \"\n          >\n            <!-- Cannot infer tdTemplate as TemplateRef therefore null -->\n            <ng-template\n              *ngTemplateOutlet=\"\n                tdTemplate || null;\n                context: { $implicit: item }\n              \"\n            >\n            </ng-template>\n          </ng-container>\n\n          <ng-template #defaultTdTemplate>\n            {{ item[column.property] }}\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- custom appended rows -->\n      <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n        <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n        <ng-container\n          *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n        >\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </tbody>\n\n  <!-- Table footer -->\n  <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n    <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n    <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n  </tfoot>\n</table>\n", styles: ["::ng-deep .gds-table{--gds-ref-pallet-base600: hsl(0, 0%, 53%);--sg-table-header-background: #1a1a1a;--sg-table-header-color: #fff;--sg-table-cell-padding-x: .5rem;--sg-table-cell-padding-y: .6875rem;--sg-table-border-width: 1px;--sg-table-border-color: var(--gds-ref-pallet-base600);--sg-table-sort-icon-color: var(--gds-ref-pallet-base600);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-table-sort-icon-color-active: #fff;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color);border-bottom:none}::ng-deep .gds-table thead tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);background:#333;color:var(--sg-table-header-color);padding:.3rem var(--sg-table-cell-padding-x);text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.sg-sortable .sg-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .sg-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center;border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::ng-deep .gds-table thead tr th .sg-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .sg-table-sort:focus,::ng-deep .gds-table thead tr th .sg-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-ref-pallet-base500);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x);vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:#868686}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}@media (max-width: 36em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:#333}}@media (max-width: 36em) and (hover: none) and (pointer: coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media (max-width: 36em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table tr:hover td{background-color:#f8f8f8}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .sg-table-sort{justify-content:end}::ng-deep .gds-table th.gds-table__numeric-col+:not(.gds-table__numeric-col),::ng-deep .gds-table td.gds-table__numeric-col+:not(.gds-table__numeric-col){padding-left:1rem}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;padding:0;cursor:pointer}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:500}::ng-deep .gds-table tfoot ::ng-deep td{padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x)}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: TableDirective, selector: "[columnType]", inputs: ["columnType", "sortable", "sortOrder", "value", "thook"] }, { kind: "pipe", type: TrThookPipe, name: "trThook" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", allowLocalSort: "allowLocalSort", thook: "thook", trThookFn: "trThookFn", ariaLabelCheckboxTh: "ariaLabelCheckboxTh", ariaLabelCheckboxTr: "ariaLabelCheckboxTr", ariaLabelsOrderBy: "ariaLabelsOrderBy" }, outputs: { ngvRowClick: "ngvRowClick", ngvRowSelect: "ngvRowSelect", ngvOrderBy: "ngvOrderBy" }, queries: [{ propertyName: "appendedRowsTemplate", first: true, predicate: TableAppendableRowsTemplateDirective, descendants: true }, { propertyName: "customFooterTemplate", first: true, predicate: TableFooterTemplateDirective, descendants: true }, { propertyName: "customTemplates", predicate: TableTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #sortableThTemplate let-column>\n  <button class=\"sg-table-sort\" *transloco=\"let t\">\n    <ng-template #thButtonTemplate>\n      {{ t(column.label ?? '') }}\n    </ng-template>\n    <ng-container\n      *ngIf=\"\n        customHeaderTemplates.get(column.property) as thTemplate;\n        else thButtonTemplate\n      \"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n      >\n      </ng-template>\n    </ng-container>\n  </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n  <ng-template #defaultThTemplate>\n    <ng-container *transloco=\"let t\">\n      {{ t(column.label ?? '') }}\n    </ng-container>\n  </ng-template>\n  <ng-container\n    *ngIf=\"\n      customHeaderTemplates.get(column.property) as thTemplate;\n      else defaultThTemplate\n    \"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n    >\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<table class=\"gds-table\" *transloco=\"let t\">\n  <!-- Table header -->\n  <thead>\n    <tr>\n      <!-- Checkbox column for header -->\n      <th *ngIf=\"selectable\" class=\"column__check\">\n        <div class=\"gds-field-checkbox-wrap\">\n          <input\n            type=\"checkbox\"\n            [formControl]=\"groupSelector\"\n            [attr.aria-label]=\"ariaLabelCheckboxTh\"\n            [attr.id]=\"'cb_header__' + initId\"\n            [attr.data-thook]=\"thook\"\n          />\n          <label [attr.for]=\"'cb_header__' + initId\"></label>\n        </div>\n      </th>\n\n      <!-- Other columns -->\n      <th\n        *ngFor=\"let column of tableColumns\"\n        [columnType]=\"column.valueType\"\n        [sortable]=\"column.sortable\"\n        [sortOrder]=\"column.order\"\n        [thook]=\"'column-header-' + !!column.property\"\n        (click)=\"toggleSortOrder(column)\"\n        (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n        [attr.aria-label]=\"getAriaLabel(column)\"\n        [attr.aria-sort]=\"column.order + 'ending'\"\n      >\n        <ng-container *ngIf=\"column.sortable\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              sortableThTemplate;\n              context: { $implicit: column, column: column }\n            \"\n          >\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!column.sortable\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              notSortableThTemplate;\n              context: { $implicit: column, column: column }\n            \"\n          >\n          </ng-container>\n        </ng-container>\n      </th>\n    </tr>\n  </thead>\n\n  <!-- Table body -->\n  <tbody [formGroup]=\"rowSelectors\">\n    <ng-container *ngFor=\"let item of tableData; let i = index\">\n      <tr\n        [attr.data-thook]=\"item | trThook: i : trThookFn\"\n        [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n      >\n        <!-- Checkbox column for row -->\n        <td *ngIf=\"selectable\" class=\"column__check\">\n          <div class=\"gds-field-checkbox-wrap\">\n            <input\n              *ngIf=\"rowSelectors.get(item[rowId])\"\n              type=\"checkbox\"\n              [formControlName]=\"item[rowId]\"\n              [attr.aria-label]=\"ariaLabelCheckboxTr\"\n              [attr.id]=\"'cb_row__' + initId + '_' + i\"\n              [attr.data-thook]=\"'row-select-' + i\"\n            />\n            <label [attr.for]=\"'cb_row__' + initId + '_' + i\"></label>\n          </div>\n        </td>\n\n        <!-- Other columns -->\n        <td\n          *ngFor=\"let column of tableColumns\"\n          (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n          [columnType]=\"column.valueType\"\n          [value]=\"item[column.property]\"\n        >\n          <ng-container\n            *ngIf=\"\n              customRowTemplates.get(column.property) as tdTemplate;\n              else defaultTdTemplate\n            \"\n          >\n            <!-- Cannot infer tdTemplate as TemplateRef therefore null -->\n            <ng-template\n              *ngTemplateOutlet=\"\n                tdTemplate || null;\n                context: { $implicit: item }\n              \"\n            >\n            </ng-template>\n          </ng-container>\n\n          <ng-template #defaultTdTemplate>\n            {{ item[column.property] }}\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- custom appended rows -->\n      <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n        <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n        <ng-container\n          *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n        >\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </tbody>\n\n  <!-- Table footer -->\n  <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n    <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n    <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n  </tfoot>\n</table>\n", styles: ["::ng-deep .gds-table{--gds-ref-pallet-base600: hsl(0, 0%, 53%);--sg-table-header-background: #1a1a1a;--sg-table-header-color: #fff;--sg-table-cell-padding-x: .5rem;--sg-table-cell-padding-y: .6875rem;--sg-table-border-width: 1px;--sg-table-border-color: var(--gds-ref-pallet-base600);--sg-table-sort-icon-color: var(--gds-ref-pallet-base600);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-table-sort-icon-color-active: #fff;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color);width:100%;border-bottom:none}::ng-deep .gds-table thead tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);background:#333;color:var(--sg-table-header-color);padding:.3rem var(--sg-table-cell-padding-x);text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.sg-sortable .sg-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .sg-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center;border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::ng-deep .gds-table thead tr th .sg-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .sg-table-sort:focus,::ng-deep .gds-table thead tr th .sg-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-ref-pallet-base500);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x);vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:#868686}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}@media (max-width: 36em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:#333}}@media (max-width: 36em) and (hover: none) and (pointer: coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media (max-width: 36em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table tr:hover td{background-color:#f8f8f8}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .sg-table-sort{justify-content:end}::ng-deep .gds-table th.gds-table__numeric-col+:not(.gds-table__numeric-col),::ng-deep .gds-table td.gds-table__numeric-col+:not(.gds-table__numeric-col){padding-left:1rem}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:500}::ng-deep .gds-table tfoot ::ng-deep td{padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x)}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: TableDirective, selector: "[columnType]", inputs: ["columnType", "sortable", "sortOrder", "value", "thook"] }, { kind: "pipe", type: TrThookPipe, name: "trThook" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-table', template: "<table class=\"gds-table\" *transloco=\"let t\">\n  <!-- Table header -->\n  <thead>\n    <tr>\n      <!-- Checkbox column for header -->\n      <th *ngIf=\"selectable\" class=\"column__check\">\n        <div class=\"gds-field-checkbox-wrap\">\n          <input\n            type=\"checkbox\"\n            [formControl]=\"groupSelector\"\n            [attr.aria-label]=\"ariaLabelCheckboxTh\"\n            [attr.id]=\"'cb_header__' + initId\"\n            [attr.data-thook]=\"thook\"\n          />\n          <label [attr.for]=\"'cb_header__' + initId\"></label>\n        </div>\n      </th>\n\n      <!-- Other columns -->\n      <th\n        *ngFor=\"let column of tableColumns\"\n        [columnType]=\"column.valueType\"\n        [sortable]=\"column.sortable\"\n        [sortOrder]=\"column.order\"\n        [thook]=\"'column-header-' + !!column.property\"\n        (click)=\"toggleSortOrder(column)\"\n        (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n        [attr.aria-label]=\"getAriaLabel(column)\"\n        [attr.aria-sort]=\"column.order + 'ending'\"\n      >\n        <ng-container\n          *ngIf=\"\n            customHeaderTemplates.get(column.property) as thTemplate;\n            else defaultThTemplate\n          \"\n        >\n          <!-- Cannot infer thTemplate as TemplateRef therefore null -->\n          <ng-template\n            *ngTemplateOutlet=\"\n              thTemplate || null;\n              context: { $implicit: column }\n            \"\n          >\n          </ng-template>\n        </ng-container>\n\n        <ng-template #defaultThTemplate>\n          <button class=\"sg-table-sort\">\n            {{ t(column.label ?? '') }}\n          </button>\n        </ng-template>\n      </th>\n    </tr>\n  </thead>\n\n  <!-- Table body -->\n  <tbody [formGroup]=\"rowSelectors\">\n    <ng-container *ngFor=\"let item of tableData; let i = index\">\n      <tr\n        [attr.data-thook]=\"item | trThook: i : trThookFn\"\n        [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n      >\n        <!-- Checkbox column for row -->\n        <td *ngIf=\"selectable\" class=\"column__check\">\n          <div class=\"gds-field-checkbox-wrap\">\n            <input\n              *ngIf=\"rowSelectors.get(item[rowId])\"\n              type=\"checkbox\"\n              [formControlName]=\"item[rowId]\"\n              [attr.aria-label]=\"ariaLabelCheckboxTr\"\n              [attr.id]=\"'cb_row__' + initId + '_' + i\"\n              [attr.data-thook]=\"'row-select-' + i\"\n            />\n            <label [attr.for]=\"'cb_row__' + initId + '_' + i\"></label>\n          </div>\n        </td>\n\n        <!-- Other columns -->\n        <td\n          *ngFor=\"let column of tableColumns\"\n          (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n          [columnType]=\"column.valueType\"\n          [value]=\"item[column.property]\"\n        >\n          <ng-container\n            *ngIf=\"\n              customRowTemplates.get(column.property) as tdTemplate;\n              else defaultTdTemplate\n            \"\n          >\n            <!-- Cannot infer tdTemplate as TemplateRef therefore null -->\n            <ng-template\n              *ngTemplateOutlet=\"\n                tdTemplate || null;\n                context: { $implicit: item }\n              \"\n            >\n            </ng-template>\n          </ng-container>\n\n          <ng-template #defaultTdTemplate>\n            {{ item[column.property] }}\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- custom appended rows -->\n      <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n        <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n        <ng-container\n          *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n        >\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </tbody>\n\n  <!-- Table footer -->\n  <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n    <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n    <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n  </tfoot>\n</table>\n", styles: ["::ng-deep .gds-table{--gds-ref-pallet-base600: hsl(0, 0%, 53%);--sg-table-header-background: #1a1a1a;--sg-table-header-color: #fff;--sg-table-cell-padding-x: .5rem;--sg-table-cell-padding-y: .6875rem;--sg-table-border-width: 1px;--sg-table-border-color: var(--gds-ref-pallet-base600);--sg-table-sort-icon-color: var(--gds-ref-pallet-base600);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-table-sort-icon-color-active: #fff;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color);border-bottom:none}::ng-deep .gds-table thead tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);background:#333;color:var(--sg-table-header-color);padding:.3rem var(--sg-table-cell-padding-x);text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.sg-sortable .sg-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .sg-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center;border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::ng-deep .gds-table thead tr th .sg-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .sg-table-sort:focus,::ng-deep .gds-table thead tr th .sg-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-ref-pallet-base500);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x);vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:#868686}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}@media (max-width: 36em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:#333}}@media (max-width: 36em) and (hover: none) and (pointer: coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media (max-width: 36em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table tr:hover td{background-color:#f8f8f8}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .sg-table-sort{justify-content:end}::ng-deep .gds-table th.gds-table__numeric-col+:not(.gds-table__numeric-col),::ng-deep .gds-table td.gds-table__numeric-col+:not(.gds-table__numeric-col){padding-left:1rem}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;padding:0;cursor:pointer}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:500}::ng-deep .gds-table tfoot ::ng-deep td{padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x)}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}\n"] }]
+            args: [{ selector: 'nggv-table', template: "<ng-template #sortableThTemplate let-column>\n  <button class=\"sg-table-sort\" *transloco=\"let t\">\n    <ng-template #thButtonTemplate>\n      {{ t(column.label ?? '') }}\n    </ng-template>\n    <ng-container\n      *ngIf=\"\n        customHeaderTemplates.get(column.property) as thTemplate;\n        else thButtonTemplate\n      \"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n      >\n      </ng-template>\n    </ng-container>\n  </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n  <ng-template #defaultThTemplate>\n    <ng-container *transloco=\"let t\">\n      {{ t(column.label ?? '') }}\n    </ng-container>\n  </ng-template>\n  <ng-container\n    *ngIf=\"\n      customHeaderTemplates.get(column.property) as thTemplate;\n      else defaultThTemplate\n    \"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n    >\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<table class=\"gds-table\" *transloco=\"let t\">\n  <!-- Table header -->\n  <thead>\n    <tr>\n      <!-- Checkbox column for header -->\n      <th *ngIf=\"selectable\" class=\"column__check\">\n        <div class=\"gds-field-checkbox-wrap\">\n          <input\n            type=\"checkbox\"\n            [formControl]=\"groupSelector\"\n            [attr.aria-label]=\"ariaLabelCheckboxTh\"\n            [attr.id]=\"'cb_header__' + initId\"\n            [attr.data-thook]=\"thook\"\n          />\n          <label [attr.for]=\"'cb_header__' + initId\"></label>\n        </div>\n      </th>\n\n      <!-- Other columns -->\n      <th\n        *ngFor=\"let column of tableColumns\"\n        [columnType]=\"column.valueType\"\n        [sortable]=\"column.sortable\"\n        [sortOrder]=\"column.order\"\n        [thook]=\"'column-header-' + !!column.property\"\n        (click)=\"toggleSortOrder(column)\"\n        (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n        [attr.aria-label]=\"getAriaLabel(column)\"\n        [attr.aria-sort]=\"column.order + 'ending'\"\n      >\n        <ng-container *ngIf=\"column.sortable\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              sortableThTemplate;\n              context: { $implicit: column, column: column }\n            \"\n          >\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!column.sortable\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              notSortableThTemplate;\n              context: { $implicit: column, column: column }\n            \"\n          >\n          </ng-container>\n        </ng-container>\n      </th>\n    </tr>\n  </thead>\n\n  <!-- Table body -->\n  <tbody [formGroup]=\"rowSelectors\">\n    <ng-container *ngFor=\"let item of tableData; let i = index\">\n      <tr\n        [attr.data-thook]=\"item | trThook: i : trThookFn\"\n        [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n      >\n        <!-- Checkbox column for row -->\n        <td *ngIf=\"selectable\" class=\"column__check\">\n          <div class=\"gds-field-checkbox-wrap\">\n            <input\n              *ngIf=\"rowSelectors.get(item[rowId])\"\n              type=\"checkbox\"\n              [formControlName]=\"item[rowId]\"\n              [attr.aria-label]=\"ariaLabelCheckboxTr\"\n              [attr.id]=\"'cb_row__' + initId + '_' + i\"\n              [attr.data-thook]=\"'row-select-' + i\"\n            />\n            <label [attr.for]=\"'cb_row__' + initId + '_' + i\"></label>\n          </div>\n        </td>\n\n        <!-- Other columns -->\n        <td\n          *ngFor=\"let column of tableColumns\"\n          (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n          [columnType]=\"column.valueType\"\n          [value]=\"item[column.property]\"\n        >\n          <ng-container\n            *ngIf=\"\n              customRowTemplates.get(column.property) as tdTemplate;\n              else defaultTdTemplate\n            \"\n          >\n            <!-- Cannot infer tdTemplate as TemplateRef therefore null -->\n            <ng-template\n              *ngTemplateOutlet=\"\n                tdTemplate || null;\n                context: { $implicit: item }\n              \"\n            >\n            </ng-template>\n          </ng-container>\n\n          <ng-template #defaultTdTemplate>\n            {{ item[column.property] }}\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- custom appended rows -->\n      <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n        <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n        <ng-container\n          *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n        >\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </tbody>\n\n  <!-- Table footer -->\n  <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n    <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n    <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n  </tfoot>\n</table>\n", styles: ["::ng-deep .gds-table{--gds-ref-pallet-base600: hsl(0, 0%, 53%);--sg-table-header-background: #1a1a1a;--sg-table-header-color: #fff;--sg-table-cell-padding-x: .5rem;--sg-table-cell-padding-y: .6875rem;--sg-table-border-width: 1px;--sg-table-border-color: var(--gds-ref-pallet-base600);--sg-table-sort-icon-color: var(--gds-ref-pallet-base600);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-table-sort-icon-color-active: #fff;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color);width:100%;border-bottom:none}::ng-deep .gds-table thead tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);background:#333;color:var(--sg-table-header-color);padding:.3rem var(--sg-table-cell-padding-x);text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.sg-sortable .sg-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .sg-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center;border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::ng-deep .gds-table thead tr th .sg-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .sg-table-sort:focus,::ng-deep .gds-table thead tr th .sg-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-ref-pallet-base500);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x);vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:#868686}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}@media (max-width: 36em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:#333}}@media (max-width: 36em) and (hover: none) and (pointer: coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media (max-width: 36em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table tr:hover td{background-color:#f8f8f8}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .sg-table-sort{justify-content:end}::ng-deep .gds-table th.gds-table__numeric-col+:not(.gds-table__numeric-col),::ng-deep .gds-table td.gds-table__numeric-col+:not(.gds-table__numeric-col){padding-left:1rem}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:500}::ng-deep .gds-table tfoot ::ng-deep td{padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x)}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}\n"] }]
         }], propDecorators: { customTemplates: [{
                 type: ContentChildren,
                 args: [TableTemplateDirective, { descendants: true }]
@@ -6866,11 +6880,11 @@ class NggvTextareaComponent extends NggvBaseControlValueAccessorComponent$1 {
         this.onChange(this.state);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTextareaComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTextareaComponent, selector: "nggv-textarea", inputs: { thook: "thook", placeholder: "placeholder", readonly: "readonly", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", rows: "rows" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-textarea'\"\n  *transloco=\"let t; read: scope\"\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=\"form-info description hide-if-empty\" *ngIf=\"description\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <div\n    [id]=\"id + '-textarea'\"\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 }}\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n  <textarea\n    #input\n    [id]=\"id + '-textarea'\"\n    class=\"gds-field\"\n    [ngClass]=\"{ 'no-resize': !!rows }\"\n    [class.nggv-field--error]=\"invalid\"\n    [attr.name]=\"name\"\n    [attr.required]=\"required\"\n    [disabled]=\"disabled\"\n    [autofocus]=\"autofocus\"\n    [readOnly]=\"readonly\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.role]=\"role\"\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"description\"\n    [value]=\"state\"\n    title=\"\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n  ></textarea>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-textarea'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"hasMaxLength\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host textarea{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice){margin-bottom:.5rem}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label:is(.gds-field-label){margin-bottom:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTextareaComponent, selector: "nggv-textarea", inputs: { thook: "thook", placeholder: "placeholder", readonly: "readonly", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", rows: "rows" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-textarea'\"\n  *transloco=\"let t; read: scope\"\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=\"form-info description hide-if-empty\" *ngIf=\"description\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <div\n    [id]=\"id + '-textarea'\"\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 }}\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n  <textarea\n    #input\n    [id]=\"id + '-textarea'\"\n    class=\"gds-field\"\n    [ngClass]=\"{ 'no-resize': !!rows }\"\n    [class.nggv-field--error]=\"invalid\"\n    [attr.name]=\"name\"\n    [attr.required]=\"required\"\n    [disabled]=\"disabled\"\n    [autofocus]=\"autofocus\"\n    [readOnly]=\"readonly\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.role]=\"role\"\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"description\"\n    [value]=\"state\"\n    title=\"\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n  ></textarea>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-textarea'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"hasMaxLength\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host textarea{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice){margin-bottom:.5rem}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label:is(.gds-field-label){margin-bottom:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-textarea', template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-textarea'\"\n  *transloco=\"let t; read: scope\"\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=\"form-info description hide-if-empty\" *ngIf=\"description\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <div\n    [id]=\"id + '-textarea'\"\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 }}\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n  <textarea\n    #input\n    [id]=\"id + '-textarea'\"\n    class=\"gds-field\"\n    [ngClass]=\"{ 'no-resize': !!rows }\"\n    [class.nggv-field--error]=\"invalid\"\n    [attr.name]=\"name\"\n    [attr.required]=\"required\"\n    [disabled]=\"disabled\"\n    [autofocus]=\"autofocus\"\n    [readOnly]=\"readonly\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.role]=\"role\"\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"description\"\n    [value]=\"state\"\n    title=\"\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n  ></textarea>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-textarea'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"hasMaxLength\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host textarea{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice){margin-bottom:.5rem}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label:is(.gds-field-label){margin-bottom:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}\n"] }]
+            args: [{ selector: 'nggv-textarea', template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-textarea'\"\n  *transloco=\"let t; read: scope\"\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=\"form-info description hide-if-empty\" *ngIf=\"description\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <div\n    [id]=\"id + '-textarea'\"\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 }}\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n  <textarea\n    #input\n    [id]=\"id + '-textarea'\"\n    class=\"gds-field\"\n    [ngClass]=\"{ 'no-resize': !!rows }\"\n    [class.nggv-field--error]=\"invalid\"\n    [attr.name]=\"name\"\n    [attr.required]=\"required\"\n    [disabled]=\"disabled\"\n    [autofocus]=\"autofocus\"\n    [readOnly]=\"readonly\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.role]=\"role\"\n    [attr.rows]=\"rows\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"description\"\n    [value]=\"state\"\n    title=\"\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n  ></textarea>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-textarea'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"hasMaxLength\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host textarea{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice){margin-bottom:.5rem}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label:is(.gds-field-label){margin-bottom:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {