@warp-ds/elements 2.3.0-next.1 → 2.3.0-next.3

package/dist/packages/combobox/combobox.stories.js

@@ -0,0 +1,117 @@
+import { spread } from '@open-wc/lit-helpers';
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
+import { prespread } from '../../.storybook/utilities.js';
+import './index.js';
+import '../textfield/index.js';
+const { events, args, argTypes } = getStorybookHelpers('w-combobox');
+const meta = {
+    title: 'Forms/Combobox',
+    component: 'w-combobox',
+    render(args) {
+        return html ` <w-combobox ${spread(prespread(args))} .options="${sampleOptions}"></w-combobox> `;
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'A combobox element for text input with selectable options.',
+            },
+        },
+        actions: {
+            handles: events,
+        },
+    },
+    args,
+    argTypes,
+};
+export default meta;
+const sampleOptions = [
+    { value: 'Apple', label: 'Apple' },
+    { value: 'Banana', label: 'Banana' },
+    { value: 'Orange', label: 'Orange' },
+    { value: 'Grape', label: 'Grape' },
+    { value: 'Strawberry', label: 'Strawberry' },
+    { value: 'Pineapple', label: 'Pineapple' },
+    { value: 'Mango', label: 'Mango' },
+];
+export const Default = {
+    args: {},
+    render: () => html ` <w-combobox label="Select a fruit" placeholder="Type to search..." .options="${sampleOptions}"></w-combobox> `,
+};
+export const WithValue = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        value: 'Apple',
+    },
+};
+export const OpenOnFocus = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        openOnFocus: true,
+    },
+};
+export const WithTextMatching = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        matchTextSegments: true,
+    },
+};
+export const Invalid = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        value: 'Invalid fruit',
+        helpText: 'Please select a valid fruit from the list',
+        invalid: true,
+    },
+};
+export const Disabled = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        value: 'Apple',
+        disabled: true,
+    },
+};
+export const Optional = {
+    args: {
+        options: sampleOptions,
+        label: 'Select a fruit',
+        placeholder: 'Type to search...',
+        optional: true,
+    },
+};
+export const DisableStaticFiltering = {
+    render: () => html `
+    <w-combobox
+      id="combobox-dynamic"
+      label="Select a fruit (dynamic)"
+      placeholder="Type to search..."
+      disable-static-filtering></w-combobox>
+    <script type="module">
+      const combobox = document.querySelector('#combobox-dynamic');
+      const sampleOptions = ${JSON.stringify(sampleOptions)};
+      combobox.options = sampleOptions;
+      combobox.value = '';
+
+      combobox.addEventListener('change', (e) => {
+        combobox.value = e.detail.value;
+        // Simulate dynamic filtering
+        const filteredOptions = sampleOptions.filter((option) => option.value.toLowerCase().includes(e.detail.value.toLowerCase()));
+        combobox.options = filteredOptions;
+      });
+
+      combobox.addEventListener('select', (e) => {
+        combobox.value = e.detail.value;
+      });
+    </script>
+  `,
+};

package/dist/packages/combobox/index.d.ts

@@ -0,0 +1,85 @@
+import { LitElement, PropertyValues } from 'lit';
+export interface ComboboxOption {
+    value: string;
+    label?: string;
+    key?: string;
+}
+/**
+ * A combobox element for text input with selectable options.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
+ */
+export declare class WarpCombobox extends LitElement {
+    /** The available options to select from */
+    options: ComboboxOption[];
+    /** Label above input */
+    label?: string;
+    /** Input placeholder */
+    placeholder?: string;
+    /** The input value */
+    value: string;
+    /** Whether the popover opens when focus is on the text field */
+    openOnFocus: boolean;
+    /** Select active option on blur */
+    selectOnBlur: boolean;
+    /** Whether the matching text segments in the options should be highlighted */
+    matchTextSegments: boolean;
+    /** Disable client-side static filtering */
+    disableStaticFiltering: boolean;
+    /** Renders the input field in an invalid state */
+    invalid: boolean;
+    /** The content to display as the help text */
+    helpText?: string;
+    /** Whether the element is disabled */
+    disabled: boolean;
+    /** Whether the element is required */
+    required: boolean;
+    /** Whether to show optional text */
+    optional: boolean;
+    /** Additional container styling */
+    containerClassName?: string;
+    /** Additional list styling */
+    listClassName?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** @internal Options list open boolean */
+    private _isOpen;
+    /** @internal The option the user has navigated to with their keyboard */
+    private _navigationOption;
+    /** @internal Available options based on user's input value */
+    private _currentOptions;
+    /** @internal Unique identifier counter for options */
+    private _optionIdCounter;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    private get _listboxId();
+    private get _id();
+    private get _helpId();
+    private get _navigationValueOrInputValue();
+    /** Generate options with unique IDs and match information */
+    private _createOptionsWithIdAndMatch;
+    /** Get ARIA text for screen readers */
+    private _getAriaText;
+    /** Get option classes */
+    private _getOptionClasses;
+    /** Handle keyboard navigation */
+    private _handleKeyDown;
+    /** Find and set active option based on keyboard navigation */
+    private _findAndSetActiveOption;
+    /** Handle option selection */
+    private _handleSelect;
+    /** Handle input change */
+    private _handleChange;
+    /** Handle input focus */
+    private _handleFocus;
+    /** Handle input blur */
+    private _handleBlur;
+    /** Handle option click */
+    private _handleOptionClick;
+    /** Handle container blur */
+    private _handleContainerBlur;
+    /** Render highlighted text match */
+    private _renderTextMatch;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+}