@logosphere-ui/core 0.0.0-alpha.40 → 0.0.0-alpha.42
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 +18 -62
- package/dist/AGENTS.md +18 -62
- package/dist/atoms/Checkbox/checkbox.d.ts +2 -11
- package/dist/atoms/FormField/formfield.d.ts +0 -2
- package/dist/{badge-B0Bj-HAT.js → badge-DsDxWEHx.js} +20 -20
- package/dist/{badge-DWkKpZTX.cjs → badge-DvaKpUHe.cjs} +1 -1
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +1 -1
- package/dist/breadcrumb-BB61Xt0s.js +41 -0
- package/dist/breadcrumb-Cop-B1J7.cjs +12 -0
- package/dist/breadcrumb.cjs +1 -1
- package/dist/breadcrumb.js +1 -1
- package/dist/button-DRZ4sG4T.cjs +10 -0
- package/dist/button-Uu9oaieg.js +58 -0
- package/dist/button.cjs +1 -1
- package/dist/button.js +1 -1
- package/dist/{calendar-DcDT4o-U.cjs → calendar-CIgyrv3U.cjs} +1 -1
- package/dist/{calendar-DsriSHZ4.js → calendar-CZ_IN2TF.js} +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.js +1 -1
- package/dist/card-BOCW7gad.cjs +43 -0
- package/dist/{card-R_cKrdHK.js → card-MDwFGplY.js} +3 -3
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/chatbot-B-NiZIYK.cjs +183 -0
- package/dist/{chatbot-yup4Nz00.js → chatbot-CHgiUY4h.js} +13 -13
- package/dist/chatbot.cjs +1 -1
- package/dist/chatbot.js +1 -1
- package/dist/checkbox-CX0LgsWP.js +148 -0
- package/dist/checkbox-DpbKHANK.cjs +53 -0
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{chip-group-CC5RBhN_.js → chip-group-BUL2H8rr.js} +1 -1
- package/dist/{chip-group-BqYKZKmu.cjs → chip-group-CpcjGoRm.cjs} +1 -1
- package/dist/chip-group.cjs +1 -1
- package/dist/chip-group.js +1 -1
- package/dist/combobox-BmIFPk8X.cjs +113 -0
- package/dist/{combobox-Nxhk75IH.js → combobox-jak7Ac1m.js} +8 -31
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/{datepicker-BExZseRQ.js → datepicker-BgysIOZI.js} +51 -58
- package/dist/datepicker-DOBmbxlo.cjs +85 -0
- package/dist/datepicker.cjs +1 -1
- package/dist/datepicker.js +1 -1
- package/dist/{drawer-DBrOkz0z.cjs → drawer-3nyjAkcS.cjs} +2 -2
- package/dist/{drawer-DHsESNFL.js → drawer-CE9zzllI.js} +3 -3
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.js +1 -1
- package/dist/formfield-CRcyUMvQ.cjs +33 -0
- package/dist/{formfield-ss2mFweu.js → formfield-O327HYt0.js} +52 -59
- package/dist/formfield.cjs +1 -1
- package/dist/formfield.js +1 -1
- package/dist/index.cjs +7 -7
- package/dist/index.d.ts +0 -1
- package/dist/index.js +59 -60
- package/dist/index.umd.js +145 -146
- package/dist/input-CQS0LzF-.cjs +59 -0
- package/dist/input-CeF3YJk-.js +257 -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-CMx2K5Ws.js → leftmenu-CmWvnA6L.js} +4 -4
- package/dist/{leftmenu-DCfTelzi.cjs → leftmenu-p9aR2QTy.cjs} +1 -1
- package/dist/{modal-DNjURVZy.js → modal-DUIv_yoo.js} +4 -4
- package/dist/modal-dUnnHe8u.cjs +84 -0
- package/dist/modal.cjs +1 -1
- package/dist/modal.js +1 -1
- package/dist/molecules/Input/input.d.ts +0 -17
- package/dist/organisms/Combobox/combobox.d.ts +0 -9
- package/dist/organisms/DatePicker/datepicker.d.ts +0 -2
- package/dist/{pagination-B91sZD5E.js → pagination-B7jknoOz.js} +61 -61
- package/dist/pagination-BkqbWBOn.cjs +169 -0
- package/dist/pagination.cjs +1 -1
- package/dist/pagination.js +1 -1
- package/dist/popover-CYDoeLKp.cjs +30 -0
- package/dist/{popover-CSgoaROl.js → popover-DDaG8MSj.js} +28 -28
- package/dist/popover.cjs +1 -1
- package/dist/popover.js +1 -1
- package/dist/{switch-Do6SCkPJ.cjs → switch-8RGGesy5.cjs} +2 -2
- package/dist/{switch-uYVuohJ-.js → switch-DNqPqH-R.js} +21 -25
- package/dist/switch.cjs +1 -1
- package/dist/switch.js +1 -1
- package/dist/tab-CDMcFHvP.cjs +41 -0
- package/dist/{tab-Byh4UgFB.js → tab-CuBCFGoO.js} +1 -1
- package/dist/tab.cjs +1 -1
- package/dist/tab.js +1 -1
- package/dist/{text-area-CHkrGi3S.js → text-area-C73JxnqH.js} +12 -16
- package/dist/text-area-Cprb-azV.cjs +51 -0
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{timepicker-Co7lW5Rp.cjs → timepicker-CLJKWWGm.cjs} +1 -1
- package/dist/{timepicker-CAat7fcK.js → timepicker-DMzGYd0p.js} +2 -6
- package/dist/timepicker.cjs +1 -1
- package/dist/timepicker.js +1 -1
- package/dist/toast-container-6t6yEP9Y.cjs +64 -0
- package/dist/{toast-container-DxFwLT5S.js → toast-container-B5v74b_5.js} +4 -4
- package/dist/toast.cjs +1 -1
- package/dist/toast.js +1 -1
- package/dist/{tree-menu-Psek8QB9.js → tree-menu-CkOPxr-W.js} +2 -2
- package/dist/tree-menu-WNwZMreD.cjs +47 -0
- package/dist/tree-menu.cjs +1 -1
- package/dist/tree-menu.js +1 -1
- package/dist/{ui-icon-Ckljc9hg.js → ui-icon-BMJNdIOq.js} +0 -3
- package/dist/{ui-icon-Cd5YhUeQ.cjs → ui-icon-DIucAQC_.cjs} +3 -3
- package/package.json +1 -6
- package/dist/breadcrumb-BOuCLUJh.cjs +0 -12
- package/dist/breadcrumb-BeJqq-5C.js +0 -41
- package/dist/button-MBxtvVqn.cjs +0 -10
- package/dist/button-QWCkFTeJ.js +0 -58
- package/dist/card-BUWvno93.cjs +0 -43
- package/dist/chatbot-BPVC2wqM.cjs +0 -183
- package/dist/checkbox-BAbPDN6x.cjs +0 -53
- package/dist/checkbox-CTfbav6M.js +0 -152
- package/dist/combobox-Bah9Akr-.cjs +0 -113
- package/dist/datepicker-BOQ13sIm.cjs +0 -85
- package/dist/formfield-JXiv9mvJ.cjs +0 -33
- package/dist/icon.cjs +0 -1
- package/dist/icon.js +0 -4
- package/dist/input-D9lFcDHU.js +0 -278
- package/dist/input-Dg-jos9u.cjs +0 -60
- package/dist/modal-BJNCTlBX.cjs +0 -84
- package/dist/pagination-Cnh-o-Nq.cjs +0 -169
- package/dist/popover-DwDyLpQq.cjs +0 -30
- package/dist/shared/icons/index.d.ts +0 -1
- package/dist/tab-BvRVHpWs.cjs +0 -41
- package/dist/text-area-DvOiCcKP.cjs +0 -51
- package/dist/toast-container-aY1lGjRi.cjs +0 -64
- package/dist/tree-menu-Dqy14_m2.cjs +0 -47
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
import { unsafeCSS as b, css as k, LitElement as u, nothing as h, html as a } from "lit";
|
|
2
|
-
import { property as s, state as f, customElement as v } from "lit/decorators.js";
|
|
3
|
-
import { ref as p } from "lit/directives/ref.js";
|
|
4
|
-
const m = ':host{display:inline-block}.checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:translate(-50%,-65%) rotate(-45deg)}.checkbox-control--indeterminate{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;background-color:#fff;border-radius:1px;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-body-text)}.radio-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-full);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-wrapper:hover .radio-control{border-color:var(--color-border-emphasis);background-color:var(--color-body-bg-hover)}.radio-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-wrapper:hover .radio-control--checked{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.radio-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:var(--radius-full);background-color:#fff;transform:translate(-50%,-50%)}.checkbox-wrapper--disabled .radio-control--checked{background-color:var(--color-primary-disabled);border-color:var(--color-primary-disabled)}.switch-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.switch-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.switch-track{width:36px;height:20px;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-border);position:relative;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked{background-color:var(--color-primary)}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background-color:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked .switch-thumb{transform:translate(16px)}';
|
|
5
|
-
var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, r, c, n) => {
|
|
6
|
-
for (var i = n > 1 ? void 0 : n ? g(r, c) : r, l = e.length - 1, d; l >= 0; l--)
|
|
7
|
-
(d = e[l]) && (i = (n ? d(r, c, i) : d(i)) || i);
|
|
8
|
-
return n && i && x(r, c, i), i;
|
|
9
|
-
};
|
|
10
|
-
let t = class extends u {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments), this.label = "", this.value = "", this.type = "checkbox", this.disabled = !1, this.indeterminate = !1, this.internalChecked = !1, this._checked = !1;
|
|
13
|
-
}
|
|
14
|
-
get checked() {
|
|
15
|
-
return this._checked;
|
|
16
|
-
}
|
|
17
|
-
set checked(e) {
|
|
18
|
-
const r = this._checked;
|
|
19
|
-
this._checked = e, this.internalChecked = e, this.requestUpdate("checked", r);
|
|
20
|
-
}
|
|
21
|
-
firstUpdated() {
|
|
22
|
-
this.setIndeterminate();
|
|
23
|
-
}
|
|
24
|
-
updated(e) {
|
|
25
|
-
e.has("indeterminate") && this.setIndeterminate();
|
|
26
|
-
}
|
|
27
|
-
setIndeterminate() {
|
|
28
|
-
this.inputElement && (this.inputElement.indeterminate = this.indeterminate);
|
|
29
|
-
}
|
|
30
|
-
toggleChecked() {
|
|
31
|
-
if (!this.disabled) {
|
|
32
|
-
if (this.type === "radio") {
|
|
33
|
-
if (this.internalChecked) return;
|
|
34
|
-
this.internalChecked = !0;
|
|
35
|
-
} else this.indeterminate ? (this.indeterminate = !1, this.internalChecked = !0) : this.internalChecked = !this.internalChecked;
|
|
36
|
-
this.dispatchEvent(
|
|
37
|
-
new CustomEvent("lgsChange", {
|
|
38
|
-
detail: {
|
|
39
|
-
checked: this.internalChecked,
|
|
40
|
-
indeterminate: this.indeterminate,
|
|
41
|
-
value: this.value
|
|
42
|
-
},
|
|
43
|
-
bubbles: !0,
|
|
44
|
-
composed: !0
|
|
45
|
-
})
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
renderCheckbox() {
|
|
50
|
-
const e = [
|
|
51
|
-
"checkbox-control",
|
|
52
|
-
this.internalChecked ? "checkbox-control--checked" : "",
|
|
53
|
-
this.indeterminate ? "checkbox-control--indeterminate" : ""
|
|
54
|
-
].filter(Boolean).join(" ");
|
|
55
|
-
return a`
|
|
56
|
-
<div
|
|
57
|
-
class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
|
|
58
|
-
@click=${this.toggleChecked}
|
|
59
|
-
>
|
|
60
|
-
<input
|
|
61
|
-
type="checkbox"
|
|
62
|
-
class="checkbox-input"
|
|
63
|
-
.checked=${this.internalChecked}
|
|
64
|
-
?disabled=${this.disabled}
|
|
65
|
-
.value=${this.value}
|
|
66
|
-
${p((r) => this.inputElement = r)}
|
|
67
|
-
/>
|
|
68
|
-
<span class="${e}"></span>
|
|
69
|
-
${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
|
|
70
|
-
</div>
|
|
71
|
-
`;
|
|
72
|
-
}
|
|
73
|
-
renderRadio() {
|
|
74
|
-
const e = [
|
|
75
|
-
"radio-control",
|
|
76
|
-
this.internalChecked ? "radio-control--checked" : ""
|
|
77
|
-
].filter(Boolean).join(" ");
|
|
78
|
-
return a`
|
|
79
|
-
<div
|
|
80
|
-
class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
|
|
81
|
-
@click=${this.toggleChecked}
|
|
82
|
-
>
|
|
83
|
-
<input
|
|
84
|
-
type="radio"
|
|
85
|
-
class="checkbox-input"
|
|
86
|
-
.checked=${this.internalChecked}
|
|
87
|
-
?disabled=${this.disabled}
|
|
88
|
-
.value=${this.value}
|
|
89
|
-
${p((r) => this.inputElement = r)}
|
|
90
|
-
/>
|
|
91
|
-
<span class="${e}"></span>
|
|
92
|
-
${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
|
|
93
|
-
</div>
|
|
94
|
-
`;
|
|
95
|
-
}
|
|
96
|
-
renderSwitch() {
|
|
97
|
-
return a`
|
|
98
|
-
<div
|
|
99
|
-
class="switch-wrapper ${this.disabled ? "switch-wrapper--disabled" : ""}"
|
|
100
|
-
@click=${this.toggleChecked}
|
|
101
|
-
>
|
|
102
|
-
<input
|
|
103
|
-
type="checkbox"
|
|
104
|
-
class="checkbox-input"
|
|
105
|
-
.checked=${this.internalChecked}
|
|
106
|
-
?disabled=${this.disabled}
|
|
107
|
-
.value=${this.value}
|
|
108
|
-
${p((e) => this.inputElement = e)}
|
|
109
|
-
/>
|
|
110
|
-
<div class="switch-track ${this.internalChecked ? "switch-track--checked" : ""}">
|
|
111
|
-
<div class="switch-thumb"></div>
|
|
112
|
-
</div>
|
|
113
|
-
${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
|
|
114
|
-
</div>
|
|
115
|
-
`;
|
|
116
|
-
}
|
|
117
|
-
render() {
|
|
118
|
-
return this.type === "switch" ? this.renderSwitch() : this.type === "radio" ? this.renderRadio() : this.renderCheckbox();
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
t.styles = [
|
|
122
|
-
k`
|
|
123
|
-
${b(m)}
|
|
124
|
-
`
|
|
125
|
-
];
|
|
126
|
-
o([
|
|
127
|
-
s({ type: String })
|
|
128
|
-
], t.prototype, "label", 2);
|
|
129
|
-
o([
|
|
130
|
-
s({ type: String })
|
|
131
|
-
], t.prototype, "value", 2);
|
|
132
|
-
o([
|
|
133
|
-
s({ type: String })
|
|
134
|
-
], t.prototype, "type", 2);
|
|
135
|
-
o([
|
|
136
|
-
s({ type: Boolean })
|
|
137
|
-
], t.prototype, "disabled", 2);
|
|
138
|
-
o([
|
|
139
|
-
s({ type: Boolean })
|
|
140
|
-
], t.prototype, "indeterminate", 2);
|
|
141
|
-
o([
|
|
142
|
-
f()
|
|
143
|
-
], t.prototype, "internalChecked", 2);
|
|
144
|
-
o([
|
|
145
|
-
s({ type: Boolean })
|
|
146
|
-
], t.prototype, "checked", 1);
|
|
147
|
-
t = o([
|
|
148
|
-
v("logosphere-checkbox")
|
|
149
|
-
], t);
|
|
150
|
-
export {
|
|
151
|
-
t as C
|
|
152
|
-
};
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
"use strict";const r=require("lit"),o=require("lit/decorators.js"),b=require("@popperjs/core");require("./badge-DWkKpZTX.cjs");require("./checkbox-BAbPDN6x.cjs");require("./formfield-JXiv9mvJ.cjs");require("./ui-icon-Cd5YhUeQ.cjs");const u=':host{display:block}.combobox{display:flex;flex-direction:column;gap:var(--spacing-1);font-family:var(--font-family-base);width:100%}.combobox__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text)}.combobox__label--required:after{content:" *";color:var(--color-primary)}.combobox__readonly{border:none;background:transparent;font-size:var(--font-size-sm);color:var(--color-body-text);padding:0;outline:none;font-family:var(--font-family-base)}.combobox__wrapper{position:relative;width:100%;box-sizing:border-box;padding-right:16px;cursor:pointer}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-2);padding:0;border:none;border-radius:0;background-color:transparent;cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{min-height:20px}.combobox__trigger--large{min-height:24px;font-size:var(--font-size-base)}.combobox__trigger--open{color:var(--color-body-text)}.combobox__trigger--readonly{cursor:default;color:var(--color-tertiary)}.combobox__trigger--disabled{cursor:not-allowed;color:var(--color-tertiary)}.combobox__trigger--readonly .combobox__chevron,.combobox__trigger--disabled .combobox__chevron{opacity:.3}.combobox__placeholder{color:var(--color-tertiary);font-size:var(--font-size-sm);flex:1}.combobox__single-value{flex:1;font-size:var(--font-size-sm);color:var(--color-body-text)}.combobox__trigger--not-clearable .combobox__single-value,.combobox__trigger--not-clearable .combobox__placeholder{padding-right:24px}.combobox__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--color-tertiary);flex-shrink:0;transition:transform var(--transition-speed-fast) var(--transition-timing);position:absolute;right:var(--spacing-3)}.combobox__chevron--open{transform:rotate(180deg)}.combobox__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1);flex:1;overflow:hidden}.combobox__tag{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);background-color:var(--combobox-tag-bg, var(--color-light));border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--combobox-tag-color, var(--color-body-text));white-space:nowrap}.combobox__tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-tertiary);line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__tag-remove:hover{color:var(--color-body-text)}.combobox__clear{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0 12px 0 0;cursor:pointer;color:var(--combobox-clear-color, var(--color-secondary));line-height:1;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__clear:hover{color:var(--color-body-text)}.combobox__filter-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);min-width:0;padding:0;cursor:text}.combobox__filter-input:disabled{cursor:not-allowed}.combobox__filter-input::placeholder{color:var(--color-tertiary)}.combobox__filter-input--inline{flex:1;min-width:60px}.combobox__trigger--multi-filter{flex-wrap:wrap;height:auto;min-height:32px;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-3)}.combobox__trigger--large.combobox__trigger--multi-filter{min-height:40px}.combobox__dropdown[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none}.combobox__dropdown{width:auto;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-sm);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-2) var(--spacing-3);border:none;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-body-text);font-family:var(--font-family-base);outline:none;box-sizing:border-box;background-color:var(--color-body-bg)}.combobox__search::placeholder{color:var(--color-tertiary)}.combobox__list{max-height:208px;overflow-y:auto}.combobox__group--titled+.combobox__group--titled:before{content:"";display:block;margin:var(--spacing-2) 0;border-top:1px solid var(--color-border)}.combobox__group-title{margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3) var(--spacing-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--color-tertiary)}.combobox__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-body-text);cursor:pointer;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.combobox__item:hover,.combobox__item--selected,.combobox__item--focused{background-color:var(--color-light)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';var m=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(d,e,t,s)=>{for(var n=s>1?void 0:s?_(e,t):e,l=d.length-1,p;l>=0;l--)(p=d[l])&&(n=(s?p(e,t,n):p(n))||n);return s&&n&&m(e,t,n),n};exports.Combobox=class extends r.LitElement{constructor(){super(...arguments),this.inputId="combo-"+Math.random().toString(36).substring(2),this.label="",this.helper="",this.error="",this.placeholder="Seçim yapınız",this.required=!1,this.disabled=!1,this.readOnly=!1,this.variant="default",this.multiple=!1,this.filterable=!1,this.optionLabel="label",this.optionValue="value",this.emptyMessage="Sonuç yok",this.items=[],this.size="default",this.clearable=!0,this.selected=[],this.inputValue="",this._pendingValue=void 0,this.isOpen=!1,this.focusedIndex=-1,this._filteredItems=[],this._filteredGroups=[],this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._closeDropdown()},this._handleKeydown=e=>{if(!(this.readOnly||this.disabled))switch(e.key){case"ArrowDown":e.preventDefault(),this.isOpen?this.focusedIndex=Math.min(this.focusedIndex+1,this._filteredItems.length-1):(this.isOpen=!0,this.focusedIndex=0),this._scrollFocusedIntoView();break;case"ArrowUp":e.preventDefault(),this.isOpen&&(this.focusedIndex=Math.max(this.focusedIndex-1,0),this._scrollFocusedIntoView());break;case"Enter":e.preventDefault(),this.isOpen?this.focusedIndex>=0&&this.focusedIndex<this._filteredItems.length&&this._selectItem(this._filteredItems[this.focusedIndex],e):(this.isOpen=!0,this.focusedIndex=0);break;case"Escape":e.preventDefault(),this._closeDropdown();break}},this._removeTag=(e,t)=>{t.stopPropagation(),this.setSelected(this.selected.filter(s=>s[this.optionValue]!==e[this.optionValue]))},this._clearSelection=e=>{e.stopPropagation(),this.setSelected([]),this.inputValue=""},this._onFilterFocus=()=>{this.readOnly||this.disabled||(this.inputValue="",this.isOpen=!0,this.focusedIndex=0)},this._onFilterInput=e=>{this.readOnly||this.disabled||(this.inputValue=e.target.value,this.focusedIndex=0,this.isOpen||(this.isOpen=!0))},this._stopPropagation=e=>e.stopPropagation(),this._onTriggerClick=()=>{this.readOnly||this.disabled||(this.filterable&&!this.multiple?this._focusFilterInput():this.isOpen=!this.isOpen)},this._onFieldClick=e=>{if(this.readOnly||this.disabled)return;const t=e.composedPath();if(!(t.some(l=>{const p=l?.classList;return p?.contains("combobox__trigger")||p?.contains("combobox__chevron")})||t.some(l=>l?.classList?.contains("combobox__dropdown")))){if(this.filterable&&!this.multiple){this.isOpen=!0,this._focusFilterInput();return}this.isOpen=!this.isOpen}},this._onChevronClick=()=>{if(!(this.readOnly||this.disabled)){if(this.isOpen){this._closeDropdown();return}this.isOpen=!0,this.filterable&&!this.multiple&&this._focusFilterInput()}}}get value(){return this.multiple?this.selected.map(e=>e[this.optionValue]):this.selected[0]?.[this.optionValue]}set value(e){this._pendingValue=e,this._applyPendingValue(),this.requestUpdate()}_applyPendingValue(){if(this._pendingValue===void 0||!this.items.length)return;const e=this.multiple?Array.isArray(this._pendingValue)?this._pendingValue:[this._pendingValue]:[this._pendingValue];this.selected=this.items.filter(t=>e.includes(t[this.optionValue])),this._pendingValue=void 0}willUpdate(e){if(e.has("items")&&this._applyPendingValue(),e.has("items")||e.has("inputValue")||e.has("optionLabel")){const t=this.inputValue.toLocaleLowerCase(),s=a=>a.filter(c=>String(c[this.optionLabel]??"").toLocaleLowerCase().includes(t)),n=[];let l=[];const p=()=>{const a=s(l);a.length&&n.push({label:"",items:a}),l=[]};this.items.forEach(a=>{const c=this._getGroupItems(a);if(!c){l=[...l,a];return}p();const h=s(c);h.length&&n.push({label:this._getGroupLabel(a),items:h})}),p(),this._filteredGroups=n,this._filteredItems=this._filteredGroups.flatMap(a=>a.items)}}updated(e){if(e.has("isOpen")&&this.isOpen&&this.filterable&&this.multiple&&this.shadowRoot?.querySelector(".combobox__search")?.focus(),e.has("isOpen")){this.isOpen?this.updateComplete.then(()=>{this._showPopover(),this._updatePopper()}):(this._hidePopover(),this._destroyPopper());return}this.isOpen&&this._updatePopper()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),this._destroyPopper()}_closeDropdown(){this.isOpen=!1,this.focusedIndex=-1,this.filterable&&(this.inputValue="")}get _filterDisplayValue(){return this.isOpen?this.inputValue:!this.multiple&&this.selected.length?String(this.selected[0][this.optionLabel]):""}_focusFilterInput(){this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".combobox__filter-input")?.focus()})}_scrollFocusedIntoView(){this.updateComplete.then(()=>{this.shadowRoot?.querySelectorAll(".combobox__item")?.[this.focusedIndex]?.scrollIntoView({block:"nearest"})})}_getGroupItems(e){if(Array.isArray(e.options))return e.options;if(Array.isArray(e.items))return e.items}_getGroupLabel(e){return String(e.label??e.title??e.name??e[this.optionLabel]??"")}selectedItems(){return this.selected}isSelected(e){return this.selected.some(t=>t[this.optionValue]===e[this.optionValue])}_selectItem(e,t){t.stopPropagation();let s;this.multiple?s=this.isSelected(e)?this.selected.filter(n=>n[this.optionValue]!==e[this.optionValue]):[...this.selected,e]:(s=[e],this.isOpen=!1,this.filterable&&(this.inputValue="")),this.setSelected(s)}setSelected(e){this.selected=e,this._pendingValue=void 0,this.dispatchEvent(new CustomEvent("selected",{detail:{selected:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("lgsChange",{bubbles:!0,composed:!0,detail:{value:this.multiple?e.map(t=>t[this.optionValue]):e[0]?.[this.optionValue],selected:e}}))}_renderTagList(){return r.html`
|
|
2
|
-
<div class="combobox__tags">
|
|
3
|
-
${this.selected.map(e=>r.html`
|
|
4
|
-
<logosphere-badge
|
|
5
|
-
variant="default"
|
|
6
|
-
text=${String(e[this.optionLabel])}
|
|
7
|
-
?closeable=${!this.readOnly}
|
|
8
|
-
@close=${t=>this._removeTag(e,t)}
|
|
9
|
-
></logosphere-badge>
|
|
10
|
-
`)}
|
|
11
|
-
</div>
|
|
12
|
-
`}_renderItemContent(e,t){return this.itemRenderer?this.itemRenderer(e,{index:t,selected:this.isSelected(e),focused:t===this.focusedIndex,multiple:this.multiple}):e[this.optionLabel]}_renderTriggerContent(){return this.filterable&&!this.multiple?r.html`
|
|
13
|
-
<input
|
|
14
|
-
class="combobox__filter-input"
|
|
15
|
-
type="text"
|
|
16
|
-
.value=${this._filterDisplayValue}
|
|
17
|
-
placeholder=${this.placeholder}
|
|
18
|
-
?disabled=${this.readOnly||this.disabled}
|
|
19
|
-
@focus=${this._onFilterFocus}
|
|
20
|
-
@input=${this._onFilterInput}
|
|
21
|
-
@keydown=${this._handleKeydown}
|
|
22
|
-
@click=${this._stopPropagation}
|
|
23
|
-
/>
|
|
24
|
-
${this.clearable&&!this.readOnly&&this.selected.length?r.html`
|
|
25
|
-
<button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
|
|
26
|
-
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
27
|
-
</button>
|
|
28
|
-
`:r.nothing}
|
|
29
|
-
`:this.multiple&&this.selected.length?this._renderTagList():!this.multiple&&this.selected.length?r.html`
|
|
30
|
-
<span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
|
|
31
|
-
${this.clearable&&!this.readOnly?r.html`
|
|
32
|
-
<button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
|
|
33
|
-
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
34
|
-
</button>
|
|
35
|
-
`:r.nothing}
|
|
36
|
-
`:r.html`<span class="combobox__placeholder">${this.placeholder}</span>`}_renderDropdown(){let e=0;return r.html`
|
|
37
|
-
<div data-combobox-popper popover="manual" class="combobox__dropdown">
|
|
38
|
-
${this.filterable&&this.multiple?r.html`
|
|
39
|
-
<input
|
|
40
|
-
class="combobox__search"
|
|
41
|
-
type="text"
|
|
42
|
-
placeholder=${this.placeholder}
|
|
43
|
-
.value=${this.inputValue}
|
|
44
|
-
@input=${this._onFilterInput}
|
|
45
|
-
@keydown=${this._handleKeydown}
|
|
46
|
-
@click=${this._stopPropagation}
|
|
47
|
-
/>
|
|
48
|
-
`:r.nothing}
|
|
49
|
-
|
|
50
|
-
<div class="combobox__list">
|
|
51
|
-
${this._filteredItems.length===0?r.html`<div class="combobox__empty">${this.emptyMessage}</div>`:this._filteredGroups.map(t=>r.html`
|
|
52
|
-
<div class="combobox__group ${t.label?"combobox__group--titled":""}">
|
|
53
|
-
${t.label?r.html`<div class="combobox__group-title">${t.label}</div>`:r.nothing}
|
|
54
|
-
${t.items.map(s=>{const n=e++;return r.html`
|
|
55
|
-
<div
|
|
56
|
-
class="combobox__item
|
|
57
|
-
${!this.multiple&&this.isSelected(s)?"combobox__item--selected":""}
|
|
58
|
-
${n===this.focusedIndex?"combobox__item--focused":""}"
|
|
59
|
-
@click=${l=>this._selectItem(s,l)}
|
|
60
|
-
@mouseenter=${()=>{this.focusedIndex=n}}
|
|
61
|
-
>
|
|
62
|
-
${this.multiple?r.html`
|
|
63
|
-
<logosphere-checkbox
|
|
64
|
-
.checked=${this.isSelected(s)}
|
|
65
|
-
.value=${s[this.optionValue]}
|
|
66
|
-
@click=${this._stopPropagation}
|
|
67
|
-
></logosphere-checkbox>
|
|
68
|
-
`:r.nothing}
|
|
69
|
-
${this._renderItemContent(s,n)}
|
|
70
|
-
</div>
|
|
71
|
-
`})}
|
|
72
|
-
</div>
|
|
73
|
-
`)}
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
`}_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"]}}]}_getPopperReferenceElement(){return this._formFieldElement?.shadowRoot?.querySelector(".formfield__container")??this._referenceElement}_updatePopper(){const e=this._getPopperReferenceElement(),t=this._dropdownElement;if(!this.isOpen||!e||!t||!this.isConnected)return;const s=Math.round(e.getBoundingClientRect().width);if(t.style.width=`${s}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom-start",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=b.createPopper(e,t,{placement:"bottom-start",strategy:"fixed",modifiers:this._getPopperModifiers()})}_destroyPopper(){this._popperInstance&&(this._popperInstance.destroy(),this._popperInstance=void 0)}_showPopover(){this._dropdownElement?.showPopover?.()}_hidePopover(){const e=this._dropdownElement;try{e?.hidePopover?.()}catch{}}render(){const e=["combobox__trigger",`combobox__trigger--${this.size}`,this.disabled?"combobox__trigger--disabled":"",this.readOnly?"combobox__trigger--readonly":"",!this.readOnly&&!this.disabled&&this.isOpen?"combobox__trigger--open":"",this.clearable?"":"combobox__trigger--not-clearable"].filter(Boolean).join(" ");return r.html`
|
|
77
|
-
<div class="combobox">
|
|
78
|
-
<logosphere-formfield
|
|
79
|
-
.label=${this.label}
|
|
80
|
-
.helper=${this.helper}
|
|
81
|
-
.error=${this.error}
|
|
82
|
-
cursor="pointer"
|
|
83
|
-
.required=${this.required}
|
|
84
|
-
.disabled=${this.disabled}
|
|
85
|
-
.readonly=${this.readOnly}
|
|
86
|
-
.size=${this.size}
|
|
87
|
-
.variant=${this.variant}
|
|
88
|
-
.forceFocused=${this.isOpen}
|
|
89
|
-
@click=${this._onFieldClick}
|
|
90
|
-
>
|
|
91
|
-
<div class="combobox__wrapper">
|
|
92
|
-
<div
|
|
93
|
-
class="${e}"
|
|
94
|
-
tabindex="${this.readOnly||this.filterable||this.disabled?-1:0}"
|
|
95
|
-
@click=${this._onTriggerClick}
|
|
96
|
-
@keydown=${this.filterable?r.nothing:this._handleKeydown}
|
|
97
|
-
>
|
|
98
|
-
${this._renderTriggerContent()}
|
|
99
|
-
</div>
|
|
100
|
-
|
|
101
|
-
${this._renderDropdown()}
|
|
102
|
-
</div>
|
|
103
|
-
<span
|
|
104
|
-
class="combobox__chevron ${this.isOpen?"combobox__chevron--open":""}"
|
|
105
|
-
@click=${this._onChevronClick}
|
|
106
|
-
>
|
|
107
|
-
<ui-icon name="uil-angle-down" size="16"></ui-icon>
|
|
108
|
-
</span>
|
|
109
|
-
</logosphere-formfield>
|
|
110
|
-
</div>
|
|
111
|
-
`}};exports.Combobox.styles=[r.css`
|
|
112
|
-
${r.unsafeCSS(u)}
|
|
113
|
-
`];i([o.property({type:String})],exports.Combobox.prototype,"label",2);i([o.property({type:String})],exports.Combobox.prototype,"helper",2);i([o.property({type:String})],exports.Combobox.prototype,"error",2);i([o.property({type:String})],exports.Combobox.prototype,"placeholder",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"required",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"disabled",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"readOnly",2);i([o.property({type:String})],exports.Combobox.prototype,"variant",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"multiple",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"filterable",2);i([o.property({type:String})],exports.Combobox.prototype,"optionLabel",2);i([o.property({type:String})],exports.Combobox.prototype,"optionValue",2);i([o.property({type:String})],exports.Combobox.prototype,"emptyMessage",2);i([o.property({type:Array})],exports.Combobox.prototype,"items",2);i([o.property({attribute:!1})],exports.Combobox.prototype,"itemRenderer",2);i([o.property({type:String})],exports.Combobox.prototype,"size",2);i([o.property({type:Boolean})],exports.Combobox.prototype,"clearable",2);i([o.state()],exports.Combobox.prototype,"selected",2);i([o.state()],exports.Combobox.prototype,"inputValue",2);i([o.property({attribute:!1})],exports.Combobox.prototype,"value",1);i([o.state()],exports.Combobox.prototype,"isOpen",2);i([o.state()],exports.Combobox.prototype,"focusedIndex",2);i([o.query(".combobox__wrapper")],exports.Combobox.prototype,"_referenceElement",2);i([o.query("logosphere-formfield")],exports.Combobox.prototype,"_formFieldElement",2);i([o.query("[data-combobox-popper]")],exports.Combobox.prototype,"_dropdownElement",2);exports.Combobox=i([o.customElement("logosphere-combobox")],exports.Combobox);
|
|
@@ -1,85 +0,0 @@
|
|
|
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);
|
|
@@ -1,33 +0,0 @@
|
|
|
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);
|
package/dist/icon.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ui-icon-Cd5YhUeQ.cjs");exports.UiIcon=e.UiIcon;
|
package/dist/icon.js
DELETED