@momentum-design/components 0.49.1 → 0.49.3

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -49,7 +49,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
             return nothing;
         }
         return this.shouldRenderLabel
-            ? html `<label for="${this.id}" class="mdc-label" part="label">${this.label}</label>`
+            ? html `<label for="${this.id}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label">${this.label}</label>`
             : html ` <mdc-text
           id="${DEFAULTS.HEADING_ID}"
           tagname="${MDC_TEXT_OPTIONS.TAGNAME}"

package/dist/components/list/list.component.js

@@ -13,8 +13,9 @@ import { Component } from '../../models';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { TAG_NAME as LISTITEM_TAGNAME } from '../listitem/listitem.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
-import { HEADER_ID, KEYS } from './list.constants';
+import { HEADER_ID } from './list.constants';
 import styles from './list.styles';
+import { KEYS } from '../../utils/keys';
 /**
  * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
  *

package/dist/components/list/list.constants.d.ts

@@ -1,9 +1,3 @@
 declare const TAG_NAME: "mdc-list";
-declare const KEYS: {
-    readonly ARROW_DOWN: "ArrowDown";
-    readonly ARROW_UP: "ArrowUp";
-    readonly HOME: "Home";
-    readonly END: "End";
-};
 declare const HEADER_ID = "header-id";
-export { TAG_NAME, KEYS, HEADER_ID };
+export { TAG_NAME, HEADER_ID };

package/dist/components/list/list.constants.js

@@ -1,10 +1,4 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('list');
-const KEYS = {
-    ARROW_DOWN: 'ArrowDown',
-    ARROW_UP: 'ArrowUp',
-    HOME: 'Home',
-    END: 'End',
-};
 const HEADER_ID = 'header-id';
-export { TAG_NAME, KEYS, HEADER_ID };
+export { TAG_NAME, HEADER_ID };

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

@@ -33,8 +33,9 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  * @cssproperty --mdc-listitem-primary-label-color
  *  - Allows customization of the primary label, side header and subline text slot color.
  * @cssproperty --mdc-listitem-secondary-label-color
- *  - Allows customization of the secondary and teritary label text slot color.
+ *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
+ * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.

package/dist/components/listitem/listitem.component.js

@@ -45,8 +45,9 @@ import styles from './listitem.styles';
  * @cssproperty --mdc-listitem-primary-label-color
  *  - Allows customization of the primary label, side header and subline text slot color.
  * @cssproperty --mdc-listitem-secondary-label-color
- *  - Allows customization of the secondary and teritary label text slot color.
+ *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
+ * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.

package/dist/components/listitem/listitem.styles.js

@@ -8,10 +8,11 @@ const styles = css `
     --mdc-listitem-primary-label-color: var(--mds-color-theme-text-primary-normal);
     --mdc-listitem-secondary-label-color: var(--mds-color-theme-text-secondary-normal);
     --mdc-listitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-listitem-column-gap: 0.75rem;
   }
   :host {
     background-color: var(--mdc-listitem-default-background-color);
-    column-gap: 0.75rem;
+    column-gap: var(--mdc-listitem-column-gap);
     cursor: pointer;
     display: flex;
     flex-direction: row;
@@ -51,7 +52,7 @@ const styles = css `
   }
   :host::part(leading), :host::part(trailing) {
     align-items: center;
-    column-gap: 0.75rem;
+    column-gap: var(--mdc-listitem-column-gap);
     display: flex;
   }
   :host::part(leading-text-secondary-label), :host::part(leading-text-tertiary-label) {
@@ -65,7 +66,7 @@ const styles = css `
   }
   ::slotted([slot="leading-controls"]), ::slotted([slot="trailing-controls"]) {
     align-items: center;
-    column-gap: 0.75rem;
+    column-gap: var(--mdc-listitem-column-gap);
     display: flex;
     flex-direction: row;
   }

package/dist/components/option/index.d.ts

@@ -1,4 +1,6 @@
 import '../icon';
+import '../text';
+import '../tooltip';
 import Option from './option.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/option/index.js

@@ -1,4 +1,6 @@
 import '../icon';
+import '../text';
+import '../tooltip';
 import Option from './option.component';
 import { TAG_NAME } from './option.constants';
 Option.register(TAG_NAME);

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

@@ -6,6 +6,10 @@ declare const Option_base: import("../../utils/mixins/index.types").Constructor<
  * option component, which is used as a list item in a select component.<br/>
  * We can pass an icon which will be displayed in leading position of the option label text.
  *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-tooltip
+ *
  * @tagname mdc-option
  *
  * @slot default - This is a default/unnamed slot
@@ -29,6 +33,19 @@ declare class Option extends Option_base {
      */
     ariaLabel: string | null;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClick;
+    /**
+     * Display a tooltip for long text label with an ellipse at the end.
+     * Create the tooltip programmatically after the nearest select component or the parent element.
+     * @param event - A focus or a mouse event.
+     */
+    private displayTooltipForLongText;
+    /**
+     * Removes the dynamically created tooltip for long text label on focus or mouse leave.
+     * This is triggered on focusout and mouseout events.
+     */
+    private hideTooltipOnLeave;
     /**
      * Listens to changes in the default slot and updates the label of the option accordingly.
      * This is used to set the label of the option when it is not explicitly set.

package/dist/components/option/option.component.js

@@ -11,15 +11,20 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
 import ListItem from '../listitem/listitem.component';
 import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
 import { TYPE } from '../text/text.constants';
-import { SELECTED_ICON_NAME } from './option.constants';
+import { SELECTED_ICON_NAME, TOOLTIP_ID } from './option.constants';
 import styles from './option.styles';
 /**
  * option component, which is used as a list item in a select component.<br/>
  * We can pass an icon which will be displayed in leading position of the option label text.
  *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-tooltip
+ *
  * @tagname mdc-option
  *
  * @slot default - This is a default/unnamed slot
@@ -53,6 +58,56 @@ class Option extends FormInternalsMixin(ListItem) {
         this.sideHeaderText = undefined;
         this.sublineText = undefined;
         this.dataAriaLabel = undefined;
+        this.addEventListener('focusin', this.displayTooltipForLongText);
+        this.addEventListener('mouseover', this.displayTooltipForLongText);
+        this.addEventListener('focusout', this.hideTooltipOnLeave);
+        this.addEventListener('mouseout', this.hideTooltipOnLeave);
+        this.addEventListener('click', this.handleClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('focusin', this.displayTooltipForLongText);
+        this.removeEventListener('mouseover', this.displayTooltipForLongText);
+        this.removeEventListener('focusout', this.hideTooltipOnLeave);
+        this.removeEventListener('mouseout', this.hideTooltipOnLeave);
+        this.removeEventListener('click', this.handleClick);
+    }
+    handleClick() {
+        // When the select dropdown (popover) is open,
+        // then if the tooltip is open, it has to be closed first.
+        // only then we can close the dropdown on option click/select.
+        this.hideTooltipOnLeave();
+    }
+    /**
+     * Display a tooltip for long text label with an ellipse at the end.
+     * Create the tooltip programmatically after the nearest select component or the parent element.
+     * @param event - A focus or a mouse event.
+     */
+    displayTooltipForLongText(event) {
+        var _a, _b;
+        const dimensions = (_a = event.target.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="leading-text-primary-label"]');
+        if (dimensions && dimensions.scrollWidth && dimensions.clientWidth
+            && dimensions.scrollWidth <= (dimensions === null || dimensions === void 0 ? void 0 : dimensions.clientWidth)) {
+            // it means that the option label text is fully visible and we do not need to show the tooltip.
+            return;
+        }
+        // Create tooltip for long text label which has an ellipse at the end.
+        const tooltip = document.createElement(TOOLTIP_TAG_NAME);
+        tooltip.id = TOOLTIP_ID;
+        tooltip.textContent = (_b = this.label) !== null && _b !== void 0 ? _b : '';
+        tooltip.setAttribute('triggerid', this.id);
+        tooltip.setAttribute('visible', '');
+        // Add tooltip programmatically after the nearest select component or the parent element.
+        const parent = this.closest('mdc-select') || this.parentElement;
+        parent === null || parent === void 0 ? void 0 : parent.after(tooltip);
+    }
+    /**
+     * Removes the dynamically created tooltip for long text label on focus or mouse leave.
+     * This is triggered on focusout and mouseout events.
+     */
+    hideTooltipOnLeave() {
+        const existingTooltip = document.querySelector(`#${TOOLTIP_ID}`);
+        existingTooltip === null || existingTooltip === void 0 ? void 0 : existingTooltip.remove();
     }
     /**
      * Listens to changes in the default slot and updates the label of the option accordingly.
@@ -82,18 +137,18 @@ class Option extends FormInternalsMixin(ListItem) {
         }
     }
     render() {
+        const prefixIconContent = this.prefixIcon ? html `
+      <div part="leading-icon">
+        <mdc-icon slot="leading-controls" name="${ifDefined(this.prefixIcon)}"></mdc-icon>
+      </div>
+    ` : nothing;
         const selectedIcon = this.selected ? html `
       <mdc-icon slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon>
-    ` : nothing;
-        const prefixIcon = this.prefixIcon ? html `
-      <mdc-icon slot="leading-controls" name="${ifDefined(this.prefixIcon)}"></mdc-icon>
     ` : nothing;
         return html `
-      <div part="leading">
-        ${prefixIcon}
-        <div part="leading-text">
-          ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
-        </div>
+      ${prefixIconContent}
+      <div part="leading-text">
+        ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
       </div>
       <div part="trailing">
         ${selectedIcon}

package/dist/components/option/option.constants.d.ts

@@ -1,4 +1,5 @@
 import type { IconNames } from '../icon/icon.types';
 declare const SELECTED_ICON_NAME: Extract<IconNames, 'check-bold'>;
+declare const TOOLTIP_ID = "dynamic-option-tooltip-popover";
 declare const TAG_NAME: "mdc-option";
-export { SELECTED_ICON_NAME, TAG_NAME };
+export { SELECTED_ICON_NAME, TAG_NAME, TOOLTIP_ID };

package/dist/components/option/option.constants.js

@@ -1,4 +1,5 @@
 import utils from '../../utils/tag-name';
 const SELECTED_ICON_NAME = 'check-bold';
+const TOOLTIP_ID = 'dynamic-option-tooltip-popover';
 const TAG_NAME = utils.constructTagName('option');
-export { SELECTED_ICON_NAME, TAG_NAME };
+export { SELECTED_ICON_NAME, TAG_NAME, TOOLTIP_ID };

package/dist/components/option/option.styles.js

@@ -1,10 +1,32 @@
 import { css } from 'lit';
 const styles = css `
+  :host {
+    --mdc-option-icon-width: 1rem;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
   :host::part(list-item) {
     height: 2.25rem;
   }
   :host::part(default-slot) {
     display: none; 
   }
+  :host::part(leading-icon),
+  :host::part(trailing) {
+    flex: 1;
+    max-width: var(--mdc-option-icon-width);
+  }
+  :host::part(leading-text) {
+    flex: 1;
+    /** 2x of leading and trailing icon width + 2x of column gap on both sides of the label text */
+    width: calc(100% - (2 * var(--mdc-option-icon-width)) - (2 * var(--mdc-listitem-column-gap)));
+  }
+  :host::part(leading-text-primary-label) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
 export default [styles];

package/dist/components/option/option.types.d.ts

@@ -0,0 +1,7 @@
+interface Events {
+    onClickEvent: MouseEvent;
+    onKeyDownEvent: KeyboardEvent;
+    onKeyUpEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+}
+export type { Events };

package/dist/components/option/option.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -26,6 +26,8 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
  * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
  * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
  * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
+ * @cssproperty --mdc-popover-max-width - max width of the popover
+ * @cssproperty --mdc-popover-max-height - max height of the popover
  *
  * @slot - Default slot for the popover content
  *

package/dist/components/popover/popover.component.js

@@ -42,6 +42,8 @@ import { PopoverUtils } from './popover.utils';
  * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
  * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
  * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
+ * @cssproperty --mdc-popover-max-width - max width of the popover
+ * @cssproperty --mdc-popover-max-height - max height of the popover
  *
  * @slot - Default slot for the popover content
  *

package/dist/components/popover/popover.styles.js

@@ -10,6 +10,8 @@ const styles = css `
     --mdc-popover-inverted-border-color: var(--mds-color-theme-inverted-outline-primary-normal);
     --mdc-popover-inverted-text-color: var(--mds-color-theme-inverted-text-primary-normal);
     --mdc-popover-elevation-3: var(--mds-elevation-3);
+    --mdc-popover-max-width: unset;
+    --mdc-popover-max-height: auto;
 
     display: none;
     position: absolute;
@@ -18,6 +20,7 @@ const styles = css `
     border-radius: 0.5rem;
     border: 0.0625rem solid var(--mdc-popover-border-color);
     filter: var(--mdc-popover-elevation-3);
+    width: var(--mdc-popover-max-width);
   }
 
   :host([visible]) {
@@ -48,6 +51,7 @@ const styles = css `
     overflow-y: auto;
     min-width: max-content;
     z-index: 9998;
+    max-height: var(--mdc-popover-max-height);
   }
 
   .popover-hover-bridge {

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

@@ -0,0 +1,10 @@
+import '../icon';
+import '../popover';
+import '../text';
+import Select from './select.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-select']: Select;
+    }
+}
+export default Select;

package/dist/components/select/index.js

@@ -0,0 +1,7 @@
+import '../icon';
+import '../popover';
+import '../text';
+import Select from './select.component';
+import { TAG_NAME } from './select.constants';
+Select.register(TAG_NAME);
+export default Select;

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

@@ -0,0 +1,191 @@
+import type { PropertyValues, TemplateResult } from 'lit';
+import { CSSResult } from 'lit';
+import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+declare const Select_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+/**
+ * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
+ * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * The component ensures accessibility and usability while handling various use cases,
+ * including long text truncation with tooltip support.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-popover
+ * @dependency mdc-text
+ *
+ * @tagname mdc-select
+ *
+ * @slot default - This is a default/unnamed slot for options and/or option group.
+ *
+ * @event click - (React: onClick) This event is dispatched when the select is clicked.
+ * @event change - (React: onChange) This event is dispatched when the select is changed.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
+ * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
+ */
+declare class Select extends Select_base implements AssociatedFormControl {
+    /**
+     * The placeholder text which will be shown on the text if provided.
+     */
+    placeholder?: string;
+    /**
+     * readonly attribute of the select field. If true, the select is read-only.
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * height attribute of the select field. If set,
+     * then a scroll bar will be visible when there more options than the adjusted height.
+     * @default 'auto'
+     */
+    height: string;
+    /** @internal */
+    optionsList: Array<HTMLElement>;
+    /** @internal */
+    private baseIconName;
+    /** @internal */
+    selectedValueText?: string;
+    /** @internal */
+    selectedValue: string;
+    /** @internal */
+    showPopover: boolean;
+    /** @internal */
+    activeDescendant: string;
+    /**
+     * @internal
+     * The native select element
+     */
+    inputElement: HTMLInputElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * A helper function which returns a flattened array of all valid options from the assigned slot.
+     * It takes care of the edge cases where the option is either a direct child or a
+     * child of an option group.
+     */
+    private getAllValidOptions;
+    private handlePopoverOpen;
+    private handlePopoverClose;
+    /**
+     * Updates the tabindex and selected attribute of the options.
+     * If selectedOption is provided, it will be set as the selected option.
+     * Otherwise, it will set the first option as the selected option.
+     * @param selectedOption - The option which should be selected.
+     */
+    private updateTabIndexForAllOptions;
+    /**
+     * A private method which is called when an option is clicked.
+     * It is used to update the tabindex and selected attribute of the options.
+     * @param event - The event which triggered this function.
+     */
+    private handleOptionsClick;
+    /**
+     * Sets the selected value based on the provided option element.
+     * It retrieves the 'label' attribute of the option, if present,
+     * otherwise it falls back to the option's text content.
+     * @param option - The option element from which to set the selected value.
+     */
+    private setSelectedValue;
+    /**
+     * Manages the required state of the select.
+     * If the value is not set and the requiredLabel property is set,
+     * then the select is invalid.
+     */
+    private manageRequired;
+    /**
+     * @internal
+     * Resets the select to its initial state.
+     */
+    formResetCallback(): void;
+    /** @internal */
+    formStateRestoreCallback(state: string): void;
+    private dispatchChange;
+    /**
+     * Handles the keydown event on the select element.
+     * If the popover is open, then it calls `handlePopoverOnOpen` with the event.
+     * If the popover is closed, then it calls `handlePopoverOnClose` with the event.
+     * @param event - The keyboard event.
+     */
+    private handleKeydown;
+    /**
+     * Handles the keydown event on the select element when the popover is open.
+     * The options are as follows:
+     * - SPACE or ENTER: Selects the currently active option and closes the popover.
+     * - ESCAPE: Closes the popover.
+     * - HOME: Sets focus and tabindex on the first option.
+     * - END: Sets focus and tabindex on the last option.
+     * - ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options.
+     * @param event - The keyboard event.
+     */
+    private handlePopoverOnOpen;
+    /**
+     * Handles the keydown event on the select element when the popover is closed.
+     * The options are as follows:
+     * - ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.
+     * - ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.
+     * - HOME: Opens the popover and sets focus and tabindex on the first option.
+     * - END: Opens the popover and sets focus and tabindex on the last option.
+     * @param event - The keyboard event.
+     */
+    private handlePopoverOnClose;
+    /**
+     * Handles the navigation of options when the user presses
+     * ArrowUp, ArrowDown, PageUp, or PageDown keys.
+     * @param event - The keyboard event that triggered the navigation.
+     */
+    private handleOptionsNavigation;
+    /**
+     * Calculates the new index based on the pressed navigation key.
+     * Supports ArrowUp, ArrowDown, PageUp, and PageDown keys for navigating options.
+     * - ArrowDown: Moves focus to the next option, if available.
+     * - ArrowUp: Moves focus to the previous option, if available.
+     * - PageDown: Moves focus 10 options down or to the last option.
+     * - PageUp: Moves focus 10 options up or to the first option.
+     *
+     * @param key - The navigation key that was pressed.
+     * @param currentIndex - The current index of the focused option.
+     * @param optionsLength - The total number of options.
+     * @returns The new index to focus on, or -1 if no movement is possible.
+     */
+    private getNewIndexBasedOnKey;
+    private updateActivedescendant;
+    private resetActivedescendant;
+    private setFocusAndTabIndex;
+    private openPopover;
+    private closePopover;
+    /**
+     * Handles the first updated lifecycle event.
+     * If an option is selected, use that as the value.
+     * If not, use the placeholder if it exists, otherwise use the first option.
+     */
+    firstUpdated(): void;
+    /**
+     * Generates the native select element.
+     * The native select element is not rendered directly and is not visible on the UI.
+     * It's rendered only on the DOM for accessibility purposes.
+     * Instead, the overlay uses the native select element to generate the list of options.
+     * @returns A TemplateResult representing the native select element.
+     */
+    private getNativeSelect;
+    /**
+     * This method maps over all valid options and constructs their corresponding
+     * HTML `<option>` elements. The attributes such as `value`, `label`, `disabled`,
+     * and `selected` are extracted from the respective option elements.
+     * If the attribute is not present, a default value or fallback is used.
+     * The content of each `<option>` is set to the text content of the option element.
+     * @returns An array of `TemplateResult` representing the option elements.
+     */
+    private getOptionsContentFromSlot;
+    /**
+     * Generates the content for the popover associated with the select component.
+     * If the component is disabled or readonly, returns `nothing`.
+     * Otherwise, returns a `TemplateResult` that renders a popover with various configurations
+     * such as visibility, interaction, and event handlers.
+     * The popover acts as a dropdown list with options, allowing user interaction.
+     */
+    private getPopoverContent;
+    private shouldFocusSelect;
+    updated(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Select;