@logosphere-ui/core 0.0.0-alpha.38 → 0.0.0-alpha.40
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 +49 -5
- package/dist/AGENTS.md +49 -5
- package/dist/atoms/Checkbox/checkbox.d.ts +11 -2
- package/dist/atoms/FormField/formfield.d.ts +2 -0
- package/dist/{badge-BJqUgXZD.js → badge-B0Bj-HAT.js} +20 -20
- package/dist/{badge-COTtd1jh.cjs → badge-DWkKpZTX.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-MBxtvVqn.cjs +10 -0
- package/dist/button-QWCkFTeJ.js +58 -0
- package/dist/button.cjs +1 -1
- package/dist/button.js +1 -1
- package/dist/{calendar-DtpJBtpq.cjs → calendar-DcDT4o-U.cjs} +1 -1
- package/dist/{calendar-B7bSuIt4.js → calendar-DsriSHZ4.js} +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.js +1 -1
- package/dist/{card-BD8FkSTi.cjs → card-BUWvno93.cjs} +1 -1
- package/dist/{card-CAAhjIjf.js → card-R_cKrdHK.js} +2 -2
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/chatbot-BPVC2wqM.cjs +183 -0
- package/dist/{chatbot-Cr6iOO7s.js → chatbot-yup4Nz00.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-BqYKZKmu.cjs +26 -0
- package/dist/chip-group-CC5RBhN_.js +89 -0
- package/dist/chip-group.cjs +1 -0
- package/dist/chip-group.js +4 -0
- package/dist/combobox-Bah9Akr-.cjs +113 -0
- package/dist/combobox-Nxhk75IH.js +460 -0
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/{datepicker-tJbIvNpy.js → datepicker-BExZseRQ.js} +58 -51
- package/dist/datepicker-BOQ13sIm.cjs +85 -0
- package/dist/datepicker.cjs +1 -1
- package/dist/datepicker.js +1 -1
- package/dist/{drawer-g6mHdpjF.cjs → drawer-DBrOkz0z.cjs} +1 -1
- package/dist/{drawer-CRB8UUAo.js → drawer-DHsESNFL.js} +2 -2
- 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 +7 -7
- package/dist/index.d.ts +2 -0
- package/dist/index.js +61 -58
- package/dist/index.umd.js +202 -171
- package/dist/input-D9lFcDHU.js +278 -0
- package/dist/input-Dg-jos9u.cjs +60 -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 +1 -1
- package/dist/{leftmenu-Cf2gC2J0.js → leftmenu-CMx2K5Ws.js} +4 -4
- package/dist/{leftmenu-D0sRExqr.cjs → leftmenu-DCfTelzi.cjs} +1 -1
- package/dist/modal-BJNCTlBX.cjs +84 -0
- package/dist/{modal-Cfa0imdF.js → modal-DNjURVZy.js} +3 -3
- package/dist/modal.cjs +1 -1
- package/dist/modal.js +1 -1
- package/dist/molecules/Chip/chip-group.d.ts +29 -0
- package/dist/molecules/Chip/index.d.ts +2 -0
- package/dist/molecules/Input/input.d.ts +17 -0
- package/dist/organisms/Combobox/combobox.d.ts +20 -0
- package/dist/organisms/DatePicker/datepicker.d.ts +2 -0
- package/dist/{pagination-DG56TV5n.js → pagination-B91sZD5E.js} +61 -61
- package/dist/pagination-Cnh-o-Nq.cjs +169 -0
- package/dist/pagination.cjs +1 -1
- package/dist/pagination.js +1 -1
- package/dist/{popover-BSfKsQni.js → popover-CSgoaROl.js} +1 -1
- package/dist/popover-DwDyLpQq.cjs +30 -0
- package/dist/popover.cjs +1 -1
- package/dist/popover.js +1 -1
- package/dist/shared/icons/index.d.ts +1 -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-coWx4Xn-.js → text-area-CHkrGi3S.js} +16 -12
- package/dist/text-area-DvOiCcKP.cjs +51 -0
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{timepicker-rNyKCfN3.js → timepicker-CAat7fcK.js} +6 -2
- package/dist/{timepicker-WxA2Uo66.cjs → timepicker-Co7lW5Rp.cjs} +1 -1
- package/dist/timepicker.cjs +1 -1
- package/dist/timepicker.js +1 -1
- package/dist/{toast-container-Cb0MduXt.js → toast-container-DxFwLT5S.js} +3 -3
- package/dist/{toast-container-B9E_mVk6.cjs → toast-container-aY1lGjRi.cjs} +1 -1
- package/dist/toast.cjs +1 -1
- package/dist/toast.js +1 -1
- package/dist/tree-menu-Dqy14_m2.cjs +47 -0
- package/dist/{tree-menu-CufITiv_.js → tree-menu-Psek8QB9.js} +2 -2
- package/dist/tree-menu.cjs +1 -1
- package/dist/tree-menu.js +1 -1
- package/dist/ui-icon-Cd5YhUeQ.cjs +22 -0
- package/dist/ui-icon-Ckljc9hg.js +74 -0
- package/package.json +11 -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/chatbot-Dl6P98Jq.cjs +0 -183
- package/dist/checkbox-CX0LgsWP.js +0 -148
- package/dist/checkbox-DpbKHANK.cjs +0 -53
- package/dist/combobox-CFF30L-n.js +0 -393
- package/dist/combobox-s7NFPAd3.cjs +0 -108
- package/dist/datepicker-BCNJROwD.cjs +0 -85
- package/dist/formfield-CRcyUMvQ.cjs +0 -33
- package/dist/input-BUX_2G5m.js +0 -257
- package/dist/input-Tkm7VBBl.cjs +0 -59
- package/dist/modal-DFnpqdWX.cjs +0 -84
- package/dist/pagination-HyX0EAZr.cjs +0 -169
- package/dist/popover-DhEvLuOo.cjs +0 -30
- package/dist/tab-CDMcFHvP.cjs +0 -41
- package/dist/text-area-DCBCDtJw.cjs +0 -51
- package/dist/tree-menu-DuJuy5pp.cjs +0 -47
- package/dist/ui-icon-Ctn4nGFa.js +0 -70
- package/dist/ui-icon-jKyMV1zp.cjs +0 -22
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { unsafeCSS as c, css as g, LitElement as f, nothing as _, html as d } from "lit";
|
|
2
|
-
import { property as
|
|
2
|
+
import { property as n, state as p, query as u, customElement as m } from "lit/decorators.js";
|
|
3
3
|
import { live as y } from "lit/directives/live.js";
|
|
4
4
|
import { createPopper as b } from "@popperjs/core";
|
|
5
|
-
import "./formfield-
|
|
6
|
-
import { s as v, D as E } from "./calendar-
|
|
7
|
-
import "./ui-icon-
|
|
5
|
+
import "./formfield-ss2mFweu.js";
|
|
6
|
+
import { s as v, D as E } from "./calendar-DsriSHZ4.js";
|
|
7
|
+
import "./ui-icon-Ckljc9hg.js";
|
|
8
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,
|
|
11
|
-
for (var o = s > 1 ? void 0 : s ? $(e,
|
|
12
|
-
(h = t[
|
|
13
|
-
return s && o && C(e,
|
|
9
|
+
const S = ":host{display:block}.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(--datepicker-popup-bg, var(--color-body-bg));border:1px solid var(--datepicker-popup-border-color, 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, a, s) => {
|
|
11
|
+
for (var o = s > 1 ? void 0 : s ? $(e, a) : e, l = t.length - 1, h; l >= 0; l--)
|
|
12
|
+
(h = t[l]) && (o = (s ? h(e, a, o) : h(o)) || o);
|
|
13
|
+
return s && o && C(e, a, o), o;
|
|
14
14
|
};
|
|
15
15
|
let w = 0;
|
|
16
|
-
const
|
|
16
|
+
const k = () => `dp-${++w}`;
|
|
17
17
|
let r = class extends f {
|
|
18
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 =
|
|
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.displayFormat = "DD/MM/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 = k(), this._outsideClick = (t) => {
|
|
20
20
|
this._open && (t.composedPath().includes(this) || (this._parseAndSetDate(), this._toggleOpen(!1)));
|
|
21
21
|
}, this._openDropdown = () => {
|
|
22
22
|
this._toggleOpen(!0);
|
|
@@ -47,22 +47,26 @@ let r = class extends f {
|
|
|
47
47
|
return this.shadowRoot?.activeElement === this._inputElement;
|
|
48
48
|
}
|
|
49
49
|
_withinBounds(t) {
|
|
50
|
-
const e = this._safeDay(this.min),
|
|
51
|
-
return !(e && t.isBefore(e, "day") ||
|
|
50
|
+
const e = this._safeDay(this.min), a = this._safeDay(this.max);
|
|
51
|
+
return !(e && t.isBefore(e, "day") || a && t.isAfter(a, "day") || this.disabledDays.includes(t.day()));
|
|
52
52
|
}
|
|
53
53
|
_displayValue() {
|
|
54
54
|
if (this.rangeMode && this._rangeStart && this._rangeEnd) {
|
|
55
|
-
const e = this._safeDay(this._rangeStart),
|
|
56
|
-
if (e &&
|
|
55
|
+
const e = this._safeDay(this._rangeStart), a = this._safeDay(this._rangeEnd);
|
|
56
|
+
if (e && a) return `${e.format(this.displayFormat)} - ${a.format(this.displayFormat)}`;
|
|
57
57
|
}
|
|
58
58
|
const t = this._safeDay(this.value);
|
|
59
|
-
return t ? t.format(
|
|
59
|
+
return t ? t.format(this.displayFormat) : "";
|
|
60
60
|
}
|
|
61
61
|
_inputValue() {
|
|
62
62
|
return this._inputDraft ?? this._displayValue();
|
|
63
63
|
}
|
|
64
64
|
_emitChange(t) {
|
|
65
|
-
this.value = t, this.dispatchEvent(new CustomEvent("change", { detail: { value: t } })), this.
|
|
65
|
+
this.value = t, this.dispatchEvent(new CustomEvent("change", { detail: { value: t } })), this.dispatchEvent(new CustomEvent("lgsChange", {
|
|
66
|
+
bubbles: !0,
|
|
67
|
+
composed: !0,
|
|
68
|
+
detail: { value: t }
|
|
69
|
+
})), this.onChange?.(t);
|
|
66
70
|
}
|
|
67
71
|
_emitRangeChange() {
|
|
68
72
|
if (!this._rangeStart || !this._rangeEnd) return;
|
|
@@ -85,17 +89,17 @@ let r = class extends f {
|
|
|
85
89
|
this._inputDraft = e, e.trim() || (this._emitChange(null), this.rangeMode && (this._rangeStart = null, this._rangeEnd = null)), this._clearInputError();
|
|
86
90
|
}
|
|
87
91
|
_parseSingleDate(t) {
|
|
88
|
-
for (const e of E) {
|
|
89
|
-
const
|
|
90
|
-
if (
|
|
92
|
+
for (const e of [this.displayFormat, ...E]) {
|
|
93
|
+
const a = D(t, e, !0);
|
|
94
|
+
if (a.isValid()) return a;
|
|
91
95
|
}
|
|
92
96
|
return this._safeDay(t);
|
|
93
97
|
}
|
|
94
98
|
_parseRangeInput(t) {
|
|
95
99
|
const e = t.split(/\s+-\s+/);
|
|
96
100
|
if (e.length !== 2) return null;
|
|
97
|
-
const
|
|
98
|
-
return !
|
|
101
|
+
const a = this._parseSingleDate(e[0].trim()), s = this._parseSingleDate(e[1].trim());
|
|
102
|
+
return !a || !s ? null : a.isAfter(s, "day") ? { start: s, end: a } : { start: a, end: s };
|
|
99
103
|
}
|
|
100
104
|
_onKeydown(t) {
|
|
101
105
|
(t.key === "Tab" || t.key === "Enter") && this._parseAndSetDate();
|
|
@@ -127,18 +131,18 @@ let r = class extends f {
|
|
|
127
131
|
this._showInputError("Geçersiz aralık formatı. Örnek: 19/09/2025 - 25/09/2025");
|
|
128
132
|
return;
|
|
129
133
|
}
|
|
130
|
-
const
|
|
131
|
-
|
|
134
|
+
const a = this._parseSingleDate(e);
|
|
135
|
+
a && this._withinBounds(a) ? (this._emitChange(a.format("YYYY-MM-DD")), this._inputDraft = null, this._clearInputError()) : this._showInputError("Geçersiz tarih formatı. Örnek: 19/09/2025");
|
|
132
136
|
}
|
|
133
137
|
_updatePopper() {
|
|
134
138
|
if (!this._open || !this.isConnected) return;
|
|
135
139
|
const t = this._referenceElement, e = this._popupElement;
|
|
136
140
|
if (!t || !e) return;
|
|
137
|
-
const
|
|
141
|
+
const a = Math.max(
|
|
138
142
|
270,
|
|
139
143
|
Math.round(t.getBoundingClientRect().width * (this.expandFactor || 1))
|
|
140
144
|
);
|
|
141
|
-
if (e.style.width = `${
|
|
145
|
+
if (e.style.width = `${a}px`, this._popperInstance) {
|
|
142
146
|
this._popperInstance.setOptions({
|
|
143
147
|
placement: "bottom",
|
|
144
148
|
strategy: "fixed",
|
|
@@ -284,79 +288,82 @@ r.styles = [
|
|
|
284
288
|
`
|
|
285
289
|
];
|
|
286
290
|
i([
|
|
287
|
-
|
|
291
|
+
n({ type: String })
|
|
288
292
|
], r.prototype, "value", 2);
|
|
289
293
|
i([
|
|
290
|
-
|
|
294
|
+
n({ type: String })
|
|
291
295
|
], r.prototype, "min", 2);
|
|
292
296
|
i([
|
|
293
|
-
|
|
297
|
+
n({ type: String })
|
|
294
298
|
], r.prototype, "max", 2);
|
|
295
299
|
i([
|
|
296
|
-
|
|
300
|
+
n({ type: Boolean })
|
|
297
301
|
], r.prototype, "required", 2);
|
|
298
302
|
i([
|
|
299
|
-
|
|
303
|
+
n({ type: Boolean })
|
|
300
304
|
], r.prototype, "disabled", 2);
|
|
301
305
|
i([
|
|
302
|
-
|
|
306
|
+
n({ type: Boolean })
|
|
303
307
|
], r.prototype, "readonly", 2);
|
|
304
308
|
i([
|
|
305
|
-
|
|
309
|
+
n({ type: Number })
|
|
306
310
|
], r.prototype, "expandFactor", 2);
|
|
307
311
|
i([
|
|
308
|
-
|
|
312
|
+
n({ type: String })
|
|
309
313
|
], r.prototype, "placeholder", 2);
|
|
310
314
|
i([
|
|
311
|
-
|
|
315
|
+
n({ type: String, attribute: "display-format" })
|
|
316
|
+
], r.prototype, "displayFormat", 2);
|
|
317
|
+
i([
|
|
318
|
+
n({ type: String })
|
|
312
319
|
], r.prototype, "label", 2);
|
|
313
320
|
i([
|
|
314
|
-
|
|
321
|
+
n({ type: String })
|
|
315
322
|
], r.prototype, "helper", 2);
|
|
316
323
|
i([
|
|
317
|
-
|
|
324
|
+
n({ type: String })
|
|
318
325
|
], r.prototype, "error", 2);
|
|
319
326
|
i([
|
|
320
|
-
|
|
327
|
+
n({ type: String })
|
|
321
328
|
], r.prototype, "size", 2);
|
|
322
329
|
i([
|
|
323
|
-
|
|
330
|
+
n({ type: String })
|
|
324
331
|
], r.prototype, "variant", 2);
|
|
325
332
|
i([
|
|
326
|
-
|
|
333
|
+
n({ type: Boolean })
|
|
327
334
|
], r.prototype, "rangeMode", 2);
|
|
328
335
|
i([
|
|
329
|
-
|
|
336
|
+
n({ type: Array })
|
|
330
337
|
], r.prototype, "disabledDays", 2);
|
|
331
338
|
i([
|
|
332
|
-
|
|
339
|
+
n({ type: String })
|
|
333
340
|
], r.prototype, "rangeStart", 2);
|
|
334
341
|
i([
|
|
335
|
-
|
|
342
|
+
n({ type: String })
|
|
336
343
|
], r.prototype, "rangeEnd", 2);
|
|
337
344
|
i([
|
|
338
|
-
|
|
345
|
+
n({ attribute: !1 })
|
|
339
346
|
], r.prototype, "onChange", 2);
|
|
340
347
|
i([
|
|
341
|
-
|
|
348
|
+
n({ attribute: !1 })
|
|
342
349
|
], r.prototype, "onRangeChange", 2);
|
|
343
350
|
i([
|
|
344
|
-
|
|
351
|
+
p()
|
|
345
352
|
], r.prototype, "_open", 2);
|
|
346
353
|
i([
|
|
347
|
-
|
|
354
|
+
p()
|
|
348
355
|
], r.prototype, "_rangeStart", 2);
|
|
349
356
|
i([
|
|
350
|
-
|
|
357
|
+
p()
|
|
351
358
|
], r.prototype, "_rangeEnd", 2);
|
|
352
359
|
i([
|
|
353
|
-
|
|
360
|
+
p()
|
|
354
361
|
], r.prototype, "_hasError", 2);
|
|
355
362
|
i([
|
|
356
|
-
|
|
363
|
+
p()
|
|
357
364
|
], r.prototype, "_errorMsg", 2);
|
|
358
365
|
i([
|
|
359
|
-
|
|
366
|
+
p()
|
|
360
367
|
], r.prototype, "_inputDraft", 2);
|
|
361
368
|
i([
|
|
362
369
|
u(".dp__reference")
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use strict";const s=require("lit"),r=require("lit/decorators.js"),d=require("lit/directives/live.js"),u=require("@popperjs/core");require("./formfield-JXiv9mvJ.cjs");const h=require("./calendar-DcDT4o-U.cjs");require("./ui-icon-Cd5YhUeQ.cjs");const _=require("dayjs"),c=":host{display:block}.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(--datepicker-popup-bg, var(--color-body-bg));border:1px solid var(--datepicker-popup-border-color, 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)}";var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,i=(p,e,t,a)=>{for(var n=a>1?void 0:a?f(e,t):e,o=p.length-1,l;o>=0;o--)(l=p[o])&&(n=(a?l(e,t,n):l(n))||n);return a&&n&&g(e,t,n),n};let y=0;const m=()=>`dp-${++y}`;exports.LogosphereDatePicker=class extends s.LitElement{constructor(){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.displayFormat="DD/MM/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=m(),this._outsideClick=e=>{this._open&&(e.composedPath().includes(this)||(this._parseAndSetDate(),this._toggleOpen(!1)))},this._openDropdown=()=>{this._toggleOpen(!0)},this._onBlur=()=>{this._parseAndSetDate()}}willUpdate(e){e.has("rangeStart")&&(this._rangeStart=this.rangeStart),e.has("rangeEnd")&&(this._rangeEnd=this.rangeEnd),e.has("value")&&!this._isInputFocused()&&(this._inputDraft=null)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._outsideClick,!0)}disconnectedCallback(){window.removeEventListener("click",this._outsideClick,!0),this._destroyPopper(),this._errorTimer&&clearTimeout(this._errorTimer),super.disconnectedCallback()}updated(e){if(super.updated(e),e.has("_open")){this._open?this._updatePopper():this._destroyPopper();return}this._open&&this._updatePopper()}_safeDay(e){return h.safeDay(e)}_isInputFocused(){return this.shadowRoot?.activeElement===this._inputElement}_withinBounds(e){const t=this._safeDay(this.min),a=this._safeDay(this.max);return!(t&&e.isBefore(t,"day")||a&&e.isAfter(a,"day")||this.disabledDays.includes(e.day()))}_displayValue(){if(this.rangeMode&&this._rangeStart&&this._rangeEnd){const t=this._safeDay(this._rangeStart),a=this._safeDay(this._rangeEnd);if(t&&a)return`${t.format(this.displayFormat)} - ${a.format(this.displayFormat)}`}const e=this._safeDay(this.value);return e?e.format(this.displayFormat):""}_inputValue(){return this._inputDraft??this._displayValue()}_emitChange(e){this.value=e,this.dispatchEvent(new CustomEvent("change",{detail:{value:e}})),this.dispatchEvent(new CustomEvent("lgsChange",{bubbles:!0,composed:!0,detail:{value:e}})),this.onChange?.(e)}_emitRangeChange(){if(!this._rangeStart||!this._rangeEnd)return;const e={start:this._rangeStart,end:this._rangeEnd};this.dispatchEvent(new CustomEvent("rangeChange",{detail:e})),this.onRangeChange?.(e)}_showInputError(e){this._errorTimer&&clearTimeout(this._errorTimer),this._hasError=!0,this._errorMsg=e,this._errorTimer=setTimeout(()=>this._clearInputError(),3e3)}_clearInputError(){this._hasError=!1,this._errorMsg="",this._errorTimer&&(clearTimeout(this._errorTimer),this._errorTimer=null)}_toggleOpen(e){if(this.disabled)return;const t=e??!this._open;this._open=t,t&&this.updateComplete.then(()=>this._updatePopper())}_onInput(e){const t=e.target.value;this._inputDraft=t,t.trim()||(this._emitChange(null),this.rangeMode&&(this._rangeStart=null,this._rangeEnd=null)),this._clearInputError()}_parseSingleDate(e){for(const t of[this.displayFormat,...h.DATE_FORMATS]){const a=_(e,t,!0);if(a.isValid())return a}return this._safeDay(e)}_parseRangeInput(e){const t=e.split(/\s+-\s+/);if(t.length!==2)return null;const a=this._parseSingleDate(t[0].trim()),n=this._parseSingleDate(t[1].trim());return!a||!n?null:a.isAfter(n,"day")?{start:n,end:a}:{start:a,end:n}}_onKeydown(e){(e.key==="Tab"||e.key==="Enter")&&this._parseAndSetDate()}_parseAndSetDate(){const e=this._inputElement;if(!e)return;const t=e.value.trim();if(!t){if(this.rangeMode&&this._rangeStart&&!this._rangeEnd)return;this._emitChange(null),this.rangeMode&&(this._rangeStart=null,this._rangeEnd=null),this._inputDraft=null;return}if(this.rangeMode){const n=this._parseRangeInput(t);if(n){if(this._withinBounds(n.start)&&this._withinBounds(n.end)){this._rangeStart=n.start.format("YYYY-MM-DD"),this._rangeEnd=n.end.format("YYYY-MM-DD"),this._inputDraft=null,this._clearInputError(),this._emitRangeChange();return}this._showInputError("Seçilen aralık sınırlar dışında.");return}const o=this._parseSingleDate(t);if(o&&this._withinBounds(o)){this._rangeStart=o.format("YYYY-MM-DD"),this._rangeEnd=null,this._inputDraft=null,this._clearInputError();return}this._showInputError("Geçersiz aralık formatı. Örnek: 19/09/2025 - 25/09/2025");return}const a=this._parseSingleDate(t);a&&this._withinBounds(a)?(this._emitChange(a.format("YYYY-MM-DD")),this._inputDraft=null,this._clearInputError()):this._showInputError("Geçersiz tarih formatı. Örnek: 19/09/2025")}_updatePopper(){if(!this._open||!this.isConnected)return;const e=this._referenceElement,t=this._popupElement;if(!e||!t)return;const a=Math.max(270,Math.round(e.getBoundingClientRect().width*(this.expandFactor||1)));if(t.style.width=`${a}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=u.createPopper(e,t,{placement:"bottom",strategy:"fixed",modifiers:this._getPopperModifiers()})}_getPopperModifiers(){return[{name:"offset",options:{offset:[0,8]}},{name:"preventOverflow",options:{padding:8}},{name:"flip",options:{padding:8,fallbackPlacements:["top-start","right-start","left-start","bottom-end","top-end","right-end","left-end"]}}]}_destroyPopper(){this._popperInstance&&(this._popperInstance.destroy(),this._popperInstance=void 0)}_handleCalendarChange(e){this._emitChange(e.detail.value),this._inputDraft=null,this._toggleOpen(!1)}_handleCalendarRangeChange(e){this._rangeStart=e.detail.start,this._rangeEnd=e.detail.end,this._inputDraft=null,this._emitRangeChange(),this._toggleOpen(!1)}_handleCalendarStateChange(e){this._rangeStart=e.detail.rangeStart,this._rangeEnd=e.detail.rangeEnd}_handleSuffixClick(e){e.stopPropagation(),this._openDropdown(),this._inputElement?.focus()}_handleClearClick(e){e.stopPropagation(),this._emitChange(null),this._rangeStart=null,this._rangeEnd=null,this._inputDraft=null,this._clearInputError(),this._inputElement?.focus()}render(){const e=this.error||(this._hasError?this._errorMsg:""),t=!!this._displayValue();return s.html`
|
|
2
|
+
<div class="dp">
|
|
3
|
+
<div class="dp__reference">
|
|
4
|
+
<logosphere-formfield
|
|
5
|
+
class="dp__field"
|
|
6
|
+
.label=${this.label}
|
|
7
|
+
.helper=${this.helper}
|
|
8
|
+
.error=${e}
|
|
9
|
+
.required=${this.required}
|
|
10
|
+
.disabled=${this.disabled}
|
|
11
|
+
.readonly=${this.readonly}
|
|
12
|
+
.placeholder=${this.placeholder}
|
|
13
|
+
.size=${this.size}
|
|
14
|
+
.variant=${this.variant}
|
|
15
|
+
@click=${this._openDropdown}
|
|
16
|
+
>
|
|
17
|
+
<input
|
|
18
|
+
id=${this.inputId}
|
|
19
|
+
class="dp__input"
|
|
20
|
+
.value=${d.live(this._inputValue())}
|
|
21
|
+
?disabled=${this.disabled}
|
|
22
|
+
?readonly=${this.readonly}
|
|
23
|
+
placeholder=${this.placeholder}
|
|
24
|
+
aria-label="Tarih girin"
|
|
25
|
+
aria-invalid=${e?"true":"false"}
|
|
26
|
+
@focus=${this._openDropdown}
|
|
27
|
+
@input=${this._onInput}
|
|
28
|
+
@keydown=${this._onKeydown}
|
|
29
|
+
@blur=${this._onBlur}
|
|
30
|
+
/>
|
|
31
|
+
${t?s.html`
|
|
32
|
+
<button
|
|
33
|
+
slot="clear"
|
|
34
|
+
class="dp__icon-btn dp__icon-btn_suffix"
|
|
35
|
+
type="button"
|
|
36
|
+
aria-label="Temizle"
|
|
37
|
+
@click=${this._handleClearClick}
|
|
38
|
+
>
|
|
39
|
+
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
40
|
+
</button>
|
|
41
|
+
`:s.nothing}
|
|
42
|
+
<button
|
|
43
|
+
id=${this.inputId+"-ico"}
|
|
44
|
+
slot="suffix"
|
|
45
|
+
class="dp__icon-btn"
|
|
46
|
+
type="button"
|
|
47
|
+
aria-label=${this._open?"Takvimi kapat":"Takvimi aç"}
|
|
48
|
+
aria-expanded=${this._open?"true":"false"}
|
|
49
|
+
aria-haspopup="dialog"
|
|
50
|
+
@click=${this._handleSuffixClick}
|
|
51
|
+
>
|
|
52
|
+
<ui-icon name="uil-calendar" size="16"></ui-icon>
|
|
53
|
+
</button>
|
|
54
|
+
</logosphere-formfield>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
${this._open?s.html`
|
|
58
|
+
<div
|
|
59
|
+
data-datepicker-popper
|
|
60
|
+
class="dp__popup"
|
|
61
|
+
role="dialog"
|
|
62
|
+
aria-modal="true"
|
|
63
|
+
aria-label="Tarih seçici"
|
|
64
|
+
>
|
|
65
|
+
<logosphere-calendar
|
|
66
|
+
.value=${this.value}
|
|
67
|
+
.min=${this.min}
|
|
68
|
+
.max=${this.max}
|
|
69
|
+
.disabled=${this.disabled}
|
|
70
|
+
.rangeMode=${this.rangeMode}
|
|
71
|
+
.disabledDays=${this.disabledDays}
|
|
72
|
+
.rangeStart=${this._rangeStart}
|
|
73
|
+
.rangeEnd=${this._rangeEnd}
|
|
74
|
+
.closable=${!0}
|
|
75
|
+
@change=${this._handleCalendarChange}
|
|
76
|
+
@rangeChange=${this._handleCalendarRangeChange}
|
|
77
|
+
@calendar-state-change=${this._handleCalendarStateChange}
|
|
78
|
+
@close-request=${()=>this._toggleOpen(!1)}
|
|
79
|
+
></logosphere-calendar>
|
|
80
|
+
</div>
|
|
81
|
+
`:s.nothing}
|
|
82
|
+
</div>
|
|
83
|
+
`}};exports.LogosphereDatePicker.styles=[s.css`
|
|
84
|
+
${s.unsafeCSS(c)}
|
|
85
|
+
`];i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"value",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"min",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"max",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"required",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"disabled",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"readonly",2);i([r.property({type:Number})],exports.LogosphereDatePicker.prototype,"expandFactor",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"placeholder",2);i([r.property({type:String,attribute:"display-format"})],exports.LogosphereDatePicker.prototype,"displayFormat",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"label",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"helper",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"error",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"size",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"variant",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"rangeMode",2);i([r.property({type:Array})],exports.LogosphereDatePicker.prototype,"disabledDays",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"rangeStart",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"rangeEnd",2);i([r.property({attribute:!1})],exports.LogosphereDatePicker.prototype,"onChange",2);i([r.property({attribute:!1})],exports.LogosphereDatePicker.prototype,"onRangeChange",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_open",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_rangeStart",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_rangeEnd",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_hasError",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_errorMsg",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_inputDraft",2);i([r.query(".dp__reference")],exports.LogosphereDatePicker.prototype,"_referenceElement",2);i([r.query("[data-datepicker-popper]")],exports.LogosphereDatePicker.prototype,"_popupElement",2);i([r.query("input")],exports.LogosphereDatePicker.prototype,"_inputElement",2);exports.LogosphereDatePicker=i([r.customElement("logosphere-datepicker")],exports.LogosphereDatePicker);
|
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-BOQ13sIm.cjs");Object.defineProperty(exports,"LogosphereDatePicker",{enumerable:!0,get:()=>e.LogosphereDatePicker});
|
package/dist/datepicker.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const l=require("lit"),i=require("lit/decorators.js");require("./button-
|
|
1
|
+
"use strict";const l=require("lit"),i=require("lit/decorators.js");require("./button-MBxtvVqn.cjs");require("./ui-icon-Cd5YhUeQ.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-color);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-color);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(d,e,t,r)=>{for(var o=r>1?void 0:r?h(e,t):e,a=d.length-1,n;a>=0;a--)(n=d[a])&&(o=(r?n(e,t,o):n(o))||o);return r&&o&&c(e,t,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(),t=Math.max(0,e.top),r=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:${t}px;bottom:${r}px;right:${a}px;max-width:${n}px;`:`top:${t}px;bottom:${r}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 r=e.querySelector(this.containerSelector);if(r)return r}const t=document.querySelector(this.containerSelector);if(t)return t}return this.parentElement??this}render(){return l.html`
|
|
2
2
|
<div class="drawer">
|
|
3
3
|
<div class="drawer__trigger" @click=${this._onTriggerClick}>
|
|
4
4
|
<slot name="trigger"></slot>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { unsafeCSS as c, css as p, LitElement as h, html as w } from "lit";
|
|
2
2
|
import { property as l, customElement as m } from "lit/decorators.js";
|
|
3
|
-
import "./button-
|
|
4
|
-
import "./ui-icon-
|
|
3
|
+
import "./button-QWCkFTeJ.js";
|
|
4
|
+
import "./ui-icon-Ckljc9hg.js";
|
|
5
5
|
const _ = ":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-color);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-color);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";
|
|
6
6
|
var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (e, t, r, s) => {
|
|
7
7
|
for (var o = s > 1 ? void 0 : s ? f(t, r) : t, a = e.length - 1, d; a >= 0; a--)
|
package/dist/drawer.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./drawer-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./drawer-DBrOkz0z.cjs");Object.defineProperty(exports,"Drawer",{enumerable:!0,get:()=>e.Drawer});
|
package/dist/drawer.js
CHANGED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";const a=require("lit"),o=require("lit/decorators.js"),f=":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:12px;line-height:1.125rem;letter-spacing:-.12px;font-weight:var(--font-weight-medium);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.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(--formfield-border-radius, var(--radius-base));border-top:var(--formfield-border-top, var(--formfield-border-top-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-right:var(--formfield-border-right, var(--formfield-border-right-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-bottom:var(--formfield-border-bottom, var(--formfield-border-bottom-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-left:var(--formfield-border-left, var(--formfield-border-left-width, 1px) solid var(--formfield-border-color, 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:var(--formfield-min-height, 32px)}.formfield__container--large{min-height:var(--formfield-min-height-large, 40px)}.formfield__container--multiline{align-items:flex-start;min-height:64px;padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-light)}.formfield__container--focused{border-color:var(--formfield-border-color-focus, var(--color-body-text));background-color:var(--color-body-bg)}.formfield__container--error{border-color:var(--color-danger)}.formfield__container--disabled{background-color:var(--color-body-bg);opacity:.4;cursor:not-allowed;pointer-events:none}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent;background-color:var(--color-light)}.formfield__input-area{flex:1;min-width:0;display:flex;align-items:center}.formfield__container--multiline .formfield__input-area{align-items:flex-start;align-self:stretch}.formfield__prefix,.formfield__clear,.formfield__suffix{display:flex;align-items:center;flex-shrink:0;align-self:stretch}.formfield__container--multiline .formfield__clear,.formfield__container--multiline .formfield__suffix{align-items:flex-start}.formfield__container--has-prefix .formfield__prefix{margin-right:var(--spacing-2)}.formfield__container--has-clear .formfield__clear,.formfield__container--has-suffix .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__helper{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text)}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,t=(n,e,r,i)=>{for(var l=i>1?void 0:i?h(e,r):e,s=n.length-1,d;s>=0;s--)(d=n[s])&&(l=(i?d(e,r,l):d(l))||l);return i&&l&&c(e,r,l),l};exports.FormField=class extends a.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.multiline=!1,this.forceFocused=!1,this._focused=!1,this._hovered=!1,this._hasPrefix=!1,this._hasSuffix=!1,this._hasClear=!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(s=>["INPUT","TEXTAREA","SELECT"].includes(s.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},this.handleClearSlotChange=e=>{const r=e.target;this._hasClear=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"]'),i=this.shadowRoot?.querySelector('slot[name="clear"]');e&&(this._hasPrefix=e.assignedElements({flatten:!0}).length>0),r&&(this._hasSuffix=r.assignedElements({flatten:!0}).length>0),i&&(this._hasClear=i.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,i=["formfield__container",`formfield__container--${this.size}`,`formfield__container--cursor-${this.cursor}`,this._hasPrefix?"formfield__container--has-prefix":"",this._hasSuffix?"formfield__container--has-suffix":"",this._hasClear?"formfield__container--has-clear":"",e?"formfield__container--error":"",this._focused||this.forceFocused?"formfield__container--focused":"",this._hovered?"formfield__container--hovered":"",this.disabled?"formfield__container--disabled":"",this.variant==="subtle"?"formfield__container--subtle":"",this.multiline?"formfield__container--multiline":""].filter(Boolean).join(" ");return a.html`
|
|
2
|
+
<div class="formfield">
|
|
3
|
+
${this.label?a.html`
|
|
4
|
+
<label class="formfield__label">
|
|
5
|
+
${this.label}
|
|
6
|
+
${this.required?a.html`<span class="formfield__required">*</span>`:""}
|
|
7
|
+
</label>
|
|
8
|
+
`:""}
|
|
9
|
+
|
|
10
|
+
<div
|
|
11
|
+
class="${i}"
|
|
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" @slotchange=${this.handleClearSlotChange}></slot>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="formfield__suffix">
|
|
26
|
+
<slot name="suffix" @slotchange=${this.handleSuffixSlotChange}></slot>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
${r?a.html`<div class="formfield__helper">${this.helper}</div>`:""}
|
|
31
|
+
${e?a.html`<div class="formfield__error">${this.error}</div>`:""}
|
|
32
|
+
</div>
|
|
33
|
+
`}};exports.FormField.styles=[a.css`${a.unsafeCSS(f)}`];t([o.property({type:String})],exports.FormField.prototype,"label",2);t([o.property({type:String})],exports.FormField.prototype,"helper",2);t([o.property({type:String})],exports.FormField.prototype,"error",2);t([o.property({type:String})],exports.FormField.prototype,"placeholder",2);t([o.property({type:String})],exports.FormField.prototype,"size",2);t([o.property({type:String})],exports.FormField.prototype,"variant",2);t([o.property({type:String})],exports.FormField.prototype,"cursor",2);t([o.property({type:Boolean})],exports.FormField.prototype,"required",2);t([o.property({type:Boolean})],exports.FormField.prototype,"disabled",2);t([o.property({type:Boolean})],exports.FormField.prototype,"readonly",2);t([o.property({type:Boolean})],exports.FormField.prototype,"multiline",2);t([o.property({type:Boolean})],exports.FormField.prototype,"forceFocused",2);t([o.state()],exports.FormField.prototype,"_focused",2);t([o.state()],exports.FormField.prototype,"_hovered",2);t([o.state()],exports.FormField.prototype,"_hasPrefix",2);t([o.state()],exports.FormField.prototype,"_hasSuffix",2);t([o.state()],exports.FormField.prototype,"_hasClear",2);exports.FormField=t([o.customElement("logosphere-formfield")],exports.FormField);
|