@sebgroup/green-angular 6.2.1 → 6.3.0

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

@@ -1,6 +1,8 @@
 import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
+import * as i3$1 from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
 import * as i0 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 { Component, Input, EventEmitter, Optional, Inject, ViewChildren, HostBinding, Output, TemplateRef, ElementRef, Self, ContentChild, ViewChild, 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';
@@ -10,7 +12,7 @@ import * as i2 from '@sebgroup/green-angular/src/v-angular/core';
 import { DropdownUtils } from '@sebgroup/green-angular/src/v-angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4$1 from '@sebgroup/green-angular/src/lib/shared';
+import * as i5 from '@sebgroup/green-angular/src/lib/shared';
 import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import * as i3 from '@sebgroup/green-angular/src/v-angular/tooltip';
@@ -108,6 +110,10 @@ class NggvDropdownListComponent {
     get expanded() {
         return this._expanded;
     }
+    /**
+     * @deprecated This attribute is no longer used. The dropdown position is now handled by Angular CDK Overlay.
+     * Will be removed in a future release.
+     */
     get positionAttr() {
         return this.dropdownPosition;
     }
@@ -134,15 +140,25 @@ class NggvDropdownListComponent {
          */
         this.selectWithSpace = true;
         /**
-         * When true, the dropdown will automatically choose to open above or below the input
-         * based on available space in the viewport, and will scale its height to fit if needed.
+         * @deprecated This input is no longer used. The dropdown now always chooses position dynamically.
+         * Will be removed in a future release.
          */
         this.dynamicPosition = false;
+        /**
+         * Controls whether the dropdown list should have a vertical margin.
+         * Set to false when the dropdown list is rendered in a CDK overlay and spacing is handled by overlay offset.
+         * Set to true when the dropdown list is used standalone or in other micro frontends, so it maintains visual spacing.
+         * Defaults to true.
+         */
+        this.useMargin = true;
         this.selectedValueChanged = new EventEmitter();
         this.closed = new EventEmitter();
         /** The current active option based on numeric index. */
         this.activeIndex = -1;
-        // Indicates whether the dropdown list should be displayed below ('bottom') or above ('top') the input, based on available space.
+        /**
+         * @deprecated This attribute is no longer used. The dropdown position is now handled by Angular CDK Overlay.
+         * Will be removed in a future release.
+         */
         this.dropdownPosition = 'bottom';
         this.dropdownUtils = new DropdownUtils();
         this._expanded = false;
@@ -188,9 +204,9 @@ class NggvDropdownListComponent {
         // update expanded state
         this._expanded = expanded;
         if (expanded) {
-            if (this.dynamicPosition) {
-                this.setDropdownPosition();
-            }
+            setTimeout(() => {
+                this.setDropdownHeight();
+            }, 0);
             this.refreshSelectedOption();
             this.subscribeToKeyUpEvents();
             this.subscribeToKeyDownEvents();
@@ -372,15 +388,14 @@ class NggvDropdownListComponent {
     }
     /**
      * Calculates available space above and below the dropdown input,
-     * sets dropdownPosition ('top' or 'bottom') accordingly,
      * and dynamically sets the max-height of the dropdown list to fit the viewport.
      */
-    setDropdownPosition() {
+    setDropdownHeight() {
         const dropdown = this.elRef.nativeElement;
-        // dropdown trigger
-        const dropdownInput = dropdown.parentElement;
         const dropdownList = dropdown.querySelector('ul[role="listbox"]');
-        const rect = dropdownInput.getBoundingClientRect();
+        const rect = this.triggerRect;
+        if (!rect || !dropdownList)
+            return;
         const viewportHeight = window.innerHeight;
         const spaceBelow = viewportHeight - rect.bottom;
         const spaceAbove = rect.top;
@@ -389,29 +404,26 @@ class NggvDropdownListComponent {
         const DROPDOWN_MAX_HEIGHT = 500;
         let maxDropdownHeight;
         if (spaceBelow >= DROPDOWN_MAX_HEIGHT) {
-            this.dropdownPosition = 'bottom';
             maxDropdownHeight = DROPDOWN_MAX_HEIGHT;
         }
         else if (spaceAbove >= DROPDOWN_MAX_HEIGHT) {
-            this.dropdownPosition = 'top';
             maxDropdownHeight = DROPDOWN_MAX_HEIGHT;
         }
         else if (spaceBelow > spaceAbove) {
-            this.dropdownPosition = 'bottom';
-            maxDropdownHeight = Math.max(spaceBelow - MARGIN, MIN_HEIGHT); // 10px margin, minimum height 100px
+            maxDropdownHeight = Math.max(spaceBelow - MARGIN, MIN_HEIGHT);
         }
         else {
-            this.dropdownPosition = 'top';
-            maxDropdownHeight = Math.max(spaceAbove - MARGIN, MIN_HEIGHT); // 10px margin, minimum height 100px
+            maxDropdownHeight = Math.max(spaceAbove - MARGIN, MIN_HEIGHT);
         }
         this.renderer.setStyle(dropdownList, 'max-height', `${maxDropdownHeight}px`);
+        this.renderer.setStyle(dropdownList, 'overflow-y', 'auto');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", selectWithSpace: "selectWithSpace", dynamicPosition: "dynamicPosition" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed" }, host: { properties: { "attr.id": "this.id", "attr.data-thook": "this.thook", "attr.data-position": "this.positionAttr" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\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 .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}: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;width:100%;overscroll-behavior:none;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}:host[data-position=top]{top:auto;bottom:100%;transform:translateY(-.5rem)}:host[data-position=bottom]{bottom:0;transform:translateY(calc(100% + .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: "18.2.13", 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", selectWithSpace: "selectWithSpace", dynamicPosition: "dynamicPosition", triggerRect: "triggerRect", useMargin: "useMargin" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed" }, host: { properties: { "attr.id": "this.id", "attr.data-thook": "this.thook", "attr.data-position": "this.positionAttr" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    [class.use-margin]=\"useMargin\"\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;bottom:0;width:100%;z-index:var(--sg-z-index-dropdown)}:host .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;white-space:nowrap;width:1px}: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-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}: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;width:100%;overscroll-behavior:none;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].use-margin{margin-top:.5rem 0rem}: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: "18.2.13", ngImport: i0, type: NggvDropdownListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\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 .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}: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;width:100%;overscroll-behavior:none;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}:host[data-position=top]{top:auto;bottom:100%;transform:translateY(-.5rem)}:host[data-position=bottom]{bottom:0;transform:translateY(calc(100% + .5rem))}\n"] }]
+            args: [{ selector: 'nggv-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    [class.use-margin]=\"useMargin\"\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;bottom:0;width:100%;z-index:var(--sg-z-index-dropdown)}:host .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;white-space:nowrap;width:1px}: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-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}: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;width:100%;overscroll-behavior:none;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].use-margin{margin-top:.5rem 0rem}: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
                 }, {
@@ -453,6 +465,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], dynamicPosition: [{
                 type: Input
+            }], triggerRect: [{
+                type: Input
+            }], useMargin: [{
+                type: Input
             }], selectedValueChanged: [{
                 type: Output
             }], closed: [{
@@ -505,12 +521,14 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
     get defaultNullishOption() {
         return { key: null, label: this.placeholder ?? '\u00A0' };
     }
-    constructor(ngControl, translocoScope, cdr, dropdownUtils) {
+    constructor(ngControl, translocoScope, cdr, dropdownUtils, overlay, vcr) {
         super(ngControl, translocoScope, cdr);
         this.ngControl = ngControl;
         this.translocoScope = translocoScope;
         this.cdr = cdr;
         this.dropdownUtils = dropdownUtils;
+        this.overlay = overlay;
+        this.vcr = vcr;
         /**
          * Special property used for selecting DOM elements during automated UI testing.
          */
@@ -546,6 +564,11 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
          * Defaults to true.
          */
         this.onlyHandleDistinctChanges = true;
+        /**
+         * If true (default), the dropdown list will close when any scrollable ancestor is scrolled.
+         * If false, the dropdown list will reposition itself instead of closing.
+         */
+        this.closeDropdownListOnScroll = true;
         /**
          * Emits changes of the expanded state of the dropdown
          */
@@ -554,6 +577,11 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
         this.expanded = false;
         /** The current option selected based on numeric index. */
         this.activeIndex = -1;
+        /**
+         * Stores the bounding rectangle of the dropdown trigger element,
+         * used for positioning the dropdown list overlay.
+         */
+        this.triggerRect = undefined;
         this.keyEvent = {};
         this._options = [];
     }
@@ -577,6 +605,8 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
     ngOnDestroy() {
         this.onClickSubscription?.unsubscribe();
         this.onScrollSubscription?.unsubscribe();
+        this.resizeSubscription?.unsubscribe();
+        this.overlayDetachSubscription?.unsubscribe();
     }
     /** @internal override to correctly set state from form value */
     writeValue(value) {
@@ -615,17 +645,6 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
             },
         });
     }
-    subscribeToOutsideScrollEvent() {
-        this.onScrollSubscription = fromEvent(document, 'scroll').subscribe({
-            next: (event) => {
-                if (this.expanded &&
-                    !this.inputRef?.nativeElement.contains(event.target)) {
-                    this.toggleDropdown();
-                    this.onScrollSubscription?.unsubscribe();
-                }
-            },
-        });
-    }
     // ----------------------------------------------------------------------------
     // HELPERS
     // ----------------------------------------------------------------------------
@@ -651,11 +670,98 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
         this.expanded = state;
         this.expandedChange.emit(this.expanded);
         if (this.expanded) {
+            this.openDropdownOverlay();
             this.subscribeToOutsideClickEvent();
-            this.subscribeToOutsideScrollEvent();
         }
-        if (!this.expanded)
+        else {
+            this.closeDropdownOverlay();
             this.onTouched();
+        }
+    }
+    /**
+     * Opens the dropdown overlay by detaching any existing overlay reference,
+     * attaching a new overlay, updating its width, and setting up listeners for overlay detachments.
+     * This method ensures the dropdown overlay is properly initialized and displayed.
+     */
+    openDropdownOverlay() {
+        this.detachOldOverlayRef();
+        this.attachNewOverlayRef();
+        this.updateOverlayWidth();
+        this.listenOverlayDetachments();
+    }
+    detachOldOverlayRef() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+        }
+    }
+    attachNewOverlayRef() {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.toggleButton)
+            .withPositions(this.getDropdownListPositionsArray())
+            .withPush(false); // Prevent overlay from overlapping the trigger
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.getScrollStrategy(),
+        });
+        // Get trigger rect and pass to dropdown-list
+        this.triggerRect = this.toggleButton.nativeElement.getBoundingClientRect();
+        this.overlayRef.attach(new TemplatePortal(this.dropdownTemplate, this.vcr));
+    }
+    updateOverlayWidth() {
+        // sets initial width to match trigger element
+        this.setOverlayWidth();
+        // Listen for window resize and update overlay width
+        this.resizeSubscription = fromEvent(window, 'resize').subscribe(() => {
+            this.setOverlayWidth();
+        });
+    }
+    // used to catch when overlay is detached after scroll with list expanded
+    listenOverlayDetachments() {
+        if (this.overlayRef) {
+            this.overlayDetachSubscription = this.overlayRef
+                .detachments()
+                .subscribe(() => {
+                if (this.expanded) {
+                    this.setExpanded(false);
+                }
+            });
+        }
+    }
+    getDropdownListPositionsArray() {
+        return [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 8, // 0.5rem gap below the trigger
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -8, // 0.5rem gap above the trigger
+            },
+        ];
+    }
+    getScrollStrategy() {
+        return this.closeDropdownListOnScroll
+            ? this.overlay.scrollStrategies.close()
+            : this.overlay.scrollStrategies.reposition();
+    }
+    setOverlayWidth() {
+        if (this.overlayRef && this.toggleButton) {
+            const buttonWidth = this.toggleButton.nativeElement.offsetWidth;
+            const pane = this.overlayRef.overlayElement;
+            pane.style.width = `${buttonWidth}px`;
+        }
+    }
+    closeDropdownOverlay() {
+        this.overlayRef?.detach();
+        this.resizeSubscription?.unsubscribe();
+        this.overlayDetachSubscription?.unsubscribe();
     }
     /* TYPE CASTS */
     /**
@@ -680,12 +786,12 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
     isOption(option) {
         return !('options' in option);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", size: "size", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption", selectWithSpace: "selectWithSpace", onlyHandleDistinctChanges: "onlyHandleDistinctChanges" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, 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    *ngIf=\"labelContentTpl || label\"\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\" *ngIf=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\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-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper dropdown-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          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"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          [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n          [selectWithSpace]=\"selectWithSpace\"\n          [dynamicPosition]=\"true\"\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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}: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-sys-color-base-100);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-sys-color-base-600)}: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:not(:last-child){margin-bottom:unset}: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{align-items:center}:host .dropdown-wrapper{position:relative}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}\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", "selectWithSpace", "dynamicPosition"], outputs: ["selectedValueChanged", "closed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.DropdownUtils }, { token: i3$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", size: "size", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption", selectWithSpace: "selectWithSpace", onlyHandleDistinctChanges: "onlyHandleDistinctChanges", closeDropdownListOnScroll: "closeDropdownListOnScroll" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, 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 }], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef }], 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    *ngIf=\"labelContentTpl || label\"\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\" *ngIf=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\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-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper dropdown-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          #toggleButton\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"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        <ng-template #dropdownTemplate>\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            [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n            [selectWithSpace]=\"selectWithSpace\"\n            [triggerRect]=\"triggerRect\"\n            [useMargin]=\"false\"\n            (closed)=\"setExpanded(false)\"\n            (selectedValueChanged)=\"onSelectChange($event)\"\n          >\n          </nggv-dropdown-list>\n        </ng-template>\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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}: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-sys-color-base-100);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-sys-color-base-600)}: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:not(:last-child){margin-bottom:unset}: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{align-items:center}:host .dropdown-wrapper{position:relative}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}\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: i5.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", "selectWithSpace", "dynamicPosition", "triggerRect", "useMargin"], outputs: ["selectedValueChanged", "closed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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    *ngIf=\"labelContentTpl || label\"\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\" *ngIf=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\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-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper dropdown-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          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"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          [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n          [selectWithSpace]=\"selectWithSpace\"\n          [dynamicPosition]=\"true\"\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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}: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-sys-color-base-100);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-sys-color-base-600)}: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:not(:last-child){margin-bottom:unset}: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{align-items:center}:host .dropdown-wrapper{position:relative}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}\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    *ngIf=\"labelContentTpl || label\"\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\" *ngIf=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\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-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper dropdown-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          #toggleButton\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"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        <ng-template #dropdownTemplate>\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            [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n            [selectWithSpace]=\"selectWithSpace\"\n            [triggerRect]=\"triggerRect\"\n            [useMargin]=\"false\"\n            (closed)=\"setExpanded(false)\"\n            (selectedValueChanged)=\"onSelectChange($event)\"\n          >\n          </nggv-dropdown-list>\n        </ng-template>\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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}: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-sys-color-base-100);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-sys-color-base-600)}: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:not(:last-child){margin-bottom:unset}: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{align-items:center}:host .dropdown-wrapper{position:relative}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -695,7 +801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }, {
                     type: Inject,
                     args: [TRANSLOCO_SCOPE]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i2.DropdownUtils }], propDecorators: { selectedContentTpl: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i2.DropdownUtils }, { type: i3$1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { selectedContentTpl: [{
                 type: ContentChild,
                 args: ['selectedTpl', { read: TemplateRef }]
             }], optionContentTpl: [{
@@ -715,6 +821,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], isLarge: [{
                 type: HostBinding,
                 args: ['class.large']
+            }], dropdownTemplate: [{
+                type: ViewChild,
+                args: ['dropdownTemplate']
+            }], toggleButton: [{
+                type: ViewChild,
+                args: ['toggleButton', { read: ElementRef }]
             }], size: [{
                 type: Input
             }], placeholder: [{
@@ -735,6 +847,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], onlyHandleDistinctChanges: [{
                 type: Input
+            }], closeDropdownListOnScroll: [{
+                type: Input
             }], expandedChange: [{
                 type: Output
             }], onKeyUp: [{
@@ -823,11 +937,11 @@ class NggvTypeaheadDropdownListComponent extends NggvDropdownListComponent {
         this.renderer2.setStyle(this.element.nativeElement, 'width', `${this.hostComponent.element.nativeElement.offsetWidth}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true, skipSelf: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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  <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\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;position:relative;bottom:initial!important;transform:translateY(-1rem)!important}\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 .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}: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;width:100%;overscroll-behavior:none;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}:host[data-position=top]{top:auto;bottom:100%;transform:translateY(-.5rem)}:host[data-position=bottom]{bottom:0;transform:translateY(calc(100% + .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.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: "18.2.13", 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  <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    [class.use-margin]=\"useMargin\"\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;position:relative;bottom:initial!important;transform:translateY(-1rem)!important}\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;bottom:0;width:100%;z-index:var(--sg-z-index-dropdown)}:host .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;white-space:nowrap;width:1px}: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-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}: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;width:100%;overscroll-behavior:none;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].use-margin{margin-top:.5rem 0rem}: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.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: "18.2.13", ngImport: i0, type: NggvTypeaheadDropdownListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-typeahead-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\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;position:relative;bottom:initial!important;transform:translateY(-1rem)!important}\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 .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}: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;width:100%;overscroll-behavior:none;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}:host[data-position=top]{top:auto;bottom:100%;transform:translateY(-.5rem)}:host[data-position=bottom]{bottom:0;transform:translateY(calc(100% + .5rem))}\n"] }]
+            args: [{ selector: 'nggv-typeahead-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    [class.use-margin]=\"useMargin\"\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;position:relative;bottom:initial!important;transform:translateY(-1rem)!important}\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;bottom:0;width:100%;z-index:var(--sg-z-index-dropdown)}:host .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;white-space:nowrap;width:1px}: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-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}: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;width:100%;overscroll-behavior:none;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].use-margin{margin-top:.5rem 0rem}: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
                 }, {