next-flow-design 1.0.0 → 1.1.0
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/LICENSE +1 -1
- package/README.md +59 -1
- package/dist/components/nf-checkbox/nf-checkbox.d.ts +8 -0
- package/dist/components/nf-color-picker/nf-color-picker.d.ts +76 -0
- package/dist/components/nf-input/nf-input.d.ts +17 -0
- package/dist/components/nf-input-number/nf-input-number.d.ts +25 -0
- package/dist/components/nf-select/nf-select.d.ts +20 -0
- package/dist/components/nf-slider/nf-slider.d.ts +26 -0
- package/dist/components/nf-switch/nf-switch.d.ts +10 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +10 -0
- package/dist/nf-slider-CZmx94AZ.js +1317 -0
- package/dist/react/components/nf-checkbox/nf-checkbox.d.ts +5 -0
- package/dist/react/components/nf-color-picker/nf-color-picker.d.ts +28 -0
- package/dist/react/components/nf-input/nf-input.d.ts +7 -0
- package/dist/react/components/nf-input-number/nf-input-number.d.ts +8 -0
- package/dist/react/components/nf-select/nf-select.d.ts +6 -0
- package/dist/react/components/nf-slider/nf-slider.d.ts +5 -0
- package/dist/react/components/nf-switch/nf-switch.d.ts +10 -0
- package/dist/react/index.d.ts +8 -0
- package/dist/react/index.js +69 -0
- package/dist/utils/sleep.d.ts +1 -0
- package/package.json +12 -10
|
@@ -0,0 +1,1317 @@
|
|
|
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
|
+
};
|