@sebgroup/green-angular 6.0.4 → 6.1.0-rc.20250730100346703

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

@@ -1,1142 +0,0 @@
-import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
-import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Optional, Inject, ViewChildren, HostBinding, Output, TemplateRef, Self, ContentChild, HostListener, SkipSelf, NgModule, CUSTOM_ELEMENTS_SCHEMA, Directive, Host } from '@angular/core';
-import * as i1$1 from '@angular/forms';
-import * as i4 from '@jsverse/transloco';
-import { TRANSLOCO_SCOPE } from '@jsverse/transloco';
-import { Subject, fromEvent, filter, takeUntil, distinctUntilChanged, tap, from, withLatestFrom } from 'rxjs';
-import { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
-import * as i2 from '@sebgroup/green-angular/src/v-angular/core';
-import { DropdownUtils } from '@sebgroup/green-angular/src/v-angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4$1 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';
-import { NggvTooltipModule } from '@sebgroup/green-angular/src/v-angular/tooltip';
-import { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n';
-import * as i2$1 from '@sebgroup/green-angular/src/v-angular/input';
-import { NggvInputComponent } from '@sebgroup/green-angular/src/v-angular/input';
-
-class NggvTypeaheadHighlightComponent {
-    constructor() {
-        this.text = '';
-        this.input = '';
-        /**
-         * Regexp of characters that are allowed in textContent without being found in textToHighlight
-         * Allow whitespaces.
-         * */
-        this.allowedNonMatchingChars = new RegExp(/\s/);
-    }
-    ngOnChanges(changes) {
-        const { textContent, textToHighlight } = changes;
-        if (textContent?.currentValue != null)
-            this.text = `${textContent.currentValue}`;
-        if (textToHighlight?.currentValue != null)
-            this.input = `${textToHighlight.currentValue}`;
-        this.updateValues();
-    }
-    updateValues() {
-        const splittedText = this.text.toLocaleLowerCase().split('');
-        const splittedInput = this.input.toLocaleLowerCase().split('');
-        const { start, end } = this.getHighlightedPart(splittedText, splittedInput);
-        // If user input is not found within the textcontent, reset options and return.
-        if (start === -1 || end === -1) {
-            this.prefix = this.match = this.suffix = '';
-            return;
-        }
-        this.prefix = this.text.substring(0, start);
-        this.match = this.text.substring(start, end);
-        this.suffix = this.text.substring(end);
-    }
-    /**
-     * Function that finds the start and end index of where the input is located within the text to display.
-     * First occurence is returned. Allows for spaces to occur despite input not matching space.
-     * Loops through each character in splittedText and when a char in splittedText equlas the first character of
-     * splittedInput, evaluate wether it's match on the entire input.
-     * - If it's => return indexes.
-     * - If it's not => break out and check next char in outer loop.
-     * @param splittedText the text content splitted in an array
-     * @param splittedInput the input splitted in an array
-     * @returns { start: number, end: number } Indexes of where the match starts and ends in the text displatyed
-     */
-    getHighlightedPart(splittedText, splittedInput) {
-        let start = -1;
-        let end = -1;
-        for (let i = 0; i < splittedText.length; i++) {
-            // If start and end have been set, break and return
-            if (start > -1 || end > -1)
-                break;
-            // If current char match first in input, try see if whole input match from that index
-            if (splittedText[i] === splittedInput[0]) {
-                let matches = 1;
-                for (let t = 1; t <= splittedText.length; t++) {
-                    // If match on last character of input, we're finished.
-                    if (matches === splittedInput.length) {
-                        start = i;
-                        end = start + t;
-                        break;
-                    }
-                    if (splittedText[t + i] === splittedInput[matches])
-                        matches++;
-                    else if (this.allowedNonMatchingChars.test(splittedText[t + i]))
-                        continue; // Ignore whitespace, continue
-                    else
-                        break; // No match, break out of inner loop to check next char in text
-                }
-            }
-        }
-        return { start, end };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: { textContent: "textContent", textToHighlight: "textToHighlight" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!this.match\">{{ textContent }}</ng-container>\n<!-- Note that this is sensitive to line breaks producing extra spacing between the different parts -->\n<ng-container *ngIf=\"!!this.match\">\n  {{ prefix || '' }}<span class=\"match\">{{ match }}</span\n  >{{ suffix || '' }}\n</ng-container>\n", styles: [":host .match{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadHighlightComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'nggv-typeahead-highlight', template: "<ng-container *ngIf=\"!this.match\">{{ textContent }}</ng-container>\n<!-- Note that this is sensitive to line breaks producing extra spacing between the different parts -->\n<ng-container *ngIf=\"!!this.match\">\n  {{ prefix || '' }}<span class=\"match\">{{ match }}</span\n  >{{ suffix || '' }}\n</ng-container>\n", styles: [":host .match{font-weight:500}\n"] }]
-        }], propDecorators: { textContent: [{
-                type: Input
-            }], textToHighlight: [{
-                type: Input
-            }] } });
-
-class NggvDropdownListComponent {
-    set expanded(state) {
-        this.setExpanded(state);
-    }
-    get expanded() {
-        return this._expanded;
-    }
-    constructor(translocoScope) {
-        this.translocoScope = translocoScope;
-        /** The additional amount to show when option is scrolled into view. */
-        this.scrollOffset = 24;
-        /** Id of the host element and is accessible by the children, automatically generated if not provided. */
-        this.id = window.nggv?.nextId();
-        /** Special property used for selecting DOM elements during automated UI testing. */
-        this.thook = 'dropdown';
-        /**
-         * Used to control if "selectedValueChanged" only should emit distinct changes, or each time a value is selected
-         * When true, value is not emitted if there's no distinct change
-         * When false, value is emitted every time an option is selected
-         * */
-        this.onlyEmitDistinctChanges = true;
-        /**
-         * Used to control if the dropdown list should select the current active element, when Space is pressed on the keyboard.
-         * Primary usage is for typeahead, where the should be able to write a filter query containing spaces,
-         * but not select the current active element with Space.
-         */
-        this.selectWithSpace = true;
-        this.selectedValueChanged = new EventEmitter();
-        this.closed = new EventEmitter();
-        /** The current active option based on numeric index. */
-        this.activeIndex = -1;
-        this.dropdownUtils = new DropdownUtils();
-        this._expanded = false;
-        this.closed$ = new Subject();
-        this._flattenedOptions = [];
-        if (this.translocoScope)
-            this.scope = this.translocoScope.toString();
-    }
-    ngOnInit() {
-        if (this.state)
-            this.activeIndex = this.options.findIndex((option) => option.key === this.state.key);
-    }
-    ngOnChanges(changes) {
-        if (!!changes.state && !changes.state.firstChange)
-            this.selectedValue = changes.state.currentValue;
-        if (!!changes.options?.currentValue?.length && this.expanded)
-            this.refreshSelectedOption();
-    }
-    /**
-     * Returns true if argument is an {@link OptionGroup}.
-     * @param option the object to check.
-     */
-    isGroup(option) {
-        return 'options' in option;
-    }
-    /** @internal */
-    updateState(option, event) {
-        if (option.disabled)
-            return;
-        if (!this.onlyEmitDistinctChanges ||
-            !this.dropdownUtils.deepEqual(this.selectedValue, option)) {
-            this.selectedValue = option;
-            this.state = option;
-            this.selectedValueChanged.emit(option);
-        }
-        this.setExpanded(false);
-        event.stopPropagation();
-    }
-    /**
-     * @internal
-     */
-    setExpanded(expanded = true) {
-        // update expanded state
-        this._expanded = expanded;
-        if (expanded) {
-            this.refreshSelectedOption();
-            this.subscribeToKeyUpEvents();
-            this.subscribeToKeyDownEvents();
-        }
-        else {
-            this.closed$.next(true);
-            this.onClickSubscription?.unsubscribe();
-            this.onKeyDownSubscription?.unsubscribe();
-            this.onKeyUpSubscription?.unsubscribe();
-            // to trigger gc removal
-            this.onKeyDownSubscription = undefined;
-            this.onKeyUpSubscription = undefined;
-        }
-    }
-    /**
-     * @internal
-     */
-    refreshSelectedOption() {
-        this._flattenedOptions = this.dropdownUtils.flattenOptions(this.options, !this.optionContentTpl);
-        this.activeIndex = this.getActiveIndex();
-        this.state = this._flattenedOptions[this.activeIndex];
-        this.scrollToResult(this.state);
-    }
-    /**
-     * @internal
-     * @returns The active index (number) if option is found, -1 otherwise.
-     * - If a selectedValue exists that's not nullish and that options is found, return that index
-     * - Else, return first non nullish index
-     * - If none of the above criterias are met, -1 are returned
-     */
-    getActiveIndex() {
-        if (!!this.selectedValue && this.selectedValue?.key != null) {
-            const selectedIndex = this._flattenedOptions.findIndex((option) => option.key != null && option.key === this.selectedValue?.key);
-            if (selectedIndex > -1)
-                return selectedIndex;
-        }
-        return this._flattenedOptions.findIndex((option) => option.key != null);
-    }
-    /**
-     * @internal
-     * evaluates wether the HTML element overflows
-     * @param elem The HTMLElement to evaluate
-     * */
-    isOverflow(elem) {
-        return elem.offsetWidth < elem.scrollWidth;
-    }
-    /**
-     * Typecast anything to an {@link OptionGroup}.
-     * @param group the object to typecast.
-     */
-    castGroup(group) {
-        return group;
-    }
-    /**
-     * @internal
-     * Disables default events.
-     * @param event fired containing which key was pressed.
-     */
-    onKeyDown(event) {
-        // If space is pressed but it should not select an option, do nothing
-        if (event.key === ' ' && !this.selectWithSpace)
-            return true;
-        switch (event.key) {
-            case ' ': // Space - placed here to ensure the dropdown-list closes after selecting using "Space"
-            case 'ArrowUp': // Disable scrolling up
-            case 'ArrowDown': // Disable scrolling down
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-            case 'Enter': // Disable form submission and select the currently active value
-                event.preventDefault();
-                event.stopPropagation();
-                if (this.expanded) {
-                    const option = this._flattenedOptions[this.activeIndex];
-                    this.updateState(option, event);
-                }
-                return false;
-            case 'Tab': // trigger dropdown to close (for typeahead)
-                event.preventDefault();
-                event.stopPropagation();
-                if (this.expanded) {
-                    this.setExpanded(false);
-                    this.closed.emit();
-                }
-                return false;
-        }
-        return true;
-    }
-    /**
-     * @internal
-     * Enter toggles the dropdown, home, end, and, arrows change the index.
-     * Space selects the currently active option if `selectWithSpace` is true.
-     * @param event fired containing which key was released.
-     */
-    onKeyUp(event) {
-        // If space is pressed but it should not select an option, do nothing
-        if (!this.expanded || (event.key === ' ' && !this.selectWithSpace))
-            return;
-        let option;
-        switch (event.key) {
-            case 'Escape':
-                this.setExpanded(false);
-                this.closed.emit();
-                break;
-            case ' ': // Space - select the currently chosen value
-                option = this._flattenedOptions[this.activeIndex];
-                this.updateState(option, event);
-                break;
-            case 'Home': // Move to the first option
-                this.activeIndex = 0;
-                option = this._flattenedOptions[this.activeIndex];
-                this.state = option;
-                this.scrollToResult(option, true);
-                break;
-            case 'ArrowUp': // Move up one step to the previous option
-                if (this.activeIndex > 0)
-                    this.activeIndex--;
-                else if (this.activeIndex === 0)
-                    this.activeIndex = this._flattenedOptions.length - 1;
-                option = this._flattenedOptions[this.activeIndex];
-                this.state = option;
-                this.scrollToResult(option, true);
-                break;
-            case 'ArrowDown': // Move down one step to the next option
-                if (this._flattenedOptions.length > this.activeIndex + 1)
-                    this.activeIndex++;
-                else if (this.activeIndex === this._flattenedOptions.length - 1)
-                    this.activeIndex = 0;
-                option = this._flattenedOptions[this.activeIndex];
-                this.state = option;
-                this.scrollToResult(option, true);
-                break;
-            case 'End': // Move to the last options
-                this.activeIndex = this._flattenedOptions.length - 1;
-                option = this._flattenedOptions[this.activeIndex];
-                this.state = option;
-                this.scrollToResult(option, true);
-                break;
-        }
-    }
-    /** @internal */
-    subscribeToKeyUpEvents() {
-        this.onKeyUpSubscription = fromEvent(document, 'keyup')
-            .pipe(filter(() => this.expanded), takeUntil(this.closed$))
-            .subscribe((event) => this.onKeyUp(event));
-    }
-    /** @internal */
-    subscribeToKeyDownEvents() {
-        this.onKeyDownSubscription = fromEvent(document, 'keydown')
-            .pipe(filter(() => this.expanded), takeUntil(this.closed$))
-            .subscribe((event) => this.onKeyDown(event));
-    }
-    /**
-     * Scrolls focused result into view with a specified offset.
-     * @param key the result index which to scroll to.
-     */
-    scrollToResult(option, focusElement) {
-        if (!this.optionRefs || !option)
-            return;
-        const optionRef = this.optionRefs.find((li) => li.nativeElement.id === this.id + '-option-' + option.key);
-        const offset = this.scrollOffset;
-        if (optionRef) {
-            let delta = window.scrollY || document.documentElement.scrollTop;
-            // The list seems not to be visible at the time of scrolling, but this setTimeout "hack" makes it work...
-            setTimeout(() => {
-                scrollIntoView(optionRef.nativeElement, {
-                    scrollMode: 'if-needed',
-                    block: 'nearest',
-                });
-                delta -= window.scrollY || document.documentElement.scrollTop;
-                if (delta) {
-                    window.scrollBy(0, delta > 0 ? -offset : offset);
-                }
-                if (focusElement) {
-                    optionRef.nativeElement.focus();
-                }
-            }, 0);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true }], 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" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed" }, host: { properties: { "attr.id": "this.id", "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <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-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;width:100%;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base300)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NggvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }, { kind: "directive", type: i3.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;width:100%;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base300)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [TRANSLOCO_SCOPE]
-                }] }], propDecorators: { expanded: [{
-                type: Input
-            }], state: [{
-                type: Input
-            }], scrollOffset: [{
-                type: Input
-            }], optionContentTpl: [{
-                type: Input
-            }], groupLabelTpl: [{
-                type: Input
-            }], optionRefs: [{
-                type: ViewChildren,
-                args: ['optionRefs']
-            }], id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }, {
-                type: Input
-            }], thook: [{
-                type: HostBinding,
-                args: ['attr.data-thook']
-            }, {
-                type: Input
-            }], options: [{
-                type: Input
-            }], textToHighlight: [{
-                type: Input
-            }], onlyEmitDistinctChanges: [{
-                type: Input
-            }], selectWithSpace: [{
-                type: Input
-            }], selectedValueChanged: [{
-                type: Output
-            }], closed: [{
-                type: Output
-            }] } });
-
-/**
- * A dropdown allows the user to select an option from a list.
- * Dropdowns enables users to make a quick selection of the available options for a specific entry.
- * https://designlibrary.sebgroup.com/components/component-dropdown
- */
-class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
-    get isSmall() {
-        return this.size === 'small';
-    }
-    get isLarge() {
-        return this.size === 'large';
-    }
-    /** List of {@link Option} and {@link OptionGroup} listed when dropdown is expanded. */
-    set options(value) {
-        // update options
-        this._options = value;
-        // already has a null/undefined key
-        const nullishOption = this.dropdownUtils
-            .flattenOptions(value, false)
-            .find((option) => option.key == null);
-        // if the dropdown is optional, add a null value to deselect option
-        if (!this.required && !nullishOption && this.allowControlNullishOption) {
-            this._options = [this.defaultNullishOption].concat(this._options);
-        }
-        // set default value and emit if there is only one option
-        if (value.length === 1 && this.required && this.selectOnSingleOption) {
-            const onlyOption = this.dropdownUtils.flattenOptions(value, false)[0];
-            this.updateModel(onlyOption);
-            return;
-        }
-        // don't update local state if we shouldn't control nullish value and we cant find the selected value amongst the options
-        const matchingOption = this.dropdownUtils
-            .flattenOptions(value, false)
-            .find((option) => option.key == this.ngControl?.value);
-        if (!this.allowControlNullishOption && !matchingOption)
-            return;
-        // Update local state
-        this.writeValue(this.ngControl?.value);
-    }
-    get options() {
-        return this._options;
-    }
-    /** @internal nullish option. */
-    get defaultNullishOption() {
-        return { key: null, label: this.placeholder ?? '\u00A0' };
-    }
-    constructor(ngControl, translocoScope, cdr, dropdownUtils) {
-        super(ngControl, translocoScope, cdr);
-        this.ngControl = ngControl;
-        this.translocoScope = translocoScope;
-        this.cdr = cdr;
-        this.dropdownUtils = dropdownUtils;
-        /**
-         * Special property used for selecting DOM elements during automated UI testing.
-         */
-        this.thook = 'dropdown';
-        /**
-         * Sets the displayed size of the dropdown.
-         */
-        this.size = 'large';
-        /** The additional amount to show when option is scrolled into view. */
-        this.scrollOffset = 24;
-        /**
-         * Allow this component to add/ remove nullish options based on wether the control is required or not
-         * Defaults to true.
-         */
-        this.allowControlNullishOption = true;
-        /**
-         * If only one option exists in options[], default is to select it.
-         * This input can be used to alter that behaviour so it doesn't automatically
-         * select a value if it's the only one.
-         * Defaults to true.
-         */
-        this.selectOnSingleOption = true;
-        /**
-         * Used to control if the dropdown list should select the current active element, when Space is pressed on the keyboard.
-         * Primary usage is for typeahead, where the should be able to write a filter query containing spaces,
-         * but not select the current active element with Space.
-         */
-        this.selectWithSpace = true;
-        /**
-         * Used to determine which changes should be handled by the dropdown.
-         * If set to false, all changes will be handled by the dropdown.
-         * If set to true, only changes that are distinct from the current value will be handled.
-         * Defaults to true.
-         */
-        this.onlyHandleDistinctChanges = true;
-        /**
-         * Emits changes of the expanded state of the dropdown
-         */
-        this.expandedChange = new EventEmitter();
-        /** The current expanded state of the dropdown options. */
-        this.expanded = false;
-        /** The current option selected based on numeric index. */
-        this.activeIndex = -1;
-        this.keyEvent = {};
-        this._options = [];
-    }
-    ngOnChanges(changes) {
-        if (changes.required?.currentValue !== undefined) {
-            const isRequired = changes.required.currentValue;
-            // remove nullish option
-            const hasNullishOption = this.dropdownUtils.flattenOptions(this._options, false)[0]?.key == null;
-            // if required, remove nullish option
-            if (isRequired && hasNullishOption && this.allowControlNullishOption) {
-                this._options = this._options.slice(1);
-                return;
-            }
-            // if not required, add nullish option
-            if (!isRequired && !hasNullishOption && this.allowControlNullishOption) {
-                this._options = [this.defaultNullishOption].concat(this._options);
-                return;
-            }
-        }
-    }
-    ngOnDestroy() {
-        this.onClickSubscription?.unsubscribe();
-    }
-    /** @internal override to correctly set state from form value */
-    writeValue(value) {
-        const options = this.dropdownUtils.flattenOptions(this._options, false);
-        this.state = options.find((option) => option.key === value);
-    }
-    // ----------------------------------------------------------------------------
-    // EVENTS
-    // ----------------------------------------------------------------------------
-    /** @internal */
-    onSelectChange(option) {
-        if (option.disabled)
-            return;
-        this.updateModel(option);
-        this.setExpanded(false);
-    }
-    // /**
-    //  * @internal
-    //  * Enter toggles the dropdown, home, end, and, arrows change the index.
-    //  * @param event fired containing which key was released.
-    //  */
-    onKeyUp(event) {
-        this.keyEvent = event;
-    }
-    /**
-     * Closes the dropdown on click outside.
-     */
-    subscribeToOutsideClickEvent() {
-        this.onClickSubscription = fromEvent(document, 'click').subscribe({
-            next: (event) => {
-                if (this.expanded &&
-                    !this.inputRef?.nativeElement.contains(event.target)) {
-                    this.toggleDropdown();
-                    this.onClickSubscription?.unsubscribe();
-                }
-            },
-        });
-    }
-    // ----------------------------------------------------------------------------
-    // HELPERS
-    // ----------------------------------------------------------------------------
-    /**
-     * Set the dropdown value to given option.
-     * @param value the dropdown option to select.
-     */
-    updateModel(value) {
-        this.state = value;
-        this.onChange(value.key);
-    }
-    /** Toggle the expanded state of the dropdown options. */
-    toggleDropdown() {
-        this.setExpanded(!this.expanded);
-        this.cdr.detectChanges();
-    }
-    /**
-     * Set the expanded state of the dropdown options. If true the options are shown below the field.
-     * Activate on click event to be able to close dropdown on click outside.
-     * @param state the expanded state which to set.
-     */
-    setExpanded(state = true) {
-        this.expanded = state;
-        this.expandedChange.emit(this.expanded);
-        if (this.expanded)
-            this.subscribeToOutsideClickEvent();
-        if (!this.expanded)
-            this.onTouched();
-    }
-    /* TYPE CASTS */
-    /**
-     * Typecast anything to an {@link Option}.
-     * @param option the object to typecast.
-     */
-    castOption(option) {
-        return option;
-    }
-    /**
-     * Typecast anything to an {@link OptionGroup}.
-     * @param group the object to typecast.
-     */
-    castGroup(group) {
-        return group;
-    }
-    /* TYPE CHECKS */
-    /**
-     * Returns true if argument is an {@link Option}.
-     * @param option the object to check.
-     */
-    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\">\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          (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-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host: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{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}\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"], 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\">\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          (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-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host: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{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}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
-                    type: Self
-                }, {
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [TRANSLOCO_SCOPE]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i2.DropdownUtils }], propDecorators: { selectedContentTpl: [{
-                type: ContentChild,
-                args: ['selectedTpl', { read: TemplateRef }]
-            }], optionContentTpl: [{
-                type: ContentChild,
-                args: ['optionTpl', { read: TemplateRef }]
-            }], groupLabelTpl: [{
-                type: ContentChild,
-                args: ['groupLabelTpl', { read: TemplateRef }]
-            }], thook: [{
-                type: HostBinding,
-                args: ['attr.data-thook']
-            }, {
-                type: Input
-            }], isSmall: [{
-                type: HostBinding,
-                args: ['class.small']
-            }], isLarge: [{
-                type: HostBinding,
-                args: ['class.large']
-            }], size: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], scrollOffset: [{
-                type: Input
-            }], allowControlNullishOption: [{
-                type: Input
-            }], textToHighlight: [{
-                type: Input
-            }], selectOnSingleOption: [{
-                type: Input
-            }], selectWithSpace: [{
-                type: Input
-            }], onlyHandleDistinctChanges: [{
-                type: Input
-            }], expandedChange: [{
-                type: Output
-            }], onKeyUp: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }] } });
-
-// Use dropdownList template and combine stylesheets
-class NggvTypeaheadDropdownListComponent extends NggvDropdownListComponent {
-    constructor(translocoScope, renderer2, element) {
-        super(translocoScope);
-        this.translocoScope = translocoScope;
-        this.renderer2 = renderer2;
-        this.element = element;
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.handleSelectedValueChanges();
-        this.handleFocusChanges();
-    }
-    ngOnDestroy() {
-        this._destroy$.next(true);
-        this._destroy$.complete();
-    }
-    /** @Internal Subscribe to click outside dropdownList and input to close dropdownList */
-    subscribeToOutsideClickEvent() {
-        this.onClickSubscription = fromEvent(document, 'click')
-            .pipe(takeUntil(this._destroy$))
-            .subscribe({
-            next: (event) => {
-                if (this.expanded &&
-                    !this.element.nativeElement.contains(event.target) &&
-                    !this.hostComponent.inputRef?.nativeElement.contains(event.target)) {
-                    this.setExpanded(false);
-                    this.onClickSubscription?.unsubscribe();
-                }
-            },
-        });
-    }
-    /** @Internal Update state of the host-input to reflect the selected value */
-    handleSelectedValueChanges() {
-        this.selectedValueChanged
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((selected) => {
-            if (this.hostComponent.inputRef) {
-                this.hostComponent.state = `${this.formatSelected(selected)}`;
-            }
-        });
-    }
-    /** @Internal Expand the dropdown when input receives focus. If no state, set empty string in input */
-    handleFocusChanges() {
-        this.hostComponent.nggvFocus
-            .asObservable()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            if (!this.state)
-                this.hostComponent.nggvInput.emit('');
-            this.setExpanded(true);
-            this.subscribeToOutsideClickEvent();
-        });
-    }
-    /**
-     * @internal Formats the selected option to display in the input. Interpolate the returned value
-     * since we don't know the return type or label type.
-     * @param value The selected value
-     * @returns The formatted value
-     */
-    formatSelected(value) {
-        if (value?.key == null)
-            return '';
-        //If no formatter exists, return the label or empty string
-        if (!this.selectedFormatter)
-            return value.label ?? '';
-        // If a formatter exists, use it
-        return this.selectedFormatter(value) ?? '';
-    }
-    /**
-     *
-     * @param expanded boolean to set if dropdown is expanded
-     */
-    setExpanded(expanded = true) {
-        super.setExpanded(expanded);
-        /**
-         * Makes the typeahead dropdown as wide as the host component
-         */
-        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-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;width:100%;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base300)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.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-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;width:100%;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base300)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: SkipSelf
-                }, {
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [TRANSLOCO_SCOPE]
-                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hostComponent: [{
-                type: Input
-            }], resultFormatter: [{
-                type: Input
-            }], selectedFormatter: [{
-                type: Input
-            }] } });
-
-class NggvTypeaheadInputComponent extends NggvInputComponent {
-    get dropdownButton() {
-        return this.hostComponent.inputRef?.nativeElement;
-    }
-    constructor(element, renderer2, ngControl, translocoScope, cdr) {
-        super(ngControl, translocoScope, cdr, element);
-        this.element = element;
-        this.renderer2 = renderer2;
-        this.ngControl = ngControl;
-        this.translocoScope = translocoScope;
-        this.cdr = cdr;
-        /** Boolean to indicate wether the dropdown is expanded or not, to apply appropriate styling */
-        this.expanded = false;
-        /** @internal Used to determine wether the input has been moved or not */
-        this.inputMoved = false;
-        super.ngOnInit();
-    }
-    ngOnInit() {
-        this.autocomplete = 'off';
-        this.debounceTime = 0;
-        this.hostComponent.selectOnSingleOption = false;
-        this.handleExpandedChange();
-    }
-    /**
-     * @internal
-     * Allow space to be inputted as text
-     * @param event fired containing which key was released.
-     */
-    onKeyUp(event) {
-        if (event.code === 'Space' && this.expanded) {
-            event.preventDefault();
-        }
-    }
-    /**
-     * @internal
-     * First time the dropdown is expanded, move the input sp it becomes a child of the dropdown button
-     * to better reflect semantics and styling.
-     */
-    moveInput() {
-        // Workaround to execute code in setTimeout due to hooks management etc.
-        setTimeout(() => {
-            // Only move if parent dropdown is found
-            if (this.dropdownButton) {
-                this.renderer2.appendChild(this.dropdownButton.querySelector('button'), this.element.nativeElement);
-                this.inputMoved = true;
-            }
-        }, 0);
-    }
-    /**
-     * @internal
-     * When dropdown is expanded, focus on the input. If a value is selected, set it in the input.
-     * When the dropdown is collapsed, empty the input from text.
-     */
-    handleExpandedChange() {
-        this.hostComponent.expandedChange
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((state) => {
-            this.expanded = state;
-            // Calling this function from onInit caused issues when DOM has not fully been initialized because of
-            // different CSS used to hide (but not remove) from DOM
-            if (!this.inputMoved)
-                this.moveInput();
-            // Get the height of the parent button so the input can be explicitly set to the same height since it's absolutely positioned
-            this.buttonHeight =
-                this.dropdownButton?.getBoundingClientRect().height || 32; // Default to 2em;
-            if (this.expanded) {
-                // Weird workaround for setting focus. Didn't set focus, but wrapping in setTimeout solved it.
-                // See suggestion here: https://github.com/ionic-team/stencil/issues/3772#issuecomment-1292599609
-                setTimeout(() => this.setFocus());
-                // Format and interpolate result since return type can be other than string from the formatter
-                const formattedValue = `${this.formatSelected(this.hostComponent.state)}`;
-                this.setInput(formattedValue, false);
-            }
-            else
-                this.setInput('', true);
-        });
-    }
-    /**
-     * @internal Formats the selected option to display in the input. Interpolate the returned value
-     * since we don't know the return type or label type.
-     * @param value The selected value
-     * @returns The formatted value
-     */
-    formatSelected(value) {
-        if (value?.key == null)
-            return '';
-        // If no formatter exists, return the label or empty string
-        if (!this.selectedFormatter)
-            return value.label ?? '';
-        // If a formatter exists, use it
-        return this.selectedFormatter(value) ?? '';
-    }
-    /**
-     * Sets the input programmatically instead of native HTML input event.
-     * @param input
-     */
-    setInput(input, triggerFilter) {
-        this.state = input;
-        if (triggerFilter) {
-            this.onChange(this.state);
-            this.inputChange$.next(this.state);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvTypeaheadInputComponent, selector: "nggv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div\n    class=\"input-wrapper\"\n    [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n    [ngStyle]=\"{ 'height.px': buttonHeight }\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [attr.email]=\"email\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        aria-owns=\"listbox\"\n        aria-haspopup=\"listbox\"\n        aria-controls=\"listbox\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;top:1px;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.gds-field{height:calc(100% - 2px);width:100%;min-height:unset;margin-left:1px;padding-left:1rem;padding-right:1rem;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'nggv-typeahead-input', template: "<ng-container>\n  <div\n    class=\"input-wrapper\"\n    [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n    [ngStyle]=\"{ 'height.px': buttonHeight }\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required || null\"\n        [attr.email]=\"email\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        aria-owns=\"listbox\"\n        aria-haspopup=\"listbox\"\n        aria-controls=\"listbox\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;top:1px;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.gds-field{height:calc(100% - 2px);width:100%;min-height:unset;margin-left:1px;padding-left:1rem;padding-right:1rem;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.NgControl, decorators: [{
-                    type: Self
-                }, {
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [TRANSLOCO_SCOPE]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { hostComponent: [{
-                type: Input
-            }], resultFormatter: [{
-                type: Input
-            }], selectedFormatter: [{
-                type: Input
-            }], onKeyUp: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }] } });
-
-class NggvTypeaheadModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadModule, declarations: [NggvTypeaheadHighlightComponent,
-            NggvTypeaheadInputComponent,
-            NggvTypeaheadDropdownListComponent], imports: [CommonModule, NggvTooltipModule], exports: [NggvTypeaheadHighlightComponent,
-            NggvTypeaheadInputComponent,
-            NggvTypeaheadDropdownListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadModule, imports: [CommonModule, NggvTooltipModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        NggvTypeaheadHighlightComponent,
-                        NggvTypeaheadInputComponent,
-                        NggvTypeaheadDropdownListComponent,
-                    ],
-                    imports: [CommonModule, NggvTooltipModule],
-                    exports: [
-                        NggvTypeaheadHighlightComponent,
-                        NggvTypeaheadInputComponent,
-                        NggvTypeaheadDropdownListComponent,
-                    ],
-                }]
-        }] });
-
-class NggvDropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownModule, declarations: [NggvDropdownComponent, NggvDropdownListComponent], imports: [CommonModule,
-            NggCoreWrapperModule,
-            NggvTypeaheadModule,
-            NggvTooltipModule,
-            NggvI18nModule], exports: [NggvDropdownComponent, NggvDropdownListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownModule, imports: [CommonModule,
-            NggCoreWrapperModule,
-            NggvTypeaheadModule,
-            NggvTooltipModule,
-            NggvI18nModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NggvDropdownComponent, NggvDropdownListComponent],
-                    imports: [
-                        CommonModule,
-                        NggCoreWrapperModule,
-                        NggvTypeaheadModule,
-                        NggvTooltipModule,
-                        NggvI18nModule,
-                    ],
-                    exports: [NggvDropdownComponent, NggvDropdownListComponent],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-class NggvTypeaheadDirective {
-    /** Function that filter the inputvalue */
-    set nggvTypeahead(value) {
-        this.typeaheadFunction = value;
-        // If inputsubscription already exists, unsubscribe and subscribe again
-        if (this.inputSubscription$) {
-            this.inputSubscription$?.unsubscribe();
-            this.inputSubscription$ = undefined;
-            this.handleInputChanges();
-        }
-    }
-    /** Forward text inputs to apply the filter function*/
-    onNggvInput(event) {
-        this.inputValue$.next(event);
-    }
-    /** Helper to the determine if the host is nggv-drodpown or nggv-input*/
-    get hostIsDropdown() {
-        return !!this.hostDropdown;
-    }
-    /** Predefined options */
-    get defaultNullishOption() {
-        return { key: null, label: this.unselectLabel || '\u00A0' };
-    }
-    get emptyOption() {
-        return {
-            key: null,
-            label: this.emptyOptionLabel || 'label.nomatchingoptions',
-            disabled: true,
-        };
-    }
-    /** Name of the component. nggv-dropdown if NggvDropdownComponent or nggv-input if NggvInputComponent */
-    get localName() {
-        return this.element.nativeElement.localName;
-    }
-    constructor(viewContainerRef, element, hostDropdown, hostInput) {
-        this.viewContainerRef = viewContainerRef;
-        this.element = element;
-        this.hostDropdown = hostDropdown;
-        this.hostInput = hostInput;
-        /** Allow option to be unselected in the dropdown even if it is required. Defaults to true */
-        this.allowUnselect = true;
-        /** Emits the entered string the user has written in the input */
-        this.filterPhraseChange = new EventEmitter();
-        this.inputValue$ = new Subject();
-        this.onDestroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.handleInputChanges();
-        if (this.hostIsDropdown)
-            this.createInput();
-        else
-            this.createDropdownList();
-    }
-    ngOnDestroy() {
-        this.onDestroy$.next(true);
-        this.onDestroy$.complete();
-    }
-    /**
-     * @internal
-     * Core functionality of typeahead. Emits input, then filters the result based on the supplied function
-     * If directive is applied on nggv-input, manually show or hide options in the list.
-     * If directive is applied on nggv-dropdown, let the dropdown itself choose when to open or close
-     */
-    handleInputChanges() {
-        this.inputSubscription$ = this.inputValue$
-            .pipe(takeUntil(this.onDestroy$), distinctUntilChanged(), tap((inputValue) => this.filterPhraseChange.emit(inputValue)), this.typeaheadFunction ? this.typeaheadFunction : () => from([]), withLatestFrom(this.inputValue$))
-            .subscribe(([filteredValues, input]) => this.setOptions(filteredValues, input));
-        // Trigger the pipe when this function have been called
-        this.inputValue$.next('');
-    }
-    /**
-     * @internal
-     * Creates a nggv-input if the host itself is not a text-input
-     * Set styles to not display the input when closed
-     * Trigger filtering when changes occur in the field
-     * */
-    createInput() {
-        // Create the input component
-        this.inputComponent = this.viewContainerRef.createComponent(NggvTypeaheadInputComponent);
-        // Forward necessary info to component
-        this.inputComponent.setInput('hostComponent', this.hostDropdown);
-        this.inputComponent.setInput('selectedFormatter', this.selectedFormatter);
-        this.inputComponent.setInput('resultFormatter', this.resultFormatter);
-        // Listen to value changes
-        this.inputComponent.instance.nggvInput
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe((inputValue) => this.inputValue$.next(inputValue));
-    }
-    /** @internal Creates a nggv-dropdown-list if the host itself is a nggv-input */
-    createDropdownList() {
-        this.dropdownListComponent = this.viewContainerRef.createComponent(NggvTypeaheadDropdownListComponent);
-        this.dropdownListComponent.setInput('hostComponent', this.hostInput);
-    }
-    /**
-     * @internal Sets the options the user can select.
-     * If the host is a nggv-dropdown, utilize the dropdown itself to display the options
-     * If the host is a nggv-input, use the created nggv-dropdown-list to displaye the options
-     * @param filteredValues The options to display in the dropdown
-     * @param emptyInput If the input is empty
-     */
-    setOptions(filteredValues, input) {
-        if (!filteredValues)
-            return;
-        // Conditionally add empty or nullish option if it's allowed, the input is empty and does not already contain nullish
-        const allowNullish = this.allowUnselect &&
-            !input &&
-            !(Object.keys(filteredValues[0] ?? {}).includes('key') &&
-                filteredValues[0]?.key == null);
-        if (filteredValues.length === 0) {
-            filteredValues = [this.emptyOption];
-        }
-        else if (allowNullish) {
-            filteredValues = [this.defaultNullishOption].concat(filteredValues);
-        }
-        if (this.hostIsDropdown) {
-            // Add nullish option when no input is written (or when dropdown is epanded and has a selection)
-            this.hostDropdown.allowControlNullishOption = false;
-            this.hostDropdown.options = this.formatOptions(filteredValues);
-            this.hostDropdown.textToHighlight = `${input || ''}`;
-            this.hostDropdown.onlyHandleDistinctChanges = false;
-            this.hostDropdown.selectWithSpace = false;
-            this.hostDropdown.detectChanges();
-            return;
-        }
-        if (!this.hostIsDropdown) {
-            this.dropdownListComponent.setInput('options', this.formatOptions(filteredValues));
-            this.dropdownListComponent.setInput('textToHighlight', `${input || ''}`);
-        }
-    }
-    /**
-     * @internal Formats the available options to display in the dropdown list
-     * @param options The selected value
-     * @returns The formatted value
-     */
-    formatOptions(options) {
-        if (!options)
-            return [];
-        if (!this.resultFormatter)
-            return options;
-        return options.map((value) => value?.label ? this.resultFormatter?.(value) : value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: NggvDropdownComponent, host: true, optional: true }, { token: i2$1.NggvInputComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: NggvTypeaheadDirective, isStandalone: true, selector: "nggv-input[nggvTypeahead], nggv-dropdown[nggvTypeahead]", inputs: { nggvTypeahead: "nggvTypeahead", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter", allowUnselect: "allowUnselect", unselectLabel: "unselectLabel", emptyOptionLabel: "emptyOptionLabel" }, outputs: { filterPhraseChange: "filterPhraseChange" }, host: { listeners: { "nggvInput": "onNggvInput($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'nggv-input[nggvTypeahead], nggv-dropdown[nggvTypeahead]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: NggvDropdownComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }, { type: i2$1.NggvInputComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }], propDecorators: { nggvTypeahead: [{
-                type: Input
-            }], resultFormatter: [{
-                type: Input
-            }], selectedFormatter: [{
-                type: Input
-            }], allowUnselect: [{
-                type: Input
-            }], unselectLabel: [{
-                type: Input
-            }], emptyOptionLabel: [{
-                type: Input
-            }], filterPhraseChange: [{
-                type: Output
-            }], onNggvInput: [{
-                type: HostListener,
-                args: ['nggvInput', ['$event']]
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NggvDropdownComponent, NggvDropdownListComponent, NggvDropdownModule, NggvTypeaheadDirective, NggvTypeaheadDropdownListComponent, NggvTypeaheadHighlightComponent, NggvTypeaheadInputComponent, NggvTypeaheadModule };
-//# sourceMappingURL=sebgroup-green-angular-src-v-angular-dropdown.mjs.map