dap-design-system 0.62.3 → 0.63.0

package/dist/components/select/select.component.d.ts

@@ -7,6 +7,7 @@ import { default as DapDSIconButton } from '../icon-button/icon-button.component
 import { default as ArrowsArrowDownSLine } from '../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component';
 import { default as SystemLoadingSpinner } from '../icons/system/system-loading-spinner/system-loading-spinner.component';
 import { default as DapDSOptionItem } from '../option-item/option-item.component';
+import { DapDSOptionData, DapDSOptionRenderer } from '../option-list/option-data';
 import { default as DapDSOptionList } from '../option-list/option-list.component';
 import { default as DapDSPopup } from '../popup/popup.component';
 import { default as DapDSTooltip } from '../tooltip/tooltip.component';
@@ -62,6 +63,11 @@ import { default as DapDSTypography } from '../typography/typography.component';
  * @csspart mobile-body - The mobile body of the select.
  * @csspart mobile-header - The mobile header of the select.
  * @csspart mobile-footer - The mobile footer of the select.
+ * @csspart native-button - The button of the customizable native select (experimental `customizable` mode).
+ * @csspart native-option - The options of the customizable native select (experimental `customizable` mode).
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  *
  * @cssproperty --dds-select-min-height - Minimum height of the select component (default: var(--dds-spacing-1000))
  * @cssproperty --dds-select-padding - Padding of the select component (default: var(--dds-spacing-300))
@@ -88,6 +94,7 @@ import { default as DapDSTypography } from '../typography/typography.component';
  * @cssproperty --dds-select-lg-icon-color - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle))
  * @cssproperty --dds-select-popup-bg-color - Background color of the popup (default: var(--dds-background-neutral-subtle))
  * @cssproperty --dds-select-icon-opened-transform - Transform of the icon when the select is opened (default: rotate(90deg))
+ * @cssproperty --dds-select-picker-max-height - Max height of the customizable select picker (default: 20rem)
  *
  * @slot - The option list of the select.
  * @slot indicator-icon - The indicator icon of the select.
@@ -129,6 +136,13 @@ export default class DapDSSelect extends GenericFormElement {
     isMobile?: boolean;
     /** Whether to render a native HTML select element for mobile-friendly option selection. */
     native?: boolean;
+    /**
+     * Experimental: render a native `<select>` that opts into the customizable select
+     * (`appearance: base-select`) in supporting browsers, so the dropdown picker is styled
+     * like the design system while keeping native keyboard, typeahead and top-layer behavior.
+     * Browsers without support fall back to the classic native select (same as `native`).
+     */
+    customizable?: boolean;
     /** The loading state of the select. */
     loading?: boolean;
     /** The max heigth of the select dropdown. */
@@ -141,14 +155,40 @@ export default class DapDSSelect extends GenericFormElement {
     floatingStrategy: FloatingStrategy;
     /** Whether to keep popup open when trigger leaves viewport. */
     disableViewportAutoClose: boolean;
+    /**
+     * The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute.
+     * @type {DapDSOptionData[]}
+     */
+    get items(): DapDSOptionData[] | undefined;
+    set items(value: DapDSOptionData[] | string | undefined);
+    private _items?;
+    /**
+     * Renders the content of each option given in `items` in the dropdown list. Defaults to the item's `label`. The native and customizable modes show the label.
+     * @type {DapDSOptionRenderer}
+     */
+    renderOption?: DapDSOptionRenderer;
     /**
      * @ignore
      */
     selectedItem: any;
     static readonly styles: import('lit').CSSResult;
+    /** Feature detection result, resolved once per connection so renders stay consistent */
+    private baseSelectSupported;
     private languageChangeHandler;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** The select's options, in the order (and so with the index) the list uses. */
+    private getOptions;
+    /** The selected item for `value`, shaped like the list's option-change detail. */
+    private findSelectedItem;
+    /**
+     * Derive `selectedItem` from `value` and the options, so the trigger text
+     * and validity never depend on the list echoing the value back. An unknown
+     * value leaves it alone; the list answers that one (revert).
+     */
+    private syncSelectedItem;
+    private readonly handleSlotChange;
+    willUpdate(changedProperties: Map<string, unknown>): void;
     /**
      * Lifecycle method to handle property changes
      */
@@ -186,9 +226,16 @@ export default class DapDSSelect extends GenericFormElement {
     private readonly handleSelectedChange;
     private readonly handleOptionDeselect;
     private readonly handleNativeChange;
+    /** Clone the option item's slotted prefix/suffix content for the customizable picker */
+    private cloneSlotContent;
+    /** The option label without the text of slotted prefix/suffix content */
+    private getOptionLabel;
+    private renderBaseSelectOption;
     private renderNativeOption;
     private renderNativeOptgroup;
     private renderNativeOptions;
+    /** True when the customizable select is requested and supported by the browser */
+    private get useBaseSelect();
     private renderNativeSelect;
     renderTriggerElement(): import('lit-html').TemplateResult;
     renderOptionList(): import('lit-html').TemplateResult;