@xlabs-store/core 0.0.1

package/dist/esm/x-color-picker-panel_2.entry.js

@@ -0,0 +1,870 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+import { c as createColor } from './types-C_QdJRdB.js';
+import { g as getIcon } from './config-BPeosvTA.js';
+
+const xColorPickerPanelCss = () => `:host{display:block}.x-color-picker-panel{width:280px;padding:12px;background:#fff;border-radius:6px;-webkit-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);-webkit-box-sizing:border-box;box-sizing:border-box}.x-color-picker-palette{position:relative;width:100%;height:180px;border-radius:4px;cursor:crosshair;overflow:hidden;margin-bottom:12px}.x-color-picker-palette-saturation{position:absolute;inset:0;background:-webkit-gradient(linear, left top, right top, from(#fff), to(transparent));background:linear-gradient(to right, #fff, transparent)}.x-color-picker-palette-brightness{position:absolute;inset:0;background:-webkit-gradient(linear, left bottom, left top, from(#000), to(transparent));background:linear-gradient(to top, #000, transparent)}.x-color-picker-palette-handler{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.45);box-shadow:0 0 2px rgba(0, 0, 0, 0.45);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:-webkit-grab;cursor:grab;pointer-events:none}.x-color-picker-slider-container{margin-bottom:12px}.x-color-picker-slider-group{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px;margin-bottom:8px}.x-color-picker-slider-group:last-child{margin-bottom:0}.x-color-picker-slider{position:relative;-ms-flex:1;flex:1;height:12px;border-radius:4px;cursor:pointer}.x-color-picker-slider-rail{position:absolute;inset:0;border-radius:4px}.x-color-picker-slider-hue .x-color-picker-slider-rail{background:-webkit-gradient(linear, left top, right top, from(hsl(0, 100%, 50%)), color-stop(hsl(60, 100%, 50%)), color-stop(hsl(120, 100%, 50%)), color-stop(hsl(180, 100%, 50%)), color-stop(hsl(240, 100%, 50%)), color-stop(hsl(300, 100%, 50%)), to(hsl(0, 100%, 50%)));background:linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))}.x-color-picker-slider-alpha{background-image:conic-gradient(rgba(0, 0, 0, 0.06) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.06) 75%, transparent 75%);background-size:8px 8px}.x-color-picker-slider-alpha-gradient{position:absolute;inset:0;border-radius:4px}.x-color-picker-slider-handle{position:absolute;top:50%;width:12px;height:12px;background:#fff;border-radius:50%;-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.45);box-shadow:0 0 2px rgba(0, 0, 0, 0.45);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:-webkit-grab;cursor:grab;pointer-events:none}.x-color-picker-slider-preview{width:24px;height:12px;border-radius:4px;background-image:conic-gradient(rgba(0, 0, 0, 0.06) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.06) 75%, transparent 75%);background-size:8px 8px;overflow:hidden}.x-color-picker-slider-preview-inner{width:100%;height:100%}.x-color-picker-input-container{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;gap:8px;margin-bottom:12px;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.x-color-picker-format-dropdown{position:relative;-ms-flex-negative:0;flex-shrink:0}.x-color-picker-format-trigger{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;gap:4px;height:24px;min-width:52px;padding:0 8px;border:1px solid #d9d9d9;border-radius:4px;background:#fff;font-size:12px;color:rgba(0, 0, 0, 0.88);cursor:pointer;outline:none;-webkit-transition:all 0.2s;transition:all 0.2s}.x-color-picker-format-trigger:hover{border-color:#1677ff}.x-color-picker-format-trigger:focus{border-color:#1677ff;-webkit-box-shadow:0 0 0 2px rgba(22, 119, 255, 0.1);box-shadow:0 0 0 2px rgba(22, 119, 255, 0.1)}.x-color-picker-format-arrow{font-size:10px;color:rgba(0, 0, 0, 0.45);-webkit-transition:-webkit-transform 0.2s;transition:-webkit-transform 0.2s;transition:transform 0.2s;transition:transform 0.2s, -webkit-transform 0.2s}.x-color-picker-format-arrow.is-open{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.x-color-picker-format-menu{position:absolute;top:100%;left:0;z-index:1050;min-width:100%;margin-top:4px;padding:4px;background:#fff;border-radius:6px;-webkit-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)}.x-color-picker-format-option{padding:5px 12px;font-size:12px;color:rgba(0, 0, 0, 0.88);border-radius:4px;cursor:pointer;-webkit-transition:background 0.2s;transition:background 0.2s;white-space:nowrap}.x-color-picker-format-option:hover{background:rgba(0, 0, 0, 0.04)}.x-color-picker-format-option.is-selected{font-weight:600;background:rgba(22, 119, 255, 0.1);color:#1677ff}.x-color-picker-input-group{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;gap:4px;min-width:0;overflow:hidden}.x-color-picker-input-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;min-width:0}.x-color-picker-input{width:100%;height:24px;padding:0 4px;border:1px solid #d9d9d9;border-radius:4px;font-size:12px;text-align:center;outline:none;-webkit-transition:border-color 0.2s;transition:border-color 0.2s;-webkit-box-sizing:border-box;box-sizing:border-box}.x-color-picker-input:focus{border-color:#1677ff}.x-color-picker-input::-webkit-outer-spin-button,.x-color-picker-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.x-color-picker-input[type=number]{-moz-appearance:textfield}.x-color-picker-input-label{font-size:10px;color:rgba(0, 0, 0, 0.45);margin-top:2px;line-height:1}.x-color-picker-input-alpha-wrapper{-ms-flex:0 0 auto;flex:0 0 auto;width:40px;min-width:40px}.x-color-picker-input-alpha{width:100%}.x-color-picker-presets{margin-bottom:8px}.x-color-picker-presets:last-child{margin-bottom:0}.x-color-picker-presets-label{margin-bottom:8px;font-size:12px;color:rgba(0, 0, 0, 0.45)}.x-color-picker-presets-colors{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:6px}.x-color-picker-preset-color{width:24px;height:24px;border-radius:4px;cursor:pointer;background-image:conic-gradient(rgba(0, 0, 0, 0.06) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.06) 75%, transparent 75%);background-size:8px 8px;overflow:hidden;-webkit-transition:-webkit-transform 0.1s;transition:-webkit-transform 0.1s;transition:transform 0.1s;transition:transform 0.1s, -webkit-transform 0.1s}.x-color-picker-preset-color:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.x-color-picker-preset-color-inner{width:100%;height:100%}.x-color-picker-clear-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:32px;padding:0;border:1px solid #d9d9d9;border-radius:4px;background:#fff;font-size:14px;color:rgba(0, 0, 0, 0.88);cursor:pointer;-webkit-transition:all 0.2s;transition:all 0.2s;margin-top:8px}.x-color-picker-clear-btn:hover{color:#1677ff;border-color:#1677ff}`;
+
+const XColorPickerPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.colorChange = createEvent(this, "colorChange", 7);
+        this.colorChangeComplete = createEvent(this, "colorChangeComplete", 7);
+        this.formatChange = createEvent(this, "formatChange", 7);
+        this.colorClear = createEvent(this, "colorClear", 7);
+    }
+    get el() { return getElement(this); }
+    // ==================== Props ====================
+    /**
+     * Current color value
+     */
+    color;
+    /**
+     * Current format
+     */
+    format = 'hex';
+    /**
+     * Whether to disable alpha slider
+     */
+    disabledAlpha = false;
+    /**
+     * Whether to disable format selector
+     */
+    disabledFormat = false;
+    /**
+     * Preset colors
+     */
+    presets;
+    /**
+     * Whether to show clear button
+     */
+    allowClear = false;
+    // ==================== State ====================
+    formatDropdownOpen = false;
+    // ==================== Events ====================
+    /**
+     * Emitted when color changes during interaction
+     */
+    colorChange;
+    /**
+     * Emitted when color picking is complete (mouse up)
+     */
+    colorChangeComplete;
+    /**
+     * Emitted when format changes
+     */
+    formatChange;
+    /**
+     * Emitted when clear button is clicked
+     */
+    colorClear;
+    // ==================== Private Properties ====================
+    paletteRef;
+    isDragging = false;
+    // ==================== Lifecycle ====================
+    componentDidLoad() {
+        // Initialize if color is provided as string
+        if (!this.color) {
+            this.color = createColor('#1677ff');
+        }
+    }
+    // ==================== Watchers ====================
+    handleColorPropChange(newColor) {
+        if (typeof newColor === 'string') {
+            this.color = createColor(newColor);
+        }
+    }
+    // ==================== Public Methods ====================
+    /**
+     * Update the color externally
+     */
+    async setColor(color) {
+        this.color = typeof color === 'string' ? createColor(color) : color;
+    }
+    // ==================== Event Handlers ====================
+    handlePaletteMouseDown = (e) => {
+        e.preventDefault();
+        this.isDragging = true;
+        this.updateColorFromPalette(e);
+        const onMove = (e) => {
+            if (this.isDragging) {
+                this.updateColorFromPalette(e);
+            }
+        };
+        const onUp = () => {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            this.colorChangeComplete.emit(this.color);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    };
+    updateColorFromPalette(e) {
+        if (!this.paletteRef)
+            return;
+        const rect = this.paletteRef.getBoundingClientRect();
+        const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+        const newHsb = {
+            h: this.color.hsb.h,
+            s: x,
+            b: 1 - y,
+            a: this.color.hsb.a,
+        };
+        this.color = createColor(newHsb);
+        this.colorChange.emit(this.color);
+    }
+    handleHueSliderMouseDown = (e) => {
+        e.preventDefault();
+        this.isDragging = true;
+        this.updateHueFromSlider(e);
+        const slider = e.currentTarget;
+        const onMove = (e) => {
+            if (this.isDragging) {
+                this.updateHueFromSlider(e, slider);
+            }
+        };
+        const onUp = () => {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            this.colorChangeComplete.emit(this.color);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    };
+    updateHueFromSlider(e, slider) {
+        const el = slider || e.currentTarget;
+        const rect = el.getBoundingClientRect();
+        const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const newHsb = {
+            ...this.color.hsb,
+            h: percent * 360,
+        };
+        this.color = createColor(newHsb);
+        this.colorChange.emit(this.color);
+    }
+    handleAlphaSliderMouseDown = (e) => {
+        e.preventDefault();
+        this.isDragging = true;
+        this.updateAlphaFromSlider(e);
+        const slider = e.currentTarget;
+        const onMove = (e) => {
+            if (this.isDragging) {
+                this.updateAlphaFromSlider(e, slider);
+            }
+        };
+        const onUp = () => {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            this.colorChangeComplete.emit(this.color);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    };
+    updateAlphaFromSlider(e, slider) {
+        const el = slider || e.currentTarget;
+        const rect = el.getBoundingClientRect();
+        const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const newHsb = {
+            ...this.color.hsb,
+            a: percent,
+        };
+        this.color = createColor(newHsb);
+        this.colorChange.emit(this.color);
+    }
+    handleFormatChange = (newFormat) => {
+        this.format = newFormat;
+        this.formatDropdownOpen = false;
+        this.formatChange.emit(this.format);
+    };
+    toggleFormatDropdown = (e) => {
+        e.stopPropagation();
+        this.formatDropdownOpen = !this.formatDropdownOpen;
+    };
+    closeFormatDropdown = () => {
+        this.formatDropdownOpen = false;
+    };
+    handleHexInputChange = (e) => {
+        const input = e.target;
+        let hex = input.value.trim();
+        if (!hex.startsWith('#'))
+            hex = '#' + hex;
+        try {
+            this.color = createColor(hex);
+            this.colorChange.emit(this.color);
+            this.colorChangeComplete.emit(this.color);
+        }
+        catch {
+            // Invalid color, reset input
+            input.value = this.color.toHex().toUpperCase();
+        }
+    };
+    handleRgbInputChange = (index, e) => {
+        const input = e.target;
+        const rgb = this.color.toRgb();
+        const values = [rgb.r, rgb.g, rgb.b];
+        values[index] = Math.max(0, Math.min(255, parseInt(input.value) || 0));
+        this.color = createColor({
+            r: values[0],
+            g: values[1],
+            b: values[2],
+            a: rgb.a,
+        });
+        this.colorChange.emit(this.color);
+        this.colorChangeComplete.emit(this.color);
+    };
+    handleHsbInputChange = (index, e) => {
+        const input = e.target;
+        const hsb = this.color.toHsb();
+        const values = [hsb.h, hsb.s * 100, hsb.b * 100];
+        values[index] = parseFloat(input.value) || 0;
+        this.color = createColor({
+            h: Math.max(0, Math.min(360, values[0])),
+            s: Math.max(0, Math.min(100, values[1])) / 100,
+            b: Math.max(0, Math.min(100, values[2])) / 100,
+            a: hsb.a,
+        });
+        this.colorChange.emit(this.color);
+        this.colorChangeComplete.emit(this.color);
+    };
+    handleAlphaInputChange = (e) => {
+        const input = e.target;
+        const alpha = Math.max(0, Math.min(100, parseInt(input.value) || 0)) / 100;
+        const newHsb = {
+            ...this.color.hsb,
+            a: alpha,
+        };
+        this.color = createColor(newHsb);
+        this.colorChange.emit(this.color);
+        this.colorChangeComplete.emit(this.color);
+    };
+    handlePresetColorClick = (colorStr) => {
+        this.color = createColor(colorStr);
+        this.colorChange.emit(this.color);
+        this.colorChangeComplete.emit(this.color);
+    };
+    handleClearClick = () => {
+        this.colorClear.emit();
+    };
+    // ==================== Render ====================
+    renderFormatDropdown() {
+        if (this.disabledFormat)
+            return null;
+        const formats = [
+            { value: 'hex', label: 'HEX' },
+            { value: 'rgb', label: 'RGB' },
+            { value: 'hsb', label: 'HSB' },
+        ];
+        return (h("div", { class: "x-color-picker-format-dropdown" }, h("button", { type: "button", class: "x-color-picker-format-trigger", onClick: this.toggleFormatDropdown, onBlur: () => setTimeout(this.closeFormatDropdown, 150) }, h("span", null, this.format.toUpperCase()), h("svg", { class: { 'x-color-picker-format-arrow': true, 'is-open': this.formatDropdownOpen }, viewBox: "64 64 896 896", width: "1em", height: "1em", fill: "currentColor" }, h("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" }))), this.formatDropdownOpen && (h("div", { class: "x-color-picker-format-menu" }, formats.map((f) => (h("div", { class: {
+                'x-color-picker-format-option': true,
+                'is-selected': this.format === f.value,
+            }, onClick: () => this.handleFormatChange(f.value) }, f.label)))))));
+    }
+    renderInputs() {
+        const color = this.color;
+        const rgb = color.toRgb();
+        const hsb = color.toHsb();
+        if (this.format === 'hex') {
+            return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "text", class: "x-color-picker-input x-color-picker-input-hex", value: color.toHex().toUpperCase(), maxLength: 8, onChange: this.handleHexInputChange }), h("span", { class: "x-color-picker-input-label" }, "#")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(rgb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
+        }
+        else if (this.format === 'rgb') {
+            return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.r), min: 0, max: 255, onChange: (e) => this.handleRgbInputChange(0, e) }), h("span", { class: "x-color-picker-input-label" }, "R")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.g), min: 0, max: 255, onChange: (e) => this.handleRgbInputChange(1, e) }), h("span", { class: "x-color-picker-input-label" }, "G")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.b), min: 0, max: 255, onChange: (e) => this.handleRgbInputChange(2, e) }), h("span", { class: "x-color-picker-input-label" }, "B")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(rgb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
+        }
+        else {
+            return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.h), min: 0, max: 360, onChange: (e) => this.handleHsbInputChange(0, e) }), h("span", { class: "x-color-picker-input-label" }, "H")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.s * 100), min: 0, max: 100, onChange: (e) => this.handleHsbInputChange(1, e) }), h("span", { class: "x-color-picker-input-label" }, "S")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.b * 100), min: 0, max: 100, onChange: (e) => this.handleHsbInputChange(2, e) }), h("span", { class: "x-color-picker-input-label" }, "B")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(hsb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
+        }
+    }
+    renderPresets() {
+        if (!this.presets || this.presets.length === 0)
+            return null;
+        return this.presets.map((preset) => (h("div", { class: "x-color-picker-presets" }, preset.label && (h("div", { class: "x-color-picker-presets-label" }, h("span", null, preset.label))), h("div", { class: "x-color-picker-presets-colors" }, preset.colors.map((presetColor) => {
+            const colorStr = typeof presetColor === 'string'
+                ? presetColor
+                : presetColor.color || '#000';
+            return (h("div", { class: "x-color-picker-preset-color", onClick: () => this.handlePresetColorClick(colorStr) }, h("div", { class: "x-color-picker-preset-color-inner", style: { background: colorStr } })));
+        })))));
+    }
+    render() {
+        if (!this.color)
+            return null;
+        const hsb = this.color.toHsb();
+        return (h("div", { class: "x-color-picker-panel" }, h("div", { class: "x-color-picker-palette", ref: (el) => (this.paletteRef = el), style: { background: `hsl(${hsb.h}, 100%, 50%)` }, onMouseDown: this.handlePaletteMouseDown }, h("div", { class: "x-color-picker-palette-saturation" }), h("div", { class: "x-color-picker-palette-brightness" }), h("div", { class: "x-color-picker-palette-handler", style: {
+                left: `${hsb.s * 100}%`,
+                top: `${(1 - hsb.b) * 100}%`,
+                background: this.color.toHexString(),
+            } })), h("div", { class: "x-color-picker-slider-container" }, h("div", { class: "x-color-picker-slider-group" }, h("div", { class: "x-color-picker-slider x-color-picker-slider-hue", onMouseDown: this.handleHueSliderMouseDown }, h("div", { class: "x-color-picker-slider-rail" }), h("div", { class: "x-color-picker-slider-handle", style: { left: `${(hsb.h / 360) * 100}%` } })), h("div", { class: "x-color-picker-slider-preview" }, h("div", { class: "x-color-picker-slider-preview-inner", style: { background: this.color.toCssString() } }))), !this.disabledAlpha && (h("div", { class: "x-color-picker-slider-group" }, h("div", { class: "x-color-picker-slider x-color-picker-slider-alpha", onMouseDown: this.handleAlphaSliderMouseDown }, h("div", { class: "x-color-picker-slider-rail" }), h("div", { class: "x-color-picker-slider-alpha-gradient", style: {
+                background: `linear-gradient(to right, transparent, ${this.color.toHexString()})`,
+            } }), h("div", { class: "x-color-picker-slider-handle", style: { left: `${hsb.a * 100}%` } }))))), h("div", { class: "x-color-picker-input-container" }, this.renderFormatDropdown(), this.renderInputs()), this.renderPresets(), this.allowClear && (h("button", { type: "button", class: "x-color-picker-clear-btn", onClick: this.handleClearClick }, "Clear"))));
+    }
+    static get watchers() { return {
+        "color": [{
+                "handleColorPropChange": 0
+            }]
+    }; }
+};
+XColorPickerPanel.style = xColorPickerPanelCss();
+
+const xInputCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:inline-block;width:100%;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.x-input-wrapper{display:-ms-flexbox;display:flex;width:100%}.x-input-affix-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;min-width:0;padding:0 var(--x-control-padding-horizontal, var(--x-spacing-md, 12px));min-height:var(--x-control-height, var(--x-size-control-height, 32px));background-color:var(--x-control-bg, var(--x-color-bg-container, #ffffff));border:var(--x-control-border-width, var(--x-border-width-base, 1px)) solid var(--x-control-border-color, var(--x-color-border, #d9d9d9));border-radius:var(--x-control-border-radius, var(--x-border-radius-base, 6px));-webkit-transition:all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);-webkit-box-sizing:border-box;box-sizing:border-box}.x-input-affix-wrapper:hover:not(.disabled):not([disabled]):not([class*=-disabled]){border-color:var(--x-control-border-color-hover, var(--x-color-primary-hover, #4096ff))}.x-input-affix-wrapper.focused:not(.disabled):not([disabled]):not([class*=-disabled]),.x-input-affix-wrapper:focus-within:not(.disabled):not([disabled]):not([class*=-disabled]){border-color:var(--x-control-border-color-focus, var(--x-color-primary, #1677ff)) !important;-webkit-box-shadow:0 0 0 3px var(--x-color-primary-bg, rgba(22, 119, 255, 0.06));box-shadow:0 0 0 3px var(--x-color-primary-bg, rgba(22, 119, 255, 0.06));z-index:1;outline:none}.x-input-affix-wrapper{display:-ms-inline-flexbox;display:inline-flex;padding:var(--x-input-padding-block, var(--x-control-padding-vertical, var(--x-spacing-xxs, 4px))) var(--x-input-padding-inline, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)));background-image:none}.x-input-affix-wrapper.x-input-affix-wrapper-disabled.disabled,.x-input-affix-wrapper.x-input-affix-wrapper-disabled[disabled],.x-input-affix-wrapper.x-input-affix-wrapper-disabled[class*=-disabled]{background-color:var(--x-control-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04)));border-color:var(--x-control-border-color-disabled, var(--x-color-border, #d9d9d9));color:var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}.x-input-affix-wrapper.x-input-affix-wrapper-disabled.disabled:hover,.x-input-affix-wrapper.x-input-affix-wrapper-disabled[disabled]:hover,.x-input-affix-wrapper.x-input-affix-wrapper-disabled[class*=-disabled]:hover{border-color:var(--x-control-border-color-disabled, var(--x-color-border, #d9d9d9)) !important}.x-input-affix-wrapper.x-input-affix-wrapper-disabled .x-input{cursor:not-allowed;color:var(--x-input-color-disabled, var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25))))}.x-input-affix-wrapper.x-input-affix-wrapper-readonly{background-color:var(--x-input-bg, var(--x-control-bg, var(--x-color-bg-container, #ffffff)));cursor:default}.x-input-affix-wrapper-focused{border-color:var(--x-input-border-color-focus, var(--x-control-border-color-focus, var(--x-color-primary, #1677ff))) !important;-webkit-box-shadow:0 0 0 var(--x-input-outline-width-focus, var(--x-control-outline-width, 2px)) var(--x-input-outline-color-focus, var(--x-color-primary-bg, rgba(22, 119, 255, 0.06)));box-shadow:0 0 0 var(--x-input-outline-width-focus, var(--x-control-outline-width, 2px)) var(--x-input-outline-color-focus, var(--x-color-primary-bg, rgba(22, 119, 255, 0.06)));z-index:1}.x-input-affix-wrapper-status-error{border-color:var(--x-control-border-color-error, var(--x-color-error, #ff4d4f))}.x-input-affix-wrapper-status-error:hover:not(.disabled):not([disabled]){border-color:var(--x-control-border-color-error-hover, var(--x-color-error-hover, #ff7875))}.x-input-affix-wrapper-status-error.focused,.x-input-affix-wrapper-status-error:focus-within{border-color:var(--x-control-border-color-error, var(--x-color-error, #ff4d4f));-webkit-box-shadow:0 0 0 3px var(--x-control-focus-shadow-error-color, var(--x-color-error-bg, rgba(255, 38, 5, 0.06)));box-shadow:0 0 0 3px var(--x-control-focus-shadow-error-color, var(--x-color-error-bg, rgba(255, 38, 5, 0.06)))}.x-input-affix-wrapper-status-warning{border-color:var(--x-control-border-color-warning, var(--x-color-warning, #faad14))}.x-input-affix-wrapper-status-warning:hover:not(.disabled):not([disabled]){border-color:var(--x-control-border-color-warning-hover, var(--x-color-warning-hover, #ffc53d))}.x-input-affix-wrapper-status-warning.focused,.x-input-affix-wrapper-status-warning:focus-within{border-color:var(--x-control-border-color-warning, var(--x-color-warning, #faad14));-webkit-box-shadow:0 0 0 3px var(--x-control-focus-shadow-warning-color, var(--x-color-warning-bg, rgba(255, 215, 5, 0.1)));box-shadow:0 0 0 3px var(--x-control-focus-shadow-warning-color, var(--x-color-warning-bg, rgba(255, 215, 5, 0.1)))}.x-input-affix-wrapper-borderless{background-color:transparent;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.x-input-affix-wrapper-borderless:hover{border-color:transparent}.x-input-affix-wrapper-borderless.focused,.x-input-affix-wrapper-borderless:focus-within{border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.x-input-affix-wrapper-filled{background-color:var(--x-color-fill-tertiary, rgba(0, 0, 0, 0.04));border-color:transparent}.x-input-affix-wrapper-filled:hover:not(.disabled):not([disabled]){background-color:var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06));border-color:transparent}.x-input-affix-wrapper-filled.focused,.x-input-affix-wrapper-filled:focus-within{background-color:var(--x-control-bg, var(--x-color-bg-container, #ffffff));border-color:var(--x-control-border-color-focus, var(--x-color-primary, #1677ff))}.x-input{position:relative;display:inline-block;width:100%;min-width:0;padding:0;color:var(--x-input-color, var(--x-control-color, var(--x-color-text, rgba(0, 0, 0, 0.88))));font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;background-image:none;border:none;border-radius:0;-webkit-transition:none;transition:none;outline:none}.x-input::-webkit-input-placeholder{color:var(--x-input-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))));-webkit-user-select:none;user-select:none}.x-input::-moz-placeholder{color:var(--x-input-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))));-moz-user-select:none;user-select:none}.x-input:-ms-input-placeholder{color:var(--x-input-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))));-ms-user-select:none;user-select:none}.x-input::-ms-input-placeholder{color:var(--x-input-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))));-ms-user-select:none;user-select:none}.x-input::placeholder{color:var(--x-input-placeholder-color, var(--x-control-placeholder-color, var(--x-color-text-placeholder, rgba(0, 0, 0, 0.25))));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-input:disabled{color:var(--x-input-color-disabled, var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25))));background-color:transparent;cursor:not-allowed}.x-input:-moz-read-only{cursor:default}.x-input:read-only{cursor:default}.x-input[type=number]{-moz-appearance:textfield}.x-input[type=number]::-webkit-outer-spin-button,.x-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.x-input[type=search]::-webkit-search-cancel-button,.x-input[type=search]::-webkit-search-decoration{-webkit-appearance:none}.x-input-affix-wrapper-small{padding:var(--x-input-padding-block-sm, var(--x-control-padding-vertical-sm, var(--x-spacing-xxxs, 1px))) var(--x-input-padding-inline-sm, var(--x-control-padding-horizontal-sm, var(--x-spacing-sm, 8px)));font-size:var(--x-input-font-size-sm, var(--x-control-font-size-sm, var(--x-font-size-sm, 12px)));border-radius:var(--x-input-border-radius-sm, var(--x-control-border-radius-sm, var(--x-border-radius-sm, 4px)))}.x-input-affix-wrapper-large{padding:var(--x-input-padding-block-lg, var(--x-control-padding-vertical-lg, var(--x-spacing-xs, 7px))) var(--x-input-padding-inline-lg, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)));font-size:var(--x-input-font-size-lg, var(--x-control-font-size-lg, var(--x-font-size-lg, 16px)));border-radius:var(--x-input-border-radius-lg, var(--x-control-border-radius-lg, var(--x-border-radius-lg, 8px)))}:host(.x-input-group) .x-input-affix-wrapper{border-radius:0}:host(.x-input-group) .x-input-group-addon-before+.x-input-affix-wrapper{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}:host(.x-input-group) .x-input-affix-wrapper:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.x-input-group-addon{position:relative;padding:0 var(--x-input-padding-inline, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)));color:var(--x-input-color, var(--x-control-color, var(--x-color-text, rgba(0, 0, 0, 0.88))));font-weight:normal;font-size:var(--x-input-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)));text-align:center;background-color:var(--x-input-addon-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border:var(--x-input-border-width, var(--x-control-border-width, var(--x-border-width-base, 1px))) solid var(--x-input-border-color, var(--x-control-border-color, var(--x-color-border, #d9d9d9)));-webkit-transition:all var(--x-input-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-input-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:all var(--x-input-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-input-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;white-space:nowrap}.x-input-group-addon-before{border-right:0;border-top-left-radius:var(--x-input-border-radius, var(--x-control-border-radius, var(--x-border-radius-base, 6px)));border-bottom-left-radius:var(--x-input-border-radius, var(--x-control-border-radius, var(--x-border-radius-base, 6px)))}.x-input-group-addon-after{border-left:0;border-top-right-radius:var(--x-input-border-radius, var(--x-control-border-radius, var(--x-border-radius-base, 6px)));border-bottom-right-radius:var(--x-input-border-radius, var(--x-control-border-radius, var(--x-border-radius-base, 6px)))}.x-input-prefix{margin-right:var(--x-input-affix-margin, var(--x-spacing-xxs, 4px));display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-align:center;align-items:center;color:var(--x-input-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)))}.x-input-prefix>x-icon{font-size:var(--x-input-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)))}.x-input-suffix{margin-left:var(--x-input-affix-margin, var(--x-spacing-xxs, 4px));display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-align:center;align-items:center;gap:4px;color:var(--x-input-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)))}.x-input-suffix>x-icon{font-size:var(--x-input-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)))}.x-input-clear-icon{color:var(--x-input-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));font-size:var(--x-input-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)));cursor:pointer;-webkit-transition:color var(--x-input-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-input-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:color var(--x-input-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-input-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.x-input-clear-icon:hover{color:var(--x-input-icon-color-hover, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)))}.x-input-clear-icon svg{display:block}.x-input-password-icon{color:var(--x-input-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));font-size:var(--x-input-font-size, var(--x-control-font-size, var(--x-font-size-base, 14px)));cursor:pointer;-webkit-transition:color var(--x-input-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-input-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:color var(--x-input-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-input-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.x-input-password-icon:hover{color:var(--x-input-icon-color-hover, var(--x-color-text-secondary, rgba(0, 0, 0, 0.65)))}.x-input-password-icon svg{display:block}.x-input-count{color:var(--x-input-icon-color, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));font-size:var(--x-input-font-size-sm, var(--x-control-font-size-sm, var(--x-font-size-sm, 12px)));white-space:nowrap}:host(.x-input-wrapper-small){font-size:var(--x-input-font-size-sm, var(--x-control-font-size-sm, var(--x-font-size-sm, 12px)))}:host(.x-input-wrapper-small) .x-input-group-addon{padding:0 var(--x-input-padding-inline-sm, var(--x-control-padding-horizontal-sm, var(--x-spacing-sm, 8px)));font-size:var(--x-input-font-size-sm, var(--x-control-font-size-sm, var(--x-font-size-sm, 12px)));border-radius:var(--x-input-border-radius-sm, var(--x-control-border-radius-sm, var(--x-border-radius-sm, 4px)))}:host(.x-input-wrapper-small) .x-input-group-addon-before{border-top-left-radius:var(--x-input-border-radius-sm, var(--x-control-border-radius-sm, var(--x-border-radius-sm, 4px)));border-bottom-left-radius:var(--x-input-border-radius-sm, var(--x-control-border-radius-sm, var(--x-border-radius-sm, 4px)))}:host(.x-input-wrapper-small) .x-input-group-addon-after{border-top-right-radius:var(--x-input-border-radius-sm, var(--x-control-border-radius-sm, var(--x-border-radius-sm, 4px)));border-bottom-right-radius:var(--x-input-border-radius-sm, var(--x-control-border-radius-sm, var(--x-border-radius-sm, 4px)))}:host(.x-input-wrapper-large){font-size:var(--x-input-font-size-lg, var(--x-control-font-size-lg, var(--x-font-size-lg, 16px)))}:host(.x-input-wrapper-large) .x-input-group-addon{padding:0 var(--x-input-padding-inline-lg, var(--x-control-padding-horizontal, var(--x-spacing-md, 12px)));font-size:var(--x-input-font-size-lg, var(--x-control-font-size-lg, var(--x-font-size-lg, 16px)));border-radius:var(--x-input-border-radius-lg, var(--x-control-border-radius-lg, var(--x-border-radius-lg, 8px)))}:host(.x-input-wrapper-large) .x-input-group-addon-before{border-top-left-radius:var(--x-input-border-radius-lg, var(--x-control-border-radius-lg, var(--x-border-radius-lg, 8px)));border-bottom-left-radius:var(--x-input-border-radius-lg, var(--x-control-border-radius-lg, var(--x-border-radius-lg, 8px)))}:host(.x-input-wrapper-large) .x-input-group-addon-after{border-top-right-radius:var(--x-input-border-radius-lg, var(--x-control-border-radius-lg, var(--x-border-radius-lg, 8px)));border-bottom-right-radius:var(--x-input-border-radius-lg, var(--x-control-border-radius-lg, var(--x-border-radius-lg, 8px)))}:host(.x-input-wrapper-disabled) .x-input-group-addon{color:var(--x-input-color-disabled, var(--x-control-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25))));background-color:var(--x-input-bg-disabled, var(--x-control-bg-disabled, var(--x-color-bg-container-disabled, rgba(0, 0, 0, 0.04))))}:host(.x-input-wrapper-status-error) .x-input-group-addon{border-color:var(--x-input-border-color-error, var(--x-color-error, #ff4d4f))}:host(.x-input-wrapper-status-warning) .x-input-group-addon{border-color:var(--x-input-border-color-warning, var(--x-color-warning, #faad14))}`;
+
+const XInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xInput = createEvent(this, "xInput", 7);
+        this.xPressEnter = createEvent(this, "xPressEnter", 7);
+        this.xFocus = createEvent(this, "xFocus", 7);
+        this.xBlur = createEvent(this, "xBlur", 7);
+        this.xClear = createEvent(this, "xClear", 7);
+    }
+    get el() { return getElement(this); }
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * The label text displayed before (on the left side of) the input field
+     * @example
+     * <x-input addonBefore="https://"></x-input>
+     */
+    addonBefore;
+    /**
+     * The label text displayed after (on the right side of) the input field
+     * @example
+     * <x-input addonAfter=".com"></x-input>
+     */
+    addonAfter;
+    /**
+     * If allow to remove input content with clear icon
+     * @example
+     * <x-input allowClear></x-input>
+     */
+    allowClear = false;
+    /**
+     * Whether has border style (deprecated, use variant instead)
+     * @example
+     * <x-input bordered={false}></x-input>
+     */
+    bordered = true;
+    /**
+     * Variant of input: 'outlined' | 'borderless' | 'filled'
+     * @example
+     * <x-input variant="filled"></x-input>
+     */
+    variant = 'outlined';
+    /**
+     * The initial input content
+     * @example
+     * <x-input defaultValue="hello"></x-input>
+     */
+    defaultValue = '';
+    /**
+     * Whether the input is disabled
+     * @example
+     * <x-input disabled></x-input>
+     */
+    disabled = false;
+    /**
+     * Whether the input is read only
+     * @example
+     * <x-input readOnly></x-input>
+     */
+    readOnly = false;
+    /**
+     * The ID for input
+     * @example
+     * <x-input inputId="email"></x-input>
+     */
+    inputId;
+    /**
+     * The max length
+     * @example
+     * <x-input maxLength={20}></x-input>
+     */
+    maxLength;
+    /**
+     * The min value (for number type)
+     * @example
+     * <x-input type="number" min={0}></x-input>
+     */
+    min;
+    /**
+     * The max value (for number type)
+     * @example
+     * <x-input type="number" max={100}></x-input>
+     */
+    max;
+    /**
+     * Step value (for number type)
+     * @example
+     * <x-input type="number" step={0.5}></x-input>
+     */
+    step;
+    /**
+     * The prefix icon for the Input
+     * @example
+     * <x-input prefixIcon="search"></x-input>
+     */
+    prefixIcon;
+    /**
+     * The suffix icon for the Input
+     * @example
+     * <x-input suffixIcon="close"></x-input>
+     */
+    suffixIcon;
+    /**
+     * The size of the input box: 'large' | 'middle' | 'small'
+     * @example
+     * <x-input size="small"></x-input>
+     */
+    size = 'middle';
+    /**
+     * Set validation status: 'error' | 'warning'
+     * @example
+     * <x-input status="error"></x-input>
+     */
+    status;
+    /**
+     * The type of input
+     * @example
+     * <x-input type="password"></x-input>
+     */
+    type = 'text';
+    /**
+     * The input content value
+     * @example
+     * <x-input value="demo"></x-input>
+     */
+    value = '';
+    /**
+     * Placeholder text
+     * @example
+     * <x-input placeholder="Type here"></x-input>
+     */
+    placeholder = '';
+    /**
+     * Name attribute for form
+     * @example
+     * <x-input name="email"></x-input>
+     */
+    name;
+    /**
+     * Auto focus on mount
+     * @example
+     * <x-input autofocus></x-input>
+     */
+    autofocus = false;
+    /**
+     * Autocomplete attribute
+     * @example
+     * <x-input autocomplete="email"></x-input>
+     */
+    autocomplete = 'off';
+    /**
+     * Whether to show character count
+     * @example
+     * <x-input showCount></x-input>
+     */
+    showCount = false;
+    /**
+     * Whether to show password toggle icon (for password type)
+     * @example
+     * <x-input type="password" showPasswordToggle={false}></x-input>
+     */
+    showPasswordToggle = true;
+    /**
+     * Pattern for validation
+     * @example
+     * <x-input pattern="[A-Za-z]+"></x-input>
+     */
+    pattern;
+    /**
+     * Required attribute
+     * @example
+     * <x-input required></x-input>
+     */
+    required = false;
+    /**
+     * Spellcheck attribute
+     * @example
+     * <x-input spellcheck></x-input>
+     */
+    spellcheck = false;
+    // ========================================
+    // STATE
+    // ========================================
+    /**
+     * Focus state.
+     */
+    focused = false;
+    /**
+     * Password visibility state.
+     */
+    passwordVisible = false;
+    /**
+     * Hover state for clear icon.
+     */
+    hovering = false;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when input value changes
+     * @example
+     * <x-input onXChange={(ev) => console.log(ev.detail)}></x-input>
+     */
+    xChange;
+    /**
+     * Emitted on input event
+     * @example
+     * <x-input onXInput={(ev) => console.log(ev.detail)}></x-input>
+     */
+    xInput;
+    /**
+     * Emitted when pressing Enter key
+     * @example
+     * <x-input onXPressEnter={(ev) => console.log(ev.key)}></x-input>
+     */
+    xPressEnter;
+    /**
+     * Emitted on focus
+     * @example
+     * <x-input onXFocus={(ev) => console.log(ev)}></x-input>
+     */
+    xFocus;
+    /**
+     * Emitted on blur
+     * @example
+     * <x-input onXBlur={(ev) => console.log(ev)}></x-input>
+     */
+    xBlur;
+    /**
+     * Emitted when clear button is clicked
+     * @example
+     * <x-input onXClear={() => {}}></x-input>
+     */
+    xClear;
+    // ========================================
+    // REFS
+    // ========================================
+    /**
+     * Input element reference.
+     */
+    inputRef;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    /**
+     * Initialize value before render.
+     *
+     * Flow:
+     * 1. Checks if `value` is empty but `defaultValue` is provided.
+     * 2. Sets internal `value` to `defaultValue`.
+     *
+     * @returns void
+     */
+    componentWillLoad() {
+        if (!this.value && this.defaultValue) {
+            this.value = this.defaultValue;
+        }
+    }
+    /**
+     * Auto focus on mount when enabled.
+     *
+     * Flow:
+     * 1. Checks `autofocus` prop and `disabled` state.
+     * 2. If allowed, schedules `setFocus()` in next animation frame.
+     *
+     * @returns void
+     */
+    componentDidLoad() {
+        if (this.autofocus && !this.disabled) {
+            requestAnimationFrame(() => {
+                this.setFocus();
+            });
+        }
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    /**
+     * Sync input element when value changes.
+     * @returns void
+     */
+    valueChanged() {
+        // Sync input value with prop
+        if (this.inputRef && this.inputRef.value !== this.value) {
+            this.inputRef.value = this.value;
+        }
+    }
+    // ========================================
+    // PUBLIC METHODS
+    // ========================================
+    /**
+     * Set focus on the input
+     * @returns Promise<void>
+     * @example
+     * await el.setFocus()
+     */
+    async setFocus() {
+        this.inputRef?.focus();
+    }
+    /**
+     * Remove focus from the input
+     * @returns Promise<void>
+     * @example
+     * await el.setBlur()
+     */
+    async setBlur() {
+        this.inputRef?.blur();
+    }
+    /**
+     * Select all text in the input
+     * @returns Promise<void>
+     * @example
+     * await el.select()
+     */
+    async select() {
+        this.inputRef?.select();
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    /**
+     * Handle input change and emit events.
+     * @param e - Input event.
+     * @returns void
+     */
+    handleInput = (e) => {
+        const target = e.target;
+        const newValue = target.value;
+        // For number type, validate
+        if (this.type === 'number') {
+            const numValue = parseFloat(newValue);
+            if (!isNaN(numValue)) {
+                if (this.min !== undefined && numValue < this.min) {
+                    target.value = String(this.min);
+                    this.value = String(this.min);
+                }
+                else if (this.max !== undefined && numValue > this.max) {
+                    target.value = String(this.max);
+                    this.value = String(this.max);
+                }
+                else {
+                    this.value = newValue;
+                }
+            }
+            else if (newValue === '' || newValue === '-') {
+                this.value = newValue;
+            }
+        }
+        else {
+            this.value = newValue;
+        }
+        this.xInput.emit(e);
+        this.xChange.emit({ value: this.value, event: e });
+    };
+    /**
+     * Handle keydown for Enter.
+     * @param e - Keyboard event.
+     * @returns void
+     */
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            this.xPressEnter.emit(e);
+        }
+    };
+    /**
+     * Handle focus event.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleFocus = (e) => {
+        this.focused = true;
+        this.xFocus.emit(e);
+    };
+    /**
+     * Handle blur event.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleBlur = (e) => {
+        this.focused = false;
+        this.xBlur.emit(e);
+    };
+    /**
+     * Handle clear action.
+     *
+     * Flow:
+     * 1. Prevents default and stops propagation.
+     * 2. Resets `value` to empty string.
+     * 3. Emits `xChange` with empty value.
+     * 4. Emits `xClear`.
+     * 5. Refocuses the input element.
+     *
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleClear = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.value = '';
+        this.xChange.emit({ value: '', event: e });
+        this.xClear.emit();
+        // Focus back to input
+        this.setFocus();
+    };
+    /**
+     * Track hover state on wrapper enter.
+     * @returns void
+     */
+    handleMouseEnter = () => {
+        this.hovering = true;
+    };
+    /**
+     * Track hover state on wrapper leave.
+     * @returns void
+     */
+    handleMouseLeave = () => {
+        this.hovering = false;
+    };
+    /**
+     * Toggle password visibility.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    togglePasswordVisibility = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.passwordVisible = !this.passwordVisible;
+    };
+    /**
+     * Resolve input type based on password visibility.
+     * @returns string
+     */
+    getInputType() {
+        if (this.type === 'password') {
+            return this.passwordVisible ? 'text' : 'password';
+        }
+        return this.type;
+    }
+    /**
+     * Resolve variant with bordered fallback.
+     * @returns InputVariant
+     */
+    getVariant() {
+        // Support deprecated bordered prop
+        if (!this.bordered) {
+            return 'borderless';
+        }
+        return this.variant;
+    }
+    /**
+     * Whether prefix content exists.
+     * @returns boolean
+     */
+    hasPrefix() {
+        return !!this.prefixIcon;
+    }
+    /**
+     * Whether suffix content exists.
+     * @returns boolean
+     */
+    hasSuffix() {
+        return (!!this.suffixIcon ||
+            this.allowClear ||
+            this.type === 'password' ||
+            this.showCount);
+    }
+    // ========================================
+    // RENDER METHODS
+    // ========================================
+    /**
+     * Render clear icon.
+     * @returns JSX.Element
+     */
+    renderClearIcon() {
+        return h("x-icon", { name: getIcon('clear') });
+    }
+    /**
+     * Render password visible icon.
+     * @returns JSX.Element
+     */
+    renderEyeIcon() {
+        return h("x-icon", { name: getIcon('visibility') });
+    }
+    /**
+     * Render password hidden icon.
+     * @returns JSX.Element
+     */
+    renderEyeInvisibleIcon() {
+        return h("x-icon", { name: getIcon('visibilityOff') });
+    }
+    /**
+     * Render prefix icon/slot.
+     * @returns JSX.Element | null
+     */
+    renderPrefix() {
+        if (!this.hasPrefix())
+            return null;
+        return (h("span", { class: "x-input-prefix" }, this.prefixIcon && h("x-icon", { name: this.prefixIcon }), h("slot", { name: "prefix" })));
+    }
+    /**
+     * Render suffix icons and count.
+     * @returns JSX.Element | null
+     */
+    renderSuffix() {
+        const showClear = this.allowClear && this.value && !this.disabled && !this.readOnly && this.hovering;
+        const isPassword = this.type === 'password' && this.showPasswordToggle;
+        if (!this.hasSuffix() && !showClear)
+            return null;
+        return (h("span", { class: "x-input-suffix" }, showClear && (h("span", { class: "x-input-clear-icon", onClick: this.handleClear, role: "button", tabIndex: -1, "aria-label": "clear" }, this.renderClearIcon())), isPassword && (h("span", { class: "x-input-password-icon", onClick: this.togglePasswordVisibility, role: "button", tabIndex: -1, "aria-label": this.passwordVisible ? 'hide password' : 'show password' }, this.passwordVisible ? this.renderEyeIcon() : this.renderEyeInvisibleIcon())), this.suffixIcon && h("x-icon", { name: this.suffixIcon }), h("slot", { name: "suffix" }), this.showCount && (h("span", { class: "x-input-count" }, this.value?.length || 0, this.maxLength !== undefined && `/${this.maxLength}`))));
+    }
+    /**
+     * Render input element.
+     * @returns JSX.Element
+     */
+    renderInput() {
+        return (h("input", { ref: el => (this.inputRef = el), id: this.inputId, name: this.name, class: "x-input", type: this.getInputType(), value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readOnly, maxLength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, required: this.required, autoComplete: this.autocomplete, spellcheck: this.spellcheck, "aria-invalid": this.status === 'error' ? 'true' : undefined, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+    }
+    /**
+     * Render input with addons and affixes.
+     * @returns JSX.Element
+     * @example
+     * <x-input addonBefore="https://" suffixIcon="close"></x-input>
+     */
+    render() {
+        const variant = this.getVariant();
+        const hasAddon = this.addonBefore || this.addonAfter;
+        const wrapperClasses = {
+            'x-input-wrapper': true,
+            'x-input-group': !!hasAddon,
+            [`x-input-wrapper-${this.size}`]: true,
+            'x-input-wrapper-disabled': this.disabled,
+            'x-input-wrapper-readonly': this.readOnly,
+            [`x-input-wrapper-status-${this.status}`]: !!this.status,
+        };
+        const affixWrapperClasses = {
+            'x-input-affix-wrapper': true,
+            'x-input-affix-wrapper-focused': this.focused,
+            'x-input-affix-wrapper-disabled': this.disabled,
+            'x-input-affix-wrapper-readonly': this.readOnly,
+            'disabled': this.disabled,
+            'readonly': this.readOnly,
+            [`x-input-affix-wrapper-${this.size}`]: true,
+            [`x-input-affix-wrapper-${variant}`]: true,
+            [`x-input-affix-wrapper-status-${this.status}`]: !!this.status,
+            'x-input-affix-wrapper-has-prefix': this.hasPrefix(),
+            'x-input-affix-wrapper-has-suffix': this.hasSuffix(),
+        };
+        return (h(Host, { key: '4df8b3203a3cf17705ec1fcc56e016503414d633', class: wrapperClasses }, this.addonBefore && (h("span", { key: '00788fdccceee9722e9b452dc2557a91db2f7abf', class: "x-input-group-addon x-input-group-addon-before" }, this.addonBefore, h("slot", { key: '9c63be1e6b447d77f346f47955459e225b993dec', name: "addonBefore" }))), h("div", { key: '213841b2078abf21f8026632b1f82acebcbefa39', class: affixWrapperClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.renderPrefix(), this.renderInput(), this.renderSuffix()), this.addonAfter && (h("span", { key: '89597130f3daf173bbf798e6b5fd4d7032c60198', class: "x-input-group-addon x-input-group-addon-after" }, this.addonAfter, h("slot", { key: 'c1a9c1e9e626437b790d05448f85c6b052bdcb0a', name: "addonAfter" })))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+XInput.style = xInputCss();
+
+export { XColorPickerPanel as x_color_picker_panel, XInput as x_input };