@dropi/ui 0.1.18 → 0.1.20

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

@@ -0,0 +1,183 @@
+:host { display: block; position: relative; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.cp-label {
+  display: block;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+  margin-bottom: 4px;
+}
+
+/* Trigger */
+.cp-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: 0 var(--Size-3, 12px);
+  height: 40px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  cursor: pointer;
+  font-family: inherit;
+  transition: border-color 0.2s;
+  width: 100%;
+}
+.cp-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }
+.cp-trigger--disabled { opacity: 0.6; cursor: not-allowed; }
+
+.cp-trigger__swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--Border-1, 4px);
+  border: 1px solid rgba(0,0,0,0.1);
+  flex-shrink: 0;
+}
+
+.cp-trigger__value {
+  flex: 1;
+  text-align: left;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  font-family: monospace;
+}
+
+/* Popup */
+.cp-popup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 220px;
+  background: var(--Neutral-White, #fff);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
+  z-index: 300;
+  padding: var(--Size-3, 12px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-3, 12px);
+}
+
+/* Spectrum */
+.cp-spectrum-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+}
+
+.cp-native {
+  width: 100%;
+  height: 80px;
+  border: none;
+  border-radius: var(--Border-1, 4px);
+  cursor: pointer;
+  padding: 0;
+  background: none;
+}
+.cp-native::-webkit-color-swatch-wrapper { padding: 0; }
+.cp-native::-webkit-color-swatch { border: none; border-radius: var(--Border-1, 4px); }
+
+.cp-spectrum-label {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+/* Hex row */
+.cp-hex-row {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+}
+
+.cp-hex-label {
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-500, #68738f);
+  width: 24px;
+  flex-shrink: 0;
+}
+
+.cp-hex-input {
+  flex: 1;
+  height: 32px;
+  padding: 0 var(--Size-2, 8px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-1, 4px);
+  font-size: var(--font-size-xs, 10px);
+  font-family: monospace;
+  color: var(--Gray-Gray-700, #32394d);
+  outline: none;
+}
+.cp-hex-input:focus { border-color: var(--Info-Info-500, #50a5f1); }
+
+.cp-hex-preview {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--Border-1, 4px);
+  border: 1px solid rgba(0,0,0,0.1);
+  flex-shrink: 0;
+}
+
+/* Opacity */
+.cp-opacity-row {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+}
+
+.cp-opacity-label {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-500, #68738f);
+  white-space: nowrap;
+}
+
+.cp-opacity-slider {
+  flex: 1;
+  height: 4px;
+  cursor: pointer;
+  accent-color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.cp-opacity-value {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-500, #68738f);
+  width: 28px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+/* Presets */
+.cp-presets {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: var(--Size-1, 4px);
+}
+
+.cp-swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--Border-1, 4px);
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.15s, border-color 0.15s;
+  padding: 0;
+}
+.cp-swatch:hover { transform: scale(1.15); }
+.cp-swatch--active { border-color: var(--Gray-Gray-800, #1a2033); }
+
+/* Close */
+.cp-close {
+  background: none;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-1, 4px);
+  padding: 4px 12px;
+  font-size: var(--font-size-xs, 10px);
+  font-family: inherit;
+  color: var(--Gray-Gray-600, #475066);
+  cursor: pointer;
+  align-self: flex-end;
+  transition: background 0.15s;
+}
+.cp-close:hover { background: var(--Gray-Gray-50, #f7f8fa); }

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

@@ -0,0 +1,235 @@
+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 */
+    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;
+    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);
+        }
+    }
+    handleOpacity(e) {
+        const val = Number(e.target.value);
+        this.opacity = val;
+        this.dropiOpacityChange.emit(val);
+    }
+    handleNativeColor(e) {
+        const hex = e.target.value;
+        this.selectColor(hex);
+    }
+    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")))));
+    }
+    static get is() { return "dropi-color-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-color-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-color-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current color value (hex string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'#f49a3d'"
+            },
+            "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": {
+                "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",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled"
+                },
+                "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "hexInput": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiColorChange",
+                "name": "dropiColorChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when color changes. e.detail = hex string"
+                },
+                "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": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,30 @@
+:host {
+  display: inline-flex;
+}
+
+.flag {
+  max-width: 40px;
+  max-height: 40px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flag img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.circle {
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.rectangle {
+  border-radius: 4px;
+  overflow: hidden;
+  max-width: 32px !important;
+  max-height: 24px !important;
+}

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

@@ -0,0 +1,129 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-country-flags
+ * Displays a country flag image. Supports circle, rectangle, and flat styles.
+ *
+ * @example
+ * <dropi-country-flags country="CO" style="circle"></dropi-country-flags>
+ */
+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';
+    /** Width in px */
+    width = '';
+    /** Height in px */
+    height = '';
+    get src() {
+        const code = (this.country || '').toUpperCase();
+        if (this.flagStyle === 'circle') {
+            return `https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg`;
+        }
+        return `https://flagsapi.com/${code}/flat/64.png`;
+    }
+    render() {
+        const style = {};
+        if (this.width)
+            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}` })));
+    }
+    static get is() { return "dropi-country-flags"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-country-flags.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-country-flags.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ISO 3166-1 alpha-2 country code (e.g. \"CO\", \"US\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country",
+                "defaultValue": "''"
+            },
+            "flagStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'rectangle' | 'flat'",
+                    "resolved": "\"circle\" | \"flat\" | \"rectangle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flag-style",
+                "defaultValue": "'flat'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width in px"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height in px"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "''"
+            }
+        };
+    }
+}