import { h, Host, } from "@stencil/core";
/**
 * This component enables you to select a swatch from out color palette, simply
 * by clicking on it. You can then copy the css variable name of the chosen color
 * and use it where desired.
 *
 * The color picker can also show you a preview of any valid color name or color value.
 *
 * :::note
 * Make sure to read our [guidelines about usage of colors](#/DesignGuidelines/color-system.md/) from our palette.
 * :::
 *
 * @exampleComponent limel-example-color-picker-basic
 * @exampleComponent limel-example-color-picker-custom-palette
 * @exampleComponent limel-example-color-picker-manual-input
 * @exampleComponent limel-example-color-picker-composite
 */
export class ColorPicker {
    constructor() {
        /**
         * Set to `true` to disable the field.
         * Use `disabled` to indicate that the field can normally be interacted
         * with, but is currently disabled. This tells the user that if certain
         * requirements are met, the field may become enabled again.
         */
        this.disabled = false;
        /**
         * Set to `true` to make the field read-only.
         * Use `readonly` when the field is only there to present the data it holds,
         * and will not become possible for the current user to edit.
         */
        this.readonly = false;
        /**
         * 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.
         * Setting this to `false` does not completely disable the color picker.
         * It will only allow users to pick from the provided color palette.
         */
        this.manualInput = true;
        this.isOpen = false;
        this.shouldFocus = false;
        this.renderTooltip = () => {
            if (!this.readonly && this.tooltipLabel) {
                return (h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-button" }));
            }
        };
        this.renderPickerPalette = () => {
            if (this.readonly) {
                return this.renderPickerTrigger();
            }
            return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, placeholder: this.placeholder, invalid: this.invalid, onChange: this.handleChange, required: this.required, palette: this.palette, columnCount: this.paletteColumnCount, manualInput: this.manualInput })));
        };
        this.renderPickerTrigger = () => {
            const background = this.value ? { '--background': this.value } : {};
            return (h("button", { slot: "trigger", style: background, role: "button", onClick: this.openPopover, id: "tooltip-button", disabled: this.readonly || this.disabled }));
        };
        this.setColorPickerPaletteElement = (element) => {
            this.contentElement = element;
        };
        this.openPopover = (event) => {
            event.stopPropagation();
            this.isOpen = true;
            this.shouldFocus = this.isOpen;
        };
        this.onPopoverClose = (event) => {
            event.stopPropagation();
            this.isOpen = false;
        };
        this.handleChange = (event) => {
            event.stopPropagation();
            this.change.emit(event.detail);
        };
    }
    disconnectedCallback() {
        this.isOpen = false;
    }
    componentDidRender() {
        var _a;
        if (this.shouldFocus && this.isOpen) {
            this.shouldFocus = false;
            (_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.focus();
        }
    }
    render() {
        return (h(Host, { key: 'e5e7516bc0e5e496acb92490b5ce638a1d8140f2' }, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { key: '147b1c5a85b6497c96ea471f7e2e101b0d98e3d8', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
    }
    static get is() { return "limel-color-picker"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["color-picker.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["color-picker.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Name or code of the chosen color"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label of the input field"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "label"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Helper text of the input field"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "helper-text"
            },
            "tooltipLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displayed as tooltips when picker is hovered."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "tooltip-label"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` if a value is required"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "required"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to disable the field.\nUse `disabled` to indicate that the field can normally be interacted\nwith, but is currently disabled. This tells the user that if certain\nrequirements are met, the field may become enabled again."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to make the field read-only.\nUse `readonly` when the field is only there to present the data it holds,\nand will not become possible for the current user to edit."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "readonly",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to indicate that the current value of the input field is\ninvalid."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The placeholder text shown inside the input field,\nwhen the field is focused and empty."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "placeholder"
            },
            "manualInput": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `false` to disallow custom color values to be typed into the input field.\nSetting this to `false` does not completely disable the color picker.\nIt will only allow users to pick from the provided color palette."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "manual-input",
                "defaultValue": "true"
            },
            "palette": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Array<string | CustomColorSwatch>",
                    "resolved": "(string | CustomColorSwatch)[]",
                    "references": {
                        "Array": {
                            "location": "global",
                            "id": "global::Array"
                        },
                        "CustomColorSwatch": {
                            "location": "import",
                            "path": "./color-picker.types",
                            "id": "src/components/color-picker/color-picker.types.ts::CustomColorSwatch",
                            "referenceLocation": "CustomColorSwatch"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "An array of either color value strings, or objects with a `name` and a `value`,\nwhich replaces the default palette. Any valid CSS color format is accepted as value\n(HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.)."
                },
                "getter": false,
                "setter": false
            },
            "paletteColumnCount": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the number of columns in the color swatch grid.\nIf not provided, it will default to the number of colors in the palette;\nbut stops at a maximum of 25 columns."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "palette-column-count"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {}
        };
    }
    static get events() {
        return [{
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emits chosen value to the parent component"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
}
