@diniz/webcomponents 1.1.6 → 1.1.8
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 +411 -0
- package/dist/README.md +411 -0
- package/dist/button-demo-QJVH1hrf.js +227 -0
- package/dist/card-demo-Czal_vad.js +230 -0
- package/dist/date-picker-demo-Nh8Y6BQM.js +143 -0
- package/dist/form-demo-page-g2zcnZrj.js +351 -0
- package/dist/home-page-CY0gTS-z.js +468 -0
- package/dist/index-DY67xf57.js +2424 -0
- package/dist/index.d.ts +1 -0
- package/dist/layout-demo-DmPHnT5L.js +289 -0
- package/dist/modal-demo-page-B0VPM0tc.js +195 -0
- package/dist/stepper-demo-page-BBKHJEUF.js +312 -0
- package/dist/table-demo-BZcyUIS5.js +137 -0
- package/dist/tabs-demo-B4k7z8lN.js +76 -0
- package/dist/toast-demo-page-CIjro0OH.js +260 -0
- package/dist/webcomponents.es.js +31 -1912
- package/dist/webcomponents.umd.js +2529 -105
- package/package.json +3 -2
|
@@ -1,64 +1,64 @@
|
|
|
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
|
-
<style>${
|
|
1
|
+
(function(m,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("feather-icons")):typeof define=="function"&&define.amd?define(["exports","feather-icons"],y):(m=typeof globalThis<"u"?globalThis:m||self,y(m.WebComponents={},m.feather))})(this,function(m,y){"use strict";var me=Object.defineProperty;var be=(m,y,S)=>y in m?me(m,y,{enumerable:!0,configurable:!0,writable:!0,value:S}):m[y]=S;var p=(m,y,S)=>be(m,typeof y!="symbol"?y+"":y,S);function S(d){let a=d;const t=new Set;return{get:()=>a,set:e=>{Object.is(a,e)||(a=e,t.forEach(o=>o(a)))},subscribe:e=>(t.add(e),()=>t.delete(e))}}class b extends HTMLElement{constructor(){super();p(this,"state");p(this,"signalUnsubs");this.attachShadow({mode:"open"}),this.state={},this.signalUnsubs=new Set}useSignal(t){const e=S(t),o=e.subscribe(()=>this.render());return this.signalUnsubs.add(o),e}useSignalHtml(t,e){const o=S(e),i=o.subscribe(s=>{var r;const n=(r=this.shadowRoot)==null?void 0:r.getElementById(t);n&&(n.textContent=String(s))});return this.signalUnsubs.add(i),requestAnimationFrame(()=>{var n;const s=(n=this.shadowRoot)==null?void 0:n.getElementById(t);s&&(s.textContent=String(e))}),o}setState(t){this.state={...this.state,...t},this.render()}connectedCallback(){this.render()}disconnectedCallback(){this.signalUnsubs.forEach(t=>t()),this.signalUnsubs.clear()}render(){}}const f=':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 P extends b{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 a=this.shadowRoot.querySelector("button");if(!a)return;const t=a._clickHandler;t&&a.removeEventListener("click",t);const e=o=>{const i=this.getType();if(this.hasAttribute("disabled")){o.preventDefault(),o.stopPropagation();return}if(i==="submit"){o.preventDefault(),o.stopPropagation();let n=this.closest("form");if(!n){let r=this.parentElement;for(;r;){if(r.tagName==="FORM"){n=r;break}r=r.parentElement}}if(n){const r=new Event("submit",{bubbles:!0,cancelable:!0});n.dispatchEvent(r)}}};a._clickHandler=e,a.addEventListener("click",e)}getVariant(){const a=this.getAttribute("variant");return a==="secondary"||a==="ghost"||a==="danger"?a:"primary"}getSize(){const a=this.getAttribute("size");return a==="sm"||a==="lg"?a:"md"}getType(){return this.getAttribute("type")??"button"}getIcon(){var o;const a=this.getAttribute("icon");if(!a)return null;const t=a.trim();return{html:`<span class="btn-icon">${((o=y.icons[t])==null?void 0:o.toSvg())||""}</span>`,name:t}}getIconPosition(){return this.getAttribute("icon-position")==="right"?"right":"left"}render(){const a=this.getVariant(),t=this.getSize(),e=this.hasAttribute("disabled"),o=this.getType(),i=this.getIcon(),s=this.getIconPosition(),n=i!==null,r=i?i.html:"",l=this.innerHTML.trim(),c=n&&!l;let h;n&&l?h=s==="left"?`${r}<span>${l}</span>`:`<span>${l}</span>${r}`:n?h=r:h=l,this.shadowRoot.innerHTML=`
|
|
2
|
+
<style>${f}</style>
|
|
3
3
|
<button
|
|
4
4
|
part="button"
|
|
5
|
-
class="btn ${
|
|
6
|
-
type="${
|
|
5
|
+
class="btn ${a} ${t}${n?" has-icon":""}${c?" icon-only":""}"
|
|
6
|
+
type="${o}"
|
|
7
7
|
${e?"disabled":""}
|
|
8
8
|
>
|
|
9
|
-
${
|
|
9
|
+
${h}
|
|
10
10
|
</button>
|
|
11
|
-
`}}customElements.define("ui-button"
|
|
12
|
-
<style>${
|
|
11
|
+
`}}customElements.define("ui-button",P);class Y extends b{constructor(){super();p(this,"inputEl",null);p(this,"customValidator",null);p(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,o){e!==o&&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 o=document.querySelector(t.selector);if(o&&e!==o.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"),o=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)),o&&this.inputEl.setAttribute("aria-describedby",`${o}-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(),o=this.getPlaceholder(),i=this.getName(),s=this.getErrorMessage(),n=this.hasAttribute("required"),r=this.getAttribute("pattern"),l=this.getAttribute("minlength"),c=this.getAttribute("maxlength"),h=this.getAttribute("min"),u=this.getAttribute("max"),g=this.hasAttribute("disabled"),x=!this.state.valid&&this.state.touched,w=e!=="";this.shadowRoot.innerHTML=`
|
|
12
|
+
<style>${f}</style>
|
|
13
13
|
<div class="input-wrapper${x?" invalid":""}${g?" disabled":""}">
|
|
14
|
-
${
|
|
14
|
+
${w?`<label class="input-label">${e}${n?" *":""}</label>`:""}
|
|
15
15
|
<input
|
|
16
16
|
part="input"
|
|
17
17
|
class="input-field"
|
|
18
18
|
type="${t}"
|
|
19
|
-
placeholder="${
|
|
19
|
+
placeholder="${o}"
|
|
20
20
|
name="${i}"
|
|
21
21
|
.value="${this.state.value}"
|
|
22
|
-
${
|
|
23
|
-
${
|
|
24
|
-
${
|
|
25
|
-
${
|
|
26
|
-
${
|
|
27
|
-
${
|
|
22
|
+
${n?"required":""}
|
|
23
|
+
${r?`pattern="${r}"`:""}
|
|
24
|
+
${l?`minlength="${l}"`:""}
|
|
25
|
+
${c?`maxlength="${c}"`:""}
|
|
26
|
+
${h?`min="${h}"`:""}
|
|
27
|
+
${u?`max="${u}"`:""}
|
|
28
28
|
${g?"disabled":""}
|
|
29
29
|
aria-invalid="${x}"
|
|
30
30
|
aria-describedby="${i}-error"
|
|
31
31
|
/>
|
|
32
|
-
<span class="input-error${x&&
|
|
32
|
+
<span class="input-error${x&&s?"":" hidden"}" id="${i}-error" role="alert">${s}</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",
|
|
35
|
-
${
|
|
36
|
-
${
|
|
37
|
-
</td>`:`<td class="align-${
|
|
38
|
-
<style>${
|
|
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",Y);class q extends b{constructor(){super(...arguments);p(this,"columns",[]);p(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(""),o=this.rows.map((i,s)=>`<tr data-row-index="${s}">${t.map(n=>n.actions?`<td class="align-center actions-cell">
|
|
35
|
+
${n.actions.edit?`<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${s}">Edit</ui-button>`:""}
|
|
36
|
+
${n.actions.delete?`<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${s}">Delete</ui-button>`:""}
|
|
37
|
+
</td>`:`<td class="align-${n.align??"left"}">${String(i[n.key]??"")}</td>`).join("")}</tr>`).join("");this.shadowRoot.innerHTML=`
|
|
38
|
+
<style>${f}</style>
|
|
39
39
|
<div class="table-wrap">
|
|
40
40
|
<table>
|
|
41
41
|
<thead><tr>${e}</tr></thead>
|
|
42
|
-
<tbody>${
|
|
42
|
+
<tbody>${o}</tbody>
|
|
43
43
|
</table>
|
|
44
44
|
</div>
|
|
45
|
-
`,this.shadowRoot.querySelectorAll(".action-btn").forEach(i=>{i.addEventListener("click",
|
|
46
|
-
<style>${
|
|
45
|
+
`,this.shadowRoot.querySelectorAll(".action-btn").forEach(i=>{i.addEventListener("click",s=>{const n=s.currentTarget,r=n.dataset.action,l=parseInt(n.dataset.rowIndex||"0",10),c=r==="edit"?"edit-action":"delete-action";this.dispatchEvent(new CustomEvent(c,{bubbles:!0,composed:!0,detail:{row:this.rows[l],rowIndex:l}}))})})}}customElements.define("ui-table",q);class B extends b{constructor(){super(...arguments);p(this,"inputElement",null);p(this,"isComponentConnected",!1);p(this,"isInternalUpdate",!1);p(this,"hasRendered",!1)}connectedCallback(){this.setAttribute("data-ui","date-picker"),super.connectedCallback(),this.isComponentConnected=!0}static get observedAttributes(){return["value","format","min","max","disabled","placeholder","label"]}attributeChangedCallback(t,e,o){if(!(!this.isComponentConnected||e===o)){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 o=this.getValue(),i=this.getFormat(),s=this.formatDate(o,i);t.value=s,e.value=o}}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 o=t.split("-");if(o.length!==3)return t;const[i,s,n]=o;switch(e){case"DD/MM/YYYY":return`${n}/${s}/${i}`;case"MM/DD/YYYY":return`${s}/${n}/${i}`;case"DD-MM-YYYY":return`${n}-${s}-${i}`;case"MM-DD-YYYY":return`${s}-${n}-${i}`;case"YYYY-MM-DD":default:return t}}parseDate(t,e){if(!t)return"";let o,i,s,n;switch(e){case"DD/MM/YYYY":if(o=t.split("/"),o.length!==3)return"";[n,s,i]=o;break;case"MM/DD/YYYY":if(o=t.split("/"),o.length!==3)return"";[s,n,i]=o;break;case"DD-MM-YYYY":if(o=t.split("-"),o.length!==3)return"";[n,s,i]=o;break;case"MM-DD-YYYY":if(o=t.split("-"),o.length!==3)return"";[s,n,i]=o;break;case"YYYY-MM-DD":default:return t}return s=s.padStart(2,"0"),n=n.padStart(2,"0"),`${i}-${s}-${n}`}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),e=this.shadowRoot.querySelector('input[type="date"]'),o=this.shadowRoot.querySelector(".calendar-btn");if(!t||!e)return;const i=()=>{const s=t.value,n=this.getFormat(),r=this.parseDate(s,n);this.isValidDate(r)?(e.value=r,t.classList.remove("invalid"),this.dispatchDateChange(r)):s===""?(e.value="",t.classList.remove("invalid"),this.dispatchDateChange("")):t.classList.add("invalid")};t.addEventListener("blur",i),t.addEventListener("keydown",s=>{s.key==="Enter"&&(i(),t.blur())}),e.addEventListener("change",s=>{const r=s.target.value,l=this.getFormat(),c=this.formatDate(r,l);t.value=c,t.classList.remove("invalid"),this.dispatchDateChange(r)}),o&&o.addEventListener("click",async s=>{s.preventDefault(),s.stopPropagation(),e.style.pointerEvents="auto";try{typeof e.showPicker=="function"?e.showPicker():(e.focus(),e.click())}catch(n){console.log("Date picker error:",n),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(),o=this.formatDate(t,e);this.dispatchEvent(new CustomEvent("date-change",{detail:{value:t,formattedValue:o,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(),o=this.getMin(),i=this.getMax(),s=this.isDisabled(),n=this.getPlaceholder(),r=this.getLabel(),l=this.formatDate(t,e),c=r!=="";this.shadowRoot.innerHTML=`
|
|
46
|
+
<style>${f}</style>
|
|
47
47
|
<div class="date-picker-container">
|
|
48
|
-
${
|
|
49
|
-
<div class="date-input-wrapper ${
|
|
48
|
+
${c?`<label class="date-picker-label">${r}</label>`:""}
|
|
49
|
+
<div class="date-input-wrapper ${s?"disabled":""}">
|
|
50
50
|
<input
|
|
51
51
|
type="text"
|
|
52
52
|
class="formatted-input"
|
|
53
53
|
part="input"
|
|
54
|
-
value="${
|
|
55
|
-
placeholder="${
|
|
56
|
-
${
|
|
54
|
+
value="${l}"
|
|
55
|
+
placeholder="${n}"
|
|
56
|
+
${s?"disabled":""}
|
|
57
57
|
/>
|
|
58
58
|
<button
|
|
59
59
|
class="calendar-btn"
|
|
60
60
|
type="button"
|
|
61
|
-
${
|
|
61
|
+
${s?"disabled":""}
|
|
62
62
|
title="Open calendar"
|
|
63
63
|
>
|
|
64
64
|
<svg class="calendar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
@@ -69,18 +69,18 @@
|
|
|
69
69
|
type="date"
|
|
70
70
|
class="hidden-date-input"
|
|
71
71
|
value="${t}"
|
|
72
|
-
${
|
|
72
|
+
${o?`min="${o}"`:""}
|
|
73
73
|
${i?`max="${i}"`:""}
|
|
74
|
-
${
|
|
74
|
+
${s?"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",
|
|
80
|
-
<style>${
|
|
79
|
+
`,this.attachEventListeners(),this.hasRendered=!0}}customElements.define("ui-date-picker",B);class O extends b{constructor(){super(...arguments);p(this,"_total",0);p(this,"_currentPage",1);p(this,"_pageSize",10)}connectedCallback(){this.setAttribute("data-ui","pagination"),super.connectedCallback()}static get observedAttributes(){return["total","current-page","page-size"]}attributeChangedCallback(t,e,o){switch(t){case"total":this._total=parseInt(o,10)||0;break;case"current-page":this._currentPage=parseInt(o,10)||1;break;case"page-size":this._pageSize=parseInt(o,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,s)=>s+1);const o=[];return e<=3?o.push(1,2,3,4,"...",t):e>=t-2?o.push(1,"...",t-3,t-2,t-1,t):o.push(1,"...",e-1,e,e+1,"...",t),o}render(){const t=this.totalPages,e=this._currentPage,o=this.getPageNumbers(),i=(e-1)*this._pageSize+1,s=Math.min(e*this._pageSize,this._total);this.shadowRoot.innerHTML=`
|
|
80
|
+
<style>${f}</style>
|
|
81
81
|
<div class="pagination-container">
|
|
82
82
|
<div class="pagination-info">
|
|
83
|
-
${this._total>0?`Showing ${i} to ${
|
|
83
|
+
${this._total>0?`Showing ${i} to ${s} 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
|
-
${
|
|
97
|
+
${o.map(n=>n==="..."?'<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 ${n===e?"active":""}"
|
|
100
|
+
data-page="${n}"
|
|
101
|
+
aria-label="Page ${n}"
|
|
102
|
+
${n===e?'aria-current="page"':""}
|
|
103
103
|
>
|
|
104
|
-
${
|
|
104
|
+
${n}
|
|
105
105
|
</button>
|
|
106
106
|
`).join("")}
|
|
107
107
|
<button
|
|
@@ -117,9 +117,9 @@
|
|
|
117
117
|
</nav>
|
|
118
118
|
`:""}
|
|
119
119
|
</div>
|
|
120
|
-
`,this.attachEventListeners()}attachEventListeners(){this.shadowRoot&&this.shadowRoot.addEventListener("click",t=>{const
|
|
120
|
+
`,this.attachEventListeners()}attachEventListeners(){this.shadowRoot&&this.shadowRoot.addEventListener("click",t=>{const o=t.target.closest(".page-btn");if(!o||o.disabled)return;const i=o.dataset.page;if(i==="prev")this.handlePageChange(this._currentPage-1);else if(i==="next")this.handlePageChange(this._currentPage+1);else if(i){const s=parseInt(i,10);isNaN(s)||this.handlePageChange(s)}})}}customElements.define("ui-pagination",O);class F extends b{constructor(){super(...arguments);p(this,"isOpen",this.useSignal(!1))}connectedCallback(){this.setAttribute("data-ui","modal"),super.connectedCallback(),this.setupEventListeners()}static get observedAttributes(){return["open"]}attributeChangedCallback(t,e,o){t==="open"&&e!==o&&this.isOpen.set(o!==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")||"",o=this.getAttribute("size")||"md";this.shadowRoot.innerHTML=`
|
|
121
121
|
<style>
|
|
122
|
-
${
|
|
122
|
+
${f}
|
|
123
123
|
|
|
124
124
|
::slotted([slot="footer"]) {
|
|
125
125
|
display: flex;
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
</style>
|
|
131
131
|
|
|
132
132
|
<div class="modal-backdrop ${t?"open":""}" part="backdrop">
|
|
133
|
-
<div class="modal-content ${
|
|
133
|
+
<div class="modal-content ${o}" part="content" @click="${n=>n.stopPropagation()}">
|
|
134
134
|
${e?`
|
|
135
135
|
<div class="modal-header" part="header">
|
|
136
136
|
<h2 class="modal-title">${e}</h2>
|
|
@@ -152,14 +152,14 @@
|
|
|
152
152
|
</div>
|
|
153
153
|
</div>
|
|
154
154
|
</div>
|
|
155
|
-
`;const i=this.shadowRoot.querySelector(".modal-backdrop"),
|
|
156
|
-
<style>${
|
|
155
|
+
`;const i=this.shadowRoot.querySelector(".modal-backdrop"),s=this.shadowRoot.querySelector(".modal-close");i==null||i.addEventListener("click",n=>this.handleBackdropClick(n)),s==null||s.addEventListener("click",()=>this.close())}}customElements.define("ui-modal",F);class H extends b{constructor(){super(...arguments);p(this,"isOpen",this.useSignal(!1));p(this,"selectedValue",this.useSignal(""));p(this,"searchTerm",this.useSignal(""));p(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,o){t==="value"&&e!==o&&this.selectedValue.set(o||""),t==="options"&&e!==o&&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(o=>o.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"),o=this.hasAttribute("searchable"),i=this.getAttribute("label")||"",s=this.getSelectedLabel(),n=this.getFilteredOptions(),r=this.selectedValue.get()!=="";this.shadowRoot.innerHTML=`
|
|
156
|
+
<style>${f}</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
|
-
<span class="select-placeholder ${
|
|
162
|
+
<span class="select-placeholder ${r?"has-selection":""}">${s}</span>
|
|
163
163
|
<span class="select-arrow ${t?"open":""}">
|
|
164
164
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
165
165
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
</div>
|
|
169
169
|
|
|
170
170
|
<div class="select-dropdown ${t?"open":""}" part="dropdown">
|
|
171
|
-
${
|
|
171
|
+
${o?`
|
|
172
172
|
<input
|
|
173
173
|
type="text"
|
|
174
174
|
class="select-search"
|
|
@@ -177,29 +177,29 @@
|
|
|
177
177
|
>
|
|
178
178
|
`:""}
|
|
179
179
|
|
|
180
|
-
${
|
|
180
|
+
${n.length>0?n.map(u=>`
|
|
181
181
|
<div
|
|
182
|
-
class="select-option ${
|
|
183
|
-
data-value="${
|
|
182
|
+
class="select-option ${u.value===this.selectedValue.get()?"selected":""} ${u.disabled?"disabled":""}"
|
|
183
|
+
data-value="${u.value}"
|
|
184
184
|
part="option"
|
|
185
185
|
>
|
|
186
|
-
${
|
|
186
|
+
${u.label}
|
|
187
187
|
</div>
|
|
188
188
|
`).join(""):`
|
|
189
189
|
<div class="select-empty">No options found</div>
|
|
190
190
|
`}
|
|
191
191
|
</div>
|
|
192
192
|
</div>
|
|
193
|
-
`;const
|
|
194
|
-
<style>${
|
|
193
|
+
`;const l=this.shadowRoot.querySelector(".select-trigger"),c=this.shadowRoot.querySelector(".select-search"),h=this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");l==null||l.addEventListener("click",()=>this.toggleDropdown()),l==null||l.addEventListener("keydown",u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.toggleDropdown())}),c==null||c.addEventListener("input",u=>{this.handleSearch(u.target.value)}),c==null||c.addEventListener("click",u=>u.stopPropagation()),h.forEach(u=>{u.addEventListener("click",()=>{const g=u.getAttribute("data-value");g&&this.selectOption(g)})})}}customElements.define("ui-select",H);class j extends b{constructor(){super(...arguments);p(this,"checked",this.useSignal(!1));p(this,"indeterminate",this.useSignal(!1))}connectedCallback(){this.setAttribute("data-ui","checkbox"),super.connectedCallback()}static get observedAttributes(){return["checked","disabled","indeterminate"]}attributeChangedCallback(t,e,o){t==="checked"&&e!==o&&this.checked.set(o!==null),t==="indeterminate"&&e!==o&&this.indeterminate.set(o!==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(),o=this.hasAttribute("disabled"),i=this.getAttribute("label")||"",s=this.getAttribute("size")||"md",n={sm:"size-sm",md:"size-md",lg:"size-lg"};this.shadowRoot.innerHTML=`
|
|
194
|
+
<style>${f}</style>
|
|
195
195
|
|
|
196
|
-
<label class="checkbox-container ${s
|
|
196
|
+
<label class="checkbox-container ${n[s]}">
|
|
197
197
|
<input
|
|
198
198
|
type="checkbox"
|
|
199
199
|
${t?"checked":""}
|
|
200
|
-
${
|
|
200
|
+
${o?"disabled":""}
|
|
201
201
|
>
|
|
202
|
-
<div class="checkbox-box ${s
|
|
202
|
+
<div class="checkbox-box ${n[s]} ${t?"checked":""} ${e?"indeterminate":""} ${o?"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>
|
|
@@ -209,8 +209,8 @@
|
|
|
209
209
|
</div>
|
|
210
210
|
${i?`<span class="checkbox-label">${i}</span>`:"<slot></slot>"}
|
|
211
211
|
</label>
|
|
212
|
-
`;const
|
|
213
|
-
<style>${
|
|
212
|
+
`;const r=this.shadowRoot.querySelector(".checkbox-container");r==null||r.addEventListener("click",l=>{l.preventDefault(),this.handleChange()})}}customElements.define("ui-checkbox",j);const pt=':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 _ extends b{constructor(){super(...arguments);p(this,"activeId",null);p(this,"indicator",null);p(this,"handleTabClick",t=>{const e=t.target;if(!e)return;const o=e.closest('[slot="tab"][data-tab]');if(!o)return;t.preventDefault();const i=o.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,o){t==="active"&&e!==o&&(this.activeId=o,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 o=t.find(i=>i.getAttribute("data-tab"));return(o==null?void 0:o.getAttribute("data-tab"))??null}syncTabs(){const t=this.getTabs(),e=this.getPanels();if(t.length===0)return;const o=this.getActiveId(t);o&&(this.activeId=o,this.getAttribute("active")!==o&&this.setAttribute("active",o),t.forEach(i=>{const s=i.getAttribute("data-tab");if(!s)return;const n=i.id||`tab-${s}`,r=s===o;i.id=n,i.setAttribute("role","tab"),i.setAttribute("aria-selected",String(r)),i.setAttribute("tabindex",r?"0":"-1"),i.classList.toggle("is-active",r)}),e.forEach(i=>{const s=i.getAttribute("data-tab");if(!s)return;const n=i.id||`panel-${s}`,r=s===o;i.id=n,i.setAttribute("role","tabpanel"),i.toggleAttribute("hidden",!r),i.classList.toggle("is-active",r);const l=t.find(c=>c.getAttribute("data-tab")===s);l&&(l.setAttribute("aria-controls",n),i.setAttribute("aria-labelledby",l.id))}),this.updateIndicator(t,o))}updateIndicator(t,e){if(!this.indicator)return;const o=t.find(r=>r.getAttribute("data-tab")===e);if(!o)return;const i=this.shadowRoot.querySelector(".tablist");if(!i)return;o.getBoundingClientRect(),i.getBoundingClientRect();const s=t.indexOf(o);let n=0;for(let r=0;r<s;r++)n+=t[r].offsetWidth;this.indicator.style.transform=`translateX(${n}px)`,this.indicator.style.width=`${o.offsetWidth}px`}render(){this.shadowRoot.innerHTML=`
|
|
213
|
+
<style>${f}${pt}</style>
|
|
214
214
|
<div class="tabs">
|
|
215
215
|
<div class="tablist" role="tablist">
|
|
216
216
|
<div class="tab-indicator"></div>
|
|
@@ -220,29 +220,29 @@
|
|
|
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",
|
|
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",_);const ut=':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 U extends b{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 a=this.getAttribute("variant");return a==="elevated"||a==="bordered"||a==="ghost"?a:"default"}getElevation(){const a=this.getAttribute("elevation");return a==="none"||a==="sm"||a==="md"||a==="lg"||a==="xl"?a:"sm"}render(){const a=this.getShadow(),t=this.getShadowColor(),e=this.getRounded(),o=this.getVariant(),i=this.getElevation();let s="none";if(a)switch(i){case"sm":s=`0 1px 2px rgba(${t}, 0.05), 0 1px 3px rgba(${t}, 0.1)`;break;case"md":s=`0 4px 6px rgba(${t}, 0.07), 0 2px 4px rgba(${t}, 0.06)`;break;case"lg":s=`0 10px 15px rgba(${t}, 0.1), 0 4px 6px rgba(${t}, 0.05)`;break;case"xl":s=`0 20px 25px rgba(${t}, 0.15), 0 10px 10px rgba(${t}, 0.04)`;break;default:s="none"}this.shadowRoot.innerHTML=`
|
|
224
224
|
<style>
|
|
225
|
-
${
|
|
226
|
-
${
|
|
225
|
+
${f}
|
|
226
|
+
${ut}
|
|
227
227
|
|
|
228
228
|
.card.custom-shadow {
|
|
229
|
-
box-shadow: ${
|
|
229
|
+
box-shadow: ${s};
|
|
230
230
|
}
|
|
231
231
|
|
|
232
232
|
.card.custom-shadow:hover {
|
|
233
|
-
box-shadow: ${
|
|
233
|
+
box-shadow: ${a&&i!=="none"?s.replace(/rgba\(([^)]+), ([\d.]+)\)/g,(n,r,l)=>`rgba(${r}, ${Math.min(parseFloat(l)*1.3,.25)})`):"none"};
|
|
234
234
|
}
|
|
235
235
|
</style>
|
|
236
|
-
<div class="card ${
|
|
236
|
+
<div class="card ${o} ${e?"rounded":"square"} ${a?"custom-shadow":"no-shadow"}">
|
|
237
237
|
<slot></slot>
|
|
238
238
|
</div>
|
|
239
|
-
`}}customElements.define("ui-card",
|
|
240
|
-
<div class="toast-icon">${
|
|
239
|
+
`}}customElements.define("ui-card",U);const ht=":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 N extends b{constructor(){super(...arguments);p(this,"toasts",new Map);p(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 o={success:"check-circle",error:"x-circle",warning:"alert-triangle",info:"info"}[t];return((i=y.icons[o])==null?void 0:i.toSvg())||""}show(t){const{title:e,description:o="",type:i="info",duration:s=5e3,closable:n=!0}=t,r=`toast-${++this.toastCounter}`,l=this.getIcon(i),c=document.createElement("div");c.className=`toast ${i}`,c.setAttribute("role","alert"),c.setAttribute("aria-live","polite"),c.innerHTML=`
|
|
240
|
+
<div class="toast-icon">${l}</div>
|
|
241
241
|
<div class="toast-content">
|
|
242
242
|
<div class="toast-title">${this.escapeHtml(e)}</div>
|
|
243
|
-
${
|
|
243
|
+
${o?`<div class="toast-description">${this.escapeHtml(o)}</div>`:""}
|
|
244
244
|
</div>
|
|
245
|
-
${
|
|
245
|
+
${n?`
|
|
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>
|
|
@@ -250,46 +250,46 @@
|
|
|
250
250
|
</svg>
|
|
251
251
|
</button>
|
|
252
252
|
`:""}
|
|
253
|
-
${
|
|
253
|
+
${s>0?`
|
|
254
254
|
<div class="toast-progress">
|
|
255
|
-
<div class="toast-progress-bar" style="--duration: ${
|
|
255
|
+
<div class="toast-progress-bar" style="--duration: ${s}ms"></div>
|
|
256
256
|
</div>
|
|
257
257
|
`:""}
|
|
258
|
-
`;const
|
|
258
|
+
`;const h=this.shadowRoot.querySelector(".toast-container");if(h&&h.appendChild(c),n){const g=c.querySelector(".toast-close");g==null||g.addEventListener("click",()=>this.dismiss(r))}let u;return s>0&&(u=window.setTimeout(()=>{this.dismiss(r)},s)),this.toasts.set(r,{element:c,timer:u}),this.dispatchEvent(new CustomEvent("toast-show",{bubbles:!0,composed:!0,detail:{id:r,...t}})),r}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,o){return this.show({title:t,description:e,type:"success",duration:o})}error(t,e,o){return this.show({title:t,description:e,type:"error",duration:o})}warning(t,e,o){return this.show({title:t,description:e,type:"warning",duration:o})}info(t,e,o){return this.show({title:t,description:e,type:"info",duration:o})}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
|
-
${
|
|
261
|
-
${
|
|
260
|
+
${f}
|
|
261
|
+
${ht}
|
|
262
262
|
</style>
|
|
263
263
|
<div class="toast-container ${t}"></div>
|
|
264
|
-
`}}customElements.define("ui-toast",
|
|
265
|
-
<style>${
|
|
264
|
+
`}}customElements.define("ui-toast",N);class V extends b{constructor(){super(...arguments);p(this,"steps",[])}connectedCallback(){this.setAttribute("data-ui","stepper"),super.connectedCallback(),this.parseSteps()}static get observedAttributes(){return["steps","active","orientation","size"]}attributeChangedCallback(t,e,o){if(t==="steps"&&e!==o&&this.parseSteps(),t==="active"&&e!==o){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,o){return t.state?t.state:e+1<o?"complete":e+1===o?"active":"upcoming"}setActive(t){const e=this.steps.length;if(e===0)return;const o=Math.min(Math.max(t,1),e);if(o===this.getActiveIndex(e))return;this.setAttribute("active",String(o));const i=this.steps[o-1],s=this.resolveState(i,o-1,o);this.dispatchEvent(new CustomEvent("step-change",{bubbles:!0,composed:!0,detail:{index:o,step:i,state:s}}))}escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}render(){const t=this.getOrientation(),e=this.getSize(),o=this.steps,i=o.length,s=this.getActiveIndex(i);this.shadowRoot.innerHTML=`
|
|
265
|
+
<style>${f}</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
|
-
${
|
|
270
|
-
<li class="step ${
|
|
271
|
-
<button class="step-trigger" data-index="${
|
|
272
|
-
<span class="step-node">${
|
|
269
|
+
${o.map((n,r)=>{const l=this.resolveState(n,r,s),c=l==="active",h=n.disabled?"disabled":"";return`
|
|
270
|
+
<li class="step ${l} ${h}" data-state="${l}">
|
|
271
|
+
<button class="step-trigger" data-index="${r}" ${n.disabled?"disabled":""} aria-current="${c?"step":"false"}">
|
|
272
|
+
<span class="step-node">${r+1}</span>
|
|
273
273
|
<span class="step-text">
|
|
274
|
-
<span class="step-title">${this.escapeHtml(
|
|
275
|
-
${
|
|
274
|
+
<span class="step-title">${this.escapeHtml(n.title||`Step ${r+1}`)}</span>
|
|
275
|
+
${n.description?`<span class="step-desc">${this.escapeHtml(n.description)}</span>`:""}
|
|
276
276
|
</span>
|
|
277
277
|
</button>
|
|
278
|
-
${
|
|
278
|
+
${r<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(
|
|
285
|
-
<style>${
|
|
284
|
+
`,this.shadowRoot.querySelectorAll(".step-trigger").forEach(n=>{n.addEventListener("click",()=>{const r=parseInt(n.dataset.index||"0",10);Number.isNaN(r)||this.setActive(r+1)})})}}customElements.define("ui-stepper",V);class W extends b{constructor(){super(...arguments);p(this,"files",this.useSignal([]));p(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 o=new DataTransfer;e.forEach(i=>o.items.add(i)),t.files=o.files}render(){const t=this.getAccept(),e=this.getLabel(),o=this.getHelper(),i=this.isDisabled(),s=this.isMultiple(),n=this.isDragging.get(),r=this.files.get();this.shadowRoot.innerHTML=`
|
|
285
|
+
<style>${f}</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 ${n?"dragging":""} ${i?"disabled":""}" part="dropzone">
|
|
289
289
|
<input
|
|
290
290
|
class="upload-input"
|
|
291
291
|
type="file"
|
|
292
|
-
${
|
|
292
|
+
${s?"multiple":""}
|
|
293
293
|
${t?`accept="${t}"`:""}
|
|
294
294
|
${i?"disabled":""}
|
|
295
295
|
>
|
|
@@ -310,10 +310,10 @@
|
|
|
310
310
|
<button class="upload-btn" type="button" ${i?"disabled":""}>Browse</button>
|
|
311
311
|
</div>
|
|
312
312
|
</div>
|
|
313
|
-
${
|
|
314
|
-
${
|
|
313
|
+
${o?`<div class="upload-helper">${o}</div>`:""}
|
|
314
|
+
${r.length?`
|
|
315
315
|
<ul class="upload-list">
|
|
316
|
-
${
|
|
316
|
+
${r.map((g,x)=>`
|
|
317
317
|
<li>
|
|
318
318
|
<span>${g.name}</span>
|
|
319
319
|
<span class="upload-meta">${this.formatSize(g.size)}</span>
|
|
@@ -323,34 +323,34 @@
|
|
|
323
323
|
</ul>
|
|
324
324
|
`:""}
|
|
325
325
|
</div>
|
|
326
|
-
`;const
|
|
327
|
-
<style>${
|
|
328
|
-
<div class="layout-container" style="flex-direction: ${
|
|
326
|
+
`;const l=this.shadowRoot.querySelector(".upload-drop"),c=this.shadowRoot.querySelector(".upload-input"),h=this.shadowRoot.querySelector(".upload-btn"),u=this.shadowRoot.querySelectorAll(".upload-remove");!l||!c||(r.length?this.syncInputFiles(c,r):c.value="",l.addEventListener("dragover",g=>{i||(g.preventDefault(),this.isDragging.set(!0))}),l.addEventListener("dragleave",()=>{this.isDragging.set(!1)}),l.addEventListener("drop",g=>{var w;if(i)return;g.preventDefault(),this.isDragging.set(!1);const x=Array.from(((w=g.dataTransfer)==null?void 0:w.files)??[]);x.length&&(this.setFiles(x),this.syncInputFiles(c,this.files.get()))}),c.addEventListener("change",()=>{const g=Array.from(c.files??[]);this.setFiles(g)}),h==null||h.addEventListener("click",()=>{i||c.click()}),u.forEach(g=>{g.addEventListener("click",()=>{const x=parseInt(g.dataset.index||"0",10),w=this.files.get().filter((z,$)=>$!==x);this.setFiles(w),this.syncInputFiles(c,w)})}))}}customElements.define("ui-upload",W);class G extends b{connectedCallback(){this.setAttribute("data-ui","layout"),super.connectedCallback()}static get observedAttributes(){return["direction"]}attributeChangedCallback(){this.render()}getDirection(){const a=this.getAttribute("direction");return a==="horizontal"||a==="vertical"?a:"auto"}detectDirection(){const a=this.getDirection();if(a!=="auto")return a;const t=this.querySelector("ui-layout-header"),e=this.querySelector("ui-layout-footer");return this.querySelector("ui-layout-sidebar")?"horizontal":"vertical"}render(){const a=this.detectDirection()==="horizontal"?"row":"column";this.shadowRoot.innerHTML=`
|
|
327
|
+
<style>${f}</style>
|
|
328
|
+
<div class="layout-container" style="flex-direction: ${a}">
|
|
329
329
|
<slot></slot>
|
|
330
330
|
</div>
|
|
331
|
-
`}}class
|
|
332
|
-
<style>${
|
|
333
|
-
<header class="layout-header" style="height: ${
|
|
331
|
+
`}}class J extends b{connectedCallback(){this.setAttribute("data-ui","layout-header"),super.connectedCallback()}static get observedAttributes(){return["height"]}attributeChangedCallback(){this.render()}getHeight(){const a=this.getAttribute("height");return a&&/^\d+$/.test(a)?a+"px":a||"64px"}render(){const a=this.getHeight();this.shadowRoot.innerHTML=`
|
|
332
|
+
<style>${f}</style>
|
|
333
|
+
<header class="layout-header" style="height: ${a}">
|
|
334
334
|
<slot></slot>
|
|
335
335
|
</header>
|
|
336
|
-
`}}class
|
|
337
|
-
<style>${
|
|
338
|
-
<footer class="layout-footer" style="height: ${
|
|
336
|
+
`}}class Q extends b{connectedCallback(){this.setAttribute("data-ui","layout-footer"),super.connectedCallback()}static get observedAttributes(){return["height"]}attributeChangedCallback(){this.render()}getHeight(){const a=this.getAttribute("height");return a&&/^\d+$/.test(a)?a+"px":a||"56px"}render(){const a=this.getHeight();this.shadowRoot.innerHTML=`
|
|
337
|
+
<style>${f}</style>
|
|
338
|
+
<footer class="layout-footer" style="height: ${a}">
|
|
339
339
|
<slot></slot>
|
|
340
340
|
</footer>
|
|
341
|
-
`}}class
|
|
342
|
-
<style>${
|
|
341
|
+
`}}class X extends b{connectedCallback(){this.setAttribute("data-ui","layout-content"),super.connectedCallback()}render(){this.shadowRoot.innerHTML=`
|
|
342
|
+
<style>${f}</style>
|
|
343
343
|
<div class="layout-content">
|
|
344
344
|
<slot></slot>
|
|
345
345
|
</div>
|
|
346
|
-
`}}class
|
|
347
|
-
<style>${
|
|
346
|
+
`}}class K extends b{constructor(){super(...arguments);p(this,"isCollapsed",!1);p(this,"animating",!1)}connectedCallback(){this.setAttribute("data-ui","layout-sidebar"),super.connectedCallback(),this.isCollapsed=this.hasAttribute("collapsed"),this.render(),this.attachEventListeners()}static get observedAttributes(){return["collapsed","width","collapsed-width","collapsible"]}attributeChangedCallback(t){t==="collapsed"&&(this.isCollapsed=this.hasAttribute("collapsed")),this.render()}getWidth(){const t=this.getAttribute("width");return t&&/^\d+$/.test(t)?t+"px":t||"240px"}getCollapsedWidth(){const t=this.getAttribute("collapsed-width");return t&&/^\d+$/.test(t)?t+"px":t||"64px"}isCollapsible(){return this.hasAttribute("collapsible")}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".sidebar-toggle");t&&t.addEventListener("click",()=>this.toggleCollapse())}toggleCollapse(){this.animating||(this.animating=!0,this.isCollapsed=!this.isCollapsed,this.isCollapsed?this.setAttribute("collapsed",""):this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("collapsed-change",{detail:{collapsed:this.isCollapsed},bubbles:!0,composed:!0})),setTimeout(()=>{this.animating=!1},300))}render(){const t=this.getWidth(),e=this.getCollapsedWidth(),o=this.isCollapsible();o&&this.isCollapsed,this.shadowRoot.innerHTML=`
|
|
347
|
+
<style>${f}</style>
|
|
348
348
|
<aside class="layout-sidebar ${this.isCollapsed?"collapsed":""}"
|
|
349
349
|
style="--sidebar-width: ${t}; --sidebar-collapsed-width: ${e}">
|
|
350
350
|
<div class="sidebar-content">
|
|
351
351
|
<slot></slot>
|
|
352
352
|
</div>
|
|
353
|
-
${
|
|
353
|
+
${o?`
|
|
354
354
|
<button class="sidebar-toggle" title="${this.isCollapsed?"Expand":"Collapse"}">
|
|
355
355
|
<svg class="toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
356
356
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
@@ -359,4 +359,2428 @@
|
|
|
359
359
|
</button>
|
|
360
360
|
`:""}
|
|
361
361
|
</aside>
|
|
362
|
-
`,this.attachEventListeners()}}customElements.define("ui-layout",
|
|
362
|
+
`,this.attachEventListeners()}}customElements.define("ui-layout",G),customElements.define("ui-layout-header",J),customElements.define("ui-layout-footer",Q),customElements.define("ui-layout-content",X),customElements.define("ui-layout-sidebar",K);class Z{constructor(){p(this,"baseURL","");p(this,"defaultHeaders",{"Content-Type":"application/json"});p(this,"defaultTimeout",3e4);p(this,"interceptors",{request:{handlers:[],use:(a,t)=>{this.interceptors.request.handlers.push({onFulfilled:a,onRejected:t})}},response:{handlers:[],use:(a,t)=>{this.interceptors.response.handlers.push({onFulfilled:a,onRejected:t})}}})}setBaseURL(a){this.baseURL=a}getBaseURL(){return this.baseURL}setDefaultHeaders(a){this.defaultHeaders={...this.defaultHeaders,...a}}setDefaultTimeout(a){this.defaultTimeout=a}async executeRequest(a,t){const e=a.startsWith("http")?a:this.baseURL+a;let o={method:"GET",headers:{...this.defaultHeaders},timeout:this.defaultTimeout,...t};for(const n of this.interceptors.request.handlers)try{o=await n.onFulfilled(o)}catch(r){if(n.onRejected)o=await n.onRejected(r);else throw r}const i=new AbortController,s=setTimeout(()=>i.abort(),o.timeout||this.defaultTimeout);try{const n={method:o.method,headers:o.headers,signal:i.signal};o.body&&o.method!=="GET"&&(n.body=(typeof o.body=="string",o.body));const r=await fetch(e,n);let l;const c=r.headers.get("content-type");c!=null&&c.includes("application/json")?l=r.ok?await r.json():null:c!=null&&c.includes("text")?l=await r.text():l=await r.blob();let h={status:r.status,statusText:r.statusText,headers:r.headers,data:l};if(!r.ok){const u=new Error(`HTTP ${r.status}: ${r.statusText}`);throw u.response=h,u.config=o,u}for(const u of this.interceptors.response.handlers)try{h=await u.onFulfilled(h)}catch(g){if(u.onRejected)h=await u.onRejected(g);else throw g}return h.data}catch(n){throw n instanceof Error&&n.name==="AbortError"?new Error(`Request timeout after ${o.timeout}ms`):n}finally{clearTimeout(s)}}async get(a,t){return this.executeRequest(a,{...t,method:"GET"})}async post(a,t,e){return this.executeRequest(a,{...e,method:"POST",body:typeof t=="string"||t instanceof FormData?t:JSON.stringify(t)})}async put(a,t,e){return this.executeRequest(a,{...e,method:"PUT",body:typeof t=="string"||t instanceof FormData?t:JSON.stringify(t)})}async patch(a,t,e){return this.executeRequest(a,{...e,method:"PATCH",body:typeof t=="string"||t instanceof FormData?t:JSON.stringify(t)})}async delete(a,t){return this.executeRequest(a,{...t,method:"DELETE"})}async head(a,t){return this.executeRequest(a,{...t,method:"HEAD"})}}const D=new Z;function k(d,a){return d?d.querySelector(a):null}function mt(d,a){return d?d.querySelectorAll(a):[]}function I(d,a){return d?d.querySelector(`#${a}`):null}function v(d,a,t,e,o){if(!d)return null;const i=d.querySelector(`#${a}`);return i?(i.addEventListener(t,e,o),i):null}function tt(d,a){return k(d,a)}function et(d,a){return k(d,a)}function ot(d,a){return k(d,a)}const bt="input, select, textarea, ui-input, ui-select, ui-date-picker, ui-checkbox, ui-upload";function it(d){return d.getAttribute("name")||d.getAttribute("id")||""}function gt(d){const a=d.tagName.toLowerCase();if(a==="ui-checkbox")return d.hasAttribute("checked");if(a==="ui-upload"){const o=d==null?void 0:d.filesValue;return Array.isArray(o)&&o.length>0?o:[]}const t=d==null?void 0:d.value;if(typeof t=="string"&&t!=="")return t;const e=d.getAttribute("value");return e||""}function at(d,a={}){const{includeDisabled:t=!1,includeEmpty:e=!0}=a,o={},i=new Map;d.querySelectorAll('input[type="checkbox"]').forEach(n=>{const r=it(n);r&&i.set(r,(i.get(r)||0)+1)});const s=Array.from(d.querySelectorAll(bt));for(const n of s){if(!t&&(n.disabled||n.hasAttribute("disabled")))continue;const r=it(n);if(!r)continue;if(n instanceof HTMLInputElement){const c=n.type;if(c==="checkbox"){if((i.get(r)||0)>1){const u=o[r]||[];n.checked&&u.push(n.value||"on"),o[r]=u}else o[r]=n.checked;continue}if(c==="radio"){n.checked&&(o[r]=n.value);continue}if(c==="file"){const h=Array.from(n.files??[]);(e||h.length>0)&&(o[r]=h);continue}(e||n.value!=="")&&(o[r]=n.value);continue}if(n instanceof HTMLSelectElement){if(n.multiple){const c=Array.from(n.selectedOptions).map(h=>h.value);(e||c.length>0)&&(o[r]=c)}else(e||n.value!=="")&&(o[r]=n.value);continue}if(n instanceof HTMLTextAreaElement){(e||n.value!=="")&&(o[r]=n.value);continue}const l=gt(n);(e||(Array.isArray(l)?l.length>0:l!==""))&&(o[r]=l)}return o}function ft(d){const a={};d.querySelectorAll("ui-input").forEach(i=>{var c;const s=(c=i.value)==null?void 0:c.trim(),n=i.getAttribute("name"),r=i.getAttribute("label")||n;i.getAttribute("required")!==null&&!s&&(a[n||""]=`${r} is required`),s&&n==="email"&&(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s)||(a[n]="Please enter a valid email address")),s&&n==="phone"&&(/^[\d\s\-\+\(\)]+$/.test(s)||(a[n]="Please enter a valid phone number"))}),d.querySelectorAll("ui-select").forEach(i=>{const s=i.getAttribute("value"),n=i.getAttribute("name"),r=i.getAttribute("label")||n;i.getAttribute("required")!==null&&!s&&(a[n||""]=`${r} is required`)});const o=d.querySelectorAll("ui-checkbox");return o.length>0&&(Array.from(o).some(s=>s.checked||s.getAttribute("checked")!==null)||(a.checkboxes="Please select at least one option")),{isValid:Object.keys(a).length===0,errors:a}}function ge(d){return d}function fe(d){return d}const vt=":host{display:flex;flex-direction:column;width:100%;height:100vh;background:#f9fafb;box-sizing:border-box}ui-top-bar{display:block;width:100%;flex-shrink:0}.layout-container{display:flex;flex-direction:row;flex:1;width:100%;min-height:0}app-sidebar{display:block;width:280px;flex-shrink:0;border-right:1px solid #e5e7eb;overflow:hidden;background:linear-gradient(to bottom,#1f2937,#111827)}.main-area{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:32px 48px;background:#f9fafb;box-sizing:border-box;height:100%}.content-area{background:#fff;border-radius:12px;padding:32px;border:1px solid #e5e7eb;box-shadow:0 1px 2px #0000000d;box-sizing:border-box;margin-bottom:32px;transition:all .2s ease;width:100%}.content-area:hover{border-color:#d1d5db;box-shadow:0 1px 3px #00000014}::slotted(*){display:block!important;width:100%}.main-area::-webkit-scrollbar{width:8px}.main-area::-webkit-scrollbar-track{background:transparent}.main-area::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.main-area::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media (max-width: 1280px){.main-area{padding:24px 32px}.content-area{padding:28px}}@media (max-width: 768px){.layout-container{flex-direction:column}app-sidebar{width:100%;border-right:none;border-bottom:1px solid #e5e7eb;max-height:200px}.main-area{padding:16px 24px}.content-area{padding:20px;margin-bottom:20px}}",yt=`
|
|
363
|
+
:host {
|
|
364
|
+
display: block;
|
|
365
|
+
width: 280px;
|
|
366
|
+
height: 100%;
|
|
367
|
+
box-sizing: border-box;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.sidebar {
|
|
371
|
+
background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
|
|
372
|
+
display: flex;
|
|
373
|
+
flex-direction: column;
|
|
374
|
+
gap: 8px;
|
|
375
|
+
position: relative;
|
|
376
|
+
overflow: hidden;
|
|
377
|
+
padding: 0;
|
|
378
|
+
width: 100%;
|
|
379
|
+
height: 100%;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.sidebar::before {
|
|
383
|
+
content: '';
|
|
384
|
+
position: absolute;
|
|
385
|
+
top: -50%;
|
|
386
|
+
left: -50%;
|
|
387
|
+
width: 200%;
|
|
388
|
+
height: 200%;
|
|
389
|
+
background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
|
|
390
|
+
pointer-events: none;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.sidebar-brand {
|
|
394
|
+
display: flex;
|
|
395
|
+
align-items: center;
|
|
396
|
+
gap: 12px;
|
|
397
|
+
padding: 20px 16px;
|
|
398
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
399
|
+
margin: 0;
|
|
400
|
+
position: relative;
|
|
401
|
+
z-index: 1;
|
|
402
|
+
flex-shrink: 0;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.brand-icon {
|
|
406
|
+
width: 40px;
|
|
407
|
+
height: 40px;
|
|
408
|
+
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
409
|
+
border-radius: 10px;
|
|
410
|
+
display: flex;
|
|
411
|
+
align-items: center;
|
|
412
|
+
justify-content: center;
|
|
413
|
+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
|
|
414
|
+
flex-shrink: 0;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.brand-icon svg {
|
|
418
|
+
width: 22px;
|
|
419
|
+
height: 22px;
|
|
420
|
+
stroke: white;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.brand-text {
|
|
424
|
+
font: 600 16px/1.2 "Sora", system-ui, sans-serif;
|
|
425
|
+
color: #ffffff;
|
|
426
|
+
letter-spacing: -0.01em;
|
|
427
|
+
margin: 0;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.brand-sub {
|
|
431
|
+
font: 500 10px/1 "Inter", system-ui, sans-serif;
|
|
432
|
+
color: rgba(255, 255, 255, 0.4);
|
|
433
|
+
text-transform: uppercase;
|
|
434
|
+
letter-spacing: 0.08em;
|
|
435
|
+
margin: 0;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.nav-section {
|
|
439
|
+
display: flex;
|
|
440
|
+
flex-direction: column;
|
|
441
|
+
gap: 4px;
|
|
442
|
+
padding: 0 12px;
|
|
443
|
+
position: relative;
|
|
444
|
+
z-index: 1;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.nav-label {
|
|
448
|
+
font: 600 11px/1 "Inter", system-ui, sans-serif;
|
|
449
|
+
color: rgba(255, 255, 255, 0.35);
|
|
450
|
+
text-transform: uppercase;
|
|
451
|
+
letter-spacing: 0.1em;
|
|
452
|
+
padding: 12px 8px 6px;
|
|
453
|
+
margin: 4px 0 0;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.sidebar-link {
|
|
457
|
+
display: flex;
|
|
458
|
+
align-items: center;
|
|
459
|
+
gap: 12px;
|
|
460
|
+
padding: 10px 12px;
|
|
461
|
+
border-radius: 8px;
|
|
462
|
+
color: rgba(255, 255, 255, 0.65);
|
|
463
|
+
text-decoration: none;
|
|
464
|
+
font: 500 14px/1.3 "Inter", system-ui, sans-serif;
|
|
465
|
+
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
466
|
+
position: relative;
|
|
467
|
+
overflow: hidden;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.sidebar-link::before {
|
|
471
|
+
content: '';
|
|
472
|
+
position: absolute;
|
|
473
|
+
inset: 0;
|
|
474
|
+
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
|
|
475
|
+
border-radius: 8px;
|
|
476
|
+
opacity: 0;
|
|
477
|
+
transition: opacity 200ms ease;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.sidebar-link:hover {
|
|
481
|
+
color: #ffffff;
|
|
482
|
+
background: rgba(255, 255, 255, 0.05);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.sidebar-link:hover::before {
|
|
486
|
+
opacity: 1;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.sidebar-link.active {
|
|
490
|
+
color: #ffffff;
|
|
491
|
+
background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.2) 100%);
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.sidebar-link.active::after {
|
|
495
|
+
content: '';
|
|
496
|
+
position: absolute;
|
|
497
|
+
left: 0;
|
|
498
|
+
top: 50%;
|
|
499
|
+
transform: translateY(-50%);
|
|
500
|
+
width: 3px;
|
|
501
|
+
height: 20px;
|
|
502
|
+
background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
|
|
503
|
+
border-radius: 0 3px 3px 0;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
.link-icon {
|
|
507
|
+
width: 18px;
|
|
508
|
+
height: 18px;
|
|
509
|
+
flex-shrink: 0;
|
|
510
|
+
opacity: 0.65;
|
|
511
|
+
transition: opacity 200ms ease;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.sidebar-link:hover .link-icon,
|
|
515
|
+
.sidebar-link.active .link-icon {
|
|
516
|
+
opacity: 1;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.link-icon svg {
|
|
520
|
+
width: 100%;
|
|
521
|
+
height: 100%;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
.sidebar-footer {
|
|
525
|
+
margin-top: auto;
|
|
526
|
+
padding: 16px 12px;
|
|
527
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
528
|
+
position: relative;
|
|
529
|
+
z-index: 1;
|
|
530
|
+
flex-shrink: 0;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
.sidebar-link[data-link] {
|
|
534
|
+
cursor: pointer;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
.nav-section:first-child {
|
|
538
|
+
padding-top: 12px;
|
|
539
|
+
}
|
|
540
|
+
`;class xt extends b{constructor(){super(...arguments);p(this,"navItems",[]);p(this,"footerItems",[])}connectedCallback(){this.setAttribute("data-ui","sidebar"),super.connectedCallback(),this.updateActiveState(),window.addEventListener("popstate",()=>this.updateActiveState()),document.addEventListener("click",()=>this.updateActiveState())}set items(t){this.navItems=t.map(e=>({...e,active:!1})),this.updateActiveState()}get items(){return this.navItems}set footer(t){this.footerItems=t,this.render()}get footer(){return this.footerItems}updateActiveState(){if(this.navItems.length===0)return;const t=window.location.pathname;this.navItems=this.navItems.map(e=>({...e,active:e.href===t})),this.render()}renderIcon(t){var o;return((o=y.icons[t])==null?void 0:o.toSvg({class:""}))||""}render(){const t=this.navItems.map(i=>`
|
|
541
|
+
<a
|
|
542
|
+
class="sidebar-link ${i.active?"active":""}"
|
|
543
|
+
href="${i.href}"
|
|
544
|
+
data-link
|
|
545
|
+
>
|
|
546
|
+
<span class="link-icon">${this.renderIcon(i.icon)}</span>
|
|
547
|
+
${i.label}
|
|
548
|
+
</a>
|
|
549
|
+
`).join(""),e=this.footerItems.map(i=>`
|
|
550
|
+
<a
|
|
551
|
+
class="sidebar-link"
|
|
552
|
+
href="${i.href}"
|
|
553
|
+
target="_blank"
|
|
554
|
+
rel="noopener"
|
|
555
|
+
>
|
|
556
|
+
<span class="link-icon">${this.renderIcon(i.icon)}</span>
|
|
557
|
+
${i.label}
|
|
558
|
+
</a>
|
|
559
|
+
`).join(""),o=this.footerItems.length>0?`
|
|
560
|
+
<div class="sidebar-footer">
|
|
561
|
+
${e}
|
|
562
|
+
</div>
|
|
563
|
+
`:"";this.shadowRoot.innerHTML=`
|
|
564
|
+
<style>${f}${yt}</style>
|
|
565
|
+
<aside class="sidebar">
|
|
566
|
+
<div class="sidebar-brand">
|
|
567
|
+
<div class="brand-icon">
|
|
568
|
+
${this.renderIcon("hexagon")}
|
|
569
|
+
</div>
|
|
570
|
+
<div>
|
|
571
|
+
<div class="brand-text">UI Kit</div>
|
|
572
|
+
<div class="brand-sub">Components</div>
|
|
573
|
+
</div>
|
|
574
|
+
</div>
|
|
575
|
+
|
|
576
|
+
<nav class="nav-section">
|
|
577
|
+
<div class="nav-label">Components</div>
|
|
578
|
+
${t}
|
|
579
|
+
</nav>
|
|
580
|
+
|
|
581
|
+
${o}
|
|
582
|
+
</aside>
|
|
583
|
+
`}}customElements.define("app-sidebar",xt);const wt=":host{display:block;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 2px #0000000d}.top-bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:14px 48px;width:100%;box-sizing:border-box}.title-section{display:flex;flex-direction:column;gap:2px;min-width:0}.page-title{font:600 22px/1.2 Sora,system-ui,sans-serif;color:#0f172a;letter-spacing:-.01em;margin:0;word-break:break-word}.page-subtitle{font:400 13px/1.4 Inter,system-ui,sans-serif;color:#6b7280;margin:0;letter-spacing:-.005em;word-break:break-word}.actions-slot{display:flex;align-items:center;gap:8px;flex-shrink:0}@media (max-width: 1280px){.top-bar{gap:16px;padding:12px 32px}.page-title{font-size:20px}.page-subtitle{font-size:12px}}@media (max-width: 768px){.top-bar{grid-template-columns:1fr;gap:12px;padding:12px 24px}.page-title{font-size:18px}.page-subtitle{font-size:12px}.actions-slot{width:100%;justify-content:flex-end}}@media (max-width: 480px){.top-bar{padding:10px 16px;gap:10px}.page-title{font-size:16px}.page-subtitle{font-size:11px}}";class kt extends b{connectedCallback(){this.setAttribute("data-ui","top-bar"),super.connectedCallback()}static get observedAttributes(){return["title","subtitle","bg-color"]}attributeChangedCallback(){this.render()}getTitle(){return this.getAttribute("title")??"Dashboard"}getSubtitle(){return this.getAttribute("subtitle")??""}getBgColor(){return this.getAttribute("bg-color")??"var(--color-header)"}render(){const a=this.getSubtitle(),t=this.getBgColor();this.shadowRoot.innerHTML=`
|
|
584
|
+
<style>
|
|
585
|
+
${f}
|
|
586
|
+
${wt}
|
|
587
|
+
:host {
|
|
588
|
+
background: ${t};
|
|
589
|
+
}
|
|
590
|
+
</style>
|
|
591
|
+
<div class="top-bar">
|
|
592
|
+
<div class="title-section">
|
|
593
|
+
<h1 class="page-title">${this.getTitle()}</h1>
|
|
594
|
+
${a?`<p class="page-subtitle">${a}</p>`:""}
|
|
595
|
+
</div>
|
|
596
|
+
<div class="actions-slot">
|
|
597
|
+
<slot></slot>
|
|
598
|
+
</div>
|
|
599
|
+
</div>
|
|
600
|
+
`}}customElements.define("ui-top-bar",kt);const Ct=[{path:"/",layout:"app-layout",load:()=>Promise.resolve().then(()=>zt),component:"home-page"},{path:"/button",layout:"app-layout",load:()=>Promise.resolve().then(()=>It),component:"button-demo"},{path:"/layout",layout:"app-layout",load:()=>Promise.resolve().then(()=>Mt),component:"layout-demo"},{path:"/date-picker",layout:"app-layout",load:()=>Promise.resolve().then(()=>qt),component:"date-picker-demo"},{path:"/table-demo",layout:"app-layout",load:()=>Promise.resolve().then(()=>Ft),component:"table-demo"},{path:"/forms",layout:"app-layout",load:()=>Promise.resolve().then(()=>Vt),component:"form-demo-page"},{path:"/modal",layout:"app-layout",load:()=>Promise.resolve().then(()=>Qt),component:"modal-demo-page"},{path:"/tabs",layout:"app-layout",load:()=>Promise.resolve().then(()=>Zt),component:"tabs-demo"},{path:"/card",layout:"app-layout",load:()=>Promise.resolve().then(()=>ee),component:"card-demo-page"},{path:"/toast",layout:"app-layout",load:()=>Promise.resolve().then(()=>ne),component:"toast-demo-page"},{path:"/stepper",layout:"app-layout",load:()=>Promise.resolve().then(()=>he),component:"stepper-demo-page"}];class St extends b{constructor(){super(...arguments);p(this,"pageTitle","Dashboard");p(this,"pageSubtitle","Explore our component library");p(this,"navItems",[{icon:"home",label:"Home",href:"/"},{icon:"box",label:"Button",href:"/button"},{icon:"layout",label:"Layout",href:"/layout"},{icon:"sliders",label:"Form Elements",href:"/forms"},{icon:"calendar",label:"Date Picker",href:"/date-picker"},{icon:"table",label:"Table",href:"/table-demo"},{icon:"square",label:"Modal",href:"/modal"},{icon:"folder",label:"Tabs",href:"/tabs"},{icon:"credit-card",label:"Card",href:"/card"},{icon:"message-circle",label:"Toast",href:"/toast"},{icon:"layers",label:"Stepper",href:"/stepper"}]);p(this,"footerItems",[{icon:"github",label:"GitHub",href:"https://github.com/rodiniz/webcomponents"}])}connectedCallback(){this.setAttribute("data-ui","layout"),super.connectedCallback(),this.updateTitle(),window.addEventListener("popstate",()=>this.updateTitle()),document.addEventListener("click",()=>this.updateTitle())}updateTitle(){const t=window.location.pathname,o={"/":{title:"Web Components",subtitle:"A framework-agnostic component library"},"/button":{title:"Button",subtitle:"Flexible button with variants and sizes"},"/layout":{title:"Layout",subtitle:"Flexible page layouts with header, footer, sidebar, and content"},"/forms":{title:"Form Elements",subtitle:"Inputs, selects, checkboxes, uploads, and more"},"/date-picker":{title:"Date Picker",subtitle:"Date selection component"},"/table-demo":{title:"Table",subtitle:"Data table with actions"},"/modal":{title:"Modal",subtitle:"Dialog and overlay components"},"/tabs":{title:"Tabs",subtitle:"Tabbed navigation component"},"/card":{title:"Card",subtitle:"Flexible container component"},"/toast":{title:"Toast",subtitle:"Notification and alert system"},"/stepper":{title:"Stepper",subtitle:"Progressive step navigation"}}[t]||{title:"Dashboard",subtitle:"Explore our component library"};this.pageTitle=o.title,this.pageSubtitle=o.subtitle,this.render()}render(){this.shadowRoot.innerHTML=`
|
|
601
|
+
<style>${f}${vt}</style>
|
|
602
|
+
<ui-top-bar title="${this.pageTitle}" subtitle="${this.pageSubtitle}"></ui-top-bar>
|
|
603
|
+
<div class="layout-container">
|
|
604
|
+
<app-sidebar></app-sidebar>
|
|
605
|
+
<div class="main-area">
|
|
606
|
+
<main class="content-area">
|
|
607
|
+
<slot></slot>
|
|
608
|
+
</main>
|
|
609
|
+
</div>
|
|
610
|
+
</div>
|
|
611
|
+
`;const t=this.shadowRoot.querySelector("app-sidebar");t&&(t.items=this.navItems,t.footer=this.footerItems)}}customElements.define("app-layout",St);function Et(d,a="#app"){async function t(){const e=location.pathname,o=e,i=d.find(r=>r.path===o);if(!i){if(o!=="/"){const r="/";history.replaceState(null,"",r),await t()}return}if(await i.load(),i.guard&&!await i.guard()){const l="/";history.replaceState(null,"",l),await t();return}const s=document.createElement(i.component),n=document.querySelector(a);n&&(n.innerHTML="",n.appendChild(s))}return window.addEventListener("popstate",t),window.addEventListener("DOMContentLoaded",t),document.addEventListener("click",e=>{const i=e.composedPath().find(s=>s instanceof Element&&s.matches("[data-link]"));if(i){e.preventDefault();const s=i.getAttribute("href")??"/",n=s;history.pushState(null,"",n),t()}}),t}async function A(){const d=location.pathname,a=d,t=Ct.find(s=>s.path===a);if(!t){if(a!=="/"){const s="/";history.replaceState(null,"",s),await A()}return}if(await t.load(),t.guard&&!await t.guard()){const n="/";history.replaceState(null,"",n),await A();return}const e=document.createElement(t.layout),o=document.createElement(t.component);e.appendChild(o);const i=document.querySelector("#app");i&&(i.innerHTML="",i.appendChild(e))}window.addEventListener("popstate",A),window.addEventListener("DOMContentLoaded",A),document.addEventListener("click",d=>{const t=d.composedPath().find(e=>e instanceof Element&&e.matches("[data-link]"));if(t){d.preventDefault();const e=t.getAttribute("href")??"/",o=e;history.pushState(null,"",o),A()}});const At=`<section class="hero">
|
|
612
|
+
<div class="hero-content">
|
|
613
|
+
<h1 class="hero-title">@diniz/webcomponents</h1>
|
|
614
|
+
<p class="hero-subtitle">
|
|
615
|
+
A lightweight, framework-agnostic web components library built with vanilla TypeScript.
|
|
616
|
+
Create modern, reactive UIs using native Web Components API with zero dependencies.
|
|
617
|
+
</p>
|
|
618
|
+
<div class="hero-actions">
|
|
619
|
+
<ui-button variant="primary" size="lg">Explore Components</ui-button>
|
|
620
|
+
<ui-button variant="ghost" size="lg">View on GitHub</ui-button>
|
|
621
|
+
</div>
|
|
622
|
+
</div>
|
|
623
|
+
<div class="hero-visual">
|
|
624
|
+
<div class="feature-icons">
|
|
625
|
+
<div class="icon-item">✨</div>
|
|
626
|
+
<div class="icon-item">⚡</div>
|
|
627
|
+
<div class="icon-item">🎨</div>
|
|
628
|
+
<div class="icon-item">📦</div>
|
|
629
|
+
</div>
|
|
630
|
+
</div>
|
|
631
|
+
</section>
|
|
632
|
+
|
|
633
|
+
<section class="features">
|
|
634
|
+
<h2>Why Use This Library?</h2>
|
|
635
|
+
<div class="features-grid">
|
|
636
|
+
<div class="feature-card">
|
|
637
|
+
<div class="feature-icon">✨</div>
|
|
638
|
+
<h3>Native Web Components</h3>
|
|
639
|
+
<p>Built on standard Custom Elements API. Works with any framework or none at all.</p>
|
|
640
|
+
</div>
|
|
641
|
+
<div class="feature-card">
|
|
642
|
+
<div class="feature-icon">⚡</div>
|
|
643
|
+
<h3>Reactive Signals</h3>
|
|
644
|
+
<p>Built-in signal-based reactivity system similar to Solid.js for smooth updates.</p>
|
|
645
|
+
</div>
|
|
646
|
+
<div class="feature-card">
|
|
647
|
+
<div class="feature-icon">🎨</div>
|
|
648
|
+
<h3>Theme Support</h3>
|
|
649
|
+
<p>CSS custom properties make theming and customization effortless.</p>
|
|
650
|
+
</div>
|
|
651
|
+
<div class="feature-card">
|
|
652
|
+
<div class="feature-icon">📦</div>
|
|
653
|
+
<h3>Zero Dependencies</h3>
|
|
654
|
+
<p>No framework required. Lightweight and fast with nothing to bloat your bundle.</p>
|
|
655
|
+
</div>
|
|
656
|
+
<div class="feature-card">
|
|
657
|
+
<div class="feature-icon">🔒</div>
|
|
658
|
+
<h3>TypeScript Support</h3>
|
|
659
|
+
<p>Full type safety and IntelliSense support for better development experience.</p>
|
|
660
|
+
</div>
|
|
661
|
+
<div class="feature-card">
|
|
662
|
+
<div class="feature-icon">♿</div>
|
|
663
|
+
<h3>Accessible</h3>
|
|
664
|
+
<p>Built with ARIA attributes and keyboard navigation from the ground up.</p>
|
|
665
|
+
</div>
|
|
666
|
+
</div>
|
|
667
|
+
</section>
|
|
668
|
+
|
|
669
|
+
<section class="components">
|
|
670
|
+
<h2>Available Components</h2>
|
|
671
|
+
<div class="components-grid">
|
|
672
|
+
<div class="component-item">
|
|
673
|
+
<span class="component-name">ui-button</span>
|
|
674
|
+
<span class="component-desc">Flexible button with variants and sizes</span>
|
|
675
|
+
</div>
|
|
676
|
+
<div class="component-item">
|
|
677
|
+
<span class="component-name">ui-input</span>
|
|
678
|
+
<span class="component-desc">Text input with validation</span>
|
|
679
|
+
</div>
|
|
680
|
+
<div class="component-item">
|
|
681
|
+
<span class="component-name">ui-select</span>
|
|
682
|
+
<span class="component-desc">Dropdown select component</span>
|
|
683
|
+
</div>
|
|
684
|
+
<div class="component-item">
|
|
685
|
+
<span class="component-name">ui-checkbox</span>
|
|
686
|
+
<span class="component-desc">Custom checkbox component</span>
|
|
687
|
+
</div>
|
|
688
|
+
<div class="component-item">
|
|
689
|
+
<span class="component-name">ui-date-picker</span>
|
|
690
|
+
<span class="component-desc">Date selection with format options</span>
|
|
691
|
+
</div>
|
|
692
|
+
<div class="component-item">
|
|
693
|
+
<span class="component-name">ui-table</span>
|
|
694
|
+
<span class="component-desc">Data table with sorting and actions</span>
|
|
695
|
+
</div>
|
|
696
|
+
<div class="component-item">
|
|
697
|
+
<span class="component-name">ui-modal</span>
|
|
698
|
+
<span class="component-desc">Dialog modal component</span>
|
|
699
|
+
</div>
|
|
700
|
+
<div class="component-item">
|
|
701
|
+
<span class="component-name">ui-tabs</span>
|
|
702
|
+
<span class="component-desc">Tab navigation component</span>
|
|
703
|
+
</div>
|
|
704
|
+
<div class="component-item">
|
|
705
|
+
<span class="component-name">ui-card</span>
|
|
706
|
+
<span class="component-desc">Card container component</span>
|
|
707
|
+
</div>
|
|
708
|
+
<div class="component-item">
|
|
709
|
+
<span class="component-name">ui-toast</span>
|
|
710
|
+
<span class="component-desc">Toast notification system</span>
|
|
711
|
+
</div>
|
|
712
|
+
<div class="component-item">
|
|
713
|
+
<span class="component-name">ui-stepper</span>
|
|
714
|
+
<span class="component-desc">Multi-step progress indicator</span>
|
|
715
|
+
</div>
|
|
716
|
+
<div class="component-item">
|
|
717
|
+
<span class="component-name">ui-upload</span>
|
|
718
|
+
<span class="component-desc">File upload with drag-drop</span>
|
|
719
|
+
</div>
|
|
720
|
+
<div class="component-item">
|
|
721
|
+
<span class="component-name">ui-layout</span>
|
|
722
|
+
<span class="component-desc">Flexible page layout system</span>
|
|
723
|
+
</div>
|
|
724
|
+
</div>
|
|
725
|
+
</section>
|
|
726
|
+
|
|
727
|
+
<section class="quick-start">
|
|
728
|
+
<h2>Quick Start</h2>
|
|
729
|
+
<div class="code-blocks">
|
|
730
|
+
<div class="code-block">
|
|
731
|
+
<h3>Installation</h3>
|
|
732
|
+
<pre><code>npm install @diniz/webcomponents</code></pre>
|
|
733
|
+
</div>
|
|
734
|
+
<div class="code-block">
|
|
735
|
+
<h3>Basic Usage</h3>
|
|
736
|
+
<pre><code><ui-button variant="primary">Click Me</ui-button>
|
|
737
|
+
<ui-input placeholder="Enter text"></ui-input>
|
|
738
|
+
<ui-date-picker format="MM/DD/YYYY"></ui-date-picker></code></pre>
|
|
739
|
+
</div>
|
|
740
|
+
<div class="code-block">
|
|
741
|
+
<h3>With Events</h3>
|
|
742
|
+
<pre><code>const picker = document.querySelector('ui-date-picker');
|
|
743
|
+
picker?.addEventListener('date-change', (e) => {
|
|
744
|
+
console.log('Date:', e.detail.value);
|
|
745
|
+
});</code></pre>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
</section>
|
|
749
|
+
|
|
750
|
+
<section class="cta">
|
|
751
|
+
<h2>Ready to Build Amazing UIs?</h2>
|
|
752
|
+
<p>Explore the interactive component library and see what you can create.</p>
|
|
753
|
+
<ui-button variant="primary" size="lg" icon="arrow-right">Start Exploring</ui-button>
|
|
754
|
+
</section>
|
|
755
|
+
`,$t=`
|
|
756
|
+
:host {
|
|
757
|
+
display: block;
|
|
758
|
+
color: var(--color-ink);
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
h1, h2, h3 {
|
|
762
|
+
margin: 0;
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
h2 {
|
|
766
|
+
font-size: 2rem;
|
|
767
|
+
font-weight: 700;
|
|
768
|
+
margin-bottom: 2rem;
|
|
769
|
+
position: relative;
|
|
770
|
+
display: inline-block;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
h2::after {
|
|
774
|
+
content: '';
|
|
775
|
+
position: absolute;
|
|
776
|
+
bottom: -8px;
|
|
777
|
+
left: 0;
|
|
778
|
+
width: 60px;
|
|
779
|
+
height: 4px;
|
|
780
|
+
background: var(--color-primary);
|
|
781
|
+
border-radius: 2px;
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
p {
|
|
785
|
+
line-height: 1.6;
|
|
786
|
+
color: rgba(15, 23, 42, 0.75);
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
/* Hero Section */
|
|
790
|
+
.hero {
|
|
791
|
+
display: grid;
|
|
792
|
+
grid-template-columns: 1fr 1fr;
|
|
793
|
+
gap: 4rem;
|
|
794
|
+
align-items: center;
|
|
795
|
+
margin-bottom: 6rem;
|
|
796
|
+
padding: 3rem 0;
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
.hero-content {
|
|
800
|
+
display: flex;
|
|
801
|
+
flex-direction: column;
|
|
802
|
+
gap: 1.5rem;
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
.hero-title {
|
|
806
|
+
font-size: 3.5rem;
|
|
807
|
+
font-weight: 800;
|
|
808
|
+
line-height: 1.1;
|
|
809
|
+
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-ink) 100%);
|
|
810
|
+
-webkit-background-clip: text;
|
|
811
|
+
-webkit-text-fill-color: transparent;
|
|
812
|
+
background-clip: text;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
.hero-subtitle {
|
|
816
|
+
font-size: 1.25rem;
|
|
817
|
+
line-height: 1.7;
|
|
818
|
+
color: rgba(15, 23, 42, 0.7);
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
.hero-actions {
|
|
822
|
+
display: flex;
|
|
823
|
+
gap: 1rem;
|
|
824
|
+
margin-top: 0.5rem;
|
|
825
|
+
}
|
|
826
|
+
|
|
827
|
+
.hero-visual {
|
|
828
|
+
display: flex;
|
|
829
|
+
align-items: center;
|
|
830
|
+
justify-content: center;
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
.feature-icons {
|
|
834
|
+
display: grid;
|
|
835
|
+
grid-template-columns: repeat(2, 1fr);
|
|
836
|
+
gap: 2rem;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.icon-item {
|
|
840
|
+
font-size: 4rem;
|
|
841
|
+
animation: float 3s ease-in-out infinite;
|
|
842
|
+
}
|
|
843
|
+
|
|
844
|
+
.icon-item:nth-child(2) { animation-delay: 0.3s; }
|
|
845
|
+
.icon-item:nth-child(3) { animation-delay: 0.6s; }
|
|
846
|
+
.icon-item:nth-child(4) { animation-delay: 0.9s; }
|
|
847
|
+
|
|
848
|
+
@keyframes float {
|
|
849
|
+
0%, 100% { transform: translateY(0px); }
|
|
850
|
+
50% { transform: translateY(-10px); }
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
/* Features Section */
|
|
854
|
+
.features {
|
|
855
|
+
margin-bottom: 6rem;
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
.features-grid {
|
|
859
|
+
display: grid;
|
|
860
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
861
|
+
gap: 2rem;
|
|
862
|
+
margin-top: 2rem;
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
.feature-card {
|
|
866
|
+
padding: 2rem;
|
|
867
|
+
background: var(--color-surface);
|
|
868
|
+
border: 1px solid var(--color-border);
|
|
869
|
+
border-radius: 16px;
|
|
870
|
+
transition: all 0.3s ease;
|
|
871
|
+
display: flex;
|
|
872
|
+
flex-direction: column;
|
|
873
|
+
gap: 1rem;
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
.feature-card:hover {
|
|
877
|
+
transform: translateY(-4px);
|
|
878
|
+
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
|
|
879
|
+
border-color: var(--color-primary);
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
.feature-icon {
|
|
883
|
+
font-size: 2.5rem;
|
|
884
|
+
line-height: 1;
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
.feature-card h3 {
|
|
888
|
+
font-size: 1.2rem;
|
|
889
|
+
font-weight: 600;
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
.feature-card p {
|
|
893
|
+
font-size: 0.95rem;
|
|
894
|
+
margin: 0;
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
/* Components Section */
|
|
898
|
+
.components {
|
|
899
|
+
margin-bottom: 6rem;
|
|
900
|
+
}
|
|
901
|
+
|
|
902
|
+
.components-grid {
|
|
903
|
+
display: grid;
|
|
904
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
905
|
+
gap: 1rem;
|
|
906
|
+
margin-top: 2rem;
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
.component-item {
|
|
910
|
+
padding: 1.5rem;
|
|
911
|
+
background: var(--color-surface);
|
|
912
|
+
border: 1px solid var(--color-border);
|
|
913
|
+
border-radius: 12px;
|
|
914
|
+
transition: all 0.2s ease;
|
|
915
|
+
cursor: pointer;
|
|
916
|
+
display: flex;
|
|
917
|
+
flex-direction: column;
|
|
918
|
+
gap: 0.5rem;
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
.component-item:hover {
|
|
922
|
+
border-color: var(--color-primary);
|
|
923
|
+
background: linear-gradient(135deg, rgba(36, 236, 113, 0.05), transparent);
|
|
924
|
+
transform: translateX(4px);
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
.component-name {
|
|
928
|
+
font-weight: 600;
|
|
929
|
+
color: var(--color-primary);
|
|
930
|
+
font-family: "Cascadia Mono", "Fira Code", monospace;
|
|
931
|
+
font-size: 0.9rem;
|
|
932
|
+
}
|
|
933
|
+
|
|
934
|
+
.component-desc {
|
|
935
|
+
font-size: 0.85rem;
|
|
936
|
+
color: rgba(15, 23, 42, 0.6);
|
|
937
|
+
}
|
|
938
|
+
|
|
939
|
+
/* Quick Start Section */
|
|
940
|
+
.quick-start {
|
|
941
|
+
margin-bottom: 6rem;
|
|
942
|
+
}
|
|
943
|
+
|
|
944
|
+
.code-blocks {
|
|
945
|
+
display: grid;
|
|
946
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
947
|
+
gap: 2rem;
|
|
948
|
+
margin-top: 2rem;
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
.code-block {
|
|
952
|
+
background: #0f172a;
|
|
953
|
+
padding: 2rem;
|
|
954
|
+
border-radius: 12px;
|
|
955
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
956
|
+
}
|
|
957
|
+
|
|
958
|
+
.code-block h3 {
|
|
959
|
+
color: #f8fafc;
|
|
960
|
+
font-size: 1.1rem;
|
|
961
|
+
margin-bottom: 1rem;
|
|
962
|
+
font-weight: 600;
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
.code-block pre {
|
|
966
|
+
margin: 0;
|
|
967
|
+
overflow-x: auto;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
.code-block code {
|
|
971
|
+
font-family: "Cascadia Mono", "Fira Code", monospace;
|
|
972
|
+
font-size: 0.9rem;
|
|
973
|
+
color: #e0e7ff;
|
|
974
|
+
line-height: 1.5;
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
/* CTA Section */
|
|
978
|
+
.cta {
|
|
979
|
+
text-align: center;
|
|
980
|
+
padding: 4rem 2rem;
|
|
981
|
+
background: linear-gradient(135deg, rgba(36, 236, 113, 0.1) 0%, rgba(52, 168, 235, 0.05) 100%);
|
|
982
|
+
border-radius: 16px;
|
|
983
|
+
border: 1px solid var(--color-border);
|
|
984
|
+
margin-bottom: 2rem;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
.cta h2 {
|
|
988
|
+
margin-bottom: 1rem;
|
|
989
|
+
font-size: 2rem;
|
|
990
|
+
}
|
|
991
|
+
|
|
992
|
+
.cta h2::after {
|
|
993
|
+
display: none;
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
.cta p {
|
|
997
|
+
font-size: 1.1rem;
|
|
998
|
+
margin-bottom: 2rem;
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
/* Responsive */
|
|
1002
|
+
@media (max-width: 768px) {
|
|
1003
|
+
.hero {
|
|
1004
|
+
grid-template-columns: 1fr;
|
|
1005
|
+
gap: 2rem;
|
|
1006
|
+
margin-bottom: 4rem;
|
|
1007
|
+
}
|
|
1008
|
+
|
|
1009
|
+
.hero-title {
|
|
1010
|
+
font-size: 2.5rem;
|
|
1011
|
+
}
|
|
1012
|
+
|
|
1013
|
+
.hero-subtitle {
|
|
1014
|
+
font-size: 1rem;
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
.hero-actions {
|
|
1018
|
+
flex-wrap: wrap;
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
.feature-icons {
|
|
1022
|
+
grid-template-columns: 1fr;
|
|
1023
|
+
gap: 1rem;
|
|
1024
|
+
}
|
|
1025
|
+
|
|
1026
|
+
.icon-item {
|
|
1027
|
+
font-size: 3rem;
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
h2 {
|
|
1031
|
+
font-size: 1.5rem;
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
.features-grid,
|
|
1035
|
+
.components-grid {
|
|
1036
|
+
grid-template-columns: 1fr;
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
.code-blocks {
|
|
1040
|
+
grid-template-columns: 1fr;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
.cta {
|
|
1044
|
+
padding: 2rem 1.5rem;
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1047
|
+
.cta h2 {
|
|
1048
|
+
font-size: 1.5rem;
|
|
1049
|
+
}
|
|
1050
|
+
}
|
|
1051
|
+
`;class nt extends b{connectedCallback(){super.connectedCallback(),this.attachEventListeners()}attachEventListeners(){if(!this.shadowRoot)return;const a=this.shadowRoot.querySelectorAll("ui-button");a[0]&&a[0].addEventListener("click",()=>{window.location.href="/button"}),a[1]&&a[1].addEventListener("click",()=>{window.open("https://github.com/rodiniz/webcomponents","_blank")}),a[2]&&a[2].addEventListener("click",()=>{window.location.href="/button"})}render(){this.shadowRoot.innerHTML=`
|
|
1052
|
+
<style>${$t}</style>
|
|
1053
|
+
${At}
|
|
1054
|
+
`}}customElements.define("home-page",nt);const zt=Object.freeze(Object.defineProperty({__proto__:null,HomePage:nt},Symbol.toStringTag,{value:"Module"})),Lt=`<h1>🔘 Button Component Demo</h1>
|
|
1055
|
+
|
|
1056
|
+
<div class="demo-intro">
|
|
1057
|
+
<p>A flexible button component with multiple variants, sizes, and icon support.</p>
|
|
1058
|
+
</div>
|
|
1059
|
+
|
|
1060
|
+
<div class="demo-section">
|
|
1061
|
+
<h2>Variants</h2>
|
|
1062
|
+
<div class="button-group">
|
|
1063
|
+
<div class="button-item">
|
|
1064
|
+
<ui-button variant="primary">Primary</ui-button>
|
|
1065
|
+
<span class="label">primary</span>
|
|
1066
|
+
</div>
|
|
1067
|
+
<div class="button-item">
|
|
1068
|
+
<ui-button variant="secondary">Secondary</ui-button>
|
|
1069
|
+
<span class="label">secondary</span>
|
|
1070
|
+
</div>
|
|
1071
|
+
<div class="button-item">
|
|
1072
|
+
<ui-button variant="ghost">Ghost</ui-button>
|
|
1073
|
+
<span class="label">ghost</span>
|
|
1074
|
+
</div>
|
|
1075
|
+
<div class="button-item">
|
|
1076
|
+
<ui-button variant="danger">Danger</ui-button>
|
|
1077
|
+
<span class="label">danger</span>
|
|
1078
|
+
</div>
|
|
1079
|
+
</div>
|
|
1080
|
+
</div>
|
|
1081
|
+
|
|
1082
|
+
<div class="demo-section">
|
|
1083
|
+
<h2>Sizes</h2>
|
|
1084
|
+
<div class="button-group">
|
|
1085
|
+
<div class="button-item">
|
|
1086
|
+
<ui-button size="sm">Small</ui-button>
|
|
1087
|
+
<span class="label">size="sm"</span>
|
|
1088
|
+
</div>
|
|
1089
|
+
<div class="button-item">
|
|
1090
|
+
<ui-button size="md">Medium</ui-button>
|
|
1091
|
+
<span class="label">size="md" (default)</span>
|
|
1092
|
+
</div>
|
|
1093
|
+
<div class="button-item">
|
|
1094
|
+
<ui-button size="lg">Large</ui-button>
|
|
1095
|
+
<span class="label">size="lg"</span>
|
|
1096
|
+
</div>
|
|
1097
|
+
</div>
|
|
1098
|
+
</div>
|
|
1099
|
+
|
|
1100
|
+
<div class="demo-section">
|
|
1101
|
+
<h2>With Icons</h2>
|
|
1102
|
+
<div class="button-group">
|
|
1103
|
+
<div class="button-item">
|
|
1104
|
+
<ui-button icon="check">Save</ui-button>
|
|
1105
|
+
<span class="label">icon="check"</span>
|
|
1106
|
+
</div>
|
|
1107
|
+
<div class="button-item">
|
|
1108
|
+
<ui-button icon="trash-2" variant="danger">Delete</ui-button>
|
|
1109
|
+
<span class="label">icon="trash-2"</span>
|
|
1110
|
+
</div>
|
|
1111
|
+
<div class="button-item">
|
|
1112
|
+
<ui-button icon="arrow-right" icon-position="right">Next</ui-button>
|
|
1113
|
+
<span class="label">icon-position="right"</span>
|
|
1114
|
+
</div>
|
|
1115
|
+
<div class="button-item">
|
|
1116
|
+
<ui-button icon="download">Download</ui-button>
|
|
1117
|
+
<span class="label">icon with text</span>
|
|
1118
|
+
</div>
|
|
1119
|
+
</div>
|
|
1120
|
+
</div>
|
|
1121
|
+
|
|
1122
|
+
<div class="demo-section">
|
|
1123
|
+
<h2>States</h2>
|
|
1124
|
+
<div class="button-group">
|
|
1125
|
+
<div class="button-item">
|
|
1126
|
+
<ui-button variant="primary">Active</ui-button>
|
|
1127
|
+
<span class="label">default state</span>
|
|
1128
|
+
</div>
|
|
1129
|
+
<div class="button-item">
|
|
1130
|
+
<ui-button variant="primary" disabled>Disabled</ui-button>
|
|
1131
|
+
<span class="label">disabled</span>
|
|
1132
|
+
</div>
|
|
1133
|
+
<div class="button-item">
|
|
1134
|
+
<ui-button variant="secondary" disabled>Disabled</ui-button>
|
|
1135
|
+
<span class="label">disabled (secondary)</span>
|
|
1136
|
+
</div>
|
|
1137
|
+
</div>
|
|
1138
|
+
</div>
|
|
1139
|
+
|
|
1140
|
+
<div class="demo-section">
|
|
1141
|
+
<h2>Button Types</h2>
|
|
1142
|
+
<div class="button-group">
|
|
1143
|
+
<div class="button-item">
|
|
1144
|
+
<ui-button type="button">Button</ui-button>
|
|
1145
|
+
<span class="label">type="button"</span>
|
|
1146
|
+
</div>
|
|
1147
|
+
<div class="button-item">
|
|
1148
|
+
<ui-button type="submit" variant="primary">Submit</ui-button>
|
|
1149
|
+
<span class="label">type="submit"</span>
|
|
1150
|
+
</div>
|
|
1151
|
+
<div class="button-item">
|
|
1152
|
+
<ui-button type="reset" variant="secondary">Reset</ui-button>
|
|
1153
|
+
<span class="label">type="reset"</span>
|
|
1154
|
+
</div>
|
|
1155
|
+
</div>
|
|
1156
|
+
</div>
|
|
1157
|
+
|
|
1158
|
+
<div class="demo-section">
|
|
1159
|
+
<h2>Combinations</h2>
|
|
1160
|
+
<div class="button-group">
|
|
1161
|
+
<div class="button-item">
|
|
1162
|
+
<ui-button variant="primary" size="lg" icon="zap">Power</ui-button>
|
|
1163
|
+
<span class="label">Large + Icon</span>
|
|
1164
|
+
</div>
|
|
1165
|
+
<div class="button-item">
|
|
1166
|
+
<ui-button variant="secondary" size="sm" icon="settings">Config</ui-button>
|
|
1167
|
+
<span class="label">Small + Icon</span>
|
|
1168
|
+
</div>
|
|
1169
|
+
<div class="button-item">
|
|
1170
|
+
<ui-button variant="ghost" icon="info">Info</ui-button>
|
|
1171
|
+
<span class="label">Ghost + Icon</span>
|
|
1172
|
+
</div>
|
|
1173
|
+
</div>
|
|
1174
|
+
</div>
|
|
1175
|
+
`,Dt=`
|
|
1176
|
+
:host {
|
|
1177
|
+
display: block;
|
|
1178
|
+
color: var(--color-ink);
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1181
|
+
h1 {
|
|
1182
|
+
font-size: 2.2rem;
|
|
1183
|
+
margin-bottom: 0.5rem;
|
|
1184
|
+
font-weight: 700;
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
h2 {
|
|
1188
|
+
font-size: 1.4rem;
|
|
1189
|
+
margin: 2rem 0 1.5rem;
|
|
1190
|
+
font-weight: 600;
|
|
1191
|
+
border-bottom: 2px solid var(--color-primary);
|
|
1192
|
+
padding-bottom: 0.5rem;
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
p {
|
|
1196
|
+
line-height: 1.6;
|
|
1197
|
+
color: rgba(15, 23, 42, 0.75);
|
|
1198
|
+
margin: 0 0 1rem;
|
|
1199
|
+
}
|
|
1200
|
+
|
|
1201
|
+
.demo-intro {
|
|
1202
|
+
background: linear-gradient(135deg, rgba(36, 236, 113, 0.08) 0%, rgba(52, 168, 235, 0.05) 100%);
|
|
1203
|
+
padding: 1.5rem;
|
|
1204
|
+
border-radius: 12px;
|
|
1205
|
+
border-left: 4px solid var(--color-primary);
|
|
1206
|
+
margin-bottom: 2rem;
|
|
1207
|
+
}
|
|
1208
|
+
|
|
1209
|
+
.demo-section {
|
|
1210
|
+
margin-bottom: 3rem;
|
|
1211
|
+
}
|
|
1212
|
+
|
|
1213
|
+
.button-group {
|
|
1214
|
+
display: grid;
|
|
1215
|
+
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
1216
|
+
gap: 1.5rem;
|
|
1217
|
+
margin-top: 1rem;
|
|
1218
|
+
}
|
|
1219
|
+
|
|
1220
|
+
.button-item {
|
|
1221
|
+
display: flex;
|
|
1222
|
+
flex-direction: column;
|
|
1223
|
+
align-items: center;
|
|
1224
|
+
gap: 0.75rem;
|
|
1225
|
+
padding: 1.5rem;
|
|
1226
|
+
background: var(--color-surface);
|
|
1227
|
+
border: 1px solid var(--color-border);
|
|
1228
|
+
border-radius: 12px;
|
|
1229
|
+
text-align: center;
|
|
1230
|
+
transition: all 0.2s ease;
|
|
1231
|
+
}
|
|
1232
|
+
|
|
1233
|
+
.button-item:hover {
|
|
1234
|
+
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
|
|
1235
|
+
border-color: var(--color-border-strong);
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
.label {
|
|
1239
|
+
font-size: 0.8rem;
|
|
1240
|
+
color: rgba(15, 23, 42, 0.6);
|
|
1241
|
+
font-weight: 500;
|
|
1242
|
+
text-transform: uppercase;
|
|
1243
|
+
letter-spacing: 0.05em;
|
|
1244
|
+
}
|
|
1245
|
+
|
|
1246
|
+
@media (max-width: 768px) {
|
|
1247
|
+
.button-group {
|
|
1248
|
+
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
1249
|
+
gap: 1rem;
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
.button-item {
|
|
1253
|
+
padding: 1rem;
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1256
|
+
h1 {
|
|
1257
|
+
font-size: 1.8rem;
|
|
1258
|
+
}
|
|
1259
|
+
|
|
1260
|
+
h2 {
|
|
1261
|
+
font-size: 1.2rem;
|
|
1262
|
+
}
|
|
1263
|
+
}
|
|
1264
|
+
`;class st extends b{connectedCallback(){super.connectedCallback()}render(){this.shadowRoot.innerHTML=`
|
|
1265
|
+
<style>${Dt}</style>
|
|
1266
|
+
${Lt}
|
|
1267
|
+
`}}customElements.define("button-demo",st);const It=Object.freeze(Object.defineProperty({__proto__:null,ButtonDemo:st},Symbol.toStringTag,{value:"Module"})),Rt=`<h1>🎨 Layout Component Demo</h1>
|
|
1268
|
+
|
|
1269
|
+
<div class="demo-intro">
|
|
1270
|
+
<p>Create flexible page layouts with header, footer, sidebar, and content areas.</p>
|
|
1271
|
+
</div>
|
|
1272
|
+
|
|
1273
|
+
<div class="demo-section">
|
|
1274
|
+
<h2>Basic Layout (Header + Content + Footer)</h2>
|
|
1275
|
+
<div class="layout-example">
|
|
1276
|
+
<ui-layout>
|
|
1277
|
+
<ui-layout-header>
|
|
1278
|
+
<div style="font-weight: 600;">Header</div>
|
|
1279
|
+
<div style="font-size: 0.9rem; color: rgba(15, 23, 42, 0.6);">Navigation & Logo</div>
|
|
1280
|
+
</ui-layout-header>
|
|
1281
|
+
<ui-layout-content>
|
|
1282
|
+
<div class="content-placeholder">Content Area</div>
|
|
1283
|
+
</ui-layout-content>
|
|
1284
|
+
<ui-layout-footer>
|
|
1285
|
+
<div style="font-size: 0.9rem;">© 2026 Your Company</div>
|
|
1286
|
+
</ui-layout-footer>
|
|
1287
|
+
</ui-layout>
|
|
1288
|
+
</div>
|
|
1289
|
+
</div>
|
|
1290
|
+
|
|
1291
|
+
<div class="demo-section">
|
|
1292
|
+
<h2>Layout with Sidebar</h2>
|
|
1293
|
+
<div class="layout-example">
|
|
1294
|
+
<ui-layout direction="horizontal">
|
|
1295
|
+
<ui-layout-sidebar collapsible width="220" collapsed-width="60">
|
|
1296
|
+
<div class="sidebar-section">
|
|
1297
|
+
<div class="sidebar-label">Menu</div>
|
|
1298
|
+
<div class="sidebar-item">Dashboard</div>
|
|
1299
|
+
<div class="sidebar-item">Users</div>
|
|
1300
|
+
<div class="sidebar-item">Settings</div>
|
|
1301
|
+
<div class="sidebar-item">Analytics</div>
|
|
1302
|
+
</div>
|
|
1303
|
+
</ui-layout-sidebar>
|
|
1304
|
+
<ui-layout-content>
|
|
1305
|
+
<div class="content-placeholder">Main Content</div>
|
|
1306
|
+
</ui-layout-content>
|
|
1307
|
+
</ui-layout>
|
|
1308
|
+
</div>
|
|
1309
|
+
</div>
|
|
1310
|
+
|
|
1311
|
+
<div class="demo-section">
|
|
1312
|
+
<h2>Full Layout (Header + Sidebar + Content + Footer)</h2>
|
|
1313
|
+
<div class="layout-example full-height">
|
|
1314
|
+
<ui-layout direction="vertical">
|
|
1315
|
+
<ui-layout-header height="60">
|
|
1316
|
+
<div style="font-weight: 600; font-size: 1.1rem;">App Header</div>
|
|
1317
|
+
<div style="display: flex; gap: 1rem;">
|
|
1318
|
+
<button style="padding: 0.5rem 1rem; background: var(--color-primary); color: white; border: none; border-radius: 6px; cursor: pointer;">Login</button>
|
|
1319
|
+
</div>
|
|
1320
|
+
</ui-layout-header>
|
|
1321
|
+
|
|
1322
|
+
<ui-layout direction="horizontal" style="flex: 1;">
|
|
1323
|
+
<ui-layout-sidebar collapsible width="200" collapsed-width="60">
|
|
1324
|
+
<div class="sidebar-section">
|
|
1325
|
+
<div class="sidebar-item">📊 Dashboard</div>
|
|
1326
|
+
<div class="sidebar-item">👥 Users</div>
|
|
1327
|
+
<div class="sidebar-item">📝 Projects</div>
|
|
1328
|
+
<div class="sidebar-item">⚙️ Settings</div>
|
|
1329
|
+
</div>
|
|
1330
|
+
</ui-layout-sidebar>
|
|
1331
|
+
<ui-layout-content>
|
|
1332
|
+
<div style="padding: 2rem;">
|
|
1333
|
+
<h3>Welcome to the Dashboard</h3>
|
|
1334
|
+
<p style="color: rgba(15, 23, 42, 0.6);">Try clicking the sidebar toggle button to collapse/expand the sidebar.</p>
|
|
1335
|
+
<div style="margin-top: 2rem; padding: 1.5rem; background: var(--color-muted); border-radius: 8px;">
|
|
1336
|
+
<p style="margin: 0; font-size: 0.95rem;">This is a full-featured layout with header, sidebar, content, and footer.</p>
|
|
1337
|
+
</div>
|
|
1338
|
+
</div>
|
|
1339
|
+
</ui-layout-content>
|
|
1340
|
+
</ui-layout>
|
|
1341
|
+
|
|
1342
|
+
<ui-layout-footer height="50">
|
|
1343
|
+
<div style="font-size: 0.9rem;">© 2026 Dashboard App</div>
|
|
1344
|
+
<div style="font-size: 0.85rem; color: rgba(15, 23, 42, 0.6);">v1.0.0</div>
|
|
1345
|
+
</ui-layout-footer>
|
|
1346
|
+
</ui-layout>
|
|
1347
|
+
</div>
|
|
1348
|
+
</div>
|
|
1349
|
+
|
|
1350
|
+
<div class="demo-section">
|
|
1351
|
+
<h2>Sidebar Collapse Event</h2>
|
|
1352
|
+
<div class="demo-info">
|
|
1353
|
+
<p>Listen to <code>collapsed-change</code> event to react to sidebar state changes.</p>
|
|
1354
|
+
<div class="event-output" id="eventOutput">Click the sidebar toggle to see events...</div>
|
|
1355
|
+
</div>
|
|
1356
|
+
<div class="layout-example" style="height: 300px;">
|
|
1357
|
+
<ui-layout direction="horizontal">
|
|
1358
|
+
<ui-layout-sidebar id="eventSidebar" collapsible width="220">
|
|
1359
|
+
<div class="sidebar-item">Item 1</div>
|
|
1360
|
+
<div class="sidebar-item">Item 2</div>
|
|
1361
|
+
<div class="sidebar-item">Item 3</div>
|
|
1362
|
+
</ui-layout-sidebar>
|
|
1363
|
+
<ui-layout-content>
|
|
1364
|
+
<div class="content-placeholder">Content</div>
|
|
1365
|
+
</ui-layout-content>
|
|
1366
|
+
</ui-layout>
|
|
1367
|
+
</div>
|
|
1368
|
+
</div>
|
|
1369
|
+
`,Tt=`
|
|
1370
|
+
:host {
|
|
1371
|
+
display: block;
|
|
1372
|
+
color: var(--color-ink);
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
h1 {
|
|
1376
|
+
font-size: 2.2rem;
|
|
1377
|
+
margin-bottom: 0.5rem;
|
|
1378
|
+
font-weight: 700;
|
|
1379
|
+
}
|
|
1380
|
+
|
|
1381
|
+
h2 {
|
|
1382
|
+
font-size: 1.4rem;
|
|
1383
|
+
margin: 2rem 0 1rem;
|
|
1384
|
+
font-weight: 600;
|
|
1385
|
+
border-bottom: 2px solid var(--color-primary);
|
|
1386
|
+
padding-bottom: 0.5rem;
|
|
1387
|
+
}
|
|
1388
|
+
|
|
1389
|
+
h3 {
|
|
1390
|
+
font-size: 1.2rem;
|
|
1391
|
+
margin: 0 0 0.75rem;
|
|
1392
|
+
font-weight: 600;
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
p {
|
|
1396
|
+
line-height: 1.6;
|
|
1397
|
+
color: rgba(15, 23, 42, 0.75);
|
|
1398
|
+
margin: 0 0 1rem;
|
|
1399
|
+
}
|
|
1400
|
+
|
|
1401
|
+
code {
|
|
1402
|
+
background: var(--color-muted);
|
|
1403
|
+
padding: 0.2rem 0.5rem;
|
|
1404
|
+
border-radius: 4px;
|
|
1405
|
+
font-family: "Cascadia Mono", "Fira Code", monospace;
|
|
1406
|
+
font-size: 0.9rem;
|
|
1407
|
+
color: var(--color-primary);
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
.demo-intro {
|
|
1411
|
+
background: linear-gradient(135deg, rgba(36, 236, 113, 0.08) 0%, rgba(52, 168, 235, 0.05) 100%);
|
|
1412
|
+
padding: 1.5rem;
|
|
1413
|
+
border-radius: 12px;
|
|
1414
|
+
border-left: 4px solid var(--color-primary);
|
|
1415
|
+
margin-bottom: 2rem;
|
|
1416
|
+
}
|
|
1417
|
+
|
|
1418
|
+
.demo-section {
|
|
1419
|
+
margin-bottom: 3rem;
|
|
1420
|
+
}
|
|
1421
|
+
|
|
1422
|
+
.layout-example {
|
|
1423
|
+
background: var(--color-surface);
|
|
1424
|
+
border: 1px solid var(--color-border);
|
|
1425
|
+
border-radius: 12px;
|
|
1426
|
+
overflow: hidden;
|
|
1427
|
+
height: 400px;
|
|
1428
|
+
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
|
|
1429
|
+
margin-top: 1rem;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
.layout-example.full-height {
|
|
1433
|
+
height: 550px;
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
.content-placeholder {
|
|
1437
|
+
width: 100%;
|
|
1438
|
+
height: 100%;
|
|
1439
|
+
display: flex;
|
|
1440
|
+
align-items: center;
|
|
1441
|
+
justify-content: center;
|
|
1442
|
+
background: var(--color-bg);
|
|
1443
|
+
font-size: 1.1rem;
|
|
1444
|
+
font-weight: 500;
|
|
1445
|
+
color: rgba(15, 23, 42, 0.5);
|
|
1446
|
+
}
|
|
1447
|
+
|
|
1448
|
+
.sidebar-label {
|
|
1449
|
+
font-size: 0.75rem;
|
|
1450
|
+
font-weight: 700;
|
|
1451
|
+
text-transform: uppercase;
|
|
1452
|
+
letter-spacing: 0.1em;
|
|
1453
|
+
color: rgba(15, 23, 42, 0.5);
|
|
1454
|
+
padding: 0.75rem 1rem 0.5rem;
|
|
1455
|
+
margin-top: 0.5rem;
|
|
1456
|
+
}
|
|
1457
|
+
|
|
1458
|
+
.sidebar-item {
|
|
1459
|
+
padding: 0.75rem 1rem;
|
|
1460
|
+
cursor: pointer;
|
|
1461
|
+
transition: all 0.2s ease;
|
|
1462
|
+
font-size: 0.95rem;
|
|
1463
|
+
color: var(--color-ink);
|
|
1464
|
+
user-select: none;
|
|
1465
|
+
}
|
|
1466
|
+
|
|
1467
|
+
.sidebar-item:hover {
|
|
1468
|
+
background: var(--color-muted);
|
|
1469
|
+
color: var(--color-primary);
|
|
1470
|
+
}
|
|
1471
|
+
|
|
1472
|
+
.sidebar-section {
|
|
1473
|
+
padding: 0.5rem 0;
|
|
1474
|
+
}
|
|
1475
|
+
|
|
1476
|
+
.demo-info {
|
|
1477
|
+
background: var(--color-muted);
|
|
1478
|
+
padding: 1.5rem;
|
|
1479
|
+
border-radius: 8px;
|
|
1480
|
+
margin-bottom: 1rem;
|
|
1481
|
+
}
|
|
1482
|
+
|
|
1483
|
+
.event-output {
|
|
1484
|
+
background: #0f172a;
|
|
1485
|
+
color: #f8fafc;
|
|
1486
|
+
padding: 1rem;
|
|
1487
|
+
border-radius: 6px;
|
|
1488
|
+
font-family: "Cascadia Mono", "Fira Code", monospace;
|
|
1489
|
+
font-size: 0.85rem;
|
|
1490
|
+
margin-top: 0.5rem;
|
|
1491
|
+
line-height: 1.5;
|
|
1492
|
+
max-height: 150px;
|
|
1493
|
+
overflow-y: auto;
|
|
1494
|
+
}
|
|
1495
|
+
|
|
1496
|
+
.event-output.empty {
|
|
1497
|
+
opacity: 0.6;
|
|
1498
|
+
}
|
|
1499
|
+
|
|
1500
|
+
/* Custom scrollbar */
|
|
1501
|
+
.event-output::-webkit-scrollbar {
|
|
1502
|
+
width: 6px;
|
|
1503
|
+
}
|
|
1504
|
+
|
|
1505
|
+
.event-output::-webkit-scrollbar-track {
|
|
1506
|
+
background: rgba(248, 250, 252, 0.1);
|
|
1507
|
+
border-radius: 3px;
|
|
1508
|
+
}
|
|
1509
|
+
|
|
1510
|
+
.event-output::-webkit-scrollbar-thumb {
|
|
1511
|
+
background: rgba(248, 250, 252, 0.3);
|
|
1512
|
+
border-radius: 3px;
|
|
1513
|
+
}
|
|
1514
|
+
|
|
1515
|
+
.event-output::-webkit-scrollbar-thumb:hover {
|
|
1516
|
+
background: rgba(248, 250, 252, 0.5);
|
|
1517
|
+
}
|
|
1518
|
+
`;class rt extends b{async connectedCallback(){super.connectedCallback(),await new Promise(a=>requestAnimationFrame(a)),await customElements.whenDefined("ui-layout-sidebar"),await new Promise(a=>setTimeout(a,50)),this.setupEventListeners()}setupEventListeners(){if(!this.shadowRoot)return;const a=this.shadowRoot.querySelector("#eventSidebar");if(a){const t=e=>{var s;const o=e,i=this.shadowRoot.querySelector("#eventOutput");if(i){const n=o.detail.collapsed,l=`[${new Date().toLocaleTimeString()}] Sidebar ${n?"collapsed":"expanded"}`,c=((s=i.textContent)==null?void 0:s.split(`
|
|
1519
|
+
`).filter(h=>h.trim()))||[];c.length>=5&&c.shift(),c.push(l),i.textContent=c.join(`
|
|
1520
|
+
`),i.classList.remove("empty"),i.scrollTop=i.scrollHeight}};a.addEventListener("collapsed-change",t)}}render(){this.shadowRoot.innerHTML=`
|
|
1521
|
+
<style>${Tt}</style>
|
|
1522
|
+
${Rt}
|
|
1523
|
+
`}}customElements.define("layout-demo",rt);const Mt=Object.freeze(Object.defineProperty({__proto__:null,LayoutDemo:rt},Symbol.toStringTag,{value:"Module"})),Pt=`<h1>📅 Date Picker Component Demo</h1>
|
|
1524
|
+
|
|
1525
|
+
<div class="demo-section">
|
|
1526
|
+
<h2>Different Date Formats</h2>
|
|
1527
|
+
|
|
1528
|
+
<div class="picker-row">
|
|
1529
|
+
<div class="picker-label">Format: YYYY-MM-DD (ISO)</div>
|
|
1530
|
+
<div class="picker-controls">
|
|
1531
|
+
<ui-date-picker id="picker1" format="YYYY-MM-DD"></ui-date-picker>
|
|
1532
|
+
<ui-button class="clear-btn" data-picker="picker1" variant="secondary">Clear</ui-button>
|
|
1533
|
+
</div>
|
|
1534
|
+
<div class="output" id="output-picker1">Select a date to see the output</div>
|
|
1535
|
+
</div>
|
|
1536
|
+
|
|
1537
|
+
<div class="picker-row">
|
|
1538
|
+
<div class="picker-label">Format: DD/MM/YYYY (European)</div>
|
|
1539
|
+
<div class="picker-controls">
|
|
1540
|
+
<ui-date-picker id="picker2" format="DD/MM/YYYY"></ui-date-picker>
|
|
1541
|
+
<ui-button class="clear-btn" data-picker="picker2" variant="secondary">Clear</ui-button>
|
|
1542
|
+
</div>
|
|
1543
|
+
<div class="output" id="output-picker2">Select a date to see the output</div>
|
|
1544
|
+
</div>
|
|
1545
|
+
|
|
1546
|
+
<div class="picker-row">
|
|
1547
|
+
<div class="picker-label">Format: MM/DD/YYYY (US)</div>
|
|
1548
|
+
<div class="picker-controls">
|
|
1549
|
+
<ui-date-picker id="picker3" format="MM/DD/YYYY"></ui-date-picker>
|
|
1550
|
+
<ui-button class="clear-btn" data-picker="picker3" variant="secondary">Clear</ui-button>
|
|
1551
|
+
</div>
|
|
1552
|
+
<div class="output" id="output-picker3">Select a date to see the output</div>
|
|
1553
|
+
</div>
|
|
1554
|
+
|
|
1555
|
+
<div class="picker-row">
|
|
1556
|
+
<div class="picker-label">Format: DD-MM-YYYY</div>
|
|
1557
|
+
<div class="picker-controls">
|
|
1558
|
+
<ui-date-picker id="picker4" format="DD-MM-YYYY"></ui-date-picker>
|
|
1559
|
+
<ui-button class="clear-btn" data-picker="picker4" variant="secondary">Clear</ui-button>
|
|
1560
|
+
</div>
|
|
1561
|
+
<div class="output" id="output-picker4">Select a date to see the output</div>
|
|
1562
|
+
</div>
|
|
1563
|
+
|
|
1564
|
+
<div class="picker-row">
|
|
1565
|
+
<div class="picker-label">Format: MM-DD-YYYY</div>
|
|
1566
|
+
<div class="picker-controls">
|
|
1567
|
+
<ui-date-picker id="picker5" format="MM-DD-YYYY"></ui-date-picker>
|
|
1568
|
+
<ui-button class="clear-btn" data-picker="picker5" variant="secondary">Clear</ui-button>
|
|
1569
|
+
</div>
|
|
1570
|
+
<div class="output" id="output-picker5">Select a date to see the output</div>
|
|
1571
|
+
</div>
|
|
1572
|
+
</div>
|
|
1573
|
+
|
|
1574
|
+
<div class="demo-section">
|
|
1575
|
+
<h2>With Constraints</h2>
|
|
1576
|
+
|
|
1577
|
+
<div class="picker-row">
|
|
1578
|
+
<div class="picker-label">With Min and Max Dates</div>
|
|
1579
|
+
<div class="picker-controls">
|
|
1580
|
+
<ui-date-picker id="picker6" format="DD/MM/YYYY" min="2026-01-01" max="2026-12-31"></ui-date-picker>
|
|
1581
|
+
<ui-button class="clear-btn" data-picker="picker6" variant="secondary">Clear</ui-button>
|
|
1582
|
+
</div>
|
|
1583
|
+
<div class="output" id="output-picker6">Only dates in 2026 are allowed</div>
|
|
1584
|
+
</div>
|
|
1585
|
+
|
|
1586
|
+
<div class="picker-row">
|
|
1587
|
+
<div class="picker-label">Disabled State</div>
|
|
1588
|
+
<div class="picker-controls">
|
|
1589
|
+
<ui-date-picker id="picker7" format="DD/MM/YYYY" disabled></ui-date-picker>
|
|
1590
|
+
</div>
|
|
1591
|
+
<div class="output" id="output-picker7">This picker is disabled</div>
|
|
1592
|
+
</div>
|
|
1593
|
+
|
|
1594
|
+
<div class="picker-row">
|
|
1595
|
+
<div class="picker-label">With Initial Value</div>
|
|
1596
|
+
<div class="picker-controls">
|
|
1597
|
+
<ui-date-picker id="picker8" format="DD/MM/YYYY" value="2026-02-26"></ui-date-picker>
|
|
1598
|
+
<ui-button class="clear-btn" data-picker="picker8" variant="secondary">Clear</ui-button>
|
|
1599
|
+
</div>
|
|
1600
|
+
<div class="output" id="output-picker8">Initial value: 2026-02-26</div>
|
|
1601
|
+
</div>
|
|
1602
|
+
</div>
|
|
1603
|
+
|
|
1604
|
+
<div class="demo-section">
|
|
1605
|
+
<h2>Usage Example</h2>
|
|
1606
|
+
<div class="code-block">
|
|
1607
|
+
<code><ui-date-picker
|
|
1608
|
+
format="DD/MM/YYYY"
|
|
1609
|
+
value="2026-02-26"
|
|
1610
|
+
min="2026-01-01"
|
|
1611
|
+
max="2026-12-31"
|
|
1612
|
+
></ui-date-picker>
|
|
1613
|
+
|
|
1614
|
+
<script>
|
|
1615
|
+
const picker = document.querySelector('ui-date-picker');
|
|
1616
|
+
|
|
1617
|
+
// Listen to date changes
|
|
1618
|
+
picker.addEventListener('date-change', (e) => {
|
|
1619
|
+
console.log('ISO Value:', e.detail.value);
|
|
1620
|
+
console.log('Formatted Value:', e.detail.formattedValue);
|
|
1621
|
+
console.log('Format:', e.detail.format);
|
|
1622
|
+
});
|
|
1623
|
+
|
|
1624
|
+
// Programmatic API
|
|
1625
|
+
picker.setValue('2026-03-15');
|
|
1626
|
+
console.log(picker.getISOValue()); // "2026-03-15"
|
|
1627
|
+
console.log(picker.getFormattedValue()); // "15/03/2026"
|
|
1628
|
+
picker.clear();
|
|
1629
|
+
</script></code>
|
|
1630
|
+
</div>
|
|
1631
|
+
</div>
|
|
1632
|
+
`,Yt=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}h1{font-size:2rem;margin-bottom:2rem;color:var(--color-ink, #0f172a)}h2{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:3rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.picker-row{margin-bottom:2rem}.picker-label{font-weight:600;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}.picker-controls{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}ui-date-picker{flex:1;min-width:250px}.output{margin-top:1rem;padding:1rem;background:#f8fafc;border-radius:8px;font-family:Courier New,monospace;font-size:.85rem;white-space:pre-wrap;color:#334155}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto;margin:1rem 0}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}";class lt extends b{connectedCallback(){super.connectedCallback(),this.attachEventListeners()}attachEventListeners(){if(!this.shadowRoot)return;this.shadowRoot.querySelectorAll("ui-date-picker").forEach(t=>{t.addEventListener("date-change",e=>{var i;const o=(i=this.shadowRoot)==null?void 0:i.querySelector(`#output-${t.id}`);o&&(o.textContent=JSON.stringify(e.detail,null,2))})}),this.shadowRoot.addEventListener("click",t=>{var o,i;const e=t.target;if(e.closest(".clear-btn")){const s=(o=e.closest(".clear-btn"))==null?void 0:o.getAttribute("data-picker"),n=(i=this.shadowRoot)==null?void 0:i.querySelector(`#${s}`);n&&n.clear&&n.clear()}})}render(){this.shadowRoot.innerHTML=`
|
|
1633
|
+
<style>${Yt}</style>
|
|
1634
|
+
${Pt}
|
|
1635
|
+
`}}customElements.define("date-picker-demo",lt);const qt=Object.freeze(Object.defineProperty({__proto__:null,DatePickerDemo:lt},Symbol.toStringTag,{value:"Module"})),Bt=`<h1>Table Demo</h1>
|
|
1636
|
+
<p class="intro">Example of loading JSON data and rendering a table.</p>
|
|
1637
|
+
|
|
1638
|
+
<div class="demo-section">
|
|
1639
|
+
<div class="section-header">
|
|
1640
|
+
<h2>Data Source</h2>
|
|
1641
|
+
<span class="status" id="data-status">Loading...</span>
|
|
1642
|
+
</div>
|
|
1643
|
+
<div class="code-block">
|
|
1644
|
+
<code>fetch('https://dummyjson.com/products')</code>
|
|
1645
|
+
</div>
|
|
1646
|
+
</div>
|
|
1647
|
+
|
|
1648
|
+
<div class="demo-section">
|
|
1649
|
+
<h2>Table</h2>
|
|
1650
|
+
<div class="action-message" id="action-message" style="display: none;"></div>
|
|
1651
|
+
<ui-table id="demo-table"></ui-table>
|
|
1652
|
+
<div class="meta" id="data-meta"></div>
|
|
1653
|
+
<ui-pagination></ui-pagination>
|
|
1654
|
+
</div>
|
|
1655
|
+
|
|
1656
|
+
|
|
1657
|
+
<ui-modal id="confirmModal" title="Confirm Delete" size="sm">
|
|
1658
|
+
<p>Are you sure you want to delete this item?</p>
|
|
1659
|
+
<p style="color: #ef4444; font-size: 0.875rem;">This action cannot be undone.</p>
|
|
1660
|
+
<div slot="footer">
|
|
1661
|
+
<ui-button id="confirmCancel" variant="ghost">Cancel</ui-button>
|
|
1662
|
+
<ui-button id="confirmDelete" variant="danger" icon="trash-2">Confirm</ui-button>
|
|
1663
|
+
</div>
|
|
1664
|
+
</ui-modal>`,Ot=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.status{font-size:.85rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:#e2e8f0;color:#334155}.status.loading{background:#fde68a;color:#92400e}.status.success{background:#bbf7d0;color:#166534}.status.error{background:#fecaca;color:#b91c1c}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}.meta{margin-top:.75rem;margin-bottom:.75rem;font-size:.85rem;color:#64748b}ui-pagination{margin-top:1rem}.json-output{margin:0;background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:8px;overflow-x:auto;font-size:.85rem}";class dt extends b{constructor(){super(...arguments);p(this,"hasLoaded",!1);p(this,"loading",!1);p(this,"error",null);p(this,"data",null);p(this,"currentPage",1);p(this,"pageSize",10)}connectedCallback(){super.connectedCallback(),this.hasLoaded||(this.hasLoaded=!0,this.loadData())}async loadData(){this.loading=!0,this.error=null,this.render();try{const t=(this.currentPage-1)*this.pageSize,e=await D.get(`https://dummyjson.com/products?limit=${this.pageSize}&skip=${t}`),o=[{key:"id",label:"ID",align:"right",visible:!1},{key:"title",label:"Title"},{key:"brand",label:"Brand"},{key:"category",label:"Category"},{key:"price",label:"Price",align:"right"},{key:"rating",label:"Rating",align:"right"},{key:"stock",label:"Stock",align:"right"},{key:"actions",label:"Actions",align:"center",actions:{edit:!0,delete:!0}}],i=e.products.map(s=>({id:s.id,title:s.title,brand:s.brand,category:s.category,price:`$${s.price.toFixed(2)}`,rating:s.rating.toFixed(1),stock:s.stock}));this.data={columns:o,rows:i,meta:{total:e.total,limit:e.limit,skip:e.skip}},this.loading=!1,this.render()}catch(t){this.loading=!1,this.error=t instanceof Error?t.message:"Unknown error",this.render()}}showActionMessage(t){const e=this.shadowRoot.querySelector("#action-message");e&&(e.textContent=t,e.style.display="block",setTimeout(()=>{const o=this.shadowRoot.querySelector("#action-message");o&&(o.style.display="none")},5e3))}render(){var l,c;this.shadowRoot.innerHTML=`
|
|
1665
|
+
<style>${Ot}</style>
|
|
1666
|
+
${Bt}
|
|
1667
|
+
`;const t=this.shadowRoot.querySelector("#data-status"),e=ot(this.shadowRoot,"#confirmModal"),o=this.shadowRoot.getElementById("confirmDelete"),i=this.shadowRoot.getElementById("confirmCancel");i==null||i.addEventListener("click",()=>{e==null||e.close()}),t&&(t.textContent=this.loading?"Loading...":this.error?"Error":"Loaded",t.className=`status ${this.loading?"loading":this.error?"error":"success"}`);const s=tt(this.shadowRoot,"#demo-table");s&&this.data&&(s.data={columns:this.data.columns,rows:this.data.rows});const n=et(this.shadowRoot,"ui-pagination");if(n&&((l=this.data)!=null&&l.meta)){n.total=this.data.meta.total,n.currentPage=this.currentPage,n.pageSize=this.pageSize;const h=n.cloneNode(!0);(c=n.parentNode)==null||c.replaceChild(h,n),h.addEventListener("page-change",u=>{this.currentPage=u.detail.page,this.loadData()})}const r=this.shadowRoot.querySelector("#demo-table");r&&(r.addEventListener("edit-action",h=>{const{row:u}=h.detail;this.showActionMessage(`EDIT clicked for "${u.id}: ${u.title}"`)}),r.addEventListener("delete-action",h=>{const{row:u}=h.detail;console.log(`DELETE clicked for "${u.id}: ${u.title}"`),e==null||e.open(),o==null||o.addEventListener("click",()=>{e==null||e.close(),this.showActionMessage(`DELETE confirmed for "${u.id}: ${u.title}"`)})}))}}customElements.define("table-demo",dt);const Ft=Object.freeze(Object.defineProperty({__proto__:null,TableDemo:dt},Symbol.toStringTag,{value:"Module"})),Ht=`<section class="form-hero">
|
|
1668
|
+
<div>
|
|
1669
|
+
<h1>Form Elements</h1>
|
|
1670
|
+
<p class="hero-subtitle">
|
|
1671
|
+
Bring inputs, selects, checkboxes, uploads, and native fields together in one cohesive flow.
|
|
1672
|
+
</p>
|
|
1673
|
+
</div>
|
|
1674
|
+
</section>
|
|
1675
|
+
|
|
1676
|
+
<section class="form-shell">
|
|
1677
|
+
<form id="formLab" class="form-grid">
|
|
1678
|
+
<div class="form-panel">
|
|
1679
|
+
<h2>Project setup</h2>
|
|
1680
|
+
<p>Collect the essentials to launch a workspace.</p>
|
|
1681
|
+
|
|
1682
|
+
<ui-input label="Workspace name" placeholder="Studio Atlas" name="workspace" required></ui-input>
|
|
1683
|
+
<ui-input label="Owner email" type="email" placeholder="owner@company.com" name="ownerEmail" required></ui-input>
|
|
1684
|
+
|
|
1685
|
+
<div class="split">
|
|
1686
|
+
<ui-select id="roleSelect" label="Default role" name="role"></ui-select>
|
|
1687
|
+
<ui-select id="regionSelect" label="Region" name="region"></ui-select>
|
|
1688
|
+
|
|
1689
|
+
</div>
|
|
1690
|
+
<ui-select id="categorySelect" label="Category" name="category"></ui-select>
|
|
1691
|
+
<ui-date-picker label="Launch date" name="launchDate" placeholder="Select date" format="MM/DD/YYYY"></ui-date-picker>
|
|
1692
|
+
|
|
1693
|
+
<ui-upload
|
|
1694
|
+
label="Brand assets"
|
|
1695
|
+
helper="Upload logos or product shots. PNG, JPG, or SVG."
|
|
1696
|
+
name="brandAssets"
|
|
1697
|
+
accept=".png,.jpg,.jpeg,.svg"
|
|
1698
|
+
multiple
|
|
1699
|
+
></ui-upload>
|
|
1700
|
+
</div>
|
|
1701
|
+
|
|
1702
|
+
<div class="form-actions">
|
|
1703
|
+
<ui-button type="submit" variant="primary" icon="check">Save form</ui-button>
|
|
1704
|
+
<ui-button type="button" id="resetForm" variant="ghost">Reset</ui-button>
|
|
1705
|
+
</div>
|
|
1706
|
+
</form>
|
|
1707
|
+
|
|
1708
|
+
<div class="form-output">
|
|
1709
|
+
<div class="output-head">
|
|
1710
|
+
<h3>Helper output</h3>
|
|
1711
|
+
<span>getFormValues()</span>
|
|
1712
|
+
</div>
|
|
1713
|
+
<pre id="formResult">Submit the form to see values.</pre>
|
|
1714
|
+
</div>
|
|
1715
|
+
</section>
|
|
1716
|
+
`,jt=`
|
|
1717
|
+
:host {
|
|
1718
|
+
display: block;
|
|
1719
|
+
color: var(--color-ink);
|
|
1720
|
+
}
|
|
1721
|
+
|
|
1722
|
+
.form-hero {
|
|
1723
|
+
display: flex;
|
|
1724
|
+
justify-content: space-between;
|
|
1725
|
+
align-items: center;
|
|
1726
|
+
gap: 1.5rem;
|
|
1727
|
+
padding: 2rem;
|
|
1728
|
+
border-radius: 20px;
|
|
1729
|
+
background: radial-gradient(circle at top left, rgba(36, 236, 113, 0.2), transparent 45%),
|
|
1730
|
+
linear-gradient(135deg, rgba(52, 168, 235, 0.12), rgba(255, 255, 255, 0.95));
|
|
1731
|
+
border: 1px solid rgba(52, 168, 235, 0.2);
|
|
1732
|
+
margin-bottom: 2rem;
|
|
1733
|
+
flex-wrap: wrap;
|
|
1734
|
+
}
|
|
1735
|
+
|
|
1736
|
+
.eyebrow {
|
|
1737
|
+
text-transform: uppercase;
|
|
1738
|
+
letter-spacing: 0.2em;
|
|
1739
|
+
font-size: 0.7rem;
|
|
1740
|
+
color: rgba(15, 23, 42, 0.55);
|
|
1741
|
+
margin: 0 0 0.75rem;
|
|
1742
|
+
font-weight: 700;
|
|
1743
|
+
}
|
|
1744
|
+
|
|
1745
|
+
h1 {
|
|
1746
|
+
font-size: 2.4rem;
|
|
1747
|
+
margin: 0 0 0.5rem;
|
|
1748
|
+
}
|
|
1749
|
+
|
|
1750
|
+
.hero-subtitle {
|
|
1751
|
+
max-width: 520px;
|
|
1752
|
+
margin: 0;
|
|
1753
|
+
color: rgba(15, 23, 42, 0.65);
|
|
1754
|
+
font-size: 1rem;
|
|
1755
|
+
line-height: 1.6;
|
|
1756
|
+
}
|
|
1757
|
+
|
|
1758
|
+
.hero-chip {
|
|
1759
|
+
padding: 0.4rem 0.9rem;
|
|
1760
|
+
border-radius: 999px;
|
|
1761
|
+
font-size: 0.75rem;
|
|
1762
|
+
font-weight: 700;
|
|
1763
|
+
text-transform: uppercase;
|
|
1764
|
+
letter-spacing: 0.14em;
|
|
1765
|
+
background: #0f172a;
|
|
1766
|
+
color: #ffffff;
|
|
1767
|
+
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
|
|
1768
|
+
}
|
|
1769
|
+
|
|
1770
|
+
.form-shell {
|
|
1771
|
+
display: grid;
|
|
1772
|
+
grid-template-columns: minmax(0, 1fr) 320px;
|
|
1773
|
+
gap: 2rem;
|
|
1774
|
+
}
|
|
1775
|
+
|
|
1776
|
+
.form-grid {
|
|
1777
|
+
display: grid;
|
|
1778
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1779
|
+
gap: 1.5rem;
|
|
1780
|
+
align-items: start;
|
|
1781
|
+
}
|
|
1782
|
+
|
|
1783
|
+
.form-panel {
|
|
1784
|
+
padding: 1.5rem;
|
|
1785
|
+
border-radius: 16px;
|
|
1786
|
+
border: 1px solid rgba(148, 163, 184, 0.3);
|
|
1787
|
+
background: #ffffff;
|
|
1788
|
+
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
|
|
1789
|
+
display: flex;
|
|
1790
|
+
flex-direction: column;
|
|
1791
|
+
gap: 1rem;
|
|
1792
|
+
}
|
|
1793
|
+
|
|
1794
|
+
.form-panel h2 {
|
|
1795
|
+
margin: 0;
|
|
1796
|
+
font-size: 1.35rem;
|
|
1797
|
+
}
|
|
1798
|
+
|
|
1799
|
+
.form-panel p {
|
|
1800
|
+
margin: 0;
|
|
1801
|
+
color: rgba(15, 23, 42, 0.6);
|
|
1802
|
+
font-size: 0.95rem;
|
|
1803
|
+
}
|
|
1804
|
+
|
|
1805
|
+
.split {
|
|
1806
|
+
display: grid;
|
|
1807
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1808
|
+
gap: 1rem;
|
|
1809
|
+
}
|
|
1810
|
+
|
|
1811
|
+
textarea {
|
|
1812
|
+
min-height: 120px;
|
|
1813
|
+
padding: 0.75rem 0.85rem;
|
|
1814
|
+
font-size: 0.95rem;
|
|
1815
|
+
font-family: inherit;
|
|
1816
|
+
border: 1.5px solid var(--color-border);
|
|
1817
|
+
border-radius: 8px;
|
|
1818
|
+
background: #ffffff;
|
|
1819
|
+
color: var(--color-ink);
|
|
1820
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
1821
|
+
}
|
|
1822
|
+
|
|
1823
|
+
textarea:focus {
|
|
1824
|
+
outline: none;
|
|
1825
|
+
border-color: var(--color-primary);
|
|
1826
|
+
box-shadow: 0 0 0 3px rgba(36, 236, 113, 0.15);
|
|
1827
|
+
}
|
|
1828
|
+
|
|
1829
|
+
.native-group {
|
|
1830
|
+
display: flex;
|
|
1831
|
+
flex-direction: column;
|
|
1832
|
+
gap: 0.4rem;
|
|
1833
|
+
font-size: 0.9rem;
|
|
1834
|
+
color: var(--color-ink);
|
|
1835
|
+
}
|
|
1836
|
+
|
|
1837
|
+
.native-group select {
|
|
1838
|
+
padding: 0.65rem 0.85rem;
|
|
1839
|
+
border: 1.5px solid var(--color-border);
|
|
1840
|
+
border-radius: 8px;
|
|
1841
|
+
font-size: 0.95rem;
|
|
1842
|
+
font-family: inherit;
|
|
1843
|
+
background: #ffffff;
|
|
1844
|
+
color: var(--color-ink);
|
|
1845
|
+
}
|
|
1846
|
+
|
|
1847
|
+
.checkbox-stack {
|
|
1848
|
+
display: grid;
|
|
1849
|
+
gap: 0.75rem;
|
|
1850
|
+
}
|
|
1851
|
+
|
|
1852
|
+
.checkbox-inline {
|
|
1853
|
+
display: grid;
|
|
1854
|
+
gap: 0.5rem;
|
|
1855
|
+
font-size: 0.9rem;
|
|
1856
|
+
color: var(--color-ink);
|
|
1857
|
+
}
|
|
1858
|
+
|
|
1859
|
+
.inline-options {
|
|
1860
|
+
display: flex;
|
|
1861
|
+
gap: 1rem;
|
|
1862
|
+
flex-wrap: wrap;
|
|
1863
|
+
}
|
|
1864
|
+
|
|
1865
|
+
.inline-options label {
|
|
1866
|
+
display: flex;
|
|
1867
|
+
align-items: center;
|
|
1868
|
+
gap: 0.4rem;
|
|
1869
|
+
}
|
|
1870
|
+
|
|
1871
|
+
.form-actions {
|
|
1872
|
+
grid-column: 1 / -1;
|
|
1873
|
+
display: flex;
|
|
1874
|
+
gap: 0.75rem;
|
|
1875
|
+
align-items: center;
|
|
1876
|
+
}
|
|
1877
|
+
|
|
1878
|
+
.form-output {
|
|
1879
|
+
background: #0f172a;
|
|
1880
|
+
color: #f8fafc;
|
|
1881
|
+
border-radius: 16px;
|
|
1882
|
+
padding: 1.5rem;
|
|
1883
|
+
display: flex;
|
|
1884
|
+
flex-direction: column;
|
|
1885
|
+
gap: 1rem;
|
|
1886
|
+
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
|
|
1887
|
+
height: fit-content;
|
|
1888
|
+
position: sticky;
|
|
1889
|
+
top: 1.5rem;
|
|
1890
|
+
}
|
|
1891
|
+
|
|
1892
|
+
.output-head {
|
|
1893
|
+
display: flex;
|
|
1894
|
+
justify-content: space-between;
|
|
1895
|
+
align-items: center;
|
|
1896
|
+
font-size: 0.85rem;
|
|
1897
|
+
text-transform: uppercase;
|
|
1898
|
+
letter-spacing: 0.14em;
|
|
1899
|
+
color: rgba(248, 250, 252, 0.7);
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
.output-head h3 {
|
|
1903
|
+
margin: 0;
|
|
1904
|
+
font-size: 0.95rem;
|
|
1905
|
+
color: #ffffff;
|
|
1906
|
+
}
|
|
1907
|
+
|
|
1908
|
+
pre {
|
|
1909
|
+
margin: 0;
|
|
1910
|
+
white-space: pre-wrap;
|
|
1911
|
+
font-family: "Cascadia Mono", "Fira Code", monospace;
|
|
1912
|
+
font-size: 0.82rem;
|
|
1913
|
+
line-height: 1.5;
|
|
1914
|
+
background: rgba(15, 23, 42, 0.45);
|
|
1915
|
+
padding: 1rem;
|
|
1916
|
+
border-radius: 12px;
|
|
1917
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1918
|
+
}
|
|
1919
|
+
|
|
1920
|
+
@media (max-width: 1024px) {
|
|
1921
|
+
.form-shell {
|
|
1922
|
+
grid-template-columns: 1fr;
|
|
1923
|
+
}
|
|
1924
|
+
|
|
1925
|
+
.form-output {
|
|
1926
|
+
position: static;
|
|
1927
|
+
}
|
|
1928
|
+
}
|
|
1929
|
+
|
|
1930
|
+
@media (max-width: 720px) {
|
|
1931
|
+
.form-grid {
|
|
1932
|
+
grid-template-columns: 1fr;
|
|
1933
|
+
}
|
|
1934
|
+
|
|
1935
|
+
.split {
|
|
1936
|
+
grid-template-columns: 1fr;
|
|
1937
|
+
}
|
|
1938
|
+
|
|
1939
|
+
h1 {
|
|
1940
|
+
font-size: 2rem;
|
|
1941
|
+
}
|
|
1942
|
+
}
|
|
1943
|
+
`,_t=[{value:"admin",label:"Administrator"},{value:"manager",label:"Manager"},{value:"developer",label:"Developer"},{value:"designer",label:"Designer"}],Ut=[{value:"us-east",label:"US East"},{value:"us-west",label:"US West"},{value:"eu-west",label:"EU West"},{value:"apac",label:"APAC"}];class Nt extends b{async connectedCallback(){super.connectedCallback(),await new Promise(a=>requestAnimationFrame(a)),await Promise.all([customElements.whenDefined("ui-select"),customElements.whenDefined("ui-upload"),customElements.whenDefined("ui-input"),customElements.whenDefined("ui-checkbox"),customElements.whenDefined("ui-date-picker")]),await new Promise(a=>setTimeout(a,50)),this.setupSelects(),this.setupForm()}async setupSelects(){const a=k(this.shadowRoot,"#roleSelect"),t=k(this.shadowRoot,"#regionSelect"),e=k(this.shadowRoot,"#categorySelect"),o=await D.get("https://dummyjson.com/products/categories");if(a&&a.setAttribute("options",JSON.stringify(_t)),t&&t.setAttribute("options",JSON.stringify(Ut)),e&&Array.isArray(o)){const i=o.map(s=>({value:s.slug,label:s.name}));e.setAttribute("options",JSON.stringify(i))}}setupForm(){const a=k(this.shadowRoot,"#formLab"),t=k(this.shadowRoot,"#formResult"),e=k(this.shadowRoot,"#resetForm");if(!a){console.error("Form not found");return}a.addEventListener("submit",o=>{if(o.preventDefault(),!t)return;const i=ft(a);if(!i.isValid){const r=Object.entries(i.errors).map(([l,c])=>`${l}: ${c}`).join(`
|
|
1944
|
+
`);t.textContent=`Validation Errors:
|
|
1945
|
+
${r}`;return}const s=at(a,{includeEmpty:!1}),n=JSON.stringify(s,(r,l)=>l instanceof File?`File: ${l.name} (${(l.size/1024).toFixed(1)} KB)`:l,2);t.textContent=n}),e==null||e.addEventListener("click",()=>{var o,i,s,n,r;a==null||a.reset(),t&&(t.textContent="Submit the form to see values."),(o=this.shadowRoot)==null||o.querySelectorAll("ui-input").forEach(l=>{l.value=""}),(i=this.shadowRoot)==null||i.querySelectorAll("ui-select").forEach(l=>{l.removeAttribute("value")}),(s=this.shadowRoot)==null||s.querySelectorAll("ui-checkbox").forEach(l=>{var c;(c=l.setChecked)==null||c.call(l,!1)}),(n=this.shadowRoot)==null||n.querySelectorAll("ui-date-picker").forEach(l=>{l.removeAttribute("value")}),(r=this.shadowRoot)==null||r.querySelectorAll("ui-upload").forEach(l=>{var c;(c=l.clear)==null||c.call(l)})})}render(){this.shadowRoot.innerHTML=`
|
|
1946
|
+
<style>${jt}</style>
|
|
1947
|
+
${Ht}
|
|
1948
|
+
`}}customElements.define("form-demo-page",Nt);const Vt=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),Wt=`
|
|
1949
|
+
<div class="demo-container">
|
|
1950
|
+
<h1>Modal Component Demo</h1>
|
|
1951
|
+
<p>Interactive modals with various sizes and configurations.</p>
|
|
1952
|
+
|
|
1953
|
+
<div class="demo-section">
|
|
1954
|
+
<h2>Basic Modals</h2>
|
|
1955
|
+
<div class="demo-controls">
|
|
1956
|
+
<ui-button id="openBasicModal" variant="primary" icon="maximize-2">
|
|
1957
|
+
Open Basic Modal
|
|
1958
|
+
</ui-button>
|
|
1959
|
+
<ui-button id="openSmallModal" variant="secondary">
|
|
1960
|
+
Small Modal
|
|
1961
|
+
</ui-button>
|
|
1962
|
+
<ui-button id="openLargeModal" variant="secondary">
|
|
1963
|
+
Large Modal
|
|
1964
|
+
</ui-button>
|
|
1965
|
+
</div>
|
|
1966
|
+
</div>
|
|
1967
|
+
|
|
1968
|
+
<div class="demo-section">
|
|
1969
|
+
<h2>Modal Behaviors</h2>
|
|
1970
|
+
<div class="demo-controls">
|
|
1971
|
+
<ui-button id="openNoEscapeModal" variant="ghost">
|
|
1972
|
+
No Close on Escape
|
|
1973
|
+
</ui-button>
|
|
1974
|
+
<ui-button id="openNoBackdropModal" variant="ghost">
|
|
1975
|
+
No Close on Backdrop
|
|
1976
|
+
</ui-button>
|
|
1977
|
+
</div>
|
|
1978
|
+
</div>
|
|
1979
|
+
|
|
1980
|
+
<div class="demo-section">
|
|
1981
|
+
<h2>Confirmation Modal</h2>
|
|
1982
|
+
<div class="demo-controls">
|
|
1983
|
+
<ui-button id="openConfirmModal" variant="primary" icon="alert-circle">
|
|
1984
|
+
Delete Item
|
|
1985
|
+
</ui-button>
|
|
1986
|
+
</div>
|
|
1987
|
+
<div id="confirmResult" class="result-display" style="display: none;">
|
|
1988
|
+
<strong>Result:</strong> <span id="confirmText"></span>
|
|
1989
|
+
</div>
|
|
1990
|
+
</div>
|
|
1991
|
+
|
|
1992
|
+
<!-- Modals -->
|
|
1993
|
+
<ui-modal id="basicModal" title="Welcome!" size="md">
|
|
1994
|
+
<p>This is a basic modal with a title and content.</p>
|
|
1995
|
+
<p>You can close it by:</p>
|
|
1996
|
+
<ul>
|
|
1997
|
+
<li>Clicking the X button</li>
|
|
1998
|
+
<li>Pressing the Escape key</li>
|
|
1999
|
+
<li>Clicking outside the modal</li>
|
|
2000
|
+
</ul>
|
|
2001
|
+
<div slot="footer">
|
|
2002
|
+
<ui-button id="basicModalClose" variant="secondary">Close</ui-button>
|
|
2003
|
+
<ui-button id="basicModalOk" variant="primary">Got it!</ui-button>
|
|
2004
|
+
</div>
|
|
2005
|
+
</ui-modal>
|
|
2006
|
+
|
|
2007
|
+
<ui-modal id="smallModal" title="Small Modal" size="sm">
|
|
2008
|
+
<p>This is a small modal perfect for quick messages or confirmations.</p>
|
|
2009
|
+
<div slot="footer">
|
|
2010
|
+
<ui-button id="smallModalClose" variant="primary">Close</ui-button>
|
|
2011
|
+
</div>
|
|
2012
|
+
</ui-modal>
|
|
2013
|
+
|
|
2014
|
+
<ui-modal id="largeModal" title="Large Modal" size="lg">
|
|
2015
|
+
<p>This is a large modal that can contain more content.</p>
|
|
2016
|
+
<div style="height: 400px; background: #f1f5f9; border-radius: 8px; padding: 1rem; margin: 1rem 0;">
|
|
2017
|
+
<p><strong>Scrollable Content Area</strong></p>
|
|
2018
|
+
<p>When content exceeds the modal height, it automatically becomes scrollable.</p>
|
|
2019
|
+
${Array(20).fill("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>").join("")}
|
|
2020
|
+
</div>
|
|
2021
|
+
<div slot="footer">
|
|
2022
|
+
<ui-button id="largeModalClose" variant="primary">Close</ui-button>
|
|
2023
|
+
</div>
|
|
2024
|
+
</ui-modal>
|
|
2025
|
+
|
|
2026
|
+
<ui-modal id="noEscapeModal" title="No Escape Close" size="md" no-close-on-escape>
|
|
2027
|
+
<p>This modal cannot be closed by pressing the Escape key.</p>
|
|
2028
|
+
<p>You must click the close button or click outside.</p>
|
|
2029
|
+
<div slot="footer">
|
|
2030
|
+
<ui-button id="noEscapeClose" variant="primary">Close</ui-button>
|
|
2031
|
+
</div>
|
|
2032
|
+
</ui-modal>
|
|
2033
|
+
|
|
2034
|
+
<ui-modal id="noBackdropModal" title="No Backdrop Close" size="md" no-close-on-backdrop>
|
|
2035
|
+
<p>This modal cannot be closed by clicking the backdrop.</p>
|
|
2036
|
+
<p>You must use the close button or press Escape.</p>
|
|
2037
|
+
<div slot="footer">
|
|
2038
|
+
<ui-button id="noBackdropClose" variant="primary">Close</ui-button>
|
|
2039
|
+
</div>
|
|
2040
|
+
</ui-modal>
|
|
2041
|
+
|
|
2042
|
+
<ui-modal id="confirmModal" title="Confirm Delete" size="sm">
|
|
2043
|
+
<p>Are you sure you want to delete this item?</p>
|
|
2044
|
+
<p style="color: #ef4444; font-size: 0.875rem;">This action cannot be undone.</p>
|
|
2045
|
+
<div slot="footer">
|
|
2046
|
+
<ui-button id="confirmCancel" variant="ghost">Cancel</ui-button>
|
|
2047
|
+
<ui-button id="confirmDelete" variant="primary" icon="trash-2">Delete</ui-button>
|
|
2048
|
+
</div>
|
|
2049
|
+
</ui-modal>
|
|
2050
|
+
</div>
|
|
2051
|
+
`,Gt=`
|
|
2052
|
+
.demo-container {
|
|
2053
|
+
padding: 2rem;
|
|
2054
|
+
max-width: 1200px;
|
|
2055
|
+
margin: 0 auto;
|
|
2056
|
+
}
|
|
2057
|
+
|
|
2058
|
+
.demo-container h1 {
|
|
2059
|
+
font-size: 2rem;
|
|
2060
|
+
margin-bottom: 0.5rem;
|
|
2061
|
+
color: var(--color-ink);
|
|
2062
|
+
}
|
|
2063
|
+
|
|
2064
|
+
.demo-container > p {
|
|
2065
|
+
color: var(--color-text-muted);
|
|
2066
|
+
margin-bottom: 2rem;
|
|
2067
|
+
}
|
|
2068
|
+
|
|
2069
|
+
.demo-section {
|
|
2070
|
+
margin-bottom: 3rem;
|
|
2071
|
+
padding-bottom: 2rem;
|
|
2072
|
+
border-bottom: 1px solid var(--color-border);
|
|
2073
|
+
}
|
|
2074
|
+
|
|
2075
|
+
.demo-section:last-child {
|
|
2076
|
+
border-bottom: none;
|
|
2077
|
+
}
|
|
2078
|
+
|
|
2079
|
+
.demo-section h2 {
|
|
2080
|
+
font-size: 1.5rem;
|
|
2081
|
+
margin-bottom: 1rem;
|
|
2082
|
+
color: var(--color-ink);
|
|
2083
|
+
}
|
|
2084
|
+
|
|
2085
|
+
.demo-controls {
|
|
2086
|
+
display: flex;
|
|
2087
|
+
gap: 1rem;
|
|
2088
|
+
flex-wrap: wrap;
|
|
2089
|
+
margin-top: 1rem;
|
|
2090
|
+
}
|
|
2091
|
+
|
|
2092
|
+
.result-display {
|
|
2093
|
+
margin-top: 1rem;
|
|
2094
|
+
padding: 1rem;
|
|
2095
|
+
background: var(--color-muted);
|
|
2096
|
+
border-radius: var(--radius-md);
|
|
2097
|
+
border-left: 4px solid var(--color-primary);
|
|
2098
|
+
}
|
|
2099
|
+
|
|
2100
|
+
ul {
|
|
2101
|
+
margin: 1rem 0;
|
|
2102
|
+
padding-left: 1.5rem;
|
|
2103
|
+
}
|
|
2104
|
+
|
|
2105
|
+
li {
|
|
2106
|
+
margin: 0.5rem 0;
|
|
2107
|
+
}
|
|
2108
|
+
`;class Jt extends b{async connectedCallback(){super.connectedCallback(),await Promise.all([customElements.whenDefined("ui-modal"),customElements.whenDefined("ui-button")]),await new Promise(a=>setTimeout(a,10)),this.setupEventListeners()}setupEventListeners(){const a=this.shadowRoot.getElementById("openBasicModal"),t=this.shadowRoot.getElementById("basicModal"),e=this.shadowRoot.getElementById("basicModalClose"),o=this.shadowRoot.getElementById("basicModalOk");a==null||a.addEventListener("click",()=>t==null?void 0:t.open()),e==null||e.addEventListener("click",()=>t==null?void 0:t.close()),o==null||o.addEventListener("click",()=>t==null?void 0:t.close());const i=this.shadowRoot.getElementById("openSmallModal"),s=this.shadowRoot.getElementById("smallModal"),n=this.shadowRoot.getElementById("smallModalClose");i==null||i.addEventListener("click",()=>s==null?void 0:s.open()),n==null||n.addEventListener("click",()=>s==null?void 0:s.close());const r=this.shadowRoot.getElementById("openLargeModal"),l=this.shadowRoot.getElementById("largeModal"),c=this.shadowRoot.getElementById("largeModalClose");r==null||r.addEventListener("click",()=>l==null?void 0:l.open()),c==null||c.addEventListener("click",()=>l==null?void 0:l.close());const h=this.shadowRoot.getElementById("openNoEscapeModal"),u=this.shadowRoot.getElementById("noEscapeModal"),g=this.shadowRoot.getElementById("noEscapeClose");h==null||h.addEventListener("click",()=>u==null?void 0:u.open()),g==null||g.addEventListener("click",()=>u==null?void 0:u.close());const x=this.shadowRoot.getElementById("openNoBackdropModal"),w=this.shadowRoot.getElementById("noBackdropModal"),z=this.shadowRoot.getElementById("noBackdropClose");x==null||x.addEventListener("click",()=>w==null?void 0:w.open()),z==null||z.addEventListener("click",()=>w==null?void 0:w.close());const $=this.shadowRoot.getElementById("openConfirmModal"),C=this.shadowRoot.getElementById("confirmModal"),T=this.shadowRoot.getElementById("confirmCancel"),M=this.shadowRoot.getElementById("confirmDelete"),L=this.shadowRoot.getElementById("confirmResult"),E=this.shadowRoot.getElementById("confirmText");$==null||$.addEventListener("click",()=>C==null?void 0:C.open()),T==null||T.addEventListener("click",()=>{C==null||C.close(),L&&E&&(L.style.display="block",E.textContent="Cancelled",E.style.color="#64748b")}),M==null||M.addEventListener("click",()=>{C==null||C.close(),L&&E&&(L.style.display="block",E.textContent="Item deleted!",E.style.color="#ef4444")})}render(){this.shadowRoot.innerHTML=`
|
|
2109
|
+
<style>${Gt}</style>
|
|
2110
|
+
${Wt}
|
|
2111
|
+
`}}customElements.define("modal-demo-page",Jt);const Qt=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),Xt=`<h1>Tabs Demo</h1>
|
|
2112
|
+
<p class="intro">A simple tabs component with slotted tabs and panels.</p>
|
|
2113
|
+
|
|
2114
|
+
<div class="demo-section">
|
|
2115
|
+
<h2>Basic Tabs</h2>
|
|
2116
|
+
<ui-tabs id="basicTabs" active="overview">
|
|
2117
|
+
<button slot="tab" data-tab="overview">Overview</button>
|
|
2118
|
+
<button slot="tab" data-tab="usage">Usage</button>
|
|
2119
|
+
<button slot="tab" data-tab="api">API</button>
|
|
2120
|
+
|
|
2121
|
+
<div slot="panel" data-tab="overview">
|
|
2122
|
+
<p>Use tabs to group related content without navigating away.</p>
|
|
2123
|
+
<ul>
|
|
2124
|
+
<li>Accessible roles and ARIA labels</li>
|
|
2125
|
+
<li>Slotted tabs and panels</li>
|
|
2126
|
+
<li>Simple active state</li>
|
|
2127
|
+
</ul>
|
|
2128
|
+
</div>
|
|
2129
|
+
<div slot="panel" data-tab="usage">
|
|
2130
|
+
<p>Set the active tab by using the <code>active</code> attribute.</p>
|
|
2131
|
+
<pre><code><ui-tabs active="overview">...</ui-tabs></code></pre>
|
|
2132
|
+
</div>
|
|
2133
|
+
<div slot="panel" data-tab="api">
|
|
2134
|
+
<p>Listen for <code>tab-change</code> events to react to changes.</p>
|
|
2135
|
+
</div>
|
|
2136
|
+
</ui-tabs>
|
|
2137
|
+
</div>
|
|
2138
|
+
|
|
2139
|
+
<div class="demo-section">
|
|
2140
|
+
<h2>Product Tabs</h2>
|
|
2141
|
+
<ui-tabs id="productTabs">
|
|
2142
|
+
<button slot="tab" data-tab="details">Details</button>
|
|
2143
|
+
<button slot="tab" data-tab="specs">Specs</button>
|
|
2144
|
+
<button slot="tab" data-tab="shipping">Shipping</button>
|
|
2145
|
+
|
|
2146
|
+
<div slot="panel" data-tab="details">
|
|
2147
|
+
<p><strong>Storm Speaker</strong> is built for portable, punchy sound.</p>
|
|
2148
|
+
</div>
|
|
2149
|
+
<div slot="panel" data-tab="specs">
|
|
2150
|
+
<ul>
|
|
2151
|
+
<li>Battery: 18 hours</li>
|
|
2152
|
+
<li>Water resistance: IPX5</li>
|
|
2153
|
+
<li>Bluetooth: 5.3</li>
|
|
2154
|
+
</ul>
|
|
2155
|
+
</div>
|
|
2156
|
+
<div slot="panel" data-tab="shipping">
|
|
2157
|
+
<p>Ships in 1-2 business days. Free returns within 30 days.</p>
|
|
2158
|
+
</div>
|
|
2159
|
+
</ui-tabs>
|
|
2160
|
+
<div class="result" id="tab-result" style="display: none;">
|
|
2161
|
+
Active tab: <span id="tab-value"></span>
|
|
2162
|
+
</div>
|
|
2163
|
+
</div>
|
|
2164
|
+
`,Kt=":host{display:block;padding:2rem;max-width:1100px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.result{margin-top:1rem;padding:.75rem 1rem;border-radius:10px;background:#f1f5f9;color:#1e293b;font-weight:600}pre{background:#0f172a;color:#e2e8f0;padding:.75rem 1rem;border-radius:10px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem}";class ct extends b{render(){var t;this.shadowRoot.innerHTML=`
|
|
2165
|
+
<style>${Kt}</style>
|
|
2166
|
+
${Xt}
|
|
2167
|
+
`;const a=this.shadowRoot.querySelector("#productTabs");if(a){const e=a.cloneNode(!0);(t=a.parentNode)==null||t.replaceChild(e,a),e.addEventListener("tab-change",o=>{const i=this.shadowRoot.getElementById("tab-result"),s=this.shadowRoot.getElementById("tab-value");i&&s&&(i.style.display="block",s.textContent=o.detail.id)})}}}customElements.define("tabs-demo",ct);const Zt=Object.freeze(Object.defineProperty({__proto__:null,TabsDemo:ct},Symbol.toStringTag,{value:"Module"}));class te extends b{render(){this.shadowRoot.innerHTML=`
|
|
2168
|
+
<style>
|
|
2169
|
+
:host {
|
|
2170
|
+
display: block;
|
|
2171
|
+
width: 100%;
|
|
2172
|
+
}
|
|
2173
|
+
|
|
2174
|
+
.demo-section {
|
|
2175
|
+
margin-bottom: 48px;
|
|
2176
|
+
}
|
|
2177
|
+
|
|
2178
|
+
.demo-section h2 {
|
|
2179
|
+
font: 600 24px/1.3 "Sora", system-ui, sans-serif;
|
|
2180
|
+
color: #0f172a;
|
|
2181
|
+
margin: 0 0 8px 0;
|
|
2182
|
+
letter-spacing: -0.02em;
|
|
2183
|
+
}
|
|
2184
|
+
|
|
2185
|
+
.demo-section p {
|
|
2186
|
+
font: 400 14px/1.5 "Inter", system-ui, sans-serif;
|
|
2187
|
+
color: #6b7280;
|
|
2188
|
+
margin: 0 0 24px 0;
|
|
2189
|
+
}
|
|
2190
|
+
|
|
2191
|
+
.card-grid {
|
|
2192
|
+
display: grid;
|
|
2193
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
2194
|
+
gap: 24px;
|
|
2195
|
+
}
|
|
2196
|
+
|
|
2197
|
+
.card-content {
|
|
2198
|
+
display: flex;
|
|
2199
|
+
flex-direction: column;
|
|
2200
|
+
gap: 12px;
|
|
2201
|
+
}
|
|
2202
|
+
|
|
2203
|
+
.card-content h3 {
|
|
2204
|
+
font: 600 18px/1.3 "Sora", system-ui, sans-serif;
|
|
2205
|
+
color: #0f172a;
|
|
2206
|
+
margin: 0;
|
|
2207
|
+
}
|
|
2208
|
+
|
|
2209
|
+
.card-content p {
|
|
2210
|
+
font: 400 14px/1.6 "Inter", system-ui, sans-serif;
|
|
2211
|
+
color: #6b7280;
|
|
2212
|
+
margin: 0;
|
|
2213
|
+
}
|
|
2214
|
+
|
|
2215
|
+
.tag {
|
|
2216
|
+
display: inline-block;
|
|
2217
|
+
padding: 4px 12px;
|
|
2218
|
+
border-radius: 6px;
|
|
2219
|
+
font: 500 12px/1.4 "Inter", system-ui, sans-serif;
|
|
2220
|
+
background: #f0f9ff;
|
|
2221
|
+
color: #0284c7;
|
|
2222
|
+
border: 1px solid #bae6fd;
|
|
2223
|
+
}
|
|
2224
|
+
|
|
2225
|
+
.tag.success {
|
|
2226
|
+
background: #f0fdf4;
|
|
2227
|
+
color: #15803d;
|
|
2228
|
+
border-color: #bbf7d0;
|
|
2229
|
+
}
|
|
2230
|
+
|
|
2231
|
+
.tag.warning {
|
|
2232
|
+
background: #fef3c7;
|
|
2233
|
+
color: #ca8a04;
|
|
2234
|
+
border-color: #fde68a;
|
|
2235
|
+
}
|
|
2236
|
+
|
|
2237
|
+
.tag.error {
|
|
2238
|
+
background: #fee2e2;
|
|
2239
|
+
color: #dc2626;
|
|
2240
|
+
border-color: #fecaca;
|
|
2241
|
+
}
|
|
2242
|
+
</style>
|
|
2243
|
+
|
|
2244
|
+
<div class="demo-section">
|
|
2245
|
+
<h2>Card Component Demo</h2>
|
|
2246
|
+
<p>Flexible card component with customizable shadows, colors, and variants.</p>
|
|
2247
|
+
</div>
|
|
2248
|
+
|
|
2249
|
+
<div class="demo-section">
|
|
2250
|
+
<h2>Default Cards</h2>
|
|
2251
|
+
<p>Standard card with minimal shadow.</p>
|
|
2252
|
+
<div class="card-grid">
|
|
2253
|
+
<ui-card shadow elevation="sm">
|
|
2254
|
+
<div class="card-content">
|
|
2255
|
+
<h3>Default Card</h3>
|
|
2256
|
+
<p>This is a default card with rounded corners and a subtle shadow.</p>
|
|
2257
|
+
<span class="tag">Default</span>
|
|
2258
|
+
</div>
|
|
2259
|
+
</ui-card>
|
|
2260
|
+
|
|
2261
|
+
<ui-card shadow elevation="md">
|
|
2262
|
+
<div class="card-content">
|
|
2263
|
+
<h3>Medium Elevation</h3>
|
|
2264
|
+
<p>Card with medium elevation for more prominence.</p>
|
|
2265
|
+
<span class="tag success">Elevated</span>
|
|
2266
|
+
</div>
|
|
2267
|
+
</ui-card>
|
|
2268
|
+
|
|
2269
|
+
<ui-card shadow elevation="lg">
|
|
2270
|
+
<div class="card-content">
|
|
2271
|
+
<h3>High Elevation</h3>
|
|
2272
|
+
<p>High elevation for important content that needs attention.</p>
|
|
2273
|
+
<span class="tag warning">Important</span>
|
|
2274
|
+
</div>
|
|
2275
|
+
</ui-card>
|
|
2276
|
+
</div>
|
|
2277
|
+
</div>
|
|
2278
|
+
|
|
2279
|
+
<div class="demo-section">
|
|
2280
|
+
<h2>Card Variants</h2>
|
|
2281
|
+
<p>Different visual styles for various use cases.</p>
|
|
2282
|
+
<div class="card-grid">
|
|
2283
|
+
<ui-card variant="default" shadow elevation="sm">
|
|
2284
|
+
<div class="card-content">
|
|
2285
|
+
<h3>Default Variant</h3>
|
|
2286
|
+
<p>Standard card style with border and background.</p>
|
|
2287
|
+
</div>
|
|
2288
|
+
</ui-card>
|
|
2289
|
+
|
|
2290
|
+
<ui-card variant="elevated" shadow elevation="md">
|
|
2291
|
+
<div class="card-content">
|
|
2292
|
+
<h3>Elevated Variant</h3>
|
|
2293
|
+
<p>Premium look with gradient background and glow effect on hover.</p>
|
|
2294
|
+
</div>
|
|
2295
|
+
</ui-card>
|
|
2296
|
+
|
|
2297
|
+
<ui-card variant="bordered" shadow elevation="sm">
|
|
2298
|
+
<div class="card-content">
|
|
2299
|
+
<h3>Bordered Variant</h3>
|
|
2300
|
+
<p>Strong border for emphasis and structure.</p>
|
|
2301
|
+
</div>
|
|
2302
|
+
</ui-card>
|
|
2303
|
+
|
|
2304
|
+
<ui-card variant="ghost">
|
|
2305
|
+
<div class="card-content">
|
|
2306
|
+
<h3>Ghost Variant</h3>
|
|
2307
|
+
<p>Subtle dashed border with transparent background.</p>
|
|
2308
|
+
</div>
|
|
2309
|
+
</ui-card>
|
|
2310
|
+
</div>
|
|
2311
|
+
</div>
|
|
2312
|
+
|
|
2313
|
+
<div class="demo-section">
|
|
2314
|
+
<h2>Custom Shadow Colors</h2>
|
|
2315
|
+
<p>Cards with colored shadows for creative effects.</p>
|
|
2316
|
+
<div class="card-grid">
|
|
2317
|
+
<ui-card shadow shadow-color="99, 102, 241" elevation="lg">
|
|
2318
|
+
<div class="card-content">
|
|
2319
|
+
<h3>Blue Shadow</h3>
|
|
2320
|
+
<p>Card with a blue-tinted shadow for a cool, modern look.</p>
|
|
2321
|
+
<span class="tag">RGB: 99, 102, 241</span>
|
|
2322
|
+
</div>
|
|
2323
|
+
</ui-card>
|
|
2324
|
+
|
|
2325
|
+
<ui-card shadow shadow-color="236, 72, 153" elevation="lg">
|
|
2326
|
+
<div class="card-content">
|
|
2327
|
+
<h3>Pink Shadow</h3>
|
|
2328
|
+
<p>Vibrant pink shadow creates an energetic, playful aesthetic.</p>
|
|
2329
|
+
<span class="tag error">RGB: 236, 72, 153</span>
|
|
2330
|
+
</div>
|
|
2331
|
+
</ui-card>
|
|
2332
|
+
|
|
2333
|
+
<ui-card shadow shadow-color="16, 185, 129" elevation="lg">
|
|
2334
|
+
<div class="card-content">
|
|
2335
|
+
<h3>Green Shadow</h3>
|
|
2336
|
+
<p>Fresh green shadow perfect for success states and nature themes.</p>
|
|
2337
|
+
<span class="tag success">RGB: 16, 185, 129</span>
|
|
2338
|
+
</div>
|
|
2339
|
+
</ui-card>
|
|
2340
|
+
|
|
2341
|
+
<ui-card shadow shadow-color="251, 146, 60" elevation="lg">
|
|
2342
|
+
<div class="card-content">
|
|
2343
|
+
<h3>Orange Shadow</h3>
|
|
2344
|
+
<p>Warm orange shadow adds energy and attention-grabbing appeal.</p>
|
|
2345
|
+
<span class="tag warning">RGB: 251, 146, 60</span>
|
|
2346
|
+
</div>
|
|
2347
|
+
</ui-card>
|
|
2348
|
+
</div>
|
|
2349
|
+
</div>
|
|
2350
|
+
|
|
2351
|
+
<div class="demo-section">
|
|
2352
|
+
<h2>Rounded Options</h2>
|
|
2353
|
+
<p>Control corner radius with the rounded attribute.</p>
|
|
2354
|
+
<div class="card-grid">
|
|
2355
|
+
<ui-card rounded="true" shadow elevation="md">
|
|
2356
|
+
<div class="card-content">
|
|
2357
|
+
<h3>Rounded Card</h3>
|
|
2358
|
+
<p>Default rounded corners (16px radius) for a soft, friendly appearance.</p>
|
|
2359
|
+
</div>
|
|
2360
|
+
</ui-card>
|
|
2361
|
+
|
|
2362
|
+
<ui-card rounded="false" shadow elevation="md">
|
|
2363
|
+
<div class="card-content">
|
|
2364
|
+
<h3>Square Card</h3>
|
|
2365
|
+
<p>Sharp corners for a modern, geometric aesthetic.</p>
|
|
2366
|
+
</div>
|
|
2367
|
+
</ui-card>
|
|
2368
|
+
</div>
|
|
2369
|
+
</div>
|
|
2370
|
+
|
|
2371
|
+
<div class="demo-section">
|
|
2372
|
+
<h2>No Shadow</h2>
|
|
2373
|
+
<p>Cards without shadow for minimal designs.</p>
|
|
2374
|
+
<div class="card-grid">
|
|
2375
|
+
<ui-card>
|
|
2376
|
+
<div class="card-content">
|
|
2377
|
+
<h3>Flat Card</h3>
|
|
2378
|
+
<p>Minimal card with no shadow, perfect for clean, flat design systems.</p>
|
|
2379
|
+
</div>
|
|
2380
|
+
</ui-card>
|
|
2381
|
+
|
|
2382
|
+
<ui-card rounded="false">
|
|
2383
|
+
<div class="card-content">
|
|
2384
|
+
<h3>Flat Square Card</h3>
|
|
2385
|
+
<p>Flat card with square corners for brutalist or industrial aesthetics.</p>
|
|
2386
|
+
</div>
|
|
2387
|
+
</ui-card>
|
|
2388
|
+
</div>
|
|
2389
|
+
</div>
|
|
2390
|
+
`}}customElements.define("card-demo-page",te);const ee=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),oe=`<div class="demo-container">
|
|
2391
|
+
<h1>Toast Component Demo</h1>
|
|
2392
|
+
<p>Elegant notification system with smooth animations and glassmorphic design.</p>
|
|
2393
|
+
|
|
2394
|
+
<div class="demo-section">
|
|
2395
|
+
<h2>With Descriptions</h2>
|
|
2396
|
+
<div class="demo-controls">
|
|
2397
|
+
<ui-button id="showSuccessDesc" variant="primary">
|
|
2398
|
+
Success with Details
|
|
2399
|
+
</ui-button>
|
|
2400
|
+
<ui-button id="showErrorDesc" variant="danger">
|
|
2401
|
+
Error with Details
|
|
2402
|
+
</ui-button>
|
|
2403
|
+
<ui-button id="showWarningDesc" variant="secondary">
|
|
2404
|
+
Warning with Details
|
|
2405
|
+
</ui-button>
|
|
2406
|
+
</div>
|
|
2407
|
+
</div>
|
|
2408
|
+
|
|
2409
|
+
<div class="demo-section">
|
|
2410
|
+
<h2>Duration Options</h2>
|
|
2411
|
+
<div class="demo-controls">
|
|
2412
|
+
<ui-button id="showQuick" variant="ghost">
|
|
2413
|
+
Quick (2s)
|
|
2414
|
+
</ui-button>
|
|
2415
|
+
<ui-button id="showNormal" variant="ghost">
|
|
2416
|
+
Normal (5s)
|
|
2417
|
+
</ui-button>
|
|
2418
|
+
<ui-button id="showLong" variant="ghost">
|
|
2419
|
+
Long (10s)
|
|
2420
|
+
</ui-button>
|
|
2421
|
+
<ui-button id="showPersistent" variant="ghost">
|
|
2422
|
+
Persistent (No auto-dismiss)
|
|
2423
|
+
</ui-button>
|
|
2424
|
+
</div>
|
|
2425
|
+
</div>
|
|
2426
|
+
|
|
2427
|
+
<div class="demo-section">
|
|
2428
|
+
<h2>Position Control</h2>
|
|
2429
|
+
<p class="demo-hint">Change toast container position</p>
|
|
2430
|
+
<div class="demo-controls position-grid">
|
|
2431
|
+
<ui-button id="posTopLeft" variant="ghost" size="sm">
|
|
2432
|
+
Top Left
|
|
2433
|
+
</ui-button>
|
|
2434
|
+
<ui-button id="posTopCenter" variant="ghost" size="sm">
|
|
2435
|
+
Top Center
|
|
2436
|
+
</ui-button>
|
|
2437
|
+
<ui-button id="posTopRight" variant="ghost" size="sm">
|
|
2438
|
+
Top Right
|
|
2439
|
+
</ui-button>
|
|
2440
|
+
<ui-button id="posBottomLeft" variant="ghost" size="sm">
|
|
2441
|
+
Bottom Left
|
|
2442
|
+
</ui-button>
|
|
2443
|
+
<ui-button id="posBottomCenter" variant="ghost" size="sm">
|
|
2444
|
+
Bottom Center
|
|
2445
|
+
</ui-button>
|
|
2446
|
+
<ui-button id="posBottomRight" variant="ghost" size="sm">
|
|
2447
|
+
Bottom Right
|
|
2448
|
+
</ui-button>
|
|
2449
|
+
</div>
|
|
2450
|
+
</div>
|
|
2451
|
+
|
|
2452
|
+
<div class="demo-section">
|
|
2453
|
+
<h2>Multiple Toasts</h2>
|
|
2454
|
+
<div class="demo-controls">
|
|
2455
|
+
<ui-button id="showMultiple" variant="primary" icon="layers">
|
|
2456
|
+
Show Multiple Toasts
|
|
2457
|
+
</ui-button>
|
|
2458
|
+
<ui-button id="dismissAll" variant="danger" icon="x">
|
|
2459
|
+
Dismiss All
|
|
2460
|
+
</ui-button>
|
|
2461
|
+
</div>
|
|
2462
|
+
</div>
|
|
2463
|
+
|
|
2464
|
+
|
|
2465
|
+
|
|
2466
|
+
<div class="current-position">
|
|
2467
|
+
Current position: <strong id="currentPosition">top-right</strong>
|
|
2468
|
+
</div>
|
|
2469
|
+
</div>
|
|
2470
|
+
|
|
2471
|
+
<!-- Toast Container -->
|
|
2472
|
+
<ui-toast id="toastContainer"></ui-toast>
|
|
2473
|
+
`,ie=`.demo-container {
|
|
2474
|
+
max-width: 1000px;
|
|
2475
|
+
margin: 0 auto;
|
|
2476
|
+
padding: 2rem;
|
|
2477
|
+
}
|
|
2478
|
+
|
|
2479
|
+
h1 {
|
|
2480
|
+
font-size: 2rem;
|
|
2481
|
+
font-weight: 700;
|
|
2482
|
+
color: var(--color-ink);
|
|
2483
|
+
margin: 0 0 0.5rem 0;
|
|
2484
|
+
}
|
|
2485
|
+
|
|
2486
|
+
h1 + p {
|
|
2487
|
+
color: #64748b;
|
|
2488
|
+
margin: 0 0 2rem 0;
|
|
2489
|
+
font-size: 1.05rem;
|
|
2490
|
+
}
|
|
2491
|
+
|
|
2492
|
+
.demo-section {
|
|
2493
|
+
background: var(--color-muted);
|
|
2494
|
+
border-radius: 12px;
|
|
2495
|
+
padding: 1.5rem;
|
|
2496
|
+
margin-bottom: 1.5rem;
|
|
2497
|
+
}
|
|
2498
|
+
|
|
2499
|
+
.demo-section h2 {
|
|
2500
|
+
font-size: 1.25rem;
|
|
2501
|
+
font-weight: 600;
|
|
2502
|
+
color: var(--color-ink);
|
|
2503
|
+
margin: 0 0 0.75rem 0;
|
|
2504
|
+
}
|
|
2505
|
+
|
|
2506
|
+
.demo-hint {
|
|
2507
|
+
color: #64748b;
|
|
2508
|
+
font-size: 0.9rem;
|
|
2509
|
+
margin: 0 0 0.75rem 0;
|
|
2510
|
+
}
|
|
2511
|
+
|
|
2512
|
+
.demo-controls {
|
|
2513
|
+
display: flex;
|
|
2514
|
+
flex-wrap: wrap;
|
|
2515
|
+
gap: 0.75rem;
|
|
2516
|
+
align-items: center;
|
|
2517
|
+
}
|
|
2518
|
+
|
|
2519
|
+
.position-grid {
|
|
2520
|
+
display: grid;
|
|
2521
|
+
grid-template-columns: repeat(3, 1fr);
|
|
2522
|
+
gap: 0.5rem;
|
|
2523
|
+
}
|
|
2524
|
+
|
|
2525
|
+
.current-position {
|
|
2526
|
+
display: inline-block;
|
|
2527
|
+
background: var(--color-primary);
|
|
2528
|
+
color: white;
|
|
2529
|
+
padding: 0.75rem 1.25rem;
|
|
2530
|
+
border-radius: 8px;
|
|
2531
|
+
font-size: 0.95rem;
|
|
2532
|
+
margin-top: 1rem;
|
|
2533
|
+
}
|
|
2534
|
+
|
|
2535
|
+
.current-position strong {
|
|
2536
|
+
font-weight: 700;
|
|
2537
|
+
}
|
|
2538
|
+
|
|
2539
|
+
@media (max-width: 768px) {
|
|
2540
|
+
.demo-container {
|
|
2541
|
+
padding: 1rem;
|
|
2542
|
+
}
|
|
2543
|
+
|
|
2544
|
+
h1 {
|
|
2545
|
+
font-size: 1.5rem;
|
|
2546
|
+
}
|
|
2547
|
+
|
|
2548
|
+
.demo-section {
|
|
2549
|
+
padding: 1rem;
|
|
2550
|
+
}
|
|
2551
|
+
|
|
2552
|
+
.position-grid {
|
|
2553
|
+
grid-template-columns: repeat(2, 1fr);
|
|
2554
|
+
}
|
|
2555
|
+
}
|
|
2556
|
+
`;class ae extends b{constructor(){super(...arguments);p(this,"toastContainer",null);p(this,"isReady",!1);p(this,"currentPosition",this.useSignal("top-right"))}async connectedCallback(){super.connectedCallback(),await Promise.all([customElements.whenDefined("ui-toast"),customElements.whenDefined("ui-button")]),await new Promise(t=>setTimeout(t,10)),this.isReady=!0,this.render()}showSucessToast(){this.toastContainer&&this.toastContainer.success("Success!","This is a success toast message.",5e3)}setupEventListeners(){if(!this.toastContainer)return;v(this.shadowRoot,"showError","click",()=>{this.toastContainer.error("Error occurred!",void 0,5e3)}),v(this.shadowRoot,"showWarning","click",()=>{this.toastContainer.warning("Warning message",void 0,5e3)}),v(this.shadowRoot,"showInfo","click",()=>{this.toastContainer.info("Information",void 0,5e3)}),v(this.shadowRoot,"showSuccessDesc","click",()=>{this.toastContainer.success("Changes saved!","Your document has been successfully saved to the cloud.",5e3)}),v(this.shadowRoot,"showErrorDesc","click",()=>{this.toastContainer.error("Failed to connect","Unable to reach the server. Please check your internet connection.",5e3)}),v(this.shadowRoot,"showWarningDesc","click",()=>{this.toastContainer.warning("Storage almost full","You have used 95% of your available storage space.",5e3)}),v(this.shadowRoot,"showQuick","click",()=>{this.toastContainer.info("Quick notification","This will disappear in 2 seconds",2e3)}),v(this.shadowRoot,"showNormal","click",()=>{this.toastContainer.info("Normal duration","This will disappear in 5 seconds",5e3)}),v(this.shadowRoot,"showLong","click",()=>{this.toastContainer.info("Long duration","This will disappear in 10 seconds",1e4)}),v(this.shadowRoot,"showPersistent","click",()=>{this.toastContainer.info("Persistent notification","This will stay until you close it manually",0)});const t=e=>{this.currentPosition.set(e),this.toastContainer.info("Position changed",`Toast position is now ${e}`,3e3)};v(this.shadowRoot,"posTopLeft","click",()=>{t("top-left")}),v(this.shadowRoot,"posTopCenter","click",()=>{t("top-center")}),v(this.shadowRoot,"posTopRight","click",()=>{t("top-right")}),v(this.shadowRoot,"posBottomLeft","click",()=>{t("bottom-left")}),v(this.shadowRoot,"posBottomCenter","click",()=>{t("bottom-center")}),v(this.shadowRoot,"posBottomRight","click",()=>{t("bottom-right")}),v(this.shadowRoot,"showMultiple","click",()=>{setTimeout(()=>this.toastContainer.success("First notification","This is the first toast"),0),setTimeout(()=>this.toastContainer.info("Second notification","This is the second toast"),200),setTimeout(()=>this.toastContainer.warning("Third notification","This is the third toast"),400),setTimeout(()=>this.toastContainer.error("Fourth notification","This is the fourth toast"),600)}),v(this.shadowRoot,"dismissAll","click",()=>{this.toastContainer.dismissAll()})}getToastContainer(){return I(this.shadowRoot,"toastContainer")}render(){this.shadowRoot.innerHTML=`
|
|
2557
|
+
<style>${ie}</style>
|
|
2558
|
+
${oe}
|
|
2559
|
+
`;const t=I(this.shadowRoot,"currentPosition");t&&(t.textContent=this.currentPosition.get()),this.toastContainer=this.getToastContainer(),this.toastContainer&&this.toastContainer.setAttribute("position",this.currentPosition.get()),this.isReady&&this.setupEventListeners()}}customElements.define("toast-demo-page",ae);const ne=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),se=`
|
|
2560
|
+
<section class="stepper-hero">
|
|
2561
|
+
<div>
|
|
2562
|
+
<p class="eyebrow">Flow control</p>
|
|
2563
|
+
<h1>Stepper</h1>
|
|
2564
|
+
<p class="hero-subtitle">
|
|
2565
|
+
Guide users across multi-step journeys with clear progress, states, and actions.
|
|
2566
|
+
</p>
|
|
2567
|
+
</div>
|
|
2568
|
+
</section>
|
|
2569
|
+
|
|
2570
|
+
<section class="stepper-section">
|
|
2571
|
+
<div class="section-head">
|
|
2572
|
+
<h2>Interactive progress</h2>
|
|
2573
|
+
<p>Move between steps to preview states and content density.</p>
|
|
2574
|
+
</div>
|
|
2575
|
+
<div class="stepper-card">
|
|
2576
|
+
<ui-stepper id="interactiveStepper" size="md"></ui-stepper>
|
|
2577
|
+
<div class="stepper-preview" id="interactiveContent"></div>
|
|
2578
|
+
<div class="stepper-controls">
|
|
2579
|
+
<div class="status-pill" id="interactiveStatus">Step 2 of 5</div>
|
|
2580
|
+
<div class="actions">
|
|
2581
|
+
<ui-button id="prevStep" variant="secondary" size="sm">Previous</ui-button>
|
|
2582
|
+
<ui-button id="nextStep" variant="primary" size="sm">Next</ui-button>
|
|
2583
|
+
</div>
|
|
2584
|
+
</div>
|
|
2585
|
+
</div>
|
|
2586
|
+
</section>
|
|
2587
|
+
|
|
2588
|
+
<section class="stepper-section grid">
|
|
2589
|
+
<div class="stepper-card">
|
|
2590
|
+
<div class="section-head">
|
|
2591
|
+
<h2>Compact workflow</h2>
|
|
2592
|
+
<p>Small size for tight layouts or onboarding drawers.</p>
|
|
2593
|
+
</div>
|
|
2594
|
+
<ui-stepper id="compactStepper" size="sm"></ui-stepper>
|
|
2595
|
+
</div>
|
|
2596
|
+
<div class="stepper-card">
|
|
2597
|
+
<div class="section-head">
|
|
2598
|
+
<h2>Vertical journey</h2>
|
|
2599
|
+
<p>Perfect for forms, checklists, and long content.</p>
|
|
2600
|
+
</div>
|
|
2601
|
+
<ui-stepper id="verticalStepper" orientation="vertical" size="lg"></ui-stepper>
|
|
2602
|
+
</div>
|
|
2603
|
+
</section>
|
|
2604
|
+
|
|
2605
|
+
<section class="stepper-section">
|
|
2606
|
+
<div class="section-head">
|
|
2607
|
+
<h2>Status flavors</h2>
|
|
2608
|
+
<p>Explicit states like warning and error bring clarity to complex flows.</p>
|
|
2609
|
+
</div>
|
|
2610
|
+
<div class="stepper-card">
|
|
2611
|
+
<ui-stepper id="statusStepper" size="md"></ui-stepper>
|
|
2612
|
+
</div>
|
|
2613
|
+
</section>
|
|
2614
|
+
`,re=`
|
|
2615
|
+
:host {
|
|
2616
|
+
display: block;
|
|
2617
|
+
color: var(--color-ink);
|
|
2618
|
+
}
|
|
2619
|
+
|
|
2620
|
+
.stepper-hero {
|
|
2621
|
+
display: flex;
|
|
2622
|
+
justify-content: space-between;
|
|
2623
|
+
align-items: center;
|
|
2624
|
+
padding: 2rem;
|
|
2625
|
+
border-radius: 20px;
|
|
2626
|
+
background: radial-gradient(circle at top left, rgba(36, 236, 113, 0.2), transparent 45%),
|
|
2627
|
+
linear-gradient(135deg, rgba(52, 168, 235, 0.12), rgba(255, 255, 255, 0.9));
|
|
2628
|
+
border: 1px solid rgba(52, 168, 235, 0.2);
|
|
2629
|
+
margin-bottom: 2rem;
|
|
2630
|
+
gap: 1.5rem;
|
|
2631
|
+
flex-wrap: wrap;
|
|
2632
|
+
}
|
|
2633
|
+
|
|
2634
|
+
.eyebrow {
|
|
2635
|
+
text-transform: uppercase;
|
|
2636
|
+
letter-spacing: 0.2em;
|
|
2637
|
+
font-size: 0.7rem;
|
|
2638
|
+
color: rgba(15, 23, 42, 0.55);
|
|
2639
|
+
margin: 0 0 0.75rem;
|
|
2640
|
+
font-weight: 700;
|
|
2641
|
+
}
|
|
2642
|
+
|
|
2643
|
+
h1 {
|
|
2644
|
+
font-size: 2.4rem;
|
|
2645
|
+
margin: 0 0 0.5rem;
|
|
2646
|
+
}
|
|
2647
|
+
|
|
2648
|
+
.hero-subtitle {
|
|
2649
|
+
max-width: 520px;
|
|
2650
|
+
margin: 0;
|
|
2651
|
+
color: rgba(15, 23, 42, 0.65);
|
|
2652
|
+
font-size: 1rem;
|
|
2653
|
+
line-height: 1.6;
|
|
2654
|
+
}
|
|
2655
|
+
|
|
2656
|
+
.hero-badge {
|
|
2657
|
+
padding: 0.4rem 0.9rem;
|
|
2658
|
+
border-radius: 999px;
|
|
2659
|
+
font-size: 0.75rem;
|
|
2660
|
+
font-weight: 700;
|
|
2661
|
+
text-transform: uppercase;
|
|
2662
|
+
letter-spacing: 0.14em;
|
|
2663
|
+
background: #0f172a;
|
|
2664
|
+
color: #ffffff;
|
|
2665
|
+
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
|
|
2666
|
+
}
|
|
2667
|
+
|
|
2668
|
+
.stepper-section {
|
|
2669
|
+
margin-bottom: 2rem;
|
|
2670
|
+
display: flex;
|
|
2671
|
+
flex-direction: column;
|
|
2672
|
+
gap: 1.5rem;
|
|
2673
|
+
}
|
|
2674
|
+
|
|
2675
|
+
.stepper-section.grid {
|
|
2676
|
+
display: grid;
|
|
2677
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
2678
|
+
gap: 1.5rem;
|
|
2679
|
+
}
|
|
2680
|
+
|
|
2681
|
+
.section-head h2 {
|
|
2682
|
+
margin: 0 0 0.35rem;
|
|
2683
|
+
font-size: 1.4rem;
|
|
2684
|
+
}
|
|
2685
|
+
|
|
2686
|
+
.section-head p {
|
|
2687
|
+
margin: 0;
|
|
2688
|
+
color: rgba(15, 23, 42, 0.6);
|
|
2689
|
+
font-size: 0.95rem;
|
|
2690
|
+
}
|
|
2691
|
+
|
|
2692
|
+
.stepper-card {
|
|
2693
|
+
padding: 1.5rem;
|
|
2694
|
+
border-radius: 16px;
|
|
2695
|
+
border: 1px solid rgba(148, 163, 184, 0.3);
|
|
2696
|
+
background: #ffffff;
|
|
2697
|
+
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
|
|
2698
|
+
display: flex;
|
|
2699
|
+
flex-direction: column;
|
|
2700
|
+
gap: 1.5rem;
|
|
2701
|
+
}
|
|
2702
|
+
|
|
2703
|
+
.stepper-controls {
|
|
2704
|
+
display: flex;
|
|
2705
|
+
align-items: center;
|
|
2706
|
+
justify-content: space-between;
|
|
2707
|
+
gap: 1rem;
|
|
2708
|
+
flex-wrap: wrap;
|
|
2709
|
+
}
|
|
2710
|
+
|
|
2711
|
+
.stepper-preview {
|
|
2712
|
+
border-radius: 14px;
|
|
2713
|
+
padding: 1.25rem;
|
|
2714
|
+
background: linear-gradient(135deg, rgba(36, 236, 113, 0.12), rgba(255, 255, 255, 0.9));
|
|
2715
|
+
border: 1px solid rgba(36, 236, 113, 0.25);
|
|
2716
|
+
display: flex;
|
|
2717
|
+
flex-direction: column;
|
|
2718
|
+
gap: 0.65rem;
|
|
2719
|
+
min-height: 140px;
|
|
2720
|
+
animation: fadeSlide 0.25s ease;
|
|
2721
|
+
}
|
|
2722
|
+
|
|
2723
|
+
.stepper-preview h3 {
|
|
2724
|
+
margin: 0;
|
|
2725
|
+
font-size: 1.1rem;
|
|
2726
|
+
}
|
|
2727
|
+
|
|
2728
|
+
.stepper-preview p {
|
|
2729
|
+
margin: 0;
|
|
2730
|
+
color: rgba(15, 23, 42, 0.65);
|
|
2731
|
+
font-size: 0.95rem;
|
|
2732
|
+
line-height: 1.5;
|
|
2733
|
+
}
|
|
2734
|
+
|
|
2735
|
+
.stepper-preview ul {
|
|
2736
|
+
margin: 0;
|
|
2737
|
+
padding-left: 1.2rem;
|
|
2738
|
+
color: rgba(15, 23, 42, 0.65);
|
|
2739
|
+
font-size: 0.9rem;
|
|
2740
|
+
display: grid;
|
|
2741
|
+
gap: 0.35rem;
|
|
2742
|
+
}
|
|
2743
|
+
|
|
2744
|
+
.actions {
|
|
2745
|
+
display: flex;
|
|
2746
|
+
gap: 0.75rem;
|
|
2747
|
+
align-items: center;
|
|
2748
|
+
}
|
|
2749
|
+
|
|
2750
|
+
.status-pill {
|
|
2751
|
+
padding: 0.35rem 0.9rem;
|
|
2752
|
+
background: rgba(36, 236, 113, 0.15);
|
|
2753
|
+
border-radius: 999px;
|
|
2754
|
+
font-size: 0.85rem;
|
|
2755
|
+
font-weight: 600;
|
|
2756
|
+
color: #166534;
|
|
2757
|
+
}
|
|
2758
|
+
|
|
2759
|
+
@keyframes fadeSlide {
|
|
2760
|
+
from {
|
|
2761
|
+
opacity: 0;
|
|
2762
|
+
transform: translateY(6px);
|
|
2763
|
+
}
|
|
2764
|
+
to {
|
|
2765
|
+
opacity: 1;
|
|
2766
|
+
transform: translateY(0);
|
|
2767
|
+
}
|
|
2768
|
+
}
|
|
2769
|
+
|
|
2770
|
+
@media (max-width: 720px) {
|
|
2771
|
+
.stepper-hero {
|
|
2772
|
+
padding: 1.5rem;
|
|
2773
|
+
}
|
|
2774
|
+
|
|
2775
|
+
h1 {
|
|
2776
|
+
font-size: 2rem;
|
|
2777
|
+
}
|
|
2778
|
+
}
|
|
2779
|
+
`,R=[{title:"Project setup",description:"Name, team, and scope"},{title:"Permissions",description:"Invite collaborators"},{title:"Brand kit",description:"Logo and colors"},{title:"Integrations",description:"Connect tools"},{title:"Launch",description:"Review and publish"}],le=[{title:"Connect"},{title:"Customize"},{title:"Publish"}],de=[{title:"Account details",description:"Personal information"},{title:"Billing",description:"Plan and payment method"},{title:"Security",description:"Password and MFA"},{title:"Preferences",description:"Notifications and access"}],ce=[{title:"Collect data",description:"Import the latest dataset",state:"complete"},{title:"Validate",description:"Spot missing fields",state:"warning"},{title:"Resolve issues",description:"Fix invalid entries",state:"error"},{title:"Publish",description:"Share with the team",state:"upcoming"}],pe=[{title:"Project setup",copy:"Create the workspace, define the team, and lock in the scope.",bullets:["Workspace name + region","Invite core collaborators","Set the delivery timeline"]},{title:"Permissions",copy:"Assign roles and access boundaries for internal and external teams.",bullets:["Owner and editor roles","Approval workflows","Audit logging enabled"]},{title:"Brand kit",copy:"Upload logo assets and align the design system palette.",bullets:["Primary + accent colors","Typography presets","Asset library sync"]},{title:"Integrations",copy:"Connect your analytics, CRM, and deployment pipelines.",bullets:["Analytics provider","CRM webhooks","CI/CD automation"]},{title:"Launch",copy:"Finalize content and publish to production.",bullets:["Final review checklist","Stakeholder sign-off","Go-live switch"]}];class ue extends b{constructor(){super(...arguments);p(this,"activeIndex",2)}async connectedCallback(){super.connectedCallback(),await customElements.whenDefined("ui-stepper"),this.render(),this.setupSteppers(),this.setupControls()}setupSteppers(){const t=this.shadowRoot.getElementById("interactiveStepper"),e=this.shadowRoot.getElementById("compactStepper"),o=this.shadowRoot.getElementById("verticalStepper"),i=this.shadowRoot.getElementById("statusStepper");t==null||t.setAttribute("steps",JSON.stringify(R)),t==null||t.setAttribute("active",String(this.activeIndex)),e==null||e.setAttribute("steps",JSON.stringify(le)),e==null||e.setAttribute("active","2"),o==null||o.setAttribute("steps",JSON.stringify(de)),o==null||o.setAttribute("active","3"),i==null||i.setAttribute("steps",JSON.stringify(ce)),i==null||i.setAttribute("active","2")}setupControls(){const t=this.shadowRoot.getElementById("prevStep"),e=this.shadowRoot.getElementById("nextStep"),o=this.shadowRoot.getElementById("interactiveStepper"),i=()=>{const s=this.shadowRoot.getElementById("interactiveStatus"),n=this.shadowRoot.getElementById("interactiveContent");if(s&&(s.textContent=`Step ${this.activeIndex} of ${R.length}`),o&&o.setAttribute("active",String(this.activeIndex)),n){const r=pe[this.activeIndex-1];n.innerHTML=`
|
|
2780
|
+
<h3>${r.title}</h3>
|
|
2781
|
+
<p>${r.copy}</p>
|
|
2782
|
+
<ul>${r.bullets.map(l=>`<li>${l}</li>`).join("")}</ul>
|
|
2783
|
+
`}};t==null||t.addEventListener("click",()=>{this.activeIndex=Math.max(1,this.activeIndex-1),i()}),e==null||e.addEventListener("click",()=>{this.activeIndex=Math.min(R.length,this.activeIndex+1),i()}),o==null||o.addEventListener("step-change",s=>{const n=s.detail;n!=null&&n.index&&(this.activeIndex=n.index,i())}),i()}render(){this.shadowRoot.innerHTML=`
|
|
2784
|
+
<style>${re}</style>
|
|
2785
|
+
${se}
|
|
2786
|
+
`}}customElements.define("stepper-demo-page",ue);const he=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"}));m.BaseComponent=b,m.HTTPClient=Z,m.UIButton=P,m.UICard=U,m.UICheckbox=j,m.UIDatePicker=B,m.UIInput=Y,m.UILayout=G,m.UILayoutContent=X,m.UILayoutFooter=Q,m.UILayoutHeader=J,m.UILayoutSidebar=K,m.UIModal=F,m.UIPagination=O,m.UISelect=H,m.UIStepper=V,m.UITable=q,m.UITabs=_,m.UIToast=N,m.UIUpload=W,m.addEventListenerById=v,m.createRouter=Et,m.getElementById=I,m.getFormValues=at,m.http=D,m.queryElement=k,m.queryElements=mt,m.queryModal=ot,m.queryPagination=et,m.queryTable=tt,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
|