@mustib/web-components 0.0.0-alpha.0

package/components/mu-select-label-content.js

@@ -0,0 +1,159 @@
+import { M as MUElement, _ as __decorate } from '../mu-element-CZDI_RCY.js';
+import { css, nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '../decorators.js';
+
+const types = ['label', 'value', 'autocomplete', 'template'];
+const contentSelector = '[data-is="content"]';
+/**
+ * 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.
+ */
+class MuSelectLabelContent extends MUElement {
+    constructor() {
+        super(...arguments);
+        this.eventActionData = undefined;
+        this._addEventActionAttributes = undefined;
+        this.active = false;
+        this._value = [];
+    }
+    /**
+     * Generate template markup for the template type.
+     */
+    static generateTemplate(instance) {
+        const value = instance._value;
+        return value.length ? repeat(value, value => value, (v) => html `
+      <div id='template' ?active=${v === instance.activeTemplateValue} part='template' data-select-pointerdown='#nothing&&#prevent'>
+        <span id='template-value' part='template-value'>${v}</span>
+        <mu-icon name='closeLine' id='template-remove' part='template-remove' data-select-click='remove-value:${v}'></mu-icon>
+      </div>
+    `) : nothing;
+    }
+    async setValue(value) {
+        await this.updateComplete;
+        this._value = value;
+        const { contentEl } = this;
+        switch (this.type) {
+            case 'label':
+                console.warn('mu-select-label-content with type="label" should not change the value', this);
+                break;
+            case "value":
+                if (contentEl)
+                    contentEl.textContent = value.join(', ');
+                else
+                    this.textContent = value.join(', ');
+                break;
+            case "autocomplete":
+                if (contentEl && contentEl instanceof HTMLInputElement)
+                    contentEl.value = value.join(', ');
+                else
+                    console.warn(`mu-select-label-content with type="autocomplete" should have an input element with ${contentSelector} attribute to change the value`, this);
+                break;
+            case "template":
+                if (this.activeTemplateValue && !value.includes(this.activeTemplateValue))
+                    this.activeTemplateValue = undefined;
+                this.requestUpdate();
+                break;
+            default:
+                this.type;
+                break;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.contentEl = this.querySelector(contentSelector);
+        if (!types.includes(this.type)) {
+            console.warn(`'type' attribute of mu-select-label-content must be one of ${types.join(', ')}, but got ${this.type}`, this);
+        }
+    }
+    render() {
+        return html `
+      <div id='container' part='container'>
+        <slot></slot>
+        ${this.type === 'template' ? MuSelectLabelContent.generateTemplate(this) : ''}
+      </div>
+    `;
+    }
+}
+MuSelectLabelContent.styles = [MUElement.cssBase, css `
+    :host {
+      overflow: hidden;
+    }
+
+    :host(:not([active])) {
+      display: none;
+    }
+
+    #container {
+      overflow: hidden;
+      display: inline-flex;
+      gap: calc(var(--mu-base-rem) * .5);
+      flex-wrap: wrap;
+    }
+
+    #template {
+      --select-label-template-background-color: var(--mu-select-label-template-background-color ,var(--mu-color-700));
+      --select-label-template-remove-background-color: var(--mu-select-label-template-remove-background-color ,var(--mu-color-400));
+      display: inline-flex;
+      flex-wrap: wrap-reverse;
+      gap: calc(var(--mu-base-rem) * .5);
+      align-items: center;
+      padding: calc(var(--mu-base-rem) * .5) var(--mu-base-rem);
+      background-color: var(--select-label-template-background-color);
+      border-radius: 9999px;
+      user-select: none;
+    }
+
+    #template[active] {
+      --select-label-template-background-color: var(--mu-select-label-template-background-color ,var(--mu-color-500));
+    }
+
+    #template-value {
+      cursor: text;
+    }
+
+    #template-remove {
+      cursor: pointer;
+      --mu-icon-size: calc(var(--mu-base-rem) * 1);
+      border-radius: 999px;
+      background-color: var(--select-label-template-remove-background-color);
+      padding: calc(var(--mu-base-rem) * .5);
+      box-shadow: 0 0 2px var(--mu-color-900);
+    }
+
+    @media (prefers-color-scheme: light) {
+      #template {
+      --select-label-template-background-color: var(--mu-select-label-template-background-color ,var(--mu-color-200));
+      }
+
+      #template[active] {
+        --select-label-template-background-color: var(--mu-select-label-template-background-color ,var(--mu-color-300));
+      }
+
+      #template-remove {
+        --select-label-template-remove-background-color: var(--mu-select-label-template-remove-background-color ,var(--mu-color-100));
+      }
+
+      #template[active] #template-remove {
+        --select-label-template-remove-background-color: var(--mu-select-label-template-remove-background-color ,var(--mu-color-200));
+      }
+    }
+  `];
+__decorate([
+    property()
+], MuSelectLabelContent.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], MuSelectLabelContent.prototype, "active", void 0);
+__decorate([
+    state()
+], MuSelectLabelContent.prototype, "activeTemplateValue", void 0);
+MuSelectLabelContent.register('mu-select-label-content');
+
+export { MuSelectLabelContent };

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

@@ -0,0 +1,52 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { MUElement } from './mu-element.js';
+import './mu-trigger.js';
+import { MuSelectLabelContent } from './mu-select-label-content.js';
+import './mu-icon.js';
+import '@mustib/utils/browser';
+import './mu-transparent.js';
+
+declare class MuSelectLabel extends MUElement {
+    static styles: CSSResultGroup;
+    opened: boolean;
+    label: string;
+    legend?: string;
+    type: 'autocomplete' | 'autocomplete-value' | 'autocomplete-template' | 'label-value' | 'label-template';
+    value: string[];
+    protected _listboxId?: string;
+    protected _activeDescendantId?: string;
+    protected _labelType: 'label' | 'autocomplete';
+    protected _valueType: 'value' | 'template' | 'autocomplete-label';
+    protected labelElement?: MuSelectLabelContent;
+    protected valueElement?: MuSelectLabelContent;
+    protected _isReadyPromise: ReturnType<MUElement['generateIsReadyPromise']>;
+    eventActionData: undefined;
+    get hasAutocomplete(): boolean;
+    get hasAutocompleteBoth(): boolean;
+    get hasTemplate(): boolean;
+    setListboxId(id?: string): void;
+    setActiveDescendantId(id?: string): void;
+    connectedCallback(): void;
+    protected _assignLabelAndValueTypes(): void;
+    get comboboxElement(): MuSelectLabelContent | HTMLElement | null | undefined;
+    focus(options?: FocusOptions): void;
+    protected _slotChangeHandler: () => void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected _addEventActionAttributes(): void;
+    protected getUpdateComplete(): Promise<boolean>;
+    protected _updateLabelAndValueElements(): Promise<void>;
+    switchActiveTemplate(dir: 'next' | 'prev'): void;
+    protected updated(_changedProperties: PropertyValues<this>): Promise<void>;
+    protected get _autocompleteInput(): HTMLInputElement | undefined;
+    get autocompleteValue(): string | undefined;
+    clearAutocompleteValue(): void;
+    get activeTemplateValue(): string | undefined;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-select-label': MuSelectLabel;
+    }
+}
+
+export { MuSelectLabel };

package/components/mu-select-label.js

@@ -0,0 +1,352 @@
+import { M as MUElement, _ as __decorate } from '../mu-element-CZDI_RCY.js';
+import { css, html, nothing } from 'lit';
+import './mu-trigger.js';
+import { property, state } from 'lit/decorators.js';
+import { MuSelectLabelContent } from './mu-select-label-content.js';
+import { MuTransparent } from './mu-transparent.js';
+import './mu-icon.js';
+import { staticProperty } from '../decorators.js';
+import 'lit/directives/repeat.js';
+
+class MuSelectLabel extends MUElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+        this.label = 'Please select a value';
+        this.type = 'label-value';
+        this.value = [];
+        this.eventActionData = undefined;
+        this._slotChangeHandler = () => {
+            const addElement = (element) => {
+                if (element instanceof MuSelectLabelContent) {
+                    switch (element.type) {
+                        case 'label':
+                            if (!this.hasAutocomplete)
+                                this.labelElement = element;
+                            break;
+                        case 'value':
+                            if (this._valueType === 'value')
+                                this.valueElement = element;
+                            break;
+                        case 'autocomplete':
+                            if (this.hasAutocomplete)
+                                this.labelElement = element;
+                            break;
+                        case 'template':
+                            if (this._valueType === 'template')
+                                this.valueElement = element;
+                            break;
+                        default:
+                            element.type;
+                            break;
+                    }
+                }
+            };
+            this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }).forEach(el => {
+                if (el instanceof MuTransparent) {
+                    el.contents.forEach(el => addElement(el));
+                }
+                else {
+                    addElement(el);
+                }
+            });
+            if (!this.labelElement) {
+                console.warn('mu-select-label should have mu-select-label-content for label', this);
+            }
+            else {
+                this.comboboxElement?.setAttribute('role', 'combobox');
+                this.comboboxElement?.setAttribute('aria-label', this.label);
+                this.hasAutocomplete && this.comboboxElement?.setAttribute('aria-autocomplete', 'list');
+                this.setListboxId(this._listboxId);
+                this.setActiveDescendantId(this._activeDescendantId);
+            }
+            if (!this.valueElement && this._valueType !== 'autocomplete-label') {
+                console.warn('mu-select-label should have mu-select-label-content for value', this);
+            }
+            if (!this._isReadyPromise.resolved)
+                this._isReadyPromise.resolve();
+            this._updateLabelAndValueElements();
+        };
+    }
+    get hasAutocomplete() {
+        return this._labelType === 'autocomplete';
+    }
+    get hasAutocompleteBoth() {
+        return this.hasAutocomplete && this._valueType === 'autocomplete-label';
+    }
+    get hasTemplate() {
+        return this._valueType === 'template';
+    }
+    setListboxId(id) {
+        this._listboxId = id;
+        id ? this.comboboxElement?.setAttribute('aria-controls', id) : this.comboboxElement?.removeAttribute('aria-controls');
+    }
+    setActiveDescendantId(id) {
+        this._activeDescendantId = id;
+        id ? this.comboboxElement?.setAttribute('aria-activedescendant', id) : this.comboboxElement?.removeAttribute('aria-activedescendant');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIndex = 0;
+        this._assignLabelAndValueTypes();
+        this.addEventListener('mu-transparent-slotchange', this._slotChangeHandler);
+        this._isReadyPromise = this.generateIsReadyPromise();
+    }
+    _assignLabelAndValueTypes() {
+        switch (this.type) {
+            case 'autocomplete':
+                this._labelType = 'autocomplete';
+                this._valueType = 'autocomplete-label';
+                break;
+            case 'autocomplete-value':
+                this._labelType = 'autocomplete';
+                this._valueType = 'value';
+                break;
+            case 'autocomplete-template':
+                this._labelType = 'autocomplete';
+                this._valueType = 'template';
+                break;
+            case 'label-value':
+                this._labelType = 'label';
+                this._valueType = 'value';
+                break;
+            case 'label-template':
+                this._labelType = 'label';
+                this._valueType = 'template';
+                break;
+            default:
+                this.type;
+                this._labelType = 'label';
+                this._valueType = 'value';
+                console.warn(`unsupported type (${this.type}) for mu-select-label`, this);
+                break;
+        }
+    }
+    get comboboxElement() {
+        return this.hasAutocomplete ? this.labelElement?.contentEl : this.labelElement;
+    }
+    focus(options) {
+        const el = this.hasAutocomplete ? this.labelElement?.contentEl : this;
+        if (document.activeElement === el)
+            return;
+        setTimeout(() => {
+            el === this ? super.focus(options) : el?.focus(options);
+        });
+    }
+    firstUpdated(_changedProperties) {
+        /**
+         * needs to be called to add initial elements in case of default slot
+         */
+        this._slotChangeHandler();
+        this.renderRoot.addEventListener('slotchange', this._slotChangeHandler);
+    }
+    _addEventActionAttributes() {
+        const autocompleteInput = this._autocompleteInput;
+        const toggleOpenIcon = this.renderRoot.querySelector('#icon-toggle-open');
+        const removeAllIcon = this.renderRoot.querySelector('#icon-remove-all');
+        this.setAttribute('data-select-pointerdown', 'toggle && #prevent');
+        toggleOpenIcon?.setAttribute('data-select-click', 'toggle');
+        toggleOpenIcon?.setAttribute('data-select-pointerdown', '#nothing && #prevent');
+        removeAllIcon?.setAttribute('data-select-click', 'remove-all');
+        removeAllIcon?.setAttribute('data-select-pointerdown', '#nothing && #prevent');
+        autocompleteInput?.setAttribute('data-select-pointerdown', 'open');
+        autocompleteInput?.setAttribute('data-select-input', 'filter && open');
+    }
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await this._isReadyPromise.promise;
+        return result;
+    }
+    async _updateLabelAndValueElements() {
+        const hasValue = this.value.length > 0;
+        if (this.valueElement) {
+            await this.valueElement.updateComplete;
+            this.valueElement.setValue(this.value);
+            this.valueElement.active = hasValue;
+        }
+        if (this.labelElement) {
+            await this.labelElement.updateComplete;
+            this.labelElement.active = this.hasAutocomplete ? true : !hasValue;
+            if (this._valueType === 'autocomplete-label') {
+                this.labelElement.setValue(this.value);
+            }
+        }
+    }
+    switchActiveTemplate(dir) {
+        if (!this.valueElement || this._valueType !== 'template')
+            return;
+        const activeValue = this.valueElement?.activeTemplateValue;
+        const activeIndex = this.value.indexOf(activeValue ?? '');
+        this.valueElement.activeTemplateValue = this.getNavigationItem({
+            items: this.value,
+            fromIndex: activeIndex === -1 ? undefined : activeIndex,
+            direction: dir,
+            isNavigable() {
+                return true;
+            },
+        });
+    }
+    async updated(_changedProperties) {
+        await this.updateComplete;
+        if (_changedProperties.has('value')) {
+            this._updateLabelAndValueElements();
+        }
+        if (_changedProperties.has('opened')) {
+            this.comboboxElement?.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
+        }
+    }
+    get _autocompleteInput() {
+        if (this._labelType !== 'autocomplete')
+            return;
+        const input = this.labelElement?.contentEl;
+        return input instanceof HTMLInputElement ? input : undefined;
+    }
+    get autocompleteValue() {
+        return this._autocompleteInput?.value;
+    }
+    clearAutocompleteValue() {
+        if (this.type === 'autocomplete')
+            return;
+        const input = this._autocompleteInput;
+        if (input)
+            input.value = '';
+    }
+    get activeTemplateValue() {
+        if (this._valueType !== 'template')
+            return;
+        return this.valueElement?.activeTemplateValue;
+    }
+    render() {
+        const label = this.hasAutocomplete ?
+            html `
+        <mu-select-label-content part='autocomplete' type='autocomplete'>
+          <input autocomplete='off' type='text' placeholder=${this.label} id='autocomplete-input' data-is='content'></input>
+        </mu-select-label-content>
+    ` :
+            html `
+        <mu-select-label-content type='label'>
+          ${this.label}
+        </mu-select-label-content>
+    `;
+        const value = this._valueType === 'value' ?
+            html `
+        <mu-select-label-content part='value' type='value'></mu-select-label-content>
+    ` : this._valueType === 'template' ?
+            html `
+          <mu-select-label-content part='template' type='template'></mu-select-label-content>
+    ` : nothing;
+        return html `
+      <fieldset id='container' part='container' class='autocomplete'>
+        <slot>
+          ${this.legend ? html `<legend id='legend' part='legend'>${this.legend}</legend>` : nothing}
+          <mu-transparent content-selector='mu-select-label-content'>
+            <div id='content' part='content'>${value}${label}</div>
+          </mu-transparent>
+          <div id='icons' part='icons'>
+            <mu-icon role='button' aria-label='Clear' id='icon-remove-all' part='icon-remove-all' name='close'></mu-icon>
+            <mu-icon role='button' aria-label=${this.opened ? 'Close' : 'Open'} id='icon-toggle-open' name='downArrow'></mu-icon>
+          </div>
+        </slot>
+      </fieldset>
+    `;
+    }
+}
+MuSelectLabel.styles = [MUElement.cssBase, css `
+    :host(:focus-within) #container,
+    :host([opened]) #container {
+      --select-label-border-color: var(--mu-select-label-border-color, var(--mu-color-500));
+    }
+    
+    #container {
+      --select-label-border-width: var(--mu-select-label-border-width, 3px);
+      --select-label-border-color: var(--mu-select-label-border-color, var(--mu-color-700));
+      --select-label-border-radius: var(--mu-select-label-border-radius, calc(var(--mu-base-rem) * 1.2));
+      --select-label-gap: var(--mu-select-label-gap ,var(--mu-base-rem));
+      display: grid;
+      grid-template-columns: auto auto;
+      gap: var(--select-label-gap);
+      justify-content: space-between;
+      align-items: center;
+      transition: all 0.2s ease-in-out;
+      user-select: none;
+      border-width: var(--select-label-border-width);
+      border-style: solid;
+      border-color: var(--select-label-border-color);
+      border-radius: var(--select-label-border-radius);
+      padding: calc(var(--mu-base-rem) * .8) calc(var(--mu-base-rem) * 1.2);
+    }
+
+    @media (prefers-color-scheme: light) {
+      :host(:focus-within) #container,
+      :host([opened]) #container {
+        --select-label-border-color: var(--mu-color-400);
+      }
+
+      #container {
+        --select-label-border-color: var(--mu-color-200);
+      }
+    }
+
+    #legend {
+      margin-left: calc(var(--mu-base-rem) * -.6);
+      padding-inline: .75ch;
+      font-size: .85em;
+    }
+
+    #icons, #content {
+      display: flex;
+      gap: var(--select-label-gap);
+      align-items: center;
+      align-content: start;
+    }
+    
+    #content {
+      flex-wrap: wrap;
+      min-width: 0;
+    }
+
+    #icon-toggle-open, #icon-remove-all {
+      transition: all 0.1s ease-in-out;
+      cursor: pointer;
+    }
+
+    #icon-remove-all {
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    :host([opened]) #icon-remove-all, :host(:hover) #icon-remove-all {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    :host([opened]) #icon-toggle-open {
+      transform: scaleY(-1)
+    }
+
+    #autocomplete-input {
+      all: unset;
+    }
+
+    #autocomplete-input::placeholder {
+      all: unset;
+    }
+    `];
+__decorate([
+    property({ reflect: true, type: Boolean })
+], MuSelectLabel.prototype, "opened", void 0);
+__decorate([
+    staticProperty()
+], MuSelectLabel.prototype, "label", void 0);
+__decorate([
+    staticProperty()
+], MuSelectLabel.prototype, "legend", void 0);
+__decorate([
+    staticProperty()
+], MuSelectLabel.prototype, "type", void 0);
+__decorate([
+    state()
+], MuSelectLabel.prototype, "value", void 0);
+MuSelectLabel.register('mu-select-label');
+
+export { MuSelectLabel };

package/components/mu-select.d.ts

@@ -0,0 +1,63 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { MUElement } from './mu-element.js';
+import { MuSelectItems, MuSelectItemsEvents } from './mu-select-items.js';
+import { MuSelectLabel } from './mu-select-label.js';
+import { EventAction, GenerateData } from '@mustib/utils/browser';
+import './mu-select-item.js';
+import './mu-trigger.js';
+import './mu-transparent.js';
+import './mu-select-label-content.js';
+import './mu-icon.js';
+
+type MuSelectEvents = {
+    'mu-select-opened': CustomEvent;
+    'mu-select-closed': CustomEvent;
+};
+declare class MuSelect extends MUElement {
+    static styles: CSSResultGroup;
+    static eventAction: EventAction<GenerateData<MuSelect>>;
+    opened: boolean;
+    noCloseAfterSelect: boolean;
+    noCloseAfterBlur: boolean;
+    /**
+     * 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
+     */
+    _canCloseAfterChange: boolean;
+    _value: string[];
+    protected _assignedElements: Element[];
+    protected _itemsElement?: MuSelectItems;
+    protected _labelElement?: MuSelectLabel;
+    protected _isReady: Readonly<{
+        status: "success" | "fail" | "pending";
+        resolved: boolean;
+        promise: Promise<boolean>;
+        resolve: () => void;
+    }>;
+    eventActionData: {
+        eventAction: EventAction;
+        events: string[];
+    } | undefined;
+    protected _addEventActionAttributes(): void;
+    focus(): void;
+    connectedCallback(): void;
+    itemsChangeHandler: (e: MuSelectItemsEvents["mu-select-items-change"]) => void;
+    protected _valueChanged(value: string | string[] | undefined): void;
+    protected _slotChangeHandler: () => void;
+    protected _handleOpenChange(): void;
+    protected getUpdateComplete(): Promise<boolean>;
+    protected updated(_changedProperties: PropertyValues): void;
+    protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-select': MuSelect;
+    }
+    interface GlobalEventHandlersEventMap extends MuSelectEvents {
+    }
+}
+
+export { MuSelect };
+export type { MuSelectEvents };