@esportsplus/ui 0.46.0 → 0.47.2

package/build/components/loader/index.js

@@ -1,64 +1,82 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as reactivity_a6aeaec5a75649bd8ec693d5230c50000 from '@esportsplus/reactivity';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_a6aeaec5a75649bd8ec693d5230c50002d = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div class='loader-content'><div
+ class='loader-logo text --flex-center --text-uppercase --text-600'
+ style='color: var(--color-grey-500);'><!--$--></div></div>`);
+const template_a6aeaec5a75649bd8ec693d5230c50002i = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div
+ class='loader '><div
+ class='loader '><!--$--></div></div>`);
+class ReactiveObject_a6aeaec5a75649bd8ec693d5230c50002b extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
+    #load = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    #remove = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    #scale = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get load() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#load);
+    }
+    set load(_v0) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#load, _v0);
+    }
+    get remove() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#remove);
+    }
+    set remove(_v1) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#remove, _v1);
+    }
+    get scale() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#scale);
+    }
+    set scale(_v2) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#scale, _v2);
+    }
+}
 const OMIT = ['loader-content', 'loader-logo'];
 export default template.factory((attributes, content) => {
-    let state = reactive({
-        load: false,
-        remove: false,
-        scale: false
-    });
+    let state = new ReactiveObject_a6aeaec5a75649bd8ec693d5230c50002b();
     return () => {
         if (state.remove) {
             return;
         }
         let i = 0;
-        return html `
-                <div
-                    class='loader ${() => state.load && 'loader--load'}'
-                    onanimationend=${(e) => {
-            i++;
-            if (e.animationName === 'move' && i > 1) {
-                state.remove = true;
-            }
-        }}
-                    ${omit(attributes, OMIT)}
-                >
-                    <div
-                        class='loader ${() => state.load && 'loader--load'}'
-                        ${!content && {
-            onconnect: () => {
-                state.load = true;
-            }
-        }}
-                        ${attributes.loader}
-                    >
-                        ${content && html `
-                            <div class='loader-content' ${attributes['loader-content']}>
-                                <div
-                                    class='loader-logo text --flex-center --text-uppercase --text-600'
-                                    style='color: var(--color-grey-500);'
-                                    ${attributes['loader-logo']}
-                                    ${{
-            class: () => state.scale && 'loader-logo--scale',
-            onanimationend: ({ animationName: name }) => {
-                if (name === 'scale') {
+        return (() => {
+            let root_a6aeaec5a75649bd8ec693d5230c50002h = template_a6aeaec5a75649bd8ec693d5230c50002i(), element_a6aeaec5a75649bd8ec693d5230c50002j = root_a6aeaec5a75649bd8ec693d5230c50002h.firstChild, element_a6aeaec5a75649bd8ec693d5230c50002k = element_a6aeaec5a75649bd8ec693d5230c50002j.firstElementChild, element_a6aeaec5a75649bd8ec693d5230c50002l = element_a6aeaec5a75649bd8ec693d5230c50002k.firstChild;
+            template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c50002j, ' ', () => state.load && 'loader--load');
+            template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c50002j, 'animationend', (e) => {
+                i++;
+                if (e.animationName === 'move' && i > 1) {
+                    state.remove = true;
+                }
+            });
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002j, omit(attributes, OMIT));
+            template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c50002k, ' ', () => state.load && 'loader--load');
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002k, !content && {
+                onconnect: () => {
                     state.load = true;
                 }
-            },
-            onconnect: () => {
-                state.scale = true;
-            }
-        }}
-                                >
-                                    ${content}
-                                </div>
-                            </div>
-                        `}
-                    </div>
-                </div>
-            `;
+            });
+            template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002k, attributes.loader);
+            template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c50002l, content && (() => {
+                let root_a6aeaec5a75649bd8ec693d5230c50002c = template_a6aeaec5a75649bd8ec693d5230c50002d(), element_a6aeaec5a75649bd8ec693d5230c50002e = root_a6aeaec5a75649bd8ec693d5230c50002c.firstChild, element_a6aeaec5a75649bd8ec693d5230c50002f = element_a6aeaec5a75649bd8ec693d5230c50002e.firstElementChild, element_a6aeaec5a75649bd8ec693d5230c50002g = element_a6aeaec5a75649bd8ec693d5230c50002f.firstChild;
+                template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002e, attributes['loader-content']);
+                template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002f, attributes['loader-logo']);
+                template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c50002f, '', () => state.scale && 'loader-logo--scale');
+                template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c50002f, 'animationend', ({ animationName: name }) => {
+                    if (name === 'scale') {
+                        state.load = true;
+                    }
+                });
+                template_a6aeaec5a75649bd8ec693d5230c50001.onconnect(element_a6aeaec5a75649bd8ec693d5230c50002f, () => {
+                    state.scale = true;
+                });
+                template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c50002g, content);
+                return root_a6aeaec5a75649bd8ec693d5230c50002c;
+            })());
+            return root_a6aeaec5a75649bd8ec693d5230c50002h;
+        })();
     };
 });

package/build/components/loading/index.d.ts

@@ -1,4 +1,4 @@
 import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: (attributes?: Attributes) => Node;
+declare const _default: (attributes?: Attributes) => DocumentFragment;
 export default _default;

package/build/components/loading/index.js

@@ -1,12 +1,12 @@
-import { html } from '@esportsplus/template';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 import './scss/index.scss';
+const template_a6aeaec5a75649bd8ec693d5230c50002n = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div
+ class='loading --border-width-700 --size-800'
+ style='--border-color: var(--color-border-500);'></div>`);
 export default (attributes) => {
-    return html `
-        <div
-            class='loading --border-width-700 --size-800'
-            style='--border-color: var(--color-border-500);'
-            ${attributes}
-        >
-        </div>
-    `;
+    return (() => {
+        let root_a6aeaec5a75649bd8ec693d5230c50002m = template_a6aeaec5a75649bd8ec693d5230c50002n(), element_a6aeaec5a75649bd8ec693d5230c50002o = root_a6aeaec5a75649bd8ec693d5230c50002m.firstChild;
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002o, attributes);
+        return root_a6aeaec5a75649bd8ec693d5230c50002m;
+    })();
 };

package/build/components/radio/index.d.ts

@@ -6,5 +6,5 @@ declare const _default: (this: {
         active: boolean;
         error: string;
     };
-}) => Node;
+}) => DocumentFragment;
 export default _default;

package/build/components/range/index.d.ts

@@ -1,4 +1,4 @@
-import { type Attributes } from '@esportsplus/template';
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 export default function (this: {
     attributes?: Attributes;
@@ -10,4 +10,4 @@ export default function (this: {
         error: string;
         value: number;
     };
-}): Node;
+}): DocumentFragment;

package/build/components/range/index.js

@@ -1,38 +1,61 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as reactivity_a6aeaec5a75649bd8ec693d5230c50000 from '@esportsplus/reactivity';
+import { root } from '@esportsplus/reactivity';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 import form from '../../components/form/index.js';
 import './scss/index.scss';
+const template_a6aeaec5a75649bd8ec693d5230c50002r = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<input
+ class='range --border-state --border-black'
+ type='range'
+ />`);
+class ReactiveObject_a6aeaec5a75649bd8ec693d5230c50002p extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
+    #active = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
+    #error = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL]('');
+    #value = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#error, _v1);
+    }
+    get value() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#value);
+    }
+    set value(_v2) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#value, _v2);
+    }
+}
 export default function (attributes) {
-    let { max, min } = attributes, state = attributes.state || reactive({
-        active: false,
-        error: '',
-        value: 0
-    });
+    let { max, min } = attributes, state = attributes.state || new ReactiveObject_a6aeaec5a75649bd8ec693d5230c50002p();
     if (attributes?.value) {
         state.value = Number(attributes.value);
     }
-    return html `
-        <input
-            class='range --border-state --border-black'
-            style='${() => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`}'
-            type='range'
-            ${this?.attributes}
-            ${attributes}
-            ${{
-        class: () => state.active && '--active',
-        onfocusin: () => {
+    return (() => {
+        let root_a6aeaec5a75649bd8ec693d5230c50002q = template_a6aeaec5a75649bd8ec693d5230c50002r(), element_a6aeaec5a75649bd8ec693d5230c50002s = root_a6aeaec5a75649bd8ec693d5230c50002q.firstChild;
+        template_a6aeaec5a75649bd8ec693d5230c50001.setStyle(element_a6aeaec5a75649bd8ec693d5230c50002s, ';', () => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`);
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002s, this?.attributes);
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002s, attributes);
+        template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c50002s, '', () => state.active && '--active');
+        template_a6aeaec5a75649bd8ec693d5230c50001.on(element_a6aeaec5a75649bd8ec693d5230c50002s, 'focusin', () => {
             state.active = true;
-        },
-        onfocusout: () => {
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.on(element_a6aeaec5a75649bd8ec693d5230c50002s, 'focusout', () => {
             state.active = false;
-        },
-        oninput: (e) => {
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.delegate(element_a6aeaec5a75649bd8ec693d5230c50002s, 'input', (e) => {
             state.value = Number(e.target.value);
-        },
-        onrender: form.input.onrender(state),
-        value: root(() => attributes?.value || state.value || 0)
-    }}
-        />
-    `;
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.onrender(element_a6aeaec5a75649bd8ec693d5230c50002s, form.input.onrender(state));
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperty(element_a6aeaec5a75649bd8ec693d5230c50002s, 'value', root(() => attributes?.value || state.value || 0));
+        return root_a6aeaec5a75649bd8ec693d5230c50002q;
+    })();
 }
 ;

package/build/components/scrollbar/index.d.ts

@@ -1,4 +1,5 @@
-import { type Attributes } from '@esportsplus/template';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 type A = Attributes & {
     scrollbar?: Attributes;
@@ -7,20 +8,20 @@ type A = Attributes & {
 declare const _default: {
     (): ReturnType<(this: {
         attributes?: A | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<A>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+        content?: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>;
+    }, attributes: Readonly<A>, content: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>) => template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>>;
     <T extends A>(attributes: T): ReturnType<(this: {
         attributes?: A | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<A>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
+        content?: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>;
+    }, attributes: Readonly<A>, content: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>) => template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>>;
+    <T extends template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>>(content: T): ReturnType<(this: {
         attributes?: A | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<A>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    (attributes: A, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
+        content?: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>;
+    }, attributes: Readonly<A>, content: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>) => template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>>;
+    (attributes: A, content: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>): ReturnType<(this: {
         attributes?: A | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<A>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
+        content?: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>;
+    }, attributes: Readonly<A>, content: template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>) => template_a6aeaec5a75649bd8ec693d5230c50001.Renderable<any>>;
 };
 export default _default;
 export type { A as Attributes };

package/build/components/scrollbar/index.js

@@ -1,27 +1,42 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
+import * as reactivity_a6aeaec5a75649bd8ec693d5230c50000 from '@esportsplus/reactivity';
+import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const template_a6aeaec5a75649bd8ec693d5230c50002v = template_a6aeaec5a75649bd8ec693d5230c50001.template(`<div
+ class='scrollbar-container'><div
+ class='scrollbar-container-content'><!--$--></div><div
+ class='scrollbar'></div></div>`);
+class ReactiveObject_a6aeaec5a75649bd8ec693d5230c50002t extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
+    #height = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](100);
+    #translate = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get height() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#height);
+    }
+    set height(_v0) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#height, _v0);
+    }
+    get translate() {
+        return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#translate);
+    }
+    set translate(_v1) {
+        reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#translate, _v1);
+    }
+}
 const OMIT = ['scrollbar', 'scrollbar-container-content'];
 let root = document.body, width;
 export default template.factory(function (attributes, content) {
-    let state = reactive({
-        height: 100,
-        translate: 0
-    });
-    return html `
-            <div
-                class='scrollbar-container'
-                ${this?.attributes && omit(this.attributes, OMIT)}
-                ${omit(attributes, OMIT)}
-            >
-                <div
-                    class='scrollbar-container-content'
-                    ${this?.attributes?.['scrollbar-container-content']}
-                    ${attributes['scrollbar-container-content']}
-                    ${{
-        onscroll: function () {
+    let state = new ReactiveObject_a6aeaec5a75649bd8ec693d5230c50002t();
+    return (() => {
+        let root_a6aeaec5a75649bd8ec693d5230c50002u = template_a6aeaec5a75649bd8ec693d5230c50002v(), element_a6aeaec5a75649bd8ec693d5230c50002w = root_a6aeaec5a75649bd8ec693d5230c50002u.firstChild, element_a6aeaec5a75649bd8ec693d5230c50002x = element_a6aeaec5a75649bd8ec693d5230c50002w.firstElementChild, element_a6aeaec5a75649bd8ec693d5230c50002y = element_a6aeaec5a75649bd8ec693d5230c50002x.firstChild, element_a6aeaec5a75649bd8ec693d5230c50002z = element_a6aeaec5a75649bd8ec693d5230c50002x.nextElementSibling;
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002w, this?.attributes && omit(this.attributes, OMIT));
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002w, omit(attributes, OMIT));
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002x, this?.attributes?.['scrollbar-container-content']);
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002x, attributes['scrollbar-container-content']);
+        template_a6aeaec5a75649bd8ec693d5230c50001.on(element_a6aeaec5a75649bd8ec693d5230c50002x, 'scroll', function () {
             if (width === undefined) {
                 width = this.offsetWidth - this.clientWidth;
                 if (width && width !== 17) {
@@ -30,25 +45,15 @@ export default template.factory(function (attributes, content) {
             }
             state.height = (this.clientHeight / this.scrollHeight) * 100;
             state.translate = (this.scrollTop / this.clientHeight) * 100;
-        }
-    }}
-                >
-                    ${content}
-                </div>
-
-                <div
-                    class='scrollbar'
-                    ${this?.attributes?.scrollbar}
-                    ${attributes.scrollbar}
-                    ${{
-        class: () => state.height >= 100 && 'scrollbar--hidden',
-        style: () => `
+        });
+        template_a6aeaec5a75649bd8ec693d5230c50001.slot(element_a6aeaec5a75649bd8ec693d5230c50002y, content);
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002z, this?.attributes?.scrollbar);
+        template_a6aeaec5a75649bd8ec693d5230c50001.setProperties(element_a6aeaec5a75649bd8ec693d5230c50002z, attributes.scrollbar);
+        template_a6aeaec5a75649bd8ec693d5230c50001.setClass(element_a6aeaec5a75649bd8ec693d5230c50002z, '', () => state.height >= 100 && 'scrollbar--hidden');
+        template_a6aeaec5a75649bd8ec693d5230c50001.setStyle(element_a6aeaec5a75649bd8ec693d5230c50002z, '', () => `
                             --translate: translate3d(0, ${state.translate}%, 0);
                             --height: ${state.height}%;
-                        `
-    }}
-                >
-                </div>
-            </div>
-        `;
+                        `);
+        return root_a6aeaec5a75649bd8ec693d5230c50002u;
+    })();
 });

package/build/components/select/index.d.ts

@@ -1,4 +1,4 @@
-import { Renderable, type Attributes } from '@esportsplus/template';
+import { Attributes, Renderable } from '@esportsplus/template';
 import { Attributes as Attr } from '../../components/scrollbar/index.js';
 import './scss/index.scss';
 type A = {