@limetech/lime-elements/dist/esm/limel-dynamic-label.entry.js

Lime Elements

import { r as registerInstance, h } from './index-DBTJNfo7.js';
import { g as getIconName } from './get-icon-props-CgNJbSP4.js';

const dynamicLabelCss = () => `*{box-sizing:border-box;min-width:0}:host(limel-dynamic-label){--limel-dynamic-label-min-height:1.75rem;display:flex;gap:0.25rem;align-items:flex-start;border-radius:0.5rem;min-width:0}limel-icon{--limel-icon-svg-margin:0.125rem;border-radius:0.25rem;flex-shrink:0;width:var(--limel-dynamic-label-min-height);color:rgb(var(--contrast-900))}label{flex-grow:1;font-size:var(--limel-theme-default-small-font-size);line-height:normal;color:var(--limel-theme-on-surface-color);padding-top:0.375rem}`;

const DynamicLabel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * The label to display when no matching value is found in the `labels`
         * array. This is a fallback label that ensures there's always a label
         * displayed for the component.
         */
        this.defaultLabel = {};
        /**
         * A list of available labels. Each label has a corresponding value that
         * will be matched with the current `value` of the component to determine
         * what label to display.
         */
        this.labels = [];
    }
    render() {
        var _a, _b;
        const label = this.labels.find((l) => l.value === this.value);
        return [
            this.renderIcon((_a = label === null || label === void 0 ? void 0 : label.icon) !== null && _a !== void 0 ? _a : this.defaultLabel.icon),
            this.renderLabel((_b = label === null || label === void 0 ? void 0 : label.text) !== null && _b !== void 0 ? _b : this.defaultLabel.text),
        ];
    }
    renderIcon(icon) {
        const iconName = getIconName(icon);
        if (!iconName) {
            return;
        }
        let iconColor;
        let iconBackgroundColor;
        if (typeof icon === 'object') {
            iconColor = icon.color;
            iconBackgroundColor = icon.backgroundColor;
        }
        const iconProps = {
            role: 'presentation',
            name: iconName,
            style: {
                color: iconColor,
                'background-color': iconBackgroundColor,
            },
        };
        return h("limel-icon", Object.assign({}, iconProps));
    }
    renderLabel(label = '') {
        return h("label", null, label);
    }
};
DynamicLabel.style = dynamicLabelCss();

export { DynamicLabel as limel_dynamic_label };