@sebgroup/green-angular 5.12.1 → 5.13.0

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

@@ -396,6 +396,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * https://designlibrary.sebgroup.com/components/component-dropdown
  */
 class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
+    get isSmall() {
+        return this.size === 'small';
+    }
+    get isLarge() {
+        return this.size === 'large';
+    }
     /** List of {@link Option} and {@link OptionGroup} listed when dropdown is expanded. */
     set options(value) {
         // update options
@@ -436,8 +442,14 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
         this.translocoScope = translocoScope;
         this.cdr = cdr;
         this.dropdownUtils = dropdownUtils;
-        /** Special property used for selecting DOM elements during automated UI testing. */
+        /**
+         * Special property used for selecting DOM elements during automated UI testing.
+         */
         this.thook = 'dropdown';
+        /**
+         * Sets the displayed size of the dropdown.
+         */
+        this.size = 'large';
         /** The additional amount to show when option is scrolled into view. */
         this.scrollOffset = 24;
         /**
@@ -452,6 +464,13 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
          * Defaults to true.
          */
         this.selectOnSingleOption = true;
+        /**
+         * Used to determine which changes should be handled by the dropdown.
+         * If set to false, all changes will be handled by the dropdown.
+         * If set to true, only changes that are distinct from the current value will be handled.
+         * Defaults to true.
+         */
+        this.onlyHandleDistinctChanges = true;
         /**
          * Emits changes of the expanded state of the dropdown
          */
@@ -573,11 +592,11 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
         return !('options' in option);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDropdownComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.DropdownUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-toggle'\"\n    *ngIf=\"labelContentTpl || label\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"description\" *ngIf=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n        [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          <ng-template\n            *ngTemplateOutlet=\"\n              selectedContentTpl || defaultSelectedContentTpl;\n              context: { $implicit: state }\n            \"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"listbox\"\n          [attr.data-thook]=\"thook + '-toggle'\"\n          [attr.aria-expanded]=\"expanded\"\n          [attr.aria-labelledby]=\"\n            ariaLabel ? null : id + '-label ' + id + '-toggle'\n          \"\n          [attr.aria-label]=\"ariaLabel || null\"\n          (click)=\"toggleDropdown()\"\n        >\n          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\n        <nggv-dropdown-list\n          #dropDownList\n          [options]=\"options\"\n          [scrollOffset]=\"scrollOffset\"\n          [state]=\"state\"\n          [expanded]=\"expanded\"\n          [optionContentTpl]=\"optionContentTpl\"\n          [groupLabelTpl]=\"groupLabelTpl\"\n          [textToHighlight]=\"textToHighlight\"\n          (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$1.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges"], outputs: ["selectedValueChanged", "closed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", size: "size", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption", onlyHandleDistinctChanges: "onlyHandleDistinctChanges" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n  <label\n    [id]=\"id + '-label'\"\n    class=\"gds-field-label hide-if-empty\"\n    [attr.for]=\"id + '-toggle'\"\n    *ngIf=\"labelContentTpl || label\"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n    ></ng-template>\n    <ng-template #basicLabelContentTpl>\n      <!-- to trigger css:empty if no label was added -->\n      <ng-container *ngIf=\"label\">\n        {{ label }}\n        <span\n          *ngIf=\"optional === true || (required !== true && optional !== false)\"\n          class=\"gds-field-label--optional\"\n        >\n          ({{ t('label.optional') }})\n        </span>\n      </ng-container>\n    </ng-template>\n  </label>\n\n  <!-- DESCRIPTION -->\n  <div class=\"description\" *ngIf=\"description\">{{ description }}</div>\n\n  <!-- LOCKED INPUT -->\n  <ng-container *ngIf=\"locked\">\n    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n        [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          <ng-template\n            *ngTemplateOutlet=\"\n              selectedContentTpl || defaultSelectedContentTpl;\n              context: { $implicit: state }\n            \"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"listbox\"\n          [attr.data-thook]=\"thook + '-toggle'\"\n          [attr.aria-expanded]=\"expanded\"\n          [attr.aria-labelledby]=\"\n            ariaLabel ? null : id + '-label ' + id + '-toggle'\n          \"\n          [attr.aria-label]=\"ariaLabel || null\"\n          (click)=\"toggleDropdown()\"\n        >\n          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\n        <nggv-dropdown-list\n          #dropDownList\n          [options]=\"options\"\n          [scrollOffset]=\"scrollOffset\"\n          [state]=\"state\"\n          [expanded]=\"expanded\"\n          [optionContentTpl]=\"optionContentTpl\"\n          [groupLabelTpl]=\"groupLabelTpl\"\n          [textToHighlight]=\"textToHighlight\"\n          [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n          (closed)=\"setExpanded(false)\"\n          (selectedValueChanged)=\"onSelectChange($event)\"\n        >\n        </nggv-dropdown-list>\n      </div>\n      <!-- ERRORS -->\n      <div class=\"gds-form-item__footer error-wrapper\">\n        <span\n          class=\"form-info form-info--error\"\n          [attr.for]=\"id + '-input'\"\n          *ngIf=\"invalid && (error || ngControl?.invalid)\"\n        >\n          <span class=\"error-icon\">\n            <gds-icon-triangle-exclamation\n              width=\"16\"\n              height=\"16\"\n              [solid]=\"true\"\n              *nggCoreElement\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n        <ng-template #errorsRef>\n          <span\n            *ngIf=\"firstError as error\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n          >\n            {{ t('error.field' + error?.code, error?.params) }}\n          </span>\n        </ng-template>\n      </div>\n      <!-- CHILDREN -->\n      <ng-content></ng-content>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$1.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges"], 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    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n        [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          <ng-template\n            *ngTemplateOutlet=\"\n              selectedContentTpl || defaultSelectedContentTpl;\n              context: { $implicit: state }\n            \"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"listbox\"\n          [attr.data-thook]=\"thook + '-toggle'\"\n          [attr.aria-expanded]=\"expanded\"\n          [attr.aria-labelledby]=\"\n            ariaLabel ? null : id + '-label ' + id + '-toggle'\n          \"\n          [attr.aria-label]=\"ariaLabel || null\"\n          (click)=\"toggleDropdown()\"\n        >\n          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\n        <nggv-dropdown-list\n          #dropDownList\n          [options]=\"options\"\n          [scrollOffset]=\"scrollOffset\"\n          [state]=\"state\"\n          [expanded]=\"expanded\"\n          [optionContentTpl]=\"optionContentTpl\"\n          [groupLabelTpl]=\"groupLabelTpl\"\n          [textToHighlight]=\"textToHighlight\"\n          (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    <ng-template\n      *ngTemplateOutlet=\"\n        lockedTpl || defaultLockedTpl;\n        context: { $implicit: state }\n      \"\n    ></ng-template>\n    <ng-template #defaultLockedTpl>\n      <div\n        [id]=\"id + '-input'\"\n        class=\"nggv-field--locked\"\n        [attr.name]=\"name\"\n        [attr.value]=\"state\"\n        [attr.role]=\"role\"\n        [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n      >\n        <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n        <ng-container *ngIf=\"state\">\n          <ng-template\n            *ngTemplateOutlet=\"\n              selectedContentTpl || defaultSelectedContentTpl;\n              context: { $implicit: state }\n            \"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- INPUT -->\n  <ng-container *ngIf=\"!locked\">\n    <div class=\"gds-input-wrapper\">\n      <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n        <button\n          [id]=\"id + '-toggle'\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          class=\"nggv-field-dropdown__label toggle\"\n          [class.nggv-field--error]=\"invalid\"\n          role=\"combobox\"\n          aria-owns=\"listbox\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"listbox\"\n          [attr.data-thook]=\"thook + '-toggle'\"\n          [attr.aria-expanded]=\"expanded\"\n          [attr.aria-labelledby]=\"\n            ariaLabel ? null : id + '-label ' + id + '-toggle'\n          \"\n          [attr.aria-label]=\"ariaLabel || null\"\n          (click)=\"toggleDropdown()\"\n        >\n          <span>\n            <ng-template\n              *ngTemplateOutlet=\"\n                selectedContentTpl || defaultSelectedContentTpl;\n                context: { $implicit: state }\n              \"\n            >\n            </ng-template>\n          </span>\n        </button>\n        <nggv-dropdown-list\n          #dropDownList\n          [options]=\"options\"\n          [scrollOffset]=\"scrollOffset\"\n          [state]=\"state\"\n          [expanded]=\"expanded\"\n          [optionContentTpl]=\"optionContentTpl\"\n          [groupLabelTpl]=\"groupLabelTpl\"\n          [textToHighlight]=\"textToHighlight\"\n          [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n          (closed)=\"setExpanded(false)\"\n          (selectedValueChanged)=\"onSelectChange($event)\"\n        >\n        </nggv-dropdown-list>\n      </div>\n      <!-- ERRORS -->\n      <div class=\"gds-form-item__footer error-wrapper\">\n        <span\n          class=\"form-info form-info--error\"\n          [attr.for]=\"id + '-input'\"\n          *ngIf=\"invalid && (error || ngControl?.invalid)\"\n        >\n          <span class=\"error-icon\">\n            <gds-icon-triangle-exclamation\n              width=\"16\"\n              height=\"16\"\n              [solid]=\"true\"\n              *nggCoreElement\n            ></gds-icon-triangle-exclamation>\n          </span>\n          <span\n            *ngIf=\"error; else errorsRef\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n            >{{ error }}</span\n          >\n        </span>\n        <ng-template #errorsRef>\n          <span\n            *ngIf=\"firstError as error\"\n            [attr.data-thook]=\"thook + '-errorlabel'\"\n          >\n            {{ t('error.field' + error?.code, error?.params) }}\n          </span>\n        </ng-template>\n      </div>\n      <!-- CHILDREN -->\n      <ng-content></ng-content>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultSelectedContentTpl let-state>\n    <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n    {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n  </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -601,6 +620,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['attr.data-thook']
             }, {
                 type: Input
+            }], isSmall: [{
+                type: HostBinding,
+                args: ['class.small']
+            }], isLarge: [{
+                type: HostBinding,
+                args: ['class.large']
+            }], size: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], ariaLabel: [{
@@ -615,6 +642,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], selectOnSingleOption: [{
                 type: Input
+            }], onlyHandleDistinctChanges: [{
+                type: Input
             }], expandedChange: [{
                 type: Output
             }], onKeyUp: [{
@@ -1026,6 +1055,7 @@ class NggvTypeaheadDirective {
             this.hostDropdown.allowControlNullishOption = false;
             this.hostDropdown.options = this.formatOptions(filteredValues);
             this.hostDropdown.textToHighlight = `${input || ''}`;
+            this.hostDropdown.onlyHandleDistinctChanges = false;
             this.hostDropdown.detectChanges();
             return;
         }