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

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

@@ -1092,6 +1092,10 @@ const gdsFilledPeopleTeamIcon = {
     data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 4.5C12.5 5.88071 11.3807 7 10 7C8.61929 7 7.5 5.88071 7.5 4.5C7.5 3.11929 8.61929 2 10 2C11.3807 2 12.5 3.11929 12.5 4.5ZM17.5 5C17.5 6.10457 16.6046 7 15.5 7C14.3954 7 13.5 6.10457 13.5 5C13.5 3.89543 14.3954 3 15.5 3C16.6046 3 17.5 3.89543 17.5 5ZM4.5 7C5.60457 7 6.5 6.10457 6.5 5C6.5 3.89543 5.60457 3 4.5 3C3.39543 3 2.5 3.89543 2.5 5C2.5 6.10457 3.39543 7 4.5 7ZM6 9.25C6 8.55964 6.55964 8 7.25 8H12.75C13.4404 8 14 8.55964 14 9.25V14C14 16.2091 12.2091 18 10 18C7.79086 18 6 16.2091 6 14V9.25ZM5 9.25C5 8.78746 5.13957 8.35752 5.37889 8H3.25C2.55964 8 2 8.55964 2 9.25V13C2 14.6569 3.34315 16 5 16C5.13712 16 5.27209 15.9908 5.40434 15.973C5.14412 15.3677 5 14.7007 5 14V9.25ZM15 14C15 14.7007 14.8559 15.3677 14.5957 15.973C14.7279 15.9908 14.8629 16 15 16C16.6569 16 18 14.6569 18 13V9.25C18 8.55964 17.4404 8 16.75 8H14.6211C14.8604 8.35752 15 8.78746 15 9.25V14Z" fill="currentColor"/></svg>`,
     name: 'filled-people-team'
 };
+const gdsFilledPeopleIcon = {
+    data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.75 10C8.54493 10 10 8.54493 10 6.75C10 4.95507 8.54493 3.5 6.75 3.5C4.95507 3.5 3.5 4.95507 3.5 6.75C3.5 8.54493 4.95507 10 6.75 10ZM12.4373 15.1449C12.9668 15.3619 13.6409 15.5 14.4992 15.5C18.4992 15.5 18.4992 12.5 18.4992 12.5C18.4992 11.6716 17.8276 11 16.9992 11H12.3714C12.7641 11.4755 13 12.0852 13 12.75V13.0625C13 13.0625 13 13.0619 13 13.0646L13 13.0667L13 13.0713L12.9999 13.0814L12.9995 13.1058C12.9991 13.1238 12.9984 13.1453 12.9973 13.1701C12.995 13.2197 12.9908 13.2828 12.9835 13.3575C12.9688 13.5065 12.9408 13.7047 12.8875 13.9363C12.8096 14.2745 12.6743 14.6976 12.4373 15.1449ZM17 7.5C17 8.88071 15.8807 10 14.5 10C13.1193 10 12 8.88071 12 7.5C12 6.11929 13.1193 5 14.5 5C15.8807 5 17 6.11929 17 7.5ZM1.5 13C1.5 11.8954 2.39543 11 3.5 11H10C11.1046 11 12 11.8954 12 13C12 13 12 17 6.75 17C1.5 17 1.5 13 1.5 13ZM12.9995 13.1058L12.9973 13.1701L12.9995 13.1058Z" fill="currentColor"/></svg>`,
+    name: 'filled-people'
+};
 const gdsFilledPersonLayerIcon = {
     data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4966 3.40817C11.4361 2.4004 10.4024 1.72845 9.44703 2.10686L3.57942 4.43081C2.6261 4.80838 2 5.72978 2 6.75514V12.4978C2 13.5381 3.03035 14.2566 4 13.9121V7.90621C4 6.98338 4.56349 6.15412 5.42147 5.81431L11.4966 3.40817ZM14.4994 5.50195C14.4994 4.44293 13.4316 3.71738 12.447 4.10735L6.26353 6.55641C5.50088 6.85847 5 7.59559 5 8.41588V14.4983C5 15.5575 6.06819 16.2831 7.05288 15.8927L8 15.5171V9.53757C8 8.71728 8.50088 7.98016 9.26353 7.6781L14.4994 5.60437V5.50195ZM15.9476 6.10637C16.9323 5.7164 18 6.44195 18 7.50097V10.3416C17.4625 9.53324 16.5435 9.00049 15.5 9.00049C13.8431 9.00049 12.5 10.3436 12.5 12.0005C12.5 12.7738 12.7926 13.4787 13.273 14.0107C11.9987 14.1253 11 15.1963 11 16.5005C11 16.9437 11.0886 17.3893 11.2738 17.8074L11.0524 17.8951C10.0677 18.2851 9 17.5596 9 16.5005V9.87736C9 9.26214 9.37566 8.7093 9.94765 8.48275L15.9476 6.10637ZM17.5 12.0005C17.5 13.1051 16.6046 14.0005 15.5 14.0005C14.3954 14.0005 13.5 13.1051 13.5 12.0005C13.5 10.8959 14.3954 10.0005 15.5 10.0005C16.6046 10.0005 17.5 10.8959 17.5 12.0005ZM19 16.5005C19 17.7457 18 19.0005 15.5 19.0005C13 19.0005 12 17.7504 12 16.5005C12 15.6721 12.6716 15.0005 13.5 15.0005H17.5C18.3284 15.0005 19 15.6721 19 16.5005Z" fill="currentColor"/></svg>`,
     name: 'filled-person-layer'
@@ -2464,6 +2468,10 @@ const gdsLineWebsiteIcon = {
     data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 3C7.7544 3 7.26285 3.22509 6.77311 4.20457C6.654 4.44279 6.54472 4.70924 6.44818 5H9.55182C9.45528 4.70924 9.346 4.44279 9.22689 4.20457C8.73715 3.22509 8.2456 3 8 3ZM9.8121 6H6.1879C6.06829 6.60887 6 7.28321 6 8C6 8.71679 6.06829 9.39113 6.1879 10H9.8121C9.93171 9.39113 10 8.71679 10 8C10 7.28321 9.93171 6.60887 9.8121 6ZM10.8293 10C10.9398 9.37444 11 8.70127 11 8C11 7.29873 10.9398 6.62556 10.8293 6H12.584C12.8516 6.61246 13 7.2889 13 8C13 8.7111 12.8516 9.38754 12.584 10H10.8293ZM9.55182 11H6.44818C6.54472 11.2908 6.654 11.5572 6.77311 11.7954C7.26285 12.7749 7.7544 13 8 13C8.2456 13 8.73715 12.7749 9.22689 11.7954C9.346 11.5572 9.45528 11.2908 9.55182 11ZM9.91388 12.6206C10.1873 12.1671 10.4198 11.6185 10.5987 11H12.0004C11.4662 11.7111 10.7468 12.2752 9.91388 12.6206ZM8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM9.91388 3.37938C10.7468 3.72478 11.4662 4.28886 12.0004 5H10.5987C10.4198 4.38153 10.1873 3.83285 9.91388 3.37938ZM6.08612 12.6206C5.81273 12.1671 5.58023 11.6185 5.40135 11H3.99963C4.53379 11.7111 5.25316 12.2752 6.08612 12.6206ZM5.17071 10C5.06015 9.37444 5 8.70127 5 8C5 7.29873 5.06015 6.62556 5.17071 6H3.41604C3.14845 6.61246 3 7.2889 3 8C3 8.7111 3.14845 9.38754 3.41604 10H5.17071ZM5.40135 5C5.58023 4.38153 5.81272 3.83285 6.08612 3.37938C5.25316 3.72478 4.53379 4.28886 3.99963 5H5.40135Z" fill="currentColor"/></svg>`,
     name: 'line-website'
 };
+const gdsLineWindowDevToolsIcon = {
+    data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5C2 3.11929 3.11929 2 4.5 2H13.5C14.8807 2 16 3.11929 16 4.5V6.71098C15.6583 6.73674 15.3217 6.80873 15 6.9244V5.99873H3V13.5C3 14.3284 3.67157 15 4.5 15H11.1909L10.7521 15.76C10.7068 15.8385 10.6669 15.9186 10.6325 16H4.5C3.11929 16 2 14.8807 2 13.5V4.5ZM4.49902 2.99878C3.6706 2.99878 2.99902 3.67035 2.99902 4.49878V4.99878H14.999V4.49878C14.999 3.67035 14.3275 2.99878 13.499 2.99878H4.49902ZM13.874 9.09036C13.3112 10.0651 13.406 11.2391 14.0207 12.0986L11.6181 16.26C11.2983 16.8139 11.4881 17.5222 12.042 17.842C12.5959 18.1618 13.3042 17.972 13.624 17.4181L16.0311 13.2489C17.0757 13.3425 18.1291 12.8379 18.6881 11.8698C19.2932 10.8217 19.1381 9.54345 18.394 8.67325L17.0834 10.9433C16.8276 11.3864 16.261 11.5383 15.8178 11.2824C15.3747 11.0266 15.2229 10.46 15.4787 10.0168L16.7893 7.74675C15.6637 7.53741 14.4791 8.0423 13.874 9.09036ZM12.5605 11.1441C12.4382 10.4616 12.5022 9.74233 12.7749 9.06779L10.8523 7.1452C10.657 6.94993 10.3404 6.94993 10.1452 7.1452C9.9499 7.34046 9.9499 7.65704 10.1452 7.8523L12.2916 9.99874L10.1452 12.1452C9.9499 12.3405 9.9499 12.657 10.1452 12.8523C10.3404 13.0476 10.657 13.0476 10.8523 12.8523L12.5605 11.1441ZM8.35227 7.8523C8.54753 7.65704 8.54753 7.34046 8.35227 7.1452C8.15701 6.94993 7.84043 6.94993 7.64516 7.1452L5.14516 9.6452C4.9499 9.84046 4.9499 10.157 5.14517 10.3523L7.64517 12.8523C7.84043 13.0476 8.15701 13.0476 8.35227 12.8523C8.54753 12.657 8.54753 12.3405 8.35227 12.1452L6.20583 9.99875L8.35227 7.8523Z" fill="currentColor"/></svg>`,
+    name: 'line-window-dev-tools'
+};
 const gdsLoadingKebabIcon = {
     data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30"><circle r="3" transform="translate(2 14.5)" fill="currentColor"><animate attributeName="opacity" values="1;.2; 1" begin="0" dur="1.2s" calcMode="paced" repeatCount="indefinite"/></circle><circle r="3" transform="translate(12 14.5)" fill="currentColor"><animate attributeName="opacity" values="1;.2; 1" begin="0.3s" dur="1.2s" calcMode="paced" repeatCount="indefinite"/></circle><circle r="3" transform="translate(22 14.5)" fill="currentColor"><animate attributeName="opacity" values="1;.2; 1" begin=".6" dur="1.2s" calcMode="paced" repeatCount="indefinite"/></circle></svg>`,
     name: 'loading-kebab'
@@ -3065,6 +3073,7 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsFilledMobileIcon: gdsFilledMobileIcon,
     gdsFilledOpenIcon: gdsFilledOpenIcon,
     gdsFilledPdfIcon: gdsFilledPdfIcon,
+    gdsFilledPeopleIcon: gdsFilledPeopleIcon,
     gdsFilledPeopleQueueIcon: gdsFilledPeopleQueueIcon,
     gdsFilledPeopleTeamIcon: gdsFilledPeopleTeamIcon,
     gdsFilledPersonIcon: gdsFilledPersonIcon,
@@ -3409,6 +3418,7 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsLineViewIcon: gdsLineViewIcon,
     gdsLineWalletIcon: gdsLineWalletIcon,
     gdsLineWebsiteIcon: gdsLineWebsiteIcon,
+    gdsLineWindowDevToolsIcon: gdsLineWindowDevToolsIcon,
     gdsLoadingKebabIcon: gdsLoadingKebabIcon,
     gdsLoadingSpinnerIcon: gdsLoadingSpinnerIcon,
     gdsLogoIcon: gdsLogoIcon,
@@ -5789,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 */ []));
@@ -5818,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 */
@@ -5834,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))
@@ -5860,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(() => {
@@ -5922,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;
@@ -5975,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) {
@@ -6001,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));
@@ -6055,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,
@@ -6103,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);
@@ -6751,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 */
@@ -6765,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 */
@@ -6810,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) {
@@ -6841,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 = () => {
@@ -6878,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();
     };
@@ -6896,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,
@@ -6920,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 }] }] } });
 
@@ -8673,12 +9035,16 @@ class GdsUserPromptComponent extends GdsDialogBaseDirective {
     get secondaryTextVariant() {
         return this.config.data?.secondaryTextVariant ?? 'default';
     }
+    get primaryDisabled() {
+        const disabled = this.config.data?.primaryDisabled ?? false;
+        return typeof disabled === 'function' ? disabled() : disabled;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsUserPromptComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GdsUserPromptComponent, isStandalone: true, selector: "gds-user-prompt-dialog", viewQueries: [{ propertyName: "defaultDescTmpl", first: true, predicate: ["defaultDescriptionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' }}\n    </button>\n    @if (config.data?.secondaryLabel; as secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ secondaryLabel }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span class=\"description-text\">{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}:host .description-text{white-space:pre-wrap}}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GdsUserPromptComponent, isStandalone: true, selector: "gds-user-prompt-dialog", viewQueries: [{ propertyName: "defaultDescTmpl", first: true, predicate: ["defaultDescriptionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      [disabled]=\"primaryDisabled\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' }}\n    </button>\n    @if (config.data?.secondaryLabel; as secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ secondaryLabel }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span class=\"description-text\">{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}:host .description-text{white-space:pre-wrap}}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GdsUserPromptComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-user-prompt-dialog', imports: [GdsDialogComponent, GdsButtonComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' }}\n    </button>\n    @if (config.data?.secondaryLabel; as secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ secondaryLabel }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span class=\"description-text\">{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}:host .description-text{white-space:pre-wrap}}\n"] }]
+            args: [{ selector: 'gds-user-prompt-dialog', imports: [GdsDialogComponent, GdsButtonComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      [disabled]=\"primaryDisabled\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' }}\n    </button>\n    @if (config.data?.secondaryLabel; as secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ secondaryLabel }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span class=\"description-text\">{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}:host .description-text{white-space:pre-wrap}}\n"] }]
         }], propDecorators: { defaultDescTmpl: [{ type: i0.ViewChild, args: ['defaultDescriptionTmpl', { isSignal: true }] }] } });
 
 class GdsUserPromptService {
@@ -8691,6 +9057,7 @@ class GdsUserPromptService {
             title,
             description,
             primaryLabel: 'Confirm',
+            primaryDisabled: false,
             secondaryLabel: 'Cancel',
             secondaryTextVariant: 'default',
             closeOnBackdropClick: true,
@@ -8703,6 +9070,7 @@ class GdsUserPromptService {
             title,
             description,
             primaryLabel: 'Ok',
+            primaryDisabled: false,
             secondaryLabel: '',
             secondaryTextVariant: 'default',
             closeOnBackdropClick: true,