material 1.0.4 → 3.0.0-next.1

package/dist/components/radios/constants.js

@@ -0,0 +1,18 @@
+export const RADIO_STATES = {
+    CHECKED: 'checked',
+    UNCHECKED: 'unchecked',
+    DISABLED: 'disabled',
+    FOCUSED: 'focused'
+};
+export const RADIO_DIRECTIONS = {
+    VERTICAL: 'vertical',
+    HORIZONTAL: 'horizontal'
+};
+export const RADIO_EVENTS = {
+    CHANGE: 'change',
+    FOCUS: 'focus',
+    BLUR: 'blur'
+};
+export const RADIO_DEFAULTS = {
+    DIRECTION: RADIO_DIRECTIONS.VERTICAL
+};

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

@@ -0,0 +1,3 @@
+export { default, default as createRadios } from "./radios.js";
+export type { RadiosConfig, RadiosComponent, RadiosEvents, RadiosChangePayload, RadioOptionConfig } from "./types.js";
+export { RADIO_STATES, RADIO_DIRECTIONS, RADIO_EVENTS, RADIO_DEFAULTS } from "./constants.js";

package/dist/components/radios/index.js

@@ -0,0 +1,2 @@
+export { default, default as createRadios } from "./radios.js";
+export { RADIO_STATES, RADIO_DIRECTIONS, RADIO_EVENTS, RADIO_DEFAULTS } from "./constants.js";

package/dist/components/radios/radio.d.ts

@@ -0,0 +1,26 @@
+import { RadiosConfig, RadioOptionConfig, RadioItem } from "./types.js";
+/**
+ * Creates a feature that adds radio functionality to a component
+ * @param {RadiosConfig} config - Configuration with radio options
+ * @returns {Function} Higher-order function that adds radio to component
+ */
+/** What this feature reads off the component it is handed. */
+interface RadioHost {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    emit?: (event: string, data?: unknown) => unknown;
+}
+export declare const withRadio: (config: RadiosConfig) => <C extends RadioHost>(component: C) => C & {
+    radios: RadioItem[];
+    getValue: () => string | null;
+    setValue: (value: string | null) => C;
+    getSelected: () => RadioOptionConfig | null;
+    addOption: (option: RadioOptionConfig) => C;
+    removeOption: (value: string) => C;
+    enable: () => C;
+    isDisabled: () => boolean;
+    disable: () => C;
+    enableOption: (value: string) => C;
+    disableOption: (value: string) => C;
+};
+export default withRadio;

package/dist/components/radios/radio.js

@@ -0,0 +1,165 @@
+import { warnUnknownValue } from "../../core/utils/warn.js";
+export const withRadio = (config) => (component) => {
+    const radios = [];
+    const radiosClass = component.getClass('radios');
+    let selectedValue = config.value || '';
+    component.element.classList.add(`${radiosClass}--${config.direction || 'vertical'}`);
+    if (config.disabled) {
+        component.element.classList.add(`${radiosClass}--disabled`);
+    }
+    const createRadioItem = (option) => {
+        const radioContainer = document.createElement('div');
+        radioContainer.classList.add(`${radiosClass}__item`);
+        const input = document.createElement('input');
+        input.type = 'radio';
+        input.name = config.name;
+        input.value = option.value;
+        input.classList.add(`${radiosClass}__input`);
+        if (selectedValue === option.value) {
+            input.checked = true;
+        }
+        if (config.disabled || option.disabled) {
+            input.disabled = true;
+            radioContainer.classList.add(`${radiosClass}__item--disabled`);
+        }
+        const label = document.createElement('label');
+        label.classList.add(`${radiosClass}__label`);
+        const radioControl = document.createElement('span');
+        radioControl.classList.add(`${radiosClass}__control`);
+        const radioCircle = document.createElement('span');
+        radioCircle.classList.add(`${radiosClass}__circle`);
+        if (config.ripple !== false) {
+            const rippleContainer = document.createElement('span');
+            rippleContainer.classList.add(`${radiosClass}__ripple`);
+            radioControl.appendChild(rippleContainer);
+        }
+        radioControl.appendChild(radioCircle);
+        const textSpan = document.createElement('span');
+        textSpan.classList.add(`${radiosClass}__text`);
+        textSpan.textContent = option.label;
+        if (option.labelBefore) {
+            label.classList.add(`${radiosClass}__label--before`);
+            label.appendChild(textSpan);
+            label.appendChild(radioControl);
+        }
+        else {
+            label.appendChild(radioControl);
+            label.appendChild(textSpan);
+        }
+        const inputId = `${radiosClass}-${option.value}-${Math.random().toString(36).substring(2, 9)}`;
+        input.id = inputId;
+        label.htmlFor = inputId;
+        radioContainer.appendChild(input);
+        radioContainer.appendChild(label);
+        const handleChange = (e) => {
+            if (input.checked) {
+                selectedValue = option.value;
+                radios.forEach(radio => {
+                    if (radio.input !== input) {
+                        radio.input.checked = false;
+                    }
+                });
+                component.emit?.('change', {
+                    value: option.value || null,
+                    originalEvent: e,
+                    option
+                });
+            }
+        };
+        input.addEventListener('change', handleChange);
+        return {
+            element: radioContainer,
+            input,
+            label,
+            config: option,
+            destroy: () => {
+                input.removeEventListener('change', handleChange);
+                if (radioContainer.parentNode) {
+                    radioContainer.parentNode.removeChild(radioContainer);
+                }
+            }
+        };
+    };
+    const addOption = (option) => {
+        const radioItem = createRadioItem(option);
+        component.element.appendChild(radioItem.element);
+        radios.push(radioItem);
+        return component;
+    };
+    const removeOption = (value) => {
+        const index = radios.findIndex(radio => radio.config.value === value);
+        if (index !== -1) {
+            const radioItem = radios[index];
+            radioItem.destroy();
+            radios.splice(index, 1);
+            if (selectedValue === value) {
+                selectedValue = '';
+            }
+        }
+        return component;
+    };
+    if (config.options && Array.isArray(config.options)) {
+        config.options.forEach(option => addOption(option));
+    }
+    return {
+        ...component,
+        radios,
+        getValue: () => selectedValue || null,
+        setValue: (value) => {
+            const known = value !== null && radios.some(radio => radio.config.value === value);
+            selectedValue = known ? value : '';
+            radios.forEach(radio => {
+                radio.input.checked = known && radio.config.value === value;
+            });
+            if (!known && value !== null)
+                warnUnknownValue('radios', value);
+            return component;
+        },
+        getSelected: () => {
+            const selected = radios.find(radio => radio.config.value === selectedValue);
+            return selected ? selected.config : null;
+        },
+        addOption,
+        removeOption,
+        enable: () => {
+            component.element.classList.remove(`${radiosClass}--disabled`);
+            radios.forEach(radio => {
+                radio.input.disabled = radio.config.disabled || false;
+                if (!radio.config.disabled) {
+                    radio.element.classList.remove(`${radiosClass}__item--disabled`);
+                }
+            });
+            return component;
+        },
+        isDisabled: () => component.element.classList.contains(`${radiosClass}--disabled`),
+        disable: () => {
+            component.element.classList.add(`${radiosClass}--disabled`);
+            radios.forEach(radio => {
+                radio.input.disabled = true;
+                radio.element.classList.add(`${radiosClass}__item--disabled`);
+            });
+            return component;
+        },
+        enableOption: (value) => {
+            const radio = radios.find(r => r.config.value === value);
+            if (radio) {
+                radio.config.disabled = false;
+                radio.input.disabled = component.element.classList.contains(`${radiosClass}--disabled`);
+                if (!radio.input.disabled) {
+                    radio.element.classList.remove(`${radiosClass}__item--disabled`);
+                }
+            }
+            return component;
+        },
+        disableOption: (value) => {
+            const radio = radios.find(r => r.config.value === value);
+            if (radio) {
+                radio.config.disabled = true;
+                radio.input.disabled = true;
+                radio.element.classList.add(`${radiosClass}__item--disabled`);
+            }
+            return component;
+        }
+    };
+};
+export default withRadio;

package/dist/components/radios/radios.d.ts

@@ -0,0 +1,8 @@
+import { RadiosConfig, RadiosComponent } from "./types.js";
+/**
+ * Creates a new Radios component
+ * @param {RadiosConfig} config - Radios configuration object
+ * @returns {RadiosComponent} Radios component instance
+ */
+declare const createRadios: (config: RadiosConfig) => RadiosComponent;
+export default createRadios;

package/dist/components/radios/radios.js

@@ -0,0 +1,21 @@
+import { pipe } from "../../core/compose/index.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { withEvents, withDisabled, withLifecycle, } from "../../core/compose/features/index.js";
+import { withRadio } from "./radio.js";
+import { withAPI } from "./api.js";
+import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
+const createRadios = (config) => {
+    if (!config.name) {
+        config.name = `radios-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    const baseConfig = createBaseConfig(config);
+    try {
+        const radios = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withRadio(baseConfig), withDisabled(baseConfig), withLifecycle(), (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        return radios;
+    }
+    catch (error) {
+        console.error("Radios creation error:", error);
+        throw new Error(`Failed to create radios component: ${error.message}`);
+    }
+};
+export default createRadios;

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

@@ -0,0 +1,195 @@
+/**
+ * Configuration for a radio option in the Radios component
+ * @category Components
+ */
+export interface RadioOptionConfig {
+    /**
+     * Radio input value attribute
+     * @example 'option1'
+     */
+    value: string;
+    /**
+     * Radio label text content
+     * @example 'Option 1'
+     */
+    label: string;
+    /**
+     * Whether the radio is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to position the label before the radio
+     * @default false
+     */
+    labelBefore?: boolean;
+}
+/**
+ * Configuration interface for the Radios component
+ * @category Components
+ */
+export interface RadiosConfig {
+    /**
+     * Radio input name attribute used for grouping radios
+     * @example 'options'
+     */
+    name: string;
+    /**
+     * Array of radio option configurations
+     */
+    options?: RadioOptionConfig[];
+    /**
+     * Initial selected value
+     */
+    value?: string;
+    /**
+     * Layout direction for radio buttons
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Whether the entire group is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to enable ripple effect
+     * @default true
+     */
+    ripple?: boolean;
+    /**
+     * Additional CSS classes to add to the radios component
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+}
+/**
+ * Interface for a single radio in the Radios component
+ * @category Components
+ */
+export interface RadioItem {
+    /** The radio container element */
+    element: HTMLElement;
+    /** The actual radio input element */
+    input: HTMLInputElement;
+    /** The label element */
+    label: HTMLLabelElement;
+    /** The radio option configuration */
+    config: RadioOptionConfig;
+    /** Destroys the radio and removes event listeners */
+    destroy: () => void;
+}
+/** Selection or unknown-value clearing reported by the radio group. */
+export interface RadiosChangePayload {
+    /** Selected value, or null when nothing is selected: the value `getValue()` reads. */
+    value: string | null;
+    /** Native input change event; undefined for programmatic clearing. */
+    originalEvent: Event | undefined;
+    /** Selected option, or null when an unknown value clears selection. */
+    option: RadioOptionConfig | null;
+}
+/** Group emitter events. Native input focus, blur and click are not forwarded. */
+export interface RadiosEvents {
+    change: (payload: RadiosChangePayload) => void;
+}
+/**
+ * Radios component interface
+ * @category Components
+ */
+export interface RadiosComponent {
+    /** The radios container DOM element */
+    element: HTMLElement;
+    /** Array of radio items in the group */
+    radios: RadioItem[];
+    /** API for managing component lifecycle */
+    lifecycle: {
+        /** Destroys the component and cleans up resources */
+        destroy: () => void;
+    };
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Gets the selected value
+     * @returns Selected radio value, or null if none is selected
+     */
+    getValue: () => string | null;
+    /**
+     * Sets the radios component value (selects a radio). `null`, what
+     * `getValue()` returns when nothing is selected, clears the selection.
+     * Silent either way: a programmatic change emits no `change`.
+     * @param value - Value to select, or null to clear
+     * @returns The radios component for chaining
+     */
+    setValue: (value: string | null) => RadiosComponent;
+    /**
+     * Gets the selected radio option's configuration
+     * @returns The selected radio option config or null
+     */
+    getSelected: () => RadioOptionConfig | null;
+    /**
+     * Adds a radio option to the radios component
+     * @param option - Radio option configuration
+     * @returns The radios component for chaining
+     */
+    addOption: (option: RadioOptionConfig) => RadiosComponent;
+    /**
+     * Removes a radio option from the radios component
+     * @param value - Value of the radio to remove
+     * @returns The radios component for chaining
+     */
+    removeOption: (value: string) => RadiosComponent;
+    /**
+     * Enables the radios component
+     * @returns The radios component for chaining
+     */
+    enable: () => RadiosComponent;
+    /**
+     * Disables the radios component
+     * @returns The radios component for chaining
+     */
+    disable: () => RadiosComponent;
+    /** Whether the whole group is disabled (FLO-384) */
+    isDisabled: () => boolean;
+    /**
+     * Enables a specific radio option
+     * @param value - Value of the radio to enable
+     * @returns The radios component for chaining
+     */
+    enableOption: (value: string) => RadiosComponent;
+    /**
+     * Disables a specific radio option
+     * @param value - Value of the radio to disable
+     * @returns The radios component for chaining
+     */
+    disableOption: (value: string) => RadiosComponent;
+    /**
+     * Destroys the radios component and all radio items
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the radios component
+     * @param event - Event name ('change')
+     * @param handler - Receives value, the selected option or null, and the original event if present
+     * @returns The radios component for chaining
+     */
+    on: <K extends keyof RadiosEvents>(event: K, handler: RadiosEvents[K]) => RadiosComponent;
+    /**
+     * Removes an event listener from the radios component
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The radios component for chaining
+     */
+    off: <K extends keyof RadiosEvents>(event: K, handler: RadiosEvents[K]) => RadiosComponent;
+}

package/dist/components/radios/types.js

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

package/dist/components/search/api.d.ts

@@ -0,0 +1,63 @@
+import { SearchComponent, SearchState, SearchViewMode, SearchVariant, SearchSuggestion, SearchTrailingItem } from "./types.js";
+import type { EventCallback } from "../../core/state/emitter.js";
+/**
+ * API options interface - structured by feature area
+ */
+interface ApiOptions {
+    value: {
+        setValue: (value: string, triggerEvent?: boolean) => void;
+        getValue: () => string;
+        setPlaceholder: (text: string) => void;
+        getPlaceholder: () => string;
+        clear: (triggerEvent?: boolean) => void;
+        submit: () => void;
+        focus: () => void;
+        blur: () => void;
+    };
+    state: {
+        expand: () => void;
+        collapse: () => void;
+        getState: () => SearchState;
+        isExpanded: () => boolean;
+        setViewMode: (mode: SearchViewMode) => void;
+        getViewMode: () => SearchViewMode;
+        setVariant: (variant: SearchVariant) => void;
+        getVariant: () => SearchVariant;
+    };
+    disabled: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
+    };
+    content: {
+        setLeadingIcon: (html: string) => void;
+        setTrailingItems: (items: SearchTrailingItem[]) => void;
+        addTrailingItem: (item: SearchTrailingItem) => void;
+        removeTrailingItem: (id: string) => void;
+    };
+    suggestions: {
+        set: (suggestions: SearchSuggestion[] | string[]) => void;
+        get: () => SearchSuggestion[];
+        clear: () => void;
+        render: () => void;
+    };
+    events: {
+        on: (event: string, handler: EventCallback) => void;
+        off: (event: string, handler: EventCallback) => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Enhances a search component with a streamlined public API
+ * Aligned with Material Design 3 specifications
+ *
+ * @param options API configuration options
+ * @returns Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Search component
+ */
+export declare const withAPI: (options: ApiOptions) => (component: {
+    element: HTMLElement;
+}) => SearchComponent;
+export {};

package/dist/components/search/api.js

@@ -0,0 +1,118 @@
+export const withAPI = (options) => (component) => {
+    const searchComponent = {
+        element: component.element,
+        setValue(value, triggerEvent = false) {
+            options.value.setValue(value, triggerEvent);
+            return this;
+        },
+        getValue() {
+            return options.value.getValue();
+        },
+        setPlaceholder(text) {
+            options.value.setPlaceholder(text);
+            return this;
+        },
+        getPlaceholder() {
+            return options.value.getPlaceholder();
+        },
+        expand() {
+            options.state.expand();
+            return this;
+        },
+        collapse() {
+            options.state.collapse();
+            return this;
+        },
+        getState() {
+            return options.state.getState();
+        },
+        isExpanded() {
+            return options.state.isExpanded();
+        },
+        setViewMode(mode) {
+            options.state.setViewMode(mode);
+            return this;
+        },
+        getViewMode() {
+            return options.state.getViewMode();
+        },
+        setVariant(variant) {
+            options.state.setVariant(variant);
+            return this;
+        },
+        getVariant() {
+            return options.state.getVariant();
+        },
+        focus() {
+            options.value.focus();
+            return this;
+        },
+        blur() {
+            options.value.blur();
+            return this;
+        },
+        clear() {
+            options.value.clear(false);
+            return this;
+        },
+        submit() {
+            options.value.submit();
+            return this;
+        },
+        setLeadingIcon(iconHtml) {
+            options.content.setLeadingIcon(iconHtml);
+            return this;
+        },
+        addTrailingItem(item) {
+            options.content.addTrailingItem(item);
+            return this;
+        },
+        removeTrailingItem(id) {
+            options.content.removeTrailingItem(id);
+            return this;
+        },
+        setTrailingItems(items) {
+            options.content.setTrailingItems(items);
+            return this;
+        },
+        setSuggestions(suggestions) {
+            options.suggestions.set(suggestions);
+            options.suggestions.render();
+            return this;
+        },
+        getSuggestions() {
+            return options.suggestions.get();
+        },
+        clearSuggestions() {
+            options.suggestions.clear();
+            options.suggestions.render();
+            return this;
+        },
+        enable() {
+            options.disabled.enable();
+            return this;
+        },
+        disable() {
+            options.disabled.disable();
+            return this;
+        },
+        isDisabled() {
+            return options.disabled.isDisabled();
+        },
+        on(event, handler) {
+            options.events.on(event, handler);
+            return this;
+        },
+        off(event, handler) {
+            options.events.off(event, handler);
+            return this;
+        },
+        destroy() {
+            options.state.collapse();
+            if (options.lifecycle?.destroy) {
+                options.lifecycle.destroy();
+            }
+        },
+    };
+    return searchComponent;
+};