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

package/components/mu-element.d.ts

@@ -1,6 +1,14 @@
-import { LitElement } from 'lit';
 import { closestPierce, EventAction } from '@mustib/utils/browser';
+import { LitElement } from 'lit';
 
+type MuElementComponent = {
+    attributes: {
+        disabled: MuElement['disabled'];
+        readonly: MuElement['readonly'];
+        'no-event-action-attributes': MuElement['noEventActionAttributes'];
+        'event-action-events': MuElement['eventActionEvents'];
+    };
+};
 type Elements = [
     'mu-select-item',
     'mu-select-items',
@@ -17,11 +25,11 @@ type Elements = [
     'mu-range-thumb-value',
     'mu-icon'
 ];
-declare abstract class MUElement extends LitElement {
+declare abstract class MuElement extends LitElement {
     #private;
     static closestPierce: typeof closestPierce;
     static register(this: {
-        new (): MUElement;
+        new (): MuElement;
     }, tagName: Elements[number]): void;
     static css: {
         focus: any;
@@ -61,7 +69,7 @@ declare abstract class MUElement extends LitElement {
     get interactable(): boolean;
     muId: string;
     constructor();
-    generateIsReadyPromise({ timeout, onTimeout }?: {
+    generateIsReadyPromise({ timeout, onTimeout, }?: {
         timeout?: number;
         onTimeout?: () => void;
     }): Readonly<{
@@ -71,7 +79,7 @@ declare abstract class MUElement extends LitElement {
         resolve: () => void;
     }>;
     getMuElementById(id: string): {
-        element: MUElement;
+        element: MuElement;
     } | undefined;
     closestPierce(selector: string): HTMLElement | null;
     /**
@@ -104,4 +112,5 @@ declare abstract class MUElement extends LitElement {
     disconnectedCallback(): void;
 }
 
-export { MUElement };
+export { MuElement };
+export type { MuElementComponent };

package/components/mu-element.js

@@ -1,4 +1,3 @@
-export { M as MUElement } from '../mu-element-CZDI_RCY.js';
+export { M as MuElement } from '../mu-element-C36Rgp-m.js';
 import 'lit';
 import 'lit/decorators.js';
-import '../decorators.js';

package/components/mu-icon.d.ts

@@ -1,8 +1,13 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import '@mustib/utils/browser';
 
-declare class MuIcon extends MUElement {
+type MuIconComponent = {
+    attributes: MuElementComponent['attributes'] & {
+        name: MuIcon['name'];
+    };
+};
+declare class MuIcon extends MuElement {
     static styles?: CSSResultGroup | undefined;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;
@@ -23,3 +28,4 @@ declare global {
 }
 
 export { MuIcon };
+export type { MuIconComponent };

package/components/mu-icon.js

@@ -1,9 +1,8 @@
-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 } from 'lit';
-import { staticProperty } from '../decorators.js';
-import 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
-class MuIcon extends MUElement {
+class MuIcon extends MuElement {
     constructor() {
         super(...arguments);
         this.eventActionData = undefined;
@@ -17,15 +16,21 @@ class MuIcon extends MUElement {
     }
     render() {
         const name = this.name;
-        const icon = name && Reflect.has(MuIcon.icons, name) ? MuIcon.icons[name] : MuIcon.icons['noImage'];
-        return name ? html `
+        const icon = name && Reflect.has(MuIcon.icons, name)
+            ? MuIcon.icons[name]
+            : MuIcon.icons.noImage;
+        return name
+            ? html `
       <div id='container' part='container'>
         ${icon}
       </div>
-    ` : undefined;
+    `
+            : undefined;
     }
 }
-MuIcon.styles = [MUElement.cssBase, css `
+MuIcon.styles = [
+    MuElement.cssBase,
+    css `
     :host {
       display: inline-block;
     }
@@ -40,7 +45,7 @@ MuIcon.styles = [MUElement.cssBase, css `
       height: var(--icon-size);
       transition: all 0.1s ease-in-out;
     }
-    `
+    `,
 ];
 MuIcon.icons = {
     downArrow: html `
@@ -55,10 +60,10 @@ MuIcon.icons = {
     `,
     noImage: html `
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 115.19 123.38" style="enable-background:new 0 0 115.19 123.38" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;stroke:#000000;stroke-width:0.5;stroke-miterlimit:2.6131;}</style><g><path class="st0" d="M93.13,79.5c12.05,0,21.82,9.77,21.82,21.82c0,12.05-9.77,21.82-21.82,21.82c-12.05,0-21.82-9.77-21.82-21.82 C71.31,89.27,81.08,79.5,93.13,79.5L93.13,79.5z M8.08,0.25h95.28c2.17,0,4.11,0.89,5.53,2.3c1.42,1.42,2.3,3.39,2.3,5.53v70.01 c-2.46-1.91-5.24-3.44-8.25-4.48V9.98c0-0.43-0.16-0.79-0.46-1.05c-0.26-0.26-0.66-0.46-1.05-0.46H9.94 c-0.43,0-0.79,0.16-1.05,0.46C8.63,9.19,8.43,9.58,8.43,9.98v70.02h0.03l31.97-30.61c1.28-1.18,3.29-1.05,4.44,0.23 c0.03,0.03,0.03,0.07,0.07,0.07l26.88,31.8c-4.73,5.18-7.62,12.08-7.62,19.65c0,3.29,0.55,6.45,1.55,9.4H8.08 c-2.17,0-4.11-0.89-5.53-2.3s-2.3-3.39-2.3-5.53V8.08c0-2.17,0.89-4.11,2.3-5.53S5.94,0.25,8.08,0.25L8.08,0.25z M73.98,79.35 l3.71-22.79c0.3-1.71,1.91-2.9,3.62-2.6c0.66,0.1,1.25,0.43,1.71,0.86l17.1,17.97c-2.18-0.52-4.44-0.79-6.78-0.79 C85.91,71.99,79.13,74.77,73.98,79.35L73.98,79.35z M81.98,18.19c3.13,0,5.99,1.28,8.03,3.32c2.07,2.07,3.32,4.9,3.32,8.03 c0,3.13-1.28,5.99-3.32,8.03c-2.07,2.07-4.9,3.32-8.03,3.32c-3.13,0-5.99-1.28-8.03-3.32c-2.07-2.07-3.32-4.9-3.32-8.03 c0-3.13,1.28-5.99,3.32-8.03C76.02,19.44,78.86,18.19,81.98,18.19L81.98,18.19z M85.82,88.05l19.96,21.6 c1.58-2.39,2.5-5.25,2.5-8.33c0-8.36-6.78-15.14-15.14-15.14C90.48,86.17,87.99,86.85,85.82,88.05L85.82,88.05z M100.44,114.58 l-19.96-21.6c-1.58,2.39-2.5,5.25-2.5,8.33c0,8.36,6.78,15.14,15.14,15.14C95.78,116.46,98.27,115.78,100.44,114.58L100.44,114.58z"/></g></svg>
-    `
+    `,
 };
 __decorate([
-    staticProperty()
+    property()
 ], MuIcon.prototype, "name", void 0);
 MuIcon.register('mu-icon');
 

package/components/mu-range-fill.d.ts

@@ -1,8 +1,14 @@
 import { CSSResultGroup } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import '@mustib/utils/browser';
 
-declare class MuRangeFill extends MUElement {
+type MuRangeFillComponent = {
+    attributes: MuElementComponent['attributes'] & {
+        for: MuRangeFill['for'];
+        type: MuRangeFill['type'];
+    };
+};
+declare class MuRangeFill extends MuElement {
     static styles: CSSResultGroup;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;
@@ -46,3 +52,4 @@ declare class MuRangeFill extends MUElement {
 }
 
 export { MuRangeFill };
+export type { MuRangeFillComponent };

package/components/mu-range-fill.js

@@ -1,9 +1,8 @@
-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 } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import '../decorators.js';
 
-class MuRangeFill extends MUElement {
+class MuRangeFill extends MuElement {
     constructor() {
         super(...arguments);
         this.eventActionData = undefined;
@@ -48,7 +47,9 @@ class MuRangeFill extends MUElement {
       `;
     }
 }
-MuRangeFill.styles = [MUElement.cssBase, css `
+MuRangeFill.styles = [
+    MuElement.cssBase,
+    css `
     #container {
       --range-fill-background-color: var(--mu-range-fill-background-color, var(--mu-color-500));
       --start: 25%;
@@ -79,7 +80,8 @@ MuRangeFill.styles = [MUElement.cssBase, css `
       top: var(--start);
       bottom: calc(100% - var(--end));
     }
-  `];
+  `,
+];
 __decorate([
     property()
 ], MuRangeFill.prototype, "for", void 0);

package/components/mu-range-thumb-value.d.ts

@@ -1,8 +1,14 @@
 import { CSSResultGroup } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import '@mustib/utils/browser';
 
-declare class MuRangeThumbValue extends MUElement {
+type MuRangeThumbValueComponent = {
+    attributes: MuElementComponent['attributes'] & {
+        reversed: MuRangeThumbValue['reversed'];
+        type: MuRangeThumbValue['type'];
+    };
+};
+declare class MuRangeThumbValue extends MuElement {
     static styles: CSSResultGroup;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;
@@ -46,3 +52,4 @@ declare class MuRangeThumbValue extends MUElement {
 }
 
 export { MuRangeThumbValue };
+export type { MuRangeThumbValueComponent };

package/components/mu-range-thumb-value.js

@@ -1,9 +1,8 @@
-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 } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import '../decorators.js';
 
-class MuRangeThumbValue extends MUElement {
+class MuRangeThumbValue extends MuElement {
     constructor() {
         super(...arguments);
         this.eventActionData = undefined;
@@ -41,16 +40,16 @@ class MuRangeThumbValue extends MUElement {
     async setValue(data) {
         await this.updateComplete;
         switch (this.type) {
-            case "percentage":
+            case 'percentage':
                 // keep two decimal places
-                this.contentEl.textContent = `${(Math.trunc(data.percentage * 100) / 100)}%`;
+                this.contentEl.textContent = `${Math.trunc(data.percentage * 100) / 100}%`;
                 break;
-            case "percentage:round":
+            case 'percentage:round':
                 this.contentEl.textContent = `${Math.round(data.percentage)}%`;
                 break;
-            case "unit":
+            case 'unit':
                 // keep one decimal place
-                this.contentEl.textContent = `${(Math.trunc(data.value * 10) / 10)}`;
+                this.contentEl.textContent = `${Math.trunc(data.value * 10) / 10}`;
                 break;
             default:
                 this.type;
@@ -72,7 +71,9 @@ class MuRangeThumbValue extends MUElement {
       `;
     }
 }
-MuRangeThumbValue.styles = [MUElement.cssBase, css `
+MuRangeThumbValue.styles = [
+    MuElement.cssBase,
+    css `
     :host([reversed]) #container[axis='x'] {
       top: 100%;
       bottom: unset;
@@ -122,7 +123,8 @@ MuRangeThumbValue.styles = [MUElement.cssBase, css `
         color: var(--mu-color-100);
       }
     }
-  `];
+  `,
+];
 __decorate([
     property({ type: Boolean })
 ], MuRangeThumbValue.prototype, "reversed", void 0);

package/components/mu-range-thumb.d.ts

@@ -1,9 +1,22 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import { MuRangeThumbValue } from './mu-range-thumb-value.js';
 import '@mustib/utils/browser';
 
-declare class MuRangeThumb extends MUElement {
+type MuRangeThumbComponent = {
+    attributes: MuElementComponent['attributes'] & {
+        'min-value': MuRangeThumb['minValue'];
+        'max-value': MuRangeThumb['maxValue'];
+        value: MuRangeThumb['value'];
+        step: MuRangeThumb['step'];
+        name: MuRangeThumb['name'];
+        focused: MuRangeThumb['focused'];
+        'intersect-behavior': MuRangeThumb['intersectBehavior'];
+        transparent: MuRangeThumb['transparent'];
+        'force-step': MuRangeThumb['forceStep'];
+    };
+};
+declare class MuRangeThumb extends MuElement {
     static styles?: CSSResultGroup | undefined;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;
@@ -118,3 +131,4 @@ declare global {
 }
 
 export { MuRangeThumb };
+export type { MuRangeThumbComponent };

package/components/mu-range-thumb.js

@@ -1,16 +1,16 @@
-import { M as MUElement, _ as __decorate, g as getElementBoundaries } from '../mu-element-CZDI_RCY.js';
+import { M as MuElement, _ as __decorate, g as getElementBoundaries } from '../mu-element-C36Rgp-m.js';
 import { css, html } from 'lit';
 import { state, property, query } from 'lit/decorators.js';
-import { MuRangeThumbValue } from './mu-range-thumb-value.js';
 import { MuTransparent } from './mu-transparent.js';
-import '../decorators.js';
+import { MuRangeThumbValue } from './mu-range-thumb-value.js';
 
-class MuRangeThumb extends MUElement {
+class MuRangeThumb extends MuElement {
     get range() {
         return this._range;
     }
     set range(value) {
-        if (this._isRangeReady.resolved && (value[0] > this.minValue || value[1] < this.maxValue)) {
+        if (this._isRangeReady.resolved &&
+            (value[0] > this.minValue || value[1] < this.maxValue)) {
             console.warn(`range must not be less than max value (${this.maxValue}) or greater than min value (${this.minValue}), but got (${value})`, this);
             return;
         }
@@ -71,7 +71,10 @@ class MuRangeThumb extends MUElement {
                     this._valueElements.add(el);
                 }
             };
-            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(addElement);
                 }
@@ -121,10 +124,10 @@ class MuRangeThumb extends MUElement {
     _updateValueElements() {
         if (this._valueElements.size === 0)
             return;
-        this._valueElements.forEach(el => {
+        this._valueElements.forEach((el) => {
             el.setValue({
                 value: this.value,
-                percentage: this.getPercentageFromValue(this.value)
+                percentage: this.getPercentageFromValue(this.value),
             });
         });
     }
@@ -158,26 +161,29 @@ class MuRangeThumb extends MUElement {
      * @returns A boolean indicating if the value was changed
      */
     setValueFromPercentage(percentage) {
-        const value = ((percentage / 100) * (this.range[1] - this.range[0])) + this.range[0];
+        const value = (percentage / 100) * (this.range[1] - this.range[0]) + this.range[0];
         return this.setValue(value);
     }
     /**
      * Converts a given value to a percentage based on the current range and returns it.
      */
     getPercentageFromValue(value) {
-        return ((value) / (this.range[1] - this.range[0])) * 100;
+        return (value / (this.range[1] - this.range[0])) * 100;
     }
     /**
      * Updates the axis of related mu-range-thumb-value elements
      */
     updateValueElementsAxis() {
-        this._valueElements.forEach(el => el.setAxis(this.axis === 'x' || this.axis === '-x' ? 'x' : 'y'));
+        this._valueElements.forEach((el) => {
+            el.setAxis(this.axis === 'x' || this.axis === '-x' ? 'x' : 'y');
+        });
     }
     async updated(_changedProperties) {
         await this.updateComplete;
         if (_changedProperties.has('axis')) {
             this.updateValueElementsAxis();
-            this.ariaOrientation = this.axis === '-y' || this.axis === 'y' ? 'vertical' : 'horizontal';
+            this.ariaOrientation =
+                this.axis === '-y' || this.axis === 'y' ? 'vertical' : 'horizontal';
         }
         if (_changedProperties.has('value')) {
             if (!this.isValidValue(this.value)) {
@@ -187,13 +193,15 @@ class MuRangeThumb extends MUElement {
             this.setAttribute('aria-valuenow', `${this.value}`);
             this._updateValueElements();
         }
-        if (_changedProperties.has('minValue') || _changedProperties.has('maxValue')) {
+        if (_changedProperties.has('minValue') ||
+            _changedProperties.has('maxValue')) {
             this.setAttribute('aria-valuemin', `${this.minValue}`);
             this.setAttribute('aria-valuemax', `${this.maxValue}`);
             if (this.minValue > this.maxValue) {
                 console.warn(`minValue attribute must not be greater than maxValue attribute, but got (${this.minValue}, ${this.maxValue})`, this);
             }
-            else if (this.minValue < this.range[0] || this.maxValue > this.range[1]) {
+            else if (this.minValue < this.range[0] ||
+                this.maxValue > this.range[1]) {
                 console.warn(`minValue (${this.minValue}) and maxValue (${this.maxValue}) attributes must be equal to or in the range of range property (${this.range})`, this);
             }
         }
@@ -206,7 +214,9 @@ class MuRangeThumb extends MUElement {
     `;
     }
 }
-MuRangeThumb.styles = [MUElement.cssBase, css `
+MuRangeThumb.styles = [
+    MuElement.cssBase,
+    css `
     #container {
       --thumb-size: var(--mu-range-thumb-size, calc(var(--range-thickness) * 3));
       --range-thumb-background-color: var(--mu-range-thumb-background-color, var(--mu-color-500));
@@ -225,7 +235,7 @@ MuRangeThumb.styles = [MUElement.cssBase, css `
 
 
     :host([focused]) #container {
-      ${MUElement.css.focus};
+      ${MuElement.css.focus};
     }
 
     #container[axis='x'] {
@@ -254,7 +264,8 @@ MuRangeThumb.styles = [MUElement.cssBase, css `
       left: 50%;
       transform: translateX(-50%);
     }
-  `];
+  `,
+];
 __decorate([
     state()
 ], MuRangeThumb.prototype, "axis", void 0);
@@ -262,25 +273,25 @@ __decorate([
     property({
         reflect: true,
         type: Number,
-        attribute: 'min-value'
+        attribute: 'min-value',
     })
 ], MuRangeThumb.prototype, "minValue", void 0);
 __decorate([
     property({
         reflect: true,
         type: Number,
-        attribute: 'max-value'
+        attribute: 'max-value',
     })
 ], MuRangeThumb.prototype, "maxValue", void 0);
 __decorate([
     property({
         reflect: true,
         type: Number,
-        attribute: 'value'
+        attribute: 'value',
     })
 ], MuRangeThumb.prototype, "value", void 0);
 __decorate([
-    property({ reflect: true, type: Number, })
+    property({ reflect: true, type: Number })
 ], MuRangeThumb.prototype, "step", void 0);
 __decorate([
     property()

package/components/mu-range.d.ts

@@ -1,10 +1,21 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { MUElement } from './mu-element.js';
-import { MuRangeThumb } from './mu-range-thumb.js';
+import { MuElement, MuElementComponent } from './mu-element.js';
 import { MuRangeFill } from './mu-range-fill.js';
+import { MuRangeThumb } from './mu-range-thumb.js';
 import '@mustib/utils/browser';
 import './mu-range-thumb-value.js';
 
+type MuRangeComponent = {
+    attributes: MuElementComponent['attributes'] & {
+        axis: MuRange['axis'];
+        min: MuRange['min'];
+        max: MuRange['max'];
+        value: MuRange['value'];
+        'default-value': MuRange['defaultValue'];
+        'empty-area': MuRange['emptyArea'];
+    };
+    events: Events;
+};
 type RangeThumb = {
     element: MuRangeThumb;
     linkedFillElements: RangeFill[] | undefined;
@@ -53,7 +64,7 @@ type Events = {
         }[];
     }>;
 };
-declare class MuRange extends MUElement {
+declare class MuRange extends MuElement {
     static styles?: CSSResultGroup | undefined;
     eventActionData: undefined;
     _addEventActionAttributes: undefined;
@@ -204,3 +215,4 @@ declare global {
 }
 
 export { MuRange };
+export type { MuRangeComponent };