npm - @dropi/ui - Versions diffs - 0.1.51 → 0.1.53 - Mend

@dropi/ui 0.1.51 → 0.1.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (716) hide show

package/dist/dropi-ui/dropi-tag-type-product.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
-const dropiTagTypeProductCss = () => `:host{display:inline-block}.type-variation{border-radius:4px;background:var(--Warning-Warning-500);padding:2px 6px;font-size:var(--font-size-xs);color:var(--Neutral-White);text-transform:capitalize;font-weight:var(--font-weight-regular);width:fit-content}`;
+const dropiTagTypeProductCss = () => `:host{display:inline-block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.type-variation{border-radius:4px;background:var(--Warning-Warning-500);padding:2px 6px;font-size:var(--font-size-xs);color:var(--Neutral-White);text-transform:capitalize;font-weight:var(--font-weight-regular);width:fit-content}`;
 const DropiTagTypeProduct = class {
     constructor(hostRef) {
@@ -9,7 +9,7 @@ const DropiTagTypeProduct = class {
     /** Label text. Default: VARIABLE */
     label = 'VARIABLE';
     render() {
-        return h("div", { key: '6d27b4fc40c66e6bfd8400e4727aa9a9c2e8dc8c', class: "type-variation" }, this.label);
+        return h("div", { key: '30cc0207828626fdcdb8dd84d34200903e52a146', class: "type-variation" }, this.label);
     }
 };
 DropiTagTypeProduct.style = dropiTagTypeProductCss();

package/dist/dropi-ui/dropi-tag-type-product.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-tag-type-product.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC~~,+PAA+P~~,CAAC;;~~MCWzR~~,mBAAmB,GAAA,MAAA;;;;;IAEtB,KAAK,GAAW,UAAU;IAElC,MAAM,GAAA;AACJ,QAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO;;;;;;;","names":[],"sources":["src/components/dropi-tag-type-product/dropi-tag-type-product.css?tag=dropi-tag-type-product&encapsulation=shadow","src/components/dropi-tag-type-product/dropi-tag-type-product.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.type-variation {\n border-radius: 4px;\n background: var(--Warning-Warning-500);\n padding: 2px 6px;\n font-size: var(--font-size-xs);\n color: var(--Neutral-White);\n text-transform: capitalize;\n font-weight: var(--font-weight-regular);\n width: fit-content;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/*\n @component dropi-tag-type-product\n * Tag badge showing the product variation type.\n /\n@Component({\n tag: 'dropi-tag-type-product',\n styleUrl: 'dropi-tag-type-product.css',\n shadow: true,\n})\nexport class DropiTagTypeProduct {\n /* Label text. Default: VARIABLE */\n @Prop() label: string = 'VARIABLE';\n\n render() {\n return <div class=\"type-variation\">{this.label}</div>;\n }\n}\n"],"version":3}
1	+ {"file":"dropi-tag-type-product.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,oVAAoV,CAAC;;MCW9W,mBAAmB,GAAA,MAAA;;;;;IAEtB,KAAK,GAAW,UAAU;IAElC,MAAM,GAAA;AACJ,QAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO;;;;;;;","names":[],"sources":["src/components/dropi-tag-type-product/dropi-tag-type-product.css?tag=dropi-tag-type-product&encapsulation=shadow","src/components/dropi-tag-type-product/dropi-tag-type-product.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n display: inline-block;\n}\n\n.type-variation {\n border-radius: 4px;\n background: var(--Warning-Warning-500);\n padding: 2px 6px;\n font-size: var(--font-size-xs);\n color: var(--Neutral-White);\n text-transform: capitalize;\n font-weight: var(--font-weight-regular);\n width: fit-content;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/*\n @component dropi-tag-type-product\n * Tag badge showing the product variation type.\n /\n@Component({\n tag: 'dropi-tag-type-product',\n styleUrl: 'dropi-tag-type-product.css',\n shadow: true,\n})\nexport class DropiTagTypeProduct {\n /* Label text. Default: VARIABLE */\n @Prop() label: string = 'VARIABLE';\n\n render() {\n return <div class=\"type-variation\">{this.label}</div>;\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-tag.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
-const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:flex;align-items:center;justify-content:center}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--lineheight-large, 150%);animation:fade-in 200ms ease-out}.tags.dot-variant,.tags.text-variant{padding:0;gap:8px;background-color:transparent !important;line-height:normal}.dot-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
+const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.container-chips{display:flex;align-items:center;justify-content:center}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--lineheight-large, 150%);animation:fade-in 200ms ease-out}.tags.dot-variant,.tags.text-variant{padding:0;gap:8px;background-color:transparent !important;line-height:normal}.dot-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
 const DropiTag = class {
     constructor(hostRef) {
@@ -66,7 +66,7 @@ const DropiTag = class {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (h("div", { key: '6a50111c0057b7ef3380dde9f639e9409b7fbea9', class: "container-chips" }, h("div", { key: 'f2f78c3682aa2e8bef5f3f1b43a1729cae8ae293', class: {
+        return (h("div", { key: '84d16e23ea93c74736129a56d919148715377f6d', class: "container-chips" }, h("div", { key: '34c07dad33b89078a40161b1fca139d08a3aaff3', class: {
                 tags: true,
                 'icon-only': this.showIcon && !this.hasContent,
                 'dot-variant': this.variant === 'dot',
@@ -75,7 +75,7 @@ const DropiTag = class {
                 backgroundColor: (this.variant === 'dot' || this.variant === 'text') ? 'transparent' : this.bgColor,
                 color: this.textColor,
                 fontWeight: this.fontWeight
-            } }, this.variant === 'dot' && (h("div", { key: '5364569230575b79b1160e06cc29046220bdf198', class: "dot-indicator", style: { backgroundColor: this.dotColor } })), this.showIcon && this.icon && (h("dropi-icon", { key: '8ea74f9ad58e7892405e3e748289b71456945de6', class: "file-icon", name: this.icon, iconWidth: "16px", iconHeight: "16px", color: this.variant === 'dot' ? 'Gray-Gray-500' : this.iconColor })), this.hasContent && h("span", { key: '99409549735fd48cf0a40e411f1f236716e53939' }, this.text))));
+            } }, this.variant === 'dot' && (h("div", { key: '09007ce8723056bead8b71e3c5d1be4c8beaf445', class: "dot-indicator", style: { backgroundColor: this.dotColor } })), this.showIcon && this.icon && (h("dropi-icon", { key: '82f6f39bb752f32f870a10b7ffd15a611f8895ee', class: "file-icon", name: this.icon, iconWidth: "16px", iconHeight: "16px", color: this.variant === 'dot' ? 'Gray-Gray-500' : this.iconColor })), this.hasContent && h("span", { key: '94a6ab523d204dd26175c2cf5bad8d66e20d6f85' }, this.text))));
     }
     static get watchers() { return {
         "type": [{

package/dist/dropi-ui/dropi-tag.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-tag.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,~~kvBAAkvB~~,CAAC;;~~MCejwB~~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","names":[],"sources":["src/components/dropi-tag/dropi-tag.css?tag=dropi-tag&encapsulation=shadow","src/components/dropi-tag/dropi-tag.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.container-chips {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.tags {\n display: inline-flex;\n padding: 4px 8px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: var(--Border-5, 9999px);\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n font-size: var(--font-size-xs, 12px);\n font-weight: var(--font-weight-medium, 500);\n line-height: var(--lineheight-large, 150%);\n / Animation /\n animation: fade-in 200ms ease-out;\n}\n\n.tags.dot-variant,\n.tags.text-variant {\n padding: 0;\n gap: 8px;\n background-color: transparent !important;\n line-height: normal;\n}\n\n.dot-indicator {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n@keyframes fade-in {\n from { opacity: 0; transform: scale(0.8); }\n to { opacity: 1; transform: scale(1); }\n}\n","import { Component, Prop, Watch, h } from '@stencil/core';\n\nexport type TagState = 'default' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'legacy';\nexport type TagType = 'primary' \| 'secondary';\nexport type TagVariant = 'tag' \| 'dot' \| 'text';\n\n/\n @component dropi-tag\n * Colored tag/chip for statuses, categories, and labels.\n /\n@Component({\n tag: 'dropi-tag',\n styleUrl: 'dropi-tag.css',\n shadow: true,\n})\nexport class DropiTag {\n /* tag (default) \| dot (status dot + text) \| text (colored text only) /\n @Prop({ reflect: true }) variant: TagVariant = 'tag';\n /* primary (filled) \| secondary (soft) /\n @Prop({ reflect: true }) type: TagType = 'primary';\n /* Color state of the tag /\n @Prop({ reflect: true }) state: TagState = 'default';\n /* Whether to show the icon /\n @Prop() showIcon: boolean = false;\n /* Icon name from the sprite /\n @Prop({ reflect: true }) icon: string = '';\n /* Label text */\n @Prop({ reflect: true }) text: string = '';\n\n private readonly colorMap: Record<TagState, string> = {\n default: 'Primary-Primary',\n success: 'Success-Success',\n info: 'Info-Info',\n warning: 'Warning-Warning',\n error: 'Error-Error',\n legacy: 'Gray-Gray',\n };\n\n @Watch('type') @Watch('state') @Watch('variant')\n propsChanged() {}\n\n private get bgColor(): string {\n const base = this.colorMap[this.state];\n if (this.type === 'primary') return `var(--${base}-500)`;\n const shade = this.state === 'default' \|\| this.state === 'legacy' ? '-100' : '-50';\n return `var(--${base}${shade})`;\n }\n\n private get textColor(): string {\n const base = this.colorMap[this.state];\n \n if (this.variant === 'text') return this.dotColor;\n \n if (this.variant === 'dot' \|\| this.showIcon) {\n return 'var(--Gray-Gray-500)';\n }\n\n if (this.type === 'primary') return `var(--Neutral-White)`;\n\n const shade = this.state === 'default' ? '-500' : '-700';\n return `var(--${base}${shade})`;\n }\n\n private get dotColor(): string {\n const base = this.colorMap[this.state];\n return `var(--${base}-500)`;\n }\n\n private get fontWeight(): string {\n if (this.type === 'secondary' && !this.showIcon) return '300';\n return '500';\n }\n\n private get iconColor(): string {\n if (this.type === 'primary') return 'Neutral-White';\n const base = this.colorMap[this.state];\n const shade = this.state === 'default' ? '-500' : '-700';\n return `${base}${shade}`;\n }\n\n private get hasContent(): boolean {\n return typeof this.text === 'string' && this.text.trim().length > 0;\n }\n\n render() {\n return (\n <div class=\"container-chips\">\n <div\n class={{ \n tags: true, \n 'icon-only': this.showIcon && !this.hasContent,\n 'dot-variant': this.variant === 'dot',\n 'text-variant': this.variant === 'text'\n }}\n style={{ \n backgroundColor: (this.variant === 'dot' \|\| this.variant === 'text') ? 'transparent' : this.bgColor, \n color: this.textColor,\n fontWeight: this.fontWeight \n }}\n >\n {this.variant === 'dot' && (\n <div class=\"dot-indicator\" style={{ backgroundColor: this.dotColor }}></div>\n )}\n {this.showIcon && this.icon && (\n <dropi-icon\n class=\"file-icon\"\n name={this.icon}\n iconWidth=\"16px\"\n iconHeight=\"16px\"\n color={this.variant === 'dot' ? 'Gray-Gray-500' : this.iconColor}\n />\n )}\n {this.hasContent && <span>{this.text}</span>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-tag.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-tag/dropi-tag.css?tag=dropi-tag&encapsulation=shadow","src/components/dropi-tag/dropi-tag.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n}\n\n, ::before, ::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.container-chips {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.tags {\n display: inline-flex;\n padding: 4px 8px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: var(--Border-5, 9999px);\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n font-size: var(--font-size-xs, 12px);\n font-weight: var(--font-weight-medium, 500);\n line-height: var(--lineheight-large, 150%);\n / Animation /\n animation: fade-in 200ms ease-out;\n}\n\n.tags.dot-variant,\n.tags.text-variant {\n padding: 0;\n gap: 8px;\n background-color: transparent !important;\n line-height: normal;\n}\n\n.dot-indicator {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n@keyframes fade-in {\n from { opacity: 0; transform: scale(0.8); }\n to { opacity: 1; transform: scale(1); }\n}\n","import { Component, Prop, Watch, h } from '@stencil/core';\n\nexport type TagState = 'default' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'legacy';\nexport type TagType = 'primary' \| 'secondary';\nexport type TagVariant = 'tag' \| 'dot' \| 'text';\n\n/\n @component dropi-tag\n * Colored tag/chip for statuses, categories, and labels.\n /\n@Component({\n tag: 'dropi-tag',\n styleUrl: 'dropi-tag.css',\n shadow: true,\n})\nexport class DropiTag {\n /* tag (default) \| dot (status dot + text) \| text (colored text only) /\n @Prop({ reflect: true }) variant: TagVariant = 'tag';\n /* primary (filled) \| secondary (soft) /\n @Prop({ reflect: true }) type: TagType = 'primary';\n /* Color state of the tag /\n @Prop({ reflect: true }) state: TagState = 'default';\n /* Whether to show the icon /\n @Prop() showIcon: boolean = false;\n /* Icon name from the sprite /\n @Prop({ reflect: true }) icon: string = '';\n /* Label text */\n @Prop({ reflect: true }) text: string = '';\n\n private readonly colorMap: Record<TagState, string> = {\n default: 'Primary-Primary',\n success: 'Success-Success',\n info: 'Info-Info',\n warning: 'Warning-Warning',\n error: 'Error-Error',\n legacy: 'Gray-Gray',\n };\n\n @Watch('type') @Watch('state') @Watch('variant')\n propsChanged() {}\n\n private get bgColor(): string {\n const base = this.colorMap[this.state];\n if (this.type === 'primary') return `var(--${base}-500)`;\n const shade = this.state === 'default' \|\| this.state === 'legacy' ? '-100' : '-50';\n return `var(--${base}${shade})`;\n }\n\n private get textColor(): string {\n const base = this.colorMap[this.state];\n \n if (this.variant === 'text') return this.dotColor;\n \n if (this.variant === 'dot' \|\| this.showIcon) {\n return 'var(--Gray-Gray-500)';\n }\n\n if (this.type === 'primary') return `var(--Neutral-White)`;\n\n const shade = this.state === 'default' ? '-500' : '-700';\n return `var(--${base}${shade})`;\n }\n\n private get dotColor(): string {\n const base = this.colorMap[this.state];\n return `var(--${base}-500)`;\n }\n\n private get fontWeight(): string {\n if (this.type === 'secondary' && !this.showIcon) return '300';\n return '500';\n }\n\n private get iconColor(): string {\n if (this.type === 'primary') return 'Neutral-White';\n const base = this.colorMap[this.state];\n const shade = this.state === 'default' ? '-500' : '-700';\n return `${base}${shade}`;\n }\n\n private get hasContent(): boolean {\n return typeof this.text === 'string' && this.text.trim().length > 0;\n }\n\n render() {\n return (\n <div class=\"container-chips\">\n <div\n class={{ \n tags: true, \n 'icon-only': this.showIcon && !this.hasContent,\n 'dot-variant': this.variant === 'dot',\n 'text-variant': this.variant === 'text'\n }}\n style={{ \n backgroundColor: (this.variant === 'dot' \|\| this.variant === 'text') ? 'transparent' : this.bgColor, \n color: this.textColor,\n fontWeight: this.fontWeight \n }}\n >\n {this.variant === 'dot' && (\n <div class=\"dot-indicator\" style={{ backgroundColor: this.dotColor }}></div>\n )}\n {this.showIcon && this.icon && (\n <dropi-icon\n class=\"file-icon\"\n name={this.icon}\n iconWidth=\"16px\"\n iconHeight=\"16px\"\n color={this.variant === 'dot' ? 'Gray-Gray-500' : this.iconColor}\n />\n )}\n {this.hasContent && <span>{this.text}</span>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-text-area.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiTextAreaCss = () => `:host{display:flex;flex-direction:column;width:100%}*,*::before,*::after{box-sizing:border-box}.textarea-wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.textarea-wrapper label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.textarea-container{position:relative;display:flex;flex-direction:column}textarea.form-control{box-sizing:border-box;width:100%;flex:1;overflow:auto;padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:border-color 0.3s ease-in-out;outline:none;appearance:none}textarea.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}textarea.form-control:focus::placeholder{color:var(--Gray-Gray-400, #858ea6)}textarea.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.char-counter{position:absolute;bottom:10px;right:16px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c);pointer-events:none}.form-control-helper{display:flex;gap:4px;align-items:center}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}`;
+const dropiTextAreaCss = () => `:host{display:flex;flex-direction:column;width:100%;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.textarea-wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.textarea-wrapper label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.textarea-container{position:relative;display:flex;flex-direction:column}textarea.form-control{box-sizing:border-box;width:100%;flex:1;overflow:auto;padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:border-color 0.3s ease-in-out;outline:none;appearance:none}textarea.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}textarea.form-control:focus::placeholder{color:var(--Gray-Gray-400, #858ea6)}textarea.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.char-counter{position:absolute;bottom:10px;right:16px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c);pointer-events:none}.form-control-helper{display:flex;gap:4px;align-items:center}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}`;
 const DropiTextArea = class {
     constructor(hostRef) {
@@ -19,9 +19,9 @@ const DropiTextArea = class {
     }
     internals;
     /** Input id. Defaults to label. */
-    id = '';
+    inputId;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Label shown above the textarea */
     label = '';
     /** Placeholder text */
@@ -55,8 +55,8 @@ const DropiTextArea = class {
     textAreaPropertiesChanged(val) {
         if (!val)
             return;
-        if (val.id !== undefined)
-            this.id = val.id;
+        if (val.inputId !== undefined)
+            this.inputId = val.inputId;
         if (val.label !== undefined)
             this.label = val.label;
         if (val.placeholder !== undefined)
@@ -99,7 +99,7 @@ const DropiTextArea = class {
         this.dropiBlur.emit();
     }
     get resolvedId() {
-        return this.id || this.label;
+        return this.inputId || this.name;
     }
     get isInvalid() {
         return this.hasError && this.touched;
@@ -110,12 +110,12 @@ const DropiTextArea = class {
     render() {
         const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showHelper = this.textHelper || this.isInvalid;
-        return (h("div", { key: '8c25826a54d1f0bec06d8f70211d2bcd873d59a6', class: "textarea-wrapper" }, this.label && (h("label", { key: '58a578753a1248b185d2763aedf50eaaa152c791', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'cf31923103a7594f552df4ec86885f78d0c31779', class: "asterisk" }, " *"))), h("div", { key: '6ea60b6286fd4438389cfda0580379d8fe013adc', class: "textarea-container" }, h("textarea", { key: 'fc5e495d80bfd665e55480668b9fa7ed62651984', id: this.resolvedId, class: {
+        return (h("div", { key: 'c60ecee8d33a2ea89e4fe9f8922c073c42e40325', class: "textarea-wrapper" }, this.label && (h("label", { key: 'f51e92e244f65d5934e00187014502a168e44e88', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'd0290bd7ef48bd5875d978584f9a2ca83f784d5f', class: "asterisk" }, " *"))), h("div", { key: 'dd0f517a5f1d670638a4c30a1cefbba90dc78182', class: "textarea-container" }, h("textarea", { key: 'bbfc1065fcbcbc9f39c029c5e39e3d3aaf6f270e', id: this.resolvedId, class: {
                 'form-control': true,
                 'Body-M-Regular': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
-            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (h("div", { key: '07c350ce7a2e56b466229450645e6faece3d284b', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (h("div", { key: 'c9fbd9a21b7e26fbd9571fc524b6f706404145d3', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '8fc6e34849f9e3175097597280a3bea9defb6bb0', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), h("span", { key: '68bf62627efb3de92afe54f7803e322f5a0462e4', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (h("div", { key: '6ede091e4e93682f3dcc41f3ef349e45f8302f89', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (h("div", { key: '4de46271b004b4d7fe0d3d52c3161c2330b9289d', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: 'edf7e714cd50f69fb2613bc9515b902a7eb63465', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), h("span", { key: '364a69a89fafe0677966208c10fe8e9e2f3a1b58', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/dropi-ui/dropi-text-area.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-text-area.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,gwDAAgwD,CAAC;;MC8BpxD,aAAa,GAAA,MAAA;;;;;;;;;;;;;;;AACL,IAAA,SAAS;;IAGH,EAAE,GAAW,EAAE;;IAEf,IAAI,GAAW,EAAE;;IAEjB,KAAK,GAAW,EAAE;;IAElB,WAAW,GAAW,EAAE;;IAExB,KAAK,GAAW,EAAE;;AAElB,IAAA,SAAS;;IAET,SAAS,GAAW,CAAC;;IAErB,IAAI,GAAW,CAAC;;IAEhB,MAAM,GAAe,UAAU;;IAE/B,QAAQ,GAAY,KAAK;;IAEzB,QAAQ,GAAY,KAAK;;IAE1C,sBAAsB,GAAY,KAAK;;IAEtB,UAAU,GAAW,EAAE;;IAExC,QAAQ,GAAY,KAAK;AACjC;;;;AAIG;IACK,kBAAkB,GAA8B,IAAI;AAG5D,IAAA,yBAAyB,CAAC,GAAuB,EAAA;AAC/C,QAAA,IAAI,CAAC,GAAG;YAAE;AACV,QAAA,IAAI,GAAG,CAAC,EAAE,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE;AAC1C,QAAA,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK;AACnD,QAAA,IAAI,GAAG,CAAC,WAAW,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,WAAW;AACrE,QAAA,IAAI,GAAG,CAAC,SAAS,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,SAAS;AAC/D,QAAA,IAAI,GAAG,CAAC,SAAS,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,SAAS;AAC/D,QAAA,IAAI,GAAG,CAAC,UAAU,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,UAAU;AAClE,QAAA,IAAI,GAAG,CAAC,IAAI,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI;AAChD,QAAA,IAAI,GAAG,CAAC,MAAM,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM;;IAGvC,OAAO,GAAY,KAAK;;AAGhC,IAAA,UAAU;;AAEV,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;AAGlB,IAAA,YAAY,CAAC,GAAW,EAAA;AACtB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC;;IAGlC,iBAAiB,GAAA;QACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAC7C,IAAI,IAAI,CAAC,kBAAkB;AAAE,YAAA,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,CAAC;;AAG9E,IAAA,WAAW,CAAC,CAAa,EAAA;AAC/B,QAAA,MAAM,GAAG,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK;AACnD,QAAA,IAAI,CAAC,KAAK,GAAG,GAAG;AAChB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC;AAChC,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;AACzB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGpB,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;AAGvB,IAAA,IAAY,UAAU,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK;;AAG9B,IAAA,IAAY,SAAS,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;;AAGtC,IAAA,IAAY,SAAS,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC;;IAGhC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,QAAQ;QACnF,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS;QAEpD,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAE1B,IAAI,CAAC,KAAK,KACT,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,sBAAsB,GAAG,sBAAsB,EAAE,EAAA,EAEhF,IAAI,CAAC,KAAK,EACV,YAAY,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAA,EAAA,IAAA,CAAU,CAC3C,CACT,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,oBAAoB,EAAE,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;gBACrE,sBAAsB,EAAE,IAAI,CAAC,SAAS;aACvC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAC9B,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAe,CAAC,EACjD,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EACrC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAE9B,IAAI,CAAC,KAAK,CACF,EAEV,IAAI,CAAC,SAAS,GAAG,CAAC,KACjB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,SAAS,OAAG,IAAI,CAAC,SAAS,CAC5B,CACP,CACG,EAEL,UAAU,KACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC7B,IAAI,CAAC,SAAS,KACb,mEAAY,IAAI,EAAC,gBAAgB,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,iBAAiB,EAAA,CAAG,CAChG,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,SAAS,EAAE,EAC1C,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,sBAAsB,GAAG,SAAS,EAAE,EAAA,EAEnE,IAAI,CAAC,UAAU,CACX,CACH,CACP,CAEG;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-text-area/dropi-text-area.css?tag=dropi-text-area&encapsulation=shadow","src/components/dropi-text-area/dropi-text-area.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.textarea-wrapper {\n position: relative;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.textarea-wrapper label {\n font-size: var(--font-size-xs, 10px);\n font-weight: var(--font-weight-regular, 400);\n color: var(--Gray-Gray-600, #475066);\n}\n\n.asterisk {\n color: var(--Error-Error-500, #f46a6b);\n}\n\n.textarea-container {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\ntextarea.form-control {\n box-sizing: border-box;\n width: 100%;\n flex: 1;\n overflow: auto;\n padding: var(--Size-3, 12px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n font-size: var(--font-size-s, 12px);\n font-family: inherit;\n color: var(--Gray-Gray-700, #32394d);\n background: var(--Neutral-White, #ffffff);\n transition: border-color 0.3s ease-in-out;\n outline: none;\n appearance: none;\n}\n\ntextarea.form-control:focus {\n border-color: var(--Info-Info-500, #50a5f1);\n}\n\ntextarea.form-control:focus::placeholder {\n color: var(--Gray-Gray-400, #858ea6);\n}\n\ntextarea.form-control-valid {\n border-color: var(--Gray-Gray-400, #858ea6) !important;\n color: var(--Gray-Gray-600, #475066);\n}\n\ntextarea.form-control-invalid {\n border-color: var(--Error-Error-500, #f46a6b) !important;\n color: var(--Gray-Gray-600, #475066);\n}\n\ntextarea.form-control:disabled {\n border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n cursor: not-allowed;\n}\n\n/ ── Char counter ───────────────────────────────────────────── /\n.char-counter {\n position: absolute;\n bottom: 10px;\n right: 16px;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-500, #69738c);\n pointer-events: none;\n}\n\n/ ── Helper ─────────────────────────────────────────────────── /\n.form-control-helper {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n.form-control-helper span {\n display: block;\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n color: var(--Error-Error-500, #f46a6b) !important;\n}\n","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\n/\n Simplified TextAreaProperties interface (matches Angular `TextAreaProperties`).\n * `formControl` is intentionally excluded — use `value` + dropiInput event instead.\n /\nexport interface TextAreaProperties {\n id?: string;\n label?: string;\n placeholder?: string;\n maxLength?: number;\n minLength?: number;\n textHelper?: string;\n rows?: number;\n resize?: 'none' \| 'both' \| 'horizontal' \| 'vertical';\n}\n\nexport type ResizeMode = 'none' \| 'both' \| 'horizontal' \| 'vertical';\n\n/\n @component dropi-text-area\n * Multi-line text area with label, char counter, validation states,\n * helper text, and native form association.\n /\n@Component({\n tag: 'dropi-text-area',\n styleUrl: 'dropi-text-area.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiTextArea {\n @AttachInternals() internals: ElementInternals;\n\n /* Input id. Defaults to label. /\n @Prop({ mutable: true }) id: string = '';\n /* Name for native form submission /\n @Prop({ reflect: true }) name: string = '';\n /* Label shown above the textarea /\n @Prop({ mutable: true }) label: string = '';\n /* Placeholder text /\n @Prop({ mutable: true }) placeholder: string = '';\n /* Current value (controlled) /\n @Prop({ mutable: true }) value: string = '';\n /* Max character length /\n @Prop({ mutable: true }) maxLength: number;\n /* Min character length /\n @Prop({ mutable: true }) minLength: number = 0;\n /* Number of visible rows /\n @Prop({ mutable: true }) rows: number = 4;\n /* Resize behavior /\n @Prop({ mutable: true }) resize: ResizeMode = 'vertical';\n /* Disable the textarea /\n @Prop({ reflect: true }) disabled: boolean = false;\n /* Mark as required /\n @Prop({ reflect: true }) required: boolean = false;\n /* Show the required asterisk /\n @Prop() showObligatoryAsterisk: boolean = false;\n /* Helper / error text below the field /\n @Prop({ mutable: true }) textHelper: string = '';\n /* Mark the field as invalid (consumer-controlled) /\n @Prop() hasError: boolean = false;\n /\n Convenience object prop — matches Angular `textAreaProperties: TextAreaProperties`.\n * When provided, its non-null fields override individual props.\n * Note: `formControl` is not supported in web components; use `value` + dropiInput instead.\n /\n @Prop() textAreaProperties: TextAreaProperties \| null = null;\n\n @Watch('textAreaProperties')\n textAreaPropertiesChanged(val: TextAreaProperties) {\n if (!val) return;\n if (val.id !== undefined) this.id = val.id;\n if (val.label !== undefined) this.label = val.label;\n if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n if (val.minLength !== undefined) this.minLength = val.minLength;\n if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n if (val.rows !== undefined) this.rows = val.rows;\n if (val.resize !== undefined) this.resize = val.resize;\n }\n\n @State() private touched: boolean = false;\n\n /* Emitted on every keystroke /\n @Event() dropiInput: EventEmitter<string>;\n /* Emitted on blur /\n @Event() dropiChange: EventEmitter<string>;\n @Event() dropiFocus: EventEmitter<void>;\n @Event() dropiBlur: EventEmitter<void>;\n\n @Watch('value')\n valueChanged(val: string) {\n this.internals.setFormValue(val);\n }\n\n componentWillLoad() {\n this.internals.setFormValue(this.value ?? '');\n if (this.textAreaProperties) this.textAreaPropertiesChanged(this.textAreaProperties);\n }\n\n private handleInput(e: InputEvent) {\n const val = (e.target as HTMLTextAreaElement).value;\n this.value = val;\n this.internals.setFormValue(val);\n this.dropiInput.emit(val);\n this.dropiChange.emit(val);\n }\n\n private handleBlur() {\n this.touched = true;\n this.dropiBlur.emit();\n }\n\n private get resolvedId(): string {\n return this.id \|\| this.label;\n }\n\n private get isInvalid(): boolean {\n return this.hasError && this.touched;\n }\n\n private get charCount(): number {\n return this.value?.length ?? 0;\n }\n\n render() {\n const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n const showHelper = this.textHelper \|\| this.isInvalid;\n\n return (\n <div class=\"textarea-wrapper\">\n\n {this.label && (\n <label\n htmlFor={this.resolvedId}\n style={{ color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' }}\n >\n {this.label}\n {showAsterisk && <span class=\"asterisk\"> </span>}\n </label>\n )}\n\n <div class=\"textarea-container\">\n <textarea\n id={this.resolvedId}\n class={{\n 'form-control': true,\n 'Body-M-Regular': true,\n 'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n 'form-control-invalid': this.isInvalid,\n }}\n rows={this.rows}\n placeholder={this.placeholder}\n maxLength={this.maxLength}\n minLength={this.minLength}\n disabled={this.disabled}\n required={this.required}\n style={{ resize: this.resize }}\n onInput={(e) => this.handleInput(e as InputEvent)}\n onFocus={() => this.dropiFocus.emit()}\n onBlur={() => this.handleBlur()}\n >\n {this.value}\n </textarea>\n\n {this.maxLength > 0 && (\n <div class=\"char-counter\">\n {this.charCount}/{this.maxLength}\n </div>\n )}\n </div>\n\n {showHelper && (\n <div class=\"form-control-helper\">\n {this.isInvalid && (\n <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />\n )}\n <span\n class={{ 'invalid-color': this.isInvalid }}\n style={{ color: this.disabled ? 'var(--Gray-Gray-400)' : undefined }}\n >\n {this.textHelper}\n </span>\n </div>\n )}\n\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-text-area.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-text-area/dropi-text-area.css?tag=dropi-text-area&encapsulation=shadow","src/components/dropi-text-area/dropi-text-area.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.textarea-wrapper {\n position: relative;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.textarea-wrapper label {\n font-size: var(--font-size-xs, 10px);\n font-weight: var(--font-weight-regular, 400);\n color: var(--Gray-Gray-600, #475066);\n}\n\n.asterisk {\n color: var(--Error-Error-500, #f46a6b);\n}\n\n.textarea-container {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\ntextarea.form-control {\n box-sizing: border-box;\n width: 100%;\n flex: 1;\n overflow: auto;\n padding: var(--Size-3, 12px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n font-size: var(--font-size-s, 12px);\n font-family: var(--font-family-01, 'Inter', sans-serif);\n color: var(--Gray-Gray-700, #32394d);\n background: var(--Neutral-White, #ffffff);\n transition: border-color 0.3s ease-in-out;\n outline: none;\n appearance: none;\n}\n\ntextarea.form-control:focus {\n border-color: var(--Info-Info-500, #50a5f1);\n}\n\ntextarea.form-control:focus::placeholder {\n color: var(--Gray-Gray-400, #858ea6);\n}\n\ntextarea.form-control-valid {\n border-color: var(--Gray-Gray-400, #858ea6) !important;\n color: var(--Gray-Gray-600, #475066);\n}\n\ntextarea.form-control-invalid {\n border-color: var(--Error-Error-500, #f46a6b) !important;\n color: var(--Gray-Gray-600, #475066);\n}\n\ntextarea.form-control:disabled {\n border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n cursor: not-allowed;\n}\n\n/ ── Char counter ───────────────────────────────────────────── /\n.char-counter {\n position: absolute;\n bottom: 10px;\n right: 16px;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-500, #69738c);\n pointer-events: none;\n}\n\n/ ── Helper ─────────────────────────────────────────────────── /\n.form-control-helper {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n.form-control-helper span {\n display: block;\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n color: var(--Error-Error-500, #f46a6b) !important;\n}\n","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\n/\n Simplified TextAreaProperties interface (matches Angular `TextAreaProperties`).\n * `formControl` is intentionally excluded — use `value` + dropiInput event instead.\n /\nexport interface TextAreaProperties {\n inputId?: string;\n label?: string;\n placeholder?: string;\n maxLength?: number;\n minLength?: number;\n textHelper?: string;\n rows?: number;\n resize?: 'none' \| 'both' \| 'horizontal' \| 'vertical';\n}\n\nexport type ResizeMode = 'none' \| 'both' \| 'horizontal' \| 'vertical';\n\n/\n @component dropi-text-area\n * Multi-line text area with label, char counter, validation states,\n * helper text, and native form association.\n /\n@Component({\n tag: 'dropi-text-area',\n styleUrl: 'dropi-text-area.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiTextArea {\n @AttachInternals() internals: ElementInternals;\n\n /* Input id. Defaults to label. /\n @Prop({ mutable: true }) inputId!: string;\n /* Name for native form submission /\n @Prop({ reflect: true }) name!: string;\n /* Label shown above the textarea /\n @Prop({ mutable: true }) label: string = '';\n /* Placeholder text /\n @Prop({ mutable: true }) placeholder: string = '';\n /* Current value (controlled) /\n @Prop({ mutable: true }) value: string = '';\n /* Max character length /\n @Prop({ mutable: true }) maxLength: number;\n /* Min character length /\n @Prop({ mutable: true }) minLength: number = 0;\n /* Number of visible rows /\n @Prop({ mutable: true }) rows: number = 4;\n /* Resize behavior /\n @Prop({ mutable: true }) resize: ResizeMode = 'vertical';\n /* Disable the textarea /\n @Prop({ reflect: true }) disabled: boolean = false;\n /* Mark as required /\n @Prop({ reflect: true }) required: boolean = false;\n /* Show the required asterisk /\n @Prop() showObligatoryAsterisk: boolean = false;\n /* Helper / error text below the field /\n @Prop({ mutable: true }) textHelper: string = '';\n /* Mark the field as invalid (consumer-controlled) /\n @Prop() hasError: boolean = false;\n /\n Convenience object prop — matches Angular `textAreaProperties: TextAreaProperties`.\n * When provided, its non-null fields override individual props.\n * Note: `formControl` is not supported in web components; use `value` + dropiInput instead.\n /\n @Prop() textAreaProperties: TextAreaProperties \| null = null;\n\n @Watch('textAreaProperties')\n textAreaPropertiesChanged(val: TextAreaProperties) {\n if (!val) return;\n if (val.inputId !== undefined) this.inputId = val.inputId;\n if (val.label !== undefined) this.label = val.label;\n if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n if (val.minLength !== undefined) this.minLength = val.minLength;\n if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n if (val.rows !== undefined) this.rows = val.rows;\n if (val.resize !== undefined) this.resize = val.resize;\n }\n\n @State() private touched: boolean = false;\n\n /* Emitted on every keystroke /\n @Event() dropiInput: EventEmitter<string>;\n /* Emitted on blur /\n @Event() dropiChange: EventEmitter<string>;\n @Event() dropiFocus: EventEmitter<void>;\n @Event() dropiBlur: EventEmitter<void>;\n\n @Watch('value')\n valueChanged(val: string) {\n this.internals.setFormValue(val);\n }\n\n componentWillLoad() {\n this.internals.setFormValue(this.value ?? '');\n if (this.textAreaProperties) this.textAreaPropertiesChanged(this.textAreaProperties);\n }\n\n private handleInput(e: InputEvent) {\n const val = (e.target as HTMLTextAreaElement).value;\n this.value = val;\n this.internals.setFormValue(val);\n this.dropiInput.emit(val);\n this.dropiChange.emit(val);\n }\n\n private handleBlur() {\n this.touched = true;\n this.dropiBlur.emit();\n }\n\n private get resolvedId(): string {\n return this.inputId \|\| this.name;\n }\n\n private get isInvalid(): boolean {\n return this.hasError && this.touched;\n }\n\n private get charCount(): number {\n return this.value?.length ?? 0;\n }\n\n render() {\n const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n const showHelper = this.textHelper \|\| this.isInvalid;\n\n return (\n <div class=\"textarea-wrapper\">\n\n {this.label && (\n <label\n htmlFor={this.resolvedId}\n style={{ color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' }}\n >\n {this.label}\n {showAsterisk && <span class=\"asterisk\"> </span>}\n </label>\n )}\n\n <div class=\"textarea-container\">\n <textarea\n id={this.resolvedId}\n class={{\n 'form-control': true,\n 'Body-M-Regular': true,\n 'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n 'form-control-invalid': this.isInvalid,\n }}\n rows={this.rows}\n placeholder={this.placeholder}\n maxLength={this.maxLength}\n minLength={this.minLength}\n disabled={this.disabled}\n required={this.required}\n style={{ resize: this.resize }}\n onInput={(e) => this.handleInput(e as InputEvent)}\n onFocus={() => this.dropiFocus.emit()}\n onBlur={() => this.handleBlur()}\n >\n {this.value}\n </textarea>\n\n {this.maxLength > 0 && (\n <div class=\"char-counter\">\n {this.charCount}/{this.maxLength}\n </div>\n )}\n </div>\n\n {showHelper && (\n <div class=\"form-control-helper\">\n {this.isInvalid && (\n <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />\n )}\n <span\n class={{ 'invalid-color': this.isInvalid }}\n style={{ color: this.disabled ? 'var(--Gray-Gray-400)' : undefined }}\n >\n {this.textHelper}\n </span>\n </div>\n )}\n\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-time-line.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
-const dropiTimeLineCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.timeline{display:flex;flex-direction:column}.tl-step{display:flex;align-items:flex-start;gap:var(--Size-3, 12px)}.tl-step__marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.tl-step__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.2s, border-color 0.2s}.tl-step--pending .tl-step__icon{background:var(--Gray-Gray-100, #e6eaf2);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.tl-step--active .tl-step__icon{background:var(--Neutral-White, #ffffff);border:2px solid var(--Primary-Primary-500, #f49a3d);box-shadow:0 0 0 4px var(--Primary-Primary-100, #fde9d0)}.tl-step--done .tl-step__icon{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.tl-step__dot{width:8px;height:8px;border-radius:50%;display:block}.tl-step--pending .tl-step__dot{background:var(--Gray-Gray-300, #a3abbf)}.tl-step--active .tl-step__dot{background:var(--Primary-Primary-500, #f49a3d)}.tl-step--done .tl-step__dot{background:var(--Neutral-White, #ffffff)}.tl-step__line{flex:1;width:2px;min-height:24px;margin:4px 0;background:var(--Gray-Gray-200, #c3c9d9)}.tl-step--done+.tl-step .tl-step__line,.tl-step--done .tl-step__line{background:var(--Primary-Primary-500, #f49a3d)}.tl-step__content{display:flex;flex-direction:column;gap:2px;padding-top:6px;padding-bottom:var(--Size-4, 16px)}.tl-step__label{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.tl-step--pending .tl-step__label{color:var(--Gray-Gray-400, #858ea6);font-weight:var(--font-weight-regular, 400)}.tl-step__subtitle{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
+const dropiTimeLineCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.timeline{display:flex;flex-direction:column}.tl-step{display:flex;align-items:flex-start;gap:var(--Size-3, 12px)}.tl-step__marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.tl-step__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.2s, border-color 0.2s}.tl-step--pending .tl-step__icon{background:var(--Gray-Gray-100, #e6eaf2);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.tl-step--active .tl-step__icon{background:var(--Neutral-White, #ffffff);border:2px solid var(--Primary-Primary-500, #f49a3d);box-shadow:0 0 0 4px var(--Primary-Primary-100, #fde9d0)}.tl-step--done .tl-step__icon{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.tl-step__dot{width:8px;height:8px;border-radius:50%;display:block}.tl-step--pending .tl-step__dot{background:var(--Gray-Gray-300, #a3abbf)}.tl-step--active .tl-step__dot{background:var(--Primary-Primary-500, #f49a3d)}.tl-step--done .tl-step__dot{background:var(--Neutral-White, #ffffff)}.tl-step__line{flex:1;width:2px;min-height:24px;margin:4px 0;background:var(--Gray-Gray-200, #c3c9d9)}.tl-step--done+.tl-step .tl-step__line,.tl-step--done .tl-step__line{background:var(--Primary-Primary-500, #f49a3d)}.tl-step__content{display:flex;flex-direction:column;gap:2px;padding-top:6px;padding-bottom:var(--Size-4, 16px)}.tl-step__label{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.tl-step--pending .tl-step__label{color:var(--Gray-Gray-400, #858ea6);font-weight:var(--font-weight-regular, 400)}.tl-step__subtitle{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
 const DropiTimeLine = class {
     constructor(hostRef) {
@@ -21,7 +21,7 @@ const DropiTimeLine = class {
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: '22a2f8ff7a33e892096c3aaf381e23b110ec6b0a', class: "timeline" }, steps.map((step, i) => {
+        return (h("div", { key: '99a4da366d7fd97258688711d51f5829f7b0a36f', class: "timeline" }, steps.map((step, i) => {
             const isLast = i === steps.length - 1;
             return (h("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, h("div", { class: "tl-step__marker" }, h("div", { class: "tl-step__icon" }, step.icon ? (h("dropi-icon", { name: step.icon, iconWidth: "16px", iconHeight: "16px", color: step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400' })) : (h("span", { class: "tl-step__dot" }))), !isLast && h("div", { class: "tl-step__line" })), h("div", { class: "tl-step__content" }, h("span", { class: "tl-step__label" }, step.label), step.subtitle && h("span", { class: "tl-step__subtitle" }, step.subtitle))));
         })));

package/dist/dropi-ui/dropi-time-line.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-time-line.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,~~4wDAA4wD~~,CAAC;;~~MCqBhyD~~,aAAa,GAAA,MAAA;;;;;IAEhB,KAAK,GAA4B,EAAE;AAE3C,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;AAClC,YAAA,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AAAI,YAAA,MAAM;AAAE,gBAAA,OAAO,EAAE;;;AAE1D,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE;;IAGzB,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW;QAE9B,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EAClB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;YACrB,MAAM,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AAErC,YAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA,SAAA,EAAY,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,EAAA,EACnF,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,YAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAC,MAAM,EAChB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,eAAe,EAAA,CACpH,KAEF,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAG,CAC9B,CACG,EACL,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,GAAG,CACrC,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC/C,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CACpE,CACF;SAET,CAAC,CACE;;;;;;;","names":[],"sources":["src/components/dropi-time-line/dropi-time-line.css?tag=dropi-time-line&encapsulation=shadow","src/components/dropi-time-line/dropi-time-line.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.timeline {\n display: flex;\n flex-direction: column;\n}\n\n.tl-step {\n display: flex;\n align-items: flex-start;\n gap: var(--Size-3, 12px);\n}\n\n/ ── Left column: icon + line ───────────────────────────── /\n.tl-step__marker {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n}\n\n.tl-step__icon {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.2s, border-color 0.2s;\n}\n\n.tl-step--pending .tl-step__icon {\n background: var(--Gray-Gray-100, #e6eaf2);\n border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n}\n\n.tl-step--active .tl-step__icon {\n background: var(--Neutral-White, #ffffff);\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n box-shadow: 0 0 0 4px var(--Primary-Primary-100, #fde9d0);\n}\n\n.tl-step--done .tl-step__icon {\n background: var(--Primary-Primary-500, #f49a3d);\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n.tl-step__dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n display: block;\n}\n\n.tl-step--pending .tl-step__dot {\n background: var(--Gray-Gray-300, #a3abbf);\n}\n\n.tl-step--active .tl-step__dot {\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.tl-step--done .tl-step__dot {\n background: var(--Neutral-White, #ffffff);\n}\n\n/ ── Vertical connector ─────────────────────────────────── /\n.tl-step__line {\n flex: 1;\n width: 2px;\n min-height: 24px;\n margin: 4px 0;\n background: var(--Gray-Gray-200, #c3c9d9);\n}\n\n.tl-step--done + .tl-step .tl-step__line,\n.tl-step--done .tl-step__line {\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n/ ── Content ────────────────────────────────────────────── /\n.tl-step__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding-top: 6px;\n padding-bottom: var(--Size-4, 16px);\n}\n\n.tl-step__label {\n font-size: var(--font-size-s, 12px);\n font-weight: var(--font-weight-bold, 700);\n color: var(--Gray-Gray-700, #32394d);\n}\n\n.tl-step--pending .tl-step__label {\n color: var(--Gray-Gray-400, #858ea6);\n font-weight: var(--font-weight-regular, 400);\n}\n\n.tl-step__subtitle {\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type TimelineStepStatus = 'pending' \| 'active' \| 'done';\n\nexport interface TimelineStep {\n status: TimelineStepStatus;\n label: string;\n icon?: string;\n id?: string;\n subtitle?: string;\n}\n\n/\n @component dropi-time-line\n * Vertical timeline showing ordered steps with status indicators.\n /\n@Component({\n tag: 'dropi-time-line',\n styleUrl: 'dropi-time-line.css',\n shadow: true,\n})\nexport class DropiTimeLine {\n /* Array of timeline steps. Pass as JSON string or array */\n @Prop() steps: TimelineStep[] \| string = [];\n\n private get parsedSteps(): TimelineStep[] {\n if (typeof this.steps === 'string') {\n try { return JSON.parse(this.steps); } catch { return []; }\n }\n return this.steps \|\| [];\n }\n\n render() {\n const steps = this.parsedSteps;\n\n return (\n <div class=\"timeline\">\n {steps.map((step, i) => {\n const isLast = i === steps.length - 1;\n\n return (\n <div class={{ 'tl-step': true, [`tl-step--${step.status}`]: true }} key={step.id \|\| i}>\n <div class=\"tl-step__marker\">\n <div class=\"tl-step__icon\">\n {step.icon ? (\n <dropi-icon\n name={step.icon}\n iconWidth=\"16px\"\n iconHeight=\"16px\"\n color={step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400'}\n />\n ) : (\n <span class=\"tl-step__dot\" />\n )}\n </div>\n {!isLast && <div class=\"tl-step__line\" />}\n </div>\n\n <div class=\"tl-step__content\">\n <span class=\"tl-step__label\">{step.label}</span>\n {step.subtitle && <span class=\"tl-step__subtitle\">{step.subtitle}</span>}\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-time-line.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,g2DAAg2D,CAAC;;MCqBp3D,aAAa,GAAA,MAAA;;;;;IAEhB,KAAK,GAA4B,EAAE;AAE3C,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;AAClC,YAAA,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AAAI,YAAA,MAAM;AAAE,gBAAA,OAAO,EAAE;;;AAE1D,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE;;IAGzB,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW;QAE9B,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EAClB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;YACrB,MAAM,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AAErC,YAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA,SAAA,EAAY,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,EAAA,EACnF,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,YAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAC,MAAM,EAChB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,GAAG,eAAe,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,eAAe,EAAA,CACpH,KAEF,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAG,CAC9B,CACG,EACL,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,GAAG,CACrC,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC/C,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CACpE,CACF;SAET,CAAC,CACE;;;;;;;","names":[],"sources":["src/components/dropi-time-line/dropi-time-line.css?tag=dropi-time-line&encapsulation=shadow","src/components/dropi-time-line/dropi-time-line.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n, ::before, ::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.timeline {\n display: flex;\n flex-direction: column;\n}\n\n.tl-step {\n display: flex;\n align-items: flex-start;\n gap: var(--Size-3, 12px);\n}\n\n/ ── Left column: icon + line ───────────────────────────── /\n.tl-step__marker {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n}\n\n.tl-step__icon {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.2s, border-color 0.2s;\n}\n\n.tl-step--pending .tl-step__icon {\n background: var(--Gray-Gray-100, #e6eaf2);\n border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n}\n\n.tl-step--active .tl-step__icon {\n background: var(--Neutral-White, #ffffff);\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n box-shadow: 0 0 0 4px var(--Primary-Primary-100, #fde9d0);\n}\n\n.tl-step--done .tl-step__icon {\n background: var(--Primary-Primary-500, #f49a3d);\n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\n.tl-step__dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n display: block;\n}\n\n.tl-step--pending .tl-step__dot {\n background: var(--Gray-Gray-300, #a3abbf);\n}\n\n.tl-step--active .tl-step__dot {\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.tl-step--done .tl-step__dot {\n background: var(--Neutral-White, #ffffff);\n}\n\n/ ── Vertical connector ─────────────────────────────────── /\n.tl-step__line {\n flex: 1;\n width: 2px;\n min-height: 24px;\n margin: 4px 0;\n background: var(--Gray-Gray-200, #c3c9d9);\n}\n\n.tl-step--done + .tl-step .tl-step__line,\n.tl-step--done .tl-step__line {\n background: var(--Primary-Primary-500, #f49a3d);\n}\n\n/ ── Content ────────────────────────────────────────────── /\n.tl-step__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding-top: 6px;\n padding-bottom: var(--Size-4, 16px);\n}\n\n.tl-step__label {\n font-size: var(--font-size-s, 12px);\n font-weight: var(--font-weight-bold, 700);\n color: var(--Gray-Gray-700, #32394d);\n}\n\n.tl-step--pending .tl-step__label {\n color: var(--Gray-Gray-400, #858ea6);\n font-weight: var(--font-weight-regular, 400);\n}\n\n.tl-step__subtitle {\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type TimelineStepStatus = 'pending' \| 'active' \| 'done';\n\nexport interface TimelineStep {\n status: TimelineStepStatus;\n label: string;\n icon?: string;\n id?: string;\n subtitle?: string;\n}\n\n/\n @component dropi-time-line\n * Vertical timeline showing ordered steps with status indicators.\n /\n@Component({\n tag: 'dropi-time-line',\n styleUrl: 'dropi-time-line.css',\n shadow: true,\n})\nexport class DropiTimeLine {\n /* Array of timeline steps. Pass as JSON string or array */\n @Prop() steps: TimelineStep[] \| string = [];\n\n private get parsedSteps(): TimelineStep[] {\n if (typeof this.steps === 'string') {\n try { return JSON.parse(this.steps); } catch { return []; }\n }\n return this.steps \|\| [];\n }\n\n render() {\n const steps = this.parsedSteps;\n\n return (\n <div class=\"timeline\">\n {steps.map((step, i) => {\n const isLast = i === steps.length - 1;\n\n return (\n <div class={{ 'tl-step': true, [`tl-step--${step.status}`]: true }} key={step.id \|\| i}>\n <div class=\"tl-step__marker\">\n <div class=\"tl-step__icon\">\n {step.icon ? (\n <dropi-icon\n name={step.icon}\n iconWidth=\"16px\"\n iconHeight=\"16px\"\n color={step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400'}\n />\n ) : (\n <span class=\"tl-step__dot\" />\n )}\n </div>\n {!isLast && <div class=\"tl-step__line\" />}\n </div>\n\n <div class=\"tl-step__content\">\n <span class=\"tl-step__label\">{step.label}</span>\n {step.subtitle && <span class=\"tl-step__subtitle\">{step.subtitle}</span>}\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-toast.entry.js CHANGED Viewed

@@ -1,6 +1,7 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
+import { L as LOTTIE_MAP } from './lottie-map.generated-BEs9gbju.js';
-const dropiToastCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.toast-container{position:fixed;z-index:var(--dropi-z-index-toast, 12000);display:flex;flex-direction:column;gap:8px;max-width:380px;width:100%;pointer-events:none}.toast-container--top-right{top:80px;right:0;padding:var(--Size-2, 8px)}.toast-container--top-left{top:80px;left:0;padding:var(--Size-2, 8px)}.toast-container--bottom-right{bottom:24px;right:0;padding:var(--Size-2, 8px);flex-direction:column-reverse}.toast-container--bottom-left{bottom:24px;left:0;padding:var(--Size-2, 8px);flex-direction:column-reverse}.toast-container--top-center{top:80px;left:50%;transform:translateX(-50%);padding:var(--Size-2, 8px)}.toast-container--bottom-center{bottom:24px;left:50%;transform:translateX(-50%);padding:var(--Size-2, 8px);flex-direction:column-reverse}.toast-wrapper{pointer-events:auto;animation:toast-in 0.28s ease;transition:opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease;overflow:hidden;max-height:200px}.toast-wrapper--leaving{opacity:0;transform:translateX(20px);max-height:0;pointer-events:none}@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.toast{position:relative;display:flex;align-items:flex-start;border-radius:var(--Border-2,8px);background:var(--Neutral-White, #ffffff);box-shadow:0.5px -1px 7px 0px rgba(0, 0, 0, 0.06), 0px 4px 20px 0px rgba(0, 0, 0, 0.12);border-left:var(--Size-2, 8px) solid;overflow:hidden;min-width:300px}.toast--success{border-color:var(--Success-Success-500,#34c38f)}.toast--error{border-color:var(--Error-Error-500,#f46a6b)}.toast--warn{border-color:var(--Warning-Warning-500,#f1b44c)}.toast--info{border-color:var(--Info-Info-500,#50a5f1)}.toast-content{display:flex;flex-direction:row;align-items:flex-start;padding:var(--Size-5) var(--Size-5) var(--Size-5) calc(var(--Size-5) - var(--Size-2, 8px));gap:var(--Size-4, 16px)}.lottie-img{width:50px;height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.lottie-player-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:flex;align-items:center;justify-content:center}lottie-player{width:100%;height:100%;display:block}.info-container{flex:1;min-width:0;align-self:center;display:flex;flex-direction:column;gap:var(--Size-1, 4px)}.title{margin:0;font-size:var(--font-size-l,18px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-700,#32394d);line-height:1.1;text-align:left;max-width:250px}.description{margin:0;font-size:var(--font-size-s,14px);color:var(--Gray-Gray-500, #69738c);line-height:1.4;text-align:left;max-width:250px}.toast-close{position:absolute;top:18px;right:10px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.toast-close:hover{opacity:0.7}`;
+const dropiToastCss = () => `:host{display:contents;font-family:var(--font-family-01, 'Inter', sans-serif)}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.dropi-toast-container{position:fixed;z-index:var(--dropi-z-index-toast, 12000);display:flex;flex-direction:column;gap:8px;max-width:380px;width:100%;pointer-events:none;box-sizing:border-box}.dropi-toast-container--top-right{top:80px;right:0;padding:var(--Size-2, 8px)}.dropi-toast-container--top-left{top:80px;left:0;padding:var(--Size-2, 8px)}.dropi-toast-container--bottom-right{bottom:24px;right:0;padding:var(--Size-2, 8px);flex-direction:column-reverse}.dropi-toast-container--bottom-left{bottom:24px;left:0;padding:var(--Size-2, 8px);flex-direction:column-reverse}.dropi-toast-container--top-center{top:80px;left:50%;transform:translateX(-50%);padding:var(--Size-2, 8px)}.dropi-toast-container--bottom-center{bottom:24px;left:50%;transform:translateX(-50%);padding:var(--Size-2, 8px);flex-direction:column-reverse}.dropi-toast-wrapper{pointer-events:auto;animation:dropi-toast-in 0.28s ease;transition:opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease;overflow:hidden;max-height:200px;box-sizing:border-box}.dropi-toast-wrapper--leaving{opacity:0;transform:translateX(20px);max-height:0;pointer-events:none}@keyframes dropi-toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.dropi-toast-item{position:relative;display:flex;align-items:center;border-radius:8px;background:#ffffff;box-shadow:0.5px -1px 7px 0px rgba(0,0,0,0.06), 0px 4px 20px 0px rgba(0,0,0,0.12);border-left:8px solid;overflow:hidden;min-width:300px;box-sizing:border-box}.dropi-toast-item--success{border-color:var(--Success-Success-500,#34c38f)}.dropi-toast-item--error{border-color:var(--Error-Error-500,#f46a6b)}.dropi-toast-item--warn{border-color:var(--Warning-Warning-500,#f1b44c)}.dropi-toast-item--info{border-color:var(--Info-Info-500,#50a5f1)}.dropi-toast-content{display:flex;flex-direction:row;align-items:center;padding:16px 16px 16px 8px;gap:16px;box-sizing:border-box;flex:1}.dropi-toast-lottie{width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.dropi-toast-lottie lottie-player{display:block;width:56px;height:56px;flex-shrink:0}.dropi-toast-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--Size-1, 4px)}.dropi-toast-title{margin:0;font-size:var(--font-size-l,18px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-700,#32394d);line-height:1.1;text-align:left;max-width:250px}.dropi-toast-detail{margin:0;font-size:var(--font-size-s,14px);color:var(--Gray-Gray-500,#69738c);line-height:1.4;text-align:left;max-width:250px}.dropi-toast-close{position:absolute;top:18px;right:10px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.dropi-toast-close:hover{opacity:0.7}`;
 const DropiToast = class {
     constructor(hostRef) {
@@ -36,17 +37,14 @@ const DropiToast = class {
             this.items = this.items.filter(i => i.msg.id !== id);
         }, 320);
     }
-    lottieMap = {
-        success: '/assets/lottie-files/success.json',
-        error: '/assets/lottie-files/failure.json',
-        warn: '/assets/lottie-files/warning.json',
-        info: '/assets/lottie-files/question.json',
+    severityToLottieKey = {
+        success: 'success',
+        error: 'error',
+        warn: 'warning',
+        info: 'question',
     };
-    getLottieHtml(severity) {
-        return `<lottie-player src="${this.lottieMap[severity]}" background="transparent" speed="1" loop autoplay></lottie-player>`;
-    }
     render() {
-        return (h("div", { key: '962972e53e84a968b538feb28c2588f9051276ff', class: `toast-container toast-container--${this.position}` }, (this.items ?? []).map(item => (h("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, h("div", { class: `toast toast--${item.msg.severity}` }, h("div", { class: "toast-content" }, h("div", { class: "lottie-img" }, h("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), h("div", { class: "info-container" }, h("p", { class: "title" }, item.msg.summary), item.msg.detail && h("p", { class: "description" }, item.msg.detail))), item.msg.closable && (h("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, h("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-400" })))))))));
+        return (h("div", { key: '97766971df05e40548f0711b172beb87013ddba4', class: `dropi-toast-container dropi-toast-container--${this.position}` }, (this.items ?? []).map(item => (h("div", { key: item.msg.id, class: { 'dropi-toast-wrapper': true, 'dropi-toast-wrapper--leaving': item.leaving } }, h("div", { class: `dropi-toast-item dropi-toast-item--${item.msg.severity}` }, h("div", { class: "dropi-toast-content" }, h("div", { class: "dropi-toast-lottie" }, h("lottie-player", { key: item.msg.severity, src: LOTTIE_MAP[this.severityToLottieKey[item.msg.severity]], background: "transparent", speed: "1", loop: true, autoplay: true })), h("div", { class: "dropi-toast-info" }, h("p", { class: "dropi-toast-title" }, item.msg.summary), item.msg.detail && h("p", { class: "dropi-toast-detail" }, item.msg.detail))), item.msg.closable && (h("button", { class: "dropi-toast-close", onClick: () => this.remove(item.msg.id) }, h("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-400" })))))))));
     }
 };
 DropiToast.style = dropiToastCss();

package/dist/dropi-ui/dropi-toast.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-toast.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-toast/dropi-toast.css?tag=dropi-toast&encapsulation=shadow","src/components/dropi-toast/dropi-toast.tsx"],"sourcesContent":[":host { display: contents; }\n, ::before, ::after { box-sizing: border-box; }\n\n.toast-container { position: fixed; z-index: var(--dropi-z-index-toast, 12000); display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; }\n.toast-container--top-right { top: 80px; right: 0; padding: var(--Size-2, 8px); }\n.toast-container--top-left { top: 80px; left: 0; padding: var(--Size-2, 8px); }\n.toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n.toast-container--bottom-left { bottom: 24px; left: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n.toast-container--top-center { top: 80px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); }\n.toast-container--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n\n.toast-wrapper { pointer-events: auto; animation: toast-in 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease; overflow: hidden; max-height: 200px; }\n.toast-wrapper--leaving { opacity: 0; transform: translateX(20px); max-height: 0; pointer-events: none; }\n@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }\n\n.toast { position: relative; display: flex; align-items: flex-start; border-radius: var(--Border-2,8px); background: var(--Neutral-White, #ffffff); box-shadow: 0.5px -1px 7px 0px rgba(0, 0, 0, 0.06), 0px 4px 20px 0px rgba(0, 0, 0, 0.12); border-left: var(--Size-2, 8px) solid; overflow: hidden; min-width: 300px; }\n.toast--success { border-color: var(--Success-Success-500,#34c38f); }\n.toast--error { border-color: var(--Error-Error-500,#f46a6b); }\n.toast--warn { border-color: var(--Warning-Warning-500,#f1b44c); }\n.toast--info { border-color: var(--Info-Info-500,#50a5f1); }\n\n.toast-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: var(--Size-5) var(--Size-5) var(--Size-5) calc(var(--Size-5) - var(--Size-2, 8px));\n gap: var(--Size-4, 16px);\n}\n\n.lottie-img {\n width: 50px;\n height: 50px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n.lottie-player-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nlottie-player {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n.info-container { flex: 1; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: var(--Size-1, 4px); }\n.title { margin: 0; font-size: var(--font-size-l,18px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-700,#32394d); line-height: 1.1; text-align: left; max-width: 250px; }\n.description { margin: 0; font-size: var(--font-size-s,14px); color: var(--Gray-Gray-500, #69738c); line-height: 1.4; text-align: left; max-width: 250px; }\n\n.toast-close { position: absolute; top: 18px; right: 10px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.toast-close:hover { opacity: 0.7; }\n","import { Component, Prop, State, Method, h } from '@stencil/core';\n\nexport type ToastSeverity = 'success' \| 'error' \| 'warn' \| 'info';\n\nexport interface ToastMessage {\n id?: string;\n /* Visual style and icon /\n severity: ToastSeverity;\n /* Bold title /\n summary: string;\n /* Optional body text /\n detail?: string;\n /* Whether to show a close button. Default: true /\n closable?: boolean;\n /* Auto-close after N ms. 0 = manual only. Default: uses component `life` prop /\n life?: number;\n}\n\ninterface ToastItem {\n msg: ToastMessage;\n leaving: boolean;\n timer?: any;\n}\n\n/\n @component dropi-toast\n * Global toast notification stack. Place once in the app root, call show() from JS.\n \n @example\n * const t = document.querySelector('dropi-toast');\n * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });\n /\n@Component({\n tag: 'dropi-toast',\n styleUrl: 'dropi-toast.css',\n shadow: true,\n})\nexport class DropiToast {\n /* Toast position /\n @Prop() position: 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' \| 'top-center' \| 'bottom-center' = 'top-right';\n /* Default auto-close ms (0 = manual) /\n @Prop() life: number = 3000;\n\n @State() private items: ToastItem[] = [];\n private idCounter = 0;\n\n /* Show a toast /\n @Method()\n async show(msg: ToastMessage) {\n console.log('DropiToast show() called with:', msg);\n const id = msg.id ?? `t${++this.idCounter}`;\n const item: ToastItem = { msg: { ...msg, id, closable: msg.closable ?? true }, leaving: false };\n this.items = [...(this.items \|\| []), item];\n const ms = msg.life !== undefined ? msg.life : this.life;\n if (ms > 0) item.timer = setTimeout(() => this.remove(id), ms);\n }\n\n /* Remove all toasts */\n @Method()\n async clear() {\n (this.items \|\| []).forEach(i => {\n if (i.timer) clearTimeout(i.timer);\n });\n this.items = [];\n }\n\n private remove(id: string) {\n this.items = this.items.map(i => (i.msg.id === id ? { ...i, leaving: true } : i));\n setTimeout(() => {\n this.items = this.items.filter(i => i.msg.id !== id);\n }, 320);\n }\n\n private readonly lottieMap: Record<ToastSeverity, string> = {\n success: '/assets/lottie-files/success.json',\n error: '/assets/lottie-files/failure.json',\n warn: '/assets/lottie-files/warning.json',\n info: '/assets/lottie-files/question.json',\n };\n\n private getLottieHtml(severity: ToastSeverity): string {\n return `<lottie-player src=\"${this.lottieMap[severity]}\" background=\"transparent\" speed=\"1\" loop autoplay></lottie-player>`;\n }\n\n render() {\n return (\n <div class={`toast-container toast-container--${this.position}`}>\n {(this.items ?? []).map(item => (\n <div key={item.msg.id} class={{ 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving }}>\n <div class={`toast toast--${item.msg.severity}`}>\n <div class=\"toast-content\">\n <div class=\"lottie-img\">\n <div class=\"lottie-player-container\" innerHTML={this.getLottieHtml(item.msg.severity)}></div>\n </div>\n <div class=\"info-container\">\n <p class=\"title\">{item.msg.summary}</p>\n {item.msg.detail && <p class=\"description\">{item.msg.detail}</p>}\n </div>\n </div>\n {item.msg.closable && (\n <button class=\"toast-close\" onClick={() => this.remove(item.msg.id!)}>\n <dropi-icon name=\"Close-small\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-400\" />\n </button>\n )}\n </div>\n </div>\n ))}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-toast.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-toast/dropi-toast.css?tag=dropi-toast","src/components/dropi-toast/dropi-toast.tsx"],"sourcesContent":[":host { display: contents; font-family: var(--font-family-01, 'Inter', sans-serif); }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.dropi-toast-container { position: fixed; z-index: var(--dropi-z-index-toast, 12000); display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; box-sizing: border-box; }\n.dropi-toast-container--top-right { top: 80px; right: 0; padding: var(--Size-2, 8px); }\n.dropi-toast-container--top-left { top: 80px; left: 0; padding: var(--Size-2, 8px); }\n.dropi-toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n.dropi-toast-container--bottom-left { bottom: 24px; left: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n.dropi-toast-container--top-center { top: 80px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); }\n.dropi-toast-container--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); flex-direction: column-reverse; }\n\n.dropi-toast-wrapper { pointer-events: auto; animation: dropi-toast-in 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease; overflow: hidden; max-height: 200px; box-sizing: border-box; }\n.dropi-toast-wrapper--leaving { opacity: 0; transform: translateX(20px); max-height: 0; pointer-events: none; }\n@keyframes dropi-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }\n\n.dropi-toast-item { position: relative; display: flex; align-items: center; border-radius: 8px; background: #ffffff; box-shadow: 0.5px -1px 7px 0px rgba(0,0,0,0.06), 0px 4px 20px 0px rgba(0,0,0,0.12); border-left: 8px solid; overflow: hidden; min-width: 300px; box-sizing: border-box; }\n.dropi-toast-item--success { border-color: var(--Success-Success-500,#34c38f); }\n.dropi-toast-item--error { border-color: var(--Error-Error-500,#f46a6b); }\n.dropi-toast-item--warn { border-color: var(--Warning-Warning-500,#f1b44c); }\n.dropi-toast-item--info { border-color: var(--Info-Info-500,#50a5f1); }\n\n.dropi-toast-content {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 16px 16px 16px 8px;\n gap: 16px;\n box-sizing: border-box;\n flex: 1;\n}\n\n.dropi-toast-lottie {\n width: 56px;\n height: 56px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.dropi-toast-lottie lottie-player {\n display: block;\n width: 56px;\n height: 56px;\n flex-shrink: 0;\n}\n\n.dropi-toast-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--Size-1, 4px); }\n.dropi-toast-title { margin: 0; font-size: var(--font-size-l,18px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-700,#32394d); line-height: 1.1; text-align: left; max-width: 250px; }\n.dropi-toast-detail { margin: 0; font-size: var(--font-size-s,14px); color: var(--Gray-Gray-500,#69738c); line-height: 1.4; text-align: left; max-width: 250px; }\n\n.dropi-toast-close { position: absolute; top: 18px; right: 10px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.dropi-toast-close:hover { opacity: 0.7; }\n","import { Component, Prop, State, Method, h } from '@stencil/core';\nimport { LOTTIE_MAP } from '../../utils/lottie-map.generated';\n\nexport type ToastSeverity = 'success' \| 'error' \| 'warn' \| 'info';\n\nexport interface ToastMessage {\n id?: string;\n /** Visual style and icon /\n severity: ToastSeverity;\n /* Bold title /\n summary: string;\n /* Optional body text /\n detail?: string;\n /* Whether to show a close button. Default: true /\n closable?: boolean;\n /* Auto-close after N ms. 0 = manual only. Default: uses component `life` prop /\n life?: number;\n}\n\ninterface ToastItem {\n msg: ToastMessage;\n leaving: boolean;\n timer?: any;\n}\n\n/\n @component dropi-toast\n * Global toast notification stack. Place once in the app root, call show() from JS.\n \n @example\n * const t = document.querySelector('dropi-toast');\n * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });\n /\n@Component({\n tag: 'dropi-toast',\n styleUrl: 'dropi-toast.css',\n shadow: false,\n})\nexport class DropiToast {\n /* Toast position /\n @Prop() position: 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' \| 'top-center' \| 'bottom-center' = 'top-right';\n /* Default auto-close ms (0 = manual) /\n @Prop() life: number = 3000;\n\n @State() private items: ToastItem[] = [];\n private idCounter = 0;\n\n /* Show a toast /\n @Method()\n async show(msg: ToastMessage) {\n console.log('DropiToast show() called with:', msg);\n const id = msg.id ?? `t${++this.idCounter}`;\n const item: ToastItem = { msg: { ...msg, id, closable: msg.closable ?? true }, leaving: false };\n this.items = [...(this.items \|\| []), item];\n const ms = msg.life !== undefined ? msg.life : this.life;\n if (ms > 0) item.timer = setTimeout(() => this.remove(id), ms);\n }\n\n /* Remove all toasts */\n @Method()\n async clear() {\n (this.items \|\| []).forEach(i => {\n if (i.timer) clearTimeout(i.timer);\n });\n this.items = [];\n }\n\n private remove(id: string) {\n this.items = this.items.map(i => (i.msg.id === id ? { ...i, leaving: true } : i));\n setTimeout(() => {\n this.items = this.items.filter(i => i.msg.id !== id);\n }, 320);\n }\n\n private readonly severityToLottieKey: Record<ToastSeverity, string> = {\n success: 'success',\n error: 'error',\n warn: 'warning',\n info: 'question',\n };\n\n render() {\n return (\n <div class={`dropi-toast-container dropi-toast-container--${this.position}`}>\n {(this.items ?? []).map(item => (\n <div key={item.msg.id} class={{ 'dropi-toast-wrapper': true, 'dropi-toast-wrapper--leaving': item.leaving }}>\n <div class={`dropi-toast-item dropi-toast-item--${item.msg.severity}`}>\n <div class=\"dropi-toast-content\">\n <div class=\"dropi-toast-lottie\">\n <lottie-player\n key={item.msg.severity}\n src={LOTTIE_MAP[this.severityToLottieKey[item.msg.severity]]}\n background=\"transparent\"\n speed=\"1\"\n loop\n autoplay\n />\n </div>\n <div class=\"dropi-toast-info\">\n <p class=\"dropi-toast-title\">{item.msg.summary}</p>\n {item.msg.detail && <p class=\"dropi-toast-detail\">{item.msg.detail}</p>}\n </div>\n </div>\n {item.msg.closable && (\n <button class=\"dropi-toast-close\" onClick={() => this.remove(item.msg.id!)}>\n <dropi-icon name=\"Close-small\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-400\" />\n </button>\n )}\n </div>\n </div>\n ))}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-tooltip-v2.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
-const dropiTooltipCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.tooltip-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.tooltip-bubble{position:absolute;z-index:var(--dropi-z-index-overlay, 11000);background:var(--Gray-Gray-800);color:var(--Neutral-White, #ffffff);font-size:var(--font-size-s,14px);line-height:1.5;padding:8px 12px;border-radius:8px;white-space:normal;pointer-events:none;opacity:0;transition:opacity 0.15s ease, transform 0.15s ease;word-break:break-word;box-shadow:var(--Shadow-medium);text-align:left;width:max-content}.tooltip-bubble--visible{opacity:1}.tooltip-bubble--top{bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}.tooltip-bubble--bottom{top:calc(100% + 12px);left:50%;transform:translateX(-50%)}.tooltip-bubble--left{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.tooltip-bubble--right{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.tooltip-arrow{position:absolute;width:12px;height:6px}.tooltip-arrow::before{content:'';position:absolute;width:0;height:0}.tooltip-arrow--top{top:100%;left:50%;transform:translateX(-50%)}.tooltip-arrow--top::before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--Gray-Gray-800)}.tooltip-arrow--bottom{bottom:100%;left:50%;transform:translateX(-50%)}.tooltip-arrow--bottom::before{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--Gray-Gray-800)}.tooltip-arrow--left{left:100%;top:50%;transform:translateY(-50%)}.tooltip-arrow--left::before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid var(--Gray-Gray-800)}.tooltip-arrow--right{right:100%;top:50%;transform:translateY(-50%)}.tooltip-arrow--right::before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--Gray-Gray-800)}`;
+const dropiTooltipCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.tooltip-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.tooltip-bubble{position:absolute;z-index:var(--dropi-z-index-overlay, 11000);background:var(--Gray-Gray-800);color:var(--Neutral-White, #ffffff);font-size:var(--font-size-s,14px);line-height:1.5;padding:8px 12px;border-radius:8px;white-space:normal;pointer-events:none;opacity:0;transition:opacity 0.15s ease, transform 0.15s ease;word-break:break-word;box-shadow:var(--Shadow-medium);text-align:left;width:max-content}.tooltip-bubble--visible{opacity:1}.tooltip-bubble--top{bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}.tooltip-bubble--bottom{top:calc(100% + 12px);left:50%;transform:translateX(-50%)}.tooltip-bubble--left{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.tooltip-bubble--right{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.tooltip-arrow{position:absolute;width:12px;height:6px}.tooltip-arrow::before{content:'';position:absolute;width:0;height:0}.tooltip-arrow--top{top:100%;left:50%;transform:translateX(-50%)}.tooltip-arrow--top::before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--Gray-Gray-800)}.tooltip-arrow--bottom{bottom:100%;left:50%;transform:translateX(-50%)}.tooltip-arrow--bottom::before{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--Gray-Gray-800)}.tooltip-arrow--left{left:100%;top:50%;transform:translateY(-50%)}.tooltip-arrow--left::before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid var(--Gray-Gray-800)}.tooltip-arrow--right{right:100%;top:50%;transform:translateY(-50%)}.tooltip-arrow--right::before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--Gray-Gray-800)}`;
 const DropiTooltipV2 = class {
     constructor(hostRef) {
@@ -116,12 +116,12 @@ const DropiTooltipV2 = class {
         const bubbleStyle = { maxWidth: this.maxWidth };
         if (this.minWidth)
             bubbleStyle.minWidth = this.minWidth;
-        return (h("div", { key: 'e2ce31df52e00568920e754904b1f5910ff4c8ba', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (h("dropi-icon", { key: 'aa3213451bcfb60561043b0c3854bb20c3a4703a', name: this.iconName, iconWidth: `${this.iconSize}px`, iconHeight: `${this.iconSize}px`, color: this.iconColor })), h("slot", { key: '5ce4929e6f96d4c605d149a970aba1746e82078a' }), this.displayContent && (h("div", { key: '66a1193abf25ce4161ec35f1ca0c344ec418cce8', class: {
+        return (h("div", { key: 'a112b58703e2ff09e966d7bd5a1f2d94a480ea34', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (h("dropi-icon", { key: 'd9cc5fa8203e7eb3e1080bf7f44386cf3c246712', name: this.iconName, iconWidth: `${this.iconSize}px`, iconHeight: `${this.iconSize}px`, color: this.iconColor })), h("slot", { key: '2998dec714338b56b013964d17b6232580be14f0' }), this.displayContent && (h("div", { key: 'c4fd7685ecfb70d10eabb5bb204f2f44939d7e27', class: {
                 'tooltip-bubble': true,
                 [`tooltip-bubble--${this.position}`]: true,
                 [`tooltip-bubble--arrow-${this.arrowPosition}`]: true,
                 'tooltip-bubble--visible': this.visible,
-            }, style: bubbleStyle, role: "tooltip" }, this.showX && (h("button", { key: '168741ebb1986f7235aee5be58695ae7cfacfe7b', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, h("dropi-icon", { key: 'c9154dada59cced1056f24689591f0fead22328f', name: "Close-small", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && h("strong", { key: 'cd432eb19d7616f50d27613b55c191d59f70732e', class: "tooltip-title" }, this.title), this.label && !this.text && h("span", { key: 'c443cab1372947d0219a7384f491184fb1a7c5b3', class: "tooltip-label" }, this.label), this.text && h("span", { key: 'ea5dafb67ec9533052a66cf045b288cbefdf9d69' }, this.text), h("span", { key: '977257d29af4688c8a264685a1687c048faac9e5', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+            }, style: bubbleStyle, role: "tooltip" }, this.showX && (h("button", { key: '3dbbd89a47c793fac1d34ef4278452ff8ca51d5f', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, h("dropi-icon", { key: 'd77048bd4c71de51d3e4db5e88f3d80f8d8693b9', name: "Close-small", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && h("strong", { key: 'd4ff1fd39e0aa80fff9183f7c3b4d85ab71cbcb6', class: "tooltip-title" }, this.title), this.label && !this.text && h("span", { key: 'ffb27d3a0b9649cc6a54d096cb889c13d1233724', class: "tooltip-label" }, this.label), this.text && h("span", { key: '845a5bed4ada40307769c7c274a061b1308b76d7' }, this.text), h("span", { key: '1bc5ef70a8af3b9fe3cb27413e2aad98b0863f6f', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
     }
 };
 DropiTooltipV2.style = dropiTooltipCss();

package/dist/dropi-ui/dropi-tooltip-v2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-tooltip-v2.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-tooltip-v2/dropi-tooltip.css?tag=dropi-tooltip-v2&encapsulation=shadow","src/components/dropi-tooltip-v2/dropi-tooltip.tsx"],"sourcesContent":[":host { display: inline-block; }\n, ::before, ::after { box-sizing: border-box; }\n\n.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }\n\n.tooltip-bubble {\n position: absolute; z-index: var(--dropi-z-index-overlay, 11000);\n background: var(--Gray-Gray-800); color: var(--Neutral-White, #ffffff);\n font-size: var(--font-size-s,14px); line-height: 1.5;\n padding: 8px 12px; border-radius: 8px;\n white-space: normal; pointer-events: none;\n opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;\n word-break: break-word;\n box-shadow: var(--Shadow-medium);\n text-align: left;\n width: max-content;\n}\n.tooltip-bubble--visible { opacity: 1; }\n\n.tooltip-bubble--top { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }\n.tooltip-bubble--bottom { top: calc(100% + 12px); left: 50%; transform: translateX(-50%); }\n.tooltip-bubble--left { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }\n.tooltip-bubble--right { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }\n\n.tooltip-arrow { position: absolute; width: 12px; height: 6px; }\n.tooltip-arrow::before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n}\n\n.tooltip-arrow--top {\n top: 100%; left: 50%; transform: translateX(-50%);\n}\n.tooltip-arrow--top::before {\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid var(--Gray-Gray-800);\n}\n\n.tooltip-arrow--bottom {\n bottom: 100%; left: 50%; transform: translateX(-50%);\n}\n.tooltip-arrow--bottom::before {\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid var(--Gray-Gray-800);\n}\n\n.tooltip-arrow--left {\n left: 100%; top: 50%; transform: translateY(-50%);\n}\n.tooltip-arrow--left::before {\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-left: 6px solid var(--Gray-Gray-800);\n}\n\n.tooltip-arrow--right {\n right: 100%; top: 50%; transform: translateY(-50%);\n}\n.tooltip-arrow--right::before {\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 6px solid var(--Gray-Gray-800);\n}\n","import { Component, Prop, State, h } from '@stencil/core';\n\nexport type TooltipPosition = 'top' \| 'bottom' \| 'left' \| 'right';\nexport type TooltipTrigger = 'hover' \| 'click' \| 'focus' \| 'timeout' \| 'static' \| 'hidden';\nexport type ArrowPosition = 'start' \| 'center' \| 'end';\n\n/\n @component dropi-tooltip\n * Wraps content and shows a tooltip bubble on hover/focus.\n \n @example\n * <dropi-tooltip-v2 text=\"Más información\" position=\"top\">\n * <dropi-button text=\"Hover\" />\n * </dropi-tooltip-v2>\n /\n@Component({\n tag: 'dropi-tooltip-v2',\n styleUrl: 'dropi-tooltip.css',\n shadow: true,\n})\nexport class DropiTooltipV2 {\n /* Tooltip text /\n @Prop() text: string = '';\n /* Tooltip title (bold, shown with label) /\n @Prop() title: string = '';\n /* Tooltip label (shown below title) /\n @Prop() label: string = '';\n /* Position: top \| bottom \| left \| right /\n @Prop() position: TooltipPosition = 'bottom';\n /* Position of the arrow: start \| center \| end (matches Angular `arrowPosition`) /\n @Prop() arrowPosition: ArrowPosition = 'center';\n /* Trigger: hover \| click \| focus \| timeout \| static \| hidden /\n @Prop({ mutable: true }) trigger: TooltipTrigger = 'hover';\n /* Max CSS width of the bubble /\n @Prop() maxWidth: string = '280px';\n /* Min CSS width of the bubble (matches Angular `minWidth`) /\n @Prop() minWidth: string = '300px';\n /* Delay in ms before showing /\n @Prop() showDelay: number = 0;\n /* Disable the tooltip completely (matches Angular `disabled`) /\n @Prop() disabled: boolean = false;\n /* Show the trigger icon (matches Angular `showIcon`) /\n @Prop() showIcon: boolean = true;\n /* Show the close (X) button inside the bubble (matches Angular `showX`) /\n @Prop({ mutable: true }) showX: boolean = false;\n /* Icon name from the dropi-icon sprite (matches Angular `iconName`) /\n @Prop() iconName: string = 'Tooltip';\n /* Icon color token or hex (matches Angular `iconColor`) /\n @Prop() iconColor: string = '#7B8190';\n /* Icon size in px without unit (matches Angular `iconSize`) */\n @Prop() iconSize: string = '14';\n\n @State() private visible: boolean = false;\n private showTimer: any = null;\n private timeoutTimer: any = null;\n\n componentDidLoad() {\n if (this.trigger === 'static') this.show();\n if (this.trigger === 'timeout') this.showWithTimeout();\n }\n\n private show = () => {\n if (this.disabled \|\| this.trigger === 'hidden') return;\n const content = this.text \|\| this.title \|\| this.label;\n if (!content.trim()) return;\n if (this.showDelay > 0) {\n this.showTimer = setTimeout(() => { this.visible = true; }, this.showDelay);\n } else {\n this.visible = true;\n }\n };\n\n private hide = () => {\n if (this.showTimer) { clearTimeout(this.showTimer); this.showTimer = null; }\n if (this.timeoutTimer) { clearTimeout(this.timeoutTimer); this.timeoutTimer = null; }\n this.visible = false;\n };\n\n private showWithTimeout() {\n this.show();\n this.timeoutTimer = setTimeout(() => this.hide(), 6000);\n }\n\n private handleMouseEnter = () => {\n if (this.trigger !== 'hover') return;\n this.show();\n };\n\n private handleMouseLeave = () => {\n if (this.trigger !== 'hover') return;\n setTimeout(() => this.hide(), 10);\n };\n\n private handleClick = () => {\n if (this.trigger !== 'click') return;\n this.visible ? this.hide() : this.show();\n };\n\n private handleFocusin = () => {\n if (this.trigger !== 'focus') return;\n this.show();\n };\n\n private handleFocusout = () => {\n if (this.trigger !== 'focus') return;\n this.hide();\n };\n\n private handleClose = () => {\n if (this.trigger === 'static') {\n this.trigger = 'hover';\n this.showX = false;\n }\n this.hide();\n };\n\n private get displayContent(): string {\n if (this.text) return this.text;\n if (this.title && this.label) return `${this.title}\\n${this.label}`;\n return this.title \|\| this.label \|\| '';\n }\n\n render() {\n const bubbleStyle: any = { maxWidth: this.maxWidth };\n if (this.minWidth) bubbleStyle.minWidth = this.minWidth;\n\n return (\n <div\n class=\"tooltip-wrapper\"\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleClick}\n onFocusin={this.handleFocusin}\n onFocusout={this.handleFocusout}\n >\n {this.showIcon && (\n <dropi-icon\n name={this.iconName}\n iconWidth={`${this.iconSize}px`}\n iconHeight={`${this.iconSize}px`}\n color={this.iconColor}\n />\n )}\n <slot />\n\n {this.displayContent && (\n <div\n class={{\n 'tooltip-bubble': true,\n [`tooltip-bubble--${this.position}`]: true,\n [`tooltip-bubble--arrow-${this.arrowPosition}`]: true,\n 'tooltip-bubble--visible': this.visible,\n }}\n style={bubbleStyle}\n role=\"tooltip\"\n >\n {this.showX && (\n <button class=\"tooltip-close\" onClick={this.handleClose} aria-label=\"Cerrar\">\n <dropi-icon name=\"Close-small\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Gray-Gray-500\" />\n </button>\n )}\n {this.title && !this.text && <strong class=\"tooltip-title\">{this.title}</strong>}\n {this.label && !this.text && <span class=\"tooltip-label\">{this.label}</span>}\n {this.text && <span>{this.text}</span>}\n <span class={`tooltip-arrow tooltip-arrow--${this.position}`} />\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-tooltip-v2.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-tooltip-v2/dropi-tooltip.css?tag=dropi-tooltip-v2&encapsulation=shadow","src/components/dropi-tooltip-v2/dropi-tooltip.tsx"],"sourcesContent":[":host { display: inline-block; }\n, ::before, ::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }\n\n.tooltip-bubble {\n position: absolute; z-index: var(--dropi-z-index-overlay, 11000);\n background: var(--Gray-Gray-800); color: var(--Neutral-White, #ffffff);\n font-size: var(--font-size-s,14px); line-height: 1.5;\n padding: 8px 12px; border-radius: 8px;\n white-space: normal; pointer-events: none;\n opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;\n word-break: break-word;\n box-shadow: var(--Shadow-medium);\n text-align: left;\n width: max-content;\n}\n.tooltip-bubble--visible { opacity: 1; }\n\n.tooltip-bubble--top { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }\n.tooltip-bubble--bottom { top: calc(100% + 12px); left: 50%; transform: translateX(-50%); }\n.tooltip-bubble--left { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }\n.tooltip-bubble--right { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }\n\n.tooltip-arrow { position: absolute; width: 12px; height: 6px; }\n.tooltip-arrow::before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n}\n\n.tooltip-arrow--top {\n top: 100%; left: 50%; transform: translateX(-50%);\n}\n.tooltip-arrow--top::before {\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid var(--Gray-Gray-800);\n}\n\n.tooltip-arrow--bottom {\n bottom: 100%; left: 50%; transform: translateX(-50%);\n}\n.tooltip-arrow--bottom::before {\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid var(--Gray-Gray-800);\n}\n\n.tooltip-arrow--left {\n left: 100%; top: 50%; transform: translateY(-50%);\n}\n.tooltip-arrow--left::before {\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-left: 6px solid var(--Gray-Gray-800);\n}\n\n.tooltip-arrow--right {\n right: 100%; top: 50%; transform: translateY(-50%);\n}\n.tooltip-arrow--right::before {\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 6px solid var(--Gray-Gray-800);\n}\n","import { Component, Prop, State, h } from '@stencil/core';\n\nexport type TooltipPosition = 'top' \| 'bottom' \| 'left' \| 'right';\nexport type TooltipTrigger = 'hover' \| 'click' \| 'focus' \| 'timeout' \| 'static' \| 'hidden';\nexport type ArrowPosition = 'start' \| 'center' \| 'end';\n\n/\n @component dropi-tooltip\n * Wraps content and shows a tooltip bubble on hover/focus.\n \n @example\n * <dropi-tooltip-v2 text=\"Más información\" position=\"top\">\n * <dropi-button text=\"Hover\" />\n * </dropi-tooltip-v2>\n /\n@Component({\n tag: 'dropi-tooltip-v2',\n styleUrl: 'dropi-tooltip.css',\n shadow: true,\n})\nexport class DropiTooltipV2 {\n /* Tooltip text /\n @Prop() text: string = '';\n /* Tooltip title (bold, shown with label) /\n @Prop() title: string = '';\n /* Tooltip label (shown below title) /\n @Prop() label: string = '';\n /* Position: top \| bottom \| left \| right /\n @Prop() position: TooltipPosition = 'bottom';\n /* Position of the arrow: start \| center \| end (matches Angular `arrowPosition`) /\n @Prop() arrowPosition: ArrowPosition = 'center';\n /* Trigger: hover \| click \| focus \| timeout \| static \| hidden /\n @Prop({ mutable: true }) trigger: TooltipTrigger = 'hover';\n /* Max CSS width of the bubble /\n @Prop() maxWidth: string = '280px';\n /* Min CSS width of the bubble (matches Angular `minWidth`) /\n @Prop() minWidth: string = '300px';\n /* Delay in ms before showing /\n @Prop() showDelay: number = 0;\n /* Disable the tooltip completely (matches Angular `disabled`) /\n @Prop() disabled: boolean = false;\n /* Show the trigger icon (matches Angular `showIcon`) /\n @Prop() showIcon: boolean = true;\n /* Show the close (X) button inside the bubble (matches Angular `showX`) /\n @Prop({ mutable: true }) showX: boolean = false;\n /* Icon name from the dropi-icon sprite (matches Angular `iconName`) /\n @Prop() iconName: string = 'Tooltip';\n /* Icon color token or hex (matches Angular `iconColor`) /\n @Prop() iconColor: string = '#7B8190';\n /* Icon size in px without unit (matches Angular `iconSize`) */\n @Prop() iconSize: string = '14';\n\n @State() private visible: boolean = false;\n private showTimer: any = null;\n private timeoutTimer: any = null;\n\n componentDidLoad() {\n if (this.trigger === 'static') this.show();\n if (this.trigger === 'timeout') this.showWithTimeout();\n }\n\n private show = () => {\n if (this.disabled \|\| this.trigger === 'hidden') return;\n const content = this.text \|\| this.title \|\| this.label;\n if (!content.trim()) return;\n if (this.showDelay > 0) {\n this.showTimer = setTimeout(() => { this.visible = true; }, this.showDelay);\n } else {\n this.visible = true;\n }\n };\n\n private hide = () => {\n if (this.showTimer) { clearTimeout(this.showTimer); this.showTimer = null; }\n if (this.timeoutTimer) { clearTimeout(this.timeoutTimer); this.timeoutTimer = null; }\n this.visible = false;\n };\n\n private showWithTimeout() {\n this.show();\n this.timeoutTimer = setTimeout(() => this.hide(), 6000);\n }\n\n private handleMouseEnter = () => {\n if (this.trigger !== 'hover') return;\n this.show();\n };\n\n private handleMouseLeave = () => {\n if (this.trigger !== 'hover') return;\n setTimeout(() => this.hide(), 10);\n };\n\n private handleClick = () => {\n if (this.trigger !== 'click') return;\n this.visible ? this.hide() : this.show();\n };\n\n private handleFocusin = () => {\n if (this.trigger !== 'focus') return;\n this.show();\n };\n\n private handleFocusout = () => {\n if (this.trigger !== 'focus') return;\n this.hide();\n };\n\n private handleClose = () => {\n if (this.trigger === 'static') {\n this.trigger = 'hover';\n this.showX = false;\n }\n this.hide();\n };\n\n private get displayContent(): string {\n if (this.text) return this.text;\n if (this.title && this.label) return `${this.title}\\n${this.label}`;\n return this.title \|\| this.label \|\| '';\n }\n\n render() {\n const bubbleStyle: any = { maxWidth: this.maxWidth };\n if (this.minWidth) bubbleStyle.minWidth = this.minWidth;\n\n return (\n <div\n class=\"tooltip-wrapper\"\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleClick}\n onFocusin={this.handleFocusin}\n onFocusout={this.handleFocusout}\n >\n {this.showIcon && (\n <dropi-icon\n name={this.iconName}\n iconWidth={`${this.iconSize}px`}\n iconHeight={`${this.iconSize}px`}\n color={this.iconColor}\n />\n )}\n <slot />\n\n {this.displayContent && (\n <div\n class={{\n 'tooltip-bubble': true,\n [`tooltip-bubble--${this.position}`]: true,\n [`tooltip-bubble--arrow-${this.arrowPosition}`]: true,\n 'tooltip-bubble--visible': this.visible,\n }}\n style={bubbleStyle}\n role=\"tooltip\"\n >\n {this.showX && (\n <button class=\"tooltip-close\" onClick={this.handleClose} aria-label=\"Cerrar\">\n <dropi-icon name=\"Close-small\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Gray-Gray-500\" />\n </button>\n )}\n {this.title && !this.text && <strong class=\"tooltip-title\">{this.title}</strong>}\n {this.label && !this.text && <span class=\"tooltip-label\">{this.label}</span>}\n {this.text && <span>{this.text}</span>}\n <span class={`tooltip-arrow tooltip-arrow--${this.position}`} />\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-tooltip.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
-const dropiTooltipCss = () => `:host{display:inline-block;position:relative}.tooltip-simple-bubble{position:absolute;background:var(--Gray-Gray-800, #1e293b);color:white;padding:4px 8px;border-radius:4px;font-size:12px;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:var(--dropi-z-index-overlay, 11000)}:host(:hover) .tooltip-simple-bubble{opacity:1}.tooltip-simple--outlined .tooltip-simple-bubble{border:1px solid var(--Gray-Gray-300);background:white;color:var(--Gray-Gray-800)}`;
+const dropiTooltipCss = () => `:host{display:inline-block;position:relative;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.tooltip-simple-bubble{position:absolute;background:var(--Gray-Gray-800, #1e293b);color:white;padding:4px 8px;border-radius:4px;font-size:12px;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:var(--dropi-z-index-overlay, 11000)}:host(:hover) .tooltip-simple-bubble{opacity:1}.tooltip-simple--outlined .tooltip-simple-bubble{border:1px solid var(--Gray-Gray-300);background:white;color:var(--Gray-Gray-800)}`;
 const DropiTooltip = class {
     constructor(hostRef) {
@@ -11,7 +11,7 @@ const DropiTooltip = class {
     /** Whether the tooltip has an outline style (matches Angular `outlined`) */
     outlined = false;
     render() {
-        return (h("div", { key: '1c580849e5fdfc99ecfedc7c14508dfd50b789c9', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: '8881e587966e67408a725e36a5a45828755e10a6' }), this.text && (h("div", { key: 'f4f1c4a1d47e3324fe4d9af25d46342c4c650a0f', class: "tooltip-simple-bubble" }, this.text))));
+        return (h("div", { key: '5d3f7f2dc89ae9172e98a5f6a83256a382dee83f', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: 'fe5fcc52d61af40c9d90dbc4f7cf7373e9a984f0' }), this.text && (h("div", { key: '22132d97bf57d291e7d3e37188d6d30bab5313e5', class: "tooltip-simple-bubble" }, this.text))));
     }
 };
 DropiTooltip.style = dropiTooltipCss();

package/dist/dropi-ui/dropi-tooltip.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-tooltip.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,~~qiBAAqiB~~,CAAC;;~~MCWxjB~~,YAAY,GAAA,MAAA;;;;;IAEf,IAAI,GAAW,EAAE;;IAEjB,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,EACP,IAAI,CAAC,IAAI,KACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,IAAI,CACN,CACP,CACG;;;;;;;","names":[],"sources":["src/components/dropi-tooltip/dropi-tooltip.css?tag=dropi-tooltip&encapsulation=shadow","src/components/dropi-tooltip/dropi-tooltip.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n}\n\n.tooltip-simple-bubble {\n position: absolute;\n background: var(--Gray-Gray-800, #1e293b);\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 8px;\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.2s;\n z-index: var(--dropi-z-index-overlay, 11000);\n}\n\n:host(:hover) .tooltip-simple-bubble {\n opacity: 1;\n}\n\n.tooltip-simple--outlined .tooltip-simple-bubble {\n border: 1px solid var(--Gray-Gray-300);\n background: white;\n color: var(--Gray-Gray-800);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/*\n @component dropi-tooltip\n * Simple tooltip (Legacy version).\n /\n@Component({\n tag: 'dropi-tooltip',\n styleUrl: 'dropi-tooltip.css',\n shadow: true,\n})\nexport class DropiTooltip {\n /* Tooltip text /\n @Prop() text: string = '';\n /* Whether the tooltip has an outline style (matches Angular `outlined`) */\n @Prop() outlined: boolean = false;\n\n render() {\n return (\n <div class={{ 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined }}>\n <slot />\n {this.text && (\n <div class=\"tooltip-simple-bubble\">\n {this.text}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-tooltip.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,0nBAA0nB,CAAC;;MCW7oB,YAAY,GAAA,MAAA;;;;;IAEf,IAAI,GAAW,EAAE;;IAEjB,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,EACP,IAAI,CAAC,IAAI,KACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,IAAI,CACN,CACP,CACG;;;;;;;","names":[],"sources":["src/components/dropi-tooltip/dropi-tooltip.css?tag=dropi-tooltip&encapsulation=shadow","src/components/dropi-tooltip/dropi-tooltip.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n display: inline-block;\n position: relative;\n}\n\n.tooltip-simple-bubble {\n position: absolute;\n background: var(--Gray-Gray-800, #1e293b);\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 8px;\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.2s;\n z-index: var(--dropi-z-index-overlay, 11000);\n}\n\n:host(:hover) .tooltip-simple-bubble {\n opacity: 1;\n}\n\n.tooltip-simple--outlined .tooltip-simple-bubble {\n border: 1px solid var(--Gray-Gray-300);\n background: white;\n color: var(--Gray-Gray-800);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/*\n @component dropi-tooltip\n * Simple tooltip (Legacy version).\n /\n@Component({\n tag: 'dropi-tooltip',\n styleUrl: 'dropi-tooltip.css',\n shadow: true,\n})\nexport class DropiTooltip {\n /* Tooltip text /\n @Prop() text: string = '';\n /* Whether the tooltip has an outline style (matches Angular `outlined`) */\n @Prop() outlined: boolean = false;\n\n render() {\n return (\n <div class={{ 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined }}>\n <slot />\n {this.text && (\n <div class=\"tooltip-simple-bubble\">\n {this.text}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-ui.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--Primary-Primary-50:#fef8f2;--Primary-Primary-100:#ffecda;--Primary-Primary-200:#fcddbd;--Primary-Primary-300:#f2bc85;--Primary-Primary-400:#f7b46f;--Primary-Primary-500:#f49a3d;--Primary-Primary-600:#e58017;--Primary-Primary-700:#99540f;--Primary-Primary-800:#66380a;--Primary-Primary-900:#331c05;--Secondary-Secondary-50:#f0fafc;--Secondary-Secondary-100:#cee8f2;--Secondary-Secondary-200:#95d0e5;--Secondary-Secondary-300:#62bad9;--Secondary-Secondary-400:#33a4cc;--Secondary-Secondary-500:#008dbf;--Secondary-Secondary-600:#007199;--Secondary-Secondary-700:#005573;--Secondary-Secondary-800:#00384d;--Secondary-Secondary-900:#001c26;--Neutral-White:#ffffff;--Neutral-Black:#000000;--Gray-Gray-50:#f7f8fa;--Gray-Gray-100:#e6eaf2;--Gray-Gray-200:#c3c9d9;--Gray-Gray-300:#a3abbf;--Gray-Gray-400:#858ea6;--Gray-Gray-500:#69738c;--Gray-Gray-600:#475066;--Gray-Gray-700:#32394d;--Gray-Gray-800:#1f2433;--Gray-Gray-900:#0e111a;--Success-Success-50:#e7f8f3;--Success-Success-100:#b3eada;--Success-Success-200:#8ee0c8;--Success-Success-300:#5bd1af;--Success-Success-400:#3bc99f;--Success-Success-500:#0abb87;--Success-Success-600:#09aa7b;--Success-Success-700:#078560;--Success-Success-800:#06674a;--Success-Success-900:#044f39;--Error-Error-50:#fef0f0;--Error-Error-100:#fcd1d1;--Error-Error-200:#fababb;--Error-Error-300:#f89b9c;--Error-Error-400:#f68889;--Error-Error-500:#f46a6b;--Error-Error-600:#de6061;--Error-Error-700:#ad4b4c;--Error-Error-800:#863a3b;--Error-Error-900:#662d2d;--Info-Info-50:#eef6fe;--Info-Info-100:#c9e3fb;--Info-Info-200:#afd6f9;--Info-Info-300:#8ac3f6;--Info-Info-400:#73b7f4;--Info-Info-500:#50a5f1;--Info-Info-600:#4996db;--Info-Info-700:#3975ab;--Info-Info-800:#2c5b85;--Info-Info-900:#224565;--Warning-Warning-50:#fef8ed;--Warning-Warning-100:#fbe8c8;--Warning-Warning-200:#f9ddad;--Warning-Warning-300:#f6cd87;--Warning-Warning-400:#f4c370;--Warning-Warning-500:#f1b44c;--Warning-Warning-600:#dba445;--Warning-Warning-700:#ab8036;--Warning-Warning-800:#85632a;--Warning-Warning-900:#654c20;--Orange-orange-50:#fef5ec;--Orange-orange-500:#f49a3d;--Size-1:4px;--Size-2:8px;--Size-3:12px;--Size-4:16px;--Size-5:24px;--Size-6:32px;--Size-7:40px;--Size-8:48px;--Size-9:56px;--Size-10:64px;--Border-1:4px;--Border-2:8px;--Border-3:12px;--Border-4:24px;--Border-5:32px;--Border-full:9999px;--font-size-xxxxl:36px;--font-size-xxxl:30px;--font-size-xxl:24px;--font-size-xl:20px;--font-size-l:18px;--font-size-m:16px;--font-size-s:14px;--font-size-xs:12px;--font-size-xxs:10px;--lineheight-simple:110%;--lineheight-large:150%;--font-weight-bold:700;--font-weight-semibold:600;--font-weight-medium:500;--font-weight-regular:400;--font-weight-light:300;--font-family-01:'Inter', sans-serif;--breakpoint-extra-small:576px;--breakpoint-small:600px;--breakpoint-medium:1000px;--breakpoint-large:1200px;--breakpoint-extra-large:1536px;--breakpoint-full-width:1920px;--Shadow-small:0px 0px 12px rgba(0, 0, 0, 0.04);--Shadow-medium:0.5px 4px 8px rgba(0, 0, 0, 0.08);--Shadow-large:0px 4px 16px rgba(0, 0, 0, 0.16);--Shadow-icon:0px 0px 4px rgba(0, 0, 0, 0.16);--Interrapidisimo:#383637;--Domina:#464ffe;--Coordinadora:#2686c5;--Servientrega:#1ba558;--99-minutos:#9cd453;--TCC:#f8dd49;--Veloces:#dc2e76;--Envia:#e7484e;--Restlogix:#90dd92;--Tiui:#0596a5;--Fedex:#4d148c;--Laarcourier:#faf063;--Gintracom:#ff3939;--Blue-express:#1542a3;--Lulu:#f03a3e;--Urbano:#e53237;--Tipsa:#1d3681;--dropi-z-index-base:0;--dropi-z-index-sticky:100;--dropi-z-index-navbar:1000;--dropi-z-index-modal:9999;--dropi-z-index-drawer:9999;--dropi-z-index-overlay:11000;--dropi-z-index-toast:12000}@media (max-width: 600px){:root{--font-size-xxxxl:32px;--font-size-xxxl:26px;--font-size-xxl:20px;--font-size-xl:18px;--font-size-l:16px;--font-size-m:16px;--font-size-s:14px;--font-size-xs:12px;--font-size-xxs:10px}}*{font-family:var(--font-family-01);box-sizing:border-box;text-align:left}h1{color:var(--Gray-Gray-700);font-size:var(--font-size-xxxxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h2{color:var(--Gray-Gray-700);font-size:var(--font-size-xxxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h3{color:var(--Gray-Gray-700);font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h4{color:var(--Gray-Gray-700);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h5{color:var(--Gray-Gray-700);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Body-L-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-m);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-L-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-m);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Body-M-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-s);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-M-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Body-S-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-S-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Caption-M{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Caption-S{color:var(--Gray-Gray-700);font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-L{color:var(--Gray-Gray-700);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-M{color:var(--Gray-Gray-700);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-S{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}body.dropi-modal-open{overflow:hidden !important}dropi-icon:not(:defined){display:inline-flex;width:24px;height:24px;overflow:hidden}
1	+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');:root{--dropi-font-family:'Inter', sans-serif;--Primary-Primary-50:#fef8f2;--Primary-Primary-100:#ffecda;--Primary-Primary-200:#fcddbd;--Primary-Primary-300:#f2bc85;--Primary-Primary-400:#f7b46f;--Primary-Primary-500:#f49a3d;--Primary-Primary-600:#e58017;--Primary-Primary-700:#99540f;--Primary-Primary-800:#66380a;--Primary-Primary-900:#331c05;--Secondary-Secondary-50:#f0fafc;--Secondary-Secondary-100:#cee8f2;--Secondary-Secondary-200:#95d0e5;--Secondary-Secondary-300:#62bad9;--Secondary-Secondary-400:#33a4cc;--Secondary-Secondary-500:#008dbf;--Secondary-Secondary-600:#007199;--Secondary-Secondary-700:#005573;--Secondary-Secondary-800:#00384d;--Secondary-Secondary-900:#001c26;--Neutral-White:#ffffff;--Neutral-Black:#000000;--Gray-Gray-50:#f7f8fa;--Gray-Gray-100:#e6eaf2;--Gray-Gray-200:#c3c9d9;--Gray-Gray-300:#a3abbf;--Gray-Gray-400:#858ea6;--Gray-Gray-500:#69738c;--Gray-Gray-600:#475066;--Gray-Gray-700:#32394d;--Gray-Gray-800:#1f2433;--Gray-Gray-900:#0e111a;--Success-Success-50:#e7f8f3;--Success-Success-100:#b3eada;--Success-Success-200:#8ee0c8;--Success-Success-300:#5bd1af;--Success-Success-400:#3bc99f;--Success-Success-500:#0abb87;--Success-Success-600:#09aa7b;--Success-Success-700:#078560;--Success-Success-800:#06674a;--Success-Success-900:#044f39;--Error-Error-50:#fef0f0;--Error-Error-100:#fcd1d1;--Error-Error-200:#fababb;--Error-Error-300:#f89b9c;--Error-Error-400:#f68889;--Error-Error-500:#f46a6b;--Error-Error-600:#de6061;--Error-Error-700:#ad4b4c;--Error-Error-800:#863a3b;--Error-Error-900:#662d2d;--Info-Info-50:#eef6fe;--Info-Info-100:#c9e3fb;--Info-Info-200:#afd6f9;--Info-Info-300:#8ac3f6;--Info-Info-400:#73b7f4;--Info-Info-500:#50a5f1;--Info-Info-600:#4996db;--Info-Info-700:#3975ab;--Info-Info-800:#2c5b85;--Info-Info-900:#224565;--Warning-Warning-50:#fef8ed;--Warning-Warning-100:#fbe8c8;--Warning-Warning-200:#f9ddad;--Warning-Warning-300:#f6cd87;--Warning-Warning-400:#f4c370;--Warning-Warning-500:#f1b44c;--Warning-Warning-600:#dba445;--Warning-Warning-700:#ab8036;--Warning-Warning-800:#85632a;--Warning-Warning-900:#654c20;--Orange-orange-50:#fef5ec;--Orange-orange-500:#f49a3d;--Size-1:4px;--Size-2:8px;--Size-3:12px;--Size-4:16px;--Size-5:24px;--Size-6:32px;--Size-7:40px;--Size-8:48px;--Size-9:56px;--Size-10:64px;--Border-1:4px;--Border-2:8px;--Border-3:12px;--Border-4:24px;--Border-5:32px;--Border-full:9999px;--font-size-xxxxl:36px;--font-size-xxxl:30px;--font-size-xxl:24px;--font-size-xl:20px;--font-size-l:18px;--font-size-m:16px;--font-size-s:14px;--font-size-xs:12px;--font-size-xxs:10px;--lineheight-simple:110%;--lineheight-large:150%;--font-weight-bold:700;--font-weight-semibold:600;--font-weight-medium:500;--font-weight-regular:400;--font-weight-light:300;--font-family-01:'Inter', sans-serif;--breakpoint-extra-small:576px;--breakpoint-small:600px;--breakpoint-medium:1000px;--breakpoint-large:1200px;--breakpoint-extra-large:1536px;--breakpoint-full-width:1920px;--Shadow-small:0px 0px 12px rgba(0, 0, 0, 0.04);--Shadow-medium:0.5px 4px 8px rgba(0, 0, 0, 0.08);--Shadow-large:0px 4px 16px rgba(0, 0, 0, 0.16);--Shadow-icon:0px 0px 4px rgba(0, 0, 0, 0.16);--Interrapidisimo:#383637;--Domina:#464ffe;--Coordinadora:#2686c5;--Servientrega:#1ba558;--99-minutos:#9cd453;--TCC:#f8dd49;--Veloces:#dc2e76;--Envia:#e7484e;--Restlogix:#90dd92;--Tiui:#0596a5;--Fedex:#4d148c;--Laarcourier:#faf063;--Gintracom:#ff3939;--Blue-express:#1542a3;--Lulu:#f03a3e;--Urbano:#e53237;--Tipsa:#1d3681;--dropi-z-index-base:0;--dropi-z-index-sticky:100;--dropi-z-index-navbar:1000;--dropi-z-index-modal:9999;--dropi-z-index-drawer:9999;--dropi-z-index-overlay:11000;--dropi-z-index-toast:12000}@media (max-width: 600px){:root{--font-size-xxxxl:32px;--font-size-xxxl:26px;--font-size-xxl:20px;--font-size-xl:18px;--font-size-l:16px;--font-size-m:16px;--font-size-s:14px;--font-size-xs:12px;--font-size-xxs:10px}}*{font-family:var(--font-family-01);box-sizing:border-box;text-align:left}h1{color:var(--Gray-Gray-700);font-size:var(--font-size-xxxxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h2{color:var(--Gray-Gray-700);font-size:var(--font-size-xxxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h3{color:var(--Gray-Gray-700);font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h4{color:var(--Gray-Gray-700);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h5{color:var(--Gray-Gray-700);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Body-L-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-m);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-L-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-m);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Body-M-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-s);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-M-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Body-S-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-S-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Caption-M{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Caption-S{color:var(--Gray-Gray-700);font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-L{color:var(--Gray-Gray-700);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-M{color:var(--Gray-Gray-700);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-S{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}body.dropi-modal-open{overflow:hidden !important}dropi-icon:not(:defined){display:inline-flex;width:24px;height:24px;overflow:hidden}