atomicuilibrary 0.0.1 → 0.1.0

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,a as s}from"./badge.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))||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();break;case"ui-loader":customElements.get(n(e))||p()}}))};export{d as UiPanel,c as defineCustomElement}

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

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as a,h as i,Host as r,transformTag as s}from"@stencil/core/internal/client";import{d as n,a as o}from"./badge.js";import{d as p}from"./icon.js";import{d as c}from"./input.js";const l=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.patternInputChange=a(this,"patternInputChange",7),this.patternInput=a(this,"patternInput",7),this.patternInputFocus=a(this,"patternInputFocus",7),this.patternInputBlur=a(this,"patternInputBlur",7),this.patternInputValidate=a(this,"patternInputValidate",7)}inputElement;debounceTimer;value="";pattern;validationRegex;placeholder;label;name;disabled=!1;required=!1;size="md";showValidation=!0;allowedChars;autoFormat=!0;maskChar="#";showCounter=!1;maxLength;inputType="text";helperText;errorMessage;successMessage;rtl=!1;clearable=!1;isValid=!0;isTouched=!1;isFocused=!1;patternInputChange;patternInput;patternInputFocus;patternInputBlur;patternInputValidate;valueChanged(t){this.validateInput(t)}componentDidLoad(){this.value&&this.validateInput(this.value)}getInputTypeRegex(){switch(this.inputType){case"numeric":return/^[0-9]*$/;case"alpha":return/^[a-zA-Z]*$/;case"alphanumeric":return/^[a-zA-Z0-9]*$/;case"custom":return this.allowedChars?RegExp(this.allowedChars):null;default:return null}}isCharAllowed(t,e){const a=this.getInputTypeRegex();return!a||a.test(e+t)}extractRawValue(t){return this.pattern&&this.autoFormat?t.replace(/[^\w\s]/g,"").replace(/\s+/g,""):t}formatValue(t){if(!this.pattern||!this.autoFormat)return t;let e="",a=0;for(let i=0;i<this.pattern.length&&a<t.length;i++){const r=this.pattern[i];r===this.maskChar?(e+=t[a],a++):e+=r}return e}validateInput(t){if(!t&&!this.required)return this.isValid=!0,!0;if(!t&&this.required)return this.isValid=!1,!1;if(this.validationRegex)try{const e=RegExp(this.validationRegex),a=this.extractRawValue(t);this.isValid=e.test(a)}catch(t){console.error("Invalid validation regex:",t),this.isValid=!1}else this.isValid=!0;return this.isValid}handleInput=t=>{const e=this.extractRawValue(t.detail),a=this.autoFormat?this.formatValue(e):e;this.value=a;const i=this.validateInput(a);this.patternInput.emit({value:e,formatted:a}),clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{this.patternInputChange.emit({value:e,formatted:a,isValid:i}),this.patternInputValidate.emit({isValid:i,value:e})}),300)};handleKeyPress=t=>{if(this.disabled)return;const e=t.key;if(e.length>1||t.ctrlKey||t.metaKey)return;const a=this.extractRawValue(this.value);this.isCharAllowed(e,a)?this.maxLength&&a.length>=this.maxLength&&t.preventDefault():t.preventDefault()};handlePaste=t=>{if(this.disabled)return;t.preventDefault();const e=t.clipboardData?.getData("text")||"";let a="";for(const t of e)this.isCharAllowed(t,a)&&(a+=t);if(this.maxLength){const t=this.extractRawValue(this.value);a=a.substring(0,this.maxLength-t.length)}const i=this.autoFormat?this.formatValue(a):a;this.value=i,this.inputElement&&(this.inputElement.value=i);const r=this.validateInput(i);this.patternInputChange.emit({value:a,formatted:i,isValid:r})};handleFocus=()=>{this.isFocused=!0,this.patternInputFocus.emit()};handleBlur=()=>{this.isFocused=!1,this.isTouched=!0,this.patternInputBlur.emit()};getValidationMessage(){return this.isTouched&&this.showValidation?!this.isValid&&this.errorMessage?this.errorMessage:this.isValid&&this.value&&this.successMessage?this.successMessage:null:null}getCharCount(){return{current:this.extractRawValue(this.value).length,max:this.maxLength}}render(){const t=this.getValidationMessage(),e=this.getCharCount(),a=this.isTouched&&!this.isValid&&this.showValidation,s=this.isTouched&&this.isValid&&this.value&&this.showValidation;return i(r,{key:"e6cafe1df0d19d9aa631bb08d2396af558b95673",class:{"pattern-input-host":!0,"pattern-input-disabled":this.disabled,"pattern-input-focused":this.isFocused,"pattern-input-error":a,"pattern-input-success":s}},i("div",{key:"9c5996bb1d80efc3ddedc692f3a2161acddd93f7",class:"pattern-input-wrapper",dir:this.rtl?"rtl":"ltr"},this.label&&i("label",{key:"ea22f82e44ce4631d82fbe3d6a9bbce3a68b848b",class:"pattern-input-label"},this.label,this.required&&i("span",{key:"71ee8e5c5d50ad9e1fe81df81385813cf157b911",class:"pattern-input-required"},"*")),i("div",{key:"a4e05ef18befa44931881b5baa3f91b983017456",class:{"pattern-input-container":!0,["pattern-input-"+this.size]:!0,"pattern-input-container-focused":this.isFocused,"pattern-input-container-error":a,"pattern-input-container-success":s}},i("slot",{key:"a498a913a37bf11470bad5c9043caa196f2b860f",name:"prefix"}),i("ui-input",{key:"e8b7202121a6a5a1c27f2e2f26783d11c6fa1013",ref:t=>this.inputElement=t,type:"text",class:"pattern-input-field",value:this.value,placeholder:this.placeholder||this.pattern,disabled:this.disabled,required:this.required,name:this.name,maxLength:this.pattern?.length||this.maxLength,onInputChange:this.handleInput,onInputKeydown:t=>this.handleKeyPress(t.detail),onPasteInternal:t=>this.handlePaste(t.detail),onFocusInternal:this.handleFocus,onInputBlur:this.handleBlur,ariaInvalid:a,ariaRequired:this.required,fullWidth:!0,size:this.size}),this.showValidation&&i("span",{key:"fce03bbf3acc80f7cc48e011725d07a4381a9c1b",class:"pattern-input-status"},a&&i("ui-icon",{key:"e2fb5bb51afc46e381ee29c071564d4226826bd6",name:"x-circle",library:"lucide",size:"1.2em",class:"status-icon status-error"}),s&&i("ui-icon",{key:"ec772884ed89b461b0659acd66bf7d5816200e20",name:"check-circle",library:"lucide",size:"1.2em",class:"status-icon status-success"})),this.clearable&&this.value&&!this.disabled&&i("ui-button",{key:"f461b44289a9f0bd6a6f215288746ef4697efb6d",variant:"ghost",class:"pattern-input-clear",onClick:()=>{this.value="",this.patternInputChange.emit({value:"",formatted:"",isValid:!this.required})},ariaLabel:"Clear input",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),i("slot",{key:"453ce5f34c6384272b66d88a03e0ad897da4eada",name:"suffix"})),i("div",{key:"dc815745573df1a2edbaae6971543642e20e74ed",class:"pattern-input-footer"},i("div",{key:"58e39b130ffb2b694e462dca3909a1b0d8e2ebee",class:"pattern-input-messages"},this.helperText&&!t&&i("span",{key:"a0fb4ffbcc587ff0a5bab578e299df3653a2a19d",class:"helper-text"},this.helperText),t&&i("span",{key:"286eff6417e271b6a92423eb2c08a2247b96d6fb",class:{"validation-message":!0,"validation-error":a,"validation-success":s}},t)),this.showCounter&&i("span",{key:"99d1593a2012cb8c20d86c7de3cc4be8319c3aca",class:"char-counter"},e.current,e.max&&" / "+e.max))))}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:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.pattern-input-wrapper{display:flex;flex-direction:column;gap:8px}.pattern-input-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-secondary, #374151));margin-bottom:8px}.pattern-input-required{color:var(--color-danger, #ef4444);margin-left:4px}.pattern-input-container{position:relative;display:flex;align-items:center;background:var(--bg-primary, #ffffff);border:2px solid var(--border-strong, #d1d5db);border-radius:8px;transition:all 0.2s ease;padding:0 12px}.pattern-input-container:hover:not(.pattern-input-container-error){border-color:var(--color-primary, #9ca3af)}.pattern-input-container-focused{border-color:var(--color-primary-hover, #2563eb);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.pattern-input-container-error{border-color:var(--color-danger, #ef4444)}.pattern-input-container-error.pattern-input-container-focused{box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}.pattern-input-container-success{border-color:var(--color-success, #10b981)}.pattern-input-container-success.pattern-input-container-focused{box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 16, 185, 129), 0.1)}.pattern-input-field{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--text-primary, #1f2937);font-family:"Courier New", monospace;letter-spacing:0.5px}.pattern-input-field::placeholder{color:var(--text-muted, #9ca3af);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;letter-spacing:normal}.pattern-input-field:disabled{cursor:not-allowed;color:var(--text-muted, #9ca3af);background:var(--bg-primary, #f9fafb)}.pattern-input-sm{padding:6px 10px}.pattern-input-sm .pattern-input-field{font-size:13px;padding:2px 0}.pattern-input-md{padding:8px 12px}.pattern-input-md .pattern-input-field{font-size:14px;padding:4px 0}.pattern-input-lg{padding:10px 14px}.pattern-input-lg .pattern-input-field{font-size:16px;padding:6px 0}.pattern-input-status{display:flex;align-items:center;margin-left:8px}.status-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:bold}.status-error{background:var(--bg-primary, #fef2f2);color:var(--color-danger, #ef4444)}.status-success{background:var(--bg-primary, #f0fdf4);color:var(--color-success, #10b981)}.pattern-input-footer{display:flex;justify-content:space-between;align-items:flex-start;min-height:20px}.pattern-input-messages{flex:1}.helper-text,.validation-message{display:block;font-size:12px;line-height:1.4}.helper-text{color:var(--text-muted, #6b7280)}.validation-error{color:var(--color-danger, #ef4444);font-weight:500}.validation-success{color:var(--color-success, #10b981);font-weight:500}.char-counter{font-size:12px;color:var(--text-muted, #6b7280);font-weight:500;white-space:nowrap;margin-left:12px}.pattern-input-disabled{opacity:0.6;cursor:not-allowed}.pattern-input-disabled .pattern-input-container{background:var(--bg-primary, #f9fafb);cursor:not-allowed}.pattern-input-field:focus-visible{outline:none}.status-icon{animation:statusFadeIn 0.2s ease}@keyframes statusFadeIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}.pattern-input-field[placeholder]{text-overflow:ellipsis}:host(.pattern-input-focused) .pattern-input-field{font-family:"Courier New", monospace}'}},[769,"ui-pattern-input",{value:[1537],pattern:[1],validationRegex:[1,"validation-regex"],placeholder:[1],label:[1],name:[1],disabled:[4],required:[4],size:[1],showValidation:[4,"show-validation"],allowedChars:[1,"allowed-chars"],autoFormat:[4,"auto-format"],maskChar:[1,"mask-char"],showCounter:[4,"show-counter"],maxLength:[2,"max-length"],inputType:[1,"input-type"],helperText:[1,"helper-text"],errorMessage:[1,"error-message"],successMessage:[1,"success-message"],rtl:[4],clearable:[4],isValid:[32],isTouched:[32],isFocused:[32]},void 0,{value:[{valueChanged:0}]}]),u=l,d=function(){"undefined"!=typeof customElements&&["ui-pattern-input","ui-badge","ui-button","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-pattern-input":customElements.get(s(t))||customElements.define(s(t),l);break;case"ui-badge":customElements.get(s(t))||o();break;case"ui-button":customElements.get(s(t))||n();break;case"ui-icon":customElements.get(s(t))||p();break;case"ui-input":customElements.get(s(t))||c()}}))};export{u as UiPatternInput,d as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as a,h as i,Host as r,transformTag as s}from"@stencil/core/internal/client";import{d as n,a as o}from"./badge.js";import{d as p}from"./icon.js";import{d as c}from"./input.js";import{d as l}from"./loader.js";const u=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.patternInputChange=a(this,"patternInputChange",7),this.patternInput=a(this,"patternInput",7),this.patternInputFocus=a(this,"patternInputFocus",7),this.patternInputBlur=a(this,"patternInputBlur",7),this.patternInputValidate=a(this,"patternInputValidate",7)}inputElement;debounceTimer;value="";pattern;validationRegex;placeholder;label;name;disabled=!1;required=!1;size="md";showValidation=!0;allowedChars;autoFormat=!0;maskChar="#";showCounter=!1;maxLength;inputType="text";helperText;errorMessage;successMessage;rtl=!1;clearable=!1;isValid=!0;isTouched=!1;isFocused=!1;patternInputChange;patternInput;patternInputFocus;patternInputBlur;patternInputValidate;valueChanged(t){this.validateInput(t)}componentDidLoad(){this.value&&this.validateInput(this.value)}getInputTypeRegex(){switch(this.inputType){case"numeric":return/^[0-9]*$/;case"alpha":return/^[a-zA-Z]*$/;case"alphanumeric":return/^[a-zA-Z0-9]*$/;case"custom":return this.allowedChars?RegExp(this.allowedChars):null;default:return null}}isCharAllowed(t,e){const a=this.getInputTypeRegex();return!a||a.test(e+t)}extractRawValue(t){return this.pattern&&this.autoFormat?t.replace(/[^\w\s]/g,"").replace(/\s+/g,""):t}formatValue(t){if(!this.pattern||!this.autoFormat)return t;let e="",a=0;for(let i=0;i<this.pattern.length&&a<t.length;i++){const r=this.pattern[i];r===this.maskChar?(e+=t[a],a++):e+=r}return e}validateInput(t){if(!t&&!this.required)return this.isValid=!0,!0;if(!t&&this.required)return this.isValid=!1,!1;if(this.validationRegex)try{const e=RegExp(this.validationRegex),a=this.extractRawValue(t);this.isValid=e.test(a)}catch(t){console.error("Invalid validation regex:",t),this.isValid=!1}else this.isValid=!0;return this.isValid}handleInput=t=>{const e=this.extractRawValue(t.detail),a=this.autoFormat?this.formatValue(e):e;this.value=a;const i=this.validateInput(a);this.patternInput.emit({value:e,formatted:a}),clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{this.patternInputChange.emit({value:e,formatted:a,isValid:i}),this.patternInputValidate.emit({isValid:i,value:e})}),300)};handleKeyPress=t=>{if(this.disabled)return;const e=t.key;if(e.length>1||t.ctrlKey||t.metaKey)return;const a=this.extractRawValue(this.value);this.isCharAllowed(e,a)?this.maxLength&&a.length>=this.maxLength&&t.preventDefault():t.preventDefault()};handlePaste=t=>{if(this.disabled)return;t.preventDefault();const e=t.clipboardData?.getData("text")||"";let a="";for(const t of e)this.isCharAllowed(t,a)&&(a+=t);if(this.maxLength){const t=this.extractRawValue(this.value);a=a.substring(0,this.maxLength-t.length)}const i=this.autoFormat?this.formatValue(a):a;this.value=i,this.inputElement&&(this.inputElement.value=i);const r=this.validateInput(i);this.patternInputChange.emit({value:a,formatted:i,isValid:r})};handleFocus=()=>{this.isFocused=!0,this.patternInputFocus.emit()};handleBlur=()=>{this.isFocused=!1,this.isTouched=!0,this.patternInputBlur.emit()};getValidationMessage(){return this.isTouched&&this.showValidation?!this.isValid&&this.errorMessage?this.errorMessage:this.isValid&&this.value&&this.successMessage?this.successMessage:null:null}getCharCount(){return{current:this.extractRawValue(this.value).length,max:this.maxLength}}render(){const t=this.getValidationMessage(),e=this.getCharCount(),a=this.isTouched&&!this.isValid&&this.showValidation,s=this.isTouched&&this.isValid&&this.value&&this.showValidation;return i(r,{key:"9cfd6e56d3dd519cf55cac5e2235f2354a52721c",class:{"pattern-input-host":!0,"pattern-input-disabled":this.disabled,"pattern-input-focused":this.isFocused,"pattern-input-error":a,"pattern-input-success":s}},i("div",{key:"1671b3507d2aec67260e71b5d5474c0f0c7d651e",class:"pattern-input-wrapper",dir:this.rtl?"rtl":"ltr"},this.label&&i("label",{key:"930d777f7a89a971ba40dc70c7d40580efe61553",class:"pattern-input-label"},this.label,this.required&&i("span",{key:"ec37aa883c2685c3d5f6f8216555e1d7e1ea03fc",class:"pattern-input-required"},"*")),i("div",{key:"8072997dc60ce56e0c66aac528ffcc031c7279b8",class:{"pattern-input-container":!0,["pattern-input-"+this.size]:!0,"pattern-input-container-focused":this.isFocused,"pattern-input-container-error":a,"pattern-input-container-success":s}},i("slot",{key:"d6a57fddf8b72b150ded442c8a396cff618c67e4",name:"prefix"}),i("ui-input",{key:"e599eb6b3930f523b994e6ca144f11e2679bb578",ref:t=>this.inputElement=t,type:"text",class:"pattern-input-field",value:this.value,placeholder:this.placeholder||this.pattern,disabled:this.disabled,required:this.required,name:this.name,maxLength:this.pattern?.length||this.maxLength,onInputChange:this.handleInput,onInputKeydown:t=>this.handleKeyPress(t.detail),onPasteInternal:t=>this.handlePaste(t.detail),onFocusInternal:this.handleFocus,onInputBlur:this.handleBlur,ariaInvalid:a,ariaRequired:this.required,fullWidth:!0,size:this.size}),this.showValidation&&i("span",{key:"70fd6c40881eb546323d3328fa492b079b6af342",class:"pattern-input-status"},a&&i("ui-icon",{key:"6c7e1aa7143bd48d713e5a6151623a12f1c593d8",name:"x-circle",library:"lucide",size:"1.2em",class:"status-icon status-error"}),s&&i("ui-icon",{key:"1ca858ea0ce27bc2e58b27b30a35d5412bfde6c7",name:"check-circle",library:"lucide",size:"1.2em",class:"status-icon status-success"})),this.clearable&&this.value&&!this.disabled&&i("ui-button",{key:"099210c8bcb453b480c84069d4de050b7d0f4ee3",variant:"ghost",class:"pattern-input-clear",onClick:()=>{this.value="",this.patternInputChange.emit({value:"",formatted:"",isValid:!this.required})},ariaLabel:"Clear input",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),i("slot",{key:"e69b12741509f6d5882b15bc8f68adc962f0d83e",name:"suffix"})),i("div",{key:"85a62c89a440665d10cedbb79be5e46ea5415dae",class:"pattern-input-footer"},i("div",{key:"3c225fb91c2de23a2e142896eb83016cf5572e2e",class:"pattern-input-messages"},this.helperText&&!t&&i("span",{key:"6ad5311570c86551b4836977b6094028c13317c3",class:"helper-text"},this.helperText),t&&i("span",{key:"91e7c6a38f345345581f6835d141196b4539c0ce",class:{"validation-message":!0,"validation-error":a,"validation-success":s}},t)),this.showCounter&&i("span",{key:"ad4fd580ebc1fcd9923bc8e58064ee35935a057a",class:"char-counter"},e.current,e.max&&" / "+e.max))))}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:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.pattern-input-wrapper{display:flex;flex-direction:column;gap:8px}.pattern-input-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-secondary, #374151));margin-bottom:8px}.pattern-input-required{color:var(--color-danger, #ef4444);margin-left:4px}.pattern-input-container{position:relative;display:flex;align-items:center;background:var(--bg-primary, #ffffff);border:2px solid var(--border-strong, #d1d5db);border-radius:8px;transition:all 0.2s ease;padding:0 12px}.pattern-input-container:hover:not(.pattern-input-container-error){border-color:var(--color-primary, #9ca3af)}.pattern-input-container-focused{border-color:var(--color-primary-hover, #2563eb);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.pattern-input-container-error{border-color:var(--color-danger, #ef4444)}.pattern-input-container-error.pattern-input-container-focused{box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}.pattern-input-container-success{border-color:var(--color-success, #10b981)}.pattern-input-container-success.pattern-input-container-focused{box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 16, 185, 129), 0.1)}.pattern-input-field{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--text-primary, #1f2937);font-family:"Courier New", monospace;letter-spacing:0.5px}.pattern-input-field::placeholder{color:var(--text-muted, #9ca3af);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;letter-spacing:normal}.pattern-input-field:disabled{cursor:not-allowed;color:var(--text-muted, #9ca3af);background:var(--bg-primary, #f9fafb)}.pattern-input-sm{padding:6px 10px}.pattern-input-sm .pattern-input-field{font-size:13px;padding:2px 0}.pattern-input-md{padding:8px 12px}.pattern-input-md .pattern-input-field{font-size:14px;padding:4px 0}.pattern-input-lg{padding:10px 14px}.pattern-input-lg .pattern-input-field{font-size:16px;padding:6px 0}.pattern-input-status{display:flex;align-items:center;margin-left:8px}.status-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:bold}.status-error{background:var(--bg-primary, #fef2f2);color:var(--color-danger, #ef4444)}.status-success{background:var(--bg-primary, #f0fdf4);color:var(--color-success, #10b981)}.pattern-input-footer{display:flex;justify-content:space-between;align-items:flex-start;min-height:20px}.pattern-input-messages{flex:1}.helper-text,.validation-message{display:block;font-size:12px;line-height:1.4}.helper-text{color:var(--text-muted, #6b7280)}.validation-error{color:var(--color-danger, #ef4444);font-weight:500}.validation-success{color:var(--color-success, #10b981);font-weight:500}.char-counter{font-size:12px;color:var(--text-muted, #6b7280);font-weight:500;white-space:nowrap;margin-left:12px}.pattern-input-disabled{opacity:0.6;cursor:not-allowed}.pattern-input-disabled .pattern-input-container{background:var(--bg-primary, #f9fafb);cursor:not-allowed}.pattern-input-field:focus-visible{outline:none}.status-icon{animation:statusFadeIn 0.2s ease}@keyframes statusFadeIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}.pattern-input-field[placeholder]{text-overflow:ellipsis}:host(.pattern-input-focused) .pattern-input-field{font-family:"Courier New", monospace}'}},[769,"ui-pattern-input",{value:[1537],pattern:[1],validationRegex:[1,"validation-regex"],placeholder:[1],label:[1],name:[1],disabled:[4],required:[4],size:[1],showValidation:[4,"show-validation"],allowedChars:[1,"allowed-chars"],autoFormat:[4,"auto-format"],maskChar:[1,"mask-char"],showCounter:[4,"show-counter"],maxLength:[2,"max-length"],inputType:[1,"input-type"],helperText:[1,"helper-text"],errorMessage:[1,"error-message"],successMessage:[1,"success-message"],rtl:[4],clearable:[4],isValid:[32],isTouched:[32],isFocused:[32]},void 0,{value:[{valueChanged:0}]}]),d=u,h=function(){"undefined"!=typeof customElements&&["ui-pattern-input","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((t=>{switch(t){case"ui-pattern-input":customElements.get(s(t))||customElements.define(s(t),u);break;case"ui-badge":customElements.get(s(t))||o();break;case"ui-button":customElements.get(s(t))||n();break;case"ui-icon":customElements.get(s(t))||p();break;case"ui-input":customElements.get(s(t))||c();break;case"ui-loader":customElements.get(s(t))||l()}}))};export{d as UiPatternInput,h as defineCustomElement}

package/dist/components/ui-popover.js

@@ -1 +1 @@
-import{proxyCustomElement as o,HTMLElement as e,createEvent as r,h as t,transformTag as i}from"@stencil/core/internal/client";import{s,d as a}from"./icon.js";import{F as p}from"./focus-trap.js";import{a as n,c as h}from"./dom.js";import{d,a as l}from"./badge.js";const c=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.uiBeforeOpen=r(this,"uiBeforeOpen",7),this.uiOpen=r(this,"uiOpen",7),this.uiBeforeClose=r(this,"uiBeforeClose",7),this.uiClose=r(this,"uiClose",7),this.uiToggle=r(this,"uiToggle",7)}get element(){return this}heading="";target;content="";open=!1;disabled=!1;trigger="click";placement="top";showArrow=!0;width="280px";animation="scale";showCloseButton=!1;backdrop=!1;variant="light";popoverRole="dialog";showDelay=0;hideDelay=200;closeOnScroll=!1;closeOnEsc=!0;maxHeight="none";interactive=!0;loading=!1;skeleton=!1;offset=12;arrowSize=10;closeOnOutsideClick=!0;closeOnBlur=!0;matchTriggerWidth=!1;flip=!0;shift=!0;boundary="viewport";padding=24;fallbackPlacements;autoPlacement=!1;strategy="fixed";zIndex=21e3;uiBeforeOpen;uiOpen;uiBeforeClose;uiClose;uiToggle;currentPlacement="top";popoverStyles={};arrowStyles={};targetElement;popoverContent;arrowElement;hideTimeout;showTimeout;focusTrap;cleanupAutoUpdate;resizeObserver;latestSizeData={width:"",maxWidth:"",maxHeight:""};updateRetries=0;componentWillLoad(){this.currentPlacement=this.placement}componentDidLoad(){this.setupTrigger(),this.popoverContent=this.element.shadowRoot?.querySelector(".popover"),this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow"),this.popoverContent&&(this.resizeObserver=new ResizeObserver((()=>{this.open&&this.updatePosition()})),this.resizeObserver.observe(this.popoverContent)),window.addEventListener("keydown",this.handleGlobalKeyDown)}componentDidUpdate(){this.open&&!this.cleanupAutoUpdate&&this.startAutoUpdate()}disconnectedCallback(){this.cleanup(),this.cleanupAutoUpdate&&this.cleanupAutoUpdate(),window.removeEventListener("keydown",this.handleGlobalKeyDown),this.focusTrap&&this.focusTrap.deactivate()}visibilityChanged(o){if(o){if(this.disabled)return void(this.open=!1);this.handleOpen()}else this.handleClose()}handleTriggerConfigChange(){this.cleanup(),this.setupTrigger()}handleOpen(){this.targetElement||this.setupTrigger(),this.popoverContent=this.element.shadowRoot?.querySelector(".popover"),this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow"),this.popoverContent&&!this.resizeObserver&&(this.resizeObserver=new ResizeObserver((()=>{this.open&&this.updatePosition()})),this.resizeObserver.observe(this.popoverContent)),requestAnimationFrame((()=>{this.startAutoUpdate(),this.updateAriaAttributes(!0),this.closeOnOutsideClick&&setTimeout((()=>{document.addEventListener("click",this.handleOutsideClick)}),10),(this.backdrop||this.showCloseButton||"click"===this.trigger)&&requestAnimationFrame((()=>{this.initFocusTrap(),this.focusTrap&&this.focusTrap.activate()})),this.uiOpen.emit()}))}handleClose(){this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=void 0),document.removeEventListener("click",this.handleOutsideClick),this.focusTrap&&this.focusTrap.deactivate(),this.updateAriaAttributes(!1),this.uiClose.emit()}updateAriaAttributes(o){this.targetElement&&(this.targetElement.setAttribute("aria-expanded",""+o),this.targetElement.setAttribute("aria-haspopup","menu"===this.popoverRole?"menu":"true"))}initFocusTrap(){this.popoverContent&&(this.focusTrap||(this.focusTrap=new p(this.popoverContent,{initialFocus:this.popoverContent,returnFocus:this.targetElement,escapeDeactivates:!0,clickOutsideDeactivates:!this.backdrop})))}setupTrigger(){if(this.target&&(this.targetElement="string"==typeof this.target?document.querySelector(this.target):this.target),!this.targetElement){const o=this.element.shadowRoot?.querySelector('slot[name="trigger"]'),e=this.element.shadowRoot?.querySelector("slot:not([name])"),r=o=>{const e=o?.assignedElements();return e?.length>0?e[0]:null};this.targetElement=r(o)||r(e)}this.targetElement||(this.targetElement=this.element),this.targetElement&&"manual"!==this.trigger&&(["BUTTON","A","INPUT","SELECT","TEXTAREA"].includes(this.targetElement.tagName)||(this.targetElement.hasAttribute("role")||this.targetElement.setAttribute("role","button"),this.targetElement.hasAttribute("tabindex")||this.targetElement.setAttribute("tabindex","0")),"click"===this.trigger?(this.targetElement.addEventListener("click",this.handleTriggerClick),this.targetElement.addEventListener("keydown",this.handleTargetKeyDown)):"hover"===this.trigger?(this.targetElement.addEventListener("mouseenter",this.handleMouseEnter),this.targetElement.addEventListener("mouseleave",this.handleMouseLeave),this.targetElement.addEventListener("focusin",this.handleFocusIn),this.targetElement.addEventListener("focusout",this.handleFocusOut)):"focus"===this.trigger&&(this.targetElement.addEventListener("focusin",this.handleFocusIn),this.targetElement.addEventListener("focusout",this.handleFocusOut)),this.updateAriaAttributes(this.open))}handleTargetKeyDown=o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),this.toggle())};cleanup(){this.targetElement&&(this.targetElement.removeEventListener("click",this.handleTriggerClick),this.targetElement.removeEventListener("keydown",this.handleTargetKeyDown),this.targetElement.removeEventListener("mouseenter",this.handleMouseEnter),this.targetElement.removeEventListener("mouseleave",this.handleMouseLeave),this.targetElement.removeEventListener("focusin",this.handleFocusIn),this.targetElement.removeEventListener("focusout",this.handleFocusOut),document.removeEventListener("click",this.handleOutsideClick),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0))}handleTriggerClick=o=>{o.stopPropagation(),"click"===this.trigger&&this.toggle()};handleFocusIn=()=>{this.show()};handleFocusOut=()=>{this.hide()};handleOutsideClick=o=>{this.targetElement?.contains(o.target)||this.popoverContent?.contains(o.target)||this.open&&this.hide()};handleMouseEnter=()=>{this.disabled||(clearTimeout(this.hideTimeout),this.showDelay>0?this.showTimeout=setTimeout((()=>this.show()),this.showDelay):this.show())};handleMouseLeave=()=>{clearTimeout(this.showTimeout),this.hideTimeout=setTimeout((()=>this.hide()),this.hideDelay)};handlePopoverMouseEnter=()=>{"hover"===this.trigger&&this.interactive&&(clearTimeout(this.hideTimeout),clearTimeout(this.showTimeout))};handlePopoverMouseLeave=()=>{"hover"===this.trigger&&this.interactive&&this.handleMouseLeave()};handleGlobalKeyDown=o=>{this.open&&this.closeOnEsc&&"Escape"===o.key&&(o.stopPropagation(),this.hide())};startAutoUpdate(){this.cleanupAutoUpdate&&this.cleanupAutoUpdate(),this.popoverContent=this.element.shadowRoot?.querySelector(".popover"),this.showArrow&&(this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow")),this.targetElement&&this.popoverContent&&(this.cleanupAutoUpdate=n(this.targetElement,this.popoverContent,(()=>this.updatePosition()),{animationFrame:!0}))}async updatePosition(){if(this.popoverContent||(this.popoverContent=this.element.shadowRoot?.querySelector(".popover")),this.showArrow&&!this.arrowElement&&(this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow")),!this.open||!this.popoverContent||!this.targetElement)return void(this.updateRetries=0);if(0===this.popoverContent.offsetWidth&&this.updateRetries<5)return this.updateRetries++,void requestAnimationFrame((()=>this.updatePosition()));this.updateRetries=0;const{left:o,top:e,placement:r,availableHeight:t,availableWidth:i,arrowX:s,arrowY:a}=h(this.targetElement,{menuWidth:this.popoverContent.offsetWidth,menuHeight:this.popoverContent.offsetHeight,gap:this.offset,placement:this.autoPlacement?"auto":this.placement.split("-")[0],align:this.placement.includes("start")?"start":this.placement.includes("end")?"end":"center",padding:this.padding});this.currentPlacement=r,this.latestSizeData={width:this.width,maxWidth:Math.min(window.innerWidth-2*this.padding,i)+"px",maxHeight:"none"!==this.maxHeight?this.maxHeight:t+"px"};const p=this.latestSizeData;if(this.popoverStyles={position:this.strategy,left:o+"px",top:e+"px",width:this.matchTriggerWidth?this.targetElement.offsetWidth+"px":p.width||this.width,minWidth:"160px",maxWidth:p.maxWidth,maxHeight:p.maxHeight,visibility:"visible",opacity:"1"},this.showArrow&&this.arrowElement){const o=r,e={top:"bottom",right:"left",bottom:"top",left:"right"}[o],t=Math.round(this.arrowSize/2);this.arrowStyles={top:"",right:"",bottom:"",left:"",..."top"===o||"bottom"===o?{left:s+"px",transform:"translateX(-50%) rotate(45deg)"}:{top:a+"px",transform:"translateY(-50%) rotate(45deg)"},[e]:`-${t}px`}}}async reposition(){return this.updatePosition()}async computePlacement(){return this.currentPlacement}async show(){if(!this.disabled){if(this.uiBeforeOpen){const o=this.uiBeforeOpen.emit();if(o&&o.defaultPrevented)return}this.open=!0}}async hide(){if(this.uiBeforeClose){const o=this.uiBeforeClose.emit();if(o&&o.defaultPrevented)return}this.open=!1}async toggle(){this.disabled||(this.open?await this.hide():await this.show(),this.uiToggle&&this.uiToggle.emit({open:this.open}))}getPopoverStyle(){return{"--ui-popover-arrow-size":this.arrowSize+"px",zIndex:this.zIndex?""+this.zIndex:void 0}}render(){const o={popover:!0,"popover-visible":this.open,"popover-loading":this.loading,"popover-skeleton":this.skeleton,["popover-"+this.currentPlacement]:!0,["popover-"+this.variant]:!0,["popover-anim-"+this.animation]:!0},e={...this.getPopoverStyle(),...this.popoverStyles};return t("div",{key:"0f7778a7317e7842be132860b1dc61b611fa247d",class:"popover-wrapper"},t("div",{key:"2df4f3624d7335dbb9149b169778dfe288c4ff57",class:"popover-trigger"},t("slot",{key:"e0058a8f0c58e229df36e2ef47a402e4cf9e81dd",name:"trigger"}),t("slot",{key:"49c41549a41f352f0b94e6ae4dbde48435742ebc"})),this.backdrop&&this.open&&t("div",{key:"51851882bc67bd5a1a88d7a9f8bd44df99e3dee6",class:"popover-backdrop",onClick:()=>this.hide()}),this.open&&t("div",{key:"bd82cf9d153a7b228ac7696e407bb8a0d36ae942",class:o,style:e,onMouseEnter:()=>this.handlePopoverMouseEnter(),onMouseLeave:()=>this.handlePopoverMouseLeave(),role:this.popoverRole,"aria-modal":this.backdrop?"true":"false","aria-label":this.heading||void 0},this.showArrow&&t("div",{key:"545cb01f513e171e3d79a664ea57c5cbee6b5d07",class:"popover-arrow",style:this.arrowStyles}),t("div",{key:"bc8a9f93d49c2d1c201203728e731ef5a2850602",class:"popover-inner"},(this.heading||this.showCloseButton)&&t("div",{key:"9dee577314cc88f1bad7372006e593f34fa1a3fc",class:"popover-header"},this.heading&&t("div",{key:"7b0b3be1e8f6b0949969172eb74702034c661f6a",class:"popover-title"},this.heading),this.showCloseButton&&t("ui-button",{key:"d6dcc9b87b330797f6e29bf711df0504b386f5cb",variant:"ghost",size:"xxs",iconOnly:!0,class:"popover-close",onClick:()=>this.hide(),ariaLabel:"Close",icon:"x",iconLibrary:"lucide",iconSize:"14px"})),t("div",{key:"3639ca2119db19c98ce70fd11afe8ba4451cad2c",class:"popover-body",style:{maxHeight:this.maxHeight,overflowY:"none"!==this.maxHeight?"auto":void 0}},t("slot",{key:"43b5f442af61f83b9342a8a704a625155aabb0d3",name:"content"}),this.content&&t("div",{key:"1bd964f0709f66c335bfaaafe1bbe268554be279",innerHTML:s(this.content)})),t("slot",{key:"da80a35ef26a42ab2830e84ac81cdca2aef348f2",name:"footer"}))))}static get watchers(){return{open:[{visibilityChanged:0}],target:[{handleTriggerConfigChange:0}],trigger:[{handleTriggerConfigChange:0}]}}static get style(){return'@charset "UTF-8";.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}.popover-wrapper{position:relative;display:inline-block}.popover-trigger{display:inline-block;cursor:pointer}.popover-backdrop{position:fixed;inset-block-start:0;inset-inline-start:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:19999;cursor:default;animation:backdropIn 0.18s ease}@keyframes backdropIn{from{opacity:0}to{opacity:1}}.popover{position:fixed;z-index:21000;background:var(--popover-bg, var(--bg-primary, #ffffff));border:1px solid var(--popover-border, var(--border-default, #e5e7eb));border-radius:var(--popover-radius, 10px);box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);opacity:0;transition:opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);pointer-events:none;max-width:calc(100vw - 32px);word-wrap:break-word;overflow-wrap:break-word;overflow:visible;}.popover-visible{opacity:1;pointer-events:auto}.popover-inner{overflow:hidden;border-radius:inherit;max-height:inherit;}.popover-header{display:flex;align-items:center;justify-content:space-between;margin:0;padding-block:12px;padding-inline:16px;border-block-end:1px solid var(--popover-border, var(--border-default, #e5e7eb))}.popover-title{font-weight:700;font-size:14px;color:var(--popover-text-primary, var(--text-primary, #1f2937));margin:0;letter-spacing:-0.01em}.popover-close{background:transparent;border:none;color:var(--popover-text-secondary, var(--text-muted, #9ca3af));cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background 0.15s, color 0.15s;margin-inline-start:8px}.popover-close:hover{background:var(--popover-border, var(--border-default, #e5e7eb));color:var(--popover-text-primary, var(--text-primary, #1f2937))}.popover-body{padding-block:12px;padding-inline:16px;font-size:14px;color:var(--popover-text-secondary, var(--text-muted, #6b7280));line-height:1.6;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.15) transparent}.popover-body::-webkit-scrollbar{width:4px}.popover-body::-webkit-scrollbar-track{background:transparent}.popover-body::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.15);border-radius:2px}::slotted([slot=footer]){display:block;padding-block:10px;padding-inline:16px;border-block-start:1px solid var(--popover-border, var(--border-default, #e5e7eb));background:var(--popover-footer-bg, rgba(0, 0, 0, 0.02))}.popover-dark{--popover-bg:var(--bg-primary, #1f2937);--popover-border:var(--border-default, #374151);--popover-text-primary:var(--bg-primary, #f3f4f6);--popover-text-secondary:var(--bg-secondary, #d1d5db);--popover-footer-bg:rgba(255,255,255,0.04)}.popover-dark .popover-arrow{--popover-bg:var(--bg-primary, #1f2937);--popover-border:var(--border-default, #374151)}.popover-success{--popover-bg:var(--bg-primary, #f0fdf4);--popover-border:var(--color-success, #bbf7d0);--popover-text-primary:var(--color-success, #14532d);--popover-text-secondary:var(--color-success, #166534);--popover-footer-bg:rgba(var(--color-success-rgb, 16, 185, 129), 0.06)}.popover-success .popover-header{border-block-end-color:var(--color-success, #bbf7d0)}.popover-success .popover-title::before{content:"✓  ";color:var(--color-success, #16a34a)}.popover-warning{--popover-bg:var(--bg-primary, #fffbeb);--popover-border:var(--color-primary, #fde68a);--popover-text-primary:var(--color-danger, #78350f);--popover-text-secondary:var(--color-danger, #92400e);--popover-footer-bg:rgba(var(--color-warning-rgb, 245, 158, 11), 0.06)}.popover-warning .popover-header{border-block-end-color:var(--color-primary, #fde68a)}.popover-warning .popover-title::before{content:"⚠  ";color:var(--color-warning-hover, #d97706)}.popover-error{--popover-bg:var(--bg-primary, #fef2f2);--popover-border:var(--color-danger, #fecaca);--popover-text-primary:var(--color-danger, #7f1d1d);--popover-text-secondary:var(--color-danger, #991b1b);--popover-footer-bg:rgba(var(--color-danger-rgb, 239, 68, 68), 0.06)}.popover-error .popover-header{border-block-end-color:var(--color-danger, #fecaca)}.popover-error .popover-title::before{content:"✕  ";color:var(--color-danger-hover, #dc2626)}.popover-info{--popover-bg:var(--bg-primary, #eff6ff);--popover-border:var(--color-primary, #bfdbfe);--popover-text-primary:var(--color-primary, #1e3a8a);--popover-text-secondary:var(--color-primary, #1e40af);--popover-footer-bg:rgba(var(--color-primary-rgb, 59, 130, 246), 0.06)}.popover-info .popover-header{border-block-end-color:var(--color-primary, #bfdbfe)}.popover-info .popover-title::before{content:"ℹ  ";color:var(--color-primary-hover, #2563eb)}.popover-arrow{position:absolute;width:var(--ui-popover-arrow-size, 10px);height:var(--ui-popover-arrow-size, 10px);background:var(--popover-bg, var(--bg-primary, #ffffff));border:1px solid var(--popover-border, var(--border-default, #e5e7eb));transform:rotate(45deg);pointer-events:none;box-sizing:border-box;z-index:1;}.popover-top .popover-arrow,.popover-top-start .popover-arrow,.popover-top-end .popover-arrow{border-top:none;border-left:none;}.popover-bottom .popover-arrow,.popover-bottom-start .popover-arrow,.popover-bottom-end .popover-arrow{border-right:none;border-bottom:none;}.popover-left .popover-arrow,.popover-left-start .popover-arrow,.popover-left-end .popover-arrow{border-left:none;border-bottom:none;}.popover-right .popover-arrow,.popover-right-start .popover-arrow,.popover-right-end .popover-arrow{border-top:none;border-right:none;}.popover-anim-scale{transform:scale(0.92);transform-origin:center top}.popover-anim-scale.popover-bottom,.popover-anim-scale.popover-bottom-start,.popover-anim-scale.popover-bottom-end{transform-origin:center bottom}.popover-anim-scale.popover-left,.popover-anim-scale.popover-left-start,.popover-anim-scale.popover-left-end{transform-origin:right center}.popover-anim-scale.popover-right,.popover-anim-scale.popover-right-start,.popover-anim-scale.popover-right-end{transform-origin:left center}.popover-anim-scale.popover-visible{transform:scale(1)}.popover-anim-slide.popover-top,.popover-anim-slide.popover-top-start,.popover-anim-slide.popover-top-end{transform:translateY(8px)}.popover-anim-slide.popover-bottom,.popover-anim-slide.popover-bottom-start,.popover-anim-slide.popover-bottom-end{transform:translateY(-8px)}.popover-anim-slide.popover-left,.popover-anim-slide.popover-left-start,.popover-anim-slide.popover-left-end{transform:translateX(8px)}.popover-anim-slide.popover-right,.popover-anim-slide.popover-right-start,.popover-anim-slide.popover-right-end{transform:translateX(-8px)}.popover-anim-slide.popover-visible{transform:translate(0, 0)}.popover-skeleton .popover-body{display:flex;flex-direction:column;gap:10px;padding:16px}.popover-skeleton .popover-body::before,.popover-skeleton .popover-body::after{content:"";display:block;height:12px;border-radius:6px;background:linear-gradient(90deg, var(--bg-primary, #e5e7eb) 25%, var(--bg-secondary, #f3f4f6) 50%, var(--bg-primary, #e5e7eb) 75%);background-size:200% 100%;animation:skeletonShimmer 1.4s infinite}.popover-skeleton .popover-body::after{width:65%}@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.popover{transition:none;transform:none !important;opacity:1 !important;display:none}.popover-visible{display:block}}'}},[769,"ui-popover",{heading:[1],target:[1],content:[1],open:[1028],disabled:[4],trigger:[1],placement:[1],showArrow:[4,"show-arrow"],width:[1],animation:[1],showCloseButton:[4,"show-close-button"],backdrop:[4],variant:[1],popoverRole:[1,"popover-role"],showDelay:[2,"show-delay"],hideDelay:[2,"hide-delay"],closeOnScroll:[4,"close-on-scroll"],closeOnEsc:[4,"close-on-esc"],maxHeight:[1,"max-height"],interactive:[4],loading:[4],skeleton:[4],offset:[2],arrowSize:[2,"arrow-size"],closeOnOutsideClick:[4,"close-on-outside-click"],closeOnBlur:[4,"close-on-blur"],matchTriggerWidth:[4,"match-trigger-width"],flip:[4],shift:[4],boundary:[1],padding:[2],fallbackPlacements:[8,"fallback-placements"],autoPlacement:[4,"auto-placement"],strategy:[1],zIndex:[2,"z-index"],currentPlacement:[32],popoverStyles:[32],arrowStyles:[32],updatePosition:[64],reposition:[64],computePlacement:[64],show:[64],hide:[64],toggle:[64]},void 0,{open:[{visibilityChanged:0}],target:[{handleTriggerConfigChange:0}],trigger:[{handleTriggerConfigChange:0}]}]),v=c,b=function(){"undefined"!=typeof customElements&&["ui-popover","ui-badge","ui-button","ui-icon"].forEach((o=>{switch(o){case"ui-popover":customElements.get(i(o))||customElements.define(i(o),c);break;case"ui-badge":customElements.get(i(o))||l();break;case"ui-button":customElements.get(i(o))||d();break;case"ui-icon":customElements.get(i(o))||a()}}))};export{v as UiPopover,b as defineCustomElement}
+import{proxyCustomElement as o,HTMLElement as e,createEvent as r,h as t,transformTag as i}from"@stencil/core/internal/client";import{s,d as a}from"./icon.js";import{F as p}from"./focus-trap.js";import{a as n,c as h}from"./dom.js";import{d,a as l}from"./badge.js";import{d as c}from"./loader.js";const v=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.uiBeforeOpen=r(this,"uiBeforeOpen",7),this.uiOpen=r(this,"uiOpen",7),this.uiBeforeClose=r(this,"uiBeforeClose",7),this.uiClose=r(this,"uiClose",7),this.uiToggle=r(this,"uiToggle",7)}get element(){return this}heading="";target;content="";open=!1;disabled=!1;trigger="click";placement="top";showArrow=!0;width="280px";animation="scale";showCloseButton=!1;backdrop=!1;variant="light";popoverRole="dialog";showDelay=0;hideDelay=200;closeOnScroll=!1;closeOnEsc=!0;maxHeight="none";interactive=!0;loading=!1;skeleton=!1;offset=12;arrowSize=10;closeOnOutsideClick=!0;closeOnBlur=!0;matchTriggerWidth=!1;flip=!0;shift=!0;boundary="viewport";padding=24;fallbackPlacements;autoPlacement=!1;strategy="fixed";zIndex=21e3;uiBeforeOpen;uiOpen;uiBeforeClose;uiClose;uiToggle;currentPlacement="top";popoverStyles={};arrowStyles={};targetElement;popoverContent;arrowElement;hideTimeout;showTimeout;focusTrap;cleanupAutoUpdate;resizeObserver;latestSizeData={width:"",maxWidth:"",maxHeight:""};updateRetries=0;componentWillLoad(){this.currentPlacement=this.placement}componentDidLoad(){this.setupTrigger(),this.popoverContent=this.element.shadowRoot?.querySelector(".popover"),this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow"),this.popoverContent&&(this.resizeObserver=new ResizeObserver((()=>{this.open&&this.updatePosition()})),this.resizeObserver.observe(this.popoverContent)),window.addEventListener("keydown",this.handleGlobalKeyDown)}componentDidUpdate(){this.open&&!this.cleanupAutoUpdate&&this.startAutoUpdate()}disconnectedCallback(){this.cleanup(),this.cleanupAutoUpdate&&this.cleanupAutoUpdate(),window.removeEventListener("keydown",this.handleGlobalKeyDown),this.focusTrap&&this.focusTrap.deactivate()}visibilityChanged(o){if(o){if(this.disabled)return void(this.open=!1);this.handleOpen()}else this.handleClose()}handleTriggerConfigChange(){this.cleanup(),this.setupTrigger()}handleOpen(){this.targetElement||this.setupTrigger(),this.popoverContent=this.element.shadowRoot?.querySelector(".popover"),this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow"),this.popoverContent&&!this.resizeObserver&&(this.resizeObserver=new ResizeObserver((()=>{this.open&&this.updatePosition()})),this.resizeObserver.observe(this.popoverContent)),requestAnimationFrame((()=>{this.startAutoUpdate(),this.updateAriaAttributes(!0),this.closeOnOutsideClick&&setTimeout((()=>{document.addEventListener("click",this.handleOutsideClick)}),10),(this.backdrop||this.showCloseButton||"click"===this.trigger)&&requestAnimationFrame((()=>{this.initFocusTrap(),this.focusTrap&&this.focusTrap.activate()})),this.uiOpen.emit()}))}handleClose(){this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=void 0),document.removeEventListener("click",this.handleOutsideClick),this.focusTrap&&this.focusTrap.deactivate(),this.updateAriaAttributes(!1),this.uiClose.emit()}updateAriaAttributes(o){this.targetElement&&(this.targetElement.setAttribute("aria-expanded",""+o),this.targetElement.setAttribute("aria-haspopup","menu"===this.popoverRole?"menu":"true"))}initFocusTrap(){this.popoverContent&&(this.focusTrap||(this.focusTrap=new p(this.popoverContent,{initialFocus:this.popoverContent,returnFocus:this.targetElement,escapeDeactivates:!0,clickOutsideDeactivates:!this.backdrop})))}setupTrigger(){if(this.target&&(this.targetElement="string"==typeof this.target?document.querySelector(this.target):this.target),!this.targetElement){const o=this.element.shadowRoot?.querySelector('slot[name="trigger"]'),e=this.element.shadowRoot?.querySelector("slot:not([name])"),r=o=>{const e=o?.assignedElements();return e?.length>0?e[0]:null};this.targetElement=r(o)||r(e)}this.targetElement||(this.targetElement=this.element),this.targetElement&&"manual"!==this.trigger&&(["BUTTON","A","INPUT","SELECT","TEXTAREA"].includes(this.targetElement.tagName)||(this.targetElement.hasAttribute("role")||this.targetElement.setAttribute("role","button"),this.targetElement.hasAttribute("tabindex")||this.targetElement.setAttribute("tabindex","0")),"click"===this.trigger?(this.targetElement.addEventListener("click",this.handleTriggerClick),this.targetElement.addEventListener("keydown",this.handleTargetKeyDown)):"hover"===this.trigger?(this.targetElement.addEventListener("mouseenter",this.handleMouseEnter),this.targetElement.addEventListener("mouseleave",this.handleMouseLeave),this.targetElement.addEventListener("focusin",this.handleFocusIn),this.targetElement.addEventListener("focusout",this.handleFocusOut)):"focus"===this.trigger&&(this.targetElement.addEventListener("focusin",this.handleFocusIn),this.targetElement.addEventListener("focusout",this.handleFocusOut)),this.updateAriaAttributes(this.open))}handleTargetKeyDown=o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),this.toggle())};cleanup(){this.targetElement&&(this.targetElement.removeEventListener("click",this.handleTriggerClick),this.targetElement.removeEventListener("keydown",this.handleTargetKeyDown),this.targetElement.removeEventListener("mouseenter",this.handleMouseEnter),this.targetElement.removeEventListener("mouseleave",this.handleMouseLeave),this.targetElement.removeEventListener("focusin",this.handleFocusIn),this.targetElement.removeEventListener("focusout",this.handleFocusOut),document.removeEventListener("click",this.handleOutsideClick),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0))}handleTriggerClick=o=>{o.stopPropagation(),"click"===this.trigger&&this.toggle()};handleFocusIn=()=>{this.show()};handleFocusOut=()=>{this.hide()};handleOutsideClick=o=>{this.targetElement?.contains(o.target)||this.popoverContent?.contains(o.target)||this.open&&this.hide()};handleMouseEnter=()=>{this.disabled||(clearTimeout(this.hideTimeout),this.showDelay>0?this.showTimeout=setTimeout((()=>this.show()),this.showDelay):this.show())};handleMouseLeave=()=>{clearTimeout(this.showTimeout),this.hideTimeout=setTimeout((()=>this.hide()),this.hideDelay)};handlePopoverMouseEnter=()=>{"hover"===this.trigger&&this.interactive&&(clearTimeout(this.hideTimeout),clearTimeout(this.showTimeout))};handlePopoverMouseLeave=()=>{"hover"===this.trigger&&this.interactive&&this.handleMouseLeave()};handleGlobalKeyDown=o=>{this.open&&this.closeOnEsc&&"Escape"===o.key&&(o.stopPropagation(),this.hide())};startAutoUpdate(){this.cleanupAutoUpdate&&this.cleanupAutoUpdate(),this.popoverContent=this.element.shadowRoot?.querySelector(".popover"),this.showArrow&&(this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow")),this.targetElement&&this.popoverContent&&(this.cleanupAutoUpdate=n(this.targetElement,this.popoverContent,(()=>this.updatePosition()),{animationFrame:!0}))}async updatePosition(){if(this.popoverContent||(this.popoverContent=this.element.shadowRoot?.querySelector(".popover")),this.showArrow&&!this.arrowElement&&(this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow")),!this.open||!this.popoverContent||!this.targetElement)return void(this.updateRetries=0);if(0===this.popoverContent.offsetWidth&&this.updateRetries<5)return this.updateRetries++,void requestAnimationFrame((()=>this.updatePosition()));this.updateRetries=0;const{left:o,top:e,placement:r,availableHeight:t,availableWidth:i,arrowX:s,arrowY:a}=h(this.targetElement,{menuWidth:this.popoverContent.offsetWidth,menuHeight:this.popoverContent.offsetHeight,gap:this.offset,placement:this.autoPlacement?"auto":this.placement.split("-")[0],align:this.placement.includes("start")?"start":this.placement.includes("end")?"end":"center",padding:this.padding});this.currentPlacement=r,this.latestSizeData={width:this.width,maxWidth:Math.min(window.innerWidth-2*this.padding,i)+"px",maxHeight:"none"!==this.maxHeight?this.maxHeight:t+"px"};const p=this.latestSizeData;if(this.popoverStyles={position:this.strategy,left:o+"px",top:e+"px",width:this.matchTriggerWidth?this.targetElement.offsetWidth+"px":p.width||this.width,minWidth:"160px",maxWidth:p.maxWidth,maxHeight:p.maxHeight,visibility:"visible",opacity:"1"},this.showArrow&&this.arrowElement){const o=r,e={top:"bottom",right:"left",bottom:"top",left:"right"}[o],t=Math.round(this.arrowSize/2);this.arrowStyles={top:"",right:"",bottom:"",left:"",..."top"===o||"bottom"===o?{left:s+"px",transform:"translateX(-50%) rotate(45deg)"}:{top:a+"px",transform:"translateY(-50%) rotate(45deg)"},[e]:`-${t}px`}}}async reposition(){return this.updatePosition()}async computePlacement(){return this.currentPlacement}async show(){if(!this.disabled){if(this.uiBeforeOpen){const o=this.uiBeforeOpen.emit();if(o&&o.defaultPrevented)return}this.open=!0}}async hide(){if(this.uiBeforeClose){const o=this.uiBeforeClose.emit();if(o&&o.defaultPrevented)return}this.open=!1}async toggle(){this.disabled||(this.open?await this.hide():await this.show(),this.uiToggle&&this.uiToggle.emit({open:this.open}))}getPopoverStyle(){return{"--ui-popover-arrow-size":this.arrowSize+"px",zIndex:this.zIndex?""+this.zIndex:void 0}}render(){const o={popover:!0,"popover-visible":this.open,"popover-loading":this.loading,"popover-skeleton":this.skeleton,["popover-"+this.currentPlacement]:!0,["popover-"+this.variant]:!0,["popover-anim-"+this.animation]:!0},e={...this.getPopoverStyle(),...this.popoverStyles};return t("div",{key:"0f7778a7317e7842be132860b1dc61b611fa247d",class:"popover-wrapper"},t("div",{key:"2df4f3624d7335dbb9149b169778dfe288c4ff57",class:"popover-trigger"},t("slot",{key:"e0058a8f0c58e229df36e2ef47a402e4cf9e81dd",name:"trigger"}),t("slot",{key:"49c41549a41f352f0b94e6ae4dbde48435742ebc"})),this.backdrop&&this.open&&t("div",{key:"51851882bc67bd5a1a88d7a9f8bd44df99e3dee6",class:"popover-backdrop",onClick:()=>this.hide()}),this.open&&t("div",{key:"bd82cf9d153a7b228ac7696e407bb8a0d36ae942",class:o,style:e,onMouseEnter:()=>this.handlePopoverMouseEnter(),onMouseLeave:()=>this.handlePopoverMouseLeave(),role:this.popoverRole,"aria-modal":this.backdrop?"true":"false","aria-label":this.heading||void 0},this.showArrow&&t("div",{key:"545cb01f513e171e3d79a664ea57c5cbee6b5d07",class:"popover-arrow",style:this.arrowStyles}),t("div",{key:"bc8a9f93d49c2d1c201203728e731ef5a2850602",class:"popover-inner"},(this.heading||this.showCloseButton)&&t("div",{key:"9dee577314cc88f1bad7372006e593f34fa1a3fc",class:"popover-header"},this.heading&&t("div",{key:"7b0b3be1e8f6b0949969172eb74702034c661f6a",class:"popover-title"},this.heading),this.showCloseButton&&t("ui-button",{key:"d6dcc9b87b330797f6e29bf711df0504b386f5cb",variant:"ghost",size:"xxs",iconOnly:!0,class:"popover-close",onClick:()=>this.hide(),ariaLabel:"Close",icon:"x",iconLibrary:"lucide",iconSize:"14px"})),t("div",{key:"3639ca2119db19c98ce70fd11afe8ba4451cad2c",class:"popover-body",style:{maxHeight:this.maxHeight,overflowY:"none"!==this.maxHeight?"auto":void 0}},t("slot",{key:"43b5f442af61f83b9342a8a704a625155aabb0d3",name:"content"}),this.content&&t("div",{key:"1bd964f0709f66c335bfaaafe1bbe268554be279",innerHTML:s(this.content)})),t("slot",{key:"da80a35ef26a42ab2830e84ac81cdca2aef348f2",name:"footer"}))))}static get watchers(){return{open:[{visibilityChanged:0}],target:[{handleTriggerConfigChange:0}],trigger:[{handleTriggerConfigChange:0}]}}static get style(){return'@charset "UTF-8";.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}.popover-wrapper{position:relative;display:inline-block}.popover-trigger{display:inline-block;cursor:pointer}.popover-backdrop{position:fixed;inset-block-start:0;inset-inline-start:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:19999;cursor:default;animation:backdropIn 0.18s ease}@keyframes backdropIn{from{opacity:0}to{opacity:1}}.popover{position:fixed;z-index:21000;background:var(--popover-bg, var(--bg-primary, #ffffff));border:1px solid var(--popover-border, var(--border-default, #e5e7eb));border-radius:var(--popover-radius, 10px);box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);opacity:0;transition:opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);pointer-events:none;max-width:calc(100vw - 32px);word-wrap:break-word;overflow-wrap:break-word;overflow:visible;}.popover-visible{opacity:1;pointer-events:auto}.popover-inner{overflow:hidden;border-radius:inherit;max-height:inherit;}.popover-header{display:flex;align-items:center;justify-content:space-between;margin:0;padding-block:12px;padding-inline:16px;border-block-end:1px solid var(--popover-border, var(--border-default, #e5e7eb))}.popover-title{font-weight:700;font-size:14px;color:var(--popover-text-primary, var(--text-primary, #1f2937));margin:0;letter-spacing:-0.01em}.popover-close{background:transparent;border:none;color:var(--popover-text-secondary, var(--text-muted, #9ca3af));cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background 0.15s, color 0.15s;margin-inline-start:8px}.popover-close:hover{background:var(--popover-border, var(--border-default, #e5e7eb));color:var(--popover-text-primary, var(--text-primary, #1f2937))}.popover-body{padding-block:12px;padding-inline:16px;font-size:14px;color:var(--popover-text-secondary, var(--text-muted, #6b7280));line-height:1.6;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.15) transparent}.popover-body::-webkit-scrollbar{width:4px}.popover-body::-webkit-scrollbar-track{background:transparent}.popover-body::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.15);border-radius:2px}::slotted([slot=footer]){display:block;padding-block:10px;padding-inline:16px;border-block-start:1px solid var(--popover-border, var(--border-default, #e5e7eb));background:var(--popover-footer-bg, rgba(0, 0, 0, 0.02))}.popover-dark{--popover-bg:var(--bg-primary, #1f2937);--popover-border:var(--border-default, #374151);--popover-text-primary:var(--bg-primary, #f3f4f6);--popover-text-secondary:var(--bg-secondary, #d1d5db);--popover-footer-bg:rgba(255,255,255,0.04)}.popover-dark .popover-arrow{--popover-bg:var(--bg-primary, #1f2937);--popover-border:var(--border-default, #374151)}.popover-success{--popover-bg:var(--bg-primary, #f0fdf4);--popover-border:var(--color-success, #bbf7d0);--popover-text-primary:var(--color-success, #14532d);--popover-text-secondary:var(--color-success, #166534);--popover-footer-bg:rgba(var(--color-success-rgb, 16, 185, 129), 0.06)}.popover-success .popover-header{border-block-end-color:var(--color-success, #bbf7d0)}.popover-success .popover-title::before{content:"✓  ";color:var(--color-success, #16a34a)}.popover-warning{--popover-bg:var(--bg-primary, #fffbeb);--popover-border:var(--color-primary, #fde68a);--popover-text-primary:var(--color-danger, #78350f);--popover-text-secondary:var(--color-danger, #92400e);--popover-footer-bg:rgba(var(--color-warning-rgb, 245, 158, 11), 0.06)}.popover-warning .popover-header{border-block-end-color:var(--color-primary, #fde68a)}.popover-warning .popover-title::before{content:"⚠  ";color:var(--color-warning-hover, #d97706)}.popover-error{--popover-bg:var(--bg-primary, #fef2f2);--popover-border:var(--color-danger, #fecaca);--popover-text-primary:var(--color-danger, #7f1d1d);--popover-text-secondary:var(--color-danger, #991b1b);--popover-footer-bg:rgba(var(--color-danger-rgb, 239, 68, 68), 0.06)}.popover-error .popover-header{border-block-end-color:var(--color-danger, #fecaca)}.popover-error .popover-title::before{content:"✕  ";color:var(--color-danger-hover, #dc2626)}.popover-info{--popover-bg:var(--bg-primary, #eff6ff);--popover-border:var(--color-primary, #bfdbfe);--popover-text-primary:var(--color-primary, #1e3a8a);--popover-text-secondary:var(--color-primary, #1e40af);--popover-footer-bg:rgba(var(--color-primary-rgb, 59, 130, 246), 0.06)}.popover-info .popover-header{border-block-end-color:var(--color-primary, #bfdbfe)}.popover-info .popover-title::before{content:"ℹ  ";color:var(--color-primary-hover, #2563eb)}.popover-arrow{position:absolute;width:var(--ui-popover-arrow-size, 10px);height:var(--ui-popover-arrow-size, 10px);background:var(--popover-bg, var(--bg-primary, #ffffff));border:1px solid var(--popover-border, var(--border-default, #e5e7eb));transform:rotate(45deg);pointer-events:none;box-sizing:border-box;z-index:1;}.popover-top .popover-arrow,.popover-top-start .popover-arrow,.popover-top-end .popover-arrow{border-top:none;border-left:none;}.popover-bottom .popover-arrow,.popover-bottom-start .popover-arrow,.popover-bottom-end .popover-arrow{border-right:none;border-bottom:none;}.popover-left .popover-arrow,.popover-left-start .popover-arrow,.popover-left-end .popover-arrow{border-left:none;border-bottom:none;}.popover-right .popover-arrow,.popover-right-start .popover-arrow,.popover-right-end .popover-arrow{border-top:none;border-right:none;}.popover-anim-scale{transform:scale(0.92);transform-origin:center top}.popover-anim-scale.popover-bottom,.popover-anim-scale.popover-bottom-start,.popover-anim-scale.popover-bottom-end{transform-origin:center bottom}.popover-anim-scale.popover-left,.popover-anim-scale.popover-left-start,.popover-anim-scale.popover-left-end{transform-origin:right center}.popover-anim-scale.popover-right,.popover-anim-scale.popover-right-start,.popover-anim-scale.popover-right-end{transform-origin:left center}.popover-anim-scale.popover-visible{transform:scale(1)}.popover-anim-slide.popover-top,.popover-anim-slide.popover-top-start,.popover-anim-slide.popover-top-end{transform:translateY(8px)}.popover-anim-slide.popover-bottom,.popover-anim-slide.popover-bottom-start,.popover-anim-slide.popover-bottom-end{transform:translateY(-8px)}.popover-anim-slide.popover-left,.popover-anim-slide.popover-left-start,.popover-anim-slide.popover-left-end{transform:translateX(8px)}.popover-anim-slide.popover-right,.popover-anim-slide.popover-right-start,.popover-anim-slide.popover-right-end{transform:translateX(-8px)}.popover-anim-slide.popover-visible{transform:translate(0, 0)}.popover-skeleton .popover-body{display:flex;flex-direction:column;gap:10px;padding:16px}.popover-skeleton .popover-body::before,.popover-skeleton .popover-body::after{content:"";display:block;height:12px;border-radius:6px;background:linear-gradient(90deg, var(--bg-primary, #e5e7eb) 25%, var(--bg-secondary, #f3f4f6) 50%, var(--bg-primary, #e5e7eb) 75%);background-size:200% 100%;animation:skeletonShimmer 1.4s infinite}.popover-skeleton .popover-body::after{width:65%}@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.popover{transition:none;transform:none !important;opacity:1 !important;display:none}.popover-visible{display:block}}'}},[769,"ui-popover",{heading:[1],target:[1],content:[1],open:[1028],disabled:[4],trigger:[1],placement:[1],showArrow:[4,"show-arrow"],width:[1],animation:[1],showCloseButton:[4,"show-close-button"],backdrop:[4],variant:[1],popoverRole:[1,"popover-role"],showDelay:[2,"show-delay"],hideDelay:[2,"hide-delay"],closeOnScroll:[4,"close-on-scroll"],closeOnEsc:[4,"close-on-esc"],maxHeight:[1,"max-height"],interactive:[4],loading:[4],skeleton:[4],offset:[2],arrowSize:[2,"arrow-size"],closeOnOutsideClick:[4,"close-on-outside-click"],closeOnBlur:[4,"close-on-blur"],matchTriggerWidth:[4,"match-trigger-width"],flip:[4],shift:[4],boundary:[1],padding:[2],fallbackPlacements:[8,"fallback-placements"],autoPlacement:[4,"auto-placement"],strategy:[1],zIndex:[2,"z-index"],currentPlacement:[32],popoverStyles:[32],arrowStyles:[32],updatePosition:[64],reposition:[64],computePlacement:[64],show:[64],hide:[64],toggle:[64]},void 0,{open:[{visibilityChanged:0}],target:[{handleTriggerConfigChange:0}],trigger:[{handleTriggerConfigChange:0}]}]),b=v,m=function(){"undefined"!=typeof customElements&&["ui-popover","ui-badge","ui-button","ui-icon","ui-loader"].forEach((o=>{switch(o){case"ui-popover":customElements.get(i(o))||customElements.define(i(o),v);break;case"ui-badge":customElements.get(i(o))||l();break;case"ui-button":customElements.get(i(o))||d();break;case"ui-icon":customElements.get(i(o))||a();break;case"ui-loader":customElements.get(i(o))||c()}}))};export{b as UiPopover,m as defineCustomElement}

package/dist/components/ui-progress.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as s,Host as i,transformTag as o}from"@stencil/core/internal/client";import{d as a,a as n}from"./badge.js";import{d as l}from"./icon.js";const p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.progressChange=r(this,"progressChange",7)}type="line";percent=0;status="normal";currentStatus="normal";strokeWidth=10;strokeColor="#1890ff";trailColor="#f0f0f0";gradient=!1;showInfo=!0;format=e=>e+"%";size="default";width="100%";height="100%";strokeLinecap="round";success=null;steps=0;gapDegree=0;gapPosition="top";multiProgress=[];buffer=0;showBuffer=!1;paused=!1;showPauseButton=!1;estimatedTime=0;showTimeEstimate=!1;milestones=[];indeterminate=!1;decimalPrecision=0;percentageColor="";liquid=!1;thresholds=[];icon="";iconLibrary="lucide";skeleton=!1;peakMarker=0;vitality=!1;dataLabels="";glass=!1;glow=!1;labelPosition="outside";orientation="horizontal";interactive=!1;ticks=0;animatedPercent=0;isDragging=!1;gradientId="ui-progress-gradient-"+Math.random().toString(36).substr(2,9);get el(){return this}progressChange;componentWillLoad(){this.animatedPercent=this.percent,this.currentStatus=this.status,this.normalizeProps()}normalizeProps(){try{"string"==typeof this.milestones&&(this.milestones=JSON.parse(this.milestones)),"string"==typeof this.thresholds&&(this.thresholds=JSON.parse(this.thresholds)),"string"==typeof this.success&&(this.success=JSON.parse(this.success)),"string"==typeof this.strokeColor&&this.strokeColor.startsWith("{")&&(this.strokeColor=JSON.parse(this.strokeColor)),"string"==typeof this.multiProgress&&(this.multiProgress=JSON.parse(this.multiProgress))}catch(e){console.warn("Failed to parse complex progress prop",e)}}handlePercentChange(e){e>this.peakMarker&&(this.peakMarker=e),this.animateProgress(e),this.applyThresholds(e)}handleStrokeColorChange(){this.normalizeProps()}applyThresholds(e){if(!this.thresholds.length)return;const t=[...this.thresholds].sort(((e,t)=>t.percent-e.percent)).find((t=>e>=t.percent));t?(t.status&&(this.currentStatus=t.status),t.color&&(this.strokeColor=t.color)):this.currentStatus=this.status}animateProgress(e){const t=this.animatedPercent,r=e-t,s=Date.now(),i=()=>{const e=Date.now(),o=Math.min((e-s)/500,1);this.animatedPercent=t+r*this.easeOut(o),o<1&&requestAnimationFrame(i)};requestAnimationFrame(i)}easeOut(e){return 1-Math.pow(1-e,3)}handleInteraction=e=>{if(!this.interactive)return;this.isDragging=!0,this.updateFromEvent(e);const t=()=>{this.isDragging=!1,document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",t),document.removeEventListener("touchmove",r),document.removeEventListener("touchend",t)},r=e=>{this.isDragging&&this.updateFromEvent(e)};document.addEventListener("mousemove",r),document.addEventListener("mouseup",t),document.addEventListener("touchmove",r),document.addEventListener("touchend",t)};updateFromEvent(e){const t=this.el.shadowRoot?.querySelector(".progress-line-trail")?.getBoundingClientRect();if(!t)return;let r=0;r="vertical"===this.orientation?100-((e.touches?e.touches[0].clientY:e.clientY)-t.top)/t.height*100:((e.touches?e.touches[0].clientX:e.clientX)-t.left)/t.width*100;const s=Math.max(0,Math.min(100,Math.round(r)));this.percent=s,this.progressChange.emit({value:s})}renderTicks(){if(this.ticks<=0)return null;const e=Math.floor(100/this.ticks),t=[];for(let r=0;r<=e;r++){const e=r*this.ticks;t.push(s("div",{class:"progress-tick",style:{["vertical"===this.orientation?"bottom":"left"]:e+"%"}}))}return t}getStrokeColor(){return"success"===this.currentStatus?"#52c41a":"exception"===this.currentStatus||"danger"===this.currentStatus?"#ff4d4f":"warning"===this.currentStatus?"#faad14":this.gradient||"object"==typeof this.strokeColor&&null!==this.strokeColor?`url(#${this.gradientId})`:"string"==typeof this.strokeColor?this.strokeColor:"#1890ff"}renderLineProgress(){const e=this.getStrokeColor(),t=Number(this.animatedPercent.toFixed(this.decimalPrecision));let r=e;const i="object"==typeof this.strokeColor&&null!==this.strokeColor,o=i?this.strokeColor:null;if(this.gradient||i){let t="#1890ff",s="#52c41a";o?(t=o.from||t,s=o.to||s):(t=e,s="normal"===this.status?"#69c0ff":e),r=`linear-gradient(${"vertical"===this.orientation?"to top":o&&o.direction||"to right"}, ${t}, ${s})`}const a={["vertical"===this.orientation?"height":"width"]:this.indeterminate?"100%":Math.min(this.animatedPercent,100)+"%",["vertical"===this.orientation?"width":"height"]:"100%",borderRadius:"round"===this.strokeLinecap?this.strokeWidth+"px":"0",background:r,..."vertical"===this.orientation?{position:"absolute",bottom:"0",left:"0"}:{}},n={["vertical"===this.orientation?"width":"height"]:this.strokeWidth+"px",["vertical"===this.orientation?"height":"width"]:"vertical"===this.orientation?"number"==typeof this.height?this.height+"px":this.height:"number"==typeof this.width?this.width+"px":this.width,borderRadius:"round"===this.strokeLinecap?this.strokeWidth+"px":"0",background:this.trailColor,cursor:this.interactive?"pointer":"default",flex:"1"};return s("div",{class:{"progress-line-wrapper":!0,["progress-orient-"+this.orientation]:!0}},"top"===this.labelPosition&&this.showInfo&&this.renderProgressInfo(),s("div",{class:"progress-line-trail",style:n,onMouseDown:this.handleInteraction,onTouchStart:this.handleInteraction},this.vitality&&s("div",{class:"progress-vitality-pulse"}),this.renderTicks(),this.showBuffer&&this.buffer>0&&s("div",{class:"progress-buffer-bar",style:{["vertical"===this.orientation?"height":"width"]:Math.min(this.buffer,100)+"%",["vertical"===this.orientation?"width":"height"]:this.strokeWidth+"px",background:e+"33",..."vertical"===this.orientation?{position:"absolute",bottom:"0",left:"0"}:{}}}),s("div",{class:{"progress-line-bar":!0,"progress-active":("active"===this.currentStatus||this.indeterminate)&&!this.paused,"progress-indeterminate":this.indeterminate,"progress-liquid":this.liquid,"progress-industrial":"industrial"===this.type,"progress-vibrate":"danger"===this.status},style:a},"inside"===this.labelPosition&&this.showInfo&&s("div",{class:"progress-text-inside",style:{color:this.percentageColor||"#fff",fontSize:Math.max(.6*this.strokeWidth,9)+"px"}},this.icon&&s("ui-icon",{name:this.icon,library:this.iconLibrary,style:{marginRight:"4px"}}),this.format(t)),this.success&&(this.success.percent??0)>0&&s("div",{class:"progress-success-bar",style:{["vertical"===this.orientation?"height":"width"]:(this.success.percent??0)/this.animatedPercent*100+"%",background:this.success.strokeColor||"#52c41a",..."vertical"===this.orientation?{position:"absolute",bottom:"0",left:"0"}:{}}})),this.peakMarker>0&&s("div",{class:"progress-peak-marker",style:{["vertical"===this.orientation?"bottom":"left"]:this.peakMarker+"%"},title:`Session Peak: ${this.peakMarker}%`}),this.milestones.map((e=>s("div",{class:"milestone-marker",style:{["vertical"===this.orientation?"bottom":"left"]:e.percent+"%"},title:e.label},e.icon?s("ui-icon",{name:e.icon.replace(/^fa[sb]? fa-/,""),library:"fontawesome"}):s("div",{class:"milestone-dot"}))))),this.multiProgress.length>0&&this.renderMultiProgress(),"top"!==this.labelPosition&&this.showInfo&&this.renderProgressInfo(),this.showTimeEstimate&&this.estimatedTime>0&&this.renderTimeEstimate(),this.showPauseButton&&this.renderPauseButton())}renderMultiProgress(){return s("div",{class:"multi-progress-container",style:{display:"flex",flexDirection:"column",gap:"8px",marginTop:"12px"}},this.multiProgress.map((e=>s("div",{class:"multi-progress-item",style:{display:"flex",alignItems:"center",gap:"12px"}},s("div",{class:"multi-progress-bar-wrap",style:{flex:"1",height:this.strokeWidth+"px",background:this.trailColor,borderRadius:"4px",overflow:"hidden"}},s("div",{class:"multi-progress-bar",style:{width:e.percent+"%",background:e.color||this.getStrokeColor(),height:"100%",transition:"width 0.5s ease"}})),e.label&&s("span",{class:"multi-progress-label",style:{fontSize:"11px",fontWeight:"700",color:"#64748b"}},e.label)))))}renderTimeEstimate(){const e=Math.floor(this.estimatedTime/60),t=this.estimatedTime%60;return s("span",{class:"time-estimate"},"Est. ",e>0?`${e}m ${t}s`:t+"s"," remaining")}renderPauseButton(){return s("ui-button",{variant:"ghost",class:"pause-button",onClick:()=>this.paused=!this.paused,icon:this.paused?"play":"pause",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})}renderStepsProgress(){const e=[],t=100/this.steps,r=this.getStrokeColor();for(let i=0;i<this.steps;i++){const o=(i+1)/this.steps*100<=this.animatedPercent;e.push(s("div",{class:{"progress-step":!0,"progress-step-active":o},style:{width:t+"%",background:o?r:this.trailColor,height:this.strokeWidth+"px"}}))}return s("div",{class:"progress-steps-wrapper",style:{width:"number"==typeof this.width?this.width+"px":this.width}},s("div",{class:"progress-steps-container"},e),this.showInfo&&this.renderProgressInfo())}renderCircleProgress(){const e="sm"===this.size?80:120,t=this.strokeWidth||("sm"===this.size?6:8),r=(e-t)/2,i=2*Math.PI*r,o=this.indeterminate?.75*i:i-this.animatedPercent/100*i,a=this.getStrokeColor(),n=this.gapPosition;let l=0;"bottom"===n?l=180:"top"===n?l=0:"left"===n?l=270:"right"===n&&(l=90);const p=this.getCirclePath(e/2,e/2,r,"dashboard"===this.type?this.gapDegree||75:this.gapDegree,l),h=this.icon?s("ui-icon",{name:this.icon,library:this.iconLibrary,style:{display:"block",fontSize:("sm"===this.size?18:24)+"px",marginBottom:"4px"}}):null,c="object"==typeof this.strokeColor&&null!==this.strokeColor,g=c?this.strokeColor:null;return s("div",{class:"progress-circle-wrapper",style:{width:e+"px",height:e+"px"}},s("svg",{width:e,height:e},(this.gradient||c)&&s("defs",null,s("linearGradient",{id:this.gradientId,x1:"0%",y1:"0%",x2:"100%",y2:"100%"},s("stop",{offset:"0%","stop-color":g&&g.from||a}),s("stop",{offset:"100%","stop-color":g?g.to||"#52c41a":"normal"===this.status?"#69c0ff":a}))),s("path",{d:p,stroke:this.trailColor,"stroke-width":t,fill:"none","stroke-linecap":this.strokeLinecap}),s("path",{d:p,stroke:a,"stroke-width":t,fill:"none","stroke-linecap":this.strokeLinecap,"stroke-dasharray":i,"stroke-dashoffset":o,class:{"progress-circle-path":!0,"progress-indeterminate":this.indeterminate,"progress-liquid":this.liquid}})),this.showInfo&&s("div",{class:"progress-circle-text"},h,this.renderProgressInfo()))}getCirclePath(e,t,r,s,i){const o=s*Math.PI/180,a=-Math.PI/2+o/2+i*Math.PI/180,n=a+2*Math.PI-o;return`M ${e+r*Math.cos(a)} ${t+r*Math.sin(a)} A ${r} ${r} 0 ${2*Math.PI-o>Math.PI?1:0} 1 ${e+r*Math.cos(n)} ${t+r*Math.sin(n)}`}renderProgressInfo(){if(this.indeterminate)return null;const e=Number(this.animatedPercent.toFixed(this.decimalPrecision)),t=this.dataLabels||this.format(e),r=this.percentageColor?{color:this.percentageColor}:{},i=this.icon?s("ui-icon",{name:this.icon,library:this.iconLibrary,style:{marginRight:"6px"}}):null;return"success"===this.status?s("span",{class:"progress-text",style:r},i||s("ui-icon",{name:"check-circle",library:"fontawesome"}),"inside"!==this.labelPosition&&t):"exception"===this.status||"danger"===this.status?s("span",{class:"progress-text progress-text-exception",style:r},i||s("ui-icon",{name:"exclamation-triangle",library:"fontawesome"}),"inside"!==this.labelPosition&&t):"warning"===this.status?s("span",{class:"progress-text progress-text-warning",style:r},i||s("ui-icon",{name:"exclamation-circle",library:"fontawesome"}),t):s("span",{class:"progress-text",style:r},i,t)}render(){const e={progress:!0,["progress-"+this.type]:!0,"progress-active":"active"===this.status||this.indeterminate,["progress-"+this.size]:"line"!==this.type,"progress-indeterminate":this.indeterminate,"progress-liquid":this.liquid,"progress-glass":this.glass,"progress-glow":this.glow,"progress-skeleton":this.skeleton};let t;t=this.steps>0&&"line"===this.type?this.renderStepsProgress():"line"===this.type?this.renderLineProgress():this.renderCircleProgress();const r=Number(this.animatedPercent.toFixed(this.decimalPrecision));return s(i,{key:"0f584282c7c54dc1e352dcd047f9393219ea05d7",role:"progressbar","aria-valuenow":r,"aria-valuemin":"0","aria-valuemax":"100","aria-label":this.dataLabels||`Progress: ${this.percent}%`,style:"vertical"===this.orientation?{height:"number"==typeof this.height?this.height+"px":this.height}:{}},s("div",{key:"7a81c6056d073cf9cdd90abf2e7748772f0f322d",class:e},t,(this.liquid||"industrial"===this.type)&&s("svg",{key:"1bee402a754d87ab25395c92acde5edd76da64a2",style:{position:"absolute",width:"0",height:"0"}},s("filter",{key:"bebea12167e23049848d62e1fd182958dc249f2b",id:"liquid-filter"},s("feGaussianBlur",{key:"a31af8c228fc7a4a9391b46f12a3e5a5a08ed6eb",in:"SourceGraphic",stdDeviation:"10",result:"blur"}),s("feColorMatrix",{key:"b4dddec3e0f1dfd172a3281e8c67897a89436387",in:"blur",mode:"matrix",values:"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7",result:"goo"}),s("feBlend",{key:"f5c08e7d756af6ae228c47115dffd9a4e32142c7",in:"SourceGraphic",in2:"goo"})))))}static get watchers(){return{percent:[{handlePercentChange:0}],strokeColor:[{handleStrokeColorChange: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}:host *{box-sizing:border-box}.progress{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:14px;height:100%;width:100%;border-radius:inherit;display:flex;flex-direction:column}.progress-line-wrapper{display:flex;align-items:center;gap:12px}.progress-line-wrapper.progress-orient-vertical{flex-direction:column;height:100%;width:100%}.progress-line-wrapper.progress-orient-vertical .progress-text{text-align:center;min-width:unset;font-size:11px;font-weight:700;letter-spacing:0.05em;margin-top:8px;margin-left:0}.progress-line-trail{position:relative;overflow:hidden;transition:all 0.3s ease}.progress-line-trail:hover{opacity:0.9}.progress-line-bar{position:absolute;top:0;left:0;transition:width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1);border-radius:inherit;display:flex;align-items:center;justify-content:center;white-space:nowrap}.progress-text-inside{position:relative;z-index:2;font-weight:700;padding:0 8px;display:flex;align-items:center;justify-content:center}.progress-success-bar{position:absolute;top:0;right:0;border-radius:inherit}.progress-active .progress-line-bar::before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:var(--bg-primary, #ffffff);opacity:0;animation:progress-active 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;border-radius:inherit}@keyframes progress-active{0%{opacity:0.1;width:0}20%{opacity:0.5;width:0}100%{opacity:0;width:100%}}.progress-indeterminate.progress-line .progress-line-bar{width:100%}.progress-indeterminate.progress-line .progress-line-bar::after{content:"";position:absolute;top:0;left:0;bottom:0;width:50%;background:linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);animation:progress-line-indeterminate 1.5s infinite linear}@keyframes progress-line-indeterminate{0%{left:-100%}100%{left:100%}}.progress-steps-wrapper{display:flex;align-items:center;gap:12px}.progress-steps-container{display:flex;gap:4px;flex:1}.progress-step{border-radius:4px;transition:background 0.3s ease}.progress-circle-wrapper{position:relative;display:inline-block}.progress-indeterminate.progress-circle .progress-circle-wrapper,.progress-indeterminate.progress-dashboard .progress-circle-wrapper{animation:progress-circle-rotate 2s infinite linear}.progress-circle-path{transition:stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes progress-circle-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.progress-circle-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;font-size:24px;font-weight:600;color:rgba(0, 0, 0, 0.85)}.progress-sm .progress-circle-text{font-size:16px}.progress-text{font-size:14px;color:rgba(0, 0, 0, 0.65);white-space:nowrap;min-width:32px;text-align:right;display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}.progress-text ui-icon{font-size:16px;vertical-align:middle}.progress-circle .progress-text{text-align:center}.progress-text i{font-size:16px;vertical-align:middle;margin-right:4px}.progress-success .progress-text i{color:var(--color-success, #52c41a)}.progress-text-warning i{color:var(--color-danger, #faad14)}.progress-text-exception i,.progress-exception .progress-text i,.progress-danger .progress-text i{color:var(--color-danger, #ff4d4f)}.progress-success .progress-line-bar{background:var(--color-success, #52c41a)}.progress-warning .progress-line-bar{background:var(--color-danger, #faad14)}.progress-exception .progress-line-bar,.progress-danger .progress-line-bar{background:var(--color-danger, #ff4d4f)}.progress-success .progress-circle-path{stroke:var(--color-success, #52c41a)}.progress-warning .progress-circle-path{stroke:var(--color-danger, #faad14)}.progress-exception .progress-circle-path,.progress-danger .progress-circle-path{stroke:var(--color-danger, #ff4d4f)}.progress-sm.progress-circle .progress-circle-wrapper{width:80px;height:80px}.progress-default.progress-circle .progress-circle-wrapper{width:120px;height:120px}.progress-liquid{overflow:hidden}.progress-liquid.progress-line-bar::after{content:"";position:absolute;top:0;left:0;width:200%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 20\'%3E%3Cpath fill=\'var(--bg-primary, #ffffff)\' opacity=\'0.2\' d=\'M0 15 Q25 10 50 15 T100 15 V20 H0 Z\'/%3E%3C/svg%3E");background-size:50% 100%;animation:wave-move 2s infinite linear}.progress-liquid.progress-circle-path{filter:url(#liquid-filter);stroke-dasharray:20 2 !important;animation:circular-liquid 2s infinite linear}@keyframes circular-liquid{0%{stroke-dashoffset:0}100%{stroke-dashoffset:44}}@keyframes wave-move{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.progress-glass .progress-line-trail{background:rgba(255, 255, 255, 0.1) !important;backdrop-filter:blur(8px);border:1px solid rgba(255, 255, 255, 0.2);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.05)}.progress-glass .progress-circle-wrapper path:first-child{stroke:rgba(255, 255, 255, 0.2) !important;filter:blur(1px)}.progress-glow.progress-line .progress-line-bar{filter:drop-shadow(0 0 8px currentColor)}.progress-glow.progress-circle .progress-circle-path,.progress-glow.progress-dashboard .progress-circle-path{filter:drop-shadow(0 0 6px currentColor)}.progress-success.progress-glow .progress-line-bar{filter:drop-shadow(0 0 8px var(--color-success, #52c41a))}.progress-exception.progress-glow .progress-line-bar{filter:drop-shadow(0 0 8px var(--color-danger, #ff4d4f))}.progress-active.progress-glow .progress-line-bar{filter:drop-shadow(0 0 8px var(--color-primary, #1890ff))}.progress-industrial{mask-size:16px 100%;mask-image:linear-gradient(to right, var(--text-primary, #000) 70%, transparent 70%)}.progress-orient-vertical .progress-industrial{mask-size:100% 16px;mask-image:linear-gradient(to top, var(--text-primary, #000) 70%, transparent 70%)}.progress-industrial{box-shadow:inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);border:1px solid rgba(255, 255, 255, 0.1)}.progress-vibrate{animation:thermal-vibration 0.15s infinite}@keyframes thermal-vibration{0%{transform:translateY(0)}25%{transform:translateY(-1px) translateX(1px)}50%{transform:translateY(1px) translateX(-1px)}75%{transform:translateY(-1px)}100%{transform:translateY(0)}}.progress-peak-marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--color-primary, #1890ff);box-shadow:0 0 8px var(--color-primary, #1890ff);transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index:10;pointer-events:none}.progress-peak-marker::after{content:"";position:absolute;top:-4px;left:-3px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--color-primary, #1890ff)}.progress-vitality-pulse{position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);width:50%;animation:vitality-wave 3s infinite ease-in-out;pointer-events:none;z-index:5}.progress-orient-vertical .progress-vitality-pulse{width:100%;height:50%;background:linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);animation:vitality-wave-vertical 3s infinite ease-in-out}@keyframes vitality-wave{0%{transform:translateX(-100%) skewX(-20deg)}50%{opacity:0.5}100%{transform:translateX(200%) skewX(-20deg)}}@keyframes vitality-wave-vertical{0%{transform:translateY(100%) skewY(-20deg)}50%{opacity:0.5}100%{transform:translateY(-200%) skewY(-20deg)}}.progress-tick{position:absolute;background:rgba(0, 0, 0, 0.1);pointer-events:none;z-index:1}.progress-orient-horizontal .progress-tick{top:0;bottom:0;width:1px}.progress-orient-vertical .progress-tick{left:0;right:0;height:1px}.milestone-marker{position:absolute;top:50%;transform:translate(-50%, -50%);z-index:15;cursor:help;display:flex;align-items:center;justify-content:center}.progress-orient-vertical .milestone-marker{left:50%;transform:translate(-50%, 50%)}.milestone-marker ui-icon{font-size:14px;color:var(--text-primary, #1a202c);background:var(--bg-primary, #ffffff);border-radius:50%;padding:2px;box-shadow:0 0 6px rgba(0, 0, 0, 0.1)}.milestone-dot{width:8px;height:8px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #1890ff);border-radius:50%;box-shadow:0 0 4px rgba(0, 0, 0, 0.15)}.multi-progress-container{border-top:1px solid var(--border-subtle, #edf2f7);padding-top:16px;margin-top:20px}.multi-progress-item{transition:all 0.2s ease}.multi-progress-item:hover{transform:translateX(4px)}.multi-progress-bar-wrap{position:relative;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.05)}.multi-progress-label{letter-spacing:0.025em;text-transform:uppercase}.time-estimate{font-size:11px;color:var(--color-primary, #718096);font-weight:600;margin-top:8px;display:block}.pause-button{display:flex;align-items:center;justify-content:center;background:var(--bg-primary, #f7fafc);border:1px solid var(--border-subtle, #e2e8f0);border-radius:50%;width:24px;height:24px;cursor:pointer;color:var(--color-primary, #4a5568);transition:all 0.2s ease;margin-top:8px}.pause-button:hover{background:var(--bg-primary, #edf2f7);color:var(--color-primary, #2d3748);transform:scale(1.1)}.pause-button ui-icon{font-size:10px}.progress-skeleton .progress-line-trail{background:var(--bg-primary, #e2e8f0) !important;position:relative;overflow:hidden}.progress-skeleton .progress-line-trail::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);animation:progress-shimmer 1.5s infinite}.progress-skeleton .progress-line-bar{display:none !important}@keyframes progress-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media (forced-colors: active){.progress-line-trail{border:1px solid CanvasText}.progress-line-bar{background:Highlight}.progress-peak-marker{background:Mark;box-shadow:none}.progress-tick{background:CanvasText;opacity:0.3}}'}},[513,"ui-progress",{type:[1],percent:[2],status:[1],strokeWidth:[2,"stroke-width"],strokeColor:[1,"stroke-color"],trailColor:[1,"trail-color"],gradient:[4],showInfo:[4,"show-info"],format:[16],size:[1],width:[8],height:[8],strokeLinecap:[1,"stroke-linecap"],success:[1040],steps:[2],gapDegree:[2,"gap-degree"],gapPosition:[1,"gap-position"],multiProgress:[16],buffer:[2],showBuffer:[4,"show-buffer"],paused:[1028],showPauseButton:[4,"show-pause-button"],estimatedTime:[2,"estimated-time"],showTimeEstimate:[4,"show-time-estimate"],milestones:[1040],indeterminate:[4],decimalPrecision:[2,"decimal-precision"],percentageColor:[1,"percentage-color"],liquid:[4],thresholds:[1040],icon:[1],iconLibrary:[1,"icon-library"],skeleton:[4],peakMarker:[1026,"peak-marker"],vitality:[4],dataLabels:[1,"data-labels"],glass:[4],glow:[4],labelPosition:[1,"label-position"],orientation:[513],interactive:[4],ticks:[2],currentStatus:[32],animatedPercent:[32],isDragging:[32],gradientId:[32]},void 0,{percent:[{handlePercentChange:0}],strokeColor:[{handleStrokeColorChange:0}]}]),h=p,c=function(){"undefined"!=typeof customElements&&["ui-progress","ui-badge","ui-button","ui-icon"].forEach((e=>{switch(e){case"ui-progress":customElements.get(o(e))||customElements.define(o(e),p);break;case"ui-badge":customElements.get(o(e))||n();break;case"ui-button":customElements.get(o(e))||a();break;case"ui-icon":customElements.get(o(e))||l()}}))};export{h as UiProgress,c as defineCustomElement}
+import{proxyCustomElement as r,HTMLElement as s,createEvent as e,h as t,Host as i,transformTag as o}from"@stencil/core/internal/client";import{d as a,a as n}from"./badge.js";import{d as p}from"./icon.js";import{d as l}from"./loader.js";const g=r(class extends s{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.progressChange=e(this,"progressChange",7)}type="line";percent=0;status="normal";currentStatus="normal";strokeWidth=10;strokeColor="#1890ff";trailColor="#f0f0f0";gradient=!1;showInfo=!0;format=r=>r+"%";size="default";width="100%";height="100%";strokeLinecap="round";success=null;steps=0;gapDegree=0;gapPosition="top";multiProgress=[];buffer=0;showBuffer=!1;paused=!1;showPauseButton=!1;estimatedTime=0;showTimeEstimate=!1;milestones=[];indeterminate=!1;decimalPrecision=0;percentageColor="";liquid=!1;thresholds=[];icon="";iconLibrary="lucide";skeleton=!1;peakMarker=0;vitality=!1;dataLabels="";glass=!1;statusBar=!1;statusBarAlign="left";statusBarPosition="inside";statusLabels={};glow=!1;labelPosition="outside";orientation="horizontal";interactive=!1;ticks=0;animatedPercent=0;isDragging=!1;gradientId="ui-progress-gradient-"+Math.random().toString(36).substr(2,9);get el(){return this}progressChange;componentWillLoad(){this.animatedPercent=this.percent,this.currentStatus=this.status,this.normalizeProps()}normalizeProps(){try{"string"==typeof this.milestones&&(this.milestones=JSON.parse(this.milestones)),"string"==typeof this.thresholds&&(this.thresholds=JSON.parse(this.thresholds)),"string"==typeof this.success&&(this.success=JSON.parse(this.success)),"string"==typeof this.strokeColor&&this.strokeColor.startsWith("{")&&(this.strokeColor=JSON.parse(this.strokeColor)),"string"==typeof this.multiProgress&&(this.multiProgress=JSON.parse(this.multiProgress)),"string"==typeof this.statusLabels&&(this.statusLabels=JSON.parse(this.statusLabels))}catch(r){console.warn("Failed to parse complex progress prop",r)}}handlePercentChange(r){r>this.peakMarker&&(this.peakMarker=r),this.animateProgress(r),this.applyThresholds(r)}handleStrokeColorChange(){this.normalizeProps()}handleStatusChange(r){this.currentStatus=r}applyThresholds(r){if(!this.thresholds.length)return;const s=[...this.thresholds].sort(((r,s)=>s.percent-r.percent)).find((s=>r>=s.percent));s?(s.status&&(this.currentStatus=s.status),s.color&&(this.strokeColor=s.color)):this.currentStatus=this.status}animateProgress(r){const s=this.animatedPercent,e=r-s,t=Date.now(),i=()=>{const r=Date.now(),o=Math.min((r-t)/500,1);this.animatedPercent=s+e*this.easeOut(o),o<1&&requestAnimationFrame(i)};requestAnimationFrame(i)}easeOut(r){return 1-Math.pow(1-r,3)}handleInteraction=r=>{if(!this.interactive)return;this.isDragging=!0,this.updateFromEvent(r);const s=()=>{this.isDragging=!1,document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",s),document.removeEventListener("touchmove",e),document.removeEventListener("touchend",s)},e=r=>{this.isDragging&&this.updateFromEvent(r)};document.addEventListener("mousemove",e),document.addEventListener("mouseup",s),document.addEventListener("touchmove",e),document.addEventListener("touchend",s)};updateFromEvent(r){const s=this.el.shadowRoot?.querySelector(".progress-line-trail")?.getBoundingClientRect();if(!s)return;let e=0;e="vertical"===this.orientation?100-((r.touches?r.touches[0].clientY:r.clientY)-s.top)/s.height*100:((r.touches?r.touches[0].clientX:r.clientX)-s.left)/s.width*100;const t=Math.max(0,Math.min(100,Math.round(e)));this.percent=t,this.progressChange.emit({value:t})}renderTicks(){if(this.ticks<=0)return null;const r=Math.floor(100/this.ticks),s=[];for(let e=0;e<=r;e++){const r=e*this.ticks;s.push(t("div",{class:"progress-tick",style:{["vertical"===this.orientation?"bottom":"left"]:r+"%"}}))}return s}getStatusInfo(){const r=this.statusLabels||{};return"interrupted"===this.currentStatus?{label:r.interrupted??"Interrupted",cssClass:"interrupted",iconName:"ban"}:this.animatedPercent>=100||"completed"===this.currentStatus?{label:r.completed??"Completed",cssClass:"completed",iconName:"check-circle"}:this.animatedPercent<=0?{label:r.notStarted??"Not Started",cssClass:"not-started",iconName:"circle"}:{label:r.running??"Running",cssClass:"running",iconName:"loader"}}renderStatusBarChip(r=!1){const{label:s,cssClass:e,iconName:i}=this.getStatusInfo(),o=Number(this.animatedPercent.toFixed(this.decimalPrecision));let a={};return r||(a={position:"absolute",top:"50%",transform:"translateY(-50%)",zIndex:"2"},"right"===this.statusBarAlign?a.right="8px":"center"===this.statusBarAlign?(a.left="50%",a.transform="translate(-50%, -50%)"):a.left="8px"),t("div",{class:"progress-status-chip progress-status-chip--"+e,style:a},t("ui-icon",{name:i,library:"lucide"}),t("span",null,s),t("span",{"aria-hidden":"true",style:{opacity:"0.45",margin:"0 1px"}},"·"),t("span",null,o,"%"))}getStrokeColor(){return"success"===this.currentStatus||"completed"===this.currentStatus?"#52c41a":"exception"===this.currentStatus||"danger"===this.currentStatus||"interrupted"===this.currentStatus?"#ff4d4f":"warning"===this.currentStatus?"#faad14":"empty"===this.currentStatus?"#d9d9d9":"running"===this.currentStatus?"#1890ff":this.gradient||"object"==typeof this.strokeColor&&null!==this.strokeColor?`url(#${this.gradientId})`:"string"==typeof this.strokeColor?this.strokeColor:"#1890ff"}renderLineProgress(){const r=this.getStrokeColor(),s=Number(this.animatedPercent.toFixed(this.decimalPrecision));let e=r;const i="object"==typeof this.strokeColor&&null!==this.strokeColor,o=i?this.strokeColor:null;if(this.gradient||i){let s="#1890ff",t="#52c41a";o?(s=o.from||s,t=o.to||t):(s=r,t="normal"===this.status?"#69c0ff":r),e=`linear-gradient(${"vertical"===this.orientation?"to top":o&&o.direction||"to right"}, ${s}, ${t})`}const a=this.statusBar&&"top"===this.statusBarPosition,n=this.statusBar&&"inside"===this.statusBarPosition&&"vertical"!==this.orientation?Math.max(this.strokeWidth,32):this.strokeWidth,p={["vertical"===this.orientation?"height":"width"]:this.indeterminate?"100%":Math.min(this.animatedPercent,100)+"%",["vertical"===this.orientation?"width":"height"]:"100%",borderRadius:"round"===this.strokeLinecap?n+"px":"0",background:e,color:r,..."vertical"===this.orientation?{position:"absolute",bottom:"0",left:"0"}:{}},l={["vertical"===this.orientation?"width":"height"]:n+"px",["vertical"===this.orientation?"height":"width"]:"vertical"===this.orientation?"number"==typeof this.height?this.height+"px":this.height:"number"==typeof this.width?this.width+"px":this.width,borderRadius:"round"===this.strokeLinecap?n+"px":"0",background:this.trailColor,cursor:this.interactive?"pointer":"default",flex:a?"none":"1"};return t("div",{class:{"progress-line-wrapper":!0,"progress-status-bar":this.statusBar,"progress-status-bar--top":a,["progress-orient-"+this.orientation]:!0}},a&&t("div",{class:"progress-status-header progress-status-header--"+this.statusBarAlign},this.renderStatusBarChip(!0)),!this.statusBar&&"top"===this.labelPosition&&this.showInfo&&this.renderProgressInfo(),t("div",{class:"progress-line-trail",style:l,onMouseDown:this.handleInteraction,onTouchStart:this.handleInteraction},this.statusBar&&"inside"===this.statusBarPosition&&this.renderStatusBarChip(!1),this.vitality&&t("div",{class:"progress-vitality-pulse"}),this.renderTicks(),this.showBuffer&&this.buffer>0&&t("div",{class:"progress-buffer-bar",style:{["vertical"===this.orientation?"height":"width"]:Math.min(this.buffer,100)+"%",["vertical"===this.orientation?"width":"height"]:this.strokeWidth+"px",background:r+"33",..."vertical"===this.orientation?{position:"absolute",bottom:"0",left:"0"}:{}}}),t("div",{class:{"progress-line-bar":!0,"progress-active":("active"===this.currentStatus||this.indeterminate)&&!this.paused,"progress-indeterminate":this.indeterminate,"progress-liquid":this.liquid,"progress-industrial":"industrial"===this.type,"progress-vibrate":"danger"===this.status},style:p},"inside"===this.labelPosition&&this.showInfo&&t("div",{class:"progress-text-inside",style:{color:this.percentageColor||"#fff",fontSize:Math.max(.6*this.strokeWidth,9)+"px"}},this.icon&&t("ui-icon",{name:this.icon,library:this.iconLibrary,style:{marginRight:"4px"}}),this.format(s)),this.success&&(this.success.percent??0)>0&&t("div",{class:"progress-success-bar",style:{["vertical"===this.orientation?"height":"width"]:(this.success.percent??0)/this.animatedPercent*100+"%",background:this.success.strokeColor||"#52c41a",..."vertical"===this.orientation?{position:"absolute",bottom:"0",left:"0"}:{}}})),this.peakMarker>0&&t("div",{class:"progress-peak-marker",style:{["vertical"===this.orientation?"bottom":"left"]:this.peakMarker+"%"},title:`Session Peak: ${this.peakMarker}%`}),this.milestones.map((r=>t("div",{class:"milestone-marker",style:{["vertical"===this.orientation?"bottom":"left"]:r.percent+"%"},title:r.label},r.icon?t("ui-icon",{name:r.icon.replace(/^fa[sb]? fa-/,""),library:"fontawesome"}):t("div",{class:"milestone-dot"}))))),this.multiProgress.length>0&&this.renderMultiProgress(),!this.statusBar&&"top"!==this.labelPosition&&this.showInfo&&this.renderProgressInfo(),this.showTimeEstimate&&this.estimatedTime>0&&this.renderTimeEstimate(),this.showPauseButton&&this.renderPauseButton())}renderMultiProgress(){return t("div",{class:"multi-progress-container",style:{display:"flex",flexDirection:"column",gap:"8px",marginTop:"12px"}},this.multiProgress.map((r=>t("div",{class:"multi-progress-item",style:{display:"flex",alignItems:"center",gap:"12px"}},t("div",{class:"multi-progress-bar-wrap",style:{flex:"1",height:this.strokeWidth+"px",background:this.trailColor,borderRadius:"4px",overflow:"hidden"}},t("div",{class:"multi-progress-bar",style:{width:r.percent+"%",background:r.color||this.getStrokeColor(),height:"100%",transition:"width 0.5s ease"}})),r.label&&t("span",{class:"multi-progress-label",style:{fontSize:"11px",fontWeight:"700",color:"#64748b"}},r.label)))))}renderTimeEstimate(){const r=Math.floor(this.estimatedTime/60),s=this.estimatedTime%60;return t("span",{class:"time-estimate"},"Est. ",r>0?`${r}m ${s}s`:s+"s"," remaining")}renderPauseButton(){return t("ui-button",{variant:"ghost",class:"pause-button",onClick:()=>this.paused=!this.paused,icon:this.paused?"play":"pause",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})}renderStepsProgress(){const r=[],s=100/this.steps,e=this.getStrokeColor();for(let i=0;i<this.steps;i++){const o=(i+1)/this.steps*100<=this.animatedPercent;r.push(t("div",{class:{"progress-step":!0,"progress-step-active":o},style:{width:s+"%",background:o?e:this.trailColor,height:this.strokeWidth+"px"}}))}return t("div",{class:"progress-steps-wrapper",style:{width:"number"==typeof this.width?this.width+"px":this.width}},t("div",{class:"progress-steps-container"},r),this.showInfo&&this.renderProgressInfo())}renderCircleProgress(){const r="sm"===this.size?80:120,s=this.strokeWidth||("sm"===this.size?6:8),e=(r-s)/2,i=2*Math.PI*e,o=this.indeterminate?.75*i:i-this.animatedPercent/100*i,a=this.getStrokeColor(),n=this.gapPosition;let p=0;"bottom"===n?p=180:"top"===n?p=0:"left"===n?p=270:"right"===n&&(p=90);const l=this.getCirclePath(r/2,r/2,e,"dashboard"===this.type?this.gapDegree||75:this.gapDegree,p),g=this.icon?t("ui-icon",{name:this.icon,library:this.iconLibrary,style:{display:"block",fontSize:("sm"===this.size?18:24)+"px",marginBottom:"4px"}}):null,c="object"==typeof this.strokeColor&&null!==this.strokeColor,h=c?this.strokeColor:null;return t("div",{class:"progress-circle-wrapper",style:{width:r+"px",height:r+"px"}},t("svg",{width:r,height:r},(this.gradient||c)&&t("defs",null,t("linearGradient",{id:this.gradientId,x1:"0%",y1:"0%",x2:"100%",y2:"100%"},t("stop",{offset:"0%","stop-color":h&&h.from||a}),t("stop",{offset:"100%","stop-color":h?h.to||"#52c41a":"normal"===this.status?"#69c0ff":a}))),t("path",{d:l,stroke:this.trailColor,"stroke-width":s,fill:"none","stroke-linecap":this.strokeLinecap}),t("path",{d:l,stroke:a,"stroke-width":s,fill:"none","stroke-linecap":this.strokeLinecap,"stroke-dasharray":i,"stroke-dashoffset":o,style:{color:a},class:{"progress-circle-path":!0,"progress-indeterminate":this.indeterminate,"progress-liquid":this.liquid}})),this.showInfo&&t("div",{class:"progress-circle-text"},g,this.renderProgressInfo()))}getCirclePath(r,s,e,t,i){const o=t*Math.PI/180,a=-Math.PI/2+o/2+i*Math.PI/180,n=a+2*Math.PI-o;return`M ${r+e*Math.cos(a)} ${s+e*Math.sin(a)} A ${e} ${e} 0 ${2*Math.PI-o>Math.PI?1:0} 1 ${r+e*Math.cos(n)} ${s+e*Math.sin(n)}`}renderProgressInfo(){if(this.indeterminate)return null;const r=Number(this.animatedPercent.toFixed(this.decimalPrecision)),s=this.dataLabels||this.format(r),e=this.percentageColor?{color:this.percentageColor}:{},i=this.icon?t("ui-icon",{name:this.icon,library:this.iconLibrary,style:{marginRight:"6px"}}):null;return"success"===this.currentStatus||"completed"===this.currentStatus?t("span",{class:"progress-text progress-text-success",style:e},i||t("ui-icon",{name:"check-circle",library:"fontawesome"}),"inside"!==this.labelPosition&&(this.dataLabels||("completed"===this.currentStatus?"Completed":s))):"exception"===this.currentStatus||"danger"===this.currentStatus||"interrupted"===this.currentStatus?t("span",{class:"progress-text progress-text-exception",style:e},i||t("ui-icon",{name:"exclamation-triangle",library:"fontawesome"}),"inside"!==this.labelPosition&&(this.dataLabels||("interrupted"===this.currentStatus?"Interrupted":s))):"warning"===this.currentStatus?t("span",{class:"progress-text progress-text-warning",style:e},i||t("ui-icon",{name:"exclamation-circle",library:"fontawesome"}),s):"empty"===this.currentStatus?t("span",{class:"progress-text progress-text-empty",style:e},i||t("ui-icon",{name:"circle",library:"fontawesome",style:{opacity:.4}}),"inside"!==this.labelPosition&&(this.dataLabels||"Empty")):"running"===this.currentStatus?t("span",{class:"progress-text progress-text-running",style:e},i||t("ui-icon",{name:"sync",library:"fontawesome",class:"fa-spin",style:{color:"#1890ff"}}),"inside"!==this.labelPosition&&(this.dataLabels||`Running (${s})`)):t("span",{class:"progress-text",style:e},i,s)}render(){const r={progress:!0,["progress-"+this.type]:!0,"progress-active":"active"===this.status||"running"===this.currentStatus||this.indeterminate,["progress-"+this.size]:"line"!==this.type,"progress-indeterminate":this.indeterminate,"progress-liquid":this.liquid,"progress-glass":this.glass,"progress-glow":this.glow,"progress-skeleton":this.skeleton,["progress-"+this.currentStatus]:!0};let s;s=this.steps>0&&"line"===this.type?this.renderStepsProgress():"line"===this.type?this.renderLineProgress():this.renderCircleProgress();const e=Number(this.animatedPercent.toFixed(this.decimalPrecision));return t(i,{key:"21dcb1b89582338f185767a4301e4cf435c1842c",role:"progressbar","aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100","aria-label":this.dataLabels||`Progress: ${this.percent}%`,style:"vertical"===this.orientation?{height:"number"==typeof this.height?this.height+"px":this.height}:{}},t("div",{key:"7aebc6dc0cb2804300c171598c47699d8c8fabe8",class:r},s,(this.liquid||"industrial"===this.type)&&t("svg",{key:"7a70f4821a0752d1106107e9fa9618cf2b4de889",style:{position:"absolute",width:"0",height:"0"}},t("filter",{key:"a899fcbc62ef322086eee654f24d0bf8b1cf83a6",id:"liquid-filter"},t("feGaussianBlur",{key:"5b8dc993e949a4cddd661d3b45b9c44fe25e4f4d",in:"SourceGraphic",stdDeviation:"10",result:"blur"}),t("feColorMatrix",{key:"55da24d44b6cb35cd28e0f301d3c8316e3554e8d",in:"blur",mode:"matrix",values:"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7",result:"goo"}),t("feBlend",{key:"e59ec2eda298c0796be6b28a1b2afd9a6dadab63",in:"SourceGraphic",in2:"goo"})))))}static get watchers(){return{percent:[{handlePercentChange:0}],strokeColor:[{handleStrokeColorChange:0}],status:[{handleStatusChange: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}:host *{box-sizing:border-box}.progress{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:14px;height:100%;width:100%;border-radius:inherit;display:flex;flex-direction:column}.progress-line-wrapper{display:flex;align-items:center;gap:12px}.progress-line-wrapper.progress-status-bar--top{flex-direction:column;align-items:stretch;gap:4px}.progress-line-wrapper.progress-status-bar--top .progress-line-trail{flex:none}.progress-line-wrapper.progress-orient-vertical{flex-direction:column;height:100%;width:100%}.progress-line-wrapper.progress-orient-vertical .progress-text{text-align:center;min-width:unset;font-size:11px;font-weight:700;letter-spacing:0.05em;margin-top:8px;margin-left:0}.progress-line-trail{position:relative;overflow:hidden;transition:all 0.3s ease}.progress-line-trail:hover{opacity:0.9}.progress-line-bar{position:absolute;top:0;left:0;transition:width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1);border-radius:inherit;display:flex;align-items:center;justify-content:center;white-space:nowrap}.progress-text-inside{position:relative;z-index:2;font-weight:700;padding:0 8px;display:flex;align-items:center;justify-content:center}.progress-success-bar{position:absolute;top:0;right:0;border-radius:inherit}.progress-active .progress-line-bar::before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:var(--bg-primary, #ffffff);opacity:0;animation:progress-active 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;border-radius:inherit}@keyframes progress-active{0%{opacity:0.1;width:0}20%{opacity:0.5;width:0}100%{opacity:0;width:100%}}.progress-indeterminate.progress-line .progress-line-bar{width:100%}.progress-indeterminate.progress-line .progress-line-bar::after{content:"";position:absolute;top:0;left:0;bottom:0;width:50%;background:linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);animation:progress-line-indeterminate 1.5s infinite linear}@keyframes progress-line-indeterminate{0%{left:-100%}100%{left:100%}}.progress-steps-wrapper{display:flex;align-items:center;gap:12px}.progress-steps-container{display:flex;gap:4px;flex:1}.progress-step{border-radius:4px;transition:background 0.3s ease}.progress-circle-wrapper{position:relative;display:inline-block}.progress-indeterminate.progress-circle .progress-circle-wrapper,.progress-indeterminate.progress-dashboard .progress-circle-wrapper{animation:progress-circle-rotate 2s infinite linear}.progress-circle-path{transition:stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes progress-circle-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.progress-circle-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;font-size:24px;font-weight:600;color:rgba(0, 0, 0, 0.85)}.progress-sm .progress-circle-text{font-size:16px}.progress-text{font-size:14px;color:rgba(0, 0, 0, 0.65);white-space:nowrap;min-width:32px;text-align:right;display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}.progress-text ui-icon{font-size:16px;vertical-align:middle}.progress-circle .progress-text{text-align:center}.progress-text i{font-size:16px;vertical-align:middle;margin-right:4px}.progress-success .progress-text i,.progress-completed .progress-text i{color:var(--color-success, #52c41a)}.progress-text-warning i{color:var(--color-danger, #faad14)}.progress-text-exception i,.progress-exception .progress-text i,.progress-danger .progress-text i,.progress-interrupted .progress-text i{color:var(--color-danger, #ff4d4f)}.progress-text-empty{color:var(--color-neutral, #8c8c8c) !important}.progress-text-empty i,.progress-text-empty ui-icon{color:var(--color-neutral, #8c8c8c) !important}.progress-text-running{color:var(--color-primary, #1890ff) !important}.progress-text-running i,.progress-text-running ui-icon{color:var(--color-primary, #1890ff) !important}.progress-text-success{color:var(--color-success, #52c41a) !important}.progress-text-success i,.progress-text-success ui-icon{color:var(--color-success, #52c41a) !important}.progress-text-exception{color:var(--color-danger, #ff4d4f) !important}.progress-text-exception i,.progress-text-exception ui-icon{color:var(--color-danger, #ff4d4f) !important}.progress-success .progress-line-bar,.progress-completed .progress-line-bar{background:var(--color-success, #52c41a)}.progress-warning .progress-line-bar{background:var(--color-danger, #faad14)}.progress-exception .progress-line-bar,.progress-danger .progress-line-bar,.progress-interrupted .progress-line-bar{background:var(--color-danger, #ff4d4f)}.progress-empty .progress-line-bar{background:var(--color-neutral, #d9d9d9)}.progress-running .progress-line-bar{background:var(--color-primary, #1890ff)}.progress-success .progress-circle-path,.progress-completed .progress-circle-path{stroke:var(--color-success, #52c41a)}.progress-warning .progress-circle-path{stroke:var(--color-danger, #faad14)}.progress-exception .progress-circle-path,.progress-danger .progress-circle-path,.progress-interrupted .progress-circle-path{stroke:var(--color-danger, #ff4d4f)}.progress-empty .progress-circle-path{stroke:var(--color-neutral, #d9d9d9)}.progress-running .progress-circle-path{stroke:var(--color-primary, #1890ff)}.progress-sm.progress-circle .progress-circle-wrapper{width:80px;height:80px}.progress-default.progress-circle .progress-circle-wrapper{width:120px;height:120px}.progress-liquid{overflow:hidden}.progress-liquid.progress-line-bar::after{content:"";position:absolute;top:0;left:0;width:200%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 20\'%3E%3Cpath fill=\'var(--bg-primary, #ffffff)\' opacity=\'0.2\' d=\'M0 15 Q25 10 50 15 T100 15 V20 H0 Z\'/%3E%3C/svg%3E");background-size:50% 100%;animation:wave-move 2s infinite linear}.progress-liquid.progress-circle-path{filter:url(#liquid-filter);stroke-dasharray:20 2 !important;animation:circular-liquid 2s infinite linear}@keyframes circular-liquid{0%{stroke-dashoffset:0}100%{stroke-dashoffset:44}}@keyframes wave-move{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.progress-glass .progress-line-trail{background:rgba(255, 255, 255, 0.1) !important;backdrop-filter:blur(8px);border:1px solid rgba(255, 255, 255, 0.2);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.05)}.progress-glass .progress-circle-wrapper path:first-child{stroke:rgba(255, 255, 255, 0.2) !important;filter:blur(1px)}.progress-glow.progress-line .progress-line-bar{filter:drop-shadow(0 0 8px currentColor)}.progress-glow.progress-circle .progress-circle-path,.progress-glow.progress-dashboard .progress-circle-path{filter:drop-shadow(0 0 6px currentColor)}.progress-glow.progress-success.progress-line .progress-line-bar,.progress-glow.progress-completed.progress-line .progress-line-bar{filter:drop-shadow(0 0 8px rgba(82, 196, 26, 0.45)) !important}.progress-glow.progress-success.progress-circle .progress-circle-path,.progress-glow.progress-success.progress-dashboard .progress-circle-path,.progress-glow.progress-completed.progress-circle .progress-circle-path,.progress-glow.progress-completed.progress-dashboard .progress-circle-path{filter:drop-shadow(0 0 6px rgba(82, 196, 26, 0.45)) !important}.progress-glow.progress-exception.progress-line .progress-line-bar,.progress-glow.progress-danger.progress-line .progress-line-bar,.progress-glow.progress-interrupted.progress-line .progress-line-bar{filter:drop-shadow(0 0 8px rgba(255, 77, 79, 0.45)) !important}.progress-glow.progress-exception.progress-circle .progress-circle-path,.progress-glow.progress-exception.progress-dashboard .progress-circle-path,.progress-glow.progress-danger.progress-circle .progress-circle-path,.progress-glow.progress-danger.progress-dashboard .progress-circle-path,.progress-glow.progress-interrupted.progress-circle .progress-circle-path,.progress-glow.progress-interrupted.progress-dashboard .progress-circle-path{filter:drop-shadow(0 0 6px rgba(255, 77, 79, 0.45)) !important}.progress-glow.progress-warning.progress-line .progress-line-bar{filter:drop-shadow(0 0 8px rgba(250, 173, 20, 0.45)) !important}.progress-glow.progress-warning.progress-circle .progress-circle-path,.progress-glow.progress-warning.progress-dashboard .progress-circle-path{filter:drop-shadow(0 0 6px rgba(250, 173, 20, 0.45)) !important}.progress-glow.progress-running.progress-line .progress-line-bar,.progress-glow.progress-active.progress-line .progress-line-bar{filter:drop-shadow(0 0 8px rgba(24, 144, 255, 0.45)) !important}.progress-glow.progress-running.progress-circle .progress-circle-path,.progress-glow.progress-running.progress-dashboard .progress-circle-path,.progress-glow.progress-active.progress-circle .progress-circle-path,.progress-glow.progress-active.progress-dashboard .progress-circle-path{filter:drop-shadow(0 0 6px rgba(24, 144, 255, 0.45)) !important}.progress-industrial{mask-size:16px 100%;mask-image:linear-gradient(to right, var(--text-primary, #000) 70%, transparent 70%)}.progress-orient-vertical .progress-industrial{mask-size:100% 16px;mask-image:linear-gradient(to top, var(--text-primary, #000) 70%, transparent 70%)}.progress-industrial{box-shadow:inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);border:1px solid rgba(255, 255, 255, 0.1)}.progress-vibrate{animation:thermal-vibration 0.15s infinite}@keyframes thermal-vibration{0%{transform:translateY(0)}25%{transform:translateY(-1px) translateX(1px)}50%{transform:translateY(1px) translateX(-1px)}75%{transform:translateY(-1px)}100%{transform:translateY(0)}}.progress-peak-marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--color-primary, #1890ff);box-shadow:0 0 8px var(--color-primary, #1890ff);transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index:10;pointer-events:none}.progress-peak-marker::after{content:"";position:absolute;top:-4px;left:-3px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--color-primary, #1890ff)}.progress-vitality-pulse{position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);width:50%;animation:vitality-wave 3s infinite ease-in-out;pointer-events:none;z-index:5}.progress-orient-vertical .progress-vitality-pulse{width:100%;height:50%;background:linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);animation:vitality-wave-vertical 3s infinite ease-in-out}@keyframes vitality-wave{0%{transform:translateX(-100%) skewX(-20deg)}50%{opacity:0.5}100%{transform:translateX(200%) skewX(-20deg)}}@keyframes vitality-wave-vertical{0%{transform:translateY(100%) skewY(-20deg)}50%{opacity:0.5}100%{transform:translateY(-200%) skewY(-20deg)}}.progress-tick{position:absolute;background:rgba(0, 0, 0, 0.1);pointer-events:none;z-index:1}.progress-orient-horizontal .progress-tick{top:0;bottom:0;width:1px}.progress-orient-vertical .progress-tick{left:0;right:0;height:1px}.milestone-marker{position:absolute;top:50%;transform:translate(-50%, -50%);z-index:15;cursor:help;display:flex;align-items:center;justify-content:center}.progress-orient-vertical .milestone-marker{left:50%;transform:translate(-50%, 50%)}.milestone-marker ui-icon{font-size:14px;color:var(--text-primary, #1a202c);background:var(--bg-primary, #ffffff);border-radius:50%;padding:2px;box-shadow:0 0 6px rgba(0, 0, 0, 0.1)}.milestone-dot{width:8px;height:8px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #1890ff);border-radius:50%;box-shadow:0 0 4px rgba(0, 0, 0, 0.15)}.multi-progress-container{border-top:1px solid var(--border-subtle, #edf2f7);padding-top:16px;margin-top:20px}.multi-progress-item{transition:all 0.2s ease}.multi-progress-item:hover{transform:translateX(4px)}.multi-progress-bar-wrap{position:relative;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.05)}.multi-progress-label{letter-spacing:0.025em;text-transform:uppercase}.time-estimate{font-size:11px;color:var(--color-primary, #718096);font-weight:600;margin-top:8px;display:block}.pause-button{display:flex;align-items:center;justify-content:center;background:var(--bg-primary, #f7fafc);border:1px solid var(--border-subtle, #e2e8f0);border-radius:50%;width:24px;height:24px;cursor:pointer;color:var(--color-primary, #4a5568);transition:all 0.2s ease;margin-top:8px}.pause-button:hover{background:var(--bg-primary, #edf2f7);color:var(--color-primary, #2d3748);transform:scale(1.1)}.pause-button ui-icon{font-size:10px}.progress-skeleton .progress-line-trail{background:var(--bg-primary, #e2e8f0) !important;position:relative;overflow:hidden}.progress-skeleton .progress-line-trail::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);animation:progress-shimmer 1.5s infinite}.progress-skeleton .progress-line-bar{display:none !important}@keyframes progress-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media (forced-colors: active){.progress-line-trail{border:1px solid CanvasText}.progress-line-bar{background:Highlight}.progress-peak-marker{background:Mark;box-shadow:none}.progress-tick{background:CanvasText;opacity:0.3}}.progress-status-header{display:flex;width:100%;margin-bottom:4px}.progress-status-header--left{justify-content:flex-start}.progress-status-header--center{justify-content:center}.progress-status-header--right{justify-content:flex-end}.progress-status-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;line-height:1;padding:4px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 1px 6px rgba(0, 0, 0, 0.18);backdrop-filter:blur(4px);pointer-events:none;user-select:none}.progress-status-chip ui-icon{font-size:11px}.progress-status-chip--not-started{background:rgba(241, 245, 249, 0.93);color:#475569;border:1px solid #e2e8f0}.progress-status-chip--running{background:rgba(239, 246, 255, 0.93);color:#1d4ed8;border:1px solid #bfdbfe}.progress-status-chip--running ui-icon{animation:progress-spin 1s linear infinite}.progress-status-chip--interrupted{background:rgba(255, 251, 235, 0.93);color:#b45309;border:1px solid #fde68a}.progress-status-chip--completed{background:rgba(240, 253, 244, 0.93);color:#15803d;border:1px solid #bbf7d0}@keyframes progress-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}'}},[513,"ui-progress",{type:[1],percent:[2],status:[1],strokeWidth:[2,"stroke-width"],strokeColor:[1,"stroke-color"],trailColor:[1,"trail-color"],gradient:[4],showInfo:[4,"show-info"],format:[16],size:[1],width:[8],height:[8],strokeLinecap:[1,"stroke-linecap"],success:[1040],steps:[2],gapDegree:[2,"gap-degree"],gapPosition:[1,"gap-position"],multiProgress:[16],buffer:[2],showBuffer:[4,"show-buffer"],paused:[1028],showPauseButton:[4,"show-pause-button"],estimatedTime:[2,"estimated-time"],showTimeEstimate:[4,"show-time-estimate"],milestones:[1040],indeterminate:[4],decimalPrecision:[2,"decimal-precision"],percentageColor:[1,"percentage-color"],liquid:[4],thresholds:[1040],icon:[1],iconLibrary:[1,"icon-library"],skeleton:[4],peakMarker:[1026,"peak-marker"],vitality:[4],dataLabels:[1,"data-labels"],glass:[4],statusBar:[4,"status-bar"],statusBarAlign:[1,"status-bar-align"],statusBarPosition:[1,"status-bar-position"],statusLabels:[1040],glow:[4],labelPosition:[1,"label-position"],orientation:[513],interactive:[4],ticks:[2],currentStatus:[32],animatedPercent:[32],isDragging:[32],gradientId:[32]},void 0,{percent:[{handlePercentChange:0}],strokeColor:[{handleStrokeColorChange:0}],status:[{handleStatusChange:0}]}]),c=g,h=function(){"undefined"!=typeof customElements&&["ui-progress","ui-badge","ui-button","ui-icon","ui-loader"].forEach((r=>{switch(r){case"ui-progress":customElements.get(o(r))||customElements.define(o(r),g);break;case"ui-badge":customElements.get(o(r))||n();break;case"ui-button":customElements.get(o(r))||a();break;case"ui-icon":customElements.get(o(r))||p();break;case"ui-loader":customElements.get(o(r))||l()}}))};export{c as UiProgress,h as defineCustomElement}