@logosphere-ui/core 0.0.0-alpha.40 → 0.0.0-alpha.43

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 (129) hide show
  1. package/AGENTS.md +18 -62
  2. package/dist/AGENTS.md +18 -62
  3. package/dist/atoms/Checkbox/checkbox.d.ts +2 -11
  4. package/dist/atoms/FormField/formfield.d.ts +0 -2
  5. package/dist/{badge-B0Bj-HAT.js → badge-DsDxWEHx.js} +20 -20
  6. package/dist/{badge-DWkKpZTX.cjs → badge-DvaKpUHe.cjs} +1 -1
  7. package/dist/badge.cjs +1 -1
  8. package/dist/badge.js +1 -1
  9. package/dist/breadcrumb-BB61Xt0s.js +41 -0
  10. package/dist/breadcrumb-Cop-B1J7.cjs +12 -0
  11. package/dist/breadcrumb.cjs +1 -1
  12. package/dist/breadcrumb.js +1 -1
  13. package/dist/button-DRZ4sG4T.cjs +10 -0
  14. package/dist/button-Uu9oaieg.js +58 -0
  15. package/dist/button.cjs +1 -1
  16. package/dist/button.js +1 -1
  17. package/dist/{calendar-DcDT4o-U.cjs → calendar-CIgyrv3U.cjs} +1 -1
  18. package/dist/{calendar-DsriSHZ4.js → calendar-CZ_IN2TF.js} +1 -1
  19. package/dist/calendar.cjs +1 -1
  20. package/dist/calendar.js +1 -1
  21. package/dist/card-BOCW7gad.cjs +43 -0
  22. package/dist/{card-R_cKrdHK.js → card-MDwFGplY.js} +3 -3
  23. package/dist/card.cjs +1 -1
  24. package/dist/card.js +1 -1
  25. package/dist/chatbot-B-NiZIYK.cjs +183 -0
  26. package/dist/{chatbot-yup4Nz00.js → chatbot-CHgiUY4h.js} +13 -13
  27. package/dist/chatbot.cjs +1 -1
  28. package/dist/chatbot.js +1 -1
  29. package/dist/checkbox-CX0LgsWP.js +148 -0
  30. package/dist/checkbox-DpbKHANK.cjs +53 -0
  31. package/dist/checkbox.cjs +1 -1
  32. package/dist/checkbox.js +1 -1
  33. package/dist/{chip-group-CC5RBhN_.js → chip-group-BUL2H8rr.js} +1 -1
  34. package/dist/{chip-group-BqYKZKmu.cjs → chip-group-CpcjGoRm.cjs} +1 -1
  35. package/dist/chip-group.cjs +1 -1
  36. package/dist/chip-group.js +1 -1
  37. package/dist/combobox-BmIFPk8X.cjs +113 -0
  38. package/dist/{combobox-Nxhk75IH.js → combobox-jak7Ac1m.js} +8 -31
  39. package/dist/combobox.cjs +1 -1
  40. package/dist/combobox.js +1 -1
  41. package/dist/{datepicker-BExZseRQ.js → datepicker-BgysIOZI.js} +51 -58
  42. package/dist/datepicker-DOBmbxlo.cjs +85 -0
  43. package/dist/datepicker.cjs +1 -1
  44. package/dist/datepicker.js +1 -1
  45. package/dist/{drawer-DBrOkz0z.cjs → drawer-3nyjAkcS.cjs} +2 -2
  46. package/dist/{drawer-DHsESNFL.js → drawer-CE9zzllI.js} +3 -3
  47. package/dist/drawer.cjs +1 -1
  48. package/dist/drawer.js +1 -1
  49. package/dist/formfield-CRcyUMvQ.cjs +33 -0
  50. package/dist/{formfield-ss2mFweu.js → formfield-O327HYt0.js} +52 -59
  51. package/dist/formfield.cjs +1 -1
  52. package/dist/formfield.js +1 -1
  53. package/dist/index.cjs +7 -7
  54. package/dist/index.d.ts +0 -1
  55. package/dist/index.js +59 -60
  56. package/dist/index.umd.js +145 -146
  57. package/dist/input-CQS0LzF-.cjs +59 -0
  58. package/dist/input-CeF3YJk-.js +257 -0
  59. package/dist/input.cjs +1 -1
  60. package/dist/input.js +1 -1
  61. package/dist/left-menu.cjs +1 -1
  62. package/dist/left-menu.js +1 -1
  63. package/dist/{leftmenu-CMx2K5Ws.js → leftmenu-CmWvnA6L.js} +4 -4
  64. package/dist/{leftmenu-DCfTelzi.cjs → leftmenu-p9aR2QTy.cjs} +1 -1
  65. package/dist/{modal-DNjURVZy.js → modal-DUIv_yoo.js} +4 -4
  66. package/dist/modal-dUnnHe8u.cjs +84 -0
  67. package/dist/modal.cjs +1 -1
  68. package/dist/modal.js +1 -1
  69. package/dist/molecules/Input/input.d.ts +0 -17
  70. package/dist/organisms/Combobox/combobox.d.ts +0 -9
  71. package/dist/organisms/DatePicker/datepicker.d.ts +0 -2
  72. package/dist/{pagination-B91sZD5E.js → pagination-B7jknoOz.js} +61 -61
  73. package/dist/pagination-BkqbWBOn.cjs +169 -0
  74. package/dist/pagination.cjs +1 -1
  75. package/dist/pagination.js +1 -1
  76. package/dist/popover-CYDoeLKp.cjs +30 -0
  77. package/dist/{popover-CSgoaROl.js → popover-DDaG8MSj.js} +28 -28
  78. package/dist/popover.cjs +1 -1
  79. package/dist/popover.js +1 -1
  80. package/dist/{switch-Do6SCkPJ.cjs → switch-8RGGesy5.cjs} +2 -2
  81. package/dist/{switch-uYVuohJ-.js → switch-DNqPqH-R.js} +21 -25
  82. package/dist/switch.cjs +1 -1
  83. package/dist/switch.js +1 -1
  84. package/dist/tab-CDMcFHvP.cjs +41 -0
  85. package/dist/{tab-Byh4UgFB.js → tab-CuBCFGoO.js} +1 -1
  86. package/dist/tab.cjs +1 -1
  87. package/dist/tab.js +1 -1
  88. package/dist/{text-area-CHkrGi3S.js → text-area-C73JxnqH.js} +12 -16
  89. package/dist/text-area-Cprb-azV.cjs +51 -0
  90. package/dist/textarea.cjs +1 -1
  91. package/dist/textarea.js +1 -1
  92. package/dist/{timepicker-Co7lW5Rp.cjs → timepicker-CLJKWWGm.cjs} +1 -1
  93. package/dist/{timepicker-CAat7fcK.js → timepicker-DMzGYd0p.js} +2 -6
  94. package/dist/timepicker.cjs +1 -1
  95. package/dist/timepicker.js +1 -1
  96. package/dist/toast-container-6t6yEP9Y.cjs +64 -0
  97. package/dist/{toast-container-DxFwLT5S.js → toast-container-B5v74b_5.js} +4 -4
  98. package/dist/toast.cjs +1 -1
  99. package/dist/toast.js +1 -1
  100. package/dist/{tree-menu-Psek8QB9.js → tree-menu-CkOPxr-W.js} +2 -2
  101. package/dist/tree-menu-WNwZMreD.cjs +47 -0
  102. package/dist/tree-menu.cjs +1 -1
  103. package/dist/tree-menu.js +1 -1
  104. package/dist/{ui-icon-Ckljc9hg.js → ui-icon-BMJNdIOq.js} +0 -3
  105. package/dist/{ui-icon-Cd5YhUeQ.cjs → ui-icon-DIucAQC_.cjs} +3 -3
  106. package/package.json +1 -6
  107. package/dist/breadcrumb-BOuCLUJh.cjs +0 -12
  108. package/dist/breadcrumb-BeJqq-5C.js +0 -41
  109. package/dist/button-MBxtvVqn.cjs +0 -10
  110. package/dist/button-QWCkFTeJ.js +0 -58
  111. package/dist/card-BUWvno93.cjs +0 -43
  112. package/dist/chatbot-BPVC2wqM.cjs +0 -183
  113. package/dist/checkbox-BAbPDN6x.cjs +0 -53
  114. package/dist/checkbox-CTfbav6M.js +0 -152
  115. package/dist/combobox-Bah9Akr-.cjs +0 -113
  116. package/dist/datepicker-BOQ13sIm.cjs +0 -85
  117. package/dist/formfield-JXiv9mvJ.cjs +0 -33
  118. package/dist/icon.cjs +0 -1
  119. package/dist/icon.js +0 -4
  120. package/dist/input-D9lFcDHU.js +0 -278
  121. package/dist/input-Dg-jos9u.cjs +0 -60
  122. package/dist/modal-BJNCTlBX.cjs +0 -84
  123. package/dist/pagination-Cnh-o-Nq.cjs +0 -169
  124. package/dist/popover-DwDyLpQq.cjs +0 -30
  125. package/dist/shared/icons/index.d.ts +0 -1
  126. package/dist/tab-BvRVHpWs.cjs +0 -41
  127. package/dist/text-area-DvOiCcKP.cjs +0 -51
  128. package/dist/toast-container-aY1lGjRi.cjs +0 -64
  129. package/dist/tree-menu-Dqy14_m2.cjs +0 -47
@@ -1,278 +0,0 @@
1
- import { unsafeCSS as m, css as g, LitElement as f, nothing as h, html as u } from "lit";
2
- import { query as v, property as r, state as c, customElement as _ } from "lit/decorators.js";
3
- import { live as b } from "lit/directives/live.js";
4
- import "./formfield-ss2mFweu.js";
5
- import "./ui-icon-Ckljc9hg.js";
6
- const w = ":host{display:block}.input__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.input__field::placeholder{color:var(--color-tertiary)}.input__field:disabled{cursor:not-allowed}.input__field--default{height:var(--input-field-height, 16px)}.input__field--large{height:var(--input-field-height-large, 24px)}.input__clear-btn,.input__password-toggle{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.input__clear-btn:hover,.input__password-toggle:hover{color:var(--color-gray-600)}";
7
- var E = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (t, s, o, l) => {
8
- for (var n = l > 1 ? void 0 : l ? $(s, o) : s, a = t.length - 1, p; a >= 0; a--)
9
- (p = t[a]) && (n = (l ? p(s, o, n) : p(n)) || n);
10
- return l && n && E(s, o, n), n;
11
- };
12
- const y = {
13
- 0: /\d/,
14
- a: /[a-zA-Z]/,
15
- "*": /[a-zA-Z0-9]/
16
- };
17
- function d(t) {
18
- return t.split("").filter((s) => /[a-zA-Z0-9]/.test(s)).join("");
19
- }
20
- function k(t, s) {
21
- let o = 0, l = "";
22
- for (let n = 0; n < s.length && !(o >= t.length); n++) {
23
- const a = s[n], p = y[a];
24
- if (p) {
25
- for (; o < t.length && !p.test(t[o]); ) o++;
26
- o < t.length && (l += t[o++]);
27
- } else
28
- l += a;
29
- }
30
- return l;
31
- }
32
- function P(t, s, o) {
33
- let l = 0;
34
- for (let n = 0; n < t.length; n++)
35
- if (y[s[n]] && (l++, l === o))
36
- return n + 1;
37
- return t.length;
38
- }
39
- let e = class extends f {
40
- constructor() {
41
- super(...arguments), this.value = "", this.type = "text", this.placeholder = "", this.name = "", this.autocomplete = "", this.pattern = "", this.size = "default", this.variant = "default", this.label = "", this.helper = "", this.error = "", this.required = !1, this.disabled = !1, this.readonly = !1, this.mask = "", this.showPasswordToggle = !0, this.suppressNativeValidation = !1, this.errorDisplay = "always", this._internalError = "", this._showPassword = !1, this._invalid = !1, this.handleInput = (t) => {
42
- const s = t.target;
43
- if (this.mask) {
44
- const o = s.selectionStart ?? s.value.length, l = d(s.value.slice(0, o)).length, n = d(s.value), a = k(n, this.mask);
45
- s.value = a, this.value = a;
46
- const p = P(a, this.mask, l);
47
- requestAnimationFrame(() => s.setSelectionRange(p, p));
48
- } else
49
- this.value = s.value;
50
- this._internalError && (this._internalError = "", this._inputElement.setCustomValidity("")), this._invalid = !1, this.dispatchEvent(new CustomEvent("input", {
51
- bubbles: !0,
52
- composed: !0,
53
- detail: {
54
- value: this.value,
55
- rawValue: this.mask ? d(this.value) : this.value,
56
- originalEvent: t
57
- }
58
- }));
59
- }, this.handleChange = (t) => {
60
- const s = t.target;
61
- this.value = s.value;
62
- const o = s.checkValidity();
63
- this._invalid = !o, !o && !this.suppressNativeValidation && (this._internalError = s.validationMessage), this.dispatchEvent(new CustomEvent("change", {
64
- bubbles: !0,
65
- composed: !0,
66
- detail: { value: this.value, originalEvent: t }
67
- })), this.dispatchEvent(new CustomEvent("lgsChange", {
68
- bubbles: !0,
69
- composed: !0,
70
- detail: { value: this.value }
71
- }));
72
- }, this.handleBlur = () => {
73
- this._inputElement && (this._invalid = !this._inputElement.checkValidity());
74
- }, this.handleKeyDown = (t) => {
75
- this.dispatchEvent(new CustomEvent("keydown", {
76
- bubbles: !0,
77
- composed: !0,
78
- detail: { key: t.key, originalEvent: t }
79
- }));
80
- }, this.handleKeyUp = (t) => {
81
- this.dispatchEvent(new CustomEvent("keyup", {
82
- bubbles: !0,
83
- composed: !0,
84
- detail: { key: t.key, originalEvent: t }
85
- }));
86
- }, this.handleClear = () => {
87
- this.value = "", this._invalid = !1, this._inputElement && (this._inputElement.value = ""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", {
88
- bubbles: !0,
89
- composed: !0,
90
- detail: { value: "", originalEvent: null }
91
- }));
92
- }, this.handlePasswordToggle = () => {
93
- this.disabled || (this._showPassword = !this._showPassword, this._inputElement?.focus());
94
- };
95
- }
96
- get inputElement() {
97
- return this._inputElement;
98
- }
99
- focus() {
100
- this._inputElement?.focus();
101
- }
102
- blur() {
103
- this._inputElement?.blur();
104
- }
105
- select() {
106
- this._inputElement?.select();
107
- }
108
- setSelectionRange(t, s, o) {
109
- this._inputElement?.setSelectionRange(t, s, o);
110
- }
111
- checkValidity() {
112
- return this._inputElement?.checkValidity() ?? !0;
113
- }
114
- reportValidity() {
115
- return this._inputElement?.reportValidity() ?? !0;
116
- }
117
- setCustomValidity(t) {
118
- this._inputElement?.setCustomValidity(t), this._internalError = t, this.requestUpdate();
119
- }
120
- willUpdate(t) {
121
- t.has("type") && this.type !== "password" && this._showPassword && (this._showPassword = !1), t.has("showPasswordToggle") && !this.showPasswordToggle && this._showPassword && (this._showPassword = !1);
122
- }
123
- /** Mask varsa ve placeholder verilmemişse mask pattern'ını placeholder olarak göster */
124
- get _effectivePlaceholder() {
125
- return this.placeholder ? this.placeholder : this.mask ? this.mask.replace(/[0a*]/g, "_") : "";
126
- }
127
- render() {
128
- const t = this.error || this._internalError, s = this.errorDisplay === "on-invalid" ? this._invalid ? t : "" : t, o = !!this.value && !this.disabled && !this.readonly, l = this.type === "password", n = l && this._showPassword ? "text" : this.type, a = `input__field input__field--${this.size}`;
129
- return u`
130
- <logosphere-formfield
131
- .label=${this.label}
132
- .helper=${this.helper}
133
- .error=${s}
134
- .required=${this.required}
135
- .disabled=${this.disabled}
136
- .readonly=${this.readonly}
137
- .placeholder=${this._effectivePlaceholder}
138
- .size=${this.size}
139
- .variant=${this.variant}
140
- >
141
- <slot name="prefix" slot="prefix"></slot>
142
- <input
143
- class="${a}"
144
- type=${n}
145
- .value=${b(this.value)}
146
- placeholder=${this._effectivePlaceholder || h}
147
- name=${this.name || h}
148
- autocomplete=${this.autocomplete || h}
149
- ?required=${this.required}
150
- ?disabled=${this.disabled}
151
- ?readonly=${this.readonly}
152
- minlength=${this.minlength ?? h}
153
- maxlength=${this.maxlength ?? h}
154
- pattern=${this.pattern || h}
155
- min=${this.min ?? h}
156
- max=${this.max ?? h}
157
- step=${this.step ?? h}
158
- @input=${this.handleInput}
159
- @change=${this.handleChange}
160
- @blur=${this.handleBlur}
161
- @keydown=${this.handleKeyDown}
162
- @keyup=${this.handleKeyUp}
163
- />
164
- ${o ? u`
165
- <button
166
- type="button"
167
- slot="clear"
168
- class="input__clear-btn"
169
- @click=${this.handleClear}
170
- tabindex="-1"
171
- >
172
- <ui-icon name="uil-times" size="14"></ui-icon>
173
- </button>
174
- ` : h}
175
- ${l && this.showPasswordToggle ? u`
176
- <button
177
- type="button"
178
- slot="suffix"
179
- class="input__password-toggle"
180
- aria-label=${this._showPassword ? "Şifreyi gizle" : "Şifreyi göster"}
181
- @click=${this.handlePasswordToggle}
182
- >
183
- <ui-icon name=${this._showPassword ? "uil-eye-slash" : "uil-eye"} size="16"></ui-icon>
184
- </button>
185
- ` : h}
186
- <slot name="suffix" slot="suffix"></slot>
187
- </logosphere-formfield>
188
- `;
189
- }
190
- };
191
- e.styles = [g`${m(w)}`];
192
- i([
193
- v("input")
194
- ], e.prototype, "_inputElement", 2);
195
- i([
196
- r({ type: String })
197
- ], e.prototype, "value", 2);
198
- i([
199
- r({ type: String })
200
- ], e.prototype, "type", 2);
201
- i([
202
- r({ type: String })
203
- ], e.prototype, "placeholder", 2);
204
- i([
205
- r({ type: String })
206
- ], e.prototype, "name", 2);
207
- i([
208
- r({ type: String })
209
- ], e.prototype, "autocomplete", 2);
210
- i([
211
- r({ type: Number })
212
- ], e.prototype, "minlength", 2);
213
- i([
214
- r({ type: Number })
215
- ], e.prototype, "maxlength", 2);
216
- i([
217
- r({ type: String })
218
- ], e.prototype, "pattern", 2);
219
- i([
220
- r({ type: Number })
221
- ], e.prototype, "min", 2);
222
- i([
223
- r({ type: Number })
224
- ], e.prototype, "max", 2);
225
- i([
226
- r({ type: Number })
227
- ], e.prototype, "step", 2);
228
- i([
229
- r({ type: String })
230
- ], e.prototype, "size", 2);
231
- i([
232
- r({ type: String })
233
- ], e.prototype, "variant", 2);
234
- i([
235
- r({ type: String })
236
- ], e.prototype, "label", 2);
237
- i([
238
- r({ type: String })
239
- ], e.prototype, "helper", 2);
240
- i([
241
- r({ type: String })
242
- ], e.prototype, "error", 2);
243
- i([
244
- r({ type: Boolean })
245
- ], e.prototype, "required", 2);
246
- i([
247
- r({ type: Boolean })
248
- ], e.prototype, "disabled", 2);
249
- i([
250
- r({ type: Boolean })
251
- ], e.prototype, "readonly", 2);
252
- i([
253
- r({ type: String })
254
- ], e.prototype, "mask", 2);
255
- i([
256
- r({ type: Boolean, attribute: "show-password-toggle" })
257
- ], e.prototype, "showPasswordToggle", 2);
258
- i([
259
- r({ type: Boolean, attribute: "suppress-native-validation" })
260
- ], e.prototype, "suppressNativeValidation", 2);
261
- i([
262
- r({ type: String, attribute: "error-display" })
263
- ], e.prototype, "errorDisplay", 2);
264
- i([
265
- c()
266
- ], e.prototype, "_internalError", 2);
267
- i([
268
- c()
269
- ], e.prototype, "_showPassword", 2);
270
- i([
271
- c()
272
- ], e.prototype, "_invalid", 2);
273
- e = i([
274
- _("logosphere-input")
275
- ], e);
276
- export {
277
- e as L
278
- };
@@ -1,60 +0,0 @@
1
- "use strict";const n=require("lit"),s=require("lit/decorators.js"),y=require("lit/directives/live.js");require("./formfield-JXiv9mvJ.cjs");require("./ui-icon-Cd5YhUeQ.cjs");const g=":host{display:block}.input__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.input__field::placeholder{color:var(--color-tertiary)}.input__field:disabled{cursor:not-allowed}.input__field--default{height:var(--input-field-height, 16px)}.input__field--large{height:var(--input-field-height-large, 24px)}.input__clear-btn,.input__password-toggle{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.input__clear-btn:hover,.input__password-toggle:hover{color:var(--color-gray-600)}";var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,i=(p,t,e,o)=>{for(var r=o>1?void 0:o?m(t,e):t,a=p.length-1,l;a>=0;a--)(l=p[a])&&(r=(o?l(t,e,r):l(r))||r);return o&&r&&c(t,e,r),r};const d={0:/\d/,a:/[a-zA-Z]/,"*":/[a-zA-Z0-9]/};function h(p){return p.split("").filter(t=>/[a-zA-Z0-9]/.test(t)).join("")}function v(p,t){let e=0,o="";for(let r=0;r<t.length&&!(e>=p.length);r++){const a=t[r],l=d[a];if(l){for(;e<p.length&&!l.test(p[e]);)e++;e<p.length&&(o+=p[e++])}else o+=a}return o}function f(p,t,e){let o=0;for(let r=0;r<p.length;r++)if(d[t[r]]&&(o++,o===e))return r+1;return p.length}exports.LogosphereInput=class extends n.LitElement{constructor(){super(...arguments),this.value="",this.type="text",this.placeholder="",this.name="",this.autocomplete="",this.pattern="",this.size="default",this.variant="default",this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this.mask="",this.showPasswordToggle=!0,this.suppressNativeValidation=!1,this.errorDisplay="always",this._internalError="",this._showPassword=!1,this._invalid=!1,this.handleInput=t=>{const e=t.target;if(this.mask){const o=e.selectionStart??e.value.length,r=h(e.value.slice(0,o)).length,a=h(e.value),l=v(a,this.mask);e.value=l,this.value=l;const u=f(l,this.mask,r);requestAnimationFrame(()=>e.setSelectionRange(u,u))}else this.value=e.value;this._internalError&&(this._internalError="",this._inputElement.setCustomValidity("")),this._invalid=!1,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,rawValue:this.mask?h(this.value):this.value,originalEvent:t}}))},this.handleChange=t=>{const e=t.target;this.value=e.value;const o=e.checkValidity();this._invalid=!o,!o&&!this.suppressNativeValidation&&(this._internalError=e.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:t}})),this.dispatchEvent(new CustomEvent("lgsChange",{bubbles:!0,composed:!0,detail:{value:this.value}}))},this.handleBlur=()=>{this._inputElement&&(this._invalid=!this._inputElement.checkValidity())},this.handleKeyDown=t=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:t.key,originalEvent:t}}))},this.handleKeyUp=t=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:t.key,originalEvent:t}}))},this.handleClear=()=>{this.value="",this._invalid=!1,this._inputElement&&(this._inputElement.value=""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))},this.handlePasswordToggle=()=>{this.disabled||(this._showPassword=!this._showPassword,this._inputElement?.focus())}}get inputElement(){return this._inputElement}focus(){this._inputElement?.focus()}blur(){this._inputElement?.blur()}select(){this._inputElement?.select()}setSelectionRange(t,e,o){this._inputElement?.setSelectionRange(t,e,o)}checkValidity(){return this._inputElement?.checkValidity()??!0}reportValidity(){return this._inputElement?.reportValidity()??!0}setCustomValidity(t){this._inputElement?.setCustomValidity(t),this._internalError=t,this.requestUpdate()}willUpdate(t){t.has("type")&&this.type!=="password"&&this._showPassword&&(this._showPassword=!1),t.has("showPasswordToggle")&&!this.showPasswordToggle&&this._showPassword&&(this._showPassword=!1)}get _effectivePlaceholder(){return this.placeholder?this.placeholder:this.mask?this.mask.replace(/[0a*]/g,"_"):""}render(){const t=this.error||this._internalError,e=this.errorDisplay==="on-invalid"?this._invalid?t:"":t,o=!!this.value&&!this.disabled&&!this.readonly,r=this.type==="password",a=r&&this._showPassword?"text":this.type,l=`input__field input__field--${this.size}`;return n.html`
2
- <logosphere-formfield
3
- .label=${this.label}
4
- .helper=${this.helper}
5
- .error=${e}
6
- .required=${this.required}
7
- .disabled=${this.disabled}
8
- .readonly=${this.readonly}
9
- .placeholder=${this._effectivePlaceholder}
10
- .size=${this.size}
11
- .variant=${this.variant}
12
- >
13
- <slot name="prefix" slot="prefix"></slot>
14
- <input
15
- class="${l}"
16
- type=${a}
17
- .value=${y.live(this.value)}
18
- placeholder=${this._effectivePlaceholder||n.nothing}
19
- name=${this.name||n.nothing}
20
- autocomplete=${this.autocomplete||n.nothing}
21
- ?required=${this.required}
22
- ?disabled=${this.disabled}
23
- ?readonly=${this.readonly}
24
- minlength=${this.minlength??n.nothing}
25
- maxlength=${this.maxlength??n.nothing}
26
- pattern=${this.pattern||n.nothing}
27
- min=${this.min??n.nothing}
28
- max=${this.max??n.nothing}
29
- step=${this.step??n.nothing}
30
- @input=${this.handleInput}
31
- @change=${this.handleChange}
32
- @blur=${this.handleBlur}
33
- @keydown=${this.handleKeyDown}
34
- @keyup=${this.handleKeyUp}
35
- />
36
- ${o?n.html`
37
- <button
38
- type="button"
39
- slot="clear"
40
- class="input__clear-btn"
41
- @click=${this.handleClear}
42
- tabindex="-1"
43
- >
44
- <ui-icon name="uil-times" size="14"></ui-icon>
45
- </button>
46
- `:n.nothing}
47
- ${r&&this.showPasswordToggle?n.html`
48
- <button
49
- type="button"
50
- slot="suffix"
51
- class="input__password-toggle"
52
- aria-label=${this._showPassword?"Şifreyi gizle":"Şifreyi göster"}
53
- @click=${this.handlePasswordToggle}
54
- >
55
- <ui-icon name=${this._showPassword?"uil-eye-slash":"uil-eye"} size="16"></ui-icon>
56
- </button>
57
- `:n.nothing}
58
- <slot name="suffix" slot="suffix"></slot>
59
- </logosphere-formfield>
60
- `}};exports.LogosphereInput.styles=[n.css`${n.unsafeCSS(g)}`];i([s.query("input")],exports.LogosphereInput.prototype,"_inputElement",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"value",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"type",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"placeholder",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"name",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"autocomplete",2);i([s.property({type:Number})],exports.LogosphereInput.prototype,"minlength",2);i([s.property({type:Number})],exports.LogosphereInput.prototype,"maxlength",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"pattern",2);i([s.property({type:Number})],exports.LogosphereInput.prototype,"min",2);i([s.property({type:Number})],exports.LogosphereInput.prototype,"max",2);i([s.property({type:Number})],exports.LogosphereInput.prototype,"step",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"size",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"variant",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"label",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"helper",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"error",2);i([s.property({type:Boolean})],exports.LogosphereInput.prototype,"required",2);i([s.property({type:Boolean})],exports.LogosphereInput.prototype,"disabled",2);i([s.property({type:Boolean})],exports.LogosphereInput.prototype,"readonly",2);i([s.property({type:String})],exports.LogosphereInput.prototype,"mask",2);i([s.property({type:Boolean,attribute:"show-password-toggle"})],exports.LogosphereInput.prototype,"showPasswordToggle",2);i([s.property({type:Boolean,attribute:"suppress-native-validation"})],exports.LogosphereInput.prototype,"suppressNativeValidation",2);i([s.property({type:String,attribute:"error-display"})],exports.LogosphereInput.prototype,"errorDisplay",2);i([s.state()],exports.LogosphereInput.prototype,"_internalError",2);i([s.state()],exports.LogosphereInput.prototype,"_showPassword",2);i([s.state()],exports.LogosphereInput.prototype,"_invalid",2);exports.LogosphereInput=i([s.customElement("logosphere-input")],exports.LogosphereInput);
@@ -1,84 +0,0 @@
1
- "use strict";const t=require("lit"),l=require("lit/decorators.js");require("./ui-icon-Cd5YhUeQ.cjs");require("./button-MBxtvVqn.cjs");const h=':host{display:block}.modal__backdrop{position:fixed;inset:0;z-index:var(--z-index-modal-backdrop, 1050);display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:var(--spacing-4, 16px);font-family:var(--font-family-base, "Inter", sans-serif);animation:modal-backdrop-fade-in .15s ease-out}@keyframes modal-backdrop-fade-in{0%{opacity:0}to{opacity:1}}.modal__dialog{width:100%;max-width:500px;max-height:calc(100vh - 48px);border-radius:var(--radius-lg, 12px);border:1px solid var(--color-border, #e0e0e0);overflow:hidden;box-shadow:0 8px 8px -4px #0000000a,0 20px 24px -4px #0000001a;background-color:var(--color-body-bg, white);display:flex;flex-direction:column;animation:modal-dialog-scale-in .15s ease-out}@keyframes modal-dialog-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal__dialog:focus{outline:none}.modal__dialog--sm{max-width:400px}.modal__dialog--md{max-width:500px}.modal__dialog--lg{max-width:720px}.modal__dialog--xl{max-width:900px}.modal__dialog--full{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px)}.modal__header{padding:var(--spacing-4, 16px) var(--spacing-2, 8px);border-bottom:1px solid var(--color-border, #e0e0e0);display:flex;align-items:center;flex-shrink:0}.modal__header-content{flex:1;min-width:0;display:flex;align-items:center;gap:var(--spacing-2, 8px);padding:0 var(--spacing-2, 8px)}.modal__header-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-body-text, #2b2b2b)}.modal__title{font-size:var(--font-size-md, 16px);font-weight:var(--font-weight-semibold, 600);color:var(--color-emphasis, black);margin:0;line-height:1.2;letter-spacing:-.16px}.modal__header-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:var(--spacing-2, 8px);border:none;background:transparent;border-radius:var(--radius-base, 8px);cursor:pointer;color:var(--color-secondary, #565656);transition:background-color .15s ease,color .15s ease;flex-shrink:0}.modal__header-btn:hover{background-color:var(--color-body-bg-hover, #f5f5f5);color:var(--color-body-text, #2b2b2b)}.modal__header-btn:focus-visible{outline:2px solid var(--color-primary, #c8102e);outline-offset:2px}.modal__body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px);overflow-y:auto;flex:1;min-height:0;font-size:var(--font-size-sm, 14px);line-height:20px;color:var(--color-body-text, #2b2b2b);letter-spacing:-.14px}.modal__body::-webkit-scrollbar{width:6px}.modal__body::-webkit-scrollbar-track{background:transparent}.modal__body::-webkit-scrollbar-thumb{background-color:var(--color-border, #e0e0e0);border-radius:3px}.modal__body::-webkit-scrollbar-thumb:hover{background-color:var(--color-secondary, #565656)}.modal__footer{padding:var(--spacing-4, 16px) var(--spacing-6, 24px);display:flex;flex-wrap:wrap;gap:var(--spacing-2, 8px);justify-content:flex-end;align-items:center;border-top:1px solid var(--color-border, #e0e0e0);flex-shrink:0}@media(max-width:576px){.modal__backdrop{padding:var(--spacing-3, 12px)}.modal__dialog{max-height:calc(100vh - 24px)}.modal__dialog--sm,.modal__dialog--md,.modal__dialog--lg,.modal__dialog--xl{max-width:100%}.modal__footer{flex-direction:column}.modal__footer ::slotted(*){width:100%}}';var m=Object.defineProperty,a=(c,e,s,r)=>{for(var i=void 0,n=c.length-1,p;n>=0;n--)(p=c[n])&&(i=p(e,s,i)||i);return i&&m(e,s,i),i};const d=class d extends t.LitElement{constructor(){super(...arguments),this.open=!1,this.title="",this.size="md",this.closeOnEsc=!0,this.closeOnBackdrop=!0,this.showBack=!1,this.showClose=!0,this.showIcon=!1,this.footer=!0,this.okLabel="Tamam",this.cancelLabel="İptal",this.showCancel=!0,this.hasFooterSlot=!1,this.hasHeaderSlot=!1,this.previousActiveElement=null,this.focusableElements=[],this.onKeyDown=e=>{if(this.open){if(this.closeOnEsc&&e.key==="Escape"){e.preventDefault(),this.setOpen(!1);return}e.key==="Tab"&&this.handleTabKey(e)}},this.onBackdropClick=e=>{if(!this.closeOnBackdrop)return;const s=this.shadowRoot?.querySelector(".__modal-content");s&&!e.composedPath().includes(s)&&this.setOpen(!1)},this.handleOk=()=>{this.onOk?.(),this.dispatchEvent(new CustomEvent("ok",{bubbles:!0,composed:!0})),this.setOpen(!1)},this.handleCancel=()=>{this.onCancel?.(),this.dispatchEvent(new CustomEvent("cancel",{bubbles:!0,composed:!0})),this.setOpen(!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.onKeyDown),this.unlockBodyScroll()}openModal(){this.setOpen(!0)}closeModal(){this.setOpen(!1)}setOpen(e){this.open!==e&&(this.open=e,e?(this.lockBodyScroll(),this.previousActiveElement=document.activeElement,requestAnimationFrame(()=>{this.trapFocus()})):(this.unlockBodyScroll(),this.previousActiveElement?.focus()),this.dispatchEvent(new CustomEvent(e?"modal-open":"modal-close",{bubbles:!0,composed:!0})))}lockBodyScroll(){document.body.style.overflow="hidden",document.body.style.paddingRight=`${window.innerWidth-document.documentElement.clientWidth}px`}unlockBodyScroll(){document.body.style.overflow="",document.body.style.paddingRight=""}trapFocus(){if(!this.dialogElement)return;const e=["button:not([disabled])","[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");this.focusableElements=Array.from(this.dialogElement.querySelectorAll(e));const s=this.querySelectorAll(e);this.focusableElements.push(...Array.from(s)),this.focusableElements.length>0?this.focusableElements[0].focus():this.dialogElement.focus()}handleTabKey(e){if(this.focusableElements.length===0){e.preventDefault();return}const s=this.focusableElements[0],r=this.focusableElements[this.focusableElements.length-1];e.shiftKey?(document.activeElement===s||this.shadowRoot?.activeElement===s)&&(e.preventDefault(),r.focus()):(document.activeElement===r||this.shadowRoot?.activeElement===r)&&(e.preventDefault(),s.focus())}checkSlotContent(){this.hasFooterSlot=this.querySelector('[slot="footer"]')!==null,this.hasHeaderSlot=this.querySelector('[slot="header"]')!==null}updated(e){super.updated(e),this.checkSlotContent(),e.has("open")&&this.open&&requestAnimationFrame(()=>{this.trapFocus()})}get modalId(){return`modal-${this.title?.replace(/\s+/g,"-").toLowerCase()||"dialog"}`}get sizeClass(){const e={sm:"modal__dialog--sm",md:"modal__dialog--md",lg:"modal__dialog--lg",xl:"modal__dialog--xl",full:"modal__dialog--full"};return e[this.size]||e.md}get showHeader(){return this.showBack||this.showClose||this.title||this.hasHeaderSlot||this.showIcon}render(){if(!this.open)return t.nothing;const e=`${this.modalId}-title`,s=`${this.modalId}-desc`;return t.html`
2
- <div
3
- class="modal__backdrop"
4
- role="presentation"
5
- aria-hidden="false"
6
- @mousedown=${this.onBackdropClick}
7
- >
8
- <div
9
- class="__modal-content modal__dialog ${this.sizeClass}"
10
- role="dialog"
11
- aria-modal="true"
12
- aria-labelledby=${this.title?e:t.nothing}
13
- aria-describedby=${s}
14
- tabindex="-1"
15
- >
16
- ${this.showHeader?t.html`
17
- <div class="modal__header">
18
- ${this.showBack?t.html`
19
- <button
20
- type="button"
21
- class="modal__header-btn"
22
- @click=${()=>this.setOpen(!1)}
23
- aria-label="Geri"
24
- >
25
- <ui-icon name="uil-arrow-left" size="16"></ui-icon>
26
- </button>
27
- `:t.nothing}
28
- <div class="modal__header-content">
29
- ${this.showIcon?t.html`
30
- <span class="modal__header-icon">
31
- <slot name="icon">
32
- <ui-icon name="uil-exclamation-triangle" size="16"></ui-icon>
33
- </slot>
34
- </span>
35
- `:t.nothing}
36
- ${this.title?t.html`<h2 id=${e} class="modal__title">${this.title}</h2>`:t.nothing}
37
- <slot name="header"></slot>
38
- </div>
39
- ${this.showClose?t.html`
40
- <button
41
- type="button"
42
- class="modal__header-btn modal__close-btn"
43
- @click=${()=>this.setOpen(!1)}
44
- aria-label="Kapat"
45
- >
46
- <ui-icon name="uil-times" size="16"></ui-icon>
47
- </button>
48
- `:t.nothing}
49
- </div>
50
- `:t.nothing}
51
-
52
- <div id=${s} class="modal__body">
53
- <slot></slot>
54
- </div>
55
-
56
- ${this.renderFooter()}
57
- </div>
58
- </div>
59
- `}renderFooter(){return this.footer?this.hasFooterSlot?t.html`
60
- <div class="modal__footer">
61
- <slot name="footer"></slot>
62
- </div>
63
- `:t.html`
64
- <div class="modal__footer">
65
- ${this.showCancel?t.html`
66
- <logosphere-button
67
- variant="outline"
68
- theme="primary"
69
- size="md"
70
- @click=${this.handleCancel}
71
- >
72
- ${this.cancelLabel}
73
- </logosphere-button>
74
- `:t.nothing}
75
- <logosphere-button
76
- variant="solid"
77
- theme="primary"
78
- size="md"
79
- @click=${this.handleOk}
80
- >
81
- ${this.okLabel}
82
- </logosphere-button>
83
- </div>
84
- `:t.nothing}};d.styles=[t.css`${t.unsafeCSS(h)}`];let o=d;a([l.property({type:Boolean,reflect:!0})],o.prototype,"open");a([l.property({type:String})],o.prototype,"title");a([l.property({type:String})],o.prototype,"size");a([l.property({type:Boolean})],o.prototype,"closeOnEsc");a([l.property({type:Boolean})],o.prototype,"closeOnBackdrop");a([l.property({type:Boolean})],o.prototype,"showBack");a([l.property({type:Boolean})],o.prototype,"showClose");a([l.property({type:Boolean})],o.prototype,"showIcon");a([l.property({type:Boolean})],o.prototype,"footer");a([l.property({type:String})],o.prototype,"okLabel");a([l.property({type:String})],o.prototype,"cancelLabel");a([l.property({type:Boolean})],o.prototype,"showCancel");a([l.property({attribute:!1})],o.prototype,"onOk");a([l.property({attribute:!1})],o.prototype,"onCancel");a([l.state()],o.prototype,"hasFooterSlot");a([l.state()],o.prototype,"hasHeaderSlot");a([l.query(".modal__dialog")],o.prototype,"dialogElement");customElements.get("logosphere-modal")||customElements.define("logosphere-modal",o);exports.Modal=o;
@@ -1,169 +0,0 @@
1
- "use strict";const e=require("lit"),n=require("lit/decorators.js"),h=require("lit/directives/live.js");require("./ui-icon-Cd5YhUeQ.cjs");require("./combobox-Bah9Akr-.cjs");const u=":host{display:block;width:100%}.pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--pagination-padding, var(--spacing-4) var(--spacing-6));background-color:var(--pagination-bg, var(--color-body-bg));border-top:1px solid var(--color-border);font-family:var(--font-family-base);gap:var(--spacing-4)}.pagination--justify-end{justify-content:flex-end}.pagination--justify-start{justify-content:flex-start}.pagination--justify-center{justify-content:center}.pagination__nav{display:flex;align-items:center;gap:var(--spacing-1)}.pagination__nav-group{display:flex;align-items:center}.pagination__btn{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);border:none;background:transparent;border-radius:var(--radius-base);cursor:pointer;color:var(--pagination-color, var(--color-secondary));transition:background-color .15s ease,color .15s ease,opacity .15s ease}.pagination__btn:hover:not(:disabled){background-color:var(--pagination-item-bg-hover, var(--color-body-bg-hover))}.pagination__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pagination__btn:disabled{opacity:.4;cursor:not-allowed}.pagination__btn--icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:var(--spacing-2);border:1px solid var(--color-border);background-color:var(--pagination-item-bg, var(--color-body-bg));border-radius:var(--radius-base);cursor:pointer;color:var(--pagination-color, var(--color-secondary));transition:background-color .15s ease,border-color .15s ease,opacity .15s ease}.pagination__btn--icon:hover:not(:disabled){background-color:var(--pagination-item-bg-hover, var(--color-body-bg-hover));border-color:var(--color-border-hover)}.pagination__btn--icon:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pagination__btn--icon:disabled{opacity:.4;cursor:not-allowed}.pagination__btn--text{display:flex;align-items:center;justify-content:center;gap:var(--spacing-1);height:32px;min-width:100px;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);background-color:var(--pagination-item-bg, var(--color-body-bg));border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--pagination-color, var(--color-secondary));cursor:pointer;transition:all .15s ease}.pagination__btn--text:hover:not(:disabled){background-color:var(--pagination-item-bg-hover, var(--color-body-bg-hover));border-color:var(--color-border-hover)}.pagination__btn--text:disabled{color:var(--pagination-color-disabled, var(--color-secondary-disabled));cursor:not-allowed}.pagination__btn--number{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);background-color:var(--pagination-item-bg, var(--color-body-bg));border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--pagination-color, var(--color-secondary));cursor:pointer;transition:all .15s ease}.pagination__btn--number:hover:not(:disabled):not(.pagination__btn--active){background-color:var(--pagination-item-bg-hover, var(--color-body-bg-hover))}.pagination__btn--active{background-color:var(--pagination-active-bg, var(--color-secondary));border-color:var(--pagination-active-bg, var(--color-secondary));color:var(--pagination-active-color, white);font-weight:var(--font-weight-semibold)}.pagination__btn--ellipsis{border:none;background:transparent;cursor:default;min-width:32px}.pagination__btn--ellipsis:hover{background:transparent}.pagination__input-container{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px}.pagination__input{width:100%;height:100%;min-width:32px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--pagination-item-bg, var(--color-body-bg));font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-body-text);text-align:center;outline:none;transition:border-color .15s ease}.pagination__input:focus{border-color:var(--color-primary)}.pagination__input::-webkit-outer-spin-button,.pagination__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pagination__input[type=number]{-moz-appearance:textfield}.pagination__separator{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-tertiary);line-height:18px;letter-spacing:-.12px;margin-right:var(--spacing-1)}.pagination__info{display:flex;align-items:center;gap:var(--spacing-2)}.pagination__page-info{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);line-height:18px;letter-spacing:-.12px}.pagination__page-info-text{color:var(--pagination-color, var(--color-secondary))}.pagination__page-info-separator{color:var(--color-tertiary)}.pagination__total{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);line-height:18px;letter-spacing:-.12px}.pagination__total-separator{color:var(--color-tertiary)}.pagination__total-text{color:var(--pagination-color, var(--color-secondary))}.pagination__page-size{display:flex;align-items:center}@media(max-width:768px){.pagination{flex-wrap:wrap;gap:var(--spacing-3);padding:var(--pagination-padding, var(--spacing-3) var(--spacing-4))}.pagination__btn--text{min-width:80px;font-size:var(--font-size-xs)}}@media(max-width:480px){.pagination__nav,.pagination__info{flex-wrap:wrap;justify-content:center}}";var b=Object.defineProperty,o=(d,t,a,r)=>{for(var s=void 0,p=d.length-1,l;p>=0;p--)(l=d[p])&&(s=l(t,a,s)||s);return s&&b(t,a,s),s};const c=class c extends e.LitElement{constructor(){super(...arguments),this.variant="default",this.page=1,this.pageSize=25,this.total=0,this.pageSizeOptions=[10,25,50,100],this.showPageSize=!0,this.showTotal=!0,this.disabled=!1,this.prevLabel="Önceki",this.nextLabel="Sonraki",this.pageLabel="Sayfa",this.perPageLabel="/ sayfa",this.totalLabel="kayıt",this.inputValue="1",this.goFirst=()=>{this.canGoPrev&&this.goToPage(1)},this.goPrev=()=>{this.canGoPrev&&this.goToPage(this.page-1)},this.goNext=()=>{this.canGoNext&&this.goToPage(this.page+1)},this.goLast=()=>{this.canGoNext&&this.goToPage(this.totalPages)},this.handleInputChange=t=>{const a=t.target;this.inputValue=a.value},this.handleInputBlur=()=>{const t=parseInt(this.inputValue,10);isNaN(t)?this.inputValue=String(this.page):this.goToPage(t)},this.handleInputKeydown=t=>{t.key==="Enter"&&t.target.blur()},this.handlePageSizeChange=t=>{const a=t.detail?.value?.[0];if(a){const r=a.value;r!==this.pageSize&&(this.pageSize=r,this.page=1,this.emitPageChange())}}}get totalPages(){return Math.max(1,Math.ceil(this.total/this.pageSize))}get canGoPrev(){return this.page>1&&!this.disabled}get canGoNext(){return this.page<this.totalPages&&!this.disabled}firstUpdated(){this.updateComboboxSelection()}updated(t){super.updated(t),t.has("page")&&(this.inputValue=String(this.page)),t.has("pageSize")&&this.updateComboboxSelection()}updateComboboxSelection(){this._combobox&&this.showPageSize&&this._combobox.setSelected(this.selectedPageSizeItem)}emitPageChange(){this.dispatchEvent(new CustomEvent("page-change",{bubbles:!0,composed:!0,detail:{page:this.page,pageSize:this.pageSize,totalPages:this.totalPages}}))}goToPage(t){const a=Math.max(1,Math.min(t,this.totalPages));a!==this.page&&(this.page=a,this.emitPageChange())}get pageSizeItems(){return this.pageSizeOptions.map(t=>({label:`${t} ${this.perPageLabel}`,value:t}))}get selectedPageSizeItem(){return[{label:`${this.pageSize} ${this.perPageLabel}`,value:this.pageSize}]}getPageNumbers(){const t=[],a=this.totalPages,r=this.page,s=1;if(a<=7)for(let p=1;p<=a;p++)t.push(p);else{t.push(1),r>3&&t.push("ellipsis");const p=Math.max(2,r-s),l=Math.min(a-1,r+s);for(let g=p;g<=l;g++)t.includes(g)||t.push(g);r<a-2&&t.push("ellipsis"),t.includes(a)||t.push(a)}return t}renderNavButtons(t=!1){const a=t?"pagination__btn--icon":"pagination__btn";return e.html`
2
- <div class="pagination__nav-group">
3
- <button
4
- type="button"
5
- class="${a}"
6
- ?disabled=${!this.canGoPrev}
7
- @click=${this.goFirst}
8
- aria-label="İlk sayfa"
9
- >
10
- <ui-icon name="uil-angle-double-left" size="16"></ui-icon>
11
- </button>
12
- <button
13
- type="button"
14
- class="${a}"
15
- ?disabled=${!this.canGoPrev}
16
- @click=${this.goPrev}
17
- aria-label="Önceki sayfa"
18
- >
19
- <ui-icon name="uil-angle-left" size="16"></ui-icon>
20
- </button>
21
- </div>
22
- `}renderNavButtonsAfter(t=!1){const a=t?"pagination__btn--icon":"pagination__btn";return e.html`
23
- <div class="pagination__nav-group">
24
- <button
25
- type="button"
26
- class="${a}"
27
- ?disabled=${!this.canGoNext}
28
- @click=${this.goNext}
29
- aria-label="Sonraki sayfa"
30
- >
31
- <ui-icon name="uil-angle-right" size="16"></ui-icon>
32
- </button>
33
- <button
34
- type="button"
35
- class="${a}"
36
- ?disabled=${!this.canGoNext}
37
- @click=${this.goLast}
38
- aria-label="Son sayfa"
39
- >
40
- <ui-icon name="uil-angle-double-right" size="16"></ui-icon>
41
- </button>
42
- </div>
43
- `}renderPageInput(){return e.html`
44
- <div class="pagination__input-container">
45
- <input
46
- type="number"
47
- class="pagination__input"
48
- .value=${h.live(this.inputValue)}
49
- min="1"
50
- max=${this.totalPages}
51
- ?disabled=${this.disabled}
52
- @input=${this.handleInputChange}
53
- @blur=${this.handleInputBlur}
54
- @keydown=${this.handleInputKeydown}
55
- aria-label="Sayfa numarası"
56
- />
57
- </div>
58
- <span class="pagination__separator">/ ${this.totalPages}</span>
59
- `}renderPrevNextButtons(){return e.html`
60
- <button
61
- type="button"
62
- class="pagination__btn--text"
63
- ?disabled=${!this.canGoPrev}
64
- @click=${this.goPrev}
65
- >
66
- <ui-icon name="uil-angle-left" size="16"></ui-icon>
67
- ${this.prevLabel}
68
- </button>
69
- <button
70
- type="button"
71
- class="pagination__btn--text"
72
- ?disabled=${!this.canGoNext}
73
- @click=${this.goNext}
74
- >
75
- ${this.nextLabel}
76
- <ui-icon name="uil-angle-right" size="16"></ui-icon>
77
- </button>
78
- `}renderPageInfo(){return e.html`
79
- <div class="pagination__page-info">
80
- <span class="pagination__page-info-text">${this.pageLabel} ${this.page}</span>
81
- <span class="pagination__page-info-separator">/</span>
82
- <span class="pagination__page-info-text">${this.totalPages}</span>
83
- </div>
84
- `}renderNumberButtons(){const t=this.getPageNumbers();return e.html`
85
- ${t.map((a,r)=>a==="ellipsis"?e.html`
86
- <span
87
- class="pagination__btn--number pagination__btn--ellipsis"
88
- key="ellipsis-${r}"
89
- >...</span>
90
- `:e.html`
91
- <button
92
- type="button"
93
- class="pagination__btn--number ${a===this.page?"pagination__btn--active":""}"
94
- ?disabled=${this.disabled}
95
- @click=${()=>this.goToPage(a)}
96
- aria-label="Sayfa ${a}"
97
- aria-current=${a===this.page?"page":e.nothing}
98
- >
99
- ${a}
100
- </button>
101
- `)}
102
- `}renderPageSizeDropdown(){return this.showPageSize?e.html`
103
- <div class="pagination__page-size">
104
- <logosphere-combobox
105
- .items=${this.pageSizeItems}
106
- .disabled=${this.disabled}
107
- .clearable=${!1}
108
- optionLabel="label"
109
- optionValue="value"
110
- placeholder=""
111
- @change=${this.handlePageSizeChange}
112
- ></logosphere-combobox>
113
- </div>
114
- `:e.nothing}renderTotalInfo(){return this.showTotal?e.html`
115
- <div class="pagination__total">
116
- <span class="pagination__total-separator">/</span>
117
- <span class="pagination__total-text">${this.total} ${this.totalLabel}</span>
118
- </div>
119
- `:e.nothing}renderDefault(){return e.html`
120
- <div class="pagination__nav">
121
- ${this.renderNavButtons()}
122
- ${this.renderPageInput()}
123
- ${this.renderNavButtonsAfter()}
124
- </div>
125
- <div class="pagination__info">
126
- ${this.renderPageSizeDropdown()}
127
- ${this.renderTotalInfo()}
128
- </div>
129
- `}renderPrevNext(){return e.html`
130
- <div class="pagination__nav" style="gap: 8px;">
131
- ${this.renderPrevNextButtons()}
132
- </div>
133
- <div class="pagination__info">
134
- ${this.renderPageInfo()}
135
- </div>
136
- `}renderPrevNextInverted(){return e.html`
137
- <div class="pagination__info">
138
- ${this.renderPageInfo()}
139
- </div>
140
- <div class="pagination__nav" style="gap: 8px;">
141
- ${this.renderPrevNextButtons()}
142
- </div>
143
- `}renderPrevNextOnly(){return e.html`
144
- <div class="pagination__nav" style="gap: 8px; margin-left: auto;">
145
- ${this.renderPrevNextButtons()}
146
- </div>
147
- `}renderNumberButtonsVariant(){return e.html`
148
- <div class="pagination__nav">
149
- ${this.renderNavButtons(!0)}
150
- ${this.renderNumberButtons()}
151
- ${this.renderNavButtonsAfter(!0)}
152
- </div>
153
- <div class="pagination__info">
154
- ${this.renderPageSizeDropdown()}
155
- ${this.renderTotalInfo()}
156
- </div>
157
- `}render(){const t=this.variant==="prev-next-only"?"pagination--justify-end":"";return e.html`
158
- <nav
159
- class="pagination ${t}"
160
- role="navigation"
161
- aria-label="Sayfalama"
162
- >
163
- ${this.variant==="default"?this.renderDefault():e.nothing}
164
- ${this.variant==="prev-next"?this.renderPrevNext():e.nothing}
165
- ${this.variant==="prev-next-inverted"?this.renderPrevNextInverted():e.nothing}
166
- ${this.variant==="prev-next-only"?this.renderPrevNextOnly():e.nothing}
167
- ${this.variant==="number-buttons"?this.renderNumberButtonsVariant():e.nothing}
168
- </nav>
169
- `}};c.styles=[e.css`${e.unsafeCSS(u)}`];let i=c;o([n.property({type:String})],i.prototype,"variant");o([n.property({type:Number})],i.prototype,"page");o([n.property({type:Number})],i.prototype,"pageSize");o([n.property({type:Number})],i.prototype,"total");o([n.property({type:Array})],i.prototype,"pageSizeOptions");o([n.property({type:Boolean})],i.prototype,"showPageSize");o([n.property({type:Boolean})],i.prototype,"showTotal");o([n.property({type:Boolean})],i.prototype,"disabled");o([n.property({type:String})],i.prototype,"prevLabel");o([n.property({type:String})],i.prototype,"nextLabel");o([n.property({type:String})],i.prototype,"pageLabel");o([n.property({type:String})],i.prototype,"perPageLabel");o([n.property({type:String})],i.prototype,"totalLabel");o([n.state()],i.prototype,"inputValue");o([n.query("logosphere-combobox")],i.prototype,"_combobox");customElements.get("logosphere-pagination")||customElements.define("logosphere-pagination",i);exports.Pagination=i;