@diniz/webcomponents 1.1.5 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +291 -824
- package/dist/README.md +291 -824
- package/dist/webcomponents.es.js +197 -168
- package/dist/webcomponents.umd.js +57 -57
- package/package.json +1 -1
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
(function(u,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("feather-icons")):typeof define=="function"&&define.amd?define(["exports","feather-icons"],v):(u=typeof globalThis<"u"?globalThis:u||self,v(u.WebComponents={},u.feather))})(this,function(u,v){"use strict";var st=Object.defineProperty;var rt=(u,v,k)=>v in u?st(u,v,{enumerable:!0,configurable:!0,writable:!0,value:k}):u[v]=k;var h=(u,v,k)=>rt(u,typeof v!="symbol"?v+"":v,k);function k(l){let s=l;const t=new Set;return{get:()=>s,set:e=>{Object.is(s,e)||(s=e,t.forEach(a=>a(s)))},subscribe:e=>(t.add(e),()=>t.delete(e))}}class f extends HTMLElement{constructor(){super();h(this,"state");h(this,"signalUnsubs");this.attachShadow({mode:"open"}),this.state={},this.signalUnsubs=new Set}useSignal(t){const e=k(t),a=e.subscribe(()=>this.render());return this.signalUnsubs.add(a),e}setState(t){this.state={...this.state,...t},this.render()}connectedCallback(){this.render()}disconnectedCallback(){this.signalUnsubs.forEach(t=>t()),this.signalUnsubs.clear()}render(){}}const m=':root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #34a8eb;--color-border: #f3f5f7;--color-border-strong: #cbd5f5;--color-nav-bg: #222222;--color-nav-text: #ffffff;--shadow-primary: 0 8px 18px rgba(31, 111, 235, .25);--focus-ring: #9ec5ff;--radius-pill: 999px;--radius-md: 12px;--color-page-bg: #ffffff;--color-page-text: #0f172a}body{background:var(--color-page-bg);color:var(--color-page-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:host([data-ui="button"]){display:inline-block}:host([data-ui="table"]){display:block}:host([data-ui="layout"]){display:block}:host([data-ui="sidebar"]){display:block}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:.5rem;line-height:1;padding:.65rem 1.2rem;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn.primary{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:var(--shadow-primary)}.btn.secondary{background:var(--color-muted);color:var(--color-ink);border-color:var(--color-border-strong)}.btn.ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}.btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}.btn-danger:hover{background:#6626dc;border-color:#dc2626}.btn.has-icon{line-height:1.2}.btn .btn-icon{width:18px;height:18px;flex-shrink:0}.btn .btn-icon svg{width:100%;height:100%}.btn.icon-only{padding:.65rem;aspect-ratio:1}.btn.icon-only.sm{padding:.45rem}.btn.icon-only.lg{padding:.8rem}.btn.sm .btn-icon{width:14px;height:14px}.btn.lg .btn-icon{width:22px;height:22px}.btn.sm{font-size:.85rem;padding:.45rem .9rem;box-shadow:0 4px 12px #a7124426}.btn.md{font-size:.95rem;padding:.65rem 1.2rem}.btn.lg{font-size:1.05rem;padding:.8rem 1.5rem}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--color-header)}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.95rem;border-right:1px solid var(--color-border)}tr:last-child td{border-bottom:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.actions-cell{display:flex;gap:.5rem;justify-content:center}.app-nav{padding:1rem;background:var(--color-nav-bg);color:var(--color-nav-text)}.app-link{color:var(--color-nav-text);margin-right:1rem;text-decoration:none}.signal-demo,.theme-toggle{margin-top:16px;display:flex;align-items:center;gap:12px}.data-table{margin-top:15px}.dashboard-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px}.dashboard-sidebar{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.sidebar-title{margin:0 0 12px;font-size:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-link{color:var(--color-ink);text-decoration:none;font-weight:600}.dashboard-main{display:flex;flex-direction:column;gap:12px}.dashboard-actions{display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 900px){.dashboard-layout{grid-template-columns:1fr}}:host([data-ui="input"]){display:block}.input-wrapper{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.9rem;font-weight:600;color:var(--color-ink)}.input-field{padding:.6rem .85rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-page-bg);color:var(--color-page-text);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.input-field::placeholder{color:#94a3b8}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec7126}.input-field:disabled{background:var(--color-muted);cursor:not-allowed;opacity:.7}.input-wrapper.invalid .input-field{border-color:#ef4444}.input-wrapper.invalid .input-field:focus{box-shadow:0 0 0 3px #ef444426}.input-error{font-size:.8rem;color:#ef4444;display:flex;align-items:center;gap:.25rem}.input-error.hidden{display:none}:host([data-ui="checkbox"]){display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host([data-ui="checkbox"][disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{display:inline-flex;align-items:center;gap:.75rem}.checkbox-box{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--color-border, #cbd5e1);border-radius:var(--radius-sm, 4px);background:#fff;transition:all .2s;flex-shrink:0;box-sizing:border-box}.checkbox-box.size-sm{min-width:16px;max-width:16px;min-height:16px;max-height:16px}.checkbox-box.size-md{min-width:18px;max-width:18px;min-height:18px;max-height:18px}.checkbox-box.size-lg{min-width:20px;max-width:20px;min-height:20px;max-height:20px}.checkbox-box:hover:not(.disabled){border-color:var(--color-primary, #24ec71)}.checkbox-box.checked,.checkbox-box.indeterminate{background:var(--color-primary, #24ec71);border-color:var(--color-primary, #24ec71)}.checkbox-box.disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed}.checkbox-icon{display:none;color:#fff;position:absolute}.checkbox-box.checked .checkbox-icon.check,.checkbox-box.indeterminate .checkbox-icon.minus{display:block}.checkbox-icon.check{width:12px;height:12px}.checkbox-icon.minus{width:10px;height:10px}.checkbox-label{font-size:.95rem;color:var(--color-ink, #0f172a);line-height:1.5}.checkbox-container.size-sm .checkbox-label{font-size:.875rem}.checkbox-container.size-lg .checkbox-label{font-size:1rem}input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;animation:fadeIn .2s ease-out}.modal-backdrop.open{display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:var(--color-surface, white);border-radius:var(--radius-lg, 16px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;display:flex;flex-direction:column;width:100%;animation:slideUp .2s ease-out}.modal-content.sm{max-width:400px}.modal-content.md{max-width:600px}.modal-content.lg{max-width:800px}.modal-content.xl{max-width:1200px}.modal-content.full{max-width:95vw}.modal-header{padding:1.5rem;border-bottom:1px solid var(--color-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.25rem;font-weight:600;color:var(--color-ink, #0f172a);margin:0}.modal-close{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md, 8px);color:var(--color-text-muted, #64748b);transition:all .2s}.modal-close:hover{background:var(--color-muted, #f1f5f9);color:var(--color-ink, #0f172a)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem;border-top:1px solid var(--color-border, #e2e8f0);display:flex;gap:.75rem;justify-content:flex-end}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="select"]){display:block;width:90%}.select-container{position:relative;width:100%}.select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-ink, #0f172a)}.select-trigger{width:100%;padding:.625rem 1rem;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;font-size:.95rem;color:var(--color-ink, #0f172a)}.select-trigger:hover:not(:disabled){border-color:var(--color-primary, #24ec71)}.select-trigger:focus{outline:none;border-color:var(--color-primary, #24ec71);box-shadow:0 0 0 3px #24ec711a}.select-trigger:disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed;opacity:.6}.select-trigger.open{border-color:var(--color-primary, #24ec71)}.select-placeholder{color:var(--color-text-muted, #94a3b8);flex:1;text-align:left}.select-placeholder.has-selection{color:var(--color-ink, #0f172a)}.select-arrow{display:flex;transition:transform .2s;color:var(--color-text-muted, #64748b)}.select-arrow.open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:300px;overflow-y:auto;z-index:1000;display:none;animation:slideDown .15s ease-out}.select-dropdown.open{display:block}.select-search{width:100%;padding:.625rem 1rem;border:none;border-bottom:1px solid var(--color-border, #e2e8f0);font-size:.95rem;outline:none}.select-search:focus{background:var(--color-muted, #f1f5f9)}.select-option{padding:.625rem 1rem;cursor:pointer;transition:background .15s;color:var(--color-ink, #0f172a);font-size:.95rem}.select-option:hover:not(.disabled){background:var(--color-muted, #f1f5f9)}.select-option.selected{background:#24ec711a;color:var(--color-primary, #24ec71);font-weight:500}.select-option.disabled{opacity:.5;cursor:not-allowed}.select-empty{padding:1rem;text-align:center;color:var(--color-text-muted, #94a3b8);font-size:.875rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="upload"]){display:block;width:100%}.upload{display:flex;flex-direction:column;gap:.75rem}.upload-label{font-size:.9rem;font-weight:700;color:var(--color-ink)}.upload-drop{border:1.5px dashed rgba(36,236,113,.55);border-radius:16px;background:linear-gradient(135deg,#24ec7114,#34a8eb14);padding:1.25rem 1.5rem;position:relative;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.upload-drop.dragging{border-color:var(--color-primary);box-shadow:0 16px 30px #24ec712e;transform:translateY(-2px)}.upload-drop.disabled{opacity:.6;cursor:not-allowed}.upload-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.upload-content{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center}.upload-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#0f172a;color:#fff;box-shadow:0 12px 20px #0f172a2e}.upload-icon svg{width:20px;height:20px}.upload-title{font-weight:700;color:var(--color-ink)}.upload-sub{font-size:.85rem;color:var(--color-text-muted, #64748b);margin-top:.2rem}.upload-btn{border:none;border-radius:999px;padding:.45rem 1rem;font-size:.85rem;font-weight:700;background:#0f172a;color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.upload-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 16px #0f172a2e}.upload-btn:disabled{cursor:not-allowed;opacity:.5}.upload-helper{font-size:.85rem;color:var(--color-text-muted, #64748b)}.upload-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}.upload-list li{display:grid;grid-template-columns:1fr auto auto;gap:.75rem;align-items:center;padding:.6rem .75rem;border-radius:12px;background:#fff;border:1px solid rgba(148,163,184,.35);font-size:.9rem;color:var(--color-ink)}.upload-meta{font-size:.78rem;color:var(--color-text-muted, #64748b)}.upload-remove{border:none;background:#ef44441a;color:#b91c1c;padding:.25rem .65rem;border-radius:999px;font-size:.75rem;font-weight:600;cursor:pointer}.upload-remove:hover{background:#ef444433}:host([data-ui="pagination"]){display:block}.pagination-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.pagination-info{font-size:.9rem;color:var(--color-ink);opacity:.7}.pagination{display:flex;align-items:center;gap:.25rem}.page-btn{min-width:2.5rem;height:2.5rem;padding:.5rem;border:1px solid var(--color-border);background:#fff;color:var(--color-ink);font-size:.9rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled):not(.active){background:var(--color-muted);border-color:var(--color-border-strong)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn.active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary);font-weight:600}.page-btn.ellipsis{border:none;background:transparent;cursor:default;pointer-events:none}.nav-btn{padding:.5rem .75rem}.nav-btn svg{width:16px;height:16px}:host([data-ui="stepper"]){display:block}.stepper-wrap{width:100%}.stepper-empty{padding:1rem;border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted, #64748b);text-align:center;font-size:.9rem}.stepper{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1.25rem}.stepper.vertical{flex-direction:column;gap:1rem}.step{display:flex;align-items:center;position:relative}.stepper.vertical .step{flex-direction:column;align-items:flex-start}.step-trigger{display:flex;align-items:center;gap:.75rem;background:transparent;border:none;padding:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--color-ink)}.step-trigger:disabled{cursor:not-allowed;opacity:.5}.step-node{width:2.1rem;height:2.1rem;border-radius:12px;background:var(--color-muted);border:1px solid var(--color-border-strong);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:var(--color-ink);box-shadow:inset 0 0 0 1px #fff9}.step-text{display:flex;flex-direction:column;gap:.2rem}.step-title{font-weight:700;letter-spacing:.2px;font-size:.98rem}.step-desc{font-size:.85rem;color:var(--color-text-muted, #64748b)}.step-connector{width:48px;height:2px;margin:0 .65rem;background:linear-gradient(90deg,var(--color-border),rgba(255,255,255,0));flex-shrink:0}.stepper.vertical .step-connector{width:2px;height:28px;margin:.65rem 0 .25rem 1.05rem;background:linear-gradient(180deg,var(--color-border),rgba(255,255,255,0))}.step.complete .step-node{background:linear-gradient(135deg,#24ec71,#34a8eb);color:#0f172a;border-color:transparent;box-shadow:0 8px 18px #24ec7140}.step.complete .step-connector{background:linear-gradient(90deg,#24ec71,#34a8eb)}.stepper.vertical .step.complete .step-connector{background:linear-gradient(180deg,#24ec71,#34a8eb)}.step.active .step-node{background:#fff;color:var(--color-ink);border-color:var(--color-primary);box-shadow:0 0 0 4px #24ec712e,0 12px 20px #24ec7138;animation:stepGlow 1.6s ease-in-out infinite}.step.active .step-title{color:var(--color-ink)}.step.upcoming .step-title{color:var(--color-ink);opacity:.7}.step.error .step-node{background:#fee2e2;border-color:#f87171;color:#991b1b;box-shadow:0 8px 16px #ef444433}.step.warning .step-node{background:#fef3c7;border-color:#f59e0b;color:#92400e;box-shadow:0 8px 16px #f59e0b33}.stepper.sm .step-node{width:1.65rem;height:1.65rem;font-size:.75rem;border-radius:10px}.stepper.sm .step-title{font-size:.9rem}.stepper.sm .step-desc{font-size:.78rem}.stepper.lg .step-node{width:2.6rem;height:2.6rem;font-size:1.05rem;border-radius:14px}.stepper.lg .step-title{font-size:1.1rem}.stepper.lg .step-desc{font-size:.92rem}@keyframes stepGlow{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}:host([data-ui="date-picker"]){display:block;width:100%}.date-picker-label{display:block;font-size:.9rem;font-weight:500;color:var(--color-ink);margin-bottom:.5rem}.date-picker-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.date-input-wrapper{position:relative;display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;transition:all .2s ease}.date-input-wrapper:hover:not(.disabled){border-color:var(--color-border-strong)}.date-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec711a;outline:none}.date-input-wrapper.disabled{background:var(--color-muted);cursor:not-allowed;opacity:.6}.formatted-input{flex:1;border:none;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;background:transparent;color:var(--color-ink);outline:none}.formatted-input:disabled{cursor:not-allowed;color:var(--color-ink);opacity:.7}.formatted-input::placeholder{color:#94a3b8;opacity:.7}.formatted-input.invalid{color:#dc2626}.hidden-date-input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;pointer-events:none;cursor:pointer}.calendar-btn{padding:.5rem;margin-right:.5rem;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-ink);opacity:.6;transition:all .2s ease;border-radius:6px}.calendar-btn:hover:not(:disabled){background:var(--color-muted);opacity:1}.calendar-btn:disabled{cursor:not-allowed;opacity:.3}.calendar-icon{width:20px;height:20px}.format-label{font-size:.75rem;color:var(--color-ink);opacity:.6;padding:0 .25rem;font-weight:500}:host([data-ui="layout"]){display:block;width:100%;height:100%}.layout-container{display:flex;width:100%;height:100%;background:var(--color-bg);position:relative}:host([data-ui="layout-header"]){display:block;width:100%;flex-shrink:0}.layout-header{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:0 1px 3px #0f172a0f}:host([data-ui="layout-footer"]){display:block;width:100%;flex-shrink:0}.layout-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -1px 3px #0f172a0f}:host([data-ui="layout-content"]){display:block;flex:1;overflow:auto;min-width:0}.layout-content{display:flex;flex-direction:column;width:100%;height:100%;position:relative}:host([data-ui="layout-sidebar"]){display:block;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);position:relative;overflow:hidden;height:100%}.layout-sidebar{display:flex;flex-direction:column;width:var(--sidebar-width, 240px);height:100%;background:var(--color-surface);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;border-right:1px solid var(--color-border);overflow:hidden}.layout-sidebar.collapsed{width:var(--sidebar-collapsed-width, 64px)}.sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem 0}.sidebar-toggle{position:absolute;bottom:1rem;right:0;width:40px;height:40px;padding:0;margin-right:.7rem;background:transparent;border:1px solid var(--color-border);border-radius:8px;color:var(--color-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.sidebar-toggle:hover{background:var(--color-muted);border-color:var(--color-border-strong)}.sidebar-toggle:active{transform:scale(.95)}.toggle-icon{width:18px;height:18px;transition:transform .3s ease}.layout-sidebar.collapsed .toggle-icon{transform:rotate(180deg)}.sidebar-content::-webkit-scrollbar{width:6px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:3px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:var(--color-ink);opacity:.6}@media (max-width: 768px){.layout-header,.layout-footer{padding:0 1rem}.layout-sidebar{position:absolute;left:0;top:0;height:100%;z-index:1000;box-shadow:2px 0 8px #0f172a26;transition:transform .3s cubic-bezier(.4,0,.2,1)}.layout-sidebar.collapsed{transform:translate(calc(-1 * var(--sidebar-width, 240px)))}}#ui-datepicker-div,.datepicker,.react-datepicker-popper{z-index:99999!important}';class $ extends f{connectedCallback(){this.setAttribute("data-ui","button"),super.connectedCallback(),this.attachClickHandler()}static get observedAttributes(){return["variant","size","disabled","type","icon","icon-position"]}attributeChangedCallback(){this.render(),this.attachClickHandler()}attachClickHandler(){if(!this.shadowRoot)return;const s=this.shadowRoot.querySelector("button");if(!s)return;const t=s._clickHandler;t&&s.removeEventListener("click",t);const e=a=>{const r=this.getType();if(this.hasAttribute("disabled")){a.preventDefault(),a.stopPropagation();return}if(r==="submit"){a.preventDefault(),a.stopPropagation();let i=this.closest("form");if(!i){let o=this.parentElement;for(;o;){if(o.tagName==="FORM"){i=o;break}o=o.parentElement}}if(i){const o=new Event("submit",{bubbles:!0,cancelable:!0});i.dispatchEvent(o)}}};s._clickHandler=e,s.addEventListener("click",e)}getVariant(){const s=this.getAttribute("variant");return s==="secondary"||s==="ghost"||s==="danger"?s:"primary"}getSize(){const s=this.getAttribute("size");return s==="sm"||s==="lg"?s:"md"}getType(){return this.getAttribute("type")??"button"}getIcon(){var a;const s=this.getAttribute("icon");if(!s)return null;const t=s.trim();return{html:`<span class="btn-icon">${((a=v.icons[t])==null?void 0:a.toSvg())||""}</span>`,name:t}}getIconPosition(){return this.getAttribute("icon-position")==="right"?"right":"left"}render(){const s=this.getVariant(),t=this.getSize(),e=this.hasAttribute("disabled"),a=this.getType(),r=this.getIcon(),n=this.getIconPosition(),i=r!==null,o=r?r.html:"",c=this.innerHTML.trim(),d=i&&!c;let b;i&&c?b=n==="left"?`${o}<span>${c}</span>`:`<span>${c}</span>${o}`:i?b=o:b=c,this.shadowRoot.innerHTML=`
|
|
1
|
+
(function(u,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("feather-icons")):typeof define=="function"&&define.amd?define(["exports","feather-icons"],v):(u=typeof globalThis<"u"?globalThis:u||self,v(u.WebComponents={},u.feather))})(this,function(u,v){"use strict";var st=Object.defineProperty;var rt=(u,v,y)=>v in u?st(u,v,{enumerable:!0,configurable:!0,writable:!0,value:y}):u[v]=y;var h=(u,v,y)=>rt(u,typeof v!="symbol"?v+"":v,y);function y(l){let r=l;const t=new Set;return{get:()=>r,set:e=>{Object.is(r,e)||(r=e,t.forEach(a=>a(r)))},subscribe:e=>(t.add(e),()=>t.delete(e))}}class f extends HTMLElement{constructor(){super();h(this,"state");h(this,"signalUnsubs");this.attachShadow({mode:"open"}),this.state={},this.signalUnsubs=new Set}useSignal(t){const e=y(t),a=e.subscribe(()=>this.render());return this.signalUnsubs.add(a),e}useSignalHtml(t,e){const a=y(e),i=a.subscribe(n=>{var o;const s=(o=this.shadowRoot)==null?void 0:o.getElementById(t);s&&(s.textContent=String(n))});return this.signalUnsubs.add(i),requestAnimationFrame(()=>{var s;const n=(s=this.shadowRoot)==null?void 0:s.getElementById(t);n&&(n.textContent=String(e))}),a}setState(t){this.state={...this.state,...t},this.render()}connectedCallback(){this.render()}disconnectedCallback(){this.signalUnsubs.forEach(t=>t()),this.signalUnsubs.clear()}render(){}}const m=':root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #34a8eb;--color-border: #f3f5f7;--color-border-strong: #cbd5f5;--color-nav-bg: #222222;--color-nav-text: #ffffff;--shadow-primary: 0 8px 18px rgba(31, 111, 235, .25);--focus-ring: #9ec5ff;--radius-pill: 999px;--radius-md: 12px;--color-page-bg: #ffffff;--color-page-text: #0f172a}body{background:var(--color-page-bg);color:var(--color-page-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:host([data-ui="button"]){display:inline-block}:host([data-ui="table"]){display:block}:host([data-ui="layout"]){display:block}:host([data-ui="sidebar"]){display:block}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:.5rem;line-height:1;padding:.65rem 1.2rem;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn.primary{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:var(--shadow-primary)}.btn.secondary{background:var(--color-muted);color:var(--color-ink);border-color:var(--color-border-strong)}.btn.ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}.btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}.btn-danger:hover{background:#6626dc;border-color:#dc2626}.btn.has-icon{line-height:1.2}.btn .btn-icon{width:18px;height:18px;flex-shrink:0}.btn .btn-icon svg{width:100%;height:100%}.btn.icon-only{padding:.65rem;aspect-ratio:1}.btn.icon-only.sm{padding:.45rem}.btn.icon-only.lg{padding:.8rem}.btn.sm .btn-icon{width:14px;height:14px}.btn.lg .btn-icon{width:22px;height:22px}.btn.sm{font-size:.85rem;padding:.45rem .9rem;box-shadow:0 4px 12px #a7124426}.btn.md{font-size:.95rem;padding:.65rem 1.2rem}.btn.lg{font-size:1.05rem;padding:.8rem 1.5rem}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--color-header)}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.95rem;border-right:1px solid var(--color-border)}tr:last-child td{border-bottom:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.actions-cell{display:flex;gap:.5rem;justify-content:center}.app-nav{padding:1rem;background:var(--color-nav-bg);color:var(--color-nav-text)}.app-link{color:var(--color-nav-text);margin-right:1rem;text-decoration:none}.signal-demo,.theme-toggle{margin-top:16px;display:flex;align-items:center;gap:12px}.data-table{margin-top:15px}.dashboard-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px}.dashboard-sidebar{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.sidebar-title{margin:0 0 12px;font-size:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-link{color:var(--color-ink);text-decoration:none;font-weight:600}.dashboard-main{display:flex;flex-direction:column;gap:12px}.dashboard-actions{display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 900px){.dashboard-layout{grid-template-columns:1fr}}:host([data-ui="input"]){display:block}.input-wrapper{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.9rem;font-weight:600;color:var(--color-ink)}.input-field{padding:.6rem .85rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-page-bg);color:var(--color-page-text);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.input-field::placeholder{color:#94a3b8}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec7126}.input-field:disabled{background:var(--color-muted);cursor:not-allowed;opacity:.7}.input-wrapper.invalid .input-field{border-color:#ef4444}.input-wrapper.invalid .input-field:focus{box-shadow:0 0 0 3px #ef444426}.input-error{font-size:.8rem;color:#ef4444;display:flex;align-items:center;gap:.25rem}.input-error.hidden{display:none}:host([data-ui="checkbox"]){display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host([data-ui="checkbox"][disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{display:inline-flex;align-items:center;gap:.75rem}.checkbox-box{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--color-border, #cbd5e1);border-radius:var(--radius-sm, 4px);background:#fff;transition:all .2s;flex-shrink:0;box-sizing:border-box}.checkbox-box.size-sm{min-width:16px;max-width:16px;min-height:16px;max-height:16px}.checkbox-box.size-md{min-width:18px;max-width:18px;min-height:18px;max-height:18px}.checkbox-box.size-lg{min-width:20px;max-width:20px;min-height:20px;max-height:20px}.checkbox-box:hover:not(.disabled){border-color:var(--color-primary, #24ec71)}.checkbox-box.checked,.checkbox-box.indeterminate{background:var(--color-primary, #24ec71);border-color:var(--color-primary, #24ec71)}.checkbox-box.disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed}.checkbox-icon{display:none;color:#fff;position:absolute}.checkbox-box.checked .checkbox-icon.check,.checkbox-box.indeterminate .checkbox-icon.minus{display:block}.checkbox-icon.check{width:12px;height:12px}.checkbox-icon.minus{width:10px;height:10px}.checkbox-label{font-size:.95rem;color:var(--color-ink, #0f172a);line-height:1.5}.checkbox-container.size-sm .checkbox-label{font-size:.875rem}.checkbox-container.size-lg .checkbox-label{font-size:1rem}input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;animation:fadeIn .2s ease-out}.modal-backdrop.open{display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:var(--color-surface, white);border-radius:var(--radius-lg, 16px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;display:flex;flex-direction:column;width:100%;animation:slideUp .2s ease-out}.modal-content.sm{max-width:400px}.modal-content.md{max-width:600px}.modal-content.lg{max-width:800px}.modal-content.xl{max-width:1200px}.modal-content.full{max-width:95vw}.modal-header{padding:1.5rem;border-bottom:1px solid var(--color-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.25rem;font-weight:600;color:var(--color-ink, #0f172a);margin:0}.modal-close{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md, 8px);color:var(--color-text-muted, #64748b);transition:all .2s}.modal-close:hover{background:var(--color-muted, #f1f5f9);color:var(--color-ink, #0f172a)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem;border-top:1px solid var(--color-border, #e2e8f0);display:flex;gap:.75rem;justify-content:flex-end}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="select"]){display:block;width:90%}.select-container{position:relative;width:100%}.select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-ink, #0f172a)}.select-trigger{width:100%;padding:.625rem 1rem;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;font-size:.95rem;color:var(--color-ink, #0f172a)}.select-trigger:hover:not(:disabled){border-color:var(--color-primary, #24ec71)}.select-trigger:focus{outline:none;border-color:var(--color-primary, #24ec71);box-shadow:0 0 0 3px #24ec711a}.select-trigger:disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed;opacity:.6}.select-trigger.open{border-color:var(--color-primary, #24ec71)}.select-placeholder{color:var(--color-text-muted, #94a3b8);flex:1;text-align:left}.select-placeholder.has-selection{color:var(--color-ink, #0f172a)}.select-arrow{display:flex;transition:transform .2s;color:var(--color-text-muted, #64748b)}.select-arrow.open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:300px;overflow-y:auto;z-index:1000;display:none;animation:slideDown .15s ease-out}.select-dropdown.open{display:block}.select-search{width:100%;padding:.625rem 1rem;border:none;border-bottom:1px solid var(--color-border, #e2e8f0);font-size:.95rem;outline:none}.select-search:focus{background:var(--color-muted, #f1f5f9)}.select-option{padding:.625rem 1rem;cursor:pointer;transition:background .15s;color:var(--color-ink, #0f172a);font-size:.95rem}.select-option:hover:not(.disabled){background:var(--color-muted, #f1f5f9)}.select-option.selected{background:#24ec711a;color:var(--color-primary, #24ec71);font-weight:500}.select-option.disabled{opacity:.5;cursor:not-allowed}.select-empty{padding:1rem;text-align:center;color:var(--color-text-muted, #94a3b8);font-size:.875rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="upload"]){display:block;width:100%}.upload{display:flex;flex-direction:column;gap:.75rem}.upload-label{font-size:.9rem;font-weight:700;color:var(--color-ink)}.upload-drop{border:1.5px dashed rgba(36,236,113,.55);border-radius:16px;background:linear-gradient(135deg,#24ec7114,#34a8eb14);padding:1.25rem 1.5rem;position:relative;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.upload-drop.dragging{border-color:var(--color-primary);box-shadow:0 16px 30px #24ec712e;transform:translateY(-2px)}.upload-drop.disabled{opacity:.6;cursor:not-allowed}.upload-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.upload-content{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center}.upload-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#0f172a;color:#fff;box-shadow:0 12px 20px #0f172a2e}.upload-icon svg{width:20px;height:20px}.upload-title{font-weight:700;color:var(--color-ink)}.upload-sub{font-size:.85rem;color:var(--color-text-muted, #64748b);margin-top:.2rem}.upload-btn{border:none;border-radius:999px;padding:.45rem 1rem;font-size:.85rem;font-weight:700;background:#0f172a;color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.upload-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 16px #0f172a2e}.upload-btn:disabled{cursor:not-allowed;opacity:.5}.upload-helper{font-size:.85rem;color:var(--color-text-muted, #64748b)}.upload-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}.upload-list li{display:grid;grid-template-columns:1fr auto auto;gap:.75rem;align-items:center;padding:.6rem .75rem;border-radius:12px;background:#fff;border:1px solid rgba(148,163,184,.35);font-size:.9rem;color:var(--color-ink)}.upload-meta{font-size:.78rem;color:var(--color-text-muted, #64748b)}.upload-remove{border:none;background:#ef44441a;color:#b91c1c;padding:.25rem .65rem;border-radius:999px;font-size:.75rem;font-weight:600;cursor:pointer}.upload-remove:hover{background:#ef444433}:host([data-ui="pagination"]){display:block}.pagination-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.pagination-info{font-size:.9rem;color:var(--color-ink);opacity:.7}.pagination{display:flex;align-items:center;gap:.25rem}.page-btn{min-width:2.5rem;height:2.5rem;padding:.5rem;border:1px solid var(--color-border);background:#fff;color:var(--color-ink);font-size:.9rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled):not(.active){background:var(--color-muted);border-color:var(--color-border-strong)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn.active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary);font-weight:600}.page-btn.ellipsis{border:none;background:transparent;cursor:default;pointer-events:none}.nav-btn{padding:.5rem .75rem}.nav-btn svg{width:16px;height:16px}:host([data-ui="stepper"]){display:block}.stepper-wrap{width:100%}.stepper-empty{padding:1rem;border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted, #64748b);text-align:center;font-size:.9rem}.stepper{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1.25rem}.stepper.vertical{flex-direction:column;gap:1rem}.step{display:flex;align-items:center;position:relative}.stepper.vertical .step{flex-direction:column;align-items:flex-start}.step-trigger{display:flex;align-items:center;gap:.75rem;background:transparent;border:none;padding:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--color-ink)}.step-trigger:disabled{cursor:not-allowed;opacity:.5}.step-node{width:2.1rem;height:2.1rem;border-radius:12px;background:var(--color-muted);border:1px solid var(--color-border-strong);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:var(--color-ink);box-shadow:inset 0 0 0 1px #fff9}.step-text{display:flex;flex-direction:column;gap:.2rem}.step-title{font-weight:700;letter-spacing:.2px;font-size:.98rem}.step-desc{font-size:.85rem;color:var(--color-text-muted, #64748b)}.step-connector{width:48px;height:2px;margin:0 .65rem;background:linear-gradient(90deg,var(--color-border),rgba(255,255,255,0));flex-shrink:0}.stepper.vertical .step-connector{width:2px;height:28px;margin:.65rem 0 .25rem 1.05rem;background:linear-gradient(180deg,var(--color-border),rgba(255,255,255,0))}.step.complete .step-node{background:linear-gradient(135deg,#24ec71,#34a8eb);color:#0f172a;border-color:transparent;box-shadow:0 8px 18px #24ec7140}.step.complete .step-connector{background:linear-gradient(90deg,#24ec71,#34a8eb)}.stepper.vertical .step.complete .step-connector{background:linear-gradient(180deg,#24ec71,#34a8eb)}.step.active .step-node{background:#fff;color:var(--color-ink);border-color:var(--color-primary);box-shadow:0 0 0 4px #24ec712e,0 12px 20px #24ec7138;animation:stepGlow 1.6s ease-in-out infinite}.step.active .step-title{color:var(--color-ink)}.step.upcoming .step-title{color:var(--color-ink);opacity:.7}.step.error .step-node{background:#fee2e2;border-color:#f87171;color:#991b1b;box-shadow:0 8px 16px #ef444433}.step.warning .step-node{background:#fef3c7;border-color:#f59e0b;color:#92400e;box-shadow:0 8px 16px #f59e0b33}.stepper.sm .step-node{width:1.65rem;height:1.65rem;font-size:.75rem;border-radius:10px}.stepper.sm .step-title{font-size:.9rem}.stepper.sm .step-desc{font-size:.78rem}.stepper.lg .step-node{width:2.6rem;height:2.6rem;font-size:1.05rem;border-radius:14px}.stepper.lg .step-title{font-size:1.1rem}.stepper.lg .step-desc{font-size:.92rem}@keyframes stepGlow{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}:host([data-ui="date-picker"]){display:block;width:100%}.date-picker-label{display:block;font-size:.9rem;font-weight:500;color:var(--color-ink);margin-bottom:.5rem}.date-picker-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.date-input-wrapper{position:relative;display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;transition:all .2s ease}.date-input-wrapper:hover:not(.disabled){border-color:var(--color-border-strong)}.date-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec711a;outline:none}.date-input-wrapper.disabled{background:var(--color-muted);cursor:not-allowed;opacity:.6}.formatted-input{flex:1;border:none;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;background:transparent;color:var(--color-ink);outline:none}.formatted-input:disabled{cursor:not-allowed;color:var(--color-ink);opacity:.7}.formatted-input::placeholder{color:#94a3b8;opacity:.7}.formatted-input.invalid{color:#dc2626}.hidden-date-input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;pointer-events:none;cursor:pointer}.calendar-btn{padding:.5rem;margin-right:.5rem;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-ink);opacity:.6;transition:all .2s ease;border-radius:6px}.calendar-btn:hover:not(:disabled){background:var(--color-muted);opacity:1}.calendar-btn:disabled{cursor:not-allowed;opacity:.3}.calendar-icon{width:20px;height:20px}.format-label{font-size:.75rem;color:var(--color-ink);opacity:.6;padding:0 .25rem;font-weight:500}:host([data-ui="layout"]){display:block;width:100%;height:100%}.layout-container{display:flex;width:100%;height:100%;background:var(--color-bg);position:relative}:host([data-ui="layout-header"]){display:block;width:100%;flex-shrink:0}.layout-header{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:0 1px 3px #0f172a0f}:host([data-ui="layout-footer"]){display:block;width:100%;flex-shrink:0}.layout-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -1px 3px #0f172a0f}:host([data-ui="layout-content"]){display:block;flex:1;overflow:auto;min-width:0}.layout-content{display:flex;flex-direction:column;width:100%;height:100%;position:relative}:host([data-ui="layout-sidebar"]){display:block;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);position:relative;overflow:hidden;height:100%}.layout-sidebar{display:flex;flex-direction:column;width:var(--sidebar-width, 240px);height:100%;background:var(--color-surface);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;border-right:1px solid var(--color-border);overflow:hidden}.layout-sidebar.collapsed{width:var(--sidebar-collapsed-width, 64px)}.sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem 0}.sidebar-toggle{position:absolute;bottom:1rem;right:0;width:40px;height:40px;padding:0;margin-right:.7rem;background:transparent;border:1px solid var(--color-border);border-radius:8px;color:var(--color-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.sidebar-toggle:hover{background:var(--color-muted);border-color:var(--color-border-strong)}.sidebar-toggle:active{transform:scale(.95)}.toggle-icon{width:18px;height:18px;transition:transform .3s ease}.layout-sidebar.collapsed .toggle-icon{transform:rotate(180deg)}.sidebar-content::-webkit-scrollbar{width:6px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:3px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:var(--color-ink);opacity:.6}@media (max-width: 768px){.layout-header,.layout-footer{padding:0 1rem}.layout-sidebar{position:absolute;left:0;top:0;height:100%;z-index:1000;box-shadow:2px 0 8px #0f172a26;transition:transform .3s cubic-bezier(.4,0,.2,1)}.layout-sidebar.collapsed{transform:translate(calc(-1 * var(--sidebar-width, 240px)))}}#ui-datepicker-div,.datepicker,.react-datepicker-popper{z-index:99999!important}';class $ extends f{connectedCallback(){this.setAttribute("data-ui","button"),super.connectedCallback(),this.attachClickHandler()}static get observedAttributes(){return["variant","size","disabled","type","icon","icon-position"]}attributeChangedCallback(){this.render(),this.attachClickHandler()}attachClickHandler(){if(!this.shadowRoot)return;const r=this.shadowRoot.querySelector("button");if(!r)return;const t=r._clickHandler;t&&r.removeEventListener("click",t);const e=a=>{const i=this.getType();if(this.hasAttribute("disabled")){a.preventDefault(),a.stopPropagation();return}if(i==="submit"){a.preventDefault(),a.stopPropagation();let s=this.closest("form");if(!s){let o=this.parentElement;for(;o;){if(o.tagName==="FORM"){s=o;break}o=o.parentElement}}if(s){const o=new Event("submit",{bubbles:!0,cancelable:!0});s.dispatchEvent(o)}}};r._clickHandler=e,r.addEventListener("click",e)}getVariant(){const r=this.getAttribute("variant");return r==="secondary"||r==="ghost"||r==="danger"?r:"primary"}getSize(){const r=this.getAttribute("size");return r==="sm"||r==="lg"?r:"md"}getType(){return this.getAttribute("type")??"button"}getIcon(){var a;const r=this.getAttribute("icon");if(!r)return null;const t=r.trim();return{html:`<span class="btn-icon">${((a=v.icons[t])==null?void 0:a.toSvg())||""}</span>`,name:t}}getIconPosition(){return this.getAttribute("icon-position")==="right"?"right":"left"}render(){const r=this.getVariant(),t=this.getSize(),e=this.hasAttribute("disabled"),a=this.getType(),i=this.getIcon(),n=this.getIconPosition(),s=i!==null,o=i?i.html:"",c=this.innerHTML.trim(),d=s&&!c;let b;s&&c?b=n==="left"?`${o}<span>${c}</span>`:`<span>${c}</span>${o}`:s?b=o:b=c,this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>${m}</style>
|
|
3
3
|
<button
|
|
4
4
|
part="button"
|
|
5
|
-
class="btn ${
|
|
5
|
+
class="btn ${r} ${t}${s?" has-icon":""}${d?" icon-only":""}"
|
|
6
6
|
type="${a}"
|
|
7
7
|
${e?"disabled":""}
|
|
8
8
|
>
|
|
9
9
|
${b}
|
|
10
10
|
</button>
|
|
11
|
-
`}}customElements.define("ui-button",$);class A extends f{constructor(){super();h(this,"inputEl",null);h(this,"customValidator",null);h(this,"validationRule",null);this.state={value:"",valid:!0,touched:!1,error:""}}static get observedAttributes(){return["type","label","placeholder","required","pattern","minlength","maxlength","min","max","error-message","custom-error","disabled","name","validate"]}connectedCallback(){this.setAttribute("data-ui","input"),super.connectedCallback()}attributeChangedCallback(t,e,a){e!==a&&t!=="value"&&this.render()}setCustomValidator(t){this.customValidator=t,this.validate()}get value(){return this.state.value}set value(t){this.state.value=t,this.inputEl&&this.inputEl.value!==t&&(this.inputEl.value=t),this.validate()}get isValid(){return this.state.valid}checkValidity(){return this.state.touched=!0,this.validate()}reportValidity(){this.state.touched=!0;const t=this.validate();return this.updateErrorDisplay(),!t&&this.inputEl&&this.inputEl.focus(),t}getType(){const t=this.getAttribute("type");return["text","email","password","number","tel","url"].includes(t||"")?t:"text"}getLabel(){return this.getAttribute("label")||""}getPlaceholder(){return this.getAttribute("placeholder")||""}getName(){return this.getAttribute("name")||""}getErrorMessage(){return this.state.error?this.state.error:this.getAttribute("error-message")||this.getAttribute("custom-error")||""}getCustomError(){return this.getAttribute("custom-error")||""}parseValidationRule(t){return t.startsWith("email:")?{type:"emailDomain",domain:t.slice(6)}:t.startsWith("match:")?{type:"match",selector:t.slice(6)}:t.startsWith("min:")?{type:"minLength",length:parseInt(t.slice(4),10)}:t.startsWith("max:")?{type:"maxLength",length:parseInt(t.slice(4),10)}:t.startsWith("regex:")?{type:"regex",pattern:t.slice(6)}:null}applyValidationRule(t){const e=this.state.value;switch(t.type){case"emailDomain":if(!e.endsWith(`@${t.domain}`))return{valid:!1,message:`Must end with @${t.domain}`};break;case"match":const a=document.querySelector(t.selector);if(a&&e!==a.value)return{valid:!1,message:"Values do not match"};break;case"minLength":if(e.length<t.length)return{valid:!1,message:`Must be at least ${t.length} characters`};break;case"maxLength":if(e.length>t.length)return{valid:!1,message:`Must be no more than ${t.length} characters`};break;case"regex":try{if(!new RegExp(t.pattern).test(e))return{valid:!1,message:"Invalid format"}}catch{return{valid:!1,message:"Invalid validation pattern"}}break}return{valid:!0}}validate(){if(!this.inputEl)return!0;const t=this.getAttribute("validate");if(t&&(this.validationRule||(this.validationRule=this.parseValidationRule(t)),this.validationRule)){const e=this.applyValidationRule(this.validationRule);return this.state.valid=e.valid,!e.valid&&e.message&&(this.state.error=e.message),this.state.valid}if(this.customValidator){const e=this.customValidator(this.state.value,this.inputEl);this.state.valid=e.valid,!e.valid&&e.message&&(this.state.error=e.message)}else{const e=this.inputEl.checkValidity();this.state.valid=e,!e&&this.state.touched&&(this.state.error=this.inputEl.validationMessage||this.getErrorMessage()),e&&(this.state.error="")}return this.state.valid}handleInput(t){const e=t.target;this.state.value=e.value,this.state.touched=!0,this.validate(),this.updateErrorDisplay()}handleBlur(){this.state.touched=!0,this.validate(),this.updateErrorDisplay()}updateErrorDisplay(){if(!this.inputEl)return;const t=this.shadowRoot.querySelector(".input-error"),e=this.shadowRoot.querySelector(".input-wrapper"),a=this.getName();e&&e.classList.toggle("invalid",!this.state.valid&&this.state.touched),t&&(!this.state.valid&&this.state.touched&&this.state.error?(t.textContent=this.state.error,t.classList.remove("hidden")):t.classList.add("hidden")),this.inputEl.setAttribute("aria-invalid",String(!this.state.valid&&this.state.touched)),a&&this.inputEl.setAttribute("aria-describedby",`${a}-error`)}needsRender(){return this.hasAttribute("type")||this.hasAttribute("label")||this.hasAttribute("placeholder")||this.hasAttribute("required")||this.hasAttribute("pattern")||this.hasAttribute("disabled")||this.hasAttribute("name")||this.hasAttribute("minlength")||this.hasAttribute("maxlength")||this.hasAttribute("min")||this.hasAttribute("max")||this.hasAttribute("error-message")||this.hasAttribute("custom-error")||this.hasAttribute("validate")}render(){const t=this.getType(),e=this.getLabel(),a=this.getPlaceholder(),
|
|
11
|
+
`}}customElements.define("ui-button",$);class A extends f{constructor(){super();h(this,"inputEl",null);h(this,"customValidator",null);h(this,"validationRule",null);this.state={value:"",valid:!0,touched:!1,error:""}}static get observedAttributes(){return["type","label","placeholder","required","pattern","minlength","maxlength","min","max","error-message","custom-error","disabled","name","validate"]}connectedCallback(){this.setAttribute("data-ui","input"),super.connectedCallback()}attributeChangedCallback(t,e,a){e!==a&&t!=="value"&&this.render()}setCustomValidator(t){this.customValidator=t,this.validate()}get value(){return this.state.value}set value(t){this.state.value=t,this.inputEl&&this.inputEl.value!==t&&(this.inputEl.value=t),this.validate()}get isValid(){return this.state.valid}checkValidity(){return this.state.touched=!0,this.validate()}reportValidity(){this.state.touched=!0;const t=this.validate();return this.updateErrorDisplay(),!t&&this.inputEl&&this.inputEl.focus(),t}getType(){const t=this.getAttribute("type");return["text","email","password","number","tel","url"].includes(t||"")?t:"text"}getLabel(){return this.getAttribute("label")||""}getPlaceholder(){return this.getAttribute("placeholder")||""}getName(){return this.getAttribute("name")||""}getErrorMessage(){return this.state.error?this.state.error:this.getAttribute("error-message")||this.getAttribute("custom-error")||""}getCustomError(){return this.getAttribute("custom-error")||""}parseValidationRule(t){return t.startsWith("email:")?{type:"emailDomain",domain:t.slice(6)}:t.startsWith("match:")?{type:"match",selector:t.slice(6)}:t.startsWith("min:")?{type:"minLength",length:parseInt(t.slice(4),10)}:t.startsWith("max:")?{type:"maxLength",length:parseInt(t.slice(4),10)}:t.startsWith("regex:")?{type:"regex",pattern:t.slice(6)}:null}applyValidationRule(t){const e=this.state.value;switch(t.type){case"emailDomain":if(!e.endsWith(`@${t.domain}`))return{valid:!1,message:`Must end with @${t.domain}`};break;case"match":const a=document.querySelector(t.selector);if(a&&e!==a.value)return{valid:!1,message:"Values do not match"};break;case"minLength":if(e.length<t.length)return{valid:!1,message:`Must be at least ${t.length} characters`};break;case"maxLength":if(e.length>t.length)return{valid:!1,message:`Must be no more than ${t.length} characters`};break;case"regex":try{if(!new RegExp(t.pattern).test(e))return{valid:!1,message:"Invalid format"}}catch{return{valid:!1,message:"Invalid validation pattern"}}break}return{valid:!0}}validate(){if(!this.inputEl)return!0;const t=this.getAttribute("validate");if(t&&(this.validationRule||(this.validationRule=this.parseValidationRule(t)),this.validationRule)){const e=this.applyValidationRule(this.validationRule);return this.state.valid=e.valid,!e.valid&&e.message&&(this.state.error=e.message),this.state.valid}if(this.customValidator){const e=this.customValidator(this.state.value,this.inputEl);this.state.valid=e.valid,!e.valid&&e.message&&(this.state.error=e.message)}else{const e=this.inputEl.checkValidity();this.state.valid=e,!e&&this.state.touched&&(this.state.error=this.inputEl.validationMessage||this.getErrorMessage()),e&&(this.state.error="")}return this.state.valid}handleInput(t){const e=t.target;this.state.value=e.value,this.state.touched=!0,this.validate(),this.updateErrorDisplay()}handleBlur(){this.state.touched=!0,this.validate(),this.updateErrorDisplay()}updateErrorDisplay(){if(!this.inputEl)return;const t=this.shadowRoot.querySelector(".input-error"),e=this.shadowRoot.querySelector(".input-wrapper"),a=this.getName();e&&e.classList.toggle("invalid",!this.state.valid&&this.state.touched),t&&(!this.state.valid&&this.state.touched&&this.state.error?(t.textContent=this.state.error,t.classList.remove("hidden")):t.classList.add("hidden")),this.inputEl.setAttribute("aria-invalid",String(!this.state.valid&&this.state.touched)),a&&this.inputEl.setAttribute("aria-describedby",`${a}-error`)}needsRender(){return this.hasAttribute("type")||this.hasAttribute("label")||this.hasAttribute("placeholder")||this.hasAttribute("required")||this.hasAttribute("pattern")||this.hasAttribute("disabled")||this.hasAttribute("name")||this.hasAttribute("minlength")||this.hasAttribute("maxlength")||this.hasAttribute("min")||this.hasAttribute("max")||this.hasAttribute("error-message")||this.hasAttribute("custom-error")||this.hasAttribute("validate")}render(){const t=this.getType(),e=this.getLabel(),a=this.getPlaceholder(),i=this.getName(),n=this.getErrorMessage(),s=this.hasAttribute("required"),o=this.getAttribute("pattern"),c=this.getAttribute("minlength"),d=this.getAttribute("maxlength"),b=this.getAttribute("min"),p=this.getAttribute("max"),g=this.hasAttribute("disabled"),x=!this.state.valid&&this.state.touched,k=e!=="";this.shadowRoot.innerHTML=`
|
|
12
12
|
<style>${m}</style>
|
|
13
13
|
<div class="input-wrapper${x?" invalid":""}${g?" disabled":""}">
|
|
14
|
-
${
|
|
14
|
+
${k?`<label class="input-label">${e}${s?" *":""}</label>`:""}
|
|
15
15
|
<input
|
|
16
16
|
part="input"
|
|
17
17
|
class="input-field"
|
|
18
18
|
type="${t}"
|
|
19
19
|
placeholder="${a}"
|
|
20
|
-
name="${
|
|
20
|
+
name="${i}"
|
|
21
21
|
.value="${this.state.value}"
|
|
22
|
-
${
|
|
22
|
+
${s?"required":""}
|
|
23
23
|
${o?`pattern="${o}"`:""}
|
|
24
24
|
${c?`minlength="${c}"`:""}
|
|
25
25
|
${d?`maxlength="${d}"`:""}
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
${p?`max="${p}"`:""}
|
|
28
28
|
${g?"disabled":""}
|
|
29
29
|
aria-invalid="${x}"
|
|
30
|
-
aria-describedby="${
|
|
30
|
+
aria-describedby="${i}-error"
|
|
31
31
|
/>
|
|
32
|
-
<span class="input-error${x&&n?"":" hidden"}" id="${
|
|
32
|
+
<span class="input-error${x&&n?"":" hidden"}" id="${i}-error" role="alert">${n}</span>
|
|
33
33
|
</div>
|
|
34
|
-
`,this.inputEl=this.shadowRoot.querySelector(".input-field"),this.inputEl&&(this.inputEl.addEventListener("input",this.handleInput.bind(this)),this.inputEl.addEventListener("blur",this.handleBlur.bind(this)))}}customElements.define("ui-input",A);class C extends f{constructor(){super(...arguments);h(this,"columns",[]);h(this,"rows",[])}connectedCallback(){this.setAttribute("data-ui","table"),super.connectedCallback()}set data(t){this.columns=t.columns,this.rows=t.rows,this.render()}get data(){return{columns:this.columns,rows:this.rows}}render(){const t=this.columns.filter(
|
|
35
|
-
${
|
|
36
|
-
${
|
|
37
|
-
</td>`:`<td class="align-${
|
|
34
|
+
`,this.inputEl=this.shadowRoot.querySelector(".input-field"),this.inputEl&&(this.inputEl.addEventListener("input",this.handleInput.bind(this)),this.inputEl.addEventListener("blur",this.handleBlur.bind(this)))}}customElements.define("ui-input",A);class C extends f{constructor(){super(...arguments);h(this,"columns",[]);h(this,"rows",[])}connectedCallback(){this.setAttribute("data-ui","table"),super.connectedCallback()}set data(t){this.columns=t.columns,this.rows=t.rows,this.render()}get data(){return{columns:this.columns,rows:this.rows}}render(){const t=this.columns.filter(i=>i.visible!==!1),e=t.map(i=>`<th class="align-${i.align??"left"}">${i.label}</th>`).join(""),a=this.rows.map((i,n)=>`<tr data-row-index="${n}">${t.map(s=>s.actions?`<td class="align-center actions-cell">
|
|
35
|
+
${s.actions.edit?`<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${n}">Edit</ui-button>`:""}
|
|
36
|
+
${s.actions.delete?`<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${n}">Delete</ui-button>`:""}
|
|
37
|
+
</td>`:`<td class="align-${s.align??"left"}">${String(i[s.key]??"")}</td>`).join("")}</tr>`).join("");this.shadowRoot.innerHTML=`
|
|
38
38
|
<style>${m}</style>
|
|
39
39
|
<div class="table-wrap">
|
|
40
40
|
<table>
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
<tbody>${a}</tbody>
|
|
43
43
|
</table>
|
|
44
44
|
</div>
|
|
45
|
-
`,this.shadowRoot.querySelectorAll(".action-btn").forEach(
|
|
45
|
+
`,this.shadowRoot.querySelectorAll(".action-btn").forEach(i=>{i.addEventListener("click",n=>{const s=n.currentTarget,o=s.dataset.action,c=parseInt(s.dataset.rowIndex||"0",10),d=o==="edit"?"edit-action":"delete-action";this.dispatchEvent(new CustomEvent(d,{bubbles:!0,composed:!0,detail:{row:this.rows[c],rowIndex:c}}))})})}}customElements.define("ui-table",C);class E extends f{constructor(){super(...arguments);h(this,"inputElement",null);h(this,"isConnected",!1);h(this,"isInternalUpdate",!1);h(this,"hasRendered",!1)}connectedCallback(){this.setAttribute("data-ui","date-picker"),super.connectedCallback(),this.isConnected=!0}static get observedAttributes(){return["value","format","min","max","disabled","placeholder","label"]}attributeChangedCallback(t,e,a){if(!(!this.isConnected||e===a)){if(this.isInternalUpdate&&t==="value"){this.isInternalUpdate=!1;return}t==="value"?this.updateInputValues():this.render()}}updateInputValues(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),e=this.shadowRoot.querySelector('input[type="date"]');if(t&&e){const a=this.getValue(),i=this.getFormat(),n=this.formatDate(a,i);t.value=n,e.value=a}}getFormat(){const t=this.getAttribute("format");return t==="DD/MM/YYYY"||t==="MM/DD/YYYY"||t==="DD-MM-YYYY"||t==="MM-DD-YYYY"?t:"YYYY-MM-DD"}getValue(){return this.getAttribute("value")||""}getMin(){return this.getAttribute("min")||""}getMax(){return this.getAttribute("max")||""}getPlaceholder(){return this.getAttribute("placeholder")||this.getFormat()}getLabel(){return this.getAttribute("label")||""}isDisabled(){return this.hasAttribute("disabled")}formatDate(t,e){if(!t)return"";const a=t.split("-");if(a.length!==3)return t;const[i,n,s]=a;switch(e){case"DD/MM/YYYY":return`${s}/${n}/${i}`;case"MM/DD/YYYY":return`${n}/${s}/${i}`;case"DD-MM-YYYY":return`${s}-${n}-${i}`;case"MM-DD-YYYY":return`${n}-${s}-${i}`;case"YYYY-MM-DD":default:return t}}parseDate(t,e){if(!t)return"";let a,i,n,s;switch(e){case"DD/MM/YYYY":if(a=t.split("/"),a.length!==3)return"";[s,n,i]=a;break;case"MM/DD/YYYY":if(a=t.split("/"),a.length!==3)return"";[n,s,i]=a;break;case"DD-MM-YYYY":if(a=t.split("-"),a.length!==3)return"";[s,n,i]=a;break;case"MM-DD-YYYY":if(a=t.split("-"),a.length!==3)return"";[n,s,i]=a;break;case"YYYY-MM-DD":default:return t}return n=n.padStart(2,"0"),s=s.padStart(2,"0"),`${i}-${n}-${s}`}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),e=this.shadowRoot.querySelector('input[type="date"]'),a=this.shadowRoot.querySelector(".calendar-btn");if(!t||!e)return;const i=()=>{const n=t.value,s=this.getFormat(),o=this.parseDate(n,s);this.isValidDate(o)?(e.value=o,t.classList.remove("invalid"),this.dispatchDateChange(o)):n===""?(e.value="",t.classList.remove("invalid"),this.dispatchDateChange("")):t.classList.add("invalid")};t.addEventListener("blur",i),t.addEventListener("keydown",n=>{n.key==="Enter"&&(i(),t.blur())}),e.addEventListener("change",n=>{const o=n.target.value,c=this.getFormat(),d=this.formatDate(o,c);t.value=d,t.classList.remove("invalid"),this.dispatchDateChange(o)}),a&&a.addEventListener("click",async n=>{n.preventDefault(),n.stopPropagation(),e.style.pointerEvents="auto";try{typeof e.showPicker=="function"?e.showPicker():(e.focus(),e.click())}catch(s){console.log("Date picker error:",s),e.focus(),e.click()}finally{setTimeout(()=>{e.style.pointerEvents="none"},100)}})}isValidDate(t){if(!t)return!1;const e=new Date(t);return e instanceof Date&&!isNaN(e.getTime())}dispatchDateChange(t){const e=this.getFormat(),a=this.formatDate(t,e);this.dispatchEvent(new CustomEvent("date-change",{detail:{value:t,formattedValue:a,format:e},bubbles:!0,composed:!0})),this.isInternalUpdate=!0,this.setAttribute("value",t)}getISOValue(){return this.getValue()}getFormattedValue(){const t=this.getValue(),e=this.getFormat();return this.formatDate(t,e)}setValue(t){this.setAttribute("value",t)}clear(){this.setAttribute("value","")}render(){const t=this.getValue(),e=this.getFormat(),a=this.getMin(),i=this.getMax(),n=this.isDisabled(),s=this.getPlaceholder(),o=this.getLabel(),c=this.formatDate(t,e),d=o!=="";this.shadowRoot.innerHTML=`
|
|
46
46
|
<style>${m}</style>
|
|
47
47
|
<div class="date-picker-container">
|
|
48
48
|
${d?`<label class="date-picker-label">${o}</label>`:""}
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
class="formatted-input"
|
|
53
53
|
part="input"
|
|
54
54
|
value="${c}"
|
|
55
|
-
placeholder="${
|
|
55
|
+
placeholder="${s}"
|
|
56
56
|
${n?"disabled":""}
|
|
57
57
|
/>
|
|
58
58
|
<button
|
|
@@ -70,17 +70,17 @@
|
|
|
70
70
|
class="hidden-date-input"
|
|
71
71
|
value="${t}"
|
|
72
72
|
${a?`min="${a}"`:""}
|
|
73
|
-
${
|
|
73
|
+
${i?`max="${i}"`:""}
|
|
74
74
|
${n?"disabled":""}
|
|
75
75
|
/>
|
|
76
76
|
</div>
|
|
77
77
|
<div class="format-label">Format: ${e}</div>
|
|
78
78
|
</div>
|
|
79
|
-
`,this.attachEventListeners(),this.hasRendered=!0}}customElements.define("ui-date-picker",E);class S extends f{constructor(){super(...arguments);h(this,"_total",0);h(this,"_currentPage",1);h(this,"_pageSize",10)}connectedCallback(){this.setAttribute("data-ui","pagination"),super.connectedCallback()}static get observedAttributes(){return["total","current-page","page-size"]}attributeChangedCallback(t,e,a){switch(t){case"total":this._total=parseInt(a,10)||0;break;case"current-page":this._currentPage=parseInt(a,10)||1;break;case"page-size":this._pageSize=parseInt(a,10)||10;break}this.render()}get total(){return this._total}set total(t){this._total=t,this.setAttribute("total",String(t))}get currentPage(){return this._currentPage}set currentPage(t){this._currentPage=t,this.setAttribute("current-page",String(t))}get pageSize(){return this._pageSize}set pageSize(t){this._pageSize=t,this.setAttribute("page-size",String(t))}get totalPages(){return Math.ceil(this._total/this._pageSize)}handlePageChange(t){t<1||t>this.totalPages||t===this._currentPage||(this.currentPage=t,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:t,pageSize:this._pageSize,total:this._total,totalPages:this.totalPages},bubbles:!0,composed:!0})))}getPageNumbers(){const t=this.totalPages,e=this._currentPage;if(t<=7)return Array.from({length:t},(
|
|
79
|
+
`,this.attachEventListeners(),this.hasRendered=!0}}customElements.define("ui-date-picker",E);class S extends f{constructor(){super(...arguments);h(this,"_total",0);h(this,"_currentPage",1);h(this,"_pageSize",10)}connectedCallback(){this.setAttribute("data-ui","pagination"),super.connectedCallback()}static get observedAttributes(){return["total","current-page","page-size"]}attributeChangedCallback(t,e,a){switch(t){case"total":this._total=parseInt(a,10)||0;break;case"current-page":this._currentPage=parseInt(a,10)||1;break;case"page-size":this._pageSize=parseInt(a,10)||10;break}this.render()}get total(){return this._total}set total(t){this._total=t,this.setAttribute("total",String(t))}get currentPage(){return this._currentPage}set currentPage(t){this._currentPage=t,this.setAttribute("current-page",String(t))}get pageSize(){return this._pageSize}set pageSize(t){this._pageSize=t,this.setAttribute("page-size",String(t))}get totalPages(){return Math.ceil(this._total/this._pageSize)}handlePageChange(t){t<1||t>this.totalPages||t===this._currentPage||(this.currentPage=t,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:t,pageSize:this._pageSize,total:this._total,totalPages:this.totalPages},bubbles:!0,composed:!0})))}getPageNumbers(){const t=this.totalPages,e=this._currentPage;if(t<=7)return Array.from({length:t},(i,n)=>n+1);const a=[];return e<=3?a.push(1,2,3,4,"...",t):e>=t-2?a.push(1,"...",t-3,t-2,t-1,t):a.push(1,"...",e-1,e,e+1,"...",t),a}render(){const t=this.totalPages,e=this._currentPage,a=this.getPageNumbers(),i=(e-1)*this._pageSize+1,n=Math.min(e*this._pageSize,this._total);this.shadowRoot.innerHTML=`
|
|
80
80
|
<style>${m}</style>
|
|
81
81
|
<div class="pagination-container">
|
|
82
82
|
<div class="pagination-info">
|
|
83
|
-
${this._total>0?`Showing ${
|
|
83
|
+
${this._total>0?`Showing ${i} to ${n} of ${this._total}`:"No results"}
|
|
84
84
|
</div>
|
|
85
85
|
${t>1?`
|
|
86
86
|
<nav class="pagination" role="navigation" aria-label="Pagination">
|
|
@@ -94,14 +94,14 @@
|
|
|
94
94
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
|
95
95
|
</svg>
|
|
96
96
|
</button>
|
|
97
|
-
${a.map(
|
|
97
|
+
${a.map(s=>s==="..."?'<button class="page-btn ellipsis" disabled>...</button>':`
|
|
98
98
|
<button
|
|
99
|
-
class="page-btn ${
|
|
100
|
-
data-page="${
|
|
101
|
-
aria-label="Page ${
|
|
102
|
-
${
|
|
99
|
+
class="page-btn ${s===e?"active":""}"
|
|
100
|
+
data-page="${s}"
|
|
101
|
+
aria-label="Page ${s}"
|
|
102
|
+
${s===e?'aria-current="page"':""}
|
|
103
103
|
>
|
|
104
|
-
${
|
|
104
|
+
${s}
|
|
105
105
|
</button>
|
|
106
106
|
`).join("")}
|
|
107
107
|
<button
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
</nav>
|
|
118
118
|
`:""}
|
|
119
119
|
</div>
|
|
120
|
-
`,this.attachEventListeners()}attachEventListeners(){this.shadowRoot&&this.shadowRoot.addEventListener("click",t=>{const a=t.target.closest(".page-btn");if(!a||a.disabled)return;const
|
|
120
|
+
`,this.attachEventListeners()}attachEventListeners(){this.shadowRoot&&this.shadowRoot.addEventListener("click",t=>{const a=t.target.closest(".page-btn");if(!a||a.disabled)return;const i=a.dataset.page;if(i==="prev")this.handlePageChange(this._currentPage-1);else if(i==="next")this.handlePageChange(this._currentPage+1);else if(i){const n=parseInt(i,10);isNaN(n)||this.handlePageChange(n)}})}}customElements.define("ui-pagination",S);class L extends f{constructor(){super(...arguments);h(this,"isOpen",this.useSignal(!1))}connectedCallback(){this.setAttribute("data-ui","modal"),super.connectedCallback(),this.setupEventListeners()}static get observedAttributes(){return["open"]}attributeChangedCallback(t,e,a){t==="open"&&e!==a&&this.isOpen.set(a!==null)}setupEventListeners(){document.addEventListener("keydown",t=>{t.key==="Escape"&&this.isOpen.get()&&!this.hasAttribute("no-close-on-escape")&&this.close()})}open(){this.isOpen.set(!0),this.setAttribute("open",""),this.dispatchEvent(new CustomEvent("modal-open",{bubbles:!0,composed:!0})),document.body.style.overflow="hidden"}close(){this.isOpen.set(!1),this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,composed:!0})),document.body.style.overflow=""}handleBackdropClick(t){t.target.classList.contains("modal-backdrop")&&!this.hasAttribute("no-close-on-backdrop")&&this.close()}render(){const t=this.isOpen.get(),e=this.getAttribute("title")||"",a=this.getAttribute("size")||"md";this.shadowRoot.innerHTML=`
|
|
121
121
|
<style>
|
|
122
122
|
${m}
|
|
123
123
|
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
</style>
|
|
131
131
|
|
|
132
132
|
<div class="modal-backdrop ${t?"open":""}" part="backdrop">
|
|
133
|
-
<div class="modal-content ${a}" part="content" @click="${
|
|
133
|
+
<div class="modal-content ${a}" part="content" @click="${s=>s.stopPropagation()}">
|
|
134
134
|
${e?`
|
|
135
135
|
<div class="modal-header" part="header">
|
|
136
136
|
<h2 class="modal-title">${e}</h2>
|
|
@@ -152,11 +152,11 @@
|
|
|
152
152
|
</div>
|
|
153
153
|
</div>
|
|
154
154
|
</div>
|
|
155
|
-
`;const
|
|
155
|
+
`;const i=this.shadowRoot.querySelector(".modal-backdrop"),n=this.shadowRoot.querySelector(".modal-close");i==null||i.addEventListener("click",s=>this.handleBackdropClick(s)),n==null||n.addEventListener("click",()=>this.close())}}customElements.define("ui-modal",L);class I extends f{constructor(){super(...arguments);h(this,"isOpen",this.useSignal(!1));h(this,"selectedValue",this.useSignal(""));h(this,"searchTerm",this.useSignal(""));h(this,"options",[])}connectedCallback(){this.setAttribute("data-ui","select"),super.connectedCallback(),this.parseOptions(),this.setupClickOutside()}static get observedAttributes(){return["value","disabled","placeholder","options"]}attributeChangedCallback(t,e,a){t==="value"&&e!==a&&this.selectedValue.set(a||""),t==="options"&&e!==a&&this.parseOptions(),this.render()}parseOptions(){const t=this.getAttribute("options");if(t)try{this.options=JSON.parse(t)}catch(e){console.error("Invalid options JSON",e),this.options=[]}}setupClickOutside(){document.addEventListener("click",t=>{!t.composedPath().includes(this)&&this.isOpen.get()&&this.isOpen.set(!1)})}toggleDropdown(){this.hasAttribute("disabled")||(this.isOpen.set(!this.isOpen.get()),this.isOpen.get()||this.searchTerm.set(""))}selectOption(t){this.selectedValue.set(t),this.setAttribute("value",t),this.isOpen.set(!1),this.searchTerm.set(""),this.dispatchEvent(new CustomEvent("select-change",{bubbles:!0,composed:!0,detail:{value:t,option:this.options.find(e=>e.value===t)}}))}handleSearch(t){this.searchTerm.set(t.toLowerCase())}getFilteredOptions(){const t=this.searchTerm.get();return t?this.options.filter(e=>e.label.toLowerCase().includes(t)||e.value.toLowerCase().includes(t)):this.options}getSelectedLabel(){const t=this.selectedValue.get(),e=this.options.find(a=>a.value===t);return(e==null?void 0:e.label)||this.getAttribute("placeholder")||"Select an option"}render(){const t=this.isOpen.get(),e=this.hasAttribute("disabled"),a=this.hasAttribute("searchable"),i=this.getAttribute("label")||"",n=this.getSelectedLabel(),s=this.getFilteredOptions(),o=this.selectedValue.get()!=="";this.shadowRoot.innerHTML=`
|
|
156
156
|
<style>${m}</style>
|
|
157
157
|
|
|
158
158
|
<div class="select-container">
|
|
159
|
-
${
|
|
159
|
+
${i?`<label class="select-label">${i}</label>`:""}
|
|
160
160
|
|
|
161
161
|
<div class="select-trigger ${t?"open":""}" part="trigger" tabindex="0" ${e?"disabled":""}>
|
|
162
162
|
<span class="select-placeholder ${o?"has-selection":""}">${n}</span>
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
>
|
|
178
178
|
`:""}
|
|
179
179
|
|
|
180
|
-
${
|
|
180
|
+
${s.length>0?s.map(p=>`
|
|
181
181
|
<div
|
|
182
182
|
class="select-option ${p.value===this.selectedValue.get()?"selected":""} ${p.disabled?"disabled":""}"
|
|
183
183
|
data-value="${p.value}"
|
|
@@ -190,16 +190,16 @@
|
|
|
190
190
|
`}
|
|
191
191
|
</div>
|
|
192
192
|
</div>
|
|
193
|
-
`;const c=this.shadowRoot.querySelector(".select-trigger"),d=this.shadowRoot.querySelector(".select-search"),b=this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");c==null||c.addEventListener("click",()=>this.toggleDropdown()),c==null||c.addEventListener("keydown",p=>{(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),this.toggleDropdown())}),d==null||d.addEventListener("input",p=>{this.handleSearch(p.target.value)}),d==null||d.addEventListener("click",p=>p.stopPropagation()),b.forEach(p=>{p.addEventListener("click",()=>{const g=p.getAttribute("data-value");g&&this.selectOption(g)})})}}customElements.define("ui-select",I);class z extends f{constructor(){super(...arguments);h(this,"checked",this.useSignal(!1));h(this,"indeterminate",this.useSignal(!1))}connectedCallback(){this.setAttribute("data-ui","checkbox"),super.connectedCallback()}static get observedAttributes(){return["checked","disabled","indeterminate"]}attributeChangedCallback(t,e,a){t==="checked"&&e!==a&&this.checked.set(a!==null),t==="indeterminate"&&e!==a&&this.indeterminate.set(a!==null),this.render()}handleChange(){if(this.hasAttribute("disabled"))return;this.indeterminate.get()&&(this.indeterminate.set(!1),this.removeAttribute("indeterminate"));const t=!this.checked.get();this.checked.set(t),t?this.setAttribute("checked",""):this.removeAttribute("checked"),this.dispatchEvent(new CustomEvent("checkbox-change",{bubbles:!0,composed:!0,detail:{checked:t}}))}setChecked(t){this.checked.set(t),t?this.setAttribute("checked",""):this.removeAttribute("checked"),this.indeterminate.set(!1),this.removeAttribute("indeterminate")}setIndeterminate(t){this.indeterminate.set(t),t?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}render(){const t=this.checked.get(),e=this.indeterminate.get(),a=this.hasAttribute("disabled"),
|
|
193
|
+
`;const c=this.shadowRoot.querySelector(".select-trigger"),d=this.shadowRoot.querySelector(".select-search"),b=this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");c==null||c.addEventListener("click",()=>this.toggleDropdown()),c==null||c.addEventListener("keydown",p=>{(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),this.toggleDropdown())}),d==null||d.addEventListener("input",p=>{this.handleSearch(p.target.value)}),d==null||d.addEventListener("click",p=>p.stopPropagation()),b.forEach(p=>{p.addEventListener("click",()=>{const g=p.getAttribute("data-value");g&&this.selectOption(g)})})}}customElements.define("ui-select",I);class z extends f{constructor(){super(...arguments);h(this,"checked",this.useSignal(!1));h(this,"indeterminate",this.useSignal(!1))}connectedCallback(){this.setAttribute("data-ui","checkbox"),super.connectedCallback()}static get observedAttributes(){return["checked","disabled","indeterminate"]}attributeChangedCallback(t,e,a){t==="checked"&&e!==a&&this.checked.set(a!==null),t==="indeterminate"&&e!==a&&this.indeterminate.set(a!==null),this.render()}handleChange(){if(this.hasAttribute("disabled"))return;this.indeterminate.get()&&(this.indeterminate.set(!1),this.removeAttribute("indeterminate"));const t=!this.checked.get();this.checked.set(t),t?this.setAttribute("checked",""):this.removeAttribute("checked"),this.dispatchEvent(new CustomEvent("checkbox-change",{bubbles:!0,composed:!0,detail:{checked:t}}))}setChecked(t){this.checked.set(t),t?this.setAttribute("checked",""):this.removeAttribute("checked"),this.indeterminate.set(!1),this.removeAttribute("indeterminate")}setIndeterminate(t){this.indeterminate.set(t),t?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}render(){const t=this.checked.get(),e=this.indeterminate.get(),a=this.hasAttribute("disabled"),i=this.getAttribute("label")||"",n=this.getAttribute("size")||"md",s={sm:"size-sm",md:"size-md",lg:"size-lg"};this.shadowRoot.innerHTML=`
|
|
194
194
|
<style>${m}</style>
|
|
195
195
|
|
|
196
|
-
<label class="checkbox-container ${
|
|
196
|
+
<label class="checkbox-container ${s[n]}">
|
|
197
197
|
<input
|
|
198
198
|
type="checkbox"
|
|
199
199
|
${t?"checked":""}
|
|
200
200
|
${a?"disabled":""}
|
|
201
201
|
>
|
|
202
|
-
<div class="checkbox-box ${
|
|
202
|
+
<div class="checkbox-box ${s[n]} ${t?"checked":""} ${e?"indeterminate":""} ${a?"disabled":""}" part="checkbox">
|
|
203
203
|
<svg class="checkbox-icon check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
204
204
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
205
205
|
</svg>
|
|
@@ -207,9 +207,9 @@
|
|
|
207
207
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
208
208
|
</svg>
|
|
209
209
|
</div>
|
|
210
|
-
${
|
|
210
|
+
${i?`<span class="checkbox-label">${i}</span>`:"<slot></slot>"}
|
|
211
211
|
</label>
|
|
212
|
-
`;const o=this.shadowRoot.querySelector(".checkbox-container");o==null||o.addEventListener("click",c=>{c.preventDefault(),this.handleChange()})}}customElements.define("ui-checkbox",z);const j=':host{display:block}.tabs{background:var(--color-page-bg);border-radius:16px;box-shadow:0 1px 3px #0000000a,0 4px 12px #00000008;overflow:hidden;position:relative}.tablist{display:flex;position:relative;padding:8px;gap:4px;background:linear-gradient(180deg,#fafafa,#f5f5f5);border-bottom:1px solid rgba(0,0,0,.04)}.tab-indicator{position:absolute;bottom:8px;height:calc(100% - 16px);background:var(--color-page-bg);border-radius:10px;box-shadow:0 2px 8px #0000000f,0 1px 2px #0000000a;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}::slotted([slot="tab"]){-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:#64748b;cursor:pointer;font:600 13px/1 DM Sans,system-ui,-apple-system,sans-serif;letter-spacing:.02em;padding:10px 18px;position:relative;transition:color .2s ease;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}::slotted([slot="tab"]:hover){color:var(--color-ink)}::slotted([slot="tab"].is-active){color:var(--color-ink)}::slotted([slot="tab"]:focus-visible){outline:none}::slotted([slot="tab"]:focus-visible):after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:2px solid var(--color-primary);border-radius:8px;pointer-events:none}.panels{padding:24px 28px;min-height:200px}::slotted([slot="panel"]){animation:fadeIn .3s ease}::slotted([slot="panel"]:not(.is-active)){display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.tab-indicator{transition:none}::slotted([slot="panel"]){animation:none}}';class M extends f{constructor(){super(...arguments);h(this,"activeId",null);h(this,"indicator",null);h(this,"handleTabClick",t=>{const e=t.target;if(!e)return;const a=e.closest('[slot="tab"][data-tab]');if(!a)return;t.preventDefault();const
|
|
212
|
+
`;const o=this.shadowRoot.querySelector(".checkbox-container");o==null||o.addEventListener("click",c=>{c.preventDefault(),this.handleChange()})}}customElements.define("ui-checkbox",z);const j=':host{display:block}.tabs{background:var(--color-page-bg);border-radius:16px;box-shadow:0 1px 3px #0000000a,0 4px 12px #00000008;overflow:hidden;position:relative}.tablist{display:flex;position:relative;padding:8px;gap:4px;background:linear-gradient(180deg,#fafafa,#f5f5f5);border-bottom:1px solid rgba(0,0,0,.04)}.tab-indicator{position:absolute;bottom:8px;height:calc(100% - 16px);background:var(--color-page-bg);border-radius:10px;box-shadow:0 2px 8px #0000000f,0 1px 2px #0000000a;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}::slotted([slot="tab"]){-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:#64748b;cursor:pointer;font:600 13px/1 DM Sans,system-ui,-apple-system,sans-serif;letter-spacing:.02em;padding:10px 18px;position:relative;transition:color .2s ease;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}::slotted([slot="tab"]:hover){color:var(--color-ink)}::slotted([slot="tab"].is-active){color:var(--color-ink)}::slotted([slot="tab"]:focus-visible){outline:none}::slotted([slot="tab"]:focus-visible):after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:2px solid var(--color-primary);border-radius:8px;pointer-events:none}.panels{padding:24px 28px;min-height:200px}::slotted([slot="panel"]){animation:fadeIn .3s ease}::slotted([slot="panel"]:not(.is-active)){display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.tab-indicator{transition:none}::slotted([slot="panel"]){animation:none}}';class M extends f{constructor(){super(...arguments);h(this,"activeId",null);h(this,"indicator",null);h(this,"handleTabClick",t=>{const e=t.target;if(!e)return;const a=e.closest('[slot="tab"][data-tab]');if(!a)return;t.preventDefault();const i=a.getAttribute("data-tab");i&&this.setActive(i)})}static get observedAttributes(){return["active"]}connectedCallback(){this.setAttribute("data-ui","tabs"),super.connectedCallback(),this.addEventListener("click",this.handleTabClick)}disconnectedCallback(){this.removeEventListener("click",this.handleTabClick),super.disconnectedCallback()}attributeChangedCallback(t,e,a){t==="active"&&e!==a&&(this.activeId=a,this.syncTabs())}setActive(t){this.activeId!==t&&(this.activeId=t,this.setAttribute("active",t),this.syncTabs(),this.dispatchEvent(new CustomEvent("tab-change",{bubbles:!0,composed:!0,detail:{id:t}})))}getTabs(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector('slot[name="tab"]');return t?t.assignedElements({flatten:!0}):[]}getPanels(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector('slot[name="panel"]');return t?t.assignedElements({flatten:!0}):[]}getActiveId(t){const e=this.getAttribute("active");if(e&&t.some(i=>i.getAttribute("data-tab")===e))return e;if(this.activeId&&t.some(i=>i.getAttribute("data-tab")===this.activeId))return this.activeId;const a=t.find(i=>i.getAttribute("data-tab"));return(a==null?void 0:a.getAttribute("data-tab"))??null}syncTabs(){const t=this.getTabs(),e=this.getPanels();if(t.length===0)return;const a=this.getActiveId(t);a&&(this.activeId=a,this.getAttribute("active")!==a&&this.setAttribute("active",a),t.forEach(i=>{const n=i.getAttribute("data-tab");if(!n)return;const s=i.id||`tab-${n}`,o=n===a;i.id=s,i.setAttribute("role","tab"),i.setAttribute("aria-selected",String(o)),i.setAttribute("tabindex",o?"0":"-1"),i.classList.toggle("is-active",o)}),e.forEach(i=>{const n=i.getAttribute("data-tab");if(!n)return;const s=i.id||`panel-${n}`,o=n===a;i.id=s,i.setAttribute("role","tabpanel"),i.toggleAttribute("hidden",!o),i.classList.toggle("is-active",o);const c=t.find(d=>d.getAttribute("data-tab")===n);c&&(c.setAttribute("aria-controls",s),i.setAttribute("aria-labelledby",c.id))}),this.updateIndicator(t,a))}updateIndicator(t,e){if(!this.indicator)return;const a=t.find(o=>o.getAttribute("data-tab")===e);if(!a)return;const i=this.shadowRoot.querySelector(".tablist");if(!i)return;a.getBoundingClientRect(),i.getBoundingClientRect();const n=t.indexOf(a);let s=0;for(let o=0;o<n;o++)s+=t[o].offsetWidth;this.indicator.style.transform=`translateX(${s}px)`,this.indicator.style.width=`${a.offsetWidth}px`}render(){this.shadowRoot.innerHTML=`
|
|
213
213
|
<style>${m}${j}</style>
|
|
214
214
|
<div class="tabs">
|
|
215
215
|
<div class="tablist" role="tablist">
|
|
@@ -220,7 +220,7 @@
|
|
|
220
220
|
<slot name="panel"></slot>
|
|
221
221
|
</div>
|
|
222
222
|
</div>
|
|
223
|
-
`,this.indicator=this.shadowRoot.querySelector(".tab-indicator");const t=this.shadowRoot.querySelector('slot[name="tab"]'),e=this.shadowRoot.querySelector('slot[name="panel"]');t==null||t.addEventListener("slotchange",()=>this.syncTabs()),e==null||e.addEventListener("slotchange",()=>this.syncTabs()),requestAnimationFrame(()=>this.syncTabs())}}customElements.define("ui-tabs",M);const N=':host{display:block;--card-transition: all .3s cubic-bezier(.4, 0, .2, 1)}:host([data-ui="card"]){display:block}.card{background:#fff;padding:24px;box-sizing:border-box;width:100%;position:relative;transition:var(--card-transition);overflow:hidden}.card.rounded{border-radius:16px}.card.square{border-radius:0}.card.default{border:1px solid #e5e7eb;background:#fff}.card.elevated{border:none;background:linear-gradient(to bottom,#fff,#fafbfc)}.card.bordered{border:2px solid #e5e7eb;background:#fff}.card.ghost{border:1px dashed #d1d5db;background:transparent}.card.default:hover{border-color:#d1d5db;transform:translateY(-2px)}.card.elevated:hover{transform:translateY(-4px)}.card.bordered:hover{border-color:#9ca3af;background:#fafbfc}.card.ghost:hover{border-color:#9ca3af;background:#f9fafb80}.card.elevated:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#6366f11a,#ec48991a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}.card.elevated:hover:before{opacity:1}.card ::slotted(*:first-child){margin-top:0}.card ::slotted(*:last-child){margin-bottom:0}.card:focus-within{outline:2px solid #9ec5ff;outline-offset:2px}@media (max-width: 768px){.card{padding:20px}.card.rounded{border-radius:12px}}@media (max-width: 480px){.card{padding:16px}.card.rounded{border-radius:10px}}@media print{.card{border:1px solid #e5e7eb;box-shadow:none!important;page-break-inside:avoid}}';class T extends f{connectedCallback(){this.setAttribute("data-ui","card"),super.connectedCallback()}static get observedAttributes(){return["shadow","shadow-color","rounded","variant","elevation"]}attributeChangedCallback(){this.render()}getShadow(){return this.hasAttribute("shadow")&&this.getAttribute("shadow")!=="false"}getShadowColor(){return this.getAttribute("shadow-color")??"0, 0, 0"}getRounded(){return this.getAttribute("rounded")!=="false"}getVariant(){const
|
|
223
|
+
`,this.indicator=this.shadowRoot.querySelector(".tab-indicator");const t=this.shadowRoot.querySelector('slot[name="tab"]'),e=this.shadowRoot.querySelector('slot[name="panel"]');t==null||t.addEventListener("slotchange",()=>this.syncTabs()),e==null||e.addEventListener("slotchange",()=>this.syncTabs()),requestAnimationFrame(()=>this.syncTabs())}}customElements.define("ui-tabs",M);const N=':host{display:block;--card-transition: all .3s cubic-bezier(.4, 0, .2, 1)}:host([data-ui="card"]){display:block}.card{background:#fff;padding:24px;box-sizing:border-box;width:100%;position:relative;transition:var(--card-transition);overflow:hidden}.card.rounded{border-radius:16px}.card.square{border-radius:0}.card.default{border:1px solid #e5e7eb;background:#fff}.card.elevated{border:none;background:linear-gradient(to bottom,#fff,#fafbfc)}.card.bordered{border:2px solid #e5e7eb;background:#fff}.card.ghost{border:1px dashed #d1d5db;background:transparent}.card.default:hover{border-color:#d1d5db;transform:translateY(-2px)}.card.elevated:hover{transform:translateY(-4px)}.card.bordered:hover{border-color:#9ca3af;background:#fafbfc}.card.ghost:hover{border-color:#9ca3af;background:#f9fafb80}.card.elevated:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#6366f11a,#ec48991a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}.card.elevated:hover:before{opacity:1}.card ::slotted(*:first-child){margin-top:0}.card ::slotted(*:last-child){margin-bottom:0}.card:focus-within{outline:2px solid #9ec5ff;outline-offset:2px}@media (max-width: 768px){.card{padding:20px}.card.rounded{border-radius:12px}}@media (max-width: 480px){.card{padding:16px}.card.rounded{border-radius:10px}}@media print{.card{border:1px solid #e5e7eb;box-shadow:none!important;page-break-inside:avoid}}';class T extends f{connectedCallback(){this.setAttribute("data-ui","card"),super.connectedCallback()}static get observedAttributes(){return["shadow","shadow-color","rounded","variant","elevation"]}attributeChangedCallback(){this.render()}getShadow(){return this.hasAttribute("shadow")&&this.getAttribute("shadow")!=="false"}getShadowColor(){return this.getAttribute("shadow-color")??"0, 0, 0"}getRounded(){return this.getAttribute("rounded")!=="false"}getVariant(){const r=this.getAttribute("variant");return r==="elevated"||r==="bordered"||r==="ghost"?r:"default"}getElevation(){const r=this.getAttribute("elevation");return r==="none"||r==="sm"||r==="md"||r==="lg"||r==="xl"?r:"sm"}render(){const r=this.getShadow(),t=this.getShadowColor(),e=this.getRounded(),a=this.getVariant(),i=this.getElevation();let n="none";if(r)switch(i){case"sm":n=`0 1px 2px rgba(${t}, 0.05), 0 1px 3px rgba(${t}, 0.1)`;break;case"md":n=`0 4px 6px rgba(${t}, 0.07), 0 2px 4px rgba(${t}, 0.06)`;break;case"lg":n=`0 10px 15px rgba(${t}, 0.1), 0 4px 6px rgba(${t}, 0.05)`;break;case"xl":n=`0 20px 25px rgba(${t}, 0.15), 0 10px 10px rgba(${t}, 0.04)`;break;default:n="none"}this.shadowRoot.innerHTML=`
|
|
224
224
|
<style>
|
|
225
225
|
${m}
|
|
226
226
|
${N}
|
|
@@ -230,19 +230,19 @@
|
|
|
230
230
|
}
|
|
231
231
|
|
|
232
232
|
.card.custom-shadow:hover {
|
|
233
|
-
box-shadow: ${
|
|
233
|
+
box-shadow: ${r&&i!=="none"?n.replace(/rgba\(([^)]+), ([\d.]+)\)/g,(s,o,c)=>`rgba(${o}, ${Math.min(parseFloat(c)*1.3,.25)})`):"none"};
|
|
234
234
|
}
|
|
235
235
|
</style>
|
|
236
|
-
<div class="card ${a} ${e?"rounded":"square"} ${
|
|
236
|
+
<div class="card ${a} ${e?"rounded":"square"} ${r?"custom-shadow":"no-shadow"}">
|
|
237
237
|
<slot></slot>
|
|
238
238
|
</div>
|
|
239
|
-
`}}customElements.define("ui-card",T);const _=":host{--toast-success: #10b981;--toast-error: #ef4444;--toast-warning: #f59e0b;--toast-info: #3b82f6;--toast-bg: rgba(255, 255, 255, .95);--toast-blur: blur(12px);--toast-shadow: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);--toast-border: rgba(255, 255, 255, .3);--toast-text: #1e293b;--toast-radius: 14px;--toast-icon-size: 20px}.toast-container{position:fixed;z-index:10000;pointer-events:none;display:flex;flex-direction:column;gap:12px;max-width:420px;padding:16px}.toast-container.top-right{top:0;right:0}.toast-container.top-left{top:0;left:0}.toast-container.bottom-right{bottom:0;right:0;flex-direction:column-reverse}.toast-container.bottom-left{bottom:0;left:0;flex-direction:column-reverse}.toast-container.top-center{top:0;left:50%;transform:translate(-50%)}.toast-container.bottom-center{bottom:0;left:50%;transform:translate(-50%);flex-direction:column-reverse}.toast{pointer-events:auto;background:var(--toast-bg);backdrop-filter:var(--toast-blur);-webkit-backdrop-filter:var(--toast-blur);border:1px solid var(--toast-border);border-radius:var(--toast-radius);box-shadow:var(--toast-shadow);padding:16px 20px;min-width:300px;max-width:100%;display:flex;align-items:flex-start;gap:14px;position:relative;overflow:hidden;opacity:0;transform:translate(100px);animation:toastSlideIn .4s cubic-bezier(.16,1,.3,1) forwards}.toast.closing{animation:toastSlideOut .3s cubic-bezier(.5,0,.75,0) forwards}.toast-container.top-left .toast,.toast-container.bottom-left .toast{transform:translate(-100px);animation:toastSlideInLeft .4s cubic-bezier(.16,1,.3,1) forwards}.toast-container.top-left .toast.closing,.toast-container.bottom-left .toast.closing{animation:toastSlideOutLeft .3s cubic-bezier(.5,0,.75,0) forwards}.toast-container.top-center .toast,.toast-container.bottom-center .toast{transform:translateY(-50px);animation:toastSlideInTop .4s cubic-bezier(.16,1,.3,1) forwards}.toast-container.top-center .toast.closing,.toast-container.bottom-center .toast.closing{animation:toastSlideOutTop .3s cubic-bezier(.5,0,.75,0) forwards}.toast-icon{flex-shrink:0;width:var(--toast-icon-size);height:var(--toast-icon-size);display:flex;align-items:center;justify-content:center;margin-top:2px}.toast-icon svg{width:100%;height:100%;stroke-width:2.5}.toast.success .toast-icon{color:var(--toast-success)}.toast.error .toast-icon{color:var(--toast-error)}.toast.warning .toast-icon{color:var(--toast-warning)}.toast.info .toast-icon{color:var(--toast-info)}.toast.success:before{background:linear-gradient(135deg,var(--toast-success),rgba(16,185,129,.7))}.toast.error:before{background:linear-gradient(135deg,var(--toast-error),rgba(239,68,68,.7))}.toast.warning:before{background:linear-gradient(135deg,var(--toast-warning),rgba(245,158,11,.7))}.toast.info:before{background:linear-gradient(135deg,var(--toast-info),rgba(59,130,246,.7))}.toast-content{flex:1;min-width:0}.toast-title{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--toast-text);line-height:1.4}.toast-description{margin:0;font-size:13.5px;color:#64748b;line-height:1.5}.toast-close{flex-shrink:0;width:20px;height:20px;padding:0;border:none;background:transparent;color:#94a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;margin-top:2px}.toast-close:hover{background:#0000000d;color:var(--toast-text)}.toast-close svg{width:14px;height:14px;stroke-width:2.5}.toast-progress{position:absolute;bottom:0;left:0;height:3px;width:100%;border-radius:0 0 var(--toast-radius) var(--toast-radius);overflow:hidden;background:#0000000d}.toast-progress-bar{height:100%;width:100%;transform-origin:left;animation:toastProgress var(--duration) linear forwards}.toast.success .toast-progress-bar{background:var(--toast-success)}.toast.error .toast-progress-bar{background:var(--toast-error)}.toast.warning .toast-progress-bar{background:var(--toast-warning)}.toast.info .toast-progress-bar{background:var(--toast-info)}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(100px) scale(.95)}}@keyframes toastSlideInLeft{0%{opacity:0;transform:translate(-100px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOutLeft{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(-100px) scale(.95)}}@keyframes toastSlideInTop{0%{opacity:0;transform:translateY(-50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastSlideOutTop{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(.95)}}@keyframes toastProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-color-scheme: dark){:host{--toast-bg: rgba(30, 41, 59, .95);--toast-border: rgba(255, 255, 255, .1);--toast-text: #f1f5f9;--toast-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .2)}.toast-description{color:#94a3b8}.toast-close{color:#64748b}.toast-close:hover{background:#ffffff1a;color:var(--toast-text)}.toast-progress{background:#ffffff1a}}@media (max-width: 480px){.toast-container{max-width:calc(100vw - 32px);left:16px!important;right:16px!important;transform:none!important;padding:12px}.toast{min-width:0;width:100%}}";class R extends f{constructor(){super(...arguments);h(this,"toasts",new Map);h(this,"toastCounter",0)}connectedCallback(){this.setAttribute("data-ui","toast"),super.connectedCallback()}static get observedAttributes(){return["position"]}attributeChangedCallback(){this.render()}getPosition(){const t=this.getAttribute("position");return t==="top-left"||t==="bottom-right"||t==="bottom-left"||t==="top-center"||t==="bottom-center"?t:"top-right"}getIcon(t){var
|
|
239
|
+
`}}customElements.define("ui-card",T);const _=":host{--toast-success: #10b981;--toast-error: #ef4444;--toast-warning: #f59e0b;--toast-info: #3b82f6;--toast-bg: rgba(255, 255, 255, .95);--toast-blur: blur(12px);--toast-shadow: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);--toast-border: rgba(255, 255, 255, .3);--toast-text: #1e293b;--toast-radius: 14px;--toast-icon-size: 20px}.toast-container{position:fixed;z-index:10000;pointer-events:none;display:flex;flex-direction:column;gap:12px;max-width:420px;padding:16px}.toast-container.top-right{top:0;right:0}.toast-container.top-left{top:0;left:0}.toast-container.bottom-right{bottom:0;right:0;flex-direction:column-reverse}.toast-container.bottom-left{bottom:0;left:0;flex-direction:column-reverse}.toast-container.top-center{top:0;left:50%;transform:translate(-50%)}.toast-container.bottom-center{bottom:0;left:50%;transform:translate(-50%);flex-direction:column-reverse}.toast{pointer-events:auto;background:var(--toast-bg);backdrop-filter:var(--toast-blur);-webkit-backdrop-filter:var(--toast-blur);border:1px solid var(--toast-border);border-radius:var(--toast-radius);box-shadow:var(--toast-shadow);padding:16px 20px;min-width:300px;max-width:100%;display:flex;align-items:flex-start;gap:14px;position:relative;overflow:hidden;opacity:0;transform:translate(100px);animation:toastSlideIn .4s cubic-bezier(.16,1,.3,1) forwards}.toast.closing{animation:toastSlideOut .3s cubic-bezier(.5,0,.75,0) forwards}.toast-container.top-left .toast,.toast-container.bottom-left .toast{transform:translate(-100px);animation:toastSlideInLeft .4s cubic-bezier(.16,1,.3,1) forwards}.toast-container.top-left .toast.closing,.toast-container.bottom-left .toast.closing{animation:toastSlideOutLeft .3s cubic-bezier(.5,0,.75,0) forwards}.toast-container.top-center .toast,.toast-container.bottom-center .toast{transform:translateY(-50px);animation:toastSlideInTop .4s cubic-bezier(.16,1,.3,1) forwards}.toast-container.top-center .toast.closing,.toast-container.bottom-center .toast.closing{animation:toastSlideOutTop .3s cubic-bezier(.5,0,.75,0) forwards}.toast-icon{flex-shrink:0;width:var(--toast-icon-size);height:var(--toast-icon-size);display:flex;align-items:center;justify-content:center;margin-top:2px}.toast-icon svg{width:100%;height:100%;stroke-width:2.5}.toast.success .toast-icon{color:var(--toast-success)}.toast.error .toast-icon{color:var(--toast-error)}.toast.warning .toast-icon{color:var(--toast-warning)}.toast.info .toast-icon{color:var(--toast-info)}.toast.success:before{background:linear-gradient(135deg,var(--toast-success),rgba(16,185,129,.7))}.toast.error:before{background:linear-gradient(135deg,var(--toast-error),rgba(239,68,68,.7))}.toast.warning:before{background:linear-gradient(135deg,var(--toast-warning),rgba(245,158,11,.7))}.toast.info:before{background:linear-gradient(135deg,var(--toast-info),rgba(59,130,246,.7))}.toast-content{flex:1;min-width:0}.toast-title{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--toast-text);line-height:1.4}.toast-description{margin:0;font-size:13.5px;color:#64748b;line-height:1.5}.toast-close{flex-shrink:0;width:20px;height:20px;padding:0;border:none;background:transparent;color:#94a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;margin-top:2px}.toast-close:hover{background:#0000000d;color:var(--toast-text)}.toast-close svg{width:14px;height:14px;stroke-width:2.5}.toast-progress{position:absolute;bottom:0;left:0;height:3px;width:100%;border-radius:0 0 var(--toast-radius) var(--toast-radius);overflow:hidden;background:#0000000d}.toast-progress-bar{height:100%;width:100%;transform-origin:left;animation:toastProgress var(--duration) linear forwards}.toast.success .toast-progress-bar{background:var(--toast-success)}.toast.error .toast-progress-bar{background:var(--toast-error)}.toast.warning .toast-progress-bar{background:var(--toast-warning)}.toast.info .toast-progress-bar{background:var(--toast-info)}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(100px) scale(.95)}}@keyframes toastSlideInLeft{0%{opacity:0;transform:translate(-100px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOutLeft{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(-100px) scale(.95)}}@keyframes toastSlideInTop{0%{opacity:0;transform:translateY(-50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastSlideOutTop{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(.95)}}@keyframes toastProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-color-scheme: dark){:host{--toast-bg: rgba(30, 41, 59, .95);--toast-border: rgba(255, 255, 255, .1);--toast-text: #f1f5f9;--toast-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .2)}.toast-description{color:#94a3b8}.toast-close{color:#64748b}.toast-close:hover{background:#ffffff1a;color:var(--toast-text)}.toast-progress{background:#ffffff1a}}@media (max-width: 480px){.toast-container{max-width:calc(100vw - 32px);left:16px!important;right:16px!important;transform:none!important;padding:12px}.toast{min-width:0;width:100%}}";class R extends f{constructor(){super(...arguments);h(this,"toasts",new Map);h(this,"toastCounter",0)}connectedCallback(){this.setAttribute("data-ui","toast"),super.connectedCallback()}static get observedAttributes(){return["position"]}attributeChangedCallback(){this.render()}getPosition(){const t=this.getAttribute("position");return t==="top-left"||t==="bottom-right"||t==="bottom-left"||t==="top-center"||t==="bottom-center"?t:"top-right"}getIcon(t){var i;const a={success:"check-circle",error:"x-circle",warning:"alert-triangle",info:"info"}[t];return((i=v.icons[a])==null?void 0:i.toSvg())||""}show(t){const{title:e,description:a="",type:i="info",duration:n=5e3,closable:s=!0}=t,o=`toast-${++this.toastCounter}`,c=this.getIcon(i),d=document.createElement("div");d.className=`toast ${i}`,d.setAttribute("role","alert"),d.setAttribute("aria-live","polite"),d.innerHTML=`
|
|
240
240
|
<div class="toast-icon">${c}</div>
|
|
241
241
|
<div class="toast-content">
|
|
242
242
|
<div class="toast-title">${this.escapeHtml(e)}</div>
|
|
243
243
|
${a?`<div class="toast-description">${this.escapeHtml(a)}</div>`:""}
|
|
244
244
|
</div>
|
|
245
|
-
${
|
|
245
|
+
${s?`
|
|
246
246
|
<button class="toast-close" aria-label="Close notification">
|
|
247
247
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
248
248
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
@@ -255,43 +255,43 @@
|
|
|
255
255
|
<div class="toast-progress-bar" style="--duration: ${n}ms"></div>
|
|
256
256
|
</div>
|
|
257
257
|
`:""}
|
|
258
|
-
`;const b=this.shadowRoot.querySelector(".toast-container");if(b&&b.appendChild(d),
|
|
258
|
+
`;const b=this.shadowRoot.querySelector(".toast-container");if(b&&b.appendChild(d),s){const g=d.querySelector(".toast-close");g==null||g.addEventListener("click",()=>this.dismiss(o))}let p;return n>0&&(p=window.setTimeout(()=>{this.dismiss(o)},n)),this.toasts.set(o,{element:d,timer:p}),this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0,composed:!0,detail:{id:o,...t}})),o}dismiss(t){const e=this.toasts.get(t);e&&(e.timer&&clearTimeout(e.timer),e.element.classList.add("closing"),setTimeout(()=>{e.element.remove(),this.toasts.delete(t),this.dispatchEvent(new CustomEvent("toast-dismiss",{bubbles:!0,composed:!0,detail:{id:t}}))},300))}dismissAll(){Array.from(this.toasts.keys()).forEach(e=>this.dismiss(e))}success(t,e,a){return this.show({title:t,description:e,type:"success",duration:a})}error(t,e,a){return this.show({title:t,description:e,type:"error",duration:a})}warning(t,e,a){return this.show({title:t,description:e,type:"warning",duration:a})}info(t,e,a){return this.show({title:t,description:e,type:"info",duration:a})}escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}render(){const t=this.getPosition();this.shadowRoot.innerHTML=`
|
|
259
259
|
<style>
|
|
260
260
|
${m}
|
|
261
261
|
${_}
|
|
262
262
|
</style>
|
|
263
263
|
<div class="toast-container ${t}"></div>
|
|
264
|
-
`}}customElements.define("ui-toast",R);class D extends f{constructor(){super(...arguments);h(this,"steps",[])}connectedCallback(){this.setAttribute("data-ui","stepper"),super.connectedCallback(),this.parseSteps()}static get observedAttributes(){return["steps","active","orientation","size"]}attributeChangedCallback(t,e,a){if(t==="steps"&&e!==a&&this.parseSteps(),t==="active"&&e!==a){this.render();return}this.render()}parseSteps(){const t=this.getAttribute("steps");if(!t){this.steps=[];return}try{const e=JSON.parse(t);this.steps=Array.isArray(e)?e:[]}catch(e){console.error("Invalid steps JSON",e),this.steps=[]}}getOrientation(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}getSize(){const t=this.getAttribute("size");return t==="sm"||t==="lg"?t:"md"}getActiveIndex(t){const e=parseInt(this.getAttribute("active")||"1",10);return Number.isNaN(e)||t<=0?1:Math.min(Math.max(e,1),t)}resolveState(t,e,a){return t.state?t.state:e+1<a?"complete":e+1===a?"active":"upcoming"}setActive(t){const e=this.steps.length;if(e===0)return;const a=Math.min(Math.max(t,1),e);if(a===this.getActiveIndex(e))return;this.setAttribute("active",String(a));const
|
|
264
|
+
`}}customElements.define("ui-toast",R);class D extends f{constructor(){super(...arguments);h(this,"steps",[])}connectedCallback(){this.setAttribute("data-ui","stepper"),super.connectedCallback(),this.parseSteps()}static get observedAttributes(){return["steps","active","orientation","size"]}attributeChangedCallback(t,e,a){if(t==="steps"&&e!==a&&this.parseSteps(),t==="active"&&e!==a){this.render();return}this.render()}parseSteps(){const t=this.getAttribute("steps");if(!t){this.steps=[];return}try{const e=JSON.parse(t);this.steps=Array.isArray(e)?e:[]}catch(e){console.error("Invalid steps JSON",e),this.steps=[]}}getOrientation(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}getSize(){const t=this.getAttribute("size");return t==="sm"||t==="lg"?t:"md"}getActiveIndex(t){const e=parseInt(this.getAttribute("active")||"1",10);return Number.isNaN(e)||t<=0?1:Math.min(Math.max(e,1),t)}resolveState(t,e,a){return t.state?t.state:e+1<a?"complete":e+1===a?"active":"upcoming"}setActive(t){const e=this.steps.length;if(e===0)return;const a=Math.min(Math.max(t,1),e);if(a===this.getActiveIndex(e))return;this.setAttribute("active",String(a));const i=this.steps[a-1],n=this.resolveState(i,a-1,a);this.dispatchEvent(new CustomEvent("step-change",{bubbles:!0,composed:!0,detail:{index:a,step:i,state:n}}))}escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}render(){const t=this.getOrientation(),e=this.getSize(),a=this.steps,i=a.length,n=this.getActiveIndex(i);this.shadowRoot.innerHTML=`
|
|
265
265
|
<style>${m}</style>
|
|
266
266
|
<div class="stepper-wrap">
|
|
267
|
-
${
|
|
267
|
+
${i===0?'<div class="stepper-empty">No steps configured</div>':`
|
|
268
268
|
<ol class="stepper ${t} ${e}" role="list">
|
|
269
|
-
${a.map((
|
|
269
|
+
${a.map((s,o)=>{const c=this.resolveState(s,o,n),d=c==="active",b=s.disabled?"disabled":"";return`
|
|
270
270
|
<li class="step ${c} ${b}" data-state="${c}">
|
|
271
|
-
<button class="step-trigger" data-index="${o}" ${
|
|
271
|
+
<button class="step-trigger" data-index="${o}" ${s.disabled?"disabled":""} aria-current="${d?"step":"false"}">
|
|
272
272
|
<span class="step-node">${o+1}</span>
|
|
273
273
|
<span class="step-text">
|
|
274
|
-
<span class="step-title">${this.escapeHtml(
|
|
275
|
-
${
|
|
274
|
+
<span class="step-title">${this.escapeHtml(s.title||`Step ${o+1}`)}</span>
|
|
275
|
+
${s.description?`<span class="step-desc">${this.escapeHtml(s.description)}</span>`:""}
|
|
276
276
|
</span>
|
|
277
277
|
</button>
|
|
278
|
-
${o<
|
|
278
|
+
${o<i-1?'<span class="step-connector" aria-hidden="true"></span>':""}
|
|
279
279
|
</li>
|
|
280
280
|
`}).join("")}
|
|
281
281
|
</ol>
|
|
282
282
|
`}
|
|
283
283
|
</div>
|
|
284
|
-
`,this.shadowRoot.querySelectorAll(".step-trigger").forEach(
|
|
284
|
+
`,this.shadowRoot.querySelectorAll(".step-trigger").forEach(s=>{s.addEventListener("click",()=>{const o=parseInt(s.dataset.index||"0",10);Number.isNaN(o)||this.setActive(o+1)})})}}customElements.define("ui-stepper",D);class Y extends f{constructor(){super(...arguments);h(this,"files",this.useSignal([]));h(this,"isDragging",this.useSignal(!1))}connectedCallback(){this.setAttribute("data-ui","upload"),super.connectedCallback()}static get observedAttributes(){return["accept","multiple","disabled","label","helper","name"]}attributeChangedCallback(){this.render()}get value(){return this.files.get().map(t=>t.name).join(", ")}get filesValue(){return this.files.get()}set filesValue(t){this.setFiles(t)}clear(){this.setFiles([])}isDisabled(){return this.hasAttribute("disabled")}isMultiple(){return this.hasAttribute("multiple")}getAccept(){return this.getAttribute("accept")||""}getLabel(){return this.getAttribute("label")||"Upload files"}getHelper(){return this.getAttribute("helper")||""}setFiles(t){const e=this.isMultiple()?t:t.slice(0,1);this.files.set(e),this.dispatchEvent(new CustomEvent("upload-change",{bubbles:!0,composed:!0,detail:{files:e}}))}formatSize(t){if(t<1024)return`${t} B`;const e=t/1024;return e<1024?`${e.toFixed(1)} KB`:`${(e/1024).toFixed(1)} MB`}syncInputFiles(t,e){const a=new DataTransfer;e.forEach(i=>a.items.add(i)),t.files=a.files}render(){const t=this.getAccept(),e=this.getLabel(),a=this.getHelper(),i=this.isDisabled(),n=this.isMultiple(),s=this.isDragging.get(),o=this.files.get();this.shadowRoot.innerHTML=`
|
|
285
285
|
<style>${m}</style>
|
|
286
286
|
<div class="upload">
|
|
287
287
|
${e?`<label class="upload-label">${e}</label>`:""}
|
|
288
|
-
<div class="upload-drop ${
|
|
288
|
+
<div class="upload-drop ${s?"dragging":""} ${i?"disabled":""}" part="dropzone">
|
|
289
289
|
<input
|
|
290
290
|
class="upload-input"
|
|
291
291
|
type="file"
|
|
292
292
|
${n?"multiple":""}
|
|
293
293
|
${t?`accept="${t}"`:""}
|
|
294
|
-
${
|
|
294
|
+
${i?"disabled":""}
|
|
295
295
|
>
|
|
296
296
|
<div class="upload-content">
|
|
297
297
|
<div class="upload-icon" aria-hidden="true">
|
|
@@ -307,7 +307,7 @@
|
|
|
307
307
|
${t?`Accepted: ${t}`:"Any file type supported"}
|
|
308
308
|
</div>
|
|
309
309
|
</div>
|
|
310
|
-
<button class="upload-btn" type="button" ${
|
|
310
|
+
<button class="upload-btn" type="button" ${i?"disabled":""}>Browse</button>
|
|
311
311
|
</div>
|
|
312
312
|
</div>
|
|
313
313
|
${a?`<div class="upload-helper">${a}</div>`:""}
|
|
@@ -323,19 +323,19 @@
|
|
|
323
323
|
</ul>
|
|
324
324
|
`:""}
|
|
325
325
|
</div>
|
|
326
|
-
`;const c=this.shadowRoot.querySelector(".upload-drop"),d=this.shadowRoot.querySelector(".upload-input"),b=this.shadowRoot.querySelector(".upload-btn"),p=this.shadowRoot.querySelectorAll(".upload-remove");!c||!d||(o.length?this.syncInputFiles(d,o):d.value="",c.addEventListener("dragover",g=>{
|
|
326
|
+
`;const c=this.shadowRoot.querySelector(".upload-drop"),d=this.shadowRoot.querySelector(".upload-input"),b=this.shadowRoot.querySelector(".upload-btn"),p=this.shadowRoot.querySelectorAll(".upload-remove");!c||!d||(o.length?this.syncInputFiles(d,o):d.value="",c.addEventListener("dragover",g=>{i||(g.preventDefault(),this.isDragging.set(!0))}),c.addEventListener("dragleave",()=>{this.isDragging.set(!1)}),c.addEventListener("drop",g=>{var k;if(i)return;g.preventDefault(),this.isDragging.set(!1);const x=Array.from(((k=g.dataTransfer)==null?void 0:k.files)??[]);x.length&&(this.setFiles(x),this.syncInputFiles(d,this.files.get()))}),d.addEventListener("change",()=>{const g=Array.from(d.files??[]);this.setFiles(g)}),b==null||b.addEventListener("click",()=>{i||d.click()}),p.forEach(g=>{g.addEventListener("click",()=>{const x=parseInt(g.dataset.index||"0",10),k=this.files.get().filter((it,at)=>at!==x);this.setFiles(k),this.syncInputFiles(d,k)})}))}}customElements.define("ui-upload",Y);class q extends f{connectedCallback(){this.setAttribute("data-ui","layout"),super.connectedCallback()}static get observedAttributes(){return["direction"]}attributeChangedCallback(){this.render()}getDirection(){const r=this.getAttribute("direction");return r==="horizontal"||r==="vertical"?r:"auto"}detectDirection(){const r=this.getDirection();if(r!=="auto")return r;const t=this.querySelector("ui-layout-header"),e=this.querySelector("ui-layout-footer");return this.querySelector("ui-layout-sidebar")?"horizontal":"vertical"}render(){const r=this.detectDirection()==="horizontal"?"row":"column";this.shadowRoot.innerHTML=`
|
|
327
327
|
<style>${m}</style>
|
|
328
|
-
<div class="layout-container" style="flex-direction: ${
|
|
328
|
+
<div class="layout-container" style="flex-direction: ${r}">
|
|
329
329
|
<slot></slot>
|
|
330
330
|
</div>
|
|
331
|
-
`}}class P extends f{connectedCallback(){this.setAttribute("data-ui","layout-header"),super.connectedCallback()}static get observedAttributes(){return["height"]}attributeChangedCallback(){this.render()}getHeight(){const
|
|
331
|
+
`}}class P extends f{connectedCallback(){this.setAttribute("data-ui","layout-header"),super.connectedCallback()}static get observedAttributes(){return["height"]}attributeChangedCallback(){this.render()}getHeight(){const r=this.getAttribute("height");return r&&/^\d+$/.test(r)?r+"px":r||"64px"}render(){const r=this.getHeight();this.shadowRoot.innerHTML=`
|
|
332
332
|
<style>${m}</style>
|
|
333
|
-
<header class="layout-header" style="height: ${
|
|
333
|
+
<header class="layout-header" style="height: ${r}">
|
|
334
334
|
<slot></slot>
|
|
335
335
|
</header>
|
|
336
|
-
`}}class H extends f{connectedCallback(){this.setAttribute("data-ui","layout-footer"),super.connectedCallback()}static get observedAttributes(){return["height"]}attributeChangedCallback(){this.render()}getHeight(){const
|
|
336
|
+
`}}class H extends f{connectedCallback(){this.setAttribute("data-ui","layout-footer"),super.connectedCallback()}static get observedAttributes(){return["height"]}attributeChangedCallback(){this.render()}getHeight(){const r=this.getAttribute("height");return r&&/^\d+$/.test(r)?r+"px":r||"56px"}render(){const r=this.getHeight();this.shadowRoot.innerHTML=`
|
|
337
337
|
<style>${m}</style>
|
|
338
|
-
<footer class="layout-footer" style="height: ${
|
|
338
|
+
<footer class="layout-footer" style="height: ${r}">
|
|
339
339
|
<slot></slot>
|
|
340
340
|
</footer>
|
|
341
341
|
`}}class U extends f{connectedCallback(){this.setAttribute("data-ui","layout-content"),super.connectedCallback()}render(){this.shadowRoot.innerHTML=`
|
|
@@ -359,4 +359,4 @@
|
|
|
359
359
|
</button>
|
|
360
360
|
`:""}
|
|
361
361
|
</aside>
|
|
362
|
-
`,this.attachEventListeners()}}customElements.define("ui-layout",q),customElements.define("ui-layout-header",P),customElements.define("ui-layout-footer",H),customElements.define("ui-layout-content",U),customElements.define("ui-layout-sidebar",O);class F{constructor(){h(this,"baseURL","");h(this,"defaultHeaders",{"Content-Type":"application/json"});h(this,"defaultTimeout",3e4);h(this,"interceptors",{request:{handlers:[],use:(
|
|
362
|
+
`,this.attachEventListeners()}}customElements.define("ui-layout",q),customElements.define("ui-layout-header",P),customElements.define("ui-layout-footer",H),customElements.define("ui-layout-content",U),customElements.define("ui-layout-sidebar",O);class F{constructor(){h(this,"baseURL","");h(this,"defaultHeaders",{"Content-Type":"application/json"});h(this,"defaultTimeout",3e4);h(this,"interceptors",{request:{handlers:[],use:(r,t)=>{this.interceptors.request.handlers.push({onFulfilled:r,onRejected:t})}},response:{handlers:[],use:(r,t)=>{this.interceptors.response.handlers.push({onFulfilled:r,onRejected:t})}}})}setBaseURL(r){this.baseURL=r}getBaseURL(){return this.baseURL}setDefaultHeaders(r){this.defaultHeaders={...this.defaultHeaders,...r}}setDefaultTimeout(r){this.defaultTimeout=r}async executeRequest(r,t){const e=r.startsWith("http")?r:this.baseURL+r;let a={method:"GET",headers:{...this.defaultHeaders},timeout:this.defaultTimeout,...t};for(const s of this.interceptors.request.handlers)try{a=await s.onFulfilled(a)}catch(o){if(s.onRejected)a=await s.onRejected(o);else throw o}const i=new AbortController,n=setTimeout(()=>i.abort(),a.timeout||this.defaultTimeout);try{const s={method:a.method,headers:a.headers,signal:i.signal};a.body&&a.method!=="GET"&&(s.body=(typeof a.body=="string",a.body));const o=await fetch(e,s);let c;const d=o.headers.get("content-type");d!=null&&d.includes("application/json")?c=o.ok?await o.json():null:d!=null&&d.includes("text")?c=await o.text():c=await o.blob();let b={status:o.status,statusText:o.statusText,headers:o.headers,data:c};if(!o.ok){const p=new Error(`HTTP ${o.status}: ${o.statusText}`);throw p.response=b,p.config=a,p}for(const p of this.interceptors.response.handlers)try{b=await p.onFulfilled(b)}catch(g){if(p.onRejected)b=await p.onRejected(g);else throw g}return b.data}catch(s){throw s instanceof Error&&s.name==="AbortError"?new Error(`Request timeout after ${a.timeout}ms`):s}finally{clearTimeout(n)}}async get(r,t){return this.executeRequest(r,{...t,method:"GET"})}async post(r,t,e){return this.executeRequest(r,{...e,method:"POST",body:typeof t=="string"||t instanceof FormData?t:JSON.stringify(t)})}async put(r,t,e){return this.executeRequest(r,{...e,method:"PUT",body:typeof t=="string"||t instanceof FormData?t:JSON.stringify(t)})}async patch(r,t,e){return this.executeRequest(r,{...e,method:"PATCH",body:typeof t=="string"||t instanceof FormData?t:JSON.stringify(t)})}async delete(r,t){return this.executeRequest(r,{...t,method:"DELETE"})}async head(r,t){return this.executeRequest(r,{...t,method:"HEAD"})}}const B=new F;function w(l,r){return l?l.querySelector(r):null}function W(l,r){return l?l.querySelectorAll(r):[]}function J(l,r){return l?l.querySelector(`#${r}`):null}function G(l,r,t,e,a){if(!l)return null;const i=l.querySelector(`#${r}`);return i?(i.addEventListener(t,e,a),i):null}function X(l,r){return w(l,r)}function K(l,r){return w(l,r)}function Q(l,r){return w(l,r)}const Z="input, select, textarea, ui-input, ui-select, ui-date-picker, ui-checkbox, ui-upload";function V(l){return l.getAttribute("name")||l.getAttribute("id")||""}function tt(l){const r=l.tagName.toLowerCase();if(r==="ui-checkbox")return l.hasAttribute("checked");if(r==="ui-upload"){const a=l==null?void 0:l.filesValue;return Array.isArray(a)&&a.length>0?a:[]}const t=l==null?void 0:l.value;if(typeof t=="string"&&t!=="")return t;const e=l.getAttribute("value");return e||""}function et(l,r={}){const{includeDisabled:t=!1,includeEmpty:e=!0}=r,a={},i=new Map;l.querySelectorAll('input[type="checkbox"]').forEach(s=>{const o=V(s);o&&i.set(o,(i.get(o)||0)+1)});const n=Array.from(l.querySelectorAll(Z));for(const s of n){if(!t&&(s.disabled||s.hasAttribute("disabled")))continue;const o=V(s);if(!o)continue;if(s instanceof HTMLInputElement){const d=s.type;if(d==="checkbox"){if((i.get(o)||0)>1){const p=a[o]||[];s.checked&&p.push(s.value||"on"),a[o]=p}else a[o]=s.checked;continue}if(d==="radio"){s.checked&&(a[o]=s.value);continue}if(d==="file"){const b=Array.from(s.files??[]);(e||b.length>0)&&(a[o]=b);continue}(e||s.value!=="")&&(a[o]=s.value);continue}if(s instanceof HTMLSelectElement){if(s.multiple){const d=Array.from(s.selectedOptions).map(b=>b.value);(e||d.length>0)&&(a[o]=d)}else(e||s.value!=="")&&(a[o]=s.value);continue}if(s instanceof HTMLTextAreaElement){(e||s.value!=="")&&(a[o]=s.value);continue}const c=tt(s);(e||(Array.isArray(c)?c.length>0:c!==""))&&(a[o]=c)}return a}u.HTTPClient=F,u.UIButton=$,u.UICard=T,u.UICheckbox=z,u.UIDatePicker=E,u.UIInput=A,u.UILayout=q,u.UILayoutContent=U,u.UILayoutFooter=H,u.UILayoutHeader=P,u.UILayoutSidebar=O,u.UIModal=L,u.UIPagination=S,u.UISelect=I,u.UIStepper=D,u.UITable=C,u.UITabs=M,u.UIToast=R,u.UIUpload=Y,u.addEventListenerById=G,u.getElementById=J,u.getFormValues=et,u.http=B,u.queryElement=w,u.queryElements=W,u.queryModal=Q,u.queryPagination=K,u.queryTable=X,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
|