@mustib/web-components 0.0.0-alpha.1 → 0.0.0-alpha.3

package/components/mu-select-label.js

@@ -1,14 +1,13 @@
-import { M as MUElement, _ as __decorate } from '../mu-element-CZDI_RCY.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-C36Rgp-m.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 { MuSelectLabelContent } from './mu-select-label-content.js';
 import './mu-icon.js';
-import { staticProperty } from '../decorators.js';
 import 'lit/directives/repeat.js';
 
-class MuSelectLabel extends MUElement {
+class MuSelectLabel extends MuElement {
     constructor() {
         super(...arguments);
         this.opened = false;
@@ -42,9 +41,12 @@ class MuSelectLabel extends MUElement {
                     }
                 }
             };
-            this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }).forEach(el => {
+            this.shadowRoot
+                ?.querySelector('slot')
+                ?.assignedElements({ flatten: true })
+                .forEach((el) => {
                 if (el instanceof MuTransparent) {
-                    el.contents.forEach(el => addElement(el));
+                    el.contents.forEach(addElement);
                 }
                 else {
                     addElement(el);
@@ -56,7 +58,8 @@ class MuSelectLabel extends MUElement {
             else {
                 this.comboboxElement?.setAttribute('role', 'combobox');
                 this.comboboxElement?.setAttribute('aria-label', this.label);
-                this.hasAutocomplete && this.comboboxElement?.setAttribute('aria-autocomplete', 'list');
+                this.hasAutocomplete &&
+                    this.comboboxElement?.setAttribute('aria-autocomplete', 'list');
                 this.setListboxId(this._listboxId);
                 this.setActiveDescendantId(this._activeDescendantId);
             }
@@ -79,11 +82,15 @@ class MuSelectLabel extends MUElement {
     }
     setListboxId(id) {
         this._listboxId = id;
-        id ? this.comboboxElement?.setAttribute('aria-controls', id) : this.comboboxElement?.removeAttribute('aria-controls');
+        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');
+        id
+            ? this.comboboxElement?.setAttribute('aria-activedescendant', id)
+            : this.comboboxElement?.removeAttribute('aria-activedescendant');
     }
     connectedCallback() {
         super.connectedCallback();
@@ -123,7 +130,9 @@ class MuSelectLabel extends MUElement {
         }
     }
     get comboboxElement() {
-        return this.hasAutocomplete ? this.labelElement?.contentEl : this.labelElement;
+        return this.hasAutocomplete
+            ? this.labelElement?.contentEl
+            : this.labelElement;
     }
     focus(options) {
         const el = this.hasAutocomplete ? this.labelElement?.contentEl : this;
@@ -197,7 +206,7 @@ class MuSelectLabel extends MUElement {
     }
     get _autocompleteInput() {
         if (this._labelType !== 'autocomplete')
-            return;
+            return undefined;
         const input = this.labelElement?.contentEl;
         return input instanceof HTMLInputElement ? input : undefined;
     }
@@ -213,28 +222,30 @@ class MuSelectLabel extends MUElement {
     }
     get activeTemplateValue() {
         if (this._valueType !== 'template')
-            return;
+            return undefined;
         return this.valueElement?.activeTemplateValue;
     }
     render() {
-        const label = this.hasAutocomplete ?
-            html `
+        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 `
+    `
+            : html `
         <mu-select-label-content type='label'>
           ${this.label}
         </mu-select-label-content>
     `;
-        const value = this._valueType === 'value' ?
-            html `
+        const value = this._valueType === 'value'
+            ? html `
         <mu-select-label-content part='value' type='value'></mu-select-label-content>
-    ` : this._valueType === 'template' ?
-            html `
+    `
+            : this._valueType === 'template'
+                ? html `
           <mu-select-label-content part='template' type='template'></mu-select-label-content>
-    ` : nothing;
+    `
+                : nothing;
         return html `
       <fieldset id='container' part='container' class='autocomplete'>
         <slot>
@@ -251,7 +262,9 @@ class MuSelectLabel extends MUElement {
     `;
     }
 }
-MuSelectLabel.styles = [MUElement.cssBase, css `
+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));
@@ -331,18 +344,19 @@ MuSelectLabel.styles = [MUElement.cssBase, css `
     #autocomplete-input::placeholder {
       all: unset;
     }
-    `];
+    `,
+];
 __decorate([
     property({ reflect: true, type: Boolean })
 ], MuSelectLabel.prototype, "opened", void 0);
 __decorate([
-    staticProperty()
+    property()
 ], MuSelectLabel.prototype, "label", void 0);
 __decorate([
-    staticProperty()
+    property()
 ], MuSelectLabel.prototype, "legend", void 0);
 __decorate([
-    staticProperty()
+    property()
 ], MuSelectLabel.prototype, "type", void 0);
 __decorate([
     state()

package/components/mu-select.d.ts

@@ -1,19 +1,27 @@
+import { EventAction, GenerateData } from '@mustib/utils/browser';
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
-import { MuSelectItems, MuSelectItemsEvents } from './mu-select-items.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
+import { MuSelectItems, MuSelectItemsComponent } 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 = {
+type MuSelectComponent = {
+    attributes: MuElementComponent['attributes'] & {
+        opened: MuSelect['opened'];
+        'no-close-after-select': MuSelect['noCloseAfterSelect'];
+        'no-close-after-blur': MuSelect['noCloseAfterBlur'];
+    };
+    events: Events;
+};
+type Events = {
     'mu-select-opened': CustomEvent;
     'mu-select-closed': CustomEvent;
 };
-declare class MuSelect extends MUElement {
+declare class MuSelect extends MuElement {
     static styles: CSSResultGroup;
     static eventAction: EventAction<GenerateData<MuSelect>>;
     opened: boolean;
@@ -42,7 +50,7 @@ declare class MuSelect extends MUElement {
     protected _addEventActionAttributes(): void;
     focus(): void;
     connectedCallback(): void;
-    itemsChangeHandler: (e: MuSelectItemsEvents["mu-select-items-change"]) => void;
+    itemsChangeHandler: (e: MuSelectItemsComponent["events"]["mu-select-items-change"]) => void;
     protected _valueChanged(value: string | string[] | undefined): void;
     protected _slotChangeHandler: () => void;
     protected _handleOpenChange(): void;
@@ -55,9 +63,9 @@ declare global {
     interface HTMLElementTagNameMap {
         'mu-select': MuSelect;
     }
-    interface GlobalEventHandlersEventMap extends MuSelectEvents {
+    interface GlobalEventHandlersEventMap extends Events {
     }
 }
 
 export { MuSelect };
-export type { MuSelectEvents };
+export type { MuSelectComponent };

package/components/mu-select.js

@@ -1,17 +1,16 @@
-import { M as MUElement, E as EventAction, _ as __decorate } from '../mu-element-CZDI_RCY.js';
+import { M as MuElement, E as EventAction, _ as __decorate } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
+import { MuTransparent } from './mu-transparent.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 {
+class MuSelect extends MuElement {
     constructor() {
         super(...arguments);
         this.opened = false;
@@ -27,7 +26,7 @@ class MuSelect extends MUElement {
         this._isReady = this.generateIsReadyPromise();
         this.eventActionData = {
             eventAction: MuSelect.eventAction,
-            events: ['click', 'pointerdown', 'pointerup', 'keydown', 'input']
+            events: ['click', 'pointerdown', 'pointerup', 'keydown', 'input'],
         };
         this.itemsChangeHandler = (e) => {
             e.detail.isCurrentSelection && this._valueChanged(e.detail.values);
@@ -50,9 +49,9 @@ class MuSelect extends MUElement {
                     this._labelElement = element;
                 }
             };
-            this._assignedElements.forEach(element => {
+            this._assignedElements.forEach((element) => {
                 if (element instanceof MuTransparent) {
-                    element.contents.forEach(el => assignElement(el));
+                    element.contents.forEach(assignElement);
                 }
                 else {
                     assignElement(element);
@@ -124,7 +123,7 @@ class MuSelect extends MUElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('focusout', (e) => {
+        this.addEventListener('focusout', (_e) => {
             if (!this.noCloseAfterBlur)
                 this.opened = false;
         });
@@ -135,15 +134,17 @@ class MuSelect extends MUElement {
         this.addEventListener('mu-select-items-change', this.itemsChangeHandler);
     }
     _valueChanged(value) {
-        const valueArr = Array.isArray(value) ? value : value?.split(',') ?? [];
+        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._itemsElement)
+            this._itemsElement.opened = this.opened;
+        if (this._labelElement)
+            this._labelElement.opened = this.opened;
         if (this.opened) {
             this.focus();
             this.dispatchEvent(new CustomEvent('mu-select-opened', { bubbles: true, composed: true }));
@@ -164,8 +165,10 @@ class MuSelect extends MUElement {
             this._handleOpenChange();
         }
         if (_changedProperties.has('disabled')) {
-            this._itemsElement && (this._itemsElement.disabled = this.disabled);
-            this._labelElement && (this._labelElement.disabled = this.disabled);
+            if (this._itemsElement)
+                this._itemsElement.disabled = this.disabled;
+            if (this._labelElement)
+                this._labelElement.disabled = this.disabled;
         }
     }
     async firstUpdated(_changedProperties) {
@@ -184,7 +187,9 @@ class MuSelect extends MUElement {
     `;
     }
 }
-MuSelect.styles = [MUElement.cssBase, css `
+MuSelect.styles = [
+    MuElement.cssBase,
+    css `
     :host([opened]) #container {
       z-index: 100;
     }
@@ -195,7 +200,8 @@ MuSelect.styles = [MUElement.cssBase, css `
       max-width: 100%;
       margin: auto;
     }
-    `];
+    `,
+];
 MuSelect.eventAction = new EventAction({
     getEventAttributeName(eventName) {
         return `data-select-${eventName}`;
@@ -228,7 +234,7 @@ MuSelect.eventAction = new EventAction({
             select._canCloseAfterChange = false;
             select._itemsElement?.unselect([value]);
         },
-        "remove-last-value"(data) {
+        'remove-last-value'(data) {
             const select = data.event.currentTarget;
             if (!select.interactable)
                 return;
@@ -239,7 +245,9 @@ MuSelect.eventAction = new EventAction({
             else if (data.actionParam === 'item')
                 type = 'item';
             else {
-                type = select._labelElement?.activeTemplateValue ? 'template' : 'item';
+                type = select._labelElement?.activeTemplateValue
+                    ? 'template'
+                    : 'item';
             }
             if (type === 'template') {
                 const value = select._labelElement?.activeTemplateValue;
@@ -260,9 +268,13 @@ MuSelect.eventAction = new EventAction({
                 return;
             const [dir, switchBack] = actionParam.split('-');
             if (dir === 'next')
-                event.currentTarget._itemsElement?.switchActiveItem('next', { switchBack: switchBack === 'true' });
+                event.currentTarget._itemsElement?.switchActiveItem('next', {
+                    switchBack: switchBack === 'true',
+                });
             else if (dir === 'prev')
-                event.currentTarget._itemsElement?.switchActiveItem('prev', { switchBack: switchBack === 'true' });
+                event.currentTarget._itemsElement?.switchActiveItem('prev', {
+                    switchBack: switchBack === 'true',
+                });
         },
         'toggle-active-select'(data) {
             data.event.currentTarget._itemsElement?.toggleActiveItemSelect();
@@ -277,10 +289,15 @@ MuSelect.eventAction = new EventAction({
             const select = data.event.currentTarget;
             if (!select.interactable)
                 return;
+            // biome-ignore lint/suspicious/noExplicitAny: <>
             const hasValue = (el) => typeof el?.value === 'string';
-            const value = typeof data.actionParam === 'string' && data.actionParam ? data.actionParam : hasValue(data.matchedTarget) ? data.matchedTarget.value : '';
+            const value = typeof data.actionParam === 'string' && data.actionParam
+                ? data.actionParam
+                : hasValue(data.matchedTarget)
+                    ? data.matchedTarget.value
+                    : '';
             select._itemsElement?.filterOutItems(value);
-        }
+        },
     },
     switches: {
         opened(data) {
@@ -296,22 +313,28 @@ MuSelect.eventAction = new EventAction({
             return data.event.currentTarget._value.length > 0;
         },
         'has-active-item'(data) {
-            return data.event.currentTarget._itemsElement?.activeValue !== undefined;
+            return (data.event.currentTarget._itemsElement?.activeValue !==
+                undefined);
         },
         'no-active-item'(data) {
-            return data.event.currentTarget._itemsElement?.activeValue === undefined;
+            return (data.event.currentTarget._itemsElement?.activeValue ===
+                undefined);
         },
         template(data) {
-            return data.event.currentTarget._labelElement?.hasTemplate === true;
+            return (data.event.currentTarget._labelElement?.hasTemplate ===
+                true);
         },
         'no-template'(data) {
-            return data.event.currentTarget._labelElement?.hasTemplate !== true;
+            return (data.event.currentTarget._labelElement?.hasTemplate !==
+                true);
         },
         'has-active-template'(data) {
-            return !!data.event.currentTarget._labelElement?.activeTemplateValue;
+            return !!data.event.currentTarget._labelElement
+                ?.activeTemplateValue;
         },
         'no-active-template'(data) {
-            return !data.event.currentTarget._labelElement?.activeTemplateValue;
+            return !data.event.currentTarget._labelElement
+                ?.activeTemplateValue;
         },
         autocomplete(data) {
             const select = data.event.currentTarget;
@@ -320,24 +343,33 @@ MuSelect.eventAction = new EventAction({
             return select._labelElement?.hasAutocomplete === true;
         },
         'no-autocomplete'(data) {
-            return data.event.currentTarget._labelElement?.hasAutocomplete !== true;
+            return (data.event.currentTarget._labelElement
+                ?.hasAutocomplete !== true);
         },
         'has-autocomplete-value'(data) {
-            return !!data.event.currentTarget._labelElement?.autocompleteValue;
+            return !!data.event.currentTarget._labelElement
+                ?.autocompleteValue;
         },
         'no-autocomplete-value'(data) {
-            return !data.event.currentTarget._labelElement?.autocompleteValue;
-        }
-    }
+            return !data.event.currentTarget._labelElement
+                ?.autocompleteValue;
+        },
+    },
 });
 __decorate([
     property({ reflect: true, type: Boolean })
 ], MuSelect.prototype, "opened", void 0);
 __decorate([
-    staticProperty({ converter: Boolean })
+    property({
+        type: Boolean,
+        attribute: 'no-close-after-select',
+    })
 ], MuSelect.prototype, "noCloseAfterSelect", void 0);
 __decorate([
-    staticProperty({ converter: Boolean })
+    property({
+        type: Boolean,
+        attribute: 'no-close-after-blur',
+    })
 ], MuSelect.prototype, "noCloseAfterBlur", void 0);
 __decorate([
     queryAssignedElements({ flatten: true })

package/components/mu-transparent.d.ts

@@ -1,7 +1,13 @@
-import { MUElement } from './mu-element.js';
 import { CSSResultGroup } from 'lit';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import '@mustib/utils/browser';
 
+type MuTransparentComponent = {
+    attributes: MuElementComponent['attributes'] & {
+        'content-selector': MuTransparent['contentSelector'];
+    };
+    events: Events;
+};
 type Events = {
     'mu-transparent-slotchange': CustomEvent<{
         source: MuTransparent;
@@ -21,7 +27,7 @@ type Events = {
  * Use the `content` property to access the underlying
  * meaningful child element, regardless of the wrapping.
  */
-declare class MuTransparent extends MUElement {
+declare class MuTransparent extends MuElement {
     static styles?: CSSResultGroup;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;
@@ -46,11 +52,11 @@ declare class MuTransparent extends MUElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "mu-transparent": MuTransparent;
+        'mu-transparent': MuTransparent;
     }
     interface GlobalEventHandlersEventMap extends Events {
     }
 }
 
 export { MuTransparent };
-export type { Events };
+export type { MuTransparentComponent };

package/components/mu-transparent.js

@@ -1,7 +1,6 @@
-import { _ as __decorate, M as MUElement } from '../mu-element-CZDI_RCY.js';
-import { property } from 'lit/decorators.js';
+import { _ as __decorate, M as MuElement } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
-import '../decorators.js';
+import { property } from 'lit/decorators.js';
 
 /**
  * A base class for "transparent" wrapper components.
@@ -17,7 +16,7 @@ import '../decorators.js';
  * Use the `content` property to access the underlying
  * meaningful child element, regardless of the wrapping.
  */
-class MuTransparent extends MUElement {
+class MuTransparent extends MuElement {
     /**
      * Returns the meaningful child elements of the transparent component.
      *
@@ -32,7 +31,6 @@ class MuTransparent extends MUElement {
             throw new Error(`No contents found for ${this.tagName}`);
         return Array.from(contents);
     }
-    ;
     constructor() {
         super();
         this.eventActionData = undefined;
@@ -70,6 +68,6 @@ MuTransparent.styles = css `
 __decorate([
     property({ attribute: 'content-selector' })
 ], MuTransparent.prototype, "contentSelector", void 0);
-MuTransparent.register("mu-transparent");
+MuTransparent.register('mu-transparent');
 
 export { MuTransparent };

package/components/mu-trigger.d.ts

@@ -1,8 +1,23 @@
-import { MuTransparent } from './mu-transparent.js';
-import './mu-element.js';
+import { MuTransparent, MuTransparentComponent } from './mu-transparent.js';
 import 'lit';
+import './mu-element.js';
 import '@mustib/utils/browser';
 
+type MuTriggerComponent = {
+    attributes: MuTransparentComponent['attributes'] & {
+        'listen-to': MuTrigger['listenTo'];
+        detail: MuTrigger['detail'];
+        'stop-propagation': MuTrigger['stopPropagation'];
+        'stop-immediate-propagation': MuTrigger['stopImmediatePropagation'];
+        dispatch: MuTrigger['dispatch'];
+        'no-cancelable': MuTrigger['noCancelable'];
+        'no-bubble': MuTrigger['noBubble'];
+        'no-capture': MuTrigger['noCapture'];
+        'current-target-selector': MuTrigger['currentTargetSelector'];
+        'no-prevent-default': MuTrigger['noPreventDefault'];
+        'dispatch-to-selector': MuTrigger['dispatchToSelector'];
+    };
+};
 /**
  * `<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`)
@@ -27,7 +42,7 @@ declare class MuTrigger<T extends Event = Event> extends MuTransparent {
      * A JSON string representing the detail to pass to the custom event.
      * @default undefined
      */
-    detail: any;
+    detail: unknown;
     /**
      * A boolean value indicates if the event should call `stopPropagation`.
      * @default false
@@ -105,7 +120,7 @@ declare class MuTrigger<T extends Event = Event> extends MuTransparent {
      * @param e The original event that was fired.
      * @returns {Object} An object with the properties above.
      */
-    protected _createDispatchEvent(e: T): {
+    protected _createDispatchEvent(_e: T): {
         shouldDispatch: boolean;
         eventName: string;
         dispatchElement: Element;
@@ -127,3 +142,4 @@ declare global {
 }
 
 export { MuTrigger };
+export type { MuTriggerComponent };