@mustib/web-components 0.0.0-alpha.0

package/components/mu-select.js

@@ -0,0 +1,347 @@
+import { M as MUElement, E as EventAction, _ as __decorate } from '../mu-element-CZDI_RCY.js';
+import { css, html } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { MuSelectItems } from './mu-select-items.js';
+import { MuSelectLabel } from './mu-select-label.js';
+import { MuTransparent } from './mu-transparent.js';
+import { staticProperty } from '../decorators.js';
+import './mu-select-item.js';
+import './mu-trigger.js';
+import './mu-select-label-content.js';
+import 'lit/directives/repeat.js';
+import './mu-icon.js';
+
+class MuSelect extends MUElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+        this.noCloseAfterSelect = false;
+        this.noCloseAfterBlur = false;
+        /**
+         * for internal usage
+         *
+         * this is used to prevent closing the select when a value change is dispatched through a way that shouldn't require select to close after receiving a value change event fired by select items like pressing Backspace to remove a value in autocomplete mode
+         */
+        this._canCloseAfterChange = true;
+        this._value = [];
+        this._isReady = this.generateIsReadyPromise();
+        this.eventActionData = {
+            eventAction: MuSelect.eventAction,
+            events: ['click', 'pointerdown', 'pointerup', 'keydown', 'input']
+        };
+        this.itemsChangeHandler = (e) => {
+            e.detail.isCurrentSelection && this._valueChanged(e.detail.values);
+            if (this._labelElement?.hasAutocomplete) {
+                this._labelElement.clearAutocompleteValue();
+                this._itemsElement?.clearFilteredOutItems();
+            }
+            if (!this.noCloseAfterSelect && this._canCloseAfterChange) {
+                this.opened = false;
+                this.focus();
+            }
+            this._canCloseAfterChange = true;
+        };
+        this._slotChangeHandler = () => {
+            const assignElement = (element) => {
+                if (element instanceof MuSelectItems) {
+                    this._itemsElement = element;
+                }
+                else if (element instanceof MuSelectLabel) {
+                    this._labelElement = element;
+                }
+            };
+            this._assignedElements.forEach(element => {
+                if (element instanceof MuTransparent) {
+                    element.contents.forEach(el => assignElement(el));
+                }
+                else {
+                    assignElement(element);
+                }
+            });
+            if (this._labelElement) {
+                this._labelElement.opened = this.opened;
+                this._labelElement.disabled = this.disabled;
+                this._labelElement.setListboxId(this._itemsElement?.id);
+            }
+            if (this._itemsElement) {
+                this._itemsElement.opened = this.opened;
+                this._itemsElement.disabled = this.disabled;
+                this._valueChanged(this._itemsElement.getValue());
+                this._itemsElement.setAttribute('aria-label', this._labelElement?.legend ?? '');
+            }
+            this._isReady.resolve();
+        };
+    }
+    _addEventActionAttributes() {
+        this.setAttribute('data-select-keydown', JSON.stringify([
+            // open and switch active item on ArrowUp and ArrowDown keys
+            '#key:ArrowDown? #prevent',
+            '#key:ArrowDown? open',
+            '#key:ArrowDown? ||switch-active-item:next-true',
+            '#key:ArrowUp? #prevent',
+            '#key:ArrowUp? open',
+            '#key:ArrowUp? ||switch-active-item:prev-true',
+            // switch active template value on ArrowLeft and ArrowRight keys
+            '#key:ArrowLeft? template? no-autocomplete-value? #prevent',
+            '#key:ArrowLeft? template? no-autocomplete-value? ||switch-active-template:prev',
+            '#key:ArrowRight? template? no-autocomplete-value? #prevent',
+            '#key:ArrowRight? template? no-autocomplete-value? ||switch-active-template:next',
+            '#key:Escape? ||close',
+            // toggle active select if opened and has active item on Enter
+            '#key:Enter? opened? has-active-item? #prevent',
+            '#key:Enter? opened? has-active-item? ||toggle-active-select',
+            // close if opened and no active item on Enter
+            '#key:Enter? opened? no-active-item? #prevent',
+            '#key:Enter? opened? no-active-item? ||close',
+            // open if closed on Enter
+            '#key:Enter? closed? #prevent',
+            '#key:Enter? closed? ||open',
+            // open if closed and not autocomplete on space
+            `#key:Space? closed? no-autocomplete? #prevent`,
+            `#key:Space? closed? no-autocomplete? ||open`,
+            // close if opened and not autocomplete and not active item on space
+            `#key:Space? opened? no-autocomplete? no-active-item? #prevent`,
+            `#key:Space? opened? no-autocomplete? no-active-item? ||close`,
+            // toggle active select if opened and not autocomplete and has active item on space
+            `#key:Space? opened? no-autocomplete? has-active-item? #prevent`,
+            `#key:Space? opened? no-autocomplete? has-active-item? ||toggle-active-select`,
+            // remove last value if no autocomplete on Backspace
+            '#key:Backspace? no-autocomplete? #prevent',
+            '#key:Backspace? no-autocomplete? ||remove-last-value',
+            // remove last value if autocomplete both and not empty on Backspace
+            '#key:Backspace? autocomplete:both? not-empty? #prevent',
+            '#key:Backspace? autocomplete:both? not-empty? ||remove-last-value',
+            // remove last value if autocomplete and has active template value on Backspace
+            '#key:Backspace? autocomplete? has-active-template? #prevent',
+            '#key:Backspace? autocomplete? has-active-template? ||remove-last-value:template',
+            // remove last value if autocomplete and no active template value on Backspace
+            '#key:Backspace? autocomplete? no-autocomplete-value? #prevent',
+            '#key:Backspace? autocomplete? no-autocomplete-value? ||remove-last-value',
+        ], undefined, 0));
+    }
+    focus() {
+        this._labelElement?.focus();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('focusout', (e) => {
+            if (!this.noCloseAfterBlur)
+                this.opened = false;
+        });
+        this.addEventListener('mu-select-items-change-forced', (e) => {
+            this._valueChanged(e.detail.values);
+        });
+        this.addEventListener('mu-transparent-slotchange', this._slotChangeHandler);
+        this.addEventListener('mu-select-items-change', this.itemsChangeHandler);
+    }
+    _valueChanged(value) {
+        const valueArr = Array.isArray(value) ? value : value?.split(',') ?? [];
+        this._value = valueArr;
+        if (this._labelElement) {
+            this._labelElement.value = valueArr;
+        }
+    }
+    _handleOpenChange() {
+        this._itemsElement && (this._itemsElement.opened = this.opened);
+        this._labelElement && (this._labelElement.opened = this.opened);
+        if (this.opened) {
+            this.focus();
+            this.dispatchEvent(new CustomEvent('mu-select-opened', { bubbles: true, composed: true }));
+        }
+        else {
+            if (this._itemsElement)
+                this._itemsElement.opened = false;
+            this.dispatchEvent(new CustomEvent('mu-select-closed', { bubbles: true, composed: true }));
+        }
+    }
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await this._isReady.promise;
+        return result;
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('opened')) {
+            this._handleOpenChange();
+        }
+        if (_changedProperties.has('disabled')) {
+            this._itemsElement && (this._itemsElement.disabled = this.disabled);
+            this._labelElement && (this._labelElement.disabled = this.disabled);
+        }
+    }
+    async firstUpdated(_changedProperties) {
+        await this._isReady.promise;
+        if (this.opened)
+            this._itemsElement?.focusFirstNavigableItem('next');
+        if (!this._itemsElement || !this._labelElement) {
+            console.warn('mu-select should have mu-select-items and mu-select-label as children', this);
+        }
+    }
+    render() {
+        return html `
+      <div id='container' part='container'>
+        <slot @slotchange=${this._slotChangeHandler}></slot>
+      </div>
+    `;
+    }
+}
+MuSelect.styles = [MUElement.cssBase, css `
+    :host([opened]) #container {
+      z-index: 100;
+    }
+
+    #container {
+      position: relative;
+      min-width: fit-content;
+      max-width: 100%;
+      margin: auto;
+    }
+    `];
+MuSelect.eventAction = new EventAction({
+    getEventAttributeName(eventName) {
+        return `data-select-${eventName}`;
+    },
+    currTargetSelector: 'mu-select',
+    actions: {
+        toggle(data) {
+            const select = data.event.currentTarget;
+            if (!select.interactable)
+                return;
+            select.opened = !select.opened;
+        },
+        open(data) {
+            const select = data.event.currentTarget;
+            if (!select.interactable)
+                return;
+            select.opened = true;
+        },
+        close(data) {
+            const select = data.event.currentTarget;
+            if (!select.interactable)
+                return;
+            select.opened = false;
+        },
+        'remove-value'(data) {
+            const select = data.event.currentTarget;
+            const value = data.actionParam;
+            if (!select.interactable || typeof value !== 'string')
+                return;
+            select._canCloseAfterChange = false;
+            select._itemsElement?.unselect([value]);
+        },
+        "remove-last-value"(data) {
+            const select = data.event.currentTarget;
+            if (!select.interactable)
+                return;
+            select._canCloseAfterChange = false;
+            let type;
+            if (data.actionParam === 'template')
+                type = 'template';
+            else if (data.actionParam === 'item')
+                type = 'item';
+            else {
+                type = select._labelElement?.activeTemplateValue ? 'template' : 'item';
+            }
+            if (type === 'template') {
+                const value = select._labelElement?.activeTemplateValue;
+                value && select._itemsElement?.unselect([value]);
+            }
+            else if (type === 'item')
+                select._itemsElement?.unselectLatestItem();
+        },
+        'remove-all'(data) {
+            const select = data.event.currentTarget;
+            if (!select.interactable)
+                return;
+            select._canCloseAfterChange = false;
+            select._itemsElement?.unselectAll();
+        },
+        'switch-active-item'({ event, actionParam }) {
+            if (typeof actionParam !== 'string')
+                return;
+            const [dir, switchBack] = actionParam.split('-');
+            if (dir === 'next')
+                event.currentTarget._itemsElement?.switchActiveItem('next', { switchBack: switchBack === 'true' });
+            else if (dir === 'prev')
+                event.currentTarget._itemsElement?.switchActiveItem('prev', { switchBack: switchBack === 'true' });
+        },
+        'toggle-active-select'(data) {
+            data.event.currentTarget._itemsElement?.toggleActiveItemSelect();
+        },
+        'switch-active-template'({ event, actionParam }) {
+            if (actionParam === 'next')
+                event.currentTarget._labelElement?.switchActiveTemplate('next');
+            else if (actionParam === 'prev')
+                event.currentTarget._labelElement?.switchActiveTemplate('prev');
+        },
+        filter(data) {
+            const select = data.event.currentTarget;
+            if (!select.interactable)
+                return;
+            const hasValue = (el) => typeof el?.value === 'string';
+            const value = typeof data.actionParam === 'string' && data.actionParam ? data.actionParam : hasValue(data.matchedTarget) ? data.matchedTarget.value : '';
+            select._itemsElement?.filterOutItems(value);
+        }
+    },
+    switches: {
+        opened(data) {
+            return data.event.currentTarget.opened;
+        },
+        closed(data) {
+            return !data.event.currentTarget.opened;
+        },
+        empty(data) {
+            return data.event.currentTarget._value.length === 0;
+        },
+        'not-empty'(data) {
+            return data.event.currentTarget._value.length > 0;
+        },
+        'has-active-item'(data) {
+            return data.event.currentTarget._itemsElement?.activeValue !== undefined;
+        },
+        'no-active-item'(data) {
+            return data.event.currentTarget._itemsElement?.activeValue === undefined;
+        },
+        template(data) {
+            return data.event.currentTarget._labelElement?.hasTemplate === true;
+        },
+        'no-template'(data) {
+            return data.event.currentTarget._labelElement?.hasTemplate !== true;
+        },
+        'has-active-template'(data) {
+            return !!data.event.currentTarget._labelElement?.activeTemplateValue;
+        },
+        'no-active-template'(data) {
+            return !data.event.currentTarget._labelElement?.activeTemplateValue;
+        },
+        autocomplete(data) {
+            const select = data.event.currentTarget;
+            if (data.switchParam === 'both')
+                return select._labelElement?.hasAutocompleteBoth === true;
+            return select._labelElement?.hasAutocomplete === true;
+        },
+        'no-autocomplete'(data) {
+            return data.event.currentTarget._labelElement?.hasAutocomplete !== true;
+        },
+        'has-autocomplete-value'(data) {
+            return !!data.event.currentTarget._labelElement?.autocompleteValue;
+        },
+        'no-autocomplete-value'(data) {
+            return !data.event.currentTarget._labelElement?.autocompleteValue;
+        }
+    }
+});
+__decorate([
+    property({ reflect: true, type: Boolean })
+], MuSelect.prototype, "opened", void 0);
+__decorate([
+    staticProperty({ converter: Boolean })
+], MuSelect.prototype, "noCloseAfterSelect", void 0);
+__decorate([
+    staticProperty({ converter: Boolean })
+], MuSelect.prototype, "noCloseAfterBlur", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], MuSelect.prototype, "_assignedElements", void 0);
+MuSelect.register('mu-select');
+
+export { MuSelect };

package/components/mu-transparent.d.ts

@@ -0,0 +1,56 @@
+import { MUElement } from './mu-element.js';
+import { CSSResultGroup } from 'lit';
+import '@mustib/utils/browser';
+
+type Events = {
+    'mu-transparent-slotchange': CustomEvent<{
+        source: MuTransparent;
+    }>;
+};
+/**
+ * A base class for "transparent" wrapper components.
+ *
+ * Transparent components introduce an extra DOM node,
+ * but parent components treat them as if they were semantically invisible.
+ *
+ * Their purpose is to add behavior, context, or interaction forwarding
+ * without changing how parents interact with child elements.
+ *
+ * It can be extended to add functionalities like context menus, scroll containers, triggering events, etc.
+ *
+ * Use the `content` property to access the underlying
+ * meaningful child element, regardless of the wrapping.
+ */
+declare class MuTransparent extends MUElement {
+    static styles?: CSSResultGroup;
+    eventActionData: undefined;
+    _addEventActionAttributes: undefined;
+    /**
+     * The selector of the elements that transparent wraps so that they can be queried when needed.
+     *
+     * it defaults to `& > *` which means all child elements
+     */
+    contentSelector: string;
+    /**
+     * Returns the meaningful child elements of the transparent component.
+     *
+     * The contents are the child elements that are not part of the
+     * transparent wrapper. If `contentSelector` is not set, any child
+     * element is considered meaningful. If `contentSelector` is set,
+     * only the child elements that match the selector are considered meaningful.
+     */
+    get contents(): unknown[];
+    constructor();
+    protected _dispatchSlotChange: () => void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mu-transparent": MuTransparent;
+    }
+    interface GlobalEventHandlersEventMap extends Events {
+    }
+}
+
+export { MuTransparent };
+export type { Events };

package/components/mu-transparent.js

@@ -0,0 +1,75 @@
+import { _ as __decorate, M as MUElement } from '../mu-element-CZDI_RCY.js';
+import { property } from 'lit/decorators.js';
+import { css, html } from 'lit';
+import '../decorators.js';
+
+/**
+ * A base class for "transparent" wrapper components.
+ *
+ * Transparent components introduce an extra DOM node,
+ * but parent components treat them as if they were semantically invisible.
+ *
+ * Their purpose is to add behavior, context, or interaction forwarding
+ * without changing how parents interact with child elements.
+ *
+ * It can be extended to add functionalities like context menus, scroll containers, triggering events, etc.
+ *
+ * Use the `content` property to access the underlying
+ * meaningful child element, regardless of the wrapping.
+ */
+class MuTransparent extends MUElement {
+    /**
+     * Returns the meaningful child elements of the transparent component.
+     *
+     * The contents are the child elements that are not part of the
+     * transparent wrapper. If `contentSelector` is not set, any child
+     * element is considered meaningful. If `contentSelector` is set,
+     * only the child elements that match the selector are considered meaningful.
+     */
+    get contents() {
+        const contents = this.querySelectorAll(this.contentSelector);
+        if (!contents.length)
+            throw new Error(`No contents found for ${this.tagName}`);
+        return Array.from(contents);
+    }
+    ;
+    constructor() {
+        super();
+        this.eventActionData = undefined;
+        this._addEventActionAttributes = undefined;
+        /**
+         * The selector of the elements that transparent wraps so that they can be queried when needed.
+         *
+         * it defaults to `& > *` which means all child elements
+         */
+        this.contentSelector = '& > *';
+        this._dispatchSlotChange = () => {
+            const eventName = 'mu-transparent-slotchange';
+            const event = new CustomEvent(eventName, { bubbles: true, composed: true, detail: { source: this } });
+            this.dispatchEvent(event);
+        };
+        this.updateComplete.then(() => {
+            /**
+             * Forward slotchange events skipping the first event because the parent must handle it
+             * a way to inform the parent that the contents have changed instead of using MutationObserver
+             */
+            this.renderRoot.addEventListener('slotchange', this._dispatchSlotChange);
+        });
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+}
+MuTransparent.styles = css `
+    :host {
+      display: contents !important;
+    }
+  `;
+__decorate([
+    property({ attribute: 'content-selector' })
+], MuTransparent.prototype, "contentSelector", void 0);
+MuTransparent.register("mu-transparent");
+
+export { MuTransparent };

package/components/mu-trigger.d.ts

@@ -0,0 +1,129 @@
+import { MuTransparent } from './mu-transparent.js';
+import './mu-element.js';
+import 'lit';
+import '@mustib/utils/browser';
+
+/**
+ * `<mu-trigger>` is a helper element that listens for a specified event
+ * (e.g., `click`) and dispatches a custom event (e.g., `mu-trigger-toggle`)
+ * to a target element.
+ *
+ * This is useful when you want to listen to event and dispatch a custom event
+ * like dispatch toggle when a user clicks on a button.
+ *
+ * it abstracts away the logic of selecting the element, listening to the event, dispatching the custom event, removing the event listener when the element is disconnected, and more.
+ *
+ * you can reuse different triggers (click, keydown, hover, etc.)
+ * without hard-coding logic inside the parent element (e.g., `mu-select`).
+ */
+declare class MuTrigger<T extends Event = Event> extends MuTransparent {
+    /**
+     * The DOM event to listen for (e.g., `"click"`, `"keydown"`, `"mouseenter"`).
+     * @attr listen-to
+     * @default "click"
+     */
+    listenTo: string;
+    /**
+     * A JSON string representing the detail to pass to the custom event.
+     * @default undefined
+     */
+    detail: any;
+    /**
+     * A boolean value indicates if the event should call `stopPropagation`.
+     * @default false
+     */
+    stopPropagation: boolean;
+    /**
+     * A boolean value indicates if the event should call `stopImmediatePropagation`.
+     * @default false
+     */
+    stopImmediatePropagation: boolean;
+    /**
+     * The name of the custom event to dispatch when the trigger fires.
+     * @default "mu-trigger-toggle"
+     */
+    dispatch: string;
+    /**
+     * Whether the event is no-cancelable.
+     * @default false
+     */
+    noCancelable: boolean;
+    /**
+     * Whether the custom event should not bubble.
+     *
+     * @default false
+     */
+    noBubble: boolean;
+    /**
+     * A boolean value indicates if the listener should not be added as a capture listener.
+     * @default false
+     */
+    noCapture: boolean;
+    /**
+     * A css selector that is used to find the element that will listen for the event.
+     * which is the current target of the event.
+     *
+     * current target will be this element by default
+     *
+     * @default undefined
+     */
+    currentTargetSelector?: string;
+    /**
+     * A boolean value indicates if the event should not call `preventDefault`.
+     * @default false
+     */
+    noPreventDefault: boolean;
+    /**
+     * A CSS selector used to find the element where the event should be dispatched.
+     * If not provided, the trigger dispatches the event on itself.
+     *
+     * Example: `dispatch-to-selector="#mu-select"`
+     *
+     * @attr dispatch-to-selector
+     */
+    dispatchToSelector?: string;
+    eventActionData: undefined;
+    _addEventActionAttributes: undefined;
+    /**
+     * The current target of the event.
+     */
+    protected get _currentTarget(): Element;
+    /**
+     * A function that returns the element where the event should be dispatched.
+     * If not provided, the trigger dispatches the event on itself.
+     */
+    protected _getDispatchElement(): Element;
+    /**
+     * This function is called after the event is fired.
+     * You can return a custom object with the following properties to customize the dispatching of the event.
+     * - `shouldDispatch`: a boolean indicating whether the event should be dispatched.
+     * - `eventName`: a string indicating the name of the event to be dispatched.
+     * - `dispatchElement`: an element indicating where the event should be dispatched.
+     *
+     * If you return nothing, the event will not be dispatched.
+     *
+     * @param e The original event that was fired.
+     * @returns {Object} An object with the properties above.
+     */
+    protected _createDispatchEvent(e: T): {
+        shouldDispatch: boolean;
+        eventName: string;
+        dispatchElement: Element;
+    };
+    /**
+     *
+     */
+    protected _listener: (e: Event) => void;
+    /**
+     *
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-trigger': MuTrigger;
+    }
+}
+
+export { MuTrigger };