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

@dropi/ui 0.1.51 → 0.1.53

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

Files changed (716) hide show

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
-const dropiCarouselCss = () => `:host{display:block;width:100%}*,*::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 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) {

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

	@@ -1 +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() 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}
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 {\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 CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}*,*::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:inherit;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 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) {
@@ -52,12 +52,12 @@ const DropiCheckboxSelectionList = class {
     }
     render() {
         const items = this.filtered;
-        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) => {
+        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: '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 => {
+            } }), 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", { checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
+            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 {

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

	@@ -1 +1 @@
1	- {"file":"dropi-checkbox-selection-list.entry.js","mappings":";;AAAA,MAAM,6BAA6B,GAAG,MAAM,CAAC,~~unCAAunC~~,CAAC;;~~MCkBxpC~~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~~EACnC~~,GAAG,CAAC,IAAI,IAAI,WAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,KAAK,EAAA,CAAI,EACrE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EAAE,GAAG,CAAC,KAAK,CAAQ,CACvC;AAEV,SAAC,CAAC,CACH,CACG,CACF;;;;;;;;;;;;","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}
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%; }\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 CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiCheckboxCss = () => `:host{display:inline-block}*,*::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 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) {
@@ -16,7 +16,7 @@ const DropiCheckbox = class {
     }
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Whether the checkbox is checked */
     checked = false;
     /** Whether the checkbox is disabled */
@@ -36,12 +36,12 @@ const DropiCheckbox = class {
         this.dropiChange.emit(this.checked);
     }
     render() {
-        return (h("div", { key: '27fec5f03a48c19652c8ae01173dcbb6e3514693', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '243d07e4444c0dc149ff137258f9ddd58428c438', class: {
+        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: '7a1fd9c7b3fa575ec263fe5ad48fbc0294a79980', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'e77e5cd40c71e542a045934641509e41a7cd4899', 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: '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 {

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

	@@ -1 +1 @@
1	- {"file":"dropi-checkbox.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,~~8qBAA8qB~~,CAAC;;~~MCalsB~~,aAAa,GAAA,MAAA;;;;;;;;;;;;AACL,IAAA,SAAS;;~~IAGH~~,IAAI~~,GAAW,EAAE~~;;~~IAGF~~,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 {\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}
1	+ {"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 CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiChipsCss = () => `:host{display:inline-flex}*,*::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:inherit;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 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) {
@@ -20,7 +20,7 @@ const DropiChips = class {
     /** Emitted when the close icon is clicked */
     dropiClose;
     render() {
-        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" })))));
+        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();

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

	@@ -1 +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,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}
1	+ {"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 CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
-const dropiCitySelectorCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.city-selector{position:relative;width:100%}.selector-trigger{width:100%;min-height:44px;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:inherit;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:inherit;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 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) {
@@ -83,7 +83,7 @@ const DropiCitySelector = class {
     }
     render() {
         const groups = this.filtered;
-        return (h("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', 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: 'f99675449127fb19fdea950db057d8c14ca62644', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '2a14a55016c19128fde45359f4b29b6f04f9b035', class: "dropdown", role: "listbox" }, h("div", { key: '1321152ed7b0d3f50b04c7f28b05f1523c41cce4', class: "search-wrap" }, h("div", { key: '7c94a7506d44cd89b83e5782cce16319f266f82c', class: "search-field" }, h("input", { key: '5f40db9a8df0adc09776b4adcfe03a4a6d1d1467', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: '3140903ef4355b970c8f348e4f55d43f852e247d', class: "search-icon" }, h("dropi-icon", { key: 'b59235b0d7a685000033d2a294fbce246d0ba4c2', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), h("div", { key: 'bfd40e336b402bd92ec212466cf89e1cffb0d4be', class: "options-list" }, groups.length === 0 && (h("div", { key: '9fce9b4df1ffb122278480f0ab60255ea0c795ec', 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 => {
+        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)));
         })))))))));

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

	@@ -1 +1 @@
1	- {"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 {\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: 44px;\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: inherit;\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: inherit;\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}
1	+ {"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}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
-const dropiColorPickerCss = () => `:host{display:block}.general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom::before{transform:rotate(90deg);left:50%;top:-15px}.position-right::before{left:-6px;top:10px}.position-top::before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left::before{transform:rotate(180deg);right:-9px}.color-picker-container::before{content:'';position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform 0.2s ease-out,     opacity 0.2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px, -6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold)}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid var(--Gray-Gray-200, #ddd);border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase;background-color:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-800, #1f2433);outline:none}`;
+const dropiColorPickerCss = () => `:host{display:block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom::before{transform:rotate(90deg);left:50%;top:-15px}.position-right::before{left:-6px;top:10px}.position-top::before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left::before{transform:rotate(180deg);right:-9px}.color-picker-container::before{content:'';position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform 0.2s ease-out,     opacity 0.2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px, -6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold)}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid var(--Gray-Gray-200, #ddd);border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase;background-color:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-800, #1f2433);outline:none}`;
 const DropiColorPicker = class {
     constructor(hostRef) {
@@ -301,10 +301,10 @@ const DropiColorPicker = class {
         }
     }
     render() {
-        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: {
+        return (h("div", { key: 'd9c5e76dd6171e16a7b156425ed23fb278bf98c4', class: "general-container" }, h("div", { key: 'd12811b5fceee6fb0966c9c96de558babac9f76f', class: "main-input-container" }, h("div", { key: '501f61305d92c06e02d206ac7a43f05b8534bbde', class: "overlay", onClick: () => this.showEditor() }), h("div", { key: 'fb6b530e3a470e8a0c253b09277c4e0c7d044e22', class: "line-color-preview" }, h("div", { key: '54f99921536b51a86fcda44e8dac7217a4c7dee5', class: "color-preview", style: { background: this.currentColor } })), h("div", { key: 'cb2e0ddf93642e77e56de752a65c9ba76cb552a0', class: "color-info" }, h("input", { key: 'f47de54253b46b4569ecab01429563670c7e72c7', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), h("div", { key: '5a075b8c12598ba8dd275b6a16eef32add9ac699', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, h("div", { key: '69e0ca2f0619cc4179ab0aaee1c104cef14ce36e', class: "main-color-canvas-container" }, h("canvas", { key: 'b1214cca9b1c1b19c28e7c88d7283558e843f596', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), h("div", { key: 'c4421be7d1b404b75a8369a7308bc230495acf3e', class: "color-selector-pointer", style: {
                 left: `${(this.saturation / 100) * 256}px`,
                 top: `${((100 - this.currentVal) / 100) * 150}px`
-            } })), 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 }))))));
+            } })), h("div", { key: 'a5d31a247005eb772bddc2f8dd2cb9a243c6481a', class: "slider-container" }, h("div", { key: 'efd453992fc5742c5b6d2637822d3e6f27b4d69c', class: "slider-group" }, h("div", { key: 'ecdd733f52e90dba2bb80cbc156b0f73535c1d9f', class: "hue-slider-container" }, h("canvas", { key: 'a4ec35a0626bec8d07754065adda64ab22607d08', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), h("div", { key: '374888568e3dc396400e416f81a1e2757f8d9300', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), h("div", { key: '7936ff2caf23fbb52ec249f9524824385d9fd994', class: "slider-group" }, h("div", { key: 'bfc6261574131051f5a93656d625a4bfd0d3a5a3', class: "opacity-slider-container" }, h("canvas", { key: '998d1156a5179a920ba459441f0ff7678c383262', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), h("div", { key: 'e7e273b17d35e5f3c6da8fc64ac457d170353ad9', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), h("div", { key: 'f2c0146365f245843514d48313bb77aa07f48927', class: "color-info" }, h("div", { key: '94d56458a0e17f20407fb324910b4fb40661856a', class: "color-label" }, "HEX"), h("input", { key: 'f6b4cbc676861caa8fb393d11e7f2b107e689a7d', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
     }
     static get watchers() { return {
         "value": [{