atomicuilibrary 0.0.1 → 0.1.0

package/dist/components/ui-card.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as r,createEvent as a,h as e,Host as i,transformTag as o}from"@stencil/core/internal/client";import{s as n,d as s}from"./icon.js";import{d,a as c}from"./badge.js";const l=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.cardFlip=a(this,"cardFlip",7),this.menuItemClick=a(this,"menuItemClick",7),this.expandToggle=a(this,"expandToggle",7),this.cardToggle=a(this,"cardToggle",7),this.cardClick=a(this,"cardClick",7),this.cardSelect=a(this,"cardSelect",7),this.cardClose=a(this,"cardClose",7),this.menuActionClick=a(this,"menuActionClick",7)}get element(){return this}cardId="";cardTitle="";variant="default";size="default";layout="vertical";color="default";displayMode="default";shape="default";glass=!1;bordered=!0;border="";borderRadius="8px";importance="standard";pattern="default";headStyle={};bodyStyle={};type="default";width="100%";height="auto";aspectRatio="16/9";hoverable=!1;flippable=!1;flipTrigger="click";flipped=!1;collapsible=!1;collapsed=!1;closable=!1;selectable=!1;selected=!1;clickable=!1;href="";target="";tilt=!1;magnetic=!1;cover="";coverAlt="Card cover";extra="";avatar="";avatarIcon="";ribbon="";ribbonPosition="top-right";ribbonColor="";description="";tag="";buttonText="";actions="";showMenu=!1;menuItems="[]";menuActions="";iconLibrary="default";loading=!1;autoScroll=!1;scrollBehavior="smooth";isFlipped=!1;isMenuOpen=!1;isCollapsed=!1;parsedMenuItems=[];magneticTransform="";tiltTransform="";cardFlip;menuItemClick;expandToggle;cardToggle;cardClick;cardSelect;cardClose;menuActionClick;menuRef;handleMenuPropsChange(){this.parseMenuItems()}handleFlippedChange(t){this.isFlipped=t}handleCollapsedChange(t){this.isCollapsed=t}componentWillLoad(){this.parseMenuItems(),this.isFlipped=this.flipped,this.isCollapsed=this.collapsed}handleClickOutside(t){this.isMenuOpen&&this.menuRef&&!this.menuRef.contains(t.target)&&(this.isMenuOpen=!1)}parseMenuItems(){let t=[];if(this.menuItems&&"[]"!==this.menuItems)try{t=JSON.parse(this.menuItems)}catch(t){console.error("Invalid JSON for menu items:",t)}this.menuActions&&this.menuActions.split(",").map((t=>t.trim())).forEach((r=>{r&&t.push({id:r.toLowerCase().replace(/\s+/g,"-"),label:r})})),this.parsedMenuItems=t}toggleFlip=t=>{t&&t.stopPropagation(),this.flippable&&(this.isFlipped=!this.isFlipped,this.flipped=this.isFlipped,this.cardFlip.emit(this.isFlipped))};toggleCollapse=t=>{t&&t.stopPropagation(),this.collapsible&&(this.isCollapsed=!this.isCollapsed,this.collapsed=this.isCollapsed,this.cardToggle.emit(!this.isCollapsed),this.expandToggle.emit({expanded:!this.isCollapsed}),this.autoScroll&&!this.isCollapsed&&setTimeout((()=>{this.element.scrollIntoView({behavior:this.scrollBehavior,block:"nearest"})}),300))};async scrollToCard(){this.element.scrollIntoView({behavior:this.scrollBehavior,block:"nearest"})}toggleMenu=t=>{t.stopPropagation(),this.isMenuOpen=!this.isMenuOpen};handleMenuItemClick=(t,r)=>{r.stopPropagation();const a=this.parsedMenuItems.find((r=>r.id===t));a?.disabled||(this.menuItemClick.emit({itemId:t,cardId:this.cardId}),this.menuActionClick.emit(t),this.isMenuOpen=!1)};handleCardClick=t=>{const r=t.target;if(!(r.closest("button")||r.closest(".menu-dropdown")||r.closest(".card-actions")||r.closest(".card-action-btn"))){if(!this.flippable||"click"!==this.flipTrigger)return this.selectable?(this.selected=!this.selected,void this.cardSelect.emit(this.selected)):void(this.href?"_blank"===this.target?window.open(this.href,"_blank"):window.location.href=this.href:this.clickable&&this.cardClick.emit());this.toggleFlip(t)}};handleMouseEnter=t=>{this.flippable&&"hover"===this.flipTrigger&&(this.isFlipped=!0,this.flipped=!0,this.cardFlip.emit(!0)),this.handleMouseMove(t)};handleMouseLeave=()=>{this.flippable&&"hover"===this.flipTrigger&&(this.isFlipped=!1,this.flipped=!1,this.cardFlip.emit(!1)),this.tiltTransform="",this.magneticTransform=""};handleMouseMove=t=>{if(!this.magnetic&&!this.tilt||this.loading)return;const r=this.element.getBoundingClientRect(),a=t.clientX-(r.left+r.width/2),e=t.clientY-(r.top+r.height/2);if(this.magnetic){const t=20;this.magneticTransform=`translate(${a/t}px, ${e/t}px)`}this.tilt&&(this.tiltTransform=`perspective(1000px) rotateX(${e/(r.height/2)*-15}deg) rotateY(${a/(r.width/2)*15}deg)`)};handleClose=t=>{t.stopPropagation(),this.cardClose.emit()};renderMenu(){return this.showMenu||this.parsedMenuItems.length>0?e("div",{class:"menu-container",ref:t=>this.menuRef=t},e("ui-button",{variant:"ghost",onClick:this.toggleMenu,ariaLabel:"Card menu",icon:"more-vertical",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),this.isMenuOpen&&e("div",{class:"menu-dropdown",role:"menu"},this.parsedMenuItems.map((t=>t.separator?e("div",{class:"menu-separator",role:"separator"}):e("ui-button",{variant:"ghost",onClick:r=>this.handleMenuItemClick(t.id,r),disabled:t.disabled,label:t.label,icon:t.icon,iconLibrary:t.iconLibrary||this.iconLibrary,fullWidth:!0,align:"start",size:"sm"}))))):null}renderSkeleton(){return e("div",{class:"skeleton-wrapper"},e("div",{class:"skeleton-header"},e("div",{class:"skeleton-avatar"}),e("div",{class:"skeleton-title-group"},e("div",{class:"skeleton-text skeleton-title"}),e("div",{class:"skeleton-text skeleton-subtitle"}))),e("div",{class:"skeleton-content"},e("div",{class:"skeleton-text full"}),e("div",{class:"skeleton-text full"}),e("div",{class:"skeleton-text half"})))}renderSelectionIndicator(){return this.selectable?e("div",{class:"selection-indicator "+(this.selected?"selected":"")},this.selected&&e("ui-icon",{name:"check",library:"lucide",size:"1.2em",class:"check-icon"})):null}renderHeader(){return this.cardTitle||this.extra||this.avatar||this.avatarIcon||this.closable||this.collapsible||this.showMenu||this.parsedMenuItems.length>0?e("div",{class:"card-header",style:this.headStyle},e("div",{class:"card-header-main"},(this.avatar||this.avatarIcon)&&e("div",{class:"card-avatar"},this.avatar?e("img",{src:this.avatar,alt:"avatar",class:"card-avatar-img"}):e("ui-icon",{name:this.avatarIcon,library:this.iconLibrary,size:"1.2em"})),e("div",{class:"card-title-group"},this.cardTitle&&e("div",{class:"card-title-text"},this.cardTitle),e("slot",{name:"header"}),e("slot",{name:"title"}))),e("div",{class:"card-actions"},this.extra&&e("div",{class:"card-extra",innerHTML:n(this.extra)}),e("slot",{name:"extra"}),e("slot",{name:"actions"}),this.collapsible&&e("ui-button",{variant:"ghost",onClick:this.toggleCollapse,ariaLabel:this.isCollapsed?"Expand":"Collapse",icon:this.isCollapsed?"chevron-down":"chevron-up",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),this.renderMenu(),this.closable&&e("ui-button",{variant:"ghost",onClick:this.handleClose,ariaLabel:"Close",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"}))):null}renderCover(){return this.cover||this.element.querySelector('[slot="cover"]')?e("div",{class:"card-cover",style:{aspectRatio:this.aspectRatio}},this.cover&&e("img",{src:this.cover,alt:this.coverAlt}),e("slot",{name:"cover"})):null}renderFooter(){const t=this.actions?this.actions.split(",").map((t=>t.trim())):[];return this.buttonText||t.length>0||this.element.querySelector('[slot="footer"]')?e("div",{class:"card-footer"},this.buttonText&&e("ui-button",{variant:"primary",label:this.buttonText}),t.length>0&&e("ul",{class:"card-quick-actions"},t.map((t=>e("li",null,e("span",{innerHTML:n(t)}))))),e("slot",{name:"footer"})):null}renderFrontCard(){return e("div",{class:{"card-face-content":!0,"card-collapsed":this.isCollapsed,"card-hoverable":this.hoverable,"card-selectable":this.selectable,"card-selected":this.selected,"card-clickable":!(!this.href&&!this.clickable||this.flippable),"card-glass":this.glass,["card-layout-"+this.layout]:!0,["card-importance-"+this.importance]:!0,["card-pattern-"+this.pattern]:!0,["card-type-"+this.type]:!0},style:{borderRadius:this.borderRadius,border:this.selected?"2px solid var(--ui-card-selected-border, #3bf673)":this.bordered?this.border||void 0:"none"}},this.renderCover(),e("div",{class:"card-details-wrapper"},this.renderHeader(),e("slot",{name:"tabs"}),!this.isCollapsed&&[e("div",{class:"card-content",style:this.bodyStyle},e("slot",null),e("slot",{name:"content"}),this.description&&e("div",{class:"card-description"},this.description),this.tag&&e("div",{class:"card-tag"},this.tag)),this.renderFooter(),e("slot",{name:"grid"})]))}renderBackCard(){return this.flippable?e("div",{class:"card-face-content card-back",style:{borderRadius:this.borderRadius,border:this.bordered?this.border||void 0:"none"}},e("div",{class:"card-back-header"},e("ui-button",{variant:"ghost",onClick:this.toggleFlip,ariaLabel:"Flip card back",icon:"arrow-left",iconLibrary:"lucide",iconOnly:!0,size:"sm"})),e("div",{class:"card-content"},e("slot",{name:"back"},e("div",{class:"card-back-default"},e("h3",null,"Back Side"),e("p",null,'Add content to the "back" slot to customize this side.'))),e("slot",{name:"back-content"}))):null}render(){const t=["ui-card","variant-"+("string"==typeof this.variant?this.variant:"default"),"size-"+("string"==typeof this.size?this.size:"md"),this.isFlipped&&"is-flipped",this.loading&&"is-loading",this.flippable&&"is-flippable"].filter(Boolean).join(" ");return e(i,{key:"ef88aac3904761439d1c4d689cd89c4c47569894",class:t,style:{width:"string"==typeof this.width?this.width:void 0,height:"string"==typeof this.height?this.height:void 0},onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},this.ribbon&&e("div",{key:"a9866c010965c9259e2d566ca909965f63e0dbbb",class:"card-ribbon ribbon-"+this.ribbonPosition,style:this.ribbonColor?{backgroundColor:this.ribbonColor}:{}},e("span",{key:"24ef228a94d1e6ffc61bc7fef52c4f34ca88daf2"},this.ribbon)),this.loading?e("div",{class:"card-loading-container",style:{borderRadius:this.borderRadius}},this.renderSkeleton()):e("div",{class:"card-container",onClick:this.handleCardClick,onMouseMove:this.handleMouseMove,style:{transform:`${this.magneticTransform} ${this.tiltTransform}`,transition:this.magneticTransform||this.tiltTransform?"none":"transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)"}},this.flippable?e("div",{class:"card-flipper"},e("div",{class:"card-face face-front"},this.renderFrontCard(),this.renderSelectionIndicator()),e("div",{class:"card-face face-back"},this.renderBackCard())):[this.renderFrontCard(),this.renderSelectionIndicator()]))}static get watchers(){return{menuItems:[{handleMenuPropsChange:0}],menuActions:[{handleMenuPropsChange:0}],flipped:[{handleFlippedChange:0}],collapsed:[{handleCollapsedChange: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;box-sizing:border-box;--ui-card-selected-border:var(--color-primary, #10b981);--ui-card-primary:var(--color-primary, #10b981);--ui-card-success:var(--color-success, #10b981);--ui-card-warning:var(--color-warning, #f59e0b);--ui-card-danger:var(--color-danger, #ef4444);--ui-card-info:var(--color-info, #06b6d4)}:host *{box-sizing:border-box}.ui-card{font-family:var(--ui-font-family, inherit);position:relative;width:100%;height:100%;transition:transform 0.3s ease, box-shadow 0.3s ease}.card-container{position:relative;width:100%;height:100%;perspective:1000px}.card-flipper{position:relative;width:100%;height:100%;transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);transform-style:preserve-3d}.is-flipped .card-flipper{transform:rotateY(180deg)}.card-face{position:absolute;top:0;left:0;width:100%;height:min-content;min-height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex}.face-back{transform:rotateY(180deg)}.card-face-content{display:flex;flex-direction:column;width:100%;background:var(--ui-card-bg, var(--bg-primary, #ffffff));border-radius:var(--ui-card-radius, 8px);overflow:hidden;transition:all 0.3s ease;border:1px solid var(--ui-card-border-color, var(--border-default, #e5e7eb));box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);position:relative}.card-details-wrapper{display:flex;flex-direction:column;flex:1;width:100%}.variant-elevated .card-face-content{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.variant-outlined .card-face-content{box-shadow:none;border:2px solid var(--ui-card-border-color, var(--border-default, #e5e7eb))}.variant-filled .card-face-content{background-color:var(--bg-primary, #f9fafb);border:none}.variant-primary .card-face-content{border-left:4px solid var(--ui-card-primary)}.variant-primary .card-face-content .card-header{background:linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent)}.variant-success .card-face-content{border-left:4px solid var(--ui-card-success)}.variant-success .card-face-content .card-header{background:linear-gradient(to right, rgba(var(--color-success-rgb, 16, 185, 129), 0.1), transparent)}.variant-warning .card-face-content{border-left:4px solid var(--ui-card-warning)}.variant-warning .card-face-content .card-header{background:linear-gradient(to right, rgba(var(--color-warning-rgb, 245, 158, 11), 0.1), transparent)}.variant-danger .card-face-content{border-left:4px solid var(--ui-card-danger)}.variant-danger .card-face-content .card-header{background:linear-gradient(to right, rgba(var(--color-danger-rgb, 239, 68, 68), 0.1), transparent)}.variant-info .card-face-content{border-left:4px solid var(--ui-card-info)}.variant-info .card-face-content .card-header{background:linear-gradient(to right, rgba(6, 182, 212, 0.1), transparent)}.card-importance-emphasized .card-face-content{box-shadow:0 10px 30px rgba(0, 0, 0, 0.15);border:none;background:linear-gradient(135deg, var(--bg-secondary, #111827) 0%, var(--color-primary, #374151) 100%);color:var(--text-standard, #ffffff)}.card-importance-emphasized .card-face-content .card-title-text,.card-importance-emphasized .card-face-content .card-content,.card-importance-emphasized .card-face-content .card-extra,.card-importance-emphasized .card-face-content .card-description{color:var(--text-standard, #ffffff)}.card-importance-emphasized .card-face-content .card-header,.card-importance-emphasized .card-face-content .card-footer{border-bottom-color:rgba(255, 255, 255, 0.1);border-top-color:rgba(255, 255, 255, 0.1)}.card-importance-emphasized .card-face-content .card-action-btn{color:rgba(255, 255, 255, 0.7)}.card-importance-emphasized .card-face-content .card-action-btn:hover{background:rgba(255, 255, 255, 0.1);color:var(--text-standard, #ffffff)}.card-pattern-shortcut .card-face-content{text-align:center;padding:32px 24px;align-items:center}.card-pattern-shortcut .card-face-content .card-header{border-bottom:none;padding:0;margin-bottom:16px;flex-direction:column}.card-pattern-shortcut .card-face-content .card-header-main{flex-direction:column;gap:12px}.card-pattern-shortcut .card-face-content .card-title-text{font-size:20px;text-align:center}.card-pattern-shortcut .card-face-content .card-avatar{margin:0 auto 8px;width:64px;height:64px}.card-pattern-shortcut .card-face-content .card-avatar i{font-size:32px}.card-pattern-product .card-cover{background:var(--bg-primary, #f7f7f7)}.card-pattern-product .card-content{padding-top:16px}.card-type-inner{background:var(--bg-primary, #fafafa)}.card-type-inner .card-header{background:transparent;padding:12px 16px;min-height:48px}.card-type-inner .card-content{padding:16px}.card-glass .card-face-content{background:rgba(255, 255, 255, 0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.3);box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.1)}.card-selectable{cursor:pointer;border:2px solid transparent !important}.card-selectable:hover{border-color:var(--border-subtle, #e6f7ff) !important;box-shadow:0 4px 12px rgba(0, 0, 0, 0.08)}.card-selected .card-face-content{border-color:var(--ui-card-selected-border) !important;box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.selection-indicator{position:absolute;top:8px;right:8px;width:24px;height:24px;background:var(--ui-card-selected-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-standard, #ffffff);opacity:0;transform:scale(0.5);transition:all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index:10}.selection-indicator.selected{opacity:1;transform:scale(1)}.card-ribbon{position:absolute;z-index:20;padding:4px 16px;background:var(--ui-card-primary);color:var(--text-standard, #ffffff);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2)}.card-ribbon.ribbon-top-right{top:12px;right:-8px;border-radius:4px 0 0 4px}.card-ribbon.ribbon-top-right::after{content:"";position:absolute;right:0;bottom:-8px;border-right:8px solid transparent;border-top:8px solid rgba(0, 0, 0, 0.3)}.card-ribbon.ribbon-top-left{top:12px;left:-8px;border-radius:0 4px 4px 0}.card-ribbon.ribbon-top-left::after{content:"";position:absolute;left:0;bottom:-8px;border-left:8px solid transparent;border-top:8px solid rgba(0, 0, 0, 0.3)}.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-subtle, #f3f4f6);min-height:56px;gap:12px;transition:all 0.3s ease}.card-contain-tabs .card-header{border-bottom:none;padding-bottom:0}.card-header-main{display:flex;align-items:center;gap:12px;flex:1}.card-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-secondary, #f3f4f6);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.card-avatar i{font-size:18px;color:var(--text-muted, #9ca3af)}.card-avatar-img{width:100%;height:100%;object-fit:cover}.card-title-text{font-weight:700;font-size:16px;color:var(--text-primary, #111827)}.card-actions{display:flex;align-items:center;gap:4px}.card-extra{font-size:13px;color:var(--text-muted, #6b7280)}.card-action-btn{width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--text-muted, #6b7280);display:flex;align-items:center;justify-content:center;transition:all 0.2s}.card-action-btn:hover{background:var(--bg-secondary, #f3f4f6);color:var(--text-primary, #111827)}.card-cover{width:100%;overflow:hidden}.card-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease}.card-hoverable:hover .card-cover img{transform:scale(1.05)}.card-content{padding:20px;flex:1;color:var(--text-secondary, #4b5563);line-height:1.6}.card-description{margin-top:12px;color:var(--text-muted, #6b7280);font-size:14px}.card-tag{display:inline-block;margin-top:12px;padding:2px 10px;background:var(--bg-secondary, #f3f4f6);border-radius:99px;font-size:12px;color:var(--text-secondary, #4b5563);font-weight:500}.card-footer{padding:16px 20px;border-top:1px solid var(--border-subtle, #f3f4f6);display:flex;flex-direction:column;gap:12px}.card-primary-btn{width:100%;padding:10px;background:var(--ui-card-primary);color:var(--text-standard, #ffffff);border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:opacity 0.2s}.card-primary-btn:hover{opacity:0.9}.card-quick-actions{list-style:none;padding:0;margin:16px -20px -16px;display:flex;background:var(--bg-primary, #fafafa);border-top:1px solid var(--border-subtle, #f3f4f6)}.card-quick-actions li{flex:1;padding:12px 16px;text-align:center;color:var(--text-secondary, #4b5563);font-weight:500;cursor:pointer;transition:all 0.2s;border-right:1px solid var(--border-subtle, #f3f4f6)}.card-quick-actions li:last-child{border-right:none}.card-quick-actions li:hover{background:var(--bg-secondary, #f3f4f6);color:var(--ui-card-primary)}.card-layout-horizontal{flex-direction:row !important}.card-layout-horizontal .card-cover{width:35% !important;max-width:300px;height:auto !important;flex-shrink:0}.card-layout-horizontal .card-details-wrapper{flex:1}@media (max-width: 768px){.card-layout-horizontal{flex-direction:column !important}.card-layout-horizontal .card-cover{width:100% !important;max-width:none;aspect-ratio:16/9}}::slotted([slot=grid]){display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1px;background:var(--bg-secondary, #f3f4f6);border-top:1px solid var(--border-subtle, #f3f4f6)}::slotted([slot=grid]) ui-card{margin:0;--ui-card-radius:0}.menu-container{position:relative}.menu-dropdown{position:absolute;top:100%;right:0;background:var(--bg-primary, #ffffff);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);border:1px solid var(--border-subtle, #f3f4f6);padding:6px;min-width:160px;z-index:100;margin-top:4px;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.menu-item{width:100%;padding:8px 12px;border:none;background:transparent;display:flex;align-items:center;gap:8px;border-radius:4px;cursor:pointer;font-size:14px;color:var(--text-secondary, #374151)}.menu-item:hover{background:var(--bg-primary, #f9fafb);color:var(--text-primary, #111827)}.menu-item.menu-item-disabled{opacity:0.5;cursor:not-allowed}.menu-separator{height:1px;background:var(--bg-secondary, #f3f4f6);margin:4px -6px}.card-loading-container{background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);padding:20px}.skeleton-avatar{background:var(--bg-secondary, #f3f4f6);width:48px;height:48px;border-radius:50%}.skeleton-text{background:var(--bg-secondary, #f3f4f6);height:16px;border-radius:4px;position:relative;overflow:hidden}.skeleton-text::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);animation:loading-shimmer 1.5s infinite}@keyframes loading-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}.card-hoverable:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)}.card-clickable{cursor:pointer}:host-context([data-theme=dark]) .card-face-content{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151);color:var(--text-standard, #f3f4f6)}:host-context([data-theme=dark]) .card-title-text{color:var(--text-standard, #f9fafb)}:host-context([data-theme=dark]) .card-header{border-bottom-color:var(--border-default, #374151)}:host-context([data-theme=dark]) .card-footer{border-top-color:var(--border-default, #374151)}:host-context([data-theme=dark]) .menu-dropdown{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151)}:host-context([data-theme=dark]) .menu-item{color:var(--bg-secondary, #d1d5db)}:host-context([data-theme=dark]) .menu-item:hover{background:var(--color-primary, #374151);color:var(--text-standard, #f9fafb)}:host-context([data-theme=dark]) .skeleton-text,:host-context([data-theme=dark]) .skeleton-avatar{background:var(--color-primary, #374151)}'}},[769,"ui-card",{cardId:[1,"card-id"],cardTitle:[1,"card-title"],variant:[1],size:[1],layout:[1],color:[1],displayMode:[1,"display-mode"],shape:[1],glass:[4],bordered:[4],border:[1],borderRadius:[1,"border-radius"],importance:[1],pattern:[1],headStyle:[16],bodyStyle:[16],type:[1],width:[1],height:[1],aspectRatio:[1,"aspect-ratio"],hoverable:[4],flippable:[4],flipTrigger:[1,"flip-trigger"],flipped:[1028],collapsible:[4],collapsed:[1028],closable:[4],selectable:[4],selected:[1028],clickable:[4],href:[1],target:[1],tilt:[4],magnetic:[4],cover:[1],coverAlt:[1,"cover-alt"],extra:[1],avatar:[1],avatarIcon:[1,"avatar-icon"],ribbon:[1],ribbonPosition:[1,"ribbon-position"],ribbonColor:[1,"ribbon-color"],description:[1],tag:[1],buttonText:[1,"button-text"],actions:[1],showMenu:[4,"show-menu"],menuItems:[1,"menu-items"],menuActions:[1,"menu-actions"],iconLibrary:[1,"icon-library"],loading:[4],autoScroll:[4,"auto-scroll"],scrollBehavior:[1,"scroll-behavior"],isFlipped:[32],isMenuOpen:[32],isCollapsed:[32],parsedMenuItems:[32],magneticTransform:[32],tiltTransform:[32],scrollToCard:[64]},[[8,"click","handleClickOutside"]],{menuItems:[{handleMenuPropsChange:0}],menuActions:[{handleMenuPropsChange:0}],flipped:[{handleFlippedChange:0}],collapsed:[{handleCollapsedChange:0}]}]),p=l,h=function(){"undefined"!=typeof customElements&&["ui-card","ui-badge","ui-button","ui-icon"].forEach((t=>{switch(t){case"ui-card":customElements.get(o(t))||customElements.define(o(t),l);break;case"ui-badge":customElements.get(o(t))||c();break;case"ui-button":customElements.get(o(t))||d();break;case"ui-icon":customElements.get(o(t))||s()}}))};export{p as UiCard,h as defineCustomElement}
+import{proxyCustomElement as r,HTMLElement as a,createEvent as t,h as e,Host as i,transformTag as o}from"@stencil/core/internal/client";import{s,d}from"./icon.js";import{d as n,a as c}from"./badge.js";import{d as l}from"./loader.js";const p=r(class extends a{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.cardFlip=t(this,"cardFlip",7),this.menuItemClick=t(this,"menuItemClick",7),this.expandToggle=t(this,"expandToggle",7),this.cardToggle=t(this,"cardToggle",7),this.cardClick=t(this,"cardClick",7),this.cardSelect=t(this,"cardSelect",7),this.cardClose=t(this,"cardClose",7),this.menuActionClick=t(this,"menuActionClick",7)}get element(){return this}cardId="";cardTitle="";variant="default";size="default";layout="vertical";color="default";displayMode="default";shape="default";glass=!1;bordered=!0;border="";borderRadius="8px";importance="standard";pattern="default";headStyle={};bodyStyle={};type="default";width="100%";height="auto";aspectRatio="16/9";hoverable=!1;flippable=!1;flipTrigger="click";flipped=!1;collapsible=!1;collapsed=!1;closable=!1;closed=!1;selectable=!1;selected=!1;clickable=!1;href="";target="";tilt=!1;magnetic=!1;cover="";coverAlt="Card cover";extra="";avatar="";avatarIcon="";ribbon="";ribbonPosition="top-right";ribbonColor="";description="";tag="";buttonText="";actions="";showMenu=!1;menuItems="[]";menuActions="";iconLibrary="default";loading=!1;autoScroll=!1;scrollBehavior="smooth";isFlipped=!1;isMenuOpen=!1;isCollapsed=!1;isClosed=!1;parsedMenuItems=[];magneticTransform="";tiltTransform="";cardFlip;menuItemClick;expandToggle;cardToggle;cardClick;cardSelect;cardClose;menuActionClick;menuRef;handleMenuPropsChange(){this.parseMenuItems()}handleFlippedChange(r){this.isFlipped=r}handleCollapsedChange(r){this.isCollapsed=r}handleClosedChange(r){this.isClosed=r}componentWillLoad(){this.parseMenuItems(),this.isFlipped=this.flipped,this.isCollapsed=this.collapsed,this.isClosed=this.closed}handleClickOutside(r){this.isMenuOpen&&this.menuRef&&!this.menuRef.contains(r.target)&&(this.isMenuOpen=!1)}parseMenuItems(){let r=[];if(this.menuItems&&"[]"!==this.menuItems)try{r=JSON.parse(this.menuItems)}catch(r){console.error("Invalid JSON for menu items:",r)}this.menuActions&&this.menuActions.split(",").map((r=>r.trim())).forEach((a=>{a&&r.push({id:a.toLowerCase().replace(/\s+/g,"-"),label:a})})),this.parsedMenuItems=r}toggleFlip=r=>{r&&r.stopPropagation(),this.flippable&&(this.isFlipped=!this.isFlipped,this.flipped=this.isFlipped,this.cardFlip.emit(this.isFlipped))};toggleCollapse=r=>{r&&r.stopPropagation(),this.collapsible&&(this.isCollapsed=!this.isCollapsed,this.collapsed=this.isCollapsed,this.cardToggle.emit(!this.isCollapsed),this.expandToggle.emit({expanded:!this.isCollapsed}),this.autoScroll&&!this.isCollapsed&&setTimeout((()=>{this.element.scrollIntoView({behavior:this.scrollBehavior,block:"nearest"})}),300))};async scrollToCard(){this.element.scrollIntoView({behavior:this.scrollBehavior,block:"nearest"})}toggleMenu=r=>{r.stopPropagation(),this.isMenuOpen=!this.isMenuOpen};handleMenuItemClick=(r,a)=>{a.stopPropagation();const t=this.parsedMenuItems.find((a=>a.id===r));t?.disabled||(this.menuItemClick.emit({itemId:r,cardId:this.cardId}),this.menuActionClick.emit(r),this.isMenuOpen=!1)};handleCardClick=r=>{const a=r.target;if(!(a.closest("button")||a.closest(".menu-dropdown")||a.closest(".card-actions")||a.closest(".card-action-btn"))){if(!this.flippable||"click"!==this.flipTrigger)return this.selectable?(this.selected=!this.selected,void this.cardSelect.emit(this.selected)):void(this.href?"_blank"===this.target?window.open(this.href,"_blank"):window.location.href=this.href:this.clickable&&this.cardClick.emit());this.toggleFlip(r)}};handleMouseEnter=r=>{this.flippable&&"hover"===this.flipTrigger&&(this.isFlipped=!0,this.flipped=!0,this.cardFlip.emit(!0)),this.handleMouseMove(r)};handleMouseLeave=()=>{this.flippable&&"hover"===this.flipTrigger&&(this.isFlipped=!1,this.flipped=!1,this.cardFlip.emit(!1)),this.tiltTransform="",this.magneticTransform=""};handleMouseMove=r=>{if(!this.magnetic&&!this.tilt||this.loading)return;const a=this.element.getBoundingClientRect(),t=r.clientX-(a.left+a.width/2),e=r.clientY-(a.top+a.height/2);if(this.magnetic){const r=20;this.magneticTransform=`translate(${t/r}px, ${e/r}px)`}this.tilt&&(this.tiltTransform=`perspective(1000px) rotateX(${e/(a.height/2)*-15}deg) rotateY(${t/(a.width/2)*15}deg)`)};handleClose=r=>{r.stopPropagation(),this.isClosed=!0,this.closed=!0,this.cardClose.emit()};renderMenu(){return this.showMenu||this.parsedMenuItems.length>0?e("div",{class:"menu-container",ref:r=>this.menuRef=r},e("ui-button",{variant:"ghost",onClick:this.toggleMenu,ariaLabel:"Card menu",icon:"more-vertical",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),this.isMenuOpen&&e("div",{class:"menu-dropdown",role:"menu"},this.parsedMenuItems.map((r=>r.separator?e("div",{class:"menu-separator",role:"separator"}):e("ui-button",{variant:"ghost",onClick:a=>this.handleMenuItemClick(r.id,a),disabled:r.disabled,label:r.label,icon:r.icon,iconLibrary:r.iconLibrary||this.iconLibrary,fullWidth:!0,align:"start",size:"sm"}))))):null}renderSkeleton(){return e("div",{class:"skeleton-wrapper"},e("div",{class:"skeleton-header"},e("div",{class:"skeleton-avatar"}),e("div",{class:"skeleton-title-group"},e("div",{class:"skeleton-text skeleton-title"}),e("div",{class:"skeleton-text skeleton-subtitle"}))),e("div",{class:"skeleton-content"},e("div",{class:"skeleton-text full"}),e("div",{class:"skeleton-text full"}),e("div",{class:"skeleton-text half"})))}renderSelectionIndicator(){return this.selectable?e("div",{class:"selection-indicator "+(this.selected?"selected":"")},this.selected&&e("ui-icon",{name:"check",library:"lucide",size:"1.2em",class:"check-icon"})):null}renderHeader(){return this.cardTitle||this.extra||this.avatar||this.avatarIcon||this.closable||this.collapsible||this.showMenu||this.parsedMenuItems.length>0?e("div",{class:"card-header",style:this.headStyle},e("div",{class:"card-header-main"},(this.avatar||this.avatarIcon)&&e("div",{class:"card-avatar"},this.avatar?e("img",{src:this.avatar,alt:"avatar",class:"card-avatar-img"}):e("ui-icon",{name:this.avatarIcon,library:this.iconLibrary,size:"1.2em"})),e("div",{class:"card-title-group"},this.cardTitle&&e("div",{class:"card-title-text"},this.cardTitle),e("slot",{name:"header"}),e("slot",{name:"title"}))),e("div",{class:"card-actions"},this.extra&&e("div",{class:"card-extra",innerHTML:s(this.extra)}),e("slot",{name:"extra"}),e("slot",{name:"actions"}),this.collapsible&&e("ui-button",{variant:"ghost",onClick:this.toggleCollapse,ariaLabel:this.isCollapsed?"Expand":"Collapse",icon:this.isCollapsed?"chevron-down":"chevron-up",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),this.renderMenu(),this.closable&&e("ui-button",{variant:"ghost",onClick:this.handleClose,ariaLabel:"Close",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"}))):null}renderCover(){return this.cover||this.element.querySelector('[slot="cover"]')?e("div",{class:"card-cover",style:{aspectRatio:this.aspectRatio}},this.cover&&e("img",{src:this.cover,alt:this.coverAlt}),e("slot",{name:"cover"})):null}renderFooter(){const r=this.actions?this.actions.split(",").map((r=>r.trim())):[];return this.buttonText||r.length>0||this.element.querySelector('[slot="footer"]')?e("div",{class:"card-footer"},this.buttonText&&e("ui-button",{variant:"primary",label:this.buttonText}),r.length>0&&e("ul",{class:"card-quick-actions"},r.map((r=>e("li",null,e("span",{innerHTML:s(r)}))))),e("slot",{name:"footer"})):null}renderFrontCard(){return e("div",{class:{"card-face-content":!0,"card-collapsed":this.isCollapsed,"card-hoverable":this.hoverable,"card-selectable":this.selectable,"card-selected":this.selected,"card-clickable":!(!this.href&&!this.clickable||this.flippable),"card-glass":this.glass,["card-layout-"+this.layout]:!0,["card-importance-"+this.importance]:!0,["card-pattern-"+this.pattern]:!0,["card-type-"+this.type]:!0,["card-variant-"+this.variant]:!0,["card-color-"+this.color]:!0},style:{borderRadius:this.borderRadius,border:this.selected?"2px solid var(--ui-card-selected-border, #3bf673)":this.bordered?this.border||void 0:"none"}},this.renderCover(),e("div",{class:"card-details-wrapper"},this.renderHeader(),e("slot",{name:"tabs"}),!this.isCollapsed&&[e("div",{class:"card-content",style:this.bodyStyle},e("slot",null),e("slot",{name:"content"}),this.description&&e("div",{class:"card-description"},this.description),this.tag&&e("div",{class:"card-tag"},this.tag)),this.renderFooter(),e("slot",{name:"grid"})]))}renderBackCard(){if(!this.flippable)return null;const r={borderRadius:this.borderRadius,border:this.bordered?this.border||void 0:"none"};return e("div",{class:{"card-face-content":!0,"card-back":!0,["card-variant-"+this.variant]:!0,["card-color-"+this.color]:!0},style:r},e("div",{class:"card-back-header"},e("ui-button",{variant:"ghost",onClick:this.toggleFlip,ariaLabel:"Flip card back",icon:"arrow-left",iconLibrary:"lucide",iconOnly:!0,size:"sm"})),e("div",{class:"card-content"},e("slot",{name:"back"},e("div",{class:"card-back-default"},e("h3",null,"Back Side"),e("p",null,'Add content to the "back" slot to customize this side.'))),e("slot",{name:"back-content"})))}render(){const r=["ui-card","variant-"+("string"==typeof this.variant?this.variant:"default"),"color-"+("string"==typeof this.color?this.color:"default"),"size-"+("string"==typeof this.size?this.size:"md"),this.isFlipped&&"is-flipped",this.loading&&"is-loading",this.flippable&&"is-flippable",this.isClosed&&"is-closed"].filter(Boolean).join(" ");return e(i,{key:"186bcc9dde0f56786499dd1f575f17996461aa7f",class:r,style:{width:"string"==typeof this.width?this.width:void 0,height:"string"==typeof this.height?this.height:void 0},onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},this.ribbon&&e("div",{key:"9073fc18c3fedf1c31fb18f15f26e2a4acfd9387",class:"card-ribbon ribbon-"+this.ribbonPosition,style:this.ribbonColor?{backgroundColor:this.ribbonColor}:{}},e("span",{key:"fee6270b9bc17041837bd7dbffc26db9e43aad0e"},this.ribbon)),this.loading?e("div",{class:"card-loading-container",style:{borderRadius:this.borderRadius}},this.renderSkeleton()):e("div",{class:"card-container",onClick:this.handleCardClick,onMouseMove:this.handleMouseMove,style:{transform:`${this.magneticTransform} ${this.tiltTransform}`,transition:this.magneticTransform||this.tiltTransform?"none":"transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)"}},this.flippable?e("div",{class:"card-flipper"},e("div",{class:"card-face face-front"},this.renderFrontCard(),this.renderSelectionIndicator()),e("div",{class:"card-face face-back"},this.renderBackCard())):[this.renderFrontCard(),this.renderSelectionIndicator()]))}static get watchers(){return{menuItems:[{handleMenuPropsChange:0}],menuActions:[{handleMenuPropsChange:0}],flipped:[{handleFlippedChange:0}],collapsed:[{handleCollapsedChange:0}],closed:[{handleClosedChange: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;box-sizing:border-box;--ui-card-selected-border:var(--color-primary, #10b981);--ui-card-primary:var(--color-primary, #10b981);--ui-card-success:var(--color-success, #10b981);--ui-card-warning:var(--color-warning, #f59e0b);--ui-card-danger:var(--color-danger, #ef4444);--ui-card-info:var(--color-info, #06b6d4)}:host *{box-sizing:border-box}.ui-card{font-family:var(--ui-font-family, inherit);position:relative;width:100%;height:100%;transition:transform 0.3s ease, box-shadow 0.3s ease}.card-container{position:relative;width:100%;height:100%;perspective:1000px}.card-flipper{position:relative;width:100%;height:100%;transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);transform-style:preserve-3d}:host(.is-flipped) .card-flipper{transform:rotateY(180deg)}:host(.is-flippable){min-height:var(--ui-card-flip-min-height, 280px)}:host(.is-flippable) .card-container{min-height:var(--ui-card-flip-min-height, 280px)}:host(.is-closed){display:none !important}.card-face{position:absolute;top:0;left:0;width:100%;height:min-content;min-height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex}.face-back{transform:rotateY(180deg)}.card-face-content{display:flex;flex-direction:column;width:100%;background:var(--ui-card-bg, var(--bg-primary, #ffffff));border-radius:var(--ui-card-radius, 8px);overflow:hidden;transition:all 0.3s ease;border:1px solid var(--ui-card-border-color, var(--border-default, #e5e7eb));box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);position:relative}.card-details-wrapper{display:flex;flex-direction:column;flex:1;width:100%}.card-variant-elevated{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.card-variant-outlined{box-shadow:none;border:2px solid var(--ui-card-border-color, var(--border-default, #e5e7eb))}.card-variant-filled{background-color:var(--bg-primary, #f9fafb);border:none}.card-variant-primary{border-left:4px solid var(--ui-card-primary)}.card-variant-primary .card-header{background:linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent)}.card-variant-success{border-left:4px solid var(--ui-card-success)}.card-variant-success .card-header{background:linear-gradient(to right, rgba(var(--color-success-rgb, 16, 185, 129), 0.1), transparent)}.card-variant-warning{border-left:4px solid var(--ui-card-warning)}.card-variant-warning .card-header{background:linear-gradient(to right, rgba(var(--color-warning-rgb, 245, 158, 11), 0.1), transparent)}.card-variant-danger{border-left:4px solid var(--ui-card-danger)}.card-variant-danger .card-header{background:linear-gradient(to right, rgba(var(--color-danger-rgb, 239, 68, 68), 0.1), transparent)}.card-variant-info{border-left:4px solid var(--ui-card-info)}.card-variant-info .card-header{background:linear-gradient(to right, rgba(6, 182, 212, 0.1), transparent)}.card-variant-status{border:1px solid var(--border-default, #e5e7eb);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.card-variant-status.card-color-primary{border:1.5px solid var(--ui-card-primary);background:color-mix(in srgb, var(--ui-card-primary) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)))}.card-variant-status.card-color-primary .card-header{border-bottom-color:color-mix(in srgb, var(--ui-card-primary) 15%, var(--border-default, #e5e7eb))}.card-variant-status.card-color-success{border:1.5px solid var(--ui-card-success);background:color-mix(in srgb, var(--ui-card-success) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)))}.card-variant-status.card-color-success .card-header{border-bottom-color:color-mix(in srgb, var(--ui-card-success) 15%, var(--border-default, #e5e7eb))}.card-variant-status.card-color-warning{border:1.5px solid var(--ui-card-warning);background:color-mix(in srgb, var(--ui-card-warning) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)))}.card-variant-status.card-color-warning .card-header{border-bottom-color:color-mix(in srgb, var(--ui-card-warning) 15%, var(--border-default, #e5e7eb))}.card-variant-status.card-color-danger{border:1.5px solid var(--ui-card-danger);background:color-mix(in srgb, var(--ui-card-danger) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)))}.card-variant-status.card-color-danger .card-header{border-bottom-color:color-mix(in srgb, var(--ui-card-danger) 15%, var(--border-default, #e5e7eb))}.card-variant-status.card-color-info{border:1.5px solid var(--ui-card-info);background:color-mix(in srgb, var(--ui-card-info) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)))}.card-variant-status.card-color-info .card-header{border-bottom-color:color-mix(in srgb, var(--ui-card-info) 15%, var(--border-default, #e5e7eb))}.card-importance-emphasized{box-shadow:0 10px 30px rgba(0, 0, 0, 0.15);border:none;background:linear-gradient(135deg, var(--bg-secondary, #111827) 0%, var(--color-primary, #374151) 100%);color:var(--text-standard, #ffffff)}.card-importance-emphasized .card-title-text,.card-importance-emphasized .card-content,.card-importance-emphasized .card-extra,.card-importance-emphasized .card-description{color:var(--text-standard, #ffffff)}.card-importance-emphasized .card-header,.card-importance-emphasized .card-footer{border-bottom-color:rgba(255, 255, 255, 0.1);border-top-color:rgba(255, 255, 255, 0.1)}.card-importance-emphasized .card-action-btn{color:rgba(255, 255, 255, 0.7)}.card-importance-emphasized .card-action-btn:hover{background:rgba(255, 255, 255, 0.1);color:var(--text-standard, #ffffff)}.card-pattern-shortcut{text-align:center;padding:32px 24px;align-items:center}.card-pattern-shortcut .card-header{border-bottom:none;padding:0;margin-bottom:16px;flex-direction:column}.card-pattern-shortcut .card-header-main{flex-direction:column;gap:12px}.card-pattern-shortcut .card-title-text{font-size:20px;text-align:center}.card-pattern-shortcut .card-avatar{margin:0 auto 8px;width:64px;height:64px}.card-pattern-shortcut .card-avatar i{font-size:32px}.card-pattern-product .card-cover{background:var(--bg-primary, #f7f7f7)}.card-pattern-product .card-content{padding-top:16px}.card-type-inner{background:var(--bg-primary, #fafafa)}.card-type-inner .card-header{background:transparent;padding:12px 16px;min-height:48px}.card-type-inner .card-content{padding:16px}.card-glass{background:rgba(255, 255, 255, 0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.3);box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.1)}.card-selectable{cursor:pointer;border:2px solid transparent !important}.card-selectable:hover{border-color:var(--border-subtle, #e6f7ff) !important;box-shadow:0 4px 12px rgba(0, 0, 0, 0.08)}.card-selected{border-color:var(--ui-card-selected-border) !important;box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.selection-indicator{position:absolute;top:8px;right:8px;width:24px;height:24px;background:var(--ui-card-selected-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-standard, #ffffff);opacity:0;transform:scale(0.5);transition:all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index:10}.selection-indicator.selected{opacity:1;transform:scale(1)}.card-ribbon{position:absolute;z-index:20;padding:4px 16px;background:var(--ui-card-primary);color:var(--text-standard, #ffffff);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2)}.card-ribbon.ribbon-top-right{top:12px;right:-8px;border-radius:4px 0 0 4px}.card-ribbon.ribbon-top-right::after{content:"";position:absolute;right:0;bottom:-8px;border-right:8px solid transparent;border-top:8px solid rgba(0, 0, 0, 0.3)}.card-ribbon.ribbon-top-left{top:12px;left:-8px;border-radius:0 4px 4px 0}.card-ribbon.ribbon-top-left::after{content:"";position:absolute;left:0;bottom:-8px;border-left:8px solid transparent;border-top:8px solid rgba(0, 0, 0, 0.3)}.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-subtle, #f3f4f6);min-height:56px;gap:12px;transition:all 0.3s ease}.card-contain-tabs .card-header{border-bottom:none;padding-bottom:0}.card-header-main{display:flex;align-items:center;gap:12px;flex:1}.card-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-secondary, #f3f4f6);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.card-avatar i{font-size:18px;color:var(--text-muted, #9ca3af)}.card-avatar-img{width:100%;height:100%;object-fit:cover}.card-title-text{font-weight:700;font-size:16px;color:var(--text-primary, #111827)}.card-actions{display:flex;align-items:center;gap:4px}.card-extra{font-size:13px;color:var(--text-muted, #6b7280)}.card-action-btn{width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--text-muted, #6b7280);display:flex;align-items:center;justify-content:center;transition:all 0.2s}.card-action-btn:hover{background:var(--bg-secondary, #f3f4f6);color:var(--text-primary, #111827)}.card-cover{width:100%;overflow:hidden}.card-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease}.card-hoverable:hover .card-cover img{transform:scale(1.05)}.card-content{padding:20px;flex:1;color:var(--text-secondary, #4b5563);line-height:1.6}.card-description{margin-top:12px;color:var(--text-muted, #6b7280);font-size:14px}.card-tag{display:inline-block;margin-top:12px;padding:2px 10px;background:var(--bg-secondary, #f3f4f6);border-radius:99px;font-size:12px;color:var(--text-secondary, #4b5563);font-weight:500}.card-footer{padding:16px 20px;border-top:1px solid var(--border-subtle, #f3f4f6);display:flex;flex-direction:column;gap:12px}.card-primary-btn{width:100%;padding:10px;background:var(--ui-card-primary);color:var(--text-standard, #ffffff);border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:opacity 0.2s}.card-primary-btn:hover{opacity:0.9}.card-quick-actions{list-style:none;padding:0;margin:16px -20px -16px;display:flex;background:var(--bg-primary, #fafafa);border-top:1px solid var(--border-subtle, #f3f4f6)}.card-quick-actions li{flex:1;padding:12px 16px;text-align:center;color:var(--text-secondary, #4b5563);font-weight:500;cursor:pointer;transition:all 0.2s;border-right:1px solid var(--border-subtle, #f3f4f6)}.card-quick-actions li:last-child{border-right:none}.card-quick-actions li:hover{background:var(--bg-secondary, #f3f4f6);color:var(--ui-card-primary)}.card-layout-horizontal{flex-direction:row !important}.card-layout-horizontal .card-cover{width:35% !important;max-width:300px;height:auto !important;flex-shrink:0}.card-layout-horizontal .card-details-wrapper{flex:1}@media (max-width: 768px){.card-layout-horizontal{flex-direction:column !important}.card-layout-horizontal .card-cover{width:100% !important;max-width:none;aspect-ratio:16/9}}::slotted([slot=grid]){display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1px;background:var(--bg-secondary, #f3f4f6);border-top:1px solid var(--border-subtle, #f3f4f6)}::slotted([slot=grid]) ui-card{margin:0;--ui-card-radius:0}.menu-container{position:relative}.menu-dropdown{position:absolute;top:100%;right:0;background:var(--bg-primary, #ffffff);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);border:1px solid var(--border-subtle, #f3f4f6);padding:6px;min-width:160px;z-index:100;margin-top:4px;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.menu-item{width:100%;padding:8px 12px;border:none;background:transparent;display:flex;align-items:center;gap:8px;border-radius:4px;cursor:pointer;font-size:14px;color:var(--text-secondary, #374151)}.menu-item:hover{background:var(--bg-primary, #f9fafb);color:var(--text-primary, #111827)}.menu-item.menu-item-disabled{opacity:0.5;cursor:not-allowed}.menu-separator{height:1px;background:var(--bg-secondary, #f3f4f6);margin:4px -6px}.card-loading-container{background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);padding:20px}.skeleton-avatar{background:var(--bg-secondary, #f3f4f6);width:48px;height:48px;border-radius:50%}.skeleton-text{background:var(--bg-secondary, #f3f4f6);height:16px;border-radius:4px;position:relative;overflow:hidden}.skeleton-text::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);animation:loading-shimmer 1.5s infinite}@keyframes loading-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}.card-hoverable:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)}.card-clickable{cursor:pointer}:host-context([data-theme=dark]) .card-face-content{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151);color:var(--text-standard, #f3f4f6)}:host-context([data-theme=dark]) .card-title-text{color:var(--text-standard, #f9fafb)}:host-context([data-theme=dark]) .card-header{border-bottom-color:var(--border-default, #374151)}:host-context([data-theme=dark]) .card-footer{border-top-color:var(--border-default, #374151)}:host-context([data-theme=dark]) .menu-dropdown{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151)}:host-context([data-theme=dark]) .menu-item{color:var(--bg-secondary, #d1d5db)}:host-context([data-theme=dark]) .menu-item:hover{background:var(--color-primary, #374151);color:var(--text-standard, #f9fafb)}:host-context([data-theme=dark]) .skeleton-text,:host-context([data-theme=dark]) .skeleton-avatar{background:var(--color-primary, #374151)}'}},[769,"ui-card",{cardId:[1,"card-id"],cardTitle:[1,"card-title"],variant:[1],size:[1],layout:[1],color:[1],displayMode:[1,"display-mode"],shape:[1],glass:[4],bordered:[4],border:[1],borderRadius:[1,"border-radius"],importance:[1],pattern:[1],headStyle:[16],bodyStyle:[16],type:[1],width:[1],height:[1],aspectRatio:[1,"aspect-ratio"],hoverable:[4],flippable:[4],flipTrigger:[1,"flip-trigger"],flipped:[1028],collapsible:[4],collapsed:[1028],closable:[4],closed:[1028],selectable:[4],selected:[1028],clickable:[4],href:[1],target:[1],tilt:[4],magnetic:[4],cover:[1],coverAlt:[1,"cover-alt"],extra:[1],avatar:[1],avatarIcon:[1,"avatar-icon"],ribbon:[1],ribbonPosition:[1,"ribbon-position"],ribbonColor:[1,"ribbon-color"],description:[1],tag:[1],buttonText:[1,"button-text"],actions:[1],showMenu:[4,"show-menu"],menuItems:[1,"menu-items"],menuActions:[1,"menu-actions"],iconLibrary:[1,"icon-library"],loading:[4],autoScroll:[4,"auto-scroll"],scrollBehavior:[1,"scroll-behavior"],isFlipped:[32],isMenuOpen:[32],isCollapsed:[32],isClosed:[32],parsedMenuItems:[32],magneticTransform:[32],tiltTransform:[32],scrollToCard:[64]},[[8,"click","handleClickOutside"]],{menuItems:[{handleMenuPropsChange:0}],menuActions:[{handleMenuPropsChange:0}],flipped:[{handleFlippedChange:0}],collapsed:[{handleCollapsedChange:0}],closed:[{handleClosedChange:0}]}]),h=p,b=function(){"undefined"!=typeof customElements&&["ui-card","ui-badge","ui-button","ui-icon","ui-loader"].forEach((r=>{switch(r){case"ui-card":customElements.get(o(r))||customElements.define(o(r),p);break;case"ui-badge":customElements.get(o(r))||c();break;case"ui-button":customElements.get(o(r))||n();break;case"ui-icon":customElements.get(o(r))||d();break;case"ui-loader":customElements.get(o(r))||l()}}))};export{h as UiCard,b as defineCustomElement}

package/dist/components/ui-carousel.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as o,transformTag as a}from"@stencil/core/internal/client";import{d as r,a as n}from"./badge.js";import{d as c}from"./icon.js";const l=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.beforeChange=s(this,"beforeChange",7),this.afterChange=s(this,"afterChange",7)}get el(){return this}slidesToShow=1;slidesToScroll=1;infinite=!0;autoplay=!1;autoplayInterval=3e3;arrows=!0;indicators=!0;vertical=!1;responsive="";swipe=!0;keyboard=!0;pauseOnHover=!0;prevArrow="&lt;";nextArrow="&gt;";loop=!0;animationDuration=500;animationEasing="cubic-bezier(0.4,0,0.2,1)";width="100%";height="400px";effect="slide";centerMode=!1;centerPadding="50px";enableDrag=!0;variableWidth=!1;showProgress=!1;showCounter=!1;autoHeight=!1;pauseOnInteract=!0;asNavFor="";parallax=!1;lazyLoad=!1;zoomActive=!1;indicatorsType="dots";animateContent=!1;useProgressSegments=!1;mouseWheel=!1;ticker=!1;tickerSpeed=1;arrowsPosition="sides";current=0;slidesCount=0;isHovered=!1;containerWidth=0;containerHeight=0;isDragging=!1;dragOffset=0;autoplayProgress=0;isFullscreen=!1;trackTranslate="translateX(0px)";tickerOffset=0;beforeChange;afterChange;intervalId=null;progressInterval=null;tickerRaf=0;animationTimer=null;startX=0;startY=0;observer;onCurrentChange(){this.updateActiveSlides()}onSlidesToShowChange(){this.updateSlidesCount()}updateSlidesCount=()=>{const t=this.el.shadowRoot?.querySelector("slot"),e=t?t.assignedElements():Array.from(this.el.children);this.slidesCount=e.length;const s=100/(["fade","flip","cube","coverflow","stack","depth","ken-burns","wheel"].includes(this.effect)?1:Math.min(this.slidesToShow,this.slidesCount))+"%";e.forEach((t=>{const e=t;this.variableWidth||(e.style.width=s),e.style.flexShrink="0"}))};updateActiveSlides=()=>{const t=this.el.shadowRoot?.querySelector("slot"),e=t?t.assignedElements():Array.from(this.el.children),s=["fade","flip","cube","coverflow","stack","depth","ken-burns","wheel"].includes(this.effect),i=s?1:Math.min(this.slidesToShow,this.slidesCount);if(this.variableWidth&&"slide"===this.effect){let t=0;for(let s=0;s<this.current;s++)t+=e[s].offsetWidth||0;this.trackTranslate=this.vertical?`translateY(-${t}px)`:`translateX(-${t}px)`}e.forEach(((t,e)=>{const o=e===this.current,a=e-this.current,r=s?Math.abs(a)<=1:e>=this.current&&e<this.current+i;t.setAttribute("data-index",""+e),t.setAttribute("data-offset",""+a),o?(t.setAttribute("data-active","true"),t.setAttribute("aria-hidden","false")):(t.removeAttribute("data-active"),t.setAttribute("aria-hidden","true")),r?t.setAttribute("data-visible","true"):t.removeAttribute("data-visible")})),this.autoHeight&&this.syncHeight()};syncHeight(){const t=this.el.shadowRoot?.querySelector("slot"),e=t?.assignedElements()[this.current];if(e){const t=e.offsetHeight;t>0&&(this.height=t+"px")}}componentWillLoad(){this.updateSlidesCount(),this.updateResponsive(),this.updateActiveSlides()}componentDidLoad(){this.ticker?this.startTicker():this.autoplay&&this.startAutoplay(),window.addEventListener("resize",this.updateResponsive),document.addEventListener("visibilitychange",this.handleVisibilityChange),this.lazyLoad&&this.setupLazyLoading()}_ariaAnnouncement="";setupLazyLoading(){this.observer&&this.observer.disconnect(),this.observer=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const e=t.target;e.dataset.src&&(e.src=e.dataset.src,e.removeAttribute("data-src")),this.observer.unobserve(t.target)}}))}),{root:this.el,rootMargin:"400px"}),this.el.querySelectorAll("img[data-src]").forEach((t=>this.observer.observe(t)))}handleVisibilityChange=()=>{document.hidden?(this.stopAutoplay(),this.stopTicker()):this.ticker?this.startTicker():this.autoplay&&this.startAutoplay()};disconnectedCallback(){window.removeEventListener("resize",this.updateResponsive),document.removeEventListener("visibilitychange",this.handleVisibilityChange),window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp),this.isDragging=!1,this.stopAutoplay(),this.stopTicker(),this.animationTimer&&clearTimeout(this.animationTimer),this.observer&&this.observer.disconnect()}onMouseEnter(){this.isHovered=!0,this.pauseOnHover&&(this.stopAutoplay(),this.stopTicker())}onMouseLeave(){this.isHovered=!1,this.pauseOnHover&&(this.ticker?this.startTicker():this.autoplay&&this.startAutoplay())}handleWheel(t){this.mouseWheel&&(Math.abs(t.deltaX)>10||Math.abs(t.deltaY)>10)&&(t.preventDefault(),this.vertical?t.deltaY>0?this.next():this.prev():t.deltaX>0?this.next():this.prev())}async toggleFullscreen(){this.isFullscreen=!this.isFullscreen}async next(){this.goTo(this.current+this.slidesToScroll)}async prev(){this.goTo(this.current-this.slidesToScroll)}async refresh(){this.updateSlidesCount(),this.updateActiveSlides()}async goTo(t){let e=t;const s=this.current;if(this.infinite&&!this.variableWidth?(e<0&&(e=this.slidesCount-1),e>=this.slidesCount&&(e=0)):e=Math.max(0,Math.min(e,this.variableWidth?this.slidesCount-1:this.slidesCount-this.slidesToShow)),s!==e){if(this.beforeChange.emit({from:s,to:e}),this.current=e,this.resetAutoplayProgress(),this.asNavFor){const t=document.querySelector(this.asNavFor);t&&"function"==typeof t.goTo&&t.goTo(e)}this.animationTimer=setTimeout((()=>{this._ariaAnnouncement=`Slide ${this.current+1} of ${this.slidesCount}`,this.afterChange.emit({current:this.current}),this.animationTimer=null}),this.animationDuration)}}updateResponsive=()=>{if(this.responsive){try{const t=JSON.parse(this.responsive),e=window.innerWidth;let s=this.slidesToShow;t.forEach((t=>{e<=t.breakpoint&&(s=t.slidesToShow)})),this.slidesToShow=s}catch{}this.updateSlidesCount()}};startAutoplay=()=>{if(this.intervalId)return;const t=Date.now();this.intervalId=setInterval((()=>{this.isHovered||this.isDragging||this.next()}),this.autoplayInterval),this.showProgress&&(this.progressInterval=setInterval((()=>{if(!this.isHovered&&!this.isDragging){const e=Date.now()-t;this.autoplayProgress=e%this.autoplayInterval/this.autoplayInterval*100}}),16))};startTicker=()=>{if(this.tickerRaf)return;const t=this.el.shadowRoot?.querySelector("slot"),e=t?t.assignedElements():Array.from(this.el.children);if(0===e.length)return;const s=()=>{if(!this.isHovered&&!this.isDragging){this.tickerOffset-=this.tickerSpeed;const t=e.reduce(((t,e)=>t+e.offsetWidth),0);Math.abs(this.tickerOffset)>=t&&this.infinite&&(this.tickerOffset=0),this.trackTranslate=this.vertical?`translateY(${this.tickerOffset}px)`:`translateX(${this.tickerOffset}px)`}this.tickerRaf=requestAnimationFrame(s)};this.tickerRaf=requestAnimationFrame(s)};stopTicker=()=>{this.tickerRaf&&cancelAnimationFrame(this.tickerRaf),this.tickerRaf=0};resetAutoplayProgress=()=>{this.autoplay&&(this.stopAutoplay(),this.startAutoplay())};stopAutoplay=()=>{this.intervalId&&clearInterval(this.intervalId),this.progressInterval&&clearInterval(this.progressInterval),this.intervalId=null,this.progressInterval=null,this.autoplayProgress=0};onIndicatorClick=t=>{this.goTo(t)};onArrowClick=t=>{"prev"===t?this.prev():this.next()};onKeyDown=t=>{this.keyboard&&("ArrowLeft"!==t.key&&"ArrowUp"!==t.key||this.prev(),"ArrowRight"!==t.key&&"ArrowDown"!==t.key||this.next())};onTouchStartX=0;onTouchStartY=0;onTouchMove=t=>{if(!this.swipe)return;const e=t.touches[0],s=e.clientX-this.onTouchStartX,i=e.clientY-this.onTouchStartY;this.vertical&&Math.abs(i)>30?i>0?this.prev():this.next():!this.vertical&&Math.abs(s)>30&&(s>0?this.prev():this.next())};onTouchStart=t=>{if(!this.swipe)return;const e=t.touches[0];this.onTouchStartX=e.clientX,this.onTouchStartY=e.clientY,this.isDragging=!0,this.dragOffset=0};onTouchEnd=()=>{this.isDragging&&(this.isDragging=!1,Math.abs(this.dragOffset)>50&&(this.dragOffset>0?this.prev():this.next()),this.dragOffset=0)};handleMouseDown=t=>{this.enableDrag&&(this.isDragging=!0,this.startX=t.clientX,this.startY=t.clientY,this.dragOffset=0,window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp))};onMouseMove=t=>{this.isDragging&&(this.dragOffset=this.vertical?t.clientY-this.startY:t.clientX-this.startX)};onMouseUp=()=>{this.isDragging&&(this.isDragging=!1,Math.abs(this.dragOffset)>50&&(this.dragOffset>0?this.prev():this.next(),this.pauseOnInteract&&this.stopAutoplay()),this.dragOffset=0,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp))};render(){const t=!this.vertical,e=t?{width:"100%",flexDirection:"row"}:{height:"100%",flexDirection:"column"},s=!this.infinite&&0===this.current,a=!this.infinite&&this.current>=this.slidesCount-this.slidesToShow,r=t=>{const e="prev"===t?s:a;return i("ui-button",{variant:"ghost",class:{["carousel-arrow "+t]:!0,disabled:e},onClick:()=>!e&&this.onArrowClick(t),ariaLabel:("prev"===t?"Previous":"Next")+" Slide",disabled:e,icon:"prev"===t?"chevron-left":"chevron-right",iconLibrary:"lucide",iconSize:"24px"})};return i(o,{class:{"is-fullscreen":this.isFullscreen,"auto-height":this.autoHeight,"parallax-mode":this.parallax,"zoom-active":this.zoomActive,"legendary-animate":this.animateContent,["arrows-pos-"+this.arrowsPosition]:!0,["effect-"+this.effect]:!0}},i("div",{class:{carousel:!0,vertical:!t,dragging:this.isDragging},style:{width:this.width,height:this.height},tabindex:this.keyboard?0:-1,onKeyDown:this.onKeyDown,role:"region","aria-roledescription":"carousel","aria-label":"Carousel"},this.showProgress&&"dots"===this.indicatorsType&&i("div",{class:"autoplay-progress"},i("div",{class:"progress-bar",style:{width:this.autoplayProgress+"%"}})),this.arrows&&"top-right"===this.arrowsPosition&&i("div",{class:"carousel-controls"},r("prev"),r("next")),this.arrows&&"sides"===this.arrowsPosition&&r("prev"),i("div",{class:"carousel-track-wrapper",style:e,onTouchStart:this.onTouchStart,onTouchMove:this.onTouchMove,onTouchEnd:this.onTouchEnd,onMouseDown:this.handleMouseDown},i("div",{class:"carousel-track",style:{transform:this.ticker||this.variableWidth&&"slide"===this.effect?this.trackTranslate:"slide"===this.effect?t?`translateX(calc(-${this.current*(100/this.slidesToShow)}% + ${this.dragOffset}px))`:`translateY(calc(-${this.current*(100/this.slidesToShow)}% + ${this.dragOffset}px))`:"none",transition:this.ticker?"none":`transform ${this.animationDuration}ms ${this.animationEasing}`,display:"flex",...e}},i("slot",{onSlotchange:()=>{this.updateSlidesCount(),this.lazyLoad&&this.setupLazyLoading()}}),this.ticker&&i("slot",{name:"ticker-clone",onSlotchange:this.updateSlidesCount}))),i("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},this._ariaAnnouncement),this.arrows&&"sides"===this.arrowsPosition&&r("next"),this.showCounter&&i("div",{class:"carousel-counter"},this.current+1," / ",this.slidesCount),this.indicators&&i("div",{class:"carousel-indicators"},Array.from({length:this.slidesCount-this.slidesToShow+1},((t,e)=>{const s=e===this.current,o=this.useProgressSegments?"segments":this.indicatorsType;return"segments"===o?i("div",{class:{"progress-segment":!0,active:s}},i("div",{class:"progress-fill",style:{width:s?this.autoplayProgress+"%":e<this.current?"100%":"0%"}})):"pie"===o?i("div",{class:{"indicator-pie":!0,active:s},onClick:()=>this.onIndicatorClick(e)},i("svg",{viewBox:"0 0 32 32"},i("circle",{cx:"16",cy:"16",r:"14",fill:"none",stroke:"rgba(255,255,255,0.15)","stroke-width":"2"}),s&&i("circle",{cx:"16",cy:"16",r:"14",fill:"none",stroke:"white","stroke-width":"3","stroke-dasharray":"88","stroke-dashoffset":88-88*this.autoplayProgress/100,style:{transition:"stroke-dashoffset 0.05s linear"},transform:"rotate(-90 16 16)"}))):i("ui-button",{variant:"ghost",size:"xxs",class:{active:s},onClick:()=>this.onIndicatorClick(e),ariaLabel:"Go to slide "+(e+1)})}))),i("ui-button",{variant:"ghost",size:"sm",iconOnly:!0,class:"fullscreen-toggle",onClick:()=>this.toggleFullscreen(),ariaLabel:"Toggle Fullscreen",icon:this.isFullscreen?"minimize":"maximize",iconLibrary:"lucide",iconSize:"18px"})))}static get watchers(){return{current:[{onCurrentChange:0}],slidesToShow:[{onSlidesToShowChange: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;width:100%;height:100%;box-sizing:border-box}.carousel{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;background:var(--carousel-bg, var(--bg-primary, #ffffff));user-select:none}.carousel.dragging{cursor:grabbing}.carousel.dragging .carousel-track{transition:none !important}.carousel.vertical{flex-direction:column}.carousel-track-wrapper{width:100%;height:100%;overflow:hidden;display:flex;flex:1 1 auto;position:relative}.carousel-track{display:flex;transition:transform var(--carousel-speed, 0.5s) cubic-bezier(0.4, 0, 0.2, 1);will-change:transform;width:100%;height:100%}.carousel.vertical .carousel-track{flex-direction:column}::slotted(*){flex-shrink:0;width:100%;height:100%;box-sizing:border-box;overflow:hidden}.effect-fade .carousel-track,:host([effect=fade]) .carousel-track{transform:none !important;display:block !important;position:relative;height:100%}.effect-fade ::slotted(*),:host([effect=fade]) ::slotted(*){position:absolute !important;top:0;left:0;opacity:0;transition:opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none;width:100%;height:100%;z-index:1}.effect-fade ::slotted([data-active=true]),:host([effect=fade]) ::slotted([data-active=true]){opacity:1;pointer-events:auto;z-index:10}.effect-flip .carousel-track-wrapper,:host([effect=flip]) .carousel-track-wrapper{perspective:1500px;overflow:visible}.effect-flip .carousel-track,:host([effect=flip]) .carousel-track{transform:none !important;display:block !important;position:relative;height:100%;transform-style:preserve-3d}.effect-flip ::slotted(*),:host([effect=flip]) ::slotted(*){position:absolute !important;top:0;left:50%;width:100%;height:100%;transform:translate3d(-50%, 0, 0) rotateY(-180deg);opacity:0;transition:transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;backface-visibility:hidden}.effect-flip ::slotted([data-active=true]),:host([effect=flip]) ::slotted([data-active=true]){opacity:1;transform:translate3d(-50%, 0, 0) rotateY(0deg);z-index:10}.effect-cube .carousel-track-wrapper,:host([effect=cube]) .carousel-track-wrapper{perspective:2000px;overflow:visible}.effect-cube .carousel-track,:host([effect=cube]) .carousel-track{transform:none !important;display:block !important;transform-style:preserve-3d;position:relative;height:100%}.effect-cube ::slotted(*),:host([effect=cube]) ::slotted(*){position:absolute !important;top:0;left:50%;width:100%;height:100%;opacity:0;transition:transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;transform:translate3d(-50%, 0, -300px) rotateY(90deg);backface-visibility:hidden;transform-origin:center center}.effect-cube ::slotted([data-active=true]),:host([effect=cube]) ::slotted([data-active=true]){opacity:1;transform:translate3d(-50%, 0, 0) rotateY(0deg);z-index:10}.effect-cube ::slotted([data-offset="-1"]),:host([effect=cube]) ::slotted([data-offset="-1"]){opacity:0.2;transform:translate3d(-100%, 0, -300px) rotateY(90deg);z-index:5}.effect-cube ::slotted([data-offset="1"]),:host([effect=cube]) ::slotted([data-offset="1"]){opacity:0.2;transform:translate3d(0%, 0, -300px) rotateY(-90deg);z-index:5}.effect-scale .carousel-track,:host([effect=scale]) .carousel-track{transform:none !important;display:block !important;height:100%;position:relative}.effect-scale ::slotted(*),:host([effect=scale]) ::slotted(*){position:absolute !important;top:0;left:50%;width:100%;height:100%;transform:translate3d(-50%, 0, 0) scale(1.15);opacity:0;transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1)}.effect-scale ::slotted([data-active=true]),:host([effect=scale]) ::slotted([data-active=true]){opacity:1;transform:translate3d(-50%, 0, 0) scale(1);z-index:10}.effect-coverflow .carousel-track-wrapper,:host([effect=coverflow]) .carousel-track-wrapper{perspective:1500px;overflow:visible}.effect-coverflow .carousel-track,:host([effect=coverflow]) .carousel-track{transform:none !important;display:block !important;position:relative;transform-style:preserve-3d;height:100%}.effect-coverflow ::slotted(*),:host([effect=coverflow]) ::slotted(*){position:absolute !important;top:0;left:50%;transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1);width:90%;height:100%;transform:translate3d(-50%, 0, -200px) scale(0.7) rotateY(60deg);opacity:0}.effect-coverflow ::slotted([data-active=true]),:host([effect=coverflow]) ::slotted([data-active=true]){transform:translate3d(-50%, 0, 0) scale(1) rotateY(0deg);opacity:1;z-index:10}.effect-coverflow ::slotted([data-offset="-1"]),:host([effect=coverflow]) ::slotted([data-offset="-1"]){transform:translate3d(-110%, 0, -150px) scale(0.85) rotateY(45deg);opacity:0.6;z-index:5}.effect-coverflow ::slotted([data-offset="1"]),:host([effect=coverflow]) ::slotted([data-offset="1"]){transform:translate3d(10%, 0, -150px) scale(0.85) rotateY(-45deg);opacity:0.6;z-index:5}.effect-stack .carousel-track,:host([effect=stack]) .carousel-track{transform:none !important;display:block !important;height:100%}.effect-stack ::slotted(*),:host([effect=stack]) ::slotted(*){position:absolute !important;top:0;left:0;opacity:0;transform:translateY(40px) scale(0.9);transition:all 0.7s cubic-bezier(0.16, 1, 0.3, 1)}.effect-stack ::slotted([data-active=true]),:host([effect=stack]) ::slotted([data-active=true]){opacity:1;transform:translateY(0) scale(1);z-index:10}.effect-stack ::slotted([data-visible=true]:not([data-active=true])),:host([effect=stack]) ::slotted([data-visible=true]:not([data-active=true])){opacity:0.6;transform:translateY(20px) scale(0.95);z-index:5}.effect-depth .carousel-track,:host([effect=depth]) .carousel-track{transform:none !important;display:block !important;position:relative;height:100%}.effect-depth ::slotted(*),:host([effect=depth]) ::slotted(*){position:absolute !important;top:0;left:50%;width:90%;height:100%;transition:transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;transform:translate3d(-50%, 0, -400px) scale(0.5);opacity:0}.effect-depth ::slotted([data-active=true]),:host([effect=depth]) ::slotted([data-active=true]){transform:translate3d(-50%, 0, 0) scale(1);opacity:1;z-index:10}.effect-depth ::slotted([data-offset="-1"]),:host([effect=depth]) ::slotted([data-offset="-1"]){transform:translate3d(-105%, 0, -200px) scale(0.8);opacity:0.5;z-index:5}.effect-depth ::slotted([data-offset="1"]),:host([effect=depth]) ::slotted([data-offset="1"]){transform:translate3d(5%, 0, -200px) scale(0.8);opacity:0.5;z-index:5}.effect-ken-burns ::slotted(*),:host([effect=ken-burns]) ::slotted(*){position:absolute !important;top:0;left:0;opacity:0;overflow:hidden;height:100%;width:100%;transition:opacity 1.5s ease}.effect-ken-burns ::slotted([data-active=true]),:host([effect=ken-burns]) ::slotted([data-active=true]){opacity:1;z-index:10;animation:kenBurnsPremium 10s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}@keyframes kenBurnsPremium{0%{transform:scale(1) translate(0, 0)}100%{transform:scale(1.2) translate(-2%, -2%)}}.effect-wheel .carousel-track-wrapper,:host([effect=wheel]) .carousel-track-wrapper{perspective:1500px;overflow:visible}.effect-wheel .carousel-track,:host([effect=wheel]) .carousel-track{transform-style:preserve-3d;transition:transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);height:100%}.effect-wheel ::slotted(*),:host([effect=wheel]) ::slotted(*){position:absolute !important;top:0;left:0;opacity:0.2;transform:rotateX(45deg) translateZ(-200px);transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1)}.effect-wheel ::slotted([data-active=true]),:host([effect=wheel]) ::slotted([data-active=true]){opacity:1;transform:rotateX(0deg) translateZ(0);z-index:10}.effect-wheel ::slotted([data-visible=true]:not([data-active=true])),:host([effect=wheel]) ::slotted([data-visible=true]:not([data-active=true])){opacity:0.4;transform:rotateX(-45deg) translateZ(-150px)}.carousel-indicators{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:8px;z-index:10}.carousel-indicators button{width:12px;height:6px;border-radius:3px;border:none;background:rgba(255, 255, 255, 0.4);cursor:pointer;transition:0.3s}.carousel-indicators button.active{width:24px;background:var(--bg-primary, #ffffff);box-shadow:0 2px 8px rgba(0, 0, 0, 0.2)}.indicator-pie{position:relative;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0, 0, 0, 0.1);border:1.5px solid transparent;transition:0.3s}.indicator-pie:hover{background:rgba(0, 0, 0, 0.2);border-color:rgba(255, 255, 255, 0.2)}.indicator-pie.active{background:rgba(0, 0, 0, 0.3)}.indicator-pie svg{width:100%;height:100%;overflow:visible;stroke-linecap:round}:host([indicators-type=segments]) .carousel-indicators{top:20px;bottom:auto;left:0;right:0;transform:none;padding:0 16px;gap:4px;width:100%;box-sizing:border-box}.progress-segment{flex:1;height:3px;border-radius:2px;overflow:hidden;background:rgba(255, 255, 255, 0.2)}.progress-segment .progress-fill{height:100%;background:var(--bg-primary, #ffffff);transition:width 0.1s linear}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255, 255, 255, 0.2);color:var(--bg-primary, var(--text-standard, #ffffff));cursor:pointer;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10;transition:0.3s}.carousel-arrow:hover:not(:disabled){background:rgb(255, 255, 255);color:var(--bg-primary, #000);transform:translateY(-50%) scale(1.1)}.carousel-arrow:disabled{opacity:0.2;cursor:not-allowed}.carousel-arrow.prev{left:20px}.carousel-arrow.next{right:20px}.carousel-controls{position:absolute;top:20px;right:20px;display:flex;gap:8px;z-index:20}.carousel-controls .carousel-arrow{position:static;transform:none;border-radius:8px;background:var(--bg-primary, #ffffff);color:var(--bg-primary, var(--border-subtle, #1e293b));border:1px solid var(--border-subtle, #e2e8f0);width:38px;height:38px;box-shadow:0 4px 10px rgba(0, 0, 0, 0.05)}.carousel-controls .carousel-arrow:hover:not(:disabled){transform:translateY(-2px);border-color:var(--color-primary, #94a3b8)}.carousel-counter{position:absolute;top:20px;left:20px;background:rgba(0, 0, 0, 0.5);color:var(--bg-primary, var(--text-standard, #ffffff));padding:4px 12px;border-radius:20px;font-size:11px;font-weight:800;backdrop-filter:blur(4px)}.fullscreen-toggle{position:absolute;bottom:20px;right:20px;background:rgba(255, 255, 255, 0.2);color:var(--bg-primary, #ffffff);border:none;width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}.fullscreen-toggle:hover{background:rgba(255, 255, 255, 0.4)}:host(.parallax-mode) .carousel-track [data-visible=true]>*{transition:transform 0.7s ease-out}:host(.parallax-mode) .carousel-track [data-active=true]>*{transform:scale(1.05)}:host(.legendary-animate) .carousel-track [data-active=true]>*{animation:slideUpFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;opacity:0}@keyframes slideUpFade{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}'}},[769,"ui-carousel",{slidesToShow:[2,"slides-to-show"],slidesToScroll:[2,"slides-to-scroll"],infinite:[4],autoplay:[4],autoplayInterval:[2,"autoplay-interval"],arrows:[4],indicators:[4],vertical:[4],responsive:[1],swipe:[4],keyboard:[4],pauseOnHover:[4,"pause-on-hover"],prevArrow:[1,"prev-arrow"],nextArrow:[1,"next-arrow"],loop:[4],animationDuration:[2,"animation-duration"],animationEasing:[1,"animation-easing"],width:[1],height:[1],effect:[513],centerMode:[4,"center-mode"],centerPadding:[1,"center-padding"],enableDrag:[4,"enable-drag"],variableWidth:[4,"variable-width"],showProgress:[4,"show-progress"],showCounter:[4,"show-counter"],autoHeight:[4,"auto-height"],pauseOnInteract:[4,"pause-on-interact"],asNavFor:[1,"as-nav-for"],parallax:[4],lazyLoad:[4,"lazy-load"],zoomActive:[4,"zoom-active"],indicatorsType:[1,"indicators-type"],animateContent:[4,"animate-content"],useProgressSegments:[4,"use-progress-segments"],mouseWheel:[4,"mouse-wheel"],ticker:[4],tickerSpeed:[2,"ticker-speed"],arrowsPosition:[1,"arrows-position"],current:[32],slidesCount:[32],isHovered:[32],containerWidth:[32],containerHeight:[32],isDragging:[32],dragOffset:[32],autoplayProgress:[32],isFullscreen:[32],trackTranslate:[32],tickerOffset:[32],toggleFullscreen:[64],next:[64],prev:[64],refresh:[64],goTo:[64]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[0,"wheel","handleWheel"]],{current:[{onCurrentChange:0}],slidesToShow:[{onSlidesToShowChange:0}]}]),h=l,d=function(){"undefined"!=typeof customElements&&["ui-carousel","ui-badge","ui-button","ui-icon"].forEach((t=>{switch(t){case"ui-carousel":customElements.get(a(t))||customElements.define(a(t),l);break;case"ui-badge":customElements.get(a(t))||n();break;case"ui-button":customElements.get(a(t))||r();break;case"ui-icon":customElements.get(a(t))||c()}}))};export{h as UiCarousel,d as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as o,transformTag as a}from"@stencil/core/internal/client";import{d as r,a as n}from"./badge.js";import{d as c}from"./icon.js";import{d as l}from"./loader.js";const h=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.beforeChange=s(this,"beforeChange",7),this.afterChange=s(this,"afterChange",7)}get el(){return this}slidesToShow=1;slidesToScroll=1;infinite=!0;autoplay=!1;autoplayInterval=3e3;arrows=!0;indicators=!0;vertical=!1;responsive="";swipe=!0;keyboard=!0;pauseOnHover=!0;prevArrow="&lt;";nextArrow="&gt;";loop=!0;animationDuration=500;animationEasing="cubic-bezier(0.4,0,0.2,1)";width="100%";height="400px";effect="slide";centerMode=!1;centerPadding="50px";enableDrag=!0;variableWidth=!1;showProgress=!1;showCounter=!1;autoHeight=!1;pauseOnInteract=!0;asNavFor="";parallax=!1;lazyLoad=!1;zoomActive=!1;indicatorsType="dots";animateContent=!1;useProgressSegments=!1;mouseWheel=!1;ticker=!1;tickerSpeed=1;arrowsPosition="sides";current=0;slidesCount=0;isHovered=!1;containerWidth=0;containerHeight=0;isDragging=!1;dragOffset=0;autoplayProgress=0;isFullscreen=!1;trackTranslate="translateX(0px)";tickerOffset=0;beforeChange;afterChange;intervalId=null;progressInterval=null;tickerRaf=0;animationTimer=null;startX=0;startY=0;observer;onCurrentChange(){this.updateActiveSlides()}onSlidesToShowChange(){this.updateSlidesCount()}updateSlidesCount=()=>{const t=this.el.shadowRoot?.querySelector("slot"),e=t?t.assignedElements():Array.from(this.el.children);this.slidesCount=e.length;const s=100/(["fade","flip","cube","coverflow","stack","depth","ken-burns","wheel"].includes(this.effect)?1:Math.min(this.slidesToShow,this.slidesCount))+"%";e.forEach((t=>{const e=t;this.variableWidth||(e.style.width=s),e.style.flexShrink="0"}))};updateActiveSlides=()=>{const t=this.el.shadowRoot?.querySelector("slot"),e=t?t.assignedElements():Array.from(this.el.children),s=["fade","flip","cube","coverflow","stack","depth","ken-burns","wheel"].includes(this.effect),i=s?1:Math.min(this.slidesToShow,this.slidesCount);if(this.variableWidth&&"slide"===this.effect){let t=0;for(let s=0;s<this.current;s++)t+=e[s].offsetWidth||0;this.trackTranslate=this.vertical?`translateY(-${t}px)`:`translateX(-${t}px)`}e.forEach(((t,e)=>{const o=e===this.current,a=e-this.current,r=s?Math.abs(a)<=1:e>=this.current&&e<this.current+i;t.setAttribute("data-index",""+e),t.setAttribute("data-offset",""+a),o?(t.setAttribute("data-active","true"),t.setAttribute("aria-hidden","false")):(t.removeAttribute("data-active"),t.setAttribute("aria-hidden","true")),r?t.setAttribute("data-visible","true"):t.removeAttribute("data-visible")})),this.autoHeight&&this.syncHeight()};syncHeight(){const t=this.el.shadowRoot?.querySelector("slot"),e=t?.assignedElements()[this.current];if(e){const t=e.offsetHeight;t>0&&(this.height=t+"px")}}componentWillLoad(){this.updateSlidesCount(),this.updateResponsive(),this.updateActiveSlides()}componentDidLoad(){this.ticker?this.startTicker():this.autoplay&&this.startAutoplay(),window.addEventListener("resize",this.updateResponsive),document.addEventListener("visibilitychange",this.handleVisibilityChange),this.lazyLoad&&this.setupLazyLoading()}_ariaAnnouncement="";setupLazyLoading(){this.observer&&this.observer.disconnect(),this.observer=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const e=t.target;e.dataset.src&&(e.src=e.dataset.src,e.removeAttribute("data-src")),this.observer.unobserve(t.target)}}))}),{root:this.el,rootMargin:"400px"}),this.el.querySelectorAll("img[data-src]").forEach((t=>this.observer.observe(t)))}handleVisibilityChange=()=>{document.hidden?(this.stopAutoplay(),this.stopTicker()):this.ticker?this.startTicker():this.autoplay&&this.startAutoplay()};disconnectedCallback(){window.removeEventListener("resize",this.updateResponsive),document.removeEventListener("visibilitychange",this.handleVisibilityChange),window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp),this.isDragging=!1,this.stopAutoplay(),this.stopTicker(),this.animationTimer&&clearTimeout(this.animationTimer),this.observer&&this.observer.disconnect()}onMouseEnter(){this.isHovered=!0,this.pauseOnHover&&(this.stopAutoplay(),this.stopTicker())}onMouseLeave(){this.isHovered=!1,this.pauseOnHover&&(this.ticker?this.startTicker():this.autoplay&&this.startAutoplay())}handleWheel(t){this.mouseWheel&&(Math.abs(t.deltaX)>10||Math.abs(t.deltaY)>10)&&(t.preventDefault(),this.vertical?t.deltaY>0?this.next():this.prev():t.deltaX>0?this.next():this.prev())}async toggleFullscreen(){this.isFullscreen=!this.isFullscreen}async next(){this.goTo(this.current+this.slidesToScroll)}async prev(){this.goTo(this.current-this.slidesToScroll)}async refresh(){this.updateSlidesCount(),this.updateActiveSlides()}async goTo(t){let e=t;const s=this.current;if(this.infinite&&!this.variableWidth?(e<0&&(e=this.slidesCount-1),e>=this.slidesCount&&(e=0)):e=Math.max(0,Math.min(e,this.variableWidth?this.slidesCount-1:this.slidesCount-this.slidesToShow)),s!==e){if(this.beforeChange.emit({from:s,to:e}),this.current=e,this.resetAutoplayProgress(),this.asNavFor){const t=document.querySelector(this.asNavFor);t&&"function"==typeof t.goTo&&t.goTo(e)}this.animationTimer=setTimeout((()=>{this._ariaAnnouncement=`Slide ${this.current+1} of ${this.slidesCount}`,this.afterChange.emit({current:this.current}),this.animationTimer=null}),this.animationDuration)}}updateResponsive=()=>{if(this.responsive){try{const t=JSON.parse(this.responsive),e=window.innerWidth;let s=this.slidesToShow;t.forEach((t=>{e<=t.breakpoint&&(s=t.slidesToShow)})),this.slidesToShow=s}catch{}this.updateSlidesCount()}};startAutoplay=()=>{if(this.intervalId)return;const t=Date.now();this.intervalId=setInterval((()=>{this.isHovered||this.isDragging||this.next()}),this.autoplayInterval),this.showProgress&&(this.progressInterval=setInterval((()=>{if(!this.isHovered&&!this.isDragging){const e=Date.now()-t;this.autoplayProgress=e%this.autoplayInterval/this.autoplayInterval*100}}),16))};startTicker=()=>{if(this.tickerRaf)return;const t=this.el.shadowRoot?.querySelector("slot"),e=t?t.assignedElements():Array.from(this.el.children);if(0===e.length)return;const s=()=>{if(!this.isHovered&&!this.isDragging){this.tickerOffset-=this.tickerSpeed;const t=e.reduce(((t,e)=>t+e.offsetWidth),0);Math.abs(this.tickerOffset)>=t&&this.infinite&&(this.tickerOffset=0),this.trackTranslate=this.vertical?`translateY(${this.tickerOffset}px)`:`translateX(${this.tickerOffset}px)`}this.tickerRaf=requestAnimationFrame(s)};this.tickerRaf=requestAnimationFrame(s)};stopTicker=()=>{this.tickerRaf&&cancelAnimationFrame(this.tickerRaf),this.tickerRaf=0};resetAutoplayProgress=()=>{this.autoplay&&(this.stopAutoplay(),this.startAutoplay())};stopAutoplay=()=>{this.intervalId&&clearInterval(this.intervalId),this.progressInterval&&clearInterval(this.progressInterval),this.intervalId=null,this.progressInterval=null,this.autoplayProgress=0};onIndicatorClick=t=>{this.goTo(t)};onArrowClick=t=>{"prev"===t?this.prev():this.next()};onKeyDown=t=>{this.keyboard&&("ArrowLeft"!==t.key&&"ArrowUp"!==t.key||this.prev(),"ArrowRight"!==t.key&&"ArrowDown"!==t.key||this.next())};onTouchStartX=0;onTouchStartY=0;onTouchMove=t=>{if(!this.swipe)return;const e=t.touches[0],s=e.clientX-this.onTouchStartX,i=e.clientY-this.onTouchStartY;this.vertical&&Math.abs(i)>30?i>0?this.prev():this.next():!this.vertical&&Math.abs(s)>30&&(s>0?this.prev():this.next())};onTouchStart=t=>{if(!this.swipe)return;const e=t.touches[0];this.onTouchStartX=e.clientX,this.onTouchStartY=e.clientY,this.isDragging=!0,this.dragOffset=0};onTouchEnd=()=>{this.isDragging&&(this.isDragging=!1,Math.abs(this.dragOffset)>50&&(this.dragOffset>0?this.prev():this.next()),this.dragOffset=0)};handleMouseDown=t=>{this.enableDrag&&(this.isDragging=!0,this.startX=t.clientX,this.startY=t.clientY,this.dragOffset=0,window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onMouseUp))};onMouseMove=t=>{this.isDragging&&(this.dragOffset=this.vertical?t.clientY-this.startY:t.clientX-this.startX)};onMouseUp=()=>{this.isDragging&&(this.isDragging=!1,Math.abs(this.dragOffset)>50&&(this.dragOffset>0?this.prev():this.next(),this.pauseOnInteract&&this.stopAutoplay()),this.dragOffset=0,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onMouseUp))};render(){const t=!this.vertical,e=t?{width:"100%",flexDirection:"row"}:{height:"100%",flexDirection:"column"},s=!this.infinite&&0===this.current,a=!this.infinite&&this.current>=this.slidesCount-this.slidesToShow,r=t=>{const e="prev"===t?s:a;return i("ui-button",{variant:"ghost",class:{["carousel-arrow "+t]:!0,disabled:e},onClick:()=>!e&&this.onArrowClick(t),ariaLabel:("prev"===t?"Previous":"Next")+" Slide",disabled:e,icon:"prev"===t?"chevron-left":"chevron-right",iconLibrary:"lucide",iconSize:"24px"})};return i(o,{class:{"is-fullscreen":this.isFullscreen,"auto-height":this.autoHeight,"parallax-mode":this.parallax,"zoom-active":this.zoomActive,"legendary-animate":this.animateContent,["arrows-pos-"+this.arrowsPosition]:!0,["effect-"+this.effect]:!0}},i("div",{class:{carousel:!0,vertical:!t,dragging:this.isDragging},style:{width:this.width,height:this.height},tabindex:this.keyboard?0:-1,onKeyDown:this.onKeyDown,role:"region","aria-roledescription":"carousel","aria-label":"Carousel"},this.showProgress&&"dots"===this.indicatorsType&&i("div",{class:"autoplay-progress"},i("div",{class:"progress-bar",style:{width:this.autoplayProgress+"%"}})),this.arrows&&"top-right"===this.arrowsPosition&&i("div",{class:"carousel-controls"},r("prev"),r("next")),this.arrows&&"sides"===this.arrowsPosition&&r("prev"),i("div",{class:"carousel-track-wrapper",style:e,onTouchStart:this.onTouchStart,onTouchMove:this.onTouchMove,onTouchEnd:this.onTouchEnd,onMouseDown:this.handleMouseDown},i("div",{class:"carousel-track",style:{transform:this.ticker||this.variableWidth&&"slide"===this.effect?this.trackTranslate:"slide"===this.effect?t?`translateX(calc(-${this.current*(100/this.slidesToShow)}% + ${this.dragOffset}px))`:`translateY(calc(-${this.current*(100/this.slidesToShow)}% + ${this.dragOffset}px))`:"none",transition:this.ticker?"none":`transform ${this.animationDuration}ms ${this.animationEasing}`,display:"flex",...e}},i("slot",{onSlotchange:()=>{this.updateSlidesCount(),this.lazyLoad&&this.setupLazyLoading()}}),this.ticker&&i("slot",{name:"ticker-clone",onSlotchange:this.updateSlidesCount}))),i("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},this._ariaAnnouncement),this.arrows&&"sides"===this.arrowsPosition&&r("next"),this.showCounter&&i("div",{class:"carousel-counter"},this.current+1," / ",this.slidesCount),this.indicators&&i("div",{class:"carousel-indicators"},Array.from({length:this.slidesCount-this.slidesToShow+1},((t,e)=>{const s=e===this.current,o=this.useProgressSegments?"segments":this.indicatorsType;return"segments"===o?i("div",{class:{"progress-segment":!0,active:s}},i("div",{class:"progress-fill",style:{width:s?this.autoplayProgress+"%":e<this.current?"100%":"0%"}})):"pie"===o?i("div",{class:{"indicator-pie":!0,active:s},onClick:()=>this.onIndicatorClick(e)},i("svg",{viewBox:"0 0 32 32"},i("circle",{cx:"16",cy:"16",r:"14",fill:"none",stroke:"rgba(255,255,255,0.15)","stroke-width":"2"}),s&&i("circle",{cx:"16",cy:"16",r:"14",fill:"none",stroke:"white","stroke-width":"3","stroke-dasharray":"88","stroke-dashoffset":88-88*this.autoplayProgress/100,style:{transition:"stroke-dashoffset 0.05s linear"},transform:"rotate(-90 16 16)"}))):i("ui-button",{variant:"ghost",size:"xxs",class:{active:s},onClick:()=>this.onIndicatorClick(e),ariaLabel:"Go to slide "+(e+1)})}))),i("ui-button",{variant:"ghost",size:"sm",iconOnly:!0,class:"fullscreen-toggle",onClick:()=>this.toggleFullscreen(),ariaLabel:"Toggle Fullscreen",icon:this.isFullscreen?"minimize":"maximize",iconLibrary:"lucide",iconSize:"18px"})))}static get watchers(){return{current:[{onCurrentChange:0}],slidesToShow:[{onSlidesToShowChange: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;width:100%;height:100%;box-sizing:border-box}.carousel{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;background:var(--carousel-bg, var(--bg-primary, #ffffff));user-select:none}.carousel.dragging{cursor:grabbing}.carousel.dragging .carousel-track{transition:none !important}.carousel.vertical{flex-direction:column}.carousel-track-wrapper{width:100%;height:100%;overflow:hidden;display:flex;flex:1 1 auto;position:relative}.carousel-track{display:flex;transition:transform var(--carousel-speed, 0.5s) cubic-bezier(0.4, 0, 0.2, 1);will-change:transform;width:100%;height:100%}.carousel.vertical .carousel-track{flex-direction:column}::slotted(*){flex-shrink:0;width:100%;height:100%;box-sizing:border-box;overflow:hidden}.effect-fade .carousel-track,:host([effect=fade]) .carousel-track{transform:none !important;display:block !important;position:relative;height:100%}.effect-fade ::slotted(*),:host([effect=fade]) ::slotted(*){position:absolute !important;top:0;left:0;opacity:0;transition:opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none;width:100%;height:100%;z-index:1}.effect-fade ::slotted([data-active=true]),:host([effect=fade]) ::slotted([data-active=true]){opacity:1;pointer-events:auto;z-index:10}.effect-flip .carousel-track-wrapper,:host([effect=flip]) .carousel-track-wrapper{perspective:1500px;overflow:visible}.effect-flip .carousel-track,:host([effect=flip]) .carousel-track{transform:none !important;display:block !important;position:relative;height:100%;transform-style:preserve-3d}.effect-flip ::slotted(*),:host([effect=flip]) ::slotted(*){position:absolute !important;top:0;left:50%;width:100%;height:100%;transform:translate3d(-50%, 0, 0) rotateY(-180deg);opacity:0;transition:transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;backface-visibility:hidden}.effect-flip ::slotted([data-active=true]),:host([effect=flip]) ::slotted([data-active=true]){opacity:1;transform:translate3d(-50%, 0, 0) rotateY(0deg);z-index:10}.effect-cube .carousel-track-wrapper,:host([effect=cube]) .carousel-track-wrapper{perspective:2000px;overflow:visible}.effect-cube .carousel-track,:host([effect=cube]) .carousel-track{transform:none !important;display:block !important;transform-style:preserve-3d;position:relative;height:100%}.effect-cube ::slotted(*),:host([effect=cube]) ::slotted(*){position:absolute !important;top:0;left:50%;width:100%;height:100%;opacity:0;transition:transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;transform:translate3d(-50%, 0, -300px) rotateY(90deg);backface-visibility:hidden;transform-origin:center center}.effect-cube ::slotted([data-active=true]),:host([effect=cube]) ::slotted([data-active=true]){opacity:1;transform:translate3d(-50%, 0, 0) rotateY(0deg);z-index:10}.effect-cube ::slotted([data-offset="-1"]),:host([effect=cube]) ::slotted([data-offset="-1"]){opacity:0.2;transform:translate3d(-100%, 0, -300px) rotateY(90deg);z-index:5}.effect-cube ::slotted([data-offset="1"]),:host([effect=cube]) ::slotted([data-offset="1"]){opacity:0.2;transform:translate3d(0%, 0, -300px) rotateY(-90deg);z-index:5}.effect-scale .carousel-track,:host([effect=scale]) .carousel-track{transform:none !important;display:block !important;height:100%;position:relative}.effect-scale ::slotted(*),:host([effect=scale]) ::slotted(*){position:absolute !important;top:0;left:50%;width:100%;height:100%;transform:translate3d(-50%, 0, 0) scale(1.15);opacity:0;transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1)}.effect-scale ::slotted([data-active=true]),:host([effect=scale]) ::slotted([data-active=true]){opacity:1;transform:translate3d(-50%, 0, 0) scale(1);z-index:10}.effect-coverflow .carousel-track-wrapper,:host([effect=coverflow]) .carousel-track-wrapper{perspective:1500px;overflow:visible}.effect-coverflow .carousel-track,:host([effect=coverflow]) .carousel-track{transform:none !important;display:block !important;position:relative;transform-style:preserve-3d;height:100%}.effect-coverflow ::slotted(*),:host([effect=coverflow]) ::slotted(*){position:absolute !important;top:0;left:50%;transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1);width:90%;height:100%;transform:translate3d(-50%, 0, -200px) scale(0.7) rotateY(60deg);opacity:0}.effect-coverflow ::slotted([data-active=true]),:host([effect=coverflow]) ::slotted([data-active=true]){transform:translate3d(-50%, 0, 0) scale(1) rotateY(0deg);opacity:1;z-index:10}.effect-coverflow ::slotted([data-offset="-1"]),:host([effect=coverflow]) ::slotted([data-offset="-1"]){transform:translate3d(-110%, 0, -150px) scale(0.85) rotateY(45deg);opacity:0.6;z-index:5}.effect-coverflow ::slotted([data-offset="1"]),:host([effect=coverflow]) ::slotted([data-offset="1"]){transform:translate3d(10%, 0, -150px) scale(0.85) rotateY(-45deg);opacity:0.6;z-index:5}.effect-stack .carousel-track,:host([effect=stack]) .carousel-track{transform:none !important;display:block !important;height:100%}.effect-stack ::slotted(*),:host([effect=stack]) ::slotted(*){position:absolute !important;top:0;left:0;opacity:0;transform:translateY(40px) scale(0.9);transition:all 0.7s cubic-bezier(0.16, 1, 0.3, 1)}.effect-stack ::slotted([data-active=true]),:host([effect=stack]) ::slotted([data-active=true]){opacity:1;transform:translateY(0) scale(1);z-index:10}.effect-stack ::slotted([data-visible=true]:not([data-active=true])),:host([effect=stack]) ::slotted([data-visible=true]:not([data-active=true])){opacity:0.6;transform:translateY(20px) scale(0.95);z-index:5}.effect-depth .carousel-track,:host([effect=depth]) .carousel-track{transform:none !important;display:block !important;position:relative;height:100%}.effect-depth ::slotted(*),:host([effect=depth]) ::slotted(*){position:absolute !important;top:0;left:50%;width:90%;height:100%;transition:transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;transform:translate3d(-50%, 0, -400px) scale(0.5);opacity:0}.effect-depth ::slotted([data-active=true]),:host([effect=depth]) ::slotted([data-active=true]){transform:translate3d(-50%, 0, 0) scale(1);opacity:1;z-index:10}.effect-depth ::slotted([data-offset="-1"]),:host([effect=depth]) ::slotted([data-offset="-1"]){transform:translate3d(-105%, 0, -200px) scale(0.8);opacity:0.5;z-index:5}.effect-depth ::slotted([data-offset="1"]),:host([effect=depth]) ::slotted([data-offset="1"]){transform:translate3d(5%, 0, -200px) scale(0.8);opacity:0.5;z-index:5}.effect-ken-burns ::slotted(*),:host([effect=ken-burns]) ::slotted(*){position:absolute !important;top:0;left:0;opacity:0;overflow:hidden;height:100%;width:100%;transition:opacity 1.5s ease}.effect-ken-burns ::slotted([data-active=true]),:host([effect=ken-burns]) ::slotted([data-active=true]){opacity:1;z-index:10;animation:kenBurnsPremium 10s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}@keyframes kenBurnsPremium{0%{transform:scale(1) translate(0, 0)}100%{transform:scale(1.2) translate(-2%, -2%)}}.effect-wheel .carousel-track-wrapper,:host([effect=wheel]) .carousel-track-wrapper{perspective:1500px;overflow:visible}.effect-wheel .carousel-track,:host([effect=wheel]) .carousel-track{transform-style:preserve-3d;transition:transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);height:100%}.effect-wheel ::slotted(*),:host([effect=wheel]) ::slotted(*){position:absolute !important;top:0;left:0;opacity:0.2;transform:rotateX(45deg) translateZ(-200px);transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1)}.effect-wheel ::slotted([data-active=true]),:host([effect=wheel]) ::slotted([data-active=true]){opacity:1;transform:rotateX(0deg) translateZ(0);z-index:10}.effect-wheel ::slotted([data-visible=true]:not([data-active=true])),:host([effect=wheel]) ::slotted([data-visible=true]:not([data-active=true])){opacity:0.4;transform:rotateX(-45deg) translateZ(-150px)}.carousel-indicators{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:8px;z-index:10}.carousel-indicators button{width:12px;height:6px;border-radius:3px;border:none;background:rgba(255, 255, 255, 0.4);cursor:pointer;transition:0.3s}.carousel-indicators button.active{width:24px;background:var(--bg-primary, #ffffff);box-shadow:0 2px 8px rgba(0, 0, 0, 0.2)}.indicator-pie{position:relative;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0, 0, 0, 0.1);border:1.5px solid transparent;transition:0.3s}.indicator-pie:hover{background:rgba(0, 0, 0, 0.2);border-color:rgba(255, 255, 255, 0.2)}.indicator-pie.active{background:rgba(0, 0, 0, 0.3)}.indicator-pie svg{width:100%;height:100%;overflow:visible;stroke-linecap:round}:host([indicators-type=segments]) .carousel-indicators{top:20px;bottom:auto;left:0;right:0;transform:none;padding:0 16px;gap:4px;width:100%;box-sizing:border-box}.progress-segment{flex:1;height:3px;border-radius:2px;overflow:hidden;background:rgba(255, 255, 255, 0.2)}.progress-segment .progress-fill{height:100%;background:var(--bg-primary, #ffffff);transition:width 0.1s linear}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255, 255, 255, 0.2);color:var(--bg-primary, var(--text-standard, #ffffff));cursor:pointer;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10;transition:0.3s}.carousel-arrow:hover:not(:disabled){background:rgb(255, 255, 255);color:var(--bg-primary, #000);transform:translateY(-50%) scale(1.1)}.carousel-arrow:disabled{opacity:0.2;cursor:not-allowed}.carousel-arrow.prev{left:20px}.carousel-arrow.next{right:20px}.carousel-controls{position:absolute;top:20px;right:20px;display:flex;gap:8px;z-index:20}.carousel-controls .carousel-arrow{position:static;transform:none;border-radius:8px;background:var(--bg-primary, #ffffff);color:var(--bg-primary, var(--border-subtle, #1e293b));border:1px solid var(--border-subtle, #e2e8f0);width:38px;height:38px;box-shadow:0 4px 10px rgba(0, 0, 0, 0.05)}.carousel-controls .carousel-arrow:hover:not(:disabled){transform:translateY(-2px);border-color:var(--color-primary, #94a3b8)}.carousel-counter{position:absolute;top:20px;left:20px;background:rgba(0, 0, 0, 0.5);color:var(--bg-primary, var(--text-standard, #ffffff));padding:4px 12px;border-radius:20px;font-size:11px;font-weight:800;backdrop-filter:blur(4px)}.fullscreen-toggle{position:absolute;bottom:20px;right:20px;background:rgba(255, 255, 255, 0.2);color:var(--bg-primary, #ffffff);border:none;width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}.fullscreen-toggle:hover{background:rgba(255, 255, 255, 0.4)}:host(.parallax-mode) .carousel-track [data-visible=true]>*{transition:transform 0.7s ease-out}:host(.parallax-mode) .carousel-track [data-active=true]>*{transform:scale(1.05)}:host(.legendary-animate) .carousel-track [data-active=true]>*{animation:slideUpFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;opacity:0}@keyframes slideUpFade{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}'}},[769,"ui-carousel",{slidesToShow:[2,"slides-to-show"],slidesToScroll:[2,"slides-to-scroll"],infinite:[4],autoplay:[4],autoplayInterval:[2,"autoplay-interval"],arrows:[4],indicators:[4],vertical:[4],responsive:[1],swipe:[4],keyboard:[4],pauseOnHover:[4,"pause-on-hover"],prevArrow:[1,"prev-arrow"],nextArrow:[1,"next-arrow"],loop:[4],animationDuration:[2,"animation-duration"],animationEasing:[1,"animation-easing"],width:[1],height:[1],effect:[513],centerMode:[4,"center-mode"],centerPadding:[1,"center-padding"],enableDrag:[4,"enable-drag"],variableWidth:[4,"variable-width"],showProgress:[4,"show-progress"],showCounter:[4,"show-counter"],autoHeight:[4,"auto-height"],pauseOnInteract:[4,"pause-on-interact"],asNavFor:[1,"as-nav-for"],parallax:[4],lazyLoad:[4,"lazy-load"],zoomActive:[4,"zoom-active"],indicatorsType:[1,"indicators-type"],animateContent:[4,"animate-content"],useProgressSegments:[4,"use-progress-segments"],mouseWheel:[4,"mouse-wheel"],ticker:[4],tickerSpeed:[2,"ticker-speed"],arrowsPosition:[1,"arrows-position"],current:[32],slidesCount:[32],isHovered:[32],containerWidth:[32],containerHeight:[32],isDragging:[32],dragOffset:[32],autoplayProgress:[32],isFullscreen:[32],trackTranslate:[32],tickerOffset:[32],toggleFullscreen:[64],next:[64],prev:[64],refresh:[64],goTo:[64]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[0,"wheel","handleWheel"]],{current:[{onCurrentChange:0}],slidesToShow:[{onSlidesToShowChange:0}]}]),d=h,f=function(){"undefined"!=typeof customElements&&["ui-carousel","ui-badge","ui-button","ui-icon","ui-loader"].forEach((t=>{switch(t){case"ui-carousel":customElements.get(a(t))||customElements.define(a(t),h);break;case"ui-badge":customElements.get(a(t))||n();break;case"ui-button":customElements.get(a(t))||r();break;case"ui-icon":customElements.get(a(t))||c();break;case"ui-loader":customElements.get(a(t))||l()}}))};export{d as UiCarousel,f as defineCustomElement}