ngx-salsa-portal-ds 0.49.21 → 0.49.22

package/fesm2022/ngx-salsa-portal-ds.mjs

@@ -1864,6 +1864,8 @@ class SdsDropdownComponent {
      * selection and the panel closes — matching native `<select>` semantics.
      */
     multiSelect = input(true, ...(ngDevMode ? [{ debugName: "multiSelect" }] : /* istanbul ignore next */ []));
+    /** When `true`, shows a clear (✕) button in the trigger whenever a value is selected. */
+    clearButton = input(false, ...(ngDevMode ? [{ debugName: "clearButton" }] : /* istanbul ignore next */ []));
     state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     tooltip = input(false, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
@@ -1871,6 +1873,8 @@ class SdsDropdownComponent {
     tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
     errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     multiSelectionLabel = input((count) => `${count} selected`, ...(ngDevMode ? [{ debugName: "multiSelectionLabel" }] : /* istanbul ignore next */ []));
+    /** Emitted when the clear button is clicked, after the value is reset to `[]`. */
+    cleared = output();
     searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
     trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
@@ -1893,6 +1897,7 @@ class SdsDropdownComponent {
         });
     }
     isDisabled = computed(() => this.state() === 'disabled', ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    showClearButton = computed(() => this.clearButton() && !this.isDisabled() && this.value().length > 0, ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
     isGrouped = computed(() => this.optionGroups().length > 0, ...(ngDevMode ? [{ debugName: "isGrouped" }] : /* istanbul ignore next */ []));
     filteredItems = computed(() => {
         const q = this.searchQuery().toLowerCase().trim();
@@ -2014,6 +2019,14 @@ class SdsDropdownComponent {
     onSearch(event) {
         this.searchQuery.set(event.target.value);
     }
+    onClear(event) {
+        event.stopPropagation();
+        if (this.isDisabled())
+            return;
+        this.value.set([]);
+        this.searchQuery.set('');
+        this.cleared.emit();
+    }
     open() {
         this.isOpen.set(true);
         this.searchQuery.set('');
@@ -2029,7 +2042,7 @@ class SdsDropdownComponent {
         document.removeEventListener('click', this.clickListener);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SdsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SdsDropdownComponent, isStandalone: true, selector: "sds-dropdown", inputs: { testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionGroups: { classPropertyName: "optionGroups", publicName: "optionGroups", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionLabel: { classPropertyName: "multiSelectionLabel", publicName: "multiSelectionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "attr.data-testid": "testId()", "class.sds-dropdown--open": "isOpen()", "class.sds-dropdown--disabled": "isDisabled()", "class.sds-dropdown--grouped": "isGrouped()" }, classAttribute: "sds-dropdown" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SdsDropdownComponent, isStandalone: true, selector: "sds-dropdown", inputs: { testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionGroups: { classPropertyName: "optionGroups", publicName: "optionGroups", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionLabel: { classPropertyName: "multiSelectionLabel", publicName: "multiSelectionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", cleared: "cleared" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "attr.data-testid": "testId()", "class.sds-dropdown--open": "isOpen()", "class.sds-dropdown--disabled": "isDisabled()", "class.sds-dropdown--grouped": "isGrouped()" }, classAttribute: "sds-dropdown" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="sds-dropdown__field">
       @if (label()) {
         <label
@@ -2071,6 +2084,16 @@ class SdsDropdownComponent {
             <span [class]="triggerTextClass()">{{ triggerText() }}</span>
           }
         </div>
+        @if (showClearButton()) {
+          <button
+            type="button"
+            class="sds-dropdown__clear"
+            [attr.data-testid]="testId() + '__clear'"
+            (click)="onClear($event)"
+          >
+            <sds-icon name="close" size="large" color="3" />
+          </button>
+        }
         <sds-icon
           [name]="isOpen() ? 'expand_less' : 'expand_more'"
           size="large"
@@ -2107,7 +2130,7 @@ class SdsDropdownComponent {
         }
       </div>
     }
-  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}.sds-dropdown__field{display:flex;flex-direction:column;gap:var(--space-quark);width:100%;min-width:0}.sds-dropdown__wrapper{display:flex;align-items:center;gap:var(--space-quark);height:40px;min-width:0;padding:0 var(--space-small);border:1px solid var(--color-border-default-2);border-radius:var(--radius-base);background:transparent;cursor:pointer;overflow:hidden;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.sds-dropdown__wrapper:focus-visible{outline:2px solid var(--color-border-primary-light);outline-offset:1px;border-color:var(--color-border-primary-dark)}.sds-dropdown__wrapper--hover{border-color:var(--color-border-primary-dark)}.sds-dropdown__wrapper--focus{border-color:var(--color-border-default-2);background:var(--color-bg-disabled)}.sds-dropdown__wrapper--error{border-color:var(--color-border-danger)}.sds-dropdown__wrapper--disabled{border-color:var(--color-border-disabled);pointer-events:none;cursor:not-allowed}.sds-dropdown__content{display:flex;flex:1;align-items:center;gap:var(--space-quark);min-width:0;overflow:hidden}.sds-dropdown__leading-icon{flex-shrink:0}.sds-dropdown__trigger-text{flex:1;font-size:var(--text-size-base);font-family:inherit;line-height:normal;color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sds-dropdown__trigger-text--placeholder{color:var(--color-text-placeholder)}.sds-dropdown__search{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:var(--text-size-base);font-family:inherit;line-height:normal;color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sds-dropdown__search::placeholder{color:var(--color-text-placeholder)}.sds-dropdown__chevron{flex-shrink:0}.sds-dropdown__error{font-size:var(--text-size-tiny);line-height:normal;color:var(--color-text-danger);white-space:nowrap}.sds-dropdown__menu{position:absolute;top:calc(100% + var(--space-quark));left:0;z-index:100;min-width:100%}.sds-dropdown__menu sds-floating-menu{--sds-floating-menu-width: 100%;display:block}.sds-dropdown__empty{font-size:var(--text-size-base);color:var(--color-text-placeholder);padding:var(--space-quark) 0}:host(.sds-dropdown--disabled) .sds-dropdown__trigger-text,:host(.sds-dropdown--disabled) .sds-dropdown__search{color:var(--color-text-disabled)}:host(.sds-dropdown--disabled) .sds-dropdown__trigger-text::placeholder,:host(.sds-dropdown--disabled) .sds-dropdown__search::placeholder{color:var(--color-text-disabled)}:host(.sds-dropdown--disabled) ::ng-deep [sds-label]{color:var(--color-text-disabled)}@media(prefers-reduced-motion:reduce){.sds-dropdown__wrapper{transition:none!important}}\n"], dependencies: [{ kind: "component", type: SdsFloatingMenuComponent, selector: "sds-floating-menu", inputs: ["testId", "itemTestIdPrefix", "groupTestIdPrefix", "items", "groups", "multiSelect", "selectedIds"], outputs: ["selectedIdsChange"] }, { kind: "component", type: SdsIconComponent, selector: "sds-icon", inputs: ["testId", "name", "variant", "size", "color", "fill", "aria-label"] }, { kind: "component", type: SdsLabelComponent, selector: "label[sds-label]", inputs: ["testId", "required", "tooltip", "tooltipText", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;position:relative;width:100%}.sds-dropdown__field{display:flex;flex-direction:column;gap:var(--space-quark);width:100%;min-width:0}.sds-dropdown__wrapper{display:flex;align-items:center;gap:var(--space-quark);height:40px;min-width:0;padding:0 var(--space-small);border:1px solid var(--color-border-default-2);border-radius:var(--radius-base);background:transparent;cursor:pointer;overflow:hidden;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.sds-dropdown__wrapper:focus-visible{outline:2px solid var(--color-border-primary-light);outline-offset:1px;border-color:var(--color-border-primary-dark)}.sds-dropdown__wrapper--hover{border-color:var(--color-border-primary-dark)}.sds-dropdown__wrapper--focus{border-color:var(--color-border-default-2);background:var(--color-bg-disabled)}.sds-dropdown__wrapper--error{border-color:var(--color-border-danger)}.sds-dropdown__wrapper--disabled{border-color:var(--color-border-disabled);pointer-events:none;cursor:not-allowed}.sds-dropdown__content{display:flex;flex:1;align-items:center;gap:var(--space-quark);min-width:0;overflow:hidden}.sds-dropdown__leading-icon{flex-shrink:0}.sds-dropdown__trigger-text{flex:1;font-size:var(--text-size-base);font-family:inherit;line-height:normal;color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sds-dropdown__trigger-text--placeholder{color:var(--color-text-placeholder)}.sds-dropdown__search{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:var(--text-size-base);font-family:inherit;line-height:normal;color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sds-dropdown__search::placeholder{color:var(--color-text-placeholder)}.sds-dropdown__chevron{flex-shrink:0}.sds-dropdown__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;color:inherit}.sds-dropdown__error{font-size:var(--text-size-tiny);line-height:normal;color:var(--color-text-danger);white-space:nowrap}.sds-dropdown__menu{position:absolute;top:calc(100% + var(--space-quark));left:0;z-index:100;min-width:100%}.sds-dropdown__menu sds-floating-menu{--sds-floating-menu-width: 100%;display:block}.sds-dropdown__empty{font-size:var(--text-size-base);color:var(--color-text-placeholder);padding:var(--space-quark) 0}:host(.sds-dropdown--disabled) .sds-dropdown__trigger-text,:host(.sds-dropdown--disabled) .sds-dropdown__search{color:var(--color-text-disabled)}:host(.sds-dropdown--disabled) .sds-dropdown__trigger-text::placeholder,:host(.sds-dropdown--disabled) .sds-dropdown__search::placeholder{color:var(--color-text-disabled)}:host(.sds-dropdown--disabled) ::ng-deep [sds-label]{color:var(--color-text-disabled)}@media(prefers-reduced-motion:reduce){.sds-dropdown__wrapper{transition:none!important}}\n"], dependencies: [{ kind: "component", type: SdsFloatingMenuComponent, selector: "sds-floating-menu", inputs: ["testId", "itemTestIdPrefix", "groupTestIdPrefix", "items", "groups", "multiSelect", "selectedIds"], outputs: ["selectedIdsChange"] }, { kind: "component", type: SdsIconComponent, selector: "sds-icon", inputs: ["testId", "name", "variant", "size", "color", "fill", "aria-label"] }, { kind: "component", type: SdsLabelComponent, selector: "label[sds-label]", inputs: ["testId", "required", "tooltip", "tooltipText", "tooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SdsDropdownComponent, decorators: [{
             type: Component,
@@ -2153,6 +2176,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             <span [class]="triggerTextClass()">{{ triggerText() }}</span>
           }
         </div>
+        @if (showClearButton()) {
+          <button
+            type="button"
+            class="sds-dropdown__clear"
+            [attr.data-testid]="testId() + '__clear'"
+            (click)="onClear($event)"
+          >
+            <sds-icon name="close" size="large" color="3" />
+          </button>
+        }
         <sds-icon
           [name]="isOpen() ? 'expand_less' : 'expand_more'"
           size="large"
@@ -2196,8 +2229,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         '[class.sds-dropdown--disabled]': 'isDisabled()',
                         '[class.sds-dropdown--grouped]': 'isGrouped()',
                         '(focusout)': 'onFocusOut($event)',
-                    }, styles: [":host{display:block;position:relative;width:100%}.sds-dropdown__field{display:flex;flex-direction:column;gap:var(--space-quark);width:100%;min-width:0}.sds-dropdown__wrapper{display:flex;align-items:center;gap:var(--space-quark);height:40px;min-width:0;padding:0 var(--space-small);border:1px solid var(--color-border-default-2);border-radius:var(--radius-base);background:transparent;cursor:pointer;overflow:hidden;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.sds-dropdown__wrapper:focus-visible{outline:2px solid var(--color-border-primary-light);outline-offset:1px;border-color:var(--color-border-primary-dark)}.sds-dropdown__wrapper--hover{border-color:var(--color-border-primary-dark)}.sds-dropdown__wrapper--focus{border-color:var(--color-border-default-2);background:var(--color-bg-disabled)}.sds-dropdown__wrapper--error{border-color:var(--color-border-danger)}.sds-dropdown__wrapper--disabled{border-color:var(--color-border-disabled);pointer-events:none;cursor:not-allowed}.sds-dropdown__content{display:flex;flex:1;align-items:center;gap:var(--space-quark);min-width:0;overflow:hidden}.sds-dropdown__leading-icon{flex-shrink:0}.sds-dropdown__trigger-text{flex:1;font-size:var(--text-size-base);font-family:inherit;line-height:normal;color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sds-dropdown__trigger-text--placeholder{color:var(--color-text-placeholder)}.sds-dropdown__search{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:var(--text-size-base);font-family:inherit;line-height:normal;color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sds-dropdown__search::placeholder{color:var(--color-text-placeholder)}.sds-dropdown__chevron{flex-shrink:0}.sds-dropdown__error{font-size:var(--text-size-tiny);line-height:normal;color:var(--color-text-danger);white-space:nowrap}.sds-dropdown__menu{position:absolute;top:calc(100% + var(--space-quark));left:0;z-index:100;min-width:100%}.sds-dropdown__menu sds-floating-menu{--sds-floating-menu-width: 100%;display:block}.sds-dropdown__empty{font-size:var(--text-size-base);color:var(--color-text-placeholder);padding:var(--space-quark) 0}:host(.sds-dropdown--disabled) .sds-dropdown__trigger-text,:host(.sds-dropdown--disabled) .sds-dropdown__search{color:var(--color-text-disabled)}:host(.sds-dropdown--disabled) .sds-dropdown__trigger-text::placeholder,:host(.sds-dropdown--disabled) .sds-dropdown__search::placeholder{color:var(--color-text-disabled)}:host(.sds-dropdown--disabled) ::ng-deep [sds-label]{color:var(--color-text-disabled)}@media(prefers-reduced-motion:reduce){.sds-dropdown__wrapper{transition:none!important}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], multiSelectionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionLabel", required: false }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+                    }, styles: [":host{display:block;position:relative;width:100%}.sds-dropdown__field{display:flex;flex-direction:column;gap:var(--space-quark);width:100%;min-width:0}.sds-dropdown__wrapper{display:flex;align-items:center;gap:var(--space-quark);height:40px;min-width:0;padding:0 var(--space-small);border:1px solid var(--color-border-default-2);border-radius:var(--radius-base);background:transparent;cursor:pointer;overflow:hidden;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.sds-dropdown__wrapper:focus-visible{outline:2px solid var(--color-border-primary-light);outline-offset:1px;border-color:var(--color-border-primary-dark)}.sds-dropdown__wrapper--hover{border-color:var(--color-border-primary-dark)}.sds-dropdown__wrapper--focus{border-color:var(--color-border-default-2);background:var(--color-bg-disabled)}.sds-dropdown__wrapper--error{border-color:var(--color-border-danger)}.sds-dropdown__wrapper--disabled{border-color:var(--color-border-disabled);pointer-events:none;cursor:not-allowed}.sds-dropdown__content{display:flex;flex:1;align-items:center;gap:var(--space-quark);min-width:0;overflow:hidden}.sds-dropdown__leading-icon{flex-shrink:0}.sds-dropdown__trigger-text{flex:1;font-size:var(--text-size-base);font-family:inherit;line-height:normal;color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sds-dropdown__trigger-text--placeholder{color:var(--color-text-placeholder)}.sds-dropdown__search{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:var(--text-size-base);font-family:inherit;line-height:normal;color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sds-dropdown__search::placeholder{color:var(--color-text-placeholder)}.sds-dropdown__chevron{flex-shrink:0}.sds-dropdown__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;color:inherit}.sds-dropdown__error{font-size:var(--text-size-tiny);line-height:normal;color:var(--color-text-danger);white-space:nowrap}.sds-dropdown__menu{position:absolute;top:calc(100% + var(--space-quark));left:0;z-index:100;min-width:100%}.sds-dropdown__menu sds-floating-menu{--sds-floating-menu-width: 100%;display:block}.sds-dropdown__empty{font-size:var(--text-size-base);color:var(--color-text-placeholder);padding:var(--space-quark) 0}:host(.sds-dropdown--disabled) .sds-dropdown__trigger-text,:host(.sds-dropdown--disabled) .sds-dropdown__search{color:var(--color-text-disabled)}:host(.sds-dropdown--disabled) .sds-dropdown__trigger-text::placeholder,:host(.sds-dropdown--disabled) .sds-dropdown__search::placeholder{color:var(--color-text-disabled)}:host(.sds-dropdown--disabled) ::ng-deep [sds-label]{color:var(--color-text-disabled)}@media(prefers-reduced-motion:reduce){.sds-dropdown__wrapper{transition:none!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], clearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButton", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], multiSelectionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionLabel", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 const DEFAULT_INVALID_FILE_MESSAGE = 'The selected file is invalid';
 /**
@@ -2677,6 +2710,23 @@ const HEADING_ACTION_ICON_SIZE = {
  */
 const INPUT_STATES = ['default', 'hover', 'focus', 'error', 'disabled'];
 const INPUT_TYPES = ['text', 'password'];
+/**
+ * Valid `inputmode` hints for the native input. Controls the on-screen
+ * keyboard shown on mobile devices; maps 1:1 to the HTML `inputmode` attribute.
+ *
+ * @example
+ * INPUT_MODES.includes('decimal') // true
+ */
+const INPUT_MODES = [
+    'none',
+    'text',
+    'decimal',
+    'numeric',
+    'tel',
+    'search',
+    'email',
+    'url',
+];
 /**
  * Styled text input field that wraps a native `<input>` with a label,
  * leading icon, clear button, and error message slot.
@@ -2718,6 +2768,8 @@ class SdsInputComponent {
     placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Native `inputmode` hint; sets the on-screen keyboard on mobile (e.g. `'decimal'`). */
+    inputMode = input(null, ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
     state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
@@ -2825,7 +2877,7 @@ class SdsInputComponent {
         this.cleared.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SdsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SdsInputComponent, isStandalone: true, selector: "sds-input", inputs: { testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, leadingIconName: { classPropertyName: "leadingIconName", publicName: "leadingIconName", isSignal: true, isRequired: false, transformFunction: null }, buttonIconName: { classPropertyName: "buttonIconName", publicName: "buttonIconName", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, inputFilter: { classPropertyName: "inputFilter", publicName: "inputFilter", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", cleared: "cleared", blurred: "blurred", buttonClick: "buttonClick" }, host: { properties: { "attr.data-testid": "testId()" }, classAttribute: "sds-input" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SdsInputComponent, isStandalone: true, selector: "sds-input", inputs: { testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, clearButton: { classPropertyName: "clearButton", publicName: "clearButton", isSignal: true, isRequired: false, transformFunction: null }, leadingIconName: { classPropertyName: "leadingIconName", publicName: "leadingIconName", isSignal: true, isRequired: false, transformFunction: null }, buttonIconName: { classPropertyName: "buttonIconName", publicName: "buttonIconName", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, inputFilter: { classPropertyName: "inputFilter", publicName: "inputFilter", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", cleared: "cleared", blurred: "blurred", buttonClick: "buttonClick" }, host: { properties: { "attr.data-testid": "testId()" }, classAttribute: "sds-input" }, ngImport: i0, template: `
     <div class="sds-input__field" [class.sds-input__field--disabled]="isDisabled()">
       @if (label()) {
         <div class="sds-input__label-wrapper">
@@ -2852,6 +2904,7 @@ class SdsInputComponent {
           <input
             class="sds-input__native"
             [type]="nativeInputType()"
+            [attr.inputmode]="inputMode()"
             [placeholder]="placeholder() ?? ''"
             [value]="value()"
             [disabled]="isDisabled()"
@@ -2909,6 +2962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
           <input
             class="sds-input__native"
             [type]="nativeInputType()"
+            [attr.inputmode]="inputMode()"
             [placeholder]="placeholder() ?? ''"
             [value]="value()"
             [disabled]="isDisabled()"
@@ -2939,7 +2993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         'class': 'sds-input',
                         '[attr.data-testid]': 'testId()',
                     }, styles: [":host{display:block;width:100%}.sds-input__field{display:flex;flex-direction:column;gap:var(--space-none);width:100%}.sds-input__field--disabled .sds-label{color:var(--color-text-disabled)}.sds-input__wrapper{display:flex;align-items:center;gap:var(--space-quark);height:40px;padding:0 var(--space-small);border:1px solid var(--color-border-default-2);border-radius:var(--radius-base);background:var(--color-bg-1);overflow:hidden;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.sds-input__wrapper--hover{border-color:var(--color-border-primary-dark)}.sds-input__wrapper:focus-within:not(.sds-input__wrapper--error){border-color:var(--color-border-primary-light);outline:none}.sds-input__wrapper--focus{border-color:var(--color-border-primary-light)}.sds-input__wrapper--error{border-color:var(--color-border-danger)}.sds-input__wrapper--error:focus-within{border-color:var(--color-border-danger)}.sds-input__wrapper--disabled{border-color:var(--color-border-disabled);pointer-events:none;cursor:not-allowed}.sds-input__content{display:flex;flex:1;align-items:center;gap:var(--space-quark);min-width:0}.sds-input__leading-icon{flex-shrink:0}.sds-input__native{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:var(--text-size-base);font-weight:500;font-family:inherit;line-height:normal;color:var(--color-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sds-input__native::placeholder{color:var(--color-text-placeholder)}.sds-input__native:disabled{color:var(--color-text-disabled)}.sds-input__native:disabled::placeholder{color:var(--color-text-disabled)}.sds-input__button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;color:inherit}.sds-input__button:disabled{cursor:not-allowed;pointer-events:none}.sds-input__error{font-size:var(--text-size-tiny);line-height:normal;color:var(--color-text-danger);white-space:nowrap}@media(prefers-reduced-motion:reduce){.sds-input__wrapper{transition:none!important}}\n"] }]
-        }], propDecorators: { testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], clearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButton", required: false }] }], leadingIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIconName", required: false }] }], buttonIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonIconName", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], inputFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputFilter", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
+        }], propDecorators: { testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], clearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButton", required: false }] }], leadingIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIconName", required: false }] }], buttonIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonIconName", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], inputFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputFilter", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
 
 const DEFAULT_RANGE_FORMATTER = (start, end, total) => total === 0 ? '0-0 of 0' : `${start}-${end} of ${total}`;
 /**