@joist/templating 4.2.3-next.10

package/target/lib/elements/for.element.d.ts

@@ -0,0 +1,24 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "j-for": JositForElement;
+        "j-for-scope": JForScope;
+    }
+}
+export interface EachCtx<T> {
+    value: T | null;
+    index: number | null;
+    position: number | null;
+}
+export declare class JForScope<T = unknown> extends HTMLElement {
+    accessor each: EachCtx<T>;
+    accessor key: string;
+}
+export declare class JositForElement extends HTMLElement {
+    #private;
+    accessor bind: string;
+    accessor key: string;
+    connectedCallback(): void;
+    createFromEmpty(): void;
+    updateItems(): void;
+    disconnectedCallback(): void;
+}

package/target/lib/elements/for.element.js

@@ -0,0 +1,182 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, element, query, css, html } from "@joist/element";
+import { bind } from "../bind.js";
+import { JoistValueEvent } from "../events.js";
+import { JToken } from "../token.js";
+let JForScope = (() => {
+    let _classDecorators = [element({
+            tagName: "j-for-scope",
+            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _each_decorators;
+    let _each_initializers = [];
+    let _each_extraInitializers = [];
+    let _key_decorators;
+    let _key_initializers = [];
+    let _key_extraInitializers = [];
+    var JForScope = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _each_decorators = [bind()];
+            _key_decorators = [attr()];
+            __esDecorate(this, null, _each_decorators, { kind: "accessor", name: "each", static: false, private: false, access: { has: obj => "each" in obj, get: obj => obj.each, set: (obj, value) => { obj.each = value; } }, metadata: _metadata }, _each_initializers, _each_extraInitializers);
+            __esDecorate(this, null, _key_decorators, { kind: "accessor", name: "key", static: false, private: false, access: { has: obj => "key" in obj, get: obj => obj.key, set: (obj, value) => { obj.key = value; } }, metadata: _metadata }, _key_initializers, _key_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            JForScope = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #each_accessor_storage = __runInitializers(this, _each_initializers, {
+            value: null,
+            index: null,
+            position: null,
+        });
+        get each() { return this.#each_accessor_storage; }
+        set each(value) { this.#each_accessor_storage = value; }
+        #key_accessor_storage = (__runInitializers(this, _each_extraInitializers), __runInitializers(this, _key_initializers, ""));
+        get key() { return this.#key_accessor_storage; }
+        set key(value) { this.#key_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _key_extraInitializers);
+        }
+    };
+    return JForScope = _classThis;
+})();
+export { JForScope };
+let JositForElement = (() => {
+    let _classDecorators = [element({
+            tagName: "j-for",
+            shadowDom: [css `:host{display:contents;}`, html `<slot></slot>`],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _bind_decorators;
+    let _bind_initializers = [];
+    let _bind_extraInitializers = [];
+    let _key_decorators;
+    let _key_initializers = [];
+    let _key_extraInitializers = [];
+    var JositForElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _bind_decorators = [attr()];
+            _key_decorators = [attr()];
+            __esDecorate(this, null, _bind_decorators, { kind: "accessor", name: "bind", static: false, private: false, access: { has: obj => "bind" in obj, get: obj => obj.bind, set: (obj, value) => { obj.bind = value; } }, metadata: _metadata }, _bind_initializers, _bind_extraInitializers);
+            __esDecorate(this, null, _key_decorators, { kind: "accessor", name: "key", static: false, private: false, access: { has: obj => "key" in obj, get: obj => obj.key, set: (obj, value) => { obj.key = value; } }, metadata: _metadata }, _key_initializers, _key_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            JositForElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #bind_accessor_storage = __runInitializers(this, _bind_initializers, "");
+        get bind() { return this.#bind_accessor_storage; }
+        set bind(value) { this.#bind_accessor_storage = value; }
+        #key_accessor_storage = (__runInitializers(this, _bind_extraInitializers), __runInitializers(this, _key_initializers, ""));
+        get key() { return this.#key_accessor_storage; }
+        set key(value) { this.#key_accessor_storage = value; }
+        #template = (__runInitializers(this, _key_extraInitializers), query("template", this));
+        #items = [];
+        #scopes = new Map();
+        connectedCallback() {
+            const template = this.#template();
+            if (this.firstElementChild !== template) {
+                throw new Error("The first Node in j-for needs to be a template");
+            }
+            let currentScope = template.nextElementSibling;
+            while (currentScope instanceof JForScope) {
+                this.#scopes.set(currentScope.key, currentScope);
+                currentScope = currentScope.nextElementSibling;
+            }
+            const token = new JToken(this.bind);
+            this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
+                if (newValue !== oldValue) {
+                    if (isIterable(newValue)) {
+                        this.#items = newValue;
+                    }
+                    else {
+                        this.#items = [];
+                    }
+                    if (template.nextSibling === null) {
+                        this.createFromEmpty();
+                    }
+                    else {
+                        this.updateItems();
+                    }
+                }
+            }));
+        }
+        createFromEmpty() {
+            const template = this.#template();
+            const templateContent = template.content;
+            const keyProperty = this.key;
+            const fragment = document.createDocumentFragment();
+            let index = 0;
+            for (const value of this.#items) {
+                const key = keyProperty && hasProperty(value, keyProperty) ? value[keyProperty] : index;
+                const scope = new JForScope();
+                scope.append(document.importNode(templateContent, true));
+                scope.key = String(key);
+                scope.each = { position: index + 1, index, value };
+                fragment.appendChild(scope);
+                this.#scopes.set(key, scope);
+                index++;
+            }
+            this.append(fragment);
+        }
+        updateItems() {
+            const template = this.#template();
+            const leftoverScopes = new Map(this.#scopes);
+            const keyProperty = this.key;
+            let index = 0;
+            for (const value of this.#items) {
+                const key = keyProperty && hasProperty(value, keyProperty) ? value[keyProperty] : index;
+                let scope = leftoverScopes.get(key);
+                if (!scope) {
+                    scope = new JForScope();
+                    scope.append(document.importNode(template.content, true));
+                    this.#scopes.set(key, scope);
+                }
+                else {
+                    leftoverScopes.delete(key);
+                }
+                if (scope.key !== key || scope.each.value !== value) {
+                    scope.key = String(key);
+                    scope.each = { position: index + 1, index, value };
+                }
+                const child = this.children[index + 1];
+                if (child !== scope) {
+                    this.insertBefore(scope, child);
+                }
+                index++;
+            }
+            for (const scope of leftoverScopes.values()) {
+                scope.remove();
+            }
+        }
+        disconnectedCallback() {
+            for (const scope of this.#scopes.values()) {
+                scope.remove();
+            }
+            this.#scopes.clear();
+            this.#items = [];
+        }
+    };
+    return JositForElement = _classThis;
+})();
+export { JositForElement };
+function isIterable(obj) {
+    return obj != null && typeof obj[Symbol.iterator] === "function";
+}
+function hasProperty(item, key) {
+    return Object.prototype.hasOwnProperty.call(item, key);
+}
+//# sourceMappingURL=for.element.js.map

package/target/lib/elements/for.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"for.element.js","sourceRoot":"","sources":["../../../src/lib/elements/for.element.ts"],"names":[],"mappings":"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"}

package/target/lib/elements/for.element.test.d.ts

@@ -0,0 +1,2 @@
+import "./for.element.js";
+import "./value.element.js";

package/target/lib/elements/for.element.test.js

@@ -0,0 +1,153 @@
+import "./for.element.js";
+import "./value.element.js";
+import { fixtureSync, html } from "@open-wc/testing";
+import { assert } from "chai";
+it("should iterate over an iterable", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({
+            oldValue: null,
+            newValue: new Set([
+                { id: "123", label: "Hello" },
+                { id: "456", label: "World" },
+            ]),
+        });
+    }}
+    >
+      <ul>
+        <j-for bind="items" key="id">
+          <template>
+            <li>
+              <j-value bind="each.value.label"></j-value>
+            </li>
+          </template>
+        </j-for>
+      </ul>
+    </div>
+  `);
+    const listItems = element.querySelectorAll("li");
+    assert.equal(listItems.length, 2);
+    assert.equal(listItems[0].textContent?.trim(), "Hello");
+    assert.equal(listItems[1].textContent?.trim(), "World");
+});
+it("should handle empty arrays", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({
+            oldValue: null,
+            newValue: [],
+        });
+    }}
+    >
+      <j-for bind="items">
+        <template>
+          <div>Item</div>
+        </template>
+      </j-for>
+    </div>
+  `);
+    assert.equal(element.querySelectorAll("div").length, 0);
+});
+it("should update when items are added or removed", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({
+            oldValue: null,
+            newValue: [
+                { id: "1", text: "First" },
+                { id: "2", text: "Second" },
+            ],
+        });
+        e.update({
+            oldValue: null,
+            newValue: [
+                { id: "1", text: "First" },
+                { id: "2", text: "Second" },
+                { id: "3", text: "Third" },
+            ],
+        });
+        e.update({
+            oldValue: null,
+            newValue: [
+                { id: "1", text: "First" },
+                { id: "3", text: "Third" },
+            ],
+        });
+    }}
+    >
+      <j-for bind="items" key="id">
+        <template>
+          <j-value bind="each.value.text"></j-value>
+        </template>
+      </j-for>
+    </div>
+  `);
+    const items = element.querySelectorAll("j-value");
+    assert.equal(items.length, 2);
+    assert.equal(items[0].textContent?.trim(), "First");
+    assert.equal(items[1].textContent?.trim(), "Third");
+});
+it("should provide index and position information", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({
+            oldValue: null,
+            newValue: ["A", "B", "C"],
+        });
+    }}
+    >
+      <j-for bind="items">
+        <template>
+          <j-value bind="each.value"></j-value>
+          (index: <j-value bind="each.index"></j-value>,
+          position: <j-value bind="each.position"></j-value>)
+        </template>
+      </j-for>
+    </div>
+  `);
+    const items = element.querySelectorAll("j-for-scope");
+    assert.equal(items.length, 3);
+    assert.equal(items[0].textContent?.trim().replaceAll("\n", "").replaceAll(" ", ""), "A(index:0,position:1)");
+    assert.equal(items[1].textContent?.trim().replaceAll("\n", "").replaceAll(" ", ""), "B(index:1,position:2)");
+    assert.equal(items[2].textContent?.trim().replaceAll("\n", "").replaceAll(" ", ""), "C(index:2,position:3)");
+});
+it("should maintain DOM order when items are reordered", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({
+            oldValue: null,
+            newValue: [
+                { id: "1", text: "First" },
+                { id: "2", text: "Second" },
+                { id: "3", text: "Third" },
+            ],
+        });
+        e.update({
+            oldValue: null,
+            newValue: [
+                { id: "3", text: "Third" },
+                { id: "1", text: "First" },
+                { id: "2", text: "Second" },
+            ],
+        });
+    }}
+    >
+      <j-for bind="items" key="id">
+        <template>
+          <j-value bind="each.value.text"></j-value>
+        </template>
+      </j-for>
+    </div>
+  `);
+    const items = element.querySelectorAll("j-value");
+    assert.equal(items.length, 3);
+    assert.equal(items[0].textContent?.trim(), "Third");
+    assert.equal(items[1].textContent?.trim(), "First");
+    assert.equal(items[2].textContent?.trim(), "Second");
+});
+//# sourceMappingURL=for.element.test.js.map

package/target/lib/elements/for.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"for.element.test.js","sourceRoot":"","sources":["../../../src/lib/elements/for.element.test.ts"],"names":[],"mappings":"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"}

package/target/lib/elements/if.element.d.ts

@@ -0,0 +1,12 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "j-if": JoistIfElement;
+    }
+}
+export declare class JoistIfElement extends HTMLElement {
+    #private;
+    accessor bind: string;
+    connectedCallback(): void;
+    apply(value: unknown, isNegative: boolean): void;
+    disconnectedCallback(): void;
+}

package/target/lib/elements/if.element.js

@@ -0,0 +1,81 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, element, queryAll, css, html } from "@joist/element";
+import { JoistValueEvent } from "../events.js";
+import { JToken } from "../token.js";
+let JoistIfElement = (() => {
+    let _classDecorators = [element({
+            tagName: "j-if",
+            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _bind_decorators;
+    let _bind_initializers = [];
+    let _bind_extraInitializers = [];
+    var JoistIfElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _bind_decorators = [attr()];
+            __esDecorate(this, null, _bind_decorators, { kind: "accessor", name: "bind", static: false, private: false, access: { has: obj => "bind" in obj, get: obj => obj.bind, set: (obj, value) => { obj.bind = value; } }, metadata: _metadata }, _bind_initializers, _bind_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            JoistIfElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #bind_accessor_storage = __runInitializers(this, _bind_initializers, "");
+        get bind() { return this.#bind_accessor_storage; }
+        set bind(value) { this.#bind_accessor_storage = value; }
+        #templates = (__runInitializers(this, _bind_extraInitializers), queryAll("template", this));
+        connectedCallback() {
+            const templates = Array.from(this.#templates());
+            if (templates.length === 0) {
+                throw new Error("j-if requires at least one template element");
+            }
+            if (templates.length > 2) {
+                throw new Error("j-if can only have two template elements (if and else)");
+            }
+            if (templates.length === 2 && !templates.some((t) => t.hasAttribute("else"))) {
+                throw new Error("When using two templates, one must have the else attribute");
+            }
+            if (templates.length === 2 && templates[0].hasAttribute("else")) {
+                [templates[0], templates[1]] = [templates[1], templates[0]];
+            }
+            this.#clean();
+            const token = new JToken(this.bind);
+            this.dispatchEvent(new JoistValueEvent(token, ({ newValue, oldValue }) => {
+                if (newValue !== oldValue) {
+                    if (typeof newValue === "object" && newValue !== null) {
+                        this.apply(token.readTokenValueFrom(newValue), token.isNegated);
+                    }
+                    else {
+                        this.apply(newValue, token.isNegated);
+                    }
+                }
+            }));
+        }
+        apply(value, isNegative) {
+            this.#clean();
+            const templates = this.#templates();
+            const shouldShowIf = isNegative ? !value : value;
+            const templateToUse = shouldShowIf ? templates[0] : templates[1];
+            if (templateToUse) {
+                const content = document.importNode(templateToUse.content, true);
+                this.appendChild(content);
+            }
+        }
+        #clean() {
+            while (!(this.lastChild instanceof HTMLTemplateElement)) {
+                this.lastChild?.remove();
+            }
+        }
+        disconnectedCallback() {
+            this.#clean();
+        }
+    };
+    return JoistIfElement = _classThis;
+})();
+export { JoistIfElement };
+//# sourceMappingURL=if.element.js.map

package/target/lib/elements/if.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"if.element.js","sourceRoot":"","sources":["../../../src/lib/elements/if.element.ts"],"names":[],"mappings":"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"}

package/target/lib/elements/if.element.test.d.ts

@@ -0,0 +1 @@
+import "./if.element.js";

package/target/lib/elements/if.element.test.js

@@ -0,0 +1,78 @@
+import "./if.element.js";
+import { fixtureSync, html } from "@open-wc/testing";
+import { assert } from "chai";
+it("should render content when the bind value is truthy", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: true });
+    }}
+    >
+      <j-if bind="test">
+        <template>Visible Content</template>
+      </j-if>
+    </div>
+  `);
+    assert.equal(element.textContent?.trim(), "Visible Content");
+});
+it("should not render content when the bind value is falsy", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: true });
+        e.update({ oldValue: null, newValue: false });
+    }}
+    >
+      <j-if bind="test">
+        <template>Visible Content</template>
+      </j-if>
+    </div>
+  `);
+    assert.equal(element.textContent?.trim(), "");
+});
+it("should handle negated tokens correctly", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: false });
+    }}
+    >
+      <j-if bind="!test">
+        <template>Visible Content</template>
+      </j-if>
+    </div>
+  `);
+    assert.equal(element.textContent?.trim(), "Visible Content");
+});
+it("should render else template when condition is falsy", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: false });
+    }}
+    >
+      <j-if bind="test">
+        <template>If Content</template>
+        <template else>Else Content</template>
+      </j-if>
+    </div>
+  `);
+    assert.equal(element.textContent?.trim(), "Else Content");
+});
+it("should switch between if and else templates", () => {
+    const element = fixtureSync(html `
+    <div
+      @joist::value=${(e) => {
+        e.update({ oldValue: null, newValue: false });
+        e.update({ oldValue: false, newValue: true });
+    }}
+    >
+      <j-if bind="test">
+        <template>If Content</template>
+        <template else>Else Content</template>
+      </j-if>
+    </div>
+  `);
+    assert.equal(element.textContent?.trim(), "If Content");
+});
+//# sourceMappingURL=if.element.test.js.map

package/target/lib/elements/if.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"if.element.test.js","sourceRoot":"","sources":["../../../src/lib/elements/if.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAI9B,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;IAC7D,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/C,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,iBAAiB,CAAC,CAAC;AAC/D,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;IAChE,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7C,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IAChD,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IAChD,CAAC;;;;;;GAMJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,iBAAiB,CAAC,CAAC;AAC/D,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;IAC7D,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IAChD,CAAC;;;;;;;GAOJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;IACrD,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAA;;sBAEZ,CAAC,CAAkB,EAAE,EAAE;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAChD,CAAC;;;;;;;GAOJ,CAAC,CAAC;IAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC,CAAC,CAAC"}

package/target/lib/elements/props.element.d.ts

@@ -0,0 +1,11 @@
+import { JToken } from "../token.js";
+export declare class JAttrToken extends JToken {
+    mapTo: string;
+    mapsToProp: boolean;
+    constructor(attr: Attr);
+}
+export declare class JoistIfElement extends HTMLElement {
+    #private;
+    accessor target: string;
+    connectedCallback(): void;
+}