@diniz/webcomponents 1.1.5 → 1.1.7

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.
@@ -1,1885 +1,33 @@
1
- var $ = Object.defineProperty;
2
- var A = (l, a, t) => a in l ? $(l, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[a] = t;
3
- var u = (l, a, t) => A(l, typeof a != "symbol" ? a + "" : a, t);
4
- import k from "feather-icons";
5
- function C(l) {
6
- let a = l;
7
- const t = /* @__PURE__ */ new Set();
8
- return {
9
- get: () => a,
10
- set: (e) => {
11
- Object.is(a, e) || (a = e, t.forEach((s) => s(a)));
12
- },
13
- subscribe: (e) => (t.add(e), () => t.delete(e))
14
- };
15
- }
16
- class g extends HTMLElement {
17
- constructor() {
18
- super();
19
- u(this, "state");
20
- u(this, "signalUnsubs");
21
- this.attachShadow({ mode: "open" }), this.state = {}, this.signalUnsubs = /* @__PURE__ */ new Set();
22
- }
23
- useSignal(t) {
24
- const e = C(t), s = e.subscribe(() => this.render());
25
- return this.signalUnsubs.add(s), e;
26
- }
27
- setState(t) {
28
- this.state = { ...this.state, ...t }, this.render();
29
- }
30
- connectedCallback() {
31
- this.render();
32
- }
33
- disconnectedCallback() {
34
- this.signalUnsubs.forEach((t) => t()), this.signalUnsubs.clear();
35
- }
36
- render() {
37
- }
38
- }
39
- 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}';
40
- class E extends g {
41
- connectedCallback() {
42
- this.setAttribute("data-ui", "button"), super.connectedCallback(), this.attachClickHandler();
43
- }
44
- static get observedAttributes() {
45
- return ["variant", "size", "disabled", "type", "icon", "icon-position"];
46
- }
47
- attributeChangedCallback() {
48
- this.render(), this.attachClickHandler();
49
- }
50
- attachClickHandler() {
51
- if (!this.shadowRoot) return;
52
- const a = this.shadowRoot.querySelector("button");
53
- if (!a) return;
54
- const t = a._clickHandler;
55
- t && a.removeEventListener("click", t);
56
- const e = (s) => {
57
- const r = this.getType();
58
- if (this.hasAttribute("disabled")) {
59
- s.preventDefault(), s.stopPropagation();
60
- return;
61
- }
62
- if (r === "submit") {
63
- s.preventDefault(), s.stopPropagation();
64
- let i = this.closest("form");
65
- if (!i) {
66
- let o = this.parentElement;
67
- for (; o; ) {
68
- if (o.tagName === "FORM") {
69
- i = o;
70
- break;
71
- }
72
- o = o.parentElement;
73
- }
74
- }
75
- if (i) {
76
- const o = new Event("submit", {
77
- bubbles: !0,
78
- cancelable: !0
79
- });
80
- i.dispatchEvent(o);
81
- }
82
- }
83
- };
84
- a._clickHandler = e, a.addEventListener("click", e);
85
- }
86
- getVariant() {
87
- const a = this.getAttribute("variant");
88
- return a === "secondary" || a === "ghost" || a === "danger" ? a : "primary";
89
- }
90
- getSize() {
91
- const a = this.getAttribute("size");
92
- return a === "sm" || a === "lg" ? a : "md";
93
- }
94
- getType() {
95
- return this.getAttribute("type") ?? "button";
96
- }
97
- getIcon() {
98
- var s;
99
- const a = this.getAttribute("icon");
100
- if (!a) return null;
101
- const t = a.trim();
102
- return { html: `<span class="btn-icon">${((s = k.icons[t]) == null ? void 0 : s.toSvg()) || ""}</span>`, name: t };
103
- }
104
- getIconPosition() {
105
- return this.getAttribute("icon-position") === "right" ? "right" : "left";
106
- }
107
- render() {
108
- const a = this.getVariant(), t = this.getSize(), e = this.hasAttribute("disabled"), s = this.getType(), r = this.getIcon(), n = this.getIconPosition(), i = r !== null, o = r ? r.html : "", c = this.innerHTML.trim(), d = i && !c;
109
- let p;
110
- i && c ? p = n === "left" ? `${o}<span>${c}</span>` : `<span>${c}</span>${o}` : i ? p = o : p = c, this.shadowRoot.innerHTML = `
111
- <style>${f}</style>
112
- <button
113
- part="button"
114
- class="btn ${a} ${t}${i ? " has-icon" : ""}${d ? " icon-only" : ""}"
115
- type="${s}"
116
- ${e ? "disabled" : ""}
117
- >
118
- ${p}
119
- </button>
120
- `;
121
- }
122
- }
123
- customElements.define("ui-button", E);
124
- class S extends g {
125
- constructor() {
126
- super();
127
- u(this, "inputEl", null);
128
- u(this, "customValidator", null);
129
- u(this, "validationRule", null);
130
- this.state = {
131
- value: "",
132
- valid: !0,
133
- touched: !1,
134
- error: ""
135
- };
136
- }
137
- static get observedAttributes() {
138
- return ["type", "label", "placeholder", "required", "pattern", "minlength", "maxlength", "min", "max", "error-message", "custom-error", "disabled", "name", "validate"];
139
- }
140
- connectedCallback() {
141
- this.setAttribute("data-ui", "input"), super.connectedCallback();
142
- }
143
- attributeChangedCallback(t, e, s) {
144
- e !== s && t !== "value" && this.render();
145
- }
146
- setCustomValidator(t) {
147
- this.customValidator = t, this.validate();
148
- }
149
- get value() {
150
- return this.state.value;
151
- }
152
- set value(t) {
153
- this.state.value = t, this.inputEl && this.inputEl.value !== t && (this.inputEl.value = t), this.validate();
154
- }
155
- get isValid() {
156
- return this.state.valid;
157
- }
158
- checkValidity() {
159
- return this.state.touched = !0, this.validate();
160
- }
161
- reportValidity() {
162
- this.state.touched = !0;
163
- const t = this.validate();
164
- return this.updateErrorDisplay(), !t && this.inputEl && this.inputEl.focus(), t;
165
- }
166
- getType() {
167
- const t = this.getAttribute("type");
168
- return ["text", "email", "password", "number", "tel", "url"].includes(t || "") ? t : "text";
169
- }
170
- getLabel() {
171
- return this.getAttribute("label") || "";
172
- }
173
- getPlaceholder() {
174
- return this.getAttribute("placeholder") || "";
175
- }
176
- getName() {
177
- return this.getAttribute("name") || "";
178
- }
179
- getErrorMessage() {
180
- return this.state.error ? this.state.error : this.getAttribute("error-message") || this.getAttribute("custom-error") || "";
181
- }
182
- getCustomError() {
183
- return this.getAttribute("custom-error") || "";
184
- }
185
- parseValidationRule(t) {
186
- 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;
187
- }
188
- applyValidationRule(t) {
189
- const e = this.state.value;
190
- switch (t.type) {
191
- case "emailDomain":
192
- if (!e.endsWith(`@${t.domain}`))
193
- return { valid: !1, message: `Must end with @${t.domain}` };
194
- break;
195
- case "match":
196
- const s = document.querySelector(t.selector);
197
- if (s && e !== s.value)
198
- return { valid: !1, message: "Values do not match" };
199
- break;
200
- case "minLength":
201
- if (e.length < t.length)
202
- return { valid: !1, message: `Must be at least ${t.length} characters` };
203
- break;
204
- case "maxLength":
205
- if (e.length > t.length)
206
- return { valid: !1, message: `Must be no more than ${t.length} characters` };
207
- break;
208
- case "regex":
209
- try {
210
- if (!new RegExp(t.pattern).test(e))
211
- return { valid: !1, message: "Invalid format" };
212
- } catch {
213
- return { valid: !1, message: "Invalid validation pattern" };
214
- }
215
- break;
216
- }
217
- return { valid: !0 };
218
- }
219
- validate() {
220
- if (!this.inputEl) return !0;
221
- const t = this.getAttribute("validate");
222
- if (t && (this.validationRule || (this.validationRule = this.parseValidationRule(t)), this.validationRule)) {
223
- const e = this.applyValidationRule(this.validationRule);
224
- return this.state.valid = e.valid, !e.valid && e.message && (this.state.error = e.message), this.state.valid;
225
- }
226
- if (this.customValidator) {
227
- const e = this.customValidator(this.state.value, this.inputEl);
228
- this.state.valid = e.valid, !e.valid && e.message && (this.state.error = e.message);
229
- } else {
230
- const e = this.inputEl.checkValidity();
231
- this.state.valid = e, !e && this.state.touched && (this.state.error = this.inputEl.validationMessage || this.getErrorMessage()), e && (this.state.error = "");
232
- }
233
- return this.state.valid;
234
- }
235
- handleInput(t) {
236
- const e = t.target;
237
- this.state.value = e.value, this.state.touched = !0, this.validate(), this.updateErrorDisplay();
238
- }
239
- handleBlur() {
240
- this.state.touched = !0, this.validate(), this.updateErrorDisplay();
241
- }
242
- updateErrorDisplay() {
243
- if (!this.inputEl) return;
244
- const t = this.shadowRoot.querySelector(".input-error"), e = this.shadowRoot.querySelector(".input-wrapper"), s = this.getName();
245
- 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)), s && this.inputEl.setAttribute("aria-describedby", `${s}-error`);
246
- }
247
- needsRender() {
248
- 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");
249
- }
250
- render() {
251
- const t = this.getType(), e = this.getLabel(), s = this.getPlaceholder(), r = this.getName(), n = this.getErrorMessage(), i = this.hasAttribute("required"), o = this.getAttribute("pattern"), c = this.getAttribute("minlength"), d = this.getAttribute("maxlength"), p = this.getAttribute("min"), h = this.getAttribute("max"), b = this.hasAttribute("disabled"), m = !this.state.valid && this.state.touched, v = e !== "";
252
- this.shadowRoot.innerHTML = `
253
- <style>${f}</style>
254
- <div class="input-wrapper${m ? " invalid" : ""}${b ? " disabled" : ""}">
255
- ${v ? `<label class="input-label">${e}${i ? " *" : ""}</label>` : ""}
256
- <input
257
- part="input"
258
- class="input-field"
259
- type="${t}"
260
- placeholder="${s}"
261
- name="${r}"
262
- .value="${this.state.value}"
263
- ${i ? "required" : ""}
264
- ${o ? `pattern="${o}"` : ""}
265
- ${c ? `minlength="${c}"` : ""}
266
- ${d ? `maxlength="${d}"` : ""}
267
- ${p ? `min="${p}"` : ""}
268
- ${h ? `max="${h}"` : ""}
269
- ${b ? "disabled" : ""}
270
- aria-invalid="${m}"
271
- aria-describedby="${r}-error"
272
- />
273
- <span class="input-error${m && n ? "" : " hidden"}" id="${r}-error" role="alert">${n}</span>
274
- </div>
275
- `, 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)));
276
- }
277
- }
278
- customElements.define("ui-input", S);
279
- class L extends g {
280
- constructor() {
281
- super(...arguments);
282
- u(this, "columns", []);
283
- u(this, "rows", []);
284
- }
285
- connectedCallback() {
286
- this.setAttribute("data-ui", "table"), super.connectedCallback();
287
- }
288
- set data(t) {
289
- this.columns = t.columns, this.rows = t.rows, this.render();
290
- }
291
- get data() {
292
- return { columns: this.columns, rows: this.rows };
293
- }
294
- render() {
295
- const t = this.columns.filter((r) => r.visible !== !1), e = t.map(
296
- (r) => `<th class="align-${r.align ?? "left"}">${r.label}</th>`
297
- ).join(""), s = this.rows.map(
298
- (r, n) => `<tr data-row-index="${n}">${t.map(
299
- (i) => i.actions ? `<td class="align-center actions-cell">
300
- ${i.actions.edit ? `<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${n}">Edit</ui-button>` : ""}
301
- ${i.actions.delete ? `<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${n}">Delete</ui-button>` : ""}
302
- </td>` : `<td class="align-${i.align ?? "left"}">${String(
303
- r[i.key] ?? ""
304
- )}</td>`
305
- ).join("")}</tr>`
306
- ).join("");
307
- this.shadowRoot.innerHTML = `
308
- <style>${f}</style>
309
- <div class="table-wrap">
310
- <table>
311
- <thead><tr>${e}</tr></thead>
312
- <tbody>${s}</tbody>
313
- </table>
314
- </div>
315
- `, this.shadowRoot.querySelectorAll(".action-btn").forEach((r) => {
316
- r.addEventListener("click", (n) => {
317
- const i = n.currentTarget, o = i.dataset.action, c = parseInt(i.dataset.rowIndex || "0", 10), d = o === "edit" ? "edit-action" : "delete-action";
318
- this.dispatchEvent(new CustomEvent(d, {
319
- bubbles: !0,
320
- composed: !0,
321
- detail: { row: this.rows[c], rowIndex: c }
322
- }));
323
- });
324
- });
325
- }
326
- }
327
- customElements.define("ui-table", L);
328
- class z extends g {
329
- constructor() {
330
- super(...arguments);
331
- u(this, "inputElement", null);
332
- u(this, "isConnected", !1);
333
- u(this, "isInternalUpdate", !1);
334
- u(this, "hasRendered", !1);
335
- }
336
- connectedCallback() {
337
- this.setAttribute("data-ui", "date-picker"), super.connectedCallback(), this.isConnected = !0;
338
- }
339
- static get observedAttributes() {
340
- return ["value", "format", "min", "max", "disabled", "placeholder", "label"];
341
- }
342
- attributeChangedCallback(t, e, s) {
343
- if (!(!this.isConnected || e === s)) {
344
- if (this.isInternalUpdate && t === "value") {
345
- this.isInternalUpdate = !1;
346
- return;
347
- }
348
- t === "value" ? this.updateInputValues() : this.render();
349
- }
350
- }
351
- updateInputValues() {
352
- if (!this.shadowRoot) return;
353
- const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]');
354
- if (t && e) {
355
- const s = this.getValue(), r = this.getFormat(), n = this.formatDate(s, r);
356
- t.value = n, e.value = s;
357
- }
358
- }
359
- getFormat() {
360
- const t = this.getAttribute("format");
361
- return t === "DD/MM/YYYY" || t === "MM/DD/YYYY" || t === "DD-MM-YYYY" || t === "MM-DD-YYYY" ? t : "YYYY-MM-DD";
362
- }
363
- getValue() {
364
- return this.getAttribute("value") || "";
365
- }
366
- getMin() {
367
- return this.getAttribute("min") || "";
368
- }
369
- getMax() {
370
- return this.getAttribute("max") || "";
371
- }
372
- getPlaceholder() {
373
- return this.getAttribute("placeholder") || this.getFormat();
374
- }
375
- getLabel() {
376
- return this.getAttribute("label") || "";
377
- }
378
- isDisabled() {
379
- return this.hasAttribute("disabled");
380
- }
381
- /**
382
- * Convert date from ISO format (YYYY-MM-DD) to specified format
383
- */
384
- formatDate(t, e) {
385
- if (!t) return "";
386
- const s = t.split("-");
387
- if (s.length !== 3) return t;
388
- const [r, n, i] = s;
389
- switch (e) {
390
- case "DD/MM/YYYY":
391
- return `${i}/${n}/${r}`;
392
- case "MM/DD/YYYY":
393
- return `${n}/${i}/${r}`;
394
- case "DD-MM-YYYY":
395
- return `${i}-${n}-${r}`;
396
- case "MM-DD-YYYY":
397
- return `${n}-${i}-${r}`;
398
- case "YYYY-MM-DD":
399
- default:
400
- return t;
401
- }
402
- }
403
- /**
404
- * Convert date from specified format to ISO format (YYYY-MM-DD)
405
- */
406
- parseDate(t, e) {
407
- if (!t) return "";
408
- let s, r, n, i;
409
- switch (e) {
410
- case "DD/MM/YYYY":
411
- if (s = t.split("/"), s.length !== 3) return "";
412
- [i, n, r] = s;
413
- break;
414
- case "MM/DD/YYYY":
415
- if (s = t.split("/"), s.length !== 3) return "";
416
- [n, i, r] = s;
417
- break;
418
- case "DD-MM-YYYY":
419
- if (s = t.split("-"), s.length !== 3) return "";
420
- [i, n, r] = s;
421
- break;
422
- case "MM-DD-YYYY":
423
- if (s = t.split("-"), s.length !== 3) return "";
424
- [n, i, r] = s;
425
- break;
426
- case "YYYY-MM-DD":
427
- default:
428
- return t;
429
- }
430
- return n = n.padStart(2, "0"), i = i.padStart(2, "0"), `${r}-${n}-${i}`;
431
- }
432
- attachEventListeners() {
433
- if (!this.shadowRoot) return;
434
- const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]'), s = this.shadowRoot.querySelector(".calendar-btn");
435
- if (!t || !e) return;
436
- const r = () => {
437
- const n = t.value, i = this.getFormat(), o = this.parseDate(n, i);
438
- this.isValidDate(o) ? (e.value = o, t.classList.remove("invalid"), this.dispatchDateChange(o)) : n === "" ? (e.value = "", t.classList.remove("invalid"), this.dispatchDateChange("")) : t.classList.add("invalid");
439
- };
440
- t.addEventListener("blur", r), t.addEventListener("keydown", (n) => {
441
- n.key === "Enter" && (r(), t.blur());
442
- }), e.addEventListener("change", (n) => {
443
- const o = n.target.value, c = this.getFormat(), d = this.formatDate(o, c);
444
- t.value = d, t.classList.remove("invalid"), this.dispatchDateChange(o);
445
- }), s && s.addEventListener("click", async (n) => {
446
- n.preventDefault(), n.stopPropagation(), e.style.pointerEvents = "auto";
447
- try {
448
- typeof e.showPicker == "function" ? e.showPicker() : (e.focus(), e.click());
449
- } catch (i) {
450
- console.log("Date picker error:", i), e.focus(), e.click();
451
- } finally {
452
- setTimeout(() => {
453
- e.style.pointerEvents = "none";
454
- }, 100);
455
- }
456
- });
457
- }
458
- isValidDate(t) {
459
- if (!t) return !1;
460
- const e = new Date(t);
461
- return e instanceof Date && !isNaN(e.getTime());
462
- }
463
- dispatchDateChange(t) {
464
- const e = this.getFormat(), s = this.formatDate(t, e);
465
- this.dispatchEvent(
466
- new CustomEvent("date-change", {
467
- detail: {
468
- value: t,
469
- formattedValue: s,
470
- format: e
471
- },
472
- bubbles: !0,
473
- composed: !0
474
- })
475
- ), this.isInternalUpdate = !0, this.setAttribute("value", t);
476
- }
477
- /**
478
- * Get the current value in ISO format (YYYY-MM-DD)
479
- */
480
- getISOValue() {
481
- return this.getValue();
482
- }
483
- /**
484
- * Get the current value in the specified format
485
- */
486
- getFormattedValue() {
487
- const t = this.getValue(), e = this.getFormat();
488
- return this.formatDate(t, e);
489
- }
490
- /**
491
- * Set the date value (accepts ISO format)
492
- */
493
- setValue(t) {
494
- this.setAttribute("value", t);
495
- }
496
- /**
497
- * Clear the date value
498
- */
499
- clear() {
500
- this.setAttribute("value", "");
501
- }
502
- render() {
503
- const t = this.getValue(), e = this.getFormat(), s = this.getMin(), r = this.getMax(), n = this.isDisabled(), i = this.getPlaceholder(), o = this.getLabel(), c = this.formatDate(t, e), d = o !== "";
504
- this.shadowRoot.innerHTML = `
505
- <style>${f}</style>
506
- <div class="date-picker-container">
507
- ${d ? `<label class="date-picker-label">${o}</label>` : ""}
508
- <div class="date-input-wrapper ${n ? "disabled" : ""}">
509
- <input
510
- type="text"
511
- class="formatted-input"
512
- part="input"
513
- value="${c}"
514
- placeholder="${i}"
515
- ${n ? "disabled" : ""}
516
- />
517
- <button
518
- class="calendar-btn"
519
- type="button"
520
- ${n ? "disabled" : ""}
521
- title="Open calendar"
522
- >
523
- <svg class="calendar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
524
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
525
- </svg>
526
- </button>
527
- <input
528
- type="date"
529
- class="hidden-date-input"
530
- value="${t}"
531
- ${s ? `min="${s}"` : ""}
532
- ${r ? `max="${r}"` : ""}
533
- ${n ? "disabled" : ""}
534
- />
535
- </div>
536
- <div class="format-label">Format: ${e}</div>
537
- </div>
538
- `, this.attachEventListeners(), this.hasRendered = !0;
539
- }
540
- }
541
- customElements.define("ui-date-picker", z);
542
- class I extends g {
543
- constructor() {
544
- super(...arguments);
545
- u(this, "_total", 0);
546
- u(this, "_currentPage", 1);
547
- u(this, "_pageSize", 10);
548
- }
549
- connectedCallback() {
550
- this.setAttribute("data-ui", "pagination"), super.connectedCallback();
551
- }
552
- static get observedAttributes() {
553
- return ["total", "current-page", "page-size"];
554
- }
555
- attributeChangedCallback(t, e, s) {
556
- switch (t) {
557
- case "total":
558
- this._total = parseInt(s, 10) || 0;
559
- break;
560
- case "current-page":
561
- this._currentPage = parseInt(s, 10) || 1;
562
- break;
563
- case "page-size":
564
- this._pageSize = parseInt(s, 10) || 10;
565
- break;
566
- }
567
- this.render();
568
- }
569
- get total() {
570
- return this._total;
571
- }
572
- set total(t) {
573
- this._total = t, this.setAttribute("total", String(t));
574
- }
575
- get currentPage() {
576
- return this._currentPage;
577
- }
578
- set currentPage(t) {
579
- this._currentPage = t, this.setAttribute("current-page", String(t));
580
- }
581
- get pageSize() {
582
- return this._pageSize;
583
- }
584
- set pageSize(t) {
585
- this._pageSize = t, this.setAttribute("page-size", String(t));
586
- }
587
- get totalPages() {
588
- return Math.ceil(this._total / this._pageSize);
589
- }
590
- handlePageChange(t) {
591
- t < 1 || t > this.totalPages || t === this._currentPage || (this.currentPage = t, this.dispatchEvent(
592
- new CustomEvent("page-change", {
593
- detail: {
594
- page: t,
595
- pageSize: this._pageSize,
596
- total: this._total,
597
- totalPages: this.totalPages
598
- },
599
- bubbles: !0,
600
- composed: !0
601
- })
602
- ));
603
- }
604
- getPageNumbers() {
605
- const t = this.totalPages, e = this._currentPage;
606
- if (t <= 7)
607
- return Array.from({ length: t }, (r, n) => n + 1);
608
- const s = [];
609
- return e <= 3 ? s.push(1, 2, 3, 4, "...", t) : e >= t - 2 ? s.push(1, "...", t - 3, t - 2, t - 1, t) : s.push(1, "...", e - 1, e, e + 1, "...", t), s;
610
- }
611
- render() {
612
- const t = this.totalPages, e = this._currentPage, s = this.getPageNumbers(), r = (e - 1) * this._pageSize + 1, n = Math.min(e * this._pageSize, this._total);
613
- this.shadowRoot.innerHTML = `
614
- <style>${f}</style>
615
- <div class="pagination-container">
616
- <div class="pagination-info">
617
- ${this._total > 0 ? `Showing ${r} to ${n} of ${this._total}` : "No results"}
618
- </div>
619
- ${t > 1 ? `
620
- <nav class="pagination" role="navigation" aria-label="Pagination">
621
- <button
622
- class="page-btn nav-btn"
623
- ${e === 1 ? "disabled" : ""}
624
- data-page="prev"
625
- aria-label="Previous page"
626
- >
627
- <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
628
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
629
- </svg>
630
- </button>
631
- ${s.map((i) => i === "..." ? '<button class="page-btn ellipsis" disabled>...</button>' : `
632
- <button
633
- class="page-btn ${i === e ? "active" : ""}"
634
- data-page="${i}"
635
- aria-label="Page ${i}"
636
- ${i === e ? 'aria-current="page"' : ""}
637
- >
638
- ${i}
639
- </button>
640
- `).join("")}
641
- <button
642
- class="page-btn nav-btn"
643
- ${e === t ? "disabled" : ""}
644
- data-page="next"
645
- aria-label="Next page"
646
- >
647
- <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
648
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
649
- </svg>
650
- </button>
651
- </nav>
652
- ` : ""}
653
- </div>
654
- `, this.attachEventListeners();
655
- }
656
- attachEventListeners() {
657
- this.shadowRoot && this.shadowRoot.addEventListener("click", (t) => {
658
- const s = t.target.closest(".page-btn");
659
- if (!s || s.disabled) return;
660
- const r = s.dataset.page;
661
- if (r === "prev")
662
- this.handlePageChange(this._currentPage - 1);
663
- else if (r === "next")
664
- this.handlePageChange(this._currentPage + 1);
665
- else if (r) {
666
- const n = parseInt(r, 10);
667
- isNaN(n) || this.handlePageChange(n);
668
- }
669
- });
670
- }
671
- }
672
- customElements.define("ui-pagination", I);
673
- class M extends g {
674
- constructor() {
675
- super(...arguments);
676
- u(this, "isOpen", this.useSignal(!1));
677
- }
678
- connectedCallback() {
679
- this.setAttribute("data-ui", "modal"), super.connectedCallback(), this.setupEventListeners();
680
- }
681
- static get observedAttributes() {
682
- return ["open"];
683
- }
684
- attributeChangedCallback(t, e, s) {
685
- t === "open" && e !== s && this.isOpen.set(s !== null);
686
- }
687
- setupEventListeners() {
688
- document.addEventListener("keydown", (t) => {
689
- t.key === "Escape" && this.isOpen.get() && !this.hasAttribute("no-close-on-escape") && this.close();
690
- });
691
- }
692
- open() {
693
- this.isOpen.set(!0), this.setAttribute("open", ""), this.dispatchEvent(new CustomEvent("modal-open", { bubbles: !0, composed: !0 })), document.body.style.overflow = "hidden";
694
- }
695
- close() {
696
- this.isOpen.set(!1), this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("modal-close", { bubbles: !0, composed: !0 })), document.body.style.overflow = "";
697
- }
698
- handleBackdropClick(t) {
699
- t.target.classList.contains("modal-backdrop") && !this.hasAttribute("no-close-on-backdrop") && this.close();
700
- }
701
- render() {
702
- const t = this.isOpen.get(), e = this.getAttribute("title") || "", s = this.getAttribute("size") || "md";
703
- this.shadowRoot.innerHTML = `
704
- <style>
705
- ${f}
706
-
707
- ::slotted([slot="footer"]) {
708
- display: flex;
709
- gap: 0.75rem;
710
- width: 100%;
711
- justify-content: flex-end;
712
- }
713
- </style>
714
-
715
- <div class="modal-backdrop ${t ? "open" : ""}" part="backdrop">
716
- <div class="modal-content ${s}" part="content" @click="${(i) => i.stopPropagation()}">
717
- ${e ? `
718
- <div class="modal-header" part="header">
719
- <h2 class="modal-title">${e}</h2>
720
- <button class="modal-close" part="close" aria-label="Close modal">
721
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
722
- <line x1="18" y1="6" x2="6" y2="18"></line>
723
- <line x1="6" y1="6" x2="18" y2="18"></line>
724
- </svg>
725
- </button>
726
- </div>
727
- ` : ""}
728
-
729
- <div class="modal-body" part="body">
730
- <slot></slot>
731
- </div>
732
-
733
- <div class="modal-footer" part="footer">
734
- <slot name="footer"></slot>
735
- </div>
736
- </div>
737
- </div>
738
- `;
739
- const r = this.shadowRoot.querySelector(".modal-backdrop"), n = this.shadowRoot.querySelector(".modal-close");
740
- r == null || r.addEventListener("click", (i) => this.handleBackdropClick(i)), n == null || n.addEventListener("click", () => this.close());
741
- }
742
- }
743
- customElements.define("ui-modal", M);
744
- class R extends g {
745
- constructor() {
746
- super(...arguments);
747
- u(this, "isOpen", this.useSignal(!1));
748
- u(this, "selectedValue", this.useSignal(""));
749
- u(this, "searchTerm", this.useSignal(""));
750
- u(this, "options", []);
751
- }
752
- connectedCallback() {
753
- this.setAttribute("data-ui", "select"), super.connectedCallback(), this.parseOptions(), this.setupClickOutside();
754
- }
755
- static get observedAttributes() {
756
- return ["value", "disabled", "placeholder", "options"];
757
- }
758
- attributeChangedCallback(t, e, s) {
759
- t === "value" && e !== s && this.selectedValue.set(s || ""), t === "options" && e !== s && this.parseOptions(), this.render();
760
- }
761
- parseOptions() {
762
- const t = this.getAttribute("options");
763
- if (t)
764
- try {
765
- this.options = JSON.parse(t);
766
- } catch (e) {
767
- console.error("Invalid options JSON", e), this.options = [];
768
- }
769
- }
770
- setupClickOutside() {
771
- document.addEventListener("click", (t) => {
772
- !t.composedPath().includes(this) && this.isOpen.get() && this.isOpen.set(!1);
773
- });
774
- }
775
- toggleDropdown() {
776
- this.hasAttribute("disabled") || (this.isOpen.set(!this.isOpen.get()), this.isOpen.get() || this.searchTerm.set(""));
777
- }
778
- selectOption(t) {
779
- this.selectedValue.set(t), this.setAttribute("value", t), this.isOpen.set(!1), this.searchTerm.set(""), this.dispatchEvent(new CustomEvent("select-change", {
780
- bubbles: !0,
781
- composed: !0,
782
- detail: {
783
- value: t,
784
- option: this.options.find((e) => e.value === t)
785
- }
786
- }));
787
- }
788
- handleSearch(t) {
789
- this.searchTerm.set(t.toLowerCase());
790
- }
791
- getFilteredOptions() {
792
- const t = this.searchTerm.get();
793
- return t ? this.options.filter(
794
- (e) => e.label.toLowerCase().includes(t) || e.value.toLowerCase().includes(t)
795
- ) : this.options;
796
- }
797
- getSelectedLabel() {
798
- const t = this.selectedValue.get(), e = this.options.find((s) => s.value === t);
799
- return (e == null ? void 0 : e.label) || this.getAttribute("placeholder") || "Select an option";
800
- }
801
- render() {
802
- const t = this.isOpen.get(), e = this.hasAttribute("disabled"), s = this.hasAttribute("searchable"), r = this.getAttribute("label") || "", n = this.getSelectedLabel(), i = this.getFilteredOptions(), o = this.selectedValue.get() !== "";
803
- this.shadowRoot.innerHTML = `
804
- <style>${f}</style>
805
-
806
- <div class="select-container">
807
- ${r ? `<label class="select-label">${r}</label>` : ""}
808
-
809
- <div class="select-trigger ${t ? "open" : ""}" part="trigger" tabindex="0" ${e ? "disabled" : ""}>
810
- <span class="select-placeholder ${o ? "has-selection" : ""}">${n}</span>
811
- <span class="select-arrow ${t ? "open" : ""}">
812
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
813
- <polyline points="6 9 12 15 18 9"></polyline>
814
- </svg>
815
- </span>
816
- </div>
817
-
818
- <div class="select-dropdown ${t ? "open" : ""}" part="dropdown">
819
- ${s ? `
820
- <input
821
- type="text"
822
- class="select-search"
823
- placeholder="Search..."
824
- part="search"
825
- >
826
- ` : ""}
827
-
828
- ${i.length > 0 ? i.map((h) => `
829
- <div
830
- class="select-option ${h.value === this.selectedValue.get() ? "selected" : ""} ${h.disabled ? "disabled" : ""}"
831
- data-value="${h.value}"
832
- part="option"
833
- >
834
- ${h.label}
835
- </div>
836
- `).join("") : `
837
- <div class="select-empty">No options found</div>
838
- `}
839
- </div>
840
- </div>
841
- `;
842
- const c = this.shadowRoot.querySelector(".select-trigger"), d = this.shadowRoot.querySelector(".select-search"), p = this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");
843
- c == null || c.addEventListener("click", () => this.toggleDropdown()), c == null || c.addEventListener("keydown", (h) => {
844
- (h.key === "Enter" || h.key === " ") && (h.preventDefault(), this.toggleDropdown());
845
- }), d == null || d.addEventListener("input", (h) => {
846
- this.handleSearch(h.target.value);
847
- }), d == null || d.addEventListener("click", (h) => h.stopPropagation()), p.forEach((h) => {
848
- h.addEventListener("click", () => {
849
- const b = h.getAttribute("data-value");
850
- b && this.selectOption(b);
851
- });
852
- });
853
- }
854
- }
855
- customElements.define("ui-select", R);
856
- class D extends g {
857
- constructor() {
858
- super(...arguments);
859
- u(this, "checked", this.useSignal(!1));
860
- u(this, "indeterminate", this.useSignal(!1));
861
- }
862
- connectedCallback() {
863
- this.setAttribute("data-ui", "checkbox"), super.connectedCallback();
864
- }
865
- static get observedAttributes() {
866
- return ["checked", "disabled", "indeterminate"];
867
- }
868
- attributeChangedCallback(t, e, s) {
869
- t === "checked" && e !== s && this.checked.set(s !== null), t === "indeterminate" && e !== s && this.indeterminate.set(s !== null), this.render();
870
- }
871
- handleChange() {
872
- if (this.hasAttribute("disabled")) return;
873
- this.indeterminate.get() && (this.indeterminate.set(!1), this.removeAttribute("indeterminate"));
874
- const t = !this.checked.get();
875
- this.checked.set(t), t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.dispatchEvent(new CustomEvent("checkbox-change", {
876
- bubbles: !0,
877
- composed: !0,
878
- detail: { checked: t }
879
- }));
880
- }
881
- setChecked(t) {
882
- this.checked.set(t), t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.indeterminate.set(!1), this.removeAttribute("indeterminate");
883
- }
884
- setIndeterminate(t) {
885
- this.indeterminate.set(t), t ? this.setAttribute("indeterminate", "") : this.removeAttribute("indeterminate");
886
- }
887
- render() {
888
- const t = this.checked.get(), e = this.indeterminate.get(), s = this.hasAttribute("disabled"), r = this.getAttribute("label") || "", n = this.getAttribute("size") || "md", i = {
889
- sm: "size-sm",
890
- md: "size-md",
891
- lg: "size-lg"
892
- };
893
- this.shadowRoot.innerHTML = `
894
- <style>${f}</style>
895
-
896
- <label class="checkbox-container ${i[n]}">
897
- <input
898
- type="checkbox"
899
- ${t ? "checked" : ""}
900
- ${s ? "disabled" : ""}
901
- >
902
- <div class="checkbox-box ${i[n]} ${t ? "checked" : ""} ${e ? "indeterminate" : ""} ${s ? "disabled" : ""}" part="checkbox">
903
- <svg class="checkbox-icon check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
904
- <polyline points="20 6 9 17 4 12"></polyline>
905
- </svg>
906
- <svg class="checkbox-icon minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
907
- <line x1="5" y1="12" x2="19" y2="12"></line>
908
- </svg>
909
- </div>
910
- ${r ? `<span class="checkbox-label">${r}</span>` : "<slot></slot>"}
911
- </label>
912
- `;
913
- const o = this.shadowRoot.querySelector(".checkbox-container");
914
- o == null || o.addEventListener("click", (c) => {
915
- c.preventDefault(), this.handleChange();
916
- });
917
- }
918
- }
919
- customElements.define("ui-checkbox", D);
920
- const T = ':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}}';
921
- class Y extends g {
922
- constructor() {
923
- super(...arguments);
924
- u(this, "activeId", null);
925
- u(this, "indicator", null);
926
- u(this, "handleTabClick", (t) => {
927
- const e = t.target;
928
- if (!e) return;
929
- const s = e.closest('[slot="tab"][data-tab]');
930
- if (!s) return;
931
- t.preventDefault();
932
- const r = s.getAttribute("data-tab");
933
- r && this.setActive(r);
934
- });
935
- }
936
- static get observedAttributes() {
937
- return ["active"];
938
- }
939
- connectedCallback() {
940
- this.setAttribute("data-ui", "tabs"), super.connectedCallback(), this.addEventListener("click", this.handleTabClick);
941
- }
942
- disconnectedCallback() {
943
- this.removeEventListener("click", this.handleTabClick), super.disconnectedCallback();
944
- }
945
- attributeChangedCallback(t, e, s) {
946
- t === "active" && e !== s && (this.activeId = s, this.syncTabs());
947
- }
948
- setActive(t) {
949
- this.activeId !== t && (this.activeId = t, this.setAttribute("active", t), this.syncTabs(), this.dispatchEvent(new CustomEvent("tab-change", {
950
- bubbles: !0,
951
- composed: !0,
952
- detail: { id: t }
953
- })));
954
- }
955
- getTabs() {
956
- var e;
957
- const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="tab"]');
958
- return t ? t.assignedElements({ flatten: !0 }) : [];
959
- }
960
- getPanels() {
961
- var e;
962
- const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="panel"]');
963
- return t ? t.assignedElements({ flatten: !0 }) : [];
964
- }
965
- getActiveId(t) {
966
- const e = this.getAttribute("active");
967
- if (e && t.some((r) => r.getAttribute("data-tab") === e))
968
- return e;
969
- if (this.activeId && t.some((r) => r.getAttribute("data-tab") === this.activeId))
970
- return this.activeId;
971
- const s = t.find((r) => r.getAttribute("data-tab"));
972
- return (s == null ? void 0 : s.getAttribute("data-tab")) ?? null;
973
- }
974
- syncTabs() {
975
- const t = this.getTabs(), e = this.getPanels();
976
- if (t.length === 0) return;
977
- const s = this.getActiveId(t);
978
- s && (this.activeId = s, this.getAttribute("active") !== s && this.setAttribute("active", s), t.forEach((r) => {
979
- const n = r.getAttribute("data-tab");
980
- if (!n) return;
981
- const i = r.id || `tab-${n}`, o = n === s;
982
- r.id = i, r.setAttribute("role", "tab"), r.setAttribute("aria-selected", String(o)), r.setAttribute("tabindex", o ? "0" : "-1"), r.classList.toggle("is-active", o);
983
- }), e.forEach((r) => {
984
- const n = r.getAttribute("data-tab");
985
- if (!n) return;
986
- const i = r.id || `panel-${n}`, o = n === s;
987
- r.id = i, r.setAttribute("role", "tabpanel"), r.toggleAttribute("hidden", !o), r.classList.toggle("is-active", o);
988
- const c = t.find((d) => d.getAttribute("data-tab") === n);
989
- c && (c.setAttribute("aria-controls", i), r.setAttribute("aria-labelledby", c.id));
990
- }), this.updateIndicator(t, s));
991
- }
992
- updateIndicator(t, e) {
993
- if (!this.indicator) return;
994
- const s = t.find((o) => o.getAttribute("data-tab") === e);
995
- if (!s) return;
996
- const r = this.shadowRoot.querySelector(".tablist");
997
- if (!r) return;
998
- s.getBoundingClientRect(), r.getBoundingClientRect();
999
- const n = t.indexOf(s);
1000
- let i = 0;
1001
- for (let o = 0; o < n; o++)
1002
- i += t[o].offsetWidth;
1003
- this.indicator.style.transform = `translateX(${i}px)`, this.indicator.style.width = `${s.offsetWidth}px`;
1004
- }
1005
- render() {
1006
- this.shadowRoot.innerHTML = `
1007
- <style>${f}${T}</style>
1008
- <div class="tabs">
1009
- <div class="tablist" role="tablist">
1010
- <div class="tab-indicator"></div>
1011
- <slot name="tab"></slot>
1012
- </div>
1013
- <div class="panels">
1014
- <slot name="panel"></slot>
1015
- </div>
1016
- </div>
1017
- `, this.indicator = this.shadowRoot.querySelector(".tab-indicator");
1018
- const t = this.shadowRoot.querySelector('slot[name="tab"]'), e = this.shadowRoot.querySelector('slot[name="panel"]');
1019
- t == null || t.addEventListener("slotchange", () => this.syncTabs()), e == null || e.addEventListener("slotchange", () => this.syncTabs()), requestAnimationFrame(() => this.syncTabs());
1020
- }
1021
- }
1022
- customElements.define("ui-tabs", Y);
1023
- const q = ':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}}';
1024
- class H extends g {
1025
- connectedCallback() {
1026
- this.setAttribute("data-ui", "card"), super.connectedCallback();
1027
- }
1028
- static get observedAttributes() {
1029
- return ["shadow", "shadow-color", "rounded", "variant", "elevation"];
1030
- }
1031
- attributeChangedCallback() {
1032
- this.render();
1033
- }
1034
- getShadow() {
1035
- return this.hasAttribute("shadow") && this.getAttribute("shadow") !== "false";
1036
- }
1037
- getShadowColor() {
1038
- return this.getAttribute("shadow-color") ?? "0, 0, 0";
1039
- }
1040
- getRounded() {
1041
- return this.getAttribute("rounded") !== "false";
1042
- }
1043
- getVariant() {
1044
- const a = this.getAttribute("variant");
1045
- return a === "elevated" || a === "bordered" || a === "ghost" ? a : "default";
1046
- }
1047
- getElevation() {
1048
- const a = this.getAttribute("elevation");
1049
- return a === "none" || a === "sm" || a === "md" || a === "lg" || a === "xl" ? a : "sm";
1050
- }
1051
- render() {
1052
- const a = this.getShadow(), t = this.getShadowColor(), e = this.getRounded(), s = this.getVariant(), r = this.getElevation();
1053
- let n = "none";
1054
- if (a)
1055
- switch (r) {
1056
- case "sm":
1057
- n = `0 1px 2px rgba(${t}, 0.05), 0 1px 3px rgba(${t}, 0.1)`;
1058
- break;
1059
- case "md":
1060
- n = `0 4px 6px rgba(${t}, 0.07), 0 2px 4px rgba(${t}, 0.06)`;
1061
- break;
1062
- case "lg":
1063
- n = `0 10px 15px rgba(${t}, 0.1), 0 4px 6px rgba(${t}, 0.05)`;
1064
- break;
1065
- case "xl":
1066
- n = `0 20px 25px rgba(${t}, 0.15), 0 10px 10px rgba(${t}, 0.04)`;
1067
- break;
1068
- default:
1069
- n = "none";
1070
- }
1071
- this.shadowRoot.innerHTML = `
1072
- <style>
1073
- ${f}
1074
- ${q}
1075
-
1076
- .card.custom-shadow {
1077
- box-shadow: ${n};
1078
- }
1079
-
1080
- .card.custom-shadow:hover {
1081
- box-shadow: ${a && r !== "none" ? n.replace(/rgba\(([^)]+), ([\d.]+)\)/g, (i, o, c) => `rgba(${o}, ${Math.min(parseFloat(c) * 1.3, 0.25)})`) : "none"};
1082
- }
1083
- </style>
1084
- <div class="card ${s} ${e ? "rounded" : "square"} ${a ? "custom-shadow" : "no-shadow"}">
1085
- <slot></slot>
1086
- </div>
1087
- `;
1088
- }
1089
- }
1090
- customElements.define("ui-card", H);
1091
- const P = ":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%}}";
1092
- class O extends g {
1093
- constructor() {
1094
- super(...arguments);
1095
- u(this, "toasts", /* @__PURE__ */ new Map());
1096
- u(this, "toastCounter", 0);
1097
- }
1098
- connectedCallback() {
1099
- this.setAttribute("data-ui", "toast"), super.connectedCallback();
1100
- }
1101
- static get observedAttributes() {
1102
- return ["position"];
1103
- }
1104
- attributeChangedCallback() {
1105
- this.render();
1106
- }
1107
- getPosition() {
1108
- const t = this.getAttribute("position");
1109
- return t === "top-left" || t === "bottom-right" || t === "bottom-left" || t === "top-center" || t === "bottom-center" ? t : "top-right";
1110
- }
1111
- getIcon(t) {
1112
- var r;
1113
- const s = {
1114
- success: "check-circle",
1115
- error: "x-circle",
1116
- warning: "alert-triangle",
1117
- info: "info"
1118
- }[t];
1119
- return ((r = k.icons[s]) == null ? void 0 : r.toSvg()) || "";
1120
- }
1121
- /**
1122
- * Show a toast notification
1123
- * @param config Toast configuration
1124
- * @returns Toast ID for manual dismissal
1125
- */
1126
- show(t) {
1127
- const {
1128
- title: e,
1129
- description: s = "",
1130
- type: r = "info",
1131
- duration: n = 5e3,
1132
- closable: i = !0
1133
- } = t, o = `toast-${++this.toastCounter}`, c = this.getIcon(r), d = document.createElement("div");
1134
- d.className = `toast ${r}`, d.setAttribute("role", "alert"), d.setAttribute("aria-live", "polite"), d.innerHTML = `
1135
- <div class="toast-icon">${c}</div>
1136
- <div class="toast-content">
1137
- <div class="toast-title">${this.escapeHtml(e)}</div>
1138
- ${s ? `<div class="toast-description">${this.escapeHtml(s)}</div>` : ""}
1139
- </div>
1140
- ${i ? `
1141
- <button class="toast-close" aria-label="Close notification">
1142
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
1143
- <line x1="18" y1="6" x2="6" y2="18"></line>
1144
- <line x1="6" y1="6" x2="18" y2="18"></line>
1145
- </svg>
1146
- </button>
1147
- ` : ""}
1148
- ${n > 0 ? `
1149
- <div class="toast-progress">
1150
- <div class="toast-progress-bar" style="--duration: ${n}ms"></div>
1151
- </div>
1152
- ` : ""}
1153
- `;
1154
- const p = this.shadowRoot.querySelector(".toast-container");
1155
- if (p && p.appendChild(d), i) {
1156
- const b = d.querySelector(".toast-close");
1157
- b == null || b.addEventListener("click", () => this.dismiss(o));
1158
- }
1159
- let h;
1160
- return n > 0 && (h = window.setTimeout(() => {
1161
- this.dismiss(o);
1162
- }, n)), this.toasts.set(o, { element: d, timer: h }), this.dispatchEvent(
1163
- new CustomEvent("toast-show", {
1164
- bubbles: !0,
1165
- composed: !0,
1166
- detail: { id: o, ...t }
1167
- })
1168
- ), o;
1169
- }
1170
- /**
1171
- * Dismiss a specific toast
1172
- */
1173
- dismiss(t) {
1174
- const e = this.toasts.get(t);
1175
- e && (e.timer && clearTimeout(e.timer), e.element.classList.add("closing"), setTimeout(() => {
1176
- e.element.remove(), this.toasts.delete(t), this.dispatchEvent(
1177
- new CustomEvent("toast-dismiss", {
1178
- bubbles: !0,
1179
- composed: !0,
1180
- detail: { id: t }
1181
- })
1182
- );
1183
- }, 300));
1184
- }
1185
- /**
1186
- * Dismiss all toasts
1187
- */
1188
- dismissAll() {
1189
- Array.from(this.toasts.keys()).forEach((e) => this.dismiss(e));
1190
- }
1191
- /**
1192
- * Convenience methods for different toast types
1193
- */
1194
- success(t, e, s) {
1195
- return this.show({ title: t, description: e, type: "success", duration: s });
1196
- }
1197
- error(t, e, s) {
1198
- return this.show({ title: t, description: e, type: "error", duration: s });
1199
- }
1200
- warning(t, e, s) {
1201
- return this.show({ title: t, description: e, type: "warning", duration: s });
1202
- }
1203
- info(t, e, s) {
1204
- return this.show({ title: t, description: e, type: "info", duration: s });
1205
- }
1206
- escapeHtml(t) {
1207
- const e = document.createElement("div");
1208
- return e.textContent = t, e.innerHTML;
1209
- }
1210
- render() {
1211
- const t = this.getPosition();
1212
- this.shadowRoot.innerHTML = `
1213
- <style>
1214
- ${f}
1215
- ${P}
1216
- </style>
1217
- <div class="toast-container ${t}"></div>
1218
- `;
1219
- }
1220
- }
1221
- customElements.define("ui-toast", O);
1222
- class F extends g {
1223
- constructor() {
1224
- super(...arguments);
1225
- u(this, "steps", []);
1226
- }
1227
- connectedCallback() {
1228
- this.setAttribute("data-ui", "stepper"), super.connectedCallback(), this.parseSteps();
1229
- }
1230
- static get observedAttributes() {
1231
- return ["steps", "active", "orientation", "size"];
1232
- }
1233
- attributeChangedCallback(t, e, s) {
1234
- if (t === "steps" && e !== s && this.parseSteps(), t === "active" && e !== s) {
1235
- this.render();
1236
- return;
1237
- }
1238
- this.render();
1239
- }
1240
- parseSteps() {
1241
- const t = this.getAttribute("steps");
1242
- if (!t) {
1243
- this.steps = [];
1244
- return;
1245
- }
1246
- try {
1247
- const e = JSON.parse(t);
1248
- this.steps = Array.isArray(e) ? e : [];
1249
- } catch (e) {
1250
- console.error("Invalid steps JSON", e), this.steps = [];
1251
- }
1252
- }
1253
- getOrientation() {
1254
- return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
1255
- }
1256
- getSize() {
1257
- const t = this.getAttribute("size");
1258
- return t === "sm" || t === "lg" ? t : "md";
1259
- }
1260
- getActiveIndex(t) {
1261
- const e = parseInt(this.getAttribute("active") || "1", 10);
1262
- return Number.isNaN(e) || t <= 0 ? 1 : Math.min(Math.max(e, 1), t);
1263
- }
1264
- resolveState(t, e, s) {
1265
- return t.state ? t.state : e + 1 < s ? "complete" : e + 1 === s ? "active" : "upcoming";
1266
- }
1267
- setActive(t) {
1268
- const e = this.steps.length;
1269
- if (e === 0) return;
1270
- const s = Math.min(Math.max(t, 1), e);
1271
- if (s === this.getActiveIndex(e)) return;
1272
- this.setAttribute("active", String(s));
1273
- const r = this.steps[s - 1], n = this.resolveState(r, s - 1, s);
1274
- this.dispatchEvent(
1275
- new CustomEvent("step-change", {
1276
- bubbles: !0,
1277
- composed: !0,
1278
- detail: { index: s, step: r, state: n }
1279
- })
1280
- );
1281
- }
1282
- escapeHtml(t) {
1283
- const e = document.createElement("div");
1284
- return e.textContent = t, e.innerHTML;
1285
- }
1286
- render() {
1287
- const t = this.getOrientation(), e = this.getSize(), s = this.steps, r = s.length, n = this.getActiveIndex(r);
1288
- this.shadowRoot.innerHTML = `
1289
- <style>${f}</style>
1290
- <div class="stepper-wrap">
1291
- ${r === 0 ? '<div class="stepper-empty">No steps configured</div>' : `
1292
- <ol class="stepper ${t} ${e}" role="list">
1293
- ${s.map((i, o) => {
1294
- const c = this.resolveState(i, o, n), d = c === "active", p = i.disabled ? "disabled" : "";
1295
- return `
1296
- <li class="step ${c} ${p}" data-state="${c}">
1297
- <button class="step-trigger" data-index="${o}" ${i.disabled ? "disabled" : ""} aria-current="${d ? "step" : "false"}">
1298
- <span class="step-node">${o + 1}</span>
1299
- <span class="step-text">
1300
- <span class="step-title">${this.escapeHtml(i.title || `Step ${o + 1}`)}</span>
1301
- ${i.description ? `<span class="step-desc">${this.escapeHtml(i.description)}</span>` : ""}
1302
- </span>
1303
- </button>
1304
- ${o < r - 1 ? '<span class="step-connector" aria-hidden="true"></span>' : ""}
1305
- </li>
1306
- `;
1307
- }).join("")}
1308
- </ol>
1309
- `}
1310
- </div>
1311
- `, this.shadowRoot.querySelectorAll(".step-trigger").forEach((i) => {
1312
- i.addEventListener("click", () => {
1313
- const o = parseInt(i.dataset.index || "0", 10);
1314
- Number.isNaN(o) || this.setActive(o + 1);
1315
- });
1316
- });
1317
- }
1318
- }
1319
- customElements.define("ui-stepper", F);
1320
- class U extends g {
1321
- constructor() {
1322
- super(...arguments);
1323
- u(this, "files", this.useSignal([]));
1324
- u(this, "isDragging", this.useSignal(!1));
1325
- }
1326
- connectedCallback() {
1327
- this.setAttribute("data-ui", "upload"), super.connectedCallback();
1328
- }
1329
- static get observedAttributes() {
1330
- return ["accept", "multiple", "disabled", "label", "helper", "name"];
1331
- }
1332
- attributeChangedCallback() {
1333
- this.render();
1334
- }
1335
- get value() {
1336
- return this.files.get().map((t) => t.name).join(", ");
1337
- }
1338
- get filesValue() {
1339
- return this.files.get();
1340
- }
1341
- set filesValue(t) {
1342
- this.setFiles(t);
1343
- }
1344
- clear() {
1345
- this.setFiles([]);
1346
- }
1347
- isDisabled() {
1348
- return this.hasAttribute("disabled");
1349
- }
1350
- isMultiple() {
1351
- return this.hasAttribute("multiple");
1352
- }
1353
- getAccept() {
1354
- return this.getAttribute("accept") || "";
1355
- }
1356
- getLabel() {
1357
- return this.getAttribute("label") || "Upload files";
1358
- }
1359
- getHelper() {
1360
- return this.getAttribute("helper") || "";
1361
- }
1362
- setFiles(t) {
1363
- const e = this.isMultiple() ? t : t.slice(0, 1);
1364
- this.files.set(e), this.dispatchEvent(
1365
- new CustomEvent("upload-change", {
1366
- bubbles: !0,
1367
- composed: !0,
1368
- detail: { files: e }
1369
- })
1370
- );
1371
- }
1372
- formatSize(t) {
1373
- if (t < 1024) return `${t} B`;
1374
- const e = t / 1024;
1375
- return e < 1024 ? `${e.toFixed(1)} KB` : `${(e / 1024).toFixed(1)} MB`;
1376
- }
1377
- syncInputFiles(t, e) {
1378
- const s = new DataTransfer();
1379
- e.forEach((r) => s.items.add(r)), t.files = s.files;
1380
- }
1381
- render() {
1382
- const t = this.getAccept(), e = this.getLabel(), s = this.getHelper(), r = this.isDisabled(), n = this.isMultiple(), i = this.isDragging.get(), o = this.files.get();
1383
- this.shadowRoot.innerHTML = `
1384
- <style>${f}</style>
1385
- <div class="upload">
1386
- ${e ? `<label class="upload-label">${e}</label>` : ""}
1387
- <div class="upload-drop ${i ? "dragging" : ""} ${r ? "disabled" : ""}" part="dropzone">
1388
- <input
1389
- class="upload-input"
1390
- type="file"
1391
- ${n ? "multiple" : ""}
1392
- ${t ? `accept="${t}"` : ""}
1393
- ${r ? "disabled" : ""}
1394
- >
1395
- <div class="upload-content">
1396
- <div class="upload-icon" aria-hidden="true">
1397
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1398
- <path d="M12 16V4"></path>
1399
- <path d="M8 8l4-4 4 4"></path>
1400
- <path d="M4 16v4h16v-4"></path>
1401
- </svg>
1402
- </div>
1403
- <div class="upload-text">
1404
- <div class="upload-title">Drop files here or browse</div>
1405
- <div class="upload-sub">
1406
- ${t ? `Accepted: ${t}` : "Any file type supported"}
1407
- </div>
1408
- </div>
1409
- <button class="upload-btn" type="button" ${r ? "disabled" : ""}>Browse</button>
1410
- </div>
1411
- </div>
1412
- ${s ? `<div class="upload-helper">${s}</div>` : ""}
1413
- ${o.length ? `
1414
- <ul class="upload-list">
1415
- ${o.map(
1416
- (b, m) => `
1417
- <li>
1418
- <span>${b.name}</span>
1419
- <span class="upload-meta">${this.formatSize(b.size)}</span>
1420
- <button class="upload-remove" data-index="${m}" type="button">Remove</button>
1421
- </li>
1422
- `
1423
- ).join("")}
1424
- </ul>
1425
- ` : ""}
1426
- </div>
1427
- `;
1428
- const c = this.shadowRoot.querySelector(".upload-drop"), d = this.shadowRoot.querySelector(".upload-input"), p = this.shadowRoot.querySelector(".upload-btn"), h = this.shadowRoot.querySelectorAll(".upload-remove");
1429
- !c || !d || (o.length ? this.syncInputFiles(d, o) : d.value = "", c.addEventListener("dragover", (b) => {
1430
- r || (b.preventDefault(), this.isDragging.set(!0));
1431
- }), c.addEventListener("dragleave", () => {
1432
- this.isDragging.set(!1);
1433
- }), c.addEventListener("drop", (b) => {
1434
- var v;
1435
- if (r) return;
1436
- b.preventDefault(), this.isDragging.set(!1);
1437
- const m = Array.from(((v = b.dataTransfer) == null ? void 0 : v.files) ?? []);
1438
- m.length && (this.setFiles(m), this.syncInputFiles(d, this.files.get()));
1439
- }), d.addEventListener("change", () => {
1440
- const b = Array.from(d.files ?? []);
1441
- this.setFiles(b);
1442
- }), p == null || p.addEventListener("click", () => {
1443
- r || d.click();
1444
- }), h.forEach((b) => {
1445
- b.addEventListener("click", () => {
1446
- const m = parseInt(b.dataset.index || "0", 10), v = this.files.get().filter((X, w) => w !== m);
1447
- this.setFiles(v), this.syncInputFiles(d, v);
1448
- });
1449
- }));
1450
- }
1451
- }
1452
- customElements.define("ui-upload", U);
1453
- class V extends g {
1454
- connectedCallback() {
1455
- this.setAttribute("data-ui", "layout"), super.connectedCallback();
1456
- }
1457
- static get observedAttributes() {
1458
- return ["direction"];
1459
- }
1460
- attributeChangedCallback() {
1461
- this.render();
1462
- }
1463
- getDirection() {
1464
- const a = this.getAttribute("direction");
1465
- return a === "horizontal" || a === "vertical" ? a : "auto";
1466
- }
1467
- detectDirection() {
1468
- const a = this.getDirection();
1469
- if (a !== "auto") return a;
1470
- const t = this.querySelector("ui-layout-header"), e = this.querySelector("ui-layout-footer");
1471
- return this.querySelector("ui-layout-sidebar") ? "horizontal" : "vertical";
1472
- }
1473
- render() {
1474
- const a = this.detectDirection() === "horizontal" ? "row" : "column";
1475
- this.shadowRoot.innerHTML = `
1476
- <style>${f}</style>
1477
- <div class="layout-container" style="flex-direction: ${a}">
1478
- <slot></slot>
1479
- </div>
1480
- `;
1481
- }
1482
- }
1483
- class j extends g {
1484
- connectedCallback() {
1485
- this.setAttribute("data-ui", "layout-header"), super.connectedCallback();
1486
- }
1487
- static get observedAttributes() {
1488
- return ["height"];
1489
- }
1490
- attributeChangedCallback() {
1491
- this.render();
1492
- }
1493
- getHeight() {
1494
- const a = this.getAttribute("height");
1495
- return a && /^\d+$/.test(a) ? a + "px" : a || "64px";
1496
- }
1497
- render() {
1498
- const a = this.getHeight();
1499
- this.shadowRoot.innerHTML = `
1500
- <style>${f}</style>
1501
- <header class="layout-header" style="height: ${a}">
1502
- <slot></slot>
1503
- </header>
1504
- `;
1505
- }
1506
- }
1507
- class N extends g {
1508
- connectedCallback() {
1509
- this.setAttribute("data-ui", "layout-footer"), super.connectedCallback();
1510
- }
1511
- static get observedAttributes() {
1512
- return ["height"];
1513
- }
1514
- attributeChangedCallback() {
1515
- this.render();
1516
- }
1517
- getHeight() {
1518
- const a = this.getAttribute("height");
1519
- return a && /^\d+$/.test(a) ? a + "px" : a || "56px";
1520
- }
1521
- render() {
1522
- const a = this.getHeight();
1523
- this.shadowRoot.innerHTML = `
1524
- <style>${f}</style>
1525
- <footer class="layout-footer" style="height: ${a}">
1526
- <slot></slot>
1527
- </footer>
1528
- `;
1529
- }
1530
- }
1531
- class _ extends g {
1532
- connectedCallback() {
1533
- this.setAttribute("data-ui", "layout-content"), super.connectedCallback();
1534
- }
1535
- render() {
1536
- this.shadowRoot.innerHTML = `
1537
- <style>${f}</style>
1538
- <div class="layout-content">
1539
- <slot></slot>
1540
- </div>
1541
- `;
1542
- }
1543
- }
1544
- class B extends g {
1545
- constructor() {
1546
- super(...arguments);
1547
- u(this, "isCollapsed", !1);
1548
- u(this, "animating", !1);
1549
- }
1550
- connectedCallback() {
1551
- this.setAttribute("data-ui", "layout-sidebar"), super.connectedCallback(), this.isCollapsed = this.hasAttribute("collapsed"), this.render(), this.attachEventListeners();
1552
- }
1553
- static get observedAttributes() {
1554
- return ["collapsed", "width", "collapsed-width", "collapsible"];
1555
- }
1556
- attributeChangedCallback(t) {
1557
- t === "collapsed" && (this.isCollapsed = this.hasAttribute("collapsed")), this.render();
1558
- }
1559
- getWidth() {
1560
- const t = this.getAttribute("width");
1561
- return t && /^\d+$/.test(t) ? t + "px" : t || "240px";
1562
- }
1563
- getCollapsedWidth() {
1564
- const t = this.getAttribute("collapsed-width");
1565
- return t && /^\d+$/.test(t) ? t + "px" : t || "64px";
1566
- }
1567
- isCollapsible() {
1568
- return this.hasAttribute("collapsible");
1569
- }
1570
- attachEventListeners() {
1571
- if (!this.shadowRoot) return;
1572
- const t = this.shadowRoot.querySelector(".sidebar-toggle");
1573
- t && t.addEventListener("click", () => this.toggleCollapse());
1574
- }
1575
- toggleCollapse() {
1576
- this.animating || (this.animating = !0, this.isCollapsed = !this.isCollapsed, this.isCollapsed ? this.setAttribute("collapsed", "") : this.removeAttribute("collapsed"), this.dispatchEvent(
1577
- new CustomEvent("collapsed-change", {
1578
- detail: { collapsed: this.isCollapsed },
1579
- bubbles: !0,
1580
- composed: !0
1581
- })
1582
- ), setTimeout(() => {
1583
- this.animating = !1;
1584
- }, 300));
1585
- }
1586
- render() {
1587
- const t = this.getWidth(), e = this.getCollapsedWidth(), s = this.isCollapsible();
1588
- s && this.isCollapsed, this.shadowRoot.innerHTML = `
1589
- <style>${f}</style>
1590
- <aside class="layout-sidebar ${this.isCollapsed ? "collapsed" : ""}"
1591
- style="--sidebar-width: ${t}; --sidebar-collapsed-width: ${e}">
1592
- <div class="sidebar-content">
1593
- <slot></slot>
1594
- </div>
1595
- ${s ? `
1596
- <button class="sidebar-toggle" title="${this.isCollapsed ? "Expand" : "Collapse"}">
1597
- <svg class="toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1598
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
1599
- d="M15 19l-7-7 7-7"></path>
1600
- </svg>
1601
- </button>
1602
- ` : ""}
1603
- </aside>
1604
- `, this.attachEventListeners();
1605
- }
1606
- }
1607
- customElements.define("ui-layout", V);
1608
- customElements.define("ui-layout-header", j);
1609
- customElements.define("ui-layout-footer", N);
1610
- customElements.define("ui-layout-content", _);
1611
- customElements.define("ui-layout-sidebar", B);
1612
- class W {
1613
- constructor() {
1614
- u(this, "baseURL", "");
1615
- u(this, "defaultHeaders", {
1616
- "Content-Type": "application/json"
1617
- });
1618
- u(this, "defaultTimeout", 3e4);
1619
- u(this, "interceptors", {
1620
- request: {
1621
- handlers: [],
1622
- use: (a, t) => {
1623
- this.interceptors.request.handlers.push({ onFulfilled: a, onRejected: t });
1624
- }
1625
- },
1626
- response: {
1627
- handlers: [],
1628
- use: (a, t) => {
1629
- this.interceptors.response.handlers.push({ onFulfilled: a, onRejected: t });
1630
- }
1631
- }
1632
- });
1633
- }
1634
- /**
1635
- * Set base URL for all requests
1636
- */
1637
- setBaseURL(a) {
1638
- this.baseURL = a;
1639
- }
1640
- /**
1641
- * Get currently set base URL
1642
- */
1643
- getBaseURL() {
1644
- return this.baseURL;
1645
- }
1646
- /**
1647
- * Set default headers for all requests
1648
- */
1649
- setDefaultHeaders(a) {
1650
- this.defaultHeaders = { ...this.defaultHeaders, ...a };
1651
- }
1652
- /**
1653
- * Set default timeout for all requests (in ms)
1654
- */
1655
- setDefaultTimeout(a) {
1656
- this.defaultTimeout = a;
1657
- }
1658
- /**
1659
- * Execute request with interceptors
1660
- */
1661
- async executeRequest(a, t) {
1662
- const e = a.startsWith("http") ? a : this.baseURL + a;
1663
- let s = {
1664
- method: "GET",
1665
- headers: { ...this.defaultHeaders },
1666
- timeout: this.defaultTimeout,
1667
- ...t
1668
- };
1669
- for (const i of this.interceptors.request.handlers)
1670
- try {
1671
- s = await i.onFulfilled(s);
1672
- } catch (o) {
1673
- if (i.onRejected)
1674
- s = await i.onRejected(o);
1675
- else
1676
- throw o;
1677
- }
1678
- const r = new AbortController(), n = setTimeout(() => r.abort(), s.timeout || this.defaultTimeout);
1679
- try {
1680
- const i = {
1681
- method: s.method,
1682
- headers: s.headers,
1683
- signal: r.signal
1684
- };
1685
- s.body && s.method !== "GET" && (i.body = (typeof s.body == "string", s.body));
1686
- const o = await fetch(e, i);
1687
- let c;
1688
- const d = o.headers.get("content-type");
1689
- d != null && d.includes("application/json") ? c = o.ok ? await o.json() : null : d != null && d.includes("text") ? c = await o.text() : c = await o.blob();
1690
- let p = {
1691
- status: o.status,
1692
- statusText: o.statusText,
1693
- headers: o.headers,
1694
- data: c
1695
- };
1696
- if (!o.ok) {
1697
- const h = new Error(`HTTP ${o.status}: ${o.statusText}`);
1698
- throw h.response = p, h.config = s, h;
1699
- }
1700
- for (const h of this.interceptors.response.handlers)
1701
- try {
1702
- p = await h.onFulfilled(p);
1703
- } catch (b) {
1704
- if (h.onRejected)
1705
- p = await h.onRejected(b);
1706
- else
1707
- throw b;
1708
- }
1709
- return p.data;
1710
- } catch (i) {
1711
- throw i instanceof Error && i.name === "AbortError" ? new Error(`Request timeout after ${s.timeout}ms`) : i;
1712
- } finally {
1713
- clearTimeout(n);
1714
- }
1715
- }
1716
- /**
1717
- * GET request
1718
- */
1719
- async get(a, t) {
1720
- return this.executeRequest(a, { ...t, method: "GET" });
1721
- }
1722
- /**
1723
- * POST request
1724
- */
1725
- async post(a, t, e) {
1726
- return this.executeRequest(a, {
1727
- ...e,
1728
- method: "POST",
1729
- body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
1730
- });
1731
- }
1732
- /**
1733
- * PUT request
1734
- */
1735
- async put(a, t, e) {
1736
- return this.executeRequest(a, {
1737
- ...e,
1738
- method: "PUT",
1739
- body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
1740
- });
1741
- }
1742
- /**
1743
- * PATCH request
1744
- */
1745
- async patch(a, t, e) {
1746
- return this.executeRequest(a, {
1747
- ...e,
1748
- method: "PATCH",
1749
- body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
1750
- });
1751
- }
1752
- /**
1753
- * DELETE request
1754
- */
1755
- async delete(a, t) {
1756
- return this.executeRequest(a, { ...t, method: "DELETE" });
1757
- }
1758
- /**
1759
- * HEAD request
1760
- */
1761
- async head(a, t) {
1762
- return this.executeRequest(a, { ...t, method: "HEAD" });
1763
- }
1764
- }
1765
- const Z = new W();
1766
- function x(l, a) {
1767
- return l ? l.querySelector(a) : null;
1768
- }
1769
- function tt(l, a) {
1770
- return l ? l.querySelectorAll(a) : [];
1771
- }
1772
- function et(l, a) {
1773
- return l ? l.querySelector(`#${a}`) : null;
1774
- }
1775
- function st(l, a, t, e, s) {
1776
- if (!l) return null;
1777
- const r = l.querySelector(`#${a}`);
1778
- return r ? (r.addEventListener(t, e, s), r) : null;
1779
- }
1780
- function at(l, a) {
1781
- return x(l, a);
1782
- }
1783
- function rt(l, a) {
1784
- return x(l, a);
1785
- }
1786
- function it(l, a) {
1787
- return x(l, a);
1788
- }
1789
- const J = "input, select, textarea, ui-input, ui-select, ui-date-picker, ui-checkbox, ui-upload";
1790
- function y(l) {
1791
- return l.getAttribute("name") || l.getAttribute("id") || "";
1792
- }
1793
- function G(l) {
1794
- const a = l.tagName.toLowerCase();
1795
- if (a === "ui-checkbox")
1796
- return l.hasAttribute("checked");
1797
- if (a === "ui-upload") {
1798
- const s = l == null ? void 0 : l.filesValue;
1799
- return Array.isArray(s) && s.length > 0 ? s : [];
1800
- }
1801
- const t = l == null ? void 0 : l.value;
1802
- if (typeof t == "string" && t !== "")
1803
- return t;
1804
- const e = l.getAttribute("value");
1805
- return e || "";
1806
- }
1807
- function ot(l, a = {}) {
1808
- const { includeDisabled: t = !1, includeEmpty: e = !0 } = a, s = {}, r = /* @__PURE__ */ new Map();
1809
- l.querySelectorAll('input[type="checkbox"]').forEach((i) => {
1810
- const o = y(i);
1811
- o && r.set(o, (r.get(o) || 0) + 1);
1812
- });
1813
- const n = Array.from(l.querySelectorAll(J));
1814
- for (const i of n) {
1815
- if (!t && (i.disabled || i.hasAttribute("disabled"))) continue;
1816
- const o = y(i);
1817
- if (!o) continue;
1818
- if (i instanceof HTMLInputElement) {
1819
- const d = i.type;
1820
- if (d === "checkbox") {
1821
- if ((r.get(o) || 0) > 1) {
1822
- const h = s[o] || [];
1823
- i.checked && h.push(i.value || "on"), s[o] = h;
1824
- } else
1825
- s[o] = i.checked;
1826
- continue;
1827
- }
1828
- if (d === "radio") {
1829
- i.checked && (s[o] = i.value);
1830
- continue;
1831
- }
1832
- if (d === "file") {
1833
- const p = Array.from(i.files ?? []);
1834
- (e || p.length > 0) && (s[o] = p);
1835
- continue;
1836
- }
1837
- (e || i.value !== "") && (s[o] = i.value);
1838
- continue;
1839
- }
1840
- if (i instanceof HTMLSelectElement) {
1841
- if (i.multiple) {
1842
- const d = Array.from(i.selectedOptions).map((p) => p.value);
1843
- (e || d.length > 0) && (s[o] = d);
1844
- } else (e || i.value !== "") && (s[o] = i.value);
1845
- continue;
1846
- }
1847
- if (i instanceof HTMLTextAreaElement) {
1848
- (e || i.value !== "") && (s[o] = i.value);
1849
- continue;
1850
- }
1851
- const c = G(i);
1852
- (e || (Array.isArray(c) ? c.length > 0 : c !== "")) && (s[o] = c);
1853
- }
1854
- return s;
1855
- }
1
+ import { B as s, H as t, U as o, f as I, i as U, j as r, k as n, l as u, m as y, n as l, o as d, p as i, r as p, s as m, t as b, u as q, w as C, x as L, y as T, z as c, d as g, A as B, e as E, g as P, h, c as k, C as x, q as H, b as S, a as f } from "./index-DiYekJaQ.js";
1856
2
  export {
1857
- W as HTTPClient,
1858
- E as UIButton,
1859
- H as UICard,
1860
- D as UICheckbox,
1861
- z as UIDatePicker,
1862
- S as UIInput,
1863
- V as UILayout,
1864
- _ as UILayoutContent,
1865
- N as UILayoutFooter,
1866
- j as UILayoutHeader,
1867
- B as UILayoutSidebar,
1868
- M as UIModal,
1869
- I as UIPagination,
1870
- R as UISelect,
1871
- F as UIStepper,
1872
- L as UITable,
1873
- Y as UITabs,
1874
- O as UIToast,
1875
- U as UIUpload,
1876
- st as addEventListenerById,
1877
- et as getElementById,
1878
- ot as getFormValues,
1879
- Z as http,
1880
- x as queryElement,
1881
- tt as queryElements,
1882
- it as queryModal,
1883
- rt as queryPagination,
1884
- at as queryTable
3
+ s as BaseComponent,
4
+ t as HTTPClient,
5
+ o as UIButton,
6
+ I as UICard,
7
+ U as UICheckbox,
8
+ r as UIDatePicker,
9
+ n as UIInput,
10
+ u as UILayout,
11
+ y as UILayoutContent,
12
+ l as UILayoutFooter,
13
+ d as UILayoutHeader,
14
+ i as UILayoutSidebar,
15
+ p as UIModal,
16
+ m as UIPagination,
17
+ b as UISelect,
18
+ q as UIStepper,
19
+ C as UITable,
20
+ L as UITabs,
21
+ T as UIToast,
22
+ c as UIUpload,
23
+ g as addEventListenerById,
24
+ B as createRouter,
25
+ E as getElementById,
26
+ P as getFormValues,
27
+ h as http,
28
+ k as queryElement,
29
+ x as queryElements,
30
+ H as queryModal,
31
+ S as queryPagination,
32
+ f as queryTable
1885
33
  };