@mustib/web-components 0.0.0-alpha.0 → 0.0.0-alpha.2

package/components/mu-select-items.js

@@ -1,9 +1,8 @@
-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 { M as MUElement, E as EventAction, _ as __decorate, g as getElementBoundaries, d as debounce, a as disableElementScroll, e as enableElementScroll } from '../mu-element-BTuCCJpo.js';
 import { css, html } from 'lit';
-import { MuSelectItem } from './mu-select-item.js';
+import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
-import { staticProperty } from '../decorators.js';
+import { MuSelectItem } from './mu-select-item.js';
 
 class MuSelectItems extends MUElement {
     constructor() {
@@ -24,7 +23,7 @@ class MuSelectItems extends MUElement {
         this.openMode = 'no-scroll';
         this.eventActionData = {
             eventAction: MuSelectItems.eventAction,
-            events: ['click', 'pointerover', 'pointerdown']
+            events: ['click', 'pointerover', 'pointerdown'],
         };
         this._isReady = this.generateIsReadyPromise();
         this._items = [];
@@ -38,22 +37,22 @@ class MuSelectItems extends MUElement {
             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');
+            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');
+                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-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-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');
+                this.style.setProperty('--items-left', `${boundaries.elementLeft}px`);
+                this.style.setProperty('--items-right', `${boundaries.elementRight}px`);
             }
             else {
                 this.style.setProperty('--items-position', 'absolute');
@@ -94,7 +93,7 @@ class MuSelectItems extends MUElement {
                     value,
                     selected: false,
                     active: false,
-                    index: this._items.length
+                    index: this._items.length,
                 };
                 this._itemsValuesMap.set(value, item);
                 this._itemsElementsMap.set(element, item);
@@ -104,8 +103,10 @@ class MuSelectItems extends MUElement {
                 if (previouslyActiveItem?.value === value)
                     this._addActiveItemState(item);
             };
-            this.renderRoot.querySelector('slot#items-slot').assignedElements({ flatten: true }).forEach((child) => {
-                if ((child instanceof MuTransparent)) {
+            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))
@@ -122,12 +123,19 @@ class MuSelectItems extends MUElement {
             if (removedSelected.size > 0) {
                 if (!this.isControlled) {
                     this._selectedValues.clear();
-                    newSelectedValues.forEach(value => {
+                    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) } }));
+                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();
@@ -139,7 +147,12 @@ class MuSelectItems extends MUElement {
     }
     get parentElement() {
         const selector = this.getAttribute('parent-selector');
-        const element = selector ? this.closestPierce(selector) : super.parentElement;
+        const element = selector
+            ? this.closestPierce(selector)
+            : super.parentElement;
+        if (!element) {
+            throw new Error(`no parent element found for (${this.tagName.toLowerCase()}) element ${selector === null ? '' : `with the selector ${selector}`}`);
+        }
         return element;
     }
     get activeValue() {
@@ -165,7 +178,9 @@ class MuSelectItems extends MUElement {
         this._resizeObserver?.disconnect();
     }
     unselect(values) {
-        values.forEach(value => this._changeSelectState('remove', value));
+        values.forEach((value) => {
+            this._changeSelectState('remove', value);
+        });
     }
     unselectAll() {
         this.unselect(this.getValue());
@@ -185,17 +200,20 @@ class MuSelectItems extends MUElement {
      */
     focusFirstNavigableItem(direction) {
         this.updateComplete.then(() => {
-            const item = this._activeItem || this._getNavigationItem({ direction, switchBack: true });
+            const item = this._activeItem ||
+                this._getNavigationItem({ direction, switchBack: true });
             this._addActiveItemState(item);
         });
     }
-    _getNavigationItem({ direction, switchBack = false, fromIndex = direction === 'next' ? -1 : this._items.length }) {
+    _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)
+            isNavigable: (item) => !(item.element.disabled ||
+                item.element.readonly ||
+                item.element.filteredOut),
         });
     }
     /**
@@ -204,27 +222,40 @@ class MuSelectItems extends MUElement {
     switchActiveItem(direction, options) {
         const { switchBack = true } = options ?? {};
         const activeIndex = this._activeItem?.index;
-        const newActiveItem = this._getNavigationItem({ direction, switchBack, fromIndex: activeIndex });
+        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)
+        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' });
+        item.element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'start',
+        });
         this._dispatchActiveItemChange({ id: item.element.id });
         return true;
     }
     clearFilteredOutItems() {
-        this._items.forEach(item => {
+        this._items.forEach((item) => {
             item.element.filteredOut = false;
         });
     }
     filterOutItems(value) {
-        this._items.forEach(item => {
-            const isFilteredOut = !item.value.toLowerCase().includes(value.toLowerCase());
+        this._items.forEach((item) => {
+            const isFilteredOut = !item.value
+                .toLowerCase()
+                .includes(value.toLowerCase());
             item.element.filteredOut = isFilteredOut;
             if (isFilteredOut && this._activeItem === item)
                 this.clearActiveItem();
@@ -235,7 +266,11 @@ class MuSelectItems extends MUElement {
      */
     _dispatchActiveItemChange({ id }) {
         const eventName = 'mu-select-items-active-item-change';
-        this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true, detail: { id } }));
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            composed: true,
+            detail: { id },
+        }));
     }
     /**
      *
@@ -251,7 +286,9 @@ class MuSelectItems extends MUElement {
      *
      */
     getMuSelectItemFromEvent(e) {
-        const item = e.target instanceof HTMLElement ? e.target.closest('mu-select-item') : null;
+        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);
     }
@@ -287,7 +324,7 @@ class MuSelectItems extends MUElement {
             detail,
             bubbles: true,
             composed: true,
-            cancelable: true
+            cancelable: true,
         });
         this.dispatchEvent(event);
     }
@@ -307,7 +344,7 @@ class MuSelectItems extends MUElement {
      */
     _changeSelectState(type, _item) {
         const item = typeof _item === 'string' ? this._itemsValuesMap.get(_item) : _item;
-        if (!(item) || !item.element.interactable)
+        if (!item || !item.element.interactable)
             return;
         let operation = type;
         if (operation === 'toggle') {
@@ -318,20 +355,29 @@ class MuSelectItems extends MUElement {
             case 'add-only':
             case 'add':
                 if (!this.multiple || operation === 'add-only') {
-                    this._debounceDispatchChangeEvent({ values: [item.value], isCurrentSelection: !isControlled });
+                    this._debounceDispatchChangeEvent({
+                        values: [item.value],
+                        isCurrentSelection: !isControlled,
+                    });
                     if (!isControlled) {
                         this._clearSelectState();
                         this._addSelectState(item);
                     }
                     return;
                 }
-                this._debounceDispatchChangeEvent({ values: [...this._selectedValues, item.value], isCurrentSelection: !isControlled });
+                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 });
+                this._debounceDispatchChangeEvent({
+                    values: [...this._selectedValues].filter((value) => value !== item.value),
+                    isCurrentSelection: !isControlled,
+                });
                 if (!isControlled) {
                     this._removeSelectState(item);
                 }
@@ -346,7 +392,7 @@ class MuSelectItems extends MUElement {
     _changeSelectStateFromAttributeValue(value) {
         if (!value)
             return;
-        const validValues = (Array.isArray(value) ? value : value.split(',')).filter(value => {
+        const validValues = (Array.isArray(value) ? value : value.split(',')).filter((value) => {
             if (value === '')
                 return false;
             const isValid = this._itemsValuesMap.has(value);
@@ -360,15 +406,19 @@ class MuSelectItems extends MUElement {
         }
         const newSelectedValues = new Set(validValues);
         const removedValues = this._selectedValues.difference(newSelectedValues);
-        removedValues.forEach(value => {
+        removedValues.forEach((value) => {
             this._removeSelectState(this._itemsValuesMap.get(value));
         });
-        validValues.forEach(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.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            composed: true,
+            detail: { values: validValues },
+        }));
     }
     /**
      * This method handles open state changes
@@ -385,7 +435,9 @@ class MuSelectItems extends MUElement {
                 this.opened ? disableElementScroll() : enableElementScroll();
                 break;
             case 'dynamic':
-                this.opened ? window.addEventListener('scroll', this._calculateSizes) : window.removeEventListener('scroll', this._calculateSizes);
+                this.opened
+                    ? window.addEventListener('scroll', this._calculateSizes)
+                    : window.removeEventListener('scroll', this._calculateSizes);
                 break;
             default:
                 this.openMode;
@@ -441,7 +493,9 @@ class MuSelectItems extends MUElement {
     `;
     }
 }
-MuSelectItems.styles = [MUElement.cssBase, css `
+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));
@@ -485,7 +539,8 @@ MuSelectItems.styles = [MUElement.cssBase, css `
         --select-items-border-color: var(--mu-select-items-border-color, var(--mu-color-300));
       }
     }
-  `];
+  `,
+];
 MuSelectItems.eventAction = new EventAction({
     currTargetSelector: 'mu-select-item',
     getEventAttributeName(eventName) {
@@ -497,7 +552,7 @@ MuSelectItems.eventAction = new EventAction({
         },
         closed({ event }) {
             return !event.currentTarget.opened;
-        }
+        },
     },
     actions: {
         'toggle-select'(data) {
@@ -507,14 +562,14 @@ MuSelectItems.eventAction = new EventAction({
             const item = items._itemsValuesMap.get(data.actionParam);
             items._changeSelectState('toggle', item);
         },
-        'select'(data) {
+        select(data) {
             const items = data.event.currentTarget;
             if (!items.interactable)
                 return;
             const item = items._itemsValuesMap.get(data.actionParam);
             items._changeSelectState('add', item);
         },
-        'unselect'(data) {
+        unselect(data) {
             const items = data.event.currentTarget;
             if (!items.interactable)
                 return;
@@ -527,44 +582,51 @@ MuSelectItems.eventAction = new EventAction({
                 return;
             const item = items._itemsValuesMap.get(data.actionParam);
             items._addActiveItemState(item);
-        }
-    }
+        },
+    },
 });
 __decorate([
     property({
-        reflect: true, type: Boolean,
+        reflect: true,
+        type: Boolean,
     })
 ], MuSelectItems.prototype, "opened", void 0);
 __decorate([
-    staticProperty({
-        converter: Boolean,
+    property({
+        type: Boolean,
     })
 ], MuSelectItems.prototype, "multiple", void 0);
 __decorate([
     property({
-        reflect: true, type: Array,
+        reflect: true,
+        type: Array,
         converter: {
-            toAttribute(value, type) {
+            toAttribute(value, _type) {
                 return Array.isArray(value) ? value.join(',') : value;
             },
-            fromAttribute(value, type) {
+            fromAttribute(value, _type) {
                 return value?.split(',');
-            }
-        }
+            },
+        },
     })
 ], MuSelectItems.prototype, "value", void 0);
 __decorate([
-    staticProperty({ converter: Boolean })
+    property({
+        type: Boolean,
+        attribute: 'no-clear-active-on-close',
+    })
 ], MuSelectItems.prototype, "noClearActiveOnClose", void 0);
 __decorate([
-    staticProperty()
+    property({
+        attribute: 'default-value',
+    })
 ], MuSelectItems.prototype, "defaultValue", void 0);
 __decorate([
-    staticProperty()
+    property()
 ], MuSelectItems.prototype, "position", void 0);
 __decorate([
-    staticProperty({ attribute: 'open-mode' })
+    property({ attribute: 'open-mode' })
 ], MuSelectItems.prototype, "openMode", void 0);
-MuSelectItems.register("mu-select-items");
+MuSelectItems.register('mu-select-items');
 
 export { MuSelectItems };

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

@@ -2,6 +2,12 @@ import { CSSResultGroup } from 'lit';
 import { MUElement } from './mu-element.js';
 import '@mustib/utils/browser';
 
+type MuSelectLabelContentComponent = {
+    attributes: {
+        type: MuSelectLabelContent['type'];
+        active: MuSelectLabelContent['active'];
+    };
+};
 declare const types: readonly ["label", "value", "autocomplete", "template"];
 /**
  * Use this element to define custom markup for the label and value.
@@ -20,7 +26,7 @@ declare class MuSelectLabelContent extends MUElement {
     static generateTemplate(instance: MuSelectLabelContent): any;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;
-    type: typeof types[number];
+    type: (typeof types)[number];
     active: boolean;
     contentEl?: HTMLElement | null;
     activeTemplateValue?: string;
@@ -36,3 +42,4 @@ declare global {
 }
 
 export { MuSelectLabelContent };
+export type { MuSelectLabelContentComponent };

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

@@ -1,8 +1,7 @@
-import { M as MUElement, _ as __decorate } from '../mu-element-CZDI_RCY.js';
+import { M as MUElement, _ as __decorate } from '../mu-element-BTuCCJpo.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"]';
@@ -28,12 +27,14 @@ class MuSelectLabelContent extends MUElement {
      */
     static generateTemplate(instance) {
         const value = instance._value;
-        return value.length ? repeat(value, value => value, (v) => html `
+        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;
+    `)
+            : nothing;
     }
     async setValue(value) {
         await this.updateComplete;
@@ -43,20 +44,21 @@ class MuSelectLabelContent extends MUElement {
             case 'label':
                 console.warn('mu-select-label-content with type="label" should not change the value', this);
                 break;
-            case "value":
+            case 'value':
                 if (contentEl)
                     contentEl.textContent = value.join(', ');
                 else
                     this.textContent = value.join(', ');
                 break;
-            case "autocomplete":
+            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))
+            case 'template':
+                if (this.activeTemplateValue &&
+                    !value.includes(this.activeTemplateValue))
                     this.activeTemplateValue = undefined;
                 this.requestUpdate();
                 break;
@@ -81,7 +83,9 @@ class MuSelectLabelContent extends MUElement {
     `;
     }
 }
-MuSelectLabelContent.styles = [MUElement.cssBase, css `
+MuSelectLabelContent.styles = [
+    MUElement.cssBase,
+    css `
     :host {
       overflow: hidden;
     }
@@ -144,7 +148,8 @@ MuSelectLabelContent.styles = [MUElement.cssBase, css `
         --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);

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

@@ -6,6 +6,14 @@ import './mu-icon.js';
 import '@mustib/utils/browser';
 import './mu-transparent.js';
 
+type MuSelectLabelComponent = {
+    attributes: {
+        opened: MuSelectLabel['opened'];
+        label: MuSelectLabel['label'];
+        legend: MuSelectLabel['legend'];
+        type: MuSelectLabel['type'];
+    };
+};
 declare class MuSelectLabel extends MUElement {
     static styles: CSSResultGroup;
     opened: boolean;
@@ -28,7 +36,7 @@ declare class MuSelectLabel extends MUElement {
     setActiveDescendantId(id?: string): void;
     connectedCallback(): void;
     protected _assignLabelAndValueTypes(): void;
-    get comboboxElement(): MuSelectLabelContent | HTMLElement | null | undefined;
+    get comboboxElement(): HTMLElement | MuSelectLabelContent | null | undefined;
     focus(options?: FocusOptions): void;
     protected _slotChangeHandler: () => void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
@@ -50,3 +58,4 @@ declare global {
 }
 
 export { MuSelectLabel };
+export type { MuSelectLabelComponent };