placer-toolkit 0.5.1

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

@@ -0,0 +1,174 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import type { PcOption } from "../option/option.js";
+import { PcIcon } from "../icon/icon.js";
+import { PcPopup } from "../popup/popup.js";
+import { PcTag } from "../tag/tag.js";
+/**
+ * @summary Selects allow you to choose items from a menu of predefined options.
+ * @status experimental
+ * @since 0.5.1
+ *
+ * @dependency pc-icon
+ * @dependency pc-popup
+ * @dependency pc-tag
+ *
+ * @slot — The listbox options. Only `<pc-option>` and `<pc-divider>` elements can be slotted here. You can use `<pc-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 suffix — Used to append a presentational icon or similar element to the combobox.
+ * @slot clear-icon — An icon to use in place of the default clear icon.
+ * @slot expand-icon — The icon to show when the select is expanded and collapsed. Rotates on open and close.
+ * @slot hint — Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
+ *
+ * @event pc-change — Emitted when the select’s value changes.
+ * @event pc-clear — Emitted when the select’s value is cleared.
+ * @event pc-input — Emitted when the select receives input.
+ * @event pc-focus — Emitted when the select gains focus.
+ * @event pc-blur — Emitted when the select loses focus.
+ * @event pc-show — Emitted when the select’s menu opens.
+ * @event pc-after-show — Emitted after the select’s menu opens and all animations are complete.
+ * @event pc-hide — Emitted when the select’s menu closes.
+ * @event pc-after-hide — Emitted after the select’s menu closes and all animations are complete.
+ * @event pc-invalid — Emitted when the select has been checked for validity and its constraints aren’t satisfied.
+ *
+ * @csspart form-control — The form control that wraps the label, input and hint text.
+ * @csspart label — The label’s wrapper.
+ * @csspart input — The select’s wrapper.
+ * @csspart hint — The hint’s wrapper.
+ * @csspart combobox — The container the wraps the prefix, suffix, combobox, clear icon and expand button.
+ * @csspart prefix — The container that wraps the prefix slot.
+ * @csspart suffix — The container that wraps the suffix 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.
+ */
+export declare class PcSelect extends LitElement {
+    static styles: CSSResultGroup;
+    /** @internal This is an internal property. */
+    static dependencies: {
+        "pc-icon": typeof PcIcon;
+        "pc-popup": typeof PcPopup;
+        "pc-tag": typeof PcTag;
+    };
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private typeToSelectString;
+    private typeToSelectTimeout;
+    private closeWatcher;
+    /** @internal This is an internal property. */
+    popup: PcPopup;
+    /** @internal This is an internal property. */
+    combobox: HTMLSlotElement;
+    /** @internal This is an internal property. */
+    displayInput: HTMLInputElement;
+    /** @internal This is an internal property. */
+    valueInput: HTMLInputElement;
+    /** @internal This is an internal property. */
+    listbox: HTMLSlotElement;
+    private hasFocus;
+    /** @internal This is an internal property. */
+    displayLabel: string;
+    /** @internal This is an internal property. */
+    currentOption: PcOption;
+    /** @internal This is an internal property. */
+    selectedOptions: PcOption[];
+    private valueHasChanged;
+    /** The name of the select, submitted as a name/value pair with form data. */
+    name: string;
+    private _value;
+    /** The default value of the select. Primarily used for resetting the select. */
+    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 more than one option to be selected. */
+    multiple: boolean;
+    /** The maximum number of selected options to show when the `multiple` attribute is true. After the maximum limit, “+number” will be shown to indicate the number of additional items that are selected. Set the value to 0 to remove the limit. */
+    maxOptionsVisible: number;
+    /** Disables the select. */
+    disabled: boolean;
+    /** Adds a clear button when the select is not empty. */
+    clearable: boolean;
+    /** 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. */
+    open: boolean;
+    /** 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. */
+    hoist: boolean;
+    /** Draws a filled select control. */
+    filled: boolean;
+    /** Draws a pill‐style select. */
+    pill: boolean;
+    /** The select’s label. If you need to display HTML, use the `label` slot instead. */
+    label: string;
+    /** The preferred placement of the select’s listbox. Note that the actual placement may vary to keep the listbox inside of the viewport. */
+    placement: "top" | "bottom";
+    /** The select’s hint. If you need to display HTML, use the `hint` slot instead. */
+    hint: string;
+    /** 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. */
+    form: string;
+    /** Indicates if the select must be filled in or not. */
+    required: boolean;
+    /** A function that customises the tags to be rendered when the `multiple` attribute is true. The first parameter is the option, the second parameter is the current tag’s index. The function should either return either a Lit `TemplateResult` or a string containing trusted HTML of the symbol to render at the specified value. */
+    getTag: (option: PcOption, index: number) => TemplateResult | string | HTMLElement;
+    get value(): string | string[];
+    /** The current value of the select, submitted as a name/value pair with form data. When the `multiple` attribute is true, the `value` attribute will be a space‐delimited list of values based on the options selected, and the `value` property will be an array. **For this reason, values must not contain spaces.** */
+    set value(value: string | string[]);
+    /** 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;
+    private handleDocumentKeyDown;
+    private handleDocumentMouseDown;
+    private handleLabelClick;
+    private handleComboboxMouseDown;
+    private handleComboboxKeyDown;
+    private handleClearClick;
+    private handleClearMouseDown;
+    private handleOptionClick;
+    handleDefaultSlotChange(): void;
+    private handleTagRemove;
+    private getAllOptions;
+    private getFirstOption;
+    private setCurrentOption;
+    private setSelectedOptions;
+    private toggleOptionSelection;
+    private selectionChanged;
+    /** @internal This is an internal property. */
+    protected get tags(): TemplateResult<1>[];
+    private handleInvalid;
+    handleDisabledChange(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    handleValueChange(): 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;
+    /** Focuses the control. */
+    focus(options?: FocusOptions): void;
+    /** Unfocuses the select (i.e. blurs it). */
+    blur(): void;
+    render(): TemplateResult<1>;
+}