next-flow-design 1.5.1 → 1.5.5
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
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
import { css as E, LitElement as R, html as f } from "lit";
|
|
2
|
-
const
|
|
3
|
-
s !== void 0 ? s.addInitializer(() => {
|
|
4
|
-
customElements.define(t, e);
|
|
5
|
-
}) : customElements.define(t, e);
|
|
6
|
-
};
|
|
7
|
-
const Y = globalThis, oe = Y.ShadowRoot && (Y.ShadyCSS === void 0 || Y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, we = /* @__PURE__ */ Symbol(), ce = /* @__PURE__ */ new WeakMap();
|
|
2
|
+
const Y = globalThis, se = Y.ShadowRoot && (Y.ShadyCSS === void 0 || Y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, we = /* @__PURE__ */ Symbol(), ce = /* @__PURE__ */ new WeakMap();
|
|
8
3
|
let Se = class {
|
|
9
|
-
constructor(e,
|
|
10
|
-
if (this._$cssResult$ = !0,
|
|
11
|
-
this.cssText = e, this.t =
|
|
4
|
+
constructor(e, o, s) {
|
|
5
|
+
if (this._$cssResult$ = !0, s !== we) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
6
|
+
this.cssText = e, this.t = o;
|
|
12
7
|
}
|
|
13
8
|
get styleSheet() {
|
|
14
9
|
let e = this.o;
|
|
15
|
-
const
|
|
16
|
-
if (
|
|
17
|
-
const
|
|
18
|
-
|
|
10
|
+
const o = this.t;
|
|
11
|
+
if (se && e === void 0) {
|
|
12
|
+
const s = o !== void 0 && o.length === 1;
|
|
13
|
+
s && (e = ce.get(o)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && ce.set(o, e));
|
|
19
14
|
}
|
|
20
15
|
return e;
|
|
21
16
|
}
|
|
@@ -24,17 +19,17 @@ let Se = class {
|
|
|
24
19
|
}
|
|
25
20
|
};
|
|
26
21
|
const Ce = (t) => new Se(typeof t == "string" ? t : t + "", void 0, we), Pe = (t, e) => {
|
|
27
|
-
if (
|
|
28
|
-
else for (const
|
|
29
|
-
const
|
|
30
|
-
r !== void 0 &&
|
|
31
|
-
}
|
|
32
|
-
}, de =
|
|
33
|
-
let
|
|
34
|
-
for (const
|
|
35
|
-
return Ce(
|
|
22
|
+
if (se) t.adoptedStyleSheets = e.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
|
|
23
|
+
else for (const o of e) {
|
|
24
|
+
const s = document.createElement("style"), r = Y.litNonce;
|
|
25
|
+
r !== void 0 && s.setAttribute("nonce", r), s.textContent = o.cssText, t.appendChild(s);
|
|
26
|
+
}
|
|
27
|
+
}, de = se ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
|
|
28
|
+
let o = "";
|
|
29
|
+
for (const s of e.cssRules) o += s.cssText;
|
|
30
|
+
return Ce(o);
|
|
36
31
|
})(t) : t;
|
|
37
|
-
const { is:
|
|
32
|
+
const { is: Me, defineProperty: De, getOwnPropertyDescriptor: Te, getOwnPropertyNames: Oe, getOwnPropertySymbols: Be, getPrototypeOf: Ve } = Object, Q = globalThis, ue = Q.trustedTypes, He = ue ? ue.emptyScript : "", Ne = Q.reactiveElementPolyfillSupport, U = (t, e) => t, X = { toAttribute(t, e) {
|
|
38
33
|
switch (e) {
|
|
39
34
|
case Boolean:
|
|
40
35
|
t = t ? He : null;
|
|
@@ -45,24 +40,24 @@ const { is: De, defineProperty: Me, getOwnPropertyDescriptor: Te, getOwnProperty
|
|
|
45
40
|
}
|
|
46
41
|
return t;
|
|
47
42
|
}, fromAttribute(t, e) {
|
|
48
|
-
let
|
|
43
|
+
let o = t;
|
|
49
44
|
switch (e) {
|
|
50
45
|
case Boolean:
|
|
51
|
-
|
|
46
|
+
o = t !== null;
|
|
52
47
|
break;
|
|
53
48
|
case Number:
|
|
54
|
-
|
|
49
|
+
o = t === null ? null : Number(t);
|
|
55
50
|
break;
|
|
56
51
|
case Object:
|
|
57
52
|
case Array:
|
|
58
53
|
try {
|
|
59
|
-
|
|
54
|
+
o = JSON.parse(t);
|
|
60
55
|
} catch {
|
|
61
|
-
|
|
56
|
+
o = null;
|
|
62
57
|
}
|
|
63
58
|
}
|
|
64
|
-
return
|
|
65
|
-
} }, re = (t, e) => !
|
|
59
|
+
return o;
|
|
60
|
+
} }, re = (t, e) => !Me(t, e), pe = { attribute: !0, type: String, converter: X, reflect: !1, useDefault: !1, hasChanged: re };
|
|
66
61
|
Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), Q.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
|
|
67
62
|
let B = class extends HTMLElement {
|
|
68
63
|
static addInitializer(e) {
|
|
@@ -71,21 +66,21 @@ let B = class extends HTMLElement {
|
|
|
71
66
|
static get observedAttributes() {
|
|
72
67
|
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
|
|
73
68
|
}
|
|
74
|
-
static createProperty(e,
|
|
75
|
-
if (
|
|
76
|
-
const
|
|
77
|
-
r !== void 0 &&
|
|
69
|
+
static createProperty(e, o = pe) {
|
|
70
|
+
if (o.state && (o.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((o = Object.create(o)).wrapped = !0), this.elementProperties.set(e, o), !o.noAccessor) {
|
|
71
|
+
const s = /* @__PURE__ */ Symbol(), r = this.getPropertyDescriptor(e, s, o);
|
|
72
|
+
r !== void 0 && De(this.prototype, e, r);
|
|
78
73
|
}
|
|
79
74
|
}
|
|
80
|
-
static getPropertyDescriptor(e,
|
|
75
|
+
static getPropertyDescriptor(e, o, s) {
|
|
81
76
|
const { get: r, set: i } = Te(this.prototype, e) ?? { get() {
|
|
82
|
-
return this[
|
|
77
|
+
return this[o];
|
|
83
78
|
}, set(n) {
|
|
84
|
-
this[
|
|
79
|
+
this[o] = n;
|
|
85
80
|
} };
|
|
86
81
|
return { get: r, set(n) {
|
|
87
82
|
const l = r?.call(this);
|
|
88
|
-
i?.call(this, n), this.requestUpdate(e, l,
|
|
83
|
+
i?.call(this, n), this.requestUpdate(e, l, s);
|
|
89
84
|
}, configurable: !0, enumerable: !0 };
|
|
90
85
|
}
|
|
91
86
|
static getPropertyOptions(e) {
|
|
@@ -99,32 +94,32 @@ let B = class extends HTMLElement {
|
|
|
99
94
|
static finalize() {
|
|
100
95
|
if (this.hasOwnProperty(U("finalized"))) return;
|
|
101
96
|
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(U("properties"))) {
|
|
102
|
-
const
|
|
103
|
-
for (const r of
|
|
97
|
+
const o = this.properties, s = [...Oe(o), ...Be(o)];
|
|
98
|
+
for (const r of s) this.createProperty(r, o[r]);
|
|
104
99
|
}
|
|
105
100
|
const e = this[Symbol.metadata];
|
|
106
101
|
if (e !== null) {
|
|
107
|
-
const
|
|
108
|
-
if (
|
|
102
|
+
const o = litPropertyMetadata.get(e);
|
|
103
|
+
if (o !== void 0) for (const [s, r] of o) this.elementProperties.set(s, r);
|
|
109
104
|
}
|
|
110
105
|
this._$Eh = /* @__PURE__ */ new Map();
|
|
111
|
-
for (const [
|
|
112
|
-
const r = this._$Eu(
|
|
113
|
-
r !== void 0 && this._$Eh.set(r,
|
|
106
|
+
for (const [o, s] of this.elementProperties) {
|
|
107
|
+
const r = this._$Eu(o, s);
|
|
108
|
+
r !== void 0 && this._$Eh.set(r, o);
|
|
114
109
|
}
|
|
115
110
|
this.elementStyles = this.finalizeStyles(this.styles);
|
|
116
111
|
}
|
|
117
112
|
static finalizeStyles(e) {
|
|
118
|
-
const
|
|
113
|
+
const o = [];
|
|
119
114
|
if (Array.isArray(e)) {
|
|
120
|
-
const
|
|
121
|
-
for (const r of
|
|
122
|
-
} else e !== void 0 &&
|
|
123
|
-
return
|
|
115
|
+
const s = new Set(e.flat(1 / 0).reverse());
|
|
116
|
+
for (const r of s) o.unshift(de(r));
|
|
117
|
+
} else e !== void 0 && o.push(de(e));
|
|
118
|
+
return o;
|
|
124
119
|
}
|
|
125
|
-
static _$Eu(e,
|
|
126
|
-
const
|
|
127
|
-
return
|
|
120
|
+
static _$Eu(e, o) {
|
|
121
|
+
const s = o.attribute;
|
|
122
|
+
return s === !1 ? void 0 : typeof s == "string" ? s : typeof e == "string" ? e.toLowerCase() : void 0;
|
|
128
123
|
}
|
|
129
124
|
constructor() {
|
|
130
125
|
super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
|
|
@@ -139,8 +134,8 @@ let B = class extends HTMLElement {
|
|
|
139
134
|
this._$EO?.delete(e);
|
|
140
135
|
}
|
|
141
136
|
_$E_() {
|
|
142
|
-
const e = /* @__PURE__ */ new Map(),
|
|
143
|
-
for (const
|
|
137
|
+
const e = /* @__PURE__ */ new Map(), o = this.constructor.elementProperties;
|
|
138
|
+
for (const s of o.keys()) this.hasOwnProperty(s) && (e.set(s, this[s]), delete this[s]);
|
|
144
139
|
e.size > 0 && (this._$Ep = e);
|
|
145
140
|
}
|
|
146
141
|
createRenderRoot() {
|
|
@@ -155,42 +150,42 @@ let B = class extends HTMLElement {
|
|
|
155
150
|
disconnectedCallback() {
|
|
156
151
|
this._$EO?.forEach((e) => e.hostDisconnected?.());
|
|
157
152
|
}
|
|
158
|
-
attributeChangedCallback(e,
|
|
159
|
-
this._$AK(e,
|
|
153
|
+
attributeChangedCallback(e, o, s) {
|
|
154
|
+
this._$AK(e, s);
|
|
160
155
|
}
|
|
161
|
-
_$ET(e,
|
|
162
|
-
const
|
|
163
|
-
if (r !== void 0 &&
|
|
164
|
-
const i = (
|
|
156
|
+
_$ET(e, o) {
|
|
157
|
+
const s = this.constructor.elementProperties.get(e), r = this.constructor._$Eu(e, s);
|
|
158
|
+
if (r !== void 0 && s.reflect === !0) {
|
|
159
|
+
const i = (s.converter?.toAttribute !== void 0 ? s.converter : X).toAttribute(o, s.type);
|
|
165
160
|
this._$Em = e, i == null ? this.removeAttribute(r) : this.setAttribute(r, i), this._$Em = null;
|
|
166
161
|
}
|
|
167
162
|
}
|
|
168
|
-
_$AK(e,
|
|
169
|
-
const
|
|
163
|
+
_$AK(e, o) {
|
|
164
|
+
const s = this.constructor, r = s._$Eh.get(e);
|
|
170
165
|
if (r !== void 0 && this._$Em !== r) {
|
|
171
|
-
const i =
|
|
166
|
+
const i = s.getPropertyOptions(r), n = typeof i.converter == "function" ? { fromAttribute: i.converter } : i.converter?.fromAttribute !== void 0 ? i.converter : X;
|
|
172
167
|
this._$Em = r;
|
|
173
|
-
const l = n.fromAttribute(
|
|
168
|
+
const l = n.fromAttribute(o, i.type);
|
|
174
169
|
this[r] = l ?? this._$Ej?.get(r) ?? l, this._$Em = null;
|
|
175
170
|
}
|
|
176
171
|
}
|
|
177
|
-
requestUpdate(e,
|
|
172
|
+
requestUpdate(e, o, s, r = !1, i) {
|
|
178
173
|
if (e !== void 0) {
|
|
179
174
|
const n = this.constructor;
|
|
180
|
-
if (r === !1 && (i = this[e]),
|
|
181
|
-
this.C(e,
|
|
175
|
+
if (r === !1 && (i = this[e]), s ??= n.getPropertyOptions(e), !((s.hasChanged ?? re)(i, o) || s.useDefault && s.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(n._$Eu(e, s)))) return;
|
|
176
|
+
this.C(e, o, s);
|
|
182
177
|
}
|
|
183
178
|
this.isUpdatePending === !1 && (this._$ES = this._$EP());
|
|
184
179
|
}
|
|
185
|
-
C(e,
|
|
186
|
-
|
|
180
|
+
C(e, o, { useDefault: s, reflect: r, wrapped: i }, n) {
|
|
181
|
+
s && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(e) && (this._$Ej.set(e, n ?? o ?? this[e]), i !== !0 || n !== void 0) || (this._$AL.has(e) || (this.hasUpdated || s || (o = void 0), this._$AL.set(e, o)), r === !0 && this._$Em !== e && (this._$Eq ??= /* @__PURE__ */ new Set()).add(e));
|
|
187
182
|
}
|
|
188
183
|
async _$EP() {
|
|
189
184
|
this.isUpdatePending = !0;
|
|
190
185
|
try {
|
|
191
186
|
await this._$ES;
|
|
192
|
-
} catch (
|
|
193
|
-
Promise.reject(
|
|
187
|
+
} catch (o) {
|
|
188
|
+
Promise.reject(o);
|
|
194
189
|
}
|
|
195
190
|
const e = this.scheduleUpdate();
|
|
196
191
|
return e != null && await e, !this.isUpdatePending;
|
|
@@ -205,25 +200,25 @@ let B = class extends HTMLElement {
|
|
|
205
200
|
for (const [r, i] of this._$Ep) this[r] = i;
|
|
206
201
|
this._$Ep = void 0;
|
|
207
202
|
}
|
|
208
|
-
const
|
|
209
|
-
if (
|
|
203
|
+
const s = this.constructor.elementProperties;
|
|
204
|
+
if (s.size > 0) for (const [r, i] of s) {
|
|
210
205
|
const { wrapped: n } = i, l = this[r];
|
|
211
206
|
n !== !0 || this._$AL.has(r) || l === void 0 || this.C(r, void 0, i, l);
|
|
212
207
|
}
|
|
213
208
|
}
|
|
214
209
|
let e = !1;
|
|
215
|
-
const
|
|
210
|
+
const o = this._$AL;
|
|
216
211
|
try {
|
|
217
|
-
e = this.shouldUpdate(
|
|
218
|
-
} catch (
|
|
219
|
-
throw e = !1, this._$EM(),
|
|
212
|
+
e = this.shouldUpdate(o), e ? (this.willUpdate(o), this._$EO?.forEach((s) => s.hostUpdate?.()), this.update(o)) : this._$EM();
|
|
213
|
+
} catch (s) {
|
|
214
|
+
throw e = !1, this._$EM(), s;
|
|
220
215
|
}
|
|
221
|
-
e && this._$AE(
|
|
216
|
+
e && this._$AE(o);
|
|
222
217
|
}
|
|
223
218
|
willUpdate(e) {
|
|
224
219
|
}
|
|
225
220
|
_$AE(e) {
|
|
226
|
-
this._$EO?.forEach((
|
|
221
|
+
this._$EO?.forEach((o) => o.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
|
|
227
222
|
}
|
|
228
223
|
_$EM() {
|
|
229
224
|
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
|
|
@@ -238,7 +233,7 @@ let B = class extends HTMLElement {
|
|
|
238
233
|
return !0;
|
|
239
234
|
}
|
|
240
235
|
update(e) {
|
|
241
|
-
this._$Eq &&= this._$Eq.forEach((
|
|
236
|
+
this._$Eq &&= this._$Eq.forEach((o) => this._$ET(o, this[o])), this._$EM();
|
|
242
237
|
}
|
|
243
238
|
updated(e) {
|
|
244
239
|
}
|
|
@@ -246,11 +241,11 @@ let B = class extends HTMLElement {
|
|
|
246
241
|
}
|
|
247
242
|
};
|
|
248
243
|
B.elementStyles = [], B.shadowRootOptions = { mode: "open" }, B[U("elementProperties")] = /* @__PURE__ */ new Map(), B[U("finalized")] = /* @__PURE__ */ new Map(), Ne?.({ ReactiveElement: B }), (Q.reactiveElementVersions ??= []).push("2.1.2");
|
|
249
|
-
const Ue = { attribute: !0, type: String, converter: X, reflect: !1, hasChanged: re },
|
|
250
|
-
const { kind:
|
|
244
|
+
const Ue = { attribute: !0, type: String, converter: X, reflect: !1, hasChanged: re }, Fe = (t = Ue, e, o) => {
|
|
245
|
+
const { kind: s, metadata: r } = o;
|
|
251
246
|
let i = globalThis.litPropertyMetadata.get(r);
|
|
252
|
-
if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()),
|
|
253
|
-
const { name: n } =
|
|
247
|
+
if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), s === "setter" && ((t = Object.create(t)).wrapped = !0), i.set(o.name, t), s === "accessor") {
|
|
248
|
+
const { name: n } = o;
|
|
254
249
|
return { set(l) {
|
|
255
250
|
const a = e.get.call(this);
|
|
256
251
|
e.set.call(this, l), this.requestUpdate(n, a, t, !0, l);
|
|
@@ -258,50 +253,50 @@ const Ue = { attribute: !0, type: String, converter: X, reflect: !1, hasChanged:
|
|
|
258
253
|
return l !== void 0 && this.C(n, void 0, t, l), l;
|
|
259
254
|
} };
|
|
260
255
|
}
|
|
261
|
-
if (
|
|
262
|
-
const { name: n } =
|
|
256
|
+
if (s === "setter") {
|
|
257
|
+
const { name: n } = o;
|
|
263
258
|
return function(l) {
|
|
264
259
|
const a = this[n];
|
|
265
260
|
e.call(this, l), this.requestUpdate(n, a, t, !0, l);
|
|
266
261
|
};
|
|
267
262
|
}
|
|
268
|
-
throw Error("Unsupported decorator location: " +
|
|
263
|
+
throw Error("Unsupported decorator location: " + s);
|
|
269
264
|
};
|
|
270
265
|
function h(t) {
|
|
271
|
-
return (e,
|
|
266
|
+
return (e, o) => typeof o == "object" ? Fe(t, e, o) : ((s, r, i) => {
|
|
272
267
|
const n = r.hasOwnProperty(i);
|
|
273
|
-
return r.constructor.createProperty(i,
|
|
274
|
-
})(t, e,
|
|
268
|
+
return r.constructor.createProperty(i, s), n ? Object.getOwnPropertyDescriptor(r, i) : void 0;
|
|
269
|
+
})(t, e, o);
|
|
275
270
|
}
|
|
276
271
|
function w(t) {
|
|
277
272
|
return h({ ...t, state: !0, attribute: !1 });
|
|
278
273
|
}
|
|
279
|
-
const ie = globalThis, fe = (t) => t, G = ie.trustedTypes, be = G ? G.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, $e = "$lit$", A = `lit$${Math.random().toFixed(9).slice(2)}$`, xe = "?" + A,
|
|
274
|
+
const ie = globalThis, fe = (t) => t, G = ie.trustedTypes, be = G ? G.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, $e = "$lit$", A = `lit$${Math.random().toFixed(9).slice(2)}$`, xe = "?" + A, Le = `<${xe}>`, P = document, F = () => P.createComment(""), L = (t) => t === null || typeof t != "object" && typeof t != "function", ne = Array.isArray, ze = (t) => ne(t) || typeof t?.[Symbol.iterator] == "function", te = `[
|
|
280
275
|
\f\r]`, N = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, me = /-->/g, ge = />/g, S = RegExp(`>|${te}(?:([^\\s"'>=/]+)(${te}*=${te}*(?:[^
|
|
281
|
-
\f\r"'\`<>=]|("|')|))|$)`, "g"), ve = /'/g, _e = /"/g, ke = /^(?:script|style|textarea|title)$/i,
|
|
276
|
+
\f\r"'\`<>=]|("|')|))|$)`, "g"), ve = /'/g, _e = /"/g, ke = /^(?:script|style|textarea|title)$/i, je = (t) => (e, ...o) => ({ _$litType$: t, strings: e, values: o }), oe = je(1), M = /* @__PURE__ */ Symbol.for("lit-noChange"), b = /* @__PURE__ */ Symbol.for("lit-nothing"), ye = /* @__PURE__ */ new WeakMap(), C = P.createTreeWalker(P, 129);
|
|
282
277
|
function Ae(t, e) {
|
|
283
278
|
if (!ne(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
284
279
|
return be !== void 0 ? be.createHTML(e) : e;
|
|
285
280
|
}
|
|
286
281
|
const Ie = (t, e) => {
|
|
287
|
-
const
|
|
282
|
+
const o = t.length - 1, s = [];
|
|
288
283
|
let r, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = N;
|
|
289
|
-
for (let l = 0; l <
|
|
284
|
+
for (let l = 0; l < o; l++) {
|
|
290
285
|
const a = t[l];
|
|
291
286
|
let c, u, d = -1, $ = 0;
|
|
292
287
|
for (; $ < a.length && (n.lastIndex = $, u = n.exec(a), u !== null); ) $ = n.lastIndex, n === N ? u[1] === "!--" ? n = me : u[1] !== void 0 ? n = ge : u[2] !== void 0 ? (ke.test(u[2]) && (r = RegExp("</" + u[2], "g")), n = S) : u[3] !== void 0 && (n = S) : n === S ? u[0] === ">" ? (n = r ?? N, d = -1) : u[1] === void 0 ? d = -2 : (d = n.lastIndex - u[2].length, c = u[1], n = u[3] === void 0 ? S : u[3] === '"' ? _e : ve) : n === _e || n === ve ? n = S : n === me || n === ge ? n = N : (n = S, r = void 0);
|
|
293
288
|
const k = n === S && t[l + 1].startsWith("/>") ? " " : "";
|
|
294
|
-
i += n === N ? a +
|
|
289
|
+
i += n === N ? a + Le : d >= 0 ? (s.push(c), a.slice(0, d) + $e + a.slice(d) + A + k) : a + A + (d === -2 ? l : k);
|
|
295
290
|
}
|
|
296
|
-
return [Ae(t, i + (t[
|
|
291
|
+
return [Ae(t, i + (t[o] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
|
|
297
292
|
};
|
|
298
|
-
class
|
|
299
|
-
constructor({ strings: e, _$litType$:
|
|
293
|
+
class z {
|
|
294
|
+
constructor({ strings: e, _$litType$: o }, s) {
|
|
300
295
|
let r;
|
|
301
296
|
this.parts = [];
|
|
302
297
|
let i = 0, n = 0;
|
|
303
|
-
const l = e.length - 1, a = this.parts, [c, u] = Ie(e,
|
|
304
|
-
if (this.el =
|
|
298
|
+
const l = e.length - 1, a = this.parts, [c, u] = Ie(e, o);
|
|
299
|
+
if (this.el = z.createElement(c, s), C.currentNode = this.el.content, o === 2 || o === 3) {
|
|
305
300
|
const d = this.el.content.firstChild;
|
|
306
301
|
d.replaceWith(...d.childNodes);
|
|
307
302
|
}
|
|
@@ -315,8 +310,8 @@ class j {
|
|
|
315
310
|
const d = r.textContent.split(A), $ = d.length - 1;
|
|
316
311
|
if ($ > 0) {
|
|
317
312
|
r.textContent = G ? G.emptyScript : "";
|
|
318
|
-
for (let k = 0; k < $; k++) r.append(d[k],
|
|
319
|
-
r.append(d[$],
|
|
313
|
+
for (let k = 0; k < $; k++) r.append(d[k], F()), C.nextNode(), a.push({ type: 2, index: ++i });
|
|
314
|
+
r.append(d[$], F());
|
|
320
315
|
}
|
|
321
316
|
}
|
|
322
317
|
} else if (r.nodeType === 8) if (r.data === xe) a.push({ type: 2, index: i });
|
|
@@ -327,20 +322,20 @@ class j {
|
|
|
327
322
|
i++;
|
|
328
323
|
}
|
|
329
324
|
}
|
|
330
|
-
static createElement(e,
|
|
331
|
-
const
|
|
332
|
-
return
|
|
325
|
+
static createElement(e, o) {
|
|
326
|
+
const s = P.createElement("template");
|
|
327
|
+
return s.innerHTML = e, s;
|
|
333
328
|
}
|
|
334
329
|
}
|
|
335
|
-
function H(t, e,
|
|
336
|
-
if (e ===
|
|
337
|
-
let r =
|
|
338
|
-
const i =
|
|
339
|
-
return r?.constructor !== i && (r?._$AO?.(!1), i === void 0 ? r = void 0 : (r = new i(t), r._$AT(t,
|
|
330
|
+
function H(t, e, o = t, s) {
|
|
331
|
+
if (e === M) return e;
|
|
332
|
+
let r = s !== void 0 ? o._$Co?.[s] : o._$Cl;
|
|
333
|
+
const i = L(e) ? void 0 : e._$litDirective$;
|
|
334
|
+
return r?.constructor !== i && (r?._$AO?.(!1), i === void 0 ? r = void 0 : (r = new i(t), r._$AT(t, o, s)), s !== void 0 ? (o._$Co ??= [])[s] = r : o._$Cl = r), r !== void 0 && (e = H(t, r._$AS(t, e.values), r, s)), e;
|
|
340
335
|
}
|
|
341
336
|
class Re {
|
|
342
|
-
constructor(e,
|
|
343
|
-
this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM =
|
|
337
|
+
constructor(e, o) {
|
|
338
|
+
this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = o;
|
|
344
339
|
}
|
|
345
340
|
get parentNode() {
|
|
346
341
|
return this._$AM.parentNode;
|
|
@@ -349,34 +344,34 @@ class Re {
|
|
|
349
344
|
return this._$AM._$AU;
|
|
350
345
|
}
|
|
351
346
|
u(e) {
|
|
352
|
-
const { el: { content:
|
|
347
|
+
const { el: { content: o }, parts: s } = this._$AD, r = (e?.creationScope ?? P).importNode(o, !0);
|
|
353
348
|
C.currentNode = r;
|
|
354
|
-
let i = C.nextNode(), n = 0, l = 0, a =
|
|
349
|
+
let i = C.nextNode(), n = 0, l = 0, a = s[0];
|
|
355
350
|
for (; a !== void 0; ) {
|
|
356
351
|
if (n === a.index) {
|
|
357
352
|
let c;
|
|
358
|
-
a.type === 2 ? c = new q(i, i.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(i, a.name, a.strings, this, e) : a.type === 6 && (c = new Ze(i, this, e)), this._$AV.push(c), a =
|
|
353
|
+
a.type === 2 ? c = new q(i, i.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(i, a.name, a.strings, this, e) : a.type === 6 && (c = new Ze(i, this, e)), this._$AV.push(c), a = s[++l];
|
|
359
354
|
}
|
|
360
355
|
n !== a?.index && (i = C.nextNode(), n++);
|
|
361
356
|
}
|
|
362
357
|
return C.currentNode = P, r;
|
|
363
358
|
}
|
|
364
359
|
p(e) {
|
|
365
|
-
let
|
|
366
|
-
for (const
|
|
360
|
+
let o = 0;
|
|
361
|
+
for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(e, s, o), o += s.strings.length - 2) : s._$AI(e[o])), o++;
|
|
367
362
|
}
|
|
368
363
|
}
|
|
369
364
|
class q {
|
|
370
365
|
get _$AU() {
|
|
371
366
|
return this._$AM?._$AU ?? this._$Cv;
|
|
372
367
|
}
|
|
373
|
-
constructor(e,
|
|
374
|
-
this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = e, this._$AB =
|
|
368
|
+
constructor(e, o, s, r) {
|
|
369
|
+
this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = e, this._$AB = o, this._$AM = s, this.options = r, this._$Cv = r?.isConnected ?? !0;
|
|
375
370
|
}
|
|
376
371
|
get parentNode() {
|
|
377
372
|
let e = this._$AA.parentNode;
|
|
378
|
-
const
|
|
379
|
-
return
|
|
373
|
+
const o = this._$AM;
|
|
374
|
+
return o !== void 0 && e?.nodeType === 11 && (e = o.parentNode), e;
|
|
380
375
|
}
|
|
381
376
|
get startNode() {
|
|
382
377
|
return this._$AA;
|
|
@@ -384,8 +379,8 @@ class q {
|
|
|
384
379
|
get endNode() {
|
|
385
380
|
return this._$AB;
|
|
386
381
|
}
|
|
387
|
-
_$AI(e,
|
|
388
|
-
e = H(this, e,
|
|
382
|
+
_$AI(e, o = this) {
|
|
383
|
+
e = H(this, e, o), L(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== M && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : ze(e) ? this.k(e) : this._(e);
|
|
389
384
|
}
|
|
390
385
|
O(e) {
|
|
391
386
|
return this._$AA.parentNode.insertBefore(e, this._$AB);
|
|
@@ -394,31 +389,31 @@ class q {
|
|
|
394
389
|
this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
|
|
395
390
|
}
|
|
396
391
|
_(e) {
|
|
397
|
-
this._$AH !== b &&
|
|
392
|
+
this._$AH !== b && L(this._$AH) ? this._$AA.nextSibling.data = e : this.T(P.createTextNode(e)), this._$AH = e;
|
|
398
393
|
}
|
|
399
394
|
$(e) {
|
|
400
|
-
const { values:
|
|
401
|
-
if (this._$AH?._$AD === r) this._$AH.p(
|
|
395
|
+
const { values: o, _$litType$: s } = e, r = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = z.createElement(Ae(s.h, s.h[0]), this.options)), s);
|
|
396
|
+
if (this._$AH?._$AD === r) this._$AH.p(o);
|
|
402
397
|
else {
|
|
403
398
|
const i = new Re(r, this), n = i.u(this.options);
|
|
404
|
-
i.p(
|
|
399
|
+
i.p(o), this.T(n), this._$AH = i;
|
|
405
400
|
}
|
|
406
401
|
}
|
|
407
402
|
_$AC(e) {
|
|
408
|
-
let
|
|
409
|
-
return
|
|
403
|
+
let o = ye.get(e.strings);
|
|
404
|
+
return o === void 0 && ye.set(e.strings, o = new z(e)), o;
|
|
410
405
|
}
|
|
411
406
|
k(e) {
|
|
412
407
|
ne(this._$AH) || (this._$AH = [], this._$AR());
|
|
413
|
-
const
|
|
414
|
-
let
|
|
415
|
-
for (const i of e) r ===
|
|
416
|
-
r <
|
|
417
|
-
}
|
|
418
|
-
_$AR(e = this._$AA.nextSibling,
|
|
419
|
-
for (this._$AP?.(!1, !0,
|
|
420
|
-
const
|
|
421
|
-
fe(e).remove(), e =
|
|
408
|
+
const o = this._$AH;
|
|
409
|
+
let s, r = 0;
|
|
410
|
+
for (const i of e) r === o.length ? o.push(s = new q(this.O(F()), this.O(F()), this, this.options)) : s = o[r], s._$AI(i), r++;
|
|
411
|
+
r < o.length && (this._$AR(s && s._$AB.nextSibling, r), o.length = r);
|
|
412
|
+
}
|
|
413
|
+
_$AR(e = this._$AA.nextSibling, o) {
|
|
414
|
+
for (this._$AP?.(!1, !0, o); e !== this._$AB; ) {
|
|
415
|
+
const s = fe(e).nextSibling;
|
|
416
|
+
fe(e).remove(), e = s;
|
|
422
417
|
}
|
|
423
418
|
}
|
|
424
419
|
setConnected(e) {
|
|
@@ -432,17 +427,17 @@ class ee {
|
|
|
432
427
|
get _$AU() {
|
|
433
428
|
return this._$AM._$AU;
|
|
434
429
|
}
|
|
435
|
-
constructor(e,
|
|
436
|
-
this.type = 1, this._$AH = b, this._$AN = void 0, this.element = e, this.name =
|
|
430
|
+
constructor(e, o, s, r, i) {
|
|
431
|
+
this.type = 1, this._$AH = b, this._$AN = void 0, this.element = e, this.name = o, this._$AM = r, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = b;
|
|
437
432
|
}
|
|
438
|
-
_$AI(e,
|
|
433
|
+
_$AI(e, o = this, s, r) {
|
|
439
434
|
const i = this.strings;
|
|
440
435
|
let n = !1;
|
|
441
|
-
if (i === void 0) e = H(this, e,
|
|
436
|
+
if (i === void 0) e = H(this, e, o, 0), n = !L(e) || e !== this._$AH && e !== M, n && (this._$AH = e);
|
|
442
437
|
else {
|
|
443
438
|
const l = e;
|
|
444
439
|
let a, c;
|
|
445
|
-
for (e = i[0], a = 0; a < i.length - 1; a++) c = H(this, l[
|
|
440
|
+
for (e = i[0], a = 0; a < i.length - 1; a++) c = H(this, l[s + a], o, a), c === M && (c = this._$AH[a]), n ||= !L(c) || c !== this._$AH[a], c === b ? e = b : e !== b && (e += (c ?? "") + i[a + 1]), this._$AH[a] = c;
|
|
446
441
|
}
|
|
447
442
|
n && !r && this.j(e);
|
|
448
443
|
}
|
|
@@ -467,21 +462,21 @@ class We extends ee {
|
|
|
467
462
|
}
|
|
468
463
|
}
|
|
469
464
|
class Ke extends ee {
|
|
470
|
-
constructor(e,
|
|
471
|
-
super(e,
|
|
465
|
+
constructor(e, o, s, r, i) {
|
|
466
|
+
super(e, o, s, r, i), this.type = 5;
|
|
472
467
|
}
|
|
473
|
-
_$AI(e,
|
|
474
|
-
if ((e = H(this, e,
|
|
475
|
-
const
|
|
476
|
-
r && this.element.removeEventListener(this.name, this,
|
|
468
|
+
_$AI(e, o = this) {
|
|
469
|
+
if ((e = H(this, e, o, 0) ?? b) === M) return;
|
|
470
|
+
const s = this._$AH, r = e === b && s !== b || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, i = e !== b && (s === b || r);
|
|
471
|
+
r && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
|
|
477
472
|
}
|
|
478
473
|
handleEvent(e) {
|
|
479
474
|
typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
|
|
480
475
|
}
|
|
481
476
|
}
|
|
482
477
|
class Ze {
|
|
483
|
-
constructor(e,
|
|
484
|
-
this.element = e, this.type = 6, this._$AN = void 0, this._$AM =
|
|
478
|
+
constructor(e, o, s) {
|
|
479
|
+
this.element = e, this.type = 6, this._$AN = void 0, this._$AM = o, this.options = s;
|
|
485
480
|
}
|
|
486
481
|
get _$AU() {
|
|
487
482
|
return this._$AM._$AU;
|
|
@@ -491,13 +486,13 @@ class Ze {
|
|
|
491
486
|
}
|
|
492
487
|
}
|
|
493
488
|
const Ye = ie.litHtmlPolyfillSupport;
|
|
494
|
-
Ye?.(
|
|
495
|
-
const Xe = (t, e,
|
|
496
|
-
const
|
|
497
|
-
let r =
|
|
489
|
+
Ye?.(z, q), (ie.litHtmlVersions ??= []).push("3.3.2");
|
|
490
|
+
const Xe = (t, e, o) => {
|
|
491
|
+
const s = o?.renderBefore ?? e;
|
|
492
|
+
let r = s._$litPart$;
|
|
498
493
|
if (r === void 0) {
|
|
499
|
-
const i =
|
|
500
|
-
|
|
494
|
+
const i = o?.renderBefore ?? null;
|
|
495
|
+
s._$litPart$ = r = new q(e.insertBefore(F(), i), i, void 0, o ?? {});
|
|
501
496
|
}
|
|
502
497
|
return r._$AI(t), r;
|
|
503
498
|
};
|
|
@@ -511,8 +506,8 @@ let V = class extends B {
|
|
|
511
506
|
return this.renderOptions.renderBefore ??= e.firstChild, e;
|
|
512
507
|
}
|
|
513
508
|
update(e) {
|
|
514
|
-
const
|
|
515
|
-
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Xe(
|
|
509
|
+
const o = this.render();
|
|
510
|
+
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Xe(o, this.renderRoot, this.renderOptions);
|
|
516
511
|
}
|
|
517
512
|
connectedCallback() {
|
|
518
513
|
super.connectedCallback(), this._$Do?.setConnected(!0);
|
|
@@ -521,20 +516,20 @@ let V = class extends B {
|
|
|
521
516
|
super.disconnectedCallback(), this._$Do?.setConnected(!1);
|
|
522
517
|
}
|
|
523
518
|
render() {
|
|
524
|
-
return
|
|
519
|
+
return M;
|
|
525
520
|
}
|
|
526
521
|
};
|
|
527
522
|
V._$litElement$ = !0, V.finalized = !0, ae.litElementHydrateSupport?.({ LitElement: V });
|
|
528
523
|
const Ge = ae.litElementPolyfillSupport;
|
|
529
524
|
Ge?.({ LitElement: V });
|
|
530
525
|
(ae.litElementVersions ??= []).push("4.2.2");
|
|
531
|
-
const Je = E`:host{cursor:pointer;-webkit-user-select:none;user-select:none;width:calc(1rem + 2px);height:calc(1rem + 2px)}:host([disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{position:relative;transition:opacity .2s ease}.checkbox-box{width:1rem;height:1rem;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(--nf-primary-color))}:host([checked]) .checkbox-box{background-color:var(--nf-primary-color,var(--nf-primary-color));border-color:var(--nf-primary-color,var(--nf-primary-color))}:host([disabled]) .checkbox-box{border-color:#fffc;background:#fffc;cursor:not-allowed;pointer-events:none}:host([disabled][checked]) .checkbox-box{background-color:#fffc;border-color:#fffc}.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(--nf-primary-color));outline-offset:.125rem}
|
|
532
|
-
var Qe = Object.defineProperty, et = Object.getOwnPropertyDescriptor, le = (t, e,
|
|
533
|
-
for (var r =
|
|
534
|
-
(n = t[i]) && (r = (
|
|
535
|
-
return
|
|
526
|
+
const Je = E`:host{cursor:pointer;-webkit-user-select:none;user-select:none;width:calc(1rem + 2px);height:calc(1rem + 2px)}:host([disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{position:relative;transition:opacity .2s ease}.checkbox-box{width:1rem;height:1rem;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(--nf-primary-color))}:host([checked]) .checkbox-box{background-color:var(--nf-primary-color,var(--nf-primary-color));border-color:var(--nf-primary-color,var(--nf-primary-color))}:host([disabled]) .checkbox-box{border-color:#fffc;background:#fffc;cursor:not-allowed;pointer-events:none}:host([disabled][checked]) .checkbox-box{background-color:#fffc;border-color:#fffc}.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(--nf-primary-color));outline-offset:.125rem}`, T = (t) => (e) => (typeof window > "u" || customElements.get(t) || customElements.define(t, e), e);
|
|
527
|
+
var Qe = Object.defineProperty, et = Object.getOwnPropertyDescriptor, le = (t, e, o, s) => {
|
|
528
|
+
for (var r = s > 1 ? void 0 : s ? et(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
529
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
530
|
+
return s && r && Qe(e, o, r), r;
|
|
536
531
|
};
|
|
537
|
-
let
|
|
532
|
+
let j = class extends V {
|
|
538
533
|
constructor() {
|
|
539
534
|
super(...arguments), this.checked = !1, this.disabled = !1;
|
|
540
535
|
}
|
|
@@ -550,7 +545,7 @@ let z = class extends V {
|
|
|
550
545
|
}
|
|
551
546
|
// 渲染复选框组件
|
|
552
547
|
render() {
|
|
553
|
-
return
|
|
548
|
+
return oe`<div class=checkbox-container @click=${this.toggleCheckbox} aria-checked=${this.checked} aria-disabled=${this.disabled} role=checkbox><div class=checkbox-box>${this.checked ? oe`<div class=checkbox-icon><svg viewBox="64 64 896 896"focusable=false data-icon=check width=0.625rem height=0.625rem fill=currentColor aria-hidden=true><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
549
|
}
|
|
555
550
|
connectedCallback() {
|
|
556
551
|
this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
|
|
@@ -558,62 +553,62 @@ let z = class extends V {
|
|
|
558
553
|
});
|
|
559
554
|
}
|
|
560
555
|
};
|
|
561
|
-
|
|
556
|
+
j.styles = [Je];
|
|
562
557
|
le([
|
|
563
558
|
h({ type: Boolean, reflect: !0 })
|
|
564
|
-
],
|
|
559
|
+
], j.prototype, "checked", 2);
|
|
565
560
|
le([
|
|
566
561
|
h({ type: Boolean, reflect: !0 })
|
|
567
|
-
],
|
|
568
|
-
|
|
562
|
+
], j.prototype, "disabled", 2);
|
|
563
|
+
j = le([
|
|
569
564
|
T("nf-checkbox")
|
|
570
|
-
],
|
|
571
|
-
const tt = { ATTRIBUTE: 1 },
|
|
572
|
-
let
|
|
565
|
+
], j);
|
|
566
|
+
const tt = { ATTRIBUTE: 1 }, ot = (t) => (...e) => ({ _$litDirective$: t, values: e });
|
|
567
|
+
let st = class {
|
|
573
568
|
constructor(e) {
|
|
574
569
|
}
|
|
575
570
|
get _$AU() {
|
|
576
571
|
return this._$AM._$AU;
|
|
577
572
|
}
|
|
578
|
-
_$AT(e,
|
|
579
|
-
this._$Ct = e, this._$AM =
|
|
573
|
+
_$AT(e, o, s) {
|
|
574
|
+
this._$Ct = e, this._$AM = o, this._$Ci = s;
|
|
580
575
|
}
|
|
581
|
-
_$AS(e,
|
|
582
|
-
return this.update(e,
|
|
576
|
+
_$AS(e, o) {
|
|
577
|
+
return this.update(e, o);
|
|
583
578
|
}
|
|
584
|
-
update(e,
|
|
585
|
-
return this.render(...
|
|
579
|
+
update(e, o) {
|
|
580
|
+
return this.render(...o);
|
|
586
581
|
}
|
|
587
582
|
};
|
|
588
|
-
const Ee = "important", rt = " !" + Ee, J =
|
|
583
|
+
const Ee = "important", rt = " !" + Ee, J = ot(class extends st {
|
|
589
584
|
constructor(t) {
|
|
590
585
|
if (super(t), t.type !== tt.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.");
|
|
591
586
|
}
|
|
592
587
|
render(t) {
|
|
593
|
-
return Object.keys(t).reduce((e,
|
|
594
|
-
const
|
|
595
|
-
return
|
|
588
|
+
return Object.keys(t).reduce((e, o) => {
|
|
589
|
+
const s = t[o];
|
|
590
|
+
return s == null ? e : e + `${o = o.includes("-") ? o : o.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
|
|
596
591
|
}, "");
|
|
597
592
|
}
|
|
598
593
|
update(t, [e]) {
|
|
599
|
-
const { style:
|
|
594
|
+
const { style: o } = t.element;
|
|
600
595
|
if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
|
|
601
|
-
for (const
|
|
602
|
-
for (const
|
|
603
|
-
const r = e[
|
|
596
|
+
for (const s of this.ft) e[s] == null && (this.ft.delete(s), s.includes("-") ? o.removeProperty(s) : o[s] = null);
|
|
597
|
+
for (const s in e) {
|
|
598
|
+
const r = e[s];
|
|
604
599
|
if (r != null) {
|
|
605
|
-
this.ft.add(
|
|
600
|
+
this.ft.add(s);
|
|
606
601
|
const i = typeof r == "string" && r.endsWith(rt);
|
|
607
|
-
|
|
602
|
+
s.includes("-") || i ? o.setProperty(s, i ? r.slice(0, -11) : r, i ? Ee : "") : o[s] = r;
|
|
608
603
|
}
|
|
609
604
|
}
|
|
610
|
-
return
|
|
605
|
+
return M;
|
|
611
606
|
}
|
|
612
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:not([disabled])){border-color:var(--nf-border-color-hover);background:var(--nf-background-color-hover)}:host([disabled]){cursor:not-allowed;opacity:.6;pointer-events:auto}:host([disabled]:hover){border-color:var(--nf-border-color);background:var(--nf-background-color)}`, it = E`:host{display:inline-block;position:relative}:host([disabled]){cursor:not-allowed;opacity:.6}:host([disabled]:hover){border-color:var(--nf-border-color);background:var(--nf-background-color)}:host([open]){border-color:var(--nf-border-color-hover);box-shadow:0 0 0 .15rem var(--nf-box-shadow-color-focus)}.trigger{width:calc(100% + 1.5rem + 2px);height:calc(100% + 2px);margin:-1px -.75rem;padding:1px .75rem;box-sizing:border-box;display:flex;align-items:center;cursor:pointer;transition:all .2s;font-size:.875rem;position:relative}:host(:not([disabled])) .trigger:hover{border-color:var(--nf-color-primary)}.trigger[disabled]{cursor:not-allowed;opacity:.6}:host([disabled]) .trigger{cursor:not-allowed;color:var(--nf-color-disabled)}.color-block{width:1.25rem;height:1.25rem;border-radius:.125rem;margin-left:calc((var(--nf-height) - 1.25rem)/ 2 - .75rem);margin-right:.4rem}:host(.hide-text) .color-block{margin-right:calc((var(--nf-height) - 1.25rem)/ 2 - .75rem)}.color-text{flex:1}.panel{position:absolute;z-index:1000;background:var(--nf-color-picker-card-background,var(--nf-dropdown-background));-webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);border-radius:var(--nf-border-radius);box-shadow:0 6px 16px 0 var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow)),0 3px 6px -4px var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow)),0 9px 28px 8px var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow));-webkit-user-select:none;user-select:none}.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:.5rem}.slider-container:last-child{margin-bottom:0}.sliders-row{display:flex;align-items:center;gap:.75rem}.sliders{flex:1}.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;background-image:linear-gradient(45deg,var(--nf-color-picker-card-checker,#ccc) 25%,transparent 25%),linear-gradient(-45deg,var(--nf-color-picker-card-checker,#ccc) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--nf-color-picker-card-checker,#ccc) 75%),linear-gradient(-45deg,transparent 75%,var(--nf-color-picker-card-checker,#ccc) 75%);background-size:.375rem .375rem;background-position:0 0,0 .1875rem,.1875rem -.1875rem,-.1875rem 0;background-color:var(--nf-color-picker-card-checker-bg,#fff);border-radius:.375rem}.alpha-slider-input{position:relative;z-index:2}.alpha-gradient{position:absolute;inset:0;border-radius:.375rem}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}.current-color{width:2rem;height:2rem;border-radius:var(--nf-border-radius);border:.0625rem solid var(--nf-color-border)}:host(:not([disabled-alpha])) .current-color{width:2.5rem;height:2.5rem}`;
|
|
613
|
-
var nt = Object.defineProperty, at = Object.getOwnPropertyDescriptor, _ = (t, e,
|
|
614
|
-
for (var r =
|
|
615
|
-
(n = t[i]) && (r = (
|
|
616
|
-
return
|
|
608
|
+
var nt = Object.defineProperty, at = Object.getOwnPropertyDescriptor, _ = (t, e, o, s) => {
|
|
609
|
+
for (var r = s > 1 ? void 0 : s ? at(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
610
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
611
|
+
return s && r && nt(e, o, r), r;
|
|
617
612
|
};
|
|
618
613
|
let g = class extends R {
|
|
619
614
|
constructor() {
|
|
@@ -655,34 +650,34 @@ let g = class extends R {
|
|
|
655
650
|
}
|
|
656
651
|
// 从HEX颜色值更新HSB值
|
|
657
652
|
_updateHSBFromHex(t) {
|
|
658
|
-
const e = parseInt(t.slice(1, 3), 16) / 255,
|
|
653
|
+
const e = parseInt(t.slice(1, 3), 16) / 255, o = parseInt(t.slice(3, 5), 16) / 255, s = parseInt(t.slice(5, 7), 16) / 255, r = Math.max(e, o, s), i = Math.min(e, o, s), n = r - i;
|
|
659
654
|
let l = 0, a = 0;
|
|
660
655
|
const c = r;
|
|
661
|
-
n !== 0 && (a = n / r, r === e ? l = (
|
|
656
|
+
n !== 0 && (a = n / r, r === e ? l = (o - s) / n % 6 : r === o ? l = (s - e) / n + 2 : l = (e - o) / n + 4, l *= 60, l < 0 && (l += 360)), this._hsb = {
|
|
662
657
|
h: Math.round(l),
|
|
663
658
|
s: Math.round(a * 100),
|
|
664
659
|
b: Math.round(c * 100)
|
|
665
660
|
};
|
|
666
661
|
}
|
|
667
662
|
// 从HSB值生成HEX颜色值
|
|
668
|
-
_generateHexFromHSB(t, e,
|
|
669
|
-
e /= 100,
|
|
670
|
-
const r =
|
|
663
|
+
_generateHexFromHSB(t, e, o, s = "FF") {
|
|
664
|
+
e /= 100, o /= 100;
|
|
665
|
+
const r = o * e, i = r * (1 - Math.abs(t / 60 % 2 - 1)), n = o - r;
|
|
671
666
|
let l = 0, a = 0, c = 0;
|
|
672
|
-
return 0 <= t && t < 60 ? (l = r, a = i, c = 0) : 60 <= t && t < 120 ? (l = i, a = r, c = 0) : 120 <= t && t < 180 ? (l = 0, a = r, c = i) : 180 <= t && t < 240 ? (l = 0, a = i, c = r) : 240 <= t && t < 300 ? (l = i, a = 0, c = r) : 300 <= t && t < 360 && (l = r, a = 0, c = i), 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") +
|
|
667
|
+
return 0 <= t && t < 60 ? (l = r, a = i, c = 0) : 60 <= t && t < 120 ? (l = i, a = r, c = 0) : 120 <= t && t < 180 ? (l = 0, a = r, c = i) : 180 <= t && t < 240 ? (l = 0, a = i, c = r) : 240 <= t && t < 300 ? (l = i, a = 0, c = r) : 300 <= t && t < 360 && (l = r, a = 0, c = i), 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") + s;
|
|
673
668
|
}
|
|
674
669
|
// 计算面板位置
|
|
675
670
|
_updatePanelPosition() {
|
|
676
671
|
requestAnimationFrame(() => {
|
|
677
672
|
const t = this.getBoundingClientRect(), e = this.shadowRoot?.querySelector(".panel");
|
|
678
673
|
if (!e) return;
|
|
679
|
-
const
|
|
674
|
+
const o = 0.15 * 16, s = 8, r = e.offsetWidth || 240, i = e.offsetHeight || 300;
|
|
680
675
|
let n = this.placement, l = this.align;
|
|
681
|
-
this.autoAdjust && (n === "bottom" ? window.innerHeight - t.bottom -
|
|
676
|
+
this.autoAdjust && (n === "bottom" ? window.innerHeight - t.bottom - s < i && t.top - s >= i && (n = "top") : t.top - s < i && window.innerHeight - t.bottom - s >= i && (n = "bottom"), l === "right" ? t.right - o < r && t.left + t.width + o + r <= window.innerWidth && (l = "left") : t.left - o + r > window.innerWidth && t.right - o >= r && (l = "right"));
|
|
682
677
|
let a;
|
|
683
|
-
n === "bottom" ? a = t.height +
|
|
678
|
+
n === "bottom" ? a = t.height + s : a = -i - s;
|
|
684
679
|
let c;
|
|
685
|
-
l === "right" ? c = t.width - r +
|
|
680
|
+
l === "right" ? c = t.width - r + o : c = -o, this._panelPosition = { top: a, left: c };
|
|
686
681
|
});
|
|
687
682
|
}
|
|
688
683
|
// 打开面板
|
|
@@ -708,15 +703,15 @@ let g = class extends R {
|
|
|
708
703
|
this._panelVisible ? this._closePanel() : this._openPanel();
|
|
709
704
|
}
|
|
710
705
|
// 处理HSB颜色变化
|
|
711
|
-
_handleHSBChange(t, e,
|
|
712
|
-
this._hsb = { h: t, s: e, b:
|
|
713
|
-
const
|
|
706
|
+
_handleHSBChange(t, e, o) {
|
|
707
|
+
this._hsb = { h: t, s: e, b: o };
|
|
708
|
+
const s = this._internalValue.slice(7), r = this._generateHexFromHSB(t, e, o, s);
|
|
714
709
|
this._handleColorChange(r);
|
|
715
710
|
}
|
|
716
711
|
// 处理Alpha值变化
|
|
717
712
|
_handleAlphaChange(t) {
|
|
718
|
-
const e = Math.round(t * 255 / 100).toString(16).padStart(2, "0").toUpperCase(),
|
|
719
|
-
this._handleColorChange(
|
|
713
|
+
const e = Math.round(t * 255 / 100).toString(16).padStart(2, "0").toUpperCase(), o = "#" + this._internalValue.slice(1, 7) + e;
|
|
714
|
+
this._handleColorChange(o);
|
|
720
715
|
}
|
|
721
716
|
// 处理颜色变化
|
|
722
717
|
_handleColorChange(t) {
|
|
@@ -730,20 +725,20 @@ let g = class extends R {
|
|
|
730
725
|
}
|
|
731
726
|
// 处理色相选择
|
|
732
727
|
_handleHueChange(t) {
|
|
733
|
-
const e = t.target,
|
|
734
|
-
this._handleHSBChange(
|
|
728
|
+
const e = t.target, o = parseInt(e.value);
|
|
729
|
+
this._handleHSBChange(o, this._hsb.s, this._hsb.b);
|
|
735
730
|
}
|
|
736
731
|
// 处理饱和度和亮度选择
|
|
737
732
|
_handleSBChange(t) {
|
|
738
733
|
const e = this.shadowRoot?.querySelector(".color-sb");
|
|
739
734
|
if (!e) return;
|
|
740
|
-
const
|
|
735
|
+
const o = e.getBoundingClientRect(), s = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, r = t instanceof MouseEvent ? t.clientY : t.touches[0].clientY, i = Math.max(0, Math.min(100, Math.round((s - o.left) / o.width * 100))), n = Math.max(0, Math.min(100, Math.round((1 - (r - o.top) / o.height) * 100)));
|
|
741
736
|
this._handleHSBChange(this._hsb.h, i, n);
|
|
742
737
|
}
|
|
743
738
|
// 处理透明度选择
|
|
744
739
|
_handleAlphaChangeInput(t) {
|
|
745
|
-
const e = t.target,
|
|
746
|
-
this._handleAlphaChange(
|
|
740
|
+
const e = t.target, o = parseInt(e.value);
|
|
741
|
+
this._handleAlphaChange(o);
|
|
747
742
|
}
|
|
748
743
|
// 渲染触发器
|
|
749
744
|
_renderTrigger() {
|
|
@@ -764,7 +759,7 @@ let g = class extends R {
|
|
|
764
759
|
}
|
|
765
760
|
// 渲染颜色选择区域
|
|
766
761
|
_renderColorSelector() {
|
|
767
|
-
const t = this._generateHexFromHSB(this._hsb.h, 100, 100, "FF"), e = this._hsb.s / 100 * 100,
|
|
762
|
+
const t = this._generateHexFromHSB(this._hsb.h, 100, 100, "FF"), e = this._hsb.s / 100 * 100, o = (1 - this._hsb.b / 100) * 100;
|
|
768
763
|
return f`
|
|
769
764
|
<div class="color-selector">
|
|
770
765
|
<div
|
|
@@ -782,7 +777,7 @@ let g = class extends R {
|
|
|
782
777
|
class="selector"
|
|
783
778
|
style=${J({
|
|
784
779
|
left: `${e}%`,
|
|
785
|
-
top: `${
|
|
780
|
+
top: `${o}%`
|
|
786
781
|
})}
|
|
787
782
|
></div>
|
|
788
783
|
</div>
|
|
@@ -921,10 +916,10 @@ g = _([
|
|
|
921
916
|
T("nf-color-picker")
|
|
922
917
|
], g);
|
|
923
918
|
const lt = E`:host{width:var(--nf-width);position:relative;display:inline-block}:host([disabled]) .input{cursor:not-allowed;color:var(--nf-color-disabled)}:host([disabled]) .toggle-password{cursor:not-allowed;pointer-events:none;opacity:.5}::slotted(*){position:absolute;top:50%;left:.75rem;transform:translateY(-50%);color:var(--nf-color)}:host([disabled]) ::slotted(*){color:var(--nf-color-disabled)}.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}`;
|
|
924
|
-
var ht = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, O = (t, e,
|
|
925
|
-
for (var r =
|
|
926
|
-
(n = t[i]) && (r = (
|
|
927
|
-
return
|
|
919
|
+
var ht = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, O = (t, e, o, s) => {
|
|
920
|
+
for (var r = s > 1 ? void 0 : s ? ct(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
921
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
922
|
+
return s && r && ht(e, o, r), r;
|
|
928
923
|
};
|
|
929
924
|
let x = class extends R {
|
|
930
925
|
constructor() {
|
|
@@ -1008,20 +1003,28 @@ O([
|
|
|
1008
1003
|
x = O([
|
|
1009
1004
|
T("nf-input")
|
|
1010
1005
|
], x);
|
|
1011
|
-
const dt = E`:host{width:
|
|
1012
|
-
var ut = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, m = (t, e,
|
|
1013
|
-
for (var r =
|
|
1014
|
-
(n = t[i]) && (r = (
|
|
1015
|
-
return
|
|
1006
|
+
const dt = E`:host{width:10rem;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0;overflow:hidden}.input-number{position:relative;padding-right:.6125rem;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;transition:padding-right var(--nf-transition-fast) ease}.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;padding: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-number::-webkit-inner-spin-button,.input-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-number[type=number]{appearance:textfield}:host([controls]) .input-number:hover{padding-right:1.5rem}:host([controls]) .input-number:hover .controls{width:1.5rem}:host([center]) .input-number{padding-left:1.5rem!important;padding-right:1.5rem!important}:host([center]) .input-number .input-number-input{text-align:center}:host([center]) .input-number:hover{padding-left:1.5rem!important;padding-right:1.5rem!important}:host([center]) .input-prefix{position:absolute;left:0;top:0;bottom:0;z-index:1;pointer-events:none}:host([center]) .input-suffix{position:absolute;right:0;top:0;bottom:0;z-index:1;pointer-events:none}:host([center]) .input-number{flex:1;width:100%}.input-prefix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-inline-start:.6125rem;color:var(--nf-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-prefix:not(:empty){padding-inline-end:.25rem}.input-suffix{display:flex;align-items:center;justify-content:center;color:var(--nf-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-suffix:not(:empty){padding-inline-end:.6125rem;padding-inline-start:.5rem}.controls{position:absolute;top:0;right:0;height:100%;width:0;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;transition:width var(--nf-transition-fast) ease}.controls:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}:host([suffix]) .controls:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}.control-btn{flex:1;display:flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;transition:background-color var(--nf-transition-fast) ease;outline:0;-webkit-user-select:none;user-select:none}.control-btn:hover{background-color:var(--nf-control-btn-background-hover)}.control-btn:active{background-color:var(--nf-control-btn-background-active)}.control-btn:focus-visible{background-color:var(--nf-control-btn-background-hover)}.control-btn svg{display:block;pointer-events:none;fill:none;stroke:var(--nf-select-icon-color);stroke-width:1;stroke-linecap:round}.control-btn-up{border-bottom:.67px solid var(--nf-control-divider-color)}:host(:not([suffix])) .control-btn-up{border-top-right-radius:var(--nf-border-radius)}:host(:not([suffix])) .control-btn-down{border-bottom-right-radius:var(--nf-border-radius)}:host([disabled]) .input-number-input{cursor:not-allowed;color:var(--nf-color-disabled)}:host([disabled]) .input-prefix,:host([disabled]) .input-suffix{color:var(--nf-color-disabled)}:host([disabled]) .controls{display:none}:host([disabled]) .control-btn{cursor:not-allowed;pointer-events:none;opacity:.5}`;
|
|
1007
|
+
var ut = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, m = (t, e, o, s) => {
|
|
1008
|
+
for (var r = s > 1 ? void 0 : s ? pt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
1009
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
1010
|
+
return s && r && ut(e, o, r), r;
|
|
1016
1011
|
};
|
|
1017
1012
|
let p = class extends R {
|
|
1018
1013
|
constructor() {
|
|
1019
|
-
super(...arguments), this.value = 0, this.formatter = (t) =>
|
|
1014
|
+
super(...arguments), this.value = 0, this.formatter = (t) => {
|
|
1015
|
+
if (t === null) return "";
|
|
1016
|
+
const e = String(t);
|
|
1017
|
+
return e.includes("e") ? t.toLocaleString("en", {
|
|
1018
|
+
useGrouping: !1,
|
|
1019
|
+
maximumFractionDigits: 20,
|
|
1020
|
+
minimumFractionDigits: 0
|
|
1021
|
+
}) : e;
|
|
1022
|
+
}, this.parser = (t) => {
|
|
1020
1023
|
if (t.trim().length == 0 || t.endsWith("."))
|
|
1021
1024
|
return null;
|
|
1022
1025
|
const e = Number(t);
|
|
1023
1026
|
return Number.isNaN(e) ? null : this.clampValue(e);
|
|
1024
|
-
}, this.prefix = "", this.suffix = "", this.controls = !0, this.step = 1, this.min = null, this.max = null, this.changeOnWheel = !0, this.disabled = !1, this.noDecimal = !1, this.noZero = !1, this.noNegative = !1, this.text = "", this.isTyping = !1, this.isFocused = !1;
|
|
1027
|
+
}, this.prefix = "", this.suffix = "", this.controls = !0, this.step = 1, this.min = null, this.max = null, this.changeOnWheel = !0, this.disabled = !1, this.noDecimal = !1, this.noZero = !1, this.noNegative = !1, this.center = !1, this.text = "", this.isTyping = !1, this.isFocused = !1;
|
|
1025
1028
|
}
|
|
1026
1029
|
// 对解析结果进行额外验证
|
|
1027
1030
|
validateParsed(t) {
|
|
@@ -1032,13 +1035,17 @@ let p = class extends R {
|
|
|
1032
1035
|
setText(t) {
|
|
1033
1036
|
let e = t;
|
|
1034
1037
|
if (e = e.replace(/[^0-9+.\-]/g, ""), this.noNegative && (e = e.replace(/[+\-]/g, "")), this.noDecimal && e.includes(".")) {
|
|
1035
|
-
const
|
|
1036
|
-
Number.isNaN(
|
|
1038
|
+
const o = Number(e);
|
|
1039
|
+
Number.isNaN(o) ? e = e.replace(/\./g, "") : e = String(Math.round(o));
|
|
1037
1040
|
}
|
|
1038
1041
|
return this.text = e, e === t;
|
|
1039
1042
|
}
|
|
1040
1043
|
/* ================== 生命周期 ================== */
|
|
1041
1044
|
willUpdate(t) {
|
|
1045
|
+
if (this.center && this.suffix && this.controls)
|
|
1046
|
+
throw new Error(
|
|
1047
|
+
"[nf-input-number] center 模式下不允许同时开启 suffix 和 controls,请关闭其中一个。"
|
|
1048
|
+
);
|
|
1042
1049
|
t.has("value") && !this.isTyping && this.setText(this.formatter(this.value));
|
|
1043
1050
|
}
|
|
1044
1051
|
/* ================== 事件处理 ================== */
|
|
@@ -1088,12 +1095,12 @@ let p = class extends R {
|
|
|
1088
1095
|
if (e === null)
|
|
1089
1096
|
return;
|
|
1090
1097
|
this.value = e;
|
|
1091
|
-
let
|
|
1092
|
-
|
|
1093
|
-
const
|
|
1094
|
-
|
|
1098
|
+
let o = this.fixFloatingPoint(this.value + t * this.step);
|
|
1099
|
+
o = this.clampValue(o);
|
|
1100
|
+
const s = this.validateParsed(o);
|
|
1101
|
+
s !== null && (o = s, o !== this.value && (this.value = o, this.setText(this.formatter(o)), this.dispatchEvent(
|
|
1095
1102
|
new CustomEvent("change", {
|
|
1096
|
-
detail:
|
|
1103
|
+
detail: o
|
|
1097
1104
|
})
|
|
1098
1105
|
)));
|
|
1099
1106
|
}
|
|
@@ -1104,7 +1111,7 @@ let p = class extends R {
|
|
|
1104
1111
|
}
|
|
1105
1112
|
/* ================== Render ================== */
|
|
1106
1113
|
render() {
|
|
1107
|
-
return f`<div class=input-prefix>${this.prefix}</div><div class=input-number><div class=input-number-input-wrapper><input class=input-number-input .value=${this.text} ?disabled=${this.disabled} @blur=${this.onBlur} @focus=${this.onFocus} @input=${this.onInput} @keydown=${this.onKeyDown} @wheel=${this.onWheel} @keyup=${this.onKeyUp}></div>${this.controls ? f`<div class=controls><button class="control-btn control-btn-up"type=button ?disabled=${this.disabled} @click=${() => this.handleStepChange(1)} aria-label="Increase value"><svg width=12 height=12 viewBox="0 0 24 24"><path d="M6 14.6l6-6.6 6 6.6"/></svg></button><button class="control-btn control-btn-down"type=button ?disabled=${this.disabled} @click=${() => this.handleStepChange(-1)} aria-label="Decrease value"><svg width=12 height=12 viewBox="0 0 24 24"><path d="M18 9.4l-6 6.6-6-6.6"/></svg></button></div>` : ""}</div>${this.suffix ? f`<div class=input-suffix>${this.suffix}</div>` : ""}`;
|
|
1114
|
+
return f`<div class=input-prefix>${this.prefix}</div><div class=input-number><div class=input-number-input-wrapper><input inputmode=decimal class=input-number-input .value=${this.text} ?disabled=${this.disabled} @blur=${this.onBlur} @focus=${this.onFocus} @input=${this.onInput} @keydown=${this.onKeyDown} @wheel=${this.onWheel} @keyup=${this.onKeyUp}></div>${this.controls ? f`<div class=controls><button class="control-btn control-btn-up"type=button ?disabled=${this.disabled} @click=${() => this.handleStepChange(1)} aria-label="Increase value"><svg width=12 height=12 viewBox="0 0 24 24"><path d="M6 14.6l6-6.6 6 6.6"/></svg></button><button class="control-btn control-btn-down"type=button ?disabled=${this.disabled} @click=${() => this.handleStepChange(-1)} aria-label="Decrease value"><svg width=12 height=12 viewBox="0 0 24 24"><path d="M18 9.4l-6 6.6-6-6.6"/></svg></button></div>` : ""}</div>${this.suffix ? f`<div class=input-suffix>${this.suffix}</div>` : ""}`;
|
|
1108
1115
|
}
|
|
1109
1116
|
};
|
|
1110
1117
|
p.styles = [W, dt];
|
|
@@ -1126,6 +1133,7 @@ m([
|
|
|
1126
1133
|
m([
|
|
1127
1134
|
h({
|
|
1128
1135
|
type: Boolean,
|
|
1136
|
+
reflect: !0,
|
|
1129
1137
|
converter: {
|
|
1130
1138
|
fromAttribute: (t) => t !== "false" && t !== null,
|
|
1131
1139
|
toAttribute: (t) => t ? "" : null
|
|
@@ -1163,6 +1171,9 @@ m([
|
|
|
1163
1171
|
m([
|
|
1164
1172
|
h({ type: Boolean, attribute: "no-negative" })
|
|
1165
1173
|
], p.prototype, "noNegative", 2);
|
|
1174
|
+
m([
|
|
1175
|
+
h({ type: Boolean, reflect: !0 })
|
|
1176
|
+
], p.prototype, "center", 2);
|
|
1166
1177
|
m([
|
|
1167
1178
|
w()
|
|
1168
1179
|
], p.prototype, "text", 2);
|
|
@@ -1176,12 +1187,12 @@ async function ft(t) {
|
|
|
1176
1187
|
return new Promise((e) => setTimeout(e, t));
|
|
1177
1188
|
}
|
|
1178
1189
|
const bt = E`:host{width:var(--nf-width);-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:1000;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([disabled]){cursor:not-allowed}:host([disabled]) .text{color:var(--nf-color-disabled)}:host([disabled]) .icon{stroke:var(--nf-color-disabled)}:host([disabled]) .dropdown{display:none}:host(:focus:not([disabled])){color:var(--nf-focus-text-color)}:host(:focus:not([disabled])) .dropdown{transform:translateY(.5rem);opacity:1;pointer-events:auto}:host(:focus:not([disabled])) .cover{pointer-events:auto}`;
|
|
1179
|
-
var mt = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, K = (t, e,
|
|
1180
|
-
for (var r =
|
|
1181
|
-
(n = t[i]) && (r = (
|
|
1182
|
-
return
|
|
1190
|
+
var mt = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, K = (t, e, o, s) => {
|
|
1191
|
+
for (var r = s > 1 ? void 0 : s ? gt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
1192
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
1193
|
+
return s && r && mt(e, o, r), r;
|
|
1183
1194
|
};
|
|
1184
|
-
let
|
|
1195
|
+
let D = class extends R {
|
|
1185
1196
|
constructor() {
|
|
1186
1197
|
super(...arguments), this.value = "", this.options = [], this.disabled = !1, this.showDropdown = !1, this.jumpCloseFlag = !1, this.timeoutId = null, this.onFocus = () => {
|
|
1187
1198
|
this.disabled || (this.timeoutId && clearTimeout(this.timeoutId), this.showDropdown = !0, this.jumpCloseFlag = !0);
|
|
@@ -1203,9 +1214,9 @@ let M = class extends R {
|
|
|
1203
1214
|
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 ft(34), this.blur();
|
|
1204
1215
|
}
|
|
1205
1216
|
render() {
|
|
1206
|
-
const t = this.options.findIndex((
|
|
1217
|
+
const t = this.options.findIndex((o) => o.value == this.value), e = t > -1 ? this.options[t]?.label : this.value;
|
|
1207
1218
|
return f`<div class=dropdown>${(this.showDropdown ? this.options : []).map(
|
|
1208
|
-
(
|
|
1219
|
+
(o) => f`<div @click=${() => this.set(o.value)} class="item ${this.value == o.value ? "item-selected" : "item-unselected"}">${o.label}</div>`
|
|
1209
1220
|
)}</div><slot></slot><div class=text>${e}</div><svg class=icon width=24 height=24 viewBox="0 0 24 24"><path d="M17 10l-5 5.5-5-5.5"/></svg>`;
|
|
1210
1221
|
}
|
|
1211
1222
|
connectedCallback() {
|
|
@@ -1217,10 +1228,10 @@ let M = class extends R {
|
|
|
1217
1228
|
super.disconnectedCallback(), this.removeEventListener("focus", this.onFocus), this.removeEventListener("blur", this.onBlur), this.removeEventListener("click", this.onClick);
|
|
1218
1229
|
}
|
|
1219
1230
|
};
|
|
1220
|
-
|
|
1231
|
+
D.styles = [W, bt];
|
|
1221
1232
|
K([
|
|
1222
1233
|
h({ type: String })
|
|
1223
|
-
],
|
|
1234
|
+
], D.prototype, "value", 2);
|
|
1224
1235
|
K([
|
|
1225
1236
|
h({
|
|
1226
1237
|
type: Array,
|
|
@@ -1236,21 +1247,21 @@ K([
|
|
|
1236
1247
|
return [];
|
|
1237
1248
|
}
|
|
1238
1249
|
})
|
|
1239
|
-
],
|
|
1250
|
+
], D.prototype, "options", 2);
|
|
1240
1251
|
K([
|
|
1241
1252
|
h({ type: Boolean, reflect: !0 })
|
|
1242
|
-
],
|
|
1253
|
+
], D.prototype, "disabled", 2);
|
|
1243
1254
|
K([
|
|
1244
1255
|
w()
|
|
1245
|
-
],
|
|
1246
|
-
|
|
1256
|
+
], D.prototype, "showDropdown", 2);
|
|
1257
|
+
D = K([
|
|
1247
1258
|
T("nf-select")
|
|
1248
|
-
],
|
|
1259
|
+
], D);
|
|
1249
1260
|
const vt = 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:.6}.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}:host(:not([disabled]):not([checked])) .switch-container:hover{background:var(--nf-background-color-hover)}:host([checked]) .switch-container{background-color:var(--nf-primary-color,var(--nf-primary-color))}:host([disabled]) .switch-container{opacity:.5}.ripple{position:absolute;border-radius:.875rem;inset:-.2rem;background-color:#6464641a;animation:ripple-animation 1s ease-out forwards;pointer-events:none;opacity:1}@keyframes ripple-animation{0%{opacity:0}20%{opacity:1}to{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-container:active .switch-thumb:before{width:1.625rem;border-radius:.625rem}:host([checked]) .switch-thumb{transform:translate(1.725rem)}:host([checked]) .switch-container:active .switch-thumb:before{width:1.625rem;border-radius:.625rem;transform:translate(-.375rem)}:host(:focus) .switch-container{outline:.125rem solid var(--nf-primary-color,var(--nf-primary-color));outline-offset:.125rem}`;
|
|
1250
|
-
var _t = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, he = (t, e,
|
|
1251
|
-
for (var r =
|
|
1252
|
-
(n = t[i]) && (r = (
|
|
1253
|
-
return
|
|
1261
|
+
var _t = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, he = (t, e, o, s) => {
|
|
1262
|
+
for (var r = s > 1 ? void 0 : s ? yt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
1263
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
1264
|
+
return s && r && _t(e, o, r), r;
|
|
1254
1265
|
};
|
|
1255
1266
|
let I = class extends V {
|
|
1256
1267
|
constructor() {
|
|
@@ -1269,16 +1280,16 @@ let I = class extends V {
|
|
|
1269
1280
|
createRipple(t) {
|
|
1270
1281
|
const e = this.shadowRoot?.querySelector(".switch-wrapper");
|
|
1271
1282
|
if (!e) return;
|
|
1272
|
-
const
|
|
1273
|
-
|
|
1274
|
-
const
|
|
1275
|
-
|
|
1276
|
-
e.contains(
|
|
1283
|
+
const o = e.querySelector(".ripple");
|
|
1284
|
+
o && e.removeChild(o);
|
|
1285
|
+
const s = document.createElement("div");
|
|
1286
|
+
s.classList.add("ripple"), e.appendChild(s), s.addEventListener("animationend", () => {
|
|
1287
|
+
e.contains(s) && e.removeChild(s);
|
|
1277
1288
|
});
|
|
1278
1289
|
}
|
|
1279
1290
|
// 渲染开关组件
|
|
1280
1291
|
render() {
|
|
1281
|
-
return
|
|
1292
|
+
return oe`<div class=switch-wrapper><div class=switch-container @click=${this.toggleSwitch} aria-checked=${this.checked} aria-disabled=${this.disabled} role=switch><div class=switch-thumb></div></div></div>`;
|
|
1282
1293
|
}
|
|
1283
1294
|
connectedCallback() {
|
|
1284
1295
|
this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
|
|
@@ -1297,10 +1308,10 @@ I = he([
|
|
|
1297
1308
|
T("nf-switch")
|
|
1298
1309
|
], I);
|
|
1299
1310
|
const wt = E`:host{display:inline-flex;align-items:center;position:relative;width:100%;height:1.25rem;background-color:var(--nf-border-color,#e0e0e0);border-radius:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;box-shadow:none;padding:0}:host:hover{background-color:var(--nf-border-color,#e0e0e0);border:none}:host:focus{box-shadow:none;outline:0}:host([disabled]){cursor:not-allowed;opacity:.6}.slider-fill{position:absolute;left:0;top:0;height:100%;background-color:var(--nf-primary-color,#5e72f9);border-radius:.625rem 0 0 .625rem;pointer-events:none}.slider-handle{position:absolute;width:1.25rem;height:1.25rem;background-color:#fff;border-radius:50%;top:50%;transform:translate(-50%,-50%);cursor:grab;outline:0;box-shadow:0 1px 3px #0000004d;transition:transform .15s ease,box-shadow .15s ease;z-index:1}:host([disabled]) .slider-handle{cursor:not-allowed}:host(:not([disabled])) .slider-handle:hover{transform:translate(-50%,-50%) scale(1.05)}:host(:not([disabled])) .slider-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 3px 8px #0006}.slider-handle:focus{box-shadow:0 0 0 3px #5e72f94d}.slider-tooltip{position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);background-color:var(--nf-slider-tooltip-background);color:var(--nf-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none;box-shadow:0 0 .4rem .1rem #0000001a}.slider-tooltip.visible{opacity:1}`;
|
|
1300
|
-
var $t = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, y = (t, e,
|
|
1301
|
-
for (var r =
|
|
1302
|
-
(n = t[i]) && (r = (
|
|
1303
|
-
return
|
|
1311
|
+
var $t = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, y = (t, e, o, s) => {
|
|
1312
|
+
for (var r = s > 1 ? void 0 : s ? xt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
1313
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
1314
|
+
return s && r && $t(e, o, r), r;
|
|
1304
1315
|
};
|
|
1305
1316
|
let v = class extends R {
|
|
1306
1317
|
constructor() {
|
|
@@ -1373,7 +1384,7 @@ let v = class extends R {
|
|
|
1373
1384
|
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);
|
|
1374
1385
|
}
|
|
1375
1386
|
_updateValue(t) {
|
|
1376
|
-
const e = this.getBoundingClientRect(),
|
|
1387
|
+
const e = this.getBoundingClientRect(), o = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, s = Math.max(0, Math.min(1, (o - e.left) / e.width)), r = this.max - this.min, i = this.min + s * r, n = Math.round((i - this.min) / this.step), l = this.min + n * this.step;
|
|
1377
1388
|
this._currentValue = Math.min(this.max, Math.max(this.min, l)), this.requestUpdate();
|
|
1378
1389
|
}
|
|
1379
1390
|
_getValuePercentage() {
|
|
@@ -1381,8 +1392,8 @@ let v = class extends R {
|
|
|
1381
1392
|
return t === 0 ? 0 : (this._currentValue - this.min) / t * 100;
|
|
1382
1393
|
}
|
|
1383
1394
|
render() {
|
|
1384
|
-
const t = this._getValuePercentage(), e = `${t}%`,
|
|
1385
|
-
return f`<div class=slider-fill style=${J({ width:
|
|
1395
|
+
const t = this._getValuePercentage(), e = `${t}%`, o = `${t}%`, s = `slider-tooltip ${this._showTooltip || this.tooltip ? "visible" : ""}`;
|
|
1396
|
+
return f`<div class=slider-fill style=${J({ width: o })}></div><div class=slider-handle style=${J({ left: e })} tabindex=${this.disabled ? -1 : 0} @mousedown=${this._handleMouseDown} @touchstart=${this._handleTouchStart} @keydown=${this._handleKeyDown}><div class=${s}>${this._currentValue}</div></div>`;
|
|
1386
1397
|
}
|
|
1387
1398
|
};
|
|
1388
1399
|
v.styles = [W, wt];
|
|
@@ -1423,11 +1434,11 @@ v = y([
|
|
|
1423
1434
|
T("nf-slider")
|
|
1424
1435
|
], v);
|
|
1425
1436
|
export {
|
|
1426
|
-
|
|
1437
|
+
j as NfCheckboxElement,
|
|
1427
1438
|
g as NfColorPickerElement,
|
|
1428
1439
|
x as NfInputElement,
|
|
1429
1440
|
p as NfInputNumberElement,
|
|
1430
|
-
|
|
1441
|
+
D as NfSelectElement,
|
|
1431
1442
|
v as NfSliderElement,
|
|
1432
1443
|
I as NfSwitchElement
|
|
1433
1444
|
};
|