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