@joist/element/target/lib/attr.js

Intelligently apply styles to WebComponents

import { metadataStore } from "./metadata.js";
export function attr(opts) {
    return function attrDecorator(base, ctx) {
        const attrName = opts?.name ?? parseAttrName(ctx.name);
        const meta = metadataStore.read(ctx.metadata);
        const reflect = opts?.reflect ?? true;
        meta.attrs.set(attrName, {
            propName: ctx.name,
            observe: opts?.observed ?? true,
            reflect,
            access: base,
        });
        return {
            init(value) {
                if (typeof value === "boolean") {
                    return value;
                }
                const attrValue = this.getAttribute(attrName);
                if (attrValue === null) {
                    return value;
                }
                if (typeof value === "number") {
                    return Number(attrValue);
                }
                return attrValue;
            },
            set(value) {
                if (reflect) {
                    if (value === true) {
                        if (!this.hasAttribute(attrName)) {
                            this.setAttribute(attrName, "");
                        }
                    }
                    else if (value === false) {
                        if (this.hasAttribute(attrName)) {
                            this.removeAttribute(attrName);
                        }
                    }
                    else {
                        const strValue = String(value);
                        if (this.getAttribute(attrName) !== strValue) {
                            this.setAttribute(attrName, strValue);
                        }
                    }
                }
                base.set.call(this, value);
            },
        };
    };
}
function parseAttrName(val) {
    let value;
    if (typeof val === "symbol") {
        if (val.description) {
            value = val.description;
        }
        else {
            throw new Error("Cannot handle Symbol property without description");
        }
    }
    else {
        value = val;
    }
    return value.toLowerCase().replaceAll(" ", "-");
}
//# sourceMappingURL=attr.js.map