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

package/components/mu-trigger.js

@@ -1,8 +1,7 @@
-import { _ as __decorate, p as parseJson } from '../mu-element-CZDI_RCY.js';
+import { _ as __decorate, p as parseJson } from '../mu-element-C36Rgp-m.js';
+import { property } from 'lit/decorators.js';
 import { MuTransparent } from './mu-transparent.js';
-import { staticProperty } from '../decorators.js';
 import 'lit';
-import 'lit/decorators.js';
 
 /**
  * `<mu-trigger>` is a helper element that listens for a specified event
@@ -79,14 +78,21 @@ class MuTrigger extends MuTransparent {
             const { dispatchElement, eventName, shouldDispatch } = this._createDispatchEvent(e);
             if (!shouldDispatch)
                 return;
-            dispatchElement.dispatchEvent(new CustomEvent(eventName, { bubbles: !this.noBubble, composed: true, cancelable: !this.noCancelable, detail: this.detail }));
+            dispatchElement.dispatchEvent(new CustomEvent(eventName, {
+                bubbles: !this.noBubble,
+                composed: true,
+                cancelable: !this.noCancelable,
+                detail: this.detail,
+            }));
         };
     }
     /**
      * The current target of the event.
      */
     get _currentTarget() {
-        const currTarget = this.currentTargetSelector ? this.closestPierce(this.currentTargetSelector) : this;
+        const currTarget = this.currentTargetSelector
+            ? this.closestPierce(this.currentTargetSelector)
+            : this;
         if (!currTarget) {
             console.warn(`no element found with selector (${this.currentTargetSelector}) as the current target to listen to (${this.listenTo}) events.\nFalling back to the current element`, this);
         }
@@ -97,7 +103,9 @@ class MuTrigger extends MuTransparent {
      * If not provided, the trigger dispatches the event on itself.
      */
     _getDispatchElement() {
-        const element = this.dispatchToSelector ? this.closestPierce(this.dispatchToSelector) : this;
+        const element = this.dispatchToSelector
+            ? this.closestPierce(this.dispatchToSelector)
+            : this;
         if (!element)
             console.warn(`no element found with selector ${this.dispatchToSelector} to dispatch ${this.dispatch} to.\nFalling back to the current element`, this);
         return element || this;
@@ -114,11 +122,11 @@ class MuTrigger extends MuTransparent {
      * @param e The original event that was fired.
      * @returns {Object} An object with the properties above.
      */
-    _createDispatchEvent(e) {
+    _createDispatchEvent(_e) {
         return {
             shouldDispatch: true,
             eventName: this.dispatch,
-            dispatchElement: this._getDispatchElement()
+            dispatchElement: this._getDispatchElement(),
         };
     }
     /**
@@ -126,49 +134,77 @@ class MuTrigger extends MuTransparent {
      */
     connectedCallback() {
         super.connectedCallback();
-        this._currentTarget.addEventListener(this.listenTo, this._listener, { capture: !this.noCapture });
+        this._currentTarget.addEventListener(this.listenTo, this._listener, {
+            capture: !this.noCapture,
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this._currentTarget.removeEventListener(this.listenTo, this._listener, { capture: !this.noCapture });
+        this._currentTarget.removeEventListener(this.listenTo, this._listener, {
+            capture: !this.noCapture,
+        });
     }
 }
 __decorate([
-    staticProperty()
+    property({
+        attribute: 'listen-to',
+    })
 ], MuTrigger.prototype, "listenTo", void 0);
 __decorate([
-    staticProperty({
+    property({
         converter(value) {
             return value ? parseJson(value) : undefined;
         },
     })
 ], MuTrigger.prototype, "detail", void 0);
 __decorate([
-    staticProperty({ converter: Boolean })
+    property({
+        type: Boolean,
+        attribute: 'stop-propagation',
+    })
 ], MuTrigger.prototype, "stopPropagation", void 0);
 __decorate([
-    staticProperty({ converter: Boolean })
+    property({
+        type: Boolean,
+        attribute: 'stop-immediate-propagation',
+    })
 ], MuTrigger.prototype, "stopImmediatePropagation", void 0);
 __decorate([
-    staticProperty()
+    property()
 ], MuTrigger.prototype, "dispatch", void 0);
 __decorate([
-    staticProperty({ converter: Boolean })
+    property({
+        type: Boolean,
+        attribute: 'no-cancelable',
+    })
 ], MuTrigger.prototype, "noCancelable", void 0);
 __decorate([
-    staticProperty({ converter: Boolean })
+    property({
+        type: Boolean,
+        attribute: 'no-bubble',
+    })
 ], MuTrigger.prototype, "noBubble", void 0);
 __decorate([
-    staticProperty({ converter: Boolean })
+    property({
+        type: Boolean,
+        attribute: 'no-capture',
+    })
 ], MuTrigger.prototype, "noCapture", void 0);
 __decorate([
-    staticProperty()
+    property({
+        attribute: 'current-target-selector',
+    })
 ], MuTrigger.prototype, "currentTargetSelector", void 0);
 __decorate([
-    staticProperty({ converter: Boolean })
+    property({
+        type: Boolean,
+        attribute: 'no-prevent-default',
+    })
 ], MuTrigger.prototype, "noPreventDefault", void 0);
 __decorate([
-    staticProperty()
+    property({
+        attribute: 'dispatch-to-selector',
+    })
 ], MuTrigger.prototype, "dispatchToSelector", void 0);
 MuTrigger.register('mu-trigger');
 

package/index.d.ts

@@ -1,15 +1,48 @@
-import './components/mu-transparent.js';
-import './components/mu-trigger.js';
-import './components/mu-select.js';
-import './components/mu-select-item.js';
-import './components/mu-select-items.js';
-import './components/mu-select-label.js';
-import './components/mu-select-label-content.js';
-import './components/mu-range.js';
-import './components/mu-range-thumb.js';
-import './components/mu-icon.js';
-import './components/mu-element.js';
+import { MuIconComponent } from './components/mu-icon.js';
+export { MuIcon } from './components/mu-icon.js';
+import { MuRangeComponent } from './components/mu-range.js';
+export { MuRange } from './components/mu-range.js';
+import { MuRangeFillComponent } from './components/mu-range-fill.js';
+export { MuRangeFill } from './components/mu-range-fill.js';
+import { MuRangeThumbComponent } from './components/mu-range-thumb.js';
+export { MuRangeThumb } from './components/mu-range-thumb.js';
+import { MuRangeThumbValueComponent } from './components/mu-range-thumb-value.js';
+export { MuRangeThumbValue } from './components/mu-range-thumb-value.js';
+import { MuSelectComponent } from './components/mu-select.js';
+export { MuSelect } from './components/mu-select.js';
+import { MuSelectItemComponent } from './components/mu-select-item.js';
+export { MuSelectItem } from './components/mu-select-item.js';
+import { MuSelectItemsComponent } from './components/mu-select-items.js';
+export { Events, MuSelectItems } from './components/mu-select-items.js';
+import { MuSelectLabelComponent } from './components/mu-select-label.js';
+export { MuSelectLabel } from './components/mu-select-label.js';
+import { MuSelectLabelContentComponent } from './components/mu-select-label-content.js';
+export { MuSelectLabelContent } from './components/mu-select-label-content.js';
+import { MuTransparentComponent } from './components/mu-transparent.js';
+export { MuTransparent } from './components/mu-transparent.js';
+import { MuTriggerComponent } from './components/mu-trigger.js';
+export { MuTrigger } from './components/mu-trigger.js';
+export { MuElement, MuElementComponent } from './components/mu-element.js';
 import 'lit';
 import '@mustib/utils/browser';
-import './components/mu-range-fill.js';
-import './components/mu-range-thumb-value.js';
+
+type ComponentsAttributes = {
+    'mu-select': MuSelectComponent['attributes'];
+    'mu-select-items': MuSelectItemsComponent['attributes'];
+    'mu-select-item': MuSelectItemComponent['attributes'];
+    'mu-select-label': MuSelectLabelComponent['attributes'];
+    'mu-select-label-content': MuSelectLabelContentComponent['attributes'];
+    'mu-range': MuRangeComponent['attributes'];
+    'mu-range-fill': MuRangeFillComponent['attributes'];
+    'mu-range-thumb': MuRangeThumbComponent['attributes'];
+    'mu-range-thumb-value': MuRangeThumbValueComponent['attributes'];
+    'mu-icon': MuIconComponent['attributes'];
+    'mu-transparent': MuTransparentComponent['attributes'];
+    'mu-trigger': MuTriggerComponent['attributes'];
+};
+type MuComponentsAttributes<GlobalAttributes = Record<string, any>> = {
+    [key in keyof ComponentsAttributes]: Partial<ComponentsAttributes[key]> & GlobalAttributes;
+};
+
+export { MuIconComponent, MuRangeComponent, MuRangeFillComponent, MuRangeThumbComponent, MuRangeThumbValueComponent, MuSelectComponent, MuSelectItemComponent, MuSelectItemsComponent, MuSelectLabelComponent, MuSelectLabelContentComponent, MuTransparentComponent, MuTriggerComponent };
+export type { MuComponentsAttributes };

package/index.js

@@ -1,17 +1,16 @@
-import './mu-element-CZDI_RCY.js';
-import './components/mu-transparent.js';
-import './components/mu-trigger.js';
-import './components/mu-select.js';
-import './components/mu-select-item.js';
-import './components/mu-select-items.js';
-import './components/mu-select-label.js';
-import './components/mu-select-label-content.js';
-import './components/mu-range.js';
-import './components/mu-range-fill.js';
-import './components/mu-range-thumb.js';
-import './components/mu-range-thumb-value.js';
-import './components/mu-icon.js';
+export { M as MuElement } from './mu-element-C36Rgp-m.js';
+export { MuIcon } from './components/mu-icon.js';
+export { MuRange } from './components/mu-range.js';
+export { MuRangeFill } from './components/mu-range-fill.js';
+export { MuRangeThumb } from './components/mu-range-thumb.js';
+export { MuRangeThumbValue } from './components/mu-range-thumb-value.js';
+export { MuSelect } from './components/mu-select.js';
+export { MuSelectItem } from './components/mu-select-item.js';
+export { MuSelectItems } from './components/mu-select-items.js';
+export { MuSelectLabel } from './components/mu-select-label.js';
+export { MuSelectLabelContent } from './components/mu-select-label-content.js';
+export { MuTransparent } from './components/mu-transparent.js';
+export { MuTrigger } from './components/mu-trigger.js';
 import 'lit';
 import 'lit/decorators.js';
-import './decorators.js';
 import 'lit/directives/repeat.js';

package/{mu-element-CZDI_RCY.js → mu-element-C36Rgp-m.js}

@@ -1,6 +1,5 @@
 import { css, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { staticProperty } from './decorators.js';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -894,12 +893,13 @@ class EventAction {
     };
 }
 
-var _a, _MUElement_muElements;
+var _a, _MuElement_muElements;
 let count = 0;
-class MUElement extends LitElement {
+class MuElement extends LitElement {
     static register(tagName) {
         if (customElements.get(tagName))
             return;
+        // biome-ignore lint/complexity/noThisInStatic: <>
         customElements.define(tagName, this);
     }
     get interactable() {
@@ -919,12 +919,12 @@ class MUElement extends LitElement {
             value: `mu-element-${++count}`,
             configurable: false,
             writable: false,
-            enumerable: true
+            enumerable: true,
         });
     }
     generateIsReadyPromise({ timeout = 1000, onTimeout = () => {
         console.warn('timeout reached for isReady promise', this);
-    } } = {}) {
+    }, } = {}) {
         const obj = {
             status: 'pending',
             resolved: false,
@@ -950,7 +950,7 @@ class MUElement extends LitElement {
         return obj;
     }
     getMuElementById(id) {
-        return __classPrivateFieldGet(_a, _a, "f", _MUElement_muElements).get(id);
+        return __classPrivateFieldGet(_a, _a, "f", _MuElement_muElements).get(id);
     }
     closestPierce(selector) {
         return _a.closestPierce(selector, this);
@@ -974,9 +974,9 @@ class MUElement extends LitElement {
      *  - `shouldBreak` - An optional function that takes an item and returns a boolean indicating whether to break the loop.
      */
     getNavigationItem(data) {
-        const { direction, switchBack = false, items, fromIndex = direction === 'next' ? -1 : items.length, isNavigable, shouldBreak } = data;
+        const { direction, switchBack = false, items, fromIndex = direction === 'next' ? -1 : items.length, isNavigable, shouldBreak, } = data;
         let navigationItem;
-        const getItem = ({ endIndex, startIndex }) => {
+        const getItem = ({ endIndex, startIndex, }) => {
             const numOfRetries = endIndex + 1 - startIndex;
             for (let i = 0; i < numOfRetries && !navigationItem; i++) {
                 const itemIndex = direction === 'next' ? startIndex + i : endIndex - i;
@@ -993,26 +993,26 @@ class MUElement extends LitElement {
         if (direction === 'next') {
             getItem({
                 startIndex: fromIndex + 1,
-                endIndex: items.length - 1
+                endIndex: items.length - 1,
             });
         }
         else {
             getItem({
                 startIndex: 0,
-                endIndex: fromIndex - 1
+                endIndex: fromIndex - 1,
             });
         }
         if (!navigationItem && switchBack) {
             if (direction === 'next') {
                 getItem({
                     startIndex: 0,
-                    endIndex: fromIndex - 1
+                    endIndex: fromIndex - 1,
                 });
             }
             else {
                 getItem({
                     startIndex: fromIndex + 1,
-                    endIndex: items.length - 1
+                    endIndex: items.length - 1,
                 });
             }
         }
@@ -1023,7 +1023,7 @@ class MUElement extends LitElement {
         this.dataset.muId = this.muId;
         if (!this.id)
             this.id = this.muId;
-        __classPrivateFieldGet(_a, _a, "f", _MUElement_muElements).set(this.muId, { element: this });
+        __classPrivateFieldGet(_a, _a, "f", _MuElement_muElements).set(this.muId, { element: this });
         this.updateComplete.then(() => {
             this.eventActionData?.eventAction.addListeners(this, this.eventActionEvents || this.eventActionData.events);
             if (!this.noEventActionAttributes)
@@ -1032,20 +1032,20 @@ class MUElement extends LitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        __classPrivateFieldGet(_a, _a, "f", _MUElement_muElements).delete(this.muId);
+        __classPrivateFieldGet(_a, _a, "f", _MuElement_muElements).delete(this.muId);
         this.eventActionData?.eventAction.removeListeners(this, this.eventActionEvents || this.eventActionData.events);
     }
 }
-_a = MUElement;
-_MUElement_muElements = { value: new Map() };
-MUElement.closestPierce = closestPierce;
-MUElement.css = {
+_a = MuElement;
+_MuElement_muElements = { value: new Map() };
+MuElement.closestPierce = closestPierce;
+MuElement.css = {
     focus: css `
     --focus-color: oklch(from currentColor l c h / 0.5);
     box-shadow: 0 0 0 var(--focus-width, 2px) var(--mu-focus-color, var(--focus-color)) inset;
-  `
+  `,
 };
-MUElement.cssColors = css `
+MuElement.cssColors = css `
   --mu-color-100: hsl(var(--mu-hue), 20%, 95%);
   --mu-color-200: hsl(var(--mu-hue), 30%, 85%);
   --mu-color-300: hsl(var(--mu-hue), 40%, 75%);
@@ -1056,7 +1056,7 @@ MUElement.cssColors = css `
   --mu-color-800: hsl(var(--mu-hue), 90%, 25%);
   --mu-color-900: hsl(var(--mu-hue), 100%, 15%);
 `;
-MUElement.cssBase = css `
+MuElement.cssBase = css `
     *, *::before, *::after, :where(:host) {
       margin: 0;
       padding: 0;
@@ -1099,19 +1099,28 @@ MUElement.cssBase = css `
   `;
 __decorate([
     property({ type: Boolean, reflect: true })
-], MUElement.prototype, "disabled", void 0);
+], MuElement.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], MUElement.prototype, "readonly", void 0);
+], MuElement.prototype, "readonly", void 0);
 __decorate([
-    staticProperty({
-        converter: Boolean
+    property({
+        type: Boolean,
+        attribute: 'no-event-action-attributes',
     })
-], MUElement.prototype, "noEventActionAttributes", void 0);
+], MuElement.prototype, "noEventActionAttributes", void 0);
 __decorate([
-    staticProperty({
-        converter: parseJson
+    property({
+        converter: {
+            toAttribute(value, _type) {
+                return JSON.stringify(value);
+            },
+            fromAttribute(value, _type) {
+                return value === null ? [] : parseJson(value);
+            },
+        },
+        attribute: 'event-action-events',
     })
-], MUElement.prototype, "eventActionEvents", void 0);
+], MuElement.prototype, "eventActionEvents", void 0);
 
-export { EventAction as E, MUElement as M, __decorate as _, disableElementScroll as a, debounce as d, enableElementScroll as e, getElementBoundaries as g, parseJson as p, throttle as t, wait as w };
+export { EventAction as E, MuElement as M, __decorate as _, disableElementScroll as a, debounce as d, enableElementScroll as e, getElementBoundaries as g, parseJson as p, throttle as t, wait as w };

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "A customizable web-components library with lit",
   "private": false,
-  "version": "0.0.0-alpha.1",
+  "version": "0.0.0-alpha.3",
   "dependencies": {
     "@mustib/utils": "2.7.0"
   },
@@ -11,6 +11,7 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
+    "@biomejs/biome": "2.3.5",
     "@rollup/plugin-multi-entry": "^7.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
@@ -29,12 +30,6 @@
         "default": "./index.js"
       }
     },
-    "./decorators": {
-      "import": {
-        "types": "./decorators.d.ts",
-        "default": "./decorators.js"
-      }
-    },
     "./*": {
       "import": {
         "types": "./*.d.ts",

package/decorators.d.ts

@@ -1,34 +0,0 @@
-type Options = {
-    /**
-     * The HTML attribute to get the value from.
-     * If not provided, it defaults to the kebab case version of the property name.
-     * @example If the property name is "propName", the attribute will default to "prop-name".
-     */
-    attribute?: string;
-    /**
-     * A function that converts the attribute value to the property value.
-     */
-    converter?: (value: string | null) => any;
-    /**
-     * Whether to reflect the default value of the property to the attribute.
-     *
-     * The default value is the value that is assigned to the property on the class definition like so:
-     * `propName = value` or basically any value that calls the setter before the first call to the getter.
-     *
-     * This is useful when you want the attribute to have the same value as the property by default.
-     *
-     * For example, if you have a property `visible` with a default value of `true`, and you want the attribute `visible` to have the value `"true"` by default, you can set `reflectDefault` to `true`.
-     *
-     * @default false
-     */
-    reflectDefault?: boolean;
-    /**
-     * A function that converts the default property value to the attribute value.
-     *
-     * this is only used if `reflectDefault` is true
-     */
-    reflectConverter?: (value: any) => string;
-};
-declare function staticProperty(options?: Options): <T extends HTMLElement>(target: T, key: string) => void;
-
-export { staticProperty };

package/decorators.js

@@ -1,50 +0,0 @@
-const defaultConverter = (value) => (value ?? undefined);
-const toKebabCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-const defaultReflectConverter = (value) => value.toString();
-function staticProperty(options) {
-    return function staticPropertyDecorator(target, key) {
-        if (!Reflect.has(target, '__staticProperties')) {
-            Reflect.set(target, '__staticProperties', new WeakMap());
-        }
-        const { attribute = toKebabCase(key), converter = defaultConverter, reflectDefault = false, reflectConverter = defaultReflectConverter } = options ?? {};
-        Reflect.defineProperty(target, key, {
-            configurable: false,
-            enumerable: true,
-            set(v) {
-                const mapData = getOrCreateMapData(this, key);
-                if (mapData.hasBeenCalled) {
-                    throw new Error(`cannot set ${v} for a static property ${key} after first call to get`);
-                }
-                if (reflectDefault) {
-                    this.setAttribute(attribute, reflectConverter(v));
-                }
-                mapData.defaultValue = v;
-            },
-            get() {
-                const mapData = getOrCreateMapData(this, key);
-                if (mapData.hasBeenCalled)
-                    return mapData.value;
-                mapData.hasBeenCalled = true;
-                const attrValue = this.getAttribute(attribute);
-                if (attrValue === null && mapData.defaultValue !== undefined) {
-                    mapData.value = mapData.defaultValue;
-                }
-                else
-                    mapData.value = converter(attrValue);
-                return mapData.value;
-            },
-        });
-    };
-}
-function getOrCreateMapData(instance, key) {
-    let properties = Reflect.get(Reflect.getPrototypeOf(instance), '__staticProperties');
-    let _mapData = properties.get(instance) || properties.set(instance, {}).get(instance);
-    const staticData = _mapData[key] ||= {
-        value: undefined,
-        hasBeenCalled: false,
-        defaultValue: undefined
-    };
-    return staticData;
-}
-
-export { staticProperty };