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

Intelligently apply styles to WebComponents

import { metadataStore } from "./metadata.js";
export function attr(opts) {
    return function attrDecorator({ get, set }, 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,
            getPropValue: get,
            setPropValue: set,
        });
        return {
            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);
                        }
                    }
                }
                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