@aquera/nile-elements 0.0.1-beta.2 → 0.0.1-beta.3

package/dist/src/nile-select/nile-select.d.ts

@@ -4,113 +4,209 @@
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { LitElement, CSSResultGroup } from 'lit';
-import { NileOption } from '../nile-option';
+import { TemplateResult } from 'lit-element';
+import '../nile-icon';
+import '../nile-popup/nile-popup';
+import '../nile-tag/nile-tag';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+import type { NileFormControl } from '../internal/nile-element';
+import type NileOption from '../nile-option/nile-option';
+import type NilePopup from '../nile-popup/nile-popup';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-select
+ *
+ */
 /**
  * @summary Selects allow you to choose items from a menu of predefined options.
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency nile-icon
+ * @dependency nile-popup
+ * @dependency nile-tag
+ *
+ * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
  *
  * @event nile-change - Emitted when the control's value changes.
+ * @event nile-clear - Emitted when the control's value is cleared.
+ * @event nile-input - Emitted when the control receives input.
+ * @event nile-focus - Emitted when the control gains focus.
+ * @event nile-blur - Emitted when the control loses focus.
+ * @event nile-show - Emitted when the select's menu opens.
+ * @event nile-after-show - Emitted after the select's menu opens and all animations are complete.
+ * @event nile-hide - Emitted when the select's menu closes.
+ * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete.
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The select's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
+ * @csspart listbox - The listbox container where options are slotted.
+ * @csspart tags - The container that houses option tags when `multiselect` is used.
+ * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The container that wraps the expand icon.
  */
-declare type selectOption = {
-    name: string;
-    value: string | number;
-};
-export declare class NileSelect extends LitElement {
+export declare class NileSelect extends NileElement implements NileFormControl {
     static styles: CSSResultGroup;
-    dropDownOptionsArray: selectOption[];
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private typeToSelectString;
+    private typeToSelectTimeout;
+    popup: NilePopup;
+    combobox: HTMLSlotElement;
+    displayInput: HTMLInputElement;
+    valueInput: HTMLInputElement;
+    listbox: HTMLSlotElement;
+    private hasFocus;
+    displayLabel: string;
+    currentOption: NileOption;
+    selectedOptions: NileOption[];
+    /** The name of the select, submitted as a name/value pair with form data. */
+    name: string;
     /**
      * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
      * value will be a space-delimited list of values based on the options selected.
      */
     value: string | string[];
-    /** Allows more than one option to be selected. */
-    multiple: boolean;
-    /** Allows more than one option to be selected. */
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: string | string[];
+    /** The select's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Placeholder text to show as a hint when the select is empty. */
     placeholder: string;
-    /** Allows to search on option */
+    /** Placeholder text to show as a hint when the select is empty. */
+    searchValue: string;
+    /** Allows more than one option to be selected. */
     searchEnabled: boolean;
-    /** Miximum tags to show*/
-    maxTags: number;
-    isOpen: boolean;
-    private hasFocus;
-    displayLabel: string;
-    currentOption: NileOption | undefined;
-    selectedOptions: NileOption[];
-    searchString: string;
-    showSelected: boolean;
-    private readonly hasSlotController;
-    constructor();
-    render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Connect the component and bind handleOutsideClick to the document click event.
-     */
-    connectedCallback(): void;
-    /**
-     * Disconnect the component and unbind handleOutsideClick from the document click event.
-     */
-    disconnectedCallback(): void;
+    /** Allows more than one option to be selected. */
+    multiple: boolean;
     /**
-     * Handles the click event outside the component, and closes the component if necessary.
-     * @param event - The click event.
+     * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
+     * indicate the number of additional items that are selected. Set to 0 to remove the limit.
      */
-    handleOutsideClick(event: MouseEvent): void;
+    maxOptionsVisible: number;
+    /** Disables the select control. */
+    disabled: boolean;
+    /** Adds a clear button when the select is not empty. */
+    clearable: boolean;
     /**
-     * Handles the click event on the footer.
-     * @param event - The click event.
+     * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
      */
-    handleFooterClick(event: MouseEvent): void;
-    onSearch(event: Event): void;
-    toggleOptions(): void;
-    handleSearchInputClick(event: Event): void;
-    private handleTagRemove;
-    handleOptionClick(event: MouseEvent): void;
-    private toggleOptionSelection;
+    open: boolean;
     /**
-     * Sets the selected option(s)
-     * @param option - the selected option(s)
+     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
      */
-    private setSelectedOptions;
-    /**
-     * Gets an array of all <nile-option> elements
-     * @returns an array of <nile-option> elements
-     */
-    private getAllOptions;
+    hoist: boolean;
+    /** Draws a filled select. */
+    filled: boolean;
+    /** Draws a pill-style select with rounded edges. */
+    pill: boolean;
+    /** The select's label. If you need to display HTML, use the `label` slot instead. */
+    label: string;
     /**
-     * Gets the text content of the element and trims it
-     * @returns the trimmed text content
+     * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
+     * inside of the viewport.
      */
-    getTextLabel(): string;
+    placement: 'top' | 'bottom';
+    /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
+    helpText: string;
     /**
-     * This method must be called whenever the selection changes. It will update the selected options cache, the current
-     * value, and the display value
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+     * the same document or shadow root for this to work.
      */
-    private selectionChanged;
+    form: string;
+    /** The select's required attribute. */
+    required: boolean;
+    showSelected: boolean;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    connectedCallback(): void;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleFocus;
+    private handleBlur;
+    private handleDocumentFocusIn;
     /**
-     * Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
-     * option may be "current" at a time.
-     * @param option - the target option to select
+     * Handles the click event on the footer.
+     * @param event - The click event.
      */
-    private setCurrentOption;
+    private handleFooterClick;
     /**
      * Toggles the display of selected options in the dropdown
      * @param event - the event object
      */
     private toggleShowSelected;
-    /**
-     * Handles the checkbox click event and toggles the display of selected options in the dropdown
-     * @param event - the event object
-     */
-    private handleCheckBox;
     /**
      * Deselects all options and updates the value, selectedOptions, and displayLabel properties accordingly
      */
     private unSlectAll;
+    private handleDocumentKeyDown;
+    private handleDocumentMouseDown;
+    private handleLabelClick;
+    private handleComboboxMouseDown;
+    private handleComboboxKeyDown;
+    private handleClearClick;
+    private handleClearMouseDown;
+    private handleOptionClick;
+    private handleDefaultSlotChange;
+    private handleTagRemove;
+    private getAllOptions;
+    private getFirstOption;
+    private setCurrentOption;
+    private setSelectedOptions;
+    private toggleOptionSelection;
+    private selectionChanged;
+    handleSearchFocus(): void;
+    handleSearchBlur(): void;
+    handleSearchChange(e: any): void;
+    filterOptions(searchValue: string): void;
+    private handleInvalid;
+    handleDisabledChange(): void;
     handleValueChange(): void;
-    handleOpenChange(): void;
+    handleOpenChange(): Promise<void>;
+    /** Shows the listbox. */
+    show(): Promise<void>;
+    /** Hides the listbox. */
+    hide(): Promise<void>;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    /** Sets focus on the control. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the control. */
+    blur(): void;
+    render(): TemplateResult<1>;
 }
+export default NileSelect;
 declare global {
     interface HTMLElementTagNameMap {
         'nile-select': NileSelect;
     }
 }
-export {};