'use strict';

var index = require('./index-BjHIBY-I.js');

const colors = [
    'red',
    'pink',
    'magenta',
    'purple',
    'violet',
    'indigo',
    'blue',
    'sky',
    'cyan',
    'teal',
    'green',
    'lime',
    'grass',
    'yellow',
    'amber',
    'orange',
    'coral',
    'brown',
    'gray',
    'glaucous',
];
const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];
/**
 * Returns the CSS variable name holding the RGB triplet for the color & brightness.
 *
 * @param color the base color identifier (e.g. "red", "blue")
 * @param brightness the brightness variant (e.g. "light", "default")
 * @returns CSS variable name in the form --color-{color}-{brightness}
 */
function getColorName(color, brightness) {
    return `--color-${color}-${brightness}`;
}
/**
 * Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))
 * @param color
 * @param brightness
 */
function getSwatchValue(color, brightness) {
    return `rgb(var(${getColorName(color, brightness)}))`;
}
/**
 * Swatch name: human readable label like "red default"
 * @param color
 * @param brightness
 */
function getSwatchName(color, brightness) {
    return `${color} ${brightness}`;
}
/**
 * Convenience factory returning both name & value.
 * @param color
 * @param brightness
 */
function createSwatch(color, brightness) {
    return {
        name: getSwatchName(color, brightness),
        value: getSwatchValue(color, brightness),
    };
}

const colorPickerPaletteCss = () => `@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host(limel-color-picker-palette){--limel-color-palette-gap:0.25rem;--limel-color-palette-max-column-count:25;--limel-color-palette-min-width:8rem;box-sizing:border-box;border-radius:0.75rem;display:flex;flex-direction:column;gap:1rem;padding:0.75rem}*,*:before,:after{box-sizing:border-box}.color-picker-palette{display:grid;gap:var(--limel-color-palette-gap);grid-template-columns:repeat(min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)), 1fr);width:100%;max-width:58rem;min-width:var(--limel-color-palette-min-width)}.chosen-color-name{display:flex;gap:0.5rem}limel-input-field{flex-grow:1;width:min-content}.chosen-color-preview{flex-shrink:0;isolation:isolate;position:relative;width:2.5rem;height:2.5rem;border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.chosen-color-preview:before,.chosen-color-preview:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%20style='fill-rule:evenodd;'%3E%3Cpath%20fill='rgba(186,186,192,0.16)'%20d='M0%200h4v4H0zM4%204h4v4H4z'/%3E%3C/svg%3E");background-size:0.5rem;z-index:0}.chosen-color-preview:after{background:var(--background);z-index:1}button.swatch{all:unset;position:relative;display:flex;justify-content:center;align-items:center;max-width:3rem;min-width:max(2rem, 100% / min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - (min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - 1) * var(--limel-color-palette-gap));aspect-ratio:1;border-radius:0.1875rem}button.swatch:focus{outline:none}button.swatch:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.swatch{background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus,button.swatch:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button.swatch:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.swatch:focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.125rem rgb(var(--contrast-100)) inset}button.swatch[disabled]{cursor:not-allowed;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset}button.swatch[disabled]:after{content:"";position:absolute;inset:0;margin:auto;width:0.125rem;height:100%;opacity:0.6;rotate:45deg;border-radius:1rem;background-color:rgb(var(--contrast-100))}button.swatch--selected{box-shadow:var(--button-shadow-inset);border-radius:50%}`;

const Palette = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.change = index.createEvent(this, "change");
        /**
         * Set to `true` to indicate that the current value of the input field is
         * invalid.
         */
        this.invalid = false;
        /**
         * Set to `false` to disallow custom color values to be typed into the input field.
         */
        this.manualInput = true;
        this.renderSwatches = () => {
            return this.getPalette().map(this.renderSwatchButton);
        };
        this.renderSwatchButton = (swatch, index$1) => {
            const isSelected = this.value === swatch.value;
            const classList = {
                swatch: true,
                'swatch--selected': isSelected,
                'custom-swatch': this.usesCustomPalette(),
            };
            return (index.h("button", { class: classList, style: { '--limel-color-picker-swatch-color': swatch.value }, title: swatch.name, disabled: swatch.disabled, "data-index": index$1, key: index$1, onClick: this.handleSwatchClick(swatch.value) }));
        };
        this.handleChange = (event) => {
            event.stopPropagation();
            this.change.emit(event.detail);
        };
        this.handleSwatchClick = (value) => (event) => {
            event.stopPropagation();
            const newValue = this.value === value ? '' : value;
            this.change.emit(newValue);
        };
    }
    render() {
        const background = this.value ? { '--background': this.value } : {};
        return [
            index.h("div", { key: '184f8b9b74ebeb5611aa28ff3b14dbb225118af2', class: "color-picker-palette", style: {
                    '--color-picker-column-count': `${this.getColumnCount()}`,
                } }, this.renderSwatches()),
            index.h("div", { key: '27b19d8906e5f28c86c27476ebe0287b6043eb66', class: "chosen-color-name" }, index.h("limel-input-field", { key: 'd055b72d5570bcb085b728eb0cf4698b80a44643', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), index.h("div", { key: '051cc6a16e9659aabb01f4b6b9f0b30036d440b4', class: "chosen-color-preview", style: background })),
        ];
    }
    getPalette() {
        if (this.usesCustomPalette()) {
            return (this.palette || []).map((entry) => {
                const normalized = this.normalizeEntry(entry);
                return {
                    name: normalized.name || normalized.value,
                    value: normalized.value,
                    disabled: normalized.disabled,
                };
            });
        }
        // Order default swatches by brightness first, then by color.
        // This gives a more intuitive CSS grid layout logic, and
        // enables adding the `columnCount` prop.
        const swatches = [];
        for (const b of brightnesses) {
            for (const color of colors) {
                swatches.push(createSwatch(color, b));
            }
        }
        return swatches;
    }
    normalizeEntry(entry) {
        if (typeof entry === 'string') {
            return { value: entry };
        }
        return entry;
    }
    usesCustomPalette() {
        var _a;
        return ((_a = this.palette) === null || _a === void 0 ? void 0 : _a.length) > 0;
    }
    getColumnCount() {
        if (this.columnCount > 0) {
            return this.columnCount;
        }
        // Default palette: fixed 20 columns (one per base color)
        if (!this.usesCustomPalette()) {
            return 20;
        }
        // Custom palette: span all provided swatches unless empty
        const palette = this.getPalette();
        return palette.length > 0 ? palette.length : 1;
    }
    static get delegatesFocus() { return true; }
};
Palette.style = colorPickerPaletteCss();

exports.limel_color_picker_palette = Palette;
