mtrl 0.8.0-next.9 → 0.9.0

package/dist/components/segmented-button/segmented-button.js

@@ -0,0 +1,195 @@
+import { pipe } from "../../core/compose/pipe.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { withEvents, withLifecycle } from "../../core/compose/features/index.js";
+import { createEmitter } from "../../core/state/emitter.js";
+import { SelectionMode, Density } from "./types.js";
+import { createBaseConfig, getContainerConfig } from "./config.js";
+import { createSegment } from "./segment.js";
+const createSegmentedButton = (config = {}) => {
+    const baseConfig = createBaseConfig(config);
+    const mode = baseConfig.mode || SelectionMode.SINGLE;
+    const emitter = createEmitter();
+    try {
+        const component = pipe(createBase, withEvents(), withElement(getContainerConfig(baseConfig)), withLifecycle())(baseConfig);
+        const segments = [];
+        if (baseConfig.segments && baseConfig.segments.length) {
+            baseConfig.segments.forEach(segmentConfig => {
+                const segment = createSegment(segmentConfig, component.element, baseConfig.prefix, baseConfig.disabled, {
+                    ripple: baseConfig.ripple,
+                    rippleConfig: baseConfig.rippleConfig
+                });
+                segments.push(segment);
+            });
+        }
+        if (mode === SelectionMode.SINGLE && !segments.some(s => s.isSelected())) {
+            const firstSelectable = segments.find(s => !s.isDisabled());
+            if (firstSelectable) {
+                firstSelectable.setSelected(true);
+            }
+        }
+        const handleSegmentClick = (event) => {
+            const segmentElement = event.currentTarget;
+            const clickedSegment = segments.find(s => s.element === segmentElement);
+            if (!clickedSegment || clickedSegment.isDisabled()) {
+                return;
+            }
+            const oldValue = getSelectedValues();
+            if (mode === SelectionMode.SINGLE) {
+                segments.forEach(segment => {
+                    segment.setSelected(segment === clickedSegment);
+                });
+            }
+            else {
+                clickedSegment.setSelected(!clickedSegment.isSelected());
+            }
+            const newValue = getSelectedValues();
+            if (oldValue.length !== newValue.length ||
+                oldValue.some(v => !newValue.includes(v)) ||
+                newValue.some(v => !oldValue.includes(v))) {
+                emitter.emit('change', {
+                    selected: getSelected(),
+                    value: newValue,
+                    oldValue
+                });
+            }
+        };
+        segments.forEach(segment => {
+            segment.element.addEventListener('click', handleSegmentClick);
+        });
+        const getSelected = () => segments.filter(segment => segment.isSelected());
+        const getSelectedValues = () => getSelected().map(segment => segment.value);
+        const findSegmentByValue = (value) => segments.find(segment => segment.value === value);
+        const updateDensity = (newDensity) => {
+            [Density.DEFAULT, Density.COMFORTABLE, Density.COMPACT].forEach(d => {
+                if (d !== Density.DEFAULT) {
+                    component.element.classList.remove(`${baseConfig.prefix}-segmented-button--${d}`);
+                }
+            });
+            if (newDensity !== Density.DEFAULT) {
+                component.element.classList.add(`${baseConfig.prefix}-segmented-button--${newDensity}`);
+            }
+            component.element.setAttribute('data-density', newDensity);
+        };
+        const segmentedButton = {
+            element: component.element,
+            segments,
+            getSelected,
+            getValue() {
+                return getSelectedValues();
+            },
+            select(value) {
+                const segment = findSegmentByValue(value);
+                if (segment && !segment.isDisabled()) {
+                    const oldValue = getSelectedValues();
+                    if (mode === SelectionMode.SINGLE) {
+                        segments.forEach(s => s.setSelected(s === segment));
+                    }
+                    else {
+                        segment.setSelected(true);
+                    }
+                    const newValue = getSelectedValues();
+                    if (oldValue.join(',') !== newValue.join(',')) {
+                        emitter.emit('change', {
+                            selected: getSelected(),
+                            value: newValue,
+                            oldValue
+                        });
+                    }
+                }
+                return this;
+            },
+            deselect(value) {
+                const segment = findSegmentByValue(value);
+                if (segment && !segment.isDisabled()) {
+                    if (mode === SelectionMode.SINGLE) {
+                        const selectedSegments = getSelected();
+                        if (selectedSegments.length > 1 || !segment.isSelected()) {
+                            const oldValue = getSelectedValues();
+                            segment.setSelected(false);
+                            const newValue = getSelectedValues();
+                            if (oldValue.join(',') !== newValue.join(',')) {
+                                emitter.emit('change', {
+                                    selected: getSelected(),
+                                    value: newValue,
+                                    oldValue
+                                });
+                            }
+                        }
+                    }
+                    else {
+                        const oldValue = getSelectedValues();
+                        segment.setSelected(false);
+                        const newValue = getSelectedValues();
+                        if (oldValue.join(',') !== newValue.join(',')) {
+                            emitter.emit('change', {
+                                selected: getSelected(),
+                                value: newValue,
+                                oldValue
+                            });
+                        }
+                    }
+                }
+                return this;
+            },
+            enable() {
+                component.element.classList.remove(`${baseConfig.prefix}-segmented-button--disabled`);
+                segments.forEach(segment => {
+                    if (!baseConfig.segments?.find(s => s.value === segment.value)?.disabled) {
+                        segment.setDisabled(false);
+                    }
+                });
+                return this;
+            },
+            disable() {
+                component.element.classList.add(`${baseConfig.prefix}-segmented-button--disabled`);
+                segments.forEach(segment => {
+                    segment.setDisabled(true);
+                });
+                return this;
+            },
+            enableSegment(value) {
+                const segment = findSegmentByValue(value);
+                if (segment) {
+                    segment.setDisabled(false);
+                }
+                return this;
+            },
+            disableSegment(value) {
+                const segment = findSegmentByValue(value);
+                if (segment) {
+                    segment.setDisabled(true);
+                }
+                return this;
+            },
+            setDensity(newDensity) {
+                updateDensity(newDensity);
+                return this;
+            },
+            getDensity() {
+                return component.element.getAttribute('data-density') || Density.DEFAULT;
+            },
+            on(event, handler) {
+                emitter.on(event, handler);
+                return this;
+            },
+            off(event, handler) {
+                emitter.off(event, handler);
+                return this;
+            },
+            destroy() {
+                segments.forEach(segment => {
+                    segment.element.removeEventListener('click', handleSegmentClick);
+                    segment.destroy();
+                });
+                emitter.clear();
+                component.lifecycle.destroy();
+            }
+        };
+        return segmentedButton;
+    }
+    catch (error) {
+        console.error('Segmented Button creation error:', error);
+        throw new Error(`Failed to create segmented button: ${error.message}`);
+    }
+};
+export default createSegmentedButton;

package/dist/components/segmented-button/types.d.ts

@@ -1,6 +1,7 @@
 /**
  * Segmented button selection mode
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export declare enum SelectionMode {
     /** Only one segment can be selected at a time */
@@ -12,6 +13,7 @@ export declare enum SelectionMode {
  * Density options for segmented button
  * Controls the overall sizing and spacing of the component.
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export declare enum Density {
     /** Default size with standard spacing */
@@ -29,22 +31,17 @@ export type SegmentedButtonEventType = 'change';
  * Event data for segmented button events
  */
 export interface SegmentedButtonEvent {
-    /** The segmented button component that triggered the event */
-    segmentedButton: SegmentedButtonComponent;
-    /** The selected segments */
+    /** The selected segments after the change */
     selected: Segment[];
-    /** Values of the selected segments */
-    values: string[];
-    /** Original DOM event if available */
-    originalEvent: Event | null;
-    /** Function to prevent default behavior */
-    preventDefault: () => void;
-    /** Whether default behavior was prevented */
-    defaultPrevented: boolean;
+    /** Values of the selected segments after the change */
+    value: string[];
+    /** Values of the selected segments before the change */
+    oldValue: string[];
 }
 /**
  * Configuration for a single segment within a segmented button
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export interface SegmentConfig {
     /**
@@ -83,6 +80,7 @@ export interface SegmentConfig {
 /**
  * Configuration interface for the Segmented Button component
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export interface SegmentedButtonConfig {
     /**
@@ -143,6 +141,7 @@ export interface SegmentedButtonConfig {
 /**
  * Interface for a segment within a segmented button
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export interface Segment {
     /** The segment's DOM element */
@@ -175,6 +174,7 @@ export interface Segment {
 /**
  * Segmented Button component interface
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export interface SegmentedButtonComponent {
     /** The component's container DOM element */

package/dist/components/segmented-button/types.js

@@ -0,0 +1,11 @@
+export var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["SINGLE"] = "single";
+    SelectionMode["MULTI"] = "multi";
+})(SelectionMode || (SelectionMode = {}));
+export var Density;
+(function (Density) {
+    Density["DEFAULT"] = "default";
+    Density["COMFORTABLE"] = "comfortable";
+    Density["COMPACT"] = "compact";
+})(Density || (Density = {}));

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

@@ -1,8 +1,8 @@
-import { SelectComponent, ApiOptions } from "./types";
+import { SelectComponent, ApiOptions, BaseComponent } from "./types.js";
 /**
  * Enhances a select component with API methods
  * @param options - API configuration options
  * @returns Higher-order function that adds API methods to component
  * @internal
  */
-export declare const withAPI: (options: ApiOptions) => (component: any) => SelectComponent;
+export declare const withAPI: (options: ApiOptions) => (component: BaseComponent) => SelectComponent;

package/dist/components/select/api.js

@@ -0,0 +1,89 @@
+export const withAPI = (options) => (component) => ({
+    ...component,
+    element: component.element,
+    textfield: component.textfield,
+    menu: component.menu,
+    getValue: options.select.getValue,
+    setValue(value) {
+        options.select.setValue(value);
+        return this;
+    },
+    clear() {
+        options.select.clear();
+        return this;
+    },
+    getText: options.select.getText,
+    getSelectedOption: options.select.getSelectedOption,
+    getOptions: options.select.getOptions,
+    setOptions(newOptions) {
+        options.select.setOptions(newOptions);
+        return this;
+    },
+    open(interactionType = "mouse") {
+        if (component.menu && typeof component.menu.open === "function") {
+            component.menu.open(undefined, interactionType);
+        }
+        else {
+            options.select.open();
+        }
+        return this;
+    },
+    close() {
+        options.select.close();
+        return this;
+    },
+    isOpen: options.select.isOpen,
+    setDensity(density) {
+        if (component.textfield?.setDensity) {
+            component.textfield.setDensity(density);
+        }
+        return this;
+    },
+    getDensity() {
+        if (component.textfield?.getDensity) {
+            return component.textfield.getDensity();
+        }
+        return "default";
+    },
+    on(event, handler) {
+        if (options.events?.on) {
+            options.events.on(event, handler);
+        }
+        else if (component.on) {
+            component.on(event, handler);
+        }
+        return this;
+    },
+    off(event, handler) {
+        if (options.events?.off) {
+            options.events.off(event, handler);
+        }
+        else if (component.off) {
+            component.off(event, handler);
+        }
+        return this;
+    },
+    enable() {
+        options.disabled.enable();
+        return this;
+    },
+    disable() {
+        options.disabled.disable();
+        return this;
+    },
+    setError(error, message) {
+        if (component.textfield?.setError) {
+            component.textfield.setError(error, message);
+        }
+        return this;
+    },
+    clearError() {
+        if (component.textfield?.setError) {
+            component.textfield.setError(false);
+        }
+        return this;
+    },
+    destroy() {
+        options.lifecycle.destroy();
+    },
+});

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

@@ -1,4 +1,4 @@
-import { SelectConfig, BaseComponent, ApiOptions } from "./types";
+import { SelectConfig, BaseComponent, ApiOptions } from "./types.js";
 /**
  * Default configuration for the Select component
  */

package/dist/components/select/config.js

@@ -0,0 +1,54 @@
+import { createComponentConfig } from "../../core/config/component.js";
+import { SELECT_DEFAULTS } from "./constants.js";
+export const defaultConfig = {
+    options: [],
+    variant: SELECT_DEFAULTS.VARIANT,
+    placement: SELECT_DEFAULTS.PLACEMENT,
+};
+export const createBaseConfig = (config = { options: [] }) => createComponentConfig(defaultConfig, config, "select");
+export const getApiConfig = (comp) => ({
+    select: {
+        getValue: comp.select?.getValue || (() => null),
+        setValue: comp.select?.setValue || (() => comp),
+        clear: comp.select?.clear || (() => comp),
+        getText: comp.select?.getText || (() => ""),
+        getSelectedOption: comp.select?.getSelectedOption || (() => null),
+        getOptions: comp.select?.getOptions || (() => []),
+        setOptions: comp.select?.setOptions || (() => comp),
+        open: comp.select?.open || (() => comp),
+        close: comp.select?.close || (() => comp),
+        isOpen: comp.select?.isOpen || (() => false),
+    },
+    events: {
+        on: comp.on || (() => comp),
+        off: comp.off || (() => comp),
+    },
+    disabled: {
+        enable: () => {
+            if (comp.textfield?.enable) {
+                comp.textfield.enable();
+            }
+            return comp;
+        },
+        disable: () => {
+            if (comp.textfield?.disable) {
+                comp.textfield.disable();
+            }
+            return comp;
+        },
+    },
+    lifecycle: {
+        destroy: () => {
+            if (comp.textfield?.destroy) {
+                comp.textfield.destroy();
+            }
+            if (comp.menu?.destroy) {
+                comp.menu.destroy();
+            }
+            if (comp.lifecycle?.destroy) {
+                comp.lifecycle.destroy();
+            }
+        },
+    },
+});
+export default defaultConfig;

package/dist/components/select/constants.js

@@ -0,0 +1,53 @@
+export const SELECT_VARIANTS = {
+    FILLED: 'filled',
+    OUTLINED: 'outlined'
+};
+export const SELECT_PLACEMENT = {
+    BOTTOM_START: 'bottom-start',
+    BOTTOM: 'bottom',
+    BOTTOM_END: 'bottom-end',
+    TOP_START: 'top-start',
+    TOP: 'top',
+    TOP_END: 'top-end'
+};
+export const SELECT_INTERACTION = {
+    MOUSE: 'mouse',
+    KEYBOARD: 'keyboard'
+};
+export const SELECT_EVENTS = {
+    CHANGE: 'change',
+    OPEN: 'open',
+    CLOSE: 'close'
+};
+export const SELECT_ICONS = {
+    DROPDOWN: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>',
+    CHECKMARK: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
+};
+export const SELECT_DEFAULTS = {
+    VARIANT: SELECT_VARIANTS.FILLED,
+    PLACEMENT: SELECT_PLACEMENT.BOTTOM_START,
+    LABEL: 'Select',
+    VALUE: '',
+    REQUIRED: false,
+    DISABLED: false,
+    SUPPORTING_TEXT: '',
+    ERROR: false
+};
+export const SELECT_CLASSES = {
+    CONTAINER: 'select',
+    TEXTFIELD: 'select__textfield',
+    DROPDOWN_ICON: 'select__dropdown-icon',
+    MENU: 'select__menu',
+    MENU_ITEM: 'select__menu-item',
+    MENU_ITEM_SELECTED: 'select__menu-item--selected',
+    MENU_ITEM_DISABLED: 'select__menu-item--disabled',
+    MENU_ITEM_CHECKMARK: 'select__menu-item-checkmark',
+    MENU_ITEM_ICON: 'select__menu-item-icon',
+    MENU_ITEM_TEXT: 'select__menu-item-text',
+    FILLED: 'select--filled',
+    OUTLINED: 'select--outlined',
+    OPEN: 'select--open',
+    DISABLED: 'select--disabled',
+    REQUIRED: 'select--required',
+    ERROR: 'select--error'
+};

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

@@ -1,13 +1,13 @@
-import { SelectConfig, BaseComponent } from "./types";
+import { SelectConfig, BaseComponent } from "./types.js";
 /**
  * Creates a textfield for the select component
  * @param config - Select configuration
  * @returns Function that enhances a component with textfield functionality
  */
-export declare const withTextfield: (config: SelectConfig) => (component: BaseComponent) => BaseComponent;
+export declare const withTextfield: (config: SelectConfig) => <C extends object>(component: C) => C & Required<Pick<BaseComponent, "element" | "textfield">>;
 /**
  * Creates a menu for the select component
  * @param config - Select configuration
  * @returns Function that enhances a component with menu functionality
  */
-export declare const withMenu: (config: SelectConfig) => (component: BaseComponent) => BaseComponent;
+export declare const withMenu: (config: SelectConfig) => <C extends BaseComponent>(component: C) => C & Pick<BaseComponent, "menu" | "select">;