@logosphere-ui/core 0.0.0-alpha.5 → 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.
- package/dist/index.js +3207 -32
- package/package.json +16 -31
- package/dist/badge-BbhaO73N.cjs +0 -13
- package/dist/badge-DE7Tgd8Z.js +0 -71
- package/dist/badge.cjs +0 -1
- package/dist/badge.js +0 -4
- package/dist/breadcrumb-B-4yqoJZ.js +0 -41
- package/dist/breadcrumb-Cop-B1J7.cjs +0 -12
- package/dist/breadcrumb.cjs +0 -1
- package/dist/breadcrumb.js +0 -4
- package/dist/button-C1EwOosO.js +0 -58
- package/dist/button-CDRccsk9.cjs +0 -10
- package/dist/button.cjs +0 -1
- package/dist/button.js +0 -4
- package/dist/card-CUhlTJyJ.js +0 -97
- package/dist/card-n8ka8Zk-.cjs +0 -43
- package/dist/card.cjs +0 -1
- package/dist/card.js +0 -4
- package/dist/chatbot-Da_itUdJ.cjs +0 -160
- package/dist/chatbot-zkxngMRH.js +0 -481
- package/dist/chatbot.cjs +0 -1
- package/dist/chatbot.js +0 -4
- package/dist/checkbox-7Rb3WKGx.js +0 -119
- package/dist/checkbox-CdDTRdKV.cjs +0 -37
- package/dist/checkbox.cjs +0 -1
- package/dist/checkbox.js +0 -4
- package/dist/combobox-BJbI-Tgi.js +0 -268
- package/dist/combobox-pmE7bgEL.cjs +0 -99
- package/dist/combobox.cjs +0 -1
- package/dist/combobox.js +0 -4
- package/dist/datepicker-DFJx45C-.js +0 -750
- package/dist/datepicker-b9JGTTMx.cjs +0 -115
- package/dist/datepicker.cjs +0 -1
- package/dist/datepicker.js +0 -4
- package/dist/download-manager-A4fOxGWJ.js +0 -381
- package/dist/download-manager-BSIMTGaK.cjs +0 -97
- package/dist/download-manager.cjs +0 -1
- package/dist/download-manager.js +0 -4
- package/dist/formfield-D_7NFFoe.cjs +0 -27
- package/dist/formfield-d8fp9FTV.js +0 -118
- package/dist/formfield.cjs +0 -1
- package/dist/formfield.js +0 -4
- package/dist/index.cjs +0 -1
- package/dist/input-BcnI1w3_.cjs +0 -46
- package/dist/input-Bj_7u8Iv.js +0 -192
- package/dist/input.cjs +0 -1
- package/dist/input.js +0 -4
- package/dist/modal-Bfc6WQSL.js +0 -110
- package/dist/modal-DQ8VFL-P.cjs +0 -39
- package/dist/modal.cjs +0 -1
- package/dist/modal.js +0 -4
- package/dist/popover-B7tCqk3R.js +0 -140
- package/dist/popover-C2p5Pmts.cjs +0 -30
- package/dist/popover.cjs +0 -1
- package/dist/popover.js +0 -4
- package/dist/switch-Cpl53nRW.js +0 -64
- package/dist/switch-Rnnn10bn.cjs +0 -17
- package/dist/switch.cjs +0 -1
- package/dist/switch.js +0 -4
- package/dist/tab-BKdN4xAz.js +0 -176
- package/dist/tab-DcjAlXzU.cjs +0 -40
- package/dist/tab.cjs +0 -1
- package/dist/tab.js +0 -4
- package/dist/text-area-BkHdLnZj.cjs +0 -44
- package/dist/text-area-CC24lj8v.js +0 -204
- package/dist/textarea.cjs +0 -1
- package/dist/textarea.js +0 -4
package/dist/index.js
CHANGED
|
@@ -1,34 +1,3209 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
import { LitElement as O, html as l, unsafeCSS as P, css as T, nothing as u } from "lit";
|
|
2
|
+
import { property as s, customElement as Y, state as m, query as te } from "lit/decorators.js";
|
|
3
|
+
import { ref as Ve } from "lit/directives/ref.js";
|
|
4
|
+
import D from "dayjs";
|
|
5
|
+
import { unsafeHTML as at } from "lit/directives/unsafe-html.js";
|
|
6
|
+
import { live as Qe } from "lit/directives/live.js";
|
|
7
|
+
import { createPopper as nt } from "@popperjs/core";
|
|
8
|
+
const lt = '.button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-family-base);font-weight:var(--font-weight-semibold);border:none;border-radius:var(--radius-base);cursor:pointer;transition:all var(--transition-speed-base) var(--transition-timing);gap:var(--spacing-2);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none;line-height:1}.button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.button ::slotted(*){display:inline-flex;align-items:center;vertical-align:middle}.button ::slotted(i),.button ::slotted([class^="uil-"]),.button ::slotted([class*=" uil-"]){font-size:inherit;line-height:1;flex-shrink:0}.button--sm{font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-2)}.button--sm.button--icon-only{padding:var(--spacing-1);line-height:16px}.button--md{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3)}.button--md.button--icon-only{padding:var(--spacing-2);line-height:16px}.button--lg{font-size:var(--font-size-base);padding:var(--spacing-3) var(--spacing-4)}.button--lg.button--icon-only{padding:var(--spacing-3);line-height:16px}.button--solid.button--primary{background-color:var(--color-primary);color:#fff}.button--solid.button--primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.button--solid.button--primary:active:not(:disabled){background-color:var(--color-primary-active)}.button--solid.button--secondary{background-color:var(--color-secondary);color:#fff}.button--solid.button--secondary:hover:not(:disabled){background-color:var(--color-secondary-hover)}.button--solid.button-secondary:active:not(:disabled){background-color:var(--color-secondary-active)}.button--text.button--secondary{background-color:transparent;color:var(--color-secondary)}.button--solid.button--success{background-color:var(--color-success);color:var(--color-success-text-emphasis)}.button--solid.button--success:hover:not(:disabled){background-color:var(--color-success-hover);color:var(--color-success-text-emphasis)}.button--solid.button--success:active:not(:disabled){background-color:var(--color-success-active);color:var(--color-success-text-emphasis)}.button--solid.button--danger{background-color:var(--color-danger);color:var(--color-danger-text-emphasis)}.button--solid.button--danger:hover:not(:disabled){background-color:var(--color-danger-hover);color:var(--color-danger-text-emphasis)}.button--solid.button--danger:active:not(:disabled){background-color:var(--color-danger-active);color:var(--color-danger-text-emphasis)}.button--solid.button--info{background-color:var(--color-info);color:var(--color-info-text-emphasis)}.button--solid.button--info:hover:not(:disabled){background-color:var(--color-info-hover);color:var(--color-info-text-emphasis)}.button--solid.button--info:active:not(:disabled){background-color:var(--color-info-active);color:var(--color-info-text-emphasis)}.button--solid.button--warning{background-color:var(--color-warning);color:var(--color-warning-text-emphasis)}.button--solid.button--warning:hover:not(:disabled){background-color:var(--color-warning-hover);color:var(--color-warning-text-emphasis)}.button--solid.button--warning:active:not(:disabled){background-color:var(--color-warning-active);color:var(--color-warning-text-emphasis)}.button--outline{border-width:2px;border-style:solid}.button--outline.button--sm{padding:calc(var(--spacing-1) - 2px) calc(var(--spacing-2) - 2px)}.button--outline.button--sm.button--icon-only{padding:calc(var(--spacing-1) - 2px)}.button--outline.button--md{padding:calc(var(--spacing-2) - 2px) calc(var(--spacing-3) - 2px)}.button--outline.button--md.button--icon-only{padding:calc(var(--spacing-2) - 2px)}.button--outline.button--lg{padding:calc(var(--spacing-3) - 2px) calc(var(--spacing-4) - 2px)}.button--outline.button--lg.button--icon-only{padding:calc(var(--spacing-3) - 2px)}.button--outline.button--primary{background-color:transparent;color:var(--color-primary-text-emphasis);border-color:var(--color-border)}.button--outline.button--primary:hover:not(:disabled){background-color:var(--color-outline-hover);color:var(--color-primary)}.button--outline.button--secondary{background-color:transparent;color:var(--color-secondary-text-emphasis);border-color:var(--color-border)}.button--outline.button--secondary:hover:not(:disabled){background-color:var(--color-outline-hover);color:var(--color-secondary)}.button--outline.button--success{background-color:transparent;color:var(--color-success-outline-text-emphasis);border-color:var(--color-border-success)}.button--outline.button--success:hover:not(:disabled){background-color:var(--color-outline-hover);color:var(--color-success-outline-text-emphasis)}.button--outline.button--danger{background-color:transparent;color:var(--color-danger-outline-text-emphasis);border-color:var(--color-border-danger)}.button--outline.button--danger:hover:not(:disabled){background-color:var(--color-outline-hover);color:var(--color-danger-outline-text-emphasis)}.button--outline.button--info{background-color:transparent;color:var(--color-info-outline-text-emphasis);border-color:var(--color-border-info)}.button--outline.button--info:hover:not(:disabled){background-color:var(--color-outline-hover);color:var(--color-info-outline-text-emphasis)}.button--outline.button--warning{background-color:transparent;color:var(--color-warning-text-emphasis);border-color:var(--color-border-warning)}.button--outline.button--warning:hover:not(:disabled){background-color:var(--color-outline-hover);color:var(--color-warning-text-emphasis)}.button--text.button--primary{background-color:transparent;color:var(--color-primary)}.button--text.button--primary:hover:not(:disabled){background-color:var(--color-primary-bg-subtle)}.button--text.button--success{background-color:transparent;color:var(--color-success)}.button--text.button--success:hover:not(:disabled){background-color:var(--color-success-bg-subtle)}.button--text.button--danger{background-color:transparent;color:var(--color-danger)}.button--text.button--danger:hover:not(:disabled){background-color:var(--color-danger-bg-subtle)}.button--text.button--info{background-color:transparent;color:var(--color-info)}.button--text.button--info:hover:not(:disabled){background-color:var(--color-info-bg-subtle)}.button--text.button--warning{background-color:transparent;color:var(--color-warning)}.button--text.button--warning:hover:not(:disabled){background-color:var(--color-warning-bg-subtle)}';
|
|
9
|
+
var dt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, ve = (e, t, o, r) => {
|
|
10
|
+
for (var i = r > 1 ? void 0 : r ? ct(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
11
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
12
|
+
return r && i && dt(t, o, i), i;
|
|
13
|
+
};
|
|
14
|
+
let ae = class extends O {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments), this.variant = "solid", this.size = "md", this.theme = "primary", this.iconOnly = !1, this.disabled = !1;
|
|
17
|
+
}
|
|
18
|
+
getButtonClasses() {
|
|
19
|
+
const e = [
|
|
20
|
+
"button",
|
|
21
|
+
`button--${this.variant}`,
|
|
22
|
+
`button--${this.size}`,
|
|
23
|
+
`button--${this.theme}`
|
|
24
|
+
];
|
|
25
|
+
return this.iconOnly && e.push("button--icon-only"), e.join(" ");
|
|
26
|
+
}
|
|
27
|
+
render() {
|
|
28
|
+
return l`
|
|
29
|
+
<button
|
|
30
|
+
class="${this.getButtonClasses()}"
|
|
31
|
+
?disabled="${this.disabled}"
|
|
32
|
+
>
|
|
33
|
+
<slot name="prefix"></slot>
|
|
34
|
+
<slot></slot>
|
|
35
|
+
<slot name="suffix"></slot>
|
|
36
|
+
</button>
|
|
37
|
+
`;
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
ae.styles = [
|
|
41
|
+
T`${P(lt)}`
|
|
42
|
+
];
|
|
43
|
+
ve([
|
|
44
|
+
s({ type: String })
|
|
45
|
+
], ae.prototype, "variant", 2);
|
|
46
|
+
ve([
|
|
47
|
+
s({ type: String })
|
|
48
|
+
], ae.prototype, "size", 2);
|
|
49
|
+
ve([
|
|
50
|
+
s({ type: String })
|
|
51
|
+
], ae.prototype, "theme", 2);
|
|
52
|
+
ve([
|
|
53
|
+
s({ type: Boolean })
|
|
54
|
+
], ae.prototype, "iconOnly", 2);
|
|
55
|
+
ve([
|
|
56
|
+
s({ type: Boolean })
|
|
57
|
+
], ae.prototype, "disabled", 2);
|
|
58
|
+
ae = ve([
|
|
59
|
+
Y("logosphere-button")
|
|
60
|
+
], ae);
|
|
61
|
+
const ht = ".badge{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-family-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-base);white-space:nowrap;-webkit-user-select:none;user-select:none}.badge--default-size{padding:var(--spacing-1) var(--spacing-2)}.badge--small{padding:0 var(--spacing-1)}.badge--round{border-radius:var(--radius-md)}.badge--default{background-color:var(--color-tertiary-bg);color:var(--color-secondary)}.badge--warning{background-color:var(--color-warning-rgb);color:var(--color-warning-text-emphasis)}.badge--success{background-color:var(--color-success-rgb);color:var(--color-success)}.badge--info{background-color:var(--color-info-rgb);color:var(--color-info-text-emphasis)}.badge--danger{background-color:var(--color-danger-rgb);color:var(--color-danger)}.badge--purple{background-color:var(--color-purple-rgb);color:var(--color-purple)}.badge__close{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--spacing-1);padding:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.75;transition:opacity var(--transition-speed-fast) var(--transition-timing);line-height:1}.badge__close:hover{opacity:1}.badge__close:focus{outline:none;opacity:1}";
|
|
62
|
+
var pt = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, me = (e, t, o, r) => {
|
|
63
|
+
for (var i = r > 1 ? void 0 : r ? ut(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
64
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
65
|
+
return r && i && pt(t, o, i), i;
|
|
66
|
+
};
|
|
67
|
+
let ee = class extends O {
|
|
68
|
+
constructor() {
|
|
69
|
+
super(...arguments), this.variant = "default", this.size = "default", this.text = "", this.closeable = !1, this.isRound = !1;
|
|
70
|
+
}
|
|
71
|
+
handleClose() {
|
|
72
|
+
this.onClose && this.onClose(), this.dispatchEvent(
|
|
73
|
+
new CustomEvent("close", {
|
|
74
|
+
bubbles: !0,
|
|
75
|
+
composed: !0
|
|
76
|
+
})
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
getBadgeClasses() {
|
|
80
|
+
const e = [
|
|
81
|
+
"badge",
|
|
82
|
+
`badge--${this.variant}`,
|
|
83
|
+
this.size === "small" ? "badge--small" : "badge--default-size"
|
|
84
|
+
];
|
|
85
|
+
return this.isRound && e.push("badge--round"), e.join(" ");
|
|
86
|
+
}
|
|
87
|
+
render() {
|
|
88
|
+
return l`
|
|
89
|
+
<div class="${this.getBadgeClasses()}">
|
|
90
|
+
<slot></slot>
|
|
91
|
+
${this.text ? l`<span>${this.text}</span>` : u}
|
|
92
|
+
${this.closeable ? l`
|
|
93
|
+
<button class="badge__close" @click=${this.handleClose} aria-label="Close">
|
|
94
|
+
<ui-icon name="uil-times"></ui-icon>
|
|
95
|
+
</button>
|
|
96
|
+
` : u}
|
|
97
|
+
</div>
|
|
98
|
+
`;
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
ee.styles = [
|
|
102
|
+
T`
|
|
103
|
+
${P(ht)}
|
|
104
|
+
`
|
|
105
|
+
];
|
|
106
|
+
me([
|
|
107
|
+
s({ type: String })
|
|
108
|
+
], ee.prototype, "variant", 2);
|
|
109
|
+
me([
|
|
110
|
+
s({ type: String })
|
|
111
|
+
], ee.prototype, "size", 2);
|
|
112
|
+
me([
|
|
113
|
+
s({ type: String })
|
|
114
|
+
], ee.prototype, "text", 2);
|
|
115
|
+
me([
|
|
116
|
+
s({ type: Boolean })
|
|
117
|
+
], ee.prototype, "closeable", 2);
|
|
118
|
+
me([
|
|
119
|
+
s({ type: Boolean })
|
|
120
|
+
], ee.prototype, "isRound", 2);
|
|
121
|
+
me([
|
|
122
|
+
s({ attribute: !1 })
|
|
123
|
+
], ee.prototype, "onClose", 2);
|
|
124
|
+
ee = me([
|
|
125
|
+
Y("logosphere-badge")
|
|
126
|
+
], ee);
|
|
127
|
+
const bt = '.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{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)}.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)}';
|
|
128
|
+
var gt = Object.defineProperty, ft = Object.getOwnPropertyDescriptor, le = (e, t, o, r) => {
|
|
129
|
+
for (var i = r > 1 ? void 0 : r ? ft(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
130
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
131
|
+
return r && i && gt(t, o, i), i;
|
|
132
|
+
};
|
|
133
|
+
let W = class extends O {
|
|
134
|
+
constructor() {
|
|
135
|
+
super(...arguments), this.label = "", this.value = "", this.checked = !1, this.type = "checkbox", this.disabled = !1, this.indeterminate = !1, this.internalChecked = !1;
|
|
136
|
+
}
|
|
137
|
+
connectedCallback() {
|
|
138
|
+
super.connectedCallback(), this.internalChecked = this.checked;
|
|
139
|
+
}
|
|
140
|
+
firstUpdated() {
|
|
141
|
+
this.setIndeterminate();
|
|
142
|
+
}
|
|
143
|
+
updated(e) {
|
|
144
|
+
e.has("indeterminate") && this.setIndeterminate(), e.has("checked") && (this.internalChecked = this.checked);
|
|
145
|
+
}
|
|
146
|
+
setIndeterminate() {
|
|
147
|
+
this.inputElement && (this.inputElement.indeterminate = this.indeterminate);
|
|
148
|
+
}
|
|
149
|
+
toggleChecked() {
|
|
150
|
+
this.disabled || (this.indeterminate ? (this.indeterminate = !1, this.internalChecked = !0) : this.internalChecked = !this.internalChecked, this.dispatchEvent(
|
|
151
|
+
new CustomEvent("lgsChange", {
|
|
152
|
+
detail: {
|
|
153
|
+
checked: this.internalChecked,
|
|
154
|
+
indeterminate: this.indeterminate,
|
|
155
|
+
value: this.value
|
|
156
|
+
},
|
|
157
|
+
bubbles: !0,
|
|
158
|
+
composed: !0
|
|
159
|
+
})
|
|
160
|
+
));
|
|
161
|
+
}
|
|
162
|
+
renderCheckbox() {
|
|
163
|
+
const e = [
|
|
164
|
+
"checkbox-control",
|
|
165
|
+
this.internalChecked ? "checkbox-control--checked" : "",
|
|
166
|
+
this.indeterminate ? "checkbox-control--indeterminate" : ""
|
|
167
|
+
].filter(Boolean).join(" ");
|
|
168
|
+
return l`
|
|
169
|
+
<div
|
|
170
|
+
class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
|
|
171
|
+
@click=${this.toggleChecked}
|
|
172
|
+
>
|
|
173
|
+
<input
|
|
174
|
+
type="checkbox"
|
|
175
|
+
class="checkbox-input"
|
|
176
|
+
.checked=${this.internalChecked}
|
|
177
|
+
?disabled=${this.disabled}
|
|
178
|
+
.value=${this.value}
|
|
179
|
+
${Ve((t) => this.inputElement = t)}
|
|
180
|
+
/>
|
|
181
|
+
<span class="${e}"></span>
|
|
182
|
+
${this.label ? l`<span class="checkbox-label">${this.label}</span>` : u}
|
|
183
|
+
</div>
|
|
184
|
+
`;
|
|
185
|
+
}
|
|
186
|
+
renderSwitch() {
|
|
187
|
+
return l`
|
|
188
|
+
<div
|
|
189
|
+
class="switch-wrapper ${this.disabled ? "switch-wrapper--disabled" : ""}"
|
|
190
|
+
@click=${this.toggleChecked}
|
|
191
|
+
>
|
|
192
|
+
<input
|
|
193
|
+
type="checkbox"
|
|
194
|
+
class="checkbox-input"
|
|
195
|
+
.checked=${this.internalChecked}
|
|
196
|
+
?disabled=${this.disabled}
|
|
197
|
+
.value=${this.value}
|
|
198
|
+
${Ve((e) => this.inputElement = e)}
|
|
199
|
+
/>
|
|
200
|
+
<div class="switch-track ${this.internalChecked ? "switch-track--checked" : ""}">
|
|
201
|
+
<div class="switch-thumb"></div>
|
|
202
|
+
</div>
|
|
203
|
+
${this.label ? l`<span class="checkbox-label">${this.label}</span>` : u}
|
|
204
|
+
</div>
|
|
205
|
+
`;
|
|
206
|
+
}
|
|
207
|
+
render() {
|
|
208
|
+
return this.type === "switch" ? this.renderSwitch() : this.renderCheckbox();
|
|
209
|
+
}
|
|
210
|
+
};
|
|
211
|
+
W.styles = [
|
|
212
|
+
T`
|
|
213
|
+
${P(bt)}
|
|
214
|
+
`
|
|
215
|
+
];
|
|
216
|
+
le([
|
|
217
|
+
s({ type: String })
|
|
218
|
+
], W.prototype, "label", 2);
|
|
219
|
+
le([
|
|
220
|
+
s({ type: String })
|
|
221
|
+
], W.prototype, "value", 2);
|
|
222
|
+
le([
|
|
223
|
+
s({ type: Boolean })
|
|
224
|
+
], W.prototype, "checked", 2);
|
|
225
|
+
le([
|
|
226
|
+
s({ type: String })
|
|
227
|
+
], W.prototype, "type", 2);
|
|
228
|
+
le([
|
|
229
|
+
s({ type: Boolean })
|
|
230
|
+
], W.prototype, "disabled", 2);
|
|
231
|
+
le([
|
|
232
|
+
s({ type: Boolean })
|
|
233
|
+
], W.prototype, "indeterminate", 2);
|
|
234
|
+
le([
|
|
235
|
+
m()
|
|
236
|
+
], W.prototype, "internalChecked", 2);
|
|
237
|
+
W = le([
|
|
238
|
+
Y("logosphere-checkbox")
|
|
239
|
+
], W);
|
|
240
|
+
const mt = ":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text);margin-bottom:var(--spacing-2)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:flex-start;border-radius:var(--radius-base);border:1px solid var(--color-border);padding:var(--spacing-2) 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--focused{border-color:var(--color-primary);background-color:var(--color-body-bg)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-tertiary-bg)}.formfield__container--error{border-color:var(--color-danger);background-color:var(--color-danger-bg-subtle)}.formfield__container--disabled{background-color:var(--color-tertiary-bg);opacity:.4;cursor:not-allowed}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent}.formfield__input-area{flex:1;min-width:0}.formfield__suffix{display:flex;align-items:center;flex-shrink:0;margin-left:var(--spacing-2)}.formfield__suffix:empty{display:none}.formfield__helper{font-size:var(--font-size-sm);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:var(--font-size-sm);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-size:14px;line-height:1.5}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";
|
|
241
|
+
var _t = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, q = (e, t, o, r) => {
|
|
242
|
+
for (var i = r > 1 ? void 0 : r ? vt(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
243
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
244
|
+
return r && i && _t(t, o, i), i;
|
|
245
|
+
};
|
|
246
|
+
let A = class extends O {
|
|
247
|
+
constructor() {
|
|
248
|
+
super(...arguments), this.label = "", this.helper = "", this.error = "", this.placeholder = "", this.size = "default", this.variant = "default", this.required = !1, this.disabled = !1, this.readonly = !1, this._focused = !1, this._hovered = !1, this.handleSlotFocus = (e) => {
|
|
249
|
+
const t = e.target;
|
|
250
|
+
["INPUT", "TEXTAREA", "SELECT"].includes(t.tagName) && (this._focused = !0, this.dispatchEvent(new CustomEvent("field-focus", {
|
|
251
|
+
bubbles: !0,
|
|
252
|
+
composed: !0,
|
|
253
|
+
detail: { originalEvent: e }
|
|
254
|
+
})));
|
|
255
|
+
}, this.handleSlotBlur = (e) => {
|
|
256
|
+
const t = e.target;
|
|
257
|
+
["INPUT", "TEXTAREA", "SELECT"].includes(t.tagName) && (this._focused = !1, this.dispatchEvent(new CustomEvent("field-blur", {
|
|
258
|
+
bubbles: !0,
|
|
259
|
+
composed: !0,
|
|
260
|
+
detail: { originalEvent: e }
|
|
261
|
+
})));
|
|
262
|
+
}, this.handleMouseEnter = () => {
|
|
263
|
+
this._hovered = !0;
|
|
264
|
+
}, this.handleMouseLeave = () => {
|
|
265
|
+
this._hovered = !1;
|
|
266
|
+
}, this.handleContainerClick = (e) => {
|
|
267
|
+
const t = e.target;
|
|
268
|
+
if (["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName)) return;
|
|
269
|
+
this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({ flatten: !0 }).find((i) => ["INPUT", "TEXTAREA", "SELECT"].includes(i.tagName))?.focus();
|
|
270
|
+
};
|
|
271
|
+
}
|
|
272
|
+
connectedCallback() {
|
|
273
|
+
super.connectedCallback(), this.addEventListener("focus", this.handleSlotFocus, !0), this.addEventListener("blur", this.handleSlotBlur, !0);
|
|
274
|
+
}
|
|
275
|
+
disconnectedCallback() {
|
|
276
|
+
super.disconnectedCallback(), this.removeEventListener("focus", this.handleSlotFocus, !0), this.removeEventListener("blur", this.handleSlotBlur, !0);
|
|
277
|
+
}
|
|
278
|
+
render() {
|
|
279
|
+
const e = !!this.error, t = !e && !!this.helper, o = [
|
|
280
|
+
"formfield__container",
|
|
281
|
+
e ? "formfield__container--error" : "",
|
|
282
|
+
this._focused ? "formfield__container--focused" : "",
|
|
283
|
+
this._hovered ? "formfield__container--hovered" : "",
|
|
284
|
+
this.disabled ? "formfield__container--disabled" : "",
|
|
285
|
+
this.variant === "subtle" ? "formfield__container--subtle" : ""
|
|
286
|
+
].filter(Boolean).join(" ");
|
|
287
|
+
return l`
|
|
288
|
+
<div class="formfield">
|
|
289
|
+
${this.label ? l`
|
|
290
|
+
<label class="formfield__label">
|
|
291
|
+
${this.label}
|
|
292
|
+
${this.required ? l`<span class="formfield__required">*</span>` : ""}
|
|
293
|
+
</label>
|
|
294
|
+
` : ""}
|
|
295
|
+
|
|
296
|
+
<div
|
|
297
|
+
class="${o}"
|
|
298
|
+
@mouseenter=${this.handleMouseEnter}
|
|
299
|
+
@mouseleave=${this.handleMouseLeave}
|
|
300
|
+
@click=${this.handleContainerClick}
|
|
301
|
+
>
|
|
302
|
+
<div class="formfield__input-area">
|
|
303
|
+
<slot></slot>
|
|
304
|
+
</div>
|
|
305
|
+
<div class="formfield__suffix">
|
|
306
|
+
<slot name="suffix"></slot>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
${t ? l`<div class="formfield__helper">${this.helper}</div>` : ""}
|
|
311
|
+
${e ? l`<div class="formfield__error">${this.error}</div>` : ""}
|
|
312
|
+
</div>
|
|
313
|
+
`;
|
|
314
|
+
}
|
|
315
|
+
};
|
|
316
|
+
A.styles = [T`${P(mt)}`];
|
|
317
|
+
q([
|
|
318
|
+
s({ type: String })
|
|
319
|
+
], A.prototype, "label", 2);
|
|
320
|
+
q([
|
|
321
|
+
s({ type: String })
|
|
322
|
+
], A.prototype, "helper", 2);
|
|
323
|
+
q([
|
|
324
|
+
s({ type: String })
|
|
325
|
+
], A.prototype, "error", 2);
|
|
326
|
+
q([
|
|
327
|
+
s({ type: String })
|
|
328
|
+
], A.prototype, "placeholder", 2);
|
|
329
|
+
q([
|
|
330
|
+
s({ type: String })
|
|
331
|
+
], A.prototype, "size", 2);
|
|
332
|
+
q([
|
|
333
|
+
s({ type: String })
|
|
334
|
+
], A.prototype, "variant", 2);
|
|
335
|
+
q([
|
|
336
|
+
s({ type: Boolean })
|
|
337
|
+
], A.prototype, "required", 2);
|
|
338
|
+
q([
|
|
339
|
+
s({ type: Boolean })
|
|
340
|
+
], A.prototype, "disabled", 2);
|
|
341
|
+
q([
|
|
342
|
+
s({ type: Boolean })
|
|
343
|
+
], A.prototype, "readonly", 2);
|
|
344
|
+
q([
|
|
345
|
+
m()
|
|
346
|
+
], A.prototype, "_focused", 2);
|
|
347
|
+
q([
|
|
348
|
+
m()
|
|
349
|
+
], A.prototype, "_hovered", 2);
|
|
350
|
+
A = q([
|
|
351
|
+
Y("logosphere-formfield")
|
|
352
|
+
], A);
|
|
353
|
+
const yt = ":host{display:block}.switch{display:inline-block;position:relative}.switch--md{width:36px;height:20px}.switch--sm{width:32px;height:18px}.switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.switch__track{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--radius-full);cursor:pointer;transition:background-color var(--transition-speed-base) var(--transition-timing);background-color:var(--color-gray-300)}.switch__track--on{background-color:var(--color-primary)}.switch__track--disabled{cursor:not-allowed}.switch__track--disabled-on{background-color:color-mix(in srgb,var(--color-primary) 30%,transparent)}.switch__track--disabled-off{background-color:var(--color-gray-200)}.switch__thumb{position:absolute;background-color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-xs);top:2px;left:2px;transform:translate(0);transition:transform var(--transition-speed-base) var(--transition-timing)}.switch--md .switch__thumb{width:16px;height:16px}.switch--sm .switch__thumb{width:14px;height:14px}.switch__thumb--on.switch--md .switch__thumb,.switch__track--on~.switch__thumb{transform:translate(16px)}.switch__track--on+.switch__thumb{transform:translate(16px)}";
|
|
354
|
+
var wt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, we = (e, t, o, r) => {
|
|
355
|
+
for (var i = r > 1 ? void 0 : r ? xt(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
356
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
357
|
+
return r && i && wt(t, o, i), i;
|
|
358
|
+
};
|
|
359
|
+
let fe = class extends O {
|
|
360
|
+
constructor() {
|
|
361
|
+
super(...arguments), this.checked = !1, this.disabled = !1, this.size = "md";
|
|
362
|
+
}
|
|
363
|
+
onChange(e) {
|
|
364
|
+
const t = e.target;
|
|
365
|
+
this.checked = t.checked, this.dispatchEvent(new CustomEvent("change", {
|
|
366
|
+
detail: { checked: this.checked }
|
|
367
|
+
}));
|
|
368
|
+
}
|
|
369
|
+
render() {
|
|
370
|
+
const e = `switch switch--${this.size}`, t = [
|
|
371
|
+
"switch__track",
|
|
372
|
+
this.checked && !this.disabled ? "switch__track--on" : "",
|
|
373
|
+
this.disabled ? "switch__track--disabled" : "",
|
|
374
|
+
this.disabled && this.checked ? "switch__track--disabled-on" : "",
|
|
375
|
+
this.disabled && !this.checked ? "switch__track--disabled-off" : ""
|
|
376
|
+
].filter(Boolean).join(" "), o = this.checked ? "translateX(16px)" : "translateX(0)";
|
|
377
|
+
return l`
|
|
378
|
+
<label class="${e}">
|
|
379
|
+
<input
|
|
380
|
+
class="switch__input"
|
|
381
|
+
type="checkbox"
|
|
382
|
+
?checked=${this.checked}
|
|
383
|
+
?disabled=${this.disabled}
|
|
384
|
+
@change=${this.onChange}
|
|
385
|
+
/>
|
|
386
|
+
<div class="${t}">
|
|
387
|
+
<span
|
|
388
|
+
class="switch__thumb"
|
|
389
|
+
style="transform: ${o}"
|
|
390
|
+
></span>
|
|
391
|
+
</div>
|
|
392
|
+
</label>
|
|
393
|
+
`;
|
|
394
|
+
}
|
|
395
|
+
};
|
|
396
|
+
fe.styles = [T`${P(yt)}`];
|
|
397
|
+
we([
|
|
398
|
+
s({ type: Boolean })
|
|
399
|
+
], fe.prototype, "checked", 2);
|
|
400
|
+
we([
|
|
401
|
+
s({ type: Boolean })
|
|
402
|
+
], fe.prototype, "disabled", 2);
|
|
403
|
+
we([
|
|
404
|
+
s({ type: String })
|
|
405
|
+
], fe.prototype, "size", 2);
|
|
406
|
+
we([
|
|
407
|
+
te("input")
|
|
408
|
+
], fe.prototype, "inputElement", 2);
|
|
409
|
+
fe = we([
|
|
410
|
+
Y("logosphere-switch")
|
|
411
|
+
], fe);
|
|
412
|
+
const kt = ".breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-2);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);list-style:none;margin:0;padding:0}.breadcrumb__item{display:inline-flex;align-items:center;gap:var(--spacing-2)}.breadcrumb__link{color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-regular);transition:color var(--transition-speed-fast) var(--transition-timing),text-decoration var(--transition-speed-fast) var(--transition-timing)}.breadcrumb__link:hover{color:var(--color-primary-hover);text-decoration:underline}.breadcrumb__label{color:var(--color-tertiary);font-weight:var(--font-weight-regular)}.breadcrumb__label--active{color:var(--color-emphasis);font-weight:var(--font-weight-medium)}.breadcrumb__separator{color:var(--color-gray-400);-webkit-user-select:none;user-select:none;flex-shrink:0}";
|
|
413
|
+
var $t = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, et = (e, t, o, r) => {
|
|
414
|
+
for (var i = r > 1 ? void 0 : r ? zt(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
415
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
416
|
+
return r && i && $t(t, o, i), i;
|
|
417
|
+
};
|
|
418
|
+
let Ye = class extends O {
|
|
419
|
+
constructor() {
|
|
420
|
+
super(...arguments), this.items = [];
|
|
421
|
+
}
|
|
422
|
+
render() {
|
|
423
|
+
return l`
|
|
424
|
+
<nav>
|
|
425
|
+
<ol class="breadcrumb">
|
|
426
|
+
${this.items.map(
|
|
427
|
+
(e, t) => l`
|
|
428
|
+
<li class="breadcrumb__item">
|
|
429
|
+
${e.href && !e.active ? l`<a href="${e.href}" class="breadcrumb__link">${e.label}</a>` : l`<span class="breadcrumb__label ${e.active ? "breadcrumb__label--active" : ""}">${e.label}</span>`}
|
|
430
|
+
${t < this.items.length - 1 ? l`<span class="breadcrumb__separator">/</span>` : ""}
|
|
431
|
+
</li>
|
|
432
|
+
`
|
|
433
|
+
)}
|
|
434
|
+
</ol>
|
|
435
|
+
</nav>
|
|
436
|
+
`;
|
|
437
|
+
}
|
|
438
|
+
};
|
|
439
|
+
Ye.styles = [
|
|
440
|
+
T`${P(kt)}`
|
|
441
|
+
];
|
|
442
|
+
et([
|
|
443
|
+
s({ type: Array })
|
|
444
|
+
], Ye.prototype, "items", 2);
|
|
445
|
+
Ye = et([
|
|
446
|
+
Y("logosphere-breadcrumb")
|
|
447
|
+
], Ye);
|
|
448
|
+
const Ct = ".card{width:100%;border-radius:var(--radius-base);border:1px solid var(--color-border);overflow:hidden;box-shadow:var(--shadow-base);display:grid;grid-template-rows:auto 1fr auto}.card__header{padding:var(--spacing-4);border-bottom:1px solid var(--color-border)}.card__header--hidden{display:none}.card__title{margin:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-body-text);font-family:var(--font-family-base)}.card__body{padding:var(--spacing-4);font-size:var(--font-size-sm);line-height:var(--line-height-normal);font-family:var(--font-family-base)}.card__description{margin:0;color:var(--color-tertiary);font-size:var(--font-size-xs);line-height:var(--line-height-normal)}.card__footer{padding:var(--spacing-4);display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--spacing-2);background-color:var(--color-body-bg);border-top:1px solid var(--color-border)}.card__footer--hidden{display:none}";
|
|
449
|
+
var Mt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, oe = (e, t, o, r) => {
|
|
450
|
+
for (var i = r > 1 ? void 0 : r ? St(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
451
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
452
|
+
return r && i && Mt(t, o, i), i;
|
|
453
|
+
};
|
|
454
|
+
let V = class extends O {
|
|
455
|
+
constructor() {
|
|
456
|
+
super(...arguments), this.title = "", this.description = "", this.header = !0, this.footer = !0, this.okLabel = "Tamam", this.cancelLabel = "İptal";
|
|
457
|
+
}
|
|
458
|
+
handleOk() {
|
|
459
|
+
this.onOk?.(), this.dispatchEvent(new CustomEvent("ok", { bubbles: !0, composed: !0 }));
|
|
460
|
+
}
|
|
461
|
+
handleCancel() {
|
|
462
|
+
this.onCancel?.(), this.dispatchEvent(new CustomEvent("cancel", { bubbles: !0, composed: !0 }));
|
|
463
|
+
}
|
|
464
|
+
render() {
|
|
465
|
+
return l`
|
|
466
|
+
<div class="card">
|
|
467
|
+
${this.header ? l`
|
|
468
|
+
<div class="card__header">
|
|
469
|
+
${this.title ? l`<h3 class="card__title">${this.title}</h3>` : u}
|
|
470
|
+
${this.description ? l`<p class="card__description">${this.description}</p>` : u}
|
|
471
|
+
<slot name="header"></slot>
|
|
472
|
+
</div>
|
|
473
|
+
` : u}
|
|
474
|
+
|
|
475
|
+
<div class="card__body">
|
|
476
|
+
<slot></slot>
|
|
477
|
+
</div>
|
|
478
|
+
|
|
479
|
+
${this.footer ? l`
|
|
480
|
+
<div class="card__footer">
|
|
481
|
+
<slot name="footer"></slot>
|
|
482
|
+
${this.onOk ? l`
|
|
483
|
+
<logosphere-button
|
|
484
|
+
variant="solid"
|
|
485
|
+
theme="success"
|
|
486
|
+
size="md"
|
|
487
|
+
@click=${this.handleOk}
|
|
488
|
+
>
|
|
489
|
+
${this.okLabel}
|
|
490
|
+
</logosphere-button>
|
|
491
|
+
` : u}
|
|
492
|
+
${this.onCancel ? l`
|
|
493
|
+
<logosphere-button
|
|
494
|
+
variant="solid"
|
|
495
|
+
theme="danger"
|
|
496
|
+
size="md"
|
|
497
|
+
@click=${this.handleCancel}
|
|
498
|
+
>
|
|
499
|
+
${this.cancelLabel}
|
|
500
|
+
</logosphere-button>
|
|
501
|
+
` : u}
|
|
502
|
+
</div>
|
|
503
|
+
` : u}
|
|
504
|
+
</div>
|
|
505
|
+
`;
|
|
506
|
+
}
|
|
507
|
+
};
|
|
508
|
+
V.styles = [
|
|
509
|
+
T`
|
|
510
|
+
${P(Ct)}
|
|
511
|
+
`
|
|
512
|
+
];
|
|
513
|
+
oe([
|
|
514
|
+
s({ type: String })
|
|
515
|
+
], V.prototype, "title", 2);
|
|
516
|
+
oe([
|
|
517
|
+
s({ type: String })
|
|
518
|
+
], V.prototype, "description", 2);
|
|
519
|
+
oe([
|
|
520
|
+
s({ type: Boolean })
|
|
521
|
+
], V.prototype, "header", 2);
|
|
522
|
+
oe([
|
|
523
|
+
s({ type: Boolean })
|
|
524
|
+
], V.prototype, "footer", 2);
|
|
525
|
+
oe([
|
|
526
|
+
s({ attribute: !1 })
|
|
527
|
+
], V.prototype, "onOk", 2);
|
|
528
|
+
oe([
|
|
529
|
+
s({ attribute: !1 })
|
|
530
|
+
], V.prototype, "onCancel", 2);
|
|
531
|
+
oe([
|
|
532
|
+
s({ type: String })
|
|
533
|
+
], V.prototype, "okLabel", 2);
|
|
534
|
+
oe([
|
|
535
|
+
s({ type: String })
|
|
536
|
+
], V.prototype, "cancelLabel", 2);
|
|
537
|
+
V = oe([
|
|
538
|
+
Y("logosphere-card")
|
|
539
|
+
], V);
|
|
540
|
+
const Dt = ".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:16px}.input__field--large{height:24px}.input__clear-btn{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{color:var(--color-gray-600)}";
|
|
541
|
+
var Et = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, C = (e, t, o, r) => {
|
|
542
|
+
for (var i = r > 1 ? void 0 : r ? Ot(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
543
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
544
|
+
return r && i && Et(t, o, i), i;
|
|
545
|
+
};
|
|
546
|
+
let x = class extends O {
|
|
547
|
+
constructor() {
|
|
548
|
+
super(...arguments), this.value = "", this.type = "text", this.placeholder = "", this.name = "", this.autocomplete = "", this.pattern = "", this.size = "default", this.variant = "default", this.showClear = !1, this.label = "", this.helper = "", this.error = "", this.required = !1, this.disabled = !1, this.readonly = !1, this._internalError = "", this.handleInput = (e) => {
|
|
549
|
+
const t = e.target;
|
|
550
|
+
this.value = t.value, this._internalError && (this._internalError = "", this._inputElement.setCustomValidity("")), this.dispatchEvent(new CustomEvent("input", {
|
|
551
|
+
bubbles: !0,
|
|
552
|
+
composed: !0,
|
|
553
|
+
detail: { value: this.value, originalEvent: e }
|
|
554
|
+
}));
|
|
555
|
+
}, this.handleChange = (e) => {
|
|
556
|
+
const t = e.target;
|
|
557
|
+
this.value = t.value, t.checkValidity() || (this._internalError = t.validationMessage), this.dispatchEvent(new CustomEvent("change", {
|
|
558
|
+
bubbles: !0,
|
|
559
|
+
composed: !0,
|
|
560
|
+
detail: { value: this.value, originalEvent: e }
|
|
561
|
+
}));
|
|
562
|
+
}, this.handleKeyDown = (e) => {
|
|
563
|
+
this.dispatchEvent(new CustomEvent("keydown", {
|
|
564
|
+
bubbles: !0,
|
|
565
|
+
composed: !0,
|
|
566
|
+
detail: { key: e.key, originalEvent: e }
|
|
567
|
+
}));
|
|
568
|
+
}, this.handleKeyUp = (e) => {
|
|
569
|
+
this.dispatchEvent(new CustomEvent("keyup", {
|
|
570
|
+
bubbles: !0,
|
|
571
|
+
composed: !0,
|
|
572
|
+
detail: { key: e.key, originalEvent: e }
|
|
573
|
+
}));
|
|
574
|
+
}, this.handleClear = () => {
|
|
575
|
+
this.value = "", this._inputElement && (this._inputElement.value = ""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", {
|
|
576
|
+
bubbles: !0,
|
|
577
|
+
composed: !0,
|
|
578
|
+
detail: { value: "", originalEvent: null }
|
|
579
|
+
}));
|
|
580
|
+
};
|
|
581
|
+
}
|
|
582
|
+
get inputElement() {
|
|
583
|
+
return this._inputElement;
|
|
584
|
+
}
|
|
585
|
+
focus() {
|
|
586
|
+
this._inputElement?.focus();
|
|
587
|
+
}
|
|
588
|
+
blur() {
|
|
589
|
+
this._inputElement?.blur();
|
|
590
|
+
}
|
|
591
|
+
select() {
|
|
592
|
+
this._inputElement?.select();
|
|
593
|
+
}
|
|
594
|
+
setSelectionRange(e, t, o) {
|
|
595
|
+
this._inputElement?.setSelectionRange(e, t, o);
|
|
596
|
+
}
|
|
597
|
+
checkValidity() {
|
|
598
|
+
return this._inputElement?.checkValidity() ?? !0;
|
|
599
|
+
}
|
|
600
|
+
reportValidity() {
|
|
601
|
+
return this._inputElement?.reportValidity() ?? !0;
|
|
602
|
+
}
|
|
603
|
+
setCustomValidity(e) {
|
|
604
|
+
this._inputElement?.setCustomValidity(e), this._internalError = e, this.requestUpdate();
|
|
605
|
+
}
|
|
606
|
+
render() {
|
|
607
|
+
const e = this.error || this._internalError, t = this.showClear && this.value && !this.disabled && !this.readonly, o = `input__field input__field--${this.size}`;
|
|
608
|
+
return l`
|
|
609
|
+
<logosphere-formfield
|
|
610
|
+
.label=${this.label}
|
|
611
|
+
.helper=${this.helper}
|
|
612
|
+
.error=${e}
|
|
613
|
+
.required=${this.required}
|
|
614
|
+
.disabled=${this.disabled}
|
|
615
|
+
.readonly=${this.readonly}
|
|
616
|
+
.placeholder=${this.placeholder}
|
|
617
|
+
.size=${this.size}
|
|
618
|
+
.variant=${this.variant}
|
|
619
|
+
>
|
|
620
|
+
<input
|
|
621
|
+
class="${o}"
|
|
622
|
+
type=${this.type}
|
|
623
|
+
.value=${Qe(this.value)}
|
|
624
|
+
placeholder=${this.placeholder || u}
|
|
625
|
+
name=${this.name || u}
|
|
626
|
+
autocomplete=${this.autocomplete || u}
|
|
627
|
+
?required=${this.required}
|
|
628
|
+
?disabled=${this.disabled}
|
|
629
|
+
?readonly=${this.readonly}
|
|
630
|
+
minlength=${this.minlength ?? u}
|
|
631
|
+
maxlength=${this.maxlength ?? u}
|
|
632
|
+
pattern=${this.pattern || u}
|
|
633
|
+
min=${this.min ?? u}
|
|
634
|
+
max=${this.max ?? u}
|
|
635
|
+
step=${this.step ?? u}
|
|
636
|
+
@input=${this.handleInput}
|
|
637
|
+
@change=${this.handleChange}
|
|
638
|
+
@keydown=${this.handleKeyDown}
|
|
639
|
+
@keyup=${this.handleKeyUp}
|
|
640
|
+
/>
|
|
641
|
+
${t ? l`
|
|
642
|
+
<button
|
|
643
|
+
type="button"
|
|
644
|
+
slot="suffix"
|
|
645
|
+
class="input__clear-btn"
|
|
646
|
+
@click=${this.handleClear}
|
|
647
|
+
tabindex="-1"
|
|
648
|
+
>
|
|
649
|
+
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
650
|
+
</button>
|
|
651
|
+
` : u}
|
|
652
|
+
</logosphere-formfield>
|
|
653
|
+
`;
|
|
654
|
+
}
|
|
655
|
+
};
|
|
656
|
+
x.styles = [T`${P(Dt)}`];
|
|
657
|
+
C([
|
|
658
|
+
te("input")
|
|
659
|
+
], x.prototype, "_inputElement", 2);
|
|
660
|
+
C([
|
|
661
|
+
s({ type: String })
|
|
662
|
+
], x.prototype, "value", 2);
|
|
663
|
+
C([
|
|
664
|
+
s({ type: String })
|
|
665
|
+
], x.prototype, "type", 2);
|
|
666
|
+
C([
|
|
667
|
+
s({ type: String })
|
|
668
|
+
], x.prototype, "placeholder", 2);
|
|
669
|
+
C([
|
|
670
|
+
s({ type: String })
|
|
671
|
+
], x.prototype, "name", 2);
|
|
672
|
+
C([
|
|
673
|
+
s({ type: String })
|
|
674
|
+
], x.prototype, "autocomplete", 2);
|
|
675
|
+
C([
|
|
676
|
+
s({ type: Number })
|
|
677
|
+
], x.prototype, "minlength", 2);
|
|
678
|
+
C([
|
|
679
|
+
s({ type: Number })
|
|
680
|
+
], x.prototype, "maxlength", 2);
|
|
681
|
+
C([
|
|
682
|
+
s({ type: String })
|
|
683
|
+
], x.prototype, "pattern", 2);
|
|
684
|
+
C([
|
|
685
|
+
s({ type: Number })
|
|
686
|
+
], x.prototype, "min", 2);
|
|
687
|
+
C([
|
|
688
|
+
s({ type: Number })
|
|
689
|
+
], x.prototype, "max", 2);
|
|
690
|
+
C([
|
|
691
|
+
s({ type: Number })
|
|
692
|
+
], x.prototype, "step", 2);
|
|
693
|
+
C([
|
|
694
|
+
s({ type: String })
|
|
695
|
+
], x.prototype, "size", 2);
|
|
696
|
+
C([
|
|
697
|
+
s({ type: String })
|
|
698
|
+
], x.prototype, "variant", 2);
|
|
699
|
+
C([
|
|
700
|
+
s({ type: Boolean })
|
|
701
|
+
], x.prototype, "showClear", 2);
|
|
702
|
+
C([
|
|
703
|
+
s({ type: String })
|
|
704
|
+
], x.prototype, "label", 2);
|
|
705
|
+
C([
|
|
706
|
+
s({ type: String })
|
|
707
|
+
], x.prototype, "helper", 2);
|
|
708
|
+
C([
|
|
709
|
+
s({ type: String })
|
|
710
|
+
], x.prototype, "error", 2);
|
|
711
|
+
C([
|
|
712
|
+
s({ type: Boolean })
|
|
713
|
+
], x.prototype, "required", 2);
|
|
714
|
+
C([
|
|
715
|
+
s({ type: Boolean })
|
|
716
|
+
], x.prototype, "disabled", 2);
|
|
717
|
+
C([
|
|
718
|
+
s({ type: Boolean })
|
|
719
|
+
], x.prototype, "readonly", 2);
|
|
720
|
+
C([
|
|
721
|
+
m()
|
|
722
|
+
], x.prototype, "_internalError", 2);
|
|
723
|
+
x = C([
|
|
724
|
+
Y("logosphere-input")
|
|
725
|
+
], x);
|
|
726
|
+
const Pt = '.popover__wrapper{position:relative;display:inline-block;font-family:var(--font-family-base)}.popover__trigger{display:inline-flex}.popover__panel{position:relative;overflow:visible;z-index:var(--z-index-popover);min-width:240px;border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-body-bg);box-shadow:var(--shadow-md)}.popover__content{position:relative;z-index:1;background-color:var(--color-body-bg);border-radius:var(--radius-md);overflow:hidden}.popover__content:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background-color:var(--color-body-bg);border-radius:var(--radius-md) var(--radius-md) 0 0;z-index:1;pointer-events:none}.popover__content>*{position:relative;z-index:2}.popover__title{padding:10px var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-body-text)}.popover__body{padding:var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-secondary)}.popover__body--with-border{border-top:1px solid var(--color-border)}.popper-arrow{position:absolute;width:12px;height:12px;pointer-events:none;z-index:0}.popper-arrow:before{content:"";position:absolute;inset:0;background:var(--color-border);transform:rotate(45deg)}.popper-arrow:after{content:"";position:absolute;inset:1px;background:var(--color-body-bg);transform:rotate(45deg)}[data-popper]{position:relative;overflow:visible}[data-popper-placement^=bottom]>.popper-arrow{top:-6px;left:50%;transform:translate(-50%,-50%)}[data-popper-placement^=top]>.popper-arrow{bottom:-6px;left:50%;transform:translate(-50%,50%)}[data-popper-placement^=left]>.popper-arrow{right:-6px;top:50%;transform:translate(50%,-50%)}[data-popper-placement^=right]>.popper-arrow{left:-6px;top:50%;transform:translate(-50%,-50%)}';
|
|
727
|
+
var Tt = Object.defineProperty, Yt = Object.getOwnPropertyDescriptor, Z = (e, t, o, r) => {
|
|
728
|
+
for (var i = r > 1 ? void 0 : r ? Yt(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
729
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
730
|
+
return r && i && Tt(t, o, i), i;
|
|
731
|
+
};
|
|
732
|
+
let F = class extends O {
|
|
733
|
+
constructor() {
|
|
734
|
+
super(...arguments), this.title = "", this.trigger = "click", this.placement = "bottom", this.offset = 8, this.open = !1, this.closeOnOutsideClick = !0, this.handleDocumentClick = (e) => {
|
|
735
|
+
!this.open || !this.closeOnOutsideClick || e.composedPath().includes(this) || this.setOpen(!1);
|
|
736
|
+
}, this.toggle = (e) => {
|
|
737
|
+
(this.trigger === "click" || this.trigger === "both") && (e?.stopPropagation(), this.setOpen(!this.open));
|
|
738
|
+
}, this.handleMouseEnter = () => {
|
|
739
|
+
(this.trigger === "hover" || this.trigger === "both") && this.setOpen(!0);
|
|
740
|
+
}, this.handleMouseLeave = () => {
|
|
741
|
+
(this.trigger === "hover" || this.trigger === "both") && this.setOpen(!1);
|
|
742
|
+
};
|
|
743
|
+
}
|
|
744
|
+
connectedCallback() {
|
|
745
|
+
super.connectedCallback(), document.addEventListener("click", this.handleDocumentClick, { capture: !0 });
|
|
746
|
+
}
|
|
747
|
+
disconnectedCallback() {
|
|
748
|
+
super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick, { capture: !0 }), this.destroyPopper();
|
|
749
|
+
}
|
|
750
|
+
updated(e) {
|
|
751
|
+
super.updated(e);
|
|
752
|
+
const t = e.has("placement"), o = e.has("open") && this.open;
|
|
753
|
+
if (e.has("open") && !this.open) {
|
|
754
|
+
this.destroyPopper();
|
|
755
|
+
return;
|
|
756
|
+
}
|
|
757
|
+
(o || t) && this.open && this.updatePopper();
|
|
758
|
+
}
|
|
759
|
+
setOpen(e) {
|
|
760
|
+
this.open !== e && (this.open = e, this.dispatchEvent(new CustomEvent(e ? "popover-open" : "popover-close", {
|
|
761
|
+
bubbles: !0,
|
|
762
|
+
composed: !0
|
|
763
|
+
})));
|
|
764
|
+
}
|
|
765
|
+
updatePopper() {
|
|
766
|
+
if (!this.isConnected || !this.open) return;
|
|
767
|
+
const e = this.triggerElement, t = this.popperElement;
|
|
768
|
+
if (!(!e || !t)) {
|
|
769
|
+
if (this.popperInstance) {
|
|
770
|
+
this.popperInstance.setOptions({
|
|
771
|
+
placement: this.placement,
|
|
772
|
+
modifiers: this.getPopperModifiers(),
|
|
773
|
+
strategy: "fixed"
|
|
774
|
+
}), this.popperInstance.update();
|
|
775
|
+
return;
|
|
776
|
+
}
|
|
777
|
+
this.popperInstance = nt(e, t, {
|
|
778
|
+
placement: this.placement,
|
|
779
|
+
strategy: "fixed",
|
|
780
|
+
modifiers: this.getPopperModifiers()
|
|
781
|
+
});
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
getPopperModifiers() {
|
|
785
|
+
return [
|
|
786
|
+
{ name: "offset", options: { offset: [0, this.offset] } },
|
|
787
|
+
{ name: "arrow", options: { element: this.popperArrowElement, padding: 8 } },
|
|
788
|
+
{ name: "preventOverflow", options: { padding: 8 } },
|
|
789
|
+
{ name: "flip", options: { padding: 8 } }
|
|
790
|
+
];
|
|
791
|
+
}
|
|
792
|
+
destroyPopper() {
|
|
793
|
+
this.popperInstance && (this.popperInstance.destroy(), this.popperInstance = void 0);
|
|
794
|
+
}
|
|
795
|
+
render() {
|
|
796
|
+
const e = !!this.title;
|
|
797
|
+
return l`
|
|
798
|
+
<div
|
|
799
|
+
class="popover__wrapper"
|
|
800
|
+
@mouseenter=${this.handleMouseEnter}
|
|
801
|
+
@mouseleave=${this.handleMouseLeave}
|
|
802
|
+
>
|
|
803
|
+
<div class="popover__trigger" part="trigger" @click=${this.toggle}>
|
|
804
|
+
<slot name="trigger"></slot>
|
|
805
|
+
</div>
|
|
806
|
+
|
|
807
|
+
${this.open ? l`
|
|
808
|
+
<div
|
|
809
|
+
data-popper
|
|
810
|
+
class="popover__panel"
|
|
811
|
+
role="dialog"
|
|
812
|
+
aria-hidden=${this.open ? "false" : "true"}
|
|
813
|
+
>
|
|
814
|
+
<div data-popper-arrow class="popper-arrow"></div>
|
|
815
|
+
<div class="popover__content">
|
|
816
|
+
${this.title ? l`
|
|
817
|
+
<div class="popover__title">${this.title}</div>
|
|
818
|
+
` : null}
|
|
819
|
+
<div class="popover__body ${e ? "popover__body--with-border" : ""}">
|
|
820
|
+
<slot></slot>
|
|
821
|
+
</div>
|
|
822
|
+
</div>
|
|
823
|
+
</div>
|
|
824
|
+
` : null}
|
|
825
|
+
</div>
|
|
826
|
+
`;
|
|
827
|
+
}
|
|
828
|
+
};
|
|
829
|
+
F.styles = [T`${P(Pt)}`];
|
|
830
|
+
Z([
|
|
831
|
+
s({ type: String })
|
|
832
|
+
], F.prototype, "title", 2);
|
|
833
|
+
Z([
|
|
834
|
+
s({ type: String })
|
|
835
|
+
], F.prototype, "trigger", 2);
|
|
836
|
+
Z([
|
|
837
|
+
s({ type: String })
|
|
838
|
+
], F.prototype, "placement", 2);
|
|
839
|
+
Z([
|
|
840
|
+
s({ type: Number })
|
|
841
|
+
], F.prototype, "offset", 2);
|
|
842
|
+
Z([
|
|
843
|
+
s({ type: Boolean, reflect: !0 })
|
|
844
|
+
], F.prototype, "open", 2);
|
|
845
|
+
Z([
|
|
846
|
+
s({ type: Boolean })
|
|
847
|
+
], F.prototype, "closeOnOutsideClick", 2);
|
|
848
|
+
Z([
|
|
849
|
+
te('[part="trigger"]')
|
|
850
|
+
], F.prototype, "triggerElement", 2);
|
|
851
|
+
Z([
|
|
852
|
+
te("[data-popper]")
|
|
853
|
+
], F.prototype, "popperElement", 2);
|
|
854
|
+
Z([
|
|
855
|
+
te("[data-popper-arrow]")
|
|
856
|
+
], F.prototype, "popperArrowElement", 2);
|
|
857
|
+
F = Z([
|
|
858
|
+
Y("logosphere-popover")
|
|
859
|
+
], F);
|
|
860
|
+
const Lt = ".textarea__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}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:flex-start;align-self:flex-start;margin-top:var(--spacing-1);outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-gray-600)}";
|
|
861
|
+
var Bt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, M = (e, t, o, r) => {
|
|
862
|
+
for (var i = r > 1 ? void 0 : r ? It(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
863
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
864
|
+
return r && i && Bt(t, o, i), i;
|
|
865
|
+
};
|
|
866
|
+
let k = class extends O {
|
|
867
|
+
constructor() {
|
|
868
|
+
super(...arguments), this.value = "", this.placeholder = "", this.name = "", this.autocomplete = "", this.rows = 3, this.wrap = "soft", this.resize = "vertical", this.autoResize = !1, this.size = "default", this.variant = "default", this.showClear = !1, this.label = "", this.helper = "", this.error = "", this.required = !1, this.disabled = !1, this.readonly = !1, this._internalError = "", this.handleInput = (e) => {
|
|
869
|
+
const t = e.target;
|
|
870
|
+
this.value = t.value, this.autoResize && this.adjustHeight(), this._internalError && (this._internalError = "", this._textareaElement.setCustomValidity("")), this.dispatchEvent(new CustomEvent("input", {
|
|
871
|
+
bubbles: !0,
|
|
872
|
+
composed: !0,
|
|
873
|
+
detail: { value: this.value, originalEvent: e }
|
|
874
|
+
}));
|
|
875
|
+
}, this.handleChange = (e) => {
|
|
876
|
+
const t = e.target;
|
|
877
|
+
this.value = t.value, t.checkValidity() || (this._internalError = t.validationMessage), this.dispatchEvent(new CustomEvent("change", {
|
|
878
|
+
bubbles: !0,
|
|
879
|
+
composed: !0,
|
|
880
|
+
detail: { value: this.value, originalEvent: e }
|
|
881
|
+
}));
|
|
882
|
+
}, this.handleKeyDown = (e) => {
|
|
883
|
+
this.dispatchEvent(new CustomEvent("keydown", {
|
|
884
|
+
bubbles: !0,
|
|
885
|
+
composed: !0,
|
|
886
|
+
detail: { key: e.key, originalEvent: e }
|
|
887
|
+
}));
|
|
888
|
+
}, this.handleKeyUp = (e) => {
|
|
889
|
+
this.dispatchEvent(new CustomEvent("keyup", {
|
|
890
|
+
bubbles: !0,
|
|
891
|
+
composed: !0,
|
|
892
|
+
detail: { key: e.key, originalEvent: e }
|
|
893
|
+
}));
|
|
894
|
+
}, this.handleClear = () => {
|
|
895
|
+
this.value = "", this._textareaElement && (this._textareaElement.value = "", this.autoResize && this.adjustHeight()), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", {
|
|
896
|
+
bubbles: !0,
|
|
897
|
+
composed: !0,
|
|
898
|
+
detail: { value: "", originalEvent: null }
|
|
899
|
+
}));
|
|
900
|
+
};
|
|
901
|
+
}
|
|
902
|
+
get textareaElement() {
|
|
903
|
+
return this._textareaElement;
|
|
904
|
+
}
|
|
905
|
+
focus() {
|
|
906
|
+
this._textareaElement?.focus();
|
|
907
|
+
}
|
|
908
|
+
blur() {
|
|
909
|
+
this._textareaElement?.blur();
|
|
910
|
+
}
|
|
911
|
+
select() {
|
|
912
|
+
this._textareaElement?.select();
|
|
913
|
+
}
|
|
914
|
+
setSelectionRange(e, t, o) {
|
|
915
|
+
this._textareaElement?.setSelectionRange(e, t, o);
|
|
916
|
+
}
|
|
917
|
+
checkValidity() {
|
|
918
|
+
return this._textareaElement?.checkValidity() ?? !0;
|
|
919
|
+
}
|
|
920
|
+
reportValidity() {
|
|
921
|
+
return this._textareaElement?.reportValidity() ?? !0;
|
|
922
|
+
}
|
|
923
|
+
setCustomValidity(e) {
|
|
924
|
+
this._textareaElement?.setCustomValidity(e), this._internalError = e, this.requestUpdate();
|
|
925
|
+
}
|
|
926
|
+
adjustHeight() {
|
|
927
|
+
!this.autoResize || !this._textareaElement || (this._textareaElement.style.height = "auto", this._textareaElement.style.height = `${this._textareaElement.scrollHeight}px`);
|
|
928
|
+
}
|
|
929
|
+
updated(e) {
|
|
930
|
+
super.updated(e), e.has("value") && this.autoResize && this.adjustHeight();
|
|
931
|
+
}
|
|
932
|
+
getResizeClass() {
|
|
933
|
+
return this.autoResize ? "textarea__field--auto-resize" : {
|
|
934
|
+
none: "textarea__field--resize-none",
|
|
935
|
+
vertical: "textarea__field--resize-vertical",
|
|
936
|
+
horizontal: "textarea__field--resize-horizontal",
|
|
937
|
+
both: "textarea__field--resize-both"
|
|
938
|
+
}[this.resize];
|
|
939
|
+
}
|
|
940
|
+
render() {
|
|
941
|
+
const e = this.error || this._internalError, t = this.showClear && this.value && !this.disabled && !this.readonly, o = `textarea__field ${this.getResizeClass()}`;
|
|
942
|
+
return l`
|
|
943
|
+
<logosphere-formfield
|
|
944
|
+
.label=${this.label}
|
|
945
|
+
.helper=${this.helper}
|
|
946
|
+
.error=${e}
|
|
947
|
+
.required=${this.required}
|
|
948
|
+
.disabled=${this.disabled}
|
|
949
|
+
.readonly=${this.readonly}
|
|
950
|
+
.placeholder=${this.placeholder}
|
|
951
|
+
.size=${this.size}
|
|
952
|
+
.variant=${this.variant}
|
|
953
|
+
>
|
|
954
|
+
<textarea
|
|
955
|
+
class="${o}"
|
|
956
|
+
.value=${Qe(this.value)}
|
|
957
|
+
placeholder=${this.placeholder || u}
|
|
958
|
+
name=${this.name || u}
|
|
959
|
+
autocomplete=${this.autocomplete || u}
|
|
960
|
+
?required=${this.required}
|
|
961
|
+
?disabled=${this.disabled}
|
|
962
|
+
?readonly=${this.readonly}
|
|
963
|
+
minlength=${this.minlength ?? u}
|
|
964
|
+
maxlength=${this.maxlength ?? u}
|
|
965
|
+
rows=${this.rows}
|
|
966
|
+
cols=${this.cols ?? u}
|
|
967
|
+
wrap=${this.wrap}
|
|
968
|
+
@input=${this.handleInput}
|
|
969
|
+
@change=${this.handleChange}
|
|
970
|
+
@keydown=${this.handleKeyDown}
|
|
971
|
+
@keyup=${this.handleKeyUp}
|
|
972
|
+
></textarea>
|
|
973
|
+
${t ? l`
|
|
974
|
+
<button
|
|
975
|
+
type="button"
|
|
976
|
+
slot="suffix"
|
|
977
|
+
class="textarea__clear-btn"
|
|
978
|
+
@click=${this.handleClear}
|
|
979
|
+
tabindex="-1"
|
|
980
|
+
>
|
|
981
|
+
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
982
|
+
</button>
|
|
983
|
+
` : u}
|
|
984
|
+
</logosphere-formfield>
|
|
985
|
+
`;
|
|
986
|
+
}
|
|
987
|
+
};
|
|
988
|
+
k.styles = [T`${P(Lt)}`];
|
|
989
|
+
M([
|
|
990
|
+
te("textarea")
|
|
991
|
+
], k.prototype, "_textareaElement", 2);
|
|
992
|
+
M([
|
|
993
|
+
s({ type: String })
|
|
994
|
+
], k.prototype, "value", 2);
|
|
995
|
+
M([
|
|
996
|
+
s({ type: String })
|
|
997
|
+
], k.prototype, "placeholder", 2);
|
|
998
|
+
M([
|
|
999
|
+
s({ type: String })
|
|
1000
|
+
], k.prototype, "name", 2);
|
|
1001
|
+
M([
|
|
1002
|
+
s({ type: String })
|
|
1003
|
+
], k.prototype, "autocomplete", 2);
|
|
1004
|
+
M([
|
|
1005
|
+
s({ type: Number })
|
|
1006
|
+
], k.prototype, "minlength", 2);
|
|
1007
|
+
M([
|
|
1008
|
+
s({ type: Number })
|
|
1009
|
+
], k.prototype, "maxlength", 2);
|
|
1010
|
+
M([
|
|
1011
|
+
s({ type: Number })
|
|
1012
|
+
], k.prototype, "rows", 2);
|
|
1013
|
+
M([
|
|
1014
|
+
s({ type: Number })
|
|
1015
|
+
], k.prototype, "cols", 2);
|
|
1016
|
+
M([
|
|
1017
|
+
s({ type: String })
|
|
1018
|
+
], k.prototype, "wrap", 2);
|
|
1019
|
+
M([
|
|
1020
|
+
s({ type: String })
|
|
1021
|
+
], k.prototype, "resize", 2);
|
|
1022
|
+
M([
|
|
1023
|
+
s({ type: Boolean })
|
|
1024
|
+
], k.prototype, "autoResize", 2);
|
|
1025
|
+
M([
|
|
1026
|
+
s({ type: String })
|
|
1027
|
+
], k.prototype, "size", 2);
|
|
1028
|
+
M([
|
|
1029
|
+
s({ type: String })
|
|
1030
|
+
], k.prototype, "variant", 2);
|
|
1031
|
+
M([
|
|
1032
|
+
s({ type: Boolean })
|
|
1033
|
+
], k.prototype, "showClear", 2);
|
|
1034
|
+
M([
|
|
1035
|
+
s({ type: String })
|
|
1036
|
+
], k.prototype, "label", 2);
|
|
1037
|
+
M([
|
|
1038
|
+
s({ type: String })
|
|
1039
|
+
], k.prototype, "helper", 2);
|
|
1040
|
+
M([
|
|
1041
|
+
s({ type: String })
|
|
1042
|
+
], k.prototype, "error", 2);
|
|
1043
|
+
M([
|
|
1044
|
+
s({ type: Boolean })
|
|
1045
|
+
], k.prototype, "required", 2);
|
|
1046
|
+
M([
|
|
1047
|
+
s({ type: Boolean })
|
|
1048
|
+
], k.prototype, "disabled", 2);
|
|
1049
|
+
M([
|
|
1050
|
+
s({ type: Boolean })
|
|
1051
|
+
], k.prototype, "readonly", 2);
|
|
1052
|
+
M([
|
|
1053
|
+
m()
|
|
1054
|
+
], k.prototype, "_internalError", 2);
|
|
1055
|
+
k = M([
|
|
1056
|
+
Y("logosphere-textarea")
|
|
1057
|
+
], k);
|
|
1058
|
+
const At = '.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}';
|
|
1059
|
+
var jt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, L = (e, t, o, r) => {
|
|
1060
|
+
for (var i = r > 1 ? void 0 : r ? Rt(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
1061
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
1062
|
+
return r && i && jt(t, o, i), i;
|
|
1063
|
+
};
|
|
1064
|
+
let E = class extends O {
|
|
1065
|
+
constructor() {
|
|
1066
|
+
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) => {
|
|
1067
|
+
e.composedPath().includes(this) || this._closeDropdown();
|
|
1068
|
+
}, this._handleKeydown = (e) => {
|
|
1069
|
+
if (!this.readOnly)
|
|
1070
|
+
switch (e.key) {
|
|
1071
|
+
case "ArrowDown":
|
|
1072
|
+
e.preventDefault(), this.isOpen ? this.focusedIndex = Math.min(this.focusedIndex + 1, this._filteredItems.length - 1) : (this.isOpen = !0, this.focusedIndex = 0), this._scrollFocusedIntoView();
|
|
1073
|
+
break;
|
|
1074
|
+
case "ArrowUp":
|
|
1075
|
+
e.preventDefault(), this.isOpen && (this.focusedIndex = Math.max(this.focusedIndex - 1, 0), this._scrollFocusedIntoView());
|
|
1076
|
+
break;
|
|
1077
|
+
case "Enter":
|
|
1078
|
+
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);
|
|
1079
|
+
break;
|
|
1080
|
+
case "Escape":
|
|
1081
|
+
e.preventDefault(), this._closeDropdown();
|
|
1082
|
+
break;
|
|
1083
|
+
}
|
|
1084
|
+
}, this._removeTag = (e, t) => {
|
|
1085
|
+
t.stopPropagation(), this.setSelected(
|
|
1086
|
+
this.selected.filter((o) => o[this.optionValue] !== e[this.optionValue])
|
|
1087
|
+
);
|
|
1088
|
+
}, this._clearSelection = (e) => {
|
|
1089
|
+
e.stopPropagation(), this.setSelected([]), this.inputValue = "";
|
|
1090
|
+
}, this._onFilterFocus = () => {
|
|
1091
|
+
this.inputValue = "", this.isOpen = !0, this.focusedIndex = 0;
|
|
1092
|
+
}, this._onFilterInput = (e) => {
|
|
1093
|
+
this.inputValue = e.target.value, this.focusedIndex = 0, this.isOpen || (this.isOpen = !0);
|
|
1094
|
+
}, this._stopPropagation = (e) => e.stopPropagation(), this._onTriggerClick = () => {
|
|
1095
|
+
this.readOnly || (this.filterable && !this.multiple ? this._focusFilterInput() : this.isOpen = !this.isOpen);
|
|
1096
|
+
};
|
|
1097
|
+
}
|
|
1098
|
+
// ==================== LIFECYCLE ====================
|
|
1099
|
+
willUpdate(e) {
|
|
1100
|
+
if (e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
|
|
1101
|
+
const t = this.inputValue.toLocaleLowerCase();
|
|
1102
|
+
this._filteredItems = this.items.filter(
|
|
1103
|
+
(o) => String(o[this.optionLabel] ?? "").toLocaleLowerCase().includes(t)
|
|
1104
|
+
);
|
|
1105
|
+
}
|
|
1106
|
+
}
|
|
1107
|
+
updated(e) {
|
|
1108
|
+
e.has("isOpen") && this.isOpen && this.filterable && this.multiple && this.shadowRoot?.querySelector(".combobox__search")?.focus();
|
|
1109
|
+
}
|
|
1110
|
+
connectedCallback() {
|
|
1111
|
+
super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
|
|
1112
|
+
}
|
|
1113
|
+
disconnectedCallback() {
|
|
1114
|
+
super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
|
|
1115
|
+
}
|
|
1116
|
+
// ==================== HELPERS ====================
|
|
1117
|
+
_closeDropdown() {
|
|
1118
|
+
this.isOpen = !1, this.focusedIndex = -1, this.filterable && (this.inputValue = "");
|
|
1119
|
+
}
|
|
1120
|
+
get _filterDisplayValue() {
|
|
1121
|
+
return this.isOpen ? this.inputValue : !this.multiple && this.selected.length ? String(this.selected[0][this.optionLabel]) : "";
|
|
1122
|
+
}
|
|
1123
|
+
_focusFilterInput() {
|
|
1124
|
+
this.updateComplete.then(() => {
|
|
1125
|
+
this.shadowRoot?.querySelector(".combobox__filter-input")?.focus();
|
|
1126
|
+
});
|
|
1127
|
+
}
|
|
1128
|
+
_scrollFocusedIntoView() {
|
|
1129
|
+
this.updateComplete.then(() => {
|
|
1130
|
+
this.shadowRoot?.querySelectorAll(".combobox__item")?.[this.focusedIndex]?.scrollIntoView({ block: "nearest" });
|
|
1131
|
+
});
|
|
1132
|
+
}
|
|
1133
|
+
// ==================== SELECTION ====================
|
|
1134
|
+
selectedItems() {
|
|
1135
|
+
return this.selected;
|
|
1136
|
+
}
|
|
1137
|
+
isSelected(e) {
|
|
1138
|
+
return this.selected.some((t) => t[this.optionValue] === e[this.optionValue]);
|
|
1139
|
+
}
|
|
1140
|
+
_selectItem(e, t) {
|
|
1141
|
+
t.stopPropagation();
|
|
1142
|
+
let o;
|
|
1143
|
+
this.multiple ? o = this.isSelected(e) ? this.selected.filter((r) => r[this.optionValue] !== e[this.optionValue]) : [...this.selected, e] : (o = [e], this.isOpen = !1, this.filterable && (this.inputValue = "")), this.setSelected(o);
|
|
1144
|
+
}
|
|
1145
|
+
setSelected(e) {
|
|
1146
|
+
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 }));
|
|
1147
|
+
}
|
|
1148
|
+
// ==================== RENDER PARTS ====================
|
|
1149
|
+
_renderTagList() {
|
|
1150
|
+
return l`
|
|
1151
|
+
<div class="combobox__tags">
|
|
1152
|
+
${this.selected.map((e) => l`
|
|
1153
|
+
<span class="combobox__tag">
|
|
1154
|
+
${e[this.optionLabel]}
|
|
1155
|
+
${this.readOnly ? u : l`
|
|
1156
|
+
<button
|
|
1157
|
+
class="combobox__tag-remove"
|
|
1158
|
+
@click=${(t) => this._removeTag(e, t)}
|
|
1159
|
+
aria-label="Remove"
|
|
1160
|
+
>
|
|
1161
|
+
<ui-icon name="uil-times" size="12"></ui-icon>
|
|
1162
|
+
</button>
|
|
1163
|
+
`}
|
|
1164
|
+
</span>
|
|
1165
|
+
`)}
|
|
1166
|
+
</div>
|
|
1167
|
+
`;
|
|
1168
|
+
}
|
|
1169
|
+
_renderTriggerContent() {
|
|
1170
|
+
return this.filterable && !this.multiple ? l`
|
|
1171
|
+
<input
|
|
1172
|
+
class="combobox__filter-input"
|
|
1173
|
+
type="text"
|
|
1174
|
+
.value=${this._filterDisplayValue}
|
|
1175
|
+
placeholder=${this.placeholder}
|
|
1176
|
+
?disabled=${this.readOnly}
|
|
1177
|
+
@focus=${this._onFilterFocus}
|
|
1178
|
+
@input=${this._onFilterInput}
|
|
1179
|
+
@keydown=${this._handleKeydown}
|
|
1180
|
+
@click=${this._stopPropagation}
|
|
1181
|
+
/>
|
|
1182
|
+
${!this.readOnly && this.selected.length ? l`
|
|
1183
|
+
<button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
|
|
1184
|
+
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
1185
|
+
</button>
|
|
1186
|
+
` : u}
|
|
1187
|
+
` : this.multiple && this.selected.length ? this._renderTagList() : !this.multiple && this.selected.length ? l`
|
|
1188
|
+
<span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
|
|
1189
|
+
${this.readOnly ? u : l`
|
|
1190
|
+
<button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
|
|
1191
|
+
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
1192
|
+
</button>
|
|
1193
|
+
`}
|
|
1194
|
+
` : l`<span class="combobox__placeholder">${this.placeholder}</span>`;
|
|
1195
|
+
}
|
|
1196
|
+
_renderDropdown() {
|
|
1197
|
+
return this.isOpen ? l`
|
|
1198
|
+
<div class="combobox__dropdown">
|
|
1199
|
+
${this.filterable && this.multiple ? l`
|
|
1200
|
+
<input
|
|
1201
|
+
class="combobox__search"
|
|
1202
|
+
type="text"
|
|
1203
|
+
placeholder=${this.placeholder}
|
|
1204
|
+
.value=${this.inputValue}
|
|
1205
|
+
@input=${this._onFilterInput}
|
|
1206
|
+
@keydown=${this._handleKeydown}
|
|
1207
|
+
@click=${this._stopPropagation}
|
|
1208
|
+
/>
|
|
1209
|
+
` : u}
|
|
1210
|
+
|
|
1211
|
+
<div class="combobox__list">
|
|
1212
|
+
${this._filteredItems.length === 0 ? l`<div class="combobox__empty">${this.emptyMessage}</div>` : this._filteredItems.map((e, t) => l`
|
|
1213
|
+
<div
|
|
1214
|
+
class="combobox__item
|
|
1215
|
+
${!this.multiple && this.isSelected(e) ? "combobox__item--selected" : ""}
|
|
1216
|
+
${t === this.focusedIndex ? "combobox__item--focused" : ""}"
|
|
1217
|
+
@click=${(o) => this._selectItem(e, o)}
|
|
1218
|
+
@mouseenter=${() => {
|
|
1219
|
+
this.focusedIndex = t;
|
|
1220
|
+
}}
|
|
1221
|
+
>
|
|
1222
|
+
${this.multiple ? l`
|
|
1223
|
+
<logosphere-checkbox
|
|
1224
|
+
.checked=${this.isSelected(e)}
|
|
1225
|
+
.value=${e[this.optionValue]}
|
|
1226
|
+
@click=${this._stopPropagation}
|
|
1227
|
+
></logosphere-checkbox>
|
|
1228
|
+
` : u}
|
|
1229
|
+
${e[this.optionLabel]}
|
|
1230
|
+
</div>
|
|
1231
|
+
`)}
|
|
1232
|
+
</div>
|
|
1233
|
+
</div>
|
|
1234
|
+
` : u;
|
|
1235
|
+
}
|
|
1236
|
+
// ==================== MAIN RENDER ====================
|
|
1237
|
+
render() {
|
|
1238
|
+
const e = [
|
|
1239
|
+
"combobox__label",
|
|
1240
|
+
this.required && !this.readOnly ? "combobox__label--required" : ""
|
|
1241
|
+
].filter(Boolean).join(" "), t = [
|
|
1242
|
+
"combobox__trigger",
|
|
1243
|
+
`combobox__trigger--${this.size}`,
|
|
1244
|
+
this.readOnly ? "combobox__trigger--readonly" : "",
|
|
1245
|
+
!this.readOnly && this.isOpen ? "combobox__trigger--open" : ""
|
|
1246
|
+
].filter(Boolean).join(" ");
|
|
1247
|
+
return l`
|
|
1248
|
+
<div class="combobox">
|
|
1249
|
+
${this.label ? l`
|
|
1250
|
+
<label for="${this.inputId}" class="${e}">${this.label}</label>
|
|
1251
|
+
` : u}
|
|
1252
|
+
|
|
1253
|
+
<div class="combobox__wrapper">
|
|
1254
|
+
<div
|
|
1255
|
+
class="${t}"
|
|
1256
|
+
tabindex="${this.readOnly || this.filterable ? -1 : 0}"
|
|
1257
|
+
@click=${this._onTriggerClick}
|
|
1258
|
+
@keydown=${this.filterable ? u : this._handleKeydown}
|
|
1259
|
+
>
|
|
1260
|
+
${this._renderTriggerContent()}
|
|
1261
|
+
<span class="combobox__chevron ${this.isOpen ? "combobox__chevron--open" : ""}">
|
|
1262
|
+
<ui-icon name="uil-angle-down" size="16"></ui-icon>
|
|
1263
|
+
</span>
|
|
1264
|
+
</div>
|
|
1265
|
+
|
|
1266
|
+
${this._renderDropdown()}
|
|
1267
|
+
</div>
|
|
1268
|
+
</div>
|
|
1269
|
+
`;
|
|
1270
|
+
}
|
|
1271
|
+
};
|
|
1272
|
+
E.styles = [T`${P(At)}`];
|
|
1273
|
+
L([
|
|
1274
|
+
s({ type: String })
|
|
1275
|
+
], E.prototype, "label", 2);
|
|
1276
|
+
L([
|
|
1277
|
+
s({ type: String })
|
|
1278
|
+
], E.prototype, "placeholder", 2);
|
|
1279
|
+
L([
|
|
1280
|
+
s({ type: Boolean })
|
|
1281
|
+
], E.prototype, "required", 2);
|
|
1282
|
+
L([
|
|
1283
|
+
s({ type: Boolean })
|
|
1284
|
+
], E.prototype, "readOnly", 2);
|
|
1285
|
+
L([
|
|
1286
|
+
s({ type: Boolean })
|
|
1287
|
+
], E.prototype, "multiple", 2);
|
|
1288
|
+
L([
|
|
1289
|
+
s({ type: Boolean })
|
|
1290
|
+
], E.prototype, "filterable", 2);
|
|
1291
|
+
L([
|
|
1292
|
+
s({ type: String })
|
|
1293
|
+
], E.prototype, "optionLabel", 2);
|
|
1294
|
+
L([
|
|
1295
|
+
s({ type: String })
|
|
1296
|
+
], E.prototype, "optionValue", 2);
|
|
1297
|
+
L([
|
|
1298
|
+
s({ type: String })
|
|
1299
|
+
], E.prototype, "emptyMessage", 2);
|
|
1300
|
+
L([
|
|
1301
|
+
s({ type: Array })
|
|
1302
|
+
], E.prototype, "items", 2);
|
|
1303
|
+
L([
|
|
1304
|
+
s({ type: String })
|
|
1305
|
+
], E.prototype, "size", 2);
|
|
1306
|
+
L([
|
|
1307
|
+
m()
|
|
1308
|
+
], E.prototype, "selected", 2);
|
|
1309
|
+
L([
|
|
1310
|
+
m()
|
|
1311
|
+
], E.prototype, "inputValue", 2);
|
|
1312
|
+
L([
|
|
1313
|
+
m()
|
|
1314
|
+
], E.prototype, "isOpen", 2);
|
|
1315
|
+
L([
|
|
1316
|
+
m()
|
|
1317
|
+
], E.prototype, "focusedIndex", 2);
|
|
1318
|
+
E = L([
|
|
1319
|
+
Y("logosphere-combobox")
|
|
1320
|
+
], E);
|
|
1321
|
+
const Ft = ":host{display:block;z-index:9999}.chatbot{font-family:var(--font-family-base)}.chatbot__overlay{position:fixed;inset:0;background-color:#0003;z-index:var(--z-index-modal-backdrop)}.chatbot__launcher{position:fixed;z-index:var(--z-index-modal);display:flex;align-items:center;gap:var(--spacing-4);padding-left:var(--spacing-4);padding-right:var(--spacing-4);height:66px;color:#fff;border-radius:var(--radius-xl);cursor:pointer;box-shadow:var(--shadow-base);background-color:var(--color-body-bg);overflow:hidden;transition:box-shadow var(--transition-speed-fast) var(--transition-timing)}.chatbot__launcher:hover{box-shadow:var(--shadow-md)}.chatbot__launcher--draggable{cursor:move}.chatbot__launcher--hidden{visibility:hidden;width:72px;height:66px;justify-content:center;padding:0}.chatbot__launcher-icon{width:40px;height:34px;flex-shrink:0}.chatbot__launcher-text{display:flex;flex-direction:column}.chatbot__launcher-title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl);margin:0;line-height:24px;white-space:nowrap;color:var(--color-body-text)}.chatbot__launcher-subtitle{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);margin:0;line-height:20px;white-space:nowrap;color:var(--color-tertiary)}.chatbot__window{position:fixed;z-index:var(--z-index-modal);display:flex;flex-direction:column;box-shadow:var(--shadow-xl);border-radius:var(--radius-md);overflow:hidden;background-color:var(--color-body-bg)}.chatbot__window--hidden{display:none}.chatbot__window--fullscreen{inset:80px 50px;width:auto;height:auto}.chatbot__resize-top{position:absolute;top:0;left:0;right:0;height:8px;cursor:ns-resize;z-index:50;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__resize-top:hover{background-color:#0000000d}.chatbot__resize-side{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:50;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__resize-side:hover{background-color:#0000000d}.chatbot__resize-side--left{left:0}.chatbot__resize-side--right{right:0}.chatbot__resize-corner{position:absolute;top:0;width:16px;height:16px;z-index:50;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__resize-corner:hover{background-color:#0000001a}.chatbot__resize-corner--nwse{left:0;cursor:nwse-resize}.chatbot__resize-corner--nesw{right:0;cursor:nesw-resize}.chatbot__header{height:74px;display:flex;align-items:center;justify-content:space-between;padding-left:var(--spacing-5);padding-right:var(--spacing-4);gap:var(--spacing-4);flex-shrink:0;background-color:var(--color-body-bg);border-bottom:1px solid var(--color-border)}.chatbot__header-info{display:flex;align-items:center;gap:var(--spacing-4)}.chatbot__header-logo{width:50px;height:41px}.chatbot__header-title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl);margin:0;line-height:24px;color:var(--color-body-text)}.chatbot__header-subtitle{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);margin:0;line-height:20px;color:var(--color-tertiary)}.chatbot__header-actions{display:flex;align-items:center;gap:var(--spacing-2)}.chatbot__body{flex:1;display:flex;flex-direction:column;background-color:var(--color-body-bg);position:relative;overflow:hidden}.chatbot__product{padding:var(--spacing-3);padding-bottom:0;flex-shrink:0;margin:0 var(--spacing-3)}.chatbot__messages{flex:1;display:flex;flex-direction:column;gap:var(--spacing-3);margin-top:var(--spacing-4);padding:var(--spacing-4);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.chatbot__messages::-webkit-scrollbar{display:none}.chatbot__message{display:flex}.chatbot__message--user{justify-content:flex-end}.chatbot__message--assistant,.chatbot__message--system{justify-content:flex-start}.chatbot__bubble{position:relative;color:var(--color-body-text);max-width:85%;border-radius:var(--radius-md);padding:var(--spacing-4);font-size:var(--font-size-sm);line-height:20px;font-weight:var(--font-weight-medium)}.chatbot__bubble--user{background-color:var(--color-primary);color:#fff;border-bottom-right-radius:0;border-top-right-radius:var(--radius-xl);border-top-left-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl)}.chatbot__bubble--user a{color:#ffffffe6}.chatbot__bubble--assistant,.chatbot__bubble--system{background-color:var(--color-tertiary-bg);border-bottom-left-radius:0;border-top-right-radius:var(--radius-xl);border-top-left-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl)}.chatbot__message-content p{margin:0}.chatbot__message-content ol{list-style-type:decimal;margin:0;padding-left:var(--spacing-5)}.chatbot__message-content ul{list-style-type:disc;margin:0;padding-left:var(--spacing-5)}.chatbot__message-content li{padding-left:var(--spacing-1)}.chatbot__message-content a{color:var(--color-primary);text-decoration:underline;transition:color var(--transition-speed-fast) var(--transition-timing)}.chatbot__message-content a:hover{color:var(--color-primary-hover)}.chatbot__feedback{display:flex;align-items:center;gap:var(--spacing-2);padding-top:var(--spacing-2)}.chatbot__typing-wrapper{display:flex;justify-content:flex-start}.chatbot__typing{background-color:var(--color-tertiary-bg);padding:var(--spacing-3);border-radius:var(--radius-xl);border-bottom-left-radius:0;display:inline-flex;align-items:center;gap:2px}.chatbot__typing-dot{display:inline-block;width:6px;height:6px;background-color:var(--color-gray-300);border-radius:var(--radius-full);animation:chatbot-typing 1.4s infinite ease-in-out both;margin:0 2px}.chatbot__typing-dot:nth-child(1){animation-delay:-.32s}.chatbot__typing-dot:nth-child(2){animation-delay:-.16s}@keyframes chatbot-typing{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.chatbot__input-area{padding:var(--spacing-4);padding-top:var(--spacing-2);padding-bottom:var(--spacing-1);background-color:var(--color-body-bg)}.chatbot__input-wrapper{position:relative;display:flex;align-items:center;gap:var(--spacing-2);background-color:var(--color-tertiary-bg);border-radius:var(--radius-md);padding:var(--spacing-2);border:1px solid transparent;transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.chatbot__input-wrapper:focus-within{background-color:var(--color-body-bg);border-color:var(--color-border)}.chatbot__input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-body-text)}.chatbot__input::placeholder{color:var(--color-tertiary)}.chatbot__input:disabled{opacity:.5;cursor:not-allowed}.chatbot__footer{display:flex;align-items:center;justify-content:center;padding-bottom:var(--spacing-2)}.chatbot__footer-text{margin:0;padding:0;color:var(--color-secondary);font-size:var(--font-size-xs);font-family:var(--font-family-base)}";
|
|
1322
|
+
var qt = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, z = (e, t, o, r) => {
|
|
1323
|
+
for (var i = r > 1 ? void 0 : r ? Ht(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
1324
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
1325
|
+
return r && i && qt(t, o, i), i;
|
|
1326
|
+
};
|
|
1327
|
+
let v = class extends O {
|
|
1328
|
+
constructor() {
|
|
1329
|
+
super(...arguments), this.returnUri = "", this.questionPrompt = "", this.minimizedIconOnly = !1, this.draggable = !1, this.resizable = !1, this.products = [], this.openInitially = !1, this.showFeedbackButtons = !1, this.open = !1, this.fullscreen = !1, this.messages = [], this.isLoading = !1, this.inputText = "", this.selectedProductId = "", this.windowWidth = 440, this.windowHeight = Math.min(700, window.innerHeight - 40), this.position = { right: 20, bottom: 20 }, this.isDragging = !1, this.screenWidth = window.innerWidth, this.dragStartPos = { x: 0, y: 0 }, this.initialPosition = { right: 0, bottom: 0 }, this.isResizing = !1, this.resizeDirection = "horizontal", this.resizeStartWidth = 0, this.resizeStartHeight = 0, this.onWindowResize = () => {
|
|
1330
|
+
this.screenWidth = window.innerWidth;
|
|
1331
|
+
const e = window.innerHeight - 40;
|
|
1332
|
+
this.windowHeight > e && (this.windowHeight = e);
|
|
1333
|
+
}, this.onToggle = () => {
|
|
1334
|
+
this.open = !this.open, this.scrollToBottom();
|
|
1335
|
+
}, this.onClose = () => {
|
|
1336
|
+
this.open = !1, this.fullscreen = !1;
|
|
1337
|
+
}, this.onToggleFullscreen = () => {
|
|
1338
|
+
this.fullscreen = !this.fullscreen;
|
|
1339
|
+
}, this.onMouseMove = (e) => {
|
|
1340
|
+
if (this.isDragging) {
|
|
1341
|
+
const t = this.dragStartPos.x - e.clientX, o = this.dragStartPos.y - e.clientY, i = this.shadowRoot?.querySelector(".chatbot__launcher")?.getBoundingClientRect(), a = i?.width || 72, n = i?.height || 66;
|
|
1342
|
+
this.position = {
|
|
1343
|
+
right: Math.max(0, Math.min(window.innerWidth - a, this.initialPosition.right + t)),
|
|
1344
|
+
bottom: Math.max(0, Math.min(window.innerHeight - n, this.initialPosition.bottom + o))
|
|
1345
|
+
};
|
|
1346
|
+
} else if (this.isResizing) {
|
|
1347
|
+
const t = this.dragStartPos.x - e.clientX, o = this.dragStartPos.y - e.clientY;
|
|
1348
|
+
if (this.resizeDirection === "horizontal" || this.resizeDirection === "both") {
|
|
1349
|
+
const r = this.position.right < this.screenWidth / 2;
|
|
1350
|
+
this.windowWidth = Math.max(300, this.resizeStartWidth + (r ? t : -t));
|
|
1351
|
+
}
|
|
1352
|
+
(this.resizeDirection === "vertical" || this.resizeDirection === "both") && (this.windowHeight = Math.max(400, this.resizeStartHeight + o));
|
|
1353
|
+
}
|
|
1354
|
+
}, this.onMouseUp = (e) => {
|
|
1355
|
+
this.isDragging ? (this.isDragging = !1, window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onMouseUp), Math.hypot(e.clientX - this.dragStartPos.x, e.clientY - this.dragStartPos.y) < 5 && this.onToggle()) : this.isResizing && (this.isResizing = !1, window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onMouseUp));
|
|
1356
|
+
}, this.handleKeyDown = (e) => {
|
|
1357
|
+
e.key === "Enter" && !e.shiftKey && (e.preventDefault(), this.sendMessage());
|
|
1358
|
+
}, this.onInput = (e) => {
|
|
1359
|
+
const t = e.target;
|
|
1360
|
+
this.inputText = t ? t.value : e.detail;
|
|
1361
|
+
}, this.onCopyMessage = (e) => {
|
|
1362
|
+
navigator.clipboard.writeText(e);
|
|
1363
|
+
};
|
|
1364
|
+
}
|
|
1365
|
+
connectedCallback() {
|
|
1366
|
+
super.connectedCallback(), window.addEventListener("resize", this.onWindowResize);
|
|
1367
|
+
}
|
|
1368
|
+
disconnectedCallback() {
|
|
1369
|
+
super.disconnectedCallback(), window.removeEventListener("resize", this.onWindowResize), window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onMouseUp);
|
|
1370
|
+
}
|
|
1371
|
+
async firstUpdated() {
|
|
1372
|
+
this.products.length === 1 && (this.selectedProductId = this.products[0].id), this.open = this.openInitially, this.open && await this.initConversation();
|
|
1373
|
+
}
|
|
1374
|
+
updated(e) {
|
|
1375
|
+
e.has("products") && this.handleProductUpdate(), e.has("messages") && this.scrollToBottom(), e.has("open") && this.open && !this.conversationId && this.initConversation();
|
|
1376
|
+
}
|
|
1377
|
+
// ==================== PRODUCT ====================
|
|
1378
|
+
handleProductUpdate() {
|
|
1379
|
+
if (!this.products.length) return;
|
|
1380
|
+
const e = this.products.some((t) => t.id === this.selectedProductId);
|
|
1381
|
+
this.products.length === 1 && (this.selectedProductId = this.products[0].id), e || (this.messages = [], this.conversationId = void 0, this.open && this.initConversation()), requestAnimationFrame(() => this.updateComboboxItems());
|
|
1382
|
+
}
|
|
1383
|
+
updateComboboxItems() {
|
|
1384
|
+
const e = this.productEl;
|
|
1385
|
+
if (!e || this.products?.length <= 1) return;
|
|
1386
|
+
const t = this.products.map((r) => ({ value: r.id, label: r.name }));
|
|
1387
|
+
e.items = t;
|
|
1388
|
+
const o = e.selectedItems?.() || [];
|
|
1389
|
+
if (o.length > 0) {
|
|
1390
|
+
const r = o[0]?.value;
|
|
1391
|
+
!this.products.some((a) => a.id === r) && e.setSelected && e.setSelected([]);
|
|
1392
|
+
}
|
|
1393
|
+
}
|
|
1394
|
+
async onProductChange(e) {
|
|
1395
|
+
const t = e.detail?.selected?.[0]?.value;
|
|
1396
|
+
t && t !== this.selectedProductId && (this.selectedProductId = t);
|
|
1397
|
+
}
|
|
1398
|
+
// ==================== DRAG ====================
|
|
1399
|
+
onMouseDown(e) {
|
|
1400
|
+
this.draggable && (e.preventDefault(), this.isDragging = !0, this.dragStartPos = { x: e.clientX, y: e.clientY }, this.initialPosition = { ...this.position }, window.addEventListener("mousemove", this.onMouseMove), window.addEventListener("mouseup", this.onMouseUp));
|
|
1401
|
+
}
|
|
1402
|
+
startResize(e, t) {
|
|
1403
|
+
this.resizable && (e.preventDefault(), e.stopPropagation(), this.isResizing = !0, this.resizeDirection = t, this.dragStartPos = { x: e.clientX, y: e.clientY }, this.resizeStartWidth = this.windowWidth, this.resizeStartHeight = this.windowHeight, window.addEventListener("mousemove", this.onMouseMove), window.addEventListener("mouseup", this.onMouseUp));
|
|
1404
|
+
}
|
|
1405
|
+
// ==================== CHAT API ====================
|
|
1406
|
+
async ensureToken(e = !1) {
|
|
1407
|
+
const t = "logosphere_chatbot_token";
|
|
1408
|
+
if (e && (this.assertionToken = void 0, localStorage.removeItem(t)), !e) {
|
|
1409
|
+
const i = localStorage.getItem(t);
|
|
1410
|
+
if (i) {
|
|
1411
|
+
this.assertionToken = i;
|
|
1412
|
+
return;
|
|
1413
|
+
}
|
|
1414
|
+
}
|
|
1415
|
+
const r = await (await fetch(`${this.returnUri}/api/chat/start`)).json();
|
|
1416
|
+
if (!r.Success || !r.Data?.Token) throw new Error("Token alınamadı");
|
|
1417
|
+
this.assertionToken = r.Data.Token, localStorage.setItem(t, this.assertionToken);
|
|
1418
|
+
}
|
|
1419
|
+
async postChat(e) {
|
|
1420
|
+
await this.ensureToken();
|
|
1421
|
+
const t = `${this.returnUri}/api/chat/completions`, o = () => fetch(t, {
|
|
1422
|
+
method: "POST",
|
|
1423
|
+
headers: {
|
|
1424
|
+
"Content-Type": "application/json",
|
|
1425
|
+
client_assertion: this.assertionToken,
|
|
1426
|
+
client_assertion_type: "urn:ietf:params:oauth:client-assertion-type:jwt-bearer"
|
|
1427
|
+
},
|
|
1428
|
+
body: JSON.stringify(e)
|
|
1429
|
+
});
|
|
1430
|
+
let r = await o();
|
|
1431
|
+
if (r.status === 401 && (await this.ensureToken(!0), r = await o()), !r.ok) throw new Error(`HTTP ${r.status}`);
|
|
1432
|
+
return r.json();
|
|
1433
|
+
}
|
|
1434
|
+
async initConversation() {
|
|
1435
|
+
if (!this.isLoading) {
|
|
1436
|
+
this.isLoading = !0;
|
|
1437
|
+
try {
|
|
1438
|
+
await this.ensureToken();
|
|
1439
|
+
const e = await this.postChat({
|
|
1440
|
+
ChatCompletionType: "NewConversation",
|
|
1441
|
+
Context: this.selectedProductId,
|
|
1442
|
+
QuestionPrompt: this.questionPrompt
|
|
1443
|
+
});
|
|
1444
|
+
this.conversationId = e.Data.ConversationId;
|
|
1445
|
+
const t = e.Data.Choices?.[0]?.Message?.Content;
|
|
1446
|
+
t && this.addMessage(t, "assistant");
|
|
1447
|
+
} catch {
|
|
1448
|
+
this.addMessage("Bir hata oluştu, lütfen tekrar deneyiniz.", "system");
|
|
1449
|
+
} finally {
|
|
1450
|
+
this.isLoading = !1;
|
|
1451
|
+
}
|
|
1452
|
+
}
|
|
1453
|
+
}
|
|
1454
|
+
async sendMessage() {
|
|
1455
|
+
const e = this.inputText.trim();
|
|
1456
|
+
if (!(!e || !this.conversationId || this.isLoading)) {
|
|
1457
|
+
if (!this.selectedProductId) {
|
|
1458
|
+
this.addMessage("Lütfen önce bir ürün seçiniz.", "system");
|
|
1459
|
+
return;
|
|
1460
|
+
}
|
|
1461
|
+
this.addMessage(e, "user"), this.inputText = "", this.isLoading = !0;
|
|
1462
|
+
try {
|
|
1463
|
+
const o = (await this.postChat({
|
|
1464
|
+
ChatCompletionType: "ConversationUpdate",
|
|
1465
|
+
Content: e,
|
|
1466
|
+
Context: this.selectedProductId,
|
|
1467
|
+
ConversationId: this.conversationId,
|
|
1468
|
+
QuestionPrompt: this.questionPrompt
|
|
1469
|
+
})).Data?.Choices?.[0]?.Message?.Content;
|
|
1470
|
+
this.addMessage(o || "Cevap alınamadı.", "assistant");
|
|
1471
|
+
} catch {
|
|
1472
|
+
this.addMessage("Bağlantı hatası.", "system");
|
|
1473
|
+
} finally {
|
|
1474
|
+
this.isLoading = !1;
|
|
1475
|
+
}
|
|
1476
|
+
}
|
|
1477
|
+
}
|
|
1478
|
+
addMessage(e, t) {
|
|
1479
|
+
this.messages = [...this.messages, { content: e, role: t, timestamp: Date.now() }];
|
|
1480
|
+
}
|
|
1481
|
+
scrollToBottom() {
|
|
1482
|
+
setTimeout(() => {
|
|
1483
|
+
this.chatContainer && (this.chatContainer.scrollTop = this.chatContainer.scrollHeight);
|
|
1484
|
+
}, 0);
|
|
1485
|
+
}
|
|
1486
|
+
// ==================== CONTENT FORMATTER ====================
|
|
1487
|
+
formatContent(e) {
|
|
1488
|
+
if (!e) return "";
|
|
1489
|
+
const o = e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").split(`
|
|
1490
|
+
`);
|
|
1491
|
+
let r = "", i = !1, a = "";
|
|
1492
|
+
for (const n of o) {
|
|
1493
|
+
const d = n.trim() === "", c = n.match(/^\s*\d+\.\s+(.*)/), f = n.match(/^\s*[-*]\s+(.*)/);
|
|
1494
|
+
if (c || f) {
|
|
1495
|
+
const b = c ? "ol" : "ul";
|
|
1496
|
+
(!i || a !== b) && (i && (r += `</${a}>`), r += `<${b}>`, i = !0, a = b), r += `<li>${c ? c[1] : f[1]}</li>`;
|
|
1497
|
+
} else
|
|
1498
|
+
d ? i || (r += "<br>") : (i && (r += `</${a}>`, i = !1, a = ""), r += `<p>${n}</p>`);
|
|
1499
|
+
}
|
|
1500
|
+
return i && (r += `</${a}>`), r.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>").replace(/\*(.*?)\*/g, "<em>$1</em>").replace(
|
|
1501
|
+
/\[([^\]]+)\]\(([^)]+)\)/g,
|
|
1502
|
+
'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
|
|
1503
|
+
);
|
|
1504
|
+
}
|
|
1505
|
+
// ==================== RENDER ====================
|
|
1506
|
+
render() {
|
|
1507
|
+
const e = this.position.right < this.screenWidth / 2;
|
|
1508
|
+
return l`
|
|
1509
|
+
<div class="chatbot">
|
|
1510
|
+
${this.renderOverlay()}
|
|
1511
|
+
${this.renderLauncher()}
|
|
1512
|
+
${this.renderWindow(e)}
|
|
1513
|
+
</div>
|
|
1514
|
+
`;
|
|
1515
|
+
}
|
|
1516
|
+
renderOverlay() {
|
|
1517
|
+
return this.open || this.fullscreen ? l`<div class="chatbot__overlay" @click=${this.onToggle}></div>` : "";
|
|
1518
|
+
}
|
|
1519
|
+
renderLauncher() {
|
|
1520
|
+
const e = [
|
|
1521
|
+
"chatbot__launcher",
|
|
1522
|
+
this.draggable ? "chatbot__launcher--draggable" : "",
|
|
1523
|
+
this.open ? "chatbot__launcher--hidden" : ""
|
|
1524
|
+
].filter(Boolean).join(" ");
|
|
1525
|
+
return l`
|
|
1526
|
+
<div
|
|
1527
|
+
class="${e}"
|
|
1528
|
+
style="right: ${this.position.right}px; bottom: ${this.position.bottom}px;"
|
|
1529
|
+
@mousedown=${this.onMouseDown}
|
|
1530
|
+
@click=${this.draggable ? null : this.onToggle}
|
|
1531
|
+
aria-expanded=${this.open ? "true" : "false"}
|
|
1532
|
+
>
|
|
1533
|
+
<img class="chatbot__launcher-icon" src="${v.ICONS.launcher}" alt="chatbot" />
|
|
1534
|
+
${!this.open && !this.minimizedIconOnly ? l`
|
|
1535
|
+
<div class="chatbot__launcher-text">
|
|
1536
|
+
<p class="chatbot__launcher-title">Logo</p>
|
|
1537
|
+
<p class="chatbot__launcher-subtitle">Dijital Danışman</p>
|
|
1538
|
+
</div>
|
|
1539
|
+
` : ""}
|
|
1540
|
+
</div>
|
|
1541
|
+
`;
|
|
1542
|
+
}
|
|
1543
|
+
renderWindow(e) {
|
|
1544
|
+
const t = [
|
|
1545
|
+
"chatbot__window",
|
|
1546
|
+
this.open ? "" : "chatbot__window--hidden",
|
|
1547
|
+
this.fullscreen ? "chatbot__window--fullscreen" : ""
|
|
1548
|
+
].filter(Boolean).join(" "), o = this.fullscreen ? "" : `bottom: 20px; height: ${this.windowHeight}px; width: ${this.windowWidth}px; ${e ? "right: 20px;" : "left: 20px;"}`;
|
|
1549
|
+
return l`
|
|
1550
|
+
<div class="${t}" style="${o}">
|
|
1551
|
+
${this.renderResizeHandles(e)}
|
|
1552
|
+
${this.renderHeader()}
|
|
1553
|
+
<div class="chatbot__body">
|
|
1554
|
+
${this.renderProductSelector()}
|
|
1555
|
+
${this.renderChatArea()}
|
|
1556
|
+
${this.renderInputArea()}
|
|
1557
|
+
</div>
|
|
1558
|
+
</div>
|
|
1559
|
+
`;
|
|
1560
|
+
}
|
|
1561
|
+
renderResizeHandles(e) {
|
|
1562
|
+
return this.fullscreen || !this.resizable ? "" : l`
|
|
1563
|
+
<div class="chatbot__resize-top"
|
|
1564
|
+
@mousedown=${(t) => this.startResize(t, "vertical")}></div>
|
|
1565
|
+
<div class="chatbot__resize-side ${e ? "chatbot__resize-side--left" : "chatbot__resize-side--right"}"
|
|
1566
|
+
@mousedown=${(t) => this.startResize(t, "horizontal")}></div>
|
|
1567
|
+
<div class="chatbot__resize-corner ${e ? "chatbot__resize-corner--nwse" : "chatbot__resize-corner--nesw"}"
|
|
1568
|
+
@mousedown=${(t) => this.startResize(t, "both")}></div>
|
|
1569
|
+
`;
|
|
1570
|
+
}
|
|
1571
|
+
renderHeader() {
|
|
1572
|
+
return l`
|
|
1573
|
+
<div class="chatbot__header">
|
|
1574
|
+
<div class="chatbot__header-info">
|
|
1575
|
+
<img class="chatbot__header-logo" alt="logo" src="${v.ICONS.launcher}" />
|
|
1576
|
+
<div>
|
|
1577
|
+
<p class="chatbot__header-title">Logo</p>
|
|
1578
|
+
<p class="chatbot__header-subtitle">Dijital Danışman</p>
|
|
1579
|
+
</div>
|
|
1580
|
+
</div>
|
|
1581
|
+
<div class="chatbot__header-actions">
|
|
1582
|
+
<logosphere-button
|
|
1583
|
+
iconOnly="true"
|
|
1584
|
+
size="sm"
|
|
1585
|
+
variant="text"
|
|
1586
|
+
theme="--color-light-rgb"
|
|
1587
|
+
title=${this.fullscreen ? "Küçült" : "Tam Ekran"}
|
|
1588
|
+
@click=${this.onToggleFullscreen}
|
|
1589
|
+
>
|
|
1590
|
+
<ui-icon name="${this.fullscreen ? "uil-compress-alt" : "uil-expand-alt"}" size="16"></ui-icon>
|
|
1591
|
+
</logosphere-button>
|
|
1592
|
+
<logosphere-button
|
|
1593
|
+
iconOnly="true"
|
|
1594
|
+
size="sm"
|
|
1595
|
+
variant="text"
|
|
1596
|
+
theme="--color-light"
|
|
1597
|
+
title="Kapat"
|
|
1598
|
+
@click=${this.onClose}
|
|
1599
|
+
>
|
|
1600
|
+
<ui-icon name="uil-times" size="16"></ui-icon>
|
|
1601
|
+
</logosphere-button>
|
|
1602
|
+
</div>
|
|
1603
|
+
</div>
|
|
1604
|
+
`;
|
|
1605
|
+
}
|
|
1606
|
+
renderProductSelector() {
|
|
1607
|
+
return l`
|
|
1608
|
+
<div class="chatbot__product">
|
|
1609
|
+
${this.products.length > 1 ? l`
|
|
1610
|
+
<logosphere-combobox
|
|
1611
|
+
id="product"
|
|
1612
|
+
.items=${this.products.map((e) => ({ value: e.id, label: e.name }))}
|
|
1613
|
+
optionValue="value"
|
|
1614
|
+
optionLabel="label"
|
|
1615
|
+
placeholder="Ürün seçiniz"
|
|
1616
|
+
@selected=${this.onProductChange}
|
|
1617
|
+
></logosphere-combobox>
|
|
1618
|
+
` : l`
|
|
1619
|
+
<logosphere-input
|
|
1620
|
+
id="product"
|
|
1621
|
+
placeholder="Ürün seçiniz"
|
|
1622
|
+
.value=${this.products.length === 1 ? this.products[0].name : ""}
|
|
1623
|
+
readOnly="true"
|
|
1624
|
+
></logosphere-input>
|
|
1625
|
+
`}
|
|
1626
|
+
</div>
|
|
1627
|
+
`;
|
|
1628
|
+
}
|
|
1629
|
+
renderChatArea() {
|
|
1630
|
+
return l`
|
|
1631
|
+
<div id="chat-container" class="chatbot__messages">
|
|
1632
|
+
${this.messages.map((e) => this.renderMessage(e))}
|
|
1633
|
+
${this.isLoading ? this.renderTypingIndicator() : ""}
|
|
1634
|
+
</div>
|
|
1635
|
+
`;
|
|
1636
|
+
}
|
|
1637
|
+
renderMessage(e) {
|
|
1638
|
+
const t = [
|
|
1639
|
+
"chatbot__bubble",
|
|
1640
|
+
`chatbot__bubble--${e.role}`
|
|
1641
|
+
].join(" ");
|
|
1642
|
+
return l`
|
|
1643
|
+
<div class="chatbot__message chatbot__message--${e.role}">
|
|
1644
|
+
<div class="${t}">
|
|
1645
|
+
<div class="chatbot__message-content">
|
|
1646
|
+
${at(this.formatContent(e.content))}
|
|
1647
|
+
</div>
|
|
1648
|
+
${this.showFeedbackButtons && e.role === "assistant" ? this.renderFeedbackButtons(e) : ""}
|
|
1649
|
+
</div>
|
|
1650
|
+
</div>
|
|
1651
|
+
`;
|
|
1652
|
+
}
|
|
1653
|
+
renderFeedbackButtons(e) {
|
|
1654
|
+
return l`
|
|
1655
|
+
<div class="chatbot__feedback">
|
|
1656
|
+
<logosphere-button
|
|
1657
|
+
@click=${() => this.onCopyMessage(e.content)}
|
|
1658
|
+
title="Kopyala"
|
|
1659
|
+
iconOnly="true"
|
|
1660
|
+
size="sm"
|
|
1661
|
+
theme="--color-light-rgb"
|
|
1662
|
+
>
|
|
1663
|
+
<ui-icon name="uil-copy" size="14"></ui-icon>
|
|
1664
|
+
</logosphere-button>
|
|
1665
|
+
<logosphere-button title="Like" iconOnly="true" size="sm" theme="--color-light-rgb">
|
|
1666
|
+
<ui-icon name="uil-thumbs-up" size="14"></ui-icon>
|
|
1667
|
+
</logosphere-button>
|
|
1668
|
+
<logosphere-button title="Dislike" iconOnly="true" size="sm" theme="--color-light-rgb">
|
|
1669
|
+
<ui-icon name="uil-thumbs-down" size="14"></ui-icon>
|
|
1670
|
+
</logosphere-button>
|
|
1671
|
+
</div>
|
|
1672
|
+
`;
|
|
1673
|
+
}
|
|
1674
|
+
renderTypingIndicator() {
|
|
1675
|
+
return l`
|
|
1676
|
+
<div class="chatbot__typing-wrapper">
|
|
1677
|
+
<div class="chatbot__typing">
|
|
1678
|
+
<span class="chatbot__typing-dot"></span>
|
|
1679
|
+
<span class="chatbot__typing-dot"></span>
|
|
1680
|
+
<span class="chatbot__typing-dot"></span>
|
|
1681
|
+
</div>
|
|
1682
|
+
</div>
|
|
1683
|
+
`;
|
|
1684
|
+
}
|
|
1685
|
+
renderInputArea() {
|
|
1686
|
+
return l`
|
|
1687
|
+
<div class="chatbot__input-area">
|
|
1688
|
+
<div class="chatbot__input-wrapper">
|
|
1689
|
+
<input
|
|
1690
|
+
class="chatbot__input"
|
|
1691
|
+
placeholder=${this.selectedProductId ? "Bir şeyler yazın..." : "Lütfen ürün seçiniz..."}
|
|
1692
|
+
.value=${this.inputText}
|
|
1693
|
+
@input=${this.onInput}
|
|
1694
|
+
@keydown=${this.handleKeyDown}
|
|
1695
|
+
?disabled=${!this.selectedProductId}
|
|
1696
|
+
/>
|
|
1697
|
+
<logosphere-button
|
|
1698
|
+
iconOnly="true"
|
|
1699
|
+
size="lg"
|
|
1700
|
+
variant="text"
|
|
1701
|
+
theme="--color-light"
|
|
1702
|
+
title="Gönder"
|
|
1703
|
+
@click=${this.sendMessage}
|
|
1704
|
+
?disabled=${!this.selectedProductId || !this.inputText.trim()}
|
|
1705
|
+
>
|
|
1706
|
+
<ui-icon name="uil-arrow-circle-right" size="20"></ui-icon>
|
|
1707
|
+
</logosphere-button>
|
|
1708
|
+
</div>
|
|
1709
|
+
</div>
|
|
1710
|
+
<div class="chatbot__footer">
|
|
1711
|
+
<p class="chatbot__footer-text">İçerik Yapay Zeka ile Üretilmiştir</p>
|
|
1712
|
+
</div>
|
|
1713
|
+
`;
|
|
1714
|
+
}
|
|
1715
|
+
};
|
|
1716
|
+
v.styles = [T`${P(Ft)}`];
|
|
1717
|
+
v.ICONS = {
|
|
1718
|
+
launcher: "data:image/svg+xml,%3Csvg%20width%3D%2251%22%20height%3D%2242%22%20viewBox%3D%220%200%2051%2042%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M38.457%200C40.0338%200%2041.542%200.293293%2042.9302%200.8283L49.15%206.07675C50.2611%207.93912%2050.8994%2010.1162%2050.8994%2012.4424V23.084C50.8994%2024.4858%2050.6676%2025.8334%2050.2402%2027.0907L43.1534%2034.6096C41.7043%2035.2006%2040.1187%2035.5264%2038.457%2035.5264H30.7605L38.5805%2027.2296C40.814%2027.1643%2042.6045%2025.3332%2042.6045%2023.084V12.4424C42.6045%2010.1518%2040.7476%208.29492%2038.457%208.29492H12.4424C10.1518%208.29492%208.29492%2010.1518%208.29492%2012.4424V23.084C8.29492%2025.3746%2010.1518%2027.2314%2012.4424%2027.2314H33.5078L20.4487%2041.0866C17.7992%2042.5379%2014.3381%2040.2741%2014.7842%2036.7803C14.8402%2036.3421%2014.9629%2035.9194%2015.1416%2035.5264H12.4424C10.9217%2035.5264%209.46472%2035.2536%208.11774%2034.7542L0.610679%2026.945C0.214298%2025.7295%200%2024.4318%200%2023.084V12.4424C0%2010.8011%200.317794%209.23402%200.895207%207.79935L7.12424%201.19058C8.73679%200.427072%2010.5397%200%2012.4424%200H38.457ZM23.1357%2017.7881C23.1357%2015.4815%2021.2656%2013.6113%2018.959%2013.6113C16.6525%2013.6114%2014.7822%2015.4815%2014.7822%2017.7881C14.7824%2020.0945%2016.6526%2021.9638%2018.959%2021.9639C21.2655%2021.9639%2023.1356%2020.0945%2023.1357%2017.7881ZM36.2344%2017.7881C36.2344%2015.4815%2034.3642%2013.6113%2032.0576%2013.6113C29.7511%2013.6114%2027.8809%2015.4815%2027.8809%2017.7881C27.881%2020.0945%2029.7512%2021.9638%2032.0576%2021.9639C34.3641%2021.9639%2036.2342%2020.0945%2036.2344%2017.7881Z%22%20fill%3D%22url(%23paint0_linear_97_4585)%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_97_4585%22%20x1%3D%2231.662%22%20y1%3D%224.88016%22%20x2%3D%2214.4119%22%20y2%3D%2237.9167%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23F22727%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23CA0D0D%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"
|
|
1719
|
+
};
|
|
1720
|
+
z([
|
|
1721
|
+
s({ type: String, attribute: "return-uri" })
|
|
1722
|
+
], v.prototype, "returnUri", 2);
|
|
1723
|
+
z([
|
|
1724
|
+
s({ type: String, attribute: "question-prompt" })
|
|
1725
|
+
], v.prototype, "questionPrompt", 2);
|
|
1726
|
+
z([
|
|
1727
|
+
s({ type: Boolean, attribute: "minimized-icon-only" })
|
|
1728
|
+
], v.prototype, "minimizedIconOnly", 2);
|
|
1729
|
+
z([
|
|
1730
|
+
s({ type: Boolean, attribute: "draggable" })
|
|
1731
|
+
], v.prototype, "draggable", 2);
|
|
1732
|
+
z([
|
|
1733
|
+
s({ type: Boolean, attribute: "resizable" })
|
|
1734
|
+
], v.prototype, "resizable", 2);
|
|
1735
|
+
z([
|
|
1736
|
+
s({
|
|
1737
|
+
type: Array,
|
|
1738
|
+
hasChanged: (e, t) => e === t ? !1 : !t || !e || e.length !== t.length ? !0 : JSON.stringify(e) !== JSON.stringify(t)
|
|
1739
|
+
}),
|
|
1740
|
+
s({ type: Array })
|
|
1741
|
+
], v.prototype, "products", 2);
|
|
1742
|
+
z([
|
|
1743
|
+
s({ type: Boolean, attribute: "open-initially" })
|
|
1744
|
+
], v.prototype, "openInitially", 2);
|
|
1745
|
+
z([
|
|
1746
|
+
s({ type: Boolean, attribute: "show-feedback-buttons" })
|
|
1747
|
+
], v.prototype, "showFeedbackButtons", 2);
|
|
1748
|
+
z([
|
|
1749
|
+
m()
|
|
1750
|
+
], v.prototype, "open", 2);
|
|
1751
|
+
z([
|
|
1752
|
+
m()
|
|
1753
|
+
], v.prototype, "fullscreen", 2);
|
|
1754
|
+
z([
|
|
1755
|
+
m()
|
|
1756
|
+
], v.prototype, "messages", 2);
|
|
1757
|
+
z([
|
|
1758
|
+
m()
|
|
1759
|
+
], v.prototype, "conversationId", 2);
|
|
1760
|
+
z([
|
|
1761
|
+
m()
|
|
1762
|
+
], v.prototype, "assertionToken", 2);
|
|
1763
|
+
z([
|
|
1764
|
+
m()
|
|
1765
|
+
], v.prototype, "isLoading", 2);
|
|
1766
|
+
z([
|
|
1767
|
+
m()
|
|
1768
|
+
], v.prototype, "inputText", 2);
|
|
1769
|
+
z([
|
|
1770
|
+
m()
|
|
1771
|
+
], v.prototype, "selectedProductId", 2);
|
|
1772
|
+
z([
|
|
1773
|
+
m()
|
|
1774
|
+
], v.prototype, "windowWidth", 2);
|
|
1775
|
+
z([
|
|
1776
|
+
m()
|
|
1777
|
+
], v.prototype, "windowHeight", 2);
|
|
1778
|
+
z([
|
|
1779
|
+
m()
|
|
1780
|
+
], v.prototype, "position", 2);
|
|
1781
|
+
z([
|
|
1782
|
+
m()
|
|
1783
|
+
], v.prototype, "isDragging", 2);
|
|
1784
|
+
z([
|
|
1785
|
+
m()
|
|
1786
|
+
], v.prototype, "screenWidth", 2);
|
|
1787
|
+
z([
|
|
1788
|
+
te("#chat-container")
|
|
1789
|
+
], v.prototype, "chatContainer", 2);
|
|
1790
|
+
z([
|
|
1791
|
+
te("#product")
|
|
1792
|
+
], v.prototype, "productEl", 2);
|
|
1793
|
+
v = z([
|
|
1794
|
+
Y("logosphere-chatbot")
|
|
1795
|
+
], v);
|
|
1796
|
+
function xe(e) {
|
|
1797
|
+
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
1798
|
+
}
|
|
1799
|
+
var Se = { exports: {} }, Ut = Se.exports, Ne;
|
|
1800
|
+
function Vt() {
|
|
1801
|
+
return Ne || (Ne = 1, (function(e, t) {
|
|
1802
|
+
(function(o, r) {
|
|
1803
|
+
e.exports = r();
|
|
1804
|
+
})(Ut, (function() {
|
|
1805
|
+
var o = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" };
|
|
1806
|
+
return function(r, i, a) {
|
|
1807
|
+
var n = i.prototype, d = n.format;
|
|
1808
|
+
a.en.formats = o, n.format = function(c) {
|
|
1809
|
+
c === void 0 && (c = "YYYY-MM-DDTHH:mm:ssZ");
|
|
1810
|
+
var f = this.$locale().formats, b = (function(p, g) {
|
|
1811
|
+
return p.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (function(I, N, B) {
|
|
1812
|
+
var h = B && B.toUpperCase();
|
|
1813
|
+
return N || g[B] || o[B] || g[h].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (function(_, w, y) {
|
|
1814
|
+
return w || y.slice(1);
|
|
1815
|
+
}));
|
|
1816
|
+
}));
|
|
1817
|
+
})(c, f === void 0 ? {} : f);
|
|
1818
|
+
return d.call(this, b);
|
|
1819
|
+
};
|
|
1820
|
+
};
|
|
1821
|
+
}));
|
|
1822
|
+
})(Se)), Se.exports;
|
|
1823
|
+
}
|
|
1824
|
+
var Nt = Vt();
|
|
1825
|
+
const Kt = /* @__PURE__ */ xe(Nt);
|
|
1826
|
+
var De = { exports: {} }, Wt = De.exports, Ke;
|
|
1827
|
+
function Gt() {
|
|
1828
|
+
return Ke || (Ke = 1, (function(e, t) {
|
|
1829
|
+
(function(o, r) {
|
|
1830
|
+
e.exports = r();
|
|
1831
|
+
})(Wt, (function() {
|
|
1832
|
+
var o = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" }, r = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g, i = /\d/, a = /\d\d/, n = /\d\d?/, d = /\d*[^-_:/,()\s\d]+/, c = {}, f = function(h) {
|
|
1833
|
+
return (h = +h) + (h > 68 ? 1900 : 2e3);
|
|
1834
|
+
}, b = function(h) {
|
|
1835
|
+
return function(_) {
|
|
1836
|
+
this[h] = +_;
|
|
1837
|
+
};
|
|
1838
|
+
}, p = [/[+-]\d\d:?(\d\d)?|Z/, function(h) {
|
|
1839
|
+
(this.zone || (this.zone = {})).offset = (function(_) {
|
|
1840
|
+
if (!_ || _ === "Z") return 0;
|
|
1841
|
+
var w = _.match(/([+-]|\d\d)/g), y = 60 * w[1] + (+w[2] || 0);
|
|
1842
|
+
return y === 0 ? 0 : w[0] === "+" ? -y : y;
|
|
1843
|
+
})(h);
|
|
1844
|
+
}], g = function(h) {
|
|
1845
|
+
var _ = c[h];
|
|
1846
|
+
return _ && (_.indexOf ? _ : _.s.concat(_.f));
|
|
1847
|
+
}, I = function(h, _) {
|
|
1848
|
+
var w, y = c.meridiem;
|
|
1849
|
+
if (y) {
|
|
1850
|
+
for (var H = 1; H <= 24; H += 1) if (h.indexOf(y(H, 0, _)) > -1) {
|
|
1851
|
+
w = H > 12;
|
|
1852
|
+
break;
|
|
1853
|
+
}
|
|
1854
|
+
} else w = h === (_ ? "pm" : "PM");
|
|
1855
|
+
return w;
|
|
1856
|
+
}, N = { A: [d, function(h) {
|
|
1857
|
+
this.afternoon = I(h, !1);
|
|
1858
|
+
}], a: [d, function(h) {
|
|
1859
|
+
this.afternoon = I(h, !0);
|
|
1860
|
+
}], Q: [i, function(h) {
|
|
1861
|
+
this.month = 3 * (h - 1) + 1;
|
|
1862
|
+
}], S: [i, function(h) {
|
|
1863
|
+
this.milliseconds = 100 * +h;
|
|
1864
|
+
}], SS: [a, function(h) {
|
|
1865
|
+
this.milliseconds = 10 * +h;
|
|
1866
|
+
}], SSS: [/\d{3}/, function(h) {
|
|
1867
|
+
this.milliseconds = +h;
|
|
1868
|
+
}], s: [n, b("seconds")], ss: [n, b("seconds")], m: [n, b("minutes")], mm: [n, b("minutes")], H: [n, b("hours")], h: [n, b("hours")], HH: [n, b("hours")], hh: [n, b("hours")], D: [n, b("day")], DD: [a, b("day")], Do: [d, function(h) {
|
|
1869
|
+
var _ = c.ordinal, w = h.match(/\d+/);
|
|
1870
|
+
if (this.day = w[0], _) for (var y = 1; y <= 31; y += 1) _(y).replace(/\[|\]/g, "") === h && (this.day = y);
|
|
1871
|
+
}], w: [n, b("week")], ww: [a, b("week")], M: [n, b("month")], MM: [a, b("month")], MMM: [d, function(h) {
|
|
1872
|
+
var _ = g("months"), w = (g("monthsShort") || _.map((function(y) {
|
|
1873
|
+
return y.slice(0, 3);
|
|
1874
|
+
}))).indexOf(h) + 1;
|
|
1875
|
+
if (w < 1) throw new Error();
|
|
1876
|
+
this.month = w % 12 || w;
|
|
1877
|
+
}], MMMM: [d, function(h) {
|
|
1878
|
+
var _ = g("months").indexOf(h) + 1;
|
|
1879
|
+
if (_ < 1) throw new Error();
|
|
1880
|
+
this.month = _ % 12 || _;
|
|
1881
|
+
}], Y: [/[+-]?\d+/, b("year")], YY: [a, function(h) {
|
|
1882
|
+
this.year = f(h);
|
|
1883
|
+
}], YYYY: [/\d{4}/, b("year")], Z: p, ZZ: p };
|
|
1884
|
+
function B(h) {
|
|
1885
|
+
var _, w;
|
|
1886
|
+
_ = h, w = c && c.formats;
|
|
1887
|
+
for (var y = (h = _.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (function(ue, re, K) {
|
|
1888
|
+
var U = K && K.toUpperCase();
|
|
1889
|
+
return re || w[K] || o[K] || w[U].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (function(ie, se, be) {
|
|
1890
|
+
return se || be.slice(1);
|
|
1891
|
+
}));
|
|
1892
|
+
}))).match(r), H = y.length, j = 0; j < H; j += 1) {
|
|
1893
|
+
var he = y[j], pe = N[he], J = pe && pe[0], Q = pe && pe[1];
|
|
1894
|
+
y[j] = Q ? { regex: J, parser: Q } : he.replace(/^\[|\]$/g, "");
|
|
1895
|
+
}
|
|
1896
|
+
return function(ue) {
|
|
1897
|
+
for (var re = {}, K = 0, U = 0; K < H; K += 1) {
|
|
1898
|
+
var ie = y[K];
|
|
1899
|
+
if (typeof ie == "string") U += ie.length;
|
|
1900
|
+
else {
|
|
1901
|
+
var se = ie.regex, be = ie.parser, ke = ue.slice(U), _e = se.exec(ke)[0];
|
|
1902
|
+
be.call(re, _e), ue = ue.replace(_e, "");
|
|
1903
|
+
}
|
|
1904
|
+
}
|
|
1905
|
+
return (function(ge) {
|
|
1906
|
+
var $e = ge.afternoon;
|
|
1907
|
+
if ($e !== void 0) {
|
|
1908
|
+
var R = ge.hours;
|
|
1909
|
+
$e ? R < 12 && (ge.hours += 12) : R === 12 && (ge.hours = 0), delete ge.afternoon;
|
|
1910
|
+
}
|
|
1911
|
+
})(re), re;
|
|
1912
|
+
};
|
|
1913
|
+
}
|
|
1914
|
+
return function(h, _, w) {
|
|
1915
|
+
w.p.customParseFormat = !0, h && h.parseTwoDigitYear && (f = h.parseTwoDigitYear);
|
|
1916
|
+
var y = _.prototype, H = y.parse;
|
|
1917
|
+
y.parse = function(j) {
|
|
1918
|
+
var he = j.date, pe = j.utc, J = j.args;
|
|
1919
|
+
this.$u = pe;
|
|
1920
|
+
var Q = J[1];
|
|
1921
|
+
if (typeof Q == "string") {
|
|
1922
|
+
var ue = J[2] === !0, re = J[3] === !0, K = ue || re, U = J[2];
|
|
1923
|
+
re && (U = J[2]), c = this.$locale(), !ue && U && (c = w.Ls[U]), this.$d = (function(ke, _e, ge, $e) {
|
|
1924
|
+
try {
|
|
1925
|
+
if (["x", "X"].indexOf(_e) > -1) return new Date((_e === "X" ? 1e3 : 1) * ke);
|
|
1926
|
+
var R = B(_e)(ke), Le = R.year, ze = R.month, tt = R.day, ot = R.hours, rt = R.minutes, it = R.seconds, st = R.milliseconds, He = R.zone, Ue = R.week, Be = /* @__PURE__ */ new Date(), Ie = tt || (Le || ze ? 1 : Be.getDate()), Ae = Le || Be.getFullYear(), Ce = 0;
|
|
1927
|
+
Le && !ze || (Ce = ze > 0 ? ze - 1 : Be.getMonth());
|
|
1928
|
+
var Me, je = ot || 0, Re = rt || 0, Fe = it || 0, qe = st || 0;
|
|
1929
|
+
return He ? new Date(Date.UTC(Ae, Ce, Ie, je, Re, Fe, qe + 60 * He.offset * 1e3)) : ge ? new Date(Date.UTC(Ae, Ce, Ie, je, Re, Fe, qe)) : (Me = new Date(Ae, Ce, Ie, je, Re, Fe, qe), Ue && (Me = $e(Me).week(Ue).toDate()), Me);
|
|
1930
|
+
} catch {
|
|
1931
|
+
return /* @__PURE__ */ new Date("");
|
|
1932
|
+
}
|
|
1933
|
+
})(he, Q, pe, w), this.init(), U && U !== !0 && (this.$L = this.locale(U).$L), K && he != this.format(Q) && (this.$d = /* @__PURE__ */ new Date("")), c = {};
|
|
1934
|
+
} else if (Q instanceof Array) for (var ie = Q.length, se = 1; se <= ie; se += 1) {
|
|
1935
|
+
J[1] = Q[se - 1];
|
|
1936
|
+
var be = w.apply(this, J);
|
|
1937
|
+
if (be.isValid()) {
|
|
1938
|
+
this.$d = be.$d, this.$L = be.$L, this.init();
|
|
1939
|
+
break;
|
|
1940
|
+
}
|
|
1941
|
+
se === ie && (this.$d = /* @__PURE__ */ new Date(""));
|
|
1942
|
+
}
|
|
1943
|
+
else H.call(this, j);
|
|
1944
|
+
};
|
|
1945
|
+
};
|
|
1946
|
+
}));
|
|
1947
|
+
})(De)), De.exports;
|
|
1948
|
+
}
|
|
1949
|
+
var Xt = Gt();
|
|
1950
|
+
const Zt = /* @__PURE__ */ xe(Xt);
|
|
1951
|
+
var Ee = { exports: {} }, Jt = Ee.exports, We;
|
|
1952
|
+
function Qt() {
|
|
1953
|
+
return We || (We = 1, (function(e, t) {
|
|
1954
|
+
(function(o, r) {
|
|
1955
|
+
e.exports = r();
|
|
1956
|
+
})(Jt, (function() {
|
|
1957
|
+
return function(o, r, i) {
|
|
1958
|
+
r.prototype.isBetween = function(a, n, d, c) {
|
|
1959
|
+
var f = i(a), b = i(n), p = (c = c || "()")[0] === "(", g = c[1] === ")";
|
|
1960
|
+
return (p ? this.isAfter(f, d) : !this.isBefore(f, d)) && (g ? this.isBefore(b, d) : !this.isAfter(b, d)) || (p ? this.isBefore(f, d) : !this.isAfter(f, d)) && (g ? this.isAfter(b, d) : !this.isBefore(b, d));
|
|
1961
|
+
};
|
|
1962
|
+
};
|
|
1963
|
+
}));
|
|
1964
|
+
})(Ee)), Ee.exports;
|
|
1965
|
+
}
|
|
1966
|
+
var eo = Qt();
|
|
1967
|
+
const to = /* @__PURE__ */ xe(eo);
|
|
1968
|
+
var Oe = { exports: {} }, oo = Oe.exports, Ge;
|
|
1969
|
+
function ro() {
|
|
1970
|
+
return Ge || (Ge = 1, (function(e, t) {
|
|
1971
|
+
(function(o, r) {
|
|
1972
|
+
e.exports = r();
|
|
1973
|
+
})(oo, (function() {
|
|
1974
|
+
var o = "week", r = "year";
|
|
1975
|
+
return function(i, a, n) {
|
|
1976
|
+
var d = a.prototype;
|
|
1977
|
+
d.week = function(c) {
|
|
1978
|
+
if (c === void 0 && (c = null), c !== null) return this.add(7 * (c - this.week()), "day");
|
|
1979
|
+
var f = this.$locale().yearStart || 1;
|
|
1980
|
+
if (this.month() === 11 && this.date() > 25) {
|
|
1981
|
+
var b = n(this).startOf(r).add(1, r).date(f), p = n(this).endOf(o);
|
|
1982
|
+
if (b.isBefore(p)) return 1;
|
|
1983
|
+
}
|
|
1984
|
+
var g = n(this).startOf(r).date(f).startOf(o).subtract(1, "millisecond"), I = this.diff(g, o, !0);
|
|
1985
|
+
return I < 0 ? n(this).startOf("week").week() : Math.ceil(I);
|
|
1986
|
+
}, d.weeks = function(c) {
|
|
1987
|
+
return c === void 0 && (c = null), this.week(c);
|
|
1988
|
+
};
|
|
1989
|
+
};
|
|
1990
|
+
}));
|
|
1991
|
+
})(Oe)), Oe.exports;
|
|
1992
|
+
}
|
|
1993
|
+
var io = ro();
|
|
1994
|
+
const so = /* @__PURE__ */ xe(io);
|
|
1995
|
+
var Pe = { exports: {} }, ao = Pe.exports, Xe;
|
|
1996
|
+
function no() {
|
|
1997
|
+
return Xe || (Xe = 1, (function(e, t) {
|
|
1998
|
+
(function(o, r) {
|
|
1999
|
+
e.exports = r();
|
|
2000
|
+
})(ao, (function() {
|
|
2001
|
+
return function(o, r, i) {
|
|
2002
|
+
var a = r.prototype, n = function(p) {
|
|
2003
|
+
return p && (p.indexOf ? p : p.s);
|
|
2004
|
+
}, d = function(p, g, I, N, B) {
|
|
2005
|
+
var h = p.name ? p : p.$locale(), _ = n(h[g]), w = n(h[I]), y = _ || w.map((function(j) {
|
|
2006
|
+
return j.slice(0, N);
|
|
2007
|
+
}));
|
|
2008
|
+
if (!B) return y;
|
|
2009
|
+
var H = h.weekStart;
|
|
2010
|
+
return y.map((function(j, he) {
|
|
2011
|
+
return y[(he + (H || 0)) % 7];
|
|
2012
|
+
}));
|
|
2013
|
+
}, c = function() {
|
|
2014
|
+
return i.Ls[i.locale()];
|
|
2015
|
+
}, f = function(p, g) {
|
|
2016
|
+
return p.formats[g] || (function(I) {
|
|
2017
|
+
return I.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (function(N, B, h) {
|
|
2018
|
+
return B || h.slice(1);
|
|
2019
|
+
}));
|
|
2020
|
+
})(p.formats[g.toUpperCase()]);
|
|
2021
|
+
}, b = function() {
|
|
2022
|
+
var p = this;
|
|
2023
|
+
return { months: function(g) {
|
|
2024
|
+
return g ? g.format("MMMM") : d(p, "months");
|
|
2025
|
+
}, monthsShort: function(g) {
|
|
2026
|
+
return g ? g.format("MMM") : d(p, "monthsShort", "months", 3);
|
|
2027
|
+
}, firstDayOfWeek: function() {
|
|
2028
|
+
return p.$locale().weekStart || 0;
|
|
2029
|
+
}, weekdays: function(g) {
|
|
2030
|
+
return g ? g.format("dddd") : d(p, "weekdays");
|
|
2031
|
+
}, weekdaysMin: function(g) {
|
|
2032
|
+
return g ? g.format("dd") : d(p, "weekdaysMin", "weekdays", 2);
|
|
2033
|
+
}, weekdaysShort: function(g) {
|
|
2034
|
+
return g ? g.format("ddd") : d(p, "weekdaysShort", "weekdays", 3);
|
|
2035
|
+
}, longDateFormat: function(g) {
|
|
2036
|
+
return f(p.$locale(), g);
|
|
2037
|
+
}, meridiem: this.$locale().meridiem, ordinal: this.$locale().ordinal };
|
|
2038
|
+
};
|
|
2039
|
+
a.localeData = function() {
|
|
2040
|
+
return b.bind(this)();
|
|
2041
|
+
}, i.localeData = function() {
|
|
2042
|
+
var p = c();
|
|
2043
|
+
return { firstDayOfWeek: function() {
|
|
2044
|
+
return p.weekStart || 0;
|
|
2045
|
+
}, weekdays: function() {
|
|
2046
|
+
return i.weekdays();
|
|
2047
|
+
}, weekdaysShort: function() {
|
|
2048
|
+
return i.weekdaysShort();
|
|
2049
|
+
}, weekdaysMin: function() {
|
|
2050
|
+
return i.weekdaysMin();
|
|
2051
|
+
}, months: function() {
|
|
2052
|
+
return i.months();
|
|
2053
|
+
}, monthsShort: function() {
|
|
2054
|
+
return i.monthsShort();
|
|
2055
|
+
}, longDateFormat: function(g) {
|
|
2056
|
+
return f(p, g);
|
|
2057
|
+
}, meridiem: p.meridiem, ordinal: p.ordinal };
|
|
2058
|
+
}, i.months = function() {
|
|
2059
|
+
return d(c(), "months");
|
|
2060
|
+
}, i.monthsShort = function() {
|
|
2061
|
+
return d(c(), "monthsShort", "months", 3);
|
|
2062
|
+
}, i.weekdays = function(p) {
|
|
2063
|
+
return d(c(), "weekdays", null, null, p);
|
|
2064
|
+
}, i.weekdaysShort = function(p) {
|
|
2065
|
+
return d(c(), "weekdaysShort", "weekdays", 3, p);
|
|
2066
|
+
}, i.weekdaysMin = function(p) {
|
|
2067
|
+
return d(c(), "weekdaysMin", "weekdays", 2, p);
|
|
2068
|
+
};
|
|
2069
|
+
};
|
|
2070
|
+
}));
|
|
2071
|
+
})(Pe)), Pe.exports;
|
|
2072
|
+
}
|
|
2073
|
+
var lo = no();
|
|
2074
|
+
const co = /* @__PURE__ */ xe(lo);
|
|
2075
|
+
var Te = { exports: {} }, ho = Te.exports, Ze;
|
|
2076
|
+
function po() {
|
|
2077
|
+
return Ze || (Ze = 1, (function(e, t) {
|
|
2078
|
+
(function(o, r) {
|
|
2079
|
+
e.exports = r(D);
|
|
2080
|
+
})(ho, (function(o) {
|
|
2081
|
+
function r(n) {
|
|
2082
|
+
return n && typeof n == "object" && "default" in n ? n : { default: n };
|
|
2083
|
+
}
|
|
2084
|
+
var i = r(o), a = { name: "tr", weekdays: "Pazar_Pazartesi_Salı_Çarşamba_Perşembe_Cuma_Cumartesi".split("_"), weekdaysShort: "Paz_Pts_Sal_Çar_Per_Cum_Cts".split("_"), weekdaysMin: "Pz_Pt_Sa_Ça_Pe_Cu_Ct".split("_"), months: "Ocak_Şubat_Mart_Nisan_Mayıs_Haziran_Temmuz_Ağustos_Eylül_Ekim_Kasım_Aralık".split("_"), monthsShort: "Oca_Şub_Mar_Nis_May_Haz_Tem_Ağu_Eyl_Eki_Kas_Ara".split("_"), weekStart: 1, formats: { LT: "HH:mm", LTS: "HH:mm:ss", L: "DD.MM.YYYY", LL: "D MMMM YYYY", LLL: "D MMMM YYYY HH:mm", LLLL: "dddd, D MMMM YYYY HH:mm" }, relativeTime: { future: "%s sonra", past: "%s önce", s: "birkaç saniye", m: "bir dakika", mm: "%d dakika", h: "bir saat", hh: "%d saat", d: "bir gün", dd: "%d gün", M: "bir ay", MM: "%d ay", y: "bir yıl", yy: "%d yıl" }, ordinal: function(n) {
|
|
2085
|
+
return n + ".";
|
|
2086
|
+
} };
|
|
2087
|
+
return i.default.locale(a, null, !0), a;
|
|
2088
|
+
}));
|
|
2089
|
+
})(Te)), Te.exports;
|
|
2090
|
+
}
|
|
2091
|
+
po();
|
|
2092
|
+
const uo = '.dp{display:block;position:relative;font-family:var(--font-family-base);width:100%}.dp__input-wrapper{position:relative;width:100%}.dp__input{width:100%;height:40px;padding:0 var(--spacing-10) 0 var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-base);outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);background-color:var(--color-body-bg);transition:border-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.dp__input::placeholder{color:var(--color-tertiary)}.dp__input:focus,.dp__input--open{border-color:var(--color-primary)}.dp__input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-tertiary-bg)}.dp__input--error{border-color:var(--color-danger);background-color:var(--color-danger-bg-subtle)}.dp__input--required{border-color:var(--color-danger)}.dp__icon-btn{position:absolute;right:var(--spacing-2);top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--color-tertiary);display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.dp__icon-btn:hover{color:var(--color-body-text)}.dp__error-tooltip{position:absolute;top:calc(100% + var(--spacing-1));left:0;z-index:var(--z-index-tooltip);padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs);color:var(--color-body-bg);background-color:var(--color-danger);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);pointer-events:none;white-space:nowrap;font-family:var(--font-family-base)}.dp__popup{position:fixed;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:var(--z-index-dropdown);padding:var(--spacing-4);box-sizing:border-box;overflow:hidden}.dp__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-3)}.dp__nav-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-2);border:none;background:none;border-radius:var(--radius-base);cursor:pointer;color:var(--color-body-text);transition:background-color var(--transition-speed-fast) var(--transition-timing)}.dp__nav-btn:hover{background-color:var(--color-tertiary-bg)}.dp__header-label{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);letter-spacing:-.025em;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--color-body-text);transition:color var(--transition-speed-fast) var(--transition-timing)}.dp__header-label:hover{color:var(--color-primary)}.dp__weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:var(--font-size-sm);color:var(--color-tertiary);margin-bottom:var(--spacing-1);-webkit-user-select:none;user-select:none}.dp__weekday{padding:var(--spacing-1) 0}.dp__grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px;outline:none}.dp__day{position:relative;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding:0;min-width:0;border-radius:0;color:var(--color-body-text);font-family:var(--font-family-base)}.dp__day-num{position:relative;z-index:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-size:var(--font-size-sm);flex-shrink:0;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.dp__day--range-start:before,.dp__day--range-end:before,.dp__day--range-between:before{content:"";position:absolute;top:2px;bottom:2px;background-color:color-mix(in srgb,var(--color-primary) 15%,transparent);z-index:0;pointer-events:none}.dp__day--range-start:before{left:50%;right:0}.dp__day--range-end:before{left:0;right:50%}.dp__day--range-between:before{left:0;right:0}.dp__day--out-of-month{opacity:.4}.dp__day--focused .dp__day-num{background-color:var(--color-tertiary-bg)}.dp__day--disabled{cursor:not-allowed;pointer-events:none}.dp__day--disabled .dp__day-num{color:var(--color-gray-300);background-color:var(--color-gray-50)}.dp__day--disabled-weekday{cursor:not-allowed;pointer-events:none}.dp__day--disabled-weekday .dp__day-num{color:var(--color-gray-300)}.dp__day--today .dp__day-num{background-color:var(--color-gray-200);color:var(--color-gray-800)}.dp__day--selected .dp__day-num{background-color:var(--color-primary);color:#fff}.dp__day--default:hover .dp__day-num{background-color:var(--color-tertiary-bg)}.dp__day--range-pending .dp__day-num,.dp__day--range-start .dp__day-num,.dp__day--range-end .dp__day-num{background-color:var(--color-primary);color:#fff}.dp__day--range-between .dp__day-num{color:var(--color-primary);background:transparent}.dp__month-grid,.dp__year-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:10px;margin-top:var(--spacing-3)}.dp__month-btn,.dp__year-btn{height:48px;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);cursor:pointer;background:none;color:var(--color-body-text);transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.dp__month-btn:hover:not(.dp__month-btn--selected),.dp__year-btn:hover:not(.dp__year-btn--selected){background-color:var(--color-tertiary-bg)}.dp__month-btn--selected,.dp__year-btn--selected{background-color:var(--color-primary);color:#fff}.dp__month-btn--current:not(.dp__month-btn--selected),.dp__year-btn--current:not(.dp__year-btn--selected){background-color:var(--color-gray-200);color:var(--color-gray-800)}.dp__footer{display:flex;align-items:center;justify-content:space-evenly;margin-top:var(--spacing-4);padding-bottom:var(--spacing-3)}.dp__footer-btn{display:inline-flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-tertiary);border:none;border-radius:var(--radius-sm);background:none;cursor:pointer;font-family:var(--font-family-base);transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.dp__footer-btn:hover{background-color:var(--color-tertiary-bg);color:var(--color-body-text)}';
|
|
2093
|
+
var bo = Object.defineProperty, go = Object.getOwnPropertyDescriptor, S = (e, t, o, r) => {
|
|
2094
|
+
for (var i = r > 1 ? void 0 : r ? go(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
2095
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
2096
|
+
return r && i && bo(t, o, i), i;
|
|
2097
|
+
};
|
|
2098
|
+
D.extend(Kt);
|
|
2099
|
+
D.extend(Zt);
|
|
2100
|
+
D.extend(to);
|
|
2101
|
+
D.extend(so);
|
|
2102
|
+
D.extend(co);
|
|
2103
|
+
D.locale("tr");
|
|
2104
|
+
const fo = [
|
|
2105
|
+
"DD/MM/YYYY",
|
|
2106
|
+
"DD.MM.YYYY",
|
|
2107
|
+
"DD MM YYYY",
|
|
2108
|
+
"DD-MM-YYYY",
|
|
2109
|
+
"DD/MM/YY",
|
|
2110
|
+
"DD.MM.YY",
|
|
2111
|
+
"DD MM YY",
|
|
2112
|
+
"DD-MM-YY",
|
|
2113
|
+
"YYYY-MM-DD",
|
|
2114
|
+
"YYYY/MM/DD",
|
|
2115
|
+
"YYYY.MM.DD",
|
|
2116
|
+
"YYYY MM DD"
|
|
2117
|
+
], mo = D.months(), Je = D.weekdaysShort(), _o = [...Je.slice(1), Je[0]];
|
|
2118
|
+
let vo = 0;
|
|
2119
|
+
const yo = () => `dp-${++vo}`;
|
|
2120
|
+
let $ = class extends O {
|
|
2121
|
+
constructor() {
|
|
2122
|
+
super(...arguments), this.value = null, this.min = null, this.max = null, this.required = !1, this.disabled = !1, this.expandFactor = 1.05, this.placeholder = "GG/AA/YYYY veya GG.AA.YYYY", this.rangeMode = !1, this.disabledDays = [], this.rangeStart = null, this.rangeEnd = null, this._open = !1, this._cursor = D(), this._popupPos = null, this._rangeStart = null, this._rangeEnd = null, this._hoverDate = null, this._viewMode = "calendar", this._hasError = !1, this._errorMsg = "", this._errorTimer = null, this.inputId = yo(), this._outsideClick = (e) => {
|
|
2123
|
+
this._open && (e.composedPath().includes(this) || (this._parseAndSetDate(), this._viewMode = "calendar", this._toggleOpen(!1)));
|
|
2124
|
+
}, this._onScrollOrResize = () => {
|
|
2125
|
+
this._open && this._recalcPopupPos();
|
|
2126
|
+
}, this._clear = () => {
|
|
2127
|
+
this._emitChange(null), this.rangeMode && (this._rangeStart = null, this._rangeEnd = null);
|
|
2128
|
+
}, this._today = () => {
|
|
2129
|
+
const e = D();
|
|
2130
|
+
this._withinBounds(e) && this._select(e);
|
|
2131
|
+
}, this._navigatePrevious = () => {
|
|
2132
|
+
switch (this._viewMode) {
|
|
2133
|
+
case "calendar":
|
|
2134
|
+
this._cursor = this._cursor.subtract(1, "month");
|
|
2135
|
+
break;
|
|
2136
|
+
case "month":
|
|
2137
|
+
this._cursor = this._cursor.subtract(1, "year");
|
|
2138
|
+
break;
|
|
2139
|
+
case "year":
|
|
2140
|
+
this._cursor = this._cursor.subtract(12, "year");
|
|
2141
|
+
break;
|
|
2142
|
+
}
|
|
2143
|
+
}, this._navigateNext = () => {
|
|
2144
|
+
switch (this._viewMode) {
|
|
2145
|
+
case "calendar":
|
|
2146
|
+
this._cursor = this._cursor.add(1, "month");
|
|
2147
|
+
break;
|
|
2148
|
+
case "month":
|
|
2149
|
+
this._cursor = this._cursor.add(1, "year");
|
|
2150
|
+
break;
|
|
2151
|
+
case "year":
|
|
2152
|
+
this._cursor = this._cursor.add(12, "year");
|
|
2153
|
+
break;
|
|
2154
|
+
}
|
|
2155
|
+
}, this._handleHeaderClick = () => {
|
|
2156
|
+
this._viewMode === "calendar" ? this._viewMode = "month" : this._viewMode === "month" && (this._viewMode = "year");
|
|
2157
|
+
}, this._recalcPopupPos = () => {
|
|
2158
|
+
const e = this.renderRoot.querySelector("#" + this.inputId);
|
|
2159
|
+
if (!e) return;
|
|
2160
|
+
const t = e.getBoundingClientRect(), o = this.renderRoot.querySelector("#" + this.inputId + "-ico"), r = window.innerWidth, i = window.innerHeight, a = 8, n = o ? o.getBoundingClientRect().left : t.left + t.width, d = Math.round(Math.max(0, n - t.left - a) * (this.expandFactor || 1)), c = Math.round(t.right - t.left - a), f = Math.max(220, Math.min(d, c));
|
|
2161
|
+
let b = Math.round(t.left);
|
|
2162
|
+
b + f > r - a && (b = Math.max(a, Math.round(r - f - a)));
|
|
2163
|
+
const p = Math.max(0, i - t.bottom - a * 2), g = Math.max(0, t.top - a * 2), I = 260;
|
|
2164
|
+
let N, B;
|
|
2165
|
+
p >= I || p >= g ? (N = Math.round(t.bottom + a), B = Math.max(I, p)) : (B = Math.max(I, g), N = Math.max(a, Math.round(t.top - a - B))), this._popupPos = { left: b, top: N, width: f, maxH: B };
|
|
2166
|
+
};
|
|
2167
|
+
}
|
|
2168
|
+
// ==================== LIFECYCLE ====================
|
|
2169
|
+
willUpdate(e) {
|
|
2170
|
+
if (e.has("value") && !this._open && !this.rangeMode) {
|
|
2171
|
+
const t = this._safeDay(this.value);
|
|
2172
|
+
t && (this._cursor = t);
|
|
2173
|
+
}
|
|
2174
|
+
e.has("rangeStart") && (this._rangeStart = this.rangeStart), e.has("rangeEnd") && (this._rangeEnd = this.rangeEnd);
|
|
2175
|
+
}
|
|
2176
|
+
connectedCallback() {
|
|
2177
|
+
super.connectedCallback(), window.addEventListener("click", this._outsideClick, !0), window.addEventListener("scroll", this._onScrollOrResize, !0), window.addEventListener("resize", this._onScrollOrResize);
|
|
2178
|
+
}
|
|
2179
|
+
disconnectedCallback() {
|
|
2180
|
+
window.removeEventListener("click", this._outsideClick, !0), window.removeEventListener("scroll", this._onScrollOrResize, !0), window.removeEventListener("resize", this._onScrollOrResize), this._errorTimer && clearTimeout(this._errorTimer), super.disconnectedCallback();
|
|
2181
|
+
}
|
|
2182
|
+
// ==================== HELPERS ====================
|
|
2183
|
+
_safeDay(e) {
|
|
2184
|
+
if (!e) return null;
|
|
2185
|
+
for (const o of fo) {
|
|
2186
|
+
const r = D(e, o, !0);
|
|
2187
|
+
if (r.isValid()) return r;
|
|
2188
|
+
}
|
|
2189
|
+
const t = D(e);
|
|
2190
|
+
return t.isValid() ? t : null;
|
|
2191
|
+
}
|
|
2192
|
+
_withinBounds(e) {
|
|
2193
|
+
const t = this._safeDay(this.min), o = this._safeDay(this.max);
|
|
2194
|
+
return !(t && e.isBefore(t, "day") || o && e.isAfter(o, "day") || this.disabledDays.includes(e.day()));
|
|
2195
|
+
}
|
|
2196
|
+
_displayValue() {
|
|
2197
|
+
if (this.rangeMode && this._rangeStart && this._rangeEnd) {
|
|
2198
|
+
const t = this._safeDay(this._rangeStart), o = this._safeDay(this._rangeEnd);
|
|
2199
|
+
if (t && o) return `${t.format("DD/MM/YYYY")} - ${o.format("DD/MM/YYYY")}`;
|
|
2200
|
+
}
|
|
2201
|
+
const e = this._safeDay(this.value);
|
|
2202
|
+
return e ? e.format("DD/MM/YYYY") : "";
|
|
2203
|
+
}
|
|
2204
|
+
_getYears() {
|
|
2205
|
+
const e = this._cursor.year() - 6;
|
|
2206
|
+
return Array.from({ length: 12 }, (t, o) => e + o);
|
|
2207
|
+
}
|
|
2208
|
+
_getHeaderLabel() {
|
|
2209
|
+
switch (this._viewMode) {
|
|
2210
|
+
case "calendar":
|
|
2211
|
+
return this._cursor.format("MMMM YYYY");
|
|
2212
|
+
case "month":
|
|
2213
|
+
return this._cursor.format("YYYY");
|
|
2214
|
+
case "year": {
|
|
2215
|
+
const e = this._getYears();
|
|
2216
|
+
return `${e[0]}-${e[e.length - 1]}`;
|
|
2217
|
+
}
|
|
2218
|
+
}
|
|
2219
|
+
}
|
|
2220
|
+
_daysInGrid() {
|
|
2221
|
+
const e = this._cursor.startOf("month"), t = e.subtract((e.day() + 6) % 7, "day");
|
|
2222
|
+
return Array.from({ length: 42 }, (o, r) => t.add(r, "day"));
|
|
2223
|
+
}
|
|
2224
|
+
_isInRange(e) {
|
|
2225
|
+
if (!this.rangeMode || !this._rangeStart || !this._rangeEnd) return null;
|
|
2226
|
+
const t = this._safeDay(this._rangeStart), o = this._safeDay(this._rangeEnd);
|
|
2227
|
+
return !t || !o ? null : e.isSame(t, "day") ? "start" : e.isSame(o, "day") ? "end" : e.isBetween(t, o, "day", "[]") ? "between" : null;
|
|
2228
|
+
}
|
|
2229
|
+
_getHoverPreview(e) {
|
|
2230
|
+
if (!this.rangeMode || !this._rangeStart || this._rangeEnd || !this._hoverDate) return null;
|
|
2231
|
+
const t = this._safeDay(this._rangeStart);
|
|
2232
|
+
if (!t) return null;
|
|
2233
|
+
const o = this._hoverDate, r = o.isAfter(t, "day"), i = r ? t : o, a = r ? o : t;
|
|
2234
|
+
return e.isSame(t, "day") ? "preview-start" : e.isSame(o, "day") ? "preview-end" : e.isAfter(i, "day") && e.isBefore(a, "day") ? "preview-between" : null;
|
|
2235
|
+
}
|
|
2236
|
+
_getDayClasses(e) {
|
|
2237
|
+
const t = ["dp__day"];
|
|
2238
|
+
if (!this._withinBounds(e))
|
|
2239
|
+
return t.push(this.disabledDays.includes(e.day()) ? "dp__day--disabled-weekday" : "dp__day--disabled"), t.join(" ");
|
|
2240
|
+
const o = this._isInRange(e);
|
|
2241
|
+
if (o === "start")
|
|
2242
|
+
return t.push("dp__day--range-start"), t.join(" ");
|
|
2243
|
+
if (o === "end")
|
|
2244
|
+
return t.push("dp__day--range-end"), t.join(" ");
|
|
2245
|
+
if (o === "between")
|
|
2246
|
+
return t.push("dp__day--range-between"), t.join(" ");
|
|
2247
|
+
const r = this._getHoverPreview(e);
|
|
2248
|
+
return r === "preview-start" ? (t.push("dp__day--range-start"), t.join(" ")) : r === "preview-end" ? (t.push("dp__day--range-end"), t.join(" ")) : r === "preview-between" ? (t.push("dp__day--range-between"), t.join(" ")) : this.rangeMode && this._rangeStart && !this._rangeEnd && e.isSame(this._safeDay(this._rangeStart), "day") ? (t.push("dp__day--range-pending"), t.join(" ")) : (e.isSame(this._safeDay(this.value), "day") ? t.push("dp__day--selected") : e.isSame(D(), "day") ? t.push("dp__day--today") : t.push("dp__day--default"), t.join(" "));
|
|
2249
|
+
}
|
|
2250
|
+
// ==================== EVENTS ====================
|
|
2251
|
+
_emitChange(e) {
|
|
2252
|
+
this.value = e, this.dispatchEvent(new CustomEvent("change", { detail: { value: e } })), this.onChange?.(e);
|
|
2253
|
+
}
|
|
2254
|
+
_emitRangeChange() {
|
|
2255
|
+
if (this._rangeStart && this._rangeEnd) {
|
|
2256
|
+
const e = { start: this._rangeStart, end: this._rangeEnd };
|
|
2257
|
+
this.dispatchEvent(new CustomEvent("rangeChange", { detail: e })), this.onRangeChange?.(e);
|
|
2258
|
+
}
|
|
2259
|
+
}
|
|
2260
|
+
_showInputError(e) {
|
|
2261
|
+
this._errorTimer && clearTimeout(this._errorTimer), this._hasError = !0, this._errorMsg = e, this._errorTimer = setTimeout(() => this._clearInputError(), 3e3);
|
|
2262
|
+
}
|
|
2263
|
+
_clearInputError() {
|
|
2264
|
+
this._hasError = !1, this._errorMsg = "", this._errorTimer && (clearTimeout(this._errorTimer), this._errorTimer = null);
|
|
2265
|
+
}
|
|
2266
|
+
_toggleOpen(e) {
|
|
2267
|
+
if (this.disabled) return;
|
|
2268
|
+
const t = e ?? !this._open;
|
|
2269
|
+
this._open = t, t || (this._hoverDate = null), t && (this.rangeMode ? this._cursor = this._safeDay(this._rangeEnd)?.clone() ?? this._safeDay(this._rangeStart)?.clone() ?? D() : this._cursor = this._safeDay(this.value)?.clone() ?? D(), this._viewMode = "calendar", this.updateComplete.then(() => {
|
|
2270
|
+
this._recalcPopupPos(), window.requestAnimationFrame(() => {
|
|
2271
|
+
this._recalcPopupPos(), this.renderRoot.querySelector("#grid")?.focus();
|
|
2272
|
+
});
|
|
2273
|
+
}));
|
|
2274
|
+
}
|
|
2275
|
+
_onInput(e) {
|
|
2276
|
+
e.target.value.trim() || (this._emitChange(null), this.rangeMode && (this._rangeStart = null, this._rangeEnd = null)), this._clearInputError();
|
|
2277
|
+
}
|
|
2278
|
+
_onKeydown(e) {
|
|
2279
|
+
(e.key === "Tab" || e.key === "Enter") && this._parseAndSetDate();
|
|
2280
|
+
}
|
|
2281
|
+
_parseAndSetDate() {
|
|
2282
|
+
const e = this.renderRoot.querySelector("#" + this.inputId);
|
|
2283
|
+
if (!e) return;
|
|
2284
|
+
const t = e.value.trim();
|
|
2285
|
+
if (!t) {
|
|
2286
|
+
if (this.rangeMode && this._rangeStart && !this._rangeEnd) return;
|
|
2287
|
+
this._emitChange(null), this.rangeMode && (this._rangeStart = null, this._rangeEnd = null);
|
|
2288
|
+
return;
|
|
2289
|
+
}
|
|
2290
|
+
if (this.rangeMode && this._rangeStart && this._rangeEnd) return;
|
|
2291
|
+
const o = this._safeDay(t);
|
|
2292
|
+
o && this._withinBounds(o) ? (this._emitChange(o.format("YYYY-MM-DD")), this._cursor = o, this.rangeMode && (this._rangeStart = null, this._rangeEnd = null), this._clearInputError()) : this._showInputError("Geçersiz tarih formatı. Örnek: 19/09/2025");
|
|
2293
|
+
}
|
|
2294
|
+
_select(e) {
|
|
2295
|
+
if (this._withinBounds(e))
|
|
2296
|
+
if (this.rangeMode)
|
|
2297
|
+
if (!this._rangeStart)
|
|
2298
|
+
this._rangeStart = e.format("YYYY-MM-DD"), this._cursor = e;
|
|
2299
|
+
else if (this._rangeEnd)
|
|
2300
|
+
this._rangeStart = e.format("YYYY-MM-DD"), this._rangeEnd = null, this._cursor = e;
|
|
2301
|
+
else {
|
|
2302
|
+
const t = this._safeDay(this._rangeStart);
|
|
2303
|
+
t && e.isBefore(t, "day") ? (this._rangeEnd = this._rangeStart, this._rangeStart = e.format("YYYY-MM-DD")) : this._rangeEnd = e.format("YYYY-MM-DD"), this._cursor = e, this._viewMode = "calendar", this._toggleOpen(!1), this._emitRangeChange();
|
|
2304
|
+
}
|
|
2305
|
+
else
|
|
2306
|
+
this._emitChange(e.format("YYYY-MM-DD")), this._cursor = e, this._viewMode = "calendar", this._toggleOpen(!1);
|
|
2307
|
+
}
|
|
2308
|
+
_selectMonth(e) {
|
|
2309
|
+
this._cursor = this._cursor.month(e), this._viewMode = "calendar";
|
|
2310
|
+
}
|
|
2311
|
+
_selectYear(e) {
|
|
2312
|
+
this._cursor = this._cursor.year(e), this._viewMode = "month";
|
|
2313
|
+
}
|
|
2314
|
+
_keydownGrid(e) {
|
|
2315
|
+
const t = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
|
|
2316
|
+
e.key in t ? (e.preventDefault(), this._cursor = this._cursor.add(t[e.key], "day")) : e.key === "Enter" || e.key === " " ? (e.preventDefault(), this._select(this._cursor)) : e.key === "Escape" ? (e.preventDefault(), this._toggleOpen(!1)) : e.key === "PageUp" ? (e.preventDefault(), this._cursor = e.shiftKey ? this._cursor.subtract(1, "year") : this._cursor.subtract(1, "month")) : e.key === "PageDown" ? (e.preventDefault(), this._cursor = e.shiftKey ? this._cursor.add(1, "year") : this._cursor.add(1, "month")) : e.key === "Home" ? (e.preventDefault(), this._cursor = this._cursor.startOf("month")) : e.key === "End" && (e.preventDefault(), this._cursor = this._cursor.endOf("month"));
|
|
2317
|
+
}
|
|
2318
|
+
// ==================== RENDER ====================
|
|
2319
|
+
_renderCalendar(e) {
|
|
2320
|
+
const t = this._daysInGrid();
|
|
2321
|
+
return l`
|
|
2322
|
+
<div class="dp__weekdays" role="row">
|
|
2323
|
+
${_o.map((o) => l`<div class="dp__weekday" role="columnheader" aria-label=${o}>${o}</div>`)}
|
|
2324
|
+
</div>
|
|
2325
|
+
<div
|
|
2326
|
+
id="grid"
|
|
2327
|
+
tabindex="0"
|
|
2328
|
+
class="dp__grid"
|
|
2329
|
+
role="grid"
|
|
2330
|
+
aria-label="Takvim"
|
|
2331
|
+
@keydown=${this._keydownGrid}
|
|
2332
|
+
@mouseleave=${() => {
|
|
2333
|
+
this._hoverDate = null;
|
|
2334
|
+
}}
|
|
2335
|
+
>
|
|
2336
|
+
${t.map((o) => {
|
|
2337
|
+
const r = o.month() === this._cursor.month(), i = e ? o.isSame(e, "day") : !1, a = o.isSame(this._cursor, "day"), n = !this._withinBounds(o), d = [
|
|
2338
|
+
this._getDayClasses(o),
|
|
2339
|
+
r ? "" : "dp__day--out-of-month",
|
|
2340
|
+
a ? "dp__day--focused" : ""
|
|
2341
|
+
].filter(Boolean).join(" ");
|
|
2342
|
+
return l`
|
|
2343
|
+
<button
|
|
2344
|
+
class="${d}"
|
|
2345
|
+
role="gridcell"
|
|
2346
|
+
@click=${() => !n && this._select(o)}
|
|
2347
|
+
@mouseenter=${() => {
|
|
2348
|
+
this.rangeMode && this._rangeStart && !this._rangeEnd && (this._hoverDate = o);
|
|
2349
|
+
}}
|
|
2350
|
+
aria-selected=${i ? "true" : "false"}
|
|
2351
|
+
aria-disabled=${n ? "true" : "false"}
|
|
2352
|
+
tabindex=${a ? "0" : "-1"}
|
|
2353
|
+
>
|
|
2354
|
+
<span class="dp__day-num">${o.date()}</span>
|
|
2355
|
+
</button>
|
|
2356
|
+
`;
|
|
2357
|
+
})}
|
|
2358
|
+
</div>
|
|
2359
|
+
`;
|
|
2360
|
+
}
|
|
2361
|
+
_renderMonthGrid() {
|
|
2362
|
+
return l`
|
|
2363
|
+
<div class="dp__month-grid" role="grid" aria-label="Ay seçimi">
|
|
2364
|
+
${mo.map((e, t) => {
|
|
2365
|
+
const o = t === this._cursor.month(), r = t === D().month() && this._cursor.year() === D().year();
|
|
2366
|
+
return l`
|
|
2367
|
+
<button
|
|
2368
|
+
class="dp__month-btn ${o ? "dp__month-btn--selected" : ""} ${r && !o ? "dp__month-btn--current" : ""}"
|
|
2369
|
+
role="gridcell"
|
|
2370
|
+
aria-selected=${o ? "true" : "false"}
|
|
2371
|
+
@click=${() => this._selectMonth(t)}
|
|
2372
|
+
>${e}</button>
|
|
2373
|
+
`;
|
|
2374
|
+
})}
|
|
2375
|
+
</div>
|
|
2376
|
+
`;
|
|
2377
|
+
}
|
|
2378
|
+
_renderYearGrid() {
|
|
2379
|
+
return l`
|
|
2380
|
+
<div class="dp__year-grid" role="grid" aria-label="Yıl seçimi">
|
|
2381
|
+
${this._getYears().map((e) => {
|
|
2382
|
+
const t = e === this._cursor.year(), o = e === D().year();
|
|
2383
|
+
return l`
|
|
2384
|
+
<button
|
|
2385
|
+
class="dp__year-btn ${t ? "dp__year-btn--selected" : ""} ${o && !t ? "dp__year-btn--current" : ""}"
|
|
2386
|
+
role="gridcell"
|
|
2387
|
+
aria-selected=${t ? "true" : "false"}
|
|
2388
|
+
@click=${() => this._selectYear(e)}
|
|
2389
|
+
>${e}</button>
|
|
2390
|
+
`;
|
|
2391
|
+
})}
|
|
2392
|
+
</div>
|
|
2393
|
+
`;
|
|
2394
|
+
}
|
|
2395
|
+
render() {
|
|
2396
|
+
const e = this._displayValue(), t = this._safeDay(this.value), o = [
|
|
2397
|
+
"dp__input",
|
|
2398
|
+
this._open ? "dp__input--open" : "",
|
|
2399
|
+
this._hasError ? "dp__input--error" : "",
|
|
2400
|
+
this.required && !e ? "dp__input--required" : ""
|
|
2401
|
+
].filter(Boolean).join(" ");
|
|
2402
|
+
return l`
|
|
2403
|
+
<div class="dp">
|
|
2404
|
+
<div class="dp__input-wrapper">
|
|
2405
|
+
<input
|
|
2406
|
+
id=${this.inputId}
|
|
2407
|
+
class="${o}"
|
|
2408
|
+
.value=${e}
|
|
2409
|
+
?disabled=${this.disabled}
|
|
2410
|
+
placeholder=${this.placeholder}
|
|
2411
|
+
aria-label="Tarih girin"
|
|
2412
|
+
aria-invalid=${this._hasError ? "true" : "false"}
|
|
2413
|
+
@input=${this._onInput}
|
|
2414
|
+
@keydown=${this._onKeydown}
|
|
2415
|
+
/>
|
|
2416
|
+
<button
|
|
2417
|
+
id=${this.inputId + "-ico"}
|
|
2418
|
+
class="dp__icon-btn"
|
|
2419
|
+
aria-label=${this._open ? "Takvimi kapat" : "Takvimi aç"}
|
|
2420
|
+
aria-expanded=${this._open ? "true" : "false"}
|
|
2421
|
+
aria-haspopup="dialog"
|
|
2422
|
+
@click=${() => this._toggleOpen()}
|
|
2423
|
+
>
|
|
2424
|
+
<ui-icon name="uil-calendar" size="16"></ui-icon>
|
|
2425
|
+
</button>
|
|
2426
|
+
${this._hasError ? l`
|
|
2427
|
+
<div class="dp__error-tooltip" role="alert">${this._errorMsg}</div>
|
|
2428
|
+
` : u}
|
|
2429
|
+
</div>
|
|
2430
|
+
|
|
2431
|
+
${this._open ? l`
|
|
2432
|
+
<div
|
|
2433
|
+
class="dp__popup"
|
|
2434
|
+
style="left:${this._popupPos?.left ?? 0}px; top:${this._popupPos?.top ?? 0}px; width:${this._popupPos?.width ?? 320}px; max-height:${this._popupPos?.maxH ?? 420}px;"
|
|
2435
|
+
role="dialog"
|
|
2436
|
+
aria-modal="true"
|
|
2437
|
+
aria-label="Tarih seçici"
|
|
2438
|
+
>
|
|
2439
|
+
<div class="dp__header">
|
|
2440
|
+
<button class="dp__nav-btn" @click=${this._navigatePrevious} aria-label="Önceki">
|
|
2441
|
+
<ui-icon name="uil-arrow-left" size="16"></ui-icon>
|
|
2442
|
+
</button>
|
|
2443
|
+
<span class="dp__header-label" @click=${this._handleHeaderClick} role="button" tabindex="0">
|
|
2444
|
+
${this._getHeaderLabel()}
|
|
2445
|
+
</span>
|
|
2446
|
+
<button class="dp__nav-btn" @click=${this._navigateNext} aria-label="Sonraki">
|
|
2447
|
+
<ui-icon name="uil-arrow-right" size="16"></ui-icon>
|
|
2448
|
+
</button>
|
|
2449
|
+
</div>
|
|
2450
|
+
|
|
2451
|
+
${this._viewMode === "calendar" ? this._renderCalendar(t) : this._viewMode === "month" ? this._renderMonthGrid() : this._renderYearGrid()}
|
|
2452
|
+
|
|
2453
|
+
<div class="dp__footer">
|
|
2454
|
+
<button class="dp__footer-btn" @click=${this._today} aria-label="Bugün">
|
|
2455
|
+
<ui-icon name="uil-calendar" size="14"></ui-icon>
|
|
2456
|
+
</button>
|
|
2457
|
+
<button class="dp__footer-btn" @click=${this._clear} aria-label="Temizle">
|
|
2458
|
+
<ui-icon name="uil-trash" size="14"></ui-icon>
|
|
2459
|
+
</button>
|
|
2460
|
+
<button class="dp__footer-btn" @click=${() => this._toggleOpen(!1)} aria-label="Kapat">
|
|
2461
|
+
<ui-icon name="uil-times" size="14"></ui-icon>
|
|
2462
|
+
</button>
|
|
2463
|
+
</div>
|
|
2464
|
+
</div>
|
|
2465
|
+
` : u}
|
|
2466
|
+
</div>
|
|
2467
|
+
`;
|
|
2468
|
+
}
|
|
2469
|
+
};
|
|
2470
|
+
$.styles = [T`${P(uo)}`];
|
|
2471
|
+
S([
|
|
2472
|
+
s({ type: String })
|
|
2473
|
+
], $.prototype, "value", 2);
|
|
2474
|
+
S([
|
|
2475
|
+
s({ type: String })
|
|
2476
|
+
], $.prototype, "min", 2);
|
|
2477
|
+
S([
|
|
2478
|
+
s({ type: String })
|
|
2479
|
+
], $.prototype, "max", 2);
|
|
2480
|
+
S([
|
|
2481
|
+
s({ type: Boolean })
|
|
2482
|
+
], $.prototype, "required", 2);
|
|
2483
|
+
S([
|
|
2484
|
+
s({ type: Boolean })
|
|
2485
|
+
], $.prototype, "disabled", 2);
|
|
2486
|
+
S([
|
|
2487
|
+
s({ type: Number })
|
|
2488
|
+
], $.prototype, "expandFactor", 2);
|
|
2489
|
+
S([
|
|
2490
|
+
s({ type: String })
|
|
2491
|
+
], $.prototype, "placeholder", 2);
|
|
2492
|
+
S([
|
|
2493
|
+
s({ type: Boolean })
|
|
2494
|
+
], $.prototype, "rangeMode", 2);
|
|
2495
|
+
S([
|
|
2496
|
+
s({ type: Array })
|
|
2497
|
+
], $.prototype, "disabledDays", 2);
|
|
2498
|
+
S([
|
|
2499
|
+
s({ type: String })
|
|
2500
|
+
], $.prototype, "rangeStart", 2);
|
|
2501
|
+
S([
|
|
2502
|
+
s({ type: String })
|
|
2503
|
+
], $.prototype, "rangeEnd", 2);
|
|
2504
|
+
S([
|
|
2505
|
+
s({ attribute: !1 })
|
|
2506
|
+
], $.prototype, "onChange", 2);
|
|
2507
|
+
S([
|
|
2508
|
+
s({ attribute: !1 })
|
|
2509
|
+
], $.prototype, "onRangeChange", 2);
|
|
2510
|
+
S([
|
|
2511
|
+
m()
|
|
2512
|
+
], $.prototype, "_open", 2);
|
|
2513
|
+
S([
|
|
2514
|
+
m()
|
|
2515
|
+
], $.prototype, "_cursor", 2);
|
|
2516
|
+
S([
|
|
2517
|
+
m()
|
|
2518
|
+
], $.prototype, "_popupPos", 2);
|
|
2519
|
+
S([
|
|
2520
|
+
m()
|
|
2521
|
+
], $.prototype, "_rangeStart", 2);
|
|
2522
|
+
S([
|
|
2523
|
+
m()
|
|
2524
|
+
], $.prototype, "_rangeEnd", 2);
|
|
2525
|
+
S([
|
|
2526
|
+
m()
|
|
2527
|
+
], $.prototype, "_hoverDate", 2);
|
|
2528
|
+
S([
|
|
2529
|
+
m()
|
|
2530
|
+
], $.prototype, "_viewMode", 2);
|
|
2531
|
+
S([
|
|
2532
|
+
m()
|
|
2533
|
+
], $.prototype, "_hasError", 2);
|
|
2534
|
+
S([
|
|
2535
|
+
m()
|
|
2536
|
+
], $.prototype, "_errorMsg", 2);
|
|
2537
|
+
$ = S([
|
|
2538
|
+
Y("logosphere-datepicker")
|
|
2539
|
+
], $);
|
|
2540
|
+
const wo = ":host{display:block}.dm{font-family:var(--font-family-base)}.dm__container{width:100%;max-width:896px;margin:0 auto;padding:var(--spacing-6);background-color:var(--color-body-bg);border-radius:var(--radius-base);box-shadow:var(--shadow-md)}.dm__header{margin-bottom:var(--spacing-6)}.dm__title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-body-text);margin:0 0 var(--spacing-2) 0}.dm__stats{display:flex;gap:var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-tertiary)}.dm__form{margin-bottom:var(--spacing-6);padding:var(--spacing-4);background-color:var(--color-tertiary-bg);border-radius:var(--radius-base)}.dm__form-row{display:flex;gap:var(--spacing-4)}.dm__form-field{flex:1}.dm__form-field--filename{width:192px;flex:none}.dm__input{width:100%;padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);outline:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);background-color:var(--color-body-bg);color:var(--color-body-text);box-sizing:border-box;transition:border-color var(--transition-speed-fast) var(--transition-timing)}.dm__input:focus{border-color:var(--color-primary)}.dm__submit-btn{display:inline-flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:background-color var(--transition-speed-fast) var(--transition-timing);white-space:nowrap}.dm__submit-btn:hover:not(:disabled){background-color:var(--color-primary-hover)}.dm__submit-btn:disabled{opacity:.5;cursor:not-allowed}.dm__form-note{margin-top:var(--spacing-3);font-size:var(--font-size-xs);color:var(--color-tertiary)}.dm__form-note p{margin:0}.dm__spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-bottom-color:#fff;border-radius:var(--radius-full);animation:dm-spin .8s linear infinite}.dm__spinner--sm{width:12px;height:12px;border-color:#3b82f64d;border-bottom-color:#3b82f6}@keyframes dm-spin{to{transform:rotate(360deg)}}@keyframes dm-pulse{0%,to{opacity:1}50%{opacity:.5}}.dm__list{display:flex;flex-direction:column;gap:var(--spacing-4)}.dm__empty{text-align:center;padding:var(--spacing-8) 0;color:var(--color-tertiary);font-size:var(--font-size-sm)}.dm__item{border:1px solid var(--color-border);border-radius:var(--radius-base);padding:var(--spacing-4)}.dm__item--error{border-color:var(--color-primary-border-subtle);background-color:var(--color-danger-bg-subtle)}.dm__item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-3)}.dm__item-info{flex:1;min-width:0}.dm__item-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.dm__item-url{font-size:var(--font-size-xs);color:var(--color-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.dm__item-controls{display:flex;align-items:center;gap:var(--spacing-2)}.dm__status{font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-full);font-weight:var(--font-weight-medium)}.dm__status--downloading{background-color:var(--color-info-bg-subtle);color:var(--color-info-text-emphasis)}.dm__status--paused{background-color:var(--color-warning-bg-subtle);color:var(--color-warning-text-emphasis)}.dm__status--completed{background-color:var(--color-success-bg-subtle);color:var(--color-success-text-emphasis)}.dm__status--error{background-color:var(--color-danger-bg-subtle);color:var(--color-danger-text-emphasis)}.dm__status--pending{background-color:var(--color-gray-100);color:var(--color-gray-800)}.dm__remove-btn{background:none;border:none;cursor:pointer;color:var(--color-tertiary);padding:var(--spacing-1);line-height:1;font-size:var(--font-size-sm);border-radius:var(--radius-sm);transition:color var(--transition-speed-fast) var(--transition-timing)}.dm__remove-btn:hover{color:var(--color-danger)}.dm__progress{margin-bottom:var(--spacing-3)}.dm__progress-labels{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.dm__progress-track{width:100%;background-color:var(--color-gray-200);border-radius:var(--radius-full);height:8px;overflow:hidden}.dm__progress-bar{height:8px;border-radius:var(--radius-full);transition:width .3s ease}.dm__progress-bar--downloading{background-color:var(--color-info-active)}.dm__progress-bar--paused{background-color:var(--color-warning-active)}.dm__progress-bar--completed{background-color:var(--color-success)}.dm__progress-bar--error{background-color:var(--color-danger)}.dm__progress-bar--pending{background-color:var(--color-gray-400)}.dm__progress-bar--indeterminate{width:100%;animation:dm-pulse 1.5s ease-in-out infinite}.dm__item-footer{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-tertiary)}.dm__item-speeds{display:flex;gap:var(--spacing-4)}.dm__item-actions{display:flex;gap:var(--spacing-2)}.dm__action-btn{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);border:none;border-radius:var(--radius-sm);background:none;cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-xs);transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.dm__action-btn--pause{color:var(--color-info-active)}.dm__action-btn--pause:hover{background-color:var(--color-info-bg-subtle);color:var(--color-info-text-emphasis)}.dm__action-btn--resume{color:var(--color-success)}.dm__action-btn--resume:hover{background-color:var(--color-success-bg-subtle);color:var(--color-success-text-emphasis)}.dm__status-completed{color:var(--color-success)}.dm__error-info{color:var(--color-danger)}.dm__error-label{font-weight:var(--font-weight-medium)}.dm__error-detail{font-size:var(--font-size-xs)}.dm__chunks{margin-top:var(--spacing-3);font-size:var(--font-size-xs);color:var(--color-tertiary);display:flex;flex-direction:column;gap:2px}.dm__actions{margin-top:var(--spacing-6);display:flex;justify-content:space-between;align-items:center}.dm__clear-btn{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-tertiary);background:none;border:none;cursor:pointer;font-family:var(--font-family-base);transition:color var(--transition-speed-fast) var(--transition-timing)}.dm__clear-btn:hover{color:var(--color-body-text)}.dm__persist-note{font-size:var(--font-size-sm);color:var(--color-tertiary)}";
|
|
2541
|
+
var xo = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, ye = (e, t, o, r) => {
|
|
2542
|
+
for (var i = r > 1 ? void 0 : r ? ko(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
2543
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
2544
|
+
return r && i && xo(t, o, i), i;
|
|
2545
|
+
};
|
|
2546
|
+
let ne = class extends O {
|
|
2547
|
+
constructor() {
|
|
2548
|
+
super(...arguments), this.chunkSize = 2 * 1024 * 1024, this.maxConcurrentDownloads = 3, this.maxConcurrentChunks = 4, this.downloads = [], this.isAddingFiles = !1, this.activeDownloads = /* @__PURE__ */ new Map(), this.storageKey = "download-manager-state", this.clearCompleted = () => {
|
|
2549
|
+
this.downloads = this.downloads.filter((e) => e.status !== "completed"), this.requestUpdate(), this.saveState();
|
|
2550
|
+
}, this.handleAddDownload = (e) => {
|
|
2551
|
+
e.preventDefault();
|
|
2552
|
+
const t = e.target, o = new globalThis.FormData(t), r = o.get("url"), i = o.get("filename");
|
|
2553
|
+
if (!r?.trim()) return;
|
|
2554
|
+
const a = this.downloads.find((n) => n.url === r.trim());
|
|
2555
|
+
a && a.status !== "error" || (this.addDownload(r.trim(), i?.trim() || void 0), t.reset());
|
|
2556
|
+
};
|
|
2557
|
+
}
|
|
2558
|
+
connectedCallback() {
|
|
2559
|
+
super.connectedCallback(), this.loadState(), this.setupVisibilityChangeHandler();
|
|
2560
|
+
}
|
|
2561
|
+
disconnectedCallback() {
|
|
2562
|
+
super.disconnectedCallback(), this.saveState();
|
|
2563
|
+
}
|
|
2564
|
+
setupVisibilityChangeHandler() {
|
|
2565
|
+
document.addEventListener("visibilitychange", () => {
|
|
2566
|
+
document.hidden && this.saveState();
|
|
2567
|
+
});
|
|
2568
|
+
}
|
|
2569
|
+
loadState() {
|
|
2570
|
+
try {
|
|
2571
|
+
const e = globalThis.localStorage.getItem(this.storageKey);
|
|
2572
|
+
if (e) {
|
|
2573
|
+
const t = JSON.parse(e);
|
|
2574
|
+
this.downloads = t.downloads || [], this.downloads.forEach((o) => {
|
|
2575
|
+
o.status === "downloading" && (o.status = "paused"), o.status === "error" && o.error?.includes("Failed to fetch") && (o.status = "paused", o.error = void 0);
|
|
2576
|
+
});
|
|
2577
|
+
}
|
|
2578
|
+
} catch (e) {
|
|
2579
|
+
console.error("Failed to load download state:", e);
|
|
2580
|
+
}
|
|
2581
|
+
}
|
|
2582
|
+
saveState() {
|
|
2583
|
+
try {
|
|
2584
|
+
const e = {
|
|
2585
|
+
downloads: this.downloads.map((t) => ({
|
|
2586
|
+
...t,
|
|
2587
|
+
status: t.status === "downloading" ? "paused" : t.status
|
|
2588
|
+
}))
|
|
2589
|
+
};
|
|
2590
|
+
globalThis.localStorage.setItem(this.storageKey, JSON.stringify(e));
|
|
2591
|
+
} catch (e) {
|
|
2592
|
+
console.error("Failed to save download state:", e);
|
|
2593
|
+
}
|
|
2594
|
+
}
|
|
2595
|
+
async getFileSize(e) {
|
|
2596
|
+
try {
|
|
2597
|
+
const t = await globalThis.fetch(e, {
|
|
2598
|
+
method: "HEAD",
|
|
2599
|
+
mode: "cors",
|
|
2600
|
+
credentials: "omit",
|
|
2601
|
+
signal: globalThis.AbortSignal.timeout(1e4)
|
|
2602
|
+
});
|
|
2603
|
+
if (t.ok) {
|
|
2604
|
+
const o = t.headers.get("content-length");
|
|
2605
|
+
if (o) {
|
|
2606
|
+
const r = parseInt(o);
|
|
2607
|
+
if (!isNaN(r) && r > 0) return r;
|
|
2608
|
+
}
|
|
2609
|
+
}
|
|
2610
|
+
try {
|
|
2611
|
+
const o = await globalThis.fetch(e, {
|
|
2612
|
+
method: "GET",
|
|
2613
|
+
headers: { Range: "bytes=0-0" },
|
|
2614
|
+
mode: "cors",
|
|
2615
|
+
credentials: "omit",
|
|
2616
|
+
signal: globalThis.AbortSignal.timeout(1e4)
|
|
2617
|
+
});
|
|
2618
|
+
if (o.ok) {
|
|
2619
|
+
const r = o.headers.get("content-range");
|
|
2620
|
+
if (r) {
|
|
2621
|
+
const a = r.match(/\/(\d+)/);
|
|
2622
|
+
if (a) {
|
|
2623
|
+
const n = parseInt(a[1]);
|
|
2624
|
+
if (!isNaN(n) && n > 0) return n;
|
|
2625
|
+
}
|
|
2626
|
+
}
|
|
2627
|
+
const i = o.headers.get("content-length");
|
|
2628
|
+
if (i) {
|
|
2629
|
+
const a = parseInt(i);
|
|
2630
|
+
if (!isNaN(a) && a > 0) return a;
|
|
2631
|
+
}
|
|
2632
|
+
}
|
|
2633
|
+
} catch {
|
|
2634
|
+
}
|
|
2635
|
+
return 0;
|
|
2636
|
+
} catch (t) {
|
|
2637
|
+
return (!(t instanceof Error) || !["AbortError", "ERR_EMPTY_RESPONSE", "Failed to fetch"].some((o) => t.message.includes(o))) && console.warn("Failed to get file size:", t), 0;
|
|
2638
|
+
}
|
|
2639
|
+
}
|
|
2640
|
+
createChunks(e) {
|
|
2641
|
+
if (e === 0)
|
|
2642
|
+
return [{ start: 0, end: this.chunkSize - 1, downloaded: 0, status: "pending" }];
|
|
2643
|
+
const t = [];
|
|
2644
|
+
for (let o = 0; o < e; o += this.chunkSize)
|
|
2645
|
+
t.push({ start: o, end: Math.min(o + this.chunkSize - 1, e - 1), downloaded: 0, status: "pending" });
|
|
2646
|
+
return t;
|
|
2647
|
+
}
|
|
2648
|
+
async downloadChunk(e, t) {
|
|
2649
|
+
const o = t.end > t.start ? `bytes=${t.start + t.downloaded}-${t.end}` : `bytes=${t.start + t.downloaded}-`, r = await globalThis.fetch(e, {
|
|
2650
|
+
headers: { Range: o },
|
|
2651
|
+
signal: globalThis.AbortSignal.any([
|
|
2652
|
+
new globalThis.AbortController().signal,
|
|
2653
|
+
globalThis.AbortSignal.timeout(6e4)
|
|
2654
|
+
]),
|
|
2655
|
+
mode: "cors",
|
|
2656
|
+
credentials: "omit"
|
|
2657
|
+
});
|
|
2658
|
+
if (!r.ok) {
|
|
2659
|
+
if (r.status === 416) return { data: new Uint8Array(0), isComplete: !0 };
|
|
2660
|
+
throw new Error(`HTTP ${r.status}: ${r.statusText}`);
|
|
2661
|
+
}
|
|
2662
|
+
const i = new Uint8Array(await r.arrayBuffer()), a = r.headers.get("content-range");
|
|
2663
|
+
let n = !1, d;
|
|
2664
|
+
if (a) {
|
|
2665
|
+
const c = a.match(/\/(\d+)/);
|
|
2666
|
+
if (c) {
|
|
2667
|
+
d = parseInt(c[1]);
|
|
2668
|
+
const f = a.match(/(\d+)-(\d+)/);
|
|
2669
|
+
f && (n = parseInt(f[2]) >= d - 1);
|
|
2670
|
+
}
|
|
2671
|
+
} else i.length === 0 && (n = !0);
|
|
2672
|
+
return { data: i, isComplete: n, actualSize: d };
|
|
2673
|
+
}
|
|
2674
|
+
async downloadFile(e) {
|
|
2675
|
+
const t = new globalThis.AbortController();
|
|
2676
|
+
this.activeDownloads.set(e.id, t);
|
|
2677
|
+
try {
|
|
2678
|
+
e.status = "downloading", e.startTime = Date.now(), this.requestUpdate();
|
|
2679
|
+
const o = e.chunks.filter((d) => d.status === "pending"), r = /* @__PURE__ */ new Set(), i = async (d) => {
|
|
2680
|
+
const c = e.chunks[d];
|
|
2681
|
+
if (!(!c || c.status !== "pending")) {
|
|
2682
|
+
c.status = "downloading", r.add(d), this.requestUpdate();
|
|
2683
|
+
try {
|
|
2684
|
+
if (e.status !== "downloading") return;
|
|
2685
|
+
const f = await this.downloadChunk(e.url, c);
|
|
2686
|
+
if (e.status !== "downloading") return;
|
|
2687
|
+
c.downloaded = f.data.length, c.status = "completed", e.downloaded += c.downloaded, f.actualSize && e.size === 0 && (e.size = f.actualSize, e.size > this.chunkSize && e.chunks.push(...this.createChunks(e.size).slice(1))), r.delete(d), this.requestUpdate(), this.saveState(), (f.isComplete || e.chunks.every((b) => b.status === "completed")) && (e.status = "completed", e.endTime = Date.now(), this.requestUpdate(), this.saveState());
|
|
2688
|
+
} catch (f) {
|
|
2689
|
+
c.status = "error", r.delete(d), e.chunks.filter((b) => b.status === "error").length === e.chunks.length && (e.status = "error", e.error = f instanceof Error ? f.message : "All chunks failed"), this.requestUpdate(), this.saveState();
|
|
2690
|
+
}
|
|
2691
|
+
await new Promise((f) => setTimeout(f, 1));
|
|
2692
|
+
}
|
|
2693
|
+
}, a = [];
|
|
2694
|
+
let n = 0;
|
|
2695
|
+
for (; (n < o.length || r.size > 0) && e.status === "downloading"; ) {
|
|
2696
|
+
for (; r.size < this.maxConcurrentChunks && n < o.length && e.status === "downloading"; )
|
|
2697
|
+
a.push(i(n)), n++;
|
|
2698
|
+
if (r.size > 0)
|
|
2699
|
+
try {
|
|
2700
|
+
await Promise.race([Promise.race(a), new Promise((d) => setTimeout(d, 100))]);
|
|
2701
|
+
} catch {
|
|
2702
|
+
}
|
|
2703
|
+
await new Promise((d) => setTimeout(d, 10));
|
|
2704
|
+
}
|
|
2705
|
+
} catch (o) {
|
|
2706
|
+
(!(o instanceof Error) || o.name !== "AbortError") && (e.status = "error", e.error = o instanceof Error ? o.message : "Unknown error", this.requestUpdate());
|
|
2707
|
+
} finally {
|
|
2708
|
+
this.activeDownloads.delete(e.id), this.saveState();
|
|
2709
|
+
}
|
|
2710
|
+
}
|
|
2711
|
+
pauseDownload(e) {
|
|
2712
|
+
const t = this.activeDownloads.get(e);
|
|
2713
|
+
t && (t.abort(), this.activeDownloads.delete(e));
|
|
2714
|
+
const o = this.downloads.find((r) => r.id === e);
|
|
2715
|
+
o?.status === "downloading" && (o.status = "paused", this.requestUpdate(), this.saveState());
|
|
2716
|
+
}
|
|
2717
|
+
resumeDownload(e) {
|
|
2718
|
+
const t = this.downloads.find((o) => o.id === e);
|
|
2719
|
+
t?.status === "paused" && this.downloadFile(t);
|
|
2720
|
+
}
|
|
2721
|
+
removeDownload(e) {
|
|
2722
|
+
this.pauseDownload(e), this.downloads = this.downloads.filter((t) => t.id !== e), this.requestUpdate(), this.saveState();
|
|
2723
|
+
}
|
|
2724
|
+
formatBytes(e) {
|
|
2725
|
+
if (e === 0) return "0 Bytes";
|
|
2726
|
+
const t = 1024, o = ["Bytes", "KB", "MB", "GB"], r = Math.floor(Math.log(e) / Math.log(t));
|
|
2727
|
+
return parseFloat((e / Math.pow(t, r)).toFixed(2)) + " " + o[r];
|
|
2728
|
+
}
|
|
2729
|
+
formatDuration(e) {
|
|
2730
|
+
const t = Math.floor(e / 1e3), o = Math.floor(t / 60), r = Math.floor(o / 60);
|
|
2731
|
+
return r > 0 ? `${r}h ${o % 60}m ${t % 60}s` : o > 0 ? `${o}m ${t % 60}s` : `${t}s`;
|
|
2732
|
+
}
|
|
2733
|
+
getProgressPercentage(e) {
|
|
2734
|
+
return e.size === 0 ? e.status === "completed" ? 100 : 0 : Math.round(e.downloaded / e.size * 100);
|
|
2735
|
+
}
|
|
2736
|
+
getDownloadSpeed(e) {
|
|
2737
|
+
if (!e.startTime) return "0 KB/s";
|
|
2738
|
+
const t = (Date.now() - e.startTime) / 1e3;
|
|
2739
|
+
return t === 0 ? "0 KB/s" : this.formatBytes(e.downloaded / t) + "/s";
|
|
2740
|
+
}
|
|
2741
|
+
getETA(e) {
|
|
2742
|
+
if (!e.startTime || e.downloaded === 0 || e.size === 0) return "Unknown";
|
|
2743
|
+
const t = (Date.now() - e.startTime) / 1e3;
|
|
2744
|
+
return this.formatDuration((e.size - e.downloaded) / (e.downloaded / t) * 1e3);
|
|
2745
|
+
}
|
|
2746
|
+
async addDownload(e, t) {
|
|
2747
|
+
try {
|
|
2748
|
+
this.isAddingFiles = !0, this.requestUpdate();
|
|
2749
|
+
try {
|
|
2750
|
+
new globalThis.URL(e);
|
|
2751
|
+
} catch {
|
|
2752
|
+
throw new Error("Invalid URL format");
|
|
2753
|
+
}
|
|
2754
|
+
const o = await this.getFileSize(e), i = {
|
|
2755
|
+
id: `download_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
|
|
2756
|
+
url: e,
|
|
2757
|
+
filename: t || e.split("/").pop() || "unknown",
|
|
2758
|
+
size: o,
|
|
2759
|
+
downloaded: 0,
|
|
2760
|
+
status: "pending",
|
|
2761
|
+
chunks: this.createChunks(o)
|
|
2762
|
+
};
|
|
2763
|
+
this.downloads.push(i), this.requestUpdate(), this.saveState(), this.downloadFile(i);
|
|
2764
|
+
} catch (o) {
|
|
2765
|
+
const r = o instanceof Error ? o.message : "Unknown error occurred";
|
|
2766
|
+
this.downloads.push({
|
|
2767
|
+
id: `error_${Date.now()}`,
|
|
2768
|
+
url: e,
|
|
2769
|
+
filename: t || e.split("/").pop() || "unknown",
|
|
2770
|
+
size: 0,
|
|
2771
|
+
downloaded: 0,
|
|
2772
|
+
status: "error",
|
|
2773
|
+
chunks: [],
|
|
2774
|
+
error: r
|
|
2775
|
+
}), this.requestUpdate(), this.saveState();
|
|
2776
|
+
} finally {
|
|
2777
|
+
this.isAddingFiles = !1, this.requestUpdate();
|
|
2778
|
+
}
|
|
2779
|
+
}
|
|
2780
|
+
getStatusClass(e) {
|
|
2781
|
+
return {
|
|
2782
|
+
downloading: "dm__status--downloading",
|
|
2783
|
+
paused: "dm__status--paused",
|
|
2784
|
+
completed: "dm__status--completed",
|
|
2785
|
+
error: "dm__status--error"
|
|
2786
|
+
}[e] ?? "dm__status--pending";
|
|
2787
|
+
}
|
|
2788
|
+
getProgressBarClass(e) {
|
|
2789
|
+
return {
|
|
2790
|
+
downloading: "dm__progress-bar--downloading",
|
|
2791
|
+
paused: "dm__progress-bar--paused",
|
|
2792
|
+
completed: "dm__progress-bar--completed",
|
|
2793
|
+
error: "dm__progress-bar--error"
|
|
2794
|
+
}[e] ?? "dm__progress-bar--pending";
|
|
2795
|
+
}
|
|
2796
|
+
render() {
|
|
2797
|
+
const e = this.downloads.filter((r) => r.status === "downloading").length, t = this.downloads.filter((r) => r.status === "completed").length, o = this.downloads.filter((r) => r.status === "paused").length;
|
|
2798
|
+
return l`
|
|
2799
|
+
<div class="dm">
|
|
2800
|
+
<div class="dm__container">
|
|
2801
|
+
<div class="dm__header">
|
|
2802
|
+
<h2 class="dm__title">Download Manager</h2>
|
|
2803
|
+
<div class="dm__stats">
|
|
2804
|
+
<span>Active: ${e}</span>
|
|
2805
|
+
<span>Paused: ${o}</span>
|
|
2806
|
+
<span>Completed: ${t}</span>
|
|
2807
|
+
<span>Total: ${this.downloads.length}</span>
|
|
2808
|
+
</div>
|
|
2809
|
+
</div>
|
|
2810
|
+
|
|
2811
|
+
<form @submit=${this.handleAddDownload} class="dm__form">
|
|
2812
|
+
<div class="dm__form-row">
|
|
2813
|
+
<div class="dm__form-field">
|
|
2814
|
+
<input type="url" name="url" placeholder="Enter download URL" required class="dm__input" />
|
|
2815
|
+
</div>
|
|
2816
|
+
<div class="dm__form-field--filename">
|
|
2817
|
+
<input type="text" name="filename" placeholder="Custom filename (optional)" class="dm__input" />
|
|
2818
|
+
</div>
|
|
2819
|
+
<button type="submit" ?disabled=${this.isAddingFiles} class="dm__submit-btn">
|
|
2820
|
+
${this.isAddingFiles ? l`<span class="dm__spinner"></span> Adding...` : "Add Download"}
|
|
2821
|
+
</button>
|
|
2822
|
+
</div>
|
|
2823
|
+
<div class="dm__form-note">
|
|
2824
|
+
<p><strong>Note:</strong> Some servers don't support HEAD requests. File size will be discovered during download.</p>
|
|
2825
|
+
</div>
|
|
2826
|
+
</form>
|
|
2827
|
+
|
|
2828
|
+
<div class="dm__list">
|
|
2829
|
+
${this.downloads.length === 0 ? l`<div class="dm__empty">No downloads yet. Add a URL to get started.</div>` : this.downloads.map((r) => l`
|
|
2830
|
+
<div class="dm__item ${r.status === "error" ? "dm__item--error" : ""}">
|
|
2831
|
+
<div class="dm__item-header">
|
|
2832
|
+
<div class="dm__item-info">
|
|
2833
|
+
<p class="dm__item-name">${r.filename}</p>
|
|
2834
|
+
<p class="dm__item-url">${r.url}</p>
|
|
2835
|
+
</div>
|
|
2836
|
+
<div class="dm__item-controls">
|
|
2837
|
+
<span class="dm__status ${this.getStatusClass(r.status)}">${r.status}</span>
|
|
2838
|
+
<button class="dm__remove-btn" @click=${() => this.removeDownload(r.id)} title="Remove download">✕</button>
|
|
2839
|
+
</div>
|
|
2840
|
+
</div>
|
|
2841
|
+
|
|
2842
|
+
<div class="dm__progress">
|
|
2843
|
+
<div class="dm__progress-labels">
|
|
2844
|
+
<span>${this.formatBytes(r.downloaded)}${r.size > 0 ? ` / ${this.formatBytes(r.size)}` : " (unknown size)"}</span>
|
|
2845
|
+
<span>${r.size > 0 ? `${this.getProgressPercentage(r)}%` : "Downloading..."}</span>
|
|
2846
|
+
</div>
|
|
2847
|
+
<div class="dm__progress-track">
|
|
2848
|
+
${r.size > 0 ? l`<div class="dm__progress-bar ${this.getProgressBarClass(r.status)}" style="width: ${this.getProgressPercentage(r)}%"></div>` : l`<div class="dm__progress-bar ${this.getProgressBarClass(r.status)} dm__progress-bar--indeterminate"></div>`}
|
|
2849
|
+
</div>
|
|
2850
|
+
</div>
|
|
2851
|
+
|
|
2852
|
+
<div class="dm__item-footer">
|
|
2853
|
+
<div class="dm__item-speeds">
|
|
2854
|
+
<span>Speed: ${r.status === "downloading" ? this.getDownloadSpeed(r) : "0 KB/s"}</span>
|
|
2855
|
+
<span>ETA: ${r.status === "downloading" ? this.getETA(r) : "Unknown"}</span>
|
|
2856
|
+
</div>
|
|
2857
|
+
<div class="dm__item-actions">
|
|
2858
|
+
${r.status === "downloading" ? l`
|
|
2859
|
+
<button class="dm__action-btn dm__action-btn--pause" @click=${() => this.pauseDownload(r.id)}>
|
|
2860
|
+
<span class="dm__spinner dm__spinner--sm"></span> Pause
|
|
2861
|
+
</button>
|
|
2862
|
+
` : r.status === "paused" ? l`
|
|
2863
|
+
<button class="dm__action-btn dm__action-btn--resume" @click=${() => this.resumeDownload(r.id)}>Resume</button>
|
|
2864
|
+
` : r.status === "completed" ? l`
|
|
2865
|
+
<span class="dm__status-completed">Completed</span>
|
|
2866
|
+
` : r.status === "error" ? l`
|
|
2867
|
+
<div class="dm__error-info">
|
|
2868
|
+
<div class="dm__error-label">Error</div>
|
|
2869
|
+
<div class="dm__error-detail">${r.error}</div>
|
|
2870
|
+
</div>
|
|
2871
|
+
` : ""}
|
|
2872
|
+
</div>
|
|
2873
|
+
</div>
|
|
2874
|
+
|
|
2875
|
+
${r.status === "downloading" ? l`
|
|
2876
|
+
<div class="dm__chunks">
|
|
2877
|
+
<div>Chunks: ${r.chunks.filter((i) => i.status === "completed").length}/${r.chunks.length} completed</div>
|
|
2878
|
+
<div>Chunk size: ${this.formatBytes(this.chunkSize)}</div>
|
|
2879
|
+
<div>Downloaded: ${this.formatBytes(r.downloaded)}${r.size > 0 ? ` / ${this.formatBytes(r.size)}` : ""}</div>
|
|
2880
|
+
</div>
|
|
2881
|
+
` : ""}
|
|
2882
|
+
</div>
|
|
2883
|
+
`)}
|
|
2884
|
+
</div>
|
|
2885
|
+
|
|
2886
|
+
${this.downloads.length > 0 ? l`
|
|
2887
|
+
<div class="dm__actions">
|
|
2888
|
+
<button class="dm__clear-btn" @click=${this.clearCompleted}>Clear Completed</button>
|
|
2889
|
+
<div class="dm__persist-note">State is automatically saved and will persist across browser sessions</div>
|
|
2890
|
+
</div>
|
|
2891
|
+
` : ""}
|
|
2892
|
+
</div>
|
|
2893
|
+
</div>
|
|
2894
|
+
`;
|
|
2895
|
+
}
|
|
2896
|
+
};
|
|
2897
|
+
ne.styles = [T`${P(wo)}`];
|
|
2898
|
+
ye([
|
|
2899
|
+
s({ type: Number })
|
|
2900
|
+
], ne.prototype, "chunkSize", 2);
|
|
2901
|
+
ye([
|
|
2902
|
+
s({ type: Number })
|
|
2903
|
+
], ne.prototype, "maxConcurrentDownloads", 2);
|
|
2904
|
+
ye([
|
|
2905
|
+
s({ type: Number })
|
|
2906
|
+
], ne.prototype, "maxConcurrentChunks", 2);
|
|
2907
|
+
ye([
|
|
2908
|
+
m()
|
|
2909
|
+
], ne.prototype, "downloads", 2);
|
|
2910
|
+
ye([
|
|
2911
|
+
m()
|
|
2912
|
+
], ne.prototype, "isAddingFiles", 2);
|
|
2913
|
+
ne = ye([
|
|
2914
|
+
Y("download-manager")
|
|
2915
|
+
], ne);
|
|
2916
|
+
const $o = ".modal__backdrop{position:fixed;inset:0;z-index:var(--z-index-modal-backdrop);display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:var(--spacing-4);font-family:var(--font-family-base)}.modal__dialog{width:100%;max-width:720px;border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;box-shadow:var(--shadow-xl);background-color:var(--color-body-bg);display:grid;grid-template-rows:auto 1fr auto}.modal__header{padding:var(--spacing-4) var(--spacing-4) var(--spacing-2);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--spacing-2)}.modal__header-content{flex:1;min-width:0}.modal__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-body-text);margin:0}.modal__body{padding:var(--spacing-4)}.modal__footer{padding:var(--spacing-4);display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:flex-end;border-top:1px solid var(--color-border)}";
|
|
2917
|
+
var zo = Object.defineProperty, Co = Object.getOwnPropertyDescriptor, de = (e, t, o, r) => {
|
|
2918
|
+
for (var i = r > 1 ? void 0 : r ? Co(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
2919
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
2920
|
+
return r && i && zo(t, o, i), i;
|
|
2921
|
+
};
|
|
2922
|
+
let G = class extends O {
|
|
2923
|
+
constructor() {
|
|
2924
|
+
super(...arguments), this.open = !1, this.title = "", this.closeOnEsc = !0, this.closeOnBackdrop = !0, this.showBack = !1, this.showClose = !1, this.hasFooterContent = !1, this.onKeyDown = (e) => {
|
|
2925
|
+
this.open && this.closeOnEsc && e.key === "Escape" && this.setOpen(!1);
|
|
2926
|
+
}, this.onBackdropClick = (e) => {
|
|
2927
|
+
if (!this.closeOnBackdrop) return;
|
|
2928
|
+
const t = this.shadowRoot?.querySelector(".__modal-content");
|
|
2929
|
+
t && !t.contains(e.target) && this.setOpen(!1);
|
|
2930
|
+
};
|
|
2931
|
+
}
|
|
2932
|
+
connectedCallback() {
|
|
2933
|
+
super.connectedCallback(), document.addEventListener("keydown", this.onKeyDown);
|
|
2934
|
+
}
|
|
2935
|
+
disconnectedCallback() {
|
|
2936
|
+
super.disconnectedCallback(), document.removeEventListener("keydown", this.onKeyDown);
|
|
2937
|
+
}
|
|
2938
|
+
openModal() {
|
|
2939
|
+
this.setOpen(!0);
|
|
2940
|
+
}
|
|
2941
|
+
closeModal() {
|
|
2942
|
+
this.setOpen(!1);
|
|
2943
|
+
}
|
|
2944
|
+
setOpen(e) {
|
|
2945
|
+
this.open !== e && (this.open = e, this.dispatchEvent(new CustomEvent(e ? "modal-open" : "modal-close", { bubbles: !0 })));
|
|
2946
|
+
}
|
|
2947
|
+
checkFooterContent() {
|
|
2948
|
+
const e = this.shadowRoot?.querySelector('slot[name="footer"]');
|
|
2949
|
+
e && (this.hasFooterContent = e.assignedNodes().length > 0);
|
|
2950
|
+
}
|
|
2951
|
+
updated(e) {
|
|
2952
|
+
super.updated(e), this.checkFooterContent();
|
|
2953
|
+
}
|
|
2954
|
+
render() {
|
|
2955
|
+
return this.open ? l`
|
|
2956
|
+
<div
|
|
2957
|
+
class="modal__backdrop"
|
|
2958
|
+
role="presentation"
|
|
2959
|
+
aria-hidden="false"
|
|
2960
|
+
@mousedown=${this.onBackdropClick}
|
|
2961
|
+
>
|
|
2962
|
+
<div
|
|
2963
|
+
class="__modal-content modal__dialog"
|
|
2964
|
+
role="dialog"
|
|
2965
|
+
aria-modal="true"
|
|
2966
|
+
>
|
|
2967
|
+
${this.showBack || this.showClose ? l`
|
|
2968
|
+
<div class="modal__header">
|
|
2969
|
+
${this.showBack ? l`
|
|
2970
|
+
<logosphere-button variant="text" size="sm" @click=${() => this.setOpen(!1)}>←</logosphere-button>
|
|
2971
|
+
` : ""}
|
|
2972
|
+
<div class="modal__header-content">
|
|
2973
|
+
${this.title ? l`<h2 class="modal__title">${this.title}</h2>` : ""}
|
|
2974
|
+
<slot name="header"></slot>
|
|
2975
|
+
</div>
|
|
2976
|
+
${this.showClose ? l`
|
|
2977
|
+
<logosphere-button variant="text" size="sm" @click=${() => this.setOpen(!1)}>×</logosphere-button>
|
|
2978
|
+
` : ""}
|
|
2979
|
+
</div>
|
|
2980
|
+
` : ""}
|
|
2981
|
+
|
|
2982
|
+
<div class="modal__body">
|
|
2983
|
+
<slot></slot>
|
|
2984
|
+
</div>
|
|
2985
|
+
|
|
2986
|
+
${this.hasFooterContent ? l`
|
|
2987
|
+
<div class="modal__footer">
|
|
2988
|
+
<slot name="footer"></slot>
|
|
2989
|
+
</div>
|
|
2990
|
+
` : ""}
|
|
2991
|
+
</div>
|
|
2992
|
+
</div>
|
|
2993
|
+
` : l``;
|
|
2994
|
+
}
|
|
2995
|
+
};
|
|
2996
|
+
G.styles = [T`${P($o)}`];
|
|
2997
|
+
de([
|
|
2998
|
+
s({ type: Boolean, reflect: !0 })
|
|
2999
|
+
], G.prototype, "open", 2);
|
|
3000
|
+
de([
|
|
3001
|
+
s({ type: String })
|
|
3002
|
+
], G.prototype, "title", 2);
|
|
3003
|
+
de([
|
|
3004
|
+
s({ type: Boolean })
|
|
3005
|
+
], G.prototype, "closeOnEsc", 2);
|
|
3006
|
+
de([
|
|
3007
|
+
s({ type: Boolean })
|
|
3008
|
+
], G.prototype, "closeOnBackdrop", 2);
|
|
3009
|
+
de([
|
|
3010
|
+
s({ type: Boolean })
|
|
3011
|
+
], G.prototype, "showBack", 2);
|
|
3012
|
+
de([
|
|
3013
|
+
s({ type: Boolean })
|
|
3014
|
+
], G.prototype, "showClose", 2);
|
|
3015
|
+
de([
|
|
3016
|
+
s({ type: Boolean, state: !0 })
|
|
3017
|
+
], G.prototype, "hasFooterContent", 2);
|
|
3018
|
+
G = de([
|
|
3019
|
+
Y("logosphere-modal")
|
|
3020
|
+
], G);
|
|
3021
|
+
const Mo = ".tab{width:100%;font-family:var(--font-family-base)}.tab__list{display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-border);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab__list::-webkit-scrollbar{display:none}.tab__button{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);min-width:120px;position:relative;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--font-family-base);white-space:nowrap;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:var(--color-tertiary-bg)}.tab__button--active{border-bottom-color:var(--color-primary)}.tab__button--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tab__icon{font-size:var(--font-size-xl);flex-shrink:0;color:inherit;line-height:1}.tab__content{display:flex;flex-direction:column;align-items:flex-start}.tab__label{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);color:var(--color-body-text)}.tab__label--inactive{color:var(--color-tertiary)}.tab__description{font-size:var(--font-size-xs);text-align:left;color:var(--color-tertiary)}.tab__description--active{color:var(--color-secondary)}.tab__panel{padding:var(--spacing-4);outline:none}.tab__panel--hidden{display:none}";
|
|
3022
|
+
var So = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, ce = (e, t, o, r) => {
|
|
3023
|
+
for (var i = r > 1 ? void 0 : r ? Do(t, o) : t, a = e.length - 1, n; a >= 0; a--)
|
|
3024
|
+
(n = e[a]) && (i = (r ? n(t, o, i) : n(i)) || i);
|
|
3025
|
+
return r && i && So(t, o, i), i;
|
|
3026
|
+
};
|
|
3027
|
+
let X = class extends O {
|
|
3028
|
+
constructor() {
|
|
3029
|
+
super(...arguments), this.tabs = [], this.activeTab = "", this.lazy = !0, this.variant = "default", this._focusedIndex = 0, this._renderedTabs = /* @__PURE__ */ new Set();
|
|
3030
|
+
}
|
|
3031
|
+
connectedCallback() {
|
|
3032
|
+
super.connectedCallback(), !this.activeTab && this.tabs.length > 0 && (this.activeTab = this.tabs[0].id);
|
|
3033
|
+
}
|
|
3034
|
+
willUpdate(e) {
|
|
3035
|
+
if (super.willUpdate(e), e.has("activeTab") && this.activeTab) {
|
|
3036
|
+
this._renderedTabs.add(this.activeTab);
|
|
3037
|
+
const t = this.tabs.findIndex((o) => o.id === this.activeTab);
|
|
3038
|
+
t !== -1 && (this._focusedIndex = t);
|
|
3039
|
+
}
|
|
3040
|
+
e.has("tabs") && this.tabs.length > 0 && (this.tabs.some((o) => o.id === this.activeTab) || (this.activeTab = this.tabs[0].id), this._focusedIndex = this.tabs.findIndex((o) => o.id === this.activeTab));
|
|
3041
|
+
}
|
|
3042
|
+
// ==================== EVENTS ====================
|
|
3043
|
+
handleTabClick(e, t) {
|
|
3044
|
+
if (t) return;
|
|
3045
|
+
const o = this.activeTab;
|
|
3046
|
+
this.activeTab = e, this._focusedIndex = this.tabs.findIndex((r) => r.id === e), this.dispatchEvent(
|
|
3047
|
+
new CustomEvent("tab-change", {
|
|
3048
|
+
detail: { oldTab: o, newTab: e },
|
|
3049
|
+
bubbles: !0,
|
|
3050
|
+
composed: !0
|
|
3051
|
+
})
|
|
3052
|
+
);
|
|
3053
|
+
}
|
|
3054
|
+
handleKeyDown(e) {
|
|
3055
|
+
const { tabs: t } = this;
|
|
3056
|
+
if (t.filter((i) => !i.disabled).length === 0) return;
|
|
3057
|
+
let o = this._focusedIndex;
|
|
3058
|
+
const r = this._focusedIndex;
|
|
3059
|
+
switch (e.key) {
|
|
3060
|
+
case "ArrowLeft":
|
|
3061
|
+
e.preventDefault();
|
|
3062
|
+
do
|
|
3063
|
+
o = o > 0 ? o - 1 : t.length - 1;
|
|
3064
|
+
while (t[o]?.disabled && o !== r);
|
|
3065
|
+
break;
|
|
3066
|
+
case "ArrowRight":
|
|
3067
|
+
e.preventDefault();
|
|
3068
|
+
do
|
|
3069
|
+
o = o < t.length - 1 ? o + 1 : 0;
|
|
3070
|
+
while (t[o]?.disabled && o !== r);
|
|
3071
|
+
break;
|
|
3072
|
+
case "Home":
|
|
3073
|
+
for (e.preventDefault(), o = 0; t[o]?.disabled && o < t.length - 1; ) o++;
|
|
3074
|
+
break;
|
|
3075
|
+
case "End":
|
|
3076
|
+
for (e.preventDefault(), o = t.length - 1; t[o]?.disabled && o > 0; ) o--;
|
|
3077
|
+
break;
|
|
3078
|
+
default:
|
|
3079
|
+
return;
|
|
3080
|
+
}
|
|
3081
|
+
if (o !== this._focusedIndex && !t[o]?.disabled) {
|
|
3082
|
+
const i = this.activeTab;
|
|
3083
|
+
this._focusedIndex = o, this.activeTab = t[o].id, this.updateComplete.then(() => {
|
|
3084
|
+
this.shadowRoot?.querySelector(
|
|
3085
|
+
`[role="tab"][data-tab-id="${t[o].id}"]`
|
|
3086
|
+
)?.focus();
|
|
3087
|
+
}), this.dispatchEvent(
|
|
3088
|
+
new CustomEvent("tab-change", {
|
|
3089
|
+
detail: { oldTab: i, newTab: t[o].id },
|
|
3090
|
+
bubbles: !0,
|
|
3091
|
+
composed: !0
|
|
3092
|
+
})
|
|
3093
|
+
);
|
|
3094
|
+
}
|
|
3095
|
+
}
|
|
3096
|
+
scrollTabIntoView(e) {
|
|
3097
|
+
this.updateComplete.then(() => {
|
|
3098
|
+
const t = this.shadowRoot?.querySelector(
|
|
3099
|
+
`[role="tab"][data-tab-id="${e}"]`
|
|
3100
|
+
);
|
|
3101
|
+
if (t && this.tablist) {
|
|
3102
|
+
const o = this.tablist.getBoundingClientRect(), r = t.getBoundingClientRect();
|
|
3103
|
+
r.left < o.left ? this.tablist.scrollLeft -= o.left - r.left + 16 : r.right > o.right && (this.tablist.scrollLeft += r.right - o.right + 16);
|
|
3104
|
+
}
|
|
3105
|
+
});
|
|
3106
|
+
}
|
|
3107
|
+
// ==================== RENDER ====================
|
|
3108
|
+
renderTabButton(e, t) {
|
|
3109
|
+
const o = this.activeTab === e.id, r = this._focusedIndex === t, i = [
|
|
3110
|
+
"tab__button",
|
|
3111
|
+
o ? "tab__button--active" : "",
|
|
3112
|
+
e.disabled ? "tab__button--disabled" : ""
|
|
3113
|
+
].filter(Boolean).join(" "), a = ["tab__label", o ? "" : "tab__label--inactive"].filter(Boolean).join(" "), n = ["tab__description", o ? "tab__description--active" : ""].filter(Boolean).join(" ");
|
|
3114
|
+
return l`
|
|
3115
|
+
<button
|
|
3116
|
+
role="tab"
|
|
3117
|
+
class=${i}
|
|
3118
|
+
data-tab-id=${e.id}
|
|
3119
|
+
aria-selected=${o ? "true" : "false"}
|
|
3120
|
+
aria-controls="panel-${e.id}"
|
|
3121
|
+
tabindex=${o || r ? "0" : "-1"}
|
|
3122
|
+
?disabled=${e.disabled}
|
|
3123
|
+
@click=${() => this.handleTabClick(e.id, e.disabled)}
|
|
3124
|
+
@focus=${() => this.scrollTabIntoView(e.id)}
|
|
3125
|
+
>
|
|
3126
|
+
${e.icon ? l`<i class="${e.icon} tab__icon"></i>` : u}
|
|
3127
|
+
<div class="tab__content">
|
|
3128
|
+
<span class=${a}>${e.label}</span>
|
|
3129
|
+
${e.description ? l`<span class=${n}>${e.description}</span>` : u}
|
|
3130
|
+
</div>
|
|
3131
|
+
</button>
|
|
3132
|
+
`;
|
|
3133
|
+
}
|
|
3134
|
+
renderTabPanel(e) {
|
|
3135
|
+
const t = this.activeTab === e.id;
|
|
3136
|
+
if (!(!this.lazy || this._renderedTabs.has(e.id))) return u;
|
|
3137
|
+
const r = ["tab__panel", t ? "" : "tab__panel--hidden"].filter(Boolean).join(" ");
|
|
3138
|
+
return l`
|
|
3139
|
+
<div
|
|
3140
|
+
role="tabpanel"
|
|
3141
|
+
id="panel-${e.id}"
|
|
3142
|
+
aria-labelledby="tab-${e.id}"
|
|
3143
|
+
class=${r}
|
|
3144
|
+
tabindex="0"
|
|
3145
|
+
>
|
|
3146
|
+
<slot name=${`panel-${e.id}`}>
|
|
3147
|
+
${typeof e.content == "string" ? l`${e.content}` : u}
|
|
3148
|
+
</slot>
|
|
3149
|
+
</div>
|
|
3150
|
+
`;
|
|
3151
|
+
}
|
|
3152
|
+
render() {
|
|
3153
|
+
return l`
|
|
3154
|
+
<div class="tab">
|
|
3155
|
+
<div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
|
|
3156
|
+
${this.tabs.map((e, t) => this.renderTabButton(e, t))}
|
|
3157
|
+
</div>
|
|
3158
|
+
<div class="tab__panels">${this.tabs.map((e) => this.renderTabPanel(e))}</div>
|
|
3159
|
+
</div>
|
|
3160
|
+
`;
|
|
3161
|
+
}
|
|
3162
|
+
};
|
|
3163
|
+
X.styles = [
|
|
3164
|
+
T`
|
|
3165
|
+
${P(Mo)}
|
|
3166
|
+
`
|
|
3167
|
+
];
|
|
3168
|
+
ce([
|
|
3169
|
+
s({ type: Array })
|
|
3170
|
+
], X.prototype, "tabs", 2);
|
|
3171
|
+
ce([
|
|
3172
|
+
s({ type: String })
|
|
3173
|
+
], X.prototype, "activeTab", 2);
|
|
3174
|
+
ce([
|
|
3175
|
+
s({ type: Boolean })
|
|
3176
|
+
], X.prototype, "lazy", 2);
|
|
3177
|
+
ce([
|
|
3178
|
+
s({ type: String })
|
|
3179
|
+
], X.prototype, "variant", 2);
|
|
3180
|
+
ce([
|
|
3181
|
+
m()
|
|
3182
|
+
], X.prototype, "_focusedIndex", 2);
|
|
3183
|
+
ce([
|
|
3184
|
+
m()
|
|
3185
|
+
], X.prototype, "_renderedTabs", 2);
|
|
3186
|
+
ce([
|
|
3187
|
+
te('[role="tablist"]')
|
|
3188
|
+
], X.prototype, "tablist", 2);
|
|
3189
|
+
X = ce([
|
|
3190
|
+
Y("logosphere-tab")
|
|
3191
|
+
], X);
|
|
17
3192
|
export {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
3193
|
+
Ye as Breadcrumb,
|
|
3194
|
+
ae as Button,
|
|
3195
|
+
V as Card,
|
|
3196
|
+
W as Checkbox,
|
|
3197
|
+
E as Combobox,
|
|
3198
|
+
ne as DownloadManager,
|
|
3199
|
+
A as FormField,
|
|
3200
|
+
$ as LedsDatePicker,
|
|
3201
|
+
v as LedsUiChatbot,
|
|
3202
|
+
ee as LogosphereBadge,
|
|
3203
|
+
x as LogosphereInput,
|
|
3204
|
+
X as LogosphereTab,
|
|
3205
|
+
G as Modal,
|
|
3206
|
+
F as Popover,
|
|
3207
|
+
fe as Switch,
|
|
3208
|
+
k as TextArea
|
|
34
3209
|
};
|