@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-color-picker/dropi-color-picker.js

@@ -1,61 +1,303 @@
 import { h } from "@stencil/core";
-const PRESETS = [
-    '#f46a6b', '#f49a3d', '#f4d03d', '#34c55a', '#50a5f1', '#7c6bea',
-    '#1a2033', '#475066', '#858ea6', '#c3c9d9', '#eceef4', '#ffffff',
-];
-/**
- * @component dropi-color-picker
- * Color picker with hex input, opacity slider, and preset swatches.
- */
 export class DropiColorPicker {
-    /** Current color value (hex string) */
-    value = '#f49a3d';
-    /** Show opacity slider */
-    showOpacity = false;
-    /** Opacity value 0–100 */
+    el;
+    currentColor = '#ffffff';
+    position = 'right';
+    colorChange;
+    color = '';
+    hue = 0;
+    saturation = 0;
+    currentVal = 0;
     opacity = 100;
-    /** Label */
-    label = '';
-    /** Disabled */
-    disabled = false;
-    /** Show preset swatches */
-    showPresets = true;
-    open = false;
-    hexInput = '';
-    /** Emitted when color changes. e.detail = hex string */
-    dropiColorChange;
-    /** Emitted when opacity changes. e.detail = 0-100 */
-    dropiOpacityChange;
+    showEdit = false;
+    isDragging = false;
+    isHueDragging = false;
+    isOpacityDragging = false;
+    colorCanvas;
+    hueCanvas;
+    opacityCanvas;
+    onValueChange(newValue) {
+        if (!this.showEdit) {
+            this.color = newValue;
+            this.syncFromHex();
+        }
+    }
     componentWillLoad() {
-        this.hexInput = this.value;
-    }
-    selectColor(hex) {
-        this.value = hex;
-        this.hexInput = hex;
-        this.dropiColorChange.emit(hex);
-    }
-    handleHexInput(e) {
-        const raw = e.target.value;
-        this.hexInput = raw;
-        if (/^#[0-9a-fA-F]{6}$/.test(raw)) {
-            this.value = raw;
-            this.dropiColorChange.emit(raw);
+        this.color = this.currentColor;
+        this.syncFromHex();
+    }
+    componentDidLoad() {
+        document.addEventListener('mousemove', this.onMouseMove.bind(this));
+        document.addEventListener('mouseup', this.onMouseUp.bind(this));
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Defer canvas drawing slightly to ensure elements are rendered
+        setTimeout(() => {
+            if (this.hueCanvas)
+                this.drawHueCanvas();
+            if (this.colorCanvas)
+                this.drawColorCanvas();
+            if (this.opacityCanvas)
+                this.drawOpacityCanvas();
+        }, 50);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousemove', this.onMouseMove.bind(this));
+        document.removeEventListener('mouseup', this.onMouseUp.bind(this));
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+    onMouseMove(event) {
+        if (this.isDragging) {
+            this.updateColorFromPosition(event);
+            return;
+        }
+        if (this.isHueDragging) {
+            this.updateHueFromPosition(event);
+            return;
+        }
+        if (this.isOpacityDragging) {
+            this.updateOpacityFromPosition(event);
+            return;
+        }
+    }
+    onMouseUp() {
+        this.isDragging = false;
+        this.isHueDragging = false;
+        this.isOpacityDragging = false;
+    }
+    handleClickOutside(event) {
+        // Determine if the click target is outside the host element
+        const clickedInside = event.composedPath().includes(this.el);
+        if (!clickedInside && this.showEdit) {
+            this.showEdit = false;
+            this.currentColor = this.color;
+            this.colorChange.emit(this.color);
+        }
+    }
+    drawColorCanvas() {
+        if (!this.colorCanvas)
+            return;
+        const ctx = this.colorCanvas.getContext('2d');
+        const width = this.colorCanvas.width;
+        const height = this.colorCanvas.height;
+        const saturationGradient = ctx.createLinearGradient(0, 0, width, 0);
+        saturationGradient.addColorStop(0, '#FFFFFF');
+        saturationGradient.addColorStop(1, `hsl(${this.hue ?? 0}, 100%, 50%)`);
+        const valueGradient = ctx.createLinearGradient(0, 0, 0, height);
+        valueGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+        valueGradient.addColorStop(1, '#000000');
+        ctx.fillStyle = saturationGradient;
+        ctx.fillRect(0, 0, width, height);
+        ctx.fillStyle = valueGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    drawHueCanvas() {
+        if (!this.hueCanvas)
+            return;
+        const ctx = this.hueCanvas.getContext('2d');
+        const width = this.hueCanvas.width;
+        const height = this.hueCanvas.height;
+        const hueGradient = ctx.createLinearGradient(0, 0, width, 0);
+        for (let i = 0; i <= 360; i += 60) {
+            hueGradient.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);
+        }
+        ctx.fillStyle = hueGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    drawOpacityCanvas() {
+        if (!this.opacityCanvas)
+            return;
+        const ctx = this.opacityCanvas.getContext('2d');
+        const width = this.opacityCanvas.width;
+        const height = this.opacityCanvas.height;
+        ctx.clearRect(0, 0, width, height);
+        ctx.fillStyle = '#FFFFFF';
+        ctx.fillRect(0, 0, width, height);
+        const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);
+        const opacityGradient = ctx.createLinearGradient(0, 0, width, 0);
+        opacityGradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
+        opacityGradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);
+        ctx.fillStyle = opacityGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    updateColor() {
+        const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);
+        const hex = this.rgbToHex(rgb.r, rgb.g, rgb.b, this.opacity);
+        this.color = hex;
+        this.drawColorCanvas();
+        this.drawOpacityCanvas();
+        this.currentColor = hex;
+        this.colorChange.emit(this.color);
+    }
+    hsvToRgb(h, s, v) {
+        s /= 100;
+        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 >= 0 && h < 60) {
+            r = c;
+            g = x;
+            b = 0;
+        }
+        else if (h >= 60 && h < 120) {
+            r = x;
+            g = c;
+            b = 0;
+        }
+        else if (h >= 120 && h < 180) {
+            r = 0;
+            g = c;
+            b = x;
+        }
+        else if (h >= 180 && h < 240) {
+            r = 0;
+            g = x;
+            b = c;
+        }
+        else if (h >= 240 && h < 300) {
+            r = x;
+            g = 0;
+            b = c;
         }
+        else if (h >= 300 && h <= 360) {
+            r = c;
+            g = 0;
+            b = x;
+        }
+        return {
+            r: Math.round((r + m) * 255),
+            g: Math.round((g + m) * 255),
+            b: Math.round((b + m) * 255),
+        };
     }
-    handleOpacity(e) {
-        const val = Number(e.target.value);
-        this.opacity = val;
-        this.dropiOpacityChange.emit(val);
+    rgbToHex(red, green, black, opacity = 100) {
+        const toHex = (val) => {
+            const hex = Math.round(val).toString(16);
+            return hex.padStart(2, '0');
+        };
+        const rHex = toHex(red);
+        const gHex = toHex(green);
+        const bHex = toHex(black);
+        const alpha = Math.round((opacity / 100) * 255);
+        const aHex = toHex(alpha);
+        return `#${rHex}${gHex}${bHex}${aHex}`;
+    }
+    syncFromHex() {
+        if (/^#?[0-9A-F]{6}([0-9A-F]{2})?$/i.test(this.color)) {
+            if (!this.color.startsWith('#')) {
+                this.color = '#' + this.color;
+            }
+            const hex = this.color.substring(1);
+            const r = parseInt(hex.substring(0, 2), 16);
+            const g = parseInt(hex.substring(2, 4), 16);
+            const b = parseInt(hex.substring(4, 6), 16);
+            const a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;
+            const hsv = this.rgbToHsv(r, g, b, a);
+            this.hue = hsv.h;
+            this.saturation = hsv.s;
+            this.currentVal = hsv.v;
+            this.opacity = a * 100;
+            this.drawColorCanvas();
+            this.drawOpacityCanvas();
+        }
     }
-    handleNativeColor(e) {
-        const hex = e.target.value;
-        this.selectColor(hex);
+    onHexInputChange(event) {
+        this.color = event.target.value;
+        this.syncFromHex();
+    }
+    rgbToHsv(r, g, b, a = 1) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const delta = max - min;
+        let h = 0;
+        if (delta !== 0) {
+            if (max === r)
+                h = 60 * (((g - b) / delta) % 6);
+            else if (max === g)
+                h = 60 * ((b - r) / delta + 2);
+            else if (max === b)
+                h = 60 * ((r - g) / delta + 4);
+        }
+        if (h < 0)
+            h += 360;
+        const s = max === 0 ? 0 : (delta / max) * 100;
+        const v = max * 100;
+        return {
+            h: Math.round(h),
+            s: Math.round(s),
+            v: Math.round(v),
+            a: parseFloat(a.toFixed(3)),
+        };
+    }
+    getCanvasPosition(canvas, event) {
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        return {
+            x: (event.clientX - rect.left) * scaleX,
+            y: (event.clientY - rect.top) * scaleY,
+        };
+    }
+    onColorMouseDown(event) {
+        this.isDragging = true;
+        this.updateColorFromPosition(event);
+    }
+    onHueMouseDown(event) {
+        this.isHueDragging = true;
+        this.updateHueFromPosition(event);
+    }
+    onOpacityMouseDown(event) {
+        this.isOpacityDragging = true;
+        this.updateOpacityFromPosition(event);
+    }
+    updateColorFromPosition(event) {
+        if (!this.colorCanvas)
+            return;
+        const pos = this.getCanvasPosition(this.colorCanvas, event);
+        const x = Math.max(0, Math.min(pos.x, 256));
+        const y = Math.max(0, Math.min(pos.y, 150));
+        this.saturation = Math.round((x / 256) * 100);
+        this.currentVal = 100 - Math.round((y / 150) * 100);
+        this.updateColor();
+    }
+    updateHueFromPosition(event) {
+        if (!this.hueCanvas)
+            return;
+        const pos = this.getCanvasPosition(this.hueCanvas, event);
+        const x = Math.max(0, Math.min(pos.x, 256));
+        this.hue = Math.round((x / 256) * 360);
+        this.drawColorCanvas();
+        this.updateColor();
+    }
+    updateOpacityFromPosition(event) {
+        if (!this.opacityCanvas)
+            return;
+        const pos = this.getCanvasPosition(this.opacityCanvas, event);
+        const x = Math.max(0, Math.min(pos.x, 256));
+        this.opacity = Math.round((x / 256) * 100);
+        this.updateColor();
+    }
+    showEditor() {
+        this.showEdit = !this.showEdit;
+        this.color = this.currentColor;
+        if (this.showEdit) {
+            setTimeout(() => {
+                this.drawHueCanvas();
+                this.drawColorCanvas();
+                this.drawOpacityCanvas();
+                this.syncFromHex();
+            }, 100);
+        }
     }
     render() {
-        return (h("div", { key: '945a6065e2b3a74223a461a26685292edcd78c35', class: "cp-wrap" }, this.label && h("label", { key: 'f55fc2254ee0c2c301e9e32811dea37b6b8eff5d', class: "cp-label" }, this.label), h("button", { key: '021c23bc249bc3a3053176834808732c58441018', class: { 'cp-trigger': true, 'cp-trigger--disabled': this.disabled }, disabled: this.disabled, onClick: () => {
-                if (!this.disabled)
-                    this.open = !this.open;
-            }, type: "button" }, h("span", { key: 'be49ed05577c5c585d1509bdc1b5055e0e394383', class: "cp-trigger__swatch", style: { background: this.value } }), h("span", { key: '402a7005da1daf2b3a2e12b086b41f79552aa061', class: "cp-trigger__value" }, this.value), h("dropi-icon", { key: 'da5d7aa322ad7649e90832c54c6ecba445c5e64b', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '5e14ace3d21ce605ecc8131acf6c1cb382ee33fa', class: "cp-popup" }, h("div", { key: '4408dff1ab4a6ab9a9765eb93502f88fe0946ac0', class: "cp-spectrum-wrap" }, h("input", { key: '8d3a7e7b38f528e8dfe14eb668da2af1d861cfe8', type: "color", class: "cp-native", value: this.value, onChange: (e) => this.handleNativeColor(e) }), h("div", { key: '4c37fc46fb692afde5574f681b02159f1a84d06b', class: "cp-spectrum-label" }, "Selecciona un color")), h("div", { key: 'a968e35abe0fc39806002d49f5ca46dece28c0a6', class: "cp-hex-row" }, h("span", { key: '0cb30134befff62ced36803c6ed0d5c96b41c680', class: "cp-hex-label" }, "HEX"), h("input", { key: 'ff6e209fcfeb2ec2d55354806aaba41c041492c5', class: "cp-hex-input", type: "text", value: this.hexInput, maxLength: 7, onInput: (e) => this.handleHexInput(e), placeholder: "#000000" }), h("div", { key: '6b744fc086dbbc9b5dc148f224673085c7a28704', class: "cp-hex-preview", style: { background: this.value } })), this.showOpacity && (h("div", { key: '5250878b5392e1b00c2e677db727f56c2db91c11', class: "cp-opacity-row" }, h("span", { key: '58b49f3749d8a33edcfc580b0e11517087bc25b4', class: "cp-opacity-label" }, "Opacidad"), h("input", { key: '48f060900c5d7184e5d2ab93c0abd1641cc755e7', class: "cp-opacity-slider", type: "range", min: 0, max: 100, value: this.opacity, onInput: (e) => this.handleOpacity(e) }), h("span", { key: '7da0ec0a86c1472bd1836a8bb0ca616091dde695', class: "cp-opacity-value" }, this.opacity, "%"))), this.showPresets && (h("div", { key: '96434d1c7bdfe187f04f613494b79e28acef7750', class: "cp-presets" }, PRESETS.map(hex => (h("button", { class: { 'cp-swatch': true, 'cp-swatch--active': hex === this.value }, style: { background: hex }, onClick: () => this.selectColor(hex), type: "button", title: hex }))))), h("button", { key: 'e5ad3d16b888c8eb0a4444ae3a6fbab9c83689c5', class: "cp-close", onClick: () => this.open = false, type: "button" }, "Cerrar")))));
+        return (h("div", { key: '2ee2bd6abd837388d8169961f6b1024da228b453', class: "general-container" }, h("div", { key: '15416c1a844daf774dda53f1c08bbe6b15435b64', class: "main-input-container" }, h("div", { key: 'e08aacd3ebb059a8467cf6f597d2b3bb3419e286', class: "overlay", onClick: () => this.showEditor() }), h("div", { key: 'dda8addee7afb351fb1f6c18dda516d29259220d', class: "line-color-preview" }, h("div", { key: 'b242eac802dc0c1d0a9965fb6fc9b6f010408ae2', class: "color-preview", style: { background: this.currentColor } })), h("div", { key: '8dddc6632dddae52cc58d964ee50cae1e6460b12', class: "color-info" }, h("input", { key: '7181e30bddae8005260d285653425cd5cad2386e', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), h("div", { key: '0ad3b547299fc1a4ccab9ddb7efebd7962fd7855', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, h("div", { key: 'c49847d5a6ca7a90f27889afe26f6c30c1959676', class: "main-color-canvas-container" }, h("canvas", { key: '44531a25415492782d70d070aacf17797f9e3818', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), h("div", { key: '325bc14afacafa6dddd0a9bc837c6448ff803bd8', class: "color-selector-pointer", style: {
+                left: `${(this.saturation / 100) * 256}px`,
+                top: `${((100 - this.currentVal) / 100) * 150}px`
+            } })), h("div", { key: 'ab6d2a987b4c317fa218e70a1602ea829505fe0a', class: "slider-container" }, h("div", { key: 'fe9ae897de10c04322653870cb9e5b79f61a2b86', class: "slider-group" }, h("div", { key: 'f39f1935c0410509f6ecbf69b718730201d70be7', class: "hue-slider-container" }, h("canvas", { key: '6a08c8dd36f3c9d70aa0f0438006bc4efa4df401', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), h("div", { key: 'a91a4f4469e3152b24bf1e7dfd3d4738eb17f661', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), h("div", { key: '2a45b1e24dcb447e515d8dbfac2ecd4032661af8', class: "slider-group" }, h("div", { key: 'ec945cd912ecf046ca16e7520bae48d3e998f8fd', class: "opacity-slider-container" }, h("canvas", { key: 'f181f9a8b16274d94377f3dd300c3bff231088df', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), h("div", { key: '2e246b9e62991569c60024ac4f8b1ae32543e03e', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), h("div", { key: 'c8c539dda06f8ce70b4c669a32e56cb693132f49', class: "color-info" }, h("div", { key: '5939e97e1331e57a5837e868ea6088b069e3c3eb', class: "color-label" }, "HEX"), h("input", { key: '321cebcb041223d4cb6c072f310720edcdb2391c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
     }
     static get is() { return "dropi-color-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -71,7 +313,7 @@ export class DropiColorPicker {
     }
     static get properties() {
         return {
-            "value": {
+            "currentColor": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -83,153 +325,69 @@ export class DropiColorPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Current color value (hex string)"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
-                "defaultValue": "'#f49a3d'"
+                "attribute": "current-color",
+                "defaultValue": "'#ffffff'"
             },
-            "showOpacity": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show opacity slider"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-opacity",
-                "defaultValue": "false"
-            },
-            "opacity": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Opacity value 0\u2013100"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "opacity",
-                "defaultValue": "100"
-            },
-            "label": {
+            "position": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disabled"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "showPresets": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show preset swatches"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-presets",
-                "defaultValue": "true"
+                "attribute": "position",
+                "defaultValue": "'right'"
             }
         };
     }
     static get states() {
         return {
-            "open": {},
-            "hexInput": {}
+            "color": {},
+            "hue": {},
+            "saturation": {},
+            "currentVal": {},
+            "opacity": {},
+            "showEdit": {}
         };
     }
     static get events() {
         return [{
-                "method": "dropiColorChange",
-                "name": "dropiColorChange",
+                "method": "colorChange",
+                "name": "colorChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when color changes. e.detail = hex string"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 }
-            }, {
-                "method": "dropiOpacityChange",
-                "name": "dropiOpacityChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when opacity changes. e.detail = 0-100"
-                },
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
             }];
     }
 }

package/dist/collection/components/dropi-country-flags/dropi-country-flags.js

@@ -10,14 +10,14 @@ export class DropiCountryFlags {
     /** ISO 3166-1 alpha-2 country code (e.g. "CO", "US") */
     country = '';
     /** Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi */
-    flagStyle = 'flat';
+    customStyle = 'flat';
     /** Width in px */
     width = '';
     /** Height in px */
     height = '';
     get src() {
         const code = (this.country || '').toUpperCase();
-        if (this.flagStyle === 'circle') {
+        if (this.customStyle === 'circle') {
             return `https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg`;
         }
         return `https://flagsapi.com/${code}/flat/64.png`;
@@ -28,7 +28,7 @@ export class DropiCountryFlags {
             style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;
         if (this.height)
             style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;
-        return (h("figure", { key: 'a0e00a2c47e205b0ddd565726a9aff1945cfad2e', class: `flag ${this.flagStyle}` }, h("img", { key: '4048129356b4d43ae761f7dd7858483dd008f2b9', src: this.src, style: style, alt: `flag-${this.country}` })));
+        return (h("figure", { key: '924adeb5372e2c02ce1c0471a162b57fc53616bd', class: `flag ${this.customStyle ?? 'flat'}` }, h("img", { key: '8433b69bbfc51aa5e72f8bd7166382e1d7907cfa', src: this.src, style: style, alt: `flag-${this.country}` })));
     }
     static get is() { return "dropi-country-flags"; }
     static get encapsulation() { return "shadow"; }
@@ -64,7 +64,7 @@ export class DropiCountryFlags {
                 "attribute": "country",
                 "defaultValue": "''"
             },
-            "flagStyle": {
+            "customStyle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -81,7 +81,7 @@ export class DropiCountryFlags {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "flag-style",
+                "attribute": "custom-style",
                 "defaultValue": "'flat'"
             },
             "width": {