@logosphere-ui/core 0.0.0-alpha.2 → 0.0.0-alpha.21
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/dist/atoms/FormField/formfield.d.ts +7 -0
- package/dist/badge-7IIatiRv.cjs +13 -0
- package/dist/{badge-DE7Tgd8Z.js → badge-B2chRYGd.js} +5 -4
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +1 -1
- package/dist/{breadcrumb-B-4yqoJZ.js → breadcrumb-BB61Xt0s.js} +3 -3
- package/dist/breadcrumb.js +1 -1
- package/dist/{button-C1EwOosO.js → button-BqOMevro.js} +4 -4
- package/dist/button.js +1 -1
- package/dist/calendar-LMn1ZF3N.cjs +88 -0
- package/dist/calendar-WZ_GQvnn.js +652 -0
- package/dist/calendar.cjs +1 -0
- package/dist/calendar.js +4 -0
- package/dist/{card-CUhlTJyJ.js → card-CNoTUaJC.js} +5 -4
- package/dist/{card-n8ka8Zk-.cjs → card-KiNHfEi2.cjs} +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/chatbot-B_3w7h4T.cjs +161 -0
- package/dist/{chatbot-Ces7Xveb.js → chatbot-uGYcx6Nn.js} +118 -107
- package/dist/chatbot.cjs +1 -1
- package/dist/chatbot.js +2 -2
- package/dist/{checkbox-7Rb3WKGx.js → checkbox-g6kl2jGR.js} +4 -4
- package/dist/checkbox.js +1 -1
- package/dist/combobox-C6zoQopK.cjs +113 -0
- package/dist/combobox-LBU6VHLi.js +376 -0
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/datepicker-CwDDA6np.cjs +85 -0
- package/dist/datepicker-SwKsdw3S.js +375 -0
- package/dist/datepicker.cjs +1 -1
- package/dist/datepicker.js +2 -2
- package/dist/{download-manager-A4fOxGWJ.js → download-manager-a541AYhr.js} +3 -3
- package/dist/download-manager.js +1 -1
- package/dist/drawer-BvcPd5nz.cjs +25 -0
- package/dist/drawer-DVINJB4a.js +106 -0
- package/dist/drawer.cjs +1 -0
- package/dist/drawer.js +4 -0
- package/dist/formfield-BFOIEicR.cjs +33 -0
- package/dist/formfield-CNh4mBSs.js +147 -0
- package/dist/formfield.cjs +1 -1
- package/dist/formfield.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +36 -27
- package/dist/index.umd.js +744 -490
- package/dist/input-JpAWN-M1.cjs +59 -0
- package/dist/{input-ByllRq9M.js → input-jmbvgWEq.js} +100 -80
- package/dist/input.cjs +1 -1
- package/dist/input.js +1 -1
- package/dist/left-menu.cjs +1 -0
- package/dist/left-menu.js +5 -0
- package/dist/leftmenu-C-q1h_2U.js +291 -0
- package/dist/leftmenu-DBcncBN8.cjs +74 -0
- package/dist/{modal-Bfc6WQSL.js → modal-B8aQyCBg.js} +6 -7
- package/dist/{modal-DQ8VFL-P.cjs → modal-DU1sszVn.cjs} +7 -7
- package/dist/modal.cjs +1 -1
- package/dist/modal.js +1 -1
- package/dist/molecules/Input/input.d.ts +3 -1
- package/dist/molecules/Textarea/text-area.d.ts +0 -1
- package/dist/organisms/Calendar/calendar.d.ts +54 -0
- package/dist/organisms/Calendar/index.d.ts +1 -0
- package/dist/organisms/Calendar/shared.d.ts +9 -0
- package/dist/organisms/Chatbot/chatbot.d.ts +3 -1
- package/dist/organisms/Chatbot/index.d.ts +1 -1
- package/dist/organisms/Combobox/combobox.d.ts +16 -0
- package/dist/organisms/DatePicker/datepicker.d.ts +33 -33
- package/dist/organisms/Drawer/drawer.d.ts +29 -0
- package/dist/organisms/Drawer/index.d.ts +1 -0
- package/dist/organisms/LeftMenu/index.d.ts +2 -0
- package/dist/organisms/LeftMenu/leftmenu-item.d.ts +14 -0
- package/dist/organisms/LeftMenu/leftmenu.d.ts +44 -0
- package/dist/organisms/TreeMenu/index.d.ts +1 -0
- package/dist/organisms/TreeMenu/tree-menu.d.ts +41 -0
- package/dist/popover-C2p5Pmts.cjs +30 -0
- package/dist/popover-CaVOXo_k.js +140 -0
- package/dist/popover.cjs +1 -1
- package/dist/popover.js +1 -1
- package/dist/{switch-Cpl53nRW.js → switch-CG4SSjTg.js} +4 -4
- package/dist/switch.js +1 -1
- package/dist/{tab-BKdN4xAz.js → tab-BYU_XEhp.js} +4 -4
- package/dist/tab.js +1 -1
- package/dist/text-area-CZDdxbrN.cjs +46 -0
- package/dist/{text-area-CtZY3yLA.js → text-area-Dec_k4rs.js} +45 -44
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/tree-menu-B1iwfHyd.cjs +47 -0
- package/dist/tree-menu-BbX8GK_z.js +154 -0
- package/dist/tree-menu.cjs +1 -0
- package/dist/tree-menu.js +4 -0
- package/dist/ui-icon-Bys4HYSQ.js +57 -0
- package/dist/ui-icon-DWh1MhBa.cjs +22 -0
- package/package.json +31 -2
- package/dist/badge-BbhaO73N.cjs +0 -13
- package/dist/chatbot-oRwt64d8.cjs +0 -160
- package/dist/combobox-BJbI-Tgi.js +0 -268
- package/dist/combobox-pmE7bgEL.cjs +0 -99
- package/dist/datepicker-DFJx45C-.js +0 -750
- package/dist/datepicker-b9JGTTMx.cjs +0 -115
- package/dist/directive-Z_rhNYWK.js +0 -240
- package/dist/directive-ekjitgzi.cjs +0 -3
- package/dist/formfield-D_7NFFoe.cjs +0 -27
- package/dist/formfield-d8fp9FTV.js +0 -118
- package/dist/input-DsIOQPGV.cjs +0 -46
- package/dist/live-BX-yBGvT.cjs +0 -1
- package/dist/live-WTVSYE2F.js +0 -24
- package/dist/popover-C_Ob86CJ.cjs +0 -30
- package/dist/popover-D-FXdEdS.js +0 -1040
- package/dist/text-area-DFDF5oos.cjs +0 -44
|
@@ -0,0 +1,375 @@
|
|
|
1
|
+
import { unsafeCSS as c, css as g, LitElement as f, nothing as _, html as d } from "lit";
|
|
2
|
+
import { property as a, state as l, query as u, customElement as m } from "lit/decorators.js";
|
|
3
|
+
import { live as y } from "lit/directives/live.js";
|
|
4
|
+
import { createPopper as b } from "@popperjs/core";
|
|
5
|
+
import "./formfield-CNh4mBSs.js";
|
|
6
|
+
import { s as v, D as E } from "./calendar-WZ_GQvnn.js";
|
|
7
|
+
import "./ui-icon-Bys4HYSQ.js";
|
|
8
|
+
import D from "dayjs";
|
|
9
|
+
const S = ".dp{display:block;position:relative;width:100%;font-family:var(--font-family-base)}.dp__field,.dp__reference{width:100%}.dp__input{width:100%;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);line-height:1.5}.dp__input::placeholder{color:var(--color-tertiary)}.dp__input:disabled{cursor:not-allowed}.dp__icon-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.dp__icon-btn_suffix{padding-right:var(--spacing-1)}.dp__icon-btn:hover{color:var(--color-gray-600)}.dp__icon-btn:disabled{cursor:not-allowed;opacity:.5}.dp__popup{background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:var(--z-index-dropdown);padding:var(--spacing-4);box-sizing:border-box;overflow:hidden;max-height:calc(100vh - 16px)}";
|
|
10
|
+
var C = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (t, e, n, s) => {
|
|
11
|
+
for (var o = s > 1 ? void 0 : s ? $(e, n) : e, p = t.length - 1, h; p >= 0; p--)
|
|
12
|
+
(h = t[p]) && (o = (s ? h(e, n, o) : h(o)) || o);
|
|
13
|
+
return s && o && C(e, n, o), o;
|
|
14
|
+
};
|
|
15
|
+
let w = 0;
|
|
16
|
+
const Y = () => `dp-${++w}`;
|
|
17
|
+
let r = class extends f {
|
|
18
|
+
constructor() {
|
|
19
|
+
super(...arguments), this.value = null, this.min = null, this.max = null, this.required = !1, this.disabled = !1, this.readonly = !1, this.expandFactor = 1.05, this.placeholder = "GG/AA/YYYY veya GG.AA.YYYY", this.label = "", this.helper = "", this.error = "", this.size = "default", this.variant = "default", this.rangeMode = !1, this.disabledDays = [], this.rangeStart = null, this.rangeEnd = null, this._open = !1, this._rangeStart = null, this._rangeEnd = null, this._hasError = !1, this._errorMsg = "", this._inputDraft = null, this._errorTimer = null, this.inputId = Y(), this._outsideClick = (t) => {
|
|
20
|
+
this._open && (t.composedPath().includes(this) || (this._parseAndSetDate(), this._toggleOpen(!1)));
|
|
21
|
+
}, this._openDropdown = () => {
|
|
22
|
+
this._toggleOpen(!0);
|
|
23
|
+
}, this._onBlur = () => {
|
|
24
|
+
this._parseAndSetDate();
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
willUpdate(t) {
|
|
28
|
+
t.has("rangeStart") && (this._rangeStart = this.rangeStart), t.has("rangeEnd") && (this._rangeEnd = this.rangeEnd), t.has("value") && !this._isInputFocused() && (this._inputDraft = null);
|
|
29
|
+
}
|
|
30
|
+
connectedCallback() {
|
|
31
|
+
super.connectedCallback(), window.addEventListener("click", this._outsideClick, !0);
|
|
32
|
+
}
|
|
33
|
+
disconnectedCallback() {
|
|
34
|
+
window.removeEventListener("click", this._outsideClick, !0), this._destroyPopper(), this._errorTimer && clearTimeout(this._errorTimer), super.disconnectedCallback();
|
|
35
|
+
}
|
|
36
|
+
updated(t) {
|
|
37
|
+
if (super.updated(t), t.has("_open")) {
|
|
38
|
+
this._open ? this._updatePopper() : this._destroyPopper();
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
this._open && this._updatePopper();
|
|
42
|
+
}
|
|
43
|
+
_safeDay(t) {
|
|
44
|
+
return v(t);
|
|
45
|
+
}
|
|
46
|
+
_isInputFocused() {
|
|
47
|
+
return this.shadowRoot?.activeElement === this._inputElement;
|
|
48
|
+
}
|
|
49
|
+
_withinBounds(t) {
|
|
50
|
+
const e = this._safeDay(this.min), n = this._safeDay(this.max);
|
|
51
|
+
return !(e && t.isBefore(e, "day") || n && t.isAfter(n, "day") || this.disabledDays.includes(t.day()));
|
|
52
|
+
}
|
|
53
|
+
_displayValue() {
|
|
54
|
+
if (this.rangeMode && this._rangeStart && this._rangeEnd) {
|
|
55
|
+
const e = this._safeDay(this._rangeStart), n = this._safeDay(this._rangeEnd);
|
|
56
|
+
if (e && n) return `${e.format("DD/MM/YYYY")} - ${n.format("DD/MM/YYYY")}`;
|
|
57
|
+
}
|
|
58
|
+
const t = this._safeDay(this.value);
|
|
59
|
+
return t ? t.format("DD/MM/YYYY") : "";
|
|
60
|
+
}
|
|
61
|
+
_inputValue() {
|
|
62
|
+
return this._inputDraft ?? this._displayValue();
|
|
63
|
+
}
|
|
64
|
+
_emitChange(t) {
|
|
65
|
+
this.value = t, this.dispatchEvent(new CustomEvent("change", { detail: { value: t } })), this.onChange?.(t);
|
|
66
|
+
}
|
|
67
|
+
_emitRangeChange() {
|
|
68
|
+
if (!this._rangeStart || !this._rangeEnd) return;
|
|
69
|
+
const t = { start: this._rangeStart, end: this._rangeEnd };
|
|
70
|
+
this.dispatchEvent(new CustomEvent("rangeChange", { detail: t })), this.onRangeChange?.(t);
|
|
71
|
+
}
|
|
72
|
+
_showInputError(t) {
|
|
73
|
+
this._errorTimer && clearTimeout(this._errorTimer), this._hasError = !0, this._errorMsg = t, this._errorTimer = setTimeout(() => this._clearInputError(), 3e3);
|
|
74
|
+
}
|
|
75
|
+
_clearInputError() {
|
|
76
|
+
this._hasError = !1, this._errorMsg = "", this._errorTimer && (clearTimeout(this._errorTimer), this._errorTimer = null);
|
|
77
|
+
}
|
|
78
|
+
_toggleOpen(t) {
|
|
79
|
+
if (this.disabled) return;
|
|
80
|
+
const e = t ?? !this._open;
|
|
81
|
+
this._open = e, e && this.updateComplete.then(() => this._updatePopper());
|
|
82
|
+
}
|
|
83
|
+
_onInput(t) {
|
|
84
|
+
const e = t.target.value;
|
|
85
|
+
this._inputDraft = e, e.trim() || (this._emitChange(null), this.rangeMode && (this._rangeStart = null, this._rangeEnd = null)), this._clearInputError();
|
|
86
|
+
}
|
|
87
|
+
_parseSingleDate(t) {
|
|
88
|
+
for (const e of E) {
|
|
89
|
+
const n = D(t, e, !0);
|
|
90
|
+
if (n.isValid()) return n;
|
|
91
|
+
}
|
|
92
|
+
return this._safeDay(t);
|
|
93
|
+
}
|
|
94
|
+
_parseRangeInput(t) {
|
|
95
|
+
const e = t.split(/\s+-\s+/);
|
|
96
|
+
if (e.length !== 2) return null;
|
|
97
|
+
const n = this._parseSingleDate(e[0].trim()), s = this._parseSingleDate(e[1].trim());
|
|
98
|
+
return !n || !s ? null : n.isAfter(s, "day") ? { start: s, end: n } : { start: n, end: s };
|
|
99
|
+
}
|
|
100
|
+
_onKeydown(t) {
|
|
101
|
+
(t.key === "Tab" || t.key === "Enter") && this._parseAndSetDate();
|
|
102
|
+
}
|
|
103
|
+
_parseAndSetDate() {
|
|
104
|
+
const t = this._inputElement;
|
|
105
|
+
if (!t) return;
|
|
106
|
+
const e = t.value.trim();
|
|
107
|
+
if (!e) {
|
|
108
|
+
if (this.rangeMode && this._rangeStart && !this._rangeEnd) return;
|
|
109
|
+
this._emitChange(null), this.rangeMode && (this._rangeStart = null, this._rangeEnd = null), this._inputDraft = null;
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
if (this.rangeMode) {
|
|
113
|
+
const s = this._parseRangeInput(e);
|
|
114
|
+
if (s) {
|
|
115
|
+
if (this._withinBounds(s.start) && this._withinBounds(s.end)) {
|
|
116
|
+
this._rangeStart = s.start.format("YYYY-MM-DD"), this._rangeEnd = s.end.format("YYYY-MM-DD"), this._inputDraft = null, this._clearInputError(), this._emitRangeChange();
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
this._showInputError("Seçilen aralık sınırlar dışında.");
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
const o = this._parseSingleDate(e);
|
|
123
|
+
if (o && this._withinBounds(o)) {
|
|
124
|
+
this._rangeStart = o.format("YYYY-MM-DD"), this._rangeEnd = null, this._inputDraft = null, this._clearInputError();
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
this._showInputError("Geçersiz aralık formatı. Örnek: 19/09/2025 - 25/09/2025");
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
const n = this._parseSingleDate(e);
|
|
131
|
+
n && this._withinBounds(n) ? (this._emitChange(n.format("YYYY-MM-DD")), this._inputDraft = null, this._clearInputError()) : this._showInputError("Geçersiz tarih formatı. Örnek: 19/09/2025");
|
|
132
|
+
}
|
|
133
|
+
_updatePopper() {
|
|
134
|
+
if (!this._open || !this.isConnected) return;
|
|
135
|
+
const t = this._referenceElement, e = this._popupElement;
|
|
136
|
+
if (!t || !e) return;
|
|
137
|
+
const n = Math.max(
|
|
138
|
+
270,
|
|
139
|
+
Math.round(t.getBoundingClientRect().width * (this.expandFactor || 1))
|
|
140
|
+
);
|
|
141
|
+
if (e.style.width = `${n}px`, this._popperInstance) {
|
|
142
|
+
this._popperInstance.setOptions({
|
|
143
|
+
placement: "bottom",
|
|
144
|
+
strategy: "fixed",
|
|
145
|
+
modifiers: this._getPopperModifiers()
|
|
146
|
+
}), this._popperInstance.update();
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
this._popperInstance = b(t, e, {
|
|
150
|
+
placement: "bottom",
|
|
151
|
+
strategy: "fixed",
|
|
152
|
+
modifiers: this._getPopperModifiers()
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
_getPopperModifiers() {
|
|
156
|
+
return [
|
|
157
|
+
{ name: "offset", options: { offset: [0, 8] } },
|
|
158
|
+
{ name: "preventOverflow", options: { padding: 8 } },
|
|
159
|
+
{
|
|
160
|
+
name: "flip",
|
|
161
|
+
options: {
|
|
162
|
+
padding: 8,
|
|
163
|
+
fallbackPlacements: [
|
|
164
|
+
"top-start",
|
|
165
|
+
"right-start",
|
|
166
|
+
"left-start",
|
|
167
|
+
"bottom-end",
|
|
168
|
+
"top-end",
|
|
169
|
+
"right-end",
|
|
170
|
+
"left-end"
|
|
171
|
+
]
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
];
|
|
175
|
+
}
|
|
176
|
+
_destroyPopper() {
|
|
177
|
+
this._popperInstance && (this._popperInstance.destroy(), this._popperInstance = void 0);
|
|
178
|
+
}
|
|
179
|
+
_handleCalendarChange(t) {
|
|
180
|
+
this._emitChange(t.detail.value), this._inputDraft = null, this._toggleOpen(!1);
|
|
181
|
+
}
|
|
182
|
+
_handleCalendarRangeChange(t) {
|
|
183
|
+
this._rangeStart = t.detail.start, this._rangeEnd = t.detail.end, this._inputDraft = null, this._emitRangeChange(), this._toggleOpen(!1);
|
|
184
|
+
}
|
|
185
|
+
_handleCalendarStateChange(t) {
|
|
186
|
+
this._rangeStart = t.detail.rangeStart, this._rangeEnd = t.detail.rangeEnd;
|
|
187
|
+
}
|
|
188
|
+
_handleSuffixClick(t) {
|
|
189
|
+
t.stopPropagation(), this._openDropdown(), this._inputElement?.focus();
|
|
190
|
+
}
|
|
191
|
+
_handleClearClick(t) {
|
|
192
|
+
t.stopPropagation(), this._emitChange(null), this._rangeStart = null, this._rangeEnd = null, this._inputDraft = null, this._clearInputError(), this._inputElement?.focus();
|
|
193
|
+
}
|
|
194
|
+
render() {
|
|
195
|
+
const t = this.error || (this._hasError ? this._errorMsg : ""), e = !!this._displayValue();
|
|
196
|
+
return d`
|
|
197
|
+
<div class="dp">
|
|
198
|
+
<div class="dp__reference">
|
|
199
|
+
<logosphere-formfield
|
|
200
|
+
class="dp__field"
|
|
201
|
+
.label=${this.label}
|
|
202
|
+
.helper=${this.helper}
|
|
203
|
+
.error=${t}
|
|
204
|
+
.required=${this.required}
|
|
205
|
+
.disabled=${this.disabled}
|
|
206
|
+
.readonly=${this.readonly}
|
|
207
|
+
.placeholder=${this.placeholder}
|
|
208
|
+
.size=${this.size}
|
|
209
|
+
.variant=${this.variant}
|
|
210
|
+
@click=${this._openDropdown}
|
|
211
|
+
>
|
|
212
|
+
<input
|
|
213
|
+
id=${this.inputId}
|
|
214
|
+
class="dp__input"
|
|
215
|
+
.value=${y(this._inputValue())}
|
|
216
|
+
?disabled=${this.disabled}
|
|
217
|
+
?readonly=${this.readonly}
|
|
218
|
+
placeholder=${this.placeholder}
|
|
219
|
+
aria-label="Tarih girin"
|
|
220
|
+
aria-invalid=${t ? "true" : "false"}
|
|
221
|
+
@focus=${this._openDropdown}
|
|
222
|
+
@input=${this._onInput}
|
|
223
|
+
@keydown=${this._onKeydown}
|
|
224
|
+
@blur=${this._onBlur}
|
|
225
|
+
/>
|
|
226
|
+
${e ? d`
|
|
227
|
+
<button
|
|
228
|
+
slot="clear"
|
|
229
|
+
class="dp__icon-btn dp__icon-btn_suffix"
|
|
230
|
+
type="button"
|
|
231
|
+
aria-label="Temizle"
|
|
232
|
+
@click=${this._handleClearClick}
|
|
233
|
+
>
|
|
234
|
+
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
235
|
+
</button>
|
|
236
|
+
` : _}
|
|
237
|
+
<button
|
|
238
|
+
id=${this.inputId + "-ico"}
|
|
239
|
+
slot="suffix"
|
|
240
|
+
class="dp__icon-btn"
|
|
241
|
+
type="button"
|
|
242
|
+
aria-label=${this._open ? "Takvimi kapat" : "Takvimi aç"}
|
|
243
|
+
aria-expanded=${this._open ? "true" : "false"}
|
|
244
|
+
aria-haspopup="dialog"
|
|
245
|
+
@click=${this._handleSuffixClick}
|
|
246
|
+
>
|
|
247
|
+
<ui-icon name="uil-calendar" size="16"></ui-icon>
|
|
248
|
+
</button>
|
|
249
|
+
</logosphere-formfield>
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
${this._open ? d`
|
|
253
|
+
<div
|
|
254
|
+
data-datepicker-popper
|
|
255
|
+
class="dp__popup"
|
|
256
|
+
role="dialog"
|
|
257
|
+
aria-modal="true"
|
|
258
|
+
aria-label="Tarih seçici"
|
|
259
|
+
>
|
|
260
|
+
<logosphere-calendar
|
|
261
|
+
.value=${this.value}
|
|
262
|
+
.min=${this.min}
|
|
263
|
+
.max=${this.max}
|
|
264
|
+
.disabled=${this.disabled}
|
|
265
|
+
.rangeMode=${this.rangeMode}
|
|
266
|
+
.disabledDays=${this.disabledDays}
|
|
267
|
+
.rangeStart=${this._rangeStart}
|
|
268
|
+
.rangeEnd=${this._rangeEnd}
|
|
269
|
+
.closable=${!0}
|
|
270
|
+
@change=${this._handleCalendarChange}
|
|
271
|
+
@rangeChange=${this._handleCalendarRangeChange}
|
|
272
|
+
@calendar-state-change=${this._handleCalendarStateChange}
|
|
273
|
+
@close-request=${() => this._toggleOpen(!1)}
|
|
274
|
+
></logosphere-calendar>
|
|
275
|
+
</div>
|
|
276
|
+
` : _}
|
|
277
|
+
</div>
|
|
278
|
+
`;
|
|
279
|
+
}
|
|
280
|
+
};
|
|
281
|
+
r.styles = [
|
|
282
|
+
g`
|
|
283
|
+
${c(S)}
|
|
284
|
+
`
|
|
285
|
+
];
|
|
286
|
+
i([
|
|
287
|
+
a({ type: String })
|
|
288
|
+
], r.prototype, "value", 2);
|
|
289
|
+
i([
|
|
290
|
+
a({ type: String })
|
|
291
|
+
], r.prototype, "min", 2);
|
|
292
|
+
i([
|
|
293
|
+
a({ type: String })
|
|
294
|
+
], r.prototype, "max", 2);
|
|
295
|
+
i([
|
|
296
|
+
a({ type: Boolean })
|
|
297
|
+
], r.prototype, "required", 2);
|
|
298
|
+
i([
|
|
299
|
+
a({ type: Boolean })
|
|
300
|
+
], r.prototype, "disabled", 2);
|
|
301
|
+
i([
|
|
302
|
+
a({ type: Boolean })
|
|
303
|
+
], r.prototype, "readonly", 2);
|
|
304
|
+
i([
|
|
305
|
+
a({ type: Number })
|
|
306
|
+
], r.prototype, "expandFactor", 2);
|
|
307
|
+
i([
|
|
308
|
+
a({ type: String })
|
|
309
|
+
], r.prototype, "placeholder", 2);
|
|
310
|
+
i([
|
|
311
|
+
a({ type: String })
|
|
312
|
+
], r.prototype, "label", 2);
|
|
313
|
+
i([
|
|
314
|
+
a({ type: String })
|
|
315
|
+
], r.prototype, "helper", 2);
|
|
316
|
+
i([
|
|
317
|
+
a({ type: String })
|
|
318
|
+
], r.prototype, "error", 2);
|
|
319
|
+
i([
|
|
320
|
+
a({ type: String })
|
|
321
|
+
], r.prototype, "size", 2);
|
|
322
|
+
i([
|
|
323
|
+
a({ type: String })
|
|
324
|
+
], r.prototype, "variant", 2);
|
|
325
|
+
i([
|
|
326
|
+
a({ type: Boolean })
|
|
327
|
+
], r.prototype, "rangeMode", 2);
|
|
328
|
+
i([
|
|
329
|
+
a({ type: Array })
|
|
330
|
+
], r.prototype, "disabledDays", 2);
|
|
331
|
+
i([
|
|
332
|
+
a({ type: String })
|
|
333
|
+
], r.prototype, "rangeStart", 2);
|
|
334
|
+
i([
|
|
335
|
+
a({ type: String })
|
|
336
|
+
], r.prototype, "rangeEnd", 2);
|
|
337
|
+
i([
|
|
338
|
+
a({ attribute: !1 })
|
|
339
|
+
], r.prototype, "onChange", 2);
|
|
340
|
+
i([
|
|
341
|
+
a({ attribute: !1 })
|
|
342
|
+
], r.prototype, "onRangeChange", 2);
|
|
343
|
+
i([
|
|
344
|
+
l()
|
|
345
|
+
], r.prototype, "_open", 2);
|
|
346
|
+
i([
|
|
347
|
+
l()
|
|
348
|
+
], r.prototype, "_rangeStart", 2);
|
|
349
|
+
i([
|
|
350
|
+
l()
|
|
351
|
+
], r.prototype, "_rangeEnd", 2);
|
|
352
|
+
i([
|
|
353
|
+
l()
|
|
354
|
+
], r.prototype, "_hasError", 2);
|
|
355
|
+
i([
|
|
356
|
+
l()
|
|
357
|
+
], r.prototype, "_errorMsg", 2);
|
|
358
|
+
i([
|
|
359
|
+
l()
|
|
360
|
+
], r.prototype, "_inputDraft", 2);
|
|
361
|
+
i([
|
|
362
|
+
u(".dp__reference")
|
|
363
|
+
], r.prototype, "_referenceElement", 2);
|
|
364
|
+
i([
|
|
365
|
+
u("[data-datepicker-popper]")
|
|
366
|
+
], r.prototype, "_popupElement", 2);
|
|
367
|
+
i([
|
|
368
|
+
u("input")
|
|
369
|
+
], r.prototype, "_inputElement", 2);
|
|
370
|
+
r = i([
|
|
371
|
+
m("logosphere-datepicker")
|
|
372
|
+
], r);
|
|
373
|
+
export {
|
|
374
|
+
r as L
|
|
375
|
+
};
|
package/dist/datepicker.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./datepicker-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./datepicker-CwDDA6np.cjs");Object.defineProperty(exports,"LogosphereDatePicker",{enumerable:!0,get:()=>e.LogosphereDatePicker});
|
package/dist/datepicker.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { unsafeCSS as f, css as v, LitElement as _, html as l } from "lit";
|
|
2
2
|
import { property as g, state as h, customElement as b } from "lit/decorators.js";
|
|
3
3
|
const w = ":host{display:block}.dm{font-family:var(--font-family-base)}.dm__container{width:100%;max-width:896px;margin:0 auto;padding:var(--spacing-6);background-color:var(--color-body-bg);border-radius:var(--radius-base);box-shadow:var(--shadow-md)}.dm__header{margin-bottom:var(--spacing-6)}.dm__title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-body-text);margin:0 0 var(--spacing-2) 0}.dm__stats{display:flex;gap:var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-tertiary)}.dm__form{margin-bottom:var(--spacing-6);padding:var(--spacing-4);background-color:var(--color-tertiary-bg);border-radius:var(--radius-base)}.dm__form-row{display:flex;gap:var(--spacing-4)}.dm__form-field{flex:1}.dm__form-field--filename{width:192px;flex:none}.dm__input{width:100%;padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);outline:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);background-color:var(--color-body-bg);color:var(--color-body-text);box-sizing:border-box;transition:border-color var(--transition-speed-fast) var(--transition-timing)}.dm__input:focus{border-color:var(--color-primary)}.dm__submit-btn{display:inline-flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:background-color var(--transition-speed-fast) var(--transition-timing);white-space:nowrap}.dm__submit-btn:hover:not(:disabled){background-color:var(--color-primary-hover)}.dm__submit-btn:disabled{opacity:.5;cursor:not-allowed}.dm__form-note{margin-top:var(--spacing-3);font-size:var(--font-size-xs);color:var(--color-tertiary)}.dm__form-note p{margin:0}.dm__spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-bottom-color:#fff;border-radius:var(--radius-full);animation:dm-spin .8s linear infinite}.dm__spinner--sm{width:12px;height:12px;border-color:#3b82f64d;border-bottom-color:#3b82f6}@keyframes dm-spin{to{transform:rotate(360deg)}}@keyframes dm-pulse{0%,to{opacity:1}50%{opacity:.5}}.dm__list{display:flex;flex-direction:column;gap:var(--spacing-4)}.dm__empty{text-align:center;padding:var(--spacing-8) 0;color:var(--color-tertiary);font-size:var(--font-size-sm)}.dm__item{border:1px solid var(--color-border);border-radius:var(--radius-base);padding:var(--spacing-4)}.dm__item--error{border-color:var(--color-primary-border-subtle);background-color:var(--color-danger-bg-subtle)}.dm__item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-3)}.dm__item-info{flex:1;min-width:0}.dm__item-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.dm__item-url{font-size:var(--font-size-xs);color:var(--color-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.dm__item-controls{display:flex;align-items:center;gap:var(--spacing-2)}.dm__status{font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-full);font-weight:var(--font-weight-medium)}.dm__status--downloading{background-color:var(--color-info-bg-subtle);color:var(--color-info-text-emphasis)}.dm__status--paused{background-color:var(--color-warning-bg-subtle);color:var(--color-warning-text-emphasis)}.dm__status--completed{background-color:var(--color-success-bg-subtle);color:var(--color-success-text-emphasis)}.dm__status--error{background-color:var(--color-danger-bg-subtle);color:var(--color-danger-text-emphasis)}.dm__status--pending{background-color:var(--color-gray-100);color:var(--color-gray-800)}.dm__remove-btn{background:none;border:none;cursor:pointer;color:var(--color-tertiary);padding:var(--spacing-1);line-height:1;font-size:var(--font-size-sm);border-radius:var(--radius-sm);transition:color var(--transition-speed-fast) var(--transition-timing)}.dm__remove-btn:hover{color:var(--color-danger)}.dm__progress{margin-bottom:var(--spacing-3)}.dm__progress-labels{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.dm__progress-track{width:100%;background-color:var(--color-gray-200);border-radius:var(--radius-full);height:8px;overflow:hidden}.dm__progress-bar{height:8px;border-radius:var(--radius-full);transition:width .3s ease}.dm__progress-bar--downloading{background-color:var(--color-info-active)}.dm__progress-bar--paused{background-color:var(--color-warning-active)}.dm__progress-bar--completed{background-color:var(--color-success)}.dm__progress-bar--error{background-color:var(--color-danger)}.dm__progress-bar--pending{background-color:var(--color-gray-400)}.dm__progress-bar--indeterminate{width:100%;animation:dm-pulse 1.5s ease-in-out infinite}.dm__item-footer{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-tertiary)}.dm__item-speeds{display:flex;gap:var(--spacing-4)}.dm__item-actions{display:flex;gap:var(--spacing-2)}.dm__action-btn{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);border:none;border-radius:var(--radius-sm);background:none;cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-xs);transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.dm__action-btn--pause{color:var(--color-info-active)}.dm__action-btn--pause:hover{background-color:var(--color-info-bg-subtle);color:var(--color-info-text-emphasis)}.dm__action-btn--resume{color:var(--color-success)}.dm__action-btn--resume:hover{background-color:var(--color-success-bg-subtle);color:var(--color-success-text-emphasis)}.dm__status-completed{color:var(--color-success)}.dm__error-info{color:var(--color-danger)}.dm__error-label{font-weight:var(--font-weight-medium)}.dm__error-detail{font-size:var(--font-size-xs)}.dm__chunks{margin-top:var(--spacing-3);font-size:var(--font-size-xs);color:var(--color-tertiary);display:flex;flex-direction:column;gap:2px}.dm__actions{margin-top:var(--spacing-6);display:flex;justify-content:space-between;align-items:center}.dm__clear-btn{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-tertiary);background:none;border:none;cursor:pointer;font-family:var(--font-family-base);transition:color var(--transition-speed-fast) var(--transition-timing)}.dm__clear-btn:hover{color:var(--color-body-text)}.dm__persist-note{font-size:var(--font-size-sm);color:var(--color-tertiary)}";
|
|
4
4
|
var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, u = (t, s, r, e) => {
|
|
@@ -6,7 +6,7 @@ var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, u = (t, s, r
|
|
|
6
6
|
(i = t[o]) && (a = (e ? i(s, r, a) : i(a)) || a);
|
|
7
7
|
return e && a && y(s, r, a), a;
|
|
8
8
|
};
|
|
9
|
-
let m = class extends
|
|
9
|
+
let m = class extends _ {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.chunkSize = 2 * 1024 * 1024, this.maxConcurrentDownloads = 3, this.maxConcurrentChunks = 4, this.downloads = [], this.isAddingFiles = !1, this.activeDownloads = /* @__PURE__ */ new Map(), this.storageKey = "download-manager-state", this.clearCompleted = () => {
|
|
12
12
|
this.downloads = this.downloads.filter((t) => t.status !== "completed"), this.requestUpdate(), this.saveState();
|
|
@@ -357,7 +357,7 @@ let m = class extends f {
|
|
|
357
357
|
`;
|
|
358
358
|
}
|
|
359
359
|
};
|
|
360
|
-
m.styles = [
|
|
360
|
+
m.styles = [v`${f(w)}`];
|
|
361
361
|
u([
|
|
362
362
|
g({ type: Number })
|
|
363
363
|
], m.prototype, "chunkSize", 2);
|
package/dist/download-manager.js
CHANGED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";const l=require("lit"),i=require("lit/decorators.js");require("./ui-icon-DWh1MhBa.cjs");const p=":host{display:block}.drawer{position:relative;font-family:var(--font-family-base)}.drawer__trigger{display:inline-flex}.drawer__panel{position:fixed;top:0;bottom:0;width:var(--drawer-width, 360px);max-width:min(100vw,var(--drawer-width, 360px));background:var(--color-body-bg);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:var(--z-index-modal);display:flex;flex-direction:column;pointer-events:none;opacity:0;transition:transform var(--transition-speed-slow) var(--transition-timing),opacity var(--transition-speed-slow) linear}.drawer__panel--right{right:0;transform:translate(100%)}.drawer__panel--left{left:0;transform:translate(-100%);border-left:none;border-right:1px solid var(--color-border)}.drawer__panel--open{transform:translate(0);pointer-events:auto;opacity:1}.drawer__header{padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2)}.drawer__title{margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-body-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer__close{width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-body-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--color-body-text);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary-bg)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(d,e,r,t)=>{for(var o=t>1?void 0:t?h(e,r):e,a=d.length-1,n;a>=0;a--)(n=d[a])&&(o=(t?n(e,r,o):n(o))||o);return t&&o&&c(e,r,o),o};exports.Drawer=class extends l.LitElement{constructor(){super(...arguments),this.open=!1,this.title="",this.position="right",this.width=360,this.closeOnEsc=!0,this.containerSelector="",this._frameStyle="",this._onKeyDown=e=>{!this.open||!this.closeOnEsc||(e.key==="Escape"||e.key==="Esc")&&this._setOpen(!1)},this._onTriggerClick=()=>this._setOpen(!0),this._onCloseClick=()=>this._setOpen(!1),this._syncFrame=()=>{const e=this._resolveContainer().getBoundingClientRect(),r=Math.max(0,e.top),t=Math.max(0,window.innerHeight-e.bottom),o=Math.max(0,e.left),a=Math.max(0,window.innerWidth-e.right),n=Math.max(0,e.width);this._frameStyle=this.position==="right"?`top:${r}px;bottom:${t}px;right:${a}px;max-width:${n}px;`:`top:${r}px;bottom:${t}px;left:${o}px;max-width:${n}px;`}}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",this._onKeyDown,!0),window.addEventListener("resize",this._syncFrame),window.addEventListener("scroll",this._syncFrame,!0),this.updateComplete.then(()=>this._syncFrame())}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this._onKeyDown,!0),window.removeEventListener("resize",this._syncFrame),window.removeEventListener("scroll",this._syncFrame,!0)}updated(e){(e.has("open")||e.has("position")||e.has("width")||e.has("containerSelector"))&&this._syncFrame()}openDrawer(){this._setOpen(!0)}closeDrawer(){this._setOpen(!1)}_setOpen(e){this.open!==e&&(this.open=e,this.dispatchEvent(new CustomEvent(e?"drawer-open":"drawer-close",{bubbles:!0,composed:!0})))}_resolveContainer(){if(this.containerSelector){const e=this.getRootNode();if("querySelector"in e){const t=e.querySelector(this.containerSelector);if(t)return t}const r=document.querySelector(this.containerSelector);if(r)return r}return this.parentElement??this}render(){return l.html`
|
|
2
|
+
<div class="drawer">
|
|
3
|
+
<div class="drawer__trigger" @click=${this._onTriggerClick}>
|
|
4
|
+
<slot name="trigger"></slot>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<aside
|
|
8
|
+
class="drawer__panel drawer__panel--${this.position} ${this.open?"drawer__panel--open":""}"
|
|
9
|
+
style=${`--drawer-width:${this.width}px;${this._frameStyle}`}
|
|
10
|
+
role="dialog"
|
|
11
|
+
aria-modal="false"
|
|
12
|
+
aria-hidden=${this.open?"false":"true"}
|
|
13
|
+
>
|
|
14
|
+
<div class="drawer__header">
|
|
15
|
+
<h3 class="drawer__title">${this.title}</h3>
|
|
16
|
+
<button class="drawer__close" type="button" aria-label="Close drawer" @click=${this._onCloseClick}>
|
|
17
|
+
<ui-icon name="uil-times" size="16"></ui-icon>
|
|
18
|
+
</button>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="drawer__body">
|
|
21
|
+
<slot></slot>
|
|
22
|
+
</div>
|
|
23
|
+
</aside>
|
|
24
|
+
</div>
|
|
25
|
+
`}};exports.Drawer.styles=[l.css`${l.unsafeCSS(p)}`];s([i.property({type:Boolean,reflect:!0})],exports.Drawer.prototype,"open",2);s([i.property({type:String})],exports.Drawer.prototype,"title",2);s([i.property({type:String})],exports.Drawer.prototype,"position",2);s([i.property({type:Number})],exports.Drawer.prototype,"width",2);s([i.property({type:Boolean})],exports.Drawer.prototype,"closeOnEsc",2);s([i.property({type:String})],exports.Drawer.prototype,"containerSelector",2);exports.Drawer=s([i.customElement("logosphere-drawer")],exports.Drawer);
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { unsafeCSS as c, css as p, LitElement as h, html as w } from "lit";
|
|
2
|
+
import { property as l, customElement as _ } from "lit/decorators.js";
|
|
3
|
+
import "./ui-icon-Bys4HYSQ.js";
|
|
4
|
+
const m = ":host{display:block}.drawer{position:relative;font-family:var(--font-family-base)}.drawer__trigger{display:inline-flex}.drawer__panel{position:fixed;top:0;bottom:0;width:var(--drawer-width, 360px);max-width:min(100vw,var(--drawer-width, 360px));background:var(--color-body-bg);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:var(--z-index-modal);display:flex;flex-direction:column;pointer-events:none;opacity:0;transition:transform var(--transition-speed-slow) var(--transition-timing),opacity var(--transition-speed-slow) linear}.drawer__panel--right{right:0;transform:translate(100%)}.drawer__panel--left{left:0;transform:translate(-100%);border-left:none;border-right:1px solid var(--color-border)}.drawer__panel--open{transform:translate(0);pointer-events:auto;opacity:1}.drawer__header{padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2)}.drawer__title{margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-body-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer__close{width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-body-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--color-body-text);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary-bg)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";
|
|
5
|
+
var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (e, t, r, n) => {
|
|
6
|
+
for (var o = n > 1 ? void 0 : n ? v(t, r) : t, a = e.length - 1, d; a >= 0; a--)
|
|
7
|
+
(d = e[a]) && (o = (n ? d(t, r, o) : d(o)) || o);
|
|
8
|
+
return n && o && f(t, r, o), o;
|
|
9
|
+
};
|
|
10
|
+
let i = class extends h {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments), this.open = !1, this.title = "", this.position = "right", this.width = 360, this.closeOnEsc = !0, this.containerSelector = "", this._frameStyle = "", this._onKeyDown = (e) => {
|
|
13
|
+
!this.open || !this.closeOnEsc || (e.key === "Escape" || e.key === "Esc") && this._setOpen(!1);
|
|
14
|
+
}, this._onTriggerClick = () => this._setOpen(!0), this._onCloseClick = () => this._setOpen(!1), this._syncFrame = () => {
|
|
15
|
+
const e = this._resolveContainer().getBoundingClientRect(), t = Math.max(0, e.top), r = Math.max(0, window.innerHeight - e.bottom), n = Math.max(0, e.left), o = Math.max(0, window.innerWidth - e.right), a = Math.max(0, e.width);
|
|
16
|
+
this._frameStyle = this.position === "right" ? `top:${t}px;bottom:${r}px;right:${o}px;max-width:${a}px;` : `top:${t}px;bottom:${r}px;left:${n}px;max-width:${a}px;`;
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
connectedCallback() {
|
|
20
|
+
super.connectedCallback(), window.addEventListener("keydown", this._onKeyDown, !0), window.addEventListener("resize", this._syncFrame), window.addEventListener("scroll", this._syncFrame, !0), this.updateComplete.then(() => this._syncFrame());
|
|
21
|
+
}
|
|
22
|
+
disconnectedCallback() {
|
|
23
|
+
super.disconnectedCallback(), window.removeEventListener("keydown", this._onKeyDown, !0), window.removeEventListener("resize", this._syncFrame), window.removeEventListener("scroll", this._syncFrame, !0);
|
|
24
|
+
}
|
|
25
|
+
updated(e) {
|
|
26
|
+
(e.has("open") || e.has("position") || e.has("width") || e.has("containerSelector")) && this._syncFrame();
|
|
27
|
+
}
|
|
28
|
+
openDrawer() {
|
|
29
|
+
this._setOpen(!0);
|
|
30
|
+
}
|
|
31
|
+
closeDrawer() {
|
|
32
|
+
this._setOpen(!1);
|
|
33
|
+
}
|
|
34
|
+
_setOpen(e) {
|
|
35
|
+
this.open !== e && (this.open = e, this.dispatchEvent(
|
|
36
|
+
new CustomEvent(e ? "drawer-open" : "drawer-close", {
|
|
37
|
+
bubbles: !0,
|
|
38
|
+
composed: !0
|
|
39
|
+
})
|
|
40
|
+
));
|
|
41
|
+
}
|
|
42
|
+
_resolveContainer() {
|
|
43
|
+
if (this.containerSelector) {
|
|
44
|
+
const e = this.getRootNode();
|
|
45
|
+
if ("querySelector" in e) {
|
|
46
|
+
const r = e.querySelector(this.containerSelector);
|
|
47
|
+
if (r) return r;
|
|
48
|
+
}
|
|
49
|
+
const t = document.querySelector(this.containerSelector);
|
|
50
|
+
if (t) return t;
|
|
51
|
+
}
|
|
52
|
+
return this.parentElement ?? this;
|
|
53
|
+
}
|
|
54
|
+
render() {
|
|
55
|
+
return w`
|
|
56
|
+
<div class="drawer">
|
|
57
|
+
<div class="drawer__trigger" @click=${this._onTriggerClick}>
|
|
58
|
+
<slot name="trigger"></slot>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<aside
|
|
62
|
+
class="drawer__panel drawer__panel--${this.position} ${this.open ? "drawer__panel--open" : ""}"
|
|
63
|
+
style=${`--drawer-width:${this.width}px;${this._frameStyle}`}
|
|
64
|
+
role="dialog"
|
|
65
|
+
aria-modal="false"
|
|
66
|
+
aria-hidden=${this.open ? "false" : "true"}
|
|
67
|
+
>
|
|
68
|
+
<div class="drawer__header">
|
|
69
|
+
<h3 class="drawer__title">${this.title}</h3>
|
|
70
|
+
<button class="drawer__close" type="button" aria-label="Close drawer" @click=${this._onCloseClick}>
|
|
71
|
+
<ui-icon name="uil-times" size="16"></ui-icon>
|
|
72
|
+
</button>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="drawer__body">
|
|
75
|
+
<slot></slot>
|
|
76
|
+
</div>
|
|
77
|
+
</aside>
|
|
78
|
+
</div>
|
|
79
|
+
`;
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
i.styles = [p`${c(m)}`];
|
|
83
|
+
s([
|
|
84
|
+
l({ type: Boolean, reflect: !0 })
|
|
85
|
+
], i.prototype, "open", 2);
|
|
86
|
+
s([
|
|
87
|
+
l({ type: String })
|
|
88
|
+
], i.prototype, "title", 2);
|
|
89
|
+
s([
|
|
90
|
+
l({ type: String })
|
|
91
|
+
], i.prototype, "position", 2);
|
|
92
|
+
s([
|
|
93
|
+
l({ type: Number })
|
|
94
|
+
], i.prototype, "width", 2);
|
|
95
|
+
s([
|
|
96
|
+
l({ type: Boolean })
|
|
97
|
+
], i.prototype, "closeOnEsc", 2);
|
|
98
|
+
s([
|
|
99
|
+
l({ type: String })
|
|
100
|
+
], i.prototype, "containerSelector", 2);
|
|
101
|
+
i = s([
|
|
102
|
+
_("logosphere-drawer")
|
|
103
|
+
], i);
|
|
104
|
+
export {
|
|
105
|
+
i as D
|
|
106
|
+
};
|
package/dist/drawer.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./drawer-BvcPd5nz.cjs");Object.defineProperty(exports,"Drawer",{enumerable:!0,get:()=>e.Drawer});
|
package/dist/drawer.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";const s=require("lit"),t=require("lit/decorators.js"),f=":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text);margin-bottom:var(--spacing-2)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:center;box-sizing:border-box;border-radius:var(--radius-base);border:1px solid var(--color-border);padding:0 var(--spacing-2) 0 var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--cursor-text{cursor:text}.formfield__container--cursor-pointer{cursor:pointer}.formfield__container--cursor-default{cursor:default}.formfield__container--default{min-height:32px}.formfield__container--large{min-height:40px}.formfield__container--focused{border-color:var(--color-secondary-hover);background-color:var(--color-body-bg)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-tertiary-bg)}.formfield__container--error{border-color:var(--color-danger);background-color:var(--color-danger-bg-subtle)}.formfield__container--disabled{background-color:var(--color-tertiary-bg);opacity:.4;cursor:not-allowed}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent}.formfield__input-area{flex:1;min-width:0;display:flex;align-items:center}.formfield__prefix,.formfield__clear,.formfield__suffix{display:flex;align-items:center;flex-shrink:0;align-self:stretch}.formfield__prefix{margin-right:var(--spacing-2)}.formfield__clear,.formfield__suffix{margin-left:var(--spacing-2)}.formfield__container--has-prefix .formfield__prefix{border-right:1px solid var(--color-border);padding-right:var(--spacing-2)}.formfield__container--has-suffix .formfield__suffix{border-left:1px solid var(--color-border);padding-left:var(--spacing-2)}.formfield__prefix:empty,.formfield__clear:empty,.formfield__suffix:empty{display:none}.formfield__helper{font-size:var(--font-size-sm);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:var(--font-size-sm);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-size:14px;line-height:1.5}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,o=(n,e,r,l)=>{for(var i=l>1?void 0:l?h(e,r):e,a=n.length-1,d;a>=0;a--)(d=n[a])&&(i=(l?d(e,r,i):d(i))||i);return l&&i&&c(e,r,i),i};exports.FormField=class extends s.LitElement{constructor(){super(...arguments),this.label="",this.helper="",this.error="",this.placeholder="",this.size="default",this.variant="default",this.cursor="text",this.required=!1,this.disabled=!1,this.readonly=!1,this._focused=!1,this._hovered=!1,this._hasPrefix=!1,this._hasSuffix=!1,this.handleSlotFocus=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!0,this.dispatchEvent(new CustomEvent("field-focus",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleSlotBlur=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!1,this.dispatchEvent(new CustomEvent("field-blur",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleMouseEnter=()=>{this._hovered=!0},this.handleMouseLeave=()=>{this._hovered=!1},this.handleContainerClick=e=>{const r=e.target;if(["INPUT","TEXTAREA","SELECT","BUTTON"].includes(r.tagName))return;this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({flatten:!0}).find(a=>["INPUT","TEXTAREA","SELECT"].includes(a.tagName))?.focus()},this.handlePrefixSlotChange=e=>{const r=e.target;this._hasPrefix=r.assignedElements({flatten:!0}).length>0},this.handleSuffixSlotChange=e=>{const r=e.target;this._hasSuffix=r.assignedElements({flatten:!0}).length>0}}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.handleSlotFocus,!0),this.addEventListener("blur",this.handleSlotBlur,!0)}firstUpdated(){const e=this.shadowRoot?.querySelector('slot[name="prefix"]'),r=this.shadowRoot?.querySelector('slot[name="suffix"]');e&&(this._hasPrefix=e.assignedElements({flatten:!0}).length>0),r&&(this._hasSuffix=r.assignedElements({flatten:!0}).length>0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleSlotFocus,!0),this.removeEventListener("blur",this.handleSlotBlur,!0)}render(){const e=!!this.error,r=!e&&!!this.helper,l=["formfield__container",`formfield__container--${this.size}`,`formfield__container--cursor-${this.cursor}`,this._hasPrefix?"formfield__container--has-prefix":"",this._hasSuffix?"formfield__container--has-suffix":"",e?"formfield__container--error":"",this._focused?"formfield__container--focused":"",this._hovered?"formfield__container--hovered":"",this.disabled?"formfield__container--disabled":"",this.variant==="subtle"?"formfield__container--subtle":""].filter(Boolean).join(" ");return s.html`
|
|
2
|
+
<div class="formfield">
|
|
3
|
+
${this.label?s.html`
|
|
4
|
+
<label class="formfield__label">
|
|
5
|
+
${this.label}
|
|
6
|
+
${this.required?s.html`<span class="formfield__required">*</span>`:""}
|
|
7
|
+
</label>
|
|
8
|
+
`:""}
|
|
9
|
+
|
|
10
|
+
<div
|
|
11
|
+
class="${l}"
|
|
12
|
+
@mouseenter=${this.handleMouseEnter}
|
|
13
|
+
@mouseleave=${this.handleMouseLeave}
|
|
14
|
+
@click=${this.handleContainerClick}
|
|
15
|
+
>
|
|
16
|
+
<div class="formfield__prefix">
|
|
17
|
+
<slot name="prefix" @slotchange=${this.handlePrefixSlotChange}></slot>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="formfield__input-area">
|
|
20
|
+
<slot></slot>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="formfield__clear">
|
|
23
|
+
<slot name="clear"></slot>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="formfield__suffix">
|
|
26
|
+
<slot name="suffix" @slotchange=${this.handleSuffixSlotChange}></slot>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
${r?s.html`<div class="formfield__helper">${this.helper}</div>`:""}
|
|
31
|
+
${e?s.html`<div class="formfield__error">${this.error}</div>`:""}
|
|
32
|
+
</div>
|
|
33
|
+
`}};exports.FormField.styles=[s.css`${s.unsafeCSS(f)}`];o([t.property({type:String})],exports.FormField.prototype,"label",2);o([t.property({type:String})],exports.FormField.prototype,"helper",2);o([t.property({type:String})],exports.FormField.prototype,"error",2);o([t.property({type:String})],exports.FormField.prototype,"placeholder",2);o([t.property({type:String})],exports.FormField.prototype,"size",2);o([t.property({type:String})],exports.FormField.prototype,"variant",2);o([t.property({type:String})],exports.FormField.prototype,"cursor",2);o([t.property({type:Boolean})],exports.FormField.prototype,"required",2);o([t.property({type:Boolean})],exports.FormField.prototype,"disabled",2);o([t.property({type:Boolean})],exports.FormField.prototype,"readonly",2);o([t.state()],exports.FormField.prototype,"_focused",2);o([t.state()],exports.FormField.prototype,"_hovered",2);o([t.state()],exports.FormField.prototype,"_hasPrefix",2);o([t.state()],exports.FormField.prototype,"_hasSuffix",2);exports.FormField=o([t.customElement("logosphere-formfield")],exports.FormField);
|