@corto-ai/gds-angular 2.1.4-test.2 → 2.1.5-dev.1

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

@@ -9,7 +9,7 @@ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { Subject, tap, debounceTime, fromEvent, take, map, EMPTY } from 'rxjs';
 import { format, intervalToDuration } from 'date-fns';
 import * as i1$2 from '@angular/cdk/a11y';
-import { FocusKeyManager, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
+import { FocusKeyManager, CdkTrapFocus, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import * as i1$1 from '@angular/cdk/menu';
 import { CdkMenuItem, CdkMenuTrigger, CdkMenuItemCheckbox, MENU_TRIGGER, CdkMenu, CdkTargetMenuAim } from '@angular/cdk/menu';
 import { FormField } from '@angular/forms/signals';
@@ -5333,6 +5333,414 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, encapsulation: ViewEncapsulation.None, template: "<div class=\"\n  content\n  gds-background-white\n  gds-display-flex\n  gds-gap-2xs\n  gds-padding-block-3xs\n\">\n  <ng-content />\n</div>\n<div\n  class=\"\n    cancel\n    gds-align-items-center\n    gds-background-white\n    gds-height-xl\n    gds-justify-content-center\n    gds-padding-block-3xs\n    gds-padding-inline-sm\n    gds-text-body-strong\n    gds-text-primary\n    gds-width-100-parent\n  \"\n  cdkMenuItem\n>\n  <span>{{ mobileCancelLabel() }}</span>\n</div>\n", styles: ["@layer design-system{gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { triggerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerElement", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], preventMobileStyling: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventMobileStyling", required: false }] }], allowDefaultTabBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDefaultTabBehavior", required: false }] }], mobileCancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCancelLabel", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CdkMenuItem), { ...{ descendants: true }, isSignal: true }] }] } });
 
+class GdsTextInputComponent extends GdsSignalFormContainer {
+    input = contentChild(GdsNativeInputDirective, ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+    #elementRef = inject((ElementRef));
+    nativeElement = this.#elementRef.nativeElement;
+    ngAfterContentInit() {
+        if (!this.input()) {
+            throw new Error('GdsNativeInputDirective is required for this component. Please update the imports to include GdsNativeInputDirective.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTextInputComponent, isStandalone: true, selector: "gds-text-input", host: { listeners: { "click": "input()?.nativeElement?.focus()" }, classAttribute: "gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input\n      gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile" }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n", styles: ["@layer design-system{:host{--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)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextInputComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'gds-text-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(click)': 'input()?.nativeElement?.focus()',
+                        class: `gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input
+      gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile`
+                    }, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n", styles: ["@layer design-system{:host{--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)}}\n"] }]
+        }], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }] } });
+
+const CDK_MENU_CONNECTED_POSITIONS = [
+    {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetY: -4
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+const CDK_MENU_CONNECTED_POSITIONS_TOP = [
+    {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetY: -4
+    },
+    {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+/** for use when the context menu is close to the right side of the container
+ *  so that it doesn't go over the edge, per UX
+ */
+const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_RIGHT = [
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+/** for use when the context menu is close to the left side of the container
+ *  so that it doesn't go over the edge, per UX
+ */
+const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_LEFT = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+
+class GdsDrilldownSelectComponent extends GdsSignalFormControl {
+    #injector = inject(Injector);
+    #destroyRef = inject(DestroyRef);
+    #directive = inject(CdkMenuTrigger);
+    #elementRef = inject(ElementRef);
+    #formField = inject(FormField, { self: true, optional: true });
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    bindValue = input.required(...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
+    bindLabel = input.required(...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    searchable = input(true, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    maxMenuHeight = input('240px', ...(ngDevMode ? [{ debugName: "maxMenuHeight" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    mobileCancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "mobileCancelLabel" }] : /* istanbul ignore next */ []));
+    resetLabel = input('Reset', ...(ngDevMode ? [{ debugName: "resetLabel" }] : /* istanbul ignore next */ []));
+    emptyText = input('No results found', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    backAriaLabel = input('Go back', ...(ngDevMode ? [{ debugName: "backAriaLabel" }] : /* istanbul ignore next */ []));
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    navStack = signal([], ...(ngDevMode ? [{ debugName: "navStack" }] : /* istanbul ignore next */ []));
+    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    #selectedPath = signal([], ...(ngDevMode ? [{ debugName: "#selectedPath" }] : /* istanbul ignore next */ []));
+    /** Drill/back/reset clicks cause cdkMenu to close; This flag is used to keep the menu open after these actions. */
+    #reopenAfterInternalNavigation = false;
+    /** Ignore FocusMonitor open after close — cdkMenu refocuses the trigger on escape or hitting enter on a leaf (Escape/select). */
+    #suppressOpenOnFocus = false;
+    menu = viewChild.required('menu');
+    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));
+    }, ...(ngDevMode ? [{ debugName: "displayedOptions" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.#selectedPath()
+        .map((option) => this.optionLabel(option))
+        .join(' > '), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    activeItems = computed(() => this.#selectedPath().map((option) => option[this.bindValue()]), ...(ngDevMode ? [{ debugName: "activeItems" }] : /* istanbul ignore next */ []));
+    hasNavHeader = computed(() => this.navStack().length > 0 || (this.clearable() && !!this.label()), ...(ngDevMode ? [{ debugName: "hasNavHeader" }] : /* istanbul ignore next */ []));
+    #syncSelectedOption = effect(() => {
+        const pathValues = this.value();
+        this.options();
+        this.bindValue();
+        untracked(() => this.#selectedPath.set(this.#resolvePath(this.options(), pathValues ?? [])));
+    }, ...(ngDevMode ? [{ debugName: "#syncSelectedOption" }] : /* istanbul ignore next */ []));
+    #setupMenuTemplateRef = effect(() => {
+        const menu = this.menu();
+        this.#directive.menuTemplateRef = !this.disabled() ? menu : null;
+    }, ...(ngDevMode ? [{ debugName: "#setupMenuTemplateRef" }] : /* istanbul ignore next */ []));
+    #setMenuPosition = effect(() => {
+        this.#directive.menuPosition = CDK_MENU_CONNECTED_POSITIONS;
+    }, ...(ngDevMode ? [{ debugName: "#setMenuPosition" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // Use FocusMonitor instead of (focus) binding so the menu opens on keyboard focus.
+        // For mouse focus, cdkMenuTrigger handles it thru its own click handler.
+        inject(FocusMonitor)
+            .monitor(this.#elementRef.nativeElement)
+            .pipe(takeUntilDestroyed())
+            .subscribe((focusOrigin) => {
+            if (focusOrigin === 'keyboard' && !this.#suppressOpenOnFocus) {
+                this.openMenu();
+            }
+        });
+        this.#directive.opened.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.isOpen.set(true);
+            if (!this.#reopenAfterInternalNavigation) {
+                this.searchText.set('');
+                this.#syncNavStackToSelection();
+                this.#formField?.state().reset(); // Prevents layout shift with error messages. When opening menu, sets touched to false so error messages are not rendered behind the menu.
+            }
+            this.#reopenAfterInternalNavigation = false;
+            this.#scheduleMenuItemFocus();
+        });
+        this.#directive.closed.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.isOpen.set(false);
+            this.#suppressOpenOnFocus = true;
+            setTimeout(() => {
+                this.#suppressOpenOnFocus = false;
+            });
+            if (this.#reopenAfterInternalNavigation) {
+                afterNextRender({
+                    write: () => {
+                        this.openMenu();
+                    }
+                }, { injector: this.#injector });
+                return;
+            }
+            this.#formField?.state().markAsTouched(); //
+            this.navStack.set([]);
+            this.searchText.set('');
+        });
+    }
+    ngAfterViewInit() {
+        const resizeObserver = new ResizeObserver((entries) => {
+            if (entries.length > 0) {
+                this.dropdownWidth.set(entries[0].target.clientWidth);
+            }
+        });
+        resizeObserver.observe(this.#elementRef.nativeElement);
+        this.#destroyRef.onDestroy(() => resizeObserver.disconnect());
+    }
+    onItemClick = (option) => {
+        const path = this.searchText().trim()
+            ? this.#findOptionPathByRef(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));
+        // 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;
+        this.#directive.close();
+    };
+    onBack = () => {
+        this.searchText.set('');
+        this.navStack.update((stack) => stack.slice(0, -1));
+        this.#reopenAfterInternalNavigation = true;
+        this.#directive.close();
+    };
+    onReset = () => {
+        this.searchText.set('');
+        this.navStack.set([]);
+        this.#setValue([], false);
+        this.#reopenAfterInternalNavigation = true;
+        this.#directive.close();
+        this.#formField?.state().reset(); // Updating the value to [] renders error message behind the menu. This makes sure touched is false until user closes the menu.
+    };
+    onBreadcrumbClick = (index) => {
+        this.searchText.set('');
+        this.navStack.update((stack) => stack.slice(0, index + 1));
+        this.#reopenAfterInternalNavigation = true;
+        this.#directive.close();
+    };
+    onSearch = (event) => {
+        this.searchText.set(event.target.value);
+    };
+    onSearchKeydown = (event) => {
+        // Typing something in the search causes the menu to focus on a search result.
+        // This allows continous typing without losing focus unless escape/tab/arrowdown key is pressed.
+        if (event.code !== 'Escape' && event.code !== 'Tab' && event.code !== 'ArrowDown') {
+            event.stopPropagation();
+        }
+    };
+    onEscape = () => {
+        this.#directive.close();
+        this.#suppressOpenOnFocus = true;
+        this.#elementRef.nativeElement.focus();
+    };
+    openMenu = () => {
+        if (this.disabled()) {
+            return;
+        }
+        this.#directive.open();
+    };
+    optionLabel = (option) => String(option[this.bindLabel()]);
+    onArrowRight = (option) => {
+        if (option.children?.length) {
+            this.onDrilldownClick(option);
+        }
+    };
+    onArrowLeft = () => {
+        if (this.navStack().length) {
+            this.onBack();
+        }
+    };
+    #setValue = (pathValues, closeMenu = true) => {
+        this.value.set(pathValues);
+        this.touched.set(true);
+        if (closeMenu) {
+            // Focus trigger then close; #suppressOpenOnFocus in onEscape prevents FocusMonitor reopen.
+            afterNextRender({
+                read: () => {
+                    this.#elementRef.nativeElement.focus();
+                    this.onEscape();
+                }
+            }, { 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));
+    };
+    #scheduleMenuItemFocus = () => {
+        afterNextRender({
+            write: () => {
+                // Defer past CDK Menu's focusFirstItem so we can override it.
+                setTimeout(() => this.#focusSelectedMenuItemOrTrigger());
+            }
+        }, { injector: this.#injector });
+    };
+    #focusSelectedMenuItemOrTrigger = () => {
+        const menu = this.#directive.getMenu();
+        if (!menu?.items?.length) {
+            return;
+        }
+        const selectedPath = this.#selectedPath();
+        const selectedAtLevel = selectedPath[this.navStack().length];
+        const selectedValue = selectedAtLevel?.[this.bindValue()];
+        const selectedIndex = selectedValue === undefined || selectedValue === null || selectedValue === ''
+            ? -1
+            : this.displayedOptions().findIndex((option) => String(option[this.bindValue()]) === String(selectedValue));
+        if (selectedIndex >= 0) {
+            const item = menu.items.get(selectedIndex);
+            if (item) {
+                menu.setActiveMenuItem(item);
+                return;
+            }
+        }
+        // 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: "21.2.17", ngImport: i0, type: GdsDrilldownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 }, 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 }], 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            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" }, { 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: "21.2.17", ngImport: i0, type: GdsDrilldownSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gds-drilldown-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CdkMenuTrigger,
+                        GdsButtonComponent,
+                        GdsDropdownComponent,
+                        GdsTextInputComponent,
+                        GdsNativeInputDirective,
+                        CdkMenuItem,
+                        CdkTargetMenuAim,
+                        GdsIconComponent,
+                        NgClass,
+                        GdsIconButtonComponent
+                    ], host: {
+                        role: 'button',
+                        '[attr.tabindex]': 'disabled() ? -1 : 0',
+                        class: `
+      gds-align-items-center
+      gds-display-flex
+      gds-gap-2xs
+      gds-justify-content-between
+      gds-mobile-padding-block-0
+      gds-mobile-text-input-mobile
+      gds-padding-block-3xs
+      gds-padding-inline-xs
+      gds-radius-sm
+      gds-text-input
+      gds-outline-none
+    `,
+                        '[class.is-controlled]': 'isOpen()',
+                        '(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            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 }] }], 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 }] }] } });
+
 class GdsEmptyStateComponent extends OnBrandChanged {
     #cdnUrl = inject(CDN_URL);
     variant = input('info-circle', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -5351,7 +5759,7 @@ class GdsEmptyStateComponent extends OnBrandChanged {
     titleTextSize = computed(() => `gds-text-${this.compact() ? 'subtitle' : 'title'}`, ...(ngDevMode ? [{ debugName: "titleTextSize" }] : /* istanbul ignore next */ []));
     otherTextSize = computed(() => `gds-text-${this.compact() ? 'caption' : 'body'}`, ...(ngDevMode ? [{ debugName: "otherTextSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsEmptyStateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsEmptyStateComponent, isStandalone: true, selector: "gds-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, suppressIcon: { classPropertyName: "suppressIcon", publicName: "suppressIcon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "\n      gds-align-items-center\n      gds-display-flex\n      gds-flex-column\n      gds-height-100-parent\n      gds-justify-content-center\n      gds-text-body\n      gds-text-center\n      gds-text-primary-primary\n      gds-width-100-parent\n      gds-gap-sm\n    " }, usesInheritance: true, ngImport: i0, template: "@if (!suppressIcon()) {\n  <img\n    class=\"icon\"\n    [src]=\"imageSrc()\"\n    alt=\"empty state icon\"\n  />\n}\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"titleTextSize()\"\n>\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n  <ng-content select=\"[button]\" />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-secondary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[footer]\" />\n</div>\n", styles: ["@layer design-system{:host{--gds-empty-state-icon-size: 132px}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsEmptyStateComponent, isStandalone: true, selector: "gds-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, suppressIcon: { classPropertyName: "suppressIcon", publicName: "suppressIcon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "\n      gds-align-items-center\n      gds-display-flex\n      gds-flex-column\n      gds-text-body\n      gds-text-center\n      gds-text-primary-primary\n      gds-width-100-parent\n      gds-gap-sm\n    " }, usesInheritance: true, ngImport: i0, template: "@if (!suppressIcon()) {\n  <img\n    class=\"icon\"\n    [src]=\"imageSrc()\"\n    alt=\"empty state icon\"\n  />\n}\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"titleTextSize()\"\n>\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n  <ng-content select=\"[button]\" />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-secondary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[footer]\" />\n</div>\n", styles: ["@layer design-system{:host{--gds-empty-state-icon-size: 132px;justify-content:center;height:100%}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsEmptyStateComponent, decorators: [{
             type: Component,
@@ -5360,15 +5768,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       gds-align-items-center
       gds-display-flex
       gds-flex-column
-      gds-height-100-parent
-      gds-justify-content-center
       gds-text-body
       gds-text-center
       gds-text-primary-primary
       gds-width-100-parent
       gds-gap-sm
     `
-                    }, template: "@if (!suppressIcon()) {\n  <img\n    class=\"icon\"\n    [src]=\"imageSrc()\"\n    alt=\"empty state icon\"\n  />\n}\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"titleTextSize()\"\n>\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n  <ng-content select=\"[button]\" />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-secondary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[footer]\" />\n</div>\n", styles: ["@layer design-system{:host{--gds-empty-state-icon-size: 132px}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}}\n"] }]
+                    }, template: "@if (!suppressIcon()) {\n  <img\n    class=\"icon\"\n    [src]=\"imageSrc()\"\n    alt=\"empty state icon\"\n  />\n}\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"titleTextSize()\"\n>\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n  <ng-content select=\"[button]\" />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-secondary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[footer]\" />\n</div>\n", styles: ["@layer design-system{:host{--gds-empty-state-icon-size: 132px;justify-content:center;height:100%}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], suppressIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressIcon", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
 
 const GDS_EMPTY_STATE_VARIANTS = [
@@ -6127,27 +6533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<ng-content />\n<div\n  [innerHTML]=\"inputValue()\"\n  data-testId=\"valueTooltip\"\n  [style.left]=\"currentValueTooltipLeftOffset()\"\n  class=\"\n    gds-border-color-default\n    gds-display-inline-block\n    gds-padding-block-3xs\n    gds-padding-inline-2xs\n    gds-radius-sm\n    gds-text-caption\n    gds-text-center\n    value-tooltip\n  \"\n></div>\n", styles: ["@layer design-system{:host{--gds-form-control-active-color: var(--gds-palette-background-bright);--gds-form-control-background-color: var(--gds-palette-background-bright);--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[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--background-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--active-color: var(--disabled-border-color)}:host ::ng-deep input{cursor:var(--cursor);overflow:visible;border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-webkit-slider-thumb{appearance:none;height:20px;width:20px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box;margin-top:-8px}:host ::ng-deep input::-moz-range-thumb{appearance:none;height:20px;width:20px;margin-top:-6px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box}:host ::ng-deep input::-webkit-slider-runnable-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-moz-range-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input:focus-visible{outline:2px solid var(--gds-palette-border-dark);outline-offset:10px}:host .value-tooltip{position:absolute;top:-28px;left:0;border:1px solid;color:var(--text-color);background-color:var(--gds-palette-background-white);box-shadow:0 4px 8px #00000024;transform:translate(-50%)}}\n"] }]
         }], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }] } });
 
-class GdsTextInputComponent extends GdsSignalFormContainer {
-    input = contentChild(GdsNativeInputDirective, ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
-    #elementRef = inject((ElementRef));
-    nativeElement = this.#elementRef.nativeElement;
-    ngAfterContentInit() {
-        if (!this.input()) {
-            throw new Error('GdsNativeInputDirective is required for this component. Please update the imports to include GdsNativeInputDirective.');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTextInputComponent, isStandalone: true, selector: "gds-text-input", host: { listeners: { "click": "input()?.nativeElement?.focus()" }, classAttribute: "gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input\n      gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile" }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n", styles: ["@layer design-system{:host{--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)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextInputComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'gds-text-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '(click)': 'input()?.nativeElement?.focus()',
-                        class: `gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input
-      gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile`
-                    }, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n", styles: ["@layer design-system{:host{--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)}}\n"] }]
-        }], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }] } });
-
 class GdsAutoGrowingTextareaComponent extends GdsSignalFormContainer {
     maxRows = input(...(ngDevMode ? [undefined, { debugName: "maxRows" }] : /* istanbul ignore next */ []));
     dataReplicatedValue = signal('', ...(ngDevMode ? [{ debugName: "dataReplicatedValue" }] : /* istanbul ignore next */ []));
@@ -6446,105 +6831,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<ul class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-2xs\n  gds-margin-0\n  gds-padding-0\n\">\n  <ng-content />\n</ul>\n<ul class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-2xs\n  gds-margin-0\n  gds-margin-block-start-auto\n  gds-padding-0\n\">\n  <ng-content select=\"[menu-bottom]\" />\n</ul>\n", styles: ["@layer design-system{:host{box-shadow:-3px 0 4px #00000012 inset;border-right:.5px solid var(--gds-palette-border-default)}}\n"] }]
         }] });
 
-const CDK_MENU_CONNECTED_POSITIONS = [
-    {
-        originX: 'center',
-        originY: 'bottom',
-        overlayX: 'center',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'center',
-        originY: 'top',
-        overlayX: 'center',
-        overlayY: 'bottom',
-        offsetY: -4
-    },
-    {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-        offsetY: -4
-    }
-];
-const CDK_MENU_CONNECTED_POSITIONS_TOP = [
-    {
-        originX: 'center',
-        originY: 'top',
-        overlayX: 'center',
-        overlayY: 'bottom',
-        offsetY: -4
-    },
-    {
-        originX: 'center',
-        originY: 'bottom',
-        overlayX: 'center',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-        offsetY: -4
-    }
-];
-/** for use when the context menu is close to the right side of the container
- *  so that it doesn't go over the edge, per UX
- */
-const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_RIGHT = [
-    {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-        offsetY: -4
-    }
-];
-/** for use when the context menu is close to the left side of the container
- *  so that it doesn't go over the edge, per UX
- */
-const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_LEFT = [
-    {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'bottom',
-        offsetY: -4
-    }
-];
-
 class GdsNestedSelectComponent extends GdsSignalFormContainer {
     #injector = inject(Injector);
     #directive = inject(CdkMenuTrigger);
@@ -7732,14 +8018,14 @@ class GdsTreeViewListItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTreeViewListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsTreeViewListItemComponent, isStandalone: true, selector: "gds-tree-view-list-item", inputs: { tier: { classPropertyName: "tier", publicName: "tier", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disableChevron: { classPropertyName: "disableChevron", publicName: "disableChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", doubleClicked: "doubleClicked", toggleExpanded: "toggleExpanded" }, host: { properties: { "style.--tier": "tier()" }, classAttribute: "gds-display-contents" }, queries: [{ propertyName: "checkbox", first: true, predicate: GdsCheckboxComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "item", first: true, predicate: ["item"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GdsListboxOptionDirective }], ngImport: i0, template: "<div\n  #item\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-gap-2xs\n    gds-min-width-0\n    gds-position-relative\n    gds-width-100-parent\n    root\n  \"\n  [ngClass]=\"{\n    selected: activeOverride(),\n    disabled: disabled(),\n    dropdown: expanded(),\n    'has-checkbox': hasCheckbox()\n  }\"\n  role=\"treeitem\"\n  [attr.aria-selected]=\"activeOverride()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [tabindex]=\"-1\"\n  (click)=\"onHandleClick($event)\"\n  (keydown.space)=\"onHandleClick($event)\"\n  (dblclick)=\"onHandleDoubleClick($event)\"\n  (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n  (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n  <ng-content select=\"[checkbox]\" />\n  @if (displayChevron()) {\n    <button\n      class=\"\n        chevron-btn\n        gds-background-none\n        gds-border-none\n        gds-min-height-0\n        gds-mobile-margin-inline-end-sm\n      \"\n      gds-icon-button\n      variant=\"primary\"\n      [disabled]=\"disableChevron()\"\n      [tabindex]=\"-1\"\n      (clicked)=\"handleToggleExpanded($event)\"\n    >\n      <gds-icon\n        class=\"\n          chevron\n          gds-icon-size-2xs\n          gds-mobile-icon-size-sm\n        \"\n        key=\"line-chevron-right-stroke\"\n      />\n    </button>\n  } @else {\n    <span class=\"gds-width-sm\"></span>\n  }\n\n  @if (icon(); as icon) {\n    <gds-icon\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-sm\n        icon\n      \"\n      [key]=\"icon\"\n    />\n  }\n  <div class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-text-body\n    label\n  \">\n    <ng-content />\n  </div>\n  <div class=\"\n    end-content\n    gds-padding-block-end-2xs\n    gds-text-caption\n  \">\n    <ng-content select=\"[end-content]\" />\n  </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n  <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root: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 .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):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 .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):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 .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsTreeViewListItemComponent, isStandalone: true, selector: "gds-tree-view-list-item", inputs: { tier: { classPropertyName: "tier", publicName: "tier", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disableChevron: { classPropertyName: "disableChevron", publicName: "disableChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", doubleClicked: "doubleClicked", toggleExpanded: "toggleExpanded" }, host: { properties: { "style.--tier": "tier()" }, classAttribute: "gds-display-contents" }, queries: [{ propertyName: "checkbox", first: true, predicate: GdsCheckboxComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "item", first: true, predicate: ["item"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GdsListboxOptionDirective }], ngImport: i0, template: "<div\n  #item\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-gap-2xs\n    gds-min-width-0\n    gds-position-relative\n    gds-width-100-parent\n    root\n  \"\n  [ngClass]=\"{\n    selected: activeOverride(),\n    disabled: disabled(),\n    dropdown: expanded(),\n    'has-checkbox': hasCheckbox()\n  }\"\n  role=\"treeitem\"\n  [attr.aria-selected]=\"activeOverride()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [tabindex]=\"-1\"\n  (click)=\"onHandleClick($event)\"\n  (keydown.space)=\"onHandleClick($event)\"\n  (dblclick)=\"onHandleDoubleClick($event)\"\n  (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n  (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n  <ng-content select=\"[checkbox]\" />\n  @if (displayChevron()) {\n    <button\n      class=\"\n        chevron-btn\n        gds-background-none\n        gds-border-none\n        gds-min-height-0\n        gds-mobile-margin-inline-end-sm\n      \"\n      gds-icon-button\n      variant=\"primary\"\n      [disabled]=\"disableChevron()\"\n      [tabindex]=\"-1\"\n      (clicked)=\"handleToggleExpanded($event)\"\n    >\n      <gds-icon\n        class=\"\n          chevron\n          gds-icon-size-2xs\n          gds-mobile-icon-size-sm\n        \"\n        key=\"line-chevron-right-stroke\"\n      />\n    </button>\n  } @else {\n    <span class=\"gds-width-sm\"></span>\n  }\n\n  @if (icon(); as icon) {\n    <gds-icon\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-sm\n        icon\n      \"\n      [key]=\"icon\"\n    />\n  }\n  <div class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-text-body\n    label\n  \">\n    <ng-content />\n  </div>\n  <div class=\"\n    end-content\n    gds-padding-block-end-2xs\n    gds-text-caption\n  \">\n    <ng-content select=\"[end-content]\" />\n  </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n  <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root: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 .root{padding-left:calc(25px * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):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 .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):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 .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTreeViewListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gds-tree-view-list-item', imports: [NgClass, GdsIconComponent, GdsIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--tier]': 'tier()',
                         class: 'gds-display-contents'
-                    }, hostDirectives: [GdsListboxOptionDirective], template: "<div\n  #item\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-gap-2xs\n    gds-min-width-0\n    gds-position-relative\n    gds-width-100-parent\n    root\n  \"\n  [ngClass]=\"{\n    selected: activeOverride(),\n    disabled: disabled(),\n    dropdown: expanded(),\n    'has-checkbox': hasCheckbox()\n  }\"\n  role=\"treeitem\"\n  [attr.aria-selected]=\"activeOverride()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [tabindex]=\"-1\"\n  (click)=\"onHandleClick($event)\"\n  (keydown.space)=\"onHandleClick($event)\"\n  (dblclick)=\"onHandleDoubleClick($event)\"\n  (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n  (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n  <ng-content select=\"[checkbox]\" />\n  @if (displayChevron()) {\n    <button\n      class=\"\n        chevron-btn\n        gds-background-none\n        gds-border-none\n        gds-min-height-0\n        gds-mobile-margin-inline-end-sm\n      \"\n      gds-icon-button\n      variant=\"primary\"\n      [disabled]=\"disableChevron()\"\n      [tabindex]=\"-1\"\n      (clicked)=\"handleToggleExpanded($event)\"\n    >\n      <gds-icon\n        class=\"\n          chevron\n          gds-icon-size-2xs\n          gds-mobile-icon-size-sm\n        \"\n        key=\"line-chevron-right-stroke\"\n      />\n    </button>\n  } @else {\n    <span class=\"gds-width-sm\"></span>\n  }\n\n  @if (icon(); as icon) {\n    <gds-icon\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-sm\n        icon\n      \"\n      [key]=\"icon\"\n    />\n  }\n  <div class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-text-body\n    label\n  \">\n    <ng-content />\n  </div>\n  <div class=\"\n    end-content\n    gds-padding-block-end-2xs\n    gds-text-caption\n  \">\n    <ng-content select=\"[end-content]\" />\n  </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n  <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root: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 .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):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 .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):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 .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"] }]
+                    }, hostDirectives: [GdsListboxOptionDirective], template: "<div\n  #item\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-gap-2xs\n    gds-min-width-0\n    gds-position-relative\n    gds-width-100-parent\n    root\n  \"\n  [ngClass]=\"{\n    selected: activeOverride(),\n    disabled: disabled(),\n    dropdown: expanded(),\n    'has-checkbox': hasCheckbox()\n  }\"\n  role=\"treeitem\"\n  [attr.aria-selected]=\"activeOverride()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [tabindex]=\"-1\"\n  (click)=\"onHandleClick($event)\"\n  (keydown.space)=\"onHandleClick($event)\"\n  (dblclick)=\"onHandleDoubleClick($event)\"\n  (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n  (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n  <ng-content select=\"[checkbox]\" />\n  @if (displayChevron()) {\n    <button\n      class=\"\n        chevron-btn\n        gds-background-none\n        gds-border-none\n        gds-min-height-0\n        gds-mobile-margin-inline-end-sm\n      \"\n      gds-icon-button\n      variant=\"primary\"\n      [disabled]=\"disableChevron()\"\n      [tabindex]=\"-1\"\n      (clicked)=\"handleToggleExpanded($event)\"\n    >\n      <gds-icon\n        class=\"\n          chevron\n          gds-icon-size-2xs\n          gds-mobile-icon-size-sm\n        \"\n        key=\"line-chevron-right-stroke\"\n      />\n    </button>\n  } @else {\n    <span class=\"gds-width-sm\"></span>\n  }\n\n  @if (icon(); as icon) {\n    <gds-icon\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-sm\n        icon\n      \"\n      [key]=\"icon\"\n    />\n  }\n  <div class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-text-body\n    label\n  \">\n    <ng-content />\n  </div>\n  <div class=\"\n    end-content\n    gds-padding-block-end-2xs\n    gds-text-caption\n  \">\n    <ng-content select=\"[end-content]\" />\n  </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n  <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root: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 .root{padding-left:calc(25px * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):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 .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):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 .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"] }]
         }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsCheckboxComponent), { isSignal: true }] }], item: [{ type: i0.ViewChild, args: ['item', { isSignal: true }] }], tier: [{ type: i0.Input, args: [{ isSignal: true, alias: "tier", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disableChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableChevron", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], doubleClicked: [{ type: i0.Output, args: ["doubleClicked"] }], toggleExpanded: [{ type: i0.Output, args: ["toggleExpanded"] }] } });
 
 class TreeViewListItemDirective {
@@ -8084,7 +8370,7 @@ class GdsChatSuggestionComponent {
         this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsChatSuggestionComponent, isStandalone: true, selector: "button[gds-chat-suggestion]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "disabled() ? \"\" : undefined" }, classAttribute: "gds-radius-sm gds-mobile-radius-md" }, ngImport: i0, template: "<ng-content />\n", styles: ["@layer design-system{:host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsChatSuggestionComponent, isStandalone: true, selector: "button[gds-chat-suggestion]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "disabled() ? \"\" : undefined" }, classAttribute: "gds-radius-sm gds-mobile-radius-md" }, ngImport: i0, template: "<ng-content />\n", styles: ["@layer design-system{:host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:is(body[isMobile=true]) :host:disabled{color:var(--gds-palette-text-default-disabled)}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatSuggestionComponent, decorators: [{
             type: Component,
@@ -8096,7 +8382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         type: 'button',
                         '[attr.disabled]': 'disabled() ? "" : undefined',
                         '(click)': 'handleClick($event)'
-                    }, template: "<ng-content />\n", styles: ["@layer design-system{:host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}}\n"] }]
+                    }, template: "<ng-content />\n", styles: ["@layer design-system{:host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:is(body[isMobile=true]) :host:disabled{color:var(--gds-palette-text-default-disabled)}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class GdsAutoRoundCurrencyDirective {
@@ -8449,5 +8735,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BrandEnum, CDN_URL, CONTACT_INITIALS_REGEX, GDS_BRANDS, GDS_EMPTY_STATE_VARIANTS, GDS_TOASTER_CONFIG, GDS_TOAST_CONTAINER, GdsAccountingService, GdsAutoRoundCurrencyDirective, GdsAutofocusDirective, GdsAvatarComponent, GdsBadgeColorType, GdsBadgeComponent, GdsBadgeVariantType, GdsBannerComponent, GdsBreadcrumbsComponent, GdsBuildOptionConfigPipe, GdsButtonComponent, GdsButtonRadioOptionComponent, GdsChatExpandableListComponent, GdsChatPromptComponent, GdsChatSuggestionComponent, GdsCheckboxComponent, GdsChipColorsMap, GdsChipComponent, GdsCollapsibleAsideLayoutComponent, GdsCompositeOptionPrimaryDirective, GdsCompositeOptionSecondaryDirective, GdsContextMenuHeadingComponent, GdsContextMenuItemComponent, GdsContextMenuItemVariantEnum, GdsContextMenuSwitchComponent, GdsDateInputComponent, GdsDatePipe, GdsDialogBaseDirective, GdsDialogComponent, GdsDialogOverlayComponent, GdsDialogService, GdsDoctypeService, GdsDoctypeToIconPipe, GdsDocumentItemComponent, GdsDropdownComponent, GdsEmptyStateComponent, GdsFeatureBlockComponent, GdsFeedbackButtonComponent, GdsFileUploadComponent, GdsFilenameToIconPipe, GdsFilterChipComponent, GdsFocusOnInitDirective, GdsFormControlComponent, GdsHistoryComponent, GdsIconButtonComponent, GdsIconComponent, GdsIconDoctypeComponent, GdsIconService, GdsInputAutocompleteDirective, GdsItemDisplayComponent, GdsKeyboardNavigationHost, GdsKeyboardNavigationItem, GdsListboxCompositeOptionDirective, GdsListboxDirective, GdsListboxOptionDirective, GdsLoadingCarouselComponent, GdsMapArrayToRadioOptionsPipe, GdsMathFloorPipe, GdsMathMaxPipe, GdsMathMinPipe, GdsMessageInputComponent, GdsModule, GdsNativeInputDirective, GdsNativeTextareaDirective, GdsNavAsideComponent, GdsNavAsideItemComponent, GdsNestedSelectComponent, GdsProgressBarComponent, GdsRadioComponent, GdsRadioOptionDirective, GdsReferenceComponent, GdsReferenceLinkComponent, GdsRegexFilterDirective, GdsResizedDirective, GdsResizedEvent, GdsResponseComponent, GdsScrollOutOfViewDirective, GdsScrollOutOfViewScrollStatus, GdsScrollOutOfViewService, GdsScrollToBottomDirective, GdsScrollToFirstInvalidDirective, GdsSearchBarComponent, GdsSelectComponent, GdsSelectOnFocusDirective, GdsSidebarItemBodyComponent, GdsSidebarItemComponent, GdsSkeletonLoadingComponent, GdsSliderComponent, GdsSpinnerComponent, GdsSplitButtonComponent, GdsSvgIconPipe, GdsSwitchComponent, GdsTextInputComponent, GdsTextareaComponent, GdsTimelineItemComponent, GdsToastComponent, GdsTooltipComponent, GdsTreeViewListItemComponent, GdsUserPromptService, GdsVirtualScrollListboxDirective, MapperPipe, OnBrandChanged, RoundMode, ToastrService, TreeViewListItemDirective, chipColor, chipSize, chipTypes, chipWidth, formatToISO, gdsButtonSizes, gdsButtonVariants, gdsDropdownPositionsX, gdsDropdownPositionsY, gdsSelectWidths, gdsServices, gdsUserPromptSecondaryTextVariants, getIconsByPrefix, isGdsBrand, ngSelectDropdownPositions, parseLocalizedDate, provideToaster, shortDate, shortDateTime, transformDateFormat, transformDurationToSeconds, transformSecondsToDuration };
+export { BrandEnum, CDN_URL, CONTACT_INITIALS_REGEX, GDS_BRANDS, GDS_EMPTY_STATE_VARIANTS, GDS_TOASTER_CONFIG, GDS_TOAST_CONTAINER, GdsAccountingService, GdsAutoRoundCurrencyDirective, GdsAutofocusDirective, GdsAvatarComponent, GdsBadgeColorType, GdsBadgeComponent, GdsBadgeVariantType, GdsBannerComponent, GdsBreadcrumbsComponent, GdsBuildOptionConfigPipe, GdsButtonComponent, GdsButtonRadioOptionComponent, GdsChatExpandableListComponent, GdsChatPromptComponent, GdsChatSuggestionComponent, GdsCheckboxComponent, GdsChipColorsMap, GdsChipComponent, GdsCollapsibleAsideLayoutComponent, GdsCompositeOptionPrimaryDirective, GdsCompositeOptionSecondaryDirective, GdsContextMenuHeadingComponent, GdsContextMenuItemComponent, GdsContextMenuItemVariantEnum, GdsContextMenuSwitchComponent, GdsDateInputComponent, GdsDatePipe, GdsDialogBaseDirective, GdsDialogComponent, GdsDialogOverlayComponent, GdsDialogService, GdsDoctypeService, GdsDoctypeToIconPipe, GdsDocumentItemComponent, GdsDrilldownSelectComponent, GdsDropdownComponent, GdsEmptyStateComponent, GdsFeatureBlockComponent, GdsFeedbackButtonComponent, GdsFileUploadComponent, GdsFilenameToIconPipe, GdsFilterChipComponent, GdsFocusOnInitDirective, GdsFormControlComponent, GdsHistoryComponent, GdsIconButtonComponent, GdsIconComponent, GdsIconDoctypeComponent, GdsIconService, GdsInputAutocompleteDirective, GdsItemDisplayComponent, GdsKeyboardNavigationHost, GdsKeyboardNavigationItem, GdsListboxCompositeOptionDirective, GdsListboxDirective, GdsListboxOptionDirective, GdsLoadingCarouselComponent, GdsMapArrayToRadioOptionsPipe, GdsMathFloorPipe, GdsMathMaxPipe, GdsMathMinPipe, GdsMessageInputComponent, GdsModule, GdsNativeInputDirective, GdsNativeTextareaDirective, GdsNavAsideComponent, GdsNavAsideItemComponent, GdsNestedSelectComponent, GdsProgressBarComponent, GdsRadioComponent, GdsRadioOptionDirective, GdsReferenceComponent, GdsReferenceLinkComponent, GdsRegexFilterDirective, GdsResizedDirective, GdsResizedEvent, GdsResponseComponent, GdsScrollOutOfViewDirective, GdsScrollOutOfViewScrollStatus, GdsScrollOutOfViewService, GdsScrollToBottomDirective, GdsScrollToFirstInvalidDirective, GdsSearchBarComponent, GdsSelectComponent, GdsSelectOnFocusDirective, GdsSidebarItemBodyComponent, GdsSidebarItemComponent, GdsSkeletonLoadingComponent, GdsSliderComponent, GdsSpinnerComponent, GdsSplitButtonComponent, GdsSvgIconPipe, GdsSwitchComponent, GdsTextInputComponent, GdsTextareaComponent, GdsTimelineItemComponent, GdsToastComponent, GdsTooltipComponent, GdsTreeViewListItemComponent, GdsUserPromptService, GdsVirtualScrollListboxDirective, MapperPipe, OnBrandChanged, RoundMode, ToastrService, TreeViewListItemDirective, chipColor, chipSize, chipTypes, chipWidth, formatToISO, gdsButtonSizes, gdsButtonVariants, gdsDropdownPositionsX, gdsDropdownPositionsY, gdsSelectWidths, gdsServices, gdsUserPromptSecondaryTextVariants, getIconsByPrefix, isGdsBrand, ngSelectDropdownPositions, parseLocalizedDate, provideToaster, shortDate, shortDateTime, transformDateFormat, transformDurationToSeconds, transformSecondsToDuration };
 //# sourceMappingURL=corto-ai-gds-angular.mjs.map