next-flow-design 1.1.0 → 1.1.3

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.
@@ -1,1317 +0,0 @@
1
- import { css as E, LitElement as R, html as p } from "lit";
2
- const M = (t) => (e, s) => {
3
- s !== void 0 ? s.addInitializer((() => {
4
- customElements.define(t, e);
5
- })) : customElements.define(t, e);
6
- };
7
- const Y = globalThis, ie = Y.ShadowRoot && (Y.ShadyCSS === void 0 || Y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ye = /* @__PURE__ */ Symbol(), ce = /* @__PURE__ */ new WeakMap();
8
- let Ee = class {
9
- constructor(e, s, i) {
10
- if (this._$cssResult$ = !0, i !== ye) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
11
- this.cssText = e, this.t = s;
12
- }
13
- get styleSheet() {
14
- let e = this.o;
15
- const s = this.t;
16
- if (ie && e === void 0) {
17
- const i = s !== void 0 && s.length === 1;
18
- i && (e = ce.get(s)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && ce.set(s, e));
19
- }
20
- return e;
21
- }
22
- toString() {
23
- return this.cssText;
24
- }
25
- };
26
- const Ce = (t) => new Ee(typeof t == "string" ? t : t + "", void 0, ye), Se = (t, e) => {
27
- if (ie) t.adoptedStyleSheets = e.map(((s) => s instanceof CSSStyleSheet ? s : s.styleSheet));
28
- else for (const s of e) {
29
- const i = document.createElement("style"), r = Y.litNonce;
30
- r !== void 0 && i.setAttribute("nonce", r), i.textContent = s.cssText, t.appendChild(i);
31
- }
32
- }, de = ie ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
33
- let s = "";
34
- for (const i of e.cssRules) s += i.cssText;
35
- return Ce(s);
36
- })(t) : t;
37
- const { is: Pe, defineProperty: De, getOwnPropertyDescriptor: Me, getOwnPropertyNames: Oe, getOwnPropertySymbols: Ve, getPrototypeOf: Te } = Object, Z = globalThis, pe = Z.trustedTypes, He = pe ? pe.emptyScript : "", Ne = Z.reactiveElementPolyfillSupport, B = (t, e) => t, X = { toAttribute(t, e) {
38
- switch (e) {
39
- case Boolean:
40
- t = t ? He : null;
41
- break;
42
- case Object:
43
- case Array:
44
- t = t == null ? t : JSON.stringify(t);
45
- }
46
- return t;
47
- }, fromAttribute(t, e) {
48
- let s = t;
49
- switch (e) {
50
- case Boolean:
51
- s = t !== null;
52
- break;
53
- case Number:
54
- s = t === null ? null : Number(t);
55
- break;
56
- case Object:
57
- case Array:
58
- try {
59
- s = JSON.parse(t);
60
- } catch {
61
- s = null;
62
- }
63
- }
64
- return s;
65
- } }, re = (t, e) => !Pe(t, e), ue = { attribute: !0, type: String, converter: X, reflect: !1, useDefault: !1, hasChanged: re };
66
- Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Z.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
67
- let O = class extends HTMLElement {
68
- static addInitializer(e) {
69
- this._$Ei(), (this.l ??= []).push(e);
70
- }
71
- static get observedAttributes() {
72
- return this.finalize(), this._$Eh && [...this._$Eh.keys()];
73
- }
74
- static createProperty(e, s = ue) {
75
- if (s.state && (s.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((s = Object.create(s)).wrapped = !0), this.elementProperties.set(e, s), !s.noAccessor) {
76
- const i = /* @__PURE__ */ Symbol(), r = this.getPropertyDescriptor(e, i, s);
77
- r !== void 0 && De(this.prototype, e, r);
78
- }
79
- }
80
- static getPropertyDescriptor(e, s, i) {
81
- const { get: r, set: o } = Me(this.prototype, e) ?? { get() {
82
- return this[s];
83
- }, set(n) {
84
- this[s] = n;
85
- } };
86
- return { get: r, set(n) {
87
- const l = r?.call(this);
88
- o?.call(this, n), this.requestUpdate(e, l, i);
89
- }, configurable: !0, enumerable: !0 };
90
- }
91
- static getPropertyOptions(e) {
92
- return this.elementProperties.get(e) ?? ue;
93
- }
94
- static _$Ei() {
95
- if (this.hasOwnProperty(B("elementProperties"))) return;
96
- const e = Te(this);
97
- e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
98
- }
99
- static finalize() {
100
- if (this.hasOwnProperty(B("finalized"))) return;
101
- if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(B("properties"))) {
102
- const s = this.properties, i = [...Oe(s), ...Ve(s)];
103
- for (const r of i) this.createProperty(r, s[r]);
104
- }
105
- const e = this[Symbol.metadata];
106
- if (e !== null) {
107
- const s = litPropertyMetadata.get(e);
108
- if (s !== void 0) for (const [i, r] of s) this.elementProperties.set(i, r);
109
- }
110
- this._$Eh = /* @__PURE__ */ new Map();
111
- for (const [s, i] of this.elementProperties) {
112
- const r = this._$Eu(s, i);
113
- r !== void 0 && this._$Eh.set(r, s);
114
- }
115
- this.elementStyles = this.finalizeStyles(this.styles);
116
- }
117
- static finalizeStyles(e) {
118
- const s = [];
119
- if (Array.isArray(e)) {
120
- const i = new Set(e.flat(1 / 0).reverse());
121
- for (const r of i) s.unshift(de(r));
122
- } else e !== void 0 && s.push(de(e));
123
- return s;
124
- }
125
- static _$Eu(e, s) {
126
- const i = s.attribute;
127
- return i === !1 ? void 0 : typeof i == "string" ? i : typeof e == "string" ? e.toLowerCase() : void 0;
128
- }
129
- constructor() {
130
- super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
131
- }
132
- _$Ev() {
133
- this._$ES = new Promise(((e) => this.enableUpdating = e)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((e) => e(this)));
134
- }
135
- addController(e) {
136
- (this._$EO ??= /* @__PURE__ */ new Set()).add(e), this.renderRoot !== void 0 && this.isConnected && e.hostConnected?.();
137
- }
138
- removeController(e) {
139
- this._$EO?.delete(e);
140
- }
141
- _$E_() {
142
- const e = /* @__PURE__ */ new Map(), s = this.constructor.elementProperties;
143
- for (const i of s.keys()) this.hasOwnProperty(i) && (e.set(i, this[i]), delete this[i]);
144
- e.size > 0 && (this._$Ep = e);
145
- }
146
- createRenderRoot() {
147
- const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
148
- return Se(e, this.constructor.elementStyles), e;
149
- }
150
- connectedCallback() {
151
- this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((e) => e.hostConnected?.()));
152
- }
153
- enableUpdating(e) {
154
- }
155
- disconnectedCallback() {
156
- this._$EO?.forEach(((e) => e.hostDisconnected?.()));
157
- }
158
- attributeChangedCallback(e, s, i) {
159
- this._$AK(e, i);
160
- }
161
- _$ET(e, s) {
162
- const i = this.constructor.elementProperties.get(e), r = this.constructor._$Eu(e, i);
163
- if (r !== void 0 && i.reflect === !0) {
164
- const o = (i.converter?.toAttribute !== void 0 ? i.converter : X).toAttribute(s, i.type);
165
- this._$Em = e, o == null ? this.removeAttribute(r) : this.setAttribute(r, o), this._$Em = null;
166
- }
167
- }
168
- _$AK(e, s) {
169
- const i = this.constructor, r = i._$Eh.get(e);
170
- if (r !== void 0 && this._$Em !== r) {
171
- const o = i.getPropertyOptions(r), n = typeof o.converter == "function" ? { fromAttribute: o.converter } : o.converter?.fromAttribute !== void 0 ? o.converter : X;
172
- this._$Em = r;
173
- const l = n.fromAttribute(s, o.type);
174
- this[r] = l ?? this._$Ej?.get(r) ?? l, this._$Em = null;
175
- }
176
- }
177
- requestUpdate(e, s, i) {
178
- if (e !== void 0) {
179
- const r = this.constructor, o = this[e];
180
- if (i ??= r.getPropertyOptions(e), !((i.hasChanged ?? re)(o, s) || i.useDefault && i.reflect && o === this._$Ej?.get(e) && !this.hasAttribute(r._$Eu(e, i)))) return;
181
- this.C(e, s, i);
182
- }
183
- this.isUpdatePending === !1 && (this._$ES = this._$EP());
184
- }
185
- C(e, s, { useDefault: i, reflect: r, wrapped: o }, n) {
186
- i && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(e) && (this._$Ej.set(e, n ?? s ?? this[e]), o !== !0 || n !== void 0) || (this._$AL.has(e) || (this.hasUpdated || i || (s = void 0), this._$AL.set(e, s)), r === !0 && this._$Em !== e && (this._$Eq ??= /* @__PURE__ */ new Set()).add(e));
187
- }
188
- async _$EP() {
189
- this.isUpdatePending = !0;
190
- try {
191
- await this._$ES;
192
- } catch (s) {
193
- Promise.reject(s);
194
- }
195
- const e = this.scheduleUpdate();
196
- return e != null && await e, !this.isUpdatePending;
197
- }
198
- scheduleUpdate() {
199
- return this.performUpdate();
200
- }
201
- performUpdate() {
202
- if (!this.isUpdatePending) return;
203
- if (!this.hasUpdated) {
204
- if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
205
- for (const [r, o] of this._$Ep) this[r] = o;
206
- this._$Ep = void 0;
207
- }
208
- const i = this.constructor.elementProperties;
209
- if (i.size > 0) for (const [r, o] of i) {
210
- const { wrapped: n } = o, l = this[r];
211
- n !== !0 || this._$AL.has(r) || l === void 0 || this.C(r, void 0, o, l);
212
- }
213
- }
214
- let e = !1;
215
- const s = this._$AL;
216
- try {
217
- e = this.shouldUpdate(s), e ? (this.willUpdate(s), this._$EO?.forEach(((i) => i.hostUpdate?.())), this.update(s)) : this._$EM();
218
- } catch (i) {
219
- throw e = !1, this._$EM(), i;
220
- }
221
- e && this._$AE(s);
222
- }
223
- willUpdate(e) {
224
- }
225
- _$AE(e) {
226
- this._$EO?.forEach(((s) => s.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
227
- }
228
- _$EM() {
229
- this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
230
- }
231
- get updateComplete() {
232
- return this.getUpdateComplete();
233
- }
234
- getUpdateComplete() {
235
- return this._$ES;
236
- }
237
- shouldUpdate(e) {
238
- return !0;
239
- }
240
- update(e) {
241
- this._$Eq &&= this._$Eq.forEach(((s) => this._$ET(s, this[s]))), this._$EM();
242
- }
243
- updated(e) {
244
- }
245
- firstUpdated(e) {
246
- }
247
- };
248
- O.elementStyles = [], O.shadowRootOptions = { mode: "open" }, O[B("elementProperties")] = /* @__PURE__ */ new Map(), O[B("finalized")] = /* @__PURE__ */ new Map(), Ne?.({ ReactiveElement: O }), (Z.reactiveElementVersions ??= []).push("2.1.1");
249
- const Ue = { attribute: !0, type: String, converter: X, reflect: !1, hasChanged: re }, Be = (t = Ue, e, s) => {
250
- const { kind: i, metadata: r } = s;
251
- let o = globalThis.litPropertyMetadata.get(r);
252
- if (o === void 0 && globalThis.litPropertyMetadata.set(r, o = /* @__PURE__ */ new Map()), i === "setter" && ((t = Object.create(t)).wrapped = !0), o.set(s.name, t), i === "accessor") {
253
- const { name: n } = s;
254
- return { set(l) {
255
- const a = e.get.call(this);
256
- e.set.call(this, l), this.requestUpdate(n, a, t);
257
- }, init(l) {
258
- return l !== void 0 && this.C(n, void 0, t, l), l;
259
- } };
260
- }
261
- if (i === "setter") {
262
- const { name: n } = s;
263
- return function(l) {
264
- const a = this[n];
265
- e.call(this, l), this.requestUpdate(n, a, t);
266
- };
267
- }
268
- throw Error("Unsupported decorator location: " + i);
269
- };
270
- function h(t) {
271
- return (e, s) => typeof s == "object" ? Be(t, e, s) : ((i, r, o) => {
272
- const n = r.hasOwnProperty(o);
273
- return r.constructor.createProperty(o, i), n ? Object.getOwnPropertyDescriptor(r, o) : void 0;
274
- })(t, e, s);
275
- }
276
- function y(t) {
277
- return h({ ...t, state: !0, attribute: !1 });
278
- }
279
- const oe = globalThis, G = oe.trustedTypes, fe = G ? G.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, $e = "$lit$", k = `lit$${Math.random().toFixed(9).slice(2)}$`, we = "?" + k, Ie = `<${we}>`, P = document, I = () => P.createComment(""), F = (t) => t === null || typeof t != "object" && typeof t != "function", ne = Array.isArray, Fe = (t) => ne(t) || typeof t?.[Symbol.iterator] == "function", te = `[
280
- \f\r]`, U = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, be = /-->/g, me = />/g, C = RegExp(`>|${te}(?:([^\\s"'>=/]+)(${te}*=${te}*(?:[^
281
- \f\r"'\`<>=]|("|')|))|$)`, "g"), ge = /'/g, ve = /"/g, xe = /^(?:script|style|textarea|title)$/i, Le = (t) => (e, ...s) => ({ _$litType$: t, strings: e, values: s }), se = Le(1), D = /* @__PURE__ */ Symbol.for("lit-noChange"), u = /* @__PURE__ */ Symbol.for("lit-nothing"), _e = /* @__PURE__ */ new WeakMap(), S = P.createTreeWalker(P, 129);
282
- function ke(t, e) {
283
- if (!ne(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
284
- return fe !== void 0 ? fe.createHTML(e) : e;
285
- }
286
- const ze = (t, e) => {
287
- const s = t.length - 1, i = [];
288
- let r, o = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = U;
289
- for (let l = 0; l < s; l++) {
290
- const a = t[l];
291
- let c, f, d = -1, w = 0;
292
- for (; w < a.length && (n.lastIndex = w, f = n.exec(a), f !== null); ) w = n.lastIndex, n === U ? f[1] === "!--" ? n = be : f[1] !== void 0 ? n = me : f[2] !== void 0 ? (xe.test(f[2]) && (r = RegExp("</" + f[2], "g")), n = C) : f[3] !== void 0 && (n = C) : n === C ? f[0] === ">" ? (n = r ?? U, d = -1) : f[1] === void 0 ? d = -2 : (d = n.lastIndex - f[2].length, c = f[1], n = f[3] === void 0 ? C : f[3] === '"' ? ve : ge) : n === ve || n === ge ? n = C : n === be || n === me ? n = U : (n = C, r = void 0);
293
- const x = n === C && t[l + 1].startsWith("/>") ? " " : "";
294
- o += n === U ? a + Ie : d >= 0 ? (i.push(c), a.slice(0, d) + $e + a.slice(d) + k + x) : a + k + (d === -2 ? l : x);
295
- }
296
- return [ke(t, o + (t[s] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
297
- };
298
- class L {
299
- constructor({ strings: e, _$litType$: s }, i) {
300
- let r;
301
- this.parts = [];
302
- let o = 0, n = 0;
303
- const l = e.length - 1, a = this.parts, [c, f] = ze(e, s);
304
- if (this.el = L.createElement(c, i), S.currentNode = this.el.content, s === 2 || s === 3) {
305
- const d = this.el.content.firstChild;
306
- d.replaceWith(...d.childNodes);
307
- }
308
- for (; (r = S.nextNode()) !== null && a.length < l; ) {
309
- if (r.nodeType === 1) {
310
- if (r.hasAttributes()) for (const d of r.getAttributeNames()) if (d.endsWith($e)) {
311
- const w = f[n++], x = r.getAttribute(d).split(k), K = /([.?@])?(.*)/.exec(w);
312
- a.push({ type: 1, index: o, name: K[2], strings: x, ctor: K[1] === "." ? Re : K[1] === "?" ? qe : K[1] === "@" ? We : Q }), r.removeAttribute(d);
313
- } else d.startsWith(k) && (a.push({ type: 6, index: o }), r.removeAttribute(d));
314
- if (xe.test(r.tagName)) {
315
- const d = r.textContent.split(k), w = d.length - 1;
316
- if (w > 0) {
317
- r.textContent = G ? G.emptyScript : "";
318
- for (let x = 0; x < w; x++) r.append(d[x], I()), S.nextNode(), a.push({ type: 2, index: ++o });
319
- r.append(d[w], I());
320
- }
321
- }
322
- } else if (r.nodeType === 8) if (r.data === we) a.push({ type: 2, index: o });
323
- else {
324
- let d = -1;
325
- for (; (d = r.data.indexOf(k, d + 1)) !== -1; ) a.push({ type: 7, index: o }), d += k.length - 1;
326
- }
327
- o++;
328
- }
329
- }
330
- static createElement(e, s) {
331
- const i = P.createElement("template");
332
- return i.innerHTML = e, i;
333
- }
334
- }
335
- function T(t, e, s = t, i) {
336
- if (e === D) return e;
337
- let r = i !== void 0 ? s._$Co?.[i] : s._$Cl;
338
- const o = F(e) ? void 0 : e._$litDirective$;
339
- return r?.constructor !== o && (r?._$AO?.(!1), o === void 0 ? r = void 0 : (r = new o(t), r._$AT(t, s, i)), i !== void 0 ? (s._$Co ??= [])[i] = r : s._$Cl = r), r !== void 0 && (e = T(t, r._$AS(t, e.values), r, i)), e;
340
- }
341
- class je {
342
- constructor(e, s) {
343
- this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = s;
344
- }
345
- get parentNode() {
346
- return this._$AM.parentNode;
347
- }
348
- get _$AU() {
349
- return this._$AM._$AU;
350
- }
351
- u(e) {
352
- const { el: { content: s }, parts: i } = this._$AD, r = (e?.creationScope ?? P).importNode(s, !0);
353
- S.currentNode = r;
354
- let o = S.nextNode(), n = 0, l = 0, a = i[0];
355
- for (; a !== void 0; ) {
356
- if (n === a.index) {
357
- let c;
358
- a.type === 2 ? c = new q(o, o.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(o, a.name, a.strings, this, e) : a.type === 6 && (c = new Ke(o, this, e)), this._$AV.push(c), a = i[++l];
359
- }
360
- n !== a?.index && (o = S.nextNode(), n++);
361
- }
362
- return S.currentNode = P, r;
363
- }
364
- p(e) {
365
- let s = 0;
366
- for (const i of this._$AV) i !== void 0 && (i.strings !== void 0 ? (i._$AI(e, i, s), s += i.strings.length - 2) : i._$AI(e[s])), s++;
367
- }
368
- }
369
- class q {
370
- get _$AU() {
371
- return this._$AM?._$AU ?? this._$Cv;
372
- }
373
- constructor(e, s, i, r) {
374
- this.type = 2, this._$AH = u, this._$AN = void 0, this._$AA = e, this._$AB = s, this._$AM = i, this.options = r, this._$Cv = r?.isConnected ?? !0;
375
- }
376
- get parentNode() {
377
- let e = this._$AA.parentNode;
378
- const s = this._$AM;
379
- return s !== void 0 && e?.nodeType === 11 && (e = s.parentNode), e;
380
- }
381
- get startNode() {
382
- return this._$AA;
383
- }
384
- get endNode() {
385
- return this._$AB;
386
- }
387
- _$AI(e, s = this) {
388
- e = T(this, e, s), F(e) ? e === u || e == null || e === "" ? (this._$AH !== u && this._$AR(), this._$AH = u) : e !== this._$AH && e !== D && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Fe(e) ? this.k(e) : this._(e);
389
- }
390
- O(e) {
391
- return this._$AA.parentNode.insertBefore(e, this._$AB);
392
- }
393
- T(e) {
394
- this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
395
- }
396
- _(e) {
397
- this._$AH !== u && F(this._$AH) ? this._$AA.nextSibling.data = e : this.T(P.createTextNode(e)), this._$AH = e;
398
- }
399
- $(e) {
400
- const { values: s, _$litType$: i } = e, r = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = L.createElement(ke(i.h, i.h[0]), this.options)), i);
401
- if (this._$AH?._$AD === r) this._$AH.p(s);
402
- else {
403
- const o = new je(r, this), n = o.u(this.options);
404
- o.p(s), this.T(n), this._$AH = o;
405
- }
406
- }
407
- _$AC(e) {
408
- let s = _e.get(e.strings);
409
- return s === void 0 && _e.set(e.strings, s = new L(e)), s;
410
- }
411
- k(e) {
412
- ne(this._$AH) || (this._$AH = [], this._$AR());
413
- const s = this._$AH;
414
- let i, r = 0;
415
- for (const o of e) r === s.length ? s.push(i = new q(this.O(I()), this.O(I()), this, this.options)) : i = s[r], i._$AI(o), r++;
416
- r < s.length && (this._$AR(i && i._$AB.nextSibling, r), s.length = r);
417
- }
418
- _$AR(e = this._$AA.nextSibling, s) {
419
- for (this._$AP?.(!1, !0, s); e !== this._$AB; ) {
420
- const i = e.nextSibling;
421
- e.remove(), e = i;
422
- }
423
- }
424
- setConnected(e) {
425
- this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
426
- }
427
- }
428
- class Q {
429
- get tagName() {
430
- return this.element.tagName;
431
- }
432
- get _$AU() {
433
- return this._$AM._$AU;
434
- }
435
- constructor(e, s, i, r, o) {
436
- this.type = 1, this._$AH = u, this._$AN = void 0, this.element = e, this.name = s, this._$AM = r, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = u;
437
- }
438
- _$AI(e, s = this, i, r) {
439
- const o = this.strings;
440
- let n = !1;
441
- if (o === void 0) e = T(this, e, s, 0), n = !F(e) || e !== this._$AH && e !== D, n && (this._$AH = e);
442
- else {
443
- const l = e;
444
- let a, c;
445
- for (e = o[0], a = 0; a < o.length - 1; a++) c = T(this, l[i + a], s, a), c === D && (c = this._$AH[a]), n ||= !F(c) || c !== this._$AH[a], c === u ? e = u : e !== u && (e += (c ?? "") + o[a + 1]), this._$AH[a] = c;
446
- }
447
- n && !r && this.j(e);
448
- }
449
- j(e) {
450
- e === u ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
451
- }
452
- }
453
- class Re extends Q {
454
- constructor() {
455
- super(...arguments), this.type = 3;
456
- }
457
- j(e) {
458
- this.element[this.name] = e === u ? void 0 : e;
459
- }
460
- }
461
- class qe extends Q {
462
- constructor() {
463
- super(...arguments), this.type = 4;
464
- }
465
- j(e) {
466
- this.element.toggleAttribute(this.name, !!e && e !== u);
467
- }
468
- }
469
- class We extends Q {
470
- constructor(e, s, i, r, o) {
471
- super(e, s, i, r, o), this.type = 5;
472
- }
473
- _$AI(e, s = this) {
474
- if ((e = T(this, e, s, 0) ?? u) === D) return;
475
- const i = this._$AH, r = e === u && i !== u || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, o = e !== u && (i === u || r);
476
- r && this.element.removeEventListener(this.name, this, i), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
477
- }
478
- handleEvent(e) {
479
- typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
480
- }
481
- }
482
- class Ke {
483
- constructor(e, s, i) {
484
- this.element = e, this.type = 6, this._$AN = void 0, this._$AM = s, this.options = i;
485
- }
486
- get _$AU() {
487
- return this._$AM._$AU;
488
- }
489
- _$AI(e) {
490
- T(this, e);
491
- }
492
- }
493
- const Ye = oe.litHtmlPolyfillSupport;
494
- Ye?.(L, q), (oe.litHtmlVersions ??= []).push("3.3.1");
495
- const Xe = (t, e, s) => {
496
- const i = s?.renderBefore ?? e;
497
- let r = i._$litPart$;
498
- if (r === void 0) {
499
- const o = s?.renderBefore ?? null;
500
- i._$litPart$ = r = new q(e.insertBefore(I(), o), o, void 0, s ?? {});
501
- }
502
- return r._$AI(t), r;
503
- };
504
- const ae = globalThis;
505
- let V = class extends O {
506
- constructor() {
507
- super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
508
- }
509
- createRenderRoot() {
510
- const e = super.createRenderRoot();
511
- return this.renderOptions.renderBefore ??= e.firstChild, e;
512
- }
513
- update(e) {
514
- const s = this.render();
515
- this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Xe(s, this.renderRoot, this.renderOptions);
516
- }
517
- connectedCallback() {
518
- super.connectedCallback(), this._$Do?.setConnected(!0);
519
- }
520
- disconnectedCallback() {
521
- super.disconnectedCallback(), this._$Do?.setConnected(!1);
522
- }
523
- render() {
524
- return D;
525
- }
526
- };
527
- V._$litElement$ = !0, V.finalized = !0, ae.litElementHydrateSupport?.({ LitElement: V });
528
- const Ge = ae.litElementPolyfillSupport;
529
- Ge?.({ LitElement: V });
530
- (ae.litElementVersions ??= []).push("4.2.1");
531
- const Je = E`:host{cursor:pointer;-webkit-user-select:none;user-select:none}:host:disabled{cursor:not-allowed;opacity:.5}.checkbox-container{position:relative;width:1rem;height:1rem;transition:opacity .2s ease}.checkbox-box{width:100%;height:100%;border-radius:.25rem;background-color:var(--nf-background-color);border:1px solid var(--nf-border-color);display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease}:host(:hover:not([checked]):not([disabled])) .checkbox-box{border-color:var(--nf-primary-color,var(--primary-color))}:host([checked]) .checkbox-box{background-color:var(--nf-primary-color,var(--primary-color));border-color:var(--nf-primary-color,var(--primary-color))}:host([disabled]) .checkbox-box{border-color:#ccc;background:#ccc;cursor:not-allowed;pointer-events:none}:host([disabled][checked]) .checkbox-box{background-color:#ccc;border-color:#ccc}.checkbox-icon{color:#fff;font-size:.75rem;line-height:1;font-weight:700;transition:transform .2s ease;display:flex;align-items:center}:host([checked]) .checkbox-icon{transform:scale(1)}:host(:focus) .checkbox-container{outline:.125rem solid var(--nf-primary-color,var(--primary-color));outline-offset:.125rem}`;
532
- var Ze = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, le = (t, e, s, i) => {
533
- for (var r = i > 1 ? void 0 : i ? Qe(e, s) : e, o = t.length - 1, n; o >= 0; o--)
534
- (n = t[o]) && (r = (i ? n(e, s, r) : n(r)) || r);
535
- return i && r && Ze(e, s, r), r;
536
- };
537
- let z = class extends V {
538
- constructor() {
539
- super(...arguments), this.checked = !1, this.disabled = !1;
540
- }
541
- // 切换复选框状态
542
- toggleCheckbox(t) {
543
- this.disabled || (t.stopPropagation(), this.checked = !this.checked, this.dispatchEvent(
544
- new CustomEvent("change", {
545
- bubbles: !0,
546
- composed: !0,
547
- detail: this.checked
548
- })
549
- ));
550
- }
551
- // 渲染复选框组件
552
- render() {
553
- return se`<div class=checkbox-container .aria-checked=${this.toggleCheckbox} .aria-disabled=${this.checked} @click=${this.disabled} role=checkbox><div class=checkbox-box>${this.checked ? se`<div class=checkbox-icon><svg aria-hidden=true data-icon=check fill=currentColor focusable=false height=0.625rem viewBox="64 64 896 896"width=0.625rem><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></div>` : ""}</div></div>`;
554
- }
555
- };
556
- z.styles = [Je];
557
- le([
558
- h({ type: Boolean, reflect: !0 })
559
- ], z.prototype, "checked", 2);
560
- le([
561
- h({ type: Boolean, reflect: !0 })
562
- ], z.prototype, "disabled", 2);
563
- z = le([
564
- M("nf-checkbox")
565
- ], z);
566
- const et = { ATTRIBUTE: 1 }, tt = (t) => (...e) => ({ _$litDirective$: t, values: e });
567
- let st = class {
568
- constructor(e) {
569
- }
570
- get _$AU() {
571
- return this._$AM._$AU;
572
- }
573
- _$AT(e, s, i) {
574
- this._$Ct = e, this._$AM = s, this._$Ci = i;
575
- }
576
- _$AS(e, s) {
577
- return this.update(e, s);
578
- }
579
- update(e, s) {
580
- return this.render(...s);
581
- }
582
- };
583
- const Ae = "important", it = " !" + Ae, J = tt(class extends st {
584
- constructor(t) {
585
- if (super(t), t.type !== et.ATTRIBUTE || t.name !== "style" || t.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
586
- }
587
- render(t) {
588
- return Object.keys(t).reduce(((e, s) => {
589
- const i = t[s];
590
- return i == null ? e : e + `${s = s.includes("-") ? s : s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${i};`;
591
- }), "");
592
- }
593
- update(t, [e]) {
594
- const { style: s } = t.element;
595
- if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
596
- for (const i of this.ft) e[i] == null && (this.ft.delete(i), i.includes("-") ? s.removeProperty(i) : s[i] = null);
597
- for (const i in e) {
598
- const r = e[i];
599
- if (r != null) {
600
- this.ft.add(i);
601
- const o = typeof r == "string" && r.endsWith(it);
602
- i.includes("-") || o ? s.setProperty(i, o ? r.slice(0, -11) : r, o ? Ae : "") : s[i] = r;
603
- }
604
- }
605
- return D;
606
- }
607
- }), W = E`:host{display:inline-flex;align-items:center;position:relative;width:var(--nf-width);height:var(--nf-height);padding:var(--nf-padding);margin:var(--nf-margin);font-size:var(--nf-text-font-size);font-weight:var(--nf-font-weight);color:var(--nf-color);background:var(--nf-background-color);border-radius:var(--nf-border-radius);border:1px solid var(--nf-border-color);outline:0;background-clip:padding-box;box-shadow:0 0 0 .15rem var(--nf-box-shadow-color);transition:color var(--nf-transition) ease-in-out,background-color var(--nf-transition) ease-in-out,border-color var(--nf-transition) ease-in-out,box-shadow var(--nf-transition) ease-in-out}:host(:focus){border-color:var(--nf-border-color-hover);box-shadow:0 0 0 .15rem var(--nf-box-shadow-color-focus);background:var(--nf-background-color-hover)}:host(:hover){border-color:var(--nf-border-color-hover);background:var(--nf-background-color-hover)}`, rt = E`:host{display:inline-block;position:relative}.trigger{height:100%;display:flex;align-items:center;cursor:pointer;transition:all .2s;font-size:.875rem;position:relative}.trigger:hover{border-color:var(--nf-color-primary)}.trigger[disabled]{cursor:not-allowed;opacity:.6}.color-block{width:1.25rem;height:1.25rem;border-radius:.125rem;margin-right:.5rem}.color-text{flex:1}.panel{position:absolute;z-index:1000;background:#fff;border-radius:var(--nf-border-radius);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.panel-content{padding:.75rem;width:15rem}.color-selector{height:9.375rem;position:relative;margin-bottom:.75rem;border-radius:var(--nf-border-radius);overflow:hidden}.color-sb{width:100%;height:100%;position:relative;cursor:pointer}.sb-white{position:absolute;inset:0;background:linear-gradient(to right,#fff,#fff0)}.sb-black{position:absolute;inset:0;background:linear-gradient(to top,#000,#0000)}.selector{position:absolute;width:.625rem;height:.625rem;border:.125rem solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 .125rem #00000080;pointer-events:none}.slider-container{margin-bottom:.75rem}.slider{position:relative;height:.75rem;border-radius:.375rem}.hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.alpha-slider{position:relative}.alpha-slider-input{position:relative;z-index:2}.alpha-background{position:absolute;inset:0;border-radius:.375rem;background-size:.625rem .625rem;background:linear-gradient(45deg,#ddd 25%,transparent 25%) linear-gradient(-45deg,#ddd 25%,transparent 25%) linear-gradient(45deg,transparent 75%,#ddd 75%) linear-gradient(-45deg,transparent 75%,#ddd 75%) 0 0,0 .3125rem,.3125rem -.3125rem,-.3125rem 0}input[type=range]{-webkit-appearance:none;width:100%;height:100%;background:0 0;outline:0;position:absolute;top:0;left:0;margin:0;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1rem;height:1rem;border-radius:50%;background:#fff;border:.125rem solid var(--nf-color-border);cursor:pointer;box-shadow:0 0 .125rem #00000080;position:relative;z-index:1}input[type=range]::-moz-range-thumb{width:1rem;height:1rem;border-radius:50%;background:#fff;border:.125rem solid var(--nf-color-border);cursor:pointer;box-shadow:0 0 .125rem #00000080}.current-color-container{display:flex;justify-content:center;margin-top:.5rem}.current-color{width:1.875rem;height:1.875rem;border-radius:var(--nf-border-radius);border:.0625rem solid var(--nf-color-border)}`;
608
- var ot = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, $ = (t, e, s, i) => {
609
- for (var r = i > 1 ? void 0 : i ? nt(e, s) : e, o = t.length - 1, n; o >= 0; o--)
610
- (n = t[o]) && (r = (i ? n(e, s, r) : n(r)) || r);
611
- return i && r && ot(e, s, r), r;
612
- };
613
- let g = class extends R {
614
- constructor() {
615
- super(...arguments), this.value = "#FF0000", this.disabled = !1, this.disabledAlpha = !1, this.open = !1, this.showText = !0, this._panelVisible = !1, this._internalValue = "#FF0000FF", this._hsb = { h: 0, s: 100, b: 100 }, this._panelPosition = { top: 0, left: 0 }, this._handleGlobalClick = (t) => {
616
- this._panelVisible && !this.contains(t.target) && this._closePanel();
617
- }, this._handleKeyDown = (t) => {
618
- this._panelVisible && t.key === "Escape" && this._closePanel();
619
- };
620
- }
621
- connectedCallback() {
622
- super.connectedCallback(), document.addEventListener("click", this._handleGlobalClick), document.addEventListener("keydown", this._handleKeyDown);
623
- }
624
- disconnectedCallback() {
625
- super.disconnectedCallback(), document.removeEventListener("click", this._handleGlobalClick), document.removeEventListener("keydown", this._handleKeyDown);
626
- }
627
- firstUpdated() {
628
- this._updateInternalValue(this.value), this._updateHSBFromHex(this._internalValue);
629
- }
630
- updated(t) {
631
- t.has("value") && (this._updateInternalValue(this.value), this._updateHSBFromHex(this._internalValue)), t.has("open") && (this._panelVisible = this.open, this.open && this._updatePanelPosition());
632
- }
633
- // 更新内部颜色值
634
- _updateInternalValue(t) {
635
- if (t.startsWith("#")) {
636
- const e = t.slice(1);
637
- e.length === 6 ? this._internalValue = t + "FF" : e.length === 8 ? this._internalValue = t : this._internalValue = "#FF0000FF";
638
- } else
639
- this._internalValue = "#FF0000FF";
640
- }
641
- // 从HEX颜色值更新HSB值
642
- _updateHSBFromHex(t) {
643
- const e = parseInt(t.slice(1, 3), 16) / 255, s = parseInt(t.slice(3, 5), 16) / 255, i = parseInt(t.slice(5, 7), 16) / 255, r = Math.max(e, s, i), o = Math.min(e, s, i), n = r - o;
644
- let l = 0, a = 0;
645
- const c = r;
646
- n !== 0 && (a = n / r, r === e ? l = (s - i) / n % 6 : r === s ? l = (i - e) / n + 2 : l = (e - s) / n + 4, l *= 60, l < 0 && (l += 360)), this._hsb = {
647
- h: Math.round(l),
648
- s: Math.round(a * 100),
649
- b: Math.round(c * 100)
650
- };
651
- }
652
- // 从HSB值生成HEX颜色值
653
- _generateHexFromHSB(t, e, s, i = "FF") {
654
- e /= 100, s /= 100;
655
- const r = s * e, o = r * (1 - Math.abs(t / 60 % 2 - 1)), n = s - r;
656
- let l = 0, a = 0, c = 0;
657
- return 0 <= t && t < 60 ? (l = r, a = o, c = 0) : 60 <= t && t < 120 ? (l = o, a = r, c = 0) : 120 <= t && t < 180 ? (l = 0, a = r, c = o) : 180 <= t && t < 240 ? (l = 0, a = o, c = r) : 240 <= t && t < 300 ? (l = o, a = 0, c = r) : 300 <= t && t < 360 && (l = r, a = 0, c = o), l = Math.round((l + n) * 255), a = Math.round((a + n) * 255), c = Math.round((c + n) * 255), "#" + l.toString(16).padStart(2, "0") + a.toString(16).padStart(2, "0") + c.toString(16).padStart(2, "0") + i;
658
- }
659
- // 计算面板位置
660
- _updatePanelPosition() {
661
- requestAnimationFrame(() => {
662
- const t = this.getBoundingClientRect();
663
- this._panelPosition = {
664
- top: t.height + 8,
665
- left: 0
666
- };
667
- });
668
- }
669
- // 打开面板
670
- _openPanel() {
671
- this.disabled || (this._panelVisible = !0, this._updatePanelPosition(), this.dispatchEvent(new CustomEvent("openChange", {
672
- detail: !0,
673
- bubbles: !0,
674
- composed: !0
675
- })));
676
- }
677
- // 关闭面板
678
- _closePanel() {
679
- this._panelVisible = !1, this.dispatchEvent(new CustomEvent("openChange", {
680
- detail: !1,
681
- bubbles: !0,
682
- composed: !0
683
- }));
684
- }
685
- // 切换面板显示状态
686
- _togglePanel() {
687
- this._panelVisible ? this._closePanel() : this._openPanel();
688
- }
689
- // 处理HSB颜色变化
690
- _handleHSBChange(t, e, s) {
691
- this._hsb = { h: t, s: e, b: s };
692
- const i = this._internalValue.slice(7), r = this._generateHexFromHSB(t, e, s, i);
693
- this._handleColorChange(r);
694
- }
695
- // 处理Alpha值变化
696
- _handleAlphaChange(t) {
697
- const e = Math.round(t * 255 / 100).toString(16).padStart(2, "0").toUpperCase(), s = "#" + this._internalValue.slice(1, 7) + e;
698
- this._handleColorChange(s);
699
- }
700
- // 处理颜色变化
701
- _handleColorChange(t) {
702
- this._internalValue = t;
703
- const e = this.disabledAlpha || t.endsWith("FF") ? "#" + t.slice(1, 7) : t;
704
- this.dispatchEvent(new CustomEvent("change", {
705
- detail: e,
706
- bubbles: !0,
707
- composed: !0
708
- }));
709
- }
710
- // 处理色相选择
711
- _handleHueChange(t) {
712
- const e = t.target, s = parseInt(e.value);
713
- this._handleHSBChange(s, this._hsb.s, this._hsb.b);
714
- }
715
- // 处理饱和度和亮度选择
716
- _handleSBChange(t) {
717
- const e = t.target.getBoundingClientRect(), s = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, i = t instanceof MouseEvent ? t.clientY : t.touches[0].clientY, r = Math.max(0, Math.min(100, Math.round((s - e.left) / e.width * 100))), o = Math.max(0, Math.min(100, Math.round((1 - (i - e.top) / e.height) * 100)));
718
- this._handleHSBChange(this._hsb.h, r, o);
719
- }
720
- // 处理透明度选择
721
- _handleAlphaChangeInput(t) {
722
- const e = t.target, s = parseInt(e.value);
723
- this._handleAlphaChange(s);
724
- }
725
- // 渲染触发器
726
- _renderTrigger() {
727
- const t = "#" + this._internalValue.slice(1, 7), e = this._internalValue.slice(7);
728
- return p`
729
- <div
730
- class="trigger"
731
- @click="${this._togglePanel}"
732
- ?disabled="${this.disabled}"
733
- >
734
- <div
735
- class="color-block"
736
- style="background-color: ${this.disabledAlpha ? t : this._internalValue}"
737
- ></div>
738
- ${this.showText ? p`<div class="color-text">${this.disabledAlpha || e === "FF" ? t : this._internalValue}</div>` : ""}
739
- </div>
740
- `;
741
- }
742
- // 渲染颜色选择区域
743
- _renderColorSelector() {
744
- const t = this._generateHexFromHSB(this._hsb.h, 100, 100, "FF"), e = this._hsb.s / 100 * 100, s = (1 - this._hsb.b / 100) * 100;
745
- return p`
746
- <div class="color-selector">
747
- <div
748
- class="color-sb"
749
- style=${J({
750
- "background-color": t
751
- })}
752
- @click="${this._handleSBChange}"
753
- @touchstart="${this._handleSBChange}"
754
- @touchmove="${this._handleSBChange}"
755
- >
756
- <div class="sb-white"></div>
757
- <div class="sb-black"></div>
758
- <div
759
- class="selector"
760
- style=${J({
761
- left: `${e}%`,
762
- top: `${s}%`
763
- })}
764
- ></div>
765
- </div>
766
- </div>
767
- `;
768
- }
769
- // 渲染色相选择条
770
- _renderHueSlider() {
771
- return p`
772
- <div class="slider-container">
773
- <div class="slider hue-slider">
774
- <input
775
- type="range"
776
- min="0"
777
- max="360"
778
- .value="${this._hsb.h.toString()}"
779
- @input="${this._handleHueChange}"
780
- class="hue-slider-input"
781
- >
782
- </div>
783
- </div>
784
- `;
785
- }
786
- // 渲染透明度选择条
787
- _renderAlphaSlider() {
788
- if (this.disabledAlpha) return null;
789
- const t = parseInt(this._internalValue.slice(7), 16) / 255 * 100;
790
- return p`
791
- <div class="slider-container">
792
- <div class="slider alpha-slider">
793
- <div class="alpha-background"></div>
794
- <input
795
- type="range"
796
- min="0"
797
- max="100"
798
- .value="${Math.round(t).toString()}"
799
- @input="${this._handleAlphaChangeInput}"
800
- class="alpha-slider-input"
801
- >
802
- </div>
803
- </div>
804
- `;
805
- }
806
- // 渲染当前颜色显示
807
- _renderCurrentColor() {
808
- return p`
809
- <div class="current-color-container">
810
- <div
811
- class="current-color"
812
- style="background-color: ${this._internalValue}"
813
- ></div>
814
- </div>
815
- `;
816
- }
817
- // 渲染颜色面板
818
- _renderPanel() {
819
- return this._panelVisible ? p`
820
- <div
821
- class="panel"
822
- style="top: ${this._panelPosition.top}px; left: ${this._panelPosition.left}px;"
823
- >
824
- <div class="panel-content">
825
- ${this._renderColorSelector()}
826
- ${this._renderHueSlider()}
827
- ${this.disabledAlpha ? null : this._renderAlphaSlider()}
828
- ${this._renderCurrentColor()}
829
- </div>
830
- </div>
831
- ` : null;
832
- }
833
- render() {
834
- return p`
835
- ${this._renderTrigger()}
836
- ${this._renderPanel()}
837
- `;
838
- }
839
- };
840
- g.styles = [W, rt];
841
- $([
842
- h({ type: String })
843
- ], g.prototype, "value", 2);
844
- $([
845
- h({ type: Boolean })
846
- ], g.prototype, "disabled", 2);
847
- $([
848
- h({ type: Boolean })
849
- ], g.prototype, "disabledAlpha", 2);
850
- $([
851
- h({ type: Boolean })
852
- ], g.prototype, "open", 2);
853
- $([
854
- h({ type: Boolean })
855
- ], g.prototype, "showText", 2);
856
- $([
857
- y()
858
- ], g.prototype, "_panelVisible", 2);
859
- $([
860
- y()
861
- ], g.prototype, "_internalValue", 2);
862
- $([
863
- y()
864
- ], g.prototype, "_hsb", 2);
865
- $([
866
- y()
867
- ], g.prototype, "_panelPosition", 2);
868
- g = $([
869
- M("nf-color-picker")
870
- ], g);
871
- const at = E`:host{min-width:10rem;position:relative;display:inline-block}::slotted(*){position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}.input{position:absolute;inset:0;padding:var(--nf-input-padding);outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-color);font-size:var(--nf-font-size);font-weight:var(--nf-font-weight);font-family:var(--nf-font-family),sans-serif}.input:has(.toggle-password){padding-right:2.5rem}.input .toggle-password{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);background:0 0;border:none;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;color:var(--nf-select-icon-color);transition:color var(--nf-transition-fast) ease;outline:0}.input .toggle-password:hover{color:var(--nf-icon-color-hover)}.input .toggle-password:active{color:var(--nf-icon-color-active)}.input .toggle-password svg{display:block}`;
872
- var lt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, N = (t, e, s, i) => {
873
- for (var r = i > 1 ? void 0 : i ? ht(e, s) : e, o = t.length - 1, n; o >= 0; o--)
874
- (n = t[o]) && (r = (i ? n(e, s, r) : n(r)) || r);
875
- return i && r && lt(e, s, r), r;
876
- };
877
- let A = class extends R {
878
- constructor() {
879
- super(...arguments), this.value = "", this.placeholder = "", this.type = "text", this.showPassword = !1, this.onInput = (t) => {
880
- t.stopPropagation();
881
- const e = t.target?.value;
882
- this.dispatchEvent(
883
- new CustomEvent("input", {
884
- detail: e,
885
- bubbles: !0,
886
- composed: !0
887
- })
888
- ), e !== void 0 && this.value !== e && this.dispatchEvent(
889
- new CustomEvent("change", {
890
- detail: e,
891
- bubbles: !0,
892
- composed: !0
893
- })
894
- );
895
- }, this.onChange = (t) => {
896
- t.stopPropagation();
897
- const e = t.target?.value;
898
- e !== void 0 && this.value !== e && this.dispatchEvent(
899
- new CustomEvent("change", {
900
- detail: e,
901
- bubbles: !0,
902
- composed: !0
903
- })
904
- );
905
- }, this.onKeyDown = (t) => {
906
- if (t.key === "Enter") {
907
- t.stopPropagation();
908
- const e = t.target?.value;
909
- e !== void 0 && this.dispatchEvent(
910
- new CustomEvent("pressEnter", {
911
- detail: e,
912
- bubbles: !0,
913
- composed: !0
914
- })
915
- );
916
- }
917
- }, this.togglePasswordVisibility = (t) => {
918
- t.preventDefault(), t.stopPropagation(), this.showPassword = !this.showPassword;
919
- };
920
- }
921
- render() {
922
- const t = this.type === "password" && !this.showPassword ? "password" : "text", e = this.type === "password";
923
- return p`<slot></slot><input .value=${t} @change=${this.value} @input=${this.placeholder} @keydown=${this.maxLength ?? ""} class=input maxlength=${this.onInput} placeholder=${this.onChange} type=${this.onKeyDown}> ${e ? p`<button @click=${this.togglePasswordVisibility} aria-label=${this.showPassword ? "Hide password" : "Show password"} class=toggle-password tabindex=-1 type=button>${this.showPassword ? this.renderEyeOffIcon() : this.renderEyeIcon()}</button>` : ""}`;
924
- }
925
- renderEyeIcon() {
926
- return p`<svg height=16 stroke=currentColor stroke-width=2 viewBox="0 0 24 24"width=16><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx=12 cy=12 r=3 /></svg>`;
927
- }
928
- renderEyeOffIcon() {
929
- return p`<svg height=16 stroke=currentColor stroke-width=2 viewBox="0 0 24 24"width=16><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1=1 x2=23 y1=1 y2=23 /></svg>`;
930
- }
931
- connectedCallback() {
932
- this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
933
- this.style.transition = "";
934
- });
935
- }
936
- };
937
- A.styles = [W, at];
938
- N([
939
- h({ type: String })
940
- ], A.prototype, "value", 2);
941
- N([
942
- h({ type: String })
943
- ], A.prototype, "placeholder", 2);
944
- N([
945
- h({ type: String })
946
- ], A.prototype, "type", 2);
947
- N([
948
- h({ type: Number })
949
- ], A.prototype, "maxLength", 2);
950
- N([
951
- y()
952
- ], A.prototype, "showPassword", 2);
953
- A = N([
954
- M("nf-input")
955
- ], A);
956
- const ct = E`:host{min-width:10rem;position:relative;display:inline-block;box-sizing:border-box;padding:0}.input-number-container{position:relative;width:100%;height:100%;display:flex;align-items:center;padding-left:.625rem;box-sizing:border-box}.input-number{position:relative;flex:1;height:100%;outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-color);font-weight:var(--nf-font-weight);text-align:left}.input-number .input-number-input-wrapper{height:100%}.input-number .input-number-input-wrapper .input-number-input{background:0 0;width:100%;height:100%;text-align:start;border:0;outline:0;color:var(--nf-color);font-weight:var(--nf-font-weight)}.input-number::-webkit-inner-spin-button,.input-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-number[type=number]{appearance:textfield}.input-number:hover .controls{width:1.5rem}.input-prefix{display:flex;align-items:center;color:var(--nf-color-secondary);font-size:var(--nf-font-size);pointer-events:none;margin-inline-end:.25rem}.input-suffix{display:flex;align-items:center;color:var(--nf-color-secondary);font-size:var(--nf-font-size);pointer-events:none;margin-inline-end:.625rem;margin-inline-start:.25rem}.controls{position:absolute;top:0;right:0;height:100%;width:0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;transition:width var(--nf-transition-fast) ease}.control-btn{flex:1;display:flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;color:#999;transition:background-color var(--nf-transition-fast) ease,color var(--nf-transition-fast) ease;outline:0;-webkit-user-select:none;user-select:none}.control-btn:hover{background-color:#0000000d;color:#fff}.control-btn:active{background-color:#0000001a}.control-btn:focus-visible{background-color:#0000000d}.control-btn svg{display:block;pointer-events:none}`;
957
- var dt = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, _ = (t, e, s, i) => {
958
- for (var r = i > 1 ? void 0 : i ? pt(e, s) : e, o = t.length - 1, n; o >= 0; o--)
959
- (n = t[o]) && (r = (i ? n(e, s, r) : n(r)) || r);
960
- return i && r && dt(e, s, r), r;
961
- };
962
- let m = class extends R {
963
- constructor() {
964
- super(...arguments), this.value = 0, this.controls = !0, this.changeOnWheel = !0, this.step = 1, this.decimalSeparator = ".", this.prefix = "", this.suffix = "", this.isInputFocused = !1, this.handleInput = (t) => {
965
- t.stopPropagation();
966
- const s = t.target.value;
967
- this.dispatchEvent(
968
- new CustomEvent("input", {
969
- detail: s,
970
- bubbles: !0,
971
- composed: !0
972
- })
973
- );
974
- }, this.handleChange = (t) => {
975
- t.stopPropagation();
976
- const e = t.target, s = this.parseInputValue(e.value);
977
- if (s !== null) {
978
- const i = this.clampValue(s);
979
- i !== this.value && (this.value = i, this.dispatchEvent(
980
- new CustomEvent("change", {
981
- detail: i,
982
- bubbles: !0,
983
- composed: !0
984
- })
985
- ));
986
- }
987
- }, this.handleKeyDown = (t) => {
988
- t.key === "Enter" ? (t.stopPropagation(), this.dispatchEvent(
989
- new CustomEvent("pressEnter", {
990
- detail: this.value,
991
- bubbles: !0,
992
- composed: !0
993
- })
994
- )) : t.key === "ArrowUp" ? (t.preventDefault(), this.handleStepChange(1)) : t.key === "ArrowDown" && (t.preventDefault(), this.handleStepChange(-1));
995
- }, this.handleWheel = (t) => {
996
- if (!this.changeOnWheel || !this.isInputFocused) return;
997
- t.preventDefault();
998
- const e = t.deltaY < 0 ? 1 : -1;
999
- this.handleStepChange(e);
1000
- }, this.handleFocus = () => {
1001
- this.isInputFocused = !0;
1002
- }, this.handleBlur = () => {
1003
- this.isInputFocused = !1;
1004
- };
1005
- }
1006
- render() {
1007
- return p`<div class=input-number-container>${this.prefix ? p`<div class=input-prefix>${this.prefix}</div>` : ""}<div class=input-number><div class=input-number-input-wrapper><input .value=${this.formatDisplayValue(this.value)} @blur=${this.handleInput} @change=${this.handleChange} @focus=${this.handleKeyDown} @input=${this.handleFocus} @keydown=${this.handleBlur} @wheel=${this.handleWheel} class=input-number-input></div>${this.controls ? p`<div class=controls><button @click=${() => {
1008
- this.handleStepChange(1);
1009
- }} aria-label="Increase value"class="control-btn control-btn-up"type=button><svg aria-hidden=true data-icon=up focusable=false height=0.5rem viewBox="64 64 896 896"width=0.5rem><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></button><button @click=${() => {
1010
- this.handleStepChange(-1);
1011
- }} aria-label="Decrease value"class="control-btn control-btn-down"type=button><svg aria-hidden=true data-icon=down focusable=false height=0.5rem viewBox="64 64 896 896"width=0.5rem><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></button></div>` : ""}</div>${this.suffix ? p`<div class=input-suffix>${this.suffix}</div>` : ""}</div>`;
1012
- }
1013
- formatDisplayValue(t) {
1014
- return isNaN(t) ? "" : t.toString().replace(".", this.decimalSeparator);
1015
- }
1016
- parseInputValue(t) {
1017
- if (!t) return null;
1018
- const e = t.replace(this.decimalSeparator, "."), s = parseFloat(e);
1019
- return isNaN(s) ? null : s;
1020
- }
1021
- clampValue(t) {
1022
- let e = t;
1023
- return this.min !== void 0 && (e = Math.max(e, this.min)), this.max !== void 0 && (e = Math.min(e, this.max)), e;
1024
- }
1025
- handleStepChange(t) {
1026
- const e = this.clampValue(this.value + t * this.step);
1027
- e !== this.value && (this.value = e, this.dispatchEvent(
1028
- new CustomEvent("step", {
1029
- detail: e,
1030
- bubbles: !0,
1031
- composed: !0
1032
- })
1033
- ), this.dispatchEvent(
1034
- new CustomEvent("change", {
1035
- detail: e,
1036
- bubbles: !0,
1037
- composed: !0
1038
- })
1039
- ));
1040
- }
1041
- };
1042
- m.styles = [W, ct];
1043
- _([
1044
- h({ type: Number })
1045
- ], m.prototype, "value", 2);
1046
- _([
1047
- h({ type: Boolean })
1048
- ], m.prototype, "controls", 2);
1049
- _([
1050
- h({ type: Boolean })
1051
- ], m.prototype, "changeOnWheel", 2);
1052
- _([
1053
- h({ type: Number })
1054
- ], m.prototype, "min", 2);
1055
- _([
1056
- h({ type: Number })
1057
- ], m.prototype, "max", 2);
1058
- _([
1059
- h({ type: Number })
1060
- ], m.prototype, "step", 2);
1061
- _([
1062
- h({ type: String })
1063
- ], m.prototype, "decimalSeparator", 2);
1064
- _([
1065
- h({ type: String })
1066
- ], m.prototype, "prefix", 2);
1067
- _([
1068
- h({ type: String })
1069
- ], m.prototype, "suffix", 2);
1070
- _([
1071
- y()
1072
- ], m.prototype, "isInputFocused", 2);
1073
- m = _([
1074
- M("nf-input-number")
1075
- ], m);
1076
- async function ut(t) {
1077
- return new Promise((e) => setTimeout(e, t));
1078
- }
1079
- const ft = E`:host{min-width:5rem;-webkit-user-select:none;user-select:none;cursor:pointer}:host .text{flex-grow:1;display:inline-block;outline:0;white-space:nowrap}:host .icon{width:1.5rem;height:1.5rem;display:inline-block;fill:none;stroke:var(--nf-select-icon-color);stroke-width:1;stroke-linecap:round;margin:0 -.3rem 0 .5rem}:host .dropdown{position:absolute;top:2rem;right:0;left:0;padding:.3rem;background:var(--nf-dropdown-background);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);border-radius:.5rem;opacity:0;pointer-events:none;color:var(--nf-color);box-shadow:0 0 1rem 0 var(--nf-dropdown-shadow);z-index:1;transition:opacity var(--nf-transition) ease-out,transform var(--nf-transition) ease-out}:host .dropdown .item{white-space:nowrap;padding:.4rem .7rem;overflow:hidden;text-overflow:ellipsis;border-radius:.3rem;cursor:pointer}:host .dropdown .item-unselected:hover{background:var(--nf-item-background-hover);transition:background-color var(--nf-transition) ease-in-out}:host .dropdown .item-unselected:active{background:var(--nf-item-background-active)}:host .dropdown .item-selected{background-color:color-mix(in srgb,var(--nf-primary-color) 30%,transparent)}:host(:focus){color:var(--nf-focus-text-color)}:host(:focus) .dropdown{transform:translateY(.5rem);opacity:1;pointer-events:auto}:host(:focus) .cover{pointer-events:auto}`;
1080
- var bt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, ee = (t, e, s, i) => {
1081
- for (var r = i > 1 ? void 0 : i ? mt(e, s) : e, o = t.length - 1, n; o >= 0; o--)
1082
- (n = t[o]) && (r = (i ? n(e, s, r) : n(r)) || r);
1083
- return i && r && bt(e, s, r), r;
1084
- };
1085
- let H = class extends R {
1086
- constructor() {
1087
- super(...arguments), this.value = "", this.options = [], this.showDropdown = !1, this.jumpCloseFlag = !1, this.timeoutId = null, this.onFocus = () => {
1088
- this.timeoutId && clearTimeout(this.timeoutId), this.showDropdown = !0, this.jumpCloseFlag = !0;
1089
- }, this.onBlur = () => {
1090
- this.jumpCloseFlag = !1, this.timeoutId = setTimeout(() => {
1091
- this.showDropdown = !1, this.timeoutId = null;
1092
- }, 500);
1093
- }, this.onClick = () => {
1094
- if (this.jumpCloseFlag) {
1095
- this.jumpCloseFlag = !1;
1096
- return;
1097
- }
1098
- this.blur();
1099
- };
1100
- }
1101
- async set(t) {
1102
- this.dispatchEvent(new CustomEvent("input", { detail: t, bubbles: !0, composed: !0 })), this.value !== t && this.dispatchEvent(new CustomEvent("change", { detail: t, bubbles: !0, composed: !0 })), await ut(34), this.blur();
1103
- }
1104
- render() {
1105
- const t = this.options.findIndex((s) => s.value == this.value), e = t > -1 ? this.options[t]?.label : this.value;
1106
- return p`<div class=dropdown>${(this.showDropdown ? this.options : []).map(
1107
- (s) => p`<div @click=${() => this.set(s.value)} class="${this.value == s.value ? "item-selected" : "item-unselected"} item">${s.label}</div>`
1108
- )}</div><slot></slot><div class=text>${e}</div><svg class=icon height=24 viewBox="0 0 24 24"width=24><path d="M17 9.5l-5 7-5-7"/></svg>`;
1109
- }
1110
- connectedCallback() {
1111
- this.style.transition = "none", super.connectedCallback(), this.tabIndex = 0, this.addEventListener("focus", this.onFocus), this.addEventListener("blur", this.onBlur), this.addEventListener("click", this.onClick), requestAnimationFrame(() => {
1112
- this.style.transition = "";
1113
- });
1114
- }
1115
- disconnectedCallback() {
1116
- super.disconnectedCallback(), this.removeEventListener("focus", this.onFocus), this.removeEventListener("blur", this.onBlur), this.removeEventListener("click", this.onClick);
1117
- }
1118
- };
1119
- H.styles = [W, ft];
1120
- ee([
1121
- h({ type: String })
1122
- ], H.prototype, "value", 2);
1123
- ee([
1124
- h({
1125
- type: Array,
1126
- converter: (t) => {
1127
- try {
1128
- if (typeof t == "string")
1129
- return JSON.parse(t);
1130
- if (typeof t == "object" && Array.isArray(t))
1131
- return t;
1132
- } catch (e) {
1133
- console.error("Failed to convert property options:", e);
1134
- }
1135
- return [];
1136
- }
1137
- })
1138
- ], H.prototype, "options", 2);
1139
- ee([
1140
- y()
1141
- ], H.prototype, "showDropdown", 2);
1142
- H = ee([
1143
- M("nf-select")
1144
- ], H);
1145
- const gt = E`:host{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;outline:0}:host[disabled]{cursor:not-allowed;opacity:.5}.switch-wrapper{position:relative;display:inline-block}.switch-container{position:relative;z-index:1;width:3.1rem;height:1.5rem;background-color:var(--nf-background-color);border-radius:.75rem;transition:background-color .2s ease;overflow:hidden}.switch-container:hover{background:var(--nf-background-color-hover)}:host([checked]) .switch-container{background-color:var(--nf-primary-color,var(--primary-color))}:host([disabled]) .switch-container{opacity:.5}.ripple{position:absolute;border-radius:.75rem;background-color:#3333334d;top:0;left:0;width:100%;height:100%;transform:scale(1);transform-origin:center center;animation:ripple-animation .6s ease-out forwards;pointer-events:none;opacity:1}@keyframes ripple-animation{to{transform:scale(1.3);opacity:0}}.switch-thumb{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;transition:transform .2s ease-in-out}.switch-thumb:before{content:\"\";position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;background-color:#fff;border-radius:.625rem;box-shadow:0 .125rem .25rem #0003;transition:width .2s ease-in-out,transform .2s ease-in-out}:host(:not([checked])) .switch-thumb{transform:translate(.125rem)}:host(:not([checked])) .switch-thumb:active:before{width:1.625rem;border-radius:.625rem}:host([checked]) .switch-thumb{transform:translate(1.725rem)}:host([checked]) .switch-thumb:active:before{width:1.625rem;border-radius:.625rem;transform:translate(-.375rem)}:host(:focus) .switch-container{outline:.125rem solid var(--nf-primary-color,var(--primary-color));outline-offset:.125rem}`;
1146
- var vt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, he = (t, e, s, i) => {
1147
- for (var r = i > 1 ? void 0 : i ? _t(e, s) : e, o = t.length - 1, n; o >= 0; o--)
1148
- (n = t[o]) && (r = (i ? n(e, s, r) : n(r)) || r);
1149
- return i && r && vt(e, s, r), r;
1150
- };
1151
- let j = class extends V {
1152
- constructor() {
1153
- super(...arguments), this.checked = !1, this.disabled = !1, this.rippleElement = null;
1154
- }
1155
- // 切换开关状态
1156
- toggleSwitch(t) {
1157
- this.disabled || (t.stopPropagation(), this.checked = !this.checked, this.dispatchEvent(
1158
- new CustomEvent("change", {
1159
- bubbles: !0,
1160
- composed: !0,
1161
- detail: this.checked
1162
- })
1163
- ), this.createRipple(t));
1164
- }
1165
- createRipple(t) {
1166
- const e = this.shadowRoot?.querySelector(".switch-wrapper");
1167
- if (!e) return;
1168
- const s = e.querySelector(".ripple");
1169
- s && e.removeChild(s);
1170
- const i = document.createElement("div");
1171
- i.classList.add("ripple"), e.appendChild(i), i.addEventListener("animationend", () => {
1172
- e.contains(i) && e.removeChild(i);
1173
- });
1174
- }
1175
- // 渲染开关组件
1176
- render() {
1177
- return se`<div class=switch-wrapper><div class=switch-container .aria-checked=${this.toggleSwitch} .aria-disabled=${this.checked} @click=${this.disabled} role=switch><div class=switch-thumb></div></div></div>`;
1178
- }
1179
- };
1180
- j.styles = [gt];
1181
- he([
1182
- h({ type: Boolean, reflect: !0 })
1183
- ], j.prototype, "checked", 2);
1184
- he([
1185
- h({ type: Boolean, reflect: !0 })
1186
- ], j.prototype, "disabled", 2);
1187
- j = he([
1188
- M("nf-switch")
1189
- ], j);
1190
- const yt = E`:host{background:0 0;border:none;box-shadow:none}:host:hover{background:0 0;border:none}:host:focus{box-shadow:none}.slider-container{position:relative;min-width:10rem;width:100%;height:1.5rem;display:flex;align-items:center;box-sizing:border-box}.slider-track{position:relative;width:100%;height:.25rem;background-color:#e0e0e0;border-radius:.125rem;cursor:pointer}:host([disabled]) .slider-track{cursor:not-allowed;opacity:.5}.slider-track-fill{position:absolute;height:100%;background-color:var(--nf-primary-color,#5e72f9);border-radius:.125rem}.slider-handle{position:absolute;width:1rem;height:1rem;background-color:#fff;border:2px solid var(--nf-primary-color,#5e72f9);border-radius:50%;top:50%;transform:translate(-50%,-50%);cursor:grab;outline:0;box-shadow:0 2px 4px #0003;transition:transform .1s ease,box-shadow .1s ease}:host([disabled]) .slider-handle{cursor:not-allowed}.slider-handle:hover{transform:translate(-50%,-50%) scale(1.1)}.slider-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 4px 8px #0000004d}.slider-handle:focus{box-shadow:0 0 0 3px #5e72f94d}.slider-tooltip{position:absolute;top:-2rem;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none}.slider-tooltip.visible{opacity:1}`;
1191
- var $t = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, v = (t, e, s, i) => {
1192
- for (var r = i > 1 ? void 0 : i ? wt(e, s) : e, o = t.length - 1, n; o >= 0; o--)
1193
- (n = t[o]) && (r = (i ? n(e, s, r) : n(r)) || r);
1194
- return i && r && $t(e, s, r), r;
1195
- };
1196
- let b = class extends R {
1197
- constructor() {
1198
- super(...arguments), this.value = 0, this.defaultValue = 0, this.min = 0, this.max = 100, this.step = 1, this.disabled = !1, this.range = !1, this.tooltip = !1, this._currentValue = 0, this._isDragging = !1, this._showTooltip = !1, this._handleDrag = (t) => {
1199
- this._isDragging && (t.preventDefault(), this._updateValue(t));
1200
- }, this._stopDrag = () => {
1201
- this._isDragging && (this._isDragging = !1, this._showTooltip = !1, document.removeEventListener("mousemove", this._handleDrag), document.removeEventListener("touchmove", this._handleDrag), document.removeEventListener("mouseup", this._stopDrag), document.removeEventListener("touchend", this._stopDrag), this.dispatchEvent(
1202
- new CustomEvent("change", {
1203
- detail: this._currentValue,
1204
- bubbles: !0,
1205
- composed: !0
1206
- })
1207
- ));
1208
- };
1209
- }
1210
- connectedCallback() {
1211
- super.connectedCallback(), this._currentValue = this.value || this.defaultValue;
1212
- }
1213
- updated(t) {
1214
- t.has("value") && (this._currentValue = this.value);
1215
- }
1216
- _handleMouseDown(t) {
1217
- this.disabled || (t.preventDefault(), this._startDrag(t));
1218
- }
1219
- _handleTouchStart(t) {
1220
- this.disabled || (t.preventDefault(), this._startDrag(t));
1221
- }
1222
- _handleKeyDown(t) {
1223
- if (this.disabled) return;
1224
- let e = this._currentValue;
1225
- switch (t.key) {
1226
- case "ArrowLeft":
1227
- case "ArrowDown":
1228
- e = Math.max(this.min, this._currentValue - this.step), t.preventDefault();
1229
- break;
1230
- case "ArrowRight":
1231
- case "ArrowUp":
1232
- e = Math.min(this.max, this._currentValue + this.step), t.preventDefault();
1233
- break;
1234
- case "Home":
1235
- e = this.min, t.preventDefault();
1236
- break;
1237
- case "End":
1238
- e = this.max, t.preventDefault();
1239
- break;
1240
- default:
1241
- this._showTooltip = !1, this.requestUpdate();
1242
- return;
1243
- }
1244
- e !== this._currentValue && (this._currentValue = e, this._showTooltip = !0, this.requestUpdate(), this.dispatchEvent(
1245
- new CustomEvent("change", {
1246
- detail: this._currentValue,
1247
- bubbles: !0,
1248
- composed: !0
1249
- })
1250
- ), setTimeout(() => {
1251
- this._showTooltip = !1, this.requestUpdate();
1252
- }, 1e3));
1253
- }
1254
- _startDrag(t) {
1255
- this._isDragging = !0, this._showTooltip = !0, this._updateValue(t), document.addEventListener("mousemove", this._handleDrag), document.addEventListener("touchmove", this._handleDrag, { passive: !1 }), document.addEventListener("mouseup", this._stopDrag), document.addEventListener("touchend", this._stopDrag);
1256
- }
1257
- _updateValue(t) {
1258
- const e = this.shadowRoot?.querySelector(".slider-track");
1259
- if (!e) return;
1260
- const s = e.getBoundingClientRect(), i = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, r = Math.max(0, Math.min(1, (i - s.left) / s.width)), o = this.max - this.min, n = this.min + r * o, l = Math.round((n - this.min) / this.step), a = this.min + l * this.step;
1261
- this._currentValue = Math.min(this.max, Math.max(this.min, a)), this.requestUpdate();
1262
- }
1263
- _getValuePercentage() {
1264
- const t = this.max - this.min;
1265
- return t === 0 ? 0 : (this._currentValue - this.min) / t * 100;
1266
- }
1267
- render() {
1268
- const t = `${this._getValuePercentage()}%`, e = `${this._getValuePercentage()}%`, s = `slider-tooltip ${this._showTooltip || this.tooltip ? "visible" : ""}`;
1269
- return p`<div class=slider-container><div class=slider-track @mousedown=${this._handleMouseDown} @touchstart=${this._handleTouchStart}><div class=slider-track-fill style=${J({ width: e })}></div><div class=slider-handle style=${J({ left: t })} @keydown=${this.disabled ? -1 : 0} tabindex=${this._handleKeyDown}><div class=${s}>${this._currentValue}</div></div></div></div>`;
1270
- }
1271
- };
1272
- b.styles = [W, yt];
1273
- v([
1274
- h({ type: Number })
1275
- ], b.prototype, "value", 2);
1276
- v([
1277
- h({ type: Number })
1278
- ], b.prototype, "defaultValue", 2);
1279
- v([
1280
- h({ type: Number })
1281
- ], b.prototype, "min", 2);
1282
- v([
1283
- h({ type: Number })
1284
- ], b.prototype, "max", 2);
1285
- v([
1286
- h({ type: Number })
1287
- ], b.prototype, "step", 2);
1288
- v([
1289
- h({ type: Boolean })
1290
- ], b.prototype, "disabled", 2);
1291
- v([
1292
- h({ type: Boolean })
1293
- ], b.prototype, "range", 2);
1294
- v([
1295
- h({ type: Boolean })
1296
- ], b.prototype, "tooltip", 2);
1297
- v([
1298
- y()
1299
- ], b.prototype, "_currentValue", 2);
1300
- v([
1301
- y()
1302
- ], b.prototype, "_isDragging", 2);
1303
- v([
1304
- y()
1305
- ], b.prototype, "_showTooltip", 2);
1306
- b = v([
1307
- M("nf-slider")
1308
- ], b);
1309
- export {
1310
- H as N,
1311
- A as a,
1312
- j as b,
1313
- m as c,
1314
- z as d,
1315
- g as e,
1316
- b as f
1317
- };