@mustib/web-components 0.0.0-alpha.0

package/components/mu-select-items.js

@@ -0,0 +1,570 @@
+import { M as MUElement, E as EventAction, _ as __decorate, g as getElementBoundaries, d as debounce, a as disableElementScroll, e as enableElementScroll } from '../mu-element-CZDI_RCY.js';
+import { property } from 'lit/decorators.js';
+import { css, html } from 'lit';
+import { MuSelectItem } from './mu-select-item.js';
+import { MuTransparent } from './mu-transparent.js';
+import { staticProperty } from '../decorators.js';
+
+class MuSelectItems extends MUElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+        this.multiple = false;
+        this.noClearActiveOnClose = false;
+        this.position = 'fixed';
+        /**
+         * Controls how the items container behaves when opened.
+         *
+         * - `'static'`: Position is calculated once when opened or closed.
+         * - `'no-scroll'`: Like static, but page scroll is disabled.
+         * - `'dynamic'`: Position is recalculated on scroll.
+         *
+         * @default 'no-scroll'
+         */
+        this.openMode = 'no-scroll';
+        this.eventActionData = {
+            eventAction: MuSelectItems.eventAction,
+            events: ['click', 'pointerover', 'pointerdown']
+        };
+        this._isReady = this.generateIsReadyPromise();
+        this._items = [];
+        this._itemsValuesMap = new Map();
+        this._itemsElementsMap = new Map();
+        this._selectedValues = new Set();
+        /**
+         * Calculates the position of the items container.
+         */
+        this._calculateSizes = () => {
+            const boundaries = getElementBoundaries(this.parentElement);
+            const yAxisPosition = boundaries.elementTop >= boundaries.elementBottom ? 'top' : 'bottom';
+            this.setAttribute('items-y-axis', yAxisPosition);
+            this.style.setProperty('--items-max-height', Math.max(boundaries.elementTop, boundaries.elementBottom) + 'px');
+            if (this.position === 'fixed') {
+                this.style.setProperty('--items-position', 'fixed');
+                this.style.setProperty('--items-width', boundaries.width + 'px');
+                if (yAxisPosition === 'top') {
+                    this.style.setProperty('--items-bottom', boundaries.elementBottom + boundaries.height + 'px');
+                    this.style.setProperty('--items-top', 'unset');
+                    this.style.setProperty('--items-transform-origin', 'bottom');
+                }
+                else {
+                    this.style.setProperty('--items-top', boundaries.elementTop + boundaries.height + 'px');
+                    this.style.setProperty('--items-bottom', 'unset');
+                    this.style.setProperty('--items-transform-origin', 'top');
+                }
+                this.style.setProperty('--items-left', boundaries.elementLeft + 'px');
+                this.style.setProperty('--items-right', boundaries.elementRight + 'px');
+            }
+            else {
+                this.style.setProperty('--items-position', 'absolute');
+                this.style.setProperty('--items-width', '100%');
+                if (yAxisPosition === 'top') {
+                    this.style.setProperty('--items-bottom', '100%');
+                    this.style.setProperty('--items-top', 'unset');
+                    this.style.setProperty('--items-transform-origin', 'bottom');
+                }
+                else {
+                    this.style.setProperty('--items-top', '100%');
+                    this.style.setProperty('--items-bottom', 'unset');
+                    this.style.setProperty('--items-transform-origin', 'top');
+                }
+                this.style.setProperty('--items-left', '0');
+                this.style.setProperty('--items-right', '0');
+            }
+        };
+        /**
+         *
+         */
+        this._slotChangeHandler = () => {
+            const previouslySelectedValues = new Set(this._selectedValues);
+            const previouslyActiveItem = this._activeItem;
+            this._items = [];
+            this._activeItem = undefined;
+            this._itemsValuesMap.clear();
+            this._itemsElementsMap.clear();
+            const newSelectedValues = new Set();
+            const addItem = (element) => {
+                const { value } = element;
+                if (this._itemsValuesMap.has(value)) {
+                    console.warn(`Item with value ${value} already exists in mu-select-items, it will be ignored`, element);
+                    return;
+                }
+                const item = {
+                    element,
+                    value,
+                    selected: false,
+                    active: false,
+                    index: this._items.length
+                };
+                this._itemsValuesMap.set(value, item);
+                this._itemsElementsMap.set(element, item);
+                this._items.push(item);
+                if (previouslySelectedValues.has(value))
+                    newSelectedValues.add(value);
+                if (previouslyActiveItem?.value === value)
+                    this._addActiveItemState(item);
+            };
+            this.renderRoot.querySelector('slot#items-slot').assignedElements({ flatten: true }).forEach((child) => {
+                if ((child instanceof MuTransparent)) {
+                    const contents = child.contents;
+                    contents.forEach((content) => {
+                        if (!(content instanceof MuSelectItem))
+                            return;
+                        addItem(content);
+                    });
+                    return;
+                }
+                if (!(child instanceof MuSelectItem))
+                    return;
+                addItem(child);
+            });
+            const removedSelected = previouslySelectedValues.difference(newSelectedValues);
+            if (removedSelected.size > 0) {
+                if (!this.isControlled) {
+                    this._selectedValues.clear();
+                    newSelectedValues.forEach(value => {
+                        this._addSelectState(this._itemsValuesMap.get(value));
+                    });
+                }
+                const eventName = 'mu-select-items-change-orphans';
+                this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true, detail: { orphanValues: Array.from(removedSelected), values: Array.from(newSelectedValues) } }));
+            }
+            if (!this._isReady.resolved)
+                this._isReady.resolve();
+        };
+        this._debounceDispatchChangeEvent = debounce(this._dispatchChangeEvent.bind(this), 50);
+    }
+    get isControlled() {
+        return this.value && this.value.length > 0;
+    }
+    get parentElement() {
+        const selector = this.getAttribute('parent-selector');
+        const element = selector ? this.closestPierce(selector) : super.parentElement;
+        return element;
+    }
+    get activeValue() {
+        return this._activeItem?.value;
+    }
+    getValue() {
+        return Array.from(this._selectedValues);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'listbox';
+        this.addEventListener('mu-transparent-slotchange', this._slotChangeHandler);
+        if (this.position === 'fixed') {
+            this._resizeObserver = new ResizeObserver(this._calculateSizes);
+        }
+    }
+    /**
+     *
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('scroll', this._calculateSizes);
+        this._resizeObserver?.disconnect();
+    }
+    unselect(values) {
+        values.forEach(value => this._changeSelectState('remove', value));
+    }
+    unselectAll() {
+        this.unselect(this.getValue());
+    }
+    unselectLatestItem() {
+        this._changeSelectState('remove', this.getValue().pop());
+    }
+    toggleActiveItemSelect() {
+        this._changeSelectState('toggle', this._activeItem);
+    }
+    /**
+     * Focuses the first navigable item in the given direction.
+     *
+     * If an active item already exists, it will be focused.
+     *
+     * Used by parent to focus the first or last navigable item when opened
+     */
+    focusFirstNavigableItem(direction) {
+        this.updateComplete.then(() => {
+            const item = this._activeItem || this._getNavigationItem({ direction, switchBack: true });
+            this._addActiveItemState(item);
+        });
+    }
+    _getNavigationItem({ direction, switchBack = false, fromIndex = direction === 'next' ? -1 : this._items.length }) {
+        return this.getNavigationItem({
+            fromIndex,
+            direction,
+            switchBack,
+            items: this._items,
+            isNavigable: (item) => !(item.element.disabled || item.element.readonly || item.element.filteredOut)
+        });
+    }
+    /**
+     * Add active state to the next or previous item from the current active item.
+     */
+    switchActiveItem(direction, options) {
+        const { switchBack = true } = options ?? {};
+        const activeIndex = this._activeItem?.index;
+        const newActiveItem = this._getNavigationItem({ direction, switchBack, fromIndex: activeIndex });
+        return this._addActiveItemState(newActiveItem);
+    }
+    _addActiveItemState(item) {
+        if (!item || item.element.disabled || item.element.readonly || item.element.filteredOut)
+            return;
+        this.clearActiveItem();
+        item.element.active = item.active = true;
+        this._activeItem = item;
+        item.element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+        this._dispatchActiveItemChange({ id: item.element.id });
+        return true;
+    }
+    clearFilteredOutItems() {
+        this._items.forEach(item => {
+            item.element.filteredOut = false;
+        });
+    }
+    filterOutItems(value) {
+        this._items.forEach(item => {
+            const isFilteredOut = !item.value.toLowerCase().includes(value.toLowerCase());
+            item.element.filteredOut = isFilteredOut;
+            if (isFilteredOut && this._activeItem === item)
+                this.clearActiveItem();
+        });
+    }
+    /**
+     * Dispatches an event with the active item id, so parent can update aria-activedescendant
+     */
+    _dispatchActiveItemChange({ id }) {
+        const eventName = 'mu-select-items-active-item-change';
+        this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true, detail: { id } }));
+    }
+    /**
+     *
+     */
+    clearActiveItem() {
+        if (this._activeItem) {
+            this._activeItem.element.active = false;
+            this._activeItem = undefined;
+            this._dispatchActiveItemChange({ id: undefined });
+        }
+    }
+    /**
+     *
+     */
+    getMuSelectItemFromEvent(e) {
+        const item = e.target instanceof HTMLElement ? e.target.closest('mu-select-item') : null;
+        if (item && !(item.disabled || item.readonly || item.filteredOut))
+            return this._itemsElementsMap.get(item);
+    }
+    /**
+     *
+     */
+    _addSelectState(item) {
+        if (!item)
+            return;
+        item.element.selected = item.selected = true;
+        this._selectedValues.add(item.value);
+    }
+    /**
+     *
+     */
+    _removeSelectState(item) {
+        if (!item)
+            return;
+        item.element.selected = item.selected = false;
+        this._selectedValues.delete(item.value);
+    }
+    /**
+     *
+     */
+    _clearSelectState() {
+        for (const value of this._selectedValues) {
+            const item = this._itemsValuesMap.get(value);
+            this._removeSelectState(item);
+        }
+    }
+    _dispatchChangeEvent(detail) {
+        const event = new CustomEvent('mu-select-items-change', {
+            detail,
+            bubbles: true,
+            composed: true,
+            cancelable: true
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Modifies the selection state of a specified item.
+     * @param type Specifies the operation to perform:
+     *
+     * `'add'` - Adds the item to the selection.
+     *
+     * `'add-only'` - Clears previous selections and adds the item.
+     *
+     * `'remove'` - Removes the item from the selection.
+     *
+     * `'toggle'` - Toggles the item's selection state.
+     *
+     * Upon completion, a 'muSelectItemsValueChange' event is dispatched.
+     */
+    _changeSelectState(type, _item) {
+        const item = typeof _item === 'string' ? this._itemsValuesMap.get(_item) : _item;
+        if (!(item) || !item.element.interactable)
+            return;
+        let operation = type;
+        if (operation === 'toggle') {
+            operation = this._selectedValues.has(item.value) ? 'remove' : 'add';
+        }
+        const { isControlled } = this;
+        switch (operation) {
+            case 'add-only':
+            case 'add':
+                if (!this.multiple || operation === 'add-only') {
+                    this._debounceDispatchChangeEvent({ values: [item.value], isCurrentSelection: !isControlled });
+                    if (!isControlled) {
+                        this._clearSelectState();
+                        this._addSelectState(item);
+                    }
+                    return;
+                }
+                this._debounceDispatchChangeEvent({ values: [...this._selectedValues, item.value], isCurrentSelection: !isControlled });
+                if (!isControlled) {
+                    this._addSelectState(item);
+                }
+                return;
+            case 'remove':
+                this._debounceDispatchChangeEvent({ values: [...this._selectedValues].filter(value => value !== item.value), isCurrentSelection: !isControlled });
+                if (!isControlled) {
+                    this._removeSelectState(item);
+                }
+                break;
+        }
+    }
+    /**
+     * This method is called when the 'value' attribute changes or the first time 'defaultValue' is set.
+     *
+     * It does not fire the 'mu-select-items-change' event but instead fires the 'mu-select-items-change-forced' event.
+     */
+    _changeSelectStateFromAttributeValue(value) {
+        if (!value)
+            return;
+        const validValues = (Array.isArray(value) ? value : value.split(',')).filter(value => {
+            if (value === '')
+                return false;
+            const isValid = this._itemsValuesMap.has(value);
+            if (!isValid)
+                console.warn(`No item found for value (${value}) in select items`, this);
+            return isValid;
+        });
+        if (validValues.length > 1 && !this.multiple) {
+            console.warn(`Trying to select ${validValues.length} items in a non-multiple select. Only the first one will be selected. If you want to allow multiple selection, please add the 'multiple' attribute to the element.`, this);
+            validValues.splice(0, validValues.length - 1);
+        }
+        const newSelectedValues = new Set(validValues);
+        const removedValues = this._selectedValues.difference(newSelectedValues);
+        removedValues.forEach(value => {
+            this._removeSelectState(this._itemsValuesMap.get(value));
+        });
+        validValues.forEach(value => {
+            const item = this._itemsValuesMap.get(value);
+            this._addSelectState(item);
+        });
+        const eventName = 'mu-select-items-change-forced';
+        this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true, detail: { values: validValues } }));
+    }
+    /**
+     * This method handles open state changes
+     */
+    _openChangeHandler() {
+        this._calculateSizes();
+        if (!this.opened && !this.noClearActiveOnClose) {
+            this.clearActiveItem();
+        }
+        switch (this.openMode) {
+            case 'static':
+                break;
+            case 'no-scroll':
+                this.opened ? disableElementScroll() : enableElementScroll();
+                break;
+            case 'dynamic':
+                this.opened ? window.addEventListener('scroll', this._calculateSizes) : window.removeEventListener('scroll', this._calculateSizes);
+                break;
+            default:
+                this.openMode;
+                break;
+        }
+        if (this._resizeObserver) {
+            this._resizeObserver[this.opened ? 'observe' : 'unobserve'](this.parentElement);
+            this._resizeObserver[this.opened ? 'observe' : 'unobserve'](document.body);
+        }
+    }
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await this._isReady.promise;
+        return result;
+    }
+    async firstUpdated(_changedProperties) {
+        await this._isReady.promise;
+        if (this.defaultValue !== undefined) {
+            if (this.value) {
+                console.warn(`Both 'value' and 'defaultValue' attributes are set. 'defaultValue' will be ignored.`, this);
+            }
+            else {
+                this._changeSelectStateFromAttributeValue(this.defaultValue);
+            }
+        }
+    }
+    async updated(changedProperties) {
+        await this.updateComplete;
+        if (changedProperties.has('multiple')) {
+            this.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+        }
+        if (changedProperties.has('disabled')) {
+            if (this.disabled) {
+                this.clearActiveItem();
+                this.ariaDisabled = 'true';
+            }
+            else {
+                this.ariaDisabled = 'false';
+            }
+        }
+        if (changedProperties.has('opened')) {
+            this._openChangeHandler();
+        }
+        if (changedProperties.has('value')) {
+            this._changeSelectStateFromAttributeValue(this.value);
+        }
+    }
+    render() {
+        return html `
+      <div id='container' part='container'>
+        <slot id='items-slot' @slotchange=${this._slotChangeHandler}></slot>
+      </div>
+    `;
+    }
+}
+MuSelectItems.styles = [MUElement.cssBase, css `
+    #container {
+      --select-items-background-color: var(--mu-select-items-background-color, var(--mu-color-800));
+      --select-items-border-color: var(--mu-select-items-border-color, var(--mu-color-500));
+      --items-margin: var(--mu-base-rem);
+      position: var(--items-position);
+      top: var(--items-top);
+      bottom: var(--items-bottom);
+      left: var(--items-left);
+      right: var(--items-right);
+      width: var(--items-width);
+      margin-block: var(--items-margin);
+      transform-origin: var(--items-transform-origin);
+      overflow: auto;
+      max-height: min(calc(var(--items-max-height, 75vh) - (var(--items-margin) * 2)), 75vh);
+      scrollbar-width: thin;
+      display: grid;
+      gap: calc(var(--mu-base-rem) * 1);
+      padding: calc(var(--mu-base-rem));
+      background-color: var(--select-items-background-color);
+      transition-duration: .2s;
+      transition-timing-function: ease-in-out;
+      transition-property: opacity scale translate;
+      border-radius: calc(var(--mu-base-rem) * 1.5);
+      border: 1px solid var(--select-items-border-color);
+    }
+
+    :host([opened][position='fixed']) #container {
+      transition-property: opacity;
+    }
+
+    :host(:not([opened])) #container {
+      visibility: hidden;
+      opacity: 0;
+      scale: 1 .25;
+      translate: 0 -10%;
+    }
+
+    @media (prefers-color-scheme: light) {
+      #container {
+        --select-items-background-color: var(--mu-select-items-background-color, var(--mu-color-100));
+        --select-items-border-color: var(--mu-select-items-border-color, var(--mu-color-300));
+      }
+    }
+  `];
+MuSelectItems.eventAction = new EventAction({
+    currTargetSelector: 'mu-select-item',
+    getEventAttributeName(eventName) {
+        return `data-items-${eventName}`;
+    },
+    switches: {
+        opened({ event }) {
+            return event.currentTarget.opened;
+        },
+        closed({ event }) {
+            return !event.currentTarget.opened;
+        }
+    },
+    actions: {
+        'toggle-select'(data) {
+            const items = data.event.currentTarget;
+            if (!items.interactable)
+                return;
+            const item = items._itemsValuesMap.get(data.actionParam);
+            items._changeSelectState('toggle', item);
+        },
+        'select'(data) {
+            const items = data.event.currentTarget;
+            if (!items.interactable)
+                return;
+            const item = items._itemsValuesMap.get(data.actionParam);
+            items._changeSelectState('add', item);
+        },
+        'unselect'(data) {
+            const items = data.event.currentTarget;
+            if (!items.interactable)
+                return;
+            const item = items._itemsValuesMap.get(data.actionParam);
+            items._changeSelectState('remove', item);
+        },
+        'set-active'(data) {
+            const items = data.event.currentTarget;
+            if (!items.interactable)
+                return;
+            const item = items._itemsValuesMap.get(data.actionParam);
+            items._addActiveItemState(item);
+        }
+    }
+});
+__decorate([
+    property({
+        reflect: true, type: Boolean,
+    })
+], MuSelectItems.prototype, "opened", void 0);
+__decorate([
+    staticProperty({
+        converter: Boolean,
+    })
+], MuSelectItems.prototype, "multiple", void 0);
+__decorate([
+    property({
+        reflect: true, type: Array,
+        converter: {
+            toAttribute(value, type) {
+                return Array.isArray(value) ? value.join(',') : value;
+            },
+            fromAttribute(value, type) {
+                return value?.split(',');
+            }
+        }
+    })
+], MuSelectItems.prototype, "value", void 0);
+__decorate([
+    staticProperty({ converter: Boolean })
+], MuSelectItems.prototype, "noClearActiveOnClose", void 0);
+__decorate([
+    staticProperty()
+], MuSelectItems.prototype, "defaultValue", void 0);
+__decorate([
+    staticProperty()
+], MuSelectItems.prototype, "position", void 0);
+__decorate([
+    staticProperty({ attribute: 'open-mode' })
+], MuSelectItems.prototype, "openMode", void 0);
+MuSelectItems.register("mu-select-items");
+
+export { MuSelectItems };

package/components/mu-select-label-content.d.ts

@@ -0,0 +1,38 @@
+import { CSSResultGroup } from 'lit';
+import { MUElement } from './mu-element.js';
+import '@mustib/utils/browser';
+
+declare const types: readonly ["label", "value", "autocomplete", "template"];
+/**
+ * Use this element to define custom markup for the label and value.
+ *
+ * To inject the selected value, add the `data-is="content"` attribute to one of its children.
+ * The textContent of the element with this attribute will be replaced with the selected value.
+ * If there is no element with this attribute, the textContent of this element itself will be replaced.
+ *
+ * You also need to set the `type` attribute to either `"label"` or `"value"` so the parent label knows which element to update.
+ */
+declare class MuSelectLabelContent extends MUElement {
+    static styles: CSSResultGroup;
+    /**
+     * Generate template markup for the template type.
+     */
+    static generateTemplate(instance: MuSelectLabelContent): any;
+    eventActionData: undefined;
+    _addEventActionAttributes: undefined;
+    type: typeof types[number];
+    active: boolean;
+    contentEl?: HTMLElement | null;
+    activeTemplateValue?: string;
+    _value: string[];
+    setValue(value: string[]): Promise<void>;
+    connectedCallback(): void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-select-label-content': MuSelectLabelContent;
+    }
+}
+
+export { MuSelectLabelContent };