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

package/index.d.ts

@@ -8,8 +8,8 @@ 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 'lit';
+import './components/mu-element.js';
 import '@mustib/utils/browser';
 import './components/mu-range-fill.js';
 import './components/mu-range-thumb-value.js';

package/index.js

@@ -1,4 +1,4 @@
-import './mu-element-CZDI_RCY.js';
+import './mu-element-BTuCCJpo.js';
 import './components/mu-transparent.js';
 import './components/mu-trigger.js';
 import './components/mu-select.js';
@@ -13,5 +13,4 @@ import './components/mu-range-thumb-value.js';
 import './components/mu-icon.js';
 import 'lit';
 import 'lit/decorators.js';
-import './decorators.js';
 import 'lit/directives/repeat.js';

package/{mu-element-CZDI_RCY.js → mu-element-BTuCCJpo.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.
@@ -900,6 +899,7 @@ 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,
@@ -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,
                 });
             }
         }
@@ -1043,7 +1043,7 @@ 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 `
   --mu-color-100: hsl(var(--mu-hue), 20%, 95%);
@@ -1104,13 +1104,21 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], MUElement.prototype, "readonly", void 0);
 __decorate([
-    staticProperty({
-        converter: Boolean
+    property({
+        type: Boolean,
+        attribute: 'no-event-action-attributes',
     })
 ], 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);
+            },
+        },
     })
 ], MUElement.prototype, "eventActionEvents", void 0);
 

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "A customizable web-components library with lit",
   "private": false,
-  "version": "0.0.0-alpha.0",
+  "version": "0.0.0-alpha.2",
   "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",

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 };