@dropi/ui 0.1.55 → 999.0.0

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

@@ -1,154 +0,0 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
-
-const dropiCarouselCss = () => `:host{display:block;width:100%;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.dropi-carousel-container{display:flex;flex-direction:column;position:relative;width:100%;max-width:100%;overflow:hidden;padding:0 var(--Size-4)}.dropi-carousel-content{display:flex;align-items:center;position:relative;padding:1rem 0;width:100%}.dropi-carousel-items-content{overflow:hidden;flex:1;padding:0;width:100%;max-width:100%}.dropi-carousel-items-container{display:flex;padding-bottom:var(--Size-3);will-change:transform}.dropi-carousel-item{flex:0 0 auto;padding:0 0.5rem;box-sizing:border-box}.dropi-carousel-item>*{width:100%;box-sizing:border-box;display:block}.dropi-carousel-nav{display:flex;width:40px;height:40px;justify-content:center;align-items:center;cursor:pointer;transition:all 0.2s;flex-shrink:0;z-index:1;border-radius:var(--Border-5);background:var(--Neutral-White, #fff);box-shadow:var(--Shadow-medium);border:none;appearance:none;padding:0}.dropi-carousel-nav:hover{background:var(--Gray-Gray-50)}.dropi-carousel-nav:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.dropi-carousel-prev{margin-right:1rem}.dropi-carousel-next{margin-left:1rem}.dropi-carousel-indicators{display:flex;justify-content:center;gap:0.5rem;list-style:none;padding:1rem 0 0 0;margin:0}.dropi-carousel-indicators li{cursor:pointer}.dropi-carousel-indicators li button{width:1rem;height:1rem;border-radius:50%;border:1px solid var(--Gray-Gray-100, #eceef4);background:var(--Neutral-White, #fff);cursor:pointer;transition:all 0.2s;padding:0}.dropi-carousel-indicators li.active button{background:var(--Primary-Primary-500);border-color:var(--Primary-Primary-500)}.dropi-carousel-indicators li:hover button{background:var(--Gray-Gray-200)}.vertical .dropi-carousel-content{flex-direction:column}.vertical .dropi-carousel-items-container{flex-direction:column}.vertical .dropi-carousel-prev{margin:0 0 1rem 0}.vertical .dropi-carousel-next{margin:1rem 0 0 0}@media (max-width: 768px){.dropi-carousel-container{padding:0}.dropi-carousel-item{padding:0 0.25rem}}`;
-
-const DropiCarousel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        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) */
-    value = [];
-    /** Active page index */
-    page = 0;
-    /** Number of items visible per page */
-    numVisible = 1;
-    /** Number of items to scroll per click */
-    numScroll = 1;
-    /** Orientation of the carousel */
-    orientation = 'horizontal';
-    /** Show navigation arrows */
-    showNavigators = true;
-    /** Show dot indicators */
-    showIndicators = true;
-    /** Autoplay interval in ms (0 = disabled) */
-    autoplayInterval = 0;
-    /** Infinite scrolling */
-    circular = false;
-    parsedValue = [];
-    internalPage = 0;
-    isAnimating = false;
-    totalPages = 0;
-    itemsContainer;
-    timer;
-    dropiPageChange;
-    dropiPage;
-    handleValue(val) {
-        this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);
-        this.updateTotalPages();
-        this.updateTransform();
-    }
-    handlePage(val) {
-        this.internalPage = val;
-        this.updateTransform();
-    }
-    componentWillLoad() {
-        if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {
-            const attrValue = this.el.getAttribute('value');
-            if (attrValue)
-                this.value = attrValue;
-        }
-        this.handleValue(this.value);
-        this.internalPage = this.page;
-    }
-    componentDidLoad() {
-        this.updateTransform();
-        if (this.autoplayInterval > 0) {
-            this.startAutoplay();
-        }
-        window.addEventListener('resize', this.onResize);
-    }
-    disconnectedCallback() {
-        this.stopAutoplay();
-        window.removeEventListener('resize', this.onResize);
-    }
-    onResize = () => {
-        this.updateTotalPages();
-        this.updateTransform();
-    };
-    startAutoplay() {
-        this.timer = setInterval(() => this.navForward(), this.autoplayInterval);
-    }
-    stopAutoplay() {
-        if (this.timer)
-            clearInterval(this.timer);
-    }
-    updateTotalPages() {
-        if (!this.parsedValue.length || this.parsedValue.length <= this.numVisible) {
-            this.totalPages = 1;
-            return;
-        }
-        const totalItems = this.parsedValue.length;
-        const remainingItems = totalItems - this.numVisible;
-        this.totalPages = Math.ceil(remainingItems / this.numScroll) + 1;
-    }
-    updateTransform() {
-        if (!this.itemsContainer)
-            return;
-        const prop = this.orientation === 'vertical' ? 'translateY' : 'translateX';
-        const firstItem = this.itemsContainer.querySelector('.dropi-carousel-item');
-        if (!firstItem)
-            return;
-        const itemSize = this.orientation === 'vertical' ? firstItem.offsetHeight : firstItem.offsetWidth;
-        const itemsScrolled = this.internalPage * this.numScroll;
-        const maxScroll = Math.max(0, this.parsedValue.length - this.numVisible);
-        const safeScroll = Math.min(itemsScrolled, maxScroll);
-        const translateValue = -(safeScroll * itemSize);
-        this.itemsContainer.style.transform = `${prop}(${translateValue}px)`;
-    }
-    navForward = (e) => {
-        if (e)
-            e.preventDefault();
-        if (this.circular || this.internalPage < this.totalPages - 1) {
-            this.isAnimating = true;
-            this.internalPage = (this.internalPage + 1) % this.totalPages;
-            this.page = this.internalPage;
-            this.updateTransform();
-            this.dropiPageChange.emit(this.internalPage);
-            setTimeout(() => (this.isAnimating = false), 500);
-        }
-    };
-    navBackward = (e) => {
-        if (e)
-            e.preventDefault();
-        if (this.circular || this.internalPage > 0) {
-            this.isAnimating = true;
-            this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;
-            this.page = this.internalPage;
-            this.updateTransform();
-            this.dropiPageChange.emit(this.internalPage);
-            setTimeout(() => (this.isAnimating = false), 500);
-        }
-    };
-    onDotClick(index) {
-        this.isAnimating = true;
-        this.internalPage = index;
-        this.page = this.internalPage;
-        this.updateTransform();
-        this.dropiPageChange.emit(this.internalPage);
-        setTimeout(() => (this.isAnimating = false), 500);
-    }
-    render() {
-        const items = this.parsedValue;
-        if (!items.length)
-            return null;
-        const itemFlexBasis = `${100 / this.numVisible}%`;
-        return (h("div", { class: { 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' } }, h("div", { class: "dropi-carousel-content" }, this.showNavigators && items.length > this.numVisible && (h("button", { class: "dropi-carousel-nav dropi-carousel-prev", disabled: !this.circular && this.internalPage === 0, onClick: (e) => this.navBackward(e), "aria-label": "Anterior" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("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" })))), h("div", { class: "dropi-carousel-items-content" }, h("div", { class: "dropi-carousel-items-container", ref: (el) => (this.itemsContainer = el), style: { transition: this.isAnimating ? 'transform 0.5s ease' : 'none' } }, items.map((item, i) => (h("div", { class: "dropi-carousel-item", style: { flex: `0 0 ${itemFlexBasis}` } }, typeof item === 'string' ? (h("img", { src: item, alt: `Slide ${i + 1}` })) : (h("slot", { name: `item-${i}` }))))))), this.showNavigators && items.length > this.numVisible && (h("button", { class: "dropi-carousel-nav dropi-carousel-next", disabled: !this.circular && this.internalPage >= this.totalPages - 1, onClick: (e) => this.navForward(e), "aria-label": "Siguiente" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("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" }))))), this.showIndicators && this.totalPages > 1 && (h("ul", { class: "dropi-carousel-indicators" }, Array.from({ length: this.totalPages }).map((_, i) => (h("li", { class: { active: i === this.internalPage }, onClick: () => this.onDotClick(i) }, h("button", { type: "button", "aria-label": `Página ${i + 1}` }))))))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "handleValue": 0
-            }],
-        "page": [{
-                "handlePage": 0
-            }]
-    }; }
-};
-DropiCarousel.style = dropiCarouselCss();
-
-export { DropiCarousel as dropi_carousel };
-//# sourceMappingURL=dropi-carousel.entry.esm.js.map
-
-//# sourceMappingURL=dropi-carousel.entry.js.map

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

@@ -1 +0,0 @@
-{"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 {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\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

@@ -1,74 +0,0 @@
-import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-
-const dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.csl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.csl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-700, #32394d);background:transparent}.csl__clear{display:flex;background:none;border:none;padding:0;cursor:pointer}.csl__list{display:flex;flex-direction:column}.csl__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.csl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.csl__icon{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}.csl__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);flex:1}.csl__empty{padding:var(--Size-4, 16px);text-align:center;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6)}`;
-
-const DropiCheckboxSelectionList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dropiCheckedValues = createEvent(this, "dropiCheckedValues", 7);
-        this.dropiSearch = createEvent(this, "dropiSearch", 7);
-    }
-    /** Options array or JSON string */
-    options = [];
-    /** Show search filter */
-    showFilter = true;
-    /** Search placeholder */
-    filterPlaceholder = 'Search';
-    /** Show "no results" message */
-    showNotFound = true;
-    /** Empty state message */
-    notFoundMessage = 'No related results found';
-    /** Allow multiple selection */
-    multiSelect = true;
-    /** Debounce delay in ms for search input (matches Angular `searchDelay`) */
-    searchDelay = 100;
-    filterText = '';
-    selected = [];
-    parsedOptions = [];
-    /** Emitted when selection changes — matches Angular 'checkedValues' */
-    dropiCheckedValues;
-    /** Emitted on search — matches Angular 'onSearch' */
-    dropiSearch;
-    optionsChanged(val) {
-        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
-    }
-    componentWillLoad() { this.optionsChanged(this.options); }
-    get filtered() {
-        if (!this.filterText)
-            return this.parsedOptions;
-        const q = this.filterText.toLowerCase();
-        return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));
-    }
-    toggle(id) {
-        if (this.multiSelect) {
-            this.selected = this.selected.includes(id)
-                ? this.selected.filter(s => s !== id)
-                : [...this.selected, id];
-        }
-        else {
-            this.selected = this.selected.includes(id) ? [] : [id];
-        }
-        this.dropiCheckedValues.emit(this.selected);
-    }
-    render() {
-        const items = this.filtered;
-        return (h("div", { key: '20ab881c475eb5df0318f1669eb59af22e5c8055', class: "csl" }, this.showFilter && (h("div", { key: '75c33cae60b61b8ed91fcef89d9a1cc08e9bd4d2', class: "csl__search" }, h("dropi-icon", { key: '6a30bc308753a24c1349090975d3b3d4c856a0fd', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: 'b76b01227062acda7ad87ac46ecae64eef633a75', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
-                this.filterText = e.target.value;
-                this.dropiSearch.emit(this.filterText);
-            } }), this.filterText && (h("button", { key: '96bcf9cf9edc6de2e30729dff75b84d56eda1134', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, h("dropi-icon", { key: '1564c8dbc0ee07784ef692c89f7f888905d070a0', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), h("div", { key: 'e6bc1fd3eaea49298c0d099d7b98e1eef32d3b38', 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", { name: "_csl-option", checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
-        })))));
-    }
-    static get watchers() { return {
-        "options": [{
-                "optionsChanged": 0
-            }]
-    }; }
-};
-DropiCheckboxSelectionList.style = dropiCheckboxSelectionListCss();
-
-export { DropiCheckboxSelectionList as dropi_checkbox_selection_list };
-//# sourceMappingURL=dropi-checkbox-selection-list.entry.esm.js.map
-
-//# sourceMappingURL=dropi-checkbox-selection-list.entry.js.map

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

@@ -1 +0,0 @@
-{"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%; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\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: var(--font-family-01, 'Inter', sans-serif);\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 name=\"_csl-option\" 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

@@ -1,58 +0,0 @@
-import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-
-const dropiCheckboxCss = () => `:host{display:inline-block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.container-dropi-checkbox{display:inline-block}.check{width:20px;height:20px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background-color 0.3s ease-in-out,     border-style 0.3s ease-in-out}.noCheck{border-style:solid;border-width:2px;border-color:var(--Gray-Gray-200, #c3c9d9);display:flex;justify-content:center;align-items:center}.noCheck svg{visibility:hidden}.isCheck{display:flex;background-color:var(--Primary-Primary-500, #f49a3d);justify-content:center;align-items:center}.disabled{background-color:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}`;
-
-const DropiCheckbox = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    internals;
-    /** Name for native form submission */
-    name;
-    /** Whether the checkbox is checked */
-    checked = false;
-    /** Whether the checkbox is disabled */
-    disabled = false;
-    /** Emitted when the checked state changes */
-    dropiChange;
-    checkedChanged(val) {
-        this.internals.setFormValue(val ? 'on' : null);
-    }
-    componentWillLoad() {
-        this.internals.setFormValue(this.checked ? 'on' : null);
-    }
-    changeState() {
-        if (this.disabled)
-            return;
-        this.checked = !this.checked;
-        this.dropiChange.emit(this.checked);
-    }
-    render() {
-        return (h("div", { key: 'febf6eb0bb7392639bca5a473dd17c2e7d732cff', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '64cd57277c43c5ae4dfd775a0df13cd7462b8c58', class: {
-                check: true,
-                isCheck: this.checked,
-                noCheck: !this.checked,
-                disabled: this.disabled,
-            } }, h("svg", { key: '97608b9897d464c572edff3dcf5fec4fadad371d', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'e983025baa94876d0a01b6c28f789c0ee1e91c36', 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; }
-    static get watchers() { return {
-        "checked": [{
-                "checkedChanged": 0
-            }]
-    }; }
-};
-DropiCheckbox.style = dropiCheckboxCss();
-
-export { DropiCheckbox as dropi_checkbox };
-//# sourceMappingURL=dropi-checkbox.entry.esm.js.map
-
-//# sourceMappingURL=dropi-checkbox.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"dropi-checkbox.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,mwBAAmwB,CAAC;;MCavxB,aAAa,GAAA,MAAA;;;;;;;;;;;;AACL,IAAA,SAAS;;AAGH,IAAA,IAAI;;IAGW,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;;IAGhD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;;IAIjD,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 {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\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, AttachInternals, Watch, 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  @AttachInternals() internals: ElementInternals;\n\n  /** Name for native form submission */\n  @Prop({ reflect: true }) name!: string;\n\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  @Watch('checked')\n  checkedChanged(val: boolean) {\n    this.internals.setFormValue(val ? 'on' : null);\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.checked ? 'on' : null);\n  }\n\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

@@ -1,31 +0,0 @@
-import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-
-const dropiChipsCss = () => `:host{display:inline-flex;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);height:24px;padding:0 var(--Size-2, 8px);border-radius:var(--Border-2, 8px);font-size:var(--font-size-xs, 10px);font-family:var(--font-family-01, 'Inter', sans-serif);width:fit-content;max-width:200px}.chip--filters{background:var(--Primary-Primary-50, #fff5eb);border:1px solid var(--Primary-Primary-200, #fbd4a3);color:var(--Primary-Primary-600, #d4872e)}.chip--fill{background:var(--Gray-Gray-100, #e6eaf2);border:1px solid transparent;color:var(--Gray-Gray-700, #32394d)}.chip__avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}.chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:0.7;transition:opacity 0.15s}.chip__close:hover{opacity:1}`;
-
-const DropiChips = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dropiClose = createEvent(this, "dropiClose", 7);
-    }
-    /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
-    customStyle = 'fill';
-    /** Content type */
-    type = 'icon';
-    /** Avatar image URL (when type = 'avatar') */
-    urlImg = '';
-    /** Show the close/remove icon */
-    showIcon = false;
-    /** Icon name (when type = 'icon') */
-    icon = '';
-    /** Emitted when the close icon is clicked */
-    dropiClose;
-    render() {
-        return (h("div", { key: '20ecd2dad1f10bbc26028eb866e45af66090ba4e', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '6446517eb4075c1f2a4a964fd9c66c554682f706', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '9404886b51dae0a225e45c5d6d7bd0fff7e3d630', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), h("span", { key: '363167e5eb3a4522617bf941d2c7e638c9aeef45', class: "chip__text" }, h("slot", { key: 'a00a38943eee521719f9af41bc742ee4a025c4a2' })), this.showIcon && (h("button", { key: '2d4d5b571cee579d7466c720668f8ef6ab7e1a74', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '48a22f01f30a08331d4b67ca3a5ddba012ac4642', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
-    }
-};
-DropiChips.style = dropiChipsCss();
-
-export { DropiChips as dropi_chips };
-//# sourceMappingURL=dropi-chips.entry.esm.js.map
-
-//# sourceMappingURL=dropi-chips.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"dropi-chips.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ilCAAilC,CAAC;;MCelmC,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 {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\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: var(--font-family-01, 'Inter', sans-serif);\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-city-selector.entry.js

@@ -1,105 +0,0 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
-
-const dropiCitySelectorCss = () => `:host{display:block;width:100%;position:relative;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.city-selector{position:relative;width:100%}.selector-trigger{width:100%;min-height:40px;padding:6px 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;font-family:var(--font-family-01, 'Inter', sans-serif);transition:border-color 0.15s}.selector-trigger:hover:not(:disabled){border-color:var(--Gray-Gray-300, #a3abbf)}.selector-trigger:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.city-selector--disabled .selector-trigger{background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed;opacity:0.6}.chips-area{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:26px;align-items:center}.placeholder{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.chip{display:inline-flex;align-items:center;gap:4px;background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-200, #fcd5a8);border-radius:var(--Border-1, 4px);padding:2px 6px;font-size:var(--font-size-xs, 12px);color:var(--Primary-Primary-700, #b85c00)}.chip-remove{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);z-index:var(--dropi-z-index-overlay, 11000);overflow:hidden}.search-wrap{padding:10px 12px;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.search-input{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 14px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);outline:none;transition:border-color 0.15s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.options-list{max-height:280px;overflow-y:auto;background:var(--Neutral-White, #ffffff)}.options-list::-webkit-scrollbar{width:6px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.group-label{padding:14px 16px 8px;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433);background:var(--Neutral-White, #ffffff)}.city-option{padding:10px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:background 0.1s;user-select:none}.city-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.city-option--selected .city-label{color:var(--Gray-Gray-800, #1f2433);font-weight:var(--font-weight-medium, 500)}.checkbox{width:22px;height:22px;border:1.5px solid var(--Gray-Gray-300, #c3c9d9);border-radius:var(--Border-1, 6px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.15s, background 0.15s}.checkbox--checked{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-500, #f49a3d)}.city-label{flex:1}.no-results{padding:20px 16px;text-align:center;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}`;
-
-const DropiCitySelector = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.selectedCitiesChange = createEvent(this, "selectedCitiesChange", 7);
-    }
-    /** Grouped city options (array or JSON string) */
-    options = [];
-    /** Currently selected city values */
-    selectedCities = [];
-    /** Placeholder text */
-    placeholder = 'Seleccione una ciudad';
-    /** Disable the selector */
-    disabled = false;
-    /** Emitted when selection changes. Detail = selected values array. */
-    selectedCitiesChange;
-    isOpen = false;
-    selected = [];
-    parsedOptions = [];
-    searchTerm = '';
-    get el() { return getElement(this); }
-    handleDocClick(e) {
-        if (this.isOpen && !e.composedPath().includes(this.el)) {
-            this.isOpen = false;
-        }
-    }
-    optionsChanged(val) {
-        if (val == null) {
-            this.parsedOptions = [];
-            return;
-        }
-        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
-    }
-    selectedChanged(val) {
-        if (val == null) {
-            this.selected = [];
-            return;
-        }
-        this.selected = typeof val === 'string' ? JSON.parse(val) : [...val];
-    }
-    componentWillLoad() {
-        this.optionsChanged(this.options);
-        this.selectedChanged(this.selectedCities);
-    }
-    get filtered() {
-        if (!this.searchTerm)
-            return this.parsedOptions;
-        const t = this.searchTerm.toLowerCase();
-        return this.parsedOptions
-            .map(g => ({ ...g, items: g.items.filter(c => c.label.toLowerCase().includes(t)) }))
-            .filter(g => g.items.length > 0);
-    }
-    toggle() {
-        if (this.disabled)
-            return;
-        this.isOpen = !this.isOpen;
-    }
-    toggleCity(value, e) {
-        e.stopPropagation();
-        if (this.selected.includes(value)) {
-            this.selected = this.selected.filter(v => v !== value);
-        }
-        else {
-            this.selected = [...this.selected, value];
-        }
-        this.selectedCitiesChange.emit([...this.selected]);
-    }
-    removeCity(value, e) {
-        e.stopPropagation();
-        this.selected = this.selected.filter(v => v !== value);
-        this.selectedCitiesChange.emit([...this.selected]);
-    }
-    getLabel(value) {
-        for (const g of this.parsedOptions) {
-            const found = g.items.find(c => c.value == value);
-            if (found)
-                return found.label;
-        }
-        return String(value);
-    }
-    render() {
-        const groups = this.filtered;
-        return (h("div", { key: 'dbc6ed4bbc32ec2087eab966b24bdbbb9a4a66eb', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: 'a22d629d62c969fe8c18e01f14e753cc8df36538', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: 'f0880bed53053ec941846ff964ef27aa8df370e1', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: 'daf4a6adecbfd8418c0d85d96e4c223b4d1ed1a7', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, h("dropi-icon", { name: "Close-small", iconWidth: "10px", iconHeight: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: '7db007e00be1d77d34393a086127974183dcfa2d', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '450be45761446a87956401939a5ce42c9e90de70', class: "dropdown", role: "listbox" }, h("div", { key: '0fb6675ea75a648d86c183dde5ec5b4f8bef488d', class: "search-wrap" }, h("div", { key: '80d6c6fae071018a3f5bbd6d51a5086b2f635063', class: "search-field" }, h("input", { key: 'fc5e2a7120df05932a01bcc276bdb46c273337a6', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: 'cb8e16a2b61b587f8c94d5707f2a4aea392a8dc0', class: "search-icon" }, h("dropi-icon", { key: 'babd7dcf26ba3396ca51584d9b15ceb92f59ad0a', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), h("div", { key: '9bad1b60bd85f2699a3512416d04e9d4a678af81', class: "options-list" }, groups.length === 0 && (h("div", { key: '6ee1f41bb90abe906946cc73e86b4ad85cc42a20', class: "no-results" }, "Sin resultados")), groups.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => {
-            const isSelected = this.selected.includes(city.value);
-            return (h("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (h("dropi-icon", { name: "Check", iconWidth: "10px", iconHeight: "10px", color: "Neutral-White" }))), h("span", { class: "city-label" }, city.label)));
-        })))))))));
-    }
-    static get watchers() { return {
-        "options": [{
-                "optionsChanged": 0
-            }],
-        "selectedCities": [{
-                "selectedChanged": 0
-            }]
-    }; }
-};
-DropiCitySelector.style = dropiCitySelectorCss();
-
-export { DropiCitySelector as dropi_city_selector };
-//# sourceMappingURL=dropi-city-selector.entry.esm.js.map
-
-//# sourceMappingURL=dropi-city-selector.entry.js.map

package/dist/dropi-ui/dropi-city-selector.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-city-selector.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-city-selector/dropi-city-selector.css?tag=dropi-city-selector&encapsulation=shadow","src/components/dropi-city-selector/dropi-city-selector.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: block;\n  width: 100%;\n  position: relative;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n/* ── Wrapper ──────────────────────────────────────────────────────── */\n.city-selector {\n  position: relative;\n  width: 100%;\n}\n\n/* ── Trigger ──────────────────────────────────────────────────────── */\n.selector-trigger {\n  width: 100%;\n  min-height: 40px;\n  padding: 6px 12px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  cursor: pointer;\n  text-align: left;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  transition: border-color 0.15s;\n}\n\n.selector-trigger:hover:not(:disabled) {\n  border-color: var(--Gray-Gray-300, #a3abbf);\n}\n\n.selector-trigger:focus {\n  outline: none;\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.city-selector--disabled .selector-trigger {\n  background: var(--Gray-Gray-50, #f7f8fa);\n  border-color: var(--Gray-Gray-100, #e6eaf2);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* ── Chips area ───────────────────────────────────────────────────── */\n.chips-area {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  flex: 1;\n  min-height: 26px;\n  align-items: center;\n}\n\n.placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n  font-size: var(--font-size-s, 14px);\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: var(--Primary-Primary-50, #fff8f0);\n  border: 1px solid var(--Primary-Primary-200, #fcd5a8);\n  border-radius: var(--Border-1, 4px);\n  padding: 2px 6px;\n  font-size: var(--font-size-xs, 12px);\n  color: var(--Primary-Primary-700, #b85c00);\n}\n\n.chip-remove {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n}\n\n/* ── Dropdown ─────────────────────────────────────────────────────── */\n.dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);\n  z-index: var(--dropi-z-index-overlay, 11000);\n  overflow: hidden;\n}\n\n/* ── Search ───────────────────────────────────────────────────────── */\n.search-wrap {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);\n}\n\n.search-field {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-input {\n  width: 100%;\n  height: 36px;\n  padding: 0 36px 0 12px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  font-size: var(--font-size-s, 14px);\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  color: var(--Gray-Gray-700, #32394d);\n  background: var(--Gray-Gray-50, #f7f8fa);\n  outline: none;\n  transition: border-color 0.15s;\n}\n\n.search-input:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.search-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.search-icon {\n  position: absolute;\n  right: 10px;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n/* ── Options list ─────────────────────────────────────────────────── */\n.options-list {\n  max-height: 280px;\n  overflow-y: auto;\n  background: var(--Neutral-White, #ffffff);\n}\n\n/* Scrollbar refinado */\n.options-list::-webkit-scrollbar { width: 6px; }\n.options-list::-webkit-scrollbar-track { background: transparent; }\n.options-list::-webkit-scrollbar-thumb {\n  background: var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 4px;\n}\n\n/* ── Group label ──────────────────────────────────────────────────── */\n.group-label {\n  padding: 14px 16px 8px;\n  font-size: var(--font-size-m, 16px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-800, #1f2433);\n  background: var(--Neutral-White, #ffffff);\n}\n\n/* ── City option ──────────────────────────────────────────────────── */\n.city-option {\n  padding: 10px 16px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-size: var(--font-size-s, 14px);\n  color: var(--Gray-Gray-700, #32394d);\n  background: var(--Neutral-White, #ffffff);\n  transition: background 0.1s;\n  user-select: none;\n}\n\n.city-option:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.city-option--selected .city-label {\n  color: var(--Gray-Gray-800, #1f2433);\n  font-weight: var(--font-weight-medium, 500);\n}\n\n/* ── Checkbox visual ──────────────────────────────────────────────── */\n.checkbox {\n  width: 22px;\n  height: 22px;\n  border: 1.5px solid var(--Gray-Gray-300, #c3c9d9);\n  border-radius: var(--Border-1, 6px);\n  background: var(--Neutral-White, #ffffff);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: border-color 0.15s, background 0.15s;\n}\n\n.checkbox--checked {\n  border-color: var(--Primary-Primary-500, #f49a3d);\n  background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.city-label {\n  flex: 1;\n}\n\n/* ── Empty ────────────────────────────────────────────────────────── */\n.no-results {\n  padding: 20px 16px;\n  text-align: center;\n  color: var(--Gray-Gray-400, #858ea6);\n  font-size: var(--font-size-s, 14px);\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h, Element, Listen } from '@stencil/core';\n\nexport interface CityOption {\n  label: string;\n  value: string | number;\n}\n\nexport interface CityGroup {\n  label: string;\n  value: string;\n  items: CityOption[];\n}\n\n/**\n * @component dropi-city-selector\n * Multi-select city picker with grouped options and chip display.\n * Pass options as a JSON string or CityGroup[] array.\n *\n * @example\n * <dropi-city-selector\n *   options='[{\"label\":\"Cundinamarca\",\"value\":\"CUN\",\"items\":[{\"label\":\"Bogotá\",\"value\":\"BOG\"}]}]'\n *   placeholder=\"Selecciona ciudades\"\n * ></dropi-city-selector>\n */\n@Component({\n  tag: 'dropi-city-selector',\n  styleUrl: 'dropi-city-selector.css',\n  shadow: true,\n})\nexport class DropiCitySelector {\n  /** Grouped city options (array or JSON string) */\n  @Prop() options: CityGroup[] | string = [];\n  /** Currently selected city values */\n  @Prop({ mutable: true }) selectedCities: (string | number)[] | string = [];\n  /** Placeholder text */\n  @Prop() placeholder: string = 'Seleccione una ciudad';\n  /** Disable the selector */\n  @Prop() disabled: boolean = false;\n\n  /** Emitted when selection changes. Detail = selected values array. */\n  @Event() selectedCitiesChange: EventEmitter<(string | number)[]>;\n\n  @State() private isOpen: boolean = false;\n  @State() private selected: (string | number)[] = [];\n  @State() private parsedOptions: CityGroup[] = [];\n  @State() private searchTerm: string = '';\n\n  @Element() el!: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(e: MouseEvent) {\n    if (this.isOpen && !e.composedPath().includes(this.el)) {\n      this.isOpen = false;\n    }\n  }\n\n  @Watch('options')\n  optionsChanged(val: CityGroup[] | string) {\n    if (val == null) { this.parsedOptions = []; return; }\n    this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val as CityGroup[]);\n  }\n\n  @Watch('selectedCities')\n  selectedChanged(val: (string | number)[] | string) {\n    if (val == null) { this.selected = []; return; }\n    this.selected = typeof val === 'string' ? JSON.parse(val) : [...(val as (string | number)[])];\n  }\n\n  componentWillLoad() {\n    this.optionsChanged(this.options);\n    this.selectedChanged(this.selectedCities);\n  }\n\n  private get filtered(): CityGroup[] {\n    if (!this.searchTerm) return this.parsedOptions;\n    const t = this.searchTerm.toLowerCase();\n    return this.parsedOptions\n      .map(g => ({ ...g, items: g.items.filter(c => c.label.toLowerCase().includes(t)) }))\n      .filter(g => g.items.length > 0);\n  }\n\n  private toggle() {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  }\n\n  private toggleCity(value: string | number, e: MouseEvent) {\n    e.stopPropagation();\n    if (this.selected.includes(value)) {\n      this.selected = this.selected.filter(v => v !== value);\n    } else {\n      this.selected = [...this.selected, value];\n    }\n    this.selectedCitiesChange.emit([...this.selected]);\n  }\n\n  private removeCity(value: string | number, e: MouseEvent) {\n    e.stopPropagation();\n    this.selected = this.selected.filter(v => v !== value);\n    this.selectedCitiesChange.emit([...this.selected]);\n  }\n\n  private getLabel(value: string | number): string {\n    for (const g of this.parsedOptions) {\n      const found = g.items.find(c => c.value == value);\n      if (found) return found.label;\n    }\n    return String(value);\n  }\n\n  render() {\n    const groups = this.filtered;\n\n    return (\n      <div class={{ 'city-selector': true, 'city-selector--disabled': this.disabled }}>\n\n        {/* ── Trigger ─────────────────────────────────────────────── */}\n        <button\n          type=\"button\"\n          class=\"selector-trigger\"\n          disabled={this.disabled}\n          onClick={() => this.toggle()}\n          aria-haspopup=\"listbox\"\n          aria-expanded={this.isOpen}\n        >\n          <div class=\"chips-area\">\n            {this.selected.length === 0 && (\n              <span class=\"placeholder\">{this.placeholder}</span>\n            )}\n            {this.selected.map(val => (\n              <span class=\"chip\" key={String(val)}>\n                {this.getLabel(val)}\n                <button\n                  type=\"button\"\n                  class=\"chip-remove\"\n                  aria-label=\"Quitar\"\n                  onClick={(e) => this.removeCity(val, e)}\n                >\n                  <dropi-icon name=\"Close-small\" iconWidth=\"10px\" iconHeight=\"10px\" color=\"Primary-Primary-500\" />\n                </button>\n              </span>\n            ))}\n          </div>\n          <dropi-icon\n            name={this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2'}\n            iconWidth=\"16px\"\n            iconHeight=\"16px\"\n            color=\"Gray-Gray-500\"\n          />\n        </button>\n\n        {/* ── Dropdown ────────────────────────────────────────────── */}\n        {this.isOpen && (\n          <div class=\"dropdown\" role=\"listbox\">\n\n            {/* Search with lupa icon */}\n            <div class=\"search-wrap\">\n              <div class=\"search-field\">\n                <input\n                  class=\"search-input\"\n                  type=\"text\"\n                  placeholder=\"Buscar...\"\n                  value={this.searchTerm}\n                  onInput={(e) => { this.searchTerm = (e.target as HTMLInputElement).value; }}\n                  autoComplete=\"off\"\n                />\n                <span class=\"search-icon\">\n                  <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n                </span>\n              </div>\n            </div>\n\n            {/* Options list */}\n            <div class=\"options-list\">\n              {groups.length === 0 && (\n                <div class=\"no-results\">Sin resultados</div>\n              )}\n              {groups.map(group => (\n                <div key={group.value} class=\"group\">\n                  <div class=\"group-label\">{group.label}</div>\n                  {group.items.map(city => {\n                    const isSelected = this.selected.includes(city.value);\n                    return (\n                      <div\n                        key={String(city.value)}\n                        class={{ 'city-option': true, 'city-option--selected': isSelected }}\n                        onClick={(e) => this.toggleCity(city.value, e)}\n                        role=\"option\"\n                        aria-selected={isSelected}\n                      >\n                        <span class={{ 'checkbox': true, 'checkbox--checked': isSelected }}>\n                          {isSelected && (\n                            <dropi-icon name=\"Check\" iconWidth=\"10px\" iconHeight=\"10px\" color=\"Neutral-White\" />\n                          )}\n                        </span>\n                        <span class=\"city-label\">{city.label}</span>\n                      </div>\n                    );\n                  })}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}