@corto-ai/gds-angular 2.1.5-test.3 → 2.1.5-test.4

package/fesm2022/corto-ai-gds-angular.mjs

@@ -5799,11 +5799,218 @@ const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_LEFT = [
     }
 ];
 
+const flattenDrilldownOptions = (options) => options.flatMap((option) => [option, ...(option.children?.length ? flattenDrilldownOptions(option.children) : [])]);
+const resolveDrilldownPath = (options, pathValues, bindValue) => {
+    if (!pathValues.length) {
+        return [];
+    }
+    const path = [];
+    let levelOptions = options;
+    for (const value of pathValues) {
+        const match = levelOptions.find((option) => String(option[bindValue]) === value);
+        if (!match) {
+            return [];
+        }
+        path.push(match);
+        levelOptions = match.children ?? [];
+    }
+    return path;
+};
+const findDrilldownOptionPathByRef = (options, target, parents = []) => {
+    for (const option of options) {
+        const path = [...parents, option];
+        if (option === target) {
+            return path;
+        }
+        if (option.children?.length) {
+            const found = findDrilldownOptionPathByRef(option.children, target, path);
+            if (found.length > 0) {
+                return found;
+            }
+        }
+    }
+    return [];
+};
+const drilldownOptionMatchesSearch = (option, searchText, bindLabel) => {
+    if (String(option[bindLabel]).toLowerCase().includes(searchText)) {
+        return true;
+    }
+    return !!option.children?.some((child) => drilldownOptionMatchesSearch(child, searchText, bindLabel));
+};
+const drilldownPathKey = (path, bindValue) => path.map((item) => String(item[bindValue])).join('/');
+const displayedDrilldownOptions = (options, navStack, searchText, bindLabel) => {
+    const query = searchText.trim().toLowerCase();
+    const currentOptions = navStack[navStack.length - 1]?.children ?? options;
+    if (!query) {
+        return currentOptions;
+    }
+    return flattenDrilldownOptions(options).filter((option) => String(option[bindLabel]).toLowerCase().includes(query));
+};
+
+class GdsDrilldownSelectMobileDialogComponent extends GdsDialogBaseDirective {
+    #data = this.config.data;
+    #options = this.#data.options;
+    bindValue = this.#data.bindValue;
+    bindLabel = this.#data.bindLabel;
+    layout = this.#data.layout;
+    dialogTitle = this.#data.dialogTitle;
+    applyLabel = this.#data.applyLabel;
+    emptyText = this.#data.emptyText;
+    backAriaLabel = this.#data.backAriaLabel;
+    searchable = this.#data.searchable;
+    searchPlaceholder = this.#data.searchPlaceholder;
+    navStack = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navStack" }] : /* istanbul ignore next */ []));
+    searchText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    #draftPath = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#draftPath" }] : /* istanbul ignore next */ []));
+    expandedKeys = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
+    displayedOptions = computed(() => displayedDrilldownOptions(this.#options, this.navStack(), this.searchText(), this.bindLabel), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedOptions" }] : /* istanbul ignore next */ []));
+    mobileDialogTitle = computed(() => {
+        if (this.layout !== 'drilldown' || !this.navStack().length) {
+            return this.#data.dialogTitle;
+        }
+        return [this.#data.dialogTitle, ...this.navStack().map((option) => String(option[this.bindLabel]))].join(' > ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileDialogTitle" }] : /* istanbul ignore next */ []));
+    hasValidDraft = computed(() => {
+        const draft = this.#draftPath();
+        if (!draft.length) {
+            return false;
+        }
+        const path = resolveDrilldownPath(this.#options, draft, this.bindValue);
+        const leaf = path[path.length - 1];
+        return path.length === draft.length && !!leaf && !leaf.children?.length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValidDraft" }] : /* istanbul ignore next */ []));
+    treeRows = computed(() => {
+        const searchText = this.searchText().trim().toLowerCase();
+        const expandedKeys = this.expandedKeys();
+        const rows = [];
+        const walk = (options, path, tier) => {
+            for (const option of options) {
+                if (searchText && !drilldownOptionMatchesSearch(option, searchText, this.bindLabel)) {
+                    continue;
+                }
+                const nextPath = [...path, option];
+                const children = option.children;
+                const expanded = !!children?.length &&
+                    (searchText
+                        ? children.some((child) => drilldownOptionMatchesSearch(child, searchText, this.bindLabel))
+                        : expandedKeys.has(this.pathKey(nextPath)));
+                rows.push({ option, path: nextPath, tier, expanded });
+                if (expanded && children?.length) {
+                    walk(children, nextPath, tier + 1);
+                }
+            }
+        };
+        walk(this.#options, [], 1);
+        return rows;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeRows" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        const selected = resolveDrilldownPath(this.#options, this.#data.value, this.bindValue);
+        this.#draftPath.set([...this.#data.value]);
+        this.navStack.set(selected.slice(0, -1));
+        this.#expandAncestors(selected);
+    }
+    onSearch = (event) => {
+        this.searchText.set(event.target.value);
+    };
+    onItemClick = (option) => {
+        if (option.children?.length) {
+            this.#blurFocus();
+            this.searchText.set('');
+            this.navStack.set(findDrilldownOptionPathByRef(this.#options, option));
+            return;
+        }
+        const path = this.searchText().trim()
+            ? findDrilldownOptionPathByRef(this.#options, option)
+            : [...this.navStack(), option];
+        this.#draftPath.set(path.map((item) => String(item[this.bindValue])));
+    };
+    onTreeItemClick = (row) => {
+        if (row.option.children?.length) {
+            this.toggleExpanded(row.path);
+            return;
+        }
+        this.#draftPath.set(row.path.map((item) => String(item[this.bindValue])));
+    };
+    toggleExpanded = (path) => {
+        const key = this.pathKey(path);
+        this.expandedKeys.update((keys) => {
+            const next = new Set(keys);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+    };
+    onBack = () => {
+        if (this.layout === 'drilldown' && this.navStack().length) {
+            this.#blurFocus();
+            this.searchText.set('');
+            this.navStack.update((stack) => stack.slice(0, -1));
+            return;
+        }
+        this.hide(undefined);
+    };
+    onApply = () => {
+        this.hide(this.#draftPath());
+    };
+    onDismiss = () => {
+        this.hide(undefined);
+    };
+    isDraftLeaf = (path) => {
+        const draft = this.#draftPath();
+        return path.length === draft.length && path.every((item, index) => String(item[this.bindValue]) === draft[index]);
+    };
+    pathKey = (path) => drilldownPathKey(path, this.bindValue);
+    optionPath = (option) => this.searchText().trim() ? findDrilldownOptionPathByRef(this.#options, option) : [...this.navStack(), option];
+    isOptionSelected = (option) => this.isDraftLeaf(this.optionPath(option));
+    #expandAncestors = (selected) => {
+        const keys = new Set();
+        for (let index = 1; index < selected.length; index++) {
+            keys.add(this.pathKey(selected.slice(0, index)));
+        }
+        this.expandedKeys.set(keys);
+    };
+    #blurFocus = () => {
+        const active = document.activeElement;
+        if (active instanceof HTMLElement) {
+            active.blur();
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsDrilldownSelectMobileDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GdsDrilldownSelectMobileDialogComponent, isStandalone: true, selector: "gds-drilldown-select-mobile-dialog", usesInheritance: true, ngImport: i0, template: "<dialog\n  gds-dialog\n  type=\"drawer-bottom\"\n  background=\"white\"\n  suppressDismissBtn\n  class=\"mobile-dialog\"\n  (canceled)=\"onDismiss()\"\n>\n  <ng-template #layoutTmpl>\n    <div\n      class=\"\n        gds-display-flex\n        gds-flex-column\n        gds-gap-sm\n        gds-min-height-0\n        gds-padding-sm\n        gds-width-100-parent\n        layout\n      \"\n    >\n      <header class=\"\n        gds-align-items-center\n        gds-display-grid\n        mobile-dialog-header\n      \">\n        <button\n          gds-icon-button\n          variant=\"invisible\"\n          class=\"mobile-dialog-back\"\n          (clicked)=\"onBack()\"\n          [attr.aria-label]=\"backAriaLabel\"\n        >\n          <gds-icon\n            key=\"line-chevron-left-stroke\"\n            class=\"\n              gds-icon-primary\n              gds-icon-size-2xs\n              gds-mobile-icon-size-sm\n            \"\n          />\n        </button>\n        <span\n          class=\"\n            gds-min-width-0\n            gds-text-align-center\n            gds-text-body-large\n            gds-text-primary\n            gds-truncate\n            mobile-dialog-title\n          \"\n        >\n          {{ mobileDialogTitle() }}\n        </span>\n        <button\n          gds-button\n          class=\"\n            gds-background-secondary\n            gds-radius-pill\n            mobile-dialog-apply\n          \"\n          [disabled]=\"!hasValidDraft()\"\n          (clicked)=\"onApply()\"\n        >\n          {{ applyLabel }}\n        </button>\n      </header>\n\n      @if (searchable) {\n        <gds-text-input\n          class=\"\n            gds-gap-xs\n            search\n          \"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <gds-icon\n            leading-visual\n            key=\"line-search\"\n            class=\"\n              gds-icon-secondary\n              gds-icon-size-2xs\n            \"\n          />\n          <input\n            type=\"text\"\n            class=\"\n              gds-background-none\n              gds-border-none\n              gds-flex-1\n              gds-min-width-0\n              gds-outline-none\n              gds-text-body\n            \"\n            [placeholder]=\"searchPlaceholder\"\n            [value]=\"searchText()\"\n            (input)=\"onSearch($event)\"\n          />\n        </gds-text-input>\n      }\n\n      <div class=\"\n        gds-flex-grow-1\n        gds-min-height-0\n        gds-scrollable-vertically\n      \">\n        @if (layout === 'tree') {\n          <div class=\"\n            gds-display-flex\n            gds-flex-column\n            gds-gap-3xs\n          \">\n            @for (row of treeRows(); track pathKey(row.path)) {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-gap-xs\n                  gds-padding-block-2xs\n                  gds-padding-inline-sm\n                  gds-position-relative\n                  gds-radius-sm\n                  gds-text-body\n                  gds-text-primary\n                  item\n                \"\n                [style.padding-inline-start.px]=\"12 + (row.tier - 1) * 24\"\n                [ngClass]=\"{\n                  active: !row.option.children?.length && isDraftLeaf(row.path)\n                }\"\n                role=\"button\"\n                tabindex=\"-1\"\n                (click)=\"onTreeItemClick(row)\"\n                (keydown.enter)=\"onTreeItemClick(row)\"\n              >\n                @if (row.option.children?.length) {\n                  <gds-icon\n                    [key]=\"row.expanded ? 'line-chevron-down-stroke' : 'line-chevron-right-stroke'\"\n                    class=\"\n                      gds-flex-0\n                      gds-icon-primary\n                      gds-icon-size-2xs\n                    \"\n                  />\n                }\n                <span class=\"\n                  gds-flex-1\n                  gds-min-width-0\n                  gds-truncate\n                \">{{ row.option[bindLabel] }}</span>\n              </div>\n            } @empty {\n              <div class=\"\n                gds-padding-block-2xs\n                gds-padding-inline-sm\n                gds-text-body\n                gds-text-secondary\n              \">\n                {{ emptyText }}\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"\n            gds-display-flex\n            gds-flex-column\n            gds-gap-3xs\n          \">\n            @for (option of displayedOptions(); track pathKey(optionPath(option))) {\n              @if (option.children?.length) {\n                <div\n                  class=\"\n                    gds-align-items-center\n                    gds-display-flex\n                    gds-gap-xs\n                    gds-padding-block-2xs\n                    gds-padding-inline-sm\n                    gds-position-relative\n                    gds-radius-sm\n                    gds-text-body\n                    gds-text-primary\n                    item\n                    parent\n                  \"\n                  role=\"button\"\n                  tabindex=\"-1\"\n                  (click)=\"onItemClick(option)\"\n                  (keydown.enter)=\"onItemClick(option)\"\n                >\n                  <span class=\"\n                    gds-flex-1\n                    gds-min-width-0\n                    gds-truncate\n                  \">{{ option[bindLabel] }}</span>\n                  <gds-icon\n                    key=\"line-chevron-right-stroke\"\n                    class=\"\n                      gds-flex-0\n                      gds-icon-primary\n                      gds-icon-size-2xs\n                    \"\n                  />\n                </div>\n              } @else {\n                <div\n                  class=\"\n                    gds-align-items-center\n                    gds-display-flex\n                    gds-padding-block-2xs\n                    gds-padding-inline-sm\n                    gds-position-relative\n                    gds-radius-sm\n                    gds-text-body\n                    gds-text-primary\n                    item\n                  \"\n                  [ngClass]=\"{ active: isOptionSelected(option) }\"\n                  role=\"button\"\n                  tabindex=\"-1\"\n                  (click)=\"onItemClick(option)\"\n                  (keydown.enter)=\"onItemClick(option)\"\n                >\n                  {{ option[bindLabel] }}\n                </div>\n              }\n            } @empty {\n              <div class=\"\n                gds-padding-block-2xs\n                gds-padding-inline-sm\n                gds-text-body\n                gds-text-secondary\n              \">\n                {{ emptyText }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</dialog>\n", styles: ["@layer design-system{:host .search{--gds-form-control-cursor: text;--gds-form-control-hover-color: var(--gds-palette-background-white);box-sizing:border-box}:host .item{cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}:host .item.active:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .item:focus-visible{outline:none}:host .mobile-dialog{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}:host .mobile-dialog[open]{display:flex;flex-direction:column}:host .layout{flex:1;min-height:0}:host .mobile-dialog-header{grid-template-columns:1fr auto 1fr}:host .mobile-dialog-title{grid-column:2}:host .mobile-dialog-apply{justify-self:end}}\n"], dependencies: [{ kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsTextInputComponent, selector: "gds-text-input", inputs: ["clearable"], outputs: ["cleared"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsDrilldownSelectMobileDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gds-drilldown-select-mobile-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        GdsButtonComponent,
+                        GdsDialogComponent,
+                        GdsTextInputComponent,
+                        GdsIconComponent,
+                        GdsIconButtonComponent,
+                        NgClass,
+                        GdsNativeInputDirective
+                    ], template: "<dialog\n  gds-dialog\n  type=\"drawer-bottom\"\n  background=\"white\"\n  suppressDismissBtn\n  class=\"mobile-dialog\"\n  (canceled)=\"onDismiss()\"\n>\n  <ng-template #layoutTmpl>\n    <div\n      class=\"\n        gds-display-flex\n        gds-flex-column\n        gds-gap-sm\n        gds-min-height-0\n        gds-padding-sm\n        gds-width-100-parent\n        layout\n      \"\n    >\n      <header class=\"\n        gds-align-items-center\n        gds-display-grid\n        mobile-dialog-header\n      \">\n        <button\n          gds-icon-button\n          variant=\"invisible\"\n          class=\"mobile-dialog-back\"\n          (clicked)=\"onBack()\"\n          [attr.aria-label]=\"backAriaLabel\"\n        >\n          <gds-icon\n            key=\"line-chevron-left-stroke\"\n            class=\"\n              gds-icon-primary\n              gds-icon-size-2xs\n              gds-mobile-icon-size-sm\n            \"\n          />\n        </button>\n        <span\n          class=\"\n            gds-min-width-0\n            gds-text-align-center\n            gds-text-body-large\n            gds-text-primary\n            gds-truncate\n            mobile-dialog-title\n          \"\n        >\n          {{ mobileDialogTitle() }}\n        </span>\n        <button\n          gds-button\n          class=\"\n            gds-background-secondary\n            gds-radius-pill\n            mobile-dialog-apply\n          \"\n          [disabled]=\"!hasValidDraft()\"\n          (clicked)=\"onApply()\"\n        >\n          {{ applyLabel }}\n        </button>\n      </header>\n\n      @if (searchable) {\n        <gds-text-input\n          class=\"\n            gds-gap-xs\n            search\n          \"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <gds-icon\n            leading-visual\n            key=\"line-search\"\n            class=\"\n              gds-icon-secondary\n              gds-icon-size-2xs\n            \"\n          />\n          <input\n            type=\"text\"\n            class=\"\n              gds-background-none\n              gds-border-none\n              gds-flex-1\n              gds-min-width-0\n              gds-outline-none\n              gds-text-body\n            \"\n            [placeholder]=\"searchPlaceholder\"\n            [value]=\"searchText()\"\n            (input)=\"onSearch($event)\"\n          />\n        </gds-text-input>\n      }\n\n      <div class=\"\n        gds-flex-grow-1\n        gds-min-height-0\n        gds-scrollable-vertically\n      \">\n        @if (layout === 'tree') {\n          <div class=\"\n            gds-display-flex\n            gds-flex-column\n            gds-gap-3xs\n          \">\n            @for (row of treeRows(); track pathKey(row.path)) {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-gap-xs\n                  gds-padding-block-2xs\n                  gds-padding-inline-sm\n                  gds-position-relative\n                  gds-radius-sm\n                  gds-text-body\n                  gds-text-primary\n                  item\n                \"\n                [style.padding-inline-start.px]=\"12 + (row.tier - 1) * 24\"\n                [ngClass]=\"{\n                  active: !row.option.children?.length && isDraftLeaf(row.path)\n                }\"\n                role=\"button\"\n                tabindex=\"-1\"\n                (click)=\"onTreeItemClick(row)\"\n                (keydown.enter)=\"onTreeItemClick(row)\"\n              >\n                @if (row.option.children?.length) {\n                  <gds-icon\n                    [key]=\"row.expanded ? 'line-chevron-down-stroke' : 'line-chevron-right-stroke'\"\n                    class=\"\n                      gds-flex-0\n                      gds-icon-primary\n                      gds-icon-size-2xs\n                    \"\n                  />\n                }\n                <span class=\"\n                  gds-flex-1\n                  gds-min-width-0\n                  gds-truncate\n                \">{{ row.option[bindLabel] }}</span>\n              </div>\n            } @empty {\n              <div class=\"\n                gds-padding-block-2xs\n                gds-padding-inline-sm\n                gds-text-body\n                gds-text-secondary\n              \">\n                {{ emptyText }}\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"\n            gds-display-flex\n            gds-flex-column\n            gds-gap-3xs\n          \">\n            @for (option of displayedOptions(); track pathKey(optionPath(option))) {\n              @if (option.children?.length) {\n                <div\n                  class=\"\n                    gds-align-items-center\n                    gds-display-flex\n                    gds-gap-xs\n                    gds-padding-block-2xs\n                    gds-padding-inline-sm\n                    gds-position-relative\n                    gds-radius-sm\n                    gds-text-body\n                    gds-text-primary\n                    item\n                    parent\n                  \"\n                  role=\"button\"\n                  tabindex=\"-1\"\n                  (click)=\"onItemClick(option)\"\n                  (keydown.enter)=\"onItemClick(option)\"\n                >\n                  <span class=\"\n                    gds-flex-1\n                    gds-min-width-0\n                    gds-truncate\n                  \">{{ option[bindLabel] }}</span>\n                  <gds-icon\n                    key=\"line-chevron-right-stroke\"\n                    class=\"\n                      gds-flex-0\n                      gds-icon-primary\n                      gds-icon-size-2xs\n                    \"\n                  />\n                </div>\n              } @else {\n                <div\n                  class=\"\n                    gds-align-items-center\n                    gds-display-flex\n                    gds-padding-block-2xs\n                    gds-padding-inline-sm\n                    gds-position-relative\n                    gds-radius-sm\n                    gds-text-body\n                    gds-text-primary\n                    item\n                  \"\n                  [ngClass]=\"{ active: isOptionSelected(option) }\"\n                  role=\"button\"\n                  tabindex=\"-1\"\n                  (click)=\"onItemClick(option)\"\n                  (keydown.enter)=\"onItemClick(option)\"\n                >\n                  {{ option[bindLabel] }}\n                </div>\n              }\n            } @empty {\n              <div class=\"\n                gds-padding-block-2xs\n                gds-padding-inline-sm\n                gds-text-body\n                gds-text-secondary\n              \">\n                {{ emptyText }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</dialog>\n", styles: ["@layer design-system{:host .search{--gds-form-control-cursor: text;--gds-form-control-hover-color: var(--gds-palette-background-white);box-sizing:border-box}:host .item{cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}:host .item.active:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .item:focus-visible{outline:none}:host .mobile-dialog{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}:host .mobile-dialog[open]{display:flex;flex-direction:column}:host .layout{flex:1;min-height:0}:host .mobile-dialog-header{grid-template-columns:1fr auto 1fr}:host .mobile-dialog-title{grid-column:2}:host .mobile-dialog-apply{justify-self:end}}\n"] }]
+        }], ctorParameters: () => [] });
+
 class GdsDrilldownSelectComponent extends GdsSignalFormControl {
     #injector = inject(Injector);
     #destroyRef = inject(DestroyRef);
     #directive = inject(CdkMenuTrigger);
     #elementRef = inject(ElementRef);
+    #deviceDetectorSvc = inject(DeviceDetectorSignalService);
+    #dialogSvc = inject(GdsDialogService);
     #formField = inject(FormField, { self: true, optional: true });
     options = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -5828,6 +6035,13 @@ class GdsDrilldownSelectComponent extends GdsSignalFormControl {
     ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
     backAriaLabel = input('Go back', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "backAriaLabel" }] : /* istanbul ignore next */ []));
+    dialogTitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogTitle" }] : /* istanbul ignore next */ []));
+    applyLabel = input('Apply', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+    /** Mobile picker presentation. Desktop always uses the dropdown drilldown menu. */
+    layout = input('drilldown', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     value = model([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     dropdownWidth = signal(0, /* @ts-ignore */
@@ -5844,19 +6058,12 @@ class GdsDrilldownSelectComponent extends GdsSignalFormControl {
     #reopenAfterInternalNavigation = false;
     /** Ignore FocusMonitor open after close — cdkMenu refocuses the trigger on escape or hitting enter on a leaf (Escape/select). */
     #suppressOpenOnFocus = false;
+    isMobile = this.#deviceDetectorSvc.isMobile;
     menu = viewChild.required('menu', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
     searchInput = viewChild('searchInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
-    displayedOptions = computed(() => {
-        const searchText = this.searchText().trim().toLowerCase();
-        const stack = this.navStack();
-        const currentOptions = stack[stack.length - 1]?.children ?? this.options();
-        if (!searchText) {
-            return currentOptions;
-        }
-        return this.#flattenOptions(this.options()).filter((option) => String(option[this.bindLabel()]).toLowerCase().includes(searchText));
-    }, /* @ts-ignore */
+    displayedOptions = computed(() => displayedDrilldownOptions(this.options(), this.navStack(), this.searchText(), this.bindLabel()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayedOptions" }] : /* istanbul ignore next */ []));
     label = computed(() => this.#selectedPath()
         .map((option) => this.optionLabel(option))
@@ -5870,12 +6077,12 @@ class GdsDrilldownSelectComponent extends GdsSignalFormControl {
         const pathValues = this.value();
         this.options();
         this.bindValue();
-        untracked(() => this.#selectedPath.set(this.#resolvePath(this.options(), pathValues ?? [])));
+        untracked(() => this.#selectedPath.set(resolveDrilldownPath(this.options(), pathValues ?? [], this.bindValue())));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#syncSelectedOption" }] : /* istanbul ignore next */ []));
     #setupMenuTemplateRef = effect(() => {
         const menu = this.menu();
-        this.#directive.menuTemplateRef = !this.disabled() ? menu : null;
+        this.#directive.menuTemplateRef = !this.disabled() && !this.isMobile() ? menu : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#setupMenuTemplateRef" }] : /* istanbul ignore next */ []));
     #setMenuPosition = effect(() => {
@@ -5932,15 +6139,22 @@ class GdsDrilldownSelectComponent extends GdsSignalFormControl {
         resizeObserver.observe(this.#elementRef.nativeElement);
         this.#destroyRef.onDestroy(() => resizeObserver.disconnect());
     }
+    onHostClick = (event) => {
+        if (!this.isMobile() || this.disabled()) {
+            return;
+        }
+        event?.stopPropagation();
+        this.openMobileDialog();
+    };
     onItemClick = (option) => {
         const path = this.searchText().trim()
-            ? this.#findOptionPathByRef(this.options(), option)
+            ? findDrilldownOptionPathByRef(this.options(), option)
             : [...this.navStack(), option];
         this.#setValue(path.map((item) => String(item[this.bindValue()])), true);
     };
     onDrilldownClick = (option) => {
         this.searchText.set('');
-        this.navStack.set(this.#findOptionPathByRef(this.options(), option));
+        this.navStack.set(findDrilldownOptionPathByRef(this.options(), option));
         // CDKMenu closes when it loses focus. When navStack > 2 and triggers internal navigation, the menu will not close because the menu doesn't lose focus.
         // Force closing to be consistent so the closed subscription can reopen the menu when internal navigation is triggered. (Same as onBack and onReset and onBreadcrumbClick)
         this.#reopenAfterInternalNavigation = true;
@@ -5985,8 +6199,47 @@ class GdsDrilldownSelectComponent extends GdsSignalFormControl {
         if (this.disabled()) {
             return;
         }
+        if (this.isMobile()) {
+            this.openMobileDialog();
+            return;
+        }
         this.#directive.open();
     };
+    openMobileDialog = () => {
+        if (this.disabled()) {
+            return;
+        }
+        this.#formField?.state().reset();
+        this.isOpen.set(true);
+        this.#dialogSvc
+            .open(GdsDrilldownSelectMobileDialogComponent, {
+            options: this.options(),
+            bindValue: this.bindValue(),
+            bindLabel: this.bindLabel(),
+            layout: this.layout(),
+            value: this.value() ?? [],
+            dialogTitle: this.dialogTitle() || this.placeholder(),
+            applyLabel: this.applyLabel(),
+            emptyText: this.emptyText(),
+            backAriaLabel: this.backAriaLabel(),
+            searchable: this.searchable(),
+            searchPlaceholder: this.searchPlaceholder()
+        })
+            .pipe(take(1), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((path) => this.#onMobileResult(path));
+    };
+    #onMobileResult = (path) => {
+        if (path !== undefined) {
+            this.#setValue(path, false);
+        }
+        this.isOpen.set(false);
+        this.#formField?.state().markAsTouched();
+        this.#suppressOpenOnFocus = true;
+        this.#elementRef.nativeElement.focus();
+        setTimeout(() => {
+            this.#suppressOpenOnFocus = false;
+        });
+    };
     optionLabel = (option) => String(option[this.bindLabel()]);
     onArrowRight = (option) => {
         if (option.children?.length) {
@@ -6011,23 +6264,6 @@ class GdsDrilldownSelectComponent extends GdsSignalFormControl {
             }, { injector: this.#injector });
         }
     };
-    #resolvePath = (options, pathValues) => {
-        if (!pathValues.length) {
-            return [];
-        }
-        const path = [];
-        let levelOptions = options;
-        for (const value of pathValues) {
-            const match = levelOptions.find((option) => String(option[this.bindValue()]) === value);
-            if (!match) {
-                return [];
-            }
-            path.push(match);
-            levelOptions = match.children ?? [];
-        }
-        return path;
-    };
-    #flattenOptions = (options) => options.flatMap((option) => [option, ...(option.children?.length ? this.#flattenOptions(option.children) : [])]);
     /** Open at the parent of the selected leaf so the leaf is visible in the current list. */
     #syncNavStackToSelection = () => {
         this.navStack.set(this.#selectedPath().slice(0, -1));
@@ -6065,23 +6301,8 @@ class GdsDrilldownSelectComponent extends GdsSignalFormControl {
         // Prefer trigger over first item so ArrowDown (CdkMenuTrigger) is what enters the list.
         this.#elementRef.nativeElement.focus({ preventScroll: true });
     };
-    #findOptionPathByRef = (options, target, parents = []) => {
-        for (const option of options) {
-            const path = [...parents, option];
-            if (option === target) {
-                return path;
-            }
-            if (option.children?.length) {
-                const found = this.#findOptionPathByRef(option.children, target, path);
-                if (found.length > 0) {
-                    return found;
-                }
-            }
-        }
-        return [];
-    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsDrilldownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GdsDrilldownSelectComponent, isStandalone: true, selector: "gds-drilldown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchAutoFocus: { classPropertyName: "searchAutoFocus", publicName: "searchAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, maxMenuHeight: { classPropertyName: "maxMenuHeight", publicName: "maxMenuHeight", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, mobileCancelLabel: { classPropertyName: "mobileCancelLabel", publicName: "mobileCancelLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, backAriaLabel: { classPropertyName: "backAriaLabel", publicName: "backAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "button" }, listeners: { "keydown.escape": "onEscape()", "keydown.arrowleft": "onArrowLeft()" }, properties: { "attr.tabindex": "disabled() ? -1 : 0", "class.is-controlled": "isOpen()" }, classAttribute: "\n      gds-align-items-center\n      gds-display-flex\n      gds-gap-2xs\n      gds-justify-content-between\n      gds-mobile-padding-block-0\n      gds-mobile-text-input-mobile\n      gds-padding-block-3xs\n      gds-padding-inline-xs\n      gds-radius-sm\n      gds-text-input\n      gds-outline-none\n    " }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "<div\n  class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-truncate\n    label\n  \"\n  [ngClass]=\"{ placeholder: !label(), 'gds-user-select-none': !label() }\"\n>\n  {{ label() ? label() : placeholder() }}\n</div>\n\n<gds-icon\n  class=\"\n    gds-icon-primary\n    gds-icon-size-2xs\n  \"\n  key=\"line-chevron-down-stroke\"\n/>\n\n<ng-template #menu>\n  <gds-dropdown\n    [mobileCancelLabel]=\"mobileCancelLabel()\"\n    cdkTargetMenuAim\n    preventMobileStyling\n    allowDefaultTabBehavior\n    [style.minWidth]=\"dropdownWidth() + 'px'\"\n  >\n    <div\n      class=\"\n        gds-display-flex\n        gds-flex-column\n        gds-padding-block-end-2xs\n        gds-padding-block-start-3xs\n        gds-padding-inline-2xs\n      \"\n    >\n      @if (hasNavHeader()) {\n        <div class=\"\n          gds-align-items-center\n          gds-display-flex\n          gds-gap-2xs\n          gds-padding-block-end-2xs\n        \">\n          @if (navStack().length) {\n            <button\n              gds-icon-button\n              variant=\"invisible\"\n              class=\"\n                gds-min-height-0\n                gds-padding-0\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onBack()\"\n              [attr.aria-label]=\"backAriaLabel()\"\n            >\n              <gds-icon\n                key=\"line-arrow-left\"\n                class=\"\n                  gds-icon-primary\n                  gds-icon-size-2xs\n                \"\n              />\n            </button>\n          }\n\n          @if (clearable() && label()) {\n            <button\n              gds-button\n              variant=\"invisible\"\n              size=\"small\"\n              class=\"\n                gds-min-height-0\n                gds-padding-0\n                reset-button\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onReset()\"\n            >\n              {{ resetLabel() }}\n            </button>\n          }\n\n          @for (crumb of navStack(); track $index) {\n            @if ((clearable() && label()) || $index > 0) {\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"\n                  gds-flex-0\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                \"\n              />\n            }\n            <button\n              gds-button\n              variant=\"invisible\"\n              size=\"small\"\n              class=\"\n                breadcrumb\n                gds-min-height-0\n                gds-padding-0\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onBreadcrumbClick($index)\"\n            >\n              {{ optionLabel(crumb) }}\n            </button>\n          }\n        </div>\n      }\n\n      @if (searchable()) {\n        <gds-text-input\n          class=\"\n            gds-gap-xs\n            gds-margin-block-end-2xs\n            search\n          \"\n          (pointerdown)=\"$event.stopPropagation()\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <gds-icon\n            leading-visual\n            key=\"line-search\"\n            class=\"\n              gds-icon-secondary\n              gds-icon-size-2xs\n            \"\n          />\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"\n              gds-background-none\n              gds-border-none\n              gds-flex-1\n              gds-min-width-0\n              gds-outline-none\n              gds-text-body\n            \"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchText()\"\n            (input)=\"onSearch($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n          />\n        </gds-text-input>\n      }\n\n      <div\n        [style.maxHeight]=\"maxMenuHeight()\"\n        class=\"gds-scrollable-vertically\"\n      >\n        <div class=\"\n          gds-display-flex\n          gds-flex-column\n          gds-gap-3xs\n        \">\n          @for (option of displayedOptions(); track option[bindValue()]) {\n            @if (option.children?.length) {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-gap-xs\n                  gds-padding-block-2xs\n                  gds-padding-inline-sm\n                  gds-position-relative\n                  gds-radius-sm\n                  gds-text-body\n                  gds-text-primary\n                  item\n                \"\n                [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n                cdkMenuItem\n                (pointerdown)=\"$event.stopPropagation()\"\n                (cdkMenuItemTriggered)=\"onDrilldownClick(option)\"\n                (keydown.escape)=\"onEscape()\"\n                (keydown.arrowright)=\"onArrowRight(option)\"\n                (keydown.arrowleft)=\"onArrowLeft()\"\n                tabindex=\"-1\"\n              >\n                <span class=\"\n                  gds-flex-1\n                  gds-min-width-0\n                  gds-truncate\n                \">{{ option[bindLabel()] }}</span>\n                <gds-icon\n                  key=\"line-chevron-right-stroke\"\n                  class=\"\n                    gds-flex-0\n                    gds-icon-primary\n                    gds-icon-size-2xs\n                  \"\n                />\n              </div>\n            } @else {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-padding-block-2xs\n                  gds-padding-inline-sm\n                  gds-position-relative\n                  gds-radius-sm\n                  gds-text-body\n                  gds-text-primary\n                  item\n                \"\n                tabindex=\"-1\"\n                [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n                cdkMenuItem\n                (cdkMenuItemTriggered)=\"onItemClick(option)\"\n                (keydown.escape)=\"onEscape()\"\n                (keydown.arrowleft)=\"onArrowLeft()\"\n                (keydown.arrowright)=\"onArrowRight(option)\"\n              >\n                {{ option[bindLabel()] }}\n              </div>\n            }\n          } @empty {\n            <div class=\"\n              gds-padding-block-2xs\n              gds-padding-inline-sm\n              gds-text-body\n              gds-text-secondary\n            \">\n              {{ emptyText() }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color)}.reset-button,.breadcrumb{--gds-button-color: var(--gds-palette-text-default-secondary);--gds-button-color-hover: var(--gds-palette-text-default-secondary)}.search{--gds-form-control-cursor: text;--gds-form-control-hover-color: var(--gds-palette-background-white);box-sizing:border-box}.item{cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"], dependencies: [{ kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior", "mobileCancelLabel"] }, { kind: "component", type: GdsTextInputComponent, selector: "gds-text-input", inputs: ["clearable"], outputs: ["cleared"] }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", exportAs: ["cdkTargetMenuAim"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GdsDrilldownSelectComponent, isStandalone: true, selector: "gds-drilldown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchAutoFocus: { classPropertyName: "searchAutoFocus", publicName: "searchAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, maxMenuHeight: { classPropertyName: "maxMenuHeight", publicName: "maxMenuHeight", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, mobileCancelLabel: { classPropertyName: "mobileCancelLabel", publicName: "mobileCancelLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, backAriaLabel: { classPropertyName: "backAriaLabel", publicName: "backAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "button" }, listeners: { "click": "onHostClick($event)", "keydown.escape": "onEscape()", "keydown.arrowleft": "onArrowLeft()" }, properties: { "attr.tabindex": "disabled() ? -1 : 0", "class.is-controlled": "isOpen()" }, classAttribute: "\n      gds-align-items-center\n      gds-display-flex\n      gds-gap-2xs\n      gds-justify-content-between\n      gds-mobile-padding-block-0\n      gds-mobile-text-input-mobile\n      gds-padding-block-3xs\n      gds-padding-inline-xs\n      gds-radius-sm\n      gds-text-input\n      gds-outline-none\n    " }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "<div\n  class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-truncate\n    label\n  \"\n  [ngClass]=\"{ placeholder: !label(), 'gds-user-select-none': !label() }\"\n>\n  {{ label() ? label() : placeholder() }}\n</div>\n\n<gds-icon\n  class=\"\n    gds-icon-primary\n    gds-icon-size-2xs\n  \"\n  key=\"line-chevron-down-stroke\"\n/>\n\n<ng-template #menu>\n  <gds-dropdown\n    [mobileCancelLabel]=\"mobileCancelLabel()\"\n    cdkTargetMenuAim\n    preventMobileStyling\n    allowDefaultTabBehavior\n    [style.minWidth]=\"dropdownWidth() + 'px'\"\n  >\n    <div\n      class=\"\n        gds-display-flex\n        gds-flex-column\n        gds-padding-block-end-2xs\n        gds-padding-block-start-3xs\n        gds-padding-inline-2xs\n      \"\n    >\n      @if (hasNavHeader()) {\n        <div class=\"\n          gds-align-items-center\n          gds-display-flex\n          gds-gap-2xs\n          gds-padding-block-end-2xs\n        \">\n          @if (navStack().length) {\n            <button\n              gds-icon-button\n              variant=\"invisible\"\n              class=\"\n                gds-min-height-0\n                gds-padding-0\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onBack()\"\n              [attr.aria-label]=\"backAriaLabel()\"\n            >\n              <gds-icon\n                key=\"line-arrow-left\"\n                class=\"\n                  gds-icon-primary\n                  gds-icon-size-2xs\n                \"\n              />\n            </button>\n          }\n\n          @if (clearable() && label()) {\n            <button\n              gds-button\n              variant=\"invisible\"\n              size=\"small\"\n              class=\"\n                gds-min-height-0\n                gds-padding-0\n                reset-button\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onReset()\"\n            >\n              {{ resetLabel() }}\n            </button>\n          }\n\n          @for (crumb of navStack(); track $index) {\n            @if ((clearable() && label()) || $index > 0) {\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"\n                  gds-flex-0\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                \"\n              />\n            }\n            <button\n              gds-button\n              variant=\"invisible\"\n              size=\"small\"\n              class=\"\n                breadcrumb\n                gds-min-height-0\n                gds-padding-0\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onBreadcrumbClick($index)\"\n            >\n              {{ optionLabel(crumb) }}\n            </button>\n          }\n        </div>\n      }\n\n      @if (searchable()) {\n        <gds-text-input\n          class=\"\n            gds-gap-xs\n            gds-margin-block-end-2xs\n            search\n          \"\n          (pointerdown)=\"$event.stopPropagation()\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <gds-icon\n            leading-visual\n            key=\"line-search\"\n            class=\"\n              gds-icon-secondary\n              gds-icon-size-2xs\n            \"\n          />\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"\n              gds-background-none\n              gds-border-none\n              gds-flex-1\n              gds-min-width-0\n              gds-outline-none\n              gds-text-body\n            \"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchText()\"\n            (input)=\"onSearch($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n          />\n        </gds-text-input>\n      }\n\n      <div\n        [style.maxHeight]=\"maxMenuHeight()\"\n        class=\"gds-scrollable-vertically\"\n      >\n        <div class=\"\n          gds-display-flex\n          gds-flex-column\n          gds-gap-3xs\n        \">\n          @for (option of displayedOptions(); track option[bindValue()]) {\n            @if (option.children?.length) {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-gap-xs\n                  gds-padding-block-2xs\n                  gds-padding-inline-sm\n                  gds-position-relative\n                  gds-radius-sm\n                  gds-text-body\n                  gds-text-primary\n                  item\n                \"\n                [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n                cdkMenuItem\n                (pointerdown)=\"$event.stopPropagation()\"\n                (cdkMenuItemTriggered)=\"onDrilldownClick(option)\"\n                (keydown.escape)=\"onEscape()\"\n                (keydown.arrowright)=\"onArrowRight(option)\"\n                (keydown.arrowleft)=\"onArrowLeft()\"\n                tabindex=\"-1\"\n              >\n                <span class=\"\n                  gds-flex-1\n                  gds-min-width-0\n                  gds-truncate\n                \">{{ option[bindLabel()] }}</span>\n                <gds-icon\n                  key=\"line-chevron-right-stroke\"\n                  class=\"\n                    gds-flex-0\n                    gds-icon-primary\n                    gds-icon-size-2xs\n                  \"\n                />\n              </div>\n            } @else {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-padding-block-2xs\n                  gds-padding-inline-sm\n                  gds-position-relative\n                  gds-radius-sm\n                  gds-text-body\n                  gds-text-primary\n                  item\n                \"\n                tabindex=\"-1\"\n                [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n                cdkMenuItem\n                (cdkMenuItemTriggered)=\"onItemClick(option)\"\n                (keydown.escape)=\"onEscape()\"\n                (keydown.arrowleft)=\"onArrowLeft()\"\n                (keydown.arrowright)=\"onArrowRight(option)\"\n              >\n                {{ option[bindLabel()] }}\n              </div>\n            }\n          } @empty {\n            <div class=\"\n              gds-padding-block-2xs\n              gds-padding-inline-sm\n              gds-text-body\n              gds-text-secondary\n            \">\n              {{ emptyText() }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color)}.reset-button,.breadcrumb{--gds-button-color: var(--gds-palette-text-default-secondary);--gds-button-color-hover: var(--gds-palette-text-default-secondary)}.search{--gds-form-control-cursor: text;--gds-form-control-hover-color: var(--gds-palette-background-white);box-sizing:border-box}.item{cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"], dependencies: [{ kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior", "mobileCancelLabel"] }, { kind: "component", type: GdsTextInputComponent, selector: "gds-text-input", inputs: ["clearable"], outputs: ["cleared"] }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", exportAs: ["cdkTargetMenuAim"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsDrilldownSelectComponent, decorators: [{
             type: Component,
@@ -6113,10 +6334,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       gds-outline-none
     `,
                         '[class.is-controlled]': 'isOpen()',
+                        '(click)': 'onHostClick($event)',
                         '(keydown.escape)': 'onEscape()',
                         '(keydown.arrowleft)': 'onArrowLeft()'
                     }, hostDirectives: [CdkMenuTrigger], template: "<div\n  class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-truncate\n    label\n  \"\n  [ngClass]=\"{ placeholder: !label(), 'gds-user-select-none': !label() }\"\n>\n  {{ label() ? label() : placeholder() }}\n</div>\n\n<gds-icon\n  class=\"\n    gds-icon-primary\n    gds-icon-size-2xs\n  \"\n  key=\"line-chevron-down-stroke\"\n/>\n\n<ng-template #menu>\n  <gds-dropdown\n    [mobileCancelLabel]=\"mobileCancelLabel()\"\n    cdkTargetMenuAim\n    preventMobileStyling\n    allowDefaultTabBehavior\n    [style.minWidth]=\"dropdownWidth() + 'px'\"\n  >\n    <div\n      class=\"\n        gds-display-flex\n        gds-flex-column\n        gds-padding-block-end-2xs\n        gds-padding-block-start-3xs\n        gds-padding-inline-2xs\n      \"\n    >\n      @if (hasNavHeader()) {\n        <div class=\"\n          gds-align-items-center\n          gds-display-flex\n          gds-gap-2xs\n          gds-padding-block-end-2xs\n        \">\n          @if (navStack().length) {\n            <button\n              gds-icon-button\n              variant=\"invisible\"\n              class=\"\n                gds-min-height-0\n                gds-padding-0\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onBack()\"\n              [attr.aria-label]=\"backAriaLabel()\"\n            >\n              <gds-icon\n                key=\"line-arrow-left\"\n                class=\"\n                  gds-icon-primary\n                  gds-icon-size-2xs\n                \"\n              />\n            </button>\n          }\n\n          @if (clearable() && label()) {\n            <button\n              gds-button\n              variant=\"invisible\"\n              size=\"small\"\n              class=\"\n                gds-min-height-0\n                gds-padding-0\n                reset-button\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onReset()\"\n            >\n              {{ resetLabel() }}\n            </button>\n          }\n\n          @for (crumb of navStack(); track $index) {\n            @if ((clearable() && label()) || $index > 0) {\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"\n                  gds-flex-0\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                \"\n              />\n            }\n            <button\n              gds-button\n              variant=\"invisible\"\n              size=\"small\"\n              class=\"\n                breadcrumb\n                gds-min-height-0\n                gds-padding-0\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onBreadcrumbClick($index)\"\n            >\n              {{ optionLabel(crumb) }}\n            </button>\n          }\n        </div>\n      }\n\n      @if (searchable()) {\n        <gds-text-input\n          class=\"\n            gds-gap-xs\n            gds-margin-block-end-2xs\n            search\n          \"\n          (pointerdown)=\"$event.stopPropagation()\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <gds-icon\n            leading-visual\n            key=\"line-search\"\n            class=\"\n              gds-icon-secondary\n              gds-icon-size-2xs\n            \"\n          />\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"\n              gds-background-none\n              gds-border-none\n              gds-flex-1\n              gds-min-width-0\n              gds-outline-none\n              gds-text-body\n            \"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchText()\"\n            (input)=\"onSearch($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n          />\n        </gds-text-input>\n      }\n\n      <div\n        [style.maxHeight]=\"maxMenuHeight()\"\n        class=\"gds-scrollable-vertically\"\n      >\n        <div class=\"\n          gds-display-flex\n          gds-flex-column\n          gds-gap-3xs\n        \">\n          @for (option of displayedOptions(); track option[bindValue()]) {\n            @if (option.children?.length) {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-gap-xs\n                  gds-padding-block-2xs\n                  gds-padding-inline-sm\n                  gds-position-relative\n                  gds-radius-sm\n                  gds-text-body\n                  gds-text-primary\n                  item\n                \"\n                [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n                cdkMenuItem\n                (pointerdown)=\"$event.stopPropagation()\"\n                (cdkMenuItemTriggered)=\"onDrilldownClick(option)\"\n                (keydown.escape)=\"onEscape()\"\n                (keydown.arrowright)=\"onArrowRight(option)\"\n                (keydown.arrowleft)=\"onArrowLeft()\"\n                tabindex=\"-1\"\n              >\n                <span class=\"\n                  gds-flex-1\n                  gds-min-width-0\n                  gds-truncate\n                \">{{ option[bindLabel()] }}</span>\n                <gds-icon\n                  key=\"line-chevron-right-stroke\"\n                  class=\"\n                    gds-flex-0\n                    gds-icon-primary\n                    gds-icon-size-2xs\n                  \"\n                />\n              </div>\n            } @else {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-padding-block-2xs\n                  gds-padding-inline-sm\n                  gds-position-relative\n                  gds-radius-sm\n                  gds-text-body\n                  gds-text-primary\n                  item\n                \"\n                tabindex=\"-1\"\n                [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n                cdkMenuItem\n                (cdkMenuItemTriggered)=\"onItemClick(option)\"\n                (keydown.escape)=\"onEscape()\"\n                (keydown.arrowleft)=\"onArrowLeft()\"\n                (keydown.arrowright)=\"onArrowRight(option)\"\n              >\n                {{ option[bindLabel()] }}\n              </div>\n            }\n          } @empty {\n            <div class=\"\n              gds-padding-block-2xs\n              gds-padding-inline-sm\n              gds-text-body\n              gds-text-secondary\n            \">\n              {{ emptyText() }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color)}.reset-button,.breadcrumb{--gds-button-color: var(--gds-palette-text-default-secondary);--gds-button-color-hover: var(--gds-palette-text-default-secondary)}.search{--gds-form-control-cursor: text;--gds-form-control-hover-color: var(--gds-palette-background-white);box-sizing:border-box}.item{cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchAutoFocus", required: false }] }], maxMenuHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxMenuHeight", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], mobileCancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCancelLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], backAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backAriaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchAutoFocus", required: false }] }], maxMenuHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxMenuHeight", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], mobileCancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCancelLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], backAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backAriaLabel", required: false }] }], dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 
 class GdsEmptyStateComponent extends OnBrandChanged {
     #cdnUrl = inject(CDN_URL);
@@ -6761,8 +6983,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     }, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"] }]
         }] });
 
+class GdsSelectMobileDialogComponent extends GdsDialogBaseDirective {
+    #data = this.config.data;
+    items = this.#data.items;
+    bindValue = this.#data.bindValue;
+    bindLabel = this.#data.bindLabel;
+    dialogTitle = this.#data.dialogTitle;
+    applyLabel = this.#data.applyLabel;
+    emptyText = this.#data.emptyText;
+    backAriaLabel = this.#data.backAriaLabel;
+    searchable = this.#data.searchable;
+    searchPlaceholder = this.#data.searchPlaceholder;
+    searchText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    #draftValue = signal(this.#data.value, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#draftValue" }] : /* istanbul ignore next */ []));
+    displayedItems = computed(() => {
+        const query = this.searchText().trim().toLowerCase();
+        if (!query) {
+            return this.items;
+        }
+        return this.items.filter((item) => this.itemLabel(item).toLowerCase().includes(query));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedItems" }] : /* istanbul ignore next */ []));
+    hasValidDraft = computed(() => this.#draftValue() !== undefined && this.#draftValue() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValidDraft" }] : /* istanbul ignore next */ []));
+    onSearch = (event) => {
+        this.searchText.set(event.target.value);
+    };
+    onItemClick = (item) => {
+        this.#draftValue.set(this.itemValue(item));
+    };
+    onBack = () => {
+        this.hide(undefined);
+    };
+    onApply = () => {
+        this.hide(this.#draftValue());
+    };
+    onDismiss = () => {
+        this.hide(undefined);
+    };
+    isSelected = (item) => String(this.itemValue(item)) === String(this.#draftValue());
+    itemLabel = (item) => String(item[this.bindLabel]);
+    itemValue = (item) => item[this.bindValue];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsSelectMobileDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GdsSelectMobileDialogComponent, isStandalone: true, selector: "gds-select-mobile-dialog", usesInheritance: true, ngImport: i0, template: "<dialog\n  gds-dialog\n  type=\"drawer-bottom\"\n  background=\"white\"\n  suppressDismissBtn\n  class=\"mobile-dialog\"\n  (canceled)=\"onDismiss()\"\n>\n  <ng-template #layoutTmpl>\n    <div\n      class=\"\n        gds-display-flex\n        gds-flex-column\n        gds-gap-sm\n        gds-min-height-0\n        gds-padding-sm\n        gds-width-100-parent\n        layout\n      \"\n    >\n      <header class=\"\n        gds-align-items-center\n        gds-display-grid\n        mobile-dialog-header\n      \">\n        <button\n          gds-icon-button\n          variant=\"invisible\"\n          class=\"mobile-dialog-back\"\n          (clicked)=\"onBack()\"\n          [attr.aria-label]=\"backAriaLabel\"\n        >\n          <gds-icon\n            key=\"line-chevron-left-stroke\"\n            class=\"\n              gds-icon-primary\n              gds-icon-size-2xs\n              gds-mobile-icon-size-sm\n            \"\n          />\n        </button>\n        <span\n          class=\"\n            gds-min-width-0\n            gds-text-align-center\n            gds-text-body-large\n            gds-text-primary\n            gds-truncate\n            mobile-dialog-title\n          \"\n        >\n          {{ dialogTitle }}\n        </span>\n        <button\n          gds-button\n          class=\"\n            gds-background-secondary\n            gds-radius-pill\n            mobile-dialog-apply\n          \"\n          [disabled]=\"!hasValidDraft()\"\n          (clicked)=\"onApply()\"\n        >\n          {{ applyLabel }}\n        </button>\n      </header>\n\n      @if (searchable) {\n        <gds-text-input\n          class=\"\n            gds-gap-xs\n            search\n          \"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <gds-icon\n            leading-visual\n            key=\"line-search\"\n            class=\"\n              gds-icon-secondary\n              gds-icon-size-2xs\n            \"\n          />\n          <input\n            type=\"text\"\n            class=\"\n              gds-background-none\n              gds-border-none\n              gds-flex-1\n              gds-min-width-0\n              gds-outline-none\n              gds-text-body\n            \"\n            [placeholder]=\"searchPlaceholder\"\n            [value]=\"searchText()\"\n            (input)=\"onSearch($event)\"\n          />\n        </gds-text-input>\n      }\n\n      <div class=\"\n        gds-flex-grow-1\n        gds-min-height-0\n        gds-scrollable-vertically\n      \">\n        <div class=\"\n          gds-display-flex\n          gds-flex-column\n          gds-gap-3xs\n        \">\n          @for (item of displayedItems(); track itemValue(item)) {\n            <div\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-padding-block-2xs\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              [ngClass]=\"{ active: isSelected(item) }\"\n              role=\"button\"\n              tabindex=\"-1\"\n              (click)=\"onItemClick(item)\"\n              (keydown.enter)=\"onItemClick(item)\"\n            >\n              {{ itemLabel(item) }}\n            </div>\n          } @empty {\n            <div class=\"\n              gds-padding-block-2xs\n              gds-padding-inline-sm\n              gds-text-body\n              gds-text-secondary\n            \">\n              {{ emptyText }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</dialog>\n", styles: ["@layer design-system{:host .search{--gds-form-control-cursor: text;--gds-form-control-hover-color: var(--gds-palette-background-white);box-sizing:border-box}:host .item{cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}:host .item.active:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .item:focus-visible{outline:none}:host .mobile-dialog{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}:host .mobile-dialog[open]{display:flex;flex-direction:column}:host .layout{flex:1;min-height:0}:host .mobile-dialog-header{grid-template-columns:1fr auto 1fr}:host .mobile-dialog-title{grid-column:2}:host .mobile-dialog-apply{justify-self:end}}\n"], dependencies: [{ kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsTextInputComponent, selector: "gds-text-input", inputs: ["clearable"], outputs: ["cleared"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsSelectMobileDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gds-select-mobile-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        GdsButtonComponent,
+                        GdsDialogComponent,
+                        GdsTextInputComponent,
+                        GdsIconComponent,
+                        GdsIconButtonComponent,
+                        NgClass,
+                        GdsNativeInputDirective
+                    ], template: "<dialog\n  gds-dialog\n  type=\"drawer-bottom\"\n  background=\"white\"\n  suppressDismissBtn\n  class=\"mobile-dialog\"\n  (canceled)=\"onDismiss()\"\n>\n  <ng-template #layoutTmpl>\n    <div\n      class=\"\n        gds-display-flex\n        gds-flex-column\n        gds-gap-sm\n        gds-min-height-0\n        gds-padding-sm\n        gds-width-100-parent\n        layout\n      \"\n    >\n      <header class=\"\n        gds-align-items-center\n        gds-display-grid\n        mobile-dialog-header\n      \">\n        <button\n          gds-icon-button\n          variant=\"invisible\"\n          class=\"mobile-dialog-back\"\n          (clicked)=\"onBack()\"\n          [attr.aria-label]=\"backAriaLabel\"\n        >\n          <gds-icon\n            key=\"line-chevron-left-stroke\"\n            class=\"\n              gds-icon-primary\n              gds-icon-size-2xs\n              gds-mobile-icon-size-sm\n            \"\n          />\n        </button>\n        <span\n          class=\"\n            gds-min-width-0\n            gds-text-align-center\n            gds-text-body-large\n            gds-text-primary\n            gds-truncate\n            mobile-dialog-title\n          \"\n        >\n          {{ dialogTitle }}\n        </span>\n        <button\n          gds-button\n          class=\"\n            gds-background-secondary\n            gds-radius-pill\n            mobile-dialog-apply\n          \"\n          [disabled]=\"!hasValidDraft()\"\n          (clicked)=\"onApply()\"\n        >\n          {{ applyLabel }}\n        </button>\n      </header>\n\n      @if (searchable) {\n        <gds-text-input\n          class=\"\n            gds-gap-xs\n            search\n          \"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <gds-icon\n            leading-visual\n            key=\"line-search\"\n            class=\"\n              gds-icon-secondary\n              gds-icon-size-2xs\n            \"\n          />\n          <input\n            type=\"text\"\n            class=\"\n              gds-background-none\n              gds-border-none\n              gds-flex-1\n              gds-min-width-0\n              gds-outline-none\n              gds-text-body\n            \"\n            [placeholder]=\"searchPlaceholder\"\n            [value]=\"searchText()\"\n            (input)=\"onSearch($event)\"\n          />\n        </gds-text-input>\n      }\n\n      <div class=\"\n        gds-flex-grow-1\n        gds-min-height-0\n        gds-scrollable-vertically\n      \">\n        <div class=\"\n          gds-display-flex\n          gds-flex-column\n          gds-gap-3xs\n        \">\n          @for (item of displayedItems(); track itemValue(item)) {\n            <div\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-padding-block-2xs\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              [ngClass]=\"{ active: isSelected(item) }\"\n              role=\"button\"\n              tabindex=\"-1\"\n              (click)=\"onItemClick(item)\"\n              (keydown.enter)=\"onItemClick(item)\"\n            >\n              {{ itemLabel(item) }}\n            </div>\n          } @empty {\n            <div class=\"\n              gds-padding-block-2xs\n              gds-padding-inline-sm\n              gds-text-body\n              gds-text-secondary\n            \">\n              {{ emptyText }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</dialog>\n", styles: ["@layer design-system{:host .search{--gds-form-control-cursor: text;--gds-form-control-hover-color: var(--gds-palette-background-white);box-sizing:border-box}:host .item{cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}:host .item.active:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .item:focus-visible{outline:none}:host .mobile-dialog{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}:host .mobile-dialog[open]{display:flex;flex-direction:column}:host .layout{flex:1;min-height:0}:host .mobile-dialog-header{grid-template-columns:1fr auto 1fr}:host .mobile-dialog-title{grid-column:2}:host .mobile-dialog-apply{justify-self:end}}\n"] }]
+        }] });
+
 class GdsSelectComponent extends GdsSignalFormControl {
     #injector = inject(Injector);
+    #destroyRef = inject(DestroyRef);
+    #dialogSvc = inject(GdsDialogService);
+    #deviceDetectorSvc = inject(DeviceDetectorSignalService);
+    #formField = inject(FormField, { self: true, optional: true });
     clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     appendTo = input('', /* @ts-ignore */
@@ -6775,6 +7060,15 @@ class GdsSelectComponent extends GdsSignalFormControl {
     autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     hideChevron = input(false, { ...(ngDevMode ? { debugName: "hideChevron" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    preventMobileDialog = input(true, { ...(ngDevMode ? { debugName: "preventMobileDialog" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    dialogTitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogTitle" }] : /* istanbul ignore next */ []));
+    applyLabel = input('Apply', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    backAriaLabel = input('Go back', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backAriaLabel" }] : /* istanbul ignore next */ []));
     width = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     id = input('', /* @ts-ignore */
@@ -6820,6 +7114,11 @@ class GdsSelectComponent extends GdsSignalFormControl {
     ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
     markedIndex = signal(-1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "markedIndex" }] : /* istanbul ignore next */ []));
+    #isMobileDialogOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#isMobileDialogOpen" }] : /* istanbul ignore next */ []));
+    #suppressOpenOnFocus = false;
+    #shouldUseMobileDialog = computed(() => this.#deviceDetectorSvc.isMobile() && !this.preventMobileDialog() && !this.multiple(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#shouldUseMobileDialog" }] : /* istanbul ignore next */ []));
     onKeyDown = (event) => {
         if (event.code === 'Tab' && !event.shiftKey) {
             if (event.target === this.ref().searchInput().nativeElement) {
@@ -6851,6 +7150,13 @@ class GdsSelectComponent extends GdsSignalFormControl {
     }
     #setupEventListeners = effect(() => {
         this.ref().onInputFocus = () => {
+            if (this.#suppressOpenOnFocus) {
+                return;
+            }
+            if (this.#shouldUseMobileDialog()) {
+                this.openMobileDialog();
+                return;
+            }
             setTimeout(() => this.ref().open());
         };
         this.ref().onInputBlur = () => {
@@ -6888,17 +7194,63 @@ class GdsSelectComponent extends GdsSignalFormControl {
         return this.ref().dropdownPanel()?.scrollElementRef();
     }
     handleClosed = () => {
+        if (this.#shouldUseMobileDialog()) {
+            return;
+        }
         // remove the event listener to prevent memory leaks
-        this.dropdownPanelScroll.nativeElement.removeEventListener('mouseover', this.hideMarkedItem.bind(this));
+        this.dropdownPanelScroll?.nativeElement.removeEventListener('mouseover', this.hideMarkedItem.bind(this));
         this.closed.emit();
     };
     handleOpened = () => {
+        if (this.#shouldUseMobileDialog()) {
+            this.ref().close();
+            this.openMobileDialog();
+            return;
+        }
         setTimeout(() => {
             // add a mousemove listener to the panel to hide the marked item if the user hovers with a mouse
             this.dropdownPanelScroll.nativeElement.addEventListener('mouseover', this.hideMarkedItem.bind(this));
         }, 0);
         this.opened.emit();
     };
+    openMobileDialog = () => {
+        if (this.disabled() || !this.#shouldUseMobileDialog() || this.#isMobileDialogOpen()) {
+            return;
+        }
+        this.#formField?.state().reset();
+        this.#isMobileDialogOpen.set(true);
+        this.opened.emit();
+        this.#dialogSvc
+            .open(GdsSelectMobileDialogComponent, {
+            items: this.items(),
+            bindValue: this.bindValue(),
+            bindLabel: this.bindLabel(),
+            value: this.value(),
+            dialogTitle: this.dialogTitle() || this.placeholder(),
+            applyLabel: this.applyLabel(),
+            emptyText: this.emptyText(),
+            backAriaLabel: this.backAriaLabel(),
+            searchable: this.searchable(),
+            searchPlaceholder: this.searchPlaceholder()
+        })
+            .pipe(take(1), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((value) => this.#onMobileResult(value));
+    };
+    #onMobileResult = (value) => {
+        if (value !== undefined) {
+            this.setValue(value);
+            this.changed.emit(value);
+            this.touched.set(true);
+        }
+        this.#isMobileDialogOpen.set(false);
+        this.#formField?.state().markAsTouched();
+        this.#suppressOpenOnFocus = true;
+        this.ref().focus();
+        setTimeout(() => {
+            this.#suppressOpenOnFocus = false;
+        });
+        this.closed.emit();
+    };
     unmarkItem = () => {
         this.ref().itemsList.unmarkItem();
     };
@@ -6906,7 +7258,7 @@ class GdsSelectComponent extends GdsSignalFormControl {
         this.ref().handleClearClick();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GdsSelectComponent, isStandalone: true, selector: "gds-select", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideChevron: { classPropertyName: "hideChevron", publicName: "hideChevron", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed", searched: "searched", blurred: "blurred", cleared: "cleared", closed: "closed", opened: "opened", bindValue: "bindValueChange", bindLabel: "bindLabelChange", value: "valueChange", items: "itemsChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()" } }, queries: [{ propertyName: "multiLabelTmpl", first: true, predicate: ["multiLabelTmpl"], descendants: true, isSignal: true }, { propertyName: "labelTmpl", first: true, predicate: ["labelTmpl"], descendants: true, isSignal: true }, { propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }, { propertyName: "footerTmpl", first: true, predicate: ["footerTmpl"], descendants: true, isSignal: true }, { propertyName: "clearBtnTmpl", first: true, predicate: ["clearBtnTmpl"], descendants: true, isSignal: true }, { propertyName: "placeholderTmpl", first: true, predicate: ["placeholderTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-select\n  class=\"\n    gds-mobile-text-input-mobile\n    gds-text-input\n  \"\n  [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [notFoundText]=\"emptyText()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [multiple]=\"multiple()\"\n  [closeOnSelect]=\"!multiple()\"\n  [disabled]=\"disabled()\"\n  [items]=\"items()\"\n  [ngModel]=\"value()\"\n  [loading]=\"loading()\"\n  [loadingText]=\"loadingText()\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [virtualScroll]=\"virtualScroll()\"\n  [searchFn]=\"itemShouldDisplay\"\n  [appendTo]=\"appendTo()\"\n  [keyDownFn]=\"onKeyDown\"\n  [labelForId]=\"id()\"\n  (ngModelChange)=\"setValue($event)\"\n  (change)=\"onHandleChange($event)\"\n  (search)=\"onSearchChange($event)\"\n  (clear)=\"cleared.emit()\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n>\n  <ng-template\n    ng-label-tmp\n    let-item=\"item\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n  </ng-template>\n\n  @if (!value()) {\n    <ng-template ng-placeholder-tmp>\n      <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n    </ng-template>\n  }\n\n  <ng-template\n    ng-multi-label-tmp\n    let-items=\"items\"\n  >\n    <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n  </ng-template>\n\n  <ng-template\n    ng-option-tmp\n    let-option=\"item\"\n    let-selected=\"item$.selected\"\n    let-index=\"index\"\n  >\n    @if (multiple()) {\n      <input\n        type=\"checkbox\"\n        class=\"\n          gds-margin-block-auto\n          gds-margin-inline-3xs\n        \"\n        gds-checkbox\n        [checked]=\"selected\"\n        (mousedown)=\"onCheckboxChanged($event)\"\n      />\n    }\n    <ng-container\n      *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n    />\n  </ng-template>\n\n  @if (footerTmpl(); as footerTmpl) {\n    <ng-template ng-footer-tmp>\n      <div\n        class=\"\n          gds-height-100-parent\n          gds-width-100-parent\n        \"\n        (mouseenter)=\"unmarkItem()\"\n      >\n        <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n      </div>\n    </ng-template>\n  }\n\n  <ng-template ng-clearbutton-tmp>\n    <span class=\"ng-clear-wrapper\">\n      <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n    </span>\n  </ng-template>\n</ng-select>\n\n<ng-template\n  #defaultLabelTmpl\n  let-item=\"item\"\n>\n  @if (value !== undefined) {\n    <gds-tooltip\n      onlyTextOverflow\n      [tooltip]=\"item[bindLabel()]\"\n    >\n      {{ item[bindLabel()] }}\n    </gds-tooltip>\n  }\n</ng-template>\n\n<ng-template\n  #defaultMultiLabelTmpl\n  let-items=\"items\"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-inline-flex\n    gds-gap-2xs\n    gds-select--multi-selected-content\n  \">\n    <gds-tooltip\n      onlyOnTextOverflow\n      [tooltip]=\"items[0][bindLabel()]\"\n    >\n      {{ items[0][bindLabel()] }}\n    </gds-tooltip>\n    @if (items.length > 1) {\n      <span gds-badge>+{{ items.length - 1 }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultOptionTmpl\n  let-option=\"option\"\n  let-active=\"marked\"\n>\n  <gds-tooltip\n    class=\"option\"\n    onlyTextOverflow\n    [tooltip]=\"option[bindLabel()]\"\n    [open]=\"active\"\n  >\n    {{ option[bindLabel()] }}\n  </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n  <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n  <button\n    #clearButton\n    gds-icon-button\n    class=\"gds-background-none\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n    (click)=\"onClearClicked()\"\n    (keydown.enter)=\"onClearClicked()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n      \"\n      key=\"line-dismiss\"\n    />\n  </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "removeText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "component", type: GdsCheckboxComponent, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: ["checked", "touched", "disabled", "readonly", "hidden", "invalid", "tabindex"], outputs: ["checkedChange", "touchedChange", "tabindexChange"] }, { kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo", "lineClamp", "tooltipOffset"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GdsSelectComponent, isStandalone: true, selector: "gds-select", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideChevron: { classPropertyName: "hideChevron", publicName: "hideChevron", isSignal: true, isRequired: false, transformFunction: null }, preventMobileDialog: { classPropertyName: "preventMobileDialog", publicName: "preventMobileDialog", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, backAriaLabel: { classPropertyName: "backAriaLabel", publicName: "backAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed", searched: "searched", blurred: "blurred", cleared: "cleared", closed: "closed", opened: "opened", bindValue: "bindValueChange", bindLabel: "bindLabelChange", value: "valueChange", items: "itemsChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()" } }, queries: [{ propertyName: "multiLabelTmpl", first: true, predicate: ["multiLabelTmpl"], descendants: true, isSignal: true }, { propertyName: "labelTmpl", first: true, predicate: ["labelTmpl"], descendants: true, isSignal: true }, { propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }, { propertyName: "footerTmpl", first: true, predicate: ["footerTmpl"], descendants: true, isSignal: true }, { propertyName: "clearBtnTmpl", first: true, predicate: ["clearBtnTmpl"], descendants: true, isSignal: true }, { propertyName: "placeholderTmpl", first: true, predicate: ["placeholderTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-select\n  class=\"\n    gds-mobile-text-input-mobile\n    gds-text-input\n  \"\n  [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [notFoundText]=\"emptyText()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [multiple]=\"multiple()\"\n  [closeOnSelect]=\"!multiple()\"\n  [disabled]=\"disabled()\"\n  [items]=\"items()\"\n  [ngModel]=\"value()\"\n  [loading]=\"loading()\"\n  [loadingText]=\"loadingText()\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [virtualScroll]=\"virtualScroll()\"\n  [searchFn]=\"itemShouldDisplay\"\n  [appendTo]=\"appendTo()\"\n  [keyDownFn]=\"onKeyDown\"\n  [labelForId]=\"id()\"\n  (ngModelChange)=\"setValue($event)\"\n  (change)=\"onHandleChange($event)\"\n  (search)=\"onSearchChange($event)\"\n  (clear)=\"cleared.emit()\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n>\n  <ng-template\n    ng-label-tmp\n    let-item=\"item\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n  </ng-template>\n\n  @if (!value()) {\n    <ng-template ng-placeholder-tmp>\n      <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n    </ng-template>\n  }\n\n  <ng-template\n    ng-multi-label-tmp\n    let-items=\"items\"\n  >\n    <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n  </ng-template>\n\n  <ng-template\n    ng-option-tmp\n    let-option=\"item\"\n    let-selected=\"item$.selected\"\n    let-index=\"index\"\n  >\n    @if (multiple()) {\n      <input\n        type=\"checkbox\"\n        class=\"\n          gds-margin-block-auto\n          gds-margin-inline-3xs\n        \"\n        gds-checkbox\n        [checked]=\"selected\"\n        (mousedown)=\"onCheckboxChanged($event)\"\n      />\n    }\n    <ng-container\n      *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n    />\n  </ng-template>\n\n  @if (footerTmpl(); as footerTmpl) {\n    <ng-template ng-footer-tmp>\n      <div\n        class=\"\n          gds-height-100-parent\n          gds-width-100-parent\n        \"\n        (mouseenter)=\"unmarkItem()\"\n      >\n        <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n      </div>\n    </ng-template>\n  }\n\n  <ng-template ng-clearbutton-tmp>\n    <span class=\"ng-clear-wrapper\">\n      <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n    </span>\n  </ng-template>\n</ng-select>\n\n<ng-template\n  #defaultLabelTmpl\n  let-item=\"item\"\n>\n  @if (value !== undefined) {\n    <gds-tooltip\n      onlyTextOverflow\n      [tooltip]=\"item[bindLabel()]\"\n    >\n      {{ item[bindLabel()] }}\n    </gds-tooltip>\n  }\n</ng-template>\n\n<ng-template\n  #defaultMultiLabelTmpl\n  let-items=\"items\"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-inline-flex\n    gds-gap-2xs\n    gds-select--multi-selected-content\n  \">\n    <gds-tooltip\n      onlyOnTextOverflow\n      [tooltip]=\"items[0][bindLabel()]\"\n    >\n      {{ items[0][bindLabel()] }}\n    </gds-tooltip>\n    @if (items.length > 1) {\n      <span gds-badge>+{{ items.length - 1 }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultOptionTmpl\n  let-option=\"option\"\n  let-active=\"marked\"\n>\n  <gds-tooltip\n    class=\"option\"\n    onlyTextOverflow\n    [tooltip]=\"option[bindLabel()]\"\n    [open]=\"active\"\n  >\n    {{ option[bindLabel()] }}\n  </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n  <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n  <button\n    #clearButton\n    gds-icon-button\n    class=\"gds-background-none\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n    (click)=\"onClearClicked()\"\n    (keydown.enter)=\"onClearClicked()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n      \"\n      key=\"line-dismiss\"\n    />\n  </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "removeText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "component", type: GdsCheckboxComponent, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: ["checked", "touched", "disabled", "readonly", "hidden", "invalid", "tabindex"], outputs: ["checkedChange", "touchedChange", "tabindexChange"] }, { kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo", "lineClamp", "tooltipOffset"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsSelectComponent, decorators: [{
             type: Component,
@@ -6930,7 +7282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(keydown)': 'setMarkedItemIndex()'
                     }, template: "<ng-select\n  class=\"\n    gds-mobile-text-input-mobile\n    gds-text-input\n  \"\n  [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [notFoundText]=\"emptyText()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [multiple]=\"multiple()\"\n  [closeOnSelect]=\"!multiple()\"\n  [disabled]=\"disabled()\"\n  [items]=\"items()\"\n  [ngModel]=\"value()\"\n  [loading]=\"loading()\"\n  [loadingText]=\"loadingText()\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [virtualScroll]=\"virtualScroll()\"\n  [searchFn]=\"itemShouldDisplay\"\n  [appendTo]=\"appendTo()\"\n  [keyDownFn]=\"onKeyDown\"\n  [labelForId]=\"id()\"\n  (ngModelChange)=\"setValue($event)\"\n  (change)=\"onHandleChange($event)\"\n  (search)=\"onSearchChange($event)\"\n  (clear)=\"cleared.emit()\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n>\n  <ng-template\n    ng-label-tmp\n    let-item=\"item\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n  </ng-template>\n\n  @if (!value()) {\n    <ng-template ng-placeholder-tmp>\n      <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n    </ng-template>\n  }\n\n  <ng-template\n    ng-multi-label-tmp\n    let-items=\"items\"\n  >\n    <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n  </ng-template>\n\n  <ng-template\n    ng-option-tmp\n    let-option=\"item\"\n    let-selected=\"item$.selected\"\n    let-index=\"index\"\n  >\n    @if (multiple()) {\n      <input\n        type=\"checkbox\"\n        class=\"\n          gds-margin-block-auto\n          gds-margin-inline-3xs\n        \"\n        gds-checkbox\n        [checked]=\"selected\"\n        (mousedown)=\"onCheckboxChanged($event)\"\n      />\n    }\n    <ng-container\n      *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n    />\n  </ng-template>\n\n  @if (footerTmpl(); as footerTmpl) {\n    <ng-template ng-footer-tmp>\n      <div\n        class=\"\n          gds-height-100-parent\n          gds-width-100-parent\n        \"\n        (mouseenter)=\"unmarkItem()\"\n      >\n        <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n      </div>\n    </ng-template>\n  }\n\n  <ng-template ng-clearbutton-tmp>\n    <span class=\"ng-clear-wrapper\">\n      <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n    </span>\n  </ng-template>\n</ng-select>\n\n<ng-template\n  #defaultLabelTmpl\n  let-item=\"item\"\n>\n  @if (value !== undefined) {\n    <gds-tooltip\n      onlyTextOverflow\n      [tooltip]=\"item[bindLabel()]\"\n    >\n      {{ item[bindLabel()] }}\n    </gds-tooltip>\n  }\n</ng-template>\n\n<ng-template\n  #defaultMultiLabelTmpl\n  let-items=\"items\"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-inline-flex\n    gds-gap-2xs\n    gds-select--multi-selected-content\n  \">\n    <gds-tooltip\n      onlyOnTextOverflow\n      [tooltip]=\"items[0][bindLabel()]\"\n    >\n      {{ items[0][bindLabel()] }}\n    </gds-tooltip>\n    @if (items.length > 1) {\n      <span gds-badge>+{{ items.length - 1 }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultOptionTmpl\n  let-option=\"option\"\n  let-active=\"marked\"\n>\n  <gds-tooltip\n    class=\"option\"\n    onlyTextOverflow\n    [tooltip]=\"option[bindLabel()]\"\n    [open]=\"active\"\n  >\n    {{ option[bindLabel()] }}\n  </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n  <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n  <button\n    #clearButton\n    gds-icon-button\n    class=\"gds-background-none\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n    (click)=\"onClearClicked()\"\n    (keydown.enter)=\"onClearClicked()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n      \"\n      key=\"line-dismiss\"\n    />\n  </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"] }]
-        }], propDecorators: { clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideChevron", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], searched: [{ type: i0.Output, args: ["searched"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }, { type: i0.Output, args: ["bindValueChange"] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }, { type: i0.Output, args: ["bindLabelChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }, { type: i0.Output, args: ["itemsChange"] }], ref: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgSelectComponent), { isSignal: true }] }], clearButton: [{ type: i0.ViewChild, args: ['clearButton', { ...{
+        }], propDecorators: { clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideChevron", required: false }] }], preventMobileDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventMobileDialog", required: false }] }], dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], backAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backAriaLabel", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], searched: [{ type: i0.Output, args: ["searched"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }, { type: i0.Output, args: ["bindValueChange"] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }, { type: i0.Output, args: ["bindLabelChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }, { type: i0.Output, args: ["itemsChange"] }], ref: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgSelectComponent), { isSignal: true }] }], clearButton: [{ type: i0.ViewChild, args: ['clearButton', { ...{
                             read: (ElementRef)
                         }, isSignal: true }] }], multiLabelTmpl: [{ type: i0.ContentChild, args: ['multiLabelTmpl', { isSignal: true }] }], labelTmpl: [{ type: i0.ContentChild, args: ['labelTmpl', { isSignal: true }] }], optionTmpl: [{ type: i0.ContentChild, args: ['optionTmpl', { isSignal: true }] }], footerTmpl: [{ type: i0.ContentChild, args: ['footerTmpl', { isSignal: true }] }], clearBtnTmpl: [{ type: i0.ContentChild, args: ['clearBtnTmpl', { isSignal: true }] }], placeholderTmpl: [{ type: i0.ContentChild, args: ['placeholderTmpl', { isSignal: true }] }] } });