atomicuilibrary 0.0.1 → 0.1.3

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}from"./badge.js";import{d as l}from"./button.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("pink")||e.classList.contains("pink")||"pink"===o?"pink":t.classList.contains("violet")||e.classList.contains("violet")||"violet"===o?"violet":t.classList.contains("yellow")||e.classList.contains("yellow")||"yellow"===o?"yellow":t.classList.contains("blue")||e.classList.contains("blue")||"blue"===o?"blue":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:"2eb01698cf4e733afaea46d374a90834404dac5c",style:{"--nav-width":"boolean"==typeof this.isExpanded?this.isExpanded?this.expandedWidth:this.isMobile?"0px":this.collapsedWidth:this.collapsedWidth},class:e,"data-theme":this.effectiveTheme},i("div",{key:"64afaaedfbae9c6ef52d43dd9a66b0f8c70cb005",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:"c1cc68a69a4483b72de62b8dc01df11c2cd5b46d",class:"nav-backdrop",onClick:()=>this.close()}),i("div",{key:"4476a7ff93109e3b6e5958660b96dedba14f42e5",class:"nav-blocks-container"},i("div",{key:"68faa594665af6f1cedf149185abd2cca9817228",class:"nav-header"},i("slot",{key:"b80e043762877652627c51eb2ddc3e0f63df57c0",name:"header"},(this.companyLogo||this.companyName)&&i("div",{key:"fb3c413c07ff8350426ad0f4f15bdbfd0ee86811",class:"nav-company-block",style:{display:"flex",alignItems:"center",gap:"12px",padding:"0 24px",height:"64px"}},this.companyLogo&&i("img",{key:"847a03eac2008e4ebc04e979edeeb5a13f5abdfc",src:this.companyLogo,alt:this.companyName||"Logo",style:{height:"32px",width:"auto"}}),this.isExpanded&&this.companyName&&i("span",{key:"abcff11af04d25aec0b037545d0aaf5c6dac7943",class:"nav-company-name",style:{fontWeight:"600",fontSize:"16px"}},this.companyName))),i("slot",{key:"3d76424bb0011e74f65a7652b422876216c5a184",name:"logo"}),this.isMobile&&i("div",{key:"90f60b7f7a238688f0ec88b5e719a3fbc351e9fc",class:"nav-mobile-close",onClick:()=>this.close()},i("svg",{key:"81b3b606dbc8e698b2bda807486d0a0807523baf",viewBox:"0 0 24 24",width:"24",height:"24",stroke:"currentColor",fill:"none"},i("path",{key:"e3874a36edaccd360cb51f7ea7439ad35546b284",d:"M18 6L6 18M6 6l12 12"})))),this.showSearch&&this.isExpanded&&i("div",{key:"159550b1dad6ff640256e1d104365cf9914798cc",class:"nav-search-bar"},i("div",{key:"2c546aba432593be79cb9cd87508fc97e9e53675",style:{position:"relative",display:"flex",alignItems:"center",background:"var(--nav-item-hover-bg, #f1f5f9)",borderRadius:"6px",padding:"4px 8px"}},i("svg",{key:"3f908153c8229f86ef86a84e43db7f8f04e106f5",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:"0180978379bb2e07d78dc7ebbcfd9f977eeb3eab",cx:"11",cy:"11",r:"8"}),i("line",{key:"60eeaded9a9eae354f3c2b47b64b66d00d0256ff",x1:"21",y1:"21",x2:"16.65",y2:"16.65"})),i("input",{key:"1583b28f1daed5e1545a5040afe4722c7b3e4ab1",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:"2c80c4bb5deef89af5f93ea6d2b1b69bbe8d94be",class:"nav-block-categories",role:"tree"},this.renderNavList(t.categories,"cat")),i("div",{key:"d235632930a29f1be58a749317415cac8dda95db",class:"nav-block-top",role:"tree"},this.renderNavList(t.primary,"top"),i("slot",{key:"5b4e7cbf60a4017630323b05c5f49f447c72342a",name:"menu-item"})," ",0===t.primary.length&&0===t.categories.length&&0===t.secondary.length&&i("slot",{key:"e4bfa9034a10ca358f6b82ae98c25473a93ca6e7",name:"empty-state"},"No Items")),t.secondary.length>0&&i("div",{key:"f09d0dc5ac73f3be4f955b06e8df12df35841cd5",class:"nav-block-secondary",role:"tree"},this.renderNavList(t.secondary,"sec")),t.bottom.length>0&&i("div",{key:"c177f73e835f8145392a2977ca8d2e1a0a19e0dc",class:"nav-block-bottom",role:"tree"},t.bottom.map((t=>this.renderItem(t))),i("slot",{key:"30645d8bdf679a52419bfcc3a24ca94b334d7e09",name:"footer"})),t.bottomSecondary.length>0&&i("div",{key:"5359678d2c1719502bb2ef9ea98884bad930a01a",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=["nav-item",a&&"active",n&&"active-ancestor",o&&"expanded","user-profile"===t.id&&"is-user-profile",!t.icon&&"no-icon"].filter(Boolean).join(" "),c=[(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"})))],d={paddingLeft:"horizontal"===this.orientation?"0":this.isExpanded?s:"0"};return i("div",{key:t.id,class:"nav-item-wrapper level-"+e,role:"none"},t.href&&!r?i("a",{id:l,href:t.href,class:h,style:d,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-selected":a?"true":"false"},c):i("div",{id:l,class:h,style:d,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"},c),(()=>{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:var(--bg-primary, #fcfcfc);--nav-color:var(--text-primary, #000000);--nav-border-color:var(--border-subtle, #d9d9d9);--nav-item-hover-bg:var(--bg-hover, #e6e6e6);--nav-item-active-bg:var(--bg-selected, var(--color-primary-subtle, rgba(0, 138, 22, 0.08)));--nav-item-active-color:var(--color-primary, #008a16);--nav-accent-gradient:linear-gradient(135deg, var(--color-primary, #3b82f6) 0%, var(--color-secondary, #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]),:host-context([data-theme=dark]){--nav-bg:var(--bg-primary, #111827);--nav-color:var(--text-secondary, #94a3b8);--nav-border-color:var(--border-subtle, #1e293b);--nav-item-hover-bg:var(--bg-hover, #1e293b);--nav-item-active-bg:var(--bg-selected, var(--color-primary-subtle, rgba(0, 138, 22, 0.15)));--nav-item-active-color:var(--color-primary, #008a16)}:host([data-theme=green]),:host-context([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([data-theme=pink]),:host-context([data-theme=pink]),:host([data-theme=violet]),:host-context([data-theme=violet]),:host([data-theme=yellow]),:host-context([data-theme=yellow]),:host([data-theme=blue]),:host-context([data-theme=blue]){--nav-bg:var(--bg-primary);--nav-color:var(--text-secondary, var(--text-primary));--nav-border-color:var(--border-subtle);--nav-item-hover-bg:var(--bg-hover);--nav-item-active-bg:var(--bg-selected, var(--color-primary-subtle));--nav-item-active-color:var(--color-primary)}: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:var(--nav-item-active-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))||s();break;case"ui-button":customElements.get(n(t))||l();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 a,transformTag as e}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(),e=this.forcePopover||"user-profile"===this.item.id;return a("li",{key:"ff4490ba41dc44a85951b48c73b9c3fbc651e4a9",class:{"nav-item":!0,active:o,"active-parent":i,disabled:this.item.disabled,"has-children":t,open:this.open&&!e,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&&!e?"true":"false",onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},a("div",{key:"b3caa94e8b15549c9181af5bcb5c4e631f8096df",class:"item-content",onClick:this.handleClick,onKeyDown:t=>{"Enter"===t.key&&this.handleClick()}},this.item.icon&&a("span",{key:"b1985031c4248c5cf8e2a2eb3d02804c5d0b943b",class:"nav-icon"},a("ui-icon",{key:"3b73edba04f5d45218d1fe92995ba7dbc820243e",name:this.item.icon,library:this.item.iconLibrary||this.iconLibrary,size:"1.25rem"})),(!this.collapsed||this.forcePopover)&&a("span",{key:"6ceff6c8ff5d454f30c72e410706bbb64a9a4fb5",class:"nav-label"},this.item.label),this.item.badge&&(!this.collapsed||this.forcePopover)&&a("span",{key:"46e3f8f642ece0eb4be6f6b44a7aaf8adcf142eb",class:"nav-badge"},this.item.badge),t&&!e&&a("span",{key:"48113063a5b6ef7f425f59db684effbcb7696d36",class:"nav-arrow"},a("ui-icon",{key:"6b5a1f241c3cd7b6f06f806438b625874f2af337",name:"chevron-right",library:"lucide",size:"12px"})),t&&e&&a("span",{key:"9818385d0163e9a8873a51fcddc709ae04b65297",class:"nav-arrow cascading"},a("ui-icon",{key:"654f91ad0a6e1b34b8f0fbfb0483f836b3897647",name:"chevron-right",library:"lucide",size:"12px"}))),!t&&this.collapsed&&this.isHovering&&a("div",{key:"41dd6199319b7cfd67ad61bce60bebaadcc10fd3",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-item-hover-bg, var(--nav-hover-bg, var(--bg-hover, #e6e6e6)));color:var(--nav-text, var(--text-primary, #000000))}.nav-item.active .item-content,.nav-item.active-parent .item-content{background:var(--nav-item-active-bg, var(--nav-active-bg, var(--bg-selected, rgba(0, 138, 22, 0.08))));color:var(--nav-item-active-color, var(--nav-accent, var(--color-primary, #008a16)));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-item-active-color, var(--nav-accent, var(--color-primary, #008a16)));border-radius:0 4px 4px 0;box-shadow:0 0 10px var(--nav-item-active-color, var(--nav-accent, var(--color-primary, #008a16)));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-item-active-color, var(--nav-accent, var(--color-primary, #008a16)));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(e(t))||customElements.define(e(t),p);break;case"ui-icon":customElements.get(e(t))||n();break;case"ui-loader":customElements.get(e(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 a}from"./badge.js";import{d as o}from"./button.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=>{i.defaultPrevented||("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:"7d6621c867480c767237c3ceaffcf830a27263e8",class:{"full-width":this.fullWidth}},this.label&&r("label",{key:"fc320df3b4d7cfd4606ea5a806409a8ac006f9bb",class:"ni-label"},this.label),r("div",{key:"1d35868e9fbfc0b619b7908f91720eb219f2d3cf",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:"7fe957464bd26a0aee2c36fc0ab7c4a16a69d9e6",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:"520c1bfb3d2a283788e0833bd3c4683f7d0f9991",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:"43e78c6e315cb773a7e72e72f12fc67b7652d443",class:"ni-stacker"},r("ui-button",{key:"bff9e2be12324bf23ba904c230ed34aca476573e",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:"a6a5dcaeac986df1028882fa605f41bef9979bae",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:"36d111a0bed7715ffee7fd6b5cd41f1d18ca33a4",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:"75f9167fa983543f97efbfbf4eae8e66e71a6635",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 n}from"./badge.js";import{d as a}from"./button.js";import{d as l}from"./icon.js";import{d as p}from"./input.js";import{d}from"./loader.js";const u=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:"927ec2b491c04d013470a0449dea64d4aaaffc76",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:"043dfca110af5012d56b444d7427eb647f851e1b",class:"otp-label"},this.label),r("div",{key:"e2e7ab669e26d49206f85afd1f48c9ea7614f591",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",variant:"plain",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:"251b384b6cf48e4f0dfa1e64fd128674fb6cfbbb",class:"error-text"},r("ui-icon",{key:"0c0f65b8e1748e546737710d373ed9ae2cef07cc",name:"exclamation-circle",library:"fontawesome"}),e),!t&&this.helperText&&r("div",{key:"740959aeb1bff5f5f20829d953fab02303f83b35",class:"helper-text"},this.helperText),r("div",{key:"baeee4149c7086ed794b30957e00cb0d68986368",class:"otp-resend-container"},r("ui-button",{key:"6ed86116570e10766b3510ab4e024dc4b8933321",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));--ui-input-padding:0px !important;--ui-input-padding-x:0px !important;--input-padding-vertical:0px !important;--input-padding-horizontal:0px !important;--input-height:100% !important;--ui-input-text-align:center;display:flex !important;align-items:center;justify-content:center}.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=u,h=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),u);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{c as UiOtpInput,h as defineCustomElement}

package/dist/components/ui-panel.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as i,transformTag as n}from"@stencil/core/internal/client";import{d as r,a as s}from"./badge.js";import{d as o}from"./icon.js";import{d as l}from"./input.js";const p=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.panelClose=t(this,"panelClose",7),this.panelSettings=t(this,"panelSettings",7),this.toggle=t(this,"toggle",7),this.panelMinimize=t(this,"panelMinimize",7),this.panelMaximize=t(this,"panelMaximize",7),this.panelRestore=t(this,"panelRestore",7),this.panelDragStart=t(this,"panelDragStart",7),this.panelDrag=t(this,"panelDrag",7),this.panelDragEnd=t(this,"panelDragEnd",7),this.panelResizeStart=t(this,"panelResizeStart",7),this.panelResize=t(this,"panelResize",7),this.panelResizeEnd=t(this,"panelResizeEnd",7),this.panelSearch=t(this,"panelSearch",7)}get element(){return this}panelId="";width="100%";height="auto";maxWidth="none";maxHeight="none";showClose=!0;showSettings=!0;panelTitle="";panelSubtitle="";variant="elevated";toggleable=!1;collapsed=!1;loading=!1;noPadding=!1;theme="default";animationDuration="300ms";animationType="slide";badge="";badgeVariant="count";icon="";keyboardNav=!0;aura=!1;enableSearch=!1;searchPlaceholder="Search content...";elevation=2;panelClose;panelSettings;toggle;minimizable=!1;maximizable=!1;minimized=!1;maximized=!1;isDraggable=!1;bounds="none";edgeSnapping=!1;snapThreshold=20;snapToGrid=!1;gridSize=20;dragPhysics=!1;resizable=!1;minWidth="200px";minHeight="100px";pinned=!1;persistenceId;overflow="auto";position;x;y;modal=!1;dismissible=!1;glass=!1;backgroundColor="white";panelMinimize;panelMaximize;panelRestore;panelDragStart;panelDrag;panelDragEnd;panelResizeStart;panelResize;panelResizeEnd;panelSearch;previousDimensions={width:"100%",height:"auto"};isDragging=!1;isResizing=!1;currentWidth;currentHeight;isActive=!1;searchQuery="";dragStartX=0;dragStartY=0;dragPosition={x:0,y:0};resizeStartWidth=0;initialRect;lastMouseX=0;dragTilt=0;resizeStartHeight=0;resizeHandle="";componentWillLoad(){this.loadState(),this.currentWidth||(this.currentWidth=this.width),this.currentHeight||(this.currentHeight=this.height)}loadState(){if(this.persistenceId){const e=localStorage.getItem("ui-panel-"+this.persistenceId);if(e)try{const a=JSON.parse(e);this.collapsed=a.collapsed??this.collapsed,this.minimized=a.minimized??this.minimized,this.maximized=a.maximized??this.maximized,this.dragPosition=a.dragPosition??this.dragPosition,this.currentWidth=a.currentWidth??this.currentWidth,this.currentHeight=a.currentHeight??this.currentHeight,this.pinned=a.pinned??this.pinned,this.previousDimensions=a.previousDimensions??this.previousDimensions}catch(e){console.warn("Failed to load panel state",e)}}}saveState(){this.persistenceId&&localStorage.setItem("ui-panel-"+this.persistenceId,JSON.stringify({collapsed:this.collapsed,minimized:this.minimized,maximized:this.maximized,dragPosition:this.dragPosition,currentWidth:this.currentWidth,currentHeight:this.currentHeight,pinned:this.pinned,previousDimensions:this.previousDimensions}))}handleFocus=()=>{this.isActive=!0};handleBlur=()=>{this.isActive=!1};handleKeyDown=e=>{if(this.keyboardNav)if("Escape"===e.key&&this.showClose)this.handleClose(e);else if(" "!==e.key&&"Enter"!==e.key||!this.toggleable){if(this.isDraggable&&e.shiftKey){const a=this.snapToGrid?this.gridSize:20;"ArrowUp"===e.key&&(this.dragPosition={...this.dragPosition,y:this.dragPosition.y-a},e.preventDefault()),"ArrowDown"===e.key&&(this.dragPosition={...this.dragPosition,y:this.dragPosition.y+a},e.preventDefault()),"ArrowLeft"===e.key&&(this.dragPosition={...this.dragPosition,x:this.dragPosition.x-a},e.preventDefault()),"ArrowRight"===e.key&&(this.dragPosition={...this.dragPosition,x:this.dragPosition.x+a},e.preventDefault()),this.saveState(),this.panelDrag.emit({panelId:this.panelId,x:this.dragPosition.x,y:this.dragPosition.y})}}else e.preventDefault(),this.handleToggle()};handleMinimize=e=>{e.stopPropagation(),this.minimized=!this.minimized,this.minimized&&this.maximized&&(this.maximized=!1),this.panelMinimize.emit({panelId:this.panelId}),this.saveState()};handleMaximize=e=>{e.stopPropagation(),this.maximized?(this.maximized=!1,this.currentWidth=this.previousDimensions.width,this.currentHeight=this.previousDimensions.height,this.panelRestore.emit({panelId:this.panelId})):(this.previousDimensions={width:this.currentWidth,height:this.currentHeight},this.maximized=!0,this.minimized=!1,this.panelMaximize.emit({panelId:this.panelId})),this.saveState()};handleDragStart=e=>{this.isDraggable&&!this.maximized&&(this.isDragging=!0,this.dragStartX=e.clientX-this.dragPosition.x,this.dragStartY=e.clientY-this.dragPosition.y,this.initialRect=this.element.getBoundingClientRect(),this.lastMouseX=e.clientX,this.panelDragStart.emit({panelId:this.panelId,x:this.dragPosition.x,y:this.dragPosition.y}),document.addEventListener("mousemove",this.handleDragMove),document.addEventListener("mouseup",this.handleDragEnd))};handleDragMove=e=>{if(!this.isDragging)return;let a=e.clientX-this.dragStartX,t=e.clientY-this.dragStartY;if(this.dragPhysics){const a=e.clientX-this.lastMouseX;this.lastMouseX=e.clientX,this.dragTilt=Math.max(-15,Math.min(15,.4*a))}this.snapToGrid&&this.gridSize>0&&(a=Math.round(a/this.gridSize)*this.gridSize,t=Math.round(t/this.gridSize)*this.gridSize);let i=a,n=t;if("viewport"===this.bounds&&this.initialRect){const e=this.initialRect.left+i,a=this.initialRect.top+n,t=40,r=window.innerWidth,s=window.innerHeight;e+this.initialRect.width<t&&(i=t-this.initialRect.width-this.initialRect.left),e>r-t&&(i=r-t-this.initialRect.left),a<0&&(n=-this.initialRect.top),a>s-t&&(n=s-t-this.initialRect.top)}if(this.edgeSnapping&&this.initialRect){const e=this.initialRect.left+i,a=this.initialRect.top+n,t=window.innerWidth,r=window.innerHeight,s=this.snapThreshold;Math.abs(e)<s&&(i=-this.initialRect.left),Math.abs(a)<s&&(n=-this.initialRect.top),Math.abs(e+this.initialRect.width-t)<s&&(i=t-this.initialRect.width-this.initialRect.left),Math.abs(a+this.initialRect.height-r)<s&&(n=r-this.initialRect.height-this.initialRect.top)}this.dragPosition={x:i,y:n},this.panelDrag.emit({panelId:this.panelId,x:i,y:n})};handleDragEnd=()=>{if(this.isDragging){if(this.isDragging=!1,this.dragPhysics&&(this.dragTilt=0),this.edgeSnapping&&this.initialRect){const e=this.initialRect.left+this.dragPosition.x,a=window.innerWidth;e<=0?(this.maximized=!1,this.currentWidth="50vw",this.currentHeight="100vh",this.dragPosition={x:-this.initialRect.left,y:-this.initialRect.top}):e+this.initialRect.width>=a&&(this.maximized=!1,this.currentWidth="50vw",this.currentHeight="100vh",this.dragPosition={x:a-a/2-this.initialRect.left,y:-this.initialRect.top})}this.panelDragEnd.emit({panelId:this.panelId,x:this.dragPosition.x,y:this.dragPosition.y}),this.saveState(),document.removeEventListener("mousemove",this.handleDragMove),document.removeEventListener("mouseup",this.handleDragEnd)}};handleResizeStart=(e,a)=>{if(!this.resizable)return;e.stopPropagation(),this.isResizing=!0,this.resizeHandle=a,this.dragStartX=e.clientX,this.dragStartY=e.clientY;const t=this.element.getBoundingClientRect();this.resizeStartWidth=t.width,this.resizeStartHeight=t.height,this.panelResizeStart.emit({panelId:this.panelId,width:t.width,height:t.height}),document.addEventListener("mousemove",this.handleResizeMove),document.addEventListener("mouseup",this.handleResizeEnd)};handleResizeMove=e=>{if(!this.isResizing)return;const a=e.clientX-this.dragStartX,t=e.clientY-this.dragStartY;let i=this.resizeStartWidth,n=this.resizeStartHeight,r=0,s=0;this.resizeHandle.includes("e")&&(i+=a),this.resizeHandle.includes("w")&&(i-=a,r=a),this.resizeHandle.includes("s")&&(n+=t),this.resizeHandle.includes("n")&&(n-=t,s=t);const o=parseInt(this.minWidth)||200,l=parseInt(this.minHeight)||100;i<o&&(this.resizeHandle.includes("w")&&(r=this.resizeStartWidth-o),i=o),n<l&&(this.resizeHandle.includes("n")&&(s=this.resizeStartHeight-l),n=l),this.currentWidth=i+"px",this.currentHeight=n+"px",(this.resizeHandle.includes("w")||this.resizeHandle.includes("n"))&&(this.dragPosition={x:this.dragPosition.x+r,y:this.dragPosition.y+s}),this.panelResize.emit({panelId:this.panelId,width:i,height:n})};handleResizeEnd=()=>{if(!this.isResizing)return;this.isResizing=!1;const e=this.element.getBoundingClientRect();this.panelResizeEnd.emit({panelId:this.panelId,width:e.width,height:e.height}),this.saveState(),document.removeEventListener("mousemove",this.handleResizeMove),document.removeEventListener("mouseup",this.handleResizeEnd)};handleClose=e=>{e.stopPropagation(),this.panelClose.emit({panelId:this.panelId})};showActionList=!1;handleSettings=e=>{e.stopPropagation(),this.showActionList=!this.showActionList,this.panelSettings.emit({panelId:this.panelId}),this.showActionList?document.addEventListener("click",this.closeActionList):document.removeEventListener("click",this.closeActionList)};closeActionList=e=>{this.element.shadowRoot?.querySelector(".panel-settings-wrapper")?.contains(e.target)||this.element.contains(e.target)||(this.showActionList=!1,document.removeEventListener("click",this.closeActionList))};handleSearchInput=e=>{this.searchQuery=e.detail,this.panelSearch.emit({query:this.searchQuery})};handleToggle=()=>{this.toggleable&&(this.collapsed=!this.collapsed,this.toggle.emit({collapsed:this.collapsed}),this.saveState())};handlePinToggle=e=>{e.stopPropagation(),this.pinned=!this.pinned,this.saveState()};render(){const e={width:this.maximized?"100vw":this.currentWidth,height:this.collapsed||this.minimized?"auto":this.maximized?"100vh":this.currentHeight,maxWidth:this.maximized?"none":this.maxWidth,maxHeight:this.maximized?"none":this.maxHeight,"--animation-duration":this.animationDuration,transform:this.isDraggable?`translate(${this.dragPosition.x}px, ${this.dragPosition.y}px)`+(this.dragPhysics&&this.isDragging?` rotateY(${this.dragTilt}deg) rotateZ(${.1*this.dragTilt}deg)`:""):"",transition:this.isDragging&&!this.snapToGrid?"transform 0.1s ease-out":"transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.3s ease, height 0.3s ease",position:this.position||this.x||this.y||this.isDraggable||this.maximized?"fixed":"relative",top:this.maximized?"0":this.y?this.y:this.position?"":"auto",left:this.maximized?"0":this.x?this.x:this.position?"":"auto",right:this.position||this.x?"":"auto",bottom:this.position||this.y?"":"auto",zIndex:this.pinned||this.modal?"1000":this.isActive||this.isDraggable?"101":this.isDraggable?"100":"auto",margin:"0","--panel-bg":this.backgroundColor||"white","background-color":"var(--panel-bg, #ffffff)"},a={overflow:this.overflow};return i("div",{key:"843a2cdb343598710c2e3cf1d04994e362a0f33b",class:{"panel-container":!0,"panel-active":this.isActive,["panel-"+this.variant]:!0,["panel-theme-"+this.theme]:!0,["panel-animation-"+this.animationType]:!0,"panel-collapsed":this.collapsed,"panel-minimized":this.minimized,"panel-maximized":this.maximized,"panel-loading":this.loading,"panel-draggable":this.isDraggable,"panel-dragging":this.isDragging,"panel-resizable":this.resizable,"panel-resizing":this.isResizing,"panel-pinned":this.pinned,"panel-modal":this.modal,"panel-glass":this.glass,"panel-aura":this.aura,"panel-with-search":this.enableSearch,["panel-elevation-"+this.elevation]:!0,["panel-position-"+this.position]:!!this.position},style:e,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,tabindex:this.keyboardNav?0:-1,role:"region","aria-label":this.panelTitle||"Panel","aria-expanded":!this.collapsed&&!this.minimized},this.modal&&i("div",{key:"96a9377520a2998e820d02159da6bdaba2838dc9",class:"panel-backdrop",onClick:e=>{this.modal&&this.dismissible&&(e.stopPropagation(),this.handleClose(e))}}),i("div",{key:"92adc3528c404b4d4338a4c2960463a48abeb282",class:"panel-header",onClick:this.toggleable?this.handleToggle:void 0,onMouseDown:this.isDraggable?this.handleDragStart:void 0,style:{cursor:this.isDraggable?"move":this.toggleable?"pointer":"default"}},i("div",{key:"b8baae2f2f4c4ae873c0a6f332d87dda76e4e3cd",class:"panel-title-wrapper"},i("div",{key:"cf6ca464d5fefea869a43388126fdef0b3bf71a2",class:"panel-title"},this.icon&&i("span",{key:"a8c6607d8e1d0347440830458b1aaa13fef70966",class:"panel-header-icon-inline"},this.icon),this.panelTitle&&i("h3",{key:"2b99cbe49e2391639e619afa8ab2701def0deee3",class:"panel-title-text"},this.panelTitle),i("slot",{key:"62cdfbaff1db11a4005c8b5ac2b92627edd07ebf",name:"header-icon"}),this.badge&&i("span",{key:"1b90d8c207d75555523ac1bfd74a13cae26b41de",class:"panel-badge panel-badge-"+this.badgeVariant},"dot"===this.badgeVariant?"":this.badge)),this.panelSubtitle&&i("div",{key:"6b56cd614017acc97e28327cfea0d5b4e4a83ef7",class:"panel-subtitle"},this.panelSubtitle),i("slot",{key:"96e631d10bd2d3c35bca1183cc72a0c185fe0d05",name:"header"})),this.enableSearch&&i("div",{key:"1f2533ac720e317df6e0bf170bc16eb1eda5e764",class:"panel-search-container",onClick:e=>e.stopPropagation()},i("div",{key:"77afd05fef848e31b845692fe02d516987a4e963",class:"search-inner"},i("ui-icon",{key:"844401caaf4fcfcb744f806ec9badd3e4d3a6ff2",name:"search",library:"lucide",class:"search-icon",size:"1.2em"}),i("ui-input",{key:"ab85da17a38ac78c81d5bb776aca1f2dcb2f15c4",type:"text",placeholder:this.searchPlaceholder,onInputChange:this.handleSearchInput,value:this.searchQuery,size:"sm",fullWidth:!0}),this.searchQuery&&i("ui-button",{key:"b2c298aba23825796122bf235816c2eb3b36d9a4",variant:"ghost",class:"search-clear",onClick:()=>{this.searchQuery="",this.panelSearch.emit({query:""})},ariaLabel:"Clear search",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"xxs"}))),i("div",{key:"3c1bbc4de3923fab63d3d213a420ea20b9fc76f2",class:"panel-actions"},i("slot",{key:"4df5712a389b6b8f5a5fb819d7e2ebee0228dd42",name:"header-actions"}),i("ui-button",{key:"9da9f9d850fd944fa71e53ea305f3b9cd079a064",variant:"ghost",class:"panel-pin-btn "+(this.pinned?"active":""),onClick:this.handlePinToggle,ariaLabel:this.pinned?"Unpin":"Pin",icon:"pin",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:this.pinned?"Unpin":"Pin"}),this.minimizable&&!this.maximized&&i("ui-button",{key:"bb57989ff64f7e40cac99c20ab80b7ba3b5571ae",variant:"ghost",onClick:this.handleMinimize,ariaLabel:"Minimize panel",icon:"minus",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Minimize"}),this.maximizable&&!this.minimized&&i("ui-button",{key:"a8c74703bf14e4542825bbeb3d439288bf0ae6ca",variant:"ghost",onClick:this.handleMaximize,ariaLabel:this.maximized?"Restore":"Maximize",icon:this.maximized?"copy":"square",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:this.maximized?"Restore":"Maximize"}),this.showSettings&&i("div",{key:"cabe3fd3cbd49f8501f60c63fa308844bd33ab85",class:"panel-settings-wrapper",style:{position:"relative"}},i("ui-button",{key:"84ce872e7528dee72cfa2b574acf999a94b3cf03",variant:"ghost",onClick:this.handleSettings,ariaLabel:"Panel settings",icon:"settings",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Settings"}),this.showActionList&&i("div",{key:"4992efa9846d614f721bc06c7744694d0019f201",class:"panel-action-list-popup"},i("slot",{key:"2e13a0eb84b6bc48c02136e730915bd7b35ea432",name:"action-list"}))),this.toggleable&&i("ui-button",{key:"7b74e90b36016a2c2410bf59296d1c8b6ccb48f7",variant:"ghost",class:"panel-action-btn panel-toggle-btn "+(this.collapsed?"collapsed":""),onClick:e=>{e.stopPropagation(),this.handleToggle()},ariaLabel:this.collapsed?"Expand":"Collapse",icon:"chevron-up",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),this.showClose&&i("ui-button",{key:"7a84ee96567a763bbf68cc187807439a3ef70b1b",variant:"ghost",onClick:this.handleClose,ariaLabel:"Close panel",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Close"}))),!this.minimized&&i("div",{key:"d15ea87f83ad63ffea4edf8017b23c5795a3b848",class:"panel-body-wrapper"},this.loading&&i("div",{key:"d6e3f9c0c43950d232643a19bfb2907c138e1afd",class:"panel-loading-overlay"},i("div",{key:"08a48431ac6bb39b3c27444b18ea2f5cd29d55c0",class:"panel-spinner"})),i("div",{key:"c81065f34b525c67e082deffc9a41177c7b654d7",class:"panel-content "+(this.noPadding?"no-padding":""),style:a},i("slot",{key:"5aacbe8e43c160570596ac2aff83d00098b438c0",name:"content"}),i("slot",{key:"4caeef2dd57a822dc98c5fb1ec6fca10b3a62796"})),i("div",{key:"14d8117a5004c0522a0108a3879612cec4158344",class:"panel-footer"},i("slot",{key:"ca2f91902d37806ad5f4e4a5eebc67bc9fb5043a",name:"footer"}))),this.resizable&&!this.maximized&&!this.minimized&&i("div",{key:"4b22c21852d6f3cfc46c64d205db8d3276aabbbe",class:"panel-resize-handles"},i("div",{key:"3bcf0a8f5418adbe5e871d872c4355e6aa03f384",class:"resize-handle resize-n",onMouseDown:e=>this.handleResizeStart(e,"n")}),i("div",{key:"377eb4f44c1d2a2991b2cf92dd57ec5eb120b040",class:"resize-handle resize-s",onMouseDown:e=>this.handleResizeStart(e,"s")}),i("div",{key:"0bd73e6d97af791249f6876b013f5a162822477e",class:"resize-handle resize-e",onMouseDown:e=>this.handleResizeStart(e,"e")}),i("div",{key:"6f44b5ad062e97258b2bb29de30587e647bbde44",class:"resize-handle resize-w",onMouseDown:e=>this.handleResizeStart(e,"w")}),i("div",{key:"10dd0e6a1dc7a2c813090176b48b64882d26f694",class:"resize-handle resize-ne",onMouseDown:e=>this.handleResizeStart(e,"ne")}),i("div",{key:"b3bcb6031895a3e13da4466092a238c4dd78b0cd",class:"resize-handle resize-nw",onMouseDown:e=>this.handleResizeStart(e,"nw")}),i("div",{key:"8a194a9b536b1d562a549945fd9de12e28c8c70d",class:"resize-handle resize-se",onMouseDown:e=>this.handleResizeStart(e,"se")}),i("div",{key:"4ad815d53e99dd50929204ea6e7b40e73191a161",class:"resize-handle resize-sw",onMouseDown:e=>this.handleResizeStart(e,"sw")})))}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}.panel-container{display:flex;flex-direction:column;position:relative;background-color:var(--panel-bg, #ffffff);border-radius:var(--panel-border-radius, 8px);overflow:hidden;transition:box-shadow 0.2s ease, border-color 0.2s ease}.panel-elevated{border:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.panel-active.panel-elevated{box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);border-color:var(--color-primary, #10b981)}.panel-outlined{border:1px solid var(--panel-border-color, var(--border-strong, #d1d5db));box-shadow:none}.panel-filled{border:1px solid transparent;background-color:var(--panel-filled-bg, var(--bg-secondary, #f3f4f6));box-shadow:none}.panel-filled .panel-header{background-color:transparent;border-bottom:1px solid rgba(0, 0, 0, 0.05);}.panel-flat{border:none;box-shadow:none;background:transparent}.panel-flat .panel-header{background:transparent;border-bottom:1px solid var(--border-default, #e5e7eb);padding-left:0;padding-right:0}.panel-flat .panel-content{padding-left:0;padding-right:0}.panel-flat .panel-footer{padding-left:0;padding-right:0}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:var(--panel-header-bg, var(--bg-primary, var(--text-standard, #ffffff)));border-bottom:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));min-height:48px;user-select:none}.panel-title-wrapper{flex:1;display:flex;flex-direction:column;gap:2px;margin-right:16px}.panel-title{display:flex;align-items:center;gap:8px}.panel-title-text{margin:0;font-size:16px;font-weight:600;color:var(--panel-text-primary, var(--text-primary, #111827));line-height:1.4}.panel-subtitle{font-size:13px;color:var(--panel-text-secondary, var(--text-muted, #6b7280));line-height:1.4}.panel-actions{display:flex;align-items:center;gap:4px;}.panel-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:6px;color:var(--panel-action-color, var(--text-muted, #6b7280));cursor:pointer;transition:all 0.2s}.panel-action-btn:hover{background-color:var(--panel-action-hover-bg, var(--bg-secondary, #f3f4f6));color:var(--panel-text-primary, var(--text-primary, #111827))}.panel-action-btn:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:2px}.panel-action-btn .icon{width:18px;height:18px}.panel-action-list-popup{position:absolute;top:100%;right:0;margin-top:8px;background-color:var(--panel-bg, var(--bg-primary, var(--text-standard, #ffffff)));border:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);z-index:1001;min-width:150px;overflow:hidden}.panel-toggle-btn{transition:transform 0.3s ease}.panel-toggle-btn.collapsed{transform:rotate(180deg);}.panel-body-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;position:relative;overflow:hidden}.panel-collapsed .panel-body-wrapper{display:none}.panel-content{flex:1;padding:16px;overflow-y:auto;min-height:0;color:var(--panel-text-primary, var(--text-secondary, #374151));font-size:14px;line-height:1.5;}.panel-content::-webkit-scrollbar{width:6px}.panel-content::-webkit-scrollbar-track{background:transparent}.panel-content::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.1);border-radius:10px}.panel-content:hover::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2)}.panel-content.no-padding{padding:0}.panel-footer{padding:12px 16px;background-color:var(--panel-footer-bg, var(--bg-primary, #f9fafb));border-top:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));display:flex;align-items:center;justify-content:flex-end;gap:8px}.panel-loading-overlay{position:absolute;inset:0;background-color:rgba(255, 255, 255, 0.7);backdrop-filter:blur(2px);z-index:10;display:flex;align-items:center;justify-content:center}.panel-spinner{width:30px;height:30px;border:3px solid var(--border-default, #e5e7eb);border-top-color:var(--color-primary, #10b981);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.panel-container{--panel-bg:var(--bg-primary, #1f2937);--panel-border-color:var(--border-default, #374151);--panel-text-primary:var(--bg-primary, #f3f4f6);--panel-text-secondary:var(--color-primary, #9ca3af);--panel-header-bg:var(--bg-primary, #1f2937)}.panel-filled{background-color:var(--bg-secondary, var(--text-primary, #111827))}.panel-footer{--panel-footer-bg:var(--bg-secondary, #111827)}.panel-action-btn{--panel-action-color:var(--text-muted, #9ca3af);--panel-action-hover-bg:var(--color-primary, #374151)}.panel-loading-overlay{background-color:rgba(31, 41, 55, 0.7)}.panel-spinner{border-color:var(--border-strong, #4b5563);border-top-color:var(--color-primary, #60a5fa)}.panel-theme-primary{--panel-theme-bg:var(--color-primary, #1e3a8a);--panel-theme-text:var(--color-primary, #bfdbfe)}.panel-theme-success{--panel-theme-bg:var(--color-primary, #064e3b);--panel-theme-text:var(--color-success, #a7f3d0)}.panel-theme-warning{--panel-theme-bg:var(--color-danger, #78350f);--panel-theme-text:var(--color-primary, #fde68a)}.panel-theme-danger{--panel-theme-bg:var(--color-danger, #7f1d1d);--panel-theme-text:var(--color-danger, #fecaca)}.panel-theme-info{--panel-theme-bg:var(--color-primary, #164e63);--panel-theme-text:var(--color-primary, #a5f3fc)}}.panel-theme-primary{--panel-theme-color:var(--color-primary, #10b981);--panel-theme-bg:var(--bg-primary, #eff6ff);--panel-theme-border:var(--color-primary, #10b981);--panel-theme-text:var(--color-primary, #1e40af)}.panel-theme-success{--panel-theme-color:var(--color-success, #10b981);--panel-theme-bg:var(--bg-primary, #d1fae5);--panel-theme-border:var(--color-success, #10b981);--panel-theme-text:var(--color-primary, #065f46)}.panel-theme-warning{--panel-theme-color:var(--color-warning, #f59e0b);--panel-theme-bg:var(--bg-primary, #fef3c7);--panel-theme-border:var(--color-warning, #f59e0b);--panel-theme-text:var(--color-danger, #92400e)}.panel-theme-danger{--panel-theme-color:var(--color-danger, #ef4444);--panel-theme-bg:var(--bg-primary, #fee2e2);--panel-theme-border:var(--color-danger, #ef4444);--panel-theme-text:var(--color-danger, #991b1b)}.panel-theme-info{--panel-theme-color:var(--color-info, #06b6d4);--panel-theme-bg:var(--bg-primary, #cffafe);--panel-theme-border:var(--color-info, #06b6d4);--panel-theme-text:var(--color-primary, #155e75)}.panel-theme-primary .panel-header,.panel-theme-success .panel-header,.panel-theme-warning .panel-header,.panel-theme-danger .panel-header,.panel-theme-info .panel-header{background-color:var(--panel-theme-bg);border-bottom-color:var(--panel-theme-border);border-left:4px solid var(--panel-theme-color)}.panel-theme-primary .panel-title-text,.panel-theme-success .panel-title-text,.panel-theme-warning .panel-title-text,.panel-theme-danger .panel-title-text,.panel-theme-info .panel-title-text{color:var(--panel-theme-color)}.panel-theme-primary .panel-content,.panel-theme-success .panel-content,.panel-theme-warning .panel-content,.panel-theme-danger .panel-content,.panel-theme-info .panel-content{color:var(--panel-theme-text)}.panel-theme-primary .panel-subtitle,.panel-theme-success .panel-subtitle,.panel-theme-warning .panel-subtitle,.panel-theme-danger .panel-subtitle,.panel-theme-info .panel-subtitle{color:var(--panel-theme-text);opacity:0.8}.panel-badge{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:1;border-radius:10px;margin-left:8px}.panel-badge-dot{width:8px;height:8px;border-radius:50%;background-color:var(--panel-theme-color, var(--color-primary, #10b981))}.panel-badge-count,.panel-badge-text{padding:3px 8px;background-color:var(--panel-theme-color, var(--color-primary, #10b981));color:var(--text-standard, #ffffff);min-width:20px}@keyframes slideIn{from{max-height:0;opacity:0}to{max-height:1000px;opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes scaleIn{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}.panel-animation-slide .panel-body-wrapper{animation:slideIn var(--animation-duration, 300ms) ease-out}.panel-animation-fade .panel-body-wrapper{animation:fadeIn var(--animation-duration, 300ms) ease-out}.panel-animation-scale .panel-body-wrapper{animation:scaleIn var(--animation-duration, 300ms) ease-out}.panel-minimized .panel-body-wrapper{display:none}.panel-minimized{height:auto !important}.panel-maximized{position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;max-width:none !important;max-height:none !important;z-index:9999 !important;border-radius:0 !important}.panel-draggable{cursor:move}.panel-dragging{opacity:0.9;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);cursor:grabbing !important}.panel-draggable .panel-header{cursor:move}.panel-resizable{position:relative}.panel-resize-handles{position:absolute;inset:0;pointer-events:none}.resize-handle{position:absolute;pointer-events:all;z-index:10}.resize-n,.resize-s{left:0;right:0;height:8px;cursor:ns-resize}.resize-n{top:0}.resize-s{bottom:0}.resize-e,.resize-w{top:0;bottom:0;width:8px;cursor:ew-resize}.resize-e{right:0}.resize-w{left:0}.resize-ne,.resize-nw,.resize-se,.resize-sw{width:12px;height:12px}.resize-ne{top:0;right:0;cursor:nesw-resize}.resize-nw{top:0;left:0;cursor:nwse-resize}.resize-se{bottom:0;right:0;cursor:nwse-resize}.resize-sw{bottom:0;left:0;cursor:nesw-resize}.panel-resizing{user-select:none}.panel-pinned{z-index:1000;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25)}.panel-container:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:2px}.panel-minimize-btn:hover{background-color:var(--bg-primary, #fef3c7);color:var(--color-warning, #f59e0b)}.panel-maximize-btn:hover{background-color:var(--bg-primary, #dbeafe);color:var(--color-primary, #10b981)}@media (max-width: 768px){.panel-draggable{position:relative !important;transform:none !important}.panel-resizable .panel-resize-handles{display:none}}.panel-pin-btn.active{color:var(--color-primary, #10b981);background-color:var(--bg-primary, #dbeafe)}.panel-pin-btn.active svg{fill:currentColor}.panel-resizable::after{content:"";position:absolute;bottom:4px;right:4px;width:12px;height:12px;background-image:radial-gradient(circle, var(--bg-secondary, #d1d5db) 1px, transparent 1px);background-size:4px 4px;opacity:0.6;pointer-events:none}.panel-backdrop{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.4);backdrop-filter:blur(2px);z-index:999;animation:fadeIn 0.2s ease-out}.panel-modal{box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);z-index:1000}.panel-glass{background-color:rgba(255, 255, 255, 0.7);backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.3)}.panel-theme-dark .panel-glass,:host-context(.dark) .panel-glass{background-color:rgba(30, 41, 59, 0.6);border-color:rgba(255, 255, 255, 0.1)}[class*=panel-position-]{position:fixed;z-index:1000;margin:0}.panel-position-center{top:50%;left:50%;translate:-50% -50%}.panel-position-top{top:20px;left:50%;translate:-50% 0}.panel-position-bottom{bottom:20px;left:50%;translate:-50% 0}.panel-position-left{top:50%;left:20px;translate:0 -50%}.panel-position-right{top:50%;right:20px;translate:0 -50%}.panel-position-top-left{top:20px;left:20px}.panel-position-top-right{top:20px;right:20px}.panel-position-bottom-left{bottom:20px;left:20px}.panel-position-bottom-right{bottom:20px;right:20px}.panel-aura{box-shadow:0 0 0 0 var(--panel-theme-color, rgba(var(--color-primary-rgb, 59, 130, 246), 0.4));animation:panelAuraPulse 2s infinite}@keyframes panelAuraPulse{0%{box-shadow:0 0 0 0 var(--panel-theme-color, rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}70%{box-shadow:0 0 0 15px transparent}100%{box-shadow:0 0 0 0 transparent}}.panel-search-container{flex:1;max-width:300px;margin:0 20px}.search-inner{position:relative;display:flex;align-items:center;background:rgba(0, 0, 0, 0.05);border-radius:6px;padding:4px 8px;border:1px solid rgba(0, 0, 0, 0.05);transition:all 0.2s}.search-inner:focus-within{background:var(--bg-primary, #ffffff);border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.search-icon{width:14px;height:14px;opacity:0.5;margin-right:8px}.search-inner input{border:none;background:transparent;font-size:13px;width:100%;color:inherit;padding:2px 0;outline:none}.search-clear{background:none;border:none;color:var(--color-primary, #9ca3af);cursor:pointer;padding:0 4px;font-size:10px}.panel-elevation-0{box-shadow:none}.panel-elevation-1{box-shadow:0 1px 3px rgba(0, 0, 0, 0.12)}.panel-elevation-2{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1)}.panel-elevation-3{box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1)}.panel-elevation-4{box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1)}.panel-elevation-5{box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25)}@media (prefers-color-scheme: dark){.panel-content::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.1)}.panel-content:hover::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}}.panel-header-icon-inline{font-size:1.2em;line-height:1}'}},[769,"ui-panel",{panelId:[1,"panel-id"],width:[1],height:[1],maxWidth:[1,"max-width"],maxHeight:[1,"max-height"],showClose:[4,"show-close"],showSettings:[4,"show-settings"],panelTitle:[1,"panel-title"],panelSubtitle:[1,"panel-subtitle"],variant:[1],toggleable:[4],collapsed:[1540],loading:[4],noPadding:[4,"no-padding"],theme:[1],animationDuration:[1,"animation-duration"],animationType:[1,"animation-type"],badge:[8],badgeVariant:[1,"badge-variant"],icon:[1],keyboardNav:[4,"keyboard-nav"],aura:[4],enableSearch:[4,"enable-search"],searchPlaceholder:[1,"search-placeholder"],elevation:[2],minimizable:[4],maximizable:[4],minimized:[1540],maximized:[1540],isDraggable:[4,"is-draggable"],bounds:[1],edgeSnapping:[4,"edge-snapping"],snapThreshold:[2,"snap-threshold"],snapToGrid:[4,"snap-to-grid"],gridSize:[2,"grid-size"],dragPhysics:[4,"drag-physics"],resizable:[4],minWidth:[1,"min-width"],minHeight:[1,"min-height"],pinned:[1540],persistenceId:[1,"persistence-id"],overflow:[1],position:[1],x:[1],y:[1],modal:[4],dismissible:[4],glass:[4],backgroundColor:[1,"background-color"],isDragging:[32],isResizing:[32],currentWidth:[32],currentHeight:[32],isActive:[32],searchQuery:[32],dragPosition:[32],dragTilt:[32],showActionList:[32]}]),h=p,d=function(){"undefined"!=typeof customElements&&["ui-panel","ui-badge","ui-button","ui-icon","ui-input"].forEach((e=>{switch(e){case"ui-panel":customElements.get(n(e))||customElements.define(n(e),p);break;case"ui-badge":customElements.get(n(e))||s();break;case"ui-button":customElements.get(n(e))||r();break;case"ui-icon":customElements.get(n(e))||o();break;case"ui-input":customElements.get(n(e))||l()}}))};export{h as UiPanel,d as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as i,transformTag as n}from"@stencil/core/internal/client";import{d as r}from"./badge.js";import{d as s}from"./button.js";import{d as o}from"./icon.js";import{d as l}from"./input.js";import{d as p}from"./loader.js";const h=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.panelClose=t(this,"panelClose",7),this.panelSettings=t(this,"panelSettings",7),this.toggle=t(this,"toggle",7),this.panelMinimize=t(this,"panelMinimize",7),this.panelMaximize=t(this,"panelMaximize",7),this.panelRestore=t(this,"panelRestore",7),this.panelDragStart=t(this,"panelDragStart",7),this.panelDrag=t(this,"panelDrag",7),this.panelDragEnd=t(this,"panelDragEnd",7),this.panelResizeStart=t(this,"panelResizeStart",7),this.panelResize=t(this,"panelResize",7),this.panelResizeEnd=t(this,"panelResizeEnd",7),this.panelSearch=t(this,"panelSearch",7)}get element(){return this}panelId="";width="100%";height="auto";maxWidth="none";maxHeight="none";showClose=!0;showSettings=!0;panelTitle="";panelSubtitle="";variant="elevated";toggleable=!1;collapsed=!1;loading=!1;noPadding=!1;theme="default";animationDuration="300ms";animationType="slide";badge="";badgeVariant="count";icon="";keyboardNav=!0;aura=!1;enableSearch=!1;searchPlaceholder="Search content...";elevation=2;panelClose;panelSettings;toggle;minimizable=!1;maximizable=!1;minimized=!1;maximized=!1;isDraggable=!1;bounds="none";edgeSnapping=!1;snapThreshold=20;snapToGrid=!1;gridSize=20;dragPhysics=!1;resizable=!1;minWidth="200px";minHeight="100px";pinned=!1;persistenceId;overflow="auto";position;x;y;modal=!1;dismissible=!1;glass=!1;backgroundColor="white";panelMinimize;panelMaximize;panelRestore;panelDragStart;panelDrag;panelDragEnd;panelResizeStart;panelResize;panelResizeEnd;panelSearch;previousDimensions={width:"100%",height:"auto"};isDragging=!1;isResizing=!1;currentWidth;currentHeight;isActive=!1;searchQuery="";dragStartX=0;dragStartY=0;dragPosition={x:0,y:0};resizeStartWidth=0;initialRect;lastMouseX=0;dragTilt=0;resizeStartHeight=0;resizeHandle="";componentWillLoad(){this.loadState(),this.currentWidth||(this.currentWidth=this.width),this.currentHeight||(this.currentHeight=this.height)}loadState(){if(this.persistenceId){const e=localStorage.getItem("ui-panel-"+this.persistenceId);if(e)try{const a=JSON.parse(e);this.collapsed=a.collapsed??this.collapsed,this.minimized=a.minimized??this.minimized,this.maximized=a.maximized??this.maximized,this.dragPosition=a.dragPosition??this.dragPosition,this.currentWidth=a.currentWidth??this.currentWidth,this.currentHeight=a.currentHeight??this.currentHeight,this.pinned=a.pinned??this.pinned,this.previousDimensions=a.previousDimensions??this.previousDimensions}catch(e){console.warn("Failed to load panel state",e)}}}saveState(){this.persistenceId&&localStorage.setItem("ui-panel-"+this.persistenceId,JSON.stringify({collapsed:this.collapsed,minimized:this.minimized,maximized:this.maximized,dragPosition:this.dragPosition,currentWidth:this.currentWidth,currentHeight:this.currentHeight,pinned:this.pinned,previousDimensions:this.previousDimensions}))}handleFocus=()=>{this.isActive=!0};handleBlur=()=>{this.isActive=!1};handleKeyDown=e=>{if(this.keyboardNav)if("Escape"===e.key&&this.showClose)this.handleClose(e);else if(" "!==e.key&&"Enter"!==e.key||!this.toggleable){if(this.isDraggable&&e.shiftKey){const a=this.snapToGrid?this.gridSize:20;"ArrowUp"===e.key&&(this.dragPosition={...this.dragPosition,y:this.dragPosition.y-a},e.preventDefault()),"ArrowDown"===e.key&&(this.dragPosition={...this.dragPosition,y:this.dragPosition.y+a},e.preventDefault()),"ArrowLeft"===e.key&&(this.dragPosition={...this.dragPosition,x:this.dragPosition.x-a},e.preventDefault()),"ArrowRight"===e.key&&(this.dragPosition={...this.dragPosition,x:this.dragPosition.x+a},e.preventDefault()),this.saveState(),this.panelDrag.emit({panelId:this.panelId,x:this.dragPosition.x,y:this.dragPosition.y})}}else e.preventDefault(),this.handleToggle()};handleMinimize=e=>{e.stopPropagation(),this.minimized=!this.minimized,this.minimized&&this.maximized&&(this.maximized=!1),this.panelMinimize.emit({panelId:this.panelId}),this.saveState()};handleMaximize=e=>{e.stopPropagation(),this.maximized?(this.maximized=!1,this.currentWidth=this.previousDimensions.width,this.currentHeight=this.previousDimensions.height,this.panelRestore.emit({panelId:this.panelId})):(this.previousDimensions={width:this.currentWidth,height:this.currentHeight},this.maximized=!0,this.minimized=!1,this.panelMaximize.emit({panelId:this.panelId})),this.saveState()};handleDragStart=e=>{this.isDraggable&&!this.maximized&&(this.isDragging=!0,this.dragStartX=e.clientX-this.dragPosition.x,this.dragStartY=e.clientY-this.dragPosition.y,this.initialRect=this.element.getBoundingClientRect(),this.lastMouseX=e.clientX,this.panelDragStart.emit({panelId:this.panelId,x:this.dragPosition.x,y:this.dragPosition.y}),document.addEventListener("mousemove",this.handleDragMove),document.addEventListener("mouseup",this.handleDragEnd))};handleDragMove=e=>{if(!this.isDragging)return;let a=e.clientX-this.dragStartX,t=e.clientY-this.dragStartY;if(this.dragPhysics){const a=e.clientX-this.lastMouseX;this.lastMouseX=e.clientX,this.dragTilt=Math.max(-15,Math.min(15,.4*a))}this.snapToGrid&&this.gridSize>0&&(a=Math.round(a/this.gridSize)*this.gridSize,t=Math.round(t/this.gridSize)*this.gridSize);let i=a,n=t;if("viewport"===this.bounds&&this.initialRect){const e=this.initialRect.left+i,a=this.initialRect.top+n,t=40,r=window.innerWidth,s=window.innerHeight;e+this.initialRect.width<t&&(i=t-this.initialRect.width-this.initialRect.left),e>r-t&&(i=r-t-this.initialRect.left),a<0&&(n=-this.initialRect.top),a>s-t&&(n=s-t-this.initialRect.top)}if(this.edgeSnapping&&this.initialRect){const e=this.initialRect.left+i,a=this.initialRect.top+n,t=window.innerWidth,r=window.innerHeight,s=this.snapThreshold;Math.abs(e)<s&&(i=-this.initialRect.left),Math.abs(a)<s&&(n=-this.initialRect.top),Math.abs(e+this.initialRect.width-t)<s&&(i=t-this.initialRect.width-this.initialRect.left),Math.abs(a+this.initialRect.height-r)<s&&(n=r-this.initialRect.height-this.initialRect.top)}this.dragPosition={x:i,y:n},this.panelDrag.emit({panelId:this.panelId,x:i,y:n})};handleDragEnd=()=>{if(this.isDragging){if(this.isDragging=!1,this.dragPhysics&&(this.dragTilt=0),this.edgeSnapping&&this.initialRect){const e=this.initialRect.left+this.dragPosition.x,a=window.innerWidth;e<=0?(this.maximized=!1,this.currentWidth="50vw",this.currentHeight="100vh",this.dragPosition={x:-this.initialRect.left,y:-this.initialRect.top}):e+this.initialRect.width>=a&&(this.maximized=!1,this.currentWidth="50vw",this.currentHeight="100vh",this.dragPosition={x:a-a/2-this.initialRect.left,y:-this.initialRect.top})}this.panelDragEnd.emit({panelId:this.panelId,x:this.dragPosition.x,y:this.dragPosition.y}),this.saveState(),document.removeEventListener("mousemove",this.handleDragMove),document.removeEventListener("mouseup",this.handleDragEnd)}};handleResizeStart=(e,a)=>{if(!this.resizable)return;e.stopPropagation(),this.isResizing=!0,this.resizeHandle=a,this.dragStartX=e.clientX,this.dragStartY=e.clientY;const t=this.element.getBoundingClientRect();this.resizeStartWidth=t.width,this.resizeStartHeight=t.height,this.panelResizeStart.emit({panelId:this.panelId,width:t.width,height:t.height}),document.addEventListener("mousemove",this.handleResizeMove),document.addEventListener("mouseup",this.handleResizeEnd)};handleResizeMove=e=>{if(!this.isResizing)return;const a=e.clientX-this.dragStartX,t=e.clientY-this.dragStartY;let i=this.resizeStartWidth,n=this.resizeStartHeight,r=0,s=0;this.resizeHandle.includes("e")&&(i+=a),this.resizeHandle.includes("w")&&(i-=a,r=a),this.resizeHandle.includes("s")&&(n+=t),this.resizeHandle.includes("n")&&(n-=t,s=t);const o=parseInt(this.minWidth)||200,l=parseInt(this.minHeight)||100;i<o&&(this.resizeHandle.includes("w")&&(r=this.resizeStartWidth-o),i=o),n<l&&(this.resizeHandle.includes("n")&&(s=this.resizeStartHeight-l),n=l),this.currentWidth=i+"px",this.currentHeight=n+"px",(this.resizeHandle.includes("w")||this.resizeHandle.includes("n"))&&(this.dragPosition={x:this.dragPosition.x+r,y:this.dragPosition.y+s}),this.panelResize.emit({panelId:this.panelId,width:i,height:n})};handleResizeEnd=()=>{if(!this.isResizing)return;this.isResizing=!1;const e=this.element.getBoundingClientRect();this.panelResizeEnd.emit({panelId:this.panelId,width:e.width,height:e.height}),this.saveState(),document.removeEventListener("mousemove",this.handleResizeMove),document.removeEventListener("mouseup",this.handleResizeEnd)};handleClose=e=>{e.stopPropagation(),this.panelClose.emit({panelId:this.panelId})};showActionList=!1;handleSettings=e=>{e.stopPropagation(),this.showActionList=!this.showActionList,this.panelSettings.emit({panelId:this.panelId}),this.showActionList?document.addEventListener("click",this.closeActionList):document.removeEventListener("click",this.closeActionList)};closeActionList=e=>{this.element.shadowRoot?.querySelector(".panel-settings-wrapper")?.contains(e.target)||this.element.contains(e.target)||(this.showActionList=!1,document.removeEventListener("click",this.closeActionList))};handleSearchInput=e=>{this.searchQuery=e.detail,this.panelSearch.emit({query:this.searchQuery})};handleToggle=()=>{this.toggleable&&(this.collapsed=!this.collapsed,this.toggle.emit({collapsed:this.collapsed}),this.saveState())};handlePinToggle=e=>{e.stopPropagation(),this.pinned=!this.pinned,this.saveState()};render(){const e={width:this.maximized?"100vw":this.currentWidth,height:this.collapsed||this.minimized?"auto":this.maximized?"100vh":this.currentHeight,maxWidth:this.maximized?"none":this.maxWidth,maxHeight:this.maximized?"none":this.maxHeight,"--animation-duration":this.animationDuration,transform:this.isDraggable?`translate(${this.dragPosition.x}px, ${this.dragPosition.y}px)`+(this.dragPhysics&&this.isDragging?` rotateY(${this.dragTilt}deg) rotateZ(${.1*this.dragTilt}deg)`:""):"",transition:this.isDragging&&!this.snapToGrid?"transform 0.1s ease-out":"transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.3s ease, height 0.3s ease",position:this.position||this.x||this.y||this.isDraggable||this.maximized?"fixed":"relative",top:this.maximized?"0":this.y?this.y:this.position?"":"auto",left:this.maximized?"0":this.x?this.x:this.position?"":"auto",right:this.position||this.x?"":"auto",bottom:this.position||this.y?"":"auto",zIndex:this.pinned||this.modal?"1000":this.isActive||this.isDraggable?"101":this.isDraggable?"100":"auto",margin:"0","--panel-bg":this.backgroundColor||"white","background-color":"var(--panel-bg, #ffffff)"},a={overflow:this.overflow};return i("div",{key:"843a2cdb343598710c2e3cf1d04994e362a0f33b",class:{"panel-container":!0,"panel-active":this.isActive,["panel-"+this.variant]:!0,["panel-theme-"+this.theme]:!0,["panel-animation-"+this.animationType]:!0,"panel-collapsed":this.collapsed,"panel-minimized":this.minimized,"panel-maximized":this.maximized,"panel-loading":this.loading,"panel-draggable":this.isDraggable,"panel-dragging":this.isDragging,"panel-resizable":this.resizable,"panel-resizing":this.isResizing,"panel-pinned":this.pinned,"panel-modal":this.modal,"panel-glass":this.glass,"panel-aura":this.aura,"panel-with-search":this.enableSearch,["panel-elevation-"+this.elevation]:!0,["panel-position-"+this.position]:!!this.position},style:e,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,tabindex:this.keyboardNav?0:-1,role:"region","aria-label":this.panelTitle||"Panel","aria-expanded":!this.collapsed&&!this.minimized},this.modal&&i("div",{key:"96a9377520a2998e820d02159da6bdaba2838dc9",class:"panel-backdrop",onClick:e=>{this.modal&&this.dismissible&&(e.stopPropagation(),this.handleClose(e))}}),i("div",{key:"92adc3528c404b4d4338a4c2960463a48abeb282",class:"panel-header",onClick:this.toggleable?this.handleToggle:void 0,onMouseDown:this.isDraggable?this.handleDragStart:void 0,style:{cursor:this.isDraggable?"move":this.toggleable?"pointer":"default"}},i("div",{key:"b8baae2f2f4c4ae873c0a6f332d87dda76e4e3cd",class:"panel-title-wrapper"},i("div",{key:"cf6ca464d5fefea869a43388126fdef0b3bf71a2",class:"panel-title"},this.icon&&i("span",{key:"a8c6607d8e1d0347440830458b1aaa13fef70966",class:"panel-header-icon-inline"},this.icon),this.panelTitle&&i("h3",{key:"2b99cbe49e2391639e619afa8ab2701def0deee3",class:"panel-title-text"},this.panelTitle),i("slot",{key:"62cdfbaff1db11a4005c8b5ac2b92627edd07ebf",name:"header-icon"}),this.badge&&i("span",{key:"1b90d8c207d75555523ac1bfd74a13cae26b41de",class:"panel-badge panel-badge-"+this.badgeVariant},"dot"===this.badgeVariant?"":this.badge)),this.panelSubtitle&&i("div",{key:"6b56cd614017acc97e28327cfea0d5b4e4a83ef7",class:"panel-subtitle"},this.panelSubtitle),i("slot",{key:"96e631d10bd2d3c35bca1183cc72a0c185fe0d05",name:"header"})),this.enableSearch&&i("div",{key:"1f2533ac720e317df6e0bf170bc16eb1eda5e764",class:"panel-search-container",onClick:e=>e.stopPropagation()},i("div",{key:"77afd05fef848e31b845692fe02d516987a4e963",class:"search-inner"},i("ui-icon",{key:"844401caaf4fcfcb744f806ec9badd3e4d3a6ff2",name:"search",library:"lucide",class:"search-icon",size:"1.2em"}),i("ui-input",{key:"ab85da17a38ac78c81d5bb776aca1f2dcb2f15c4",type:"text",placeholder:this.searchPlaceholder,onInputChange:this.handleSearchInput,value:this.searchQuery,size:"sm",fullWidth:!0}),this.searchQuery&&i("ui-button",{key:"b2c298aba23825796122bf235816c2eb3b36d9a4",variant:"ghost",class:"search-clear",onClick:()=>{this.searchQuery="",this.panelSearch.emit({query:""})},ariaLabel:"Clear search",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"xxs"}))),i("div",{key:"3c1bbc4de3923fab63d3d213a420ea20b9fc76f2",class:"panel-actions"},i("slot",{key:"4df5712a389b6b8f5a5fb819d7e2ebee0228dd42",name:"header-actions"}),i("ui-button",{key:"9da9f9d850fd944fa71e53ea305f3b9cd079a064",variant:"ghost",class:"panel-pin-btn "+(this.pinned?"active":""),onClick:this.handlePinToggle,ariaLabel:this.pinned?"Unpin":"Pin",icon:"pin",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:this.pinned?"Unpin":"Pin"}),this.minimizable&&!this.maximized&&i("ui-button",{key:"bb57989ff64f7e40cac99c20ab80b7ba3b5571ae",variant:"ghost",onClick:this.handleMinimize,ariaLabel:"Minimize panel",icon:"minus",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Minimize"}),this.maximizable&&!this.minimized&&i("ui-button",{key:"a8c74703bf14e4542825bbeb3d439288bf0ae6ca",variant:"ghost",onClick:this.handleMaximize,ariaLabel:this.maximized?"Restore":"Maximize",icon:this.maximized?"copy":"square",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:this.maximized?"Restore":"Maximize"}),this.showSettings&&i("div",{key:"cabe3fd3cbd49f8501f60c63fa308844bd33ab85",class:"panel-settings-wrapper",style:{position:"relative"}},i("ui-button",{key:"84ce872e7528dee72cfa2b574acf999a94b3cf03",variant:"ghost",onClick:this.handleSettings,ariaLabel:"Panel settings",icon:"settings",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Settings"}),this.showActionList&&i("div",{key:"4992efa9846d614f721bc06c7744694d0019f201",class:"panel-action-list-popup"},i("slot",{key:"2e13a0eb84b6bc48c02136e730915bd7b35ea432",name:"action-list"}))),this.toggleable&&i("ui-button",{key:"7b74e90b36016a2c2410bf59296d1c8b6ccb48f7",variant:"ghost",class:"panel-action-btn panel-toggle-btn "+(this.collapsed?"collapsed":""),onClick:e=>{e.stopPropagation(),this.handleToggle()},ariaLabel:this.collapsed?"Expand":"Collapse",icon:"chevron-up",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),this.showClose&&i("ui-button",{key:"7a84ee96567a763bbf68cc187807439a3ef70b1b",variant:"ghost",onClick:this.handleClose,ariaLabel:"Close panel",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Close"}))),!this.minimized&&i("div",{key:"d15ea87f83ad63ffea4edf8017b23c5795a3b848",class:"panel-body-wrapper"},this.loading&&i("div",{key:"d6e3f9c0c43950d232643a19bfb2907c138e1afd",class:"panel-loading-overlay"},i("div",{key:"08a48431ac6bb39b3c27444b18ea2f5cd29d55c0",class:"panel-spinner"})),i("div",{key:"c81065f34b525c67e082deffc9a41177c7b654d7",class:"panel-content "+(this.noPadding?"no-padding":""),style:a},i("slot",{key:"5aacbe8e43c160570596ac2aff83d00098b438c0",name:"content"}),i("slot",{key:"4caeef2dd57a822dc98c5fb1ec6fca10b3a62796"})),i("div",{key:"14d8117a5004c0522a0108a3879612cec4158344",class:"panel-footer"},i("slot",{key:"ca2f91902d37806ad5f4e4a5eebc67bc9fb5043a",name:"footer"}))),this.resizable&&!this.maximized&&!this.minimized&&i("div",{key:"4b22c21852d6f3cfc46c64d205db8d3276aabbbe",class:"panel-resize-handles"},i("div",{key:"3bcf0a8f5418adbe5e871d872c4355e6aa03f384",class:"resize-handle resize-n",onMouseDown:e=>this.handleResizeStart(e,"n")}),i("div",{key:"377eb4f44c1d2a2991b2cf92dd57ec5eb120b040",class:"resize-handle resize-s",onMouseDown:e=>this.handleResizeStart(e,"s")}),i("div",{key:"0bd73e6d97af791249f6876b013f5a162822477e",class:"resize-handle resize-e",onMouseDown:e=>this.handleResizeStart(e,"e")}),i("div",{key:"6f44b5ad062e97258b2bb29de30587e647bbde44",class:"resize-handle resize-w",onMouseDown:e=>this.handleResizeStart(e,"w")}),i("div",{key:"10dd0e6a1dc7a2c813090176b48b64882d26f694",class:"resize-handle resize-ne",onMouseDown:e=>this.handleResizeStart(e,"ne")}),i("div",{key:"b3bcb6031895a3e13da4466092a238c4dd78b0cd",class:"resize-handle resize-nw",onMouseDown:e=>this.handleResizeStart(e,"nw")}),i("div",{key:"8a194a9b536b1d562a549945fd9de12e28c8c70d",class:"resize-handle resize-se",onMouseDown:e=>this.handleResizeStart(e,"se")}),i("div",{key:"4ad815d53e99dd50929204ea6e7b40e73191a161",class:"resize-handle resize-sw",onMouseDown:e=>this.handleResizeStart(e,"sw")})))}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}.panel-container{display:flex;flex-direction:column;position:relative;background-color:var(--panel-bg, #ffffff);border-radius:var(--panel-border-radius, 8px);overflow:hidden;transition:box-shadow 0.2s ease, border-color 0.2s ease}.panel-elevated{border:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.panel-active.panel-elevated{box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);border-color:var(--color-primary, #10b981)}.panel-outlined{border:1px solid var(--panel-border-color, var(--border-strong, #d1d5db));box-shadow:none}.panel-filled{border:1px solid transparent;background-color:var(--panel-filled-bg, var(--bg-secondary, #f3f4f6));box-shadow:none}.panel-filled .panel-header{background-color:transparent;border-bottom:1px solid rgba(0, 0, 0, 0.05);}.panel-flat{border:none;box-shadow:none;background:transparent}.panel-flat .panel-header{background:transparent;border-bottom:1px solid var(--border-default, #e5e7eb);padding-left:0;padding-right:0}.panel-flat .panel-content{padding-left:0;padding-right:0}.panel-flat .panel-footer{padding-left:0;padding-right:0}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:var(--panel-header-bg, var(--bg-primary, var(--text-standard, #ffffff)));border-bottom:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));min-height:48px;user-select:none}.panel-title-wrapper{flex:1;display:flex;flex-direction:column;gap:2px;margin-right:16px}.panel-title{display:flex;align-items:center;gap:8px}.panel-title-text{margin:0;font-size:16px;font-weight:600;color:var(--panel-text-primary, var(--text-primary, #111827));line-height:1.4}.panel-subtitle{font-size:13px;color:var(--panel-text-secondary, var(--text-muted, #6b7280));line-height:1.4}.panel-actions{display:flex;align-items:center;gap:4px;}.panel-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:6px;color:var(--panel-action-color, var(--text-muted, #6b7280));cursor:pointer;transition:all 0.2s}.panel-action-btn:hover{background-color:var(--panel-action-hover-bg, var(--bg-secondary, #f3f4f6));color:var(--panel-text-primary, var(--text-primary, #111827))}.panel-action-btn:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:2px}.panel-action-btn .icon{width:18px;height:18px}.panel-action-list-popup{position:absolute;top:100%;right:0;margin-top:8px;background-color:var(--panel-bg, var(--bg-primary, var(--text-standard, #ffffff)));border:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);z-index:1001;min-width:150px;overflow:hidden}.panel-toggle-btn{transition:transform 0.3s ease}.panel-toggle-btn.collapsed{transform:rotate(180deg);}.panel-body-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;position:relative;overflow:hidden}.panel-collapsed .panel-body-wrapper{display:none}.panel-content{flex:1;padding:16px;overflow-y:auto;min-height:0;color:var(--panel-text-primary, var(--text-secondary, #374151));font-size:14px;line-height:1.5;}.panel-content::-webkit-scrollbar{width:6px}.panel-content::-webkit-scrollbar-track{background:transparent}.panel-content::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.1);border-radius:10px}.panel-content:hover::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2)}.panel-content.no-padding{padding:0}.panel-footer{padding:12px 16px;background-color:var(--panel-footer-bg, var(--bg-primary, #f9fafb));border-top:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));display:flex;align-items:center;justify-content:flex-end;gap:8px}.panel-loading-overlay{position:absolute;inset:0;background-color:rgba(255, 255, 255, 0.7);backdrop-filter:blur(2px);z-index:10;display:flex;align-items:center;justify-content:center}.panel-spinner{width:30px;height:30px;border:3px solid var(--border-default, #e5e7eb);border-top-color:var(--color-primary, #10b981);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.panel-container{--panel-bg:var(--bg-primary, #1f2937);--panel-border-color:var(--border-default, #374151);--panel-text-primary:var(--bg-primary, #f3f4f6);--panel-text-secondary:var(--color-primary, #9ca3af);--panel-header-bg:var(--bg-primary, #1f2937)}.panel-filled{background-color:var(--bg-secondary, var(--text-primary, #111827))}.panel-footer{--panel-footer-bg:var(--bg-secondary, #111827)}.panel-action-btn{--panel-action-color:var(--text-muted, #9ca3af);--panel-action-hover-bg:var(--color-primary, #374151)}.panel-loading-overlay{background-color:rgba(31, 41, 55, 0.7)}.panel-spinner{border-color:var(--border-strong, #4b5563);border-top-color:var(--color-primary, #60a5fa)}.panel-theme-primary{--panel-theme-bg:var(--color-primary, #1e3a8a);--panel-theme-text:var(--color-primary, #bfdbfe)}.panel-theme-success{--panel-theme-bg:var(--color-primary, #064e3b);--panel-theme-text:var(--color-success, #a7f3d0)}.panel-theme-warning{--panel-theme-bg:var(--color-danger, #78350f);--panel-theme-text:var(--color-primary, #fde68a)}.panel-theme-danger{--panel-theme-bg:var(--color-danger, #7f1d1d);--panel-theme-text:var(--color-danger, #fecaca)}.panel-theme-info{--panel-theme-bg:var(--color-primary, #164e63);--panel-theme-text:var(--color-primary, #a5f3fc)}}.panel-theme-primary{--panel-theme-color:var(--color-primary, #10b981);--panel-theme-bg:var(--bg-primary, #eff6ff);--panel-theme-border:var(--color-primary, #10b981);--panel-theme-text:var(--color-primary, #1e40af)}.panel-theme-success{--panel-theme-color:var(--color-success, #10b981);--panel-theme-bg:var(--bg-primary, #d1fae5);--panel-theme-border:var(--color-success, #10b981);--panel-theme-text:var(--color-primary, #065f46)}.panel-theme-warning{--panel-theme-color:var(--color-warning, #f59e0b);--panel-theme-bg:var(--bg-primary, #fef3c7);--panel-theme-border:var(--color-warning, #f59e0b);--panel-theme-text:var(--color-danger, #92400e)}.panel-theme-danger{--panel-theme-color:var(--color-danger, #ef4444);--panel-theme-bg:var(--bg-primary, #fee2e2);--panel-theme-border:var(--color-danger, #ef4444);--panel-theme-text:var(--color-danger, #991b1b)}.panel-theme-info{--panel-theme-color:var(--color-info, #06b6d4);--panel-theme-bg:var(--bg-primary, #cffafe);--panel-theme-border:var(--color-info, #06b6d4);--panel-theme-text:var(--color-primary, #155e75)}.panel-theme-primary .panel-header,.panel-theme-success .panel-header,.panel-theme-warning .panel-header,.panel-theme-danger .panel-header,.panel-theme-info .panel-header{background-color:var(--panel-theme-bg);border-bottom-color:var(--panel-theme-border);border-left:4px solid var(--panel-theme-color)}.panel-theme-primary .panel-title-text,.panel-theme-success .panel-title-text,.panel-theme-warning .panel-title-text,.panel-theme-danger .panel-title-text,.panel-theme-info .panel-title-text{color:var(--panel-theme-color)}.panel-theme-primary .panel-content,.panel-theme-success .panel-content,.panel-theme-warning .panel-content,.panel-theme-danger .panel-content,.panel-theme-info .panel-content{color:var(--panel-theme-text)}.panel-theme-primary .panel-subtitle,.panel-theme-success .panel-subtitle,.panel-theme-warning .panel-subtitle,.panel-theme-danger .panel-subtitle,.panel-theme-info .panel-subtitle{color:var(--panel-theme-text);opacity:0.8}.panel-badge{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:1;border-radius:10px;margin-left:8px}.panel-badge-dot{width:8px;height:8px;border-radius:50%;background-color:var(--panel-theme-color, var(--color-primary, #10b981))}.panel-badge-count,.panel-badge-text{padding:3px 8px;background-color:var(--panel-theme-color, var(--color-primary, #10b981));color:var(--text-standard, #ffffff);min-width:20px}@keyframes slideIn{from{max-height:0;opacity:0}to{max-height:1000px;opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes scaleIn{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}.panel-animation-slide .panel-body-wrapper{animation:slideIn var(--animation-duration, 300ms) ease-out}.panel-animation-fade .panel-body-wrapper{animation:fadeIn var(--animation-duration, 300ms) ease-out}.panel-animation-scale .panel-body-wrapper{animation:scaleIn var(--animation-duration, 300ms) ease-out}.panel-minimized .panel-body-wrapper{display:none}.panel-minimized{height:auto !important}.panel-maximized{position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;max-width:none !important;max-height:none !important;z-index:9999 !important;border-radius:0 !important}.panel-draggable{cursor:move}.panel-dragging{opacity:0.9;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);cursor:grabbing !important}.panel-draggable .panel-header{cursor:move}.panel-resizable{position:relative}.panel-resize-handles{position:absolute;inset:0;pointer-events:none}.resize-handle{position:absolute;pointer-events:all;z-index:10}.resize-n,.resize-s{left:0;right:0;height:8px;cursor:ns-resize}.resize-n{top:0}.resize-s{bottom:0}.resize-e,.resize-w{top:0;bottom:0;width:8px;cursor:ew-resize}.resize-e{right:0}.resize-w{left:0}.resize-ne,.resize-nw,.resize-se,.resize-sw{width:12px;height:12px}.resize-ne{top:0;right:0;cursor:nesw-resize}.resize-nw{top:0;left:0;cursor:nwse-resize}.resize-se{bottom:0;right:0;cursor:nwse-resize}.resize-sw{bottom:0;left:0;cursor:nesw-resize}.panel-resizing{user-select:none}.panel-pinned{z-index:1000;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25)}.panel-container:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:2px}.panel-minimize-btn:hover{background-color:var(--bg-primary, #fef3c7);color:var(--color-warning, #f59e0b)}.panel-maximize-btn:hover{background-color:var(--bg-primary, #dbeafe);color:var(--color-primary, #10b981)}@media (max-width: 768px){.panel-draggable{position:relative !important;transform:none !important}.panel-resizable .panel-resize-handles{display:none}}.panel-pin-btn.active{color:var(--color-primary, #10b981);background-color:var(--bg-primary, #dbeafe)}.panel-pin-btn.active svg{fill:currentColor}.panel-resizable::after{content:"";position:absolute;bottom:4px;right:4px;width:12px;height:12px;background-image:radial-gradient(circle, var(--bg-secondary, #d1d5db) 1px, transparent 1px);background-size:4px 4px;opacity:0.6;pointer-events:none}.panel-backdrop{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.4);backdrop-filter:blur(2px);z-index:999;animation:fadeIn 0.2s ease-out}.panel-modal{box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);z-index:1000}.panel-glass{background-color:rgba(255, 255, 255, 0.7);backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.3)}.panel-theme-dark .panel-glass,:host-context(.dark) .panel-glass{background-color:rgba(30, 41, 59, 0.6);border-color:rgba(255, 255, 255, 0.1)}[class*=panel-position-]{position:fixed;z-index:1000;margin:0}.panel-position-center{top:50%;left:50%;translate:-50% -50%}.panel-position-top{top:20px;left:50%;translate:-50% 0}.panel-position-bottom{bottom:20px;left:50%;translate:-50% 0}.panel-position-left{top:50%;left:20px;translate:0 -50%}.panel-position-right{top:50%;right:20px;translate:0 -50%}.panel-position-top-left{top:20px;left:20px}.panel-position-top-right{top:20px;right:20px}.panel-position-bottom-left{bottom:20px;left:20px}.panel-position-bottom-right{bottom:20px;right:20px}.panel-aura{box-shadow:0 0 0 0 var(--panel-theme-color, rgba(var(--color-primary-rgb, 59, 130, 246), 0.4));animation:panelAuraPulse 2s infinite}@keyframes panelAuraPulse{0%{box-shadow:0 0 0 0 var(--panel-theme-color, rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}70%{box-shadow:0 0 0 15px transparent}100%{box-shadow:0 0 0 0 transparent}}.panel-search-container{flex:1;max-width:300px;margin:0 20px}.search-inner{position:relative;display:flex;align-items:center;background:rgba(0, 0, 0, 0.05);border-radius:6px;padding:4px 8px;border:1px solid rgba(0, 0, 0, 0.05);transition:all 0.2s}.search-inner:focus-within{background:var(--bg-primary, #ffffff);border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.search-icon{width:14px;height:14px;opacity:0.5;margin-right:8px}.search-inner input{border:none;background:transparent;font-size:13px;width:100%;color:inherit;padding:2px 0;outline:none}.search-clear{background:none;border:none;color:var(--color-primary, #9ca3af);cursor:pointer;padding:0 4px;font-size:10px}.panel-elevation-0{box-shadow:none}.panel-elevation-1{box-shadow:0 1px 3px rgba(0, 0, 0, 0.12)}.panel-elevation-2{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1)}.panel-elevation-3{box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1)}.panel-elevation-4{box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1)}.panel-elevation-5{box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25)}@media (prefers-color-scheme: dark){.panel-content::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.1)}.panel-content:hover::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}}.panel-header-icon-inline{font-size:1.2em;line-height:1}'}},[769,"ui-panel",{panelId:[1,"panel-id"],width:[1],height:[1],maxWidth:[1,"max-width"],maxHeight:[1,"max-height"],showClose:[4,"show-close"],showSettings:[4,"show-settings"],panelTitle:[1,"panel-title"],panelSubtitle:[1,"panel-subtitle"],variant:[1],toggleable:[4],collapsed:[1540],loading:[4],noPadding:[4,"no-padding"],theme:[1],animationDuration:[1,"animation-duration"],animationType:[1,"animation-type"],badge:[8],badgeVariant:[1,"badge-variant"],icon:[1],keyboardNav:[4,"keyboard-nav"],aura:[4],enableSearch:[4,"enable-search"],searchPlaceholder:[1,"search-placeholder"],elevation:[2],minimizable:[4],maximizable:[4],minimized:[1540],maximized:[1540],isDraggable:[4,"is-draggable"],bounds:[1],edgeSnapping:[4,"edge-snapping"],snapThreshold:[2,"snap-threshold"],snapToGrid:[4,"snap-to-grid"],gridSize:[2,"grid-size"],dragPhysics:[4,"drag-physics"],resizable:[4],minWidth:[1,"min-width"],minHeight:[1,"min-height"],pinned:[1540],persistenceId:[1,"persistence-id"],overflow:[1],position:[1],x:[1],y:[1],modal:[4],dismissible:[4],glass:[4],backgroundColor:[1,"background-color"],isDragging:[32],isResizing:[32],currentWidth:[32],currentHeight:[32],isActive:[32],searchQuery:[32],dragPosition:[32],dragTilt:[32],showActionList:[32]}]),d=h,c=function(){"undefined"!=typeof customElements&&["ui-panel","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((e=>{switch(e){case"ui-panel":customElements.get(n(e))||customElements.define(n(e),h);break;case"ui-badge":customElements.get(n(e))||r();break;case"ui-button":customElements.get(n(e))||s();break;case"ui-icon":customElements.get(n(e))||o();break;case"ui-input":customElements.get(n(e))||l();break;case"ui-loader":customElements.get(n(e))||p()}}))};export{d as UiPanel,c as defineCustomElement}