@htmlplus/element 3.1.3 → 3.2.0

package/dist/{client-BsD9JZY4.js → client-Cu3jtWIP.js}

@@ -1204,6 +1204,22 @@ const styles$1 = (input) => {
         .join('; ');
 };
 
+const toCSSColor = (input) => {
+    return isCSSColor(input) ? input : undefined;
+};
+
+const toCSSUnit = (input) => {
+    if (input == null || input === '') {
+        return;
+    }
+    if (typeof input === 'number' || !isNaN(Number(input))) {
+        return `${input}px`;
+    }
+    if (/^\d+(\.\d+)?(px|pt|cm|mm|in|em|rem|%|vw|vh)$/.test(input)) {
+        return input;
+    }
+};
+
 function toDecorator(util, ...parameters) {
     return function (target, key) {
         defineProperty(target, key, {
@@ -1755,6 +1771,70 @@ function State() {
     };
 }
 
+// TODO: check the logic
+function Style() {
+    return function (target, key) {
+        const LAST = Symbol();
+        const SHEET = Symbol();
+        appendToMethod(target, LIFECYCLE_UPDATED, function () {
+            let sheet = this[SHEET];
+            let value = this[key];
+            const update = (value) => (result) => {
+                if (value && value !== this[LAST])
+                    return;
+                sheet.replaceSync(toCssString(result));
+                this[LAST] = undefined;
+            };
+            if (!sheet) {
+                sheet = new CSSStyleSheet();
+                this[SHEET] = sheet;
+                shadowRoot(this)?.adoptedStyleSheets.push(sheet);
+            }
+            if (typeof value === 'function') {
+                value = value.call(this);
+            }
+            if (value instanceof Promise) {
+                value
+                    .then(update(this[LAST] = value))
+                    .catch((error) => {
+                    throw new Error('TODO', { cause: error });
+                });
+            }
+            else {
+                update()(value);
+            }
+        });
+    };
+}
+const toCssString = (input, parent) => {
+    if (typeof input == 'string') {
+        return input.trim();
+    }
+    if (Array.isArray(input)) {
+        return input
+            .map((item) => toCssString(item, parent))
+            .filter(Boolean)
+            .join('\n');
+    }
+    if (typeof input != 'object')
+        return '';
+    let result = '';
+    for (const key of Object.keys(input)) {
+        const value = input[key];
+        const ignore = [null, undefined, false].includes(value);
+        if (ignore)
+            continue;
+        const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+        if (typeof value === 'object') {
+            result += `${cssKey} {${toCssString(value, cssKey)}}`;
+        }
+        else {
+            result += `${cssKey}: ${value};`;
+        }
+    }
+    return parent ? result : `:host {${result}}`;
+};
+
 /**
  * Monitors `@Property` and `@State` to detect changes.
  * The decorated method will be called after any changes,
@@ -1789,4 +1869,4 @@ const attributes = attributes$2;
 const html = html$1;
 const styles = styles$1;
 
-export { Bind as B, Consumer as C, Direction as D, Element as E, Host as H, IsRTL as I, Listen as L, Method as M, Provider as P, Query as Q, Slots as S, Watch as W, dispatch as a, isRTL as b, classes as c, direction as d, queryAll as e, off as f, getConfig as g, host as h, isCSSColor as i, setConfig as j, Event as k, Property as l, QueryAll as m, State as n, on as o, attributes as p, query as q, html as r, slots as s, toUnit as t, styles as u };
+export { Bind as B, Consumer as C, Direction as D, Element as E, Host as H, IsRTL as I, Listen as L, Method as M, Provider as P, Query as Q, Slots as S, Watch as W, dispatch as a, toCSSUnit as b, classes as c, direction as d, isRTL as e, queryAll as f, getConfig as g, host as h, isCSSColor as i, off as j, toUnit as k, setConfig as l, Event as m, Property as n, on as o, QueryAll as p, query as q, State as r, slots as s, toCSSColor as t, Style as u, attributes as v, html as w, styles as x };

package/dist/{client-5FqNUiuz.d.ts → client-DdIyknz4.d.ts}

@@ -188,6 +188,8 @@ declare function Slots$1(): (target: HTMLPlusElement, key: PropertyKey) => void;
  */
 declare function State(): (target: HTMLPlusElement, key: PropertyKey) => void;
 
+declare function Style(): (target: HTMLPlusElement, key: PropertyKey) => void;
+
 /**
  * Monitors `@Property` and `@State` to detect changes.
  * The decorated method will be called after any changes,
@@ -297,6 +299,10 @@ type Slots = {
  */
 declare const slots: (target: HTMLElement | HTMLPlusElement) => Slots;
 
+declare const toCSSColor: (input: string) => string | undefined;
+
+declare const toCSSUnit: (input?: number | string | null) => string | undefined;
+
 /**
  * Converts a value to a unit.
  */
@@ -306,4 +312,4 @@ declare const attributes: any;
 declare const html: any;
 declare const styles: any;
 
-export { styles as A, Bind as B, type Config as C, Direction as D, Element$1 as E, Host as H, IsRTL as I, type ListenOptions as L, Method as M, Provider as P, Query as Q, Slots$1 as S, Watch as W, dispatch as a, isRTL as b, classes as c, direction as d, queryAll as e, off as f, getConfig as g, host as h, isCSSColor as i, setConfig as j, type ConfigOptions as k, Consumer as l, type EventEmitter as m, type EventOptions as n, on as o, Event as p, query as q, Listen as r, slots as s, toUnit as t, type PropertyOptions as u, Property as v, QueryAll as w, State as x, attributes as y, html as z };
+export { Style as A, Bind as B, type Config as C, Direction as D, Element$1 as E, attributes as F, html as G, Host as H, IsRTL as I, styles as J, type ListenOptions as L, Method as M, Provider as P, Query as Q, Slots$1 as S, Watch as W, dispatch as a, toCSSUnit as b, classes as c, direction as d, isRTL as e, queryAll as f, getConfig as g, host as h, isCSSColor as i, off as j, toUnit as k, setConfig as l, type ConfigOptions as m, Consumer as n, on as o, type EventEmitter as p, query as q, type EventOptions as r, slots as s, toCSSColor as t, Event as u, Listen as v, type PropertyOptions as w, Property as x, QueryAll as y, State as z };

package/dist/client.d.ts

@@ -1 +1 @@
-export { B as Bind, C as Config, k as ConfigOptions, l as Consumer, D as Direction, E as Element, p as Event, m as EventEmitter, n as EventOptions, H as Host, I as IsRTL, r as Listen, L as ListenOptions, M as Method, v as Property, u as PropertyOptions, P as Provider, Q as Query, w as QueryAll, S as Slots, x as State, W as Watch, c as classes, d as direction, a as dispatch, g as getConfig, h as host, i as isCSSColor, b as isRTL, f as off, o as on, q as query, e as queryAll, j as setConfig, s as slots, t as toUnit } from './client-5FqNUiuz.js';
+export { B as Bind, C as Config, m as ConfigOptions, n as Consumer, D as Direction, E as Element, u as Event, p as EventEmitter, r as EventOptions, H as Host, I as IsRTL, v as Listen, L as ListenOptions, M as Method, x as Property, w as PropertyOptions, P as Provider, Q as Query, y as QueryAll, S as Slots, z as State, A as Style, W as Watch, c as classes, d as direction, a as dispatch, g as getConfig, h as host, i as isCSSColor, e as isRTL, j as off, o as on, q as query, f as queryAll, l as setConfig, s as slots, t as toCSSColor, b as toCSSUnit, k as toUnit } from './client-DdIyknz4.js';

package/dist/client.js

@@ -1,3 +1,3 @@
-export { B as Bind, C as Consumer, D as Direction, E as Element, k as Event, H as Host, I as IsRTL, L as Listen, M as Method, l as Property, P as Provider, Q as Query, m as QueryAll, S as Slots, n as State, W as Watch, c as classes, d as direction, a as dispatch, g as getConfig, h as host, i as isCSSColor, b as isRTL, f as off, o as on, q as query, e as queryAll, j as setConfig, s as slots, t as toUnit } from './client-BsD9JZY4.js';
+export { B as Bind, C as Consumer, D as Direction, E as Element, m as Event, H as Host, I as IsRTL, L as Listen, M as Method, n as Property, P as Provider, Q as Query, p as QueryAll, S as Slots, r as State, u as Style, W as Watch, c as classes, d as direction, a as dispatch, g as getConfig, h as host, i as isCSSColor, e as isRTL, j as off, o as on, q as query, f as queryAll, l as setConfig, s as slots, t as toCSSColor, b as toCSSUnit, k as toUnit } from './client-Cu3jtWIP.js';
 import 'change-case';
 import './constants.js';

package/dist/internal.d.ts

@@ -1 +1 @@
-export { y as attributes, z as html, A as styles } from './client-5FqNUiuz.js';
+export { F as attributes, G as html, J as styles } from './client-DdIyknz4.js';

package/dist/internal.js

@@ -1,3 +1,3 @@
-export { p as attributes, r as html, u as styles } from './client-BsD9JZY4.js';
+export { v as attributes, w as html, x as styles } from './client-Cu3jtWIP.js';
 import 'change-case';
 import './constants.js';

package/dist/transformer.js

@@ -8,7 +8,7 @@ import template from '@babel/template';
 import { pascalCase, kebabCase, camelCase, capitalCase } from 'change-case';
 import ora from 'ora';
 import path, { join, resolve, dirname } from 'node:path';
-import { KEY, COMMENT_AUTO_ADDED, DECORATOR_PROPERTY, STATIC_TAG, UTILS_STYLES_LOCAL, UTILS_PATH, DECORATOR_PROPERTY_TYPE, UTILS_STYLES_IMPORTED, ELEMENT_HOST_NAME, UTILS_HTML_IMPORTED, UTILS_HTML_LOCAL, TYPE_OBJECT, TYPE_ARRAY, TYPE_NULL, TYPE_STRING, TYPE_ENUM, TYPE_NUMBER, TYPE_DATE, TYPE_BOOLEAN, UTILS_ATTRIBUTES_IMPORTED, UTILS_ATTRIBUTES_LOCAL, DECORATOR_CSS_VARIABLE, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_STATE, STATIC_STYLE, STYLE_IMPORTED, PACKAGE_NAME, DECORATOR_ELEMENT } from './constants.js';
+import { KEY, COMMENT_AUTO_ADDED, DECORATOR_PROPERTY, STATIC_TAG, UTILS_STYLES_LOCAL, UTILS_PATH, DECORATOR_PROPERTY_TYPE, UTILS_STYLES_IMPORTED, ELEMENT_HOST_NAME, UTILS_HTML_IMPORTED, UTILS_HTML_LOCAL, TYPE_OBJECT, TYPE_NULL, TYPE_ARRAY, TYPE_STRING, TYPE_ENUM, TYPE_NUMBER, TYPE_DATE, TYPE_BOOLEAN, UTILS_ATTRIBUTES_IMPORTED, UTILS_ATTRIBUTES_LOCAL, DECORATOR_CSS_VARIABLE, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_STATE, STATIC_STYLE, STYLE_IMPORTED, PACKAGE_NAME, DECORATOR_ELEMENT } from './constants.js';
 
 const logger = ora({
     color: 'yellow'
@@ -512,7 +512,9 @@ const customElement = (options) => {
                                 return attribute.type == 'JSXSpreadAttribute';
                             });
                             if (hasSpreadAttribute) {
-                                parts.push(' ', TODO(t.identifier('TODO'), attributes));
+                                parts.push(' ', 'ref=', t.arrowFunctionExpression([
+                                    t.identifier('$element')
+                                ], TODO(t.identifier('$element'), attributes)));
                             }
                             else {
                                 for (const attribute of attributes) {
@@ -624,7 +626,9 @@ const customElement = (options) => {
                         case 'TSStringKeyword':
                             type |= TYPE_STRING;
                             break;
+                        case 'Array':
                         case 'TSArrayType':
+                        case 'TSTupleType':
                             type |= TYPE_ARRAY;
                             break;
                         case 'TSLiteralType':
@@ -635,12 +639,7 @@ const customElement = (options) => {
                             break;
                         case 'Object':
                         case 'TSObjectKeyword':
-                            type |= TYPE_OBJECT;
-                            break;
-                        case 'Array':
-                        case 'TSTupleType':
-                            type |= TYPE_ARRAY;
-                            break;
+                        case 'TSMappedType':
                         case 'TSTypeLiteral':
                             type |= TYPE_OBJECT;
                             break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",