@sebgroup/green-angular 4.5.0 → 4.6.0

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

@@ -0,0 +1,830 @@
+import * as i0 from '@angular/core';
+import { Component, Input, EventEmitter, Optional, Inject, ViewChildren, HostBinding, Output, HostListener, TemplateRef, Self, ContentChild, SkipSelf, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { Subject, fromEvent, takeUntil } from 'rxjs';
+import * as i4 from '@ngneat/transloco';
+import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
+import { NgvBaseControlValueAccessorComponent } 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 scrollIntoView from 'scroll-into-view-if-needed';
+import * as i3 from '@sebgroup/green-angular/src/v-angular/tooltip';
+import { NgvTooltipModule } from '@sebgroup/green-angular/src/v-angular/tooltip';
+import { NgvInputComponent } from '@sebgroup/green-angular/src/v-angular/input';
+import { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n';
+
+class NgvTypeaheadHighlightComponent {
+    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: "16.2.12", ngImport: i0, type: NgvTypeaheadHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadHighlightComponent, selector: "ngv-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>{{ suffix ||''}}\n</ng-container>", 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: "16.2.12", ngImport: i0, type: NgvTypeaheadHighlightComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngv-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>{{ suffix ||''}}\n</ng-container>", styles: [":host .match{font-weight:500}\n"] }]
+        }], propDecorators: { textContent: [{
+                type: Input
+            }], textToHighlight: [{
+                type: Input
+            }] } });
+
+class NgvDropdownListComponent {
+    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.ngv?.nextId();
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'dropdown';
+        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();
+        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;
+        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();
+        else {
+            this.closed$.next(true);
+            this.onClickSubscription?.unsubscribe();
+        }
+    }
+    /**
+     * @internal
+     */
+    refreshSelectedOption() {
+        const options = this.dropdownUtils.flattenOptions(this.options, !this.optionContentTpl);
+        this.activeIndex = this.getActiveIndex();
+        this.state = options[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.dropdownUtils
+                .flattenOptions(this.options, !this.optionContentTpl)
+                .findIndex((option) => option.key != null && option.key === this.selectedValue?.key);
+            if (selectedIndex > -1)
+                return selectedIndex;
+        }
+        return this.dropdownUtils
+            .flattenOptions(this.options, !this.optionContentTpl)
+            .findIndex((option) => option.key != null);
+    }
+    /**
+     * @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) {
+        switch (event.key) {
+            case 'Enter': //  Disable form submission
+            case 'ArrowUp': // Disable scrolling up
+            case 'ArrowDown': // Disable scrolling down
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+        }
+        return true;
+    }
+    /**
+     * @internal
+     * Enter toggles the dropdown, home, end, and, arrows change the index.
+     * @param event fired containing which key was released.
+     */
+    onKeyUp(event) {
+        if (!this.expanded)
+            return;
+        const options = this.dropdownUtils.flattenOptions(this.options, !this.optionContentTpl);
+        let option;
+        switch (event.key) {
+            case 'Escape':
+                this.setExpanded(false);
+                this.closed.emit();
+                break;
+            case 'Enter': // Select the currently chosen value
+                option = options[this.activeIndex];
+                this.updateState(option, event);
+                break;
+            case 'Home': // Move to the first option
+                this.activeIndex = 0;
+                option = options[this.activeIndex];
+                this.state = option;
+                this.scrollToResult(option);
+                break;
+            case 'ArrowUp': // Move up one step to the previous option
+                if (this.activeIndex > 0)
+                    this.activeIndex--;
+                else if (this.activeIndex === 0)
+                    this.activeIndex = options.length - 1;
+                option = options[this.activeIndex];
+                this.state = option;
+                this.scrollToResult(option);
+                break;
+            case 'ArrowDown': // Move down one step to the next option
+                if (options.length > this.activeIndex + 1)
+                    this.activeIndex++;
+                else if (this.activeIndex === options.length - 1)
+                    this.activeIndex = 0;
+                option = options[this.activeIndex];
+                this.state = option;
+                this.scrollToResult(option);
+                break;
+            case 'End': // Move to the last options
+                this.activeIndex = options.length - 1;
+                option = options[this.activeIndex];
+                this.state = option;
+                this.scrollToResult(option);
+                break;
+        }
+    }
+    /**
+     * Scrolls focused result into view with a specified offset.
+     * @param key the result index which to scroll to.
+     */
+    scrollToResult(option) {
+        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);
+            }, 0);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDropdownListComponent, selector: "ngv-dropdown-list", inputs: { expanded: "expanded", state: "state", scrollOffset: "scrollOffset", optionContentTpl: "optionContentTpl", id: "id", thook: "thook", options: "options", textToHighlight: "textToHighlight" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed" }, host: { listeners: { "document:keydown": "onKeyDown($event)", "document:keyup": "onKeyUp($event)" }, properties: { "attr.id": "this.id", "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\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      [ngvTooltip]=\"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 ngvToolTip 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 #basicOptionContentTpl let-option>\n    <ngv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </ngv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;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 .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}: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}\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: NgvTypeaheadHighlightComponent, selector: "ngv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }, { kind: "directive", type: i3.NgvTooltipDirective, selector: "[ngvTooltip]", inputs: ["ngvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "maxWidth"], outputs: ["ngvShow", "ngvHide"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngv-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\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      [ngvTooltip]=\"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 ngvToolTip 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 #basicOptionContentTpl let-option>\n    <ngv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </ngv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;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 .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}: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}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TRANSLOCO_SCOPE]
+                }] }]; }, propDecorators: { expanded: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], scrollOffset: [{
+                type: Input
+            }], optionContentTpl: [{
+                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
+            }], selectedValueChanged: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['document:keyup', ['$event']]
+            }] } });
+
+/**
+ * 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 NgvDropdownComponent extends NgvBaseControlValueAccessorComponent {
+    /** 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';
+        /** 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;
+        /**
+         * 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: "16.2.12", ngImport: i0, type: NgvDropdownComponent, 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: "16.2.12", type: NgvDropdownComponent, selector: "ngv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label [id]=\"id + '-label'\" class=\"hide-if-empty\" [attr.for]=\"id + '-toggle'\">\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=\"sdv-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"ngv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n      [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n      <button\n        [id]=\"id + '-toggle'\"\n        [disabled]=\"disabled\"\n        type=\"button\"\n        class=\"ngv-field-dropdown__label toggle\"\n        [class.ngv-field--error]=\"invalid\"\n        aria-haspopup=\"listbox\"\n        [attr.data-thook]=\"thook + '-toggle'\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.aria-labelledby]=\"id + '-label ' + id + '-toggle'\"\n        (click)=\"toggleDropdown()\"\n      >\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </button>\n\n      <ngv-dropdown-list\n        #dropDownList\n        [options]=\"options\"\n        [scrollOffset]=\"scrollOffset\"\n        [state]=\"state\"\n        [expanded]=\"expanded\"\n        [optionContentTpl]=\"optionContentTpl\"\n        [textToHighlight]=\"textToHighlight\"\n        (selectedValueChanged)=\"onSelectChange($event)\"\n      >\n      </ngv-dropdown-list>\n    </div>\n    <!-- ERRORS -->\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n\n    <!-- CHILDREN -->\n    <ng-content></ng-content>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host button{font-weight:500;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199);background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-800);--sg-border-color: var(--grey-800);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:inherit;font-weight:400;line-height:1.125;margin-bottom:.5rem;margin-top:.5rem;width:100%}@media screen and (-ms-high-contrast: active){:host button{border:2px solid currentcolor}}:host button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host button[aria-selected=true],:host button:active,:host button.active,:host button.active:hover,:host button:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host button:disabled,:host button.disabled,:host button[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host button:disabled::placeholder,:host button.disabled::placeholder,:host button[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--grey-400);--color: var(--grey-1000);background-color:var(--grey-400);color:var(--grey-1000);border-color:var(--grey-1000)}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button.small{font-size:.875rem}:host button:hover{background:var(--grey-400)}:host .dropdown{position:relative}\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.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NgvDropdownListComponent, selector: "ngv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "id", "thook", "options", "textToHighlight"], outputs: ["selectedValueChanged", "closed"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngv-dropdown', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label [id]=\"id + '-label'\" class=\"hide-if-empty\" [attr.for]=\"id + '-toggle'\">\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=\"sdv-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"ngv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n      [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n      <button\n        [id]=\"id + '-toggle'\"\n        [disabled]=\"disabled\"\n        type=\"button\"\n        class=\"ngv-field-dropdown__label toggle\"\n        [class.ngv-field--error]=\"invalid\"\n        aria-haspopup=\"listbox\"\n        [attr.data-thook]=\"thook + '-toggle'\"\n        [attr.aria-expanded]=\"expanded\"\n        [attr.aria-labelledby]=\"id + '-label ' + id + '-toggle'\"\n        (click)=\"toggleDropdown()\"\n      >\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </button>\n\n      <ngv-dropdown-list\n        #dropDownList\n        [options]=\"options\"\n        [scrollOffset]=\"scrollOffset\"\n        [state]=\"state\"\n        [expanded]=\"expanded\"\n        [optionContentTpl]=\"optionContentTpl\"\n        [textToHighlight]=\"textToHighlight\"\n        (selectedValueChanged)=\"onSelectChange($event)\"\n      >\n      </ngv-dropdown-list>\n    </div>\n    <!-- ERRORS -->\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n\n    <!-- CHILDREN -->\n    <ng-content></ng-content>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host button{font-weight:500;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199);background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-800);--sg-border-color: var(--grey-800);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:inherit;font-weight:400;line-height:1.125;margin-bottom:.5rem;margin-top:.5rem;width:100%}@media screen and (-ms-high-contrast: active){:host button{border:2px solid currentcolor}}:host button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host button[aria-selected=true],:host button:active,:host button.active,:host button.active:hover,:host button:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host button:disabled,:host button.disabled,:host button[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host button:disabled::placeholder,:host button.disabled::placeholder,:host button[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--grey-400);--color: var(--grey-1000);background-color:var(--grey-400);color:var(--grey-1000);border-color:var(--grey-1000)}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button.small{font-size:.875rem}:host button:hover{background:var(--grey-400)}:host .dropdown{position:relative}\n"] }]
+        }], ctorParameters: function () { return [{ 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 }]
+            }], thook: [{
+                type: HostBinding,
+                args: ['attr.data-thook']
+            }, {
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], scrollOffset: [{
+                type: Input
+            }], allowControlNullishOption: [{
+                type: Input
+            }], textToHighlight: [{
+                type: Input
+            }], selectOnSingleOption: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
+class NgvTypeaheadInputComponent extends NgvInputComponent {
+    get dropdownButton() {
+        return this.hostComponent.inputRef?.nativeElement;
+    }
+    constructor(element, renderer2, ngControl, translocoScope, cdr) {
+        super(ngControl, translocoScope, cdr);
+        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;
+        super.ngOnInit();
+    }
+    ngOnInit() {
+        this.autocomplete = 'off';
+        this.debounceTime = 0;
+        this.hostComponent.selectOnSingleOption = false;
+        this.moveInput();
+        this.handleExpandedChange();
+    }
+    /**
+     * @internal
+     * Allow space to be inputted as text
+     * @param event fired containing which key was released.
+     */
+    onKeyUp(event) {
+        if (event.code === 'Space') {
+            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);
+                // 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;
+            }
+        }, 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;
+            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: "16.2.12", ngImport: i0, type: NgvTypeaheadInputComponent, 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: "16.2.12", type: NgvTypeaheadInputComponent, selector: "ngv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "document:keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n    <div class=\"input-wrapper\"\n        [ngClass]=\"{ 'expanded': expanded, 'collapsed': !expanded }\"\n        [ngStyle]=\"{ 'height.px': buttonHeight }\"\n        (click)=\"$event.stopPropagation();\">\n        <!-- INPUT FIELD -->\n        <div class=\"input-group\">\n            <input #input\n                [id]=\"id + '-input'\"\n                class=\"sdv-field\"\n                [attr.type]=\"type\"\n                [attr.name]=\"name\"\n                [attr.required]=\"required\"\n                [attr.email]=\"email\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [step]=\"step\"\n                [attr.maxlength]=\"maxlength\"\n                [attr.minlength]=\"minlength\"\n                [pattern]=\"pattern\"\n                [disabled]=\"disabled\"\n                [autocomplete]=\"autocomplete\"\n                [autofocus]=\"autofocus\"\n                [readOnly]=\"readonly\"\n                [attr.role]=\"role\"\n                [attr.placeholder]=\"placeholder\"\n                [attr.aria-label]=\"description\"\n                [value]=\"state\"\n                (input)=\"onInput($event)\"\n                (focus)=\"onFocus($event)\"\n                (blur)=\"onBlur($event)\" />\n        </div>\n    </div>\n</ng-container>", styles: [":host{position:absolute;top:0;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.sdv-field{height:100%;width:100%;min-height:unset;margin-left:1px;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngv-typeahead-input', template: "<ng-container>\n    <div class=\"input-wrapper\"\n        [ngClass]=\"{ 'expanded': expanded, 'collapsed': !expanded }\"\n        [ngStyle]=\"{ 'height.px': buttonHeight }\"\n        (click)=\"$event.stopPropagation();\">\n        <!-- INPUT FIELD -->\n        <div class=\"input-group\">\n            <input #input\n                [id]=\"id + '-input'\"\n                class=\"sdv-field\"\n                [attr.type]=\"type\"\n                [attr.name]=\"name\"\n                [attr.required]=\"required\"\n                [attr.email]=\"email\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [step]=\"step\"\n                [attr.maxlength]=\"maxlength\"\n                [attr.minlength]=\"minlength\"\n                [pattern]=\"pattern\"\n                [disabled]=\"disabled\"\n                [autocomplete]=\"autocomplete\"\n                [autofocus]=\"autofocus\"\n                [readOnly]=\"readonly\"\n                [attr.role]=\"role\"\n                [attr.placeholder]=\"placeholder\"\n                [attr.aria-label]=\"description\"\n                [value]=\"state\"\n                (input)=\"onInput($event)\"\n                (focus)=\"onFocus($event)\"\n                (blur)=\"onBlur($event)\" />\n        </div>\n    </div>\n</ng-container>", styles: [":host{position:absolute;top:0;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.sdv-field{height:100%;width:100%;min-height:unset;margin-left:1px;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ 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: ['document:keyup', ['$event']]
+            }] } });
+
+// Use dropdownList template and combine stylesheets
+class NgvTypeaheadDropdownListComponent extends NgvDropdownListComponent {
+    constructor(translocoScope, element) {
+        super(translocoScope);
+        this.translocoScope = translocoScope;
+        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.ngvFocus
+            .asObservable()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            if (!this.state)
+                this.hostComponent.ngvInput.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) ?? '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true, skipSelf: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadDropdownListComponent, selector: "ngv-typeahead-dropdown-list", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\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      [ngvTooltip]=\"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 ngvToolTip 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 #basicOptionContentTpl let-option>\n    <ngv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </ngv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;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 .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}: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}\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.NgvTooltipDirective, selector: "[ngvTooltip]", inputs: ["ngvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "maxWidth"], outputs: ["ngvShow", "ngvHide"] }, { kind: "component", type: NgvTypeaheadHighlightComponent, selector: "ngv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadDropdownListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngv-typeahead-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\n  <ul\n    class=\"gds-dropdown__options card options gds-reset\"\n    [class.gds-dropdown__options-expanded]=\"expanded\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.data-thook]=\"thook + '-options'\"\n    [attr.aria-labelledby]=\"id + '-label'\"\n    [attr.aria-activedescendant]=\"\n      state ? id + '-option-' + state?.key : undefined\n    \"\n  >\n    <ng-container *ngFor=\"let item of options\">\n      <!-- OPTION -->\n      <ng-container *ngIf=\"!isGroup(item)\">\n        <ng-template\n          *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n        ></ng-template>\n      </ng-container>\n\n      <!-- OPTION GROUP -->\n      <li\n        class=\"gds-dropdown__options__label group\"\n        [attr.data-thook]=\"thook + '-option-group'\"\n        *ngIf=\"isGroup(item)\"\n      >\n        <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n        <ul [attr.aria-disabled]=\"item.disabled\">\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      [ngvTooltip]=\"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 ngvToolTip 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 #basicOptionContentTpl let-option>\n    <ngv-typeahead-highlight\n      *ngIf=\"!!textToHighlight\"\n      [textToHighlight]=\"textToHighlight\"\n      [textContent]=\"t(option.label)\"\n    >\n    </ngv-typeahead-highlight>\n    <ng-container *ngIf=\"!textToHighlight\">\n      {{ t(option.label) }}\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;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 .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none;display:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}: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}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TRANSLOCO_SCOPE]
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { hostComponent: [{
+                type: Input
+            }], resultFormatter: [{
+                type: Input
+            }], selectedFormatter: [{
+                type: Input
+            }] } });
+
+class NgvTypeaheadModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadModule, declarations: [NgvTypeaheadHighlightComponent,
+            NgvTypeaheadInputComponent,
+            NgvTypeaheadDropdownListComponent], imports: [CommonModule, NgvTooltipModule], exports: [NgvTypeaheadHighlightComponent,
+            NgvTypeaheadInputComponent,
+            NgvTypeaheadDropdownListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadModule, imports: [CommonModule, NgvTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        NgvTypeaheadHighlightComponent,
+                        NgvTypeaheadInputComponent,
+                        NgvTypeaheadDropdownListComponent,
+                    ],
+                    imports: [CommonModule, NgvTooltipModule],
+                    exports: [
+                        NgvTypeaheadHighlightComponent,
+                        NgvTypeaheadInputComponent,
+                        NgvTypeaheadDropdownListComponent,
+                    ],
+                }]
+        }] });
+
+class NgvDropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownModule, declarations: [NgvDropdownComponent, NgvDropdownListComponent], imports: [CommonModule, NgvTypeaheadModule, NgvTooltipModule, NgvI18nModule], exports: [NgvDropdownComponent, NgvDropdownListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownModule, imports: [CommonModule, NgvTypeaheadModule, NgvTooltipModule, NgvI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NgvDropdownComponent, NgvDropdownListComponent],
+                    imports: [CommonModule, NgvTypeaheadModule, NgvTooltipModule, NgvI18nModule],
+                    exports: [NgvDropdownComponent, NgvDropdownListComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgvDropdownComponent, NgvDropdownListComponent, NgvDropdownModule, NgvTypeaheadHighlightComponent, NgvTypeaheadInputComponent };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-dropdown.mjs.map