@sebgroup/green-angular 5.8.0 → 5.8.1

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

@@ -3497,6 +3497,14 @@ class NggvDropdownListComponent {
                     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;
     }
@@ -3522,7 +3530,7 @@ class NggvDropdownListComponent {
                 this.activeIndex = 0;
                 option = this._flattenedOptions[this.activeIndex];
                 this.state = option;
-                this.scrollToResult(option);
+                this.scrollToResult(option, true);
                 break;
             case 'ArrowUp': // Move up one step to the previous option
                 if (this.activeIndex > 0)
@@ -3531,7 +3539,7 @@ class NggvDropdownListComponent {
                     this.activeIndex = this._flattenedOptions.length - 1;
                 option = this._flattenedOptions[this.activeIndex];
                 this.state = option;
-                this.scrollToResult(option);
+                this.scrollToResult(option, true);
                 break;
             case 'ArrowDown': // Move down one step to the next option
                 if (this._flattenedOptions.length > this.activeIndex + 1)
@@ -3540,13 +3548,13 @@ class NggvDropdownListComponent {
                     this.activeIndex = 0;
                 option = this._flattenedOptions[this.activeIndex];
                 this.state = option;
-                this.scrollToResult(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);
+                this.scrollToResult(option, true);
                 break;
         }
     }
@@ -3566,7 +3574,7 @@ class NggvDropdownListComponent {
      * Scrolls focused result into view with a specified offset.
      * @param key the result index which to scroll to.
      */
-    scrollToResult(option) {
+    scrollToResult(option, focusElement) {
         if (!this.optionRefs || !option)
             return;
         const optionRef = this.optionRefs.find((li) => li.nativeElement.id === this.id + '-option-' + option.key);
@@ -3580,8 +3588,12 @@ class NggvDropdownListComponent {
                     block: 'nearest',
                 });
                 delta -= window.scrollY || document.documentElement.scrollTop;
-                if (delta)
+                if (delta) {
                     window.scrollBy(0, delta > 0 ? -offset : offset);
+                }
+                if (focusElement) {
+                    optionRef.nativeElement.focus();
+                }
             }, 0);
         }
     }
@@ -3814,11 +3826,11 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent$1 {
         return !('options' in option);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDropdownComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2$2.DropdownUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-toggle'\"\n    *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    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n      [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          aria-haspopup=\"listbox\"\n          [attr.data-thook]=\"thook + '-toggle'\"\n          [attr.aria-expanded]=\"expanded\"\n          [attr.aria-labelledby]=\"\n            ariaLabel ? null : id + '-label ' + id + '-toggle'\n          \"\n          [attr.aria-label]=\"ariaLabel || null\"\n          (click)=\"toggleDropdown()\"\n        >\n          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\n        <nggv-dropdown-list\n          #dropDownList\n          [options]=\"options\"\n          [scrollOffset]=\"scrollOffset\"\n          [state]=\"state\"\n          [expanded]=\"expanded\"\n          [optionContentTpl]=\"optionContentTpl\"\n          [groupLabelTpl]=\"groupLabelTpl\"\n          [textToHighlight]=\"textToHighlight\"\n          (closed)=\"setExpanded(false)\"\n          (selectedValueChanged)=\"onSelectChange($event)\"\n        >\n        </nggv-dropdown-list>\n      </div>\n      <!-- ERRORS -->\n      <div class=\"gds-form-item__footer error-wrapper\">\n        <span\n          class=\"form-info form-info--error\"\n          [attr.for]=\"id + '-input'\"\n          *ngIf=\"invalid && (error || ngControl?.invalid)\"\n        >\n          <span class=\"error-icon\">\n            <gds-icon-triangle-exclamation\n              width=\"16\"\n              height=\"16\"\n              [solid]=\"true\"\n              *nggCoreElement\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n        <ng-template #errorsRef>\n          <span\n            *ngIf=\"firstError as error\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n          >\n            {{ t('error.field' + error?.code, error?.params) }}\n          </span>\n        </ng-template>\n      </div>\n      <!-- CHILDREN -->\n      <ng-content></ng-content>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host 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%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges"], outputs: ["selectedValueChanged", "closed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-toggle'\"\n    *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    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n      [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          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          (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%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges"], outputs: ["selectedValueChanged", "closed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-dropdown', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-toggle'\"\n    *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    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n      [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          aria-haspopup=\"listbox\"\n          [attr.data-thook]=\"thook + '-toggle'\"\n          [attr.aria-expanded]=\"expanded\"\n          [attr.aria-labelledby]=\"\n            ariaLabel ? null : id + '-label ' + id + '-toggle'\n          \"\n          [attr.aria-label]=\"ariaLabel || null\"\n          (click)=\"toggleDropdown()\"\n        >\n          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\n        <nggv-dropdown-list\n          #dropDownList\n          [options]=\"options\"\n          [scrollOffset]=\"scrollOffset\"\n          [state]=\"state\"\n          [expanded]=\"expanded\"\n          [optionContentTpl]=\"optionContentTpl\"\n          [groupLabelTpl]=\"groupLabelTpl\"\n          [textToHighlight]=\"textToHighlight\"\n          (closed)=\"setExpanded(false)\"\n          (selectedValueChanged)=\"onSelectChange($event)\"\n        >\n        </nggv-dropdown-list>\n      </div>\n      <!-- ERRORS -->\n      <div class=\"gds-form-item__footer error-wrapper\">\n        <span\n          class=\"form-info form-info--error\"\n          [attr.for]=\"id + '-input'\"\n          *ngIf=\"invalid && (error || ngControl?.invalid)\"\n        >\n          <span class=\"error-icon\">\n            <gds-icon-triangle-exclamation\n              width=\"16\"\n              height=\"16\"\n              [solid]=\"true\"\n              *nggCoreElement\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n        <ng-template #errorsRef>\n          <span\n            *ngIf=\"firstError as error\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n          >\n            {{ t('error.field' + error?.code, error?.params) }}\n          </span>\n        </ng-template>\n      </div>\n      <!-- CHILDREN -->\n      <ng-content></ng-content>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host 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%}\n"] }]
+            args: [{ selector: 'nggv-dropdown', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-toggle'\"\n    *ngIf=\"labelContentTpl || label\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"description\" *ngIf=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <div\n      [id]=\"id + '-input'\"\n      class=\"nggv-field--locked\"\n      [attr.name]=\"name\"\n      [attr.value]=\"state\"\n      [attr.role]=\"role\"\n      [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n    >\n      <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n      <ng-container *ngIf=\"state\">\n        <ng-template\n          *ngTemplateOutlet=\"\n            selectedContentTpl || defaultSelectedContentTpl;\n            context: { $implicit: state }\n          \"\n        >\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          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          (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%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -3916,12 +3928,6 @@ class NggvTypeaheadDropdownListComponent extends NggvDropdownListComponent {
             this.setExpanded(true);
             this.subscribeToOutsideClickEvent();
         });
-        this.hostComponent.nggvBlur
-            .asObservable()
-            .pipe(takeUntil$1(this._destroy$))
-            .subscribe(() => {
-            this.setExpanded(false);
-        });
     }
     /**
      * @internal Formats the selected option to display in the input. Interpolate the returned value
@@ -4074,11 +4080,11 @@ class NggvTypeaheadInputComponent extends NggvInputComponent$1 {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTypeaheadInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTypeaheadInputComponent, selector: "nggv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div\n    class=\"input-wrapper\"\n    [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n    [ngStyle]=\"{ 'height.px': buttonHeight }\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;top:1px;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.gds-field{height:calc(100% - 2px);width:100%;min-height:unset;margin-left:1px;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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTypeaheadInputComponent, selector: "nggv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <div\n    class=\"input-wrapper\"\n    [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n    [ngStyle]=\"{ 'height.px': buttonHeight }\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        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: "17.3.12", ngImport: i0, type: NggvTypeaheadInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-typeahead-input', template: "<ng-container>\n  <div\n    class=\"input-wrapper\"\n    [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n    [ngStyle]=\"{ 'height.px': buttonHeight }\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{position:absolute;top: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"] }]
+            args: [{ selector: 'nggv-typeahead-input', template: "<ng-container>\n  <div\n    class=\"input-wrapper\"\n    [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n    [ngStyle]=\"{ 'height.px': buttonHeight }\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        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
                 }, {