@mustib/web-components 0.0.0-alpha.0

package/components/mu-select-item.js

@@ -0,0 +1,124 @@
+import { M as MUElement, _ as __decorate } from '../mu-element-CZDI_RCY.js';
+import { property } from 'lit/decorators.js';
+import { css, html } from 'lit';
+import { staticProperty } from '../decorators.js';
+
+/**
+ * This element is designed to be stateless, its purpose is to provide a means of adding custom markup and attributes
+ * without the need for controlling its state externally. It should not be modified by other parties, and its state is
+ * solely controlled by its controller.
+ */
+class MuSelectItem extends MUElement {
+    constructor() {
+        super(...arguments);
+        this.eventActionData = undefined;
+        this.value = this.innerText;
+        this.selected = false;
+        this.active = false;
+        this.filteredOut = false;
+    }
+    firstUpdated(_changedProperties) {
+        if (this.selected) {
+            console.warn('selected attribute should not be set on mu-select-item, please follow the proper way to add it through the controller', this);
+        }
+        if (this.active) {
+            console.warn('active attribute should not be set on mu-select-item, please follow the proper way to add it through the controller', this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'option');
+        this.setAttribute('aria-label', this.value);
+    }
+    _addEventActionAttributes() {
+        this.setAttribute('data-items-pointerdown', `#prevent`);
+        this.setAttribute('data-items-click', `opened? toggle-select:${this.value}`);
+        this.setAttribute('data-items-pointerover', `#prevent && opened? set-active:${this.value}`);
+    }
+    updated(changed) {
+        if (changed.has('selected')) {
+            this.ariaSelected = `${!!this.selected}`;
+        }
+        if (changed.has('disabled')) {
+            this.ariaDisabled = `${!!this.disabled}`;
+        }
+    }
+    render() {
+        return html `
+      <div id='container' part='container'>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+MuSelectItem.styles = [MUElement.cssBase, css `
+    :host {
+      overflow: hidden;
+    }
+    
+    :host([filtered-out]) {
+      display: none;
+    }
+
+    :host(:focus-visible) #container {
+      ${MUElement.css.focus}
+    }
+
+    :host([active]) #container {
+      --select-items-background-color: var(--mu-color-500);
+    }
+
+    :host([selected]) #container {
+      --select-items-background-color: var(--mu-color-700);
+    }
+
+    :host([selected][active]) #container {
+      --select-items-background-color: var(--mu-color-600);
+    }
+
+    #container {
+      --select-items-background-color: var(--mu-select-items-background-color, unset);
+      cursor: pointer;
+      user-select: none;
+      padding: calc(var(--mu-base-rem) * .5) calc(var(--mu-base-rem) * 1.2);
+      border-radius: calc(var(--mu-base-rem) * 1);
+      transition: all 0.1s ease-in-out;
+      background-color: var(--select-items-background-color);
+    }
+
+    @media (prefers-color-scheme: light) {
+      :host([active]) #container {
+        --select-items-background-color: var(--mu-color-200);
+      }
+
+      :host([selected]) #container {
+        --select-items-background-color: var(--mu-color-400);
+      }
+
+      :host([selected][active]) #container {
+        --select-items-background-color: var(--mu-color-300);
+      }
+    }
+  `];
+__decorate([
+    staticProperty()
+], MuSelectItem.prototype, "value", void 0);
+__decorate([
+    property({
+        reflect: true, type: Boolean,
+    })
+], MuSelectItem.prototype, "selected", void 0);
+__decorate([
+    property({
+        reflect: true, type: Boolean,
+    })
+], MuSelectItem.prototype, "active", void 0);
+__decorate([
+    property({
+        reflect: true, type: Boolean,
+        attribute: 'filtered-out',
+    })
+], MuSelectItem.prototype, "filteredOut", void 0);
+MuSelectItem.register("mu-select-item");
+
+export { MuSelectItem };

package/components/mu-select-items.d.ts

@@ -0,0 +1,218 @@
+import { MUElement } from './mu-element.js';
+import { PropertyValues } from 'lit';
+import { MuSelectItem } from './mu-select-item.js';
+import { EventAction, GenerateData } from '@mustib/utils/browser';
+
+type SelectItem = {
+    element: MuSelectItem;
+    value: string;
+    selected: boolean;
+    active: boolean;
+    index: number;
+};
+type MuSelectItemsEvents = {
+    /**
+     * this event is dispatched whenever the user selects an item
+     */
+    "mu-select-items-change": CustomEvent<{
+        /**
+         * selected values
+         */
+        values: string[];
+        /**
+         * a boolean indicating if the dispatched values are the current selected values of the component,
+         *
+         * if the component is controlled, this will be false, and the dispatched values are the ones applied by the user.
+         *
+         * if the component is uncontrolled, this will be true, and the dispatched values are the current selected values of the component.
+         */
+        isCurrentSelection: boolean;
+    }>;
+    /**
+     * this event is dispatched whenever a slot items change and there are selected items that are no longer in the slot
+     */
+    "mu-select-items-change-orphans": CustomEvent<{
+        /**
+         * selected values that are no longer in the slot
+         */
+        orphanValues: string[];
+        /**
+         * selected values that are still in the slot
+         */
+        values: string[];
+    }>;
+    /**
+     * This event is dispatched when the selected items change without user interaction.
+     *
+     * This happens when the `value` attribute changes or the `defaultValue` attribute is set for the first time.
+     *
+     * This event is intended for internal usage, so dependent mu elements can update their values.
+     *
+     * The normal `mu-select-items-change` event is not dispatched in this case, as the controller is already aware of the change.
+     *
+     * In the default value case, the normal event should not be dispatched either, because the user didn't interact with the select, and the value is forced initially.
+     */
+    "mu-select-items-change-forced": CustomEvent<{
+        /**
+         * selected values that are forced
+         */
+        values: string[];
+    }>;
+    /**
+     * this event is dispatched whenever the active item changes
+     */
+    "mu-select-items-active-item-change": CustomEvent<{
+        id: string | undefined;
+    }>;
+};
+type SwitchActiveItemOptions = Partial<{
+    /**
+     * A `boolean` indicates if the selection should wrap around to the start/end
+     */
+    switchBack: boolean;
+}>;
+declare class MuSelectItems extends MUElement {
+    static styles: any[];
+    static eventAction: EventAction<GenerateData<MuSelectItems>>;
+    opened: boolean;
+    multiple: boolean;
+    value?: string[];
+    noClearActiveOnClose: boolean;
+    defaultValue?: string;
+    position: 'absolute' | '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'
+     */
+    openMode: 'static' | 'no-scroll' | 'dynamic';
+    eventActionData: {
+        eventAction: EventAction<GenerateData<MuSelectItems>>;
+        events: string[];
+    };
+    _addEventActionAttributes: undefined;
+    get isControlled(): boolean | undefined;
+    get parentElement(): any;
+    protected _resizeObserver?: ResizeObserver;
+    protected _isReady: Readonly<{
+        status: "success" | "fail" | "pending";
+        resolved: boolean;
+        promise: Promise<boolean>;
+        resolve: () => void;
+    }>;
+    protected _items: SelectItem[];
+    protected _itemsValuesMap: Map<string, SelectItem>;
+    protected _itemsElementsMap: Map<MuSelectItem, SelectItem>;
+    protected _activeItem?: SelectItem;
+    protected _selectedValues: Set<string>;
+    get activeValue(): string | undefined;
+    getValue(): string[];
+    connectedCallback(): void;
+    /**
+     *
+     */
+    disconnectedCallback(): void;
+    unselect(values: string[]): void;
+    unselectAll(): void;
+    unselectLatestItem(): void;
+    toggleActiveItemSelect(): void;
+    /**
+     * Calculates the position of the items container.
+     */
+    protected _calculateSizes: () => void;
+    /**
+     * 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: 'next' | 'prev'): void;
+    protected _getNavigationItem({ direction, switchBack, fromIndex }: {
+        fromIndex?: number;
+        direction: 'next' | 'prev';
+        switchBack: boolean;
+    }): SelectItem | undefined;
+    /**
+     * Add active state to the next or previous item from the current active item.
+     */
+    switchActiveItem(direction: 'next' | 'prev', options?: SwitchActiveItemOptions): true | undefined;
+    protected _addActiveItemState(item: SelectItem | undefined): true | undefined;
+    clearFilteredOutItems(): void;
+    filterOutItems(value: string): void;
+    /**
+     * Dispatches an event with the active item id, so parent can update aria-activedescendant
+     */
+    protected _dispatchActiveItemChange({ id }: {
+        id: string | undefined;
+    }): void;
+    /**
+     *
+     */
+    clearActiveItem(): void;
+    /**
+     *
+     */
+    protected getMuSelectItemFromEvent(e: Event): SelectItem | undefined;
+    /**
+     *
+     */
+    protected _slotChangeHandler: () => void;
+    /**
+     *
+     */
+    protected _addSelectState(item: SelectItem | undefined): void;
+    /**
+     *
+     */
+    protected _removeSelectState(item: SelectItem | undefined): void;
+    /**
+     *
+     */
+    protected _clearSelectState(): void;
+    _dispatchChangeEvent(detail: MuSelectItemsEvents['mu-select-items-change']['detail']): void;
+    _debounceDispatchChangeEvent: (detail: MuSelectItemsEvents["mu-select-items-change"]["detail"]) => void;
+    /**
+     * 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.
+     */
+    protected _changeSelectState(type: 'add' | 'add-only' | 'remove' | 'toggle', _item: SelectItem | string | undefined): void;
+    /**
+     * 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.
+     */
+    protected _changeSelectStateFromAttributeValue(value: string | undefined | null | string[]): void;
+    /**
+     * This method handles open state changes
+     */
+    protected _openChangeHandler(): void;
+    protected getUpdateComplete(): Promise<boolean>;
+    protected firstUpdated(_changedProperties: PropertyValues<this>): Promise<void>;
+    protected updated(changedProperties: PropertyValues<this>): Promise<void>;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mu-select-items": MuSelectItems;
+    }
+    interface GlobalEventHandlersEventMap extends MuSelectItemsEvents {
+    }
+}
+
+export { MuSelectItems };
+export type { MuSelectItemsEvents };