@logosphere-ui/core 0.0.0-alpha.6 → 0.0.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/index.js +3207 -32
  2. package/package.json +16 -31
  3. package/dist/badge-BbhaO73N.cjs +0 -13
  4. package/dist/badge-DE7Tgd8Z.js +0 -71
  5. package/dist/badge.cjs +0 -1
  6. package/dist/badge.js +0 -4
  7. package/dist/breadcrumb-B-4yqoJZ.js +0 -41
  8. package/dist/breadcrumb-Cop-B1J7.cjs +0 -12
  9. package/dist/breadcrumb.cjs +0 -1
  10. package/dist/breadcrumb.js +0 -4
  11. package/dist/button-C1EwOosO.js +0 -58
  12. package/dist/button-CDRccsk9.cjs +0 -10
  13. package/dist/button.cjs +0 -1
  14. package/dist/button.js +0 -4
  15. package/dist/card-CUhlTJyJ.js +0 -97
  16. package/dist/card-n8ka8Zk-.cjs +0 -43
  17. package/dist/card.cjs +0 -1
  18. package/dist/card.js +0 -4
  19. package/dist/chatbot-Da_itUdJ.cjs +0 -160
  20. package/dist/chatbot-zkxngMRH.js +0 -481
  21. package/dist/chatbot.cjs +0 -1
  22. package/dist/chatbot.js +0 -4
  23. package/dist/checkbox-7Rb3WKGx.js +0 -119
  24. package/dist/checkbox-CdDTRdKV.cjs +0 -37
  25. package/dist/checkbox.cjs +0 -1
  26. package/dist/checkbox.js +0 -4
  27. package/dist/combobox-BJbI-Tgi.js +0 -268
  28. package/dist/combobox-pmE7bgEL.cjs +0 -99
  29. package/dist/combobox.cjs +0 -1
  30. package/dist/combobox.js +0 -4
  31. package/dist/datepicker-DFJx45C-.js +0 -750
  32. package/dist/datepicker-b9JGTTMx.cjs +0 -115
  33. package/dist/datepicker.cjs +0 -1
  34. package/dist/datepicker.js +0 -4
  35. package/dist/download-manager-A4fOxGWJ.js +0 -381
  36. package/dist/download-manager-BSIMTGaK.cjs +0 -97
  37. package/dist/download-manager.cjs +0 -1
  38. package/dist/download-manager.js +0 -4
  39. package/dist/formfield-D_7NFFoe.cjs +0 -27
  40. package/dist/formfield-d8fp9FTV.js +0 -118
  41. package/dist/formfield.cjs +0 -1
  42. package/dist/formfield.js +0 -4
  43. package/dist/index.cjs +0 -1
  44. package/dist/input-BcnI1w3_.cjs +0 -46
  45. package/dist/input-Bj_7u8Iv.js +0 -192
  46. package/dist/input.cjs +0 -1
  47. package/dist/input.js +0 -4
  48. package/dist/modal-Bfc6WQSL.js +0 -110
  49. package/dist/modal-DQ8VFL-P.cjs +0 -39
  50. package/dist/modal.cjs +0 -1
  51. package/dist/modal.js +0 -4
  52. package/dist/popover-B7tCqk3R.js +0 -140
  53. package/dist/popover-C2p5Pmts.cjs +0 -30
  54. package/dist/popover.cjs +0 -1
  55. package/dist/popover.js +0 -4
  56. package/dist/switch-Cpl53nRW.js +0 -64
  57. package/dist/switch-Rnnn10bn.cjs +0 -17
  58. package/dist/switch.cjs +0 -1
  59. package/dist/switch.js +0 -4
  60. package/dist/tab-BKdN4xAz.js +0 -176
  61. package/dist/tab-DcjAlXzU.cjs +0 -40
  62. package/dist/tab.cjs +0 -1
  63. package/dist/tab.js +0 -4
  64. package/dist/text-area-BkHdLnZj.cjs +0 -44
  65. package/dist/text-area-CC24lj8v.js +0 -204
  66. package/dist/textarea.cjs +0 -1
  67. package/dist/textarea.js +0 -4
package/dist/checkbox.cjs DELETED
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./checkbox-CdDTRdKV.cjs");Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>e.Checkbox});
package/dist/checkbox.js DELETED
@@ -1,4 +0,0 @@
1
- import { C as r } from "./checkbox-7Rb3WKGx.js";
2
- export {
3
- r as Checkbox
4
- };
@@ -1,268 +0,0 @@
1
- import { LitElement as b, nothing as n, html as r, unsafeCSS as u, css as m } from "lit";
2
- import { property as l, state as d, customElement as _ } from "lit/decorators.js";
3
- const f = '.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%}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-body-bg);cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:border-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{height:32px}.combobox__trigger--large{height:40px;font-size:var(--font-size-base)}.combobox__trigger--open{border-color:var(--color-secondary-hover)}.combobox__trigger--readonly{cursor:default;background-color:var(--color-tertiary-bg);color:var(--color-tertiary)}.combobox__trigger--readonly .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__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)}.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:0 var(--spacing-2);background-color:var(--color-tertiary-bg);border-radius:var(--radius-sm);font-size:var(--font-size-xs);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;cursor:pointer;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::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{position:absolute;top:calc(100% + var(--spacing-1));left:0;width:100%;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-base);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-1-5) 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__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-1-5) 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-tertiary-bg)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';
4
- var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (e, o, s, c) => {
5
- for (var a = c > 1 ? void 0 : c ? x(o, s) : o, p = e.length - 1, h; p >= 0; p--)
6
- (h = e[p]) && (a = (c ? h(o, s, a) : h(a)) || a);
7
- return c && a && g(o, s, a), a;
8
- };
9
- let t = class extends b {
10
- constructor() {
11
- super(...arguments), this.inputId = "combo-" + Math.random().toString(36).substring(2), this.label = "", this.placeholder = "Seçim yapınız", this.required = !1, this.readOnly = !1, this.multiple = !1, this.filterable = !1, this.optionLabel = "label", this.optionValue = "value", this.emptyMessage = "Sonuç yok", this.items = [], this.size = "default", this.selected = [], this.inputValue = "", this.isOpen = !1, this.focusedIndex = -1, this._filteredItems = [], this._handleOutsideClick = (e) => {
12
- e.composedPath().includes(this) || this._closeDropdown();
13
- }, this._handleKeydown = (e) => {
14
- if (!this.readOnly)
15
- switch (e.key) {
16
- case "ArrowDown":
17
- e.preventDefault(), this.isOpen ? this.focusedIndex = Math.min(this.focusedIndex + 1, this._filteredItems.length - 1) : (this.isOpen = !0, this.focusedIndex = 0), this._scrollFocusedIntoView();
18
- break;
19
- case "ArrowUp":
20
- e.preventDefault(), this.isOpen && (this.focusedIndex = Math.max(this.focusedIndex - 1, 0), this._scrollFocusedIntoView());
21
- break;
22
- case "Enter":
23
- 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);
24
- break;
25
- case "Escape":
26
- e.preventDefault(), this._closeDropdown();
27
- break;
28
- }
29
- }, this._removeTag = (e, o) => {
30
- o.stopPropagation(), this.setSelected(
31
- this.selected.filter((s) => s[this.optionValue] !== e[this.optionValue])
32
- );
33
- }, this._clearSelection = (e) => {
34
- e.stopPropagation(), this.setSelected([]), this.inputValue = "";
35
- }, this._onFilterFocus = () => {
36
- this.inputValue = "", this.isOpen = !0, this.focusedIndex = 0;
37
- }, this._onFilterInput = (e) => {
38
- this.inputValue = e.target.value, this.focusedIndex = 0, this.isOpen || (this.isOpen = !0);
39
- }, this._stopPropagation = (e) => e.stopPropagation(), this._onTriggerClick = () => {
40
- this.readOnly || (this.filterable && !this.multiple ? this._focusFilterInput() : this.isOpen = !this.isOpen);
41
- };
42
- }
43
- // ==================== LIFECYCLE ====================
44
- willUpdate(e) {
45
- if (e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
46
- const o = this.inputValue.toLocaleLowerCase();
47
- this._filteredItems = this.items.filter(
48
- (s) => String(s[this.optionLabel] ?? "").toLocaleLowerCase().includes(o)
49
- );
50
- }
51
- }
52
- updated(e) {
53
- e.has("isOpen") && this.isOpen && this.filterable && this.multiple && this.shadowRoot?.querySelector(".combobox__search")?.focus();
54
- }
55
- connectedCallback() {
56
- super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
57
- }
58
- disconnectedCallback() {
59
- super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
60
- }
61
- // ==================== HELPERS ====================
62
- _closeDropdown() {
63
- this.isOpen = !1, this.focusedIndex = -1, this.filterable && (this.inputValue = "");
64
- }
65
- get _filterDisplayValue() {
66
- return this.isOpen ? this.inputValue : !this.multiple && this.selected.length ? String(this.selected[0][this.optionLabel]) : "";
67
- }
68
- _focusFilterInput() {
69
- this.updateComplete.then(() => {
70
- this.shadowRoot?.querySelector(".combobox__filter-input")?.focus();
71
- });
72
- }
73
- _scrollFocusedIntoView() {
74
- this.updateComplete.then(() => {
75
- this.shadowRoot?.querySelectorAll(".combobox__item")?.[this.focusedIndex]?.scrollIntoView({ block: "nearest" });
76
- });
77
- }
78
- // ==================== SELECTION ====================
79
- selectedItems() {
80
- return this.selected;
81
- }
82
- isSelected(e) {
83
- return this.selected.some((o) => o[this.optionValue] === e[this.optionValue]);
84
- }
85
- _selectItem(e, o) {
86
- o.stopPropagation();
87
- let s;
88
- this.multiple ? s = this.isSelected(e) ? this.selected.filter((c) => c[this.optionValue] !== e[this.optionValue]) : [...this.selected, e] : (s = [e], this.isOpen = !1, this.filterable && (this.inputValue = "")), this.setSelected(s);
89
- }
90
- setSelected(e) {
91
- this.selected = e, this.dispatchEvent(new CustomEvent("selected", { detail: { selected: e }, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { value: e }, bubbles: !0, composed: !0 }));
92
- }
93
- // ==================== RENDER PARTS ====================
94
- _renderTagList() {
95
- return r`
96
- <div class="combobox__tags">
97
- ${this.selected.map((e) => r`
98
- <span class="combobox__tag">
99
- ${e[this.optionLabel]}
100
- ${this.readOnly ? n : r`
101
- <button
102
- class="combobox__tag-remove"
103
- @click=${(o) => this._removeTag(e, o)}
104
- aria-label="Remove"
105
- >
106
- <ui-icon name="uil-times" size="12"></ui-icon>
107
- </button>
108
- `}
109
- </span>
110
- `)}
111
- </div>
112
- `;
113
- }
114
- _renderTriggerContent() {
115
- return this.filterable && !this.multiple ? r`
116
- <input
117
- class="combobox__filter-input"
118
- type="text"
119
- .value=${this._filterDisplayValue}
120
- placeholder=${this.placeholder}
121
- ?disabled=${this.readOnly}
122
- @focus=${this._onFilterFocus}
123
- @input=${this._onFilterInput}
124
- @keydown=${this._handleKeydown}
125
- @click=${this._stopPropagation}
126
- />
127
- ${!this.readOnly && this.selected.length ? r`
128
- <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
129
- <ui-icon name="uil-times" size="14"></ui-icon>
130
- </button>
131
- ` : n}
132
- ` : this.multiple && this.selected.length ? this._renderTagList() : !this.multiple && this.selected.length ? r`
133
- <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
134
- ${this.readOnly ? n : r`
135
- <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
136
- <ui-icon name="uil-times" size="14"></ui-icon>
137
- </button>
138
- `}
139
- ` : r`<span class="combobox__placeholder">${this.placeholder}</span>`;
140
- }
141
- _renderDropdown() {
142
- return this.isOpen ? r`
143
- <div class="combobox__dropdown">
144
- ${this.filterable && this.multiple ? r`
145
- <input
146
- class="combobox__search"
147
- type="text"
148
- placeholder=${this.placeholder}
149
- .value=${this.inputValue}
150
- @input=${this._onFilterInput}
151
- @keydown=${this._handleKeydown}
152
- @click=${this._stopPropagation}
153
- />
154
- ` : n}
155
-
156
- <div class="combobox__list">
157
- ${this._filteredItems.length === 0 ? r`<div class="combobox__empty">${this.emptyMessage}</div>` : this._filteredItems.map((e, o) => r`
158
- <div
159
- class="combobox__item
160
- ${!this.multiple && this.isSelected(e) ? "combobox__item--selected" : ""}
161
- ${o === this.focusedIndex ? "combobox__item--focused" : ""}"
162
- @click=${(s) => this._selectItem(e, s)}
163
- @mouseenter=${() => {
164
- this.focusedIndex = o;
165
- }}
166
- >
167
- ${this.multiple ? r`
168
- <logosphere-checkbox
169
- .checked=${this.isSelected(e)}
170
- .value=${e[this.optionValue]}
171
- @click=${this._stopPropagation}
172
- ></logosphere-checkbox>
173
- ` : n}
174
- ${e[this.optionLabel]}
175
- </div>
176
- `)}
177
- </div>
178
- </div>
179
- ` : n;
180
- }
181
- // ==================== MAIN RENDER ====================
182
- render() {
183
- const e = [
184
- "combobox__label",
185
- this.required && !this.readOnly ? "combobox__label--required" : ""
186
- ].filter(Boolean).join(" "), o = [
187
- "combobox__trigger",
188
- `combobox__trigger--${this.size}`,
189
- this.readOnly ? "combobox__trigger--readonly" : "",
190
- !this.readOnly && this.isOpen ? "combobox__trigger--open" : ""
191
- ].filter(Boolean).join(" ");
192
- return r`
193
- <div class="combobox">
194
- ${this.label ? r`
195
- <label for="${this.inputId}" class="${e}">${this.label}</label>
196
- ` : n}
197
-
198
- <div class="combobox__wrapper">
199
- <div
200
- class="${o}"
201
- tabindex="${this.readOnly || this.filterable ? -1 : 0}"
202
- @click=${this._onTriggerClick}
203
- @keydown=${this.filterable ? n : this._handleKeydown}
204
- >
205
- ${this._renderTriggerContent()}
206
- <span class="combobox__chevron ${this.isOpen ? "combobox__chevron--open" : ""}">
207
- <ui-icon name="uil-angle-down" size="16"></ui-icon>
208
- </span>
209
- </div>
210
-
211
- ${this._renderDropdown()}
212
- </div>
213
- </div>
214
- `;
215
- }
216
- };
217
- t.styles = [m`${u(f)}`];
218
- i([
219
- l({ type: String })
220
- ], t.prototype, "label", 2);
221
- i([
222
- l({ type: String })
223
- ], t.prototype, "placeholder", 2);
224
- i([
225
- l({ type: Boolean })
226
- ], t.prototype, "required", 2);
227
- i([
228
- l({ type: Boolean })
229
- ], t.prototype, "readOnly", 2);
230
- i([
231
- l({ type: Boolean })
232
- ], t.prototype, "multiple", 2);
233
- i([
234
- l({ type: Boolean })
235
- ], t.prototype, "filterable", 2);
236
- i([
237
- l({ type: String })
238
- ], t.prototype, "optionLabel", 2);
239
- i([
240
- l({ type: String })
241
- ], t.prototype, "optionValue", 2);
242
- i([
243
- l({ type: String })
244
- ], t.prototype, "emptyMessage", 2);
245
- i([
246
- l({ type: Array })
247
- ], t.prototype, "items", 2);
248
- i([
249
- l({ type: String })
250
- ], t.prototype, "size", 2);
251
- i([
252
- d()
253
- ], t.prototype, "selected", 2);
254
- i([
255
- d()
256
- ], t.prototype, "inputValue", 2);
257
- i([
258
- d()
259
- ], t.prototype, "isOpen", 2);
260
- i([
261
- d()
262
- ], t.prototype, "focusedIndex", 2);
263
- t = i([
264
- _("logosphere-combobox")
265
- ], t);
266
- export {
267
- t as C
268
- };
@@ -1,99 +0,0 @@
1
- "use strict";const o=require("lit"),i=require("lit/decorators.js"),p='.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%}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-body-bg);cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:border-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{height:32px}.combobox__trigger--large{height:40px;font-size:var(--font-size-base)}.combobox__trigger--open{border-color:var(--color-secondary-hover)}.combobox__trigger--readonly{cursor:default;background-color:var(--color-tertiary-bg);color:var(--color-tertiary)}.combobox__trigger--readonly .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__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)}.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:0 var(--spacing-2);background-color:var(--color-tertiary-bg);border-radius:var(--radius-sm);font-size:var(--font-size-xs);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;cursor:pointer;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::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{position:absolute;top:calc(100% + var(--spacing-1));left:0;width:100%;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-base);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-1-5) 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__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-1-5) 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-tertiary-bg)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';var b=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(n,e,t,s)=>{for(var l=s>1?void 0:s?d(e,t):e,a=n.length-1,c;a>=0;a--)(c=n[a])&&(l=(s?c(e,t,l):c(l))||l);return s&&l&&b(e,t,l),l};exports.Combobox=class extends o.LitElement{constructor(){super(...arguments),this.inputId="combo-"+Math.random().toString(36).substring(2),this.label="",this.placeholder="Seçim yapınız",this.required=!1,this.readOnly=!1,this.multiple=!1,this.filterable=!1,this.optionLabel="label",this.optionValue="value",this.emptyMessage="Sonuç yok",this.items=[],this.size="default",this.selected=[],this.inputValue="",this.isOpen=!1,this.focusedIndex=-1,this._filteredItems=[],this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._closeDropdown()},this._handleKeydown=e=>{if(!this.readOnly)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.inputValue="",this.isOpen=!0,this.focusedIndex=0},this._onFilterInput=e=>{this.inputValue=e.target.value,this.focusedIndex=0,this.isOpen||(this.isOpen=!0)},this._stopPropagation=e=>e.stopPropagation(),this._onTriggerClick=()=>{this.readOnly||(this.filterable&&!this.multiple?this._focusFilterInput():this.isOpen=!this.isOpen)}}willUpdate(e){if(e.has("items")||e.has("inputValue")||e.has("optionLabel")){const t=this.inputValue.toLocaleLowerCase();this._filteredItems=this.items.filter(s=>String(s[this.optionLabel]??"").toLocaleLowerCase().includes(t))}}updated(e){e.has("isOpen")&&this.isOpen&&this.filterable&&this.multiple&&this.shadowRoot?.querySelector(".combobox__search")?.focus()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_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"})})}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(l=>l[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.dispatchEvent(new CustomEvent("selected",{detail:{selected:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0}))}_renderTagList(){return o.html`
2
- <div class="combobox__tags">
3
- ${this.selected.map(e=>o.html`
4
- <span class="combobox__tag">
5
- ${e[this.optionLabel]}
6
- ${this.readOnly?o.nothing:o.html`
7
- <button
8
- class="combobox__tag-remove"
9
- @click=${t=>this._removeTag(e,t)}
10
- aria-label="Remove"
11
- >
12
- <ui-icon name="uil-times" size="12"></ui-icon>
13
- </button>
14
- `}
15
- </span>
16
- `)}
17
- </div>
18
- `}_renderTriggerContent(){return this.filterable&&!this.multiple?o.html`
19
- <input
20
- class="combobox__filter-input"
21
- type="text"
22
- .value=${this._filterDisplayValue}
23
- placeholder=${this.placeholder}
24
- ?disabled=${this.readOnly}
25
- @focus=${this._onFilterFocus}
26
- @input=${this._onFilterInput}
27
- @keydown=${this._handleKeydown}
28
- @click=${this._stopPropagation}
29
- />
30
- ${!this.readOnly&&this.selected.length?o.html`
31
- <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
32
- <ui-icon name="uil-times" size="14"></ui-icon>
33
- </button>
34
- `:o.nothing}
35
- `:this.multiple&&this.selected.length?this._renderTagList():!this.multiple&&this.selected.length?o.html`
36
- <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
37
- ${this.readOnly?o.nothing:o.html`
38
- <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
39
- <ui-icon name="uil-times" size="14"></ui-icon>
40
- </button>
41
- `}
42
- `:o.html`<span class="combobox__placeholder">${this.placeholder}</span>`}_renderDropdown(){return this.isOpen?o.html`
43
- <div class="combobox__dropdown">
44
- ${this.filterable&&this.multiple?o.html`
45
- <input
46
- class="combobox__search"
47
- type="text"
48
- placeholder=${this.placeholder}
49
- .value=${this.inputValue}
50
- @input=${this._onFilterInput}
51
- @keydown=${this._handleKeydown}
52
- @click=${this._stopPropagation}
53
- />
54
- `:o.nothing}
55
-
56
- <div class="combobox__list">
57
- ${this._filteredItems.length===0?o.html`<div class="combobox__empty">${this.emptyMessage}</div>`:this._filteredItems.map((e,t)=>o.html`
58
- <div
59
- class="combobox__item
60
- ${!this.multiple&&this.isSelected(e)?"combobox__item--selected":""}
61
- ${t===this.focusedIndex?"combobox__item--focused":""}"
62
- @click=${s=>this._selectItem(e,s)}
63
- @mouseenter=${()=>{this.focusedIndex=t}}
64
- >
65
- ${this.multiple?o.html`
66
- <logosphere-checkbox
67
- .checked=${this.isSelected(e)}
68
- .value=${e[this.optionValue]}
69
- @click=${this._stopPropagation}
70
- ></logosphere-checkbox>
71
- `:o.nothing}
72
- ${e[this.optionLabel]}
73
- </div>
74
- `)}
75
- </div>
76
- </div>
77
- `:o.nothing}render(){const e=["combobox__label",this.required&&!this.readOnly?"combobox__label--required":""].filter(Boolean).join(" "),t=["combobox__trigger",`combobox__trigger--${this.size}`,this.readOnly?"combobox__trigger--readonly":"",!this.readOnly&&this.isOpen?"combobox__trigger--open":""].filter(Boolean).join(" ");return o.html`
78
- <div class="combobox">
79
- ${this.label?o.html`
80
- <label for="${this.inputId}" class="${e}">${this.label}</label>
81
- `:o.nothing}
82
-
83
- <div class="combobox__wrapper">
84
- <div
85
- class="${t}"
86
- tabindex="${this.readOnly||this.filterable?-1:0}"
87
- @click=${this._onTriggerClick}
88
- @keydown=${this.filterable?o.nothing:this._handleKeydown}
89
- >
90
- ${this._renderTriggerContent()}
91
- <span class="combobox__chevron ${this.isOpen?"combobox__chevron--open":""}">
92
- <ui-icon name="uil-angle-down" size="16"></ui-icon>
93
- </span>
94
- </div>
95
-
96
- ${this._renderDropdown()}
97
- </div>
98
- </div>
99
- `}};exports.Combobox.styles=[o.css`${o.unsafeCSS(p)}`];r([i.property({type:String})],exports.Combobox.prototype,"label",2);r([i.property({type:String})],exports.Combobox.prototype,"placeholder",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"required",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"readOnly",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"multiple",2);r([i.property({type:Boolean})],exports.Combobox.prototype,"filterable",2);r([i.property({type:String})],exports.Combobox.prototype,"optionLabel",2);r([i.property({type:String})],exports.Combobox.prototype,"optionValue",2);r([i.property({type:String})],exports.Combobox.prototype,"emptyMessage",2);r([i.property({type:Array})],exports.Combobox.prototype,"items",2);r([i.property({type:String})],exports.Combobox.prototype,"size",2);r([i.state()],exports.Combobox.prototype,"selected",2);r([i.state()],exports.Combobox.prototype,"inputValue",2);r([i.state()],exports.Combobox.prototype,"isOpen",2);r([i.state()],exports.Combobox.prototype,"focusedIndex",2);exports.Combobox=r([i.customElement("logosphere-combobox")],exports.Combobox);
package/dist/combobox.cjs DELETED
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./combobox-pmE7bgEL.cjs");Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>e.Combobox});
package/dist/combobox.js DELETED
@@ -1,4 +0,0 @@
1
- import { C as m } from "./combobox-BJbI-Tgi.js";
2
- export {
3
- m as Combobox
4
- };