@salla.sa/twilight-components/dist/components/salla-badge2.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}

const falsyToString = (value)=>typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
const cx = clsx;
const cva = (base, config)=>{
    return (props)=>{
        var ref;
        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
        const { variants , defaultVariants  } = config;
        const getVariantClassNames = Object.keys(variants).map((variant)=>{
            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
            if (variantProp === null) return null;
            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
            return variants[variant][variantKey];
        });
        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
            let [key, value] = param;
            if (value === undefined) {
                return acc;
            }
            acc[key] = value;
            return acc;
        }, {});
        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1)=>{
            let { class: cvClass , className: cvClassName , ...compoundVariantOptions } = param1;
            return Object.entries(compoundVariantOptions).every((param)=>{
                let [key, value] = param;
                return Array.isArray(value) ? value.includes({
                    ...defaultVariants,
                    ...propsWithoutUndefined
                }[key]) : ({
                    ...defaultVariants,
                    ...propsWithoutUndefined
                })[key] === value;
            }) ? [
                ...acc,
                cvClass,
                cvClassName
            ] : acc;
        }, []);
        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
    };
};

const sallaBadgeCss = "";

const badge = cva('s-badge-base', {
    variants: {
        size: {
            xs: 's-badge-xs',
            sm: 's-badge-sm',
            md: 's-badge-md',
        },
        bg: {
            transparent: 's-badge-transparent',
            light: 's-badge-light',
            'primary-100': 's-badge-primary-100',
        },
        color: {
            black: 's-badge-black',
            'primary-900': 's-badge-color-primary-900',
        },
    },
});
const SallaBadge = /*@__PURE__*/ proxyCustomElement(class SallaBadge extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         * The size of the badge
         */
        this.size = 'sm';
        /**
         * The text color of the badge
         */
        this.color = 'black';
        /**
         * The background color of the badge
         */
        this.bg = 'light';
    }
    render() {
        return (h("div", { key: '9d81a7c592a57a533e2b8a48f015e2f9e796be51', class: badge({ size: this.size, bg: this.bg, color: this.color }) }, h("slot", { key: '999e75ec14a8346d84dbfc5122c448999d4fc481' })));
    }
    static get style() { return sallaBadgeCss; }
}, [4, "salla-badge", {
        "size": [1],
        "color": [1],
        "bg": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-badge"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-badge":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaBadge);
            }
            break;
    } });
}
defineCustomElement();

export { SallaBadge as S, defineCustomElement as d };