atomicuilibrary 0.0.1 → 0.1.0

package/dist/components/ui-masonry.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,transformTag as a}from"@stencil/core/internal/client";import{d as o,a as r}from"./badge.js";import{d as n}from"./checkbox.js";import{d as l}from"./icon.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.itemClick=e(this,"itemClick",7),this.filterChange=e(this,"filterChange",7),this.sortChange=e(this,"sortChange",7),this.itemSelectionChange=e(this,"itemSelectionChange",7),this.layoutChange=e(this,"layoutChange",7),this.itemsLoaded=e(this,"itemsLoaded",7),this.batchDelete=e(this,"batchDelete",7)}get el(){return this}items=[];columns=3;gap=16;layoutType="masonry";itemMinWidth=200;itemMaxWidth=400;breakpoints='{"640":2,"768":3,"1024":4,"1280":5}';filterBy="";sortBy="";sortOrder="asc";animationDuration=300;enableAnimation=!0;loadingState=!1;emptyMessage="No items to display";showFilters=!1;filterOptions=[];lazyLoad=!1;lazyLoadMargin="200px";infiniteScroll=!1;infiniteScrollDistance=200;selectable=!1;multiSelect=!1;showBatchActions=!1;lightbox=!1;filteredItems=[];currentColumns=3;isResizing=!1;selectedItems=new Set;loadedImages=new Set;visibleItems=12;activeImageIndex=-1;isLightboxOpen=!1;itemClick;filterChange;sortChange;itemSelectionChange;layoutChange;itemsLoaded;batchDelete;resizeObserver;componentWillLoad(){this.updateFilteredItems(),this.calculateColumns()}componentDidLoad(){this.setupResizeObserver(),this.infiniteScroll&&this.setupInfiniteScroll(),this.lazyLoad&&this.setupLazyLoading()}handleWindowKeyDown(t){if(this.isLightboxOpen&&this.lightbox)return"Escape"===t.key&&this.closeLightbox(),"ArrowRight"===t.key&&this.nextImage(t),void("ArrowLeft"===t.key&&this.prevImage(t));(this.selectedItems.size>0||document.activeElement===this.el)&&this.handleKeyDown(t)}handleKeyDown(t){if(this.selectable)return t.ctrlKey&&"a"===t.key?(t.preventDefault(),void this.selectAll()):"Escape"===t.key&&this.selectedItems.size>0?(t.preventDefault(),void this.deselectAll()):"Delete"===t.key&&this.selectedItems.size>0?(t.preventDefault(),void this.deleteSelected()):void 0}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect(),this.infiniteScrollObserver&&this.infiniteScrollObserver.disconnect(),this.lazyLoadObserver&&this.lazyLoadObserver.disconnect()}infiniteScrollObserver;lazyLoadObserver;setupInfiniteScroll(){void 0!==globalThis.IntersectionObserver&&(this.infiniteScrollObserver=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&this.visibleItems<this.filteredItems.length&&(this.visibleItems=Math.min(this.visibleItems+12,this.filteredItems.length),this.itemsLoaded.emit({count:this.visibleItems,total:this.filteredItems.length}))}))}),{rootMargin:this.infiniteScrollDistance+"px"}),setTimeout((()=>{const t=this.el.shadowRoot?.querySelector(".infinite-scroll-sentinel");t&&this.infiniteScrollObserver.observe(t)}),100))}setupLazyLoading(){void 0!==globalThis.IntersectionObserver&&(this.lazyLoadObserver=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const i=parseInt(t.target.getAttribute("data-index"));this.loadedImages=new Set([...this.loadedImages,i]);const e=t.target,s=e.getAttribute("data-src");s&&!e.src&&(e.src=s),this.lazyLoadObserver.unobserve(t.target)}}))}),{rootMargin:this.lazyLoadMargin}),setTimeout((()=>{const t=this.el.shadowRoot?.querySelectorAll("img[data-src]");t?.forEach((t=>this.lazyLoadObserver.observe(t)))}),100))}toggleSelection(t,i){if(!this.selectable)return;i&&i.stopPropagation();const e=new Set(this.selectedItems);e.has(t)?e.delete(t):(this.multiSelect||e.clear(),e.add(t)),this.selectedItems=e;const s=Array.from(this.selectedItems),a=s.map((t=>this.filteredItems[t]));this.itemSelectionChange.emit({selectedItems:a,indices:s})}selectAll(){if(!this.selectable)return;this.selectedItems=new Set(this.filteredItems.map(((t,i)=>i)));const t=Array.from(this.selectedItems),i=t.map((t=>this.filteredItems[t]));this.itemSelectionChange.emit({selectedItems:i,indices:t})}deselectAll(){this.selectedItems=new Set,this.itemSelectionChange.emit({selectedItems:[],indices:[]})}deleteSelected(){const t=Array.from(this.selectedItems),i=t.map((t=>this.filteredItems[t]));this.batchDelete.emit({items:i,indices:t}),this.selectedItems=new Set,this.itemSelectionChange.emit({selectedItems:[],indices:[]})}watchItemsChange(){this.updateFilteredItems()}watchColumnsChange(){this.calculateColumns()}getParsedItems(){if("string"==typeof this.items)try{return JSON.parse(this.items)}catch{return console.error("Invalid items JSON"),[]}return this.items}getParsedFilterOptions(){if("string"==typeof this.filterOptions)try{return JSON.parse(this.filterOptions)}catch{return[]}return this.filterOptions}getParsedBreakpoints(){try{return JSON.parse(this.breakpoints)}catch{return{640:2,768:3,1024:4,1280:5}}}setupResizeObserver(){this.resizeObserver=new ResizeObserver((()=>{this.isResizing=!0,this.calculateColumns(),setTimeout((()=>{this.isResizing=!1}),100)}));const t=this.el.shadowRoot.querySelector(".masonry-container");t&&this.resizeObserver.observe(t)}calculateColumns(){const t=this.el.shadowRoot?.querySelector(".masonry-container");if(!t)return;const i=t.clientWidth,e=this.getParsedBreakpoints(),s=Object.keys(e).map(Number).sort(((t,i)=>i-t));let a=this.columns;for(const t of s)if(i>=t){a=e[t];break}this.currentColumns=a}updateFilteredItems(){let t=[...this.getParsedItems()];this.filterBy&&(t=t.filter((t=>{const[i,e]=this.filterBy.split(":");return t[i]&&(""+t[i]).toLowerCase().includes(e.toLowerCase())}))),this.sortBy&&t.sort(((t,i)=>{const e=t[this.sortBy],s=i[this.sortBy];if("number"==typeof e&&"number"==typeof s)return"asc"===this.sortOrder?e-s:s-e;const a=(e+"").toLowerCase(),o=(s+"").toLowerCase();return"asc"===this.sortOrder?a.localeCompare(o):o.localeCompare(a)})),this.filteredItems=t}handleItemClick=(t,i)=>{this.itemClick.emit({item:t,index:i})};handleFilterChange=(t,i)=>{this.filterChange.emit({filterBy:t,value:i})};handleSortChange=(t,i)=>{this.sortChange.emit({sortBy:t,order:i})};getColumnItems(t){return"masonry"===this.layoutType?this.filteredItems.filter(((i,e)=>e%this.currentColumns===t)):this.filteredItems}renderFilters(){if(!this.showFilters)return null;const t=this.getParsedFilterOptions();return s("div",{class:"masonry-filters"},s("div",{class:"filter-group"},s("label",null,"Filter:"),s("select",{onChange:i=>{const e=i.target.value;this.handleFilterChange(t[0]?.key||"category",e)}},s("option",{value:""},"All"),t.map((t=>s("option",{value:t.key},t.label))))),s("div",{class:"filter-group"},s("label",null,"Sort:"),s("select",{onChange:t=>this.handleSortChange(t.target.value,this.sortOrder)},s("option",{value:""},"None"),s("option",{value:"title"},"Title"),s("option",{value:"date"},"Date"),s("option",{value:"size"},"Size"))),s("div",{class:"filter-group"},s("ui-button",{variant:"ghost",class:{"sort-button":!0,active:"asc"===this.sortOrder},onClick:()=>this.handleSortChange(this.sortBy,"asc"),icon:"arrow-up",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"}),s("ui-button",{variant:"ghost",class:{"sort-button":!0,active:"desc"===this.sortOrder},onClick:()=>this.handleSortChange(this.sortBy,"desc"),icon:"arrow-down",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})))}renderMasonryLayout(){const t=this.infiniteScroll?this.filteredItems.slice(0,this.visibleItems):this.filteredItems;return s("div",{class:"masonry-columns",role:"grid","aria-label":"Masonry layout",style:{"column-count":""+this.currentColumns,"column-gap":this.gap+"px"}},t.map(((t,i)=>s("div",{class:{"masonry-item":!0,animate:this.enableAnimation&&!this.isResizing,selected:this.selectedItems.has(i)},style:{"margin-bottom":this.gap+"px","animation-delay":this.enableAnimation?50*i+"ms":"0ms"},onClick:()=>this.handleItemClick(t,i),role:"gridcell","aria-selected":this.selectedItems.has(i)?"true":"false",tabindex:0},this.selectable&&s("div",{class:"selection-checkbox"},s("ui-checkbox",{checked:this.selectedItems.has(i),onCheckboxChange:t=>this.toggleSelection(i,t),ariaLabel:"Select "+(t.title||"item "+(i+1)),size:"sm"})),s("slot",{name:"item-"+i},this.renderDefaultItem(t,i))))),this.infiniteScroll&&this.visibleItems<this.filteredItems.length&&s("div",{class:"infinite-scroll-sentinel"}))}renderGridLayout(){const t=this.infiniteScroll?this.filteredItems.slice(0,this.visibleItems):this.filteredItems;return s("div",{class:"masonry-grid",role:"grid","aria-label":"Grid layout",style:{"grid-template-columns":`repeat(${this.currentColumns}, 1fr)`,gap:this.gap+"px"}},t.map(((t,i)=>s("div",{class:{"masonry-item":!0,animate:this.enableAnimation&&!this.isResizing,selected:this.selectedItems.has(i)},style:{"animation-delay":this.enableAnimation?50*i+"ms":"0ms"},onClick:()=>this.handleItemClick(t,i),role:"gridcell","aria-selected":this.selectedItems.has(i)?"true":"false",tabindex:0},this.selectable&&s("div",{class:"selection-checkbox"},s("ui-checkbox",{checked:this.selectedItems.has(i),onCheckboxChange:t=>this.toggleSelection(i,t),ariaLabel:"Select "+(t.title||"item "+(i+1)),size:"sm"})),s("slot",{name:"item-"+i},this.renderDefaultItem(t,i))))),this.infiniteScroll&&this.visibleItems<this.filteredItems.length&&s("div",{class:"infinite-scroll-sentinel"}))}renderColumnsLayout(){const t=Array.from({length:this.currentColumns},((t,i)=>i)),i=this.infiniteScroll?this.filteredItems.slice(0,this.visibleItems):this.filteredItems;return s("div",{class:"masonry-flex-columns",role:"grid","aria-label":"Column layout",style:{gap:this.gap+"px"}},t.map((t=>s("div",{class:"masonry-column",style:{flex:"1"},role:"row"},this.getColumnItems(t).map(((e,a)=>{const o=t+a*this.currentColumns;return o>=i.length?null:s("div",{class:{"masonry-item":!0,animate:this.enableAnimation&&!this.isResizing,selected:this.selectedItems.has(o)},style:{"margin-bottom":this.gap+"px","animation-delay":this.enableAnimation?50*o+"ms":"0ms"},onClick:()=>this.handleItemClick(e,o),role:"gridcell","aria-selected":this.selectedItems.has(o)?"true":"false",tabindex:0},this.selectable&&s("div",{class:"selection-checkbox"},s("ui-checkbox",{checked:this.selectedItems.has(o),onCheckboxChange:t=>this.toggleSelection(o,t),ariaLabel:"Select "+(e.title||"item "+(o+1)),size:"sm"})),s("slot",{name:"item-"+o},this.renderDefaultItem(e,o)))}))))),this.infiniteScroll&&this.visibleItems<this.filteredItems.length&&s("div",{class:"infinite-scroll-sentinel"}))}openLightbox(t,i){this.lightbox&&(i.stopPropagation(),this.activeImageIndex=t,this.isLightboxOpen=!0,document.body.style.overflow="hidden")}closeLightbox(){this.isLightboxOpen=!1,document.body.style.overflow=""}nextImage(t){t&&t.stopPropagation(),this.activeImageIndex<this.filteredItems.length-1?this.activeImageIndex++:this.activeImageIndex=0}prevImage(t){t&&t.stopPropagation(),this.activeImageIndex>0?this.activeImageIndex--:this.activeImageIndex=this.filteredItems.length-1}renderLightbox(){if(!this.isLightboxOpen||-1===this.activeImageIndex)return null;const t=this.filteredItems[this.activeImageIndex];return t?s("div",{class:"masonry-lightbox",onClick:()=>this.closeLightbox()},s("ui-button",{variant:"ghost",class:"lightbox-close",onClick:()=>this.closeLightbox(),icon:"times",iconLibrary:"fontawesome",iconOnly:!0,size:"lg",ariaLabel:"Close lightbox"}),s("div",{class:"lightbox-content",onClick:t=>t.stopPropagation()},s("ui-button",{variant:"ghost",class:"lightbox-nav prev",onClick:t=>this.prevImage(t),icon:"chevron-left",iconLibrary:"fontawesome",iconOnly:!0,size:"lg",ariaLabel:"Previous image"}),s("div",{class:"lightbox-image-container"},s("img",{src:t.image,alt:t.title,class:"lightbox-image"}),s("div",{class:"lightbox-details"},s("h3",null,t.title),t.description&&s("p",null,t.description))),s("ui-button",{variant:"ghost",class:"lightbox-nav next",onClick:t=>this.nextImage(t),icon:"chevron-right",iconLibrary:"fontawesome",iconOnly:!0,size:"lg",ariaLabel:"Next image"})),s("div",{class:"lightbox-counter"},this.activeImageIndex+1," / ",this.filteredItems.length)):null}renderSkeleton(){const t=Array.from({length:3*this.currentColumns},((t,i)=>i)),i=Array.from({length:this.currentColumns},((t,i)=>i));return s("div",{class:"masonry-flex-columns skeleton-wrapper",style:{gap:this.gap+"px"}},i.map((i=>s("div",{class:"masonry-column",style:{flex:"1"}},t.filter(((t,e)=>e%this.currentColumns===i)).map(((t,i)=>s("div",{class:"masonry-item skeleton-item",style:{"margin-bottom":this.gap+"px",height:200+50*i%200+"px"}},s("div",{class:"skeleton-shimmer"}))))))))}renderDefaultItem(t,i){return s("div",{class:"default-item",style:{"min-width":this.itemMinWidth?this.itemMinWidth+"px":void 0,"max-width":this.itemMaxWidth?this.itemMaxWidth+"px":void 0}},s("div",{class:"image-wrapper"},t.image&&s("img",this.lazyLoad?{"data-src":t.image,"data-index":""+i,alt:t.title||"Item",class:"lazy-image",style:{opacity:this.loadedImages.has(i)?"1":"0.3"}}:{src:t.image,alt:t.title||"Item",loading:"lazy"}),s("div",{class:"item-overlay"},s("div",{class:"overlay-actions"},this.lightbox&&s("ui-button",{variant:"ghost",onClick:t=>this.openLightbox(i,t),ariaLabel:"View Fullscreen",icon:"expand-alt",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"}),s("ui-button",{variant:"ghost",ariaLabel:"Like",icon:"heart",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"}),s("ui-button",{variant:"ghost",ariaLabel:"Info",icon:"info",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})))),t.title&&s("h3",{class:"item-title"},t.title),t.description&&s("p",{class:"item-description"},t.description),t.tags&&s("div",{class:"item-tags"},t.tags.map((t=>s("span",{class:"tag"},t)))))}renderEmpty(){return s("div",{class:"masonry-empty"},s("ui-icon",{name:"inbox",library:"fontawesome"}),s("p",null,this.emptyMessage))}renderBatchActions(){return this.showBatchActions&&0!==this.selectedItems.size?s("div",{class:"batch-actions-toolbar",role:"toolbar","aria-label":"Batch actions"},s("span",{class:"selection-count"},this.selectedItems.size," selected"),s("div",{class:"action-buttons"},s("ui-button",{variant:"ghost",onClick:()=>this.selectAll(),ariaLabel:"Select all items",icon:"check-square",iconLibrary:"fontawesome",label:"Select All"}),s("ui-button",{variant:"ghost",onClick:()=>this.deselectAll(),ariaLabel:"Clear selection",icon:"times",iconLibrary:"fontawesome",label:"Clear"}),s("ui-button",{variant:"ghost",onClick:()=>this.deleteSelected(),class:"delete-button",ariaLabel:"Delete selected items",icon:"trash",iconLibrary:"fontawesome",label:"Delete"}))):null}render(){return this.loadingState?this.renderSkeleton():0===this.filteredItems.length?this.renderEmpty():s("div",{class:"masonry-wrapper",tabindex:this.selectable?0:-1},this.renderFilters(),this.renderBatchActions(),s("div",{class:{"masonry-container":!0,["masonry-"+this.layoutType]:!0}},"masonry"===this.layoutType&&this.renderMasonryLayout(),"grid"===this.layoutType&&this.renderGridLayout(),"columns"===this.layoutType&&this.renderColumnsLayout()),this.renderLightbox())}static get watchers(){return{items:[{watchItemsChange:0}],filterBy:[{watchItemsChange:0}],sortBy:[{watchItemsChange:0}],sortOrder:[{watchItemsChange:0}],columns:[{watchColumnsChange:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.masonry-wrapper{width:100%;padding:16px}.masonry-filters{display:flex;gap:16px;align-items:center;margin-bottom:24px;padding:16px;background:var(--bg-primary, #f9fafb);border-radius:8px;flex-wrap:wrap}.masonry-filters .filter-group{display:flex;gap:8px;align-items:center}.masonry-filters .filter-group label{font-weight:600;font-size:0.875rem;color:var(--text-secondary, #374151)}.masonry-filters .filter-group select{padding:8px 12px;border:1px solid var(--border-strong, #d1d5db);border-radius:6px;font-size:0.875rem;background:var(--bg-primary, #ffffff);cursor:pointer;min-width:120px}.masonry-filters .filter-group select:focus{outline:none;border-color:var(--color-primary-hover, #2563eb);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.masonry-filters .filter-group .sort-button{padding:8px 12px;border:1px solid var(--border-strong, #d1d5db);border-radius:6px;background:var(--bg-primary, #ffffff);cursor:pointer;transition:all 0.2s ease;color:var(--text-muted, #6b7280)}.masonry-filters .filter-group .sort-button:hover{background:var(--bg-secondary, #f3f4f6);border-color:var(--color-primary, #9ca3af)}.masonry-filters .filter-group .sort-button.active{background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff);border-color:var(--color-success, #3dcd58)}.masonry-filters .filter-group .sort-button:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.masonry-container{width:100%}.masonry-columns{column-gap:16px}.masonry-columns .masonry-item{break-inside:avoid;page-break-inside:avoid;display:inline-block;width:100%}.masonry-grid{display:grid;grid-auto-rows:auto;width:100%}.masonry-grid .masonry-item{width:100%}.masonry-flex-columns{display:flex;width:100%}.masonry-flex-columns .masonry-column{display:flex;flex-direction:column}.masonry-item{cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease;background:var(--bg-primary, #ffffff);border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.masonry-item:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15)}.masonry-item.animate{animation:fadeInUp 0.3s ease forwards;opacity:0}.default-item img{width:100%;height:auto;display:block;object-fit:cover}.default-item .item-title{margin:12px 16px 8px;font-size:1rem;font-weight:600;color:var(--text-primary, #111827);line-height:1.4}.default-item .item-description{margin:0 16px 12px;font-size:0.875rem;color:var(--text-muted, #6b7280);line-height:1.5}.default-item .item-tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 16px 16px}.default-item .item-tags .tag{padding:4px 8px;background:var(--bg-primary, #eff6ff);color:var(--color-success, #3dcd58);font-size:0.75rem;font-weight:500;border-radius:4px}.masonry-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-muted, #6b7280)}.masonry-loading .spinner{width:48px;height:48px;border:4px solid var(--border-default, #e5e7eb);border-top-color:var(--color-success, #3dcd58);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:16px}.masonry-loading p{font-size:1rem;font-weight:500}.masonry-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-muted, #9ca3af)}.masonry-empty i{font-size:48px;margin-bottom:16px}.masonry-empty p{font-size:1rem;font-weight:500}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.skeleton-item{background:var(--bg-secondary, #f3f4f6);position:relative;overflow:hidden;border-radius:8px}.skeleton-item .skeleton-shimmer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);animation:shimmer 1.5s infinite;transform:translateX(-100%)}@keyframes shimmer{100%{transform:translateX(100%)}}.masonry-lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.9);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn 0.3s ease}.masonry-lightbox .lightbox-close{position:absolute;top:20px;right:20px;background:transparent;border:none;color:var(--text-standard, #ffffff);font-size:2rem;cursor:pointer;z-index:10001;transition:transform 0.2s ease}.masonry-lightbox .lightbox-close:hover{transform:scale(1.1)}.masonry-lightbox .lightbox-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:40px;box-sizing:border-box;position:relative}.masonry-lightbox .lightbox-nav{background:rgba(255, 255, 255, 0.1);border:none;color:var(--text-standard, #ffffff);font-size:1.5rem;padding:16px;border-radius:50%;cursor:pointer;transition:all 0.2s ease;backdrop-filter:blur(4px)}.masonry-lightbox .lightbox-nav:hover{background:rgba(255, 255, 255, 0.2);transform:scale(1.1)}.masonry-lightbox .lightbox-nav.prev{margin-right:20px}.masonry-lightbox .lightbox-nav.next{margin-left:20px}.masonry-lightbox .lightbox-image-container{position:relative;max-width:80%;max-height:80vh;border-radius:8px;overflow:hidden;box-shadow:0 20px 50px rgba(0, 0, 0, 0.5)}.masonry-lightbox .lightbox-image-container .lightbox-image{display:block;width:100%;height:100%;object-fit:contain;max-height:80vh}.masonry-lightbox .lightbox-image-container .lightbox-details{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);padding:24px;color:var(--text-standard, #ffffff);transform:translateY(100%);transition:transform 0.3s ease;box-sizing:border-box}.masonry-lightbox .lightbox-image-container .lightbox-details h3{margin:0 0 8px;font-size:1.25rem}.masonry-lightbox .lightbox-image-container .lightbox-details p{margin:0;opacity:0.8;font-size:0.9rem}.masonry-lightbox .lightbox-image-container:hover .lightbox-details{transform:translateY(0)}.masonry-lightbox .lightbox-counter{position:absolute;bottom:20px;color:rgba(255, 255, 255, 0.6);font-size:0.9rem;letter-spacing:1px}.default-item{position:relative}.default-item .image-wrapper{position:relative;overflow:hidden}.default-item .image-wrapper .item-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.default-item .image-wrapper .item-overlay .overlay-actions{display:flex;gap:12px;transform:translateY(20px);transition:transform 0.3s ease}.default-item .image-wrapper .item-overlay .action-btn{width:40px;height:40px;border-radius:50%;background:var(--bg-primary, #ffffff);border:none;color:var(--text-secondary, #333);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;box-shadow:0 4px 12px rgba(0, 0, 0, 0.2)}.default-item .image-wrapper .item-overlay .action-btn:hover{transform:translateY(-2px);background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff)}.default-item .image-wrapper:hover .item-overlay{opacity:1}.default-item .image-wrapper:hover .item-overlay .overlay-actions{transform:translateY(0)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}"}},[769,"ui-masonry",{items:[1],columns:[2],gap:[2],layoutType:[1,"layout-type"],itemMinWidth:[2,"item-min-width"],itemMaxWidth:[2,"item-max-width"],breakpoints:[1],filterBy:[1,"filter-by"],sortBy:[1,"sort-by"],sortOrder:[1,"sort-order"],animationDuration:[2,"animation-duration"],enableAnimation:[4,"enable-animation"],loadingState:[4,"loading-state"],emptyMessage:[1,"empty-message"],showFilters:[4,"show-filters"],filterOptions:[1,"filter-options"],lazyLoad:[4,"lazy-load"],lazyLoadMargin:[1,"lazy-load-margin"],infiniteScroll:[4,"infinite-scroll"],infiniteScrollDistance:[2,"infinite-scroll-distance"],selectable:[4],multiSelect:[4,"multi-select"],showBatchActions:[4,"show-batch-actions"],lightbox:[4],filteredItems:[32],currentColumns:[32],isResizing:[32],selectedItems:[32],loadedImages:[32],visibleItems:[32],activeImageIndex:[32],isLightboxOpen:[32]},[[8,"keydown","handleWindowKeyDown"]],{items:[{watchItemsChange:0}],filterBy:[{watchItemsChange:0}],sortBy:[{watchItemsChange:0}],sortOrder:[{watchItemsChange:0}],columns:[{watchColumnsChange:0}]}]),c=h,m=function(){"undefined"!=typeof customElements&&["ui-masonry","ui-badge","ui-button","ui-checkbox","ui-icon"].forEach((t=>{switch(t){case"ui-masonry":customElements.get(a(t))||customElements.define(a(t),h);break;case"ui-badge":customElements.get(a(t))||r();break;case"ui-button":customElements.get(a(t))||o();break;case"ui-checkbox":customElements.get(a(t))||n();break;case"ui-icon":customElements.get(a(t))||l()}}))};export{c as UiMasonry,m as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,transformTag as a}from"@stencil/core/internal/client";import{d as o,a as r}from"./badge.js";import{d as n}from"./checkbox.js";import{d as l}from"./icon.js";import{d as h}from"./loader.js";const c=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.itemClick=e(this,"itemClick",7),this.filterChange=e(this,"filterChange",7),this.sortChange=e(this,"sortChange",7),this.itemSelectionChange=e(this,"itemSelectionChange",7),this.layoutChange=e(this,"layoutChange",7),this.itemsLoaded=e(this,"itemsLoaded",7),this.batchDelete=e(this,"batchDelete",7)}get el(){return this}items=[];columns=3;gap=16;layoutType="masonry";itemMinWidth=200;itemMaxWidth=400;breakpoints='{"640":2,"768":3,"1024":4,"1280":5}';filterBy="";sortBy="";sortOrder="asc";animationDuration=300;enableAnimation=!0;loadingState=!1;emptyMessage="No items to display";showFilters=!1;filterOptions=[];lazyLoad=!1;lazyLoadMargin="200px";infiniteScroll=!1;infiniteScrollDistance=200;selectable=!1;multiSelect=!1;showBatchActions=!1;lightbox=!1;filteredItems=[];currentColumns=3;isResizing=!1;selectedItems=new Set;loadedImages=new Set;visibleItems=12;activeImageIndex=-1;isLightboxOpen=!1;itemClick;filterChange;sortChange;itemSelectionChange;layoutChange;itemsLoaded;batchDelete;resizeObserver;componentWillLoad(){this.updateFilteredItems(),this.calculateColumns()}componentDidLoad(){this.setupResizeObserver(),this.infiniteScroll&&this.setupInfiniteScroll(),this.lazyLoad&&this.setupLazyLoading()}handleWindowKeyDown(t){if(this.isLightboxOpen&&this.lightbox)return"Escape"===t.key&&this.closeLightbox(),"ArrowRight"===t.key&&this.nextImage(t),void("ArrowLeft"===t.key&&this.prevImage(t));(this.selectedItems.size>0||document.activeElement===this.el)&&this.handleKeyDown(t)}handleKeyDown(t){if(this.selectable)return t.ctrlKey&&"a"===t.key?(t.preventDefault(),void this.selectAll()):"Escape"===t.key&&this.selectedItems.size>0?(t.preventDefault(),void this.deselectAll()):"Delete"===t.key&&this.selectedItems.size>0?(t.preventDefault(),void this.deleteSelected()):void 0}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect(),this.infiniteScrollObserver&&this.infiniteScrollObserver.disconnect(),this.lazyLoadObserver&&this.lazyLoadObserver.disconnect()}infiniteScrollObserver;lazyLoadObserver;setupInfiniteScroll(){void 0!==globalThis.IntersectionObserver&&(this.infiniteScrollObserver=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&this.visibleItems<this.filteredItems.length&&(this.visibleItems=Math.min(this.visibleItems+12,this.filteredItems.length),this.itemsLoaded.emit({count:this.visibleItems,total:this.filteredItems.length}))}))}),{rootMargin:this.infiniteScrollDistance+"px"}),setTimeout((()=>{const t=this.el.shadowRoot?.querySelector(".infinite-scroll-sentinel");t&&this.infiniteScrollObserver.observe(t)}),100))}setupLazyLoading(){void 0!==globalThis.IntersectionObserver&&(this.lazyLoadObserver=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const i=parseInt(t.target.getAttribute("data-index"));this.loadedImages=new Set([...this.loadedImages,i]);const e=t.target,s=e.getAttribute("data-src");s&&!e.src&&(e.src=s),this.lazyLoadObserver.unobserve(t.target)}}))}),{rootMargin:this.lazyLoadMargin}),setTimeout((()=>{const t=this.el.shadowRoot?.querySelectorAll("img[data-src]");t?.forEach((t=>this.lazyLoadObserver.observe(t)))}),100))}toggleSelection(t,i){if(!this.selectable)return;i&&i.stopPropagation();const e=new Set(this.selectedItems);e.has(t)?e.delete(t):(this.multiSelect||e.clear(),e.add(t)),this.selectedItems=e;const s=Array.from(this.selectedItems),a=s.map((t=>this.filteredItems[t]));this.itemSelectionChange.emit({selectedItems:a,indices:s})}selectAll(){if(!this.selectable)return;this.selectedItems=new Set(this.filteredItems.map(((t,i)=>i)));const t=Array.from(this.selectedItems),i=t.map((t=>this.filteredItems[t]));this.itemSelectionChange.emit({selectedItems:i,indices:t})}deselectAll(){this.selectedItems=new Set,this.itemSelectionChange.emit({selectedItems:[],indices:[]})}deleteSelected(){const t=Array.from(this.selectedItems),i=t.map((t=>this.filteredItems[t]));this.batchDelete.emit({items:i,indices:t}),this.selectedItems=new Set,this.itemSelectionChange.emit({selectedItems:[],indices:[]})}watchItemsChange(){this.updateFilteredItems()}watchColumnsChange(){this.calculateColumns()}getParsedItems(){if("string"==typeof this.items)try{return JSON.parse(this.items)}catch{return console.error("Invalid items JSON"),[]}return this.items}getParsedFilterOptions(){if("string"==typeof this.filterOptions)try{return JSON.parse(this.filterOptions)}catch{return[]}return this.filterOptions}getParsedBreakpoints(){try{return JSON.parse(this.breakpoints)}catch{return{640:2,768:3,1024:4,1280:5}}}setupResizeObserver(){this.resizeObserver=new ResizeObserver((()=>{this.isResizing=!0,this.calculateColumns(),setTimeout((()=>{this.isResizing=!1}),100)}));const t=this.el.shadowRoot.querySelector(".masonry-container");t&&this.resizeObserver.observe(t)}calculateColumns(){const t=this.el.shadowRoot?.querySelector(".masonry-container");if(!t)return;const i=t.clientWidth,e=this.getParsedBreakpoints(),s=Object.keys(e).map(Number).sort(((t,i)=>i-t));let a=this.columns;for(const t of s)if(i>=t){a=e[t];break}this.currentColumns=a}updateFilteredItems(){let t=[...this.getParsedItems()];this.filterBy&&(t=t.filter((t=>{const[i,e]=this.filterBy.split(":");return t[i]&&(""+t[i]).toLowerCase().includes(e.toLowerCase())}))),this.sortBy&&t.sort(((t,i)=>{const e=t[this.sortBy],s=i[this.sortBy];if("number"==typeof e&&"number"==typeof s)return"asc"===this.sortOrder?e-s:s-e;const a=(e+"").toLowerCase(),o=(s+"").toLowerCase();return"asc"===this.sortOrder?a.localeCompare(o):o.localeCompare(a)})),this.filteredItems=t}handleItemClick=(t,i)=>{this.itemClick.emit({item:t,index:i})};handleFilterChange=(t,i)=>{this.filterChange.emit({filterBy:t,value:i})};handleSortChange=(t,i)=>{this.sortChange.emit({sortBy:t,order:i})};getColumnItems(t){return"masonry"===this.layoutType?this.filteredItems.filter(((i,e)=>e%this.currentColumns===t)):this.filteredItems}renderFilters(){if(!this.showFilters)return null;const t=this.getParsedFilterOptions();return s("div",{class:"masonry-filters"},s("div",{class:"filter-group"},s("label",null,"Filter:"),s("select",{onChange:i=>{const e=i.target.value;this.handleFilterChange(t[0]?.key||"category",e)}},s("option",{value:""},"All"),t.map((t=>s("option",{value:t.key},t.label))))),s("div",{class:"filter-group"},s("label",null,"Sort:"),s("select",{onChange:t=>this.handleSortChange(t.target.value,this.sortOrder)},s("option",{value:""},"None"),s("option",{value:"title"},"Title"),s("option",{value:"date"},"Date"),s("option",{value:"size"},"Size"))),s("div",{class:"filter-group"},s("ui-button",{variant:"ghost",class:{"sort-button":!0,active:"asc"===this.sortOrder},onClick:()=>this.handleSortChange(this.sortBy,"asc"),icon:"arrow-up",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"}),s("ui-button",{variant:"ghost",class:{"sort-button":!0,active:"desc"===this.sortOrder},onClick:()=>this.handleSortChange(this.sortBy,"desc"),icon:"arrow-down",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})))}renderMasonryLayout(){const t=this.infiniteScroll?this.filteredItems.slice(0,this.visibleItems):this.filteredItems;return s("div",{class:"masonry-columns",role:"grid","aria-label":"Masonry layout",style:{"column-count":""+this.currentColumns,"column-gap":this.gap+"px"}},t.map(((t,i)=>s("div",{class:{"masonry-item":!0,animate:this.enableAnimation&&!this.isResizing,selected:this.selectedItems.has(i)},style:{"margin-bottom":this.gap+"px","animation-delay":this.enableAnimation?50*i+"ms":"0ms"},onClick:()=>this.handleItemClick(t,i),role:"gridcell","aria-selected":this.selectedItems.has(i)?"true":"false",tabindex:0},this.selectable&&s("div",{class:"selection-checkbox"},s("ui-checkbox",{checked:this.selectedItems.has(i),onCheckboxChange:t=>this.toggleSelection(i,t),ariaLabel:"Select "+(t.title||"item "+(i+1)),size:"sm"})),s("slot",{name:"item-"+i},this.renderDefaultItem(t,i))))),this.infiniteScroll&&this.visibleItems<this.filteredItems.length&&s("div",{class:"infinite-scroll-sentinel"}))}renderGridLayout(){const t=this.infiniteScroll?this.filteredItems.slice(0,this.visibleItems):this.filteredItems;return s("div",{class:"masonry-grid",role:"grid","aria-label":"Grid layout",style:{"grid-template-columns":`repeat(${this.currentColumns}, 1fr)`,gap:this.gap+"px"}},t.map(((t,i)=>s("div",{class:{"masonry-item":!0,animate:this.enableAnimation&&!this.isResizing,selected:this.selectedItems.has(i)},style:{"animation-delay":this.enableAnimation?50*i+"ms":"0ms"},onClick:()=>this.handleItemClick(t,i),role:"gridcell","aria-selected":this.selectedItems.has(i)?"true":"false",tabindex:0},this.selectable&&s("div",{class:"selection-checkbox"},s("ui-checkbox",{checked:this.selectedItems.has(i),onCheckboxChange:t=>this.toggleSelection(i,t),ariaLabel:"Select "+(t.title||"item "+(i+1)),size:"sm"})),s("slot",{name:"item-"+i},this.renderDefaultItem(t,i))))),this.infiniteScroll&&this.visibleItems<this.filteredItems.length&&s("div",{class:"infinite-scroll-sentinel"}))}renderColumnsLayout(){const t=Array.from({length:this.currentColumns},((t,i)=>i)),i=this.infiniteScroll?this.filteredItems.slice(0,this.visibleItems):this.filteredItems;return s("div",{class:"masonry-flex-columns",role:"grid","aria-label":"Column layout",style:{gap:this.gap+"px"}},t.map((t=>s("div",{class:"masonry-column",style:{flex:"1"},role:"row"},this.getColumnItems(t).map(((e,a)=>{const o=t+a*this.currentColumns;return o>=i.length?null:s("div",{class:{"masonry-item":!0,animate:this.enableAnimation&&!this.isResizing,selected:this.selectedItems.has(o)},style:{"margin-bottom":this.gap+"px","animation-delay":this.enableAnimation?50*o+"ms":"0ms"},onClick:()=>this.handleItemClick(e,o),role:"gridcell","aria-selected":this.selectedItems.has(o)?"true":"false",tabindex:0},this.selectable&&s("div",{class:"selection-checkbox"},s("ui-checkbox",{checked:this.selectedItems.has(o),onCheckboxChange:t=>this.toggleSelection(o,t),ariaLabel:"Select "+(e.title||"item "+(o+1)),size:"sm"})),s("slot",{name:"item-"+o},this.renderDefaultItem(e,o)))}))))),this.infiniteScroll&&this.visibleItems<this.filteredItems.length&&s("div",{class:"infinite-scroll-sentinel"}))}openLightbox(t,i){this.lightbox&&(i.stopPropagation(),this.activeImageIndex=t,this.isLightboxOpen=!0,document.body.style.overflow="hidden")}closeLightbox(){this.isLightboxOpen=!1,document.body.style.overflow=""}nextImage(t){t&&t.stopPropagation(),this.activeImageIndex<this.filteredItems.length-1?this.activeImageIndex++:this.activeImageIndex=0}prevImage(t){t&&t.stopPropagation(),this.activeImageIndex>0?this.activeImageIndex--:this.activeImageIndex=this.filteredItems.length-1}renderLightbox(){if(!this.isLightboxOpen||-1===this.activeImageIndex)return null;const t=this.filteredItems[this.activeImageIndex];return t?s("div",{class:"masonry-lightbox",onClick:()=>this.closeLightbox()},s("ui-button",{variant:"ghost",class:"lightbox-close",onClick:()=>this.closeLightbox(),icon:"times",iconLibrary:"fontawesome",iconOnly:!0,size:"lg",ariaLabel:"Close lightbox"}),s("div",{class:"lightbox-content",onClick:t=>t.stopPropagation()},s("ui-button",{variant:"ghost",class:"lightbox-nav prev",onClick:t=>this.prevImage(t),icon:"chevron-left",iconLibrary:"fontawesome",iconOnly:!0,size:"lg",ariaLabel:"Previous image"}),s("div",{class:"lightbox-image-container"},s("img",{src:t.image,alt:t.title,class:"lightbox-image"}),s("div",{class:"lightbox-details"},s("h3",null,t.title),t.description&&s("p",null,t.description))),s("ui-button",{variant:"ghost",class:"lightbox-nav next",onClick:t=>this.nextImage(t),icon:"chevron-right",iconLibrary:"fontawesome",iconOnly:!0,size:"lg",ariaLabel:"Next image"})),s("div",{class:"lightbox-counter"},this.activeImageIndex+1," / ",this.filteredItems.length)):null}renderSkeleton(){const t=Array.from({length:3*this.currentColumns},((t,i)=>i)),i=Array.from({length:this.currentColumns},((t,i)=>i));return s("div",{class:"masonry-flex-columns skeleton-wrapper",style:{gap:this.gap+"px"}},i.map((i=>s("div",{class:"masonry-column",style:{flex:"1"}},t.filter(((t,e)=>e%this.currentColumns===i)).map(((t,i)=>s("div",{class:"masonry-item skeleton-item",style:{"margin-bottom":this.gap+"px",height:200+50*i%200+"px"}},s("div",{class:"skeleton-shimmer"}))))))))}renderDefaultItem(t,i){return s("div",{class:"default-item",style:{"min-width":this.itemMinWidth?this.itemMinWidth+"px":void 0,"max-width":this.itemMaxWidth?this.itemMaxWidth+"px":void 0}},s("div",{class:"image-wrapper"},t.image&&s("img",this.lazyLoad?{"data-src":t.image,"data-index":""+i,alt:t.title||"Item",class:"lazy-image",style:{opacity:this.loadedImages.has(i)?"1":"0.3"}}:{src:t.image,alt:t.title||"Item",loading:"lazy"}),s("div",{class:"item-overlay"},s("div",{class:"overlay-actions"},this.lightbox&&s("ui-button",{variant:"ghost",onClick:t=>this.openLightbox(i,t),ariaLabel:"View Fullscreen",icon:"expand-alt",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"}),s("ui-button",{variant:"ghost",ariaLabel:"Like",icon:"heart",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"}),s("ui-button",{variant:"ghost",ariaLabel:"Info",icon:"info",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})))),t.title&&s("h3",{class:"item-title"},t.title),t.description&&s("p",{class:"item-description"},t.description),t.tags&&s("div",{class:"item-tags"},t.tags.map((t=>s("span",{class:"tag"},t)))))}renderEmpty(){return s("div",{class:"masonry-empty"},s("ui-icon",{name:"inbox",library:"fontawesome"}),s("p",null,this.emptyMessage))}renderBatchActions(){return this.showBatchActions&&0!==this.selectedItems.size?s("div",{class:"batch-actions-toolbar",role:"toolbar","aria-label":"Batch actions"},s("span",{class:"selection-count"},this.selectedItems.size," selected"),s("div",{class:"action-buttons"},s("ui-button",{variant:"ghost",onClick:()=>this.selectAll(),ariaLabel:"Select all items",icon:"check-square",iconLibrary:"fontawesome",label:"Select All"}),s("ui-button",{variant:"ghost",onClick:()=>this.deselectAll(),ariaLabel:"Clear selection",icon:"times",iconLibrary:"fontawesome",label:"Clear"}),s("ui-button",{variant:"ghost",onClick:()=>this.deleteSelected(),class:"delete-button",ariaLabel:"Delete selected items",icon:"trash",iconLibrary:"fontawesome",label:"Delete"}))):null}render(){return this.loadingState?this.renderSkeleton():0===this.filteredItems.length?this.renderEmpty():s("div",{class:"masonry-wrapper",tabindex:this.selectable?0:-1},this.renderFilters(),this.renderBatchActions(),s("div",{class:{"masonry-container":!0,["masonry-"+this.layoutType]:!0}},"masonry"===this.layoutType&&this.renderMasonryLayout(),"grid"===this.layoutType&&this.renderGridLayout(),"columns"===this.layoutType&&this.renderColumnsLayout()),this.renderLightbox())}static get watchers(){return{items:[{watchItemsChange:0}],filterBy:[{watchItemsChange:0}],sortBy:[{watchItemsChange:0}],sortOrder:[{watchItemsChange:0}],columns:[{watchColumnsChange:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.masonry-wrapper{width:100%;padding:16px}.masonry-filters{display:flex;gap:16px;align-items:center;margin-bottom:24px;padding:16px;background:var(--bg-primary, #f9fafb);border-radius:8px;flex-wrap:wrap}.masonry-filters .filter-group{display:flex;gap:8px;align-items:center}.masonry-filters .filter-group label{font-weight:600;font-size:0.875rem;color:var(--text-secondary, #374151)}.masonry-filters .filter-group select{padding:8px 12px;border:1px solid var(--border-strong, #d1d5db);border-radius:6px;font-size:0.875rem;background:var(--bg-primary, #ffffff);cursor:pointer;min-width:120px}.masonry-filters .filter-group select:focus{outline:none;border-color:var(--color-primary-hover, #2563eb);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.masonry-filters .filter-group .sort-button{padding:8px 12px;border:1px solid var(--border-strong, #d1d5db);border-radius:6px;background:var(--bg-primary, #ffffff);cursor:pointer;transition:all 0.2s ease;color:var(--text-muted, #6b7280)}.masonry-filters .filter-group .sort-button:hover{background:var(--bg-secondary, #f3f4f6);border-color:var(--color-primary, #9ca3af)}.masonry-filters .filter-group .sort-button.active{background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff);border-color:var(--color-success, #3dcd58)}.masonry-filters .filter-group .sort-button:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.masonry-container{width:100%}.masonry-columns{column-gap:16px}.masonry-columns .masonry-item{break-inside:avoid;page-break-inside:avoid;display:inline-block;width:100%}.masonry-grid{display:grid;grid-auto-rows:auto;width:100%}.masonry-grid .masonry-item{width:100%}.masonry-flex-columns{display:flex;width:100%}.masonry-flex-columns .masonry-column{display:flex;flex-direction:column}.masonry-item{cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease;background:var(--bg-primary, #ffffff);border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.masonry-item:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15)}.masonry-item.animate{animation:fadeInUp 0.3s ease forwards;opacity:0}.default-item img{width:100%;height:auto;display:block;object-fit:cover}.default-item .item-title{margin:12px 16px 8px;font-size:1rem;font-weight:600;color:var(--text-primary, #111827);line-height:1.4}.default-item .item-description{margin:0 16px 12px;font-size:0.875rem;color:var(--text-muted, #6b7280);line-height:1.5}.default-item .item-tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 16px 16px}.default-item .item-tags .tag{padding:4px 8px;background:var(--bg-primary, #eff6ff);color:var(--color-success, #3dcd58);font-size:0.75rem;font-weight:500;border-radius:4px}.masonry-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-muted, #6b7280)}.masonry-loading .spinner{width:48px;height:48px;border:4px solid var(--border-default, #e5e7eb);border-top-color:var(--color-success, #3dcd58);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:16px}.masonry-loading p{font-size:1rem;font-weight:500}.masonry-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-muted, #9ca3af)}.masonry-empty i{font-size:48px;margin-bottom:16px}.masonry-empty p{font-size:1rem;font-weight:500}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.skeleton-item{background:var(--bg-secondary, #f3f4f6);position:relative;overflow:hidden;border-radius:8px}.skeleton-item .skeleton-shimmer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);animation:shimmer 1.5s infinite;transform:translateX(-100%)}@keyframes shimmer{100%{transform:translateX(100%)}}.masonry-lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.9);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn 0.3s ease}.masonry-lightbox .lightbox-close{position:absolute;top:20px;right:20px;background:transparent;border:none;color:var(--text-standard, #ffffff);font-size:2rem;cursor:pointer;z-index:10001;transition:transform 0.2s ease}.masonry-lightbox .lightbox-close:hover{transform:scale(1.1)}.masonry-lightbox .lightbox-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:40px;box-sizing:border-box;position:relative}.masonry-lightbox .lightbox-nav{background:rgba(255, 255, 255, 0.1);border:none;color:var(--text-standard, #ffffff);font-size:1.5rem;padding:16px;border-radius:50%;cursor:pointer;transition:all 0.2s ease;backdrop-filter:blur(4px)}.masonry-lightbox .lightbox-nav:hover{background:rgba(255, 255, 255, 0.2);transform:scale(1.1)}.masonry-lightbox .lightbox-nav.prev{margin-right:20px}.masonry-lightbox .lightbox-nav.next{margin-left:20px}.masonry-lightbox .lightbox-image-container{position:relative;max-width:80%;max-height:80vh;border-radius:8px;overflow:hidden;box-shadow:0 20px 50px rgba(0, 0, 0, 0.5)}.masonry-lightbox .lightbox-image-container .lightbox-image{display:block;width:100%;height:100%;object-fit:contain;max-height:80vh}.masonry-lightbox .lightbox-image-container .lightbox-details{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);padding:24px;color:var(--text-standard, #ffffff);transform:translateY(100%);transition:transform 0.3s ease;box-sizing:border-box}.masonry-lightbox .lightbox-image-container .lightbox-details h3{margin:0 0 8px;font-size:1.25rem}.masonry-lightbox .lightbox-image-container .lightbox-details p{margin:0;opacity:0.8;font-size:0.9rem}.masonry-lightbox .lightbox-image-container:hover .lightbox-details{transform:translateY(0)}.masonry-lightbox .lightbox-counter{position:absolute;bottom:20px;color:rgba(255, 255, 255, 0.6);font-size:0.9rem;letter-spacing:1px}.default-item{position:relative}.default-item .image-wrapper{position:relative;overflow:hidden}.default-item .image-wrapper .item-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.default-item .image-wrapper .item-overlay .overlay-actions{display:flex;gap:12px;transform:translateY(20px);transition:transform 0.3s ease}.default-item .image-wrapper .item-overlay .action-btn{width:40px;height:40px;border-radius:50%;background:var(--bg-primary, #ffffff);border:none;color:var(--text-secondary, #333);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;box-shadow:0 4px 12px rgba(0, 0, 0, 0.2)}.default-item .image-wrapper .item-overlay .action-btn:hover{transform:translateY(-2px);background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff)}.default-item .image-wrapper:hover .item-overlay{opacity:1}.default-item .image-wrapper:hover .item-overlay .overlay-actions{transform:translateY(0)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}"}},[769,"ui-masonry",{items:[1],columns:[2],gap:[2],layoutType:[1,"layout-type"],itemMinWidth:[2,"item-min-width"],itemMaxWidth:[2,"item-max-width"],breakpoints:[1],filterBy:[1,"filter-by"],sortBy:[1,"sort-by"],sortOrder:[1,"sort-order"],animationDuration:[2,"animation-duration"],enableAnimation:[4,"enable-animation"],loadingState:[4,"loading-state"],emptyMessage:[1,"empty-message"],showFilters:[4,"show-filters"],filterOptions:[1,"filter-options"],lazyLoad:[4,"lazy-load"],lazyLoadMargin:[1,"lazy-load-margin"],infiniteScroll:[4,"infinite-scroll"],infiniteScrollDistance:[2,"infinite-scroll-distance"],selectable:[4],multiSelect:[4,"multi-select"],showBatchActions:[4,"show-batch-actions"],lightbox:[4],filteredItems:[32],currentColumns:[32],isResizing:[32],selectedItems:[32],loadedImages:[32],visibleItems:[32],activeImageIndex:[32],isLightboxOpen:[32]},[[8,"keydown","handleWindowKeyDown"]],{items:[{watchItemsChange:0}],filterBy:[{watchItemsChange:0}],sortBy:[{watchItemsChange:0}],sortOrder:[{watchItemsChange:0}],columns:[{watchColumnsChange:0}]}]),m=c,d=function(){"undefined"!=typeof customElements&&["ui-masonry","ui-badge","ui-button","ui-checkbox","ui-icon","ui-loader"].forEach((t=>{switch(t){case"ui-masonry":customElements.get(a(t))||customElements.define(a(t),c);break;case"ui-badge":customElements.get(a(t))||r();break;case"ui-button":customElements.get(a(t))||o();break;case"ui-checkbox":customElements.get(a(t))||n();break;case"ui-icon":customElements.get(a(t))||l();break;case"ui-loader":customElements.get(a(t))||h()}}))};export{m as UiMasonry,d as defineCustomElement}

package/dist/components/ui-meter-group.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as i,transformTag as o}from"@stencil/core/internal/client";import{d as s}from"./icon.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.meterClick=r(this,"meterClick",7)}values=[];orientation="horizontal";size="md";showLabels=!0;iconLibrary="default";showValues=!0;showLegend=!1;shape="line";min=0;max=100;interactive=!1;animated=!0;meterClick;handleValuesChange(){this.normalizeProps()}componentWillLoad(){this.normalizeProps()}normalizeProps(){if("string"==typeof this.values)try{this.values=JSON.parse(this.values)}catch(e){console.warn("Failed to parse meter-group values",e)}}getValues(){return Array.isArray(this.values)?this.values:[]}getPercentage(e){return(e-this.min)/(this.max-this.min)*100}getDefaultColor(e){const t=["#3bf673","#10b981","#f59e0b","#ef4444","#8b5cf6","#ec4899"];return t[e%t.length]}handleSegmentClick(e){this.interactive&&this.meterClick.emit(e)}renderCircleMeter(){const e=this.getValues(),t=e.reduce(((e,t)=>e+t.value),0),r=2*Math.PI*50;let o=0;const s=e.map(((e,i)=>{const s=e.value/t*100,n=s/100*r,a=-o,l="object"==typeof e.color&&null!==e.color,c=l?e.color.from:e.color||this.getDefaultColor(i),h=`meter-grad-${i}-${Math.random().toString(36).substr(2,4)}`,m=e.gradient||l;return o+=n,{...e,color:c,gradientId:h,strokeDasharray:`${n} ${r}`,strokeDashoffset:a,percentage:s.toFixed(1),hasGradient:m}})),n="sm"===this.size?8:"lg"===this.size?16:12;return i("div",{class:"meter-circle-container"},i("svg",{viewBox:"0 0 120 120",class:"meter-circle"},i("circle",{cx:"60",cy:"60",r:50,fill:"none",stroke:"#e5e7eb","stroke-width":n}),i("defs",null,s.map((e=>{const t="object"==typeof e.color&&null!==e.color;if(!e.gradient&&!t)return null;const r=t?e.color.to:"object"==typeof e.gradient?e.gradient.to:e.color+"99";return i("linearGradient",{id:e.gradientId,x1:"0%",y1:"0%",x2:"100%",y2:"0%"},i("stop",{offset:"0%","stop-color":t?e.color.from:"object"==typeof e.gradient?e.gradient.from:e.color}),i("stop",{offset:"100%","stop-color":r}))}))),s.map((e=>i("g",{onClick:()=>this.handleSegmentClick(e),style:{cursor:this.interactive?"pointer":"default"}},i("title",null,`${e.label}: ${e.value}`),i("circle",{cx:"60",cy:"60",r:50,fill:"none",stroke:e.gradient||"object"==typeof e.color&&null!==e.color?`url(#${e.gradientId})`:e.color,"stroke-width":n,"stroke-dasharray":e.strokeDasharray,"stroke-dashoffset":e.strokeDashoffset,"stroke-linecap":"round",transform:"rotate(-90 60 60)",style:{transition:this.animated?"stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease":"none"}})))),this.showValues&&i("text",{x:"60",y:"60","text-anchor":"middle","dominant-baseline":"middle",class:"circle-total-value"},t)))}render(){const e=this.getValues(),t=e.reduce(((e,t)=>e+t.value),0);return i("div",{key:"3cf1fdd83af37d9f8f7f82e0caa61f889303aa45",class:["meter-group","meter-"+this.orientation,"meter-"+this.size,"meter-"+this.shape].join(" ")},"circle"===this.shape?this.renderCircleMeter():i("div",{class:"meter-container"},e.map(((e,t)=>{const r=this.getPercentage(e.value),o=e.color||this.getDefaultColor(t);return i("div",{class:"meter-segment",style:{["horizontal"===this.orientation?"width":"height"]:r+"%",background:(()=>{const t="object"==typeof e.color&&null!==e.color;return e.gradient||t?`linear-gradient(${"horizontal"===this.orientation?"to right":"to top"}, ${t?e.color.from:"object"==typeof e.gradient?e.gradient.from:o}, ${t?e.color.to:"object"==typeof e.gradient?e.gradient.to:o+"99"})`:o})(),cursor:this.interactive?"pointer":"default",transition:this.animated?"width 0.5s ease, height 0.5s ease":"none"},title:`${e.label}: ${e.value}`,onClick:()=>this.handleSegmentClick(e)},this.showValues&&i("span",{class:"meter-value"},e.value))}))),(this.showLabels||this.showLegend)&&i("div",{key:"646404cbc3ac39fcf2956d292bd34d5c68162ff6",class:"meter-legend"},e.map(((e,r)=>{const o=e.color||this.getDefaultColor(r),s=(e.value/t*100).toFixed(1);return i("div",{class:"legend-item",onClick:()=>this.handleSegmentClick(e),style:{cursor:this.interactive?"pointer":"default"}},i("span",{class:"legend-color",style:{backgroundColor:"object"==typeof o&&null!==o?o.from:o}}),e.icon&&i("span",{class:"legend-icon",style:{marginRight:"6px"}},i("ui-icon",{name:e.icon,library:e.iconLibrary||this.iconLibrary,size:"1.1em"})),i("span",{class:"legend-label"},e.label),this.showValues&&i("span",{class:"legend-value"},e.value," (",s,"%)"))}))))}static get watchers(){return{values:[{handleValuesChange:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.meter-group{display:flex;flex-direction:column;gap:12px;font-family:inherit}.meter-container{display:flex;border-radius:8px;overflow:hidden;background-color:var(--bg-primary, #e5e7eb)}.meter-horizontal .meter-container{flex-direction:row;width:100%}.meter-horizontal.meter-sm .meter-container{height:16px}.meter-horizontal.meter-md .meter-container{height:24px}.meter-horizontal.meter-lg .meter-container{height:32px}.meter-vertical{flex-direction:row}.meter-vertical .meter-container{flex-direction:column-reverse;height:200px}.meter-vertical.meter-sm .meter-container{width:16px}.meter-vertical.meter-md .meter-container{width:24px}.meter-vertical.meter-lg .meter-container{width:32px}.meter-segment{display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;position:relative}.meter-segment:hover{filter:brightness(1.1)}.meter-value{color:var(--text-standard, #ffffff);font-size:11px;font-weight:600;text-shadow:0 1px 2px rgba(0, 0, 0, 0.3);white-space:nowrap}.meter-horizontal .meter-segment:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.meter-horizontal .meter-segment:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.meter-vertical .meter-segment:first-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.meter-vertical .meter-segment:last-child{border-top-left-radius:8px;border-top-right-radius:8px}.meter-legend{display:flex;flex-wrap:wrap;gap:12px}.legend-item{display:flex;align-items:center;gap:6px;font-size:13px}.legend-color{width:12px;height:12px;border-radius:2px;flex-shrink:0}.legend-label{color:var(--text-secondary, #374151);font-weight:500}.legend-value{color:var(--text-muted, #6b7280);font-size:12px}.meter-circle-container{display:flex;justify-content:center;align-items:center}.meter-circle{width:100%;max-width:200px;height:auto}.meter-circle.meter-sm{max-width:120px}.meter-circle.meter-lg{max-width:280px}.circle-total-value{font-size:20px;font-weight:600;fill:var(--text-secondary, #374151)}.meter-sm .circle-total-value{font-size:14px}.meter-lg .circle-total-value{font-size:26px}"}},[513,"ui-meter-group",{values:[1025],orientation:[1],size:[1],showLabels:[4,"show-labels"],iconLibrary:[1,"icon-library"],showValues:[4,"show-values"],showLegend:[4,"show-legend"],shape:[1],min:[2],max:[2],interactive:[4],animated:[4]},void 0,{values:[{handleValuesChange:0}]}]),a=n,l=function(){"undefined"!=typeof customElements&&["ui-meter-group","ui-icon"].forEach((e=>{switch(e){case"ui-meter-group":customElements.get(o(e))||customElements.define(o(e),n);break;case"ui-icon":customElements.get(o(e))||s()}}))};export{a as UiMeterGroup,l as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as i,transformTag as o}from"@stencil/core/internal/client";import{d as s}from"./icon.js";import{d as a}from"./loader.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.meterClick=r(this,"meterClick",7)}values=[];orientation="horizontal";size="md";showLabels=!0;iconLibrary="default";showValues=!0;showLegend=!1;shape="line";min=0;max=100;interactive=!1;animated=!0;meterClick;handleValuesChange(){this.normalizeProps()}componentWillLoad(){this.normalizeProps()}normalizeProps(){if("string"==typeof this.values)try{this.values=JSON.parse(this.values)}catch(e){console.warn("Failed to parse meter-group values",e)}}getValues(){return Array.isArray(this.values)?this.values:[]}getPercentage(e){return(e-this.min)/(this.max-this.min)*100}getDefaultColor(e){const t=["#3bf673","#10b981","#f59e0b","#ef4444","#8b5cf6","#ec4899"];return t[e%t.length]}handleSegmentClick(e){this.interactive&&this.meterClick.emit(e)}renderCircleMeter(){const e=this.getValues(),t=e.reduce(((e,t)=>e+t.value),0),r=2*Math.PI*50;let o=0;const s=e.map(((e,i)=>{const s=e.value/t*100,a=s/100*r,n=-o,l="object"==typeof e.color&&null!==e.color,c=l?e.color.from:e.color||this.getDefaultColor(i),h=`meter-grad-${i}-${Math.random().toString(36).substr(2,4)}`,m=e.gradient||l;return o+=a,{...e,color:c,gradientId:h,strokeDasharray:`${a} ${r}`,strokeDashoffset:n,percentage:s.toFixed(1),hasGradient:m}})),a="sm"===this.size?8:"lg"===this.size?16:12;return i("div",{class:"meter-circle-container"},i("svg",{viewBox:"0 0 120 120",class:"meter-circle"},i("circle",{cx:"60",cy:"60",r:50,fill:"none",stroke:"#e5e7eb","stroke-width":a}),i("defs",null,s.map((e=>{const t="object"==typeof e.color&&null!==e.color;if(!e.gradient&&!t)return null;const r=t?e.color.to:"object"==typeof e.gradient?e.gradient.to:e.color+"99";return i("linearGradient",{id:e.gradientId,x1:"0%",y1:"0%",x2:"100%",y2:"0%"},i("stop",{offset:"0%","stop-color":t?e.color.from:"object"==typeof e.gradient?e.gradient.from:e.color}),i("stop",{offset:"100%","stop-color":r}))}))),s.map((e=>i("g",{onClick:()=>this.handleSegmentClick(e),style:{cursor:this.interactive?"pointer":"default"}},i("title",null,`${e.label}: ${e.value}`),i("circle",{cx:"60",cy:"60",r:50,fill:"none",stroke:e.gradient||"object"==typeof e.color&&null!==e.color?`url(#${e.gradientId})`:e.color,"stroke-width":a,"stroke-dasharray":e.strokeDasharray,"stroke-dashoffset":e.strokeDashoffset,"stroke-linecap":"round",transform:"rotate(-90 60 60)",style:{transition:this.animated?"stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease":"none"}})))),this.showValues&&i("text",{x:"60",y:"60","text-anchor":"middle","dominant-baseline":"middle",class:"circle-total-value"},t)))}render(){const e=this.getValues(),t=e.reduce(((e,t)=>e+t.value),0);return i("div",{key:"3cf1fdd83af37d9f8f7f82e0caa61f889303aa45",class:["meter-group","meter-"+this.orientation,"meter-"+this.size,"meter-"+this.shape].join(" ")},"circle"===this.shape?this.renderCircleMeter():i("div",{class:"meter-container"},e.map(((e,t)=>{const r=this.getPercentage(e.value),o=e.color||this.getDefaultColor(t);return i("div",{class:"meter-segment",style:{["horizontal"===this.orientation?"width":"height"]:r+"%",background:(()=>{const t="object"==typeof e.color&&null!==e.color;return e.gradient||t?`linear-gradient(${"horizontal"===this.orientation?"to right":"to top"}, ${t?e.color.from:"object"==typeof e.gradient?e.gradient.from:o}, ${t?e.color.to:"object"==typeof e.gradient?e.gradient.to:o+"99"})`:o})(),cursor:this.interactive?"pointer":"default",transition:this.animated?"width 0.5s ease, height 0.5s ease":"none"},title:`${e.label}: ${e.value}`,onClick:()=>this.handleSegmentClick(e)},this.showValues&&i("span",{class:"meter-value"},e.value))}))),(this.showLabels||this.showLegend)&&i("div",{key:"646404cbc3ac39fcf2956d292bd34d5c68162ff6",class:"meter-legend"},e.map(((e,r)=>{const o=e.color||this.getDefaultColor(r),s=(e.value/t*100).toFixed(1);return i("div",{class:"legend-item",onClick:()=>this.handleSegmentClick(e),style:{cursor:this.interactive?"pointer":"default"}},i("span",{class:"legend-color",style:{backgroundColor:"object"==typeof o&&null!==o?o.from:o}}),e.icon&&i("span",{class:"legend-icon",style:{marginRight:"6px"}},i("ui-icon",{name:e.icon,library:e.iconLibrary||this.iconLibrary,size:"1.1em"})),i("span",{class:"legend-label"},e.label),this.showValues&&i("span",{class:"legend-value"},e.value," (",s,"%)"))}))))}static get watchers(){return{values:[{handleValuesChange:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.meter-group{display:flex;flex-direction:column;gap:12px;font-family:inherit}.meter-container{display:flex;border-radius:8px;overflow:hidden;background-color:var(--bg-primary, #e5e7eb)}.meter-horizontal .meter-container{flex-direction:row;width:100%}.meter-horizontal.meter-sm .meter-container{height:16px}.meter-horizontal.meter-md .meter-container{height:24px}.meter-horizontal.meter-lg .meter-container{height:32px}.meter-vertical{flex-direction:row}.meter-vertical .meter-container{flex-direction:column-reverse;height:200px}.meter-vertical.meter-sm .meter-container{width:16px}.meter-vertical.meter-md .meter-container{width:24px}.meter-vertical.meter-lg .meter-container{width:32px}.meter-segment{display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;position:relative}.meter-segment:hover{filter:brightness(1.1)}.meter-value{color:var(--text-standard, #ffffff);font-size:11px;font-weight:600;text-shadow:0 1px 2px rgba(0, 0, 0, 0.3);white-space:nowrap}.meter-horizontal .meter-segment:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.meter-horizontal .meter-segment:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.meter-vertical .meter-segment:first-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.meter-vertical .meter-segment:last-child{border-top-left-radius:8px;border-top-right-radius:8px}.meter-legend{display:flex;flex-wrap:wrap;gap:12px}.legend-item{display:flex;align-items:center;gap:6px;font-size:13px}.legend-color{width:12px;height:12px;border-radius:2px;flex-shrink:0}.legend-label{color:var(--text-secondary, #374151);font-weight:500}.legend-value{color:var(--text-muted, #6b7280);font-size:12px}.meter-circle-container{display:flex;justify-content:center;align-items:center}.meter-circle{width:100%;max-width:200px;height:auto}.meter-circle.meter-sm{max-width:120px}.meter-circle.meter-lg{max-width:280px}.circle-total-value{font-size:20px;font-weight:600;fill:var(--text-secondary, #374151)}.meter-sm .circle-total-value{font-size:14px}.meter-lg .circle-total-value{font-size:26px}"}},[513,"ui-meter-group",{values:[1025],orientation:[1],size:[1],showLabels:[4,"show-labels"],iconLibrary:[1,"icon-library"],showValues:[4,"show-values"],showLegend:[4,"show-legend"],shape:[1],min:[2],max:[2],interactive:[4],animated:[4]},void 0,{values:[{handleValuesChange:0}]}]),l=n,c=function(){"undefined"!=typeof customElements&&["ui-meter-group","ui-icon","ui-loader"].forEach((e=>{switch(e){case"ui-meter-group":customElements.get(o(e))||customElements.define(o(e),n);break;case"ui-icon":customElements.get(o(e))||s();break;case"ui-loader":customElements.get(o(e))||a()}}))};export{l as UiMeterGroup,c as defineCustomElement}

package/dist/components/ui-navigation-bar.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as i,Host as a,transformTag as n}from"@stencil/core/internal/client";import{d as r}from"./avatar.js";import{d as s,a as l}from"./badge.js";import{d as h}from"./context-menu.js";import{d as c}from"./icon.js";import{d}from"./input.js";const p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.navOpen=o(this,"navOpen",7),this.navClose=o(this,"navClose",7),this.navToggle=o(this,"navToggle",7),this.navItemClick=o(this,"navItemClick",7),this.itemExpand=o(this,"itemExpand",7),this.itemCollapse=o(this,"itemCollapse",7)}get el(){return this}items=[];categories=[];bottomItems=[];secondaryItems=[];bottomItemsSecondary=[];showSearch=!1;mode="collapsed";position="left";collapsible=!0;expandedWidth="280px";collapsedWidth="64px";iconOnly=!0;accordion=!1;activeId;theme="auto";orientation="vertical";density="comfortable";indicatorPosition="start";maxItems=4;companyLogo;companyName;iconLibrary="default";isExpanded=!0;isMobile=!1;expandedItems=new Set;keyword="";effectiveTheme="light";gliderTop=0;gliderHeight=0;gliderLeft=0;gliderWidth=0;gliderOpacity=0;hoveredId=null;hoveredIconId=null;navOpen;navClose;navToggle;navItemClick;itemExpand;itemCollapse;componentWillLoad(){this.checkScreenSize(),this.handleModeChange(),this.expandParents(),this.syncTheme()}componentDidLoad(){this.resizeObserver=new ResizeObserver((()=>{this.checkScreenSize(),this.updateGlider()})),this.resizeObserver.observe(document.body),this.themeObserver=new MutationObserver((()=>this.syncTheme())),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["class","data-theme"]}),this.themeObserver.observe(document.body,{attributes:!0,attributeFilter:["class"]}),requestAnimationFrame((()=>this.updateGlider()))}componentDidRender(){requestAnimationFrame((()=>this.updateGlider()))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect(),this.themeObserver&&this.themeObserver.disconnect()}handleResize(){"auto"===this.mode&&this.checkScreenSize()}checkScreenSize(){const t=window.innerWidth<768;t!==this.isMobile&&(this.isMobile=t,this.isExpanded=!t)}handleModeChange(){"auto"===this.mode?this.checkScreenSize():this.isExpanded="expanded"===this.mode,this.isMobile=window.innerWidth<768,this.isMobile=window.innerWidth<768}handleScroll(){this.updateGlider()}onThemeChange(){this.syncTheme()}onActiveIdChange(){this.expandParents(),requestAnimationFrame((()=>this.updateGlider()))}onExpandChange(){requestAnimationFrame((()=>this.updateGlider()))}resizeObserver;themeObserver;syncTheme(){if("auto"===this.theme){const t=document.documentElement,e=document.body,o=t.getAttribute("data-theme");this.effectiveTheme=t.classList.contains("green")||e.classList.contains("green")||"green"===o?"green":t.classList.contains("dark")||e.classList.contains("dark")||"dark"===o||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}else this.effectiveTheme=this.theme}updateGlider(){if(!this.el)return;const t=this.hoveredId?"#nav-item-"+this.hoveredId:".nav-item.active, .nav-item.active-ancestor",e=this.el.shadowRoot?.querySelector(t);if(e){const t=this.el.getBoundingClientRect(),o=e.getBoundingClientRect();if("horizontal"===this.orientation){const e=o.left-t.left,i=o.width;this.gliderLeft===e&&this.gliderWidth===i&&1===this.gliderOpacity||(this.gliderLeft=e,this.gliderWidth=i,this.gliderOpacity=1)}else{const e=o.top-t.top,i=o.height;this.gliderTop===e&&this.gliderHeight===i&&1===this.gliderOpacity||(this.gliderTop=e,this.gliderHeight=i,this.gliderOpacity=1)}}else 0!==this.gliderOpacity&&(this.gliderOpacity=0)}expandParents(){if(!this.activeId)return;const t=new Set(this.expandedItems);let e=!1;const o=i=>{for(const a of i)a.children&&a.children.length>0&&this.hasActiveChild(a)&&(t.has(a.id)||(t.add(a.id),e=!0),o(a.children))};o(this.categories||[]),o(this.items||[]),o(this.bottomItems||[]),o(this.secondaryItems||[]),o(this.bottomItemsSecondary||[]),e&&(this.expandedItems=t)}async open(){this.collapsible&&(this.isExpanded=!0,"auto"!==this.mode&&(this.mode="expanded"),this.navOpen.emit())}async close(){this.collapsible&&(this.isExpanded=!1,"auto"!==this.mode&&(this.mode="collapsed"),this.navClose.emit())}async toggle(){this.isExpanded?await this.close():await this.open(),this.navToggle.emit({expanded:this.isExpanded})}async setActive(t){this.activeId=t}handleItemClick(t){if(t.children&&t.children.length>0){if(!this.isExpanded||"horizontal"===this.orientation){let e=t.children[0];for(;e&&e.children&&e.children.length>0;)e=e.children[0];return void(e&&!e.disabled&&(this.activeId=e.id,this.navItemClick.emit(e),this.isMobile&&this.close()))}this.toggleItem(t.id)}else{if(t.disabled)return;this.activeId=t.id,this.navItemClick.emit(t),this.isMobile&&this.close()}}hasActiveChild(t){return!!t.children&&t.children.some((t=>t.id===this.activeId||this.hasActiveChild(t)))}toggleItem(t){const e=new Set(this.expandedItems);e.has(t)?(e.delete(t),this.itemCollapse.emit(t)):(e.add(t),this.itemExpand.emit(t)),this.expandedItems=e}handleKeyDown(t,e){"Enter"===t.key||" "===t.key?(t.preventDefault(),this.handleItemClick(e)):"ArrowDown"===t.key?(t.preventDefault(),this.focusNext(t.target)):"ArrowUp"===t.key?(t.preventDefault(),this.focusPrev(t.target)):"ArrowRight"===t.key?this.expandedItems.has(e.id)||this.toggleItem(e.id):"ArrowLeft"===t.key&&this.expandedItems.has(e.id)&&this.toggleItem(e.id)}focusNext(t){const e=Array.from(this.el.shadowRoot.querySelectorAll(".nav-item")),o=e.indexOf(t);o>-1&&o<e.length-1&&e[o+1].focus()}focusPrev(t){const e=Array.from(this.el.shadowRoot.querySelectorAll(".nav-item")),o=e.indexOf(t);o>0&&e[o-1].focus()}renderToggle(){return!this.collapsible||this.isMobile?null:i("div",{class:"nav-toggle-edge",onClick:()=>this.toggle()},i("svg",{viewBox:"0 0 24 24",width:"14",height:"14",stroke:"currentColor","stroke-width":"2",fill:"none"},i("path",{d:"M15 18l-6-6 6-6"})))}filterItems(t){if(!this.keyword)return t;const e=this.keyword.toLowerCase(),o=t=>t.filter((t=>{const i=t.label.toLowerCase().includes(e),a=t.children&&o(t.children).length>0;return i||a})).map((t=>t.children?{...t,children:o(t.children)}:t));return o(t)}renderNavList(t,e){const o=this.filterItems(t),i=this.maxItems;if(this.keyword||"horizontal"===this.orientation||o.length<=i)return o.map((t=>this.renderItem(t)));const a=i-1,n=o.slice(0,a),r={id:"nav-overflow-"+e,label:"More",icon:"more-horizontal",iconLibrary:"lucide",children:o.slice(a)};return[...n.map((t=>this.renderItem(t))),this.renderItem(r)]}getBlocks(){return{categories:[...this.categories||[],...(this.items||[]).filter((t=>"categories"===t.block))],primary:(this.items||[]).filter((t=>!t.block||"primary"===t.block)),secondary:[...this.secondaryItems||[],...(this.items||[]).filter((t=>"secondary"===t.block))],bottom:[...this.bottomItems||[],...(this.items||[]).filter((t=>"bottom"===t.block))],bottomSecondary:[...this.bottomItemsSecondary||[],...(this.items||[]).filter((t=>"bottomSecondary"===t.block))]}}render(){const t=this.getBlocks(),e=[!this.isExpanded&&"is-collapsed",this.isMobile&&"is-drawer",this.isMobile&&this.isExpanded&&"drawer-open","pos-"+("string"==typeof this.position?this.position:""),"indicator-"+("string"==typeof this.indicatorPosition?this.indicatorPosition:"")].filter(Boolean).join(" ");return i(a,{key:"5d7d3ba7a371bb0b2c7067c9ef6ffadf1cc5cf2c",style:{"--nav-width":"boolean"==typeof this.isExpanded?this.isExpanded?this.expandedWidth:this.isMobile?"0px":this.collapsedWidth:this.collapsedWidth},class:e,theme:null,"data-theme":this.effectiveTheme},i("div",{key:"822e6bca215424cf97ee14360e5474f279898d08",class:"nav-glider",style:{top:"horizontal"===this.orientation?"auto":("number"==typeof this.gliderTop?this.gliderTop:0)+"px",height:"horizontal"===this.orientation?"3px":("number"==typeof this.gliderHeight?this.gliderHeight:0)+"px",left:"horizontal"===this.orientation?("number"==typeof this.gliderLeft?this.gliderLeft:0)+"px":"left"===this.position?"6px":"auto",right:"horizontal"===this.orientation?"auto":"right"===this.position?"6px":"auto",width:"horizontal"===this.orientation?("number"==typeof this.gliderWidth?this.gliderWidth:0)+"px":"4px",bottom:"horizontal"===this.orientation?"0":"auto",opacity:""+("number"==typeof this.gliderOpacity?this.gliderOpacity:0)}}),this.renderToggle(),this.isMobile&&this.isExpanded&&i("div",{key:"e561f5ba73dcded187227d24c05271ffe8cd35be",class:"nav-backdrop",onClick:()=>this.close()}),i("div",{key:"00336a31f7c62f1e4225811a8526316869eacb67",class:"nav-blocks-container"},i("div",{key:"08bb7aa63e515127943aa1858b6246e924752237",class:"nav-header"},i("slot",{key:"5052017567308f9e24e13c273fa6e6f81bdabb54",name:"header"},(this.companyLogo||this.companyName)&&i("div",{key:"3a374287ff56db7e8e48786a9fd82d046eb27a24",class:"nav-company-block",style:{display:"flex",alignItems:"center",gap:"12px",padding:"0 24px",height:"64px"}},this.companyLogo&&i("img",{key:"c51ab5c8072dce6e11738da2df7a2c2d77534989",src:this.companyLogo,alt:this.companyName||"Logo",style:{height:"32px",width:"auto"}}),this.isExpanded&&this.companyName&&i("span",{key:"c37a8d0bc5ea530ac6e4c90d45aed571e401ad65",class:"nav-company-name",style:{fontWeight:"600",fontSize:"16px"}},this.companyName))),i("slot",{key:"b552595e83958add3197c9bd83eda6454d975dad",name:"logo"}),this.isMobile&&i("div",{key:"dfc692bd4d940e34bdd3c1ee0f7bab24e390623a",class:"nav-mobile-close",onClick:()=>this.close()},i("svg",{key:"38bc9e4c9799d01510b8c0a354d4c4be370775c8",viewBox:"0 0 24 24",width:"24",height:"24",stroke:"currentColor",fill:"none"},i("path",{key:"9e5ce385a716770a940247a2e97d5a002928f536",d:"M18 6L6 18M6 6l12 12"})))),this.showSearch&&this.isExpanded&&i("div",{key:"6210ee48a40ec6ac0a1b37c6064be9539041d89a",class:"nav-search-bar"},i("div",{key:"91be6b4b089065dec8601ad39d6f5ee6314c2743",style:{position:"relative",display:"flex",alignItems:"center",background:"var(--nav-item-hover-bg, #f1f5f9)",borderRadius:"6px",padding:"4px 8px"}},i("svg",{key:"eb7de33bd4feea4137a01b38a3c461536d471d0e",viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor","stroke-width":"2",style:{opacity:"0.5",marginRight:"8px"}},i("circle",{key:"e38c3bf011c65f5f6adf7283cfa4362afba456d6",cx:"11",cy:"11",r:"8"}),i("line",{key:"62dbce91bf5b3cce61f4fe711b9d70b9ddb2192f",x1:"21",y1:"21",x2:"16.65",y2:"16.65"})),i("input",{key:"2e3c9743f142fe4fec5e5d232edbfa7a453a5520",type:"text",placeholder:"Search...",value:this.keyword,onInput:t=>this.keyword=t.target.value,style:{background:"transparent",border:"none",outline:"none",width:"100%",fontSize:"14px",color:"inherit"}}))),t.categories.length>0&&i("div",{key:"bbfc7918309d8a05aa89f1cf29564f4a7e0f5657",class:"nav-block-categories",role:"tree"},this.renderNavList(t.categories,"cat")),i("div",{key:"856526bb6ebc4fb642f895e9d3977068562df9db",class:"nav-block-top",role:"tree"},this.renderNavList(t.primary,"top"),i("slot",{key:"f7f37b72d9b37144f7a982028d04dc2a182dd792",name:"menu-item"})," ",0===t.primary.length&&0===t.categories.length&&0===t.secondary.length&&i("slot",{key:"53ca544ecb67734f153b7c327c85100f33c74092",name:"empty-state"},"No Items")),t.secondary.length>0&&i("div",{key:"2d23b401f03faaa7c27aae850e84a5de3751b667",class:"nav-block-secondary",role:"tree"},this.renderNavList(t.secondary,"sec")),t.bottom.length>0&&i("div",{key:"e7f4d57d73f042d7c300f6a960469a8cef50afdd",class:"nav-block-bottom",role:"tree"},t.bottom.map((t=>this.renderItem(t))),i("slot",{key:"4ae38e3116a10f7ab3a244fb0ae3cfc3ad91e7d6",name:"footer"})),t.bottomSecondary.length>0&&i("div",{key:"e79b2b33ccf1e47902376599065562024a45eaff",class:"nav-block-profile",role:"tree"},t.bottomSecondary.map((t=>this.renderItem(t))))))}isBottomItem(t){const e=this.getBlocks();return e.bottom.some((e=>e.id===t))||e.bottomSecondary.some((e=>e.id===t))}renderItem(t,e=0){if("divider"===t.type)return i("div",{class:"nav-divider",style:{height:"1px",background:"var(--ui-input-border, #e2e8f0)",margin:"8px 0"}});if("title"===t.type)return this.isExpanded||"horizontal"===this.orientation?i("div",{class:"nav-title level-"+e,style:{fontSize:"11px",fontWeight:"bold",textTransform:"uppercase",color:"#94a3b8",padding:"12px 16px 4px 16px"}},t.label):null;const o=this.expandedItems.has(t.id),a=this.activeId===t.id||!this.isExpanded&&this.hasActiveChild(t),n=this.isExpanded&&this.hasActiveChild(t),r=t.children&&t.children.length>0,s=16*e+16+"px",l="nav-item-"+t.id,h=t.href&&!r?"a":"div",c=t.href&&!r?{href:t.href}:{},d=["nav-item",a&&"active",n&&"active-ancestor",o&&"expanded","user-profile"===t.id&&"is-user-profile",!t.icon&&"no-icon"].filter(Boolean).join(" ");return i("div",{key:t.id,class:"nav-item-wrapper level-"+e,role:"none"},i(h,{id:l,...c,class:d,style:{paddingLeft:"horizontal"===this.orientation?"0":this.isExpanded?s:"0"},onMouseEnter:()=>{"horizontal"===this.orientation&&(this.hoveredId=t.id,this.updateGlider()),r||this.isExpanded||(this.hoveredIconId=t.id)},onMouseLeave:()=>{"horizontal"===this.orientation&&(this.hoveredId=null,this.updateGlider()),this.hoveredIconId=null},onClick:e=>{e.stopPropagation(),this.handleItemClick(t)},onKeyDown:e=>this.handleKeyDown(e,t),title:!this.isExpanded&&r?t.label:"",tabindex:"0",role:"treeitem","aria-expanded":r?o?"true":"false":null,"aria-selected":a?"true":"false"},(t.icon||t.avatar||"image"===t.type||"icon"===t.type||"avatar"===t.type||t.imageUrl)&&i("span",{class:"nav-icon-container"},t.avatar||"avatar"===t.type?i("ui-avatar",{src:t.avatar||t.imageUrl,shape:"circle",class:"nav-avatar-icon",size:this.isExpanded||"horizontal"===this.orientation?"1.5rem":"2rem",status:t.status}):"image"===t.type||t.imageUrl?i("img",{src:t.imageUrl,alt:t.label,class:"nav-image-icon",style:{width:"24px",height:"24px",borderRadius:"4px",objectFit:"cover"}}):i("span",{class:"nav-icon"},i("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"1.25rem"})),t.status&&!t.avatar&&"avatar"!==t.type&&i("span",{class:"nav-status-dot status-"+t.status}),!this.isExpanded&&t.badge&&i("span",{class:"nav-badge-mini"},t.badge),"horizontal"===this.orientation&&("user-profile"===t.id||this.isBottomItem(t.id))&&t.badge&&i("span",{class:"nav-badge-mini"},t.badge)),!r&&!this.isExpanded&&this.hoveredIconId===t.id&&i("div",{class:{"nav-tooltip":!0,visible:!0}},t.label),(this.isExpanded||"horizontal"===this.orientation&&!this.isBottomItem(t.id))&&i("span",{class:"nav-label-container"},i("span",{class:"nav-label"},t.label),t.badge&&i("span",{class:"nav-badge"},t.badge)),r&&(this.isExpanded||"horizontal"===this.orientation)&&i("span",{class:"nav-arrow"},i("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",fill:"none",class:o&&"horizontal"!==this.orientation?"rotate-180":""},i("path",{d:"M6 9l6 6 6-6"})))),(()=>{const e=r?t.children:[];return e&&0!==e.length?this.isExpanded&&"horizontal"!==this.orientation?null:i("ui-context-menu",{target:"#"+l,items:e,selectedId:this.activeId,theme:this.effectiveTheme,openOn:"hover",placement:"horizontal"===this.orientation?"bottom":"left"===this.position?"right":"left",onItemSelect:e=>{e.stopPropagation(),this.handleItemClick(r?e.detail.item:t)}}):null})(),r&&o&&this.isExpanded&&"horizontal"!==this.orientation&&i("div",{class:"nav-children",role:"group"},t.children.map((t=>this.renderItem(t,e+1)))))}static get watchers(){return{mode:[{handleModeChange:0}],theme:[{onThemeChange:0}],activeId:[{onActiveIdChange:0}],isExpanded:[{onExpandChange:0}]}}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{--nav-bg:#fcfcfc;--nav-color:#000000;--nav-border-color:#d9d9d9;--nav-item-hover-bg:#e6e6e6;--nav-item-active-bg:rgba(0, 138, 22, 0.08);--nav-item-active-color:#008a16;--nav-accent-gradient:linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);--nav-width:280px;--nav-transition:width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);display:flex;flex-direction:column;height:100%;width:var(--nav-width);background:var(--nav-bg);color:var(--nav-color);border-right:1px solid var(--nav-border-color);transition:var(--nav-transition);box-sizing:border-box;position:relative;z-index:100}:host(.pos-right){border-right:none;border-left:1px solid var(--nav-border-color)}.nav-toggle-edge{position:absolute;top:48px;right:-12px;width:24px;height:24px;background:var(--nav-bg);border:1px solid var(--nav-border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:101;color:var(--nav-color);box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);transition:transform 0.2s, background-color 0.2s}.nav-toggle-edge:hover{background-color:var(--nav-item-hover-bg)}:host(.pos-right) .nav-toggle-edge{right:auto;left:-12px;transform:rotate(180deg)}:host(.is-collapsed) .nav-toggle-edge{transform:rotate(180deg)}:host(.pos-right.is-collapsed) .nav-toggle-edge{transform:rotate(0deg)}:host([data-theme=dark]){--nav-bg:#111827;--nav-color:#94a3b8;--nav-border-color:#1e293b;--nav-item-hover-bg:#1e293b;--nav-item-active-bg:rgba(0, 138, 22, 0.15);--nav-item-active-color:#008a16}:host([data-theme=green]){--nav-bg:#3DCD58;--nav-color:#ffffff;--nav-border-color:rgba(255, 255, 255, 0.2);--nav-item-hover-bg:rgba(255, 255, 255, 0.1);--nav-item-active-bg:rgba(255, 255, 255, 0.2);--nav-item-active-color:#ffffff}:host([orientation=horizontal]){width:100%;height:64px;flex-direction:row;border-right:none;border-bottom:1px solid var(--nav-border-color)}:host([orientation=horizontal]) .nav-blocks-container{display:flex !important;flex-direction:row !important;align-items:center;width:100%;height:100%;overflow:visible;flex-wrap:nowrap !important;justify-content:flex-start !important}:host([orientation=horizontal]) .nav-header{border-bottom:none;border-right:1px solid var(--nav-border-color);flex-shrink:0}:host(.is-collapsed) .nav-block-categories,:host(.is-collapsed) .nav-block-top,:host(.is-collapsed) .nav-block-secondary,:host(.is-collapsed) .nav-block-bottom,:host(.is-collapsed) .nav-block-profile{overflow:visible !important}:host([orientation=horizontal]) .nav-block-bottom{margin-left:auto}:host([orientation=horizontal]) .nav-block-categories,:host([orientation=horizontal]) .nav-block-top,:host([orientation=horizontal]) .nav-block-secondary,:host([orientation=horizontal]) .nav-block-bottom,:host([orientation=horizontal]) .nav-block-profile{display:flex !important;flex-direction:row !important;align-items:center;padding:0;overflow:visible !important;border:none !important;height:100%;flex-shrink:0;flex-grow:0 !important;max-height:none !important;flex-wrap:nowrap !important}:host([orientation=horizontal]) .nav-block-categories,:host([orientation=horizontal]) .nav-block-top,:host([orientation=horizontal]) .nav-block-secondary,:host([orientation=horizontal]) .nav-search-bar{border-right:none !important}:host([orientation=horizontal]) .nav-block-top{flex:none}:host([orientation=horizontal]) .nav-item-wrapper{height:100%;display:flex !important;flex-direction:row !important;align-items:center;flex-shrink:0}:host([orientation=horizontal]) .nav-item{height:100%;padding:0 6px;margin:0 !important;border-radius:0;display:flex;align-items:center;justify-content:center;white-space:nowrap}:host([orientation=horizontal]) .nav-icon{margin-right:4px;}:host([orientation=horizontal]) .nav-glider{left:0;right:auto;bottom:0px !important;top:auto !important;height:3px !important;border-radius:4px 4px 0 0;background-color:var(--nav-item-active-color);transition:left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s}:host([orientation=horizontal]) .nav-toggle-edge{display:none}:host([orientation=horizontal]) .nav-block-bottom .nav-label,:host([orientation=horizontal]) .nav-block-profile .nav-label{display:none;}:host([orientation=horizontal]) .nav-search-bar{padding:0 12px;border-bottom:none;border-right:1px solid var(--nav-border-color);height:100%;display:flex;align-items:center}:host([orientation=horizontal]) .nav-search-bar>div{width:150px}:host(.is-drawer){position:fixed;top:0;left:0;bottom:0;height:100vh;box-shadow:4px 0 16px rgba(0, 0, 0, 0.1);z-index:1000}:host(.is-drawer.pos-right){left:auto;right:0;box-shadow:-4px 0 16px rgba(0, 0, 0, 0.1)}.nav-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.4);z-index:-1;}:host(.is-drawer){overflow:visible;}.nav-header{flex-shrink:0;min-height:64px;display:flex;align-items:center;padding:0 16px;overflow:hidden;white-space:nowrap;position:relative}.nav-mobile-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;padding:4px}.nav-blocks-container{display:flex;flex-direction:column;height:100%;overflow:visible;}.nav-block-categories{flex-shrink:0;max-height:30%;overflow-y:auto;overflow-x:visible;display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--nav-border-color);scrollbar-width:thin;scrollbar-color:var(--nav-border-color) transparent}.nav-block-top{flex:1;overflow-y:auto;overflow-x:visible;display:flex;flex-direction:column;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--nav-border-color) transparent}.nav-block-bottom{flex-shrink:0;border-top:1px solid var(--nav-border-color);padding:8px 0;display:flex;flex-direction:column;overflow:visible;min-height:fit-content;max-height:fit-content;}.nav-header{border-bottom:1px solid var(--nav-border-color)}.nav-search-bar{padding:8px 16px;border-bottom:1px solid var(--nav-border-color)}.nav-block-secondary{padding:8px 0;border-top:1px solid var(--nav-border-color);display:flex;flex-direction:column;overflow:visible}.nav-block-profile{flex-shrink:0;padding:8px 0;border-top:1px solid var(--nav-border-color);display:flex;flex-direction:column;overflow:visible;min-height:fit-content;max-height:fit-content;}.nav-block-categories::-webkit-scrollbar,.nav-block-top::-webkit-scrollbar{width:4px}.nav-block-categories::-webkit-scrollbar-thumb,.nav-block-top::-webkit-scrollbar-thumb{background-color:var(--nav-border-color);border-radius:4px}.nav-item-wrapper{display:flex;flex-direction:column;min-width:0;}.nav-item{display:flex;align-items:center;height:40px;cursor:pointer;user-select:none;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:nowrap;position:relative;overflow:visible;margin:2px 8px;border-radius:8px;outline:none;}a.nav-item{text-decoration:none;color:inherit}.nav-item:focus-visible{outline:2px solid var(--nav-item-active-color);outline-offset:-2px}.nav-item:hover{background-color:var(--nav-item-hover-bg)}.nav-item.active,.nav-item.active-ancestor{background-color:var(--nav-item-active-bg);color:var(--nav-item-active-color);font-weight:500;position:relative}.nav-glider{position:absolute;width:4px;background-color:#008a16;border-radius:4px;transition:top 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s ease, opacity 0.2s;pointer-events:none;z-index:10;left:6px}:host(.indicator-end) .nav-glider{left:auto;right:6px}.nav-item-wrapper:not(.level-0)>.nav-item{font-size:0.95em;opacity:0.9;height:36px;}.nav-item-wrapper:not(.level-0)>.nav-item.active{background-color:var(--nav-item-active-bg);color:var(--nav-item-active-color);font-weight:600;position:relative}.nav-item-wrapper:not(.level-0)>.nav-item.active::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:4px;height:32px;border-radius:4px;background-color:var(--nav-item-active-color)}.nav-children{position:relative;}.nav-icon-container{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-status-dot{position:absolute;top:2px;right:12px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--nav-bg);z-index:2}:host(.is-collapsed) .nav-status-dot,:host([orientation=horizontal]) .nav-status-dot{right:0px}.nav-status-dot.status-online{background-color:#22c55e}.nav-status-dot.status-offline{background-color:#94a3b8}.nav-status-dot.status-away{background-color:#eab308}.nav-status-dot.status-busy{background-color:#ef4444}.nav-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;margin-right:12px}:host(.is-collapsed) .nav-icon,:host([orientation=horizontal]) .nav-block-bottom .nav-icon,:host([orientation=horizontal]) .nav-block-profile .nav-icon{margin-right:0}.nav-label-container{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.nav-badge{background-color:var(--nav-item-active-color);color:white;font-size:10px;font-weight:700;padding:0 6px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-badge-mini{position:absolute;top:-4px;right:-4px;background-color:#ef4444;color:white;font-size:9px;font-weight:800;min-width:14px;height:14px;padding:0 3px;border-radius:7px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--nav-bg);z-index:3}.nav-item{border-left:3px solid transparent}.nav-item.active .nav-icon{color:currentColor;}.nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.nav-item.no-icon .nav-label{font-size:12px;opacity:0.8;padding-left:4px}.nav-item.is-user-profile .nav-icon{background:var(--nav-accent-gradient);border-radius:50%;color:white !important;width:32px;height:32px;min-width:32px;box-shadow:0 4px 10px rgba(59, 130, 246, 0.4);margin-right:12px}.nav-item.is-user-profile .nav-icon ui-icon{width:18px !important;height:18px !important;font-size:18px !important}.nav-item.is-user-profile .nav-label{font-weight:600;color:var(--nav-color)}.nav-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:8px;transition:transform 0.2s}:host([orientation=horizontal]) .nav-arrow{margin-left:4px}.nav-arrow .rotate-180{transform:rotate(180deg)}.nav-children{display:flex;flex-direction:column;overflow:hidden;animation:slideDown 0.2s ease-out}@keyframes slideDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}:host(.is-collapsed:not([orientation=horizontal])) .nav-item{justify-content:center;padding:0 !important;margin:4px 0;width:100%;border-radius:0}:host(.is-collapsed:not([orientation=horizontal])) .nav-icon{margin-right:0}:host(.is-collapsed:not([orientation=horizontal])) .nav-label,:host(.is-collapsed:not([orientation=horizontal])) .nav-arrow{display:none;}.nav-tooltip{position:absolute;background:#1e293b;color:#f8fafc;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);border:1px solid rgba(255, 255, 255, 0.1);z-index:2000;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 0.2s, transform 0.2s, visibility 0.2s}.nav-tooltip.visible{opacity:1;visibility:visible}:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip{left:100%;top:50%;transform:translateY(-50%) translateX(-10px);margin-left:10px}:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip.visible{transform:translateY(-50%) translateX(0)}:host([orientation=horizontal]) .nav-tooltip{top:100%;left:50%;transform:translateX(-50%) translateY(-10px);margin-top:8px}:host([orientation=horizontal]) .nav-tooltip.visible{transform:translateX(-50%) translateY(0)}:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip{left:50%;bottom:100%;transform:translateX(-50%) translateY(10px);margin-bottom:8px}:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip.visible{transform:translateX(-50%) translateY(0)}.nav-tooltip::before{content:"";position:absolute;width:8px;height:8px;background:#1e293b;transform:rotate(45deg);z-index:-1;border:1px solid rgba(255, 255, 255, 0.1)}:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip::before{left:-4px;top:50%;margin-top:-4px;border-right:none;border-top:none}:host([orientation=horizontal]) .nav-tooltip::before{top:-4px;left:50%;margin-left:-4px;border-right:none;border-bottom:none}:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip::before{bottom:-4px;left:12px;border-left:none;border-top:none}'}},[769,"ui-navigation-bar",{items:[16],categories:[16],bottomItems:[16],secondaryItems:[16],bottomItemsSecondary:[16],showSearch:[4,"show-search"],mode:[1537],position:[513],collapsible:[4],expandedWidth:[1,"expanded-width"],collapsedWidth:[1,"collapsed-width"],iconOnly:[4,"icon-only"],accordion:[4],activeId:[1025,"active-id"],theme:[513],orientation:[513],density:[513],indicatorPosition:[1,"indicator-position"],maxItems:[2,"max-items"],companyLogo:[1,"company-logo"],companyName:[1,"company-name"],iconLibrary:[1,"icon-library"],isExpanded:[32],isMobile:[32],expandedItems:[32],keyword:[32],effectiveTheme:[32],gliderTop:[32],gliderHeight:[32],gliderLeft:[32],gliderWidth:[32],gliderOpacity:[32],hoveredId:[32],hoveredIconId:[32],open:[64],close:[64],toggle:[64],setActive:[64]},[[9,"resize","handleResize"],[3,"scroll","handleScroll"]],{mode:[{handleModeChange:0}],theme:[{onThemeChange:0}],activeId:[{onActiveIdChange:0}],isExpanded:[{onExpandChange:0}]}]),v=p,b=function(){"undefined"!=typeof customElements&&["ui-navigation-bar","ui-avatar","ui-badge","ui-button","ui-context-menu","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-navigation-bar":customElements.get(n(t))||customElements.define(n(t),p);break;case"ui-avatar":customElements.get(n(t))||r();break;case"ui-badge":customElements.get(n(t))||l();break;case"ui-button":customElements.get(n(t))||s();break;case"ui-context-menu":customElements.get(n(t))||h();break;case"ui-icon":customElements.get(n(t))||c();break;case"ui-input":customElements.get(n(t))||d()}}))};export{v as UiNavigationBar,b as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as i,Host as a,transformTag as n}from"@stencil/core/internal/client";import{d as r}from"./avatar.js";import{d as s,a as l}from"./badge.js";import{d as h}from"./context-menu.js";import{d as c}from"./icon.js";import{d}from"./input.js";import{d as p}from"./loader.js";const v=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.navOpen=o(this,"navOpen",7),this.navClose=o(this,"navClose",7),this.navToggle=o(this,"navToggle",7),this.navItemClick=o(this,"navItemClick",7),this.itemExpand=o(this,"itemExpand",7),this.itemCollapse=o(this,"itemCollapse",7)}get el(){return this}items=[];categories=[];bottomItems=[];secondaryItems=[];bottomItemsSecondary=[];showSearch=!1;mode="collapsed";position="left";collapsible=!0;expandedWidth="280px";collapsedWidth="64px";iconOnly=!0;accordion=!1;activeId;theme="auto";orientation="vertical";density="comfortable";indicatorPosition="start";maxItems=100;companyLogo;companyName;iconLibrary="default";isExpanded=!0;isMobile=!1;expandedItems=new Set;keyword="";effectiveTheme="light";gliderTop=0;gliderHeight=0;gliderLeft=0;gliderWidth=0;gliderOpacity=0;hoveredId=null;hoveredIconId=null;navOpen;navClose;navToggle;navItemClick;itemExpand;itemCollapse;componentWillLoad(){this.checkScreenSize(),this.handleModeChange(),this.expandParents(),this.syncTheme()}componentDidLoad(){this.resizeObserver=new ResizeObserver((()=>{this.checkScreenSize(),this.updateGlider()})),this.resizeObserver.observe(document.body),this.themeObserver=new MutationObserver((()=>this.syncTheme())),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["class","data-theme"]}),this.themeObserver.observe(document.body,{attributes:!0,attributeFilter:["class"]}),requestAnimationFrame((()=>this.updateGlider()))}componentDidRender(){requestAnimationFrame((()=>this.updateGlider()))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect(),this.themeObserver&&this.themeObserver.disconnect()}handleResize(){"auto"===this.mode&&this.checkScreenSize()}checkScreenSize(){const t=window.innerWidth<768;t!==this.isMobile&&(this.isMobile=t,this.isExpanded=!t)}handleModeChange(){"auto"===this.mode?this.checkScreenSize():this.isExpanded="expanded"===this.mode,this.isMobile=window.innerWidth<768,this.isMobile=window.innerWidth<768}handleScroll(){this.updateGlider()}onThemeChange(){this.syncTheme()}onActiveIdChange(){this.expandParents(),requestAnimationFrame((()=>this.updateGlider()))}onExpandChange(){requestAnimationFrame((()=>this.updateGlider()))}resizeObserver;themeObserver;syncTheme(){if("auto"===this.theme){const t=document.documentElement,e=document.body,o=t.getAttribute("data-theme");this.effectiveTheme=t.classList.contains("green")||e.classList.contains("green")||"green"===o?"green":t.classList.contains("dark")||e.classList.contains("dark")||"dark"===o||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}else this.effectiveTheme=this.theme}updateGlider(){if(!this.el)return;const t=this.hoveredId?"#nav-item-"+this.hoveredId:".nav-item.active, .nav-item.active-ancestor",e=this.el.shadowRoot?.querySelector(t);if(e){const t=this.el.getBoundingClientRect(),o=e.getBoundingClientRect();if("horizontal"===this.orientation){const e=o.left-t.left,i=o.width;this.gliderLeft===e&&this.gliderWidth===i&&1===this.gliderOpacity||(this.gliderLeft=e,this.gliderWidth=i,this.gliderOpacity=1)}else{const e=o.top-t.top,i=o.height;this.gliderTop===e&&this.gliderHeight===i&&1===this.gliderOpacity||(this.gliderTop=e,this.gliderHeight=i,this.gliderOpacity=1)}}else 0!==this.gliderOpacity&&(this.gliderOpacity=0)}expandParents(){if(!this.activeId)return;const t=new Set(this.expandedItems);let e=!1;const o=i=>{for(const a of i)a.children&&a.children.length>0&&this.hasActiveChild(a)&&(t.has(a.id)||(t.add(a.id),e=!0),o(a.children))};o(this.categories||[]),o(this.items||[]),o(this.bottomItems||[]),o(this.secondaryItems||[]),o(this.bottomItemsSecondary||[]),e&&(this.expandedItems=t)}async open(){this.collapsible&&(this.isExpanded=!0,"auto"!==this.mode&&(this.mode="expanded"),this.navOpen.emit())}async close(){this.collapsible&&(this.isExpanded=!1,"auto"!==this.mode&&(this.mode="collapsed"),this.navClose.emit())}async toggle(){this.isExpanded?await this.close():await this.open(),this.navToggle.emit({expanded:this.isExpanded})}async setActive(t){this.activeId=t}handleItemClick(t){if(t.children&&t.children.length>0){if(!this.isExpanded||"horizontal"===this.orientation){let e=t.children[0];for(;e&&e.children&&e.children.length>0;)e=e.children[0];return void(e&&!e.disabled&&(this.activeId=e.id,this.navItemClick.emit(e),this.isMobile&&this.close()))}this.toggleItem(t.id)}else{if(t.disabled)return;this.activeId=t.id,this.navItemClick.emit(t),this.isMobile&&this.close()}}hasActiveChild(t){return!!t.children&&t.children.some((t=>t.id===this.activeId||this.hasActiveChild(t)))}toggleItem(t){const e=new Set(this.expandedItems);e.has(t)?(e.delete(t),this.itemCollapse.emit(t)):(e.add(t),this.itemExpand.emit(t)),this.expandedItems=e}handleKeyDown(t,e){"Enter"===t.key||" "===t.key?(t.preventDefault(),this.handleItemClick(e)):"ArrowDown"===t.key?(t.preventDefault(),this.focusNext(t.target)):"ArrowUp"===t.key?(t.preventDefault(),this.focusPrev(t.target)):"ArrowRight"===t.key?this.expandedItems.has(e.id)||this.toggleItem(e.id):"ArrowLeft"===t.key&&this.expandedItems.has(e.id)&&this.toggleItem(e.id)}focusNext(t){const e=Array.from(this.el.shadowRoot.querySelectorAll(".nav-item")),o=e.indexOf(t);o>-1&&o<e.length-1&&e[o+1].focus()}focusPrev(t){const e=Array.from(this.el.shadowRoot.querySelectorAll(".nav-item")),o=e.indexOf(t);o>0&&e[o-1].focus()}renderToggle(){return!this.collapsible||this.isMobile?null:i("div",{class:"nav-toggle-edge",onClick:()=>this.toggle()},i("svg",{viewBox:"0 0 24 24",width:"14",height:"14",stroke:"currentColor","stroke-width":"2",fill:"none"},i("path",{d:"M15 18l-6-6 6-6"})))}filterItems(t){if(!this.keyword)return t;const e=this.keyword.toLowerCase(),o=t=>t.filter((t=>{const i=t.label.toLowerCase().includes(e),a=t.children&&o(t.children).length>0;return i||a})).map((t=>t.children?{...t,children:o(t.children)}:t));return o(t)}renderNavList(t,e){const o=this.filterItems(t),i=this.maxItems;if(this.keyword||"horizontal"===this.orientation||o.length<=i)return o.map((t=>this.renderItem(t)));const a=i-1,n=o.slice(0,a),r={id:"nav-overflow-"+e,label:"More",icon:"more-horizontal",iconLibrary:"lucide",children:o.slice(a)};return[...n.map((t=>this.renderItem(t))),this.renderItem(r)]}getBlocks(){return{categories:[...this.categories||[],...(this.items||[]).filter((t=>"categories"===t.block))],primary:(this.items||[]).filter((t=>!t.block||"primary"===t.block)),secondary:[...this.secondaryItems||[],...(this.items||[]).filter((t=>"secondary"===t.block))],bottom:[...this.bottomItems||[],...(this.items||[]).filter((t=>"bottom"===t.block))],bottomSecondary:[...this.bottomItemsSecondary||[],...(this.items||[]).filter((t=>"bottomSecondary"===t.block))]}}render(){const t=this.getBlocks(),e=[!this.isExpanded&&"is-collapsed",this.isMobile&&"is-drawer",this.isMobile&&this.isExpanded&&"drawer-open","pos-"+("string"==typeof this.position?this.position:""),"indicator-"+("string"==typeof this.indicatorPosition?this.indicatorPosition:"")].filter(Boolean).join(" ");return i(a,{key:"8c2709e6da4c4d5dc9c119d80ae046ced0681677",style:{"--nav-width":"boolean"==typeof this.isExpanded?this.isExpanded?this.expandedWidth:this.isMobile?"0px":this.collapsedWidth:this.collapsedWidth},class:e,theme:null,"data-theme":this.effectiveTheme},i("div",{key:"eeb7ad1eae7c89b8d8a81bb62b89b89b7d76f2de",class:"nav-glider",style:{top:"horizontal"===this.orientation?"auto":("number"==typeof this.gliderTop?this.gliderTop:0)+"px",height:"horizontal"===this.orientation?"3px":("number"==typeof this.gliderHeight?this.gliderHeight:0)+"px",left:"horizontal"===this.orientation?("number"==typeof this.gliderLeft?this.gliderLeft:0)+"px":"left"===this.position?"6px":"auto",right:"horizontal"===this.orientation?"auto":"right"===this.position?"6px":"auto",width:"horizontal"===this.orientation?("number"==typeof this.gliderWidth?this.gliderWidth:0)+"px":"4px",bottom:"horizontal"===this.orientation?"0":"auto",opacity:""+("number"==typeof this.gliderOpacity?this.gliderOpacity:0)}}),this.renderToggle(),this.isMobile&&this.isExpanded&&i("div",{key:"1c4f23fe57c282e4ad5a1c28d1223de8086fda72",class:"nav-backdrop",onClick:()=>this.close()}),i("div",{key:"65075734486486764a894c6fb7b83d7333ec73c7",class:"nav-blocks-container"},i("div",{key:"d4dee15c771e8ae62f649aeb28b56c10e7cbb853",class:"nav-header"},i("slot",{key:"ca14ebc9b45a559df2aed758838a3ed76bb1c3ae",name:"header"},(this.companyLogo||this.companyName)&&i("div",{key:"7d0a0735620d690057d9a1b62a9c749fdb3f2c84",class:"nav-company-block",style:{display:"flex",alignItems:"center",gap:"12px",padding:"0 24px",height:"64px"}},this.companyLogo&&i("img",{key:"f09f09d20a33e176cd566dd53bc0241bd354411a",src:this.companyLogo,alt:this.companyName||"Logo",style:{height:"32px",width:"auto"}}),this.isExpanded&&this.companyName&&i("span",{key:"e4b520a45523db14ea2336b87e114aa1b71ec17d",class:"nav-company-name",style:{fontWeight:"600",fontSize:"16px"}},this.companyName))),i("slot",{key:"336712f1b384d40c36799ec38ef4e5855221d00e",name:"logo"}),this.isMobile&&i("div",{key:"af115858dac6594075002677847f4ba5ee56c8d4",class:"nav-mobile-close",onClick:()=>this.close()},i("svg",{key:"f8d652e0e156f6e45460ccad45c81dcca26aa7ee",viewBox:"0 0 24 24",width:"24",height:"24",stroke:"currentColor",fill:"none"},i("path",{key:"e8fe61ea68a03aedeea2c782674c3ff355391559",d:"M18 6L6 18M6 6l12 12"})))),this.showSearch&&this.isExpanded&&i("div",{key:"b3817d97c27963a5510f11e144bfc9c86224a3d4",class:"nav-search-bar"},i("div",{key:"40459a1c370c1358513a5e0010490c40b2a7c8be",style:{position:"relative",display:"flex",alignItems:"center",background:"var(--nav-item-hover-bg, #f1f5f9)",borderRadius:"6px",padding:"4px 8px"}},i("svg",{key:"fcde2dfec1ff2ba213d37f07fefaf6cb9f300932",viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor","stroke-width":"2",style:{opacity:"0.5",marginRight:"8px"}},i("circle",{key:"26527fb8563cce41862c12c99c0e6dbb1459723b",cx:"11",cy:"11",r:"8"}),i("line",{key:"0bf144609d27eed0c1bb54de7ed1f3020445f2b1",x1:"21",y1:"21",x2:"16.65",y2:"16.65"})),i("input",{key:"43ef6d0df604e1e1edb88303ba4fe4c6bd97ccdb",type:"text",placeholder:"Search...",value:this.keyword,onInput:t=>this.keyword=t.target.value,style:{background:"transparent",border:"none",outline:"none",width:"100%",fontSize:"14px",color:"inherit"}}))),t.categories.length>0&&i("div",{key:"66b63ea16b9080d05cd540b503ead73792bb682e",class:"nav-block-categories",role:"tree"},this.renderNavList(t.categories,"cat")),i("div",{key:"85217416656d87209bd63e35f359a54d3e374a40",class:"nav-block-top",role:"tree"},this.renderNavList(t.primary,"top"),i("slot",{key:"aeb468782004f5f2f9f49335ee3a22cba28ccf11",name:"menu-item"})," ",0===t.primary.length&&0===t.categories.length&&0===t.secondary.length&&i("slot",{key:"de7e8d6226e9e76bc112e10a5d8b17e526e30fd6",name:"empty-state"},"No Items")),t.secondary.length>0&&i("div",{key:"189a5325fef7afc1082bf89551468dad58561308",class:"nav-block-secondary",role:"tree"},this.renderNavList(t.secondary,"sec")),t.bottom.length>0&&i("div",{key:"3c5fa508db8925545a430a9b1cf3c4ea87371e15",class:"nav-block-bottom",role:"tree"},t.bottom.map((t=>this.renderItem(t))),i("slot",{key:"4f749f79cabfb4c3c3b3d902b60ab9d104c40284",name:"footer"})),t.bottomSecondary.length>0&&i("div",{key:"c74afe6c446481924cc7393522ebc97803bbc713",class:"nav-block-profile",role:"tree"},t.bottomSecondary.map((t=>this.renderItem(t))))))}isBottomItem(t){const e=this.getBlocks();return e.bottom.some((e=>e.id===t))||e.bottomSecondary.some((e=>e.id===t))}renderItem(t,e=0){if("divider"===t.type)return i("div",{class:"nav-divider",style:{height:"1px",background:"var(--ui-input-border, #e2e8f0)",margin:"8px 0"}});if("title"===t.type)return this.isExpanded||"horizontal"===this.orientation?i("div",{class:"nav-title level-"+e,style:{fontSize:"11px",fontWeight:"bold",textTransform:"uppercase",color:"#94a3b8",padding:"12px 16px 4px 16px"}},t.label):null;const o=this.expandedItems.has(t.id),a=this.activeId===t.id||!this.isExpanded&&this.hasActiveChild(t),n=this.isExpanded&&this.hasActiveChild(t),r=t.children&&t.children.length>0,s=16*e+16+"px",l="nav-item-"+t.id,h=t.href&&!r?"a":"div",c=t.href&&!r?{href:t.href}:{},d=["nav-item",a&&"active",n&&"active-ancestor",o&&"expanded","user-profile"===t.id&&"is-user-profile",!t.icon&&"no-icon"].filter(Boolean).join(" ");return i("div",{key:t.id,class:"nav-item-wrapper level-"+e,role:"none"},i(h,{id:l,...c,class:d,style:{paddingLeft:"horizontal"===this.orientation?"0":this.isExpanded?s:"0"},onMouseEnter:()=>{"horizontal"===this.orientation&&(this.hoveredId=t.id,this.updateGlider()),r||this.isExpanded||(this.hoveredIconId=t.id)},onMouseLeave:()=>{"horizontal"===this.orientation&&(this.hoveredId=null,this.updateGlider()),this.hoveredIconId=null},onClick:e=>{e.stopPropagation(),this.handleItemClick(t)},onKeyDown:e=>this.handleKeyDown(e,t),title:!this.isExpanded&&r?t.label:"",tabindex:"0",role:"treeitem","aria-expanded":r?o?"true":"false":null,"aria-selected":a?"true":"false"},(t.icon||t.avatar||"image"===t.type||"icon"===t.type||"avatar"===t.type||t.imageUrl)&&i("span",{class:"nav-icon-container"},t.avatar||"avatar"===t.type?i("ui-avatar",{src:t.avatar||t.imageUrl,shape:"circle",class:"nav-avatar-icon",size:this.isExpanded||"horizontal"===this.orientation?"1.5rem":"2rem",status:t.status}):"image"===t.type||t.imageUrl?i("img",{src:t.imageUrl,alt:t.label,class:"nav-image-icon",style:{width:"24px",height:"24px",borderRadius:"4px",objectFit:"cover"}}):i("span",{class:"nav-icon"},i("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"1.25rem"})),t.status&&!t.avatar&&"avatar"!==t.type&&i("span",{class:"nav-status-dot status-"+t.status}),!this.isExpanded&&t.badge&&i("span",{class:"nav-badge-mini"},t.badge),"horizontal"===this.orientation&&("user-profile"===t.id||this.isBottomItem(t.id))&&t.badge&&i("span",{class:"nav-badge-mini"},t.badge)),!r&&!this.isExpanded&&this.hoveredIconId===t.id&&i("div",{class:{"nav-tooltip":!0,visible:!0}},t.label),(this.isExpanded||"horizontal"===this.orientation&&!this.isBottomItem(t.id))&&i("span",{class:"nav-label-container"},i("span",{class:"nav-label"},t.label),t.badge&&i("span",{class:"nav-badge"},t.badge)),r&&(this.isExpanded||"horizontal"===this.orientation)&&i("span",{class:"nav-arrow"},i("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",fill:"none",class:o&&"horizontal"!==this.orientation?"rotate-180":""},i("path",{d:"M6 9l6 6 6-6"})))),(()=>{const e=r?t.children:[];return e&&0!==e.length?this.isExpanded&&"horizontal"!==this.orientation?null:i("ui-context-menu",{target:"#"+l,items:e,selectedId:this.activeId,theme:this.effectiveTheme,openOn:"hover",placement:"horizontal"===this.orientation?"bottom":"left"===this.position?"right":"left",onItemSelect:e=>{e.stopPropagation(),this.handleItemClick(r?e.detail.item:t)}}):null})(),r&&o&&this.isExpanded&&"horizontal"!==this.orientation&&i("div",{class:"nav-children",role:"group"},t.children.map((t=>this.renderItem(t,e+1)))))}static get watchers(){return{mode:[{handleModeChange:0}],theme:[{onThemeChange:0}],activeId:[{onActiveIdChange:0}],isExpanded:[{onExpandChange:0}]}}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{--nav-bg:#fcfcfc;--nav-color:#000000;--nav-border-color:#d9d9d9;--nav-item-hover-bg:#e6e6e6;--nav-item-active-bg:rgba(0, 138, 22, 0.08);--nav-item-active-color:#008a16;--nav-accent-gradient:linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);--nav-width:280px;--nav-transition:width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);display:flex;flex-direction:column;height:100vh;width:var(--nav-width);background:var(--nav-bg);color:var(--nav-color);border-right:1px solid var(--nav-border-color);transition:var(--nav-transition);box-sizing:border-box;position:relative;z-index:100}:host(.pos-right){border-right:none;border-left:1px solid var(--nav-border-color)}.nav-toggle-edge{position:absolute;top:48px;right:-12px;width:24px;height:24px;background:var(--nav-bg);border:1px solid var(--nav-border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:101;color:var(--nav-color);box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);transition:transform 0.2s, background-color 0.2s}.nav-toggle-edge:hover{background-color:var(--nav-item-hover-bg)}:host(.pos-right) .nav-toggle-edge{right:auto;left:-12px;transform:rotate(180deg)}:host(.is-collapsed) .nav-toggle-edge{transform:rotate(180deg)}:host(.pos-right.is-collapsed) .nav-toggle-edge{transform:rotate(0deg)}:host([data-theme=dark]){--nav-bg:#111827;--nav-color:#94a3b8;--nav-border-color:#1e293b;--nav-item-hover-bg:#1e293b;--nav-item-active-bg:rgba(0, 138, 22, 0.15);--nav-item-active-color:#008a16}:host([data-theme=green]){--nav-bg:#3DCD58;--nav-color:#ffffff;--nav-border-color:rgba(255, 255, 255, 0.2);--nav-item-hover-bg:rgba(255, 255, 255, 0.1);--nav-item-active-bg:rgba(255, 255, 255, 0.2);--nav-item-active-color:#ffffff}:host([orientation=horizontal]){width:100%;height:64px;flex-direction:row;border-right:none;border-bottom:1px solid var(--nav-border-color)}:host([orientation=horizontal]) .nav-blocks-container{display:flex !important;flex-direction:row !important;align-items:center;width:100%;height:100%;overflow:visible;flex-wrap:nowrap !important;justify-content:flex-start !important}:host([orientation=horizontal]) .nav-header{border-bottom:none;border-right:1px solid var(--nav-border-color);flex-shrink:0}:host(.is-collapsed) .nav-block-categories,:host(.is-collapsed) .nav-block-top,:host(.is-collapsed) .nav-block-secondary,:host(.is-collapsed) .nav-block-bottom,:host(.is-collapsed) .nav-block-profile{overflow:visible !important}:host([orientation=horizontal]) .nav-block-bottom{margin-left:auto}:host([orientation=horizontal]) .nav-block-categories,:host([orientation=horizontal]) .nav-block-top,:host([orientation=horizontal]) .nav-block-secondary,:host([orientation=horizontal]) .nav-block-bottom,:host([orientation=horizontal]) .nav-block-profile{display:flex !important;flex-direction:row !important;align-items:center;padding:0;overflow:visible !important;border:none !important;height:100%;flex-shrink:0;flex-grow:0 !important;max-height:none !important;flex-wrap:nowrap !important}:host([orientation=horizontal]) .nav-block-categories,:host([orientation=horizontal]) .nav-block-top,:host([orientation=horizontal]) .nav-block-secondary,:host([orientation=horizontal]) .nav-search-bar{border-right:none !important}:host([orientation=horizontal]) .nav-block-top{flex:none}:host([orientation=horizontal]) .nav-item-wrapper{height:100%;display:flex !important;flex-direction:row !important;align-items:center;flex-shrink:0}:host([orientation=horizontal]) .nav-item{height:100%;padding:0 6px;margin:0 !important;border-radius:0;display:flex;align-items:center;justify-content:center;white-space:nowrap}:host([orientation=horizontal]) .nav-icon{margin-right:4px;}:host([orientation=horizontal]) .nav-glider{left:0;right:auto;bottom:0px !important;top:auto !important;height:3px !important;border-radius:4px 4px 0 0;background-color:var(--nav-item-active-color);transition:left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s}:host([orientation=horizontal]) .nav-toggle-edge{display:none}:host([orientation=horizontal]) .nav-block-bottom .nav-label,:host([orientation=horizontal]) .nav-block-profile .nav-label{display:none;}:host([orientation=horizontal]) .nav-search-bar{padding:0 12px;border-bottom:none;border-right:1px solid var(--nav-border-color);height:100%;display:flex;align-items:center}:host([orientation=horizontal]) .nav-search-bar>div{width:150px}:host(.is-drawer){position:fixed;top:0;left:0;bottom:0;height:100vh;box-shadow:4px 0 16px rgba(0, 0, 0, 0.1);z-index:1000}:host(.is-drawer.pos-right){left:auto;right:0;box-shadow:-4px 0 16px rgba(0, 0, 0, 0.1)}.nav-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.4);z-index:-1;}:host(.is-drawer){overflow:visible;}.nav-header{flex-shrink:0;min-height:64px;display:flex;align-items:center;padding:0 16px;overflow:hidden;white-space:nowrap;position:relative;border-bottom:1px solid var(--nav-border-color)}.nav-mobile-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;padding:4px}.nav-blocks-container{display:flex;flex-direction:column;flex:1;min-height:100vh;height:100vh;overflow:hidden;}.nav-block-categories{flex-shrink:0;max-height:30%;overflow-y:auto;overflow-x:visible;display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--nav-border-color);scrollbar-width:thin;scrollbar-color:var(--nav-border-color) transparent}.nav-block-top{flex:1;min-height:0;overflow-y:auto;overflow-x:visible;display:flex;flex-direction:column;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--nav-border-color) transparent}.nav-block-bottom{flex-shrink:0;border-top:1px solid var(--nav-border-color);padding:8px 0;background-color:rgba(255, 255, 255, 0.05);display:flex;flex-direction:column;overflow:visible;min-height:fit-content;max-height:fit-content;}:host([data-theme=light]) .nav-block-bottom{background-color:rgba(0, 0, 0, 0.05)}.nav-header{border-bottom:1px solid var(--nav-border-color)}.nav-search-bar{padding:8px 16px;border-bottom:1px solid var(--nav-border-color)}.nav-block-secondary{padding:8px 0;border-top:1px solid var(--nav-border-color);display:flex;flex-direction:column;overflow:visible}.nav-block-profile{flex-shrink:0;padding:8px 0;border-top:1px solid var(--nav-border-color);display:flex;flex-direction:column;background-color:rgba(255, 255, 255, 0.08);overflow:visible;min-height:fit-content;max-height:fit-content;}:host([data-theme=light]) .nav-block-profile{background-color:rgba(0, 0, 0, 0.08)}.nav-block-categories::-webkit-scrollbar,.nav-block-top::-webkit-scrollbar{width:4px}.nav-block-categories::-webkit-scrollbar-thumb,.nav-block-top::-webkit-scrollbar-thumb{background-color:var(--nav-border-color);border-radius:4px}.nav-item-wrapper{display:flex;flex-direction:column;min-width:0;}.nav-item{display:flex;align-items:center;height:40px;cursor:pointer;user-select:none;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:nowrap;position:relative;overflow:visible;margin:2px 8px;border-radius:8px;outline:none;}a.nav-item{text-decoration:none;color:inherit}.nav-item:focus-visible{outline:2px solid var(--nav-item-active-color);outline-offset:-2px}.nav-item:hover{background-color:var(--nav-item-hover-bg)}.nav-item.active,.nav-item.active-ancestor{background-color:var(--nav-item-active-bg);color:var(--nav-item-active-color);font-weight:500;position:relative}.nav-glider{position:absolute;width:4px;background-color:#008a16;border-radius:4px;transition:top 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s ease, opacity 0.2s;pointer-events:none;z-index:10;left:6px}:host(.indicator-end) .nav-glider{left:auto;right:6px}.nav-item-wrapper:not(.level-0)>.nav-item{font-size:0.95em;opacity:0.9;height:36px;}.nav-item-wrapper:not(.level-0)>.nav-item.active{background-color:var(--nav-item-active-bg);color:var(--nav-item-active-color);font-weight:600;position:relative}.nav-item-wrapper:not(.level-0)>.nav-item.active::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:4px;height:32px;border-radius:4px;background-color:var(--nav-item-active-color)}.nav-children{position:relative;}.nav-icon-container{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-status-dot{position:absolute;top:2px;right:12px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--nav-bg);z-index:2}:host(.is-collapsed) .nav-status-dot,:host([orientation=horizontal]) .nav-status-dot{right:0px}.nav-status-dot.status-online{background-color:#22c55e}.nav-status-dot.status-offline{background-color:#94a3b8}.nav-status-dot.status-away{background-color:#eab308}.nav-status-dot.status-busy{background-color:#ef4444}.nav-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;margin-right:12px}:host(.is-collapsed) .nav-icon,:host([orientation=horizontal]) .nav-block-bottom .nav-icon,:host([orientation=horizontal]) .nav-block-profile .nav-icon{margin-right:0}.nav-label-container{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.nav-badge{background-color:var(--nav-item-active-color);color:white;font-size:10px;font-weight:700;padding:0 6px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-badge-mini{position:absolute;top:-4px;right:-4px;background-color:#ef4444;color:white;font-size:9px;font-weight:800;min-width:14px;height:14px;padding:0 3px;border-radius:7px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--nav-bg);z-index:3}.nav-item{border-left:3px solid transparent}.nav-item.active .nav-icon{color:currentColor;}.nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.nav-item.no-icon .nav-label{font-size:12px;opacity:0.8;padding-left:4px}.nav-item.is-user-profile .nav-icon{background:var(--nav-accent-gradient);border-radius:50%;color:white !important;width:32px;height:32px;min-width:32px;box-shadow:0 4px 10px rgba(59, 130, 246, 0.4);margin-right:12px}.nav-item.is-user-profile .nav-icon ui-icon{width:18px !important;height:18px !important;font-size:18px !important}.nav-item.is-user-profile .nav-label{font-weight:600;color:var(--nav-color)}.nav-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:8px;transition:transform 0.2s}:host([orientation=horizontal]) .nav-arrow{margin-left:4px}.nav-arrow .rotate-180{transform:rotate(180deg)}.nav-children{display:flex;flex-direction:column;overflow:hidden;animation:slideDown 0.2s ease-out}@keyframes slideDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}:host(.is-collapsed:not([orientation=horizontal])) .nav-item{justify-content:center;padding:0 !important;margin:4px 0;width:100%;border-radius:0}:host(.is-collapsed:not([orientation=horizontal])) .nav-icon{margin-right:0}:host(.is-collapsed:not([orientation=horizontal])) .nav-label,:host(.is-collapsed:not([orientation=horizontal])) .nav-arrow{display:none;}.nav-tooltip{position:absolute;background:#1e293b;color:#f8fafc;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);border:1px solid rgba(255, 255, 255, 0.1);z-index:2000;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 0.2s, transform 0.2s, visibility 0.2s}.nav-tooltip.visible{opacity:1;visibility:visible}:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip{left:100%;top:50%;transform:translateY(-50%) translateX(-10px);margin-left:10px}:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip.visible{transform:translateY(-50%) translateX(0)}:host([orientation=horizontal]) .nav-tooltip{top:100%;left:50%;transform:translateX(-50%) translateY(-10px);margin-top:8px}:host([orientation=horizontal]) .nav-tooltip.visible{transform:translateX(-50%) translateY(0)}:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip{left:50%;bottom:100%;transform:translateX(-50%) translateY(10px);margin-bottom:8px}:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip.visible{transform:translateX(-50%) translateY(0)}.nav-tooltip::before{content:"";position:absolute;width:8px;height:8px;background:#1e293b;transform:rotate(45deg);z-index:-1;border:1px solid rgba(255, 255, 255, 0.1)}:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip::before{left:-4px;top:50%;margin-top:-4px;border-right:none;border-top:none}:host([orientation=horizontal]) .nav-tooltip::before{top:-4px;left:50%;margin-left:-4px;border-right:none;border-bottom:none}:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip::before{bottom:-4px;left:12px;border-left:none;border-top:none}'}},[769,"ui-navigation-bar",{items:[16],categories:[16],bottomItems:[16],secondaryItems:[16],bottomItemsSecondary:[16],showSearch:[4,"show-search"],mode:[1537],position:[513],collapsible:[4],expandedWidth:[1,"expanded-width"],collapsedWidth:[1,"collapsed-width"],iconOnly:[4,"icon-only"],accordion:[4],activeId:[1025,"active-id"],theme:[513],orientation:[513],density:[513],indicatorPosition:[1,"indicator-position"],maxItems:[2,"max-items"],companyLogo:[1,"company-logo"],companyName:[1,"company-name"],iconLibrary:[1,"icon-library"],isExpanded:[32],isMobile:[32],expandedItems:[32],keyword:[32],effectiveTheme:[32],gliderTop:[32],gliderHeight:[32],gliderLeft:[32],gliderWidth:[32],gliderOpacity:[32],hoveredId:[32],hoveredIconId:[32],open:[64],close:[64],toggle:[64],setActive:[64]},[[9,"resize","handleResize"],[3,"scroll","handleScroll"]],{mode:[{handleModeChange:0}],theme:[{onThemeChange:0}],activeId:[{onActiveIdChange:0}],isExpanded:[{onExpandChange:0}]}]),b=v,m=function(){"undefined"!=typeof customElements&&["ui-navigation-bar","ui-avatar","ui-badge","ui-button","ui-context-menu","ui-icon","ui-input","ui-loader"].forEach((t=>{switch(t){case"ui-navigation-bar":customElements.get(n(t))||customElements.define(n(t),v);break;case"ui-avatar":customElements.get(n(t))||r();break;case"ui-badge":customElements.get(n(t))||l();break;case"ui-button":customElements.get(n(t))||s();break;case"ui-context-menu":customElements.get(n(t))||h();break;case"ui-icon":customElements.get(n(t))||c();break;case"ui-input":customElements.get(n(t))||d();break;case"ui-loader":customElements.get(n(t))||p()}}))};export{b as UiNavigationBar,m as defineCustomElement}

package/dist/components/ui-navigation-item.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as o,createEvent as i,h as a,transformTag as n}from"@stencil/core/internal/client";import{d as e}from"./icon.js";const r=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.navItemClick=i(this,"navItemClick",7),this.submenuToggle=i(this,"submenuToggle",7),this.popoverStateChange=i(this,"popoverStateChange",7)}item;collapsed=!1;active=!1;activeId="";open=!1;animationDuration=350;indentation=0;forcePopover=!1;orientation="vertical";iconLibrary="default";isHovering=!1;popoverPlacement="bottom";hoverTimeout;navItemClick;submenuToggle;popoverStateChange;handleMouseEnter=t=>{if(this.hoverTimeout&&clearTimeout(this.hoverTimeout),this.isHovering=!0,"horizontal"===this.orientation)this.popoverPlacement="bottom";else{const o=t.currentTarget.getBoundingClientRect(),i=window.innerHeight;this.popoverPlacement=o.top>.6*i?"top":"bottom"}(this.collapsed||this.forcePopover||"top"===this.popoverPlacement)&&this.item.children&&this.item.children.length>0&&this.popoverStateChange.emit(!0)};handleMouseLeave=()=>{this.hoverTimeout=setTimeout((()=>{this.isHovering=!1,this.popoverStateChange.emit(!1)}),50)};hasActiveChild(t=this.item.children){return!!t&&t.some((t=>t.id===this.activeId||t.children&&this.hasActiveChild(t.children)))}handleClick=()=>{const t=this.item.children&&this.item.children.length>0;t&&(this.collapsed||this.forcePopover)||(t?this.submenuToggle.emit(this.item.id):this.navItemClick.emit(this.item))};render(){const t=this.item.children&&this.item.children.length>0,o=this.active||this.item.id===this.activeId,i=this.hasActiveChild(),n=this.forcePopover||"user-profile"===this.item.id;return a("li",{key:"b344aa6c6a2034b11c7bfb861ef51d24fb1ddc21",class:{"nav-item":!0,active:o,"active-parent":i,disabled:this.item.disabled,"has-children":t,open:this.open&&!n,collapsed:this.collapsed,hovering:this.isHovering,"in-popover":this.forcePopover,"is-user-profile":"user-profile"===this.item.id,"placement-top":"top"===this.popoverPlacement,"placement-bottom":"bottom"===this.popoverPlacement},tabindex:this.item.disabled?-1:0,"aria-disabled":this.item.disabled?"true":"false","aria-expanded":this.open&&!n?"true":"false",onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},a("div",{key:"f511c50817c20785b2ea46afe2df07a7f5508818",class:"item-content",onClick:this.handleClick,onKeyDown:t=>{"Enter"===t.key&&this.handleClick()}},this.item.icon&&a("span",{key:"20bf50d7db7d55522e8bc9c1433bbeaf71639fa5",class:"nav-icon"},a("ui-icon",{key:"b1316aec36a00d9bd44b3a89072fa6a39b282490",name:this.item.icon,library:this.item.iconLibrary||this.iconLibrary,size:"1.25rem"})),(!this.collapsed||this.forcePopover)&&a("span",{key:"c2d027a25fa696b59231c99283761b03f637f603",class:"nav-label"},this.item.label),this.item.badge&&(!this.collapsed||this.forcePopover)&&a("span",{key:"0e89b2789f06b330f445588316008d6d0d2418f6",class:"nav-badge"},this.item.badge),t&&!n&&a("span",{key:"4d124c918ab7092a639d1026ec1ca964511da10c",class:"nav-arrow"},a("ui-icon",{key:"9cc46d50a9a8b76d439def8e56774fc5b9855dfd",name:"chevron-right",library:"lucide",size:"12px"})),t&&n&&a("span",{key:"e47643bc3dcf1a1b5b872d1114730f3c03e5bf80",class:"nav-arrow cascading"},a("ui-icon",{key:"7de0a36cdbc167332010d3191199d6c16d4f66a0",name:"chevron-right",library:"lucide",size:"12px"}))),!t&&this.collapsed&&this.isHovering&&a("div",{key:"b187ecbdadc6d7fb3d1be290ae2f62c5fb9b0458",class:"nav-tooltip"},this.item.label))}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.nav-item{display:flex;flex-direction:column;cursor:pointer;border-radius:12px;margin-bottom:4px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;user-select:none;width:100%}.item-content{display:flex;align-items:center;gap:16px;height:48px;padding:0 16px;color:var(--nav-text-dim);transition:all 0.3s ease;position:relative;z-index:2;border-radius:10px}:host([orientation=horizontal]){display:flex;align-items:center;height:64px}:host([orientation=horizontal]) .nav-item{margin-bottom:0;height:100%;display:flex;align-items:center}:host([orientation=horizontal]) .item-content{height:100%;padding:0 12px;justify-content:center}.nav-item:hover .item-content{background:var(--nav-hover-bg);color:var(--nav-text)}.nav-item.active .item-content,.nav-item.active-parent .item-content{background:var(--nav-active-bg);color:var(--nav-accent);font-weight:600;box-shadow:inset 0 0 0 1px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.nav-item.active::before,.nav-item.active-parent::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--nav-accent);border-radius:0 4px 4px 0;box-shadow:0 0 10px var(--nav-accent);z-index:3}.nav-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:20px;transition:transform 0.3s ease}.nav-item:hover .nav-icon{transform:scale(1.1)}.nav-item.active .nav-icon,.nav-item.active-parent .nav-icon{color:var(--nav-accent);transform:scale(1.1)}.nav-item.active .nav-icon svg,.nav-item.active-parent .nav-icon svg{filter:drop-shadow(0 0 5px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}.nav-label{font-size:14px;font-weight:500;white-space:nowrap;flex:1;letter-spacing:0.3px;overflow:hidden;text-overflow:ellipsis}.nav-badge{background:var(--nav-accent-gradient);color:var(--text-standard, #ffffff);border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:auto;box-shadow:0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3)}.nav-arrow{margin-left:auto;font-size:10px;color:var(--nav-text-dim);transition:transform 0.3s ease}.nav-item.open>.item-content .nav-arrow{transform:rotate(90deg)}.nav-submenu{list-style:none;margin:0;padding:0 0 8px 12px;overflow:hidden}.nav-item.collapsed .nav-label,.nav-item.collapsed .nav-badge,.nav-item.collapsed .nav-arrow,.nav-item.collapsed .nav-submenu:not(.floating-popover){display:none}.nav-item.collapsed .item-content{justify-content:center;padding:0;width:100%}:host([indentation="1"]) .nav-item{margin-left:8px;border-radius:8px}:host([indentation="1"]) .item-content{height:38px;font-size:13px}:host([indentation="1"]) .nav-item.active::before{width:2px;top:10px;bottom:10px}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.nav-item.open .nav-submenu navigation-item{animation:slideDown 0.3s ease forwards}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover{background:var(--bg-primary, #1e293b) !important;z-index:2500 !important;box-shadow:0 10px 40px rgba(0, 0, 0, 0.5) !important;width:220px !important;display:flex !important;flex-direction:column !important;max-height:calc(100vh - 32px) !important;overflow-y:auto !important;overflow-x:hidden !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover:not(.placement-top),:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-bottom{top:0;bottom:auto}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-top{bottom:0;top:auto}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-top::before{top:auto !important;bottom:18px !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar{width:6px}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-track{background:transparent;border-radius:12px}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-thumb{background:rgba(148, 163, 184, 0.5);border-radius:12px;transition:background 0.3s ease}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-thumb:hover{background:rgba(148, 163, 184, 0.8)}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover navigation-item,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover>navigation-item{display:block !important;width:100% !important;height:auto !important;min-height:40px !important;opacity:1 !important;visibility:visible !important;flex-shrink:0 !important}:host([orientation=vertical]) .nav-item.is-user-profile:hover .nav-submenu.floating-popover,:host([orientation=vertical]) .nav-item.is-user-profile.hovering .nav-submenu.floating-popover,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover:hover,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.is-visible{visibility:visible !important;opacity:1 !important;pointer-events:auto !important;transform:translateX(0) translateY(0) !important}:host([orientation=vertical]) .nav-item.is-user-profile:hover,:host([orientation=vertical]) .nav-item.is-user-profile.hovering{overflow:visible !important;z-index:1001 !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::after{content:"";position:absolute;left:-25px;top:0;width:30px;height:100%;pointer-events:auto;background:transparent;z-index:2001}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu:not(.floating-popover){display:none !important}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top.is-visible{transform:translateX(0)}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top::before{top:auto;bottom:18px}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top::after{top:auto;bottom:0;height:100%}.nav-submenu.floating-popover::after{content:"";position:absolute;top:-20px;bottom:-20px;left:-24px;width:24px;background:transparent;z-index:-1}.nav-item:hover,.nav-item.hovering{z-index:1000;overflow:visible !important}.nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading){left:100%;margin-left:12px;top:0}.nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading)::before{display:block;}.nav-submenu.floating-popover.cascading{left:100%;margin-left:4px;top:-4px;}.nav-submenu.floating-popover.cascading::before{top:18px;left:-6px}.popover-header{padding:12px 16px;font-size:11px;font-weight:700;color:var(--nav-text-dim);text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid rgba(255, 255, 255, 0.05);margin-bottom:4px;user-select:none;pointer-events:none}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background:var(--bg-primary, #1e293b);color:var(--text-standard, #f8fafc);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);border:1px solid rgba(255, 255, 255, 0.1);z-index:2000;margin-left:8px;pointer-events:none;animation:fadeIn 0.2s ease forwards}.nav-submenu.floating-popover::before,.nav-tooltip::before{content:"";position:absolute;left:-6px;top:18px;width:12px;height:12px;background:var(--bg-primary, #1e293b);transform:rotate(45deg);border-left:1px solid rgba(255, 255, 255, 0.1);border-bottom:1px solid rgba(255, 255, 255, 0.1);z-index:-1}.nav-tooltip::before{top:50%;margin-top:-6px}:host([orientation=horizontal]) .nav-submenu.floating-popover::before{content:"" !important;display:block !important;visibility:visible !important;opacity:1 !important;position:absolute !important;left:50% !important;right:auto !important;top:-6px !important;bottom:auto !important;margin:0 !important;width:12px !important;height:12px !important;background:var(--bg-primary, #1e293b) !important;transform:translateX(-50%) rotate(45deg) !important;border:none !important;border-top:1px solid rgba(255, 255, 255, 0.1) !important;border-right:1px solid rgba(255, 255, 255, 0.1) !important;z-index:-1 !important;pointer-events:none !important}@keyframes fadeIn{from{opacity:0;transform:translateY(-50%) translateX(-5px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}.nav-submenu.floating-popover ::slotted(navigation-item),.nav-submenu.floating-popover navigation-item{margin-left:0 !important}.nav-item.collapsed:hover{overflow:visible}.nav-item.in-popover .item-content{height:40px;padding:0 12px;border-radius:8px}.nav-item.in-popover{margin-left:0 !important;margin-bottom:2px}.nav-item.in-popover.active .item-content{background:var(--nav-active-bg);border:1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.nav-item.in-popover.active .nav-label{color:var(--nav-accent) !important;font-weight:700}.nav-item.in-popover.active::before{top:8px;bottom:8px;width:3px}.nav-arrow.cascading{margin-left:auto;opacity:0.5;transition:transform 0.3s ease}.nav-item.placement-top .nav-arrow.cascading,.nav-submenu.placement-top .nav-arrow.cascading{transform:rotate(-90deg);}.nav-submenu:not(.placement-top) .nav-arrow.cascading{transform:rotate(0deg)}:host([indentation="0"]) .nav-item.in-popover{margin-left:0}.nav-item.is-user-profile .nav-icon{background:var(--nav-accent-gradient);border-radius:50%;color:var(--text-standard, #ffffff) !important;width:32px;height:32px;min-width:32px;box-shadow:0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4)}.nav-item.is-user-profile .nav-icon svg{width:18px;height:18px}.nav-item.is-user-profile .nav-label{font-weight:600;color:var(--nav-text)}:host([orientation=horizontal]){height:100%}:host([orientation=horizontal]) .nav-item{height:100%;flex-direction:row;align-items:center;justify-content:center;margin-bottom:0;border-radius:0;padding:0 4px}:host([orientation=horizontal]) .item-content{height:100%;padding:0 16px;border-radius:0;font-weight:600;transition:all 0.2s ease}:host([orientation=horizontal]) .nav-item:hover .item-content{background:rgba(255, 255, 255, 0.08)}:host([orientation=horizontal]) .nav-item.active::before,:host([orientation=horizontal]) .nav-item.active-parent::before{top:auto;bottom:0;left:0;right:0;width:100%;height:3px;border-radius:4px 4px 0 0}:host([orientation=horizontal]) .nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading){left:0 !important;top:100% !important;bottom:auto !important;margin-left:0 !important;margin-top:8px !important;transform:translateY(-5px)}:host([orientation=horizontal][indentation="0"]) .nav-arrow{transform:rotate(90deg);}:host([orientation=horizontal][indentation="0"]) .nav-item.open>.item-content .nav-arrow{transform:rotate(-90deg);}:host([orientation=horizontal][indentation="1"]) .nav-arrow.cascading,:host([orientation=horizontal][indentation="2"]) .nav-arrow.cascading{transform:rotate(0deg);}:host([orientation=horizontal]) .nav-submenu.floating-popover::after{top:-12px;left:0;right:0;height:12px;width:100%}:host([orientation=horizontal]) .nav-submenu.floating-popover:not(.cascading)::before,:host([orientation=horizontal]) .nav-submenu.floating-popover.placement-bottom:not(.cascading)::before,:host([orientation=horizontal]) .nav-submenu.floating-popover.placement-top:not(.cascading)::before{content:"" !important;position:absolute !important;left:50% !important;right:auto !important;top:-6px !important;bottom:auto !important;width:12px !important;height:12px !important;transform:translateX(-50%) rotate(45deg) !important;background:var(--bg-primary, #1e293b) !important;border-top:1px solid rgba(255, 255, 255, 0.1) !important;border-right:1px solid rgba(255, 255, 255, 0.1) !important;border-left:none !important;border-bottom:none !important;z-index:-1 !important}:host([orientation=horizontal]) .nav-submenu.floating-popover.cascading::before{content:"" !important;position:absolute !important;left:-6px !important;right:auto !important;top:18px !important;bottom:auto !important;width:12px !important;height:12px !important;transform:rotate(45deg) !important;background:var(--bg-primary, #1e293b) !important;border-top:none !important;border-right:none !important;border-left:1px solid rgba(255, 255, 255, 0.1) !important;border-bottom:1px solid rgba(255, 255, 255, 0.1) !important;z-index:-1 !important}'}},[513,"ui-navigation-item",{item:[16],collapsed:[4],active:[4],activeId:[1,"active-id"],open:[4],animationDuration:[2,"animation-duration"],indentation:[514],forcePopover:[4,"force-popover"],orientation:[1],iconLibrary:[1,"icon-library"],isHovering:[32],popoverPlacement:[32]}]),p=r,s=function(){"undefined"!=typeof customElements&&["ui-navigation-item","ui-icon"].forEach((t=>{switch(t){case"ui-navigation-item":customElements.get(n(t))||customElements.define(n(t),r);break;case"ui-icon":customElements.get(n(t))||e()}}))};export{p as UiNavigationItem,s as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as o,createEvent as i,h as e,transformTag as a}from"@stencil/core/internal/client";import{d as n}from"./icon.js";import{d as r}from"./loader.js";const p=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.navItemClick=i(this,"navItemClick",7),this.submenuToggle=i(this,"submenuToggle",7),this.popoverStateChange=i(this,"popoverStateChange",7)}item;collapsed=!1;active=!1;activeId="";open=!1;animationDuration=350;indentation=0;forcePopover=!1;orientation="vertical";iconLibrary="default";isHovering=!1;popoverPlacement="bottom";hoverTimeout;navItemClick;submenuToggle;popoverStateChange;handleMouseEnter=t=>{if(this.hoverTimeout&&clearTimeout(this.hoverTimeout),this.isHovering=!0,"horizontal"===this.orientation)this.popoverPlacement="bottom";else{const o=t.currentTarget.getBoundingClientRect(),i=window.innerHeight;this.popoverPlacement=o.top>.6*i?"top":"bottom"}(this.collapsed||this.forcePopover||"top"===this.popoverPlacement)&&this.item.children&&this.item.children.length>0&&this.popoverStateChange.emit(!0)};handleMouseLeave=()=>{this.hoverTimeout=setTimeout((()=>{this.isHovering=!1,this.popoverStateChange.emit(!1)}),50)};hasActiveChild(t=this.item.children){return!!t&&t.some((t=>t.id===this.activeId||t.children&&this.hasActiveChild(t.children)))}handleClick=()=>{const t=this.item.children&&this.item.children.length>0;t&&(this.collapsed||this.forcePopover)||(t?this.submenuToggle.emit(this.item.id):this.navItemClick.emit(this.item))};render(){const t=this.item.children&&this.item.children.length>0,o=this.active||this.item.id===this.activeId,i=this.hasActiveChild(),a=this.forcePopover||"user-profile"===this.item.id;return e("li",{key:"9345250f187b57fec472da66335620d747dfc207",class:{"nav-item":!0,active:o,"active-parent":i,disabled:this.item.disabled,"has-children":t,open:this.open&&!a,collapsed:this.collapsed,hovering:this.isHovering,"in-popover":this.forcePopover,"is-user-profile":"user-profile"===this.item.id,"placement-top":"top"===this.popoverPlacement,"placement-bottom":"bottom"===this.popoverPlacement},tabindex:this.item.disabled?-1:0,"aria-disabled":this.item.disabled?"true":"false","aria-expanded":this.open&&!a?"true":"false",onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},e("div",{key:"fed1eb168a5e1340b971dd12ecabcc3a6bb0d831",class:"item-content",onClick:this.handleClick,onKeyDown:t=>{"Enter"===t.key&&this.handleClick()}},this.item.icon&&e("span",{key:"d84f8938d5cd2aed187bcf9e1391d02028f11563",class:"nav-icon"},e("ui-icon",{key:"425c866305be4793ba69e1220227da3676b3fcb0",name:this.item.icon,library:this.item.iconLibrary||this.iconLibrary,size:"1.25rem"})),(!this.collapsed||this.forcePopover)&&e("span",{key:"2bdd778f72907794ca3d2b71aae3b95f44d01a41",class:"nav-label"},this.item.label),this.item.badge&&(!this.collapsed||this.forcePopover)&&e("span",{key:"1941e1c4aeeef16d23835d3ebd88effc538fff95",class:"nav-badge"},this.item.badge),t&&!a&&e("span",{key:"fa5be41879778fd799630738887a3cc04ebaa522",class:"nav-arrow"},e("ui-icon",{key:"ac63423d3f91457328483262c851e3bd94e62c63",name:"chevron-right",library:"lucide",size:"12px"})),t&&a&&e("span",{key:"9edca162c739fe418329716440525e9c3384273e",class:"nav-arrow cascading"},e("ui-icon",{key:"1c3d47c485761f9f159512b2dfb549d2f1509b44",name:"chevron-right",library:"lucide",size:"12px"}))),!t&&this.collapsed&&this.isHovering&&e("div",{key:"0ad95cb5783779519408eb16c09faac91e79aaf6",class:"nav-tooltip"},this.item.label))}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.nav-item{display:flex;flex-direction:column;cursor:pointer;border-radius:12px;margin-bottom:4px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;user-select:none;width:100%}.item-content{display:flex;align-items:center;gap:16px;height:48px;padding:0 16px;color:var(--nav-text-dim);transition:all 0.3s ease;position:relative;z-index:2;border-radius:10px}:host([orientation=horizontal]){display:flex;align-items:center;height:64px}:host([orientation=horizontal]) .nav-item{margin-bottom:0;height:100%;display:flex;align-items:center}:host([orientation=horizontal]) .item-content{height:100%;padding:0 12px;justify-content:center}.nav-item:hover .item-content{background:var(--nav-hover-bg);color:var(--nav-text)}.nav-item.active .item-content,.nav-item.active-parent .item-content{background:var(--nav-active-bg);color:var(--nav-accent);font-weight:600;box-shadow:inset 0 0 0 1px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.nav-item.active::before,.nav-item.active-parent::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--nav-accent);border-radius:0 4px 4px 0;box-shadow:0 0 10px var(--nav-accent);z-index:3}.nav-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:20px;transition:transform 0.3s ease}.nav-item:hover .nav-icon{transform:scale(1.1)}.nav-item.active .nav-icon,.nav-item.active-parent .nav-icon{color:var(--nav-accent);transform:scale(1.1)}.nav-item.active .nav-icon svg,.nav-item.active-parent .nav-icon svg{filter:drop-shadow(0 0 5px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}.nav-label{font-size:14px;font-weight:500;white-space:nowrap;flex:1;letter-spacing:0.3px;overflow:hidden;text-overflow:ellipsis}.nav-badge{background:var(--nav-accent-gradient);color:var(--text-standard, #ffffff);border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:auto;box-shadow:0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3)}.nav-arrow{margin-left:auto;font-size:10px;color:var(--nav-text-dim);transition:transform 0.3s ease}.nav-item.open>.item-content .nav-arrow{transform:rotate(90deg)}.nav-submenu{list-style:none;margin:0;padding:0 0 8px 12px;overflow:hidden}.nav-item.collapsed .nav-label,.nav-item.collapsed .nav-badge,.nav-item.collapsed .nav-arrow,.nav-item.collapsed .nav-submenu:not(.floating-popover){display:none}.nav-item.collapsed .item-content{justify-content:center;padding:0;width:100%}:host([indentation="1"]) .nav-item{margin-left:8px;border-radius:8px}:host([indentation="1"]) .item-content{height:38px;font-size:13px}:host([indentation="1"]) .nav-item.active::before{width:2px;top:10px;bottom:10px}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.nav-item.open .nav-submenu navigation-item{animation:slideDown 0.3s ease forwards}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover{background:var(--bg-primary, #1e293b) !important;z-index:2500 !important;box-shadow:0 10px 40px rgba(0, 0, 0, 0.5) !important;width:220px !important;display:flex !important;flex-direction:column !important;max-height:calc(100vh - 32px) !important;overflow-y:auto !important;overflow-x:hidden !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover:not(.placement-top),:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-bottom{top:0;bottom:auto}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-top{bottom:0;top:auto}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-top::before{top:auto !important;bottom:18px !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar{width:6px}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-track{background:transparent;border-radius:12px}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-thumb{background:rgba(148, 163, 184, 0.5);border-radius:12px;transition:background 0.3s ease}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-thumb:hover{background:rgba(148, 163, 184, 0.8)}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover navigation-item,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover>navigation-item{display:block !important;width:100% !important;height:auto !important;min-height:40px !important;opacity:1 !important;visibility:visible !important;flex-shrink:0 !important}:host([orientation=vertical]) .nav-item.is-user-profile:hover .nav-submenu.floating-popover,:host([orientation=vertical]) .nav-item.is-user-profile.hovering .nav-submenu.floating-popover,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover:hover,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.is-visible{visibility:visible !important;opacity:1 !important;pointer-events:auto !important;transform:translateX(0) translateY(0) !important}:host([orientation=vertical]) .nav-item.is-user-profile:hover,:host([orientation=vertical]) .nav-item.is-user-profile.hovering{overflow:visible !important;z-index:1001 !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::after{content:"";position:absolute;left:-25px;top:0;width:30px;height:100%;pointer-events:auto;background:transparent;z-index:2001}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu:not(.floating-popover){display:none !important}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top.is-visible{transform:translateX(0)}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top::before{top:auto;bottom:18px}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top::after{top:auto;bottom:0;height:100%}.nav-submenu.floating-popover::after{content:"";position:absolute;top:-20px;bottom:-20px;left:-24px;width:24px;background:transparent;z-index:-1}.nav-item:hover,.nav-item.hovering{z-index:1000;overflow:visible !important}.nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading){left:100%;margin-left:12px;top:0}.nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading)::before{display:block;}.nav-submenu.floating-popover.cascading{left:100%;margin-left:4px;top:-4px;}.nav-submenu.floating-popover.cascading::before{top:18px;left:-6px}.popover-header{padding:12px 16px;font-size:11px;font-weight:700;color:var(--nav-text-dim);text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid rgba(255, 255, 255, 0.05);margin-bottom:4px;user-select:none;pointer-events:none}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background:var(--bg-primary, #1e293b);color:var(--text-standard, #f8fafc);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);border:1px solid rgba(255, 255, 255, 0.1);z-index:2000;margin-left:8px;pointer-events:none;animation:fadeIn 0.2s ease forwards}.nav-submenu.floating-popover::before,.nav-tooltip::before{content:"";position:absolute;left:-6px;top:18px;width:12px;height:12px;background:var(--bg-primary, #1e293b);transform:rotate(45deg);border-left:1px solid rgba(255, 255, 255, 0.1);border-bottom:1px solid rgba(255, 255, 255, 0.1);z-index:-1}.nav-tooltip::before{top:50%;margin-top:-6px}:host([orientation=horizontal]) .nav-submenu.floating-popover::before{content:"" !important;display:block !important;visibility:visible !important;opacity:1 !important;position:absolute !important;left:50% !important;right:auto !important;top:-6px !important;bottom:auto !important;margin:0 !important;width:12px !important;height:12px !important;background:var(--bg-primary, #1e293b) !important;transform:translateX(-50%) rotate(45deg) !important;border:none !important;border-top:1px solid rgba(255, 255, 255, 0.1) !important;border-right:1px solid rgba(255, 255, 255, 0.1) !important;z-index:-1 !important;pointer-events:none !important}@keyframes fadeIn{from{opacity:0;transform:translateY(-50%) translateX(-5px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}.nav-submenu.floating-popover ::slotted(navigation-item),.nav-submenu.floating-popover navigation-item{margin-left:0 !important}.nav-item.collapsed:hover{overflow:visible}.nav-item.in-popover .item-content{height:40px;padding:0 12px;border-radius:8px}.nav-item.in-popover{margin-left:0 !important;margin-bottom:2px}.nav-item.in-popover.active .item-content{background:var(--nav-active-bg);border:1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.nav-item.in-popover.active .nav-label{color:var(--nav-accent) !important;font-weight:700}.nav-item.in-popover.active::before{top:8px;bottom:8px;width:3px}.nav-arrow.cascading{margin-left:auto;opacity:0.5;transition:transform 0.3s ease}.nav-item.placement-top .nav-arrow.cascading,.nav-submenu.placement-top .nav-arrow.cascading{transform:rotate(-90deg);}.nav-submenu:not(.placement-top) .nav-arrow.cascading{transform:rotate(0deg)}:host([indentation="0"]) .nav-item.in-popover{margin-left:0}.nav-item.is-user-profile .nav-icon{background:var(--nav-accent-gradient);border-radius:50%;color:var(--text-standard, #ffffff) !important;width:32px;height:32px;min-width:32px;box-shadow:0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4)}.nav-item.is-user-profile .nav-icon svg{width:18px;height:18px}.nav-item.is-user-profile .nav-label{font-weight:600;color:var(--nav-text)}:host([orientation=horizontal]){height:100%}:host([orientation=horizontal]) .nav-item{height:100%;flex-direction:row;align-items:center;justify-content:center;margin-bottom:0;border-radius:0;padding:0 4px}:host([orientation=horizontal]) .item-content{height:100%;padding:0 16px;border-radius:0;font-weight:600;transition:all 0.2s ease}:host([orientation=horizontal]) .nav-item:hover .item-content{background:rgba(255, 255, 255, 0.08)}:host([orientation=horizontal]) .nav-item.active::before,:host([orientation=horizontal]) .nav-item.active-parent::before{top:auto;bottom:0;left:0;right:0;width:100%;height:3px;border-radius:4px 4px 0 0}:host([orientation=horizontal]) .nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading){left:0 !important;top:100% !important;bottom:auto !important;margin-left:0 !important;margin-top:8px !important;transform:translateY(-5px)}:host([orientation=horizontal][indentation="0"]) .nav-arrow{transform:rotate(90deg);}:host([orientation=horizontal][indentation="0"]) .nav-item.open>.item-content .nav-arrow{transform:rotate(-90deg);}:host([orientation=horizontal][indentation="1"]) .nav-arrow.cascading,:host([orientation=horizontal][indentation="2"]) .nav-arrow.cascading{transform:rotate(0deg);}:host([orientation=horizontal]) .nav-submenu.floating-popover::after{top:-12px;left:0;right:0;height:12px;width:100%}:host([orientation=horizontal]) .nav-submenu.floating-popover:not(.cascading)::before,:host([orientation=horizontal]) .nav-submenu.floating-popover.placement-bottom:not(.cascading)::before,:host([orientation=horizontal]) .nav-submenu.floating-popover.placement-top:not(.cascading)::before{content:"" !important;position:absolute !important;left:50% !important;right:auto !important;top:-6px !important;bottom:auto !important;width:12px !important;height:12px !important;transform:translateX(-50%) rotate(45deg) !important;background:var(--bg-primary, #1e293b) !important;border-top:1px solid rgba(255, 255, 255, 0.1) !important;border-right:1px solid rgba(255, 255, 255, 0.1) !important;border-left:none !important;border-bottom:none !important;z-index:-1 !important}:host([orientation=horizontal]) .nav-submenu.floating-popover.cascading::before{content:"" !important;position:absolute !important;left:-6px !important;right:auto !important;top:18px !important;bottom:auto !important;width:12px !important;height:12px !important;transform:rotate(45deg) !important;background:var(--bg-primary, #1e293b) !important;border-top:none !important;border-right:none !important;border-left:1px solid rgba(255, 255, 255, 0.1) !important;border-bottom:1px solid rgba(255, 255, 255, 0.1) !important;z-index:-1 !important}'}},[513,"ui-navigation-item",{item:[16],collapsed:[4],active:[4],activeId:[1,"active-id"],open:[4],animationDuration:[2,"animation-duration"],indentation:[514],forcePopover:[4,"force-popover"],orientation:[1],iconLibrary:[1,"icon-library"],isHovering:[32],popoverPlacement:[32]}]),s=p,m=function(){"undefined"!=typeof customElements&&["ui-navigation-item","ui-icon","ui-loader"].forEach((t=>{switch(t){case"ui-navigation-item":customElements.get(a(t))||customElements.define(a(t),p);break;case"ui-icon":customElements.get(a(t))||n();break;case"ui-loader":customElements.get(a(t))||r()}}))};export{s as UiNavigationItem,m as defineCustomElement}

package/dist/components/ui-number-input.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as e,createEvent as t,h as r,Host as n,transformTag as s}from"@stencil/core/internal/client";import{d as o,a}from"./badge.js";import{d as h}from"./icon.js";import{d as l}from"./input.js";const d=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.numberChange=t(this,"numberChange",7),this.numberInput=t(this,"numberInput",7),this.internals=this.attachInternals()}get el(){return this}internals;showTypeIcon=!1;prefixIcon="";name;value=0;min=-1/0;max=1/0;step=1;label="";placeholder="0";disabled=!1;readonly=!1;size="md";variant="default";prefixText="";suffixText="";helperText="";errorText="";precision=-1;showStepper=!1;stepperLayout="sides";scrollWheel=!0;fullWidth=!1;rtl=!1;inputValue="0";isFocused=!1;stepperInterval;numberChange;numberInput;componentWillLoad(){"plain"===this.variant&&(this.showStepper=!1),this.inputValue=this.format(this.value),this.internals.setFormValue(""+this.value)}valueChanged(i){this.inputValue=this.format(i),this.internals.setFormValue(""+i)}format(i){return this.precision>=0?i.toFixed(this.precision):i+""}clamp(i){return Math.min(this.max,Math.max(this.min,i))}increment=()=>{if(this.disabled||this.readonly)return;const i=this.clamp(this.value+this.step);this.value=i,this.numberChange.emit(i)};decrement=()=>{if(this.disabled||this.readonly)return;const i=this.clamp(this.value-this.step);this.value=i,this.numberChange.emit(i)};startStepping=i=>{if(this.disabled||this.readonly)return;const e="inc"===i?this.increment:this.decrement;e(),this.stepperInterval=setInterval(e,100)};stopStepping=()=>{clearInterval(this.stepperInterval)};handleInput=i=>{const e=i.detail;this.inputValue=e;const t=parseFloat(e);isNaN(t)||(this.value=t,this.numberInput.emit(t))};handleBlur=()=>{this.isFocused=!1;const i=parseFloat(this.inputValue);this.value=this.clamp(isNaN(i)?0:i),this.inputValue=this.format(this.value),this.numberChange.emit(this.value)};handleWheel=i=>{this.scrollWheel&&!this.disabled&&this.isFocused&&(i.preventDefault(),i.deltaY<0?this.increment():this.decrement())};handleKeyDown=i=>{"ArrowUp"===i.key&&(i.preventDefault(),this.increment()),"ArrowDown"===i.key&&(i.preventDefault(),this.decrement())};render(){const i=!!this.errorText,e="right"===this.stepperLayout;return r(n,{key:"34a35f828baa751fbaab05db0ea6d7e4eb42281e",class:{"full-width":this.fullWidth}},this.label&&r("label",{key:"756934f01225ddbdd8235fc9081177dedc004531",class:"ni-label"},this.label),r("div",{key:"822ac22167cb75cdcb16274d4a5fa95291875cc9",class:{"ni-wrapper":!0,["ni-"+this.size]:!0,"ni-error":i,"ni-disabled":this.disabled,"ni-focused":this.isFocused,"ni-right":e,"ni-rtl":this.rtl,"ni-plain":"plain"===this.variant},dir:this.rtl?"rtl":"ltr"},this.showStepper&&"sides"===this.stepperLayout&&r("ui-button",{key:"714881b359dfc953c8b6f93fb0295c0ae2f134ea",variant:"ghost",onMouseDown:()=>this.startStepping("dec"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("dec"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value<=this.min,tabIndex:-1,ariaLabel:"Decrease",icon:"minus",iconLibrary:"lucide",iconOnly:!0,size:"sm"===this.size||"xs"===this.size?"sm":"md"}),this.renderPrefix(),r("ui-input",{key:"b2d56228f500995d4f6fbd78c639e6383c36bd3e",class:"ni-input",type:"number",value:this.inputValue,min:this.min===-1/0?void 0:this.min,max:this.max===1/0?void 0:this.max,step:this.step,disabled:this.disabled,readonly:this.readonly,placeholder:this.placeholder,onInputChange:this.handleInput,onInputBlur:this.handleBlur,onFocusInternal:()=>this.isFocused=!0,onWheel:i=>this.handleWheel(i),onInputKeydown:i=>this.handleKeyDown(i.detail),fullWidth:!0,size:this.size,variant:"plain",showTypeIcon:!1}),this.renderSuffix(),this.showStepper&&e&&r("div",{key:"e400b4eea2656a85a5c5df3487ead9f45367100b",class:"ni-stacker"},r("ui-button",{key:"9cd89756bc4792dccc9657ca39b6d6cff2a9e819",variant:"ghost",onMouseDown:()=>this.startStepping("inc"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("inc"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value>=this.max,tabIndex:-1,ariaLabel:"Increase",icon:"chevron-up",iconLibrary:"lucide",iconOnly:!0,size:"xxs"}),r("ui-button",{key:"42248f0ccc65d42c903775f8e5fcbd97f76e04e7",variant:"ghost",onMouseDown:()=>this.startStepping("dec"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("dec"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value<=this.min,tabIndex:-1,ariaLabel:"Decrease",icon:"chevron-down",iconLibrary:"lucide",iconOnly:!0,size:"xxs"})),this.showStepper&&"sides"===this.stepperLayout&&r("ui-button",{key:"dbf5c5d29bf6945baaaa96a46915440088f2509f",variant:"ghost",onMouseDown:()=>this.startStepping("inc"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("inc"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value>=this.max,tabIndex:-1,ariaLabel:"Increase",icon:"plus",iconLibrary:"lucide",iconOnly:!0,size:"sm"===this.size||"xs"===this.size?"sm":"md"})),(this.helperText||this.errorText)&&r("div",{key:"f4f1e6ff10c5ddbbc4e49c7e2325e103537e9e08",class:{"ni-helper":!0,"ni-helper-error":i}},i?this.errorText:this.helperText))}renderPrefix(){const i=this.prefixText||this.prefixIcon,e=this.showTypeIcon&&!i;return i||e?r("span",{class:"ni-affix ni-prefix"},this.prefixText&&r("span",null,this.prefixText),(this.prefixIcon||e)&&r("ui-icon",{library:"lucide",name:this.prefixIcon||"hash",size:"14px"})):null}renderSuffix(){return this.suffixText?r("span",{class:"ni-affix ni-suffix"},this.suffixText):null}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit}:host.full-width{width:100%}:host.full-width .ni-wrapper{width:100%}.ni-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--ui-text-primary, var(--text-primary, #111827)));margin-bottom:8px;transition:color 0.2s ease}.ni-wrapper{display:inline-flex;align-items:center;border:1.5px solid var(--ui-border-default, var(--border-strong, #d1d5db));border-radius:10px;background:var(--ui-bg-var(--bg-primary, #ffffff), var(--bg-primary, #ffffff));transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05)}.ni-wrapper.ni-focused{border-color:var(--ui-color-primary, var(--color-primary, #10b981));box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12), 0 4px 12px rgba(0, 0, 0, 0.05)}.ni-wrapper.ni-focused .ni-label{color:var(--ui-color-primary, var(--color-primary, #10b981))}.ni-wrapper.ni-error{border-color:var(--ui-color-error, var(--color-danger, #ef4444))}.ni-wrapper.ni-error .ni-label{color:var(--ui-color-error, var(--color-danger, #ef4444))}.ni-wrapper.ni-error.ni-focused{box-shadow:0 0 0 4px rgba(var(--color-danger-rgb, 239, 68, 68), 0.12)}.ni-wrapper.ni-disabled{background:var(--ui-bg-muted, var(--bg-primary, #f9fafb));opacity:0.65;pointer-events:none;cursor:not-allowed}.ni-wrapper.ni-sm{height:32px;font-size:12px;border-radius:6px}.ni-wrapper.ni-md{height:40px;font-size:14px}.ni-wrapper.ni-lg{height:48px;font-size:16px;border-radius:12px}.ni-wrapper.ni-plain{border:none;background:transparent;box-shadow:none;height:auto;overflow:visible}.ni-wrapper.ni-plain.ni-focused{box-shadow:none}.ni-btn{display:flex;align-items:center;justify-content:center;width:36px;height:100%;border:none;background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151);font-size:18px;font-weight:600;cursor:pointer;transition:background 0.15s, color 0.15s;flex-shrink:0;line-height:1}.ni-btn:hover:not(:disabled){background:var(--bg-primary, #e5e7eb);color:var(--bg-primary, #111)}.ni-btn:active:not(:disabled){background:var(--bg-secondary, #d1d5db)}.ni-btn:disabled{opacity:0.4;cursor:not-allowed}.ni-btn.ni-dec{border-inline-end:1.5px solid var(--border-default, #e5e7eb)}.ni-btn.ni-inc{border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-stacker{display:flex;flex-direction:column;height:100%;border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-stacker .ni-btn{width:28px;height:50%;font-size:9px}.ni-stacker .ni-btn.ni-inc-sm{border-bottom:1px solid var(--border-default, #e5e7eb);border-radius:0}.ni-stacker .ni-btn.ni-dec-sm{border-radius:0}.ni-input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-size:inherit;color:var(--text-primary, #111827);text-align:center;padding:0 8px;appearance:textfield;-moz-appearance:textfield}.ni-input::-webkit-outer-spin-button,.ni-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ni-affix{padding:0 8px;color:var(--label-subtitle-color, var(--text-muted, #6b7280));font-size:13px;white-space:nowrap;background:var(--bg-primary, #f9fafb);height:100%;display:flex;align-items:center}.ni-affix.ni-prefix{border-inline-end:1.5px solid var(--border-default, #e5e7eb)}.ni-affix.ni-suffix{border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-helper{font-size:12px;margin-top:5px;color:var(--label-subtitle-color, var(--text-muted, #6b7280))}.ni-helper.ni-helper-error{color:var(--color-danger, #ef4444)}"}},[577,"ui-number-input",{showTypeIcon:[4,"show-type-icon"],prefixIcon:[1,"prefix-icon"],name:[1],value:[1026],min:[2],max:[2],step:[2],label:[1],placeholder:[1],disabled:[4],readonly:[4],size:[1],variant:[1],prefixText:[1,"prefix-text"],suffixText:[1,"suffix-text"],helperText:[1,"helper-text"],errorText:[1,"error-text"],precision:[2],showStepper:[1028,"show-stepper"],stepperLayout:[1,"stepper-layout"],scrollWheel:[4,"scroll-wheel"],fullWidth:[4,"full-width"],rtl:[4],inputValue:[32],isFocused:[32]},void 0,{value:[{valueChanged:0}]}]),p=d,c=function(){"undefined"!=typeof customElements&&["ui-number-input","ui-badge","ui-button","ui-icon","ui-input"].forEach((i=>{switch(i){case"ui-number-input":customElements.get(s(i))||customElements.define(s(i),d);break;case"ui-badge":customElements.get(s(i))||a();break;case"ui-button":customElements.get(s(i))||o();break;case"ui-icon":customElements.get(s(i))||h();break;case"ui-input":customElements.get(s(i))||l()}}))};export{p as UiNumberInput,c as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as e,createEvent as t,h as r,Host as n,transformTag as s}from"@stencil/core/internal/client";import{d as o,a}from"./badge.js";import{d as h}from"./icon.js";import{d as l}from"./input.js";import{d}from"./loader.js";const p=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.numberChange=t(this,"numberChange",7),this.numberInput=t(this,"numberInput",7),this.internals=this.attachInternals()}get el(){return this}internals;showTypeIcon=!1;prefixIcon="";name;value=0;min=-1/0;max=1/0;step=1;label="";placeholder="0";disabled=!1;readonly=!1;size="md";variant="default";prefixText="";suffixText="";helperText="";errorText="";precision=-1;showStepper=!1;stepperLayout="sides";scrollWheel=!0;fullWidth=!1;rtl=!1;inputValue="0";isFocused=!1;stepperInterval;numberChange;numberInput;componentWillLoad(){"plain"===this.variant&&(this.showStepper=!1),this.inputValue=this.format(this.value),this.internals.setFormValue(""+this.value)}valueChanged(i){this.inputValue=this.format(i),this.internals.setFormValue(""+i)}format(i){return this.precision>=0?i.toFixed(this.precision):i+""}clamp(i){return Math.min(this.max,Math.max(this.min,i))}increment=()=>{if(this.disabled||this.readonly)return;const i=this.clamp(this.value+this.step);this.value=i,this.numberChange.emit(i)};decrement=()=>{if(this.disabled||this.readonly)return;const i=this.clamp(this.value-this.step);this.value=i,this.numberChange.emit(i)};startStepping=i=>{if(this.disabled||this.readonly)return;const e="inc"===i?this.increment:this.decrement;e(),this.stepperInterval=setInterval(e,100)};stopStepping=()=>{clearInterval(this.stepperInterval)};handleInput=i=>{const e=i.detail;this.inputValue=e;const t=parseFloat(e);isNaN(t)||(this.value=t,this.numberInput.emit(t))};handleBlur=()=>{this.isFocused=!1;const i=parseFloat(this.inputValue);this.value=this.clamp(isNaN(i)?0:i),this.inputValue=this.format(this.value),this.numberChange.emit(this.value)};handleWheel=i=>{this.scrollWheel&&!this.disabled&&this.isFocused&&(i.preventDefault(),i.deltaY<0?this.increment():this.decrement())};handleKeyDown=i=>{"ArrowUp"===i.key&&(i.preventDefault(),this.increment()),"ArrowDown"===i.key&&(i.preventDefault(),this.decrement())};render(){const i=!!this.errorText,e="right"===this.stepperLayout;return r(n,{key:"34a35f828baa751fbaab05db0ea6d7e4eb42281e",class:{"full-width":this.fullWidth}},this.label&&r("label",{key:"756934f01225ddbdd8235fc9081177dedc004531",class:"ni-label"},this.label),r("div",{key:"822ac22167cb75cdcb16274d4a5fa95291875cc9",class:{"ni-wrapper":!0,["ni-"+this.size]:!0,"ni-error":i,"ni-disabled":this.disabled,"ni-focused":this.isFocused,"ni-right":e,"ni-rtl":this.rtl,"ni-plain":"plain"===this.variant},dir:this.rtl?"rtl":"ltr"},this.showStepper&&"sides"===this.stepperLayout&&r("ui-button",{key:"714881b359dfc953c8b6f93fb0295c0ae2f134ea",variant:"ghost",onMouseDown:()=>this.startStepping("dec"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("dec"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value<=this.min,tabIndex:-1,ariaLabel:"Decrease",icon:"minus",iconLibrary:"lucide",iconOnly:!0,size:"sm"===this.size||"xs"===this.size?"sm":"md"}),this.renderPrefix(),r("ui-input",{key:"b2d56228f500995d4f6fbd78c639e6383c36bd3e",class:"ni-input",type:"number",value:this.inputValue,min:this.min===-1/0?void 0:this.min,max:this.max===1/0?void 0:this.max,step:this.step,disabled:this.disabled,readonly:this.readonly,placeholder:this.placeholder,onInputChange:this.handleInput,onInputBlur:this.handleBlur,onFocusInternal:()=>this.isFocused=!0,onWheel:i=>this.handleWheel(i),onInputKeydown:i=>this.handleKeyDown(i.detail),fullWidth:!0,size:this.size,variant:"plain",showTypeIcon:!1}),this.renderSuffix(),this.showStepper&&e&&r("div",{key:"e400b4eea2656a85a5c5df3487ead9f45367100b",class:"ni-stacker"},r("ui-button",{key:"9cd89756bc4792dccc9657ca39b6d6cff2a9e819",variant:"ghost",onMouseDown:()=>this.startStepping("inc"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("inc"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value>=this.max,tabIndex:-1,ariaLabel:"Increase",icon:"chevron-up",iconLibrary:"lucide",iconOnly:!0,size:"xxs"}),r("ui-button",{key:"42248f0ccc65d42c903775f8e5fcbd97f76e04e7",variant:"ghost",onMouseDown:()=>this.startStepping("dec"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("dec"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value<=this.min,tabIndex:-1,ariaLabel:"Decrease",icon:"chevron-down",iconLibrary:"lucide",iconOnly:!0,size:"xxs"})),this.showStepper&&"sides"===this.stepperLayout&&r("ui-button",{key:"dbf5c5d29bf6945baaaa96a46915440088f2509f",variant:"ghost",onMouseDown:()=>this.startStepping("inc"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("inc"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value>=this.max,tabIndex:-1,ariaLabel:"Increase",icon:"plus",iconLibrary:"lucide",iconOnly:!0,size:"sm"===this.size||"xs"===this.size?"sm":"md"})),(this.helperText||this.errorText)&&r("div",{key:"f4f1e6ff10c5ddbbc4e49c7e2325e103537e9e08",class:{"ni-helper":!0,"ni-helper-error":i}},i?this.errorText:this.helperText))}renderPrefix(){const i=this.prefixText||this.prefixIcon,e=this.showTypeIcon&&!i;return i||e?r("span",{class:"ni-affix ni-prefix"},this.prefixText&&r("span",null,this.prefixText),(this.prefixIcon||e)&&r("ui-icon",{library:"lucide",name:this.prefixIcon||"hash",size:"14px"})):null}renderSuffix(){return this.suffixText?r("span",{class:"ni-affix ni-suffix"},this.suffixText):null}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit}:host.full-width{width:100%}:host.full-width .ni-wrapper{width:100%}.ni-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--ui-text-primary, var(--text-primary, #111827)));margin-bottom:8px;transition:color 0.2s ease}.ni-wrapper{display:inline-flex;align-items:center;border:1.5px solid var(--ui-border-default, var(--border-strong, #d1d5db));border-radius:10px;background:var(--ui-bg-var(--bg-primary, #ffffff), var(--bg-primary, #ffffff));transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05)}.ni-wrapper.ni-focused{border-color:var(--ui-color-primary, var(--color-primary, #10b981));box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12), 0 4px 12px rgba(0, 0, 0, 0.05)}.ni-wrapper.ni-focused .ni-label{color:var(--ui-color-primary, var(--color-primary, #10b981))}.ni-wrapper.ni-error{border-color:var(--ui-color-error, var(--color-danger, #ef4444))}.ni-wrapper.ni-error .ni-label{color:var(--ui-color-error, var(--color-danger, #ef4444))}.ni-wrapper.ni-error.ni-focused{box-shadow:0 0 0 4px rgba(var(--color-danger-rgb, 239, 68, 68), 0.12)}.ni-wrapper.ni-disabled{background:var(--ui-bg-muted, var(--bg-primary, #f9fafb));opacity:0.65;pointer-events:none;cursor:not-allowed}.ni-wrapper.ni-sm{height:32px;font-size:12px;border-radius:6px}.ni-wrapper.ni-md{height:40px;font-size:14px}.ni-wrapper.ni-lg{height:48px;font-size:16px;border-radius:12px}.ni-wrapper.ni-plain{border:none;background:transparent;box-shadow:none;height:auto;overflow:visible}.ni-wrapper.ni-plain.ni-focused{box-shadow:none}.ni-btn{display:flex;align-items:center;justify-content:center;width:36px;height:100%;border:none;background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151);font-size:18px;font-weight:600;cursor:pointer;transition:background 0.15s, color 0.15s;flex-shrink:0;line-height:1}.ni-btn:hover:not(:disabled){background:var(--bg-primary, #e5e7eb);color:var(--bg-primary, #111)}.ni-btn:active:not(:disabled){background:var(--bg-secondary, #d1d5db)}.ni-btn:disabled{opacity:0.4;cursor:not-allowed}.ni-btn.ni-dec{border-inline-end:1.5px solid var(--border-default, #e5e7eb)}.ni-btn.ni-inc{border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-stacker{display:flex;flex-direction:column;height:100%;border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-stacker .ni-btn{width:28px;height:50%;font-size:9px}.ni-stacker .ni-btn.ni-inc-sm{border-bottom:1px solid var(--border-default, #e5e7eb);border-radius:0}.ni-stacker .ni-btn.ni-dec-sm{border-radius:0}.ni-input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-size:inherit;color:var(--text-primary, #111827);text-align:center;padding:0 8px;appearance:textfield;-moz-appearance:textfield}.ni-input::-webkit-outer-spin-button,.ni-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ni-affix{padding:0 8px;color:var(--label-subtitle-color, var(--text-muted, #6b7280));font-size:13px;white-space:nowrap;background:var(--bg-primary, #f9fafb);height:100%;display:flex;align-items:center}.ni-affix.ni-prefix{border-inline-end:1.5px solid var(--border-default, #e5e7eb)}.ni-affix.ni-suffix{border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-helper{font-size:12px;margin-top:5px;color:var(--label-subtitle-color, var(--text-muted, #6b7280))}.ni-helper.ni-helper-error{color:var(--color-danger, #ef4444)}"}},[577,"ui-number-input",{showTypeIcon:[4,"show-type-icon"],prefixIcon:[1,"prefix-icon"],name:[1],value:[1026],min:[2],max:[2],step:[2],label:[1],placeholder:[1],disabled:[4],readonly:[4],size:[1],variant:[1],prefixText:[1,"prefix-text"],suffixText:[1,"suffix-text"],helperText:[1,"helper-text"],errorText:[1,"error-text"],precision:[2],showStepper:[1028,"show-stepper"],stepperLayout:[1,"stepper-layout"],scrollWheel:[4,"scroll-wheel"],fullWidth:[4,"full-width"],rtl:[4],inputValue:[32],isFocused:[32]},void 0,{value:[{valueChanged:0}]}]),c=p,u=function(){"undefined"!=typeof customElements&&["ui-number-input","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((i=>{switch(i){case"ui-number-input":customElements.get(s(i))||customElements.define(s(i),p);break;case"ui-badge":customElements.get(s(i))||a();break;case"ui-button":customElements.get(s(i))||o();break;case"ui-icon":customElements.get(s(i))||h();break;case"ui-input":customElements.get(s(i))||l();break;case"ui-loader":customElements.get(s(i))||d()}}))};export{c as UiNumberInput,u as defineCustomElement}

package/dist/components/ui-otp-input.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as r,Fragment as o,transformTag as s}from"@stencil/core/internal/client";import{d as a,a as n}from"./badge.js";import{d as l}from"./icon.js";import{d as p}from"./input.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.otpChange=i(this,"otpChange",7),this.otpComplete=i(this,"otpComplete",7),this.otpSubmit=i(this,"otpSubmit",7),this.resendClick=i(this,"resendClick",7)}get el(){return this}length=6;value="";label="";helperText="";errorText="";disabled=!1;readonly=!1;required=!1;type="number";autoFocus=!0;secure=!1;size="md";color="primary";variant="default";invalid=!1;skeleton=!1;autoSubmit=!1;groupSize=0;placeholder="";rtl=!1;resendInterval=60;resendLabel="Resend Code";otpValues=[];focusedIndex=-1;internalInvalid=!1;internalErrorText="";resendTimer=0;resendIntervalId;otpChange;otpComplete;otpSubmit;resendClick;inputRefs=[];componentWillLoad(){if(this.otpValues=Array(this.length).fill(""),this.value){const t=this.value.split("").slice(0,this.length);this.otpValues=[...t,...Array(this.length-t.length).fill("")]}}startResendTimer(){this.resendTimer=this.resendInterval,this.resendIntervalId=setInterval((()=>{this.resendTimer>0?this.resendTimer--:clearInterval(this.resendIntervalId)}),1e3)}handleResend=()=>{this.resendTimer>0||(this.resendClick.emit(),this.startResendTimer())};disconnectedCallback(){this.resendIntervalId&&clearInterval(this.resendIntervalId)}componentDidLoad(){this.autoFocus&&this.inputRefs[0]&&this.inputRefs[0].focus()}handleValueChange(t){if(t===this.otpValues.join(""))return;const e=t.split("").slice(0,this.length);this.otpValues=[...e,...Array(this.length-e.length).fill("")]}handleInput=(t,e)=>{let i=t.detail;if(i.length>1&&(i=i.slice(-1)),("number"===this.type||"numeric"===this.type)&&i&&!/^\d$/.test(i))return void this.showTemporaryError("Only numbers allowed");if("alphanumeric"===this.type&&i&&!/^[a-zA-Z0-9]$/.test(i))return void this.showTemporaryError("Only letters and numbers allowed");this.internalInvalid=!1,this.internalErrorText="",this.otpValues[e]=i,this.otpValues=[...this.otpValues];const r=this.otpValues.join("");this.value=r;const o=r.length===this.length&&!r.includes("");this.otpChange.emit({value:r,complete:o}),o&&(this.otpComplete.emit({value:r}),this.autoSubmit&&this.handleSubmit()),i&&e<this.length-1&&this.inputRefs[e+1]?.focus()};handleSubmit=()=>{this.otpSubmit.emit({value:this.value})};handleKeyDown=(t,e)=>{if("Backspace"===t.key){if(!this.otpValues[e]&&e>0){this.otpValues[e-1]="",this.otpValues=[...this.otpValues],this.inputRefs[e-1]?.focus();const t=this.otpValues.join("");this.value=t,this.otpChange.emit({value:t,complete:!1})}}else"ArrowLeft"===t.key&&e>0?this.rtl?e<this.length-1&&this.inputRefs[e+1]?.focus():this.inputRefs[e-1]?.focus():"ArrowRight"===t.key&&e<this.length-1&&(this.rtl?this.inputRefs[e-1]?.focus():this.inputRefs[e+1]?.focus())};handlePaste=t=>{t.preventDefault();const e=t.clipboardData.getData("text").split("").slice(0,this.length);if(("number"===this.type||"numeric"===this.type)&&!/^\d+$/.test(e.join("")))return void this.showTemporaryError("Only numbers allowed");if("alphanumeric"===this.type&&!/^[a-zA-Z0-9]+$/.test(e.join("")))return void this.showTemporaryError("Only letters and numbers allowed");this.internalInvalid=!1,this.internalErrorText="",this.otpValues=[...e,...Array(this.length-e.length).fill("")];const i=this.otpValues.join("");this.value=i;const r=i.length===this.length;this.otpChange.emit({value:i,complete:r}),r?(this.otpComplete.emit({value:i}),this.inputRefs[this.length-1]?.focus()):this.inputRefs[e.length]?.focus()};errorTimeout;showTemporaryError(t){this.internalInvalid=!0,this.internalErrorText=t,this.errorTimeout&&clearTimeout(this.errorTimeout),this.errorTimeout=setTimeout((()=>{this.internalInvalid=!1,this.internalErrorText=""}),2e3)}handleFocus=t=>{this.focusedIndex!==t&&(this.focusedIndex=t,this.inputRefs[t]?.select())};handleBlur=()=>{this.focusedIndex=-1};clear(){this.otpValues=Array(this.length).fill(""),this.value="",this.otpChange.emit({value:"",complete:!1}),this.inputRefs[0]?.focus()}focus(){this.inputRefs[0]?.focus()}render(){const t=this.invalid||this.internalInvalid,e=this.internalErrorText||this.errorText;return r("div",{key:"8fe5324ea7e186d84beea09373bf235f93921708",class:{"otp-input":!0,["otp-input-"+this.size]:!0,["otp-input-"+this.color]:!0,["otp-input-"+this.variant]:!0,"otp-input-disabled":this.disabled,"otp-input-readonly":this.readonly,"otp-input-invalid":t,"otp-input-skeleton":this.skeleton},dir:this.rtl?"rtl":"ltr"},this.label&&r("label",{key:"baa571a85ef85c818b191b46160b42a50b465585",class:"otp-label"},this.label),r("div",{key:"48cb77b47f529d79d9ffcc84af84307f1ecc8a1a",class:"otp-inputs-container"},this.otpValues.map(((t,e)=>{const i=this.groupSize>0&&(e+1)%this.groupSize==0&&e!==this.length-1;return r(o,null,r("ui-input",{ref:t=>this.inputRefs[e]=t,type:this.secure?"password":"text",inputMode:"number"===this.type||"numeric"===this.type?"numeric":"text",pattern:"number"===this.type||"numeric"===this.type?"[0-9]*":void 0,maxLength:1,class:{"otp-input-field":!0,focused:this.focusedIndex===e,filled:!!t},value:t,placeholder:this.placeholder,disabled:this.disabled||this.skeleton,readonly:this.readonly,onInputChange:t=>this.handleInput(t,e),onInputKeydown:t=>this.handleKeyDown(t.detail,e),onPasteInternal:t=>0===e?this.handlePaste(t.detail):t.detail.preventDefault(),onFocusInternal:()=>this.handleFocus(e),onInputBlur:this.handleBlur,ariaLabel:"Digit "+(e+1),size:this.size,align:"center"}),i&&r("div",{class:"otp-divider"}))}))),t&&e&&r("div",{key:"eb635e42e20010b8ca86e84ea3f3a7d9c077a5fa",class:"error-text"},r("ui-icon",{key:"50163f7f1957e40f76d80c4b93548b0cf308b3bf",name:"exclamation-circle",library:"fontawesome"}),e),!t&&this.helperText&&r("div",{key:"0665d1b8ed1e46af72017732bcf59fa4b2ad1e14",class:"helper-text"},this.helperText),r("div",{key:"2d6a7e0c414b396e6a859ebcc5adbd5838cdabf5",class:"otp-resend-container"},r("ui-button",{key:"8f93b95638c39ce06cd1b5bf55172ca3b4045580",variant:"ghost",size:"sm",onClick:this.handleResend,disabled:this.resendTimer>0||this.disabled,label:`${this.resendLabel} ${this.resendTimer>0?`(${this.resendTimer}s)`:""}`})))}static get watchers(){return{value:[{handleValueChange:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.otp-input{display:flex;flex-direction:column;gap:12px}.otp-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-primary, #333));margin-bottom:8px}.otp-inputs-container{display:flex;gap:8px;justify-content:center;align-items:center}.otp-divider{width:12px;height:2px;background:var(--border-color, #e0e0e0);margin-inline-start:4px;margin-inline-end:4px}.otp-input-field{width:48px;height:56px;text-align:center;font-size:24px;font-weight:600;border:2px solid var(--border-color, #e0e0e0);border-radius:8px;background:var(--surface-color, var(--bg-primary, #ffffff));outline:none;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);caret-color:var(--primary-color, var(--color-success, #3dcd58))}.otp-input-field:hover:not(:disabled){border-color:var(--border-hover, #bbb)}.otp-input-field:focus,.otp-input-field.focused{border-color:var(--primary-color, var(--color-success, #3dcd58));box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 61, 205, 88), 0.15);transform:translateY(-2px)}.otp-input-field.filled{border-color:var(--primary-color, var(--color-success, #3dcd58));background:var(--primary-color-light, rgba(var(--color-success-rgb, 61, 205, 88), 0.05))}.otp-input-field:disabled{background:var(--background-secondary, #f5f5f5);cursor:not-allowed;opacity:0.6}.otp-input-sm .otp-input-field{width:40px;height:48px;font-size:20px}.otp-input-lg .otp-input-field{width:56px;height:64px;font-size:28px}.otp-input-secondary .otp-input-field:focus{border-color:var(--color-primary, #6b7280);box-shadow:0 0 0 3px rgba(107, 114, 128, 0.15)}.otp-input-success .otp-input-field:focus{border-color:var(--color-success, #16a34a);box-shadow:0 0 0 3px rgba(22, 163, 74, 0.15)}.otp-input-danger .otp-input-field:focus{border-color:var(--color-danger-hover, #dc2626);box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 220, 38, 38), 0.15)}.otp-input-warning .otp-input-field:focus{border-color:var(--color-warning, #f59e0b);box-shadow:0 0 0 3px rgba(var(--color-warning-rgb, 245, 158, 11), 0.15)}.otp-input-info .otp-input-field:focus{border-color:var(--color-info-hover, #0891b2);box-shadow:0 0 0 3px rgba(8, 145, 178, 0.15)}.otp-input-underlined .otp-input-field{border:none;border-bottom:2px solid var(--border-color);border-radius:0;background:transparent}.otp-input-underlined .otp-input-field:focus{transform:none;border-bottom-color:var(--primary-color);box-shadow:none}.otp-input-flushed .otp-input-field{border:none;background:var(--background-secondary, var(--bg-secondary, #f3f4f6));border-radius:12px}.otp-input-flushed .otp-input-field:focus{background:var(--surface-color);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.otp-input-separated .otp-input-field{margin-inline-start:4px;margin-inline-end:4px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);border-radius:12px}.otp-input-invalid{animation:otp-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.otp-input-invalid .otp-input-field{border-color:var(--danger-color, #f44336) !important}.otp-input-invalid .otp-input-field:focus{box-shadow:0 0 0 3px rgba(244, 67, 54, 0.15)}.error-text{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--danger-color, #f44336)}.error-text i{font-size:14px}.helper-text{font-size:12px;color:var(--label-subtitle-color, var(--text-secondary, #666));text-align:center}.otp-input-skeleton{pointer-events:none}.otp-input-skeleton .otp-input-field{background:linear-gradient(90deg, var(--bg-secondary, #f3f4f6) 25%, var(--bg-primary, #e5e7eb) 50%, var(--bg-secondary, #f3f4f6) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite linear;border-color:transparent}.otp-input-skeleton .otp-label{width:80px;height:14px;background:var(--bg-primary, #e5e7eb);border-radius:4px;margin-bottom:8px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes otp-shake{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}@keyframes fillPulse{0%{transform:scale(1)}50%{transform:scale(1.1);box-shadow:0 0 15px rgba(var(--color-success-rgb, 61, 205, 88), 0.3)}100%{transform:scale(1)}}.otp-input-field.filled{animation:fillPulse 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}"}},[513,"ui-otp-input",{length:[2],value:[1025],label:[1],helperText:[1,"helper-text"],errorText:[1,"error-text"],disabled:[4],readonly:[4],required:[4],type:[1],autoFocus:[4,"auto-focus"],secure:[4],size:[1],color:[1],variant:[1],invalid:[4],skeleton:[4],autoSubmit:[4,"auto-submit"],groupSize:[2,"group-size"],placeholder:[1],rtl:[4],resendInterval:[2,"resend-interval"],resendLabel:[1,"resend-label"],otpValues:[32],focusedIndex:[32],internalInvalid:[32],internalErrorText:[32],resendTimer:[32]},void 0,{value:[{handleValueChange:0}]}]),c=d,h=function(){"undefined"!=typeof customElements&&["ui-otp-input","ui-badge","ui-button","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-otp-input":customElements.get(s(t))||customElements.define(s(t),d);break;case"ui-badge":customElements.get(s(t))||n();break;case"ui-button":customElements.get(s(t))||a();break;case"ui-icon":customElements.get(s(t))||l();break;case"ui-input":customElements.get(s(t))||p()}}))};export{c as UiOtpInput,h as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as r,Fragment as o,transformTag as s}from"@stencil/core/internal/client";import{d as a,a as n}from"./badge.js";import{d as l}from"./icon.js";import{d as p}from"./input.js";import{d}from"./loader.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.otpChange=i(this,"otpChange",7),this.otpComplete=i(this,"otpComplete",7),this.otpSubmit=i(this,"otpSubmit",7),this.resendClick=i(this,"resendClick",7)}get el(){return this}length=6;value="";label="";helperText="";errorText="";disabled=!1;readonly=!1;required=!1;type="number";autoFocus=!0;secure=!1;size="md";color="primary";variant="default";invalid=!1;skeleton=!1;autoSubmit=!1;groupSize=0;placeholder="";rtl=!1;resendInterval=60;resendLabel="Resend Code";otpValues=[];focusedIndex=-1;internalInvalid=!1;internalErrorText="";resendTimer=0;resendIntervalId;otpChange;otpComplete;otpSubmit;resendClick;inputRefs=[];componentWillLoad(){if(this.otpValues=Array(this.length).fill(""),this.value){const t=this.value.split("").slice(0,this.length);this.otpValues=[...t,...Array(this.length-t.length).fill("")]}}startResendTimer(){this.resendTimer=this.resendInterval,this.resendIntervalId=setInterval((()=>{this.resendTimer>0?this.resendTimer--:clearInterval(this.resendIntervalId)}),1e3)}handleResend=()=>{this.resendTimer>0||(this.resendClick.emit(),this.startResendTimer())};disconnectedCallback(){this.resendIntervalId&&clearInterval(this.resendIntervalId)}componentDidLoad(){this.autoFocus&&this.inputRefs[0]&&this.inputRefs[0].focus()}handleValueChange(t){if(t===this.otpValues.join(""))return;const e=t.split("").slice(0,this.length);this.otpValues=[...e,...Array(this.length-e.length).fill("")]}handleInput=(t,e)=>{let i=t.detail;if(i.length>1&&(i=i.slice(-1)),("number"===this.type||"numeric"===this.type)&&i&&!/^\d$/.test(i))return void this.showTemporaryError("Only numbers allowed");if("alphanumeric"===this.type&&i&&!/^[a-zA-Z0-9]$/.test(i))return void this.showTemporaryError("Only letters and numbers allowed");this.internalInvalid=!1,this.internalErrorText="",this.otpValues[e]=i,this.otpValues=[...this.otpValues];const r=this.otpValues.join("");this.value=r;const o=r.length===this.length&&!r.includes("");this.otpChange.emit({value:r,complete:o}),o&&(this.otpComplete.emit({value:r}),this.autoSubmit&&this.handleSubmit()),i&&e<this.length-1&&this.inputRefs[e+1]?.focus()};handleSubmit=()=>{this.otpSubmit.emit({value:this.value})};handleKeyDown=(t,e)=>{if("Backspace"===t.key){if(!this.otpValues[e]&&e>0){this.otpValues[e-1]="",this.otpValues=[...this.otpValues],this.inputRefs[e-1]?.focus();const t=this.otpValues.join("");this.value=t,this.otpChange.emit({value:t,complete:!1})}}else"ArrowLeft"===t.key&&e>0?this.rtl?e<this.length-1&&this.inputRefs[e+1]?.focus():this.inputRefs[e-1]?.focus():"ArrowRight"===t.key&&e<this.length-1&&(this.rtl?this.inputRefs[e-1]?.focus():this.inputRefs[e+1]?.focus())};handlePaste=t=>{t.preventDefault();const e=t.clipboardData.getData("text").split("").slice(0,this.length);if(("number"===this.type||"numeric"===this.type)&&!/^\d+$/.test(e.join("")))return void this.showTemporaryError("Only numbers allowed");if("alphanumeric"===this.type&&!/^[a-zA-Z0-9]+$/.test(e.join("")))return void this.showTemporaryError("Only letters and numbers allowed");this.internalInvalid=!1,this.internalErrorText="",this.otpValues=[...e,...Array(this.length-e.length).fill("")];const i=this.otpValues.join("");this.value=i;const r=i.length===this.length;this.otpChange.emit({value:i,complete:r}),r?(this.otpComplete.emit({value:i}),this.inputRefs[this.length-1]?.focus()):this.inputRefs[e.length]?.focus()};errorTimeout;showTemporaryError(t){this.internalInvalid=!0,this.internalErrorText=t,this.errorTimeout&&clearTimeout(this.errorTimeout),this.errorTimeout=setTimeout((()=>{this.internalInvalid=!1,this.internalErrorText=""}),2e3)}handleFocus=t=>{this.focusedIndex!==t&&(this.focusedIndex=t,this.inputRefs[t]?.select())};handleBlur=()=>{this.focusedIndex=-1};clear(){this.otpValues=Array(this.length).fill(""),this.value="",this.otpChange.emit({value:"",complete:!1}),this.inputRefs[0]?.focus()}focus(){this.inputRefs[0]?.focus()}render(){const t=this.invalid||this.internalInvalid,e=this.internalErrorText||this.errorText;return r("div",{key:"0a0a9c52b8714d1f057b2957f0ebcc78a8579d5f",class:{"otp-input":!0,["otp-input-"+this.size]:!0,["otp-input-"+this.color]:!0,["otp-input-"+this.variant]:!0,"otp-input-disabled":this.disabled,"otp-input-readonly":this.readonly,"otp-input-invalid":t,"otp-input-skeleton":this.skeleton},dir:this.rtl?"rtl":"ltr"},this.label&&r("label",{key:"46fb358d236e21367170beee13b0fa63c7bb045c",class:"otp-label"},this.label),r("div",{key:"4c768be697520bbb7b9be1f481efa5aeea85aa5f",class:"otp-inputs-container"},this.otpValues.map(((t,e)=>{const i=this.groupSize>0&&(e+1)%this.groupSize==0&&e!==this.length-1;return r(o,null,r("ui-input",{ref:t=>this.inputRefs[e]=t,type:this.secure?"password":"text",inputMode:"number"===this.type||"numeric"===this.type?"numeric":"text",pattern:"number"===this.type||"numeric"===this.type?"[0-9]*":void 0,maxLength:1,class:{"otp-input-field":!0,focused:this.focusedIndex===e,filled:!!t},value:t,placeholder:this.placeholder,disabled:this.disabled||this.skeleton,readonly:this.readonly,onInputChange:t=>this.handleInput(t,e),onInputKeydown:t=>this.handleKeyDown(t.detail,e),onPasteInternal:t=>0===e?this.handlePaste(t.detail):t.detail.preventDefault(),onFocusInternal:()=>this.handleFocus(e),onInputBlur:this.handleBlur,ariaLabel:"Digit "+(e+1),size:this.size,align:"center"}),i&&r("div",{class:"otp-divider"}))}))),t&&e&&r("div",{key:"c5349d5e5e04c6f238e8d2e826684d1a47464385",class:"error-text"},r("ui-icon",{key:"440b6a35be56cb372799676c24436cb8655fe8e7",name:"exclamation-circle",library:"fontawesome"}),e),!t&&this.helperText&&r("div",{key:"9e8357a1bc20e41ae07a2cb14b8f88c1b6c73b9f",class:"helper-text"},this.helperText),r("div",{key:"11f5ed36239872e672e9626ad8713a603a7a50fe",class:"otp-resend-container"},r("ui-button",{key:"bb46ef1c84eafc63a5a8ed507972f7c33646544d",variant:"ghost",size:"sm",onClick:this.handleResend,disabled:this.resendTimer>0||this.disabled,label:`${this.resendLabel} ${this.resendTimer>0?`(${this.resendTimer}s)`:""}`})))}static get watchers(){return{value:[{handleValueChange:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.otp-input{display:flex;flex-direction:column;gap:12px}.otp-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-primary, #333));margin-bottom:8px}.otp-inputs-container{display:flex;gap:8px;justify-content:center;align-items:center}.otp-divider{width:12px;height:2px;background:var(--border-color, #e0e0e0);margin-inline-start:4px;margin-inline-end:4px}.otp-input-field{width:48px;height:56px;text-align:center;font-size:24px;font-weight:600;border:2px solid var(--border-color, #e0e0e0);border-radius:8px;background:var(--surface-color, var(--bg-primary, #ffffff));outline:none;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);caret-color:var(--primary-color, var(--color-success, #3dcd58))}.otp-input-field:hover:not(:disabled){border-color:var(--border-hover, #bbb)}.otp-input-field:focus,.otp-input-field.focused{border-color:var(--primary-color, var(--color-success, #3dcd58));box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 61, 205, 88), 0.15);transform:translateY(-2px)}.otp-input-field.filled{border-color:var(--primary-color, var(--color-success, #3dcd58));background:var(--primary-color-light, rgba(var(--color-success-rgb, 61, 205, 88), 0.05))}.otp-input-field:disabled{background:var(--background-secondary, #f5f5f5);cursor:not-allowed;opacity:0.6}.otp-input-sm .otp-input-field{width:40px;height:48px;font-size:20px}.otp-input-lg .otp-input-field{width:56px;height:64px;font-size:28px}.otp-input-secondary .otp-input-field:focus{border-color:var(--color-primary, #6b7280);box-shadow:0 0 0 3px rgba(107, 114, 128, 0.15)}.otp-input-success .otp-input-field:focus{border-color:var(--color-success, #16a34a);box-shadow:0 0 0 3px rgba(22, 163, 74, 0.15)}.otp-input-danger .otp-input-field:focus{border-color:var(--color-danger-hover, #dc2626);box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 220, 38, 38), 0.15)}.otp-input-warning .otp-input-field:focus{border-color:var(--color-warning, #f59e0b);box-shadow:0 0 0 3px rgba(var(--color-warning-rgb, 245, 158, 11), 0.15)}.otp-input-info .otp-input-field:focus{border-color:var(--color-info-hover, #0891b2);box-shadow:0 0 0 3px rgba(8, 145, 178, 0.15)}.otp-input-underlined .otp-input-field{border:none;border-bottom:2px solid var(--border-color);border-radius:0;background:transparent}.otp-input-underlined .otp-input-field:focus{transform:none;border-bottom-color:var(--primary-color);box-shadow:none}.otp-input-flushed .otp-input-field{border:none;background:var(--background-secondary, var(--bg-secondary, #f3f4f6));border-radius:12px}.otp-input-flushed .otp-input-field:focus{background:var(--surface-color);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.otp-input-separated .otp-input-field{margin-inline-start:4px;margin-inline-end:4px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);border-radius:12px}.otp-input-invalid{animation:otp-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.otp-input-invalid .otp-input-field{border-color:var(--danger-color, #f44336) !important}.otp-input-invalid .otp-input-field:focus{box-shadow:0 0 0 3px rgba(244, 67, 54, 0.15)}.error-text{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--danger-color, #f44336)}.error-text i{font-size:14px}.helper-text{font-size:12px;color:var(--label-subtitle-color, var(--text-secondary, #666));text-align:center}.otp-input-skeleton{pointer-events:none}.otp-input-skeleton .otp-input-field{background:linear-gradient(90deg, var(--bg-secondary, #f3f4f6) 25%, var(--bg-primary, #e5e7eb) 50%, var(--bg-secondary, #f3f4f6) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite linear;border-color:transparent}.otp-input-skeleton .otp-label{width:80px;height:14px;background:var(--bg-primary, #e5e7eb);border-radius:4px;margin-bottom:8px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes otp-shake{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}@keyframes fillPulse{0%{transform:scale(1)}50%{transform:scale(1.1);box-shadow:0 0 15px rgba(var(--color-success-rgb, 61, 205, 88), 0.3)}100%{transform:scale(1)}}.otp-input-field.filled{animation:fillPulse 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}"}},[513,"ui-otp-input",{length:[2],value:[1025],label:[1],helperText:[1,"helper-text"],errorText:[1,"error-text"],disabled:[4],readonly:[4],required:[4],type:[1],autoFocus:[4,"auto-focus"],secure:[4],size:[1],color:[1],variant:[1],invalid:[4],skeleton:[4],autoSubmit:[4,"auto-submit"],groupSize:[2,"group-size"],placeholder:[1],rtl:[4],resendInterval:[2,"resend-interval"],resendLabel:[1,"resend-label"],otpValues:[32],focusedIndex:[32],internalInvalid:[32],internalErrorText:[32],resendTimer:[32]},void 0,{value:[{handleValueChange:0}]}]),h=c,u=function(){"undefined"!=typeof customElements&&["ui-otp-input","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((t=>{switch(t){case"ui-otp-input":customElements.get(s(t))||customElements.define(s(t),c);break;case"ui-badge":customElements.get(s(t))||n();break;case"ui-button":customElements.get(s(t))||a();break;case"ui-icon":customElements.get(s(t))||l();break;case"ui-input":customElements.get(s(t))||p();break;case"ui-loader":customElements.get(s(t))||d()}}))};export{h as UiOtpInput,u as defineCustomElement}