atomicuilibrary 0.0.1

package/dist/esm/ui-code-preview.entry.js

@@ -0,0 +1,313 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DUsoYu9r.js';
+
+const uiCodePreviewCss = () => `.sr-only.sc-ui-code-preview{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only.sc-ui-code-preview{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.sc-ui-code-preview-h{display:block;margin:16px 0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--preview-border-color:var(--border-default, #e0e0e0);--preview-bg-color:var(--bg-primary, var(--text-standard, #ffffff));--preview-toolbar-bg:var(--bg-primary, #f8f9fa);--preview-highlight-color:var(--color-primary, #1976d2);--preview-text-main:var(--text-primary, #202124);--preview-text-muted:var(--text-secondary, #5f6368);--preview-shadow:0 2px 8px rgba(0, 0, 0, 0.08);--code-bg:var(--bg-primary, #1d1f21)}.code-preview-root.sc-ui-code-preview{border:1px solid var(--preview-border-color);border-radius:8px;overflow:hidden;background:var(--preview-bg-color);box-shadow:var(--preview-shadow);transition:box-shadow 0.3s ease}.code-preview-root.sc-ui-code-preview:hover{box-shadow:0 4px 12px rgba(0, 0, 0, 0.12)}.code-toolbar.sc-ui-code-preview{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--preview-toolbar-bg);border-bottom:1px solid var(--preview-border-color);min-height:48px}.left-actions.sc-ui-code-preview{display:flex;align-items:center;gap:16px}.code-label.sc-ui-code-preview{font-size:14px;font-weight:600;color:var(--preview-text-main)}.lang-tabs.sc-ui-code-preview{display:flex;background:var(--bg-primary, #eee);padding:2px;border-radius:6px;gap:2px}.tab-btn.sc-ui-code-preview{background:transparent;border:none;padding:4px 12px;font-size:12px;font-weight:500;border-radius:4px;cursor:pointer;color:var(--preview-text-muted);transition:all 0.2s ease}.tab-btn.sc-ui-code-preview:hover{color:var(--preview-text-main)}.tab-btn.active.sc-ui-code-preview{background:var(--bg-primary, #ffffff);color:var(--preview-highlight-color);box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.right-actions.sc-ui-code-preview{display:flex;align-items:center;gap:8px}.icon-action-btn.sc-ui-code-preview{background:transparent;border:1px solid transparent;padding:6px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--preview-text-muted);transition:all 0.2s ease;font-size:13px;font-weight:500}.icon-action-btn.sc-ui-code-preview:hover{background:rgba(0, 0, 0, 0.04);color:var(--preview-text-main)}.copy-btn.sc-ui-code-preview{padding:6px}.btn-text.sc-ui-code-preview{user-select:none}.chevron-icon.sc-ui-code-preview{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.chevron-icon.rotated.sc-ui-code-preview{transform:rotate(180deg)}.reset-icon.spinning.sc-ui-code-preview{animation:spin 0.6s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.code-container.sc-ui-code-preview{overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);background:var(--code-bg)}pre[class*=language-].sc-ui-code-preview{margin:0 !important;padding:20px !important;font-size:13px !important;line-height:1.6 !important;background:var(--code-bg) !important;border-radius:0 !important;max-height:100% !important;overflow:auto !important}code[class*=language-].sc-ui-code-preview{font-family:"Fira Code", "Cascadia Code", "Source Code Pro", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;text-shadow:none !important}pre.sc-ui-code-preview::-webkit-scrollbar{width:8px;height:8px}pre.sc-ui-code-preview::-webkit-scrollbar-track{background:var(--bg-primary, #25282c)}pre.sc-ui-code-preview::-webkit-scrollbar-thumb{background:var(--bg-secondary, #4a4d51);border-radius:4px}pre.sc-ui-code-preview::-webkit-scrollbar-thumb:hover{background:var(--bg-secondary, #5a5d61)}@media (max-width: 600px){.btn-text.sc-ui-code-preview{display:none}.code-toolbar.sc-ui-code-preview{padding:8px}}`;
+
+const UiCodePreview = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.uiReset = createEvent(this, "uiReset");
+        this.expandedChange = createEvent(this, "expandedChange");
+    }
+    get el() { return getElement(this); }
+    /**
+     * The JavaScript/JSX code to display (Legacy)
+     */
+    jsCode = '';
+    /**
+     * The TypeScript/TSX code to display (Legacy)
+     */
+    tsCode = '';
+    /**
+     * The CSS code to display (Legacy)
+     */
+    cssCode = '';
+    /**
+     * The HTML code to display (Legacy)
+     */
+    htmlCode = '';
+    /**
+     * Array of code snippets to display.
+     * Can be a JSON string or an array of { language, code, label? } objects.
+     * Supports any language supported by PrismJS (e.g., 'python', 'java', 'csharp', 'json').
+     */
+    snippets = [];
+    /**
+     * Current active language tab
+     */
+    activeLang = '';
+    /**
+     * Label for the code block (optional)
+     */
+    label = '';
+    /**
+     * Whether the code block is expanded or collapsed
+     */
+    expanded = true;
+    /**
+     * Whether to show the reset button
+     */
+    showReset = false;
+    /**
+     * Emitted when the reset button is clicked
+     */
+    uiReset;
+    /**
+     * Emitted when expansion state changes
+     */
+    expandedChange;
+    copied = false;
+    resetting = false;
+    prismLoaded = false;
+    internalSnippets = [];
+    handleStateChange() {
+        this.highlightCode();
+    }
+    handleCodeChange() {
+        this.processSnippets();
+        if (this.expanded) {
+            this.highlightCode();
+        }
+    }
+    componentWillLoad() {
+        this.processSnippets();
+        if (!this.activeLang && this.internalSnippets.length > 0) {
+            this.activeLang = this.internalSnippets[0].language;
+        }
+    }
+    componentDidLoad() {
+        this.loadPrism();
+    }
+    processSnippets() {
+        let snippets = [];
+        // 1. Process 'snippets' prop
+        if (this.snippets) {
+            if (typeof this.snippets === 'string') {
+                try {
+                    snippets = JSON.parse(this.snippets);
+                }
+                catch (e) {
+                    console.error('Failed to parse snippets JSON', e);
+                }
+            }
+            else if (Array.isArray(this.snippets)) {
+                snippets = [...this.snippets];
+            }
+        }
+        // 2. Add legacy props if valid and not already covered (or merge them)
+        // We append legacy props to ensure backward compatibility
+        if (this.tsCode)
+            snippets.push({ language: 'typescript', code: this.tsCode, label: 'TS' });
+        else if (this.jsCode)
+            snippets.push({ language: 'javascript', code: this.jsCode, label: 'JS' }); // Give preference to TS if both exist, usually
+        // Note: The original logic treated TS/JS sort of mutually exclusive for default view, but we can show both if explicitly passed
+        // However, usually we might want to deduplicate if snippets covers it. For now, simple append.
+        if (this.htmlCode)
+            snippets.push({ language: 'markup', code: this.htmlCode, label: 'HTML' });
+        if (this.cssCode)
+            snippets.push({ language: 'css', code: this.cssCode, label: 'CSS' });
+        // Deduplicate? (Optional)
+        // For now, allow duplicates if user sends them.
+        this.internalSnippets = snippets;
+        // Logic to set default activeLang if not set or invalid
+        const activeExists = this.internalSnippets.some(s => s.language === this.activeLang);
+        if (!activeExists && this.internalSnippets.length > 0) {
+            this.activeLang = this.internalSnippets[0].language;
+        }
+    }
+    loadPrism() {
+        if (window.Prism?.languages?.tsx) {
+            // Basic check for existence, but we might need new languages
+            this.checkAndLoadLanguages();
+            return;
+        }
+        if (!window.PRISM_LOADING) {
+            window.PRISM_LOADING = true;
+            const firstScript = document.createElement('script');
+            firstScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js';
+            firstScript.onload = () => {
+                this.checkAndLoadLanguages();
+            };
+            document.head.appendChild(firstScript);
+            const themeLink = document.createElement('link');
+            themeLink.rel = 'stylesheet';
+            themeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css';
+            document.head.appendChild(themeLink);
+        }
+        else {
+            // Already loading, wait for it
+            const check = setInterval(() => {
+                if (window.Prism) {
+                    clearInterval(check);
+                    this.checkAndLoadLanguages();
+                }
+            }, 100);
+        }
+    }
+    checkAndLoadLanguages() {
+        if (!window.Prism)
+            return;
+        // Identify needed languages
+        const neededLangs = new Set(this.internalSnippets.map(s => s.language));
+        // Always load these basics
+        ['javascript', 'typescript', 'jsx', 'tsx', 'css', 'markup'].forEach(l => neededLangs.add(l));
+        // Map common aliases to Prism components/filenames
+        const langMap = {
+            'js': 'javascript',
+            'ts': 'typescript',
+            'html': 'markup',
+            'xml': 'markup',
+            'svg': 'markup',
+            'py': 'python',
+            'cs': 'csharp',
+            'c#': 'csharp',
+            'pdk': 'php',
+            'rb': 'ruby',
+            'go': 'go',
+            'java': 'java',
+            'json': 'json',
+            'bash': 'bash',
+            'sh': 'bash',
+            'shell': 'bash'
+        };
+        const toLoad = [];
+        neededLangs.forEach(lang => {
+            const mapped = langMap[lang.toLowerCase()] || lang.toLowerCase();
+            // Check if loaded
+            if (!window.Prism.languages[mapped]) {
+                toLoad.push(mapped);
+            }
+        });
+        if (toLoad.length === 0) {
+            this.prismLoaded = true;
+            this.highlightCode();
+            return;
+        }
+        let loadedCount = 0;
+        toLoad.forEach(comp => {
+            // Prevent double loading
+            if (document.querySelector(`script[src*="prism-${comp}.min.js"]`)) {
+                loadedCount++;
+                if (loadedCount === toLoad.length) {
+                    this.prismLoaded = true;
+                    this.highlightCode();
+                }
+                return;
+            }
+            const s = document.createElement('script');
+            s.src = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${comp}.min.js`;
+            s.onload = () => {
+                loadedCount++;
+                if (loadedCount === toLoad.length) {
+                    this.prismLoaded = true;
+                    this.highlightCode();
+                }
+            };
+            s.onerror = () => {
+                console.warn(`Failed to load Prism language: ${comp}`);
+                loadedCount++;
+                // Still proceed even if one fails
+                if (loadedCount === toLoad.length) {
+                    this.prismLoaded = true;
+                    this.highlightCode();
+                }
+            };
+            document.head.appendChild(s);
+        });
+    }
+    highlightCode() {
+        if (this.expanded) {
+            const activeSnippet = this.internalSnippets.find(s => s.language === this.activeLang) || this.internalSnippets[0];
+            const code = activeSnippet ? activeSnippet.code : '';
+            setTimeout(() => {
+                const codeEl = this.el.querySelector('code');
+                if (codeEl) {
+                    // Reset content to plain text before Prism highlights it
+                    codeEl.textContent = code;
+                    if (window.Prism) {
+                        window.Prism.highlightElement(codeEl);
+                    }
+                }
+            }, 50);
+        }
+    }
+    handleCopy = (e) => {
+        e.stopPropagation();
+        const currentSnippet = this.internalSnippets.find(s => s.language === this.activeLang);
+        if (currentSnippet?.code) {
+            navigator.clipboard.writeText(currentSnippet.code).then(() => {
+                this.copied = true;
+                setTimeout(() => (this.copied = false), 2000);
+            });
+        }
+    };
+    handleReset = (e) => {
+        e.stopPropagation();
+        this.resetting = true;
+        this.uiReset.emit();
+        setTimeout(() => (this.resetting = false), 600);
+    };
+    toggleExpanded = (e) => {
+        e.stopPropagation();
+        this.expanded = !this.expanded;
+        this.expandedChange.emit(this.expanded);
+    };
+    getPrismLanguage(lang) {
+        const map = {
+            'js': 'javascript',
+            'ts': 'typescript',
+            'html': 'markup',
+            'c#': 'csharp'
+        };
+        return map[lang.toLowerCase()] || lang.toLowerCase();
+    }
+    getLabel(snippet) {
+        if (snippet.label)
+            return snippet.label;
+        const lang = snippet.language.toLowerCase();
+        const map = {
+            'javascript': 'JS',
+            'typescript': 'TS',
+            'markup': 'HTML',
+            'css': 'CSS',
+            'python': 'Python',
+            'java': 'Java',
+            'csharp': 'C#',
+            'go': 'Go',
+            'json': 'JSON'
+        };
+        return map[lang] || lang.toUpperCase();
+    }
+    render() {
+        const activeSnippet = this.internalSnippets.find(s => s.language === this.activeLang) || this.internalSnippets[0];
+        const currentCode = activeSnippet ? activeSnippet.code : '';
+        const displayLang = activeSnippet ? activeSnippet.language : 'markup';
+        const prismLang = this.getPrismLanguage(displayLang);
+        return (h("div", { key: '7a1351cde2fe115457ca505a74ddbeac1f6dcddd', class: { 'code-preview-root': true, 'is-expanded': this.expanded } }, h("div", { key: '1f9addfe7e96493bccb7257ddb5069d1a7e70c7e', class: "code-toolbar" }, h("div", { key: '080be5bd471895a49e949192b4980dc0de1e6226', class: "left-actions" }, this.label && h("span", { key: 'd658281d365881a28fa22b875f5f091b4fe157a4', class: "code-label" }, this.label), this.internalSnippets.length > 1 && (h("div", { key: 'e61fb82ff28f045b037bf30310c730c4280fa4d8', class: "lang-tabs" }, this.internalSnippets.map(snippet => (h("ui-button", { variant: this.activeLang === snippet.language ? 'primary' : 'ghost', class: { 'active': this.activeLang === snippet.language }, onClick: () => this.activeLang = snippet.language, size: "sm", label: this.getLabel(snippet) }))))), this.internalSnippets.length === 1 && !this.label && (h("span", { key: 'd0e2caca56998e929749f305ac2af37be47ea4b6', class: "code-label", style: { opacity: '0.7', fontSize: '12px' } }, this.getLabel(this.internalSnippets[0])))), h("div", { key: '49fa1c00084fa56f46acc5efd41a6008abf3a136', class: "right-actions" }, this.showReset && (h("ui-button", { key: '4d65ee2605b003d51bb6ec924b086310f3c398f2', variant: "ghost", onClick: this.handleReset, title: "Reset demo", ariaLabel: "Reset demo", icon: "rotate-cw", iconLibrary: "lucide", iconOnly: true, size: "sm", loading: this.resetting })), h("ui-button", { key: '0889f503e1703a2f07bc2fbc489282495667637c', variant: "ghost", onClick: this.toggleExpanded, title: this.expanded ? 'Hide code' : 'Show code', ariaLabel: this.expanded ? 'Hide code' : 'Show code', size: "sm", label: this.expanded ? 'Hide code' : 'Show code', icon: this.expanded ? 'chevron-up' : 'chevron-down', iconLibrary: "lucide" }), h("ui-button", { key: 'e31e13096084bfeac8115e778423ec6693411b92', variant: "ghost", onClick: this.handleCopy, title: "Copy code", ariaLabel: "Copy code", size: "sm", icon: this.copied ? 'check' : 'copy', iconLibrary: "lucide", iconOnly: true, iconColor: this.copied ? '#4caf50' : undefined }))), h("div", { key: '4e94f96825f20eb61feadf421a08cbc76cdec0db', class: "code-container", style: { maxHeight: this.expanded ? '800px' : '0' } }, h("pre", { key: '8206cc5718503cdcc151d816897fffdaebdf0195', class: `language-${prismLang}` }, h("code", { key: '32aed72ceca967b3f29aaccf03e8746033df5dea', class: `language-${prismLang}` }, currentCode)))));
+    }
+    static get watchers() { return {
+        "activeLang": [{
+                "handleStateChange": 0
+            }],
+        "expanded": [{
+                "handleStateChange": 0
+            }],
+        "jsCode": [{
+                "handleCodeChange": 0
+            }],
+        "tsCode": [{
+                "handleCodeChange": 0
+            }],
+        "htmlCode": [{
+                "handleCodeChange": 0
+            }],
+        "cssCode": [{
+                "handleCodeChange": 0
+            }],
+        "snippets": [{
+                "handleCodeChange": 0
+            }]
+    }; }
+};
+UiCodePreview.style = uiCodePreviewCss();
+
+export { UiCodePreview as ui_code_preview };

package/dist/esm/ui-color-controller.entry.js

@@ -0,0 +1,148 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DUsoYu9r.js';
+
+const colorControllerCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit;width:100%;max-width:2a0px}.col-ctrl-label{font-size:13px;font-weight:700;color:var(--color-primary, #6366f1);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.05em}.col-ctrl-grid{display:flex;flex-direction:column;gap:6px}.col-ctrl-row{display:flex;align-items:center;gap:8px}.col-ctrl-key{flex:0 0 20px;font-size:12px;font-weight:500;color:var(--text-secondary, #4b5563)}.col-ctrl-input-wrapper{flex:1;display:flex;align-items:center;border:1px solid var(--border-default, #e5e7eb);border-radius:4px;background:var(--bg-primary, #ffffff);padding:2px 6px;transition:all 0.2s}.col-ctrl-input-wrapper:focus-within{border-color:var(--color-primary, #6366f1);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 99, 102, 241), 0.1)}.col-ctrl-input{flex:1;border:none;background:transparent;outline:none;font-size:13px;padding:4px;width:100%;color:var(--text-primary, #111827);font-family:monospace;text-align:right}.col-ctrl-input::-webkit-outer-spin-button,.col-ctrl-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hex-row .col-ctrl-key{font-family:monospace;font-weight:700}.col-ctrl-unit{font-size:12px;color:var(--text-muted, #9ca3af);margin-left:4px;min-width:12px}.hex-input{text-align:left;letter-spacing:0.05em;font-weight:600}`;
+
+const ColorController = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.colorChange = createEvent(this, "colorChange");
+    }
+    /** Current color as a hex string */
+    value = '#10b981';
+    /** Label for the entire group */
+    label = '';
+    /** Emitted when any color channel changes */
+    colorChange;
+    r = 16;
+    g = 185;
+    b = 129;
+    h = 159;
+    s = 91;
+    v = 73;
+    hex = '10B981';
+    handleValueUpdate(newValue) {
+        this.updateAllFromHex(newValue);
+    }
+    componentWillLoad() {
+        this.updateAllFromHex(this.value);
+    }
+    updateAllFromHex(hex) {
+        if (!hex)
+            return;
+        const clean = hex.startsWith('#') ? hex.slice(1) : hex;
+        this.hex = clean.toUpperCase();
+        const bigInt = parseInt(clean, 16);
+        this.r = (bigInt >> 16) & 255;
+        this.g = (bigInt >> 8) & 255;
+        this.b = bigInt & 255;
+        const r = this.r / 255;
+        const g = this.g / 255;
+        const b = this.b / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const d = max - min;
+        let h = 0;
+        if (d === 0)
+            h = 0;
+        else if (max === r)
+            h = ((g - b) / d) % 6;
+        else if (max === g)
+            h = (b - r) / d + 2;
+        else if (max === b)
+            h = (r - g) / d + 4;
+        h = Math.round(h * 60);
+        if (h < 0)
+            h += 360;
+        const s = max === 0 ? 0 : d / max;
+        const v = max;
+        this.h = h;
+        this.s = Math.round(s * 100);
+        this.v = Math.round(v * 100);
+    }
+    emitChange() {
+        this.value = `#${this.hex}`;
+        this.colorChange.emit(this.value);
+    }
+    handleHexInput = (e) => {
+        const val = e.detail.value || '';
+        if (val.length === 6 || val.length === 3) {
+            if (/^[0-9A-Fa-f]+$/.test(val)) {
+                this.hex = val.toUpperCase();
+                this.updateAllFromHex(this.hex);
+                this.emitChange();
+            }
+        }
+    };
+    handleRgbChange(channel, val) {
+        if (isNaN(val))
+            return;
+        this[channel] = Math.max(0, Math.min(255, val));
+        this.hex = ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1).toUpperCase();
+        this.updateAllFromHex(this.hex);
+        this.emitChange();
+    }
+    handleHsvChange(channel, val) {
+        if (isNaN(val))
+            return;
+        if (channel === 'h')
+            this.h = Math.max(0, Math.min(360, val));
+        if (channel === 's')
+            this.s = Math.max(0, Math.min(100, val));
+        if (channel === 'v')
+            this.v = Math.max(0, Math.min(100, val));
+        // HSV to RGB
+        const h = this.h;
+        const s = this.s / 100;
+        const v = this.v / 100;
+        const c = v * s;
+        const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+        const m = v - c;
+        let r = 0, g = 0, b = 0;
+        if (h < 60) {
+            r = c;
+            g = x;
+            b = 0;
+        }
+        else if (h < 120) {
+            r = x;
+            g = c;
+            b = 0;
+        }
+        else if (h < 180) {
+            r = 0;
+            g = c;
+            b = x;
+        }
+        else if (h < 240) {
+            r = 0;
+            g = x;
+            b = c;
+        }
+        else if (h < 300) {
+            r = x;
+            g = 0;
+            b = c;
+        }
+        else {
+            r = c;
+            g = 0;
+            b = x;
+        }
+        this.r = Math.round((r + m) * 255);
+        this.g = Math.round((g + m) * 255);
+        this.b = Math.round((b + m) * 255);
+        this.hex = ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1).toUpperCase();
+        this.emitChange();
+    }
+    render() {
+        return (h(Host, { key: 'b3bf272d34509127138914724e36b188edd43d6e' }, this.label && h("div", { key: '36ebf9de294642b1d67135b6c8c452fb47c612e6', class: "col-ctrl-label" }, this.label), h("div", { key: '59133d3793607ff7168906dbddd0e7e40c7244a9', class: "col-ctrl-grid" }, h("div", { key: '44b1a8ae8bbc3faaf5c9b009eab5580297761c2d', class: "col-ctrl-row" }, h("span", { key: 'd5fe3fe12e6a116569b2939a0d63f8ff5599184f', class: "col-ctrl-key" }, "H"), h("div", { key: '69bb7842109760c51e1122963cb56f0eba8454a0', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'f6a133615ab877293398de65f3b0004c0234f161', class: "col-ctrl-input", type: "number", value: this.h, onInputChange: (v) => this.handleHsvChange('h', parseInt(v.detail)), variant: "plain" }), h("span", { key: 'e00ac8771d5c0f6a08d93fd3f1c1b85b6014edca', class: "col-ctrl-unit" }, "\u00B0"))), h("div", { key: '2fd071bc5741f47cbf40b6664332c6f63e684091', class: "col-ctrl-row" }, h("span", { key: '375c1767c1631f1f5aa0095606c9e50b350443f2', class: "col-ctrl-key" }, "S"), h("div", { key: '3c41e3f98fc37ab7a2af5f3a57dfa7bb05427744', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '3f2a4a152681231156b1b82091fd08b78d6cba2f', class: "col-ctrl-input", type: "number", value: this.s, onInputChange: (v) => this.handleHsvChange('s', parseInt(v.detail)), variant: "plain" }), h("span", { key: '3c33faf1a4ffe99ebe5cde064c024034b691ad1f', class: "col-ctrl-unit" }, "%"))), h("div", { key: '2e49ebd592ade20e0e7660b10416b656312347e0', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '874e0da90ed96b03c7955ac6650c75b039ea886a', class: "col-ctrl-key" }, "V"), h("div", { key: '7ef1fd0da2ea55c460643e464a0a06bd4ae2d280', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '11cb688038ce67cee9c29b091498b7967674b7fa', class: "col-ctrl-input", type: "number", value: this.v, onInputChange: (v) => this.handleHsvChange('v', parseInt(v.detail)), variant: "plain" }), h("span", { key: '09449462dbba86a0fd33b862f42590209218b9e2', class: "col-ctrl-unit" }, "%"))), h("div", { key: 'c16ecc86f52bbb01edea970400c2128d86384a70', class: "col-ctrl-row" }, h("span", { key: '53fa2cd839dc048567e3aed4fe6ce766d7005577', class: "col-ctrl-key" }, "R"), h("div", { key: 'bcf8bf7833c0dc0030d99b28af56b0bc430fd708', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'a498ca548a2529505bae7161659f50b4e5641678', class: "col-ctrl-input", type: "number", value: this.r, onInputChange: (v) => this.handleRgbChange('r', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '516aff05554aad71cc012a9905dad96d5e03b91e', class: "col-ctrl-row" }, h("span", { key: '2c234e6e2f2111724cf603a76303a965b2277c17', class: "col-ctrl-key" }, "G"), h("div", { key: '85339e47bcd95bf20f6e7ae42ac5d29739e8d05a', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'd705b336aaceb110e92a9a63c000bfc19c9bdb17', class: "col-ctrl-input", type: "number", value: this.g, onInputChange: (v) => this.handleRgbChange('g', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '033523f4276729ee119fe4ad793e02850c288831', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '66fd8bdd0d2dd540fb591d02ebc3240913477b52', class: "col-ctrl-key" }, "B"), h("div", { key: '1cfa29786007a7c1292817b914cb573f0a69f1b8', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'b6c51663d914adb081819c23fb8e7915be7b50cb', class: "col-ctrl-input", type: "number", value: this.b, onInputChange: (v) => this.handleRgbChange('b', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '4c43173acd72a63dcb2e3ea5759d05bceebd6087', class: "col-ctrl-row hex-row" }, h("span", { key: '3d742b9ca0c5956498a6787171a22fbdb0e87a12', class: "col-ctrl-key" }, "#"), h("div", { key: '294d48fc7bb69c9dda1a36788b6e712725fda674', class: "col-ctrl-input-wrapper hex-wrapper" }, h("ui-input", { key: '051e90c5e2814ba7a5ae6cb542e379f343cf29ea', class: "col-ctrl-input hex-input", value: this.hex, onInputChange: (v) => this.handleHexInput({ detail: { value: v.detail } }), variant: "plain" }))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueUpdate": 0
+            }]
+    }; }
+};
+ColorController.style = colorControllerCss();
+
+export { ColorController as ui_color_controller };