@logosphere-ui/core 0.0.0-alpha.42 → 0.0.0-alpha.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +147 -66
- package/dist/AGENTS.md +147 -66
- package/dist/accordion-CYuCj7nB.cjs +21 -0
- package/dist/accordion-cDabqwu6.js +96 -0
- package/dist/accordion.cjs +1 -0
- package/dist/accordion.js +4 -0
- package/dist/atoms/Checkbox/checkbox.d.ts +11 -2
- package/dist/atoms/FormField/formfield.d.ts +2 -0
- package/dist/{badge-DsDxWEHx.js → badge-BhINg1p5.js} +20 -20
- package/dist/{badge-DvaKpUHe.cjs → badge-CKSG_MyA.cjs} +1 -1
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +1 -1
- package/dist/breadcrumb-BOuCLUJh.cjs +12 -0
- package/dist/breadcrumb-BeJqq-5C.js +41 -0
- package/dist/breadcrumb.cjs +1 -1
- package/dist/breadcrumb.js +1 -1
- package/dist/button-CVkIa7M0.js +58 -0
- package/dist/button-vdNReBMi.cjs +10 -0
- package/dist/button.cjs +1 -1
- package/dist/button.js +1 -1
- package/dist/{calendar-CZ_IN2TF.js → calendar-C71sj3Ki.js} +1 -1
- package/dist/{calendar-CIgyrv3U.cjs → calendar-DZJM5Tyu.cjs} +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.js +1 -1
- package/dist/{card-MDwFGplY.js → card-C7xXMV3h.js} +3 -3
- package/dist/card-DmQRNKtk.cjs +43 -0
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/chatbot-BAou4THb.cjs +183 -0
- package/dist/{chatbot-CHgiUY4h.js → chatbot-BRfqXYYt.js} +13 -13
- package/dist/chatbot.cjs +1 -1
- package/dist/chatbot.js +1 -1
- package/dist/checkbox-BAbPDN6x.cjs +53 -0
- package/dist/checkbox-CTfbav6M.js +152 -0
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{chip-group-CpcjGoRm.cjs → chip-group-D4DwnC37.cjs} +1 -1
- package/dist/{chip-group-BUL2H8rr.js → chip-group-DzfOd6Vw.js} +1 -1
- package/dist/chip-group.cjs +1 -1
- package/dist/chip-group.js +1 -1
- package/dist/collapse-CbRE8ABx.cjs +47 -0
- package/dist/collapse-DY6SJ9jS.js +141 -0
- package/dist/collapse.cjs +1 -0
- package/dist/collapse.js +4 -0
- package/dist/combobox-BAa3UAQs.cjs +113 -0
- package/dist/{combobox-jak7Ac1m.js → combobox-BR05Tgfd.js} +31 -8
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/{datepicker-BgysIOZI.js → datepicker-BFYWQRrJ.js} +58 -51
- package/dist/datepicker-BWE4qDJM.cjs +85 -0
- package/dist/datepicker.cjs +1 -1
- package/dist/datepicker.js +1 -1
- package/dist/{drawer-3nyjAkcS.cjs → drawer-CRu4G2zu.cjs} +2 -2
- package/dist/{drawer-CE9zzllI.js → drawer-DhuBPWHP.js} +3 -3
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.js +1 -1
- package/dist/formfield-JXiv9mvJ.cjs +33 -0
- package/dist/{formfield-O327HYt0.js → formfield-ss2mFweu.js} +59 -52
- package/dist/formfield.cjs +1 -1
- package/dist/formfield.js +1 -1
- package/dist/icon.cjs +1 -0
- package/dist/icon.js +4 -0
- package/dist/index.cjs +1 -291
- package/dist/index.d.ts +1 -0
- package/dist/index.js +65 -908
- package/dist/index.umd.js +284 -215
- package/dist/input-DyLKo7h6.cjs +60 -0
- package/dist/input-N3Z8D7q1.js +278 -0
- package/dist/input-group-C6sA1lzj.cjs +5 -0
- package/dist/input-group-DUPlrpug.js +66 -0
- package/dist/input-group.cjs +1 -0
- package/dist/input-group.js +4 -0
- package/dist/input.cjs +1 -1
- package/dist/input.js +1 -1
- package/dist/left-menu.cjs +1 -1
- package/dist/left-menu.js +3 -3
- package/dist/leftmenu-BcUNnvly.cjs +120 -0
- package/dist/leftmenu-Cg57EaSY.js +361 -0
- package/dist/modal-g3KbWncV.cjs +84 -0
- package/dist/{modal-DUIv_yoo.js → modal-vSjEpYrG.js} +4 -4
- package/dist/modal.cjs +1 -1
- package/dist/modal.js +1 -1
- package/dist/molecules/Input/input.d.ts +17 -0
- package/dist/molecules/Popover/popover.d.ts +4 -0
- package/dist/organisms/Combobox/combobox.d.ts +9 -0
- package/dist/organisms/DatePicker/datepicker.d.ts +2 -0
- package/dist/organisms/LeftMenu/index.d.ts +1 -1
- package/dist/organisms/LeftMenu/leftmenu-types.d.ts +24 -0
- package/dist/organisms/LeftMenu/leftmenu.d.ts +24 -9
- package/dist/organisms/TreeMenu/tree-menu.d.ts +20 -2
- package/dist/{pagination-B7jknoOz.js → pagination-CjXvpE2j.js} +61 -61
- package/dist/pagination-Nnzacqdo.cjs +169 -0
- package/dist/pagination.cjs +1 -1
- package/dist/pagination.js +1 -1
- package/dist/popover-CrXUbUR-.cjs +30 -0
- package/dist/popover-M5ZcS5rj.js +161 -0
- package/dist/popover.cjs +1 -1
- package/dist/popover.js +1 -1
- package/dist/shared/icons/index.d.ts +1 -0
- package/dist/slider-DSRs5uhl.cjs +108 -0
- package/dist/slider-ntLRajQa.js +280 -0
- package/dist/slider.cjs +1 -0
- package/dist/slider.js +4 -0
- package/dist/split-button-BdBweoip.js +177 -0
- package/dist/split-button-BpffPlVg.cjs +63 -0
- package/dist/split-button.cjs +1 -0
- package/dist/split-button.js +4 -0
- package/dist/stepper-CZhwgLNp.js +122 -0
- package/dist/stepper-ZOMaU6aZ.cjs +52 -0
- package/dist/stepper.cjs +1 -0
- package/dist/stepper.js +4 -0
- package/dist/{switch-8RGGesy5.cjs → switch-Do6SCkPJ.cjs} +2 -2
- package/dist/{switch-DNqPqH-R.js → switch-uYVuohJ-.js} +25 -21
- package/dist/switch.cjs +1 -1
- package/dist/switch.js +1 -1
- package/dist/tab-BvRVHpWs.cjs +41 -0
- package/dist/{tab-CuBCFGoO.js → tab-Byh4UgFB.js} +1 -1
- package/dist/tab.cjs +1 -1
- package/dist/tab.js +1 -1
- package/dist/{text-area-C73JxnqH.js → text-area-1rALZ0iy.js} +16 -12
- package/dist/text-area-D_TYL4_q.cjs +51 -0
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{timepicker-DMzGYd0p.js → timepicker-B9l6HN-d.js} +6 -2
- package/dist/{timepicker-CLJKWWGm.cjs → timepicker-Bpf2d4Nn.cjs} +1 -1
- package/dist/timepicker.cjs +1 -1
- package/dist/timepicker.js +1 -1
- package/dist/{toast-container-B5v74b_5.js → toast-container-C5qYjInG.js} +4 -4
- package/dist/toast-container-D2dyP20J.cjs +64 -0
- package/dist/toast.cjs +1 -1
- package/dist/toast.js +1 -1
- package/dist/tree-menu-BZ7aBC7R.js +237 -0
- package/dist/tree-menu-DDQ_DYl7.cjs +78 -0
- package/dist/tree-menu.cjs +1 -1
- package/dist/tree-menu.js +1 -1
- package/dist/{ui-icon-BMJNdIOq.js → ui-icon-BeR-PaPg.js} +11 -7
- package/dist/{ui-icon-DIucAQC_.cjs → ui-icon-DWl7I5BQ.cjs} +2 -2
- package/package.json +6 -1
- package/dist/breadcrumb-BB61Xt0s.js +0 -41
- package/dist/breadcrumb-Cop-B1J7.cjs +0 -12
- package/dist/button-DRZ4sG4T.cjs +0 -10
- package/dist/button-Uu9oaieg.js +0 -58
- package/dist/card-BOCW7gad.cjs +0 -43
- package/dist/chatbot-B-NiZIYK.cjs +0 -183
- package/dist/checkbox-CX0LgsWP.js +0 -148
- package/dist/checkbox-DpbKHANK.cjs +0 -53
- package/dist/combobox-BmIFPk8X.cjs +0 -113
- package/dist/datepicker-DOBmbxlo.cjs +0 -85
- package/dist/formfield-CRcyUMvQ.cjs +0 -33
- package/dist/input-CQS0LzF-.cjs +0 -59
- package/dist/input-CeF3YJk-.js +0 -257
- package/dist/leftmenu-CmWvnA6L.js +0 -301
- package/dist/leftmenu-p9aR2QTy.cjs +0 -83
- package/dist/modal-dUnnHe8u.cjs +0 -84
- package/dist/organisms/LeftMenu/leftmenu-item.d.ts +0 -14
- package/dist/pagination-BkqbWBOn.cjs +0 -169
- package/dist/popover-CYDoeLKp.cjs +0 -30
- package/dist/popover-DDaG8MSj.js +0 -143
- package/dist/tab-CDMcFHvP.cjs +0 -41
- package/dist/text-area-Cprb-azV.cjs +0 -51
- package/dist/toast-container-6t6yEP9Y.cjs +0 -64
- package/dist/tree-menu-CkOPxr-W.js +0 -154
- package/dist/tree-menu-WNwZMreD.cjs +0 -47
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import { unsafeCSS as u, css as _, LitElement as v, nothing as b, html as r } from "lit";
|
|
2
|
+
import { property as l, state as g, query as c, customElement as h } from "lit/decorators.js";
|
|
3
|
+
import { createPopper as f } from "@popperjs/core";
|
|
4
|
+
import "./ui-icon-BeR-PaPg.js";
|
|
5
|
+
const w = ":host{display:inline-block;position:relative}.split-button{display:inline-flex;align-items:stretch;gap:1px;font-family:var(--font-family-base);border-radius:var(--radius-base);overflow:hidden}.split-button__action,.split-button__dropdown{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:1.25rem;letter-spacing:-.14px;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-base) var(--transition-timing);outline:none}.split-button__action:focus-visible,.split-button__dropdown:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;position:relative;z-index:1}.split-button__action:disabled,.split-button__dropdown:disabled{cursor:not-allowed;pointer-events:none}.split-button__action{gap:var(--spacing-1)}.split-button__chevron{transition:transform var(--transition-speed-base) var(--transition-timing);display:inline-flex}.split-button__chevron--open{transform:rotate(180deg)}.split-button--sm .split-button__action{padding:var(--spacing-0-5) var(--spacing-2)}.split-button--sm .split-button__dropdown{padding:var(--spacing-0-5) var(--spacing-1-5)}.split-button--md .split-button__action{padding:var(--spacing-1-5) var(--spacing-3)}.split-button--md .split-button__dropdown{padding:var(--spacing-1-5) var(--spacing-2)}.split-button--lg .split-button__action{padding:var(--spacing-2-5) var(--spacing-3)}.split-button--lg .split-button__dropdown{padding:var(--spacing-2-5) var(--spacing-2)}.split-button{background-color:#fff6}.split-button--primary .split-button__action,.split-button--primary .split-button__dropdown{background-color:var(--color-primary);color:#fff}.split-button--primary .split-button__action:hover:not(:disabled),.split-button--primary .split-button__dropdown:hover:not(:disabled){background-color:var(--color-primary-hover)}.split-button--primary .split-button__action:active:not(:disabled),.split-button--primary .split-button__dropdown:active:not(:disabled){background-color:var(--color-primary-active)}.split-button--primary.split-button--disabled,.split-button--primary .split-button__action:disabled,.split-button--primary .split-button__dropdown:disabled{background-color:var(--color-primary-disabled)}.split-button--primary.split-button--disabled .split-button__action,.split-button--primary.split-button--disabled .split-button__dropdown{background-color:var(--color-primary-disabled)}.split-button--secondary .split-button__action,.split-button--secondary .split-button__dropdown{background-color:var(--color-secondary);color:#fff}.split-button--secondary .split-button__action:hover:not(:disabled),.split-button--secondary .split-button__dropdown:hover:not(:disabled){background-color:var(--color-secondary-hover)}.split-button--secondary .split-button__action:active:not(:disabled),.split-button--secondary .split-button__dropdown:active:not(:disabled){background-color:var(--color-secondary-active)}.split-button--secondary.split-button--disabled .split-button__action,.split-button--secondary.split-button--disabled .split-button__dropdown,.split-button--secondary .split-button__action:disabled,.split-button--secondary .split-button__dropdown:disabled{background-color:var(--color-secondary-disabled)}.split-button--success .split-button__action,.split-button--success .split-button__dropdown{background-color:var(--color-success);color:#fff}.split-button--success .split-button__action:hover:not(:disabled),.split-button--success .split-button__dropdown:hover:not(:disabled){background-color:var(--color-success-hover)}.split-button--success .split-button__action:active:not(:disabled),.split-button--success .split-button__dropdown:active:not(:disabled){background-color:var(--color-success-active)}.split-button--success.split-button--disabled .split-button__action,.split-button--success.split-button--disabled .split-button__dropdown,.split-button--success .split-button__action:disabled,.split-button--success .split-button__dropdown:disabled{background-color:var(--color-success-disabled)}.split-button--danger .split-button__action,.split-button--danger .split-button__dropdown{background-color:var(--color-danger);color:#fff}.split-button--danger .split-button__action:hover:not(:disabled),.split-button--danger .split-button__dropdown:hover:not(:disabled){background-color:var(--color-danger-hover)}.split-button--danger .split-button__action:active:not(:disabled),.split-button--danger .split-button__dropdown:active:not(:disabled){background-color:var(--color-danger-active)}.split-button--danger.split-button--disabled .split-button__action,.split-button--danger.split-button--disabled .split-button__dropdown,.split-button--danger .split-button__action:disabled,.split-button--danger .split-button__dropdown:disabled{background-color:var(--color-danger-disabled)}.split-button--info .split-button__action,.split-button--info .split-button__dropdown{background-color:var(--color-info);color:#fff}.split-button--info .split-button__action:hover:not(:disabled),.split-button--info .split-button__dropdown:hover:not(:disabled){background-color:var(--color-info-hover)}.split-button--info .split-button__action:active:not(:disabled),.split-button--info .split-button__dropdown:active:not(:disabled){background-color:var(--color-info-active)}.split-button--info.split-button--disabled .split-button__action,.split-button--info.split-button--disabled .split-button__dropdown,.split-button--info .split-button__action:disabled,.split-button--info .split-button__dropdown:disabled{background-color:var(--color-info-disabled)}.split-button--warning .split-button__action,.split-button--warning .split-button__dropdown{background-color:var(--color-warning);color:var(--color-warning-emphasis)}.split-button--warning .split-button__action:hover:not(:disabled),.split-button--warning .split-button__dropdown:hover:not(:disabled){background-color:var(--color-warning-hover)}.split-button--warning .split-button__action:active:not(:disabled),.split-button--warning .split-button__dropdown:active:not(:disabled){background-color:var(--color-warning-active)}.split-button--warning.split-button--disabled .split-button__action,.split-button--warning.split-button--disabled .split-button__dropdown,.split-button--warning .split-button__action:disabled,.split-button--warning .split-button__dropdown:disabled{background-color:var(--color-warning-disabled)}.split-button__panel{position:fixed;z-index:var(--z-index-dropdown);min-width:160px;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-lg);padding:var(--spacing-1) 0;outline:none}.split-button__panel-item{display:flex;align-items:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-3);background:none;border:none;cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-body-color);text-align:left;white-space:nowrap;transition:background-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.split-button__panel-item:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.split-button__panel-item:active:not(:disabled){background-color:var(--color-body-bg-active)}.split-button__panel-item--disabled,.split-button__panel-item:disabled{color:var(--color-secondary-disabled);cursor:not-allowed;pointer-events:none}.split-button__panel-divider{height:1px;background-color:var(--color-border);margin:var(--spacing-1) 0}";
|
|
6
|
+
var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, o, s, a) => {
|
|
7
|
+
for (var e = a > 1 ? void 0 : a ? y(o, s) : o, d = t.length - 1, p; d >= 0; d--)
|
|
8
|
+
(p = t[d]) && (e = (a ? p(o, s, e) : p(e)) || e);
|
|
9
|
+
return a && e && m(o, s, e), e;
|
|
10
|
+
};
|
|
11
|
+
let n = class extends v {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments), this.label = "Button", this.size = "md", this.theme = "primary", this.disabled = !1, this.dropdownDisabled = !1, this.items = [], this._open = !1, this._onDocClick = (t) => {
|
|
14
|
+
this._open && (t.composedPath().includes(this) || this._setOpen(!1));
|
|
15
|
+
}, this._onDocKeydown = (t) => {
|
|
16
|
+
t.key === "Escape" && this._open && this._setOpen(!1);
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
// ── Lifecycle ────────────────────────────────────────────────────────────
|
|
20
|
+
connectedCallback() {
|
|
21
|
+
super.connectedCallback(), document.addEventListener("click", this._onDocClick, { capture: !0 }), document.addEventListener("keydown", this._onDocKeydown);
|
|
22
|
+
}
|
|
23
|
+
disconnectedCallback() {
|
|
24
|
+
super.disconnectedCallback(), document.removeEventListener("click", this._onDocClick, { capture: !0 }), document.removeEventListener("keydown", this._onDocKeydown), this._destroyPopper();
|
|
25
|
+
}
|
|
26
|
+
updated(t) {
|
|
27
|
+
super.updated(t), t.has("_open") && (this._open ? this._initPopper() : this._destroyPopper());
|
|
28
|
+
}
|
|
29
|
+
// ── Popper ───────────────────────────────────────────────────────────────
|
|
30
|
+
_initPopper() {
|
|
31
|
+
!this._dropdownBtn || !this._panel || (this._popper = f(this._dropdownBtn, this._panel, {
|
|
32
|
+
placement: "bottom-end",
|
|
33
|
+
strategy: "fixed",
|
|
34
|
+
modifiers: [
|
|
35
|
+
{ name: "offset", options: { offset: [0, 4] } },
|
|
36
|
+
{ name: "preventOverflow", options: { padding: 8 } },
|
|
37
|
+
{ name: "flip", options: { padding: 8 } }
|
|
38
|
+
]
|
|
39
|
+
}));
|
|
40
|
+
}
|
|
41
|
+
_destroyPopper() {
|
|
42
|
+
this._popper?.destroy(), this._popper = void 0;
|
|
43
|
+
}
|
|
44
|
+
_setOpen(t) {
|
|
45
|
+
this._open !== t && (this._open = t, this.dispatchEvent(
|
|
46
|
+
new CustomEvent(t ? "dropdown-open" : "dropdown-close", {
|
|
47
|
+
bubbles: !0,
|
|
48
|
+
composed: !0
|
|
49
|
+
})
|
|
50
|
+
));
|
|
51
|
+
}
|
|
52
|
+
// ── Event handlers ────────────────────────────────────────────────────────
|
|
53
|
+
_onActionClick(t) {
|
|
54
|
+
t.stopPropagation(), !this.disabled && this.dispatchEvent(new CustomEvent("action", { bubbles: !0, composed: !0 }));
|
|
55
|
+
}
|
|
56
|
+
_onDropdownClick(t) {
|
|
57
|
+
t.stopPropagation(), !(this.disabled || this.dropdownDisabled) && this._setOpen(!this._open);
|
|
58
|
+
}
|
|
59
|
+
_onItemClick(t) {
|
|
60
|
+
t.disabled || (this.dispatchEvent(
|
|
61
|
+
new CustomEvent("item-select", {
|
|
62
|
+
detail: { value: t.value, item: t },
|
|
63
|
+
bubbles: !0,
|
|
64
|
+
composed: !0
|
|
65
|
+
})
|
|
66
|
+
), this._setOpen(!1));
|
|
67
|
+
}
|
|
68
|
+
_onKeydown(t, o) {
|
|
69
|
+
(t.key === "Enter" || t.key === " ") && (t.preventDefault(), o === "action" ? this._onActionClick(t) : this._onDropdownClick(t));
|
|
70
|
+
}
|
|
71
|
+
// ── Render ────────────────────────────────────────────────────────────────
|
|
72
|
+
_renderPanel() {
|
|
73
|
+
if (!this._open) return b;
|
|
74
|
+
const t = this.items.length > 0;
|
|
75
|
+
return r`
|
|
76
|
+
<div
|
|
77
|
+
class="split-button__panel"
|
|
78
|
+
role="menu"
|
|
79
|
+
aria-label="${this.label} options"
|
|
80
|
+
>
|
|
81
|
+
${t ? this.items.map((o) => r`
|
|
82
|
+
${o.divider ? r`<div class="split-button__panel-divider" role="separator"></div>` : b}
|
|
83
|
+
<button
|
|
84
|
+
class="split-button__panel-item ${o.disabled ? "split-button__panel-item--disabled" : ""}"
|
|
85
|
+
role="menuitem"
|
|
86
|
+
?disabled=${o.disabled}
|
|
87
|
+
@click=${() => this._onItemClick(o)}
|
|
88
|
+
>
|
|
89
|
+
${o.icon ? r`<ui-icon name=${o.icon} size="16"></ui-icon>` : b}
|
|
90
|
+
<span>${o.label}</span>
|
|
91
|
+
</button>
|
|
92
|
+
`) : r`<slot name="dropdown"></slot>`}
|
|
93
|
+
</div>
|
|
94
|
+
`;
|
|
95
|
+
}
|
|
96
|
+
render() {
|
|
97
|
+
const t = this.disabled, o = this.disabled || this.dropdownDisabled;
|
|
98
|
+
return r`
|
|
99
|
+
<div
|
|
100
|
+
class="split-button split-button--${this.size} split-button--${this.theme}
|
|
101
|
+
${this.disabled ? "split-button--disabled" : ""}
|
|
102
|
+
${this._open ? "split-button--open" : ""}"
|
|
103
|
+
role="group"
|
|
104
|
+
>
|
|
105
|
+
<!-- Main action -->
|
|
106
|
+
<button
|
|
107
|
+
class="split-button__action"
|
|
108
|
+
?disabled=${t}
|
|
109
|
+
aria-label=${this.label}
|
|
110
|
+
@click=${this._onActionClick}
|
|
111
|
+
@keydown=${(s) => this._onKeydown(s, "action")}
|
|
112
|
+
type="button"
|
|
113
|
+
>
|
|
114
|
+
<slot name="prefix"></slot>
|
|
115
|
+
<span class="split-button__label">
|
|
116
|
+
<slot>${this.label}</slot>
|
|
117
|
+
</span>
|
|
118
|
+
</button>
|
|
119
|
+
|
|
120
|
+
<!-- Dropdown trigger -->
|
|
121
|
+
<button
|
|
122
|
+
class="split-button__dropdown"
|
|
123
|
+
?disabled=${o}
|
|
124
|
+
aria-label="Open dropdown"
|
|
125
|
+
aria-haspopup="menu"
|
|
126
|
+
aria-expanded=${this._open ? "true" : "false"}
|
|
127
|
+
@click=${this._onDropdownClick}
|
|
128
|
+
@keydown=${(s) => this._onKeydown(s, "dropdown")}
|
|
129
|
+
type="button"
|
|
130
|
+
>
|
|
131
|
+
<ui-icon
|
|
132
|
+
name="uil-angle-down"
|
|
133
|
+
size="16"
|
|
134
|
+
class="split-button__chevron ${this._open ? "split-button__chevron--open" : ""}"
|
|
135
|
+
></ui-icon>
|
|
136
|
+
</button>
|
|
137
|
+
|
|
138
|
+
<!-- Dropdown panel -->
|
|
139
|
+
${this._renderPanel()}
|
|
140
|
+
</div>
|
|
141
|
+
`;
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
n.styles = [_`${u(w)}`];
|
|
145
|
+
i([
|
|
146
|
+
l({ type: String })
|
|
147
|
+
], n.prototype, "label", 2);
|
|
148
|
+
i([
|
|
149
|
+
l({ type: String })
|
|
150
|
+
], n.prototype, "size", 2);
|
|
151
|
+
i([
|
|
152
|
+
l({ type: String })
|
|
153
|
+
], n.prototype, "theme", 2);
|
|
154
|
+
i([
|
|
155
|
+
l({ type: Boolean })
|
|
156
|
+
], n.prototype, "disabled", 2);
|
|
157
|
+
i([
|
|
158
|
+
l({ type: Boolean })
|
|
159
|
+
], n.prototype, "dropdownDisabled", 2);
|
|
160
|
+
i([
|
|
161
|
+
l({ attribute: !1 })
|
|
162
|
+
], n.prototype, "items", 2);
|
|
163
|
+
i([
|
|
164
|
+
g()
|
|
165
|
+
], n.prototype, "_open", 2);
|
|
166
|
+
i([
|
|
167
|
+
c(".split-button__dropdown")
|
|
168
|
+
], n.prototype, "_dropdownBtn", 2);
|
|
169
|
+
i([
|
|
170
|
+
c(".split-button__panel")
|
|
171
|
+
], n.prototype, "_panel", 2);
|
|
172
|
+
n = i([
|
|
173
|
+
h("logosphere-split-button")
|
|
174
|
+
], n);
|
|
175
|
+
export {
|
|
176
|
+
n as S
|
|
177
|
+
};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";const n=require("lit"),i=require("lit/decorators.js"),d=require("@popperjs/core");require("./ui-icon-DWl7I5BQ.cjs");const b=":host{display:inline-block;position:relative}.split-button{display:inline-flex;align-items:stretch;gap:1px;font-family:var(--font-family-base);border-radius:var(--radius-base);overflow:hidden}.split-button__action,.split-button__dropdown{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:1.25rem;letter-spacing:-.14px;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-base) var(--transition-timing);outline:none}.split-button__action:focus-visible,.split-button__dropdown:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;position:relative;z-index:1}.split-button__action:disabled,.split-button__dropdown:disabled{cursor:not-allowed;pointer-events:none}.split-button__action{gap:var(--spacing-1)}.split-button__chevron{transition:transform var(--transition-speed-base) var(--transition-timing);display:inline-flex}.split-button__chevron--open{transform:rotate(180deg)}.split-button--sm .split-button__action{padding:var(--spacing-0-5) var(--spacing-2)}.split-button--sm .split-button__dropdown{padding:var(--spacing-0-5) var(--spacing-1-5)}.split-button--md .split-button__action{padding:var(--spacing-1-5) var(--spacing-3)}.split-button--md .split-button__dropdown{padding:var(--spacing-1-5) var(--spacing-2)}.split-button--lg .split-button__action{padding:var(--spacing-2-5) var(--spacing-3)}.split-button--lg .split-button__dropdown{padding:var(--spacing-2-5) var(--spacing-2)}.split-button{background-color:#fff6}.split-button--primary .split-button__action,.split-button--primary .split-button__dropdown{background-color:var(--color-primary);color:#fff}.split-button--primary .split-button__action:hover:not(:disabled),.split-button--primary .split-button__dropdown:hover:not(:disabled){background-color:var(--color-primary-hover)}.split-button--primary .split-button__action:active:not(:disabled),.split-button--primary .split-button__dropdown:active:not(:disabled){background-color:var(--color-primary-active)}.split-button--primary.split-button--disabled,.split-button--primary .split-button__action:disabled,.split-button--primary .split-button__dropdown:disabled{background-color:var(--color-primary-disabled)}.split-button--primary.split-button--disabled .split-button__action,.split-button--primary.split-button--disabled .split-button__dropdown{background-color:var(--color-primary-disabled)}.split-button--secondary .split-button__action,.split-button--secondary .split-button__dropdown{background-color:var(--color-secondary);color:#fff}.split-button--secondary .split-button__action:hover:not(:disabled),.split-button--secondary .split-button__dropdown:hover:not(:disabled){background-color:var(--color-secondary-hover)}.split-button--secondary .split-button__action:active:not(:disabled),.split-button--secondary .split-button__dropdown:active:not(:disabled){background-color:var(--color-secondary-active)}.split-button--secondary.split-button--disabled .split-button__action,.split-button--secondary.split-button--disabled .split-button__dropdown,.split-button--secondary .split-button__action:disabled,.split-button--secondary .split-button__dropdown:disabled{background-color:var(--color-secondary-disabled)}.split-button--success .split-button__action,.split-button--success .split-button__dropdown{background-color:var(--color-success);color:#fff}.split-button--success .split-button__action:hover:not(:disabled),.split-button--success .split-button__dropdown:hover:not(:disabled){background-color:var(--color-success-hover)}.split-button--success .split-button__action:active:not(:disabled),.split-button--success .split-button__dropdown:active:not(:disabled){background-color:var(--color-success-active)}.split-button--success.split-button--disabled .split-button__action,.split-button--success.split-button--disabled .split-button__dropdown,.split-button--success .split-button__action:disabled,.split-button--success .split-button__dropdown:disabled{background-color:var(--color-success-disabled)}.split-button--danger .split-button__action,.split-button--danger .split-button__dropdown{background-color:var(--color-danger);color:#fff}.split-button--danger .split-button__action:hover:not(:disabled),.split-button--danger .split-button__dropdown:hover:not(:disabled){background-color:var(--color-danger-hover)}.split-button--danger .split-button__action:active:not(:disabled),.split-button--danger .split-button__dropdown:active:not(:disabled){background-color:var(--color-danger-active)}.split-button--danger.split-button--disabled .split-button__action,.split-button--danger.split-button--disabled .split-button__dropdown,.split-button--danger .split-button__action:disabled,.split-button--danger .split-button__dropdown:disabled{background-color:var(--color-danger-disabled)}.split-button--info .split-button__action,.split-button--info .split-button__dropdown{background-color:var(--color-info);color:#fff}.split-button--info .split-button__action:hover:not(:disabled),.split-button--info .split-button__dropdown:hover:not(:disabled){background-color:var(--color-info-hover)}.split-button--info .split-button__action:active:not(:disabled),.split-button--info .split-button__dropdown:active:not(:disabled){background-color:var(--color-info-active)}.split-button--info.split-button--disabled .split-button__action,.split-button--info.split-button--disabled .split-button__dropdown,.split-button--info .split-button__action:disabled,.split-button--info .split-button__dropdown:disabled{background-color:var(--color-info-disabled)}.split-button--warning .split-button__action,.split-button--warning .split-button__dropdown{background-color:var(--color-warning);color:var(--color-warning-emphasis)}.split-button--warning .split-button__action:hover:not(:disabled),.split-button--warning .split-button__dropdown:hover:not(:disabled){background-color:var(--color-warning-hover)}.split-button--warning .split-button__action:active:not(:disabled),.split-button--warning .split-button__dropdown:active:not(:disabled){background-color:var(--color-warning-active)}.split-button--warning.split-button--disabled .split-button__action,.split-button--warning.split-button--disabled .split-button__dropdown,.split-button--warning .split-button__action:disabled,.split-button--warning .split-button__dropdown:disabled{background-color:var(--color-warning-disabled)}.split-button__panel{position:fixed;z-index:var(--z-index-dropdown);min-width:160px;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-lg);padding:var(--spacing-1) 0;outline:none}.split-button__panel-item{display:flex;align-items:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-3);background:none;border:none;cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-body-color);text-align:left;white-space:nowrap;transition:background-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.split-button__panel-item:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.split-button__panel-item:active:not(:disabled){background-color:var(--color-body-bg-active)}.split-button__panel-item--disabled,.split-button__panel-item:disabled{color:var(--color-secondary-disabled);cursor:not-allowed;pointer-events:none}.split-button__panel-divider{height:1px;background-color:var(--color-border);margin:var(--spacing-1) 0}";var c=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(l,t,o,e)=>{for(var r=e>1?void 0:e?u(t,o):t,a=l.length-1,p;a>=0;a--)(p=l[a])&&(r=(e?p(t,o,r):p(r))||r);return e&&r&&c(t,o,r),r};exports.SplitButton=class extends n.LitElement{constructor(){super(...arguments),this.label="Button",this.size="md",this.theme="primary",this.disabled=!1,this.dropdownDisabled=!1,this.items=[],this._open=!1,this._onDocClick=t=>{this._open&&(t.composedPath().includes(this)||this._setOpen(!1))},this._onDocKeydown=t=>{t.key==="Escape"&&this._open&&this._setOpen(!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._onDocClick,{capture:!0}),document.addEventListener("keydown",this._onDocKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._onDocClick,{capture:!0}),document.removeEventListener("keydown",this._onDocKeydown),this._destroyPopper()}updated(t){super.updated(t),t.has("_open")&&(this._open?this._initPopper():this._destroyPopper())}_initPopper(){!this._dropdownBtn||!this._panel||(this._popper=d.createPopper(this._dropdownBtn,this._panel,{placement:"bottom-end",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"preventOverflow",options:{padding:8}},{name:"flip",options:{padding:8}}]}))}_destroyPopper(){this._popper?.destroy(),this._popper=void 0}_setOpen(t){this._open!==t&&(this._open=t,this.dispatchEvent(new CustomEvent(t?"dropdown-open":"dropdown-close",{bubbles:!0,composed:!0})))}_onActionClick(t){t.stopPropagation(),!this.disabled&&this.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0}))}_onDropdownClick(t){t.stopPropagation(),!(this.disabled||this.dropdownDisabled)&&this._setOpen(!this._open)}_onItemClick(t){t.disabled||(this.dispatchEvent(new CustomEvent("item-select",{detail:{value:t.value,item:t},bubbles:!0,composed:!0})),this._setOpen(!1))}_onKeydown(t,o){(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),o==="action"?this._onActionClick(t):this._onDropdownClick(t))}_renderPanel(){if(!this._open)return n.nothing;const t=this.items.length>0;return n.html`
|
|
2
|
+
<div
|
|
3
|
+
class="split-button__panel"
|
|
4
|
+
role="menu"
|
|
5
|
+
aria-label="${this.label} options"
|
|
6
|
+
>
|
|
7
|
+
${t?this.items.map(o=>n.html`
|
|
8
|
+
${o.divider?n.html`<div class="split-button__panel-divider" role="separator"></div>`:n.nothing}
|
|
9
|
+
<button
|
|
10
|
+
class="split-button__panel-item ${o.disabled?"split-button__panel-item--disabled":""}"
|
|
11
|
+
role="menuitem"
|
|
12
|
+
?disabled=${o.disabled}
|
|
13
|
+
@click=${()=>this._onItemClick(o)}
|
|
14
|
+
>
|
|
15
|
+
${o.icon?n.html`<ui-icon name=${o.icon} size="16"></ui-icon>`:n.nothing}
|
|
16
|
+
<span>${o.label}</span>
|
|
17
|
+
</button>
|
|
18
|
+
`):n.html`<slot name="dropdown"></slot>`}
|
|
19
|
+
</div>
|
|
20
|
+
`}render(){const t=this.disabled,o=this.disabled||this.dropdownDisabled;return n.html`
|
|
21
|
+
<div
|
|
22
|
+
class="split-button split-button--${this.size} split-button--${this.theme}
|
|
23
|
+
${this.disabled?"split-button--disabled":""}
|
|
24
|
+
${this._open?"split-button--open":""}"
|
|
25
|
+
role="group"
|
|
26
|
+
>
|
|
27
|
+
<!-- Main action -->
|
|
28
|
+
<button
|
|
29
|
+
class="split-button__action"
|
|
30
|
+
?disabled=${t}
|
|
31
|
+
aria-label=${this.label}
|
|
32
|
+
@click=${this._onActionClick}
|
|
33
|
+
@keydown=${e=>this._onKeydown(e,"action")}
|
|
34
|
+
type="button"
|
|
35
|
+
>
|
|
36
|
+
<slot name="prefix"></slot>
|
|
37
|
+
<span class="split-button__label">
|
|
38
|
+
<slot>${this.label}</slot>
|
|
39
|
+
</span>
|
|
40
|
+
</button>
|
|
41
|
+
|
|
42
|
+
<!-- Dropdown trigger -->
|
|
43
|
+
<button
|
|
44
|
+
class="split-button__dropdown"
|
|
45
|
+
?disabled=${o}
|
|
46
|
+
aria-label="Open dropdown"
|
|
47
|
+
aria-haspopup="menu"
|
|
48
|
+
aria-expanded=${this._open?"true":"false"}
|
|
49
|
+
@click=${this._onDropdownClick}
|
|
50
|
+
@keydown=${e=>this._onKeydown(e,"dropdown")}
|
|
51
|
+
type="button"
|
|
52
|
+
>
|
|
53
|
+
<ui-icon
|
|
54
|
+
name="uil-angle-down"
|
|
55
|
+
size="16"
|
|
56
|
+
class="split-button__chevron ${this._open?"split-button__chevron--open":""}"
|
|
57
|
+
></ui-icon>
|
|
58
|
+
</button>
|
|
59
|
+
|
|
60
|
+
<!-- Dropdown panel -->
|
|
61
|
+
${this._renderPanel()}
|
|
62
|
+
</div>
|
|
63
|
+
`}};exports.SplitButton.styles=[n.css`${n.unsafeCSS(b)}`];s([i.property({type:String})],exports.SplitButton.prototype,"label",2);s([i.property({type:String})],exports.SplitButton.prototype,"size",2);s([i.property({type:String})],exports.SplitButton.prototype,"theme",2);s([i.property({type:Boolean})],exports.SplitButton.prototype,"disabled",2);s([i.property({type:Boolean})],exports.SplitButton.prototype,"dropdownDisabled",2);s([i.property({attribute:!1})],exports.SplitButton.prototype,"items",2);s([i.state()],exports.SplitButton.prototype,"_open",2);s([i.query(".split-button__dropdown")],exports.SplitButton.prototype,"_dropdownBtn",2);s([i.query(".split-button__panel")],exports.SplitButton.prototype,"_panel",2);exports.SplitButton=s([i.customElement("logosphere-split-button")],exports.SplitButton);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./split-button-BpffPlVg.cjs");Object.defineProperty(exports,"SplitButton",{enumerable:!0,get:()=>t.SplitButton});
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { unsafeCSS as _, css as h, LitElement as v, html as i, nothing as s } from "lit";
|
|
2
|
+
import { property as c, customElement as u } from "lit/decorators.js";
|
|
3
|
+
import "./ui-icon-BeR-PaPg.js";
|
|
4
|
+
const b = ":host{display:block}.stepper{display:flex;font-family:var(--font-family-base)}.stepper--horizontal{flex-direction:row;align-items:flex-start}.stepper--horizontal .stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;min-width:0}.stepper--horizontal .stepper__step-header{display:flex;flex-direction:column;align-items:center;width:100%;position:relative}.stepper--horizontal .stepper__connector{position:absolute;top:10px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;z-index:0}.stepper--horizontal .stepper__labels{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:var(--spacing-2);padding:0 var(--spacing-1)}.stepper--vertical{flex-direction:column;align-items:stretch}.stepper--vertical .stepper__step{display:flex;flex-direction:column;position:relative}.stepper--vertical .stepper__step-header{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-3)}.stepper--vertical .stepper__labels{display:flex;flex-direction:column;padding-top:var(--spacing-1);padding-bottom:var(--spacing-4)}.stepper--vertical .stepper__connector{position:absolute;top:28px;left:9px;width:2px;bottom:0}.stepper__indicator{width:20px;height:20px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.stepper__indicator-number{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1}.stepper__indicator-dot{width:10px;height:10px;border-radius:var(--radius-full);background-color:var(--color-primary);flex-shrink:0}.stepper__indicator--completed{background-color:var(--color-primary);border:2px solid var(--color-primary);color:#fff}.stepper__indicator--current{background-color:var(--color-body-bg);border:2px solid var(--color-primary)}.stepper__indicator--upcoming{background-color:var(--color-body-bg);border:2px solid var(--color-border);color:var(--color-tertiary)}.stepper__indicator--disabled{background-color:var(--color-light-bg);border:2px solid var(--color-secondary-disabled);color:var(--color-secondary-disabled)}.stepper__connector--completed{background-color:var(--color-primary)}.stepper__connector--upcoming{background-color:var(--color-border)}.stepper__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);color:var(--color-body-color);white-space:nowrap}.stepper__description{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-tertiary);margin-top:var(--spacing-0-5);white-space:normal}.stepper__step--current .stepper__title{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.stepper__step--upcoming .stepper__title{color:var(--color-tertiary)}.stepper__step--disabled .stepper__title,.stepper__step--disabled .stepper__description{color:var(--color-secondary-disabled)}.stepper__step--clickable{cursor:pointer}.stepper__step--clickable:hover .stepper__indicator--upcoming,.stepper__step--clickable:hover .stepper__indicator--completed{box-shadow:0 0 0 4px var(--color-primary-bg-subtle)}.stepper__step--clickable:focus-visible{outline:none}.stepper__step--clickable:focus-visible .stepper__indicator{box-shadow:0 0 0 4px var(--color-primary-bg-subtle)}";
|
|
5
|
+
var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (e, t, r, a) => {
|
|
6
|
+
for (var o = a > 1 ? void 0 : a ? m(t, r) : t, l = e.length - 1, d; l >= 0; l--)
|
|
7
|
+
(d = e[l]) && (o = (a ? d(t, r, o) : d(o)) || o);
|
|
8
|
+
return a && o && f(t, r, o), o;
|
|
9
|
+
};
|
|
10
|
+
let p = class extends v {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments), this.steps = [], this.activeStep = 0, this.orientation = "horizontal", this.clickable = !1;
|
|
13
|
+
}
|
|
14
|
+
// ── Computed state ──────────────────────────────────────────────────────────
|
|
15
|
+
_resolveState(e, t) {
|
|
16
|
+
return e.state ? e.state : e.disabled ? "disabled" : t < this.activeStep ? "completed" : t === this.activeStep ? "current" : "upcoming";
|
|
17
|
+
}
|
|
18
|
+
// ── Event handlers ──────────────────────────────────────────────────────────
|
|
19
|
+
_onStepClick(e, t) {
|
|
20
|
+
!this.clickable || t === "disabled" || t === "upcoming" || (this.activeStep = e, this.dispatchEvent(
|
|
21
|
+
new CustomEvent("step-change", {
|
|
22
|
+
detail: { index: e, step: this.steps[e] },
|
|
23
|
+
bubbles: !0,
|
|
24
|
+
composed: !0
|
|
25
|
+
})
|
|
26
|
+
));
|
|
27
|
+
}
|
|
28
|
+
_onStepKeydown(e, t, r) {
|
|
29
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._onStepClick(t, r)), (e.key === "ArrowRight" || e.key === "ArrowDown") && (e.preventDefault(), this._focusStep(t + 1)), (e.key === "ArrowLeft" || e.key === "ArrowUp") && (e.preventDefault(), this._focusStep(t - 1));
|
|
30
|
+
}
|
|
31
|
+
_focusStep(e) {
|
|
32
|
+
const t = Math.max(0, Math.min(this.steps.length - 1, e));
|
|
33
|
+
this.shadowRoot?.querySelector(
|
|
34
|
+
`[data-step-index="${t}"]`
|
|
35
|
+
)?.focus();
|
|
36
|
+
}
|
|
37
|
+
// ── Render helpers ──────────────────────────────────────────────────────────
|
|
38
|
+
_renderIndicator(e, t) {
|
|
39
|
+
let r;
|
|
40
|
+
return e === "completed" ? r = i`<ui-icon name="uil-check" size="12"></ui-icon>` : e === "current" ? r = i`<span class="stepper__indicator-dot"></span>` : r = i`<span class="stepper__indicator-number">${t + 1}</span>`, i`
|
|
41
|
+
<div
|
|
42
|
+
class="stepper__indicator stepper__indicator--${e}"
|
|
43
|
+
aria-hidden="true"
|
|
44
|
+
>
|
|
45
|
+
${r}
|
|
46
|
+
</div>
|
|
47
|
+
`;
|
|
48
|
+
}
|
|
49
|
+
_renderConnector(e, t) {
|
|
50
|
+
return t ? s : i`
|
|
51
|
+
<div
|
|
52
|
+
class="stepper__connector stepper__connector--${e === "completed" ? "completed" : "upcoming"}"
|
|
53
|
+
aria-hidden="true"
|
|
54
|
+
></div>
|
|
55
|
+
`;
|
|
56
|
+
}
|
|
57
|
+
_renderStep(e, t) {
|
|
58
|
+
const r = this._resolveState(e, t), a = t === this.steps.length - 1, o = this.clickable && (r === "completed" || r === "current");
|
|
59
|
+
return i`
|
|
60
|
+
<div
|
|
61
|
+
class="stepper__step stepper__step--${r} ${o ? "stepper__step--clickable" : ""}"
|
|
62
|
+
data-step-index=${t}
|
|
63
|
+
role=${this.clickable ? "button" : "listitem"}
|
|
64
|
+
tabindex=${o ? "0" : "-1"}
|
|
65
|
+
aria-current=${r === "current" ? "step" : s}
|
|
66
|
+
aria-disabled=${r === "disabled" ? "true" : s}
|
|
67
|
+
aria-label="${e.title}${e.description ? `, ${e.description}` : ""}, ${r}"
|
|
68
|
+
@click=${() => this._onStepClick(t, r)}
|
|
69
|
+
@keydown=${(l) => this._onStepKeydown(l, t, r)}
|
|
70
|
+
>
|
|
71
|
+
<div class="stepper__step-header">
|
|
72
|
+
${this._renderIndicator(r, t)}
|
|
73
|
+
${this.orientation === "vertical" ? i`
|
|
74
|
+
<div class="stepper__labels">
|
|
75
|
+
<span class="stepper__title">${e.title}</span>
|
|
76
|
+
${e.description ? i`<span class="stepper__description">${e.description}</span>` : s}
|
|
77
|
+
</div>
|
|
78
|
+
` : s}
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
${this.orientation === "horizontal" ? i`
|
|
82
|
+
<div class="stepper__labels">
|
|
83
|
+
<span class="stepper__title">${e.title}</span>
|
|
84
|
+
${e.description ? i`<span class="stepper__description">${e.description}</span>` : s}
|
|
85
|
+
</div>
|
|
86
|
+
` : s}
|
|
87
|
+
|
|
88
|
+
${this._renderConnector(r, a)}
|
|
89
|
+
</div>
|
|
90
|
+
`;
|
|
91
|
+
}
|
|
92
|
+
render() {
|
|
93
|
+
return i`
|
|
94
|
+
<div
|
|
95
|
+
class="stepper stepper--${this.orientation}"
|
|
96
|
+
role="list"
|
|
97
|
+
aria-label="Progress steps"
|
|
98
|
+
>
|
|
99
|
+
${this.steps.map((e, t) => this._renderStep(e, t))}
|
|
100
|
+
</div>
|
|
101
|
+
`;
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
p.styles = [h`${_(b)}`];
|
|
105
|
+
n([
|
|
106
|
+
c({ attribute: !1 })
|
|
107
|
+
], p.prototype, "steps", 2);
|
|
108
|
+
n([
|
|
109
|
+
c({ type: Number })
|
|
110
|
+
], p.prototype, "activeStep", 2);
|
|
111
|
+
n([
|
|
112
|
+
c({ type: String })
|
|
113
|
+
], p.prototype, "orientation", 2);
|
|
114
|
+
n([
|
|
115
|
+
c({ type: Boolean })
|
|
116
|
+
], p.prototype, "clickable", 2);
|
|
117
|
+
p = n([
|
|
118
|
+
u("logosphere-stepper")
|
|
119
|
+
], p);
|
|
120
|
+
export {
|
|
121
|
+
p as S
|
|
122
|
+
};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";const i=require("lit"),a=require("lit/decorators.js");require("./ui-icon-DWl7I5BQ.cjs");const c=":host{display:block}.stepper{display:flex;font-family:var(--font-family-base)}.stepper--horizontal{flex-direction:row;align-items:flex-start}.stepper--horizontal .stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;min-width:0}.stepper--horizontal .stepper__step-header{display:flex;flex-direction:column;align-items:center;width:100%;position:relative}.stepper--horizontal .stepper__connector{position:absolute;top:10px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;z-index:0}.stepper--horizontal .stepper__labels{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:var(--spacing-2);padding:0 var(--spacing-1)}.stepper--vertical{flex-direction:column;align-items:stretch}.stepper--vertical .stepper__step{display:flex;flex-direction:column;position:relative}.stepper--vertical .stepper__step-header{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-3)}.stepper--vertical .stepper__labels{display:flex;flex-direction:column;padding-top:var(--spacing-1);padding-bottom:var(--spacing-4)}.stepper--vertical .stepper__connector{position:absolute;top:28px;left:9px;width:2px;bottom:0}.stepper__indicator{width:20px;height:20px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.stepper__indicator-number{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1}.stepper__indicator-dot{width:10px;height:10px;border-radius:var(--radius-full);background-color:var(--color-primary);flex-shrink:0}.stepper__indicator--completed{background-color:var(--color-primary);border:2px solid var(--color-primary);color:#fff}.stepper__indicator--current{background-color:var(--color-body-bg);border:2px solid var(--color-primary)}.stepper__indicator--upcoming{background-color:var(--color-body-bg);border:2px solid var(--color-border);color:var(--color-tertiary)}.stepper__indicator--disabled{background-color:var(--color-light-bg);border:2px solid var(--color-secondary-disabled);color:var(--color-secondary-disabled)}.stepper__connector--completed{background-color:var(--color-primary)}.stepper__connector--upcoming{background-color:var(--color-border)}.stepper__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);color:var(--color-body-color);white-space:nowrap}.stepper__description{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-tertiary);margin-top:var(--spacing-0-5);white-space:normal}.stepper__step--current .stepper__title{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.stepper__step--upcoming .stepper__title{color:var(--color-tertiary)}.stepper__step--disabled .stepper__title,.stepper__step--disabled .stepper__description{color:var(--color-secondary-disabled)}.stepper__step--clickable{cursor:pointer}.stepper__step--clickable:hover .stepper__indicator--upcoming,.stepper__step--clickable:hover .stepper__indicator--completed{box-shadow:0 0 0 4px var(--color-primary-bg-subtle)}.stepper__step--clickable:focus-visible{outline:none}.stepper__step--clickable:focus-visible .stepper__indicator{box-shadow:0 0 0 4px var(--color-primary-bg-subtle)}";var d=Object.defineProperty,_=Object.getOwnPropertyDescriptor,n=(l,e,t,r)=>{for(var o=r>1?void 0:r?_(e,t):e,p=l.length-1,s;p>=0;p--)(s=l[p])&&(o=(r?s(e,t,o):s(o))||o);return r&&o&&d(e,t,o),o};exports.Stepper=class extends i.LitElement{constructor(){super(...arguments),this.steps=[],this.activeStep=0,this.orientation="horizontal",this.clickable=!1}_resolveState(e,t){return e.state?e.state:e.disabled?"disabled":t<this.activeStep?"completed":t===this.activeStep?"current":"upcoming"}_onStepClick(e,t){!this.clickable||t==="disabled"||t==="upcoming"||(this.activeStep=e,this.dispatchEvent(new CustomEvent("step-change",{detail:{index:e,step:this.steps[e]},bubbles:!0,composed:!0})))}_onStepKeydown(e,t,r){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._onStepClick(t,r)),(e.key==="ArrowRight"||e.key==="ArrowDown")&&(e.preventDefault(),this._focusStep(t+1)),(e.key==="ArrowLeft"||e.key==="ArrowUp")&&(e.preventDefault(),this._focusStep(t-1))}_focusStep(e){const t=Math.max(0,Math.min(this.steps.length-1,e));this.shadowRoot?.querySelector(`[data-step-index="${t}"]`)?.focus()}_renderIndicator(e,t){let r;return e==="completed"?r=i.html`<ui-icon name="uil-check" size="12"></ui-icon>`:e==="current"?r=i.html`<span class="stepper__indicator-dot"></span>`:r=i.html`<span class="stepper__indicator-number">${t+1}</span>`,i.html`
|
|
2
|
+
<div
|
|
3
|
+
class="stepper__indicator stepper__indicator--${e}"
|
|
4
|
+
aria-hidden="true"
|
|
5
|
+
>
|
|
6
|
+
${r}
|
|
7
|
+
</div>
|
|
8
|
+
`}_renderConnector(e,t){return t?i.nothing:i.html`
|
|
9
|
+
<div
|
|
10
|
+
class="stepper__connector stepper__connector--${e==="completed"?"completed":"upcoming"}"
|
|
11
|
+
aria-hidden="true"
|
|
12
|
+
></div>
|
|
13
|
+
`}_renderStep(e,t){const r=this._resolveState(e,t),o=t===this.steps.length-1,p=this.clickable&&(r==="completed"||r==="current");return i.html`
|
|
14
|
+
<div
|
|
15
|
+
class="stepper__step stepper__step--${r} ${p?"stepper__step--clickable":""}"
|
|
16
|
+
data-step-index=${t}
|
|
17
|
+
role=${this.clickable?"button":"listitem"}
|
|
18
|
+
tabindex=${p?"0":"-1"}
|
|
19
|
+
aria-current=${r==="current"?"step":i.nothing}
|
|
20
|
+
aria-disabled=${r==="disabled"?"true":i.nothing}
|
|
21
|
+
aria-label="${e.title}${e.description?`, ${e.description}`:""}, ${r}"
|
|
22
|
+
@click=${()=>this._onStepClick(t,r)}
|
|
23
|
+
@keydown=${s=>this._onStepKeydown(s,t,r)}
|
|
24
|
+
>
|
|
25
|
+
<div class="stepper__step-header">
|
|
26
|
+
${this._renderIndicator(r,t)}
|
|
27
|
+
${this.orientation==="vertical"?i.html`
|
|
28
|
+
<div class="stepper__labels">
|
|
29
|
+
<span class="stepper__title">${e.title}</span>
|
|
30
|
+
${e.description?i.html`<span class="stepper__description">${e.description}</span>`:i.nothing}
|
|
31
|
+
</div>
|
|
32
|
+
`:i.nothing}
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
${this.orientation==="horizontal"?i.html`
|
|
36
|
+
<div class="stepper__labels">
|
|
37
|
+
<span class="stepper__title">${e.title}</span>
|
|
38
|
+
${e.description?i.html`<span class="stepper__description">${e.description}</span>`:i.nothing}
|
|
39
|
+
</div>
|
|
40
|
+
`:i.nothing}
|
|
41
|
+
|
|
42
|
+
${this._renderConnector(r,o)}
|
|
43
|
+
</div>
|
|
44
|
+
`}render(){return i.html`
|
|
45
|
+
<div
|
|
46
|
+
class="stepper stepper--${this.orientation}"
|
|
47
|
+
role="list"
|
|
48
|
+
aria-label="Progress steps"
|
|
49
|
+
>
|
|
50
|
+
${this.steps.map((e,t)=>this._renderStep(e,t))}
|
|
51
|
+
</div>
|
|
52
|
+
`}};exports.Stepper.styles=[i.css`${i.unsafeCSS(c)}`];n([a.property({attribute:!1})],exports.Stepper.prototype,"steps",2);n([a.property({type:Number})],exports.Stepper.prototype,"activeStep",2);n([a.property({type:String})],exports.Stepper.prototype,"orientation",2);n([a.property({type:Boolean})],exports.Stepper.prototype,"clickable",2);exports.Stepper=n([a.customElement("logosphere-stepper")],exports.Stepper);
|
package/dist/stepper.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./stepper-ZOMaU6aZ.cjs");Object.defineProperty(exports,"Stepper",{enumerable:!0,get:()=>e.Stepper});
|
package/dist/stepper.js
ADDED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const a=require("lit"),
|
|
1
|
+
"use strict";const a=require("lit"),c=require("lit/decorators.js"),d=":host{display:inline-block}.switch{display:inline-flex;align-items:center;position:relative;cursor:pointer}.switch--md{width:36px;height:20px}.switch--sm{width:28px;height:16px}.switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.switch__track{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px;cursor:pointer;transition:background-color var(--transition-speed-base) var(--transition-timing);background-color:var(--color-tertiary)}.switch__track--on{background-color:var(--color-primary)}.switch__track--disabled{cursor:not-allowed}.switch__track--disabled-off{background-color:var(--color-secondary-disabled)}.switch__track--disabled-on{background-color:var(--color-primary-disabled)}.switch__thumb{position:absolute;background-color:#fff;border-radius:50%;top:2px;left:2px;transform:translate(0);transition:transform var(--transition-speed-base) var(--transition-timing)}.switch--md .switch__thumb{width:16px;height:16px}.switch--sm .switch__thumb{width:12px;height:12px}";var l=Object.defineProperty,p=Object.getOwnPropertyDescriptor,r=(o,e,s,i)=>{for(var t=i>1?void 0:i?p(e,s):e,h=o.length-1,n;h>=0;h--)(n=o[h])&&(t=(i?n(e,s,t):n(t))||t);return i&&t&&l(e,s,t),t};exports.Switch=class extends a.LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.size="md"}onChange(e){const s=e.target;this.checked=s.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked}})),this.dispatchEvent(new CustomEvent("lgsChange",{bubbles:!0,composed:!0,detail:{checked:this.checked}}))}render(){const e=`switch switch--${this.size}`,s=["switch__track",this.checked&&!this.disabled?"switch__track--on":"",this.disabled?"switch__track--disabled":"",this.disabled&&this.checked?"switch__track--disabled-on":"",this.disabled&&!this.checked?"switch__track--disabled-off":""].filter(Boolean).join(" "),i=this.size==="sm"?12:16,t=this.checked?`translateX(${i}px)`:"translateX(0)";return a.html`
|
|
2
2
|
<label class="${e}">
|
|
3
3
|
<input
|
|
4
4
|
class="switch__input"
|
|
@@ -14,4 +14,4 @@
|
|
|
14
14
|
></span>
|
|
15
15
|
</div>
|
|
16
16
|
</label>
|
|
17
|
-
`}};exports.Switch.styles=[a.css`${a.unsafeCSS(d)}`];
|
|
17
|
+
`}};exports.Switch.styles=[a.css`${a.unsafeCSS(d)}`];r([c.property({type:Boolean})],exports.Switch.prototype,"checked",2);r([c.property({type:Boolean})],exports.Switch.prototype,"disabled",2);r([c.property({type:String})],exports.Switch.prototype,"size",2);r([c.query("input")],exports.Switch.prototype,"inputElement",2);exports.Switch=r([c.customElement("logosphere-switch")],exports.Switch);
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { unsafeCSS as d, css as l, LitElement as p, html as b } from "lit";
|
|
2
|
-
import { property as n, query as w, customElement as
|
|
3
|
-
const
|
|
4
|
-
var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor,
|
|
5
|
-
for (var
|
|
6
|
-
(h = i[o]) && (
|
|
7
|
-
return r &&
|
|
2
|
+
import { property as n, query as w, customElement as u } from "lit/decorators.js";
|
|
3
|
+
const _ = ":host{display:inline-block}.switch{display:inline-flex;align-items:center;position:relative;cursor:pointer}.switch--md{width:36px;height:20px}.switch--sm{width:28px;height:16px}.switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.switch__track{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px;cursor:pointer;transition:background-color var(--transition-speed-base) var(--transition-timing);background-color:var(--color-tertiary)}.switch__track--on{background-color:var(--color-primary)}.switch__track--disabled{cursor:not-allowed}.switch__track--disabled-off{background-color:var(--color-secondary-disabled)}.switch__track--disabled-on{background-color:var(--color-primary-disabled)}.switch__thumb{position:absolute;background-color:#fff;border-radius:50%;top:2px;left:2px;transform:translate(0);transition:transform var(--transition-speed-base) var(--transition-timing)}.switch--md .switch__thumb{width:16px;height:16px}.switch--sm .switch__thumb{width:12px;height:12px}";
|
|
4
|
+
var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (i, t, c, r) => {
|
|
5
|
+
for (var e = r > 1 ? void 0 : r ? g(t, c) : t, o = i.length - 1, h; o >= 0; o--)
|
|
6
|
+
(h = i[o]) && (e = (r ? h(t, c, e) : h(e)) || e);
|
|
7
|
+
return r && e && m(t, c, e), e;
|
|
8
8
|
};
|
|
9
|
-
let
|
|
9
|
+
let s = class extends p {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.checked = !1, this.disabled = !1, this.size = "md";
|
|
12
12
|
}
|
|
@@ -14,6 +14,10 @@ let e = class extends p {
|
|
|
14
14
|
const t = i.target;
|
|
15
15
|
this.checked = t.checked, this.dispatchEvent(new CustomEvent("change", {
|
|
16
16
|
detail: { checked: this.checked }
|
|
17
|
+
})), this.dispatchEvent(new CustomEvent("lgsChange", {
|
|
18
|
+
bubbles: !0,
|
|
19
|
+
composed: !0,
|
|
20
|
+
detail: { checked: this.checked }
|
|
17
21
|
}));
|
|
18
22
|
}
|
|
19
23
|
render() {
|
|
@@ -23,7 +27,7 @@ let e = class extends p {
|
|
|
23
27
|
this.disabled ? "switch__track--disabled" : "",
|
|
24
28
|
this.disabled && this.checked ? "switch__track--disabled-on" : "",
|
|
25
29
|
this.disabled && !this.checked ? "switch__track--disabled-off" : ""
|
|
26
|
-
].filter(Boolean).join(" "),
|
|
30
|
+
].filter(Boolean).join(" "), c = this.size === "sm" ? 12 : 16, r = this.checked ? `translateX(${c}px)` : "translateX(0)";
|
|
27
31
|
return b`
|
|
28
32
|
<label class="${i}">
|
|
29
33
|
<input
|
|
@@ -43,22 +47,22 @@ let e = class extends p {
|
|
|
43
47
|
`;
|
|
44
48
|
}
|
|
45
49
|
};
|
|
46
|
-
|
|
47
|
-
|
|
50
|
+
s.styles = [l`${d(_)}`];
|
|
51
|
+
a([
|
|
48
52
|
n({ type: Boolean })
|
|
49
|
-
],
|
|
50
|
-
|
|
53
|
+
], s.prototype, "checked", 2);
|
|
54
|
+
a([
|
|
51
55
|
n({ type: Boolean })
|
|
52
|
-
],
|
|
53
|
-
|
|
56
|
+
], s.prototype, "disabled", 2);
|
|
57
|
+
a([
|
|
54
58
|
n({ type: String })
|
|
55
|
-
],
|
|
56
|
-
|
|
59
|
+
], s.prototype, "size", 2);
|
|
60
|
+
a([
|
|
57
61
|
w("input")
|
|
58
|
-
],
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
],
|
|
62
|
+
], s.prototype, "inputElement", 2);
|
|
63
|
+
s = a([
|
|
64
|
+
u("logosphere-switch")
|
|
65
|
+
], s);
|
|
62
66
|
export {
|
|
63
|
-
|
|
67
|
+
s as S
|
|
64
68
|
};
|
package/dist/switch.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./switch-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./switch-Do6SCkPJ.cjs");Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>e.Switch});
|
package/dist/switch.js
CHANGED