@sebgroup/green-angular 5.4.0 → 5.4.2

package/fesm2022/sebgroup-green-angular-src-v-angular-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sebgroup-green-angular-src-v-angular-alert.mjs","sources":["../../../../libs/angular/src/v-angular/alert/alert.models.ts","../../../../libs/angular/src/v-angular/alert/alert.component.ts","../../../../libs/angular/src/v-angular/alert/alert.component.html","../../../../libs/angular/src/v-angular/alert/alert.module.ts","../../../../libs/angular/src/v-angular/alert/sebgroup-green-angular-src-v-angular-alert.ts"],"sourcesContent":["export interface AlertMessage {\n  type: AlertType\n  titleText?: string\n  bodyText?: string\n  linkText?: string\n  actionText?: string\n}\n\nexport enum AlertType {\n  Success = 'success',\n  Information = 'information',\n  Warning = 'warning',\n  Danger = 'danger',\n}\n","import { Component, EventEmitter, Input, Output } from '@angular/core'\n\nimport { AlertType } from './alert.models'\n\n@Component({\n  selector: 'nggv-alert',\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.scss'],\n})\nexport class AlertComponent {\n  @Input() type: AlertType = AlertType.Success\n  @Input() title?: string\n  @Input() body?: string\n  @Input() linkText?: string\n  @Input() actionText?: string\n  @Input() closable = false\n\n  @Output() closeAlert = new EventEmitter()\n  @Output() clickLink = new EventEmitter()\n  @Output() clickAction = new EventEmitter()\n\n  onClose(e: Event): void {\n    this.closeAlert.emit(e)\n  }\n\n  onLink(e: Event): void {\n    this.clickLink.emit(e)\n  }\n\n  onAction(e: Event): void {\n    this.clickAction.emit(e)\n  }\n}\n","<div class=\"alert-container\" role=\"alert\" [ngClass]=\"type\">\n  <ng-container *ngIf=\"type === 'success'; then checkMark; else infoSquare\" />\n  <div>\n    <h3 *ngIf=\"title\">{{ title }}</h3>\n    <p *ngIf=\"body\">\n      {{ body }}&nbsp;<a *ngIf=\"linkText\" (click)=\"onLink($event)\">{{\n        linkText\n      }}</a>\n    </p>\n  </div>\n  <button\n    *ngIf=\"closable && !actionText\"\n    class=\"close\"\n    type=\"button\"\n    (click)=\"onClose($event)\"\n  >\n    <i></i>\n  </button>\n  <footer *ngIf=\"actionText && !closable\">\n    <button type=\"button\" (click)=\"onAction($event)\">\n      {{ actionText }}\n    </button>\n  </footer>\n</div>\n\n<ng-template #checkMark>\n  <i>\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n        fill=\"white\"\n      ></path>\n    </svg>\n  </i>\n</ng-template>\n<ng-template #infoSquare>\n  <i>\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n        fill=\"#333333\"\n      />\n    </svg>\n  </i>\n</ng-template>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { AlertComponent } from './alert.component'\n\n@NgModule({\n  declarations: [AlertComponent],\n  imports: [CommonModule],\n  exports: [AlertComponent],\n})\nexport class NggvAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-alert.mjs","sources":["../../../../libs/angular/src/v-angular/alert/alert.models.ts","../../../../libs/angular/src/v-angular/alert/alert.component.ts","../../../../libs/angular/src/v-angular/alert/alert.component.html","../../../../libs/angular/src/v-angular/alert/alert.module.ts","../../../../libs/angular/src/v-angular/alert/sebgroup-green-angular-src-v-angular-alert.ts"],"sourcesContent":["export interface AlertMessage {\n  type: AlertType\n  titleText?: string\n  bodyText?: string\n  linkText?: string\n  actionText?: string\n}\n\nexport enum AlertType {\n  Success = 'success',\n  Information = 'information',\n  Warning = 'warning',\n  Danger = 'danger',\n}\n","import { Component, EventEmitter, Input, Output } from '@angular/core'\n\nimport { AlertType } from './alert.models'\n\n@Component({\n  selector: 'nggv-alert',\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.scss'],\n})\nexport class AlertComponent {\n  @Input() type: AlertType = AlertType.Success\n  @Input() title?: string\n  @Input() body?: string\n  @Input() linkText?: string\n  @Input() actionText?: string\n  @Input() closable = false\n\n  @Output() closeAlert = new EventEmitter()\n  @Output() clickLink = new EventEmitter()\n  @Output() clickAction = new EventEmitter()\n\n  onClose(e: Event): void {\n    this.closeAlert.emit(e)\n  }\n\n  onLink(e: Event): void {\n    this.clickLink.emit(e)\n  }\n\n  onAction(e: Event): void {\n    this.clickAction.emit(e)\n  }\n}\n","<div class=\"alert-container\" role=\"alert\" [ngClass]=\"type\">\n  <ng-container [ngSwitch]=\"type\">\n    <ng-container\n      *ngSwitchCase=\"'success'\"\n      [ngTemplateOutlet]=\"checkMark\"\n    ></ng-container>\n    <ng-container\n      *ngSwitchCase=\"'information'\"\n      [ngTemplateOutlet]=\"infoSquare\"\n    ></ng-container>\n    <ng-container\n      *ngSwitchDefault\n      [ngTemplateOutlet]=\"exclamationSquare\"\n    ></ng-container>\n  </ng-container>\n  <div>\n    <h3 *ngIf=\"title\">{{ title }}</h3>\n    <p *ngIf=\"body\">\n      {{ body }}&nbsp;<a *ngIf=\"linkText\" (click)=\"onLink($event)\">{{\n        linkText\n      }}</a>\n    </p>\n  </div>\n  <button\n    *ngIf=\"closable && !actionText\"\n    class=\"close\"\n    type=\"button\"\n    (click)=\"onClose($event)\"\n  >\n    <i></i>\n  </button>\n  <footer *ngIf=\"actionText && !closable\">\n    <button type=\"button\" (click)=\"onAction($event)\">\n      {{ actionText }}\n    </button>\n  </footer>\n</div>\n\n<ng-template #checkMark>\n  <i>\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n        fill=\"white\"\n      ></path>\n    </svg>\n  </i>\n</ng-template>\n<ng-template #infoSquare>\n  <i>\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n        fill=\"#333333\"\n      />\n    </svg>\n  </i>\n</ng-template>\n<ng-template #exclamationSquare>\n  <i>\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </i>\n</ng-template>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { AlertComponent } from './alert.component'\n\n@NgModule({\n  declarations: [AlertComponent],\n  imports: [CommonModule],\n  exports: [AlertComponent],\n})\nexport class NggvAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Optional, Inject, ViewChildren, HostBinding, Output, HostListener, TemplateRef, Self, ContentChild, SkipSelf, NgModule, CUSTOM_ELEMENTS_SCHEMA, Directive, Host } from '@angular/core';
+import { Component, Input, EventEmitter, Optional, Inject, ViewChildren, HostBinding, Output, TemplateRef, Self, ContentChild, HostListener, SkipSelf, NgModule, CUSTOM_ELEMENTS_SCHEMA, Directive, Host } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import * as i4 from '@jsverse/transloco';
 import { TRANSLOCO_SCOPE } from '@jsverse/transloco';
-import { Subject, fromEvent, takeUntil, distinctUntilChanged, tap, from, withLatestFrom } from 'rxjs';
+import { Subject, fromEvent, filter, takeUntil, distinctUntilChanged, tap, from, withLatestFrom } from 'rxjs';
 import { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
 import * as i2 from '@sebgroup/green-angular/src/v-angular/core';
 import { DropdownUtils } from '@sebgroup/green-angular/src/v-angular/core';
@@ -129,6 +129,7 @@ class NggvDropdownListComponent {
         this.dropdownUtils = new DropdownUtils();
         this._expanded = false;
         this.closed$ = new Subject();
+        this._flattenedOptions = [];
         if (this.translocoScope)
             this.scope = this.translocoScope.toString();
     }
@@ -168,20 +169,28 @@ class NggvDropdownListComponent {
     setExpanded(expanded = true) {
         // update expanded state
         this._expanded = expanded;
-        if (expanded)
+        if (expanded) {
             this.refreshSelectedOption();
+            this.subscribeToKeyUpEvents();
+            this.subscribeToKeyDownEvents();
+        }
         else {
             this.closed$.next(true);
             this.onClickSubscription?.unsubscribe();
+            this.onKeyDownSubscription?.unsubscribe();
+            this.onKeyUpSubscription?.unsubscribe();
+            // to trigger gc removal
+            this.onKeyDownSubscription = undefined;
+            this.onKeyUpSubscription = undefined;
         }
     }
     /**
      * @internal
      */
     refreshSelectedOption() {
-        const options = this.dropdownUtils.flattenOptions(this.options, !this.optionContentTpl);
+        this._flattenedOptions = this.dropdownUtils.flattenOptions(this.options, !this.optionContentTpl);
         this.activeIndex = this.getActiveIndex();
-        this.state = options[this.activeIndex];
+        this.state = this._flattenedOptions[this.activeIndex];
         this.scrollToResult(this.state);
     }
     /**
@@ -193,15 +202,11 @@ class NggvDropdownListComponent {
      */
     getActiveIndex() {
         if (!!this.selectedValue && this.selectedValue?.key != null) {
-            const selectedIndex = this.dropdownUtils
-                .flattenOptions(this.options, !this.optionContentTpl)
-                .findIndex((option) => option.key != null && option.key === this.selectedValue?.key);
+            const selectedIndex = this._flattenedOptions.findIndex((option) => option.key != null && option.key === this.selectedValue?.key);
             if (selectedIndex > -1)
                 return selectedIndex;
         }
-        return this.dropdownUtils
-            .flattenOptions(this.options, !this.optionContentTpl)
-            .findIndex((option) => option.key != null);
+        return this._flattenedOptions.findIndex((option) => option.key != null);
     }
     /**
      * @internal
@@ -225,12 +230,20 @@ class NggvDropdownListComponent {
      */
     onKeyDown(event) {
         switch (event.key) {
-            case 'Enter': //  Disable form submission
+            case ' ': // Space - placed here to ensure the dropdown-list closes after selecting using "Space"
             case 'ArrowUp': // Disable scrolling up
             case 'ArrowDown': // Disable scrolling down
                 event.preventDefault();
                 event.stopPropagation();
                 return false;
+            case 'Enter': // Disable form submission and select the currently active value
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.expanded) {
+                    const option = this._flattenedOptions[this.activeIndex];
+                    this.updateState(option, event);
+                }
+                return false;
         }
         return true;
     }
@@ -242,7 +255,6 @@ class NggvDropdownListComponent {
     onKeyUp(event) {
         if (!this.expanded)
             return;
-        const options = this.dropdownUtils.flattenOptions(this.options, !this.optionContentTpl);
         let option;
         switch (event.key) {
             case 'Tab':
@@ -250,14 +262,13 @@ class NggvDropdownListComponent {
                 this.setExpanded(false);
                 this.closed.emit();
                 break;
-            case 'Space': // Select the currently chosen value
-            case 'Enter': // Select the currently chosen value
-                option = options[this.activeIndex];
+            case ' ': // Space - select the currently chosen value
+                option = this._flattenedOptions[this.activeIndex];
                 this.updateState(option, event);
                 break;
             case 'Home': // Move to the first option
                 this.activeIndex = 0;
-                option = options[this.activeIndex];
+                option = this._flattenedOptions[this.activeIndex];
                 this.state = option;
                 this.scrollToResult(option);
                 break;
@@ -265,28 +276,40 @@ class NggvDropdownListComponent {
                 if (this.activeIndex > 0)
                     this.activeIndex--;
                 else if (this.activeIndex === 0)
-                    this.activeIndex = options.length - 1;
-                option = options[this.activeIndex];
+                    this.activeIndex = this._flattenedOptions.length - 1;
+                option = this._flattenedOptions[this.activeIndex];
                 this.state = option;
                 this.scrollToResult(option);
                 break;
             case 'ArrowDown': // Move down one step to the next option
-                if (options.length > this.activeIndex + 1)
+                if (this._flattenedOptions.length > this.activeIndex + 1)
                     this.activeIndex++;
-                else if (this.activeIndex === options.length - 1)
+                else if (this.activeIndex === this._flattenedOptions.length - 1)
                     this.activeIndex = 0;
-                option = options[this.activeIndex];
+                option = this._flattenedOptions[this.activeIndex];
                 this.state = option;
                 this.scrollToResult(option);
                 break;
             case 'End': // Move to the last options
-                this.activeIndex = options.length - 1;
-                option = options[this.activeIndex];
+                this.activeIndex = this._flattenedOptions.length - 1;
+                option = this._flattenedOptions[this.activeIndex];
                 this.state = option;
                 this.scrollToResult(option);
                 break;
         }
     }
+    /** @internal */
+    subscribeToKeyUpEvents() {
+        this.onKeyUpSubscription = fromEvent(document, 'keyup')
+            .pipe(filter(() => this.expanded), takeUntil(this.closed$))
+            .subscribe((event) => this.onKeyUp(event));
+    }
+    /** @internal */
+    subscribeToKeyDownEvents() {
+        this.onKeyDownSubscription = fromEvent(document, 'keydown')
+            .pipe(filter(() => this.expanded), takeUntil(this.closed$))
+            .subscribe((event) => this.onKeyDown(event));
+    }
     /**
      * Scrolls focused result into view with a specified offset.
      * @param key the result index which to scroll to.
@@ -311,7 +334,7 @@ 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-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.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "directive", type: i4.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: { 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.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "directive", type: i4.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,
@@ -354,12 +377,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], closed: [{
                 type: Output
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }], onKeyUp: [{
-                type: HostListener,
-                args: ['document:keyup', ['$event']]
             }] } });
 
 /**
@@ -545,11 +562,11 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
         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.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;--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$1.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.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 class=\"gds-input-wrapper\">\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          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\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      <!-- CHILDREN -->\n      <ng-content></ng-content>\n    </div>\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%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .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__expandable-info>div{padding-bottom:.5rem}:host .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__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}: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;text-align:left;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 span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}: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$1.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.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;--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"] }]
+            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 class=\"gds-input-wrapper\">\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          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\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      <!-- CHILDREN -->\n      <ng-content></ng-content>\n    </div>\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%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .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__expandable-info>div{padding-bottom:.5rem}:host .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__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}: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;text-align:left;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 span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}: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
                 }, {
@@ -704,7 +721,6 @@ class NggvTypeaheadInputComponent extends NggvInputComponent {
         this.autocomplete = 'off';
         this.debounceTime = 0;
         this.hostComponent.selectOnSingleOption = false;
-        this.moveInput();
         this.handleExpandedChange();
     }
     /**
@@ -788,11 +804,11 @@ class NggvTypeaheadInputComponent extends NggvInputComponent {
         }
     }
     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: { "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:1px;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:calc(100% - 2px);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,
-            args: [{ selector: 'nggv-typeahead-input', 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"] }]
+            args: [{ selector: 'nggv-typeahead-input', 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:1px;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:calc(100% - 2px);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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {