@muxima-ui/color-picker 1.0.0

package/fesm2015/muxima-ui-color-picker.mjs

@@ -0,0 +1,301 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Component, Input, Output } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+
+class ColorPickerComponent {
+    constructor() {
+        this.format = 'hex';
+        this.showPalettes = true;
+        this.showGradient = false;
+        this.customPalettes = [];
+        this.disabled = false;
+        this.size = 'medium';
+        this.showAlpha = false;
+        this.inline = false;
+        this.colorChange = new EventEmitter();
+        this.formatChange = new EventEmitter();
+        this.currentColor = '#667eea';
+        this.isOpen = false;
+        this.hue = 240;
+        this.saturation = 76;
+        this.lightness = 72;
+        this.alpha = 1;
+        this.defaultPalettes = [
+            {
+                name: 'Material',
+                colors: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4']
+            },
+            {
+                name: 'Pastéis',
+                colors: ['#ffc1cc', '#ffabab', '#ffd4a3', '#fff9a3', '#c1ffc1', '#a3d4ff', '#c1a3ff', '#ffa3ff']
+            },
+            {
+                name: 'Neutros',
+                colors: ['#ffffff', '#f5f5f5', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#424242', '#212121']
+            }
+        ];
+        this.gradientStart = '#667eea';
+        this.gradientEnd = '#764ba2';
+        this.gradientAngle = 135;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+        if (this.inline) {
+            this.isOpen = true;
+        }
+        this.updateFromHex(this.currentColor);
+    }
+    writeValue(value) {
+        if (value) {
+            this.currentColor = value;
+            this.updateFromHex(value);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    togglePicker() {
+        if (!this.disabled && !this.inline) {
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.onTouched();
+            }
+        }
+    }
+    closePicker() {
+        if (!this.inline) {
+            this.isOpen = false;
+        }
+    }
+    onHueChange(event) {
+        this.hue = +event.target.value;
+        this.updateColorFromHSL();
+    }
+    onSaturationChange(event) {
+        this.saturation = +event.target.value;
+        this.updateColorFromHSL();
+    }
+    onLightnessChange(event) {
+        this.lightness = +event.target.value;
+        this.updateColorFromHSL();
+    }
+    onAlphaChange(event) {
+        this.alpha = +event.target.value;
+        this.updateColorFromHSL();
+    }
+    selectPaletteColor(color) {
+        this.currentColor = color;
+        this.updateFromHex(color);
+        this.emitColor();
+    }
+    onHexInput(event) {
+        const hex = event.target.value;
+        if (this.isValidHex(hex)) {
+            this.currentColor = hex;
+            this.updateFromHex(hex);
+            this.emitColor();
+        }
+    }
+    updateColorFromHSL() {
+        const rgb = this.hslToRgb(this.hue, this.saturation, this.lightness);
+        this.currentColor = this.rgbToHex(rgb.r, rgb.g, rgb.b);
+        this.emitColor();
+    }
+    updateFromHex(hex) {
+        const rgb = this.hexToRgb(hex);
+        if (rgb) {
+            const hsl = this.rgbToHsl(rgb.r, rgb.g, rgb.b);
+            this.hue = hsl.h;
+            this.saturation = hsl.s;
+            this.lightness = hsl.l;
+        }
+    }
+    emitColor() {
+        const rgb = this.hexToRgb(this.currentColor);
+        const colorFormat = {
+            hex: this.currentColor,
+            rgb: rgb || { r: 0, g: 0, b: 0 },
+            hsl: { h: this.hue, s: this.saturation, l: this.lightness }
+        };
+        this.onChange(this.currentColor);
+        this.colorChange.emit(colorFormat);
+    }
+    changeFormat(newFormat) {
+        this.format = newFormat;
+        this.formatChange.emit(newFormat);
+    }
+    getFormattedColor() {
+        switch (this.format) {
+            case 'hex':
+                return this.currentColor;
+            case 'rgb':
+                const rgb = this.hexToRgb(this.currentColor);
+                return rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : '';
+            case 'hsl':
+                return `hsl(${this.hue}, ${this.saturation}%, ${this.lightness}%)`;
+            default:
+                return this.currentColor;
+        }
+    }
+    // Gradient methods
+    onGradientStartChange(color) {
+        this.gradientStart = color;
+    }
+    onGradientEndChange(color) {
+        this.gradientEnd = color;
+    }
+    onGradientAngleChange(event) {
+        this.gradientAngle = +event.target.value;
+    }
+    getGradientStyle() {
+        return `linear-gradient(${this.gradientAngle}deg, ${this.gradientStart}, ${this.gradientEnd})`;
+    }
+    copyGradientCSS() {
+        const css = `background: ${this.getGradientStyle()};`;
+        navigator.clipboard.writeText(css);
+    }
+    // Color conversion utilities
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+    rgbToHex(r, g, b) {
+        return '#' + [r, g, b].map(x => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        }).join('');
+    }
+    rgbToHsl(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0, s = 0;
+        const l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                    break;
+                case g:
+                    h = ((b - r) / d + 2) / 6;
+                    break;
+                case b:
+                    h = ((r - g) / d + 4) / 6;
+                    break;
+            }
+        }
+        return {
+            h: Math.round(h * 360),
+            s: Math.round(s * 100),
+            l: Math.round(l * 100)
+        };
+    }
+    hslToRgb(h, s, l) {
+        h /= 360;
+        s /= 100;
+        l /= 100;
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l;
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255)
+        };
+    }
+    isValidHex(hex) {
+        return /^#?([a-f\d]{6}|[a-f\d]{3})$/i.test(hex);
+    }
+    getPalettes() {
+        return this.customPalettes.length > 0 ? this.customPalettes : this.defaultPalettes;
+    }
+    asFormat(fmt) {
+        if (fmt === 'hex' || fmt === 'rgb' || fmt === 'hsl')
+            return fmt;
+        return 'hex';
+    }
+}
+ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorPickerComponent, isStandalone: true, selector: "muxima-color-picker", inputs: { format: "format", showPalettes: "showPalettes", showGradient: "showGradient", customPalettes: "customPalettes", disabled: "disabled", size: "size", showAlpha: "showAlpha", inline: "inline" }, outputs: { colorChange: "colorChange", formatChange: "formatChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ColorPickerComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<div class=\"color-picker-wrapper\" [attr.data-size]=\"size\" [class.disabled]=\"disabled\">\r\n  <!-- Trigger Button -->\r\n  <button \r\n    *ngIf=\"!inline\"\r\n    class=\"color-trigger\"\r\n    [style.background]=\"currentColor\"\r\n    [disabled]=\"disabled\"\r\n    (click)=\"togglePicker()\"\r\n    type=\"button\">\r\n    <span class=\"color-value\">{{ getFormattedColor() }}</span>\r\n  </button>\r\n\r\n  <!-- Picker Dropdown/Inline -->\r\n  <div class=\"color-picker-panel\" [class.open]=\"isOpen\" [class.inline]=\"inline\">\r\n    <div class=\"picker-header\">\r\n      <div class=\"format-tabs\">\r\n        <button \r\n          *ngFor=\"let fmt of ['hex', 'rgb', 'hsl']\"\r\n          [class.active]=\"format === fmt\"\r\n          (click)=\"changeFormat(asFormat(fmt))\"\r\n          type=\"button\">\r\n          {{ fmt.toUpperCase() }}\r\n        </button>\r\n      </div>\r\n      <button *ngIf=\"!inline\" class=\"close-btn\" (click)=\"closePicker()\" type=\"button\">\u00D7</button>\r\n    </div>\r\n\r\n    <!-- Color Preview -->\r\n    <div class=\"color-preview\">\r\n      <div class=\"preview-box\" [style.background]=\"currentColor\"></div>\r\n      <input \r\n        type=\"text\" \r\n        class=\"color-input\"\r\n        [value]=\"getFormattedColor()\"\r\n        (input)=\"onHexInput($event)\"\r\n        [disabled]=\"disabled\"\r\n      />\r\n    </div>\r\n\r\n    <!-- HSL Sliders -->\r\n    <div class=\"color-sliders\">\r\n      <div class=\"slider-group\">\r\n        <label>Matiz</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"360\" \r\n          [value]=\"hue\"\r\n          (input)=\"onHueChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider hue-slider\"\r\n        />\r\n        <span class=\"slider-value\">{{ hue }}\u00B0</span>\r\n      </div>\r\n\r\n      <div class=\"slider-group\">\r\n        <label>Satura\u00E7\u00E3o</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"100\" \r\n          [value]=\"saturation\"\r\n          (input)=\"onSaturationChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider saturation-slider\"\r\n          [style.--base-color]=\"'hsl(' + hue + ', 100%, 50%)'\"\r\n        />\r\n        <span class=\"slider-value\">{{ saturation }}%</span>\r\n      </div>\r\n\r\n      <div class=\"slider-group\">\r\n        <label>Luminosidade</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"100\" \r\n          [value]=\"lightness\"\r\n          (input)=\"onLightnessChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider lightness-slider\"\r\n          [style.--base-color]=\"'hsl(' + hue + ', ' + saturation + '%, 50%)'\"\r\n        />\r\n        <span class=\"slider-value\">{{ lightness }}%</span>\r\n      </div>\r\n\r\n      <div class=\"slider-group\" *ngIf=\"showAlpha\">\r\n        <label>Opacidade</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"1\" \r\n          step=\"0.01\"\r\n          [value]=\"alpha\"\r\n          (input)=\"onAlphaChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider alpha-slider\"\r\n        />\r\n        <span class=\"slider-value\">{{ (alpha * 100).toFixed(0) }}%</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Color Palettes -->\r\n    <div class=\"palettes-section\" *ngIf=\"showPalettes\">\r\n      <div class=\"palette\" *ngFor=\"let palette of getPalettes()\">\r\n        <h4>{{ palette.name }}</h4>\r\n        <div class=\"palette-colors\">\r\n          <button\r\n            *ngFor=\"let color of palette.colors\"\r\n            class=\"palette-color\"\r\n            [style.background]=\"color\"\r\n            [class.selected]=\"currentColor === color\"\r\n            (click)=\"selectPaletteColor(color)\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Gradient Section -->\r\n    <div class=\"gradient-section\" *ngIf=\"showGradient\">\r\n      <h4>Criador de Gradiente</h4>\r\n      \r\n      <div class=\"gradient-preview\" [style.background]=\"getGradientStyle()\"></div>\r\n      \r\n      <div class=\"gradient-controls\">\r\n        <div class=\"gradient-colors\">\r\n          <div class=\"gradient-color-input\">\r\n            <label>In\u00EDcio</label>\r\n            <input \r\n              type=\"color\" \r\n              [(ngModel)]=\"gradientStart\"\r\n              (change)=\"onGradientStartChange(gradientStart)\"\r\n              [disabled]=\"disabled\"\r\n            />\r\n            <span>{{ gradientStart }}</span>\r\n          </div>\r\n          \r\n          <div class=\"gradient-color-input\">\r\n            <label>Fim</label>\r\n            <input \r\n              type=\"color\" \r\n              [(ngModel)]=\"gradientEnd\"\r\n              (change)=\"onGradientEndChange(gradientEnd)\"\r\n              [disabled]=\"disabled\"\r\n            />\r\n            <span>{{ gradientEnd }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"slider-group\">\r\n          <label>\u00C2ngulo</label>\r\n          <input \r\n            type=\"range\" \r\n            min=\"0\" \r\n            max=\"360\" \r\n            [value]=\"gradientAngle\"\r\n            (input)=\"onGradientAngleChange($event)\"\r\n            [disabled]=\"disabled\"\r\n            class=\"slider\"\r\n          />\r\n          <span class=\"slider-value\">{{ gradientAngle }}\u00B0</span>\r\n        </div>\r\n\r\n        <button class=\"copy-btn\" (click)=\"copyGradientCSS()\" [disabled]=\"disabled\" type=\"button\">\r\n          \uD83D\uDCCB Copiar CSS\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".color-picker-wrapper{position:relative;display:inline-block}.color-picker-wrapper[data-size=small] .color-trigger{height:32px;font-size:.875rem}.color-picker-wrapper[data-size=large] .color-trigger{height:48px;font-size:1.125rem}.color-picker-wrapper.disabled{opacity:.5;cursor:not-allowed}.color-trigger{display:flex;align-items:center;gap:.5rem;height:40px;padding:.5rem 1rem;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .3s ease;font-family:Courier New,monospace;font-weight:500;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.color-trigger:hover:not(:disabled){border-color:#667eea;box-shadow:0 4px 12px #667eea33}.color-trigger:disabled{cursor:not-allowed}.color-trigger .color-value{flex:1;text-align:center}.color-picker-panel{position:absolute;top:calc(100% + 8px);left:0;background:white;border-radius:16px;box-shadow:0 10px 40px #00000026;padding:1.5rem;width:320px;z-index:1000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease}.color-picker-panel.open{opacity:1;visibility:visible;transform:translateY(0)}.color-picker-panel.inline{position:relative;top:0;left:0;opacity:1;visibility:visible;transform:none;box-shadow:0 2px 8px #0000001a}.picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.picker-header .format-tabs{display:flex;gap:.5rem}.picker-header .format-tabs button{padding:.5rem 1rem;border:1px solid #e5e7eb;border-radius:6px;background:white;cursor:pointer;transition:all .2s ease;font-weight:500;font-size:.875rem;color:#6b7280}.picker-header .format-tabs button:hover{background:#f9fafb;border-color:#667eea}.picker-header .format-tabs button.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-color:transparent}.picker-header .close-btn{width:32px;height:32px;border:none;border-radius:50%;background:#f3f4f6;cursor:pointer;font-size:1.5rem;line-height:1;color:#6b7280;transition:all .2s ease}.picker-header .close-btn:hover{background:#ef4444;color:#fff}.color-preview{display:flex;gap:1rem;margin-bottom:1.5rem}.color-preview .preview-box{width:60px;height:60px;border-radius:12px;border:3px solid #e5e7eb;box-shadow:0 2px 8px #0000001a}.color-preview .color-input{flex:1;padding:.75rem;border:2px solid #e5e7eb;border-radius:8px;font-family:Courier New,monospace;font-size:.875rem;font-weight:500;text-align:center;transition:border-color .2s ease}.color-preview .color-input:focus{outline:none;border-color:#667eea}.color-sliders{margin-bottom:1.5rem}.color-sliders .slider-group{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;margin-bottom:1rem}.color-sliders .slider-group label{font-size:.875rem;font-weight:500;color:#374151;min-width:90px}.color-sliders .slider-group .slider-value{font-size:.875rem;font-weight:600;color:#667eea;font-family:Courier New,monospace;min-width:45px;text-align:right}.color-sliders .slider{-webkit-appearance:none;width:100%;height:8px;border-radius:4px;outline:none;cursor:pointer}.color-sliders .slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:white;border:3px solid #667eea;cursor:pointer;box-shadow:0 2px 6px #0003;-webkit-transition:all .2s ease;transition:all .2s ease}.color-sliders .slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.color-sliders .slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:white;border:3px solid #667eea;cursor:pointer;box-shadow:0 2px 6px #0003}.color-sliders .slider.hue-slider{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%))}.color-sliders .slider.saturation-slider{background:linear-gradient(to right,hsl(var(--hue, 240),0%,50%),var(--base-color, hsl(240, 100%, 50%)))}.color-sliders .slider.lightness-slider{background:linear-gradient(to right,hsl(var(--hue, 240),var(--sat, 100%),0%),var(--base-color, hsl(240, 100%, 50%)),hsl(var(--hue, 240),var(--sat, 100%),100%))}.color-sliders .slider.alpha-slider{background:linear-gradient(to right,transparent,currentColor),repeating-conic-gradient(#ccc 0% 25%,white 0% 50%) 0 0/10px 10px}.color-sliders .slider:disabled{opacity:.5;cursor:not-allowed}.palettes-section{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid #f3f4f6}.palettes-section .palette{margin-bottom:1.5rem}.palettes-section .palette:last-child{margin-bottom:0}.palettes-section .palette h4{font-size:.875rem;font-weight:600;color:#374151;margin-bottom:.75rem}.palettes-section .palette .palette-colors{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.palettes-section .palette .palette-colors .palette-color{width:100%;aspect-ratio:1;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.palettes-section .palette .palette-colors .palette-color:hover{transform:scale(1.1);box-shadow:0 4px 12px #0003}.palettes-section .palette .palette-colors .palette-color.selected{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.palettes-section .palette .palette-colors .palette-color:disabled{opacity:.5;cursor:not-allowed}.gradient-section{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid #f3f4f6}.gradient-section h4{font-size:.875rem;font-weight:600;color:#374151;margin-bottom:1rem}.gradient-section .gradient-preview{height:100px;border-radius:12px;margin-bottom:1rem;box-shadow:0 4px 12px #0000001a}.gradient-section .gradient-controls .gradient-colors{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.gradient-section .gradient-controls .gradient-colors .gradient-color-input{display:flex;flex-direction:column;gap:.5rem}.gradient-section .gradient-controls .gradient-colors .gradient-color-input label{font-size:.875rem;font-weight:500;color:#374151}.gradient-section .gradient-controls .gradient-colors .gradient-color-input input[type=color]{width:100%;height:40px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer}.gradient-section .gradient-controls .gradient-colors .gradient-color-input input[type=color]::-webkit-color-swatch-wrapper{padding:0}.gradient-section .gradient-controls .gradient-colors .gradient-color-input input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.gradient-section .gradient-controls .gradient-colors .gradient-color-input span{font-size:.75rem;font-family:Courier New,monospace;color:#6b7280;text-align:center}.gradient-section .gradient-controls .copy-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:1rem}.gradient-section .gradient-controls .copy-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.gradient-section .gradient-controls .copy-btn:active:not(:disabled){transform:translateY(0)}.gradient-section .gradient-controls .copy-btn:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'muxima-color-picker', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPickerComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"color-picker-wrapper\" [attr.data-size]=\"size\" [class.disabled]=\"disabled\">\r\n  <!-- Trigger Button -->\r\n  <button \r\n    *ngIf=\"!inline\"\r\n    class=\"color-trigger\"\r\n    [style.background]=\"currentColor\"\r\n    [disabled]=\"disabled\"\r\n    (click)=\"togglePicker()\"\r\n    type=\"button\">\r\n    <span class=\"color-value\">{{ getFormattedColor() }}</span>\r\n  </button>\r\n\r\n  <!-- Picker Dropdown/Inline -->\r\n  <div class=\"color-picker-panel\" [class.open]=\"isOpen\" [class.inline]=\"inline\">\r\n    <div class=\"picker-header\">\r\n      <div class=\"format-tabs\">\r\n        <button \r\n          *ngFor=\"let fmt of ['hex', 'rgb', 'hsl']\"\r\n          [class.active]=\"format === fmt\"\r\n          (click)=\"changeFormat(asFormat(fmt))\"\r\n          type=\"button\">\r\n          {{ fmt.toUpperCase() }}\r\n        </button>\r\n      </div>\r\n      <button *ngIf=\"!inline\" class=\"close-btn\" (click)=\"closePicker()\" type=\"button\">\u00D7</button>\r\n    </div>\r\n\r\n    <!-- Color Preview -->\r\n    <div class=\"color-preview\">\r\n      <div class=\"preview-box\" [style.background]=\"currentColor\"></div>\r\n      <input \r\n        type=\"text\" \r\n        class=\"color-input\"\r\n        [value]=\"getFormattedColor()\"\r\n        (input)=\"onHexInput($event)\"\r\n        [disabled]=\"disabled\"\r\n      />\r\n    </div>\r\n\r\n    <!-- HSL Sliders -->\r\n    <div class=\"color-sliders\">\r\n      <div class=\"slider-group\">\r\n        <label>Matiz</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"360\" \r\n          [value]=\"hue\"\r\n          (input)=\"onHueChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider hue-slider\"\r\n        />\r\n        <span class=\"slider-value\">{{ hue }}\u00B0</span>\r\n      </div>\r\n\r\n      <div class=\"slider-group\">\r\n        <label>Satura\u00E7\u00E3o</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"100\" \r\n          [value]=\"saturation\"\r\n          (input)=\"onSaturationChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider saturation-slider\"\r\n          [style.--base-color]=\"'hsl(' + hue + ', 100%, 50%)'\"\r\n        />\r\n        <span class=\"slider-value\">{{ saturation }}%</span>\r\n      </div>\r\n\r\n      <div class=\"slider-group\">\r\n        <label>Luminosidade</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"100\" \r\n          [value]=\"lightness\"\r\n          (input)=\"onLightnessChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider lightness-slider\"\r\n          [style.--base-color]=\"'hsl(' + hue + ', ' + saturation + '%, 50%)'\"\r\n        />\r\n        <span class=\"slider-value\">{{ lightness }}%</span>\r\n      </div>\r\n\r\n      <div class=\"slider-group\" *ngIf=\"showAlpha\">\r\n        <label>Opacidade</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"1\" \r\n          step=\"0.01\"\r\n          [value]=\"alpha\"\r\n          (input)=\"onAlphaChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider alpha-slider\"\r\n        />\r\n        <span class=\"slider-value\">{{ (alpha * 100).toFixed(0) }}%</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Color Palettes -->\r\n    <div class=\"palettes-section\" *ngIf=\"showPalettes\">\r\n      <div class=\"palette\" *ngFor=\"let palette of getPalettes()\">\r\n        <h4>{{ palette.name }}</h4>\r\n        <div class=\"palette-colors\">\r\n          <button\r\n            *ngFor=\"let color of palette.colors\"\r\n            class=\"palette-color\"\r\n            [style.background]=\"color\"\r\n            [class.selected]=\"currentColor === color\"\r\n            (click)=\"selectPaletteColor(color)\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Gradient Section -->\r\n    <div class=\"gradient-section\" *ngIf=\"showGradient\">\r\n      <h4>Criador de Gradiente</h4>\r\n      \r\n      <div class=\"gradient-preview\" [style.background]=\"getGradientStyle()\"></div>\r\n      \r\n      <div class=\"gradient-controls\">\r\n        <div class=\"gradient-colors\">\r\n          <div class=\"gradient-color-input\">\r\n            <label>In\u00EDcio</label>\r\n            <input \r\n              type=\"color\" \r\n              [(ngModel)]=\"gradientStart\"\r\n              (change)=\"onGradientStartChange(gradientStart)\"\r\n              [disabled]=\"disabled\"\r\n            />\r\n            <span>{{ gradientStart }}</span>\r\n          </div>\r\n          \r\n          <div class=\"gradient-color-input\">\r\n            <label>Fim</label>\r\n            <input \r\n              type=\"color\" \r\n              [(ngModel)]=\"gradientEnd\"\r\n              (change)=\"onGradientEndChange(gradientEnd)\"\r\n              [disabled]=\"disabled\"\r\n            />\r\n            <span>{{ gradientEnd }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"slider-group\">\r\n          <label>\u00C2ngulo</label>\r\n          <input \r\n            type=\"range\" \r\n            min=\"0\" \r\n            max=\"360\" \r\n            [value]=\"gradientAngle\"\r\n            (input)=\"onGradientAngleChange($event)\"\r\n            [disabled]=\"disabled\"\r\n            class=\"slider\"\r\n          />\r\n          <span class=\"slider-value\">{{ gradientAngle }}\u00B0</span>\r\n        </div>\r\n\r\n        <button class=\"copy-btn\" (click)=\"copyGradientCSS()\" [disabled]=\"disabled\" type=\"button\">\r\n          \uD83D\uDCCB Copiar CSS\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".color-picker-wrapper{position:relative;display:inline-block}.color-picker-wrapper[data-size=small] .color-trigger{height:32px;font-size:.875rem}.color-picker-wrapper[data-size=large] .color-trigger{height:48px;font-size:1.125rem}.color-picker-wrapper.disabled{opacity:.5;cursor:not-allowed}.color-trigger{display:flex;align-items:center;gap:.5rem;height:40px;padding:.5rem 1rem;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .3s ease;font-family:Courier New,monospace;font-weight:500;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.color-trigger:hover:not(:disabled){border-color:#667eea;box-shadow:0 4px 12px #667eea33}.color-trigger:disabled{cursor:not-allowed}.color-trigger .color-value{flex:1;text-align:center}.color-picker-panel{position:absolute;top:calc(100% + 8px);left:0;background:white;border-radius:16px;box-shadow:0 10px 40px #00000026;padding:1.5rem;width:320px;z-index:1000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease}.color-picker-panel.open{opacity:1;visibility:visible;transform:translateY(0)}.color-picker-panel.inline{position:relative;top:0;left:0;opacity:1;visibility:visible;transform:none;box-shadow:0 2px 8px #0000001a}.picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.picker-header .format-tabs{display:flex;gap:.5rem}.picker-header .format-tabs button{padding:.5rem 1rem;border:1px solid #e5e7eb;border-radius:6px;background:white;cursor:pointer;transition:all .2s ease;font-weight:500;font-size:.875rem;color:#6b7280}.picker-header .format-tabs button:hover{background:#f9fafb;border-color:#667eea}.picker-header .format-tabs button.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-color:transparent}.picker-header .close-btn{width:32px;height:32px;border:none;border-radius:50%;background:#f3f4f6;cursor:pointer;font-size:1.5rem;line-height:1;color:#6b7280;transition:all .2s ease}.picker-header .close-btn:hover{background:#ef4444;color:#fff}.color-preview{display:flex;gap:1rem;margin-bottom:1.5rem}.color-preview .preview-box{width:60px;height:60px;border-radius:12px;border:3px solid #e5e7eb;box-shadow:0 2px 8px #0000001a}.color-preview .color-input{flex:1;padding:.75rem;border:2px solid #e5e7eb;border-radius:8px;font-family:Courier New,monospace;font-size:.875rem;font-weight:500;text-align:center;transition:border-color .2s ease}.color-preview .color-input:focus{outline:none;border-color:#667eea}.color-sliders{margin-bottom:1.5rem}.color-sliders .slider-group{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;margin-bottom:1rem}.color-sliders .slider-group label{font-size:.875rem;font-weight:500;color:#374151;min-width:90px}.color-sliders .slider-group .slider-value{font-size:.875rem;font-weight:600;color:#667eea;font-family:Courier New,monospace;min-width:45px;text-align:right}.color-sliders .slider{-webkit-appearance:none;width:100%;height:8px;border-radius:4px;outline:none;cursor:pointer}.color-sliders .slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:white;border:3px solid #667eea;cursor:pointer;box-shadow:0 2px 6px #0003;-webkit-transition:all .2s ease;transition:all .2s ease}.color-sliders .slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.color-sliders .slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:white;border:3px solid #667eea;cursor:pointer;box-shadow:0 2px 6px #0003}.color-sliders .slider.hue-slider{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%))}.color-sliders .slider.saturation-slider{background:linear-gradient(to right,hsl(var(--hue, 240),0%,50%),var(--base-color, hsl(240, 100%, 50%)))}.color-sliders .slider.lightness-slider{background:linear-gradient(to right,hsl(var(--hue, 240),var(--sat, 100%),0%),var(--base-color, hsl(240, 100%, 50%)),hsl(var(--hue, 240),var(--sat, 100%),100%))}.color-sliders .slider.alpha-slider{background:linear-gradient(to right,transparent,currentColor),repeating-conic-gradient(#ccc 0% 25%,white 0% 50%) 0 0/10px 10px}.color-sliders .slider:disabled{opacity:.5;cursor:not-allowed}.palettes-section{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid #f3f4f6}.palettes-section .palette{margin-bottom:1.5rem}.palettes-section .palette:last-child{margin-bottom:0}.palettes-section .palette h4{font-size:.875rem;font-weight:600;color:#374151;margin-bottom:.75rem}.palettes-section .palette .palette-colors{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.palettes-section .palette .palette-colors .palette-color{width:100%;aspect-ratio:1;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.palettes-section .palette .palette-colors .palette-color:hover{transform:scale(1.1);box-shadow:0 4px 12px #0003}.palettes-section .palette .palette-colors .palette-color.selected{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.palettes-section .palette .palette-colors .palette-color:disabled{opacity:.5;cursor:not-allowed}.gradient-section{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid #f3f4f6}.gradient-section h4{font-size:.875rem;font-weight:600;color:#374151;margin-bottom:1rem}.gradient-section .gradient-preview{height:100px;border-radius:12px;margin-bottom:1rem;box-shadow:0 4px 12px #0000001a}.gradient-section .gradient-controls .gradient-colors{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.gradient-section .gradient-controls .gradient-colors .gradient-color-input{display:flex;flex-direction:column;gap:.5rem}.gradient-section .gradient-controls .gradient-colors .gradient-color-input label{font-size:.875rem;font-weight:500;color:#374151}.gradient-section .gradient-controls .gradient-colors .gradient-color-input input[type=color]{width:100%;height:40px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer}.gradient-section .gradient-controls .gradient-colors .gradient-color-input input[type=color]::-webkit-color-swatch-wrapper{padding:0}.gradient-section .gradient-controls .gradient-colors .gradient-color-input input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.gradient-section .gradient-controls .gradient-colors .gradient-color-input span{font-size:.75rem;font-family:Courier New,monospace;color:#6b7280;text-align:center}.gradient-section .gradient-controls .copy-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:1rem}.gradient-section .gradient-controls .copy-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.gradient-section .gradient-controls .copy-btn:active:not(:disabled){transform:translateY(0)}.gradient-section .gradient-controls .copy-btn:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }], propDecorators: { format: [{
+                type: Input
+            }], showPalettes: [{
+                type: Input
+            }], showGradient: [{
+                type: Input
+            }], customPalettes: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], showAlpha: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }], formatChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorPickerComponent };
+//# sourceMappingURL=muxima-ui-color-picker.mjs.map

package/fesm2015/muxima-ui-color-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"muxima-ui-color-picker.mjs","sources":["../../../../form/color-picker/src/lib/color-picker/color-picker.component.ts","../../../../form/color-picker/src/lib/color-picker/color-picker.component.html","../../../../form/color-picker/src/muxima-ui-color-picker.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, forwardRef, OnInit } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';\r\n\r\nexport interface ColorFormat {\r\n  hex: string;\r\n  rgb: { r: number; g: number; b: number };\r\n  hsl: { h: number; s: number; l: number };\r\n}\r\n\r\nexport interface ColorPalette {\r\n  name: string;\r\n  colors: string[];\r\n}\r\n\r\n@Component({\r\n  selector: 'muxima-color-picker',\r\n  standalone: true,\r\n  imports: [CommonModule, FormsModule],\r\n  templateUrl: './color-picker.component.html',\r\n  styleUrls: ['./color-picker.component.scss'],\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => ColorPickerComponent),\r\n      multi: true\r\n    }\r\n  ]\r\n})\r\nexport class ColorPickerComponent implements ControlValueAccessor, OnInit {\r\n  @Input() format: 'hex' | 'rgb' | 'hsl' = 'hex';\r\n  @Input() showPalettes: boolean = true;\r\n  @Input() showGradient: boolean = false;\r\n  @Input() customPalettes: ColorPalette[] = [];\r\n  @Input() disabled: boolean = false;\r\n  @Input() size: 'small' | 'medium' | 'large' = 'medium';\r\n  @Input() showAlpha: boolean = false;\r\n  @Input() inline: boolean = false;\r\n\r\n  @Output() colorChange = new EventEmitter<ColorFormat>();\r\n  @Output() formatChange = new EventEmitter<'hex' | 'rgb' | 'hsl'>();\r\n\r\n  currentColor: string = '#667eea';\r\n  isOpen: boolean = false;\r\n  hue: number = 240;\r\n  saturation: number = 76;\r\n  lightness: number = 72;\r\n  alpha: number = 1;\r\n\r\n  defaultPalettes: ColorPalette[] = [\r\n    {\r\n      name: 'Material',\r\n      colors: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4']\r\n    },\r\n    {\r\n      name: 'Pastéis',\r\n      colors: ['#ffc1cc', '#ffabab', '#ffd4a3', '#fff9a3', '#c1ffc1', '#a3d4ff', '#c1a3ff', '#ffa3ff']\r\n    },\r\n    {\r\n      name: 'Neutros',\r\n      colors: ['#ffffff', '#f5f5f5', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#424242', '#212121']\r\n    }\r\n  ];\r\n\r\n  gradientStart: string = '#667eea';\r\n  gradientEnd: string = '#764ba2';\r\n  gradientAngle: number = 135;\r\n\r\n  private onChange: (value: string) => void = () => {};\r\n  private onTouched: () => void = () => {};\r\n\r\n  ngOnInit() {\r\n    if (this.inline) {\r\n      this.isOpen = true;\r\n    }\r\n    this.updateFromHex(this.currentColor);\r\n  }\r\n\r\n  writeValue(value: string): void {\r\n    if (value) {\r\n      this.currentColor = value;\r\n      this.updateFromHex(value);\r\n    }\r\n  }\r\n\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(isDisabled: boolean): void {\r\n    this.disabled = isDisabled;\r\n  }\r\n\r\n  togglePicker(): void {\r\n    if (!this.disabled && !this.inline) {\r\n      this.isOpen = !this.isOpen;\r\n      if (this.isOpen) {\r\n        this.onTouched();\r\n      }\r\n    }\r\n  }\r\n\r\n  closePicker(): void {\r\n    if (!this.inline) {\r\n      this.isOpen = false;\r\n    }\r\n  }\r\n\r\n  onHueChange(event: Event): void {\r\n    this.hue = +(event.target as HTMLInputElement).value;\r\n    this.updateColorFromHSL();\r\n  }\r\n\r\n  onSaturationChange(event: Event): void {\r\n    this.saturation = +(event.target as HTMLInputElement).value;\r\n    this.updateColorFromHSL();\r\n  }\r\n\r\n  onLightnessChange(event: Event): void {\r\n    this.lightness = +(event.target as HTMLInputElement).value;\r\n    this.updateColorFromHSL();\r\n  }\r\n\r\n  onAlphaChange(event: Event): void {\r\n    this.alpha = +(event.target as HTMLInputElement).value;\r\n    this.updateColorFromHSL();\r\n  }\r\n\r\n  selectPaletteColor(color: string): void {\r\n    this.currentColor = color;\r\n    this.updateFromHex(color);\r\n    this.emitColor();\r\n  }\r\n\r\n  onHexInput(event: Event): void {\r\n    const hex = (event.target as HTMLInputElement).value;\r\n    if (this.isValidHex(hex)) {\r\n      this.currentColor = hex;\r\n      this.updateFromHex(hex);\r\n      this.emitColor();\r\n    }\r\n  }\r\n\r\n  updateColorFromHSL(): void {\r\n    const rgb = this.hslToRgb(this.hue, this.saturation, this.lightness);\r\n    this.currentColor = this.rgbToHex(rgb.r, rgb.g, rgb.b);\r\n    this.emitColor();\r\n  }\r\n\r\n  updateFromHex(hex: string): void {\r\n    const rgb = this.hexToRgb(hex);\r\n    if (rgb) {\r\n      const hsl = this.rgbToHsl(rgb.r, rgb.g, rgb.b);\r\n      this.hue = hsl.h;\r\n      this.saturation = hsl.s;\r\n      this.lightness = hsl.l;\r\n    }\r\n  }\r\n\r\n  emitColor(): void {\r\n    const rgb = this.hexToRgb(this.currentColor);\r\n    const colorFormat: ColorFormat = {\r\n      hex: this.currentColor,\r\n      rgb: rgb || { r: 0, g: 0, b: 0 },\r\n      hsl: { h: this.hue, s: this.saturation, l: this.lightness }\r\n    };\r\n\r\n    this.onChange(this.currentColor);\r\n    this.colorChange.emit(colorFormat);\r\n  }\r\n\r\n  changeFormat(newFormat: 'hex' | 'rgb' | 'hsl'): void {\r\n    this.format = newFormat;\r\n    this.formatChange.emit(newFormat);\r\n  }\r\n\r\n  getFormattedColor(): string {\r\n    switch (this.format) {\r\n      case 'hex':\r\n        return this.currentColor;\r\n      case 'rgb':\r\n        const rgb = this.hexToRgb(this.currentColor);\r\n        return rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : '';\r\n      case 'hsl':\r\n        return `hsl(${this.hue}, ${this.saturation}%, ${this.lightness}%)`;\r\n      default:\r\n        return this.currentColor;\r\n    }\r\n  }\r\n\r\n  // Gradient methods\r\n  onGradientStartChange(color: string): void {\r\n    this.gradientStart = color;\r\n  }\r\n\r\n  onGradientEndChange(color: string): void {\r\n    this.gradientEnd = color;\r\n  }\r\n\r\n  onGradientAngleChange(event: Event): void {\r\n    this.gradientAngle = +(event.target as HTMLInputElement).value;\r\n  }\r\n\r\n  getGradientStyle(): string {\r\n    return `linear-gradient(${this.gradientAngle}deg, ${this.gradientStart}, ${this.gradientEnd})`;\r\n  }\r\n\r\n  copyGradientCSS(): void {\r\n    const css = `background: ${this.getGradientStyle()};`;\r\n    navigator.clipboard.writeText(css);\r\n  }\r\n\r\n  // Color conversion utilities\r\n  hexToRgb(hex: string): { r: number; g: number; b: number } | null {\r\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\r\n    return result ? {\r\n      r: parseInt(result[1], 16),\r\n      g: parseInt(result[2], 16),\r\n      b: parseInt(result[3], 16)\r\n    } : null;\r\n  }\r\n\r\n  rgbToHex(r: number, g: number, b: number): string {\r\n    return '#' + [r, g, b].map(x => {\r\n      const hex = x.toString(16);\r\n      return hex.length === 1 ? '0' + hex : hex;\r\n    }).join('');\r\n  }\r\n\r\n  rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {\r\n    r /= 255;\r\n    g /= 255;\r\n    b /= 255;\r\n\r\n    const max = Math.max(r, g, b);\r\n    const min = Math.min(r, g, b);\r\n    let h = 0, s = 0;\r\n    const l = (max + min) / 2;\r\n\r\n    if (max !== min) {\r\n      const d = max - min;\r\n      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\r\n\r\n      switch (max) {\r\n        case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;\r\n        case g: h = ((b - r) / d + 2) / 6; break;\r\n        case b: h = ((r - g) / d + 4) / 6; break;\r\n      }\r\n    }\r\n\r\n    return {\r\n      h: Math.round(h * 360),\r\n      s: Math.round(s * 100),\r\n      l: Math.round(l * 100)\r\n    };\r\n  }\r\n\r\n  hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {\r\n    h /= 360;\r\n    s /= 100;\r\n    l /= 100;\r\n\r\n    let r, g, b;\r\n\r\n    if (s === 0) {\r\n      r = g = b = l;\r\n    } else {\r\n      const hue2rgb = (p: number, q: number, t: number) => {\r\n        if (t < 0) t += 1;\r\n        if (t > 1) t -= 1;\r\n        if (t < 1/6) return p + (q - p) * 6 * t;\r\n        if (t < 1/2) return q;\r\n        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;\r\n        return p;\r\n      };\r\n\r\n      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\r\n      const p = 2 * l - q;\r\n\r\n      r = hue2rgb(p, q, h + 1/3);\r\n      g = hue2rgb(p, q, h);\r\n      b = hue2rgb(p, q, h - 1/3);\r\n    }\r\n\r\n    return {\r\n      r: Math.round(r * 255),\r\n      g: Math.round(g * 255),\r\n      b: Math.round(b * 255)\r\n    };\r\n  }\r\n\r\n  isValidHex(hex: string): boolean {\r\n    return /^#?([a-f\\d]{6}|[a-f\\d]{3})$/i.test(hex);\r\n  }\r\n\r\n\r\n  getPalettes(): ColorPalette[] {\r\n    return this.customPalettes.length > 0 ? this.customPalettes : this.defaultPalettes;\r\n  }\r\n\r\n  asFormat(fmt: string): 'hex' | 'rgb' | 'hsl' {\r\n    if (fmt === 'hex' || fmt === 'rgb' || fmt === 'hsl') return fmt;\r\n    return 'hex';\r\n  }\r\n}\r\n","<div class=\"color-picker-wrapper\" [attr.data-size]=\"size\" [class.disabled]=\"disabled\">\r\n  <!-- Trigger Button -->\r\n  <button \r\n    *ngIf=\"!inline\"\r\n    class=\"color-trigger\"\r\n    [style.background]=\"currentColor\"\r\n    [disabled]=\"disabled\"\r\n    (click)=\"togglePicker()\"\r\n    type=\"button\">\r\n    <span class=\"color-value\">{{ getFormattedColor() }}</span>\r\n  </button>\r\n\r\n  <!-- Picker Dropdown/Inline -->\r\n  <div class=\"color-picker-panel\" [class.open]=\"isOpen\" [class.inline]=\"inline\">\r\n    <div class=\"picker-header\">\r\n      <div class=\"format-tabs\">\r\n        <button \r\n          *ngFor=\"let fmt of ['hex', 'rgb', 'hsl']\"\r\n          [class.active]=\"format === fmt\"\r\n          (click)=\"changeFormat(asFormat(fmt))\"\r\n          type=\"button\">\r\n          {{ fmt.toUpperCase() }}\r\n        </button>\r\n      </div>\r\n      <button *ngIf=\"!inline\" class=\"close-btn\" (click)=\"closePicker()\" type=\"button\">×</button>\r\n    </div>\r\n\r\n    <!-- Color Preview -->\r\n    <div class=\"color-preview\">\r\n      <div class=\"preview-box\" [style.background]=\"currentColor\"></div>\r\n      <input \r\n        type=\"text\" \r\n        class=\"color-input\"\r\n        [value]=\"getFormattedColor()\"\r\n        (input)=\"onHexInput($event)\"\r\n        [disabled]=\"disabled\"\r\n      />\r\n    </div>\r\n\r\n    <!-- HSL Sliders -->\r\n    <div class=\"color-sliders\">\r\n      <div class=\"slider-group\">\r\n        <label>Matiz</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"360\" \r\n          [value]=\"hue\"\r\n          (input)=\"onHueChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider hue-slider\"\r\n        />\r\n        <span class=\"slider-value\">{{ hue }}°</span>\r\n      </div>\r\n\r\n      <div class=\"slider-group\">\r\n        <label>Saturação</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"100\" \r\n          [value]=\"saturation\"\r\n          (input)=\"onSaturationChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider saturation-slider\"\r\n          [style.--base-color]=\"'hsl(' + hue + ', 100%, 50%)'\"\r\n        />\r\n        <span class=\"slider-value\">{{ saturation }}%</span>\r\n      </div>\r\n\r\n      <div class=\"slider-group\">\r\n        <label>Luminosidade</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"100\" \r\n          [value]=\"lightness\"\r\n          (input)=\"onLightnessChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider lightness-slider\"\r\n          [style.--base-color]=\"'hsl(' + hue + ', ' + saturation + '%, 50%)'\"\r\n        />\r\n        <span class=\"slider-value\">{{ lightness }}%</span>\r\n      </div>\r\n\r\n      <div class=\"slider-group\" *ngIf=\"showAlpha\">\r\n        <label>Opacidade</label>\r\n        <input \r\n          type=\"range\" \r\n          min=\"0\" \r\n          max=\"1\" \r\n          step=\"0.01\"\r\n          [value]=\"alpha\"\r\n          (input)=\"onAlphaChange($event)\"\r\n          [disabled]=\"disabled\"\r\n          class=\"slider alpha-slider\"\r\n        />\r\n        <span class=\"slider-value\">{{ (alpha * 100).toFixed(0) }}%</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Color Palettes -->\r\n    <div class=\"palettes-section\" *ngIf=\"showPalettes\">\r\n      <div class=\"palette\" *ngFor=\"let palette of getPalettes()\">\r\n        <h4>{{ palette.name }}</h4>\r\n        <div class=\"palette-colors\">\r\n          <button\r\n            *ngFor=\"let color of palette.colors\"\r\n            class=\"palette-color\"\r\n            [style.background]=\"color\"\r\n            [class.selected]=\"currentColor === color\"\r\n            (click)=\"selectPaletteColor(color)\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Gradient Section -->\r\n    <div class=\"gradient-section\" *ngIf=\"showGradient\">\r\n      <h4>Criador de Gradiente</h4>\r\n      \r\n      <div class=\"gradient-preview\" [style.background]=\"getGradientStyle()\"></div>\r\n      \r\n      <div class=\"gradient-controls\">\r\n        <div class=\"gradient-colors\">\r\n          <div class=\"gradient-color-input\">\r\n            <label>Início</label>\r\n            <input \r\n              type=\"color\" \r\n              [(ngModel)]=\"gradientStart\"\r\n              (change)=\"onGradientStartChange(gradientStart)\"\r\n              [disabled]=\"disabled\"\r\n            />\r\n            <span>{{ gradientStart }}</span>\r\n          </div>\r\n          \r\n          <div class=\"gradient-color-input\">\r\n            <label>Fim</label>\r\n            <input \r\n              type=\"color\" \r\n              [(ngModel)]=\"gradientEnd\"\r\n              (change)=\"onGradientEndChange(gradientEnd)\"\r\n              [disabled]=\"disabled\"\r\n            />\r\n            <span>{{ gradientEnd }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"slider-group\">\r\n          <label>Ângulo</label>\r\n          <input \r\n            type=\"range\" \r\n            min=\"0\" \r\n            max=\"360\" \r\n            [value]=\"gradientAngle\"\r\n            (input)=\"onGradientAngleChange($event)\"\r\n            [disabled]=\"disabled\"\r\n            class=\"slider\"\r\n          />\r\n          <span class=\"slider-value\">{{ gradientAngle }}°</span>\r\n        </div>\r\n\r\n        <button class=\"copy-btn\" (click)=\"copyGradientCSS()\" [disabled]=\"disabled\" type=\"button\">\r\n          📋 Copiar CSS\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}