import { r as registerInstance, c as createEvent, h, H as Host } from './index-BIwHMk6j.js';
import { C as COLOR_PALETTES } from './color-palettes-1N3bZuHj.js';

const colorPalettePickerCss = () => `:host(limebb-color-palette-picker){box-sizing:border-box;display:block;--color-palette-swatches-transform:scale(0.9) translateX(0.5rem)}`;

const NONE_VALUE = '';
const SWATCH_STYLE = {
    display: 'block',
    order: 3,
    width: '6rem',
    flexShrink: 0,
    marginRight: '-0.5rem',
};
const ColorPalettePicker = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.change = createEvent(this, "change");
        this.options = [];
        this.optionsById = new Map();
        this.handleChange = (event) => {
            var _a;
            event.stopPropagation();
            const detail = event
                .detail;
            const option = Array.isArray(detail) ? detail[0] : detail;
            this.change.emit((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : NONE_VALUE);
        };
    }
    componentWillLoad() {
        this.options = buildOptions();
        this.optionsById = new Map(this.options.map((option) => [option.value, option]));
    }
    render() {
        return (h(Host, { key: '60917a56a3aede46b8fdcae4ea47ea61801edc3e' }, h("limel-select", { key: '9903a9645f7c46d6f7d96f7683b592716e38320e', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, options: this.options, value: this.getSelectedOption(), onChange: this.handleChange })));
    }
    /**
     * Resolve `this.value` against the cached options map. Returns
     * `undefined` when no value is set (so the trigger renders
     * unselected), or falls back to the (none) option when the value
     * is set but unrecognized — with a one-time warning so a
     * developer integrating the picker sees the stale id during
     * debugging.
     */
    getSelectedOption() {
        if (!this.value) {
            return undefined;
        }
        const match = this.optionsById.get(this.value);
        if (match) {
            return match;
        }
        if (this.lastWarnedValue !== this.value) {
            console.warn(`limebb-color-palette-picker: palette "${this.value}" was not found in the registry. Rendering as (none).`);
            this.lastWarnedValue = this.value;
        }
        return this.optionsById.get(NONE_VALUE);
    }
};
/**
 * Build the limel-select options once. Palettes don't change at
 * runtime, so this work happens once per component instance instead
 * of on every render.
 */
function buildOptions() {
    return [
        { text: '', value: NONE_VALUE },
        ...COLOR_PALETTES.map((palette) => ({
            text: palette.title,
            secondaryText: palette.description,
            value: palette.id,
            primaryComponent: {
                name: 'limebb-color-palette-swatches',
                props: {
                    colors: palette.colors,
                    style: SWATCH_STYLE,
                },
            },
        })),
    ];
}
ColorPalettePicker.style = colorPalettePickerCss();

export { ColorPalettePicker as limebb_color_palette_picker };
