@dropi/ui 0.1.41 → 0.1.42

package/dist/dropi-ui/dropi-card-section.entry.js

@@ -5,8 +5,8 @@ const dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*:
 const DropiCardSection = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
-        this.onClick = createEvent(this, "onClick", 7);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.dropiClick = createEvent(this, "dropiClick", 7);
     }
     /** Section title — matches Angular 'title' */
     title = 'title';
@@ -19,16 +19,16 @@ const DropiCardSection = class {
     /** Switch checked state */
     isChecked = false;
     /** Emitted when switch changes */
-    onChange;
+    dropiChange;
     /** Emitted when dropdown icon is clicked */
-    onClick;
+    dropiClick;
     render() {
-        return (h("div", { key: 'aa7548c223bf3238b7af10e52821e3ffd19fefca', class: "card-section" }, h("div", { key: '6b0ed1e7f7c282b0f67277567a2fa1ffbab9d04e', class: "card-section__text" }, this.type === 'important'
+        return (h("div", { key: '06fe2a580fb23484419ea4b1c41a265facb722de', class: "card-section" }, h("div", { key: '1020ea256b0311a200a721387b3ecb8d0f3809ab', class: "card-section__text" }, this.type === 'important'
             ? h("h5", { class: "card-section__title card-section__title--important" }, this.title)
-            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: 'f0c83d631d541d95c19e4a246634da56413a3de9', class: "card-section__desc" }, this.description)), h("div", { key: '976d78401ab26872df88115ae0f0449bcd2faae9', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
+            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: '52ea93b6b2736c4c6e3ebb953c2878db90d34b4c', class: "card-section__desc" }, this.description)), h("div", { key: '7ec0ed96e43b45256fd5dec5ee24b0dfd6488403', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
                 this.isChecked = e.detail;
-                this.onChange.emit(e.detail);
-            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));
+                this.dropiChange.emit(e.detail);
+            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));
     }
 };
 DropiCardSection.style = dropiCardSectionCss();

package/dist/dropi-ui/dropi-card-section.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-card-section.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,w2BAAw2B,CAAC;;MCW/3B,gBAAgB,GAAA,MAAA;;;;;;;IAEnB,KAAK,GAAW,OAAO;;IAEvB,WAAW,GAAW,aAAa;;IAEnC,WAAW,GAA0B,UAAU;;IAE/C,IAAI,GAA2B,WAAW;;IAEzB,SAAS,GAAY,KAAK;;AAG1C,IAAA,QAAQ;;AAER,IAAA,OAAO;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,IAAI,KAAK;AACb,cAAE,UAAI,KAAK,EAAC,oDAAoD,EAAA,EAAE,IAAI,CAAC,KAAK;AAC5E,cAAE,UAAI,KAAK,EAAC,qBAAqB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EAEpD,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,oBAAoB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,CACrE,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,WAAW,KAAK,QAAQ,IAC5B,CAAA,CAAA,cAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,CAAC,CAAuB,KAAI;AACtC,gBAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM;gBACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC9B,aAAC,EAAA,CACD,KAEF,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EAClG,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,eAAe,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CACrF,CACV,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-card-section/dropi-card-section.css?tag=dropi-card-section&encapsulation=shadow","src/components/dropi-card-section/dropi-card-section.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.card-section {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--Size-4, 16px);\n  padding: var(--Size-3, 12px) var(--Size-4, 16px);\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-100, #e6eaf2);\n  border-radius: var(--Border-2, 8px);\n}\n\n.card-section__text { flex: 1; }\n\n.card-section__title {\n  margin: 0 0 4px;\n  font-family: inherit;\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-800, #1f2433);\n}\n\nh5.card-section__title { font-size: var(--font-size-m, 14px); }\nh6.card-section__title { font-size: var(--font-size-s, 12px); }\n\n.card-section__desc {\n  margin: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.card-section__control { flex-shrink: 0; }\n\n.card-section__dropdown-btn {\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-card-section\n * Section card with title, description and a switch or dropdown control.\n */\n@Component({\n  tag: 'dropi-card-section',\n  styleUrl: 'dropi-card-section.css',\n  shadow: true,\n})\nexport class DropiCardSection {\n  /** Section title — matches Angular 'title' */\n  @Prop() title: string = 'title';\n  /** Section description */\n  @Prop() description: string = 'Description';\n  /** Control type on the right */\n  @Prop() typeElement: 'dropdown' | 'switch' = 'dropdown';\n  /** Title size variant */\n  @Prop() type: 'medium' | 'important' = 'important';\n  /** Switch checked state */\n  @Prop({ mutable: true }) isChecked: boolean = false;\n\n  /** Emitted when switch changes */\n  @Event() onChange: EventEmitter<boolean>;\n  /** Emitted when dropdown icon is clicked */\n  @Event() onClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <div class=\"card-section\">\n        <div class=\"card-section__text\">\n          {this.type === 'important'\n            ? <h5 class=\"card-section__title card-section__title--important\">{this.title}</h5>\n            : <h6 class=\"card-section__title\">{this.title}</h6>\n          }\n          {this.description && <p class=\"card-section__desc\">{this.description}</p>}\n        </div>\n\n        <div class=\"card-section__control\">\n          {this.typeElement === 'switch' ? (\n            <dropi-switch\n              isChecked={this.isChecked}\n              onOnChange={(e: CustomEvent<boolean>) => {\n                this.isChecked = e.detail;\n                this.onChange.emit(e.detail);\n              }}\n            />\n          ) : (\n            <button class=\"card-section__dropdown-btn\" onClick={() => this.onClick.emit()} aria-label=\"Expandir\">\n              <dropi-icon name=\"Dropdown-down\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-card-section.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,w2BAAw2B,CAAC;;MCW/3B,gBAAgB,GAAA,MAAA;;;;;;;IAEnB,KAAK,GAAW,OAAO;;IAEvB,WAAW,GAAW,aAAa;;IAEnC,WAAW,GAA0B,UAAU;;IAE/C,IAAI,GAA2B,WAAW;;IAEzB,SAAS,GAAY,KAAK;;AAG1C,IAAA,WAAW;;AAEX,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,IAAI,KAAK;AACb,cAAE,UAAI,KAAK,EAAC,oDAAoD,EAAA,EAAE,IAAI,CAAC,KAAK;AAC5E,cAAE,UAAI,KAAK,EAAC,qBAAqB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EAEpD,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,oBAAoB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,CACrE,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,WAAW,KAAK,QAAQ,IAC5B,CAAA,CAAA,cAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,CAAC,CAAuB,KAAI;AACzC,gBAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM;gBACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACjC,aAAC,EAAA,CACD,KAEF,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EACrG,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,eAAe,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CACrF,CACV,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-card-section/dropi-card-section.css?tag=dropi-card-section&encapsulation=shadow","src/components/dropi-card-section/dropi-card-section.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.card-section {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--Size-4, 16px);\n  padding: var(--Size-3, 12px) var(--Size-4, 16px);\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-100, #e6eaf2);\n  border-radius: var(--Border-2, 8px);\n}\n\n.card-section__text { flex: 1; }\n\n.card-section__title {\n  margin: 0 0 4px;\n  font-family: inherit;\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-800, #1f2433);\n}\n\nh5.card-section__title { font-size: var(--font-size-m, 14px); }\nh6.card-section__title { font-size: var(--font-size-s, 12px); }\n\n.card-section__desc {\n  margin: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.card-section__control { flex-shrink: 0; }\n\n.card-section__dropdown-btn {\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-card-section\n * Section card with title, description and a switch or dropdown control.\n */\n@Component({\n  tag: 'dropi-card-section',\n  styleUrl: 'dropi-card-section.css',\n  shadow: true,\n})\nexport class DropiCardSection {\n  /** Section title — matches Angular 'title' */\n  @Prop() title: string = 'title';\n  /** Section description */\n  @Prop() description: string = 'Description';\n  /** Control type on the right */\n  @Prop() typeElement: 'dropdown' | 'switch' = 'dropdown';\n  /** Title size variant */\n  @Prop() type: 'medium' | 'important' = 'important';\n  /** Switch checked state */\n  @Prop({ mutable: true }) isChecked: boolean = false;\n\n  /** Emitted when switch changes */\n  @Event() dropiChange: EventEmitter<boolean>;\n  /** Emitted when dropdown icon is clicked */\n  @Event() dropiClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <div class=\"card-section\">\n        <div class=\"card-section__text\">\n          {this.type === 'important'\n            ? <h5 class=\"card-section__title card-section__title--important\">{this.title}</h5>\n            : <h6 class=\"card-section__title\">{this.title}</h6>\n          }\n          {this.description && <p class=\"card-section__desc\">{this.description}</p>}\n        </div>\n\n        <div class=\"card-section__control\">\n          {this.typeElement === 'switch' ? (\n            <dropi-switch\n              isChecked={this.isChecked}\n              onDropiChange={(e: CustomEvent<boolean>) => {\n                this.isChecked = e.detail;\n                this.dropiChange.emit(e.detail);\n              }}\n            />\n          ) : (\n            <button class=\"card-section__dropdown-btn\" onClick={() => this.dropiClick.emit()} aria-label=\"Expandir\">\n              <dropi-icon name=\"Dropdown-down\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-carousel.entry.js

@@ -5,8 +5,8 @@ const dropiCarouselCss = () => `:host{display:block;width:100%}*,*::before,*::af
 const DropiCarousel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pageChange = createEvent(this, "pageChange", 7);
-        this.onPage = createEvent(this, "onPage", 7);
+        this.dropiPageChange = createEvent(this, "dropiPageChange", 7);
+        this.dropiPage = createEvent(this, "dropiPage", 7);
     }
     get el() { return getElement(this); }
     /** Items to display (Array of URLs or objects) */
@@ -33,8 +33,8 @@ const DropiCarousel = class {
     totalPages = 0;
     itemsContainer;
     timer;
-    pageChange;
-    onPage;
+    dropiPageChange;
+    dropiPage;
     handleValue(val) {
         this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);
         this.updateTotalPages();
@@ -106,7 +106,7 @@ const DropiCarousel = class {
             this.internalPage = (this.internalPage + 1) % this.totalPages;
             this.page = this.internalPage;
             this.updateTransform();
-            this.pageChange.emit(this.internalPage);
+            this.dropiPageChange.emit(this.internalPage);
             setTimeout(() => (this.isAnimating = false), 500);
         }
     };
@@ -118,7 +118,7 @@ const DropiCarousel = class {
             this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;
             this.page = this.internalPage;
             this.updateTransform();
-            this.pageChange.emit(this.internalPage);
+            this.dropiPageChange.emit(this.internalPage);
             setTimeout(() => (this.isAnimating = false), 500);
         }
     };
@@ -127,7 +127,7 @@ const DropiCarousel = class {
         this.internalPage = index;
         this.page = this.internalPage;
         this.updateTransform();
-        this.pageChange.emit(this.internalPage);
+        this.dropiPageChange.emit(this.internalPage);
         setTimeout(() => (this.isAnimating = false), 500);
     }
     render() {

package/dist/dropi-ui/dropi-carousel.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-carousel.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-carousel/dropi-carousel.css?tag=dropi-carousel&encapsulation=shadow","src/components/dropi-carousel/dropi-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.dropi-carousel-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n  overflow: hidden;\n  padding: 0 var(--Size-4);\n}\n\n.dropi-carousel-content {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 1rem 0;\n  width: 100%;\n}\n\n.dropi-carousel-items-content {\n  overflow: hidden;\n  flex: 1;\n  padding: 0;\n  width: 100%;\n  max-width: 100%;\n}\n\n.dropi-carousel-items-container {\n  display: flex;\n  padding-bottom: var(--Size-3);\n  will-change: transform;\n}\n\n.dropi-carousel-item {\n  flex: 0 0 auto;\n  padding: 0 0.5rem;\n  box-sizing: border-box;\n}\n\n.dropi-carousel-item > * {\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n}\n\n.dropi-carousel-nav {\n  display: flex;\n  width: 40px;\n  height: 40px;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  flex-shrink: 0;\n  z-index: 1;\n  border-radius: var(--Border-5);\n  background: var(--Neutral-White, #fff);\n  box-shadow: var(--Shadow-medium);\n  border: none;\n  appearance: none;\n  padding: 0;\n}\n\n.dropi-carousel-nav:hover {\n  background: var(--Gray-Gray-50);\n}\n\n.dropi-carousel-nav:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n.dropi-carousel-prev {\n  margin-right: 1rem;\n}\n\n.dropi-carousel-next {\n  margin-left: 1rem;\n}\n\n.dropi-carousel-indicators {\n  display: flex;\n  justify-content: center;\n  gap: 0.5rem;\n  list-style: none;\n  padding: 1rem 0 0 0;\n  margin: 0;\n}\n\n.dropi-carousel-indicators li {\n  cursor: pointer;\n}\n\n.dropi-carousel-indicators li button {\n  width: 1rem;\n  height: 1rem;\n  border-radius: 50%;\n  border: 1px solid var(--Gray-Gray-100, #eceef4);\n  background: var(--Neutral-White, #fff);\n  cursor: pointer;\n  transition: all 0.2s;\n  padding: 0;\n}\n\n.dropi-carousel-indicators li.active button {\n  background: var(--Primary-Primary-500);\n  border-color: var(--Primary-Primary-500);\n}\n\n.dropi-carousel-indicators li:hover button {\n  background: var(--Gray-Gray-200);\n}\n\n/* Vertical Orientation */\n.vertical .dropi-carousel-content {\n  flex-direction: column;\n}\n\n.vertical .dropi-carousel-items-container {\n  flex-direction: column;\n}\n\n.vertical .dropi-carousel-prev {\n  margin: 0 0 1rem 0;\n}\n\n.vertical .dropi-carousel-next {\n  margin: 1rem 0 0 0;\n}\n\n/* Responsive fixes */\n@media (max-width: 768px) {\n  .dropi-carousel-container {\n    padding: 0;\n  }\n  .dropi-carousel-item {\n    padding: 0 0.25rem;\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'dropi-carousel',\n  styleUrl: 'dropi-carousel.css',\n  shadow: true,\n})\nexport class DropiCarousel {\n  @Element() el: HTMLElement;\n\n  /** Items to display (Array of URLs or objects) */\n  @Prop() value: any[] | string = [];\n  /** Active page index */\n  @Prop({ mutable: true }) page: number = 0;\n  /** Number of items visible per page */\n  @Prop() numVisible: number = 1;\n  /** Number of items to scroll per click */\n  @Prop() numScroll: number = 1;\n  /** Orientation of the carousel */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n  /** Show navigation arrows */\n  @Prop() showNavigators: any = true;\n  /** Show dot indicators */\n  @Prop() showIndicators: any = true;\n  /** Autoplay interval in ms (0 = disabled) */\n  @Prop() autoplayInterval: number = 0;\n  /** Infinite scrolling */\n  @Prop() circular: any = false;\n\n  @State() private parsedValue: any[] = [];\n  @State() private internalPage: number = 0;\n  @State() private isAnimating: boolean = false;\n  @State() private totalPages: number = 0;\n\n  private itemsContainer: HTMLElement;\n  private timer: any;\n\n  @Event() pageChange: EventEmitter<number>;\n  @Event() onPage: EventEmitter<any>;\n\n  @Watch('value')\n  handleValue(val: any[] | string) {\n    this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);\n    this.updateTotalPages();\n    this.updateTransform();\n  }\n\n  @Watch('page')\n  handlePage(val: number) {\n    this.internalPage = val;\n    this.updateTransform();\n  }\n\n  componentWillLoad() {\n    if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {\n      const attrValue = this.el.getAttribute('value');\n      if (attrValue) this.value = attrValue;\n    }\n    this.handleValue(this.value);\n    this.internalPage = this.page;\n  }\n\n  componentDidLoad() {\n    this.updateTransform();\n    if (this.autoplayInterval > 0) {\n      this.startAutoplay();\n    }\n    window.addEventListener('resize', this.onResize);\n  }\n\n  disconnectedCallback() {\n    this.stopAutoplay();\n    window.removeEventListener('resize', this.onResize);\n  }\n\n  private onResize = () => {\n    this.updateTotalPages();\n    this.updateTransform();\n  };\n\n  private startAutoplay() {\n    this.timer = setInterval(() => this.navForward(), this.autoplayInterval);\n  }\n\n  private stopAutoplay() {\n    if (this.timer) clearInterval(this.timer);\n  }\n\n  private updateTotalPages() {\n    if (!this.parsedValue.length || this.parsedValue.length <= this.numVisible) {\n      this.totalPages = 1;\n      return;\n    }\n    const totalItems = this.parsedValue.length;\n    const remainingItems = totalItems - this.numVisible;\n    this.totalPages = Math.ceil(remainingItems / this.numScroll) + 1;\n  }\n\n  private updateTransform() {\n    if (!this.itemsContainer) return;\n    \n    const prop = this.orientation === 'vertical' ? 'translateY' : 'translateX';\n    const firstItem = this.itemsContainer.querySelector('.dropi-carousel-item') as HTMLElement;\n    if (!firstItem) return;\n\n    const itemSize = this.orientation === 'vertical' ? firstItem.offsetHeight : firstItem.offsetWidth;\n    const itemsScrolled = this.internalPage * this.numScroll;\n    const maxScroll = Math.max(0, this.parsedValue.length - this.numVisible);\n    const safeScroll = Math.min(itemsScrolled, maxScroll);\n    \n    const translateValue = -(safeScroll * itemSize);\n    this.itemsContainer.style.transform = `${prop}(${translateValue}px)`;\n  }\n\n  private navForward = (e?: Event) => {\n    if (e) e.preventDefault();\n    if (this.circular || this.internalPage < this.totalPages - 1) {\n      this.isAnimating = true;\n      this.internalPage = (this.internalPage + 1) % this.totalPages;\n      this.page = this.internalPage;\n      this.updateTransform();\n      this.pageChange.emit(this.internalPage);\n      setTimeout(() => (this.isAnimating = false), 500);\n    }\n  };\n\n  private navBackward = (e?: Event) => {\n    if (e) e.preventDefault();\n    if (this.circular || this.internalPage > 0) {\n      this.isAnimating = true;\n      this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;\n      this.page = this.internalPage;\n      this.updateTransform();\n      this.pageChange.emit(this.internalPage);\n      setTimeout(() => (this.isAnimating = false), 500);\n    }\n  };\n\n  private onDotClick(index: number) {\n    this.isAnimating = true;\n    this.internalPage = index;\n    this.page = this.internalPage;\n    this.updateTransform();\n    this.pageChange.emit(this.internalPage);\n    setTimeout(() => (this.isAnimating = false), 500);\n  }\n\n  render() {\n    const items = this.parsedValue;\n    if (!items.length) return null;\n\n    const itemFlexBasis = `${100 / this.numVisible}%`;\n\n    return (\n      <div class={{ 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' }}>\n        <div class=\"dropi-carousel-content\">\n          {this.showNavigators && items.length > this.numVisible && (\n            <button\n              class=\"dropi-carousel-nav dropi-carousel-prev\"\n              disabled={!this.circular && this.internalPage === 0}\n              onClick={(e) => this.navBackward(e)}\n              aria-label=\"Anterior\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M14.659 17.5a.833.833 0 0 1-.589-.244l-4.43-4.431a.833.833 0 0 1 0-1.178l4.43-4.431a.834.834 0 0 1 1.179 1.178L11.42 12.25l3.83 3.829a.833.833 0 0 1-.59 1.421Z\" fill=\"#475066\" />\n              </svg>\n            </button>\n          )}\n\n          <div class=\"dropi-carousel-items-content\">\n            <div\n              class=\"dropi-carousel-items-container\"\n              ref={(el) => (this.itemsContainer = el)}\n              style={{ transition: this.isAnimating ? 'transform 0.5s ease' : 'none' }}\n            >\n              {items.map((item, i) => (\n                <div class=\"dropi-carousel-item\" style={{ flex: `0 0 ${itemFlexBasis}` }}>\n                  {typeof item === 'string' ? (\n                    <img src={item} alt={`Slide ${i + 1}`} />\n                  ) : (\n                    <slot name={`item-${i}`} />\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {this.showNavigators && items.length > this.numVisible && (\n            <button\n              class=\"dropi-carousel-nav dropi-carousel-next\"\n              disabled={!this.circular && this.internalPage >= this.totalPages - 1}\n              onClick={(e) => this.navForward(e)}\n              aria-label=\"Siguiente\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M9.341 17.5a.833.833 0 0 0 .589-.244l4.43-4.431a.833.833 0 0 0 0-1.178l-4.43-4.431a.834.834 0 0 0-1.179 1.178l3.83 3.829-3.83 3.829a.833.833 0 0 0 .59 1.421Z\" fill=\"#475066\" />\n              </svg>\n            </button>\n          )}\n        </div>\n\n        {this.showIndicators && this.totalPages > 1 && (\n          <ul class=\"dropi-carousel-indicators\">\n            {Array.from({ length: this.totalPages }).map((_, i) => (\n              <li class={{ active: i === this.internalPage }} onClick={() => this.onDotClick(i)}>\n                <button type=\"button\" aria-label={`Página ${i + 1}`} />\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-carousel.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-carousel/dropi-carousel.css?tag=dropi-carousel&encapsulation=shadow","src/components/dropi-carousel/dropi-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.dropi-carousel-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n  overflow: hidden;\n  padding: 0 var(--Size-4);\n}\n\n.dropi-carousel-content {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 1rem 0;\n  width: 100%;\n}\n\n.dropi-carousel-items-content {\n  overflow: hidden;\n  flex: 1;\n  padding: 0;\n  width: 100%;\n  max-width: 100%;\n}\n\n.dropi-carousel-items-container {\n  display: flex;\n  padding-bottom: var(--Size-3);\n  will-change: transform;\n}\n\n.dropi-carousel-item {\n  flex: 0 0 auto;\n  padding: 0 0.5rem;\n  box-sizing: border-box;\n}\n\n.dropi-carousel-item > * {\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n}\n\n.dropi-carousel-nav {\n  display: flex;\n  width: 40px;\n  height: 40px;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  flex-shrink: 0;\n  z-index: 1;\n  border-radius: var(--Border-5);\n  background: var(--Neutral-White, #fff);\n  box-shadow: var(--Shadow-medium);\n  border: none;\n  appearance: none;\n  padding: 0;\n}\n\n.dropi-carousel-nav:hover {\n  background: var(--Gray-Gray-50);\n}\n\n.dropi-carousel-nav:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n.dropi-carousel-prev {\n  margin-right: 1rem;\n}\n\n.dropi-carousel-next {\n  margin-left: 1rem;\n}\n\n.dropi-carousel-indicators {\n  display: flex;\n  justify-content: center;\n  gap: 0.5rem;\n  list-style: none;\n  padding: 1rem 0 0 0;\n  margin: 0;\n}\n\n.dropi-carousel-indicators li {\n  cursor: pointer;\n}\n\n.dropi-carousel-indicators li button {\n  width: 1rem;\n  height: 1rem;\n  border-radius: 50%;\n  border: 1px solid var(--Gray-Gray-100, #eceef4);\n  background: var(--Neutral-White, #fff);\n  cursor: pointer;\n  transition: all 0.2s;\n  padding: 0;\n}\n\n.dropi-carousel-indicators li.active button {\n  background: var(--Primary-Primary-500);\n  border-color: var(--Primary-Primary-500);\n}\n\n.dropi-carousel-indicators li:hover button {\n  background: var(--Gray-Gray-200);\n}\n\n/* Vertical Orientation */\n.vertical .dropi-carousel-content {\n  flex-direction: column;\n}\n\n.vertical .dropi-carousel-items-container {\n  flex-direction: column;\n}\n\n.vertical .dropi-carousel-prev {\n  margin: 0 0 1rem 0;\n}\n\n.vertical .dropi-carousel-next {\n  margin: 1rem 0 0 0;\n}\n\n/* Responsive fixes */\n@media (max-width: 768px) {\n  .dropi-carousel-container {\n    padding: 0;\n  }\n  .dropi-carousel-item {\n    padding: 0 0.25rem;\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'dropi-carousel',\n  styleUrl: 'dropi-carousel.css',\n  shadow: true,\n})\nexport class DropiCarousel {\n  @Element() el: HTMLElement;\n\n  /** Items to display (Array of URLs or objects) */\n  @Prop() value: any[] | string = [];\n  /** Active page index */\n  @Prop({ mutable: true }) page: number = 0;\n  /** Number of items visible per page */\n  @Prop() numVisible: number = 1;\n  /** Number of items to scroll per click */\n  @Prop() numScroll: number = 1;\n  /** Orientation of the carousel */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n  /** Show navigation arrows */\n  @Prop() showNavigators: any = true;\n  /** Show dot indicators */\n  @Prop() showIndicators: any = true;\n  /** Autoplay interval in ms (0 = disabled) */\n  @Prop() autoplayInterval: number = 0;\n  /** Infinite scrolling */\n  @Prop() circular: any = false;\n\n  @State() private parsedValue: any[] = [];\n  @State() private internalPage: number = 0;\n  @State() private isAnimating: boolean = false;\n  @State() private totalPages: number = 0;\n\n  private itemsContainer: HTMLElement;\n  private timer: any;\n\n  @Event() dropiPageChange: EventEmitter<number>;\n  @Event() dropiPage: EventEmitter<any>;\n\n  @Watch('value')\n  handleValue(val: any[] | string) {\n    this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);\n    this.updateTotalPages();\n    this.updateTransform();\n  }\n\n  @Watch('page')\n  handlePage(val: number) {\n    this.internalPage = val;\n    this.updateTransform();\n  }\n\n  componentWillLoad() {\n    if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {\n      const attrValue = this.el.getAttribute('value');\n      if (attrValue) this.value = attrValue;\n    }\n    this.handleValue(this.value);\n    this.internalPage = this.page;\n  }\n\n  componentDidLoad() {\n    this.updateTransform();\n    if (this.autoplayInterval > 0) {\n      this.startAutoplay();\n    }\n    window.addEventListener('resize', this.onResize);\n  }\n\n  disconnectedCallback() {\n    this.stopAutoplay();\n    window.removeEventListener('resize', this.onResize);\n  }\n\n  private onResize = () => {\n    this.updateTotalPages();\n    this.updateTransform();\n  };\n\n  private startAutoplay() {\n    this.timer = setInterval(() => this.navForward(), this.autoplayInterval);\n  }\n\n  private stopAutoplay() {\n    if (this.timer) clearInterval(this.timer);\n  }\n\n  private updateTotalPages() {\n    if (!this.parsedValue.length || this.parsedValue.length <= this.numVisible) {\n      this.totalPages = 1;\n      return;\n    }\n    const totalItems = this.parsedValue.length;\n    const remainingItems = totalItems - this.numVisible;\n    this.totalPages = Math.ceil(remainingItems / this.numScroll) + 1;\n  }\n\n  private updateTransform() {\n    if (!this.itemsContainer) return;\n    \n    const prop = this.orientation === 'vertical' ? 'translateY' : 'translateX';\n    const firstItem = this.itemsContainer.querySelector('.dropi-carousel-item') as HTMLElement;\n    if (!firstItem) return;\n\n    const itemSize = this.orientation === 'vertical' ? firstItem.offsetHeight : firstItem.offsetWidth;\n    const itemsScrolled = this.internalPage * this.numScroll;\n    const maxScroll = Math.max(0, this.parsedValue.length - this.numVisible);\n    const safeScroll = Math.min(itemsScrolled, maxScroll);\n    \n    const translateValue = -(safeScroll * itemSize);\n    this.itemsContainer.style.transform = `${prop}(${translateValue}px)`;\n  }\n\n  private navForward = (e?: Event) => {\n    if (e) e.preventDefault();\n    if (this.circular || this.internalPage < this.totalPages - 1) {\n      this.isAnimating = true;\n      this.internalPage = (this.internalPage + 1) % this.totalPages;\n      this.page = this.internalPage;\n      this.updateTransform();\n      this.dropiPageChange.emit(this.internalPage);\n      setTimeout(() => (this.isAnimating = false), 500);\n    }\n  };\n\n  private navBackward = (e?: Event) => {\n    if (e) e.preventDefault();\n    if (this.circular || this.internalPage > 0) {\n      this.isAnimating = true;\n      this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;\n      this.page = this.internalPage;\n      this.updateTransform();\n      this.dropiPageChange.emit(this.internalPage);\n      setTimeout(() => (this.isAnimating = false), 500);\n    }\n  };\n\n  private onDotClick(index: number) {\n    this.isAnimating = true;\n    this.internalPage = index;\n    this.page = this.internalPage;\n    this.updateTransform();\n    this.dropiPageChange.emit(this.internalPage);\n    setTimeout(() => (this.isAnimating = false), 500);\n  }\n\n  render() {\n    const items = this.parsedValue;\n    if (!items.length) return null;\n\n    const itemFlexBasis = `${100 / this.numVisible}%`;\n\n    return (\n      <div class={{ 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' }}>\n        <div class=\"dropi-carousel-content\">\n          {this.showNavigators && items.length > this.numVisible && (\n            <button\n              class=\"dropi-carousel-nav dropi-carousel-prev\"\n              disabled={!this.circular && this.internalPage === 0}\n              onClick={(e) => this.navBackward(e)}\n              aria-label=\"Anterior\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M14.659 17.5a.833.833 0 0 1-.589-.244l-4.43-4.431a.833.833 0 0 1 0-1.178l4.43-4.431a.834.834 0 0 1 1.179 1.178L11.42 12.25l3.83 3.829a.833.833 0 0 1-.59 1.421Z\" fill=\"#475066\" />\n              </svg>\n            </button>\n          )}\n\n          <div class=\"dropi-carousel-items-content\">\n            <div\n              class=\"dropi-carousel-items-container\"\n              ref={(el) => (this.itemsContainer = el)}\n              style={{ transition: this.isAnimating ? 'transform 0.5s ease' : 'none' }}\n            >\n              {items.map((item, i) => (\n                <div class=\"dropi-carousel-item\" style={{ flex: `0 0 ${itemFlexBasis}` }}>\n                  {typeof item === 'string' ? (\n                    <img src={item} alt={`Slide ${i + 1}`} />\n                  ) : (\n                    <slot name={`item-${i}`} />\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {this.showNavigators && items.length > this.numVisible && (\n            <button\n              class=\"dropi-carousel-nav dropi-carousel-next\"\n              disabled={!this.circular && this.internalPage >= this.totalPages - 1}\n              onClick={(e) => this.navForward(e)}\n              aria-label=\"Siguiente\"\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M9.341 17.5a.833.833 0 0 0 .589-.244l4.43-4.431a.833.833 0 0 0 0-1.178l-4.43-4.431a.834.834 0 0 0-1.179 1.178l3.83 3.829-3.83 3.829a.833.833 0 0 0 .59 1.421Z\" fill=\"#475066\" />\n              </svg>\n            </button>\n          )}\n        </div>\n\n        {this.showIndicators && this.totalPages > 1 && (\n          <ul class=\"dropi-carousel-indicators\">\n            {Array.from({ length: this.totalPages }).map((_, i) => (\n              <li class={{ active: i === this.internalPage }} onClick={() => this.onDotClick(i)}>\n                <button type=\"button\" aria-label={`Página ${i + 1}`} />\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-checkbox-selection-list.entry.js

@@ -5,8 +5,8 @@ const dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}*,*:
 const DropiCheckboxSelectionList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.checkedValues = createEvent(this, "checkedValues", 7);
-        this.onSearch = createEvent(this, "onSearch", 7);
+        this.dropiCheckedValues = createEvent(this, "dropiCheckedValues", 7);
+        this.dropiSearch = createEvent(this, "dropiSearch", 7);
     }
     /** Options array or JSON string */
     options = [];
@@ -26,9 +26,9 @@ const DropiCheckboxSelectionList = class {
     selected = [];
     parsedOptions = [];
     /** Emitted when selection changes — matches Angular 'checkedValues' */
-    checkedValues;
+    dropiCheckedValues;
     /** Emitted on search — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -48,14 +48,14 @@ const DropiCheckboxSelectionList = class {
         else {
             this.selected = this.selected.includes(id) ? [] : [id];
         }
-        this.checkedValues.emit(this.selected);
+        this.dropiCheckedValues.emit(this.selected);
     }
     render() {
         const items = this.filtered;
-        return (h("div", { key: 'a86957a361ddab935966496e85da0474d6c7618a', class: "csl" }, this.showFilter && (h("div", { key: 'c6e6d3c7386a788c0e3141ac77b78b597020e43d', class: "csl__search" }, h("dropi-icon", { key: '5746663be651673a23e8fc062febad9a920512de', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: '47f43fae660a7b3d6c8b56ea0c2bb1f94a22e366', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: '95774833547807d6001525158bf199883661b649', class: "csl" }, this.showFilter && (h("div", { key: '13f6bfd33150cdf138e90b93fc8121dfcc311050', class: "csl__search" }, h("dropi-icon", { key: '4edf5c21eeac0aa442e58845621b7715d8484c1b', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: '40071d0c189c7fd1f1bf8090ebe1d64ce9605602', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
-                this.onSearch.emit(this.filterText);
-            } }), this.filterText && (h("button", { key: '96faed8cb5ce7660af9735e73622dc31570e1daa', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, h("dropi-icon", { key: '2fc4bfceb57c9fc2506db5e7c238e7bf48f45cb9', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), h("div", { key: '283d6e1127fbfa7e8206133a6a32bff04e8b2ebc', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+                this.dropiSearch.emit(this.filterText);
+            } }), this.filterText && (h("button", { key: 'a560cab7ce53e57e036696194054286aa1dd6fd9', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, h("dropi-icon", { key: 'f1ae7e38fcb954761edb02bb32af139fb5eea610', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), h("div", { key: 'e93dfccc8215e96640ebe8c69f33f0bff5f655f2', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
             const checked = this.selected.includes(opt.id);
             return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
         })))));

package/dist/dropi-ui/dropi-checkbox-selection-list.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-checkbox-selection-list.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.css?tag=dropi-checkbox-selection-list&encapsulation=shadow","src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.csl__search {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  margin-bottom: var(--Size-2, 8px);\n}\n\n.csl__search-input {\n  flex: 1; border: none; outline: none;\n  font-size: var(--font-size-s, 12px); font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d); background: transparent;\n}\n\n.csl__clear { display: flex; background: none; border: none; padding: 0; cursor: pointer; }\n\n.csl__list { display: flex; flex-direction: column; }\n\n.csl__item {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  cursor: pointer;\n  border-radius: var(--Border-1, 4px);\n  transition: background 0.15s;\n}\n.csl__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.csl__icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }\n\n.csl__label { font-size: var(--font-size-s, 12px); color: var(--Gray-Gray-700, #32394d); flex: 1; }\n\n.csl__empty {\n  padding: var(--Size-4, 16px);\n  text-align: center;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-400, #858ea6);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface CheckboxOption {\n  id: string | number;\n  label: string;\n  icon?: string;\n  [key: string]: any;\n}\n\n/**\n * @component dropi-checkbox-selection-list\n * Searchable list of checkbox options with multi-select support.\n */\n@Component({\n  tag: 'dropi-checkbox-selection-list',\n  styleUrl: 'dropi-checkbox-selection-list.css',\n  shadow: true,\n})\nexport class DropiCheckboxSelectionList {\n  /** Options array or JSON string */\n  @Prop() options: CheckboxOption[] | string = [];\n  /** Show search filter */\n  @Prop() showFilter: boolean = true;\n  /** Search placeholder */\n  @Prop() filterPlaceholder: string = 'Search';\n  /** Show \"no results\" message */\n  @Prop() showNotFound: boolean = true;\n  /** Empty state message */\n  @Prop() notFoundMessage: string = 'No related results found';\n  /** Allow multiple selection */\n  @Prop() multiSelect: boolean = true;\n  /** Debounce delay in ms for search input (matches Angular `searchDelay`) */\n  @Prop() searchDelay: number = 100;\n\n  @State() private filterText: string = '';\n  @State() private selected: (string | number)[] = [];\n  @State() private parsedOptions: CheckboxOption[] = [];\n\n  /** Emitted when selection changes — matches Angular 'checkedValues' */\n  @Event() checkedValues: EventEmitter<(string | number)[]>;\n  /** Emitted on search — matches Angular 'onSearch' */\n  @Event() onSearch: EventEmitter<string>;\n\n  @Watch('options')\n  optionsChanged(val: CheckboxOption[] | string) {\n    this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  componentWillLoad() { this.optionsChanged(this.options); }\n\n  private get filtered(): CheckboxOption[] {\n    if (!this.filterText) return this.parsedOptions;\n    const q = this.filterText.toLowerCase();\n    return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));\n  }\n\n  private toggle(id: string | number) {\n    if (this.multiSelect) {\n      this.selected = this.selected.includes(id)\n        ? this.selected.filter(s => s !== id)\n        : [...this.selected, id];\n    } else {\n      this.selected = this.selected.includes(id) ? [] : [id];\n    }\n    this.checkedValues.emit(this.selected);\n  }\n\n  render() {\n    const items = this.filtered;\n\n    return (\n      <div class=\"csl\">\n        {this.showFilter && (\n          <div class=\"csl__search\">\n            <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n            <input\n              class=\"csl__search-input\"\n              type=\"text\"\n              placeholder={this.filterPlaceholder}\n              value={this.filterText}\n              onInput={(e) => {\n                this.filterText = (e.target as HTMLInputElement).value;\n                this.onSearch.emit(this.filterText);\n              }}\n            />\n            {this.filterText && (\n              <button class=\"csl__clear\" onClick={() => { this.filterText = ''; this.onSearch.emit(''); }}>\n                <dropi-icon name=\"Close-small\" iconWidth=\"14px\" iconHeight=\"14px\" color=\"Gray-Gray-400\" />\n              </button>\n            )}\n          </div>\n        )}\n\n        <div class=\"csl__list\">\n          {items.length === 0 && this.showNotFound ? (\n            <div class=\"csl__empty\">{this.notFoundMessage}</div>\n          ) : (\n            items.map(opt => {\n              const checked = this.selected.includes(opt.id);\n              return (\n                <div class=\"csl__item\" key={opt.id} onClick={() => this.toggle(opt.id)}>\n                  <dropi-checkbox checked={checked} />\n                  {opt.icon && <img class=\"csl__icon\" src={opt.icon} alt={opt.label} />}\n                  <span class=\"csl__label\">{opt.label}</span>\n                </div>\n              );\n            })\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-checkbox-selection-list.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.css?tag=dropi-checkbox-selection-list&encapsulation=shadow","src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.csl__search {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  margin-bottom: var(--Size-2, 8px);\n}\n\n.csl__search-input {\n  flex: 1; border: none; outline: none;\n  font-size: var(--font-size-s, 12px); font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d); background: transparent;\n}\n\n.csl__clear { display: flex; background: none; border: none; padding: 0; cursor: pointer; }\n\n.csl__list { display: flex; flex-direction: column; }\n\n.csl__item {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  cursor: pointer;\n  border-radius: var(--Border-1, 4px);\n  transition: background 0.15s;\n}\n.csl__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.csl__icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }\n\n.csl__label { font-size: var(--font-size-s, 12px); color: var(--Gray-Gray-700, #32394d); flex: 1; }\n\n.csl__empty {\n  padding: var(--Size-4, 16px);\n  text-align: center;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-400, #858ea6);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface CheckboxOption {\n  id: string | number;\n  label: string;\n  icon?: string;\n  [key: string]: any;\n}\n\n/**\n * @component dropi-checkbox-selection-list\n * Searchable list of checkbox options with multi-select support.\n */\n@Component({\n  tag: 'dropi-checkbox-selection-list',\n  styleUrl: 'dropi-checkbox-selection-list.css',\n  shadow: true,\n})\nexport class DropiCheckboxSelectionList {\n  /** Options array or JSON string */\n  @Prop() options: CheckboxOption[] | string = [];\n  /** Show search filter */\n  @Prop() showFilter: boolean = true;\n  /** Search placeholder */\n  @Prop() filterPlaceholder: string = 'Search';\n  /** Show \"no results\" message */\n  @Prop() showNotFound: boolean = true;\n  /** Empty state message */\n  @Prop() notFoundMessage: string = 'No related results found';\n  /** Allow multiple selection */\n  @Prop() multiSelect: boolean = true;\n  /** Debounce delay in ms for search input (matches Angular `searchDelay`) */\n  @Prop() searchDelay: number = 100;\n\n  @State() private filterText: string = '';\n  @State() private selected: (string | number)[] = [];\n  @State() private parsedOptions: CheckboxOption[] = [];\n\n  /** Emitted when selection changes — matches Angular 'checkedValues' */\n  @Event() dropiCheckedValues: EventEmitter<(string | number)[]>;\n  /** Emitted on search — matches Angular 'onSearch' */\n  @Event() dropiSearch: EventEmitter<string>;\n\n  @Watch('options')\n  optionsChanged(val: CheckboxOption[] | string) {\n    this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  componentWillLoad() { this.optionsChanged(this.options); }\n\n  private get filtered(): CheckboxOption[] {\n    if (!this.filterText) return this.parsedOptions;\n    const q = this.filterText.toLowerCase();\n    return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));\n  }\n\n  private toggle(id: string | number) {\n    if (this.multiSelect) {\n      this.selected = this.selected.includes(id)\n        ? this.selected.filter(s => s !== id)\n        : [...this.selected, id];\n    } else {\n      this.selected = this.selected.includes(id) ? [] : [id];\n    }\n    this.dropiCheckedValues.emit(this.selected);\n  }\n\n  render() {\n    const items = this.filtered;\n\n    return (\n      <div class=\"csl\">\n        {this.showFilter && (\n          <div class=\"csl__search\">\n            <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n            <input\n              class=\"csl__search-input\"\n              type=\"text\"\n              placeholder={this.filterPlaceholder}\n              value={this.filterText}\n              onInput={(e) => {\n                this.filterText = (e.target as HTMLInputElement).value;\n                this.dropiSearch.emit(this.filterText);\n              }}\n            />\n            {this.filterText && (\n              <button class=\"csl__clear\" onClick={() => { this.filterText = ''; this.dropiSearch.emit(''); }}>\n                <dropi-icon name=\"Close-small\" iconWidth=\"14px\" iconHeight=\"14px\" color=\"Gray-Gray-400\" />\n              </button>\n            )}\n          </div>\n        )}\n\n        <div class=\"csl__list\">\n          {items.length === 0 && this.showNotFound ? (\n            <div class=\"csl__empty\">{this.notFoundMessage}</div>\n          ) : (\n            items.map(opt => {\n              const checked = this.selected.includes(opt.id);\n              return (\n                <div class=\"csl__item\" key={opt.id} onClick={() => this.toggle(opt.id)}>\n                  <dropi-checkbox checked={checked} />\n                  {opt.icon && <img class=\"csl__icon\" src={opt.icon} alt={opt.label} />}\n                  <span class=\"csl__label\">{opt.label}</span>\n                </div>\n              );\n            })\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-checkbox.entry.js

@@ -5,27 +5,27 @@ const dropiCheckboxCss = () => `:host{display:inline-block}*,*::before,*::after{
 const DropiCheckbox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
     }
     /** Whether the checkbox is checked */
     checked = false;
     /** Whether the checkbox is disabled */
     disabled = false;
     /** Emitted when the checked state changes */
-    onChange;
+    dropiChange;
     changeState() {
         if (this.disabled)
             return;
         this.checked = !this.checked;
-        this.onChange.emit(this.checked);
+        this.dropiChange.emit(this.checked);
     }
     render() {
-        return (h("div", { key: 'fdc1c54733617c0dab1ae11050d90650dc3eba91', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '6329c1a53e8b9f85ea26ca01afb920583570e85f', class: {
+        return (h("div", { key: '071505574decbf6b138256f73affe101c01080ef', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '03e7ec24a87e22c4a5fe1d94cc4ca1fe349d6e6f', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, h("svg", { key: '50b1ebd160e1ee6b28ef23651f1e12afc9406f8a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '518070eaa2902d4cdc5e905f8a80d06b3d044f3d', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+            } }, h("svg", { key: 'c56f01268919995cc7aac0173edf44a01a62e13e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '575f863c9e82e862ea7049bf633b0d86ba374bb2', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
     }
     static get formAssociated() { return true; }
 };

package/dist/dropi-ui/dropi-checkbox.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-checkbox.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,8qBAA8qB,CAAC;;MCalsB,aAAa,GAAA,MAAA;;;;;;IAEgB,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,QAAQ;IAET,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;QAC5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGlC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EACrE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;gBACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,smCAAsmC,EACxmC,IAAI,EAAC,SAAS,EAAA,CACd,CACE,CACF,CACF;;;;;;;;","names":[],"sources":["src/components/dropi-checkbox/dropi-checkbox.css?tag=dropi-checkbox&encapsulation=shadow","src/components/dropi-checkbox/dropi-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.container-dropi-checkbox {\n  display: inline-block;\n}\n\n.check {\n  width: 20px;\n  height: 20px;\n  border-radius: var(--Border-1, 4px);\n  cursor: pointer;\n  transition:\n    background-color 0.3s ease-in-out,\n    border-style 0.3s ease-in-out;\n}\n\n.noCheck {\n  border-style: solid;\n  border-width: 2px;\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.noCheck svg {\n  visibility: hidden;\n}\n\n.isCheck {\n  display: flex;\n  background-color: var(--Primary-Primary-500, #f49a3d);\n  justify-content: center;\n  align-items: center;\n}\n\n.disabled {\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  border-color: var(--Gray-Gray-100, #e6eaf2);\n  cursor: not-allowed;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-checkbox\n * A styled checkbox that emits change events.\n * Supports form association via native `<input type=\"checkbox\">` internals.\n */\n@Component({\n  tag: 'dropi-checkbox',\n  styleUrl: 'dropi-checkbox.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiCheckbox {\n  /** Whether the checkbox is checked */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Emitted when the checked state changes */\n  @Event() onChange: EventEmitter<boolean>;\n\n  private changeState() {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.onChange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <div class=\"container-dropi-checkbox\" onClick={() => this.changeState()}>\n        <div\n          class={{\n            check: true,\n            isCheck: this.checked,\n            noCheck: !this.checked,\n            disabled: this.disabled,\n          }}\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z\"\n              fill=\"#FFFFFF\"\n            />\n          </svg>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-checkbox.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,8qBAA8qB,CAAC;;MCalsB,aAAa,GAAA,MAAA;;;;;;IAEgB,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,WAAW;IAEZ,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;QAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGrC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EACrE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;gBACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,smCAAsmC,EACxmC,IAAI,EAAC,SAAS,EAAA,CACd,CACE,CACF,CACF;;;;;;;;","names":[],"sources":["src/components/dropi-checkbox/dropi-checkbox.css?tag=dropi-checkbox&encapsulation=shadow","src/components/dropi-checkbox/dropi-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.container-dropi-checkbox {\n  display: inline-block;\n}\n\n.check {\n  width: 20px;\n  height: 20px;\n  border-radius: var(--Border-1, 4px);\n  cursor: pointer;\n  transition:\n    background-color 0.3s ease-in-out,\n    border-style 0.3s ease-in-out;\n}\n\n.noCheck {\n  border-style: solid;\n  border-width: 2px;\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.noCheck svg {\n  visibility: hidden;\n}\n\n.isCheck {\n  display: flex;\n  background-color: var(--Primary-Primary-500, #f49a3d);\n  justify-content: center;\n  align-items: center;\n}\n\n.disabled {\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  border-color: var(--Gray-Gray-100, #e6eaf2);\n  cursor: not-allowed;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-checkbox\n * A styled checkbox that emits change events.\n * Supports form association via native `<input type=\"checkbox\">` internals.\n */\n@Component({\n  tag: 'dropi-checkbox',\n  styleUrl: 'dropi-checkbox.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiCheckbox {\n  /** Whether the checkbox is checked */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Emitted when the checked state changes */\n  @Event() dropiChange: EventEmitter<boolean>;\n\n  private changeState() {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.dropiChange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <div class=\"container-dropi-checkbox\" onClick={() => this.changeState()}>\n        <div\n          class={{\n            check: true,\n            isCheck: this.checked,\n            noCheck: !this.checked,\n            disabled: this.disabled,\n          }}\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z\"\n              fill=\"#FFFFFF\"\n            />\n          </svg>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-chips.entry.js

@@ -5,7 +5,7 @@ const dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-
 const DropiChips = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClose = createEvent(this, "onClose", 7);
+        this.dropiClose = createEvent(this, "dropiClose", 7);
     }
     /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
     customStyle = 'fill';
@@ -18,9 +18,9 @@ const DropiChips = class {
     /** Icon name (when type = 'icon') */
     icon = '';
     /** Emitted when the close icon is clicked */
-    onClose;
+    dropiClose;
     render() {
-        return (h("div", { key: '1d2faf302cc3eb832d55f46f98a7817fb616e4e1', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '3014d189c71a8d3bc23f11caf1181285c6b1b0ed', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: 'b8c57ece5d9451a95aee7d2e90bfe294e788dfc8', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), h("span", { key: 'e141b08e2b7c07e45eb065a001c53f40fe36a757', class: "chip__text" }, h("slot", { key: 'aa2c06f8e00b37492034ea0950603ffa3a7638d7' })), this.showIcon && (h("button", { key: 'ea9d1674848c27b06d6e92a0a5bd4fcf8de499a4', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '0a67633f6f3c898958359730b635430e53d7565c', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
+        return (h("div", { key: '394a3ff5219535e9f4e1d6c9fbb320c32f1ce2e7', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: 'c7ea7ce319e2ab0a179f7b0b61ad9fe39be7c1ec', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '67e2edfbe37af83868a665cf65a85ecc27b7cfb5', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), h("span", { key: '1916b1796d69cf6742177b8f4013315323bdf16f', class: "chip__text" }, h("slot", { key: '167e1b230b1c4406ba3f40ba7783966c6b523c96' })), this.showIcon && (h("button", { key: '118d46db1615e9ed14485500b5a754407c361139', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '1639e4ae068d0361512469d2915b392101b2b923', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
     }
 };
 DropiChips.style = dropiChipsCss();

package/dist/dropi-ui/dropi-chips.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-chips.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,y9BAAy9B,CAAC;;MCe1+B,UAAU,GAAA,MAAA;;;;;;IAEb,WAAW,GAAc,MAAM;;IAE/B,IAAI,GAAa,MAAM;;IAEvB,MAAM,GAAW,EAAE;;IAEnB,QAAQ,GAAY,KAAK;;IAEzB,IAAI,GAAW,EAAE;;AAGhB,IAAA,OAAO;IAEhB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAE9D,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,KACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAC,EAAE,EAAA,CAAG,CACtD,EAEA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAChC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,GAAG,CAC/G,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EAEN,IAAI,CAAC,QAAQ,KACZ,+DAAQ,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EACnF,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,CAAG,CACnF,CACV,CAEG;;;;;;;","names":[],"sources":["src/components/dropi-chips/dropi-chips.css?tag=dropi-chips&encapsulation=shadow","src/components/dropi-chips/dropi-chips.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--Size-1, 4px);\n  height: 24px;\n  padding: 0 var(--Size-2, 8px);\n  border-radius: var(--Border-2, 8px);\n  font-size: var(--font-size-xs, 10px);\n  font-family: inherit;\n  width: fit-content;\n  max-width: 200px;\n}\n\n/* ── Style variants ─────────────────────────────────────── */\n.chip--filters {\n  background: var(--Primary-Primary-50, #fff5eb);\n  border: 1px solid var(--Primary-Primary-200, #fbd4a3);\n  color: var(--Primary-Primary-600, #d4872e);\n}\n\n.chip--fill {\n  background: var(--Gray-Gray-100, #e6eaf2);\n  border: 1px solid transparent;\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n/* ── Avatar ─────────────────────────────────────────────── */\n.chip__avatar {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n/* ── Label ──────────────────────────────────────────────── */\n.chip__text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n/* ── Close button ───────────────────────────────────────── */\n.chip__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.7;\n  transition: opacity 0.15s;\n}\n\n.chip__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ChipStyle = 'filtrers' | 'fill';\nexport type ChipType = 'icon' | 'text' | 'avatar';\n\n/**\n * @component dropi-chips\n * Chip/tag-like element with optional icon, avatar, and close button.\n * Use <slot> for the chip label text.\n */\n@Component({\n  tag: 'dropi-chips',\n  styleUrl: 'dropi-chips.css',\n  shadow: true,\n})\nexport class DropiChips {\n  /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */\n  @Prop() customStyle: ChipStyle = 'fill';\n  /** Content type */\n  @Prop() type: ChipType = 'icon';\n  /** Avatar image URL (when type = 'avatar') */\n  @Prop() urlImg: string = '';\n  /** Show the close/remove icon */\n  @Prop() showIcon: boolean = false;\n  /** Icon name (when type = 'icon') */\n  @Prop() icon: string = '';\n\n  /** Emitted when the close icon is clicked */\n  @Event() onClose: EventEmitter<void>;\n\n  render() {\n    return (\n      <div class={{ 'chip': true, [`chip--${this.customStyle}`]: true }}>\n\n        {this.type === 'avatar' && this.urlImg && (\n          <img class=\"chip__avatar\" src={this.urlImg} alt=\"\" />\n        )}\n\n        {this.type === 'icon' && this.icon && (\n          <dropi-icon class=\"chip__pre-icon\" name={this.icon} iconWidth=\"14px\" iconHeight=\"14px\" color=\"currentColor\" />\n        )}\n\n        <span class=\"chip__text\">\n          <slot />\n        </span>\n\n        {this.showIcon && (\n          <button class=\"chip__close\" onClick={() => this.onClose.emit()} aria-label=\"Eliminar\">\n            <dropi-icon name=\"Cross-circle\" iconWidth=\"14px\" iconHeight=\"14px\" color=\"currentColor\" />\n          </button>\n        )}\n\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-chips.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,y9BAAy9B,CAAC;;MCe1+B,UAAU,GAAA,MAAA;;;;;;IAEb,WAAW,GAAc,MAAM;;IAE/B,IAAI,GAAa,MAAM;;IAEvB,MAAM,GAAW,EAAE;;IAEnB,QAAQ,GAAY,KAAK;;IAEzB,IAAI,GAAW,EAAE;;AAGhB,IAAA,UAAU;IAEnB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAE9D,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,KACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAC,EAAE,EAAA,CAAG,CACtD,EAEA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAChC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,GAAG,CAC/G,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EAEN,IAAI,CAAC,QAAQ,KACZ,+DAAQ,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EACtF,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,CAAG,CACnF,CACV,CAEG;;;;;;;","names":[],"sources":["src/components/dropi-chips/dropi-chips.css?tag=dropi-chips&encapsulation=shadow","src/components/dropi-chips/dropi-chips.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--Size-1, 4px);\n  height: 24px;\n  padding: 0 var(--Size-2, 8px);\n  border-radius: var(--Border-2, 8px);\n  font-size: var(--font-size-xs, 10px);\n  font-family: inherit;\n  width: fit-content;\n  max-width: 200px;\n}\n\n/* ── Style variants ─────────────────────────────────────── */\n.chip--filters {\n  background: var(--Primary-Primary-50, #fff5eb);\n  border: 1px solid var(--Primary-Primary-200, #fbd4a3);\n  color: var(--Primary-Primary-600, #d4872e);\n}\n\n.chip--fill {\n  background: var(--Gray-Gray-100, #e6eaf2);\n  border: 1px solid transparent;\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n/* ── Avatar ─────────────────────────────────────────────── */\n.chip__avatar {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n/* ── Label ──────────────────────────────────────────────── */\n.chip__text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n/* ── Close button ───────────────────────────────────────── */\n.chip__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.7;\n  transition: opacity 0.15s;\n}\n\n.chip__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ChipStyle = 'filtrers' | 'fill';\nexport type ChipType = 'icon' | 'text' | 'avatar';\n\n/**\n * @component dropi-chips\n * Chip/tag-like element with optional icon, avatar, and close button.\n * Use <slot> for the chip label text.\n */\n@Component({\n  tag: 'dropi-chips',\n  styleUrl: 'dropi-chips.css',\n  shadow: true,\n})\nexport class DropiChips {\n  /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */\n  @Prop() customStyle: ChipStyle = 'fill';\n  /** Content type */\n  @Prop() type: ChipType = 'icon';\n  /** Avatar image URL (when type = 'avatar') */\n  @Prop() urlImg: string = '';\n  /** Show the close/remove icon */\n  @Prop() showIcon: boolean = false;\n  /** Icon name (when type = 'icon') */\n  @Prop() icon: string = '';\n\n  /** Emitted when the close icon is clicked */\n  @Event() dropiClose: EventEmitter<void>;\n\n  render() {\n    return (\n      <div class={{ 'chip': true, [`chip--${this.customStyle}`]: true }}>\n\n        {this.type === 'avatar' && this.urlImg && (\n          <img class=\"chip__avatar\" src={this.urlImg} alt=\"\" />\n        )}\n\n        {this.type === 'icon' && this.icon && (\n          <dropi-icon class=\"chip__pre-icon\" name={this.icon} iconWidth=\"14px\" iconHeight=\"14px\" color=\"currentColor\" />\n        )}\n\n        <span class=\"chip__text\">\n          <slot />\n        </span>\n\n        {this.showIcon && (\n          <button class=\"chip__close\" onClick={() => this.dropiClose.emit()} aria-label=\"Eliminar\">\n            <dropi-icon name=\"Cross-circle\" iconWidth=\"14px\" iconHeight=\"14px\" color=\"currentColor\" />\n          </button>\n        )}\n\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-color-picker.entry.js

@@ -301,10 +301,10 @@ const DropiColorPicker = class {
         }
     }
     render() {
-        return (h("div", { key: '2ee2bd6abd837388d8169961f6b1024da228b453', class: "general-container" }, h("div", { key: '15416c1a844daf774dda53f1c08bbe6b15435b64', class: "main-input-container" }, h("div", { key: 'e08aacd3ebb059a8467cf6f597d2b3bb3419e286', class: "overlay", onClick: () => this.showEditor() }), h("div", { key: 'dda8addee7afb351fb1f6c18dda516d29259220d', class: "line-color-preview" }, h("div", { key: 'b242eac802dc0c1d0a9965fb6fc9b6f010408ae2', class: "color-preview", style: { background: this.currentColor } })), h("div", { key: '8dddc6632dddae52cc58d964ee50cae1e6460b12', class: "color-info" }, h("input", { key: '7181e30bddae8005260d285653425cd5cad2386e', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), h("div", { key: '0ad3b547299fc1a4ccab9ddb7efebd7962fd7855', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, h("div", { key: 'c49847d5a6ca7a90f27889afe26f6c30c1959676', class: "main-color-canvas-container" }, h("canvas", { key: '44531a25415492782d70d070aacf17797f9e3818', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), h("div", { key: '325bc14afacafa6dddd0a9bc837c6448ff803bd8', class: "color-selector-pointer", style: {
+        return (h("div", { key: '18ea41f637e46cb88d57cb2bc513f5e6e3ef9617', class: "general-container" }, h("div", { key: '653748e883bc4deaf05739ced8e516f857a7a26b', class: "main-input-container" }, h("div", { key: 'b8a4e60b25d6017c3987fa4ea3420c78e3400db0', class: "overlay", onClick: () => this.showEditor() }), h("div", { key: 'e22f4b3e95f099e2444a46ee560fefb9f6556b65', class: "line-color-preview" }, h("div", { key: 'cf513dbb5ee9652a6d20aad0608508cae3e000af', class: "color-preview", style: { background: this.currentColor } })), h("div", { key: '025b264ae8aca0fca79f662c58250eea43ccf0e7', class: "color-info" }, h("input", { key: '60a379b53bd0cf0bb1f80d5e1bd5b4c4038686f9', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), h("div", { key: '06e15b97ba156a9aa9dec9f60f2b24c924c0ac53', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, h("div", { key: 'ea9df13cdf62ae1378b600dc7689df61bec5fc9b', class: "main-color-canvas-container" }, h("canvas", { key: '5d73426ccfcccca44102300588472fe5e54744f9', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), h("div", { key: 'e710e7f8c1558ad20dcfb0f03c98969d9aee5e91', class: "color-selector-pointer", style: {
                 left: `${(this.saturation / 100) * 256}px`,
                 top: `${((100 - this.currentVal) / 100) * 150}px`
-            } })), h("div", { key: 'ab6d2a987b4c317fa218e70a1602ea829505fe0a', class: "slider-container" }, h("div", { key: 'fe9ae897de10c04322653870cb9e5b79f61a2b86', class: "slider-group" }, h("div", { key: 'f39f1935c0410509f6ecbf69b718730201d70be7', class: "hue-slider-container" }, h("canvas", { key: '6a08c8dd36f3c9d70aa0f0438006bc4efa4df401', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), h("div", { key: 'a91a4f4469e3152b24bf1e7dfd3d4738eb17f661', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), h("div", { key: '2a45b1e24dcb447e515d8dbfac2ecd4032661af8', class: "slider-group" }, h("div", { key: 'ec945cd912ecf046ca16e7520bae48d3e998f8fd', class: "opacity-slider-container" }, h("canvas", { key: 'f181f9a8b16274d94377f3dd300c3bff231088df', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), h("div", { key: '2e246b9e62991569c60024ac4f8b1ae32543e03e', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), h("div", { key: 'c8c539dda06f8ce70b4c669a32e56cb693132f49', class: "color-info" }, h("div", { key: '5939e97e1331e57a5837e868ea6088b069e3c3eb', class: "color-label" }, "HEX"), h("input", { key: '321cebcb041223d4cb6c072f310720edcdb2391c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
+            } })), h("div", { key: '239c7986572fade46b913629bbd374ec6f15e6fb', class: "slider-container" }, h("div", { key: '35c4231f321c42fa95f362da5bf211daf1671c79', class: "slider-group" }, h("div", { key: '20be2dc7eff210e31ab3215da10473a23db921f1', class: "hue-slider-container" }, h("canvas", { key: '0795238e2a59747c4bfbd3437a2a2fd9396dc9e2', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), h("div", { key: '17296210ecef2a958a46f23971a04da61d59402e', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), h("div", { key: 'af7504663561d0e811ae7ef163cce80cfa256187', class: "slider-group" }, h("div", { key: '7f3f01cfb0e4ca93403dad15787ab8acd7c1cd82', class: "opacity-slider-container" }, h("canvas", { key: '9bac8eca65bfba529748eb9788fc749b87115ca6', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), h("div", { key: '34166bf45efd6f4148395ede39680164662f8a33', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), h("div", { key: 'b43c40db224a560adb19fd91a8790efe11719ff9', class: "color-info" }, h("div", { key: 'aad6ef925f30835b5d8f51d23f872560bcb62360', class: "color-label" }, "HEX"), h("input", { key: 'bdb5fd6ca689251a7c566f32bc6c308873117b2c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
     }
     static get watchers() { return {
         "value": [{

package/dist/dropi-ui/dropi-country-flags.entry.js

@@ -27,7 +27,7 @@ const DropiCountryFlags = class {
             style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;
         if (this.height)
             style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;
-        return (h("figure", { key: '924adeb5372e2c02ce1c0471a162b57fc53616bd', class: `flag ${this.customStyle ?? 'flat'}` }, h("img", { key: '8433b69bbfc51aa5e72f8bd7166382e1d7907cfa', src: this.src, style: style, alt: `flag-${this.country}` })));
+        return (h("figure", { key: '451765b675d5b27dc0357a1a2b6dd338690361c8', class: `flag ${this.customStyle ?? 'flat'}` }, h("img", { key: 'f58a64e7d78298d328be2ba625c852a5eddc392f', src: this.src, style: style, alt: `flag-${this.country}` })));
     }
 };
 DropiCountryFlags.style = dropiCountryFlagsCss();

package/dist/dropi-ui/dropi-country-selector.entry.js

@@ -96,7 +96,7 @@ const COUNTRIES = [
 const DropiCountrySelector = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChangeSelect = createEvent(this, "onChangeSelect", 7);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
     }
     /** Label above the select */
     label = '';
@@ -120,7 +120,7 @@ const DropiCountrySelector = class {
      */
     selectProperties = null;
     /** Emitted when a country is selected. Detail is the CountryItem. */
-    onChangeSelect;
+    dropiChange;
     isOpen = false;
     selected = null;
     get el() { return getElement(this); }
@@ -172,14 +172,14 @@ const DropiCountrySelector = class {
         this.isOpen = false;
         this.searchTerm = '';
         this.currentSelection = country.code;
-        this.onChangeSelect.emit(country);
+        this.dropiChange.emit(country);
     }
     render() {
-        return (h("div", { key: '78179f7b5e30c4eb7d5345431f476f625a60534a', class: "custom-select" }, this.label && (h("label", { key: '13566e714a55c3820facffab298a97fc37c97133' }, this.label, this.showObligatory && h("span", { key: '7772ddd762bd50da043ed030b5a3442e10de47b0', class: "required" }, "*"))), h("button", { key: '649759c1d921318a48fd1abf8e71977d52b6ae2d', type: "button", class: {
+        return (h("div", { key: '036ea5668f8ff842f69f13c9d94000ecdc96126b', class: "custom-select" }, this.label && (h("label", { key: '457b2a26a2e9ea425aa95a2a162f2f3e547376e3' }, this.label, this.showObligatory && h("span", { key: 'fc2b04e48d9372e0e5c1f593e57797558dc2e359', class: "required" }, "*"))), h("button", { key: '0239ee64b4859e45a9b8dcff0e175124d16cdc09', type: "button", class: {
                 'select-button': true,
                 'select-completed': !!this.selected,
                 'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '79df14d64f598d312a1cd82f294edf8aa14ed32e', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: 'dc74219468e838cb5cf06a5ab5036809f84c8f44', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: 'ef8ce166ba747d7973b09a3c0183629d42e344d9', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '04d0b6b0dc3fb431ad606c0df115d4966f3b5a24', class: "search-li" }, h("div", { key: '735a83924982308b4ec92eb19f09c449717fa05d', class: "search-field" }, h("input", { key: '3d6a0db7489e59e310bf50731b5f48ae3a244fe3', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '00bdb2ddd3f67929246f89faed2a2ef2ab169860', class: "search-icon" }, h("dropi-icon", { key: 'bffe43141d5de99b143751c4a80fd972ba8b274c', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: '32baa238875d15f41d1b308fc7adb418c6acc2b1', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: 'bfcfecc740f2cd9044ba2e1d2188ea2a9a208836', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'd1ced64bb98903ce46e692ddf008f885edf3162b' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: 'dd468a1977089ada40f93e1e76f0d55349c5f80d', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: '397055b90b0dab05effdcd2bc26a9839f963fa89', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: 'cac3fd861f38331eb4fada4f65ee897d1017cc52', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '0ccd958e816ff47fd53647d59f078483c7dbb3eb', class: "search-li" }, h("div", { key: '7ad42859a5743aa27aea9a001f1424e50cdc9f60', class: "search-field" }, h("input", { key: 'cb599f62e811383caeda0e329b688123f74fa571', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: 'c60f6af4051d721a9c4c9b09f562f80d72a538eb', class: "search-icon" }, h("dropi-icon", { key: '93477b3d42c8022424ea886820db795c5dc1194a', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: 'e8fd998ffea654db0bac5e91b40ebd221781b12d', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: 'c7a334f5c2813cd0c4db5c8d36157b14ed2bdb11', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '04c7b006f67d6a4a3564fbe39c214f2fe9708cb4' }, this.textHelper)))));
     }
     static get watchers() { return {
         "currentSelection": [{