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

package/components/mu-range.js

@@ -1,10 +1,9 @@
-import { M as MUElement, _ as __decorate, t as throttle, d as debounce, w as wait, g as getElementBoundaries } from '../mu-element-CZDI_RCY.js';
+import { M as MUElement, _ as __decorate, t as throttle, d as debounce, w as wait, g as getElementBoundaries } from '../mu-element-BTuCCJpo.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { MuRangeThumb } from './mu-range-thumb.js';
 import { MuTransparent } from './mu-transparent.js';
 import { MuRangeFill } from './mu-range-fill.js';
-import '../decorators.js';
+import { MuRangeThumb } from './mu-range-thumb.js';
 import './mu-range-thumb-value.js';
 
 class MuRange extends MUElement {
@@ -12,7 +11,10 @@ class MuRange extends MUElement {
         return this.value !== undefined;
     }
     set activeThumb(thumb) {
-        if (thumb && (thumb.element.transparent || thumb.element.disabled || thumb.element.readonly))
+        if (thumb &&
+            (thumb.element.transparent ||
+                thumb.element.disabled ||
+                thumb.element.readonly))
             return;
         const prev = this._activeThumb;
         if (prev)
@@ -96,7 +98,10 @@ class MuRange extends MUElement {
                     fillElements.push(element);
                 }
             };
-            this.renderRoot.querySelector('slot')?.assignedElements({ flatten: true }).forEach(el => {
+            this.renderRoot
+                .querySelector('slot')
+                ?.assignedElements({ flatten: true })
+                .forEach((el) => {
                 if (el instanceof MuTransparent) {
                     el.contents.forEach(assignElement);
                 }
@@ -111,7 +116,9 @@ class MuRange extends MUElement {
                 this.sortThumbs();
             }
             fillElements.forEach((element, i) => {
-                const thumbsNames = element.for ? element.for.split(',') : [this._thumbs[i]?.name];
+                const thumbsNames = element.for
+                    ? element.for.split(',')
+                    : [this._thumbs[i]?.name];
                 if (thumbsNames.length === 0) {
                     console.warn(`mu-range-fill has no thumb names`, element);
                     return;
@@ -129,9 +136,9 @@ class MuRange extends MUElement {
                 }, []);
                 const rangeFill = {
                     element,
-                    linkedThumbs: thumbs
+                    linkedThumbs: thumbs,
                 };
-                thumbs.forEach(thumb => {
+                thumbs.forEach((thumb) => {
                     if (thumb.linkedFillElements)
                         thumb.linkedFillElements.push(rangeFill);
                     else
@@ -143,8 +150,8 @@ class MuRange extends MUElement {
                 this._isReadyPromise.resolve();
             }
             else {
-                const deletedThumbs = [...previousThumbsElementsMap.values()].filter(thumb => !this._thumbsElementsMap.has(thumb.element));
-                const newThumbs = this._thumbs.filter(thumb => !previousThumbsElementsMap.has(thumb.element));
+                const deletedThumbs = [...previousThumbsElementsMap.values()].filter((thumb) => !this._thumbsElementsMap.has(thumb.element));
+                const newThumbs = this._thumbs.filter((thumb) => !previousThumbsElementsMap.has(thumb.element));
                 if (newThumbs.length) {
                     const eventName = 'mu-range-added-thumbs';
                     const event = new CustomEvent(eventName, {
@@ -152,8 +159,11 @@ class MuRange extends MUElement {
                         cancelable: true,
                         composed: true,
                         detail: {
-                            data: newThumbs.map(thumb => ({ name: thumb.name, value: thumb.value }))
-                        }
+                            data: newThumbs.map((thumb) => ({
+                                name: thumb.name,
+                                value: thumb.value,
+                            })),
+                        },
                     });
                     this.dispatchEvent(event);
                 }
@@ -164,8 +174,11 @@ class MuRange extends MUElement {
                         cancelable: true,
                         composed: true,
                         detail: {
-                            data: deletedThumbs.map(thumb => ({ name: thumb.name, value: thumb.value }))
-                        }
+                            data: deletedThumbs.map((thumb) => ({
+                                name: thumb.name,
+                                value: thumb.value,
+                            })),
+                        },
                     });
                     this.dispatchEvent(event);
                 }
@@ -182,15 +195,15 @@ class MuRange extends MUElement {
                     increaseKey = 'ArrowRight';
                     decreaseKey = 'ArrowLeft';
                     break;
-                case "-x":
+                case '-x':
                     decreaseKey = 'ArrowRight';
                     increaseKey = 'ArrowLeft';
                     break;
-                case "y":
+                case 'y':
                     decreaseKey = 'ArrowDown';
                     increaseKey = 'ArrowUp';
                     break;
-                case "-y":
+                case '-y':
                     decreaseKey = 'ArrowUp';
                     increaseKey = 'ArrowDown';
                     break;
@@ -218,6 +231,7 @@ class MuRange extends MUElement {
                     break;
                 case 'End':
                     setValue(thumb.element.maxValue);
+                    break;
                 case 'PageUp':
                     setValue(thumb.value + jumpStepValue);
                     break;
@@ -226,19 +240,21 @@ class MuRange extends MUElement {
                     break;
                 case 'Tab':
                     {
-                        this.switchNavigationActiveItem(e.shiftKey ? 'prev' : 'next') && e.preventDefault();
+                        this.switchNavigationActiveItem(e.shiftKey ? 'prev' : 'next') &&
+                            e.preventDefault();
                     }
                     break;
             }
         };
-        this._pointerdownHandler = ((e) => {
+        this._pointerdownHandler = (e) => {
             if (this.disabled || this.readonly || e.defaultPrevented)
                 return;
             this._isPointerDown = true;
             document.addEventListener('pointermove', this._documentPointermoveHandler);
             document.addEventListener('pointerup', this._documentPointerupHandler);
             const thumbEl = MUElement.closestPierce('mu-range-thumb', e.target);
-            if ((thumbEl && (thumbEl.disabled || thumbEl.readonly) || this.emptyArea === 'prevent'))
+            if ((thumbEl && (thumbEl.disabled || thumbEl.readonly)) ||
+                this.emptyArea === 'prevent')
                 return;
             if (thumbEl && !thumbEl.transparent) {
                 const activeThumb = this._thumbsElementsMap.get(thumbEl);
@@ -251,7 +267,7 @@ class MuRange extends MUElement {
                     bubbles: true,
                     cancelable: true,
                     composed: true,
-                    detail: { values: this._getValuesFromEvent(e) }
+                    detail: { values: this._getValuesFromEvent(e) },
                 });
                 this.dispatchEvent(event);
                 return;
@@ -259,10 +275,14 @@ class MuRange extends MUElement {
             this.emptyArea;
             const { value } = this._getValuesFromEvent(e);
             const shouldBreak = (item) => {
-                return ((item.element.disabled || item.element.readonly) && !(item.element.intersectBehavior === 'pass-over' || item.element.transparent));
+                return ((item.element.disabled || item.element.readonly) &&
+                    !(item.element.intersectBehavior === 'pass-over' ||
+                        item.element.transparent));
             };
             const isNavigable = (item) => {
-                return !(item.element.transparent || item.element.disabled || item.element.readonly);
+                return !(item.element.transparent ||
+                    item.element.disabled ||
+                    item.element.readonly);
             };
             const leftThumb = this.getNavigationItem({
                 direction: 'next',
@@ -291,13 +311,16 @@ class MuRange extends MUElement {
             else if (!leftThumb)
                 candidateThumb = rightThumb;
             else {
-                candidateThumb = value - rightThumb.value > leftThumb.value - value ? leftThumb : rightThumb;
+                candidateThumb =
+                    value - rightThumb.value > leftThumb.value - value
+                        ? leftThumb
+                        : rightThumb;
             }
             if (candidateThumb) {
                 this._setThumbValue(candidateThumb, value);
                 this.activeThumb = candidateThumb;
             }
-        });
+        };
         this._documentPointerupHandler = (e) => {
             this._isPointerDown = false;
             document.removeEventListener('pointermove', this._documentPointermoveHandler);
@@ -326,7 +349,10 @@ class MuRange extends MUElement {
                 }
             });
             this.addEventListener('focus', (e) => {
-                if (this._isPointerDown || this.disabled || this.readonly || e.defaultPrevented)
+                if (this._isPointerDown ||
+                    this.disabled ||
+                    this.readonly ||
+                    e.defaultPrevented)
                     return;
                 if (this._activeThumb) {
                     e.preventDefault();
@@ -349,7 +375,10 @@ class MuRange extends MUElement {
      * @returns an array of objects containing the name and value of each thumb
      */
     getValue() {
-        return this._thumbs.map(thumb => ({ name: thumb.name, value: thumb.value }));
+        return this._thumbs.map((thumb) => ({
+            name: thumb.name,
+            value: thumb.value,
+        }));
     }
     /**
      * Programmatically insert a thumb element
@@ -373,7 +402,9 @@ class MuRange extends MUElement {
             items: this._thumbs,
             fromIndex: this._activeThumb?.index,
             isNavigable(item) {
-                return !(item.element.transparent || item.element.disabled || item.element.readonly);
+                return !(item.element.transparent ||
+                    item.element.disabled ||
+                    item.element.readonly);
             },
         });
         if (!navigationThumb)
@@ -385,8 +416,13 @@ class MuRange extends MUElement {
     }
     dispatchChangeEvent(thumbs = this._thumbs) {
         const eventName = 'mu-range-change';
-        const data = thumbs.map(thumb => ({ name: thumb.name, value: thumb.value }));
-        this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true, detail: { data: data }, cancelable: true }));
+        const data = thumbs.map((thumb) => ({ name: thumb.name, value: thumb.value }));
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            composed: true,
+            detail: { data: data },
+            cancelable: true,
+        }));
     }
     _setThumbValue(thumb, value) {
         const stepValue = this._getThumbStepValue(thumb, value);
@@ -394,9 +430,11 @@ class MuRange extends MUElement {
             return;
         if (this.isControlled) {
             this.sortThumbs();
-            const sortedThumbs = this._thumbs.map(_thumb => ({ name: _thumb.name, value: _thumb.name === thumb.name ? stepValue : thumb.value }));
-            console.table(sortedThumbs);
-            // this.dispatchChangeEvent(sortedThumbs)
+            const sortedThumbs = this._thumbs.map((_thumb) => ({
+                name: _thumb.name,
+                value: _thumb.name === thumb.name ? stepValue : thumb.value,
+            }));
+            this.dispatchChangeEvent(sortedThumbs);
             return;
         }
         const success = thumb.element.setValue(stepValue);
@@ -422,11 +460,11 @@ class MuRange extends MUElement {
                     start = firstThumb.element.minValue;
                     end = firstThumb.element.value;
                     break;
-                case "end":
+                case 'end':
                     start = firstThumb.element.value;
                     end = firstThumb.element.maxValue;
                     break;
-                case "both":
+                case 'both':
                     start = firstThumb.element.minValue;
                     end = firstThumb.element.maxValue;
                     break;
@@ -434,12 +472,18 @@ class MuRange extends MUElement {
                     rangeFillEl.type;
                     break;
             }
-            rangeFillEl.setPercentage([firstThumb.element.getPercentageFromValue(start), firstThumb.element.getPercentageFromValue(end)]);
+            rangeFillEl.setPercentage([
+                firstThumb.element.getPercentageFromValue(start),
+                firstThumb.element.getPercentageFromValue(end),
+            ]);
         }
         else if (firstThumb && secondThumb) {
             await firstThumb.element.updateComplete;
             await secondThumb.element.updateComplete;
-            rangeFillEl.setPercentage([firstThumb.element.getPercentageFromValue(firstThumb.element.value), secondThumb.element.getPercentageFromValue(secondThumb.element.value)]);
+            rangeFillEl.setPercentage([
+                firstThumb.element.getPercentageFromValue(firstThumb.element.value),
+                secondThumb.element.getPercentageFromValue(secondThumb.element.value),
+            ]);
         }
     }
     /**
@@ -451,17 +495,18 @@ class MuRange extends MUElement {
         const numOfSteps = Math.round(value / step);
         let stepValue;
         if (isAdd) {
-            stepValue = Math.min(thumb.element.maxValue, Math.max(thumb.element.minValue, (numOfSteps * step)));
+            stepValue = Math.min(thumb.element.maxValue, Math.max(thumb.element.minValue, numOfSteps * step));
         }
         else {
-            stepValue = Math.min(thumb.element.maxValue, Math.max(thumb.element.minValue, (numOfSteps * step)));
+            stepValue = Math.min(thumb.element.maxValue, Math.max(thumb.element.minValue, numOfSteps * step));
         }
         const nextThumb = this.getNavigationItem({
             direction: 'next',
             items: this._thumbs,
             fromIndex: thumb.index,
             isNavigable(item) {
-                return !(item.element.transparent || item.element.intersectBehavior === 'pass-over');
+                return !(item.element.transparent ||
+                    item.element.intersectBehavior === 'pass-over');
             },
         });
         const prevThumb = this.getNavigationItem({
@@ -469,12 +514,17 @@ class MuRange extends MUElement {
             items: this._thumbs,
             fromIndex: thumb.index,
             isNavigable(item) {
-                return !(item.element.transparent || item.element.intersectBehavior === 'pass-over');
+                return !(item.element.transparent ||
+                    item.element.intersectBehavior === 'pass-over');
             },
         });
-        if (isAdd && nextThumb && nextThumb.element.intersectBehavior === 'prevent') {
+        if (isAdd &&
+            nextThumb &&
+            nextThumb.element.intersectBehavior === 'prevent') {
             const nextRemainder = nextThumb.value % step;
-            if (thumb.element.forceStep && stepValue > nextThumb.value && nextRemainder !== 0) {
+            if (thumb.element.forceStep &&
+                stepValue > nextThumb.value &&
+                nextRemainder !== 0) {
                 const newStep = nextThumb.value - nextRemainder;
                 const newStepRemainder = newStep % step;
                 stepValue = newStep - newStepRemainder;
@@ -482,9 +532,13 @@ class MuRange extends MUElement {
             else
                 stepValue = Math.min(nextThumb.value, stepValue);
         }
-        else if (!isAdd && prevThumb && prevThumb.element.intersectBehavior === 'prevent') {
+        else if (!isAdd &&
+            prevThumb &&
+            prevThumb.element.intersectBehavior === 'prevent') {
             const prevRemainder = prevThumb.value % step;
-            if (thumb.element.forceStep && stepValue < prevThumb.value && prevRemainder !== 0) {
+            if (thumb.element.forceStep &&
+                stepValue < prevThumb.value &&
+                prevRemainder !== 0) {
                 const newStep = prevRemainder + prevThumb.value;
                 const newStepRemainder = newStep % step;
                 stepValue = newStep - newStepRemainder;
@@ -500,15 +554,25 @@ class MuRange extends MUElement {
     _getValuesFromEvent(e) {
         const direction = getComputedStyle(this).direction;
         const boundaries = getElementBoundaries(this);
-        const xPoint = (e.clientX - boundaries.elementLeft);
-        const yPoint = (e.clientY - boundaries.elementTop);
-        const mousePoint = this.axis === 'x' ? xPoint : this.axis === '-x' ? boundaries.width - xPoint : this.axis === 'y' ? yPoint : boundaries.height - yPoint;
-        const elementSize = this.axis === 'x' || this.axis === '-x' ? boundaries.width : boundaries.height;
-        const rawPercentage = Math.max(0, Math.min(((mousePoint / elementSize) * 100), 100));
-        const percentage = direction === 'rtl' || this.axis === 'y' || this.axis === '-y' ? 100 - rawPercentage : rawPercentage;
+        const xPoint = e.clientX - boundaries.elementLeft;
+        const yPoint = e.clientY - boundaries.elementTop;
+        const mousePoint = this.axis === 'x'
+            ? xPoint
+            : this.axis === '-x'
+                ? boundaries.width - xPoint
+                : this.axis === 'y'
+                    ? yPoint
+                    : boundaries.height - yPoint;
+        const elementSize = this.axis === 'x' || this.axis === '-x'
+            ? boundaries.width
+            : boundaries.height;
+        const rawPercentage = Math.max(0, Math.min((mousePoint / elementSize) * 100, 100));
+        const percentage = direction === 'rtl' || this.axis === 'y' || this.axis === '-y'
+            ? 100 - rawPercentage
+            : rawPercentage;
         const minValue = this.min;
         const maxValue = this.max;
-        const roundedPercentage = (Math.round(percentage * 100)) / 100;
+        const roundedPercentage = Math.round(percentage * 100) / 100;
         const value = (percentage / 100) * (maxValue - minValue) + minValue;
         return { roundedPercentage, value, percentage, rawPercentage };
     }
@@ -516,7 +580,9 @@ class MuRange extends MUElement {
      * sorts the thumbs
      */
     sortThumbs() {
-        this._thumbs.sort((a, b) => a.value - b.value).forEach((thumb, i) => {
+        this._thumbs
+            .sort((a, b) => a.value - b.value)
+            .forEach((thumb, i) => {
             thumb.index = i;
         });
     }
@@ -598,7 +664,9 @@ class MuRange extends MUElement {
     `;
     }
 }
-MuRange.styles = [MUElement.cssBase, css `
+MuRange.styles = [
+    MUElement.cssBase,
+    css `
     #container {
       --range-background-color: var(--mu-range-background-color, var(--mu-color-100));
       --range-thickness: var(--mu-range-thickness, calc(var(--mu-base-rem) * .7));
@@ -637,7 +705,8 @@ MuRange.styles = [MUElement.cssBase, css `
       }
     }
     
-  `];
+  `,
+];
 __decorate([
     property({ reflect: true, type: String })
 ], MuRange.prototype, "axis", void 0);

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

@@ -1,7 +1,15 @@
-import { MUElement } from './mu-element.js';
 import { PropertyValues } from 'lit';
+import { MUElement } from './mu-element.js';
 import '@mustib/utils/browser';
 
+type MuSelectItemComponent = {
+    attributes: {
+        value: MuSelectItem['value'];
+        selected: MuSelectItem['selected'];
+        active: MuSelectItem['active'];
+        'filtered-out': MuSelectItem['filteredOut'];
+    };
+};
 /**
  * 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
@@ -22,8 +30,9 @@ declare class MuSelectItem extends MUElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "mu-select-item": MuSelectItem;
+        'mu-select-item': MuSelectItem;
     }
 }
 
 export { MuSelectItem };
+export type { MuSelectItemComponent };

package/components/mu-select-item.js

@@ -1,7 +1,6 @@
-import { M as MUElement, _ as __decorate } from '../mu-element-CZDI_RCY.js';
-import { property } from 'lit/decorators.js';
+import { M as MUElement, _ as __decorate } from '../mu-element-BTuCCJpo.js';
 import { css, html } from 'lit';
-import { staticProperty } from '../decorators.js';
+import { property } from 'lit/decorators.js';
 
 /**
  * This element is designed to be stateless, its purpose is to provide a means of adding custom markup and attributes
@@ -51,7 +50,9 @@ class MuSelectItem extends MUElement {
     `;
     }
 }
-MuSelectItem.styles = [MUElement.cssBase, css `
+MuSelectItem.styles = [
+    MUElement.cssBase,
+    css `
     :host {
       overflow: hidden;
     }
@@ -99,26 +100,30 @@ MuSelectItem.styles = [MUElement.cssBase, css `
         --select-items-background-color: var(--mu-color-300);
       }
     }
-  `];
+  `,
+];
 __decorate([
-    staticProperty()
+    property()
 ], MuSelectItem.prototype, "value", void 0);
 __decorate([
     property({
-        reflect: true, type: Boolean,
+        reflect: true,
+        type: Boolean,
     })
 ], MuSelectItem.prototype, "selected", void 0);
 __decorate([
     property({
-        reflect: true, type: Boolean,
+        reflect: true,
+        type: Boolean,
     })
 ], MuSelectItem.prototype, "active", void 0);
 __decorate([
     property({
-        reflect: true, type: Boolean,
+        reflect: true,
+        type: Boolean,
         attribute: 'filtered-out',
     })
 ], MuSelectItem.prototype, "filteredOut", void 0);
-MuSelectItem.register("mu-select-item");
+MuSelectItem.register('mu-select-item');
 
 export { MuSelectItem };

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

@@ -1,8 +1,20 @@
-import { MUElement } from './mu-element.js';
+import { EventAction, GenerateData } from '@mustib/utils/browser';
 import { PropertyValues } from 'lit';
+import { MUElement } from './mu-element.js';
 import { MuSelectItem } from './mu-select-item.js';
-import { EventAction, GenerateData } from '@mustib/utils/browser';
 
+type MuSelectItemsComponent = {
+    attributes: {
+        opened: MuSelectItems['opened'];
+        multiple: MuSelectItems['multiple'];
+        value: MuSelectItems['value'];
+        'no-clear-active-on-close': MuSelectItems['noClearActiveOnClose'];
+        'default-value': MuSelectItems['defaultValue'];
+        position: MuSelectItems['position'];
+        'open-mode': MuSelectItems['openMode'];
+    };
+    events: Events;
+};
 type SelectItem = {
     element: MuSelectItem;
     value: string;
@@ -10,11 +22,11 @@ type SelectItem = {
     active: boolean;
     index: number;
 };
-type MuSelectItemsEvents = {
+type Events = {
     /**
      * this event is dispatched whenever the user selects an item
      */
-    "mu-select-items-change": CustomEvent<{
+    'mu-select-items-change': CustomEvent<{
         /**
          * selected values
          */
@@ -31,7 +43,7 @@ type MuSelectItemsEvents = {
     /**
      * 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<{
+    'mu-select-items-change-orphans': CustomEvent<{
         /**
          * selected values that are no longer in the slot
          */
@@ -52,7 +64,7 @@ type MuSelectItemsEvents = {
      *
      * 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<{
+    'mu-select-items-change-forced': CustomEvent<{
         /**
          * selected values that are forced
          */
@@ -61,7 +73,7 @@ type MuSelectItemsEvents = {
     /**
      * this event is dispatched whenever the active item changes
      */
-    "mu-select-items-active-item-change": CustomEvent<{
+    'mu-select-items-active-item-change': CustomEvent<{
         id: string | undefined;
     }>;
 };
@@ -132,7 +144,7 @@ declare class MuSelectItems extends MUElement {
      * Used by parent to focus the first or last navigable item when opened
      */
     focusFirstNavigableItem(direction: 'next' | 'prev'): void;
-    protected _getNavigationItem({ direction, switchBack, fromIndex }: {
+    protected _getNavigationItem({ direction, switchBack, fromIndex, }: {
         fromIndex?: number;
         direction: 'next' | 'prev';
         switchBack: boolean;
@@ -174,8 +186,8 @@ declare class MuSelectItems extends MUElement {
      *
      */
     protected _clearSelectState(): void;
-    _dispatchChangeEvent(detail: MuSelectItemsEvents['mu-select-items-change']['detail']): void;
-    _debounceDispatchChangeEvent: (detail: MuSelectItemsEvents["mu-select-items-change"]["detail"]) => void;
+    _dispatchChangeEvent(detail: Events['mu-select-items-change']['detail']): void;
+    _debounceDispatchChangeEvent: (detail: Events["mu-select-items-change"]["detail"]) => void;
     /**
      * Modifies the selection state of a specified item.
      * @param type Specifies the operation to perform:
@@ -208,11 +220,11 @@ declare class MuSelectItems extends MUElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "mu-select-items": MuSelectItems;
+        'mu-select-items': MuSelectItems;
     }
-    interface GlobalEventHandlersEventMap extends MuSelectItemsEvents {
+    interface GlobalEventHandlersEventMap extends Events {
     }
 }
 
 export { MuSelectItems };
-export type { MuSelectItemsEvents };
+export type { Events, MuSelectItemsComponent };