next-flow-design 1.6.4 → 1.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/nf-empty/nf-empty.d.ts +9 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +680 -644
- package/dist/react/components/nf-empty/nf-empty.d.ts +2 -0
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +353 -318
- package/package.json +1 -1
- package/dist/react/components/nf-root/nf-root.d.ts +0 -2
package/dist/index.js
CHANGED
|
@@ -1,184 +1,184 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
const
|
|
3
|
-
let
|
|
4
|
-
constructor(
|
|
5
|
-
if (this._$cssResult$ = !0,
|
|
6
|
-
this.cssText =
|
|
1
|
+
import { css as E, LitElement as B, html as u } from "lit";
|
|
2
|
+
const J = globalThis, se = J.ShadowRoot && (J.ShadyCSS === void 0 || J.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Ee = /* @__PURE__ */ Symbol(), pe = /* @__PURE__ */ new WeakMap();
|
|
3
|
+
let Me = class {
|
|
4
|
+
constructor(e, o, r) {
|
|
5
|
+
if (this._$cssResult$ = !0, r !== Ee) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
6
|
+
this.cssText = e, this.t = o;
|
|
7
7
|
}
|
|
8
8
|
get styleSheet() {
|
|
9
|
-
let
|
|
9
|
+
let e = this.o;
|
|
10
10
|
const o = this.t;
|
|
11
|
-
if (
|
|
12
|
-
const
|
|
13
|
-
|
|
11
|
+
if (se && e === void 0) {
|
|
12
|
+
const r = o !== void 0 && o.length === 1;
|
|
13
|
+
r && (e = pe.get(o)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && pe.set(o, e));
|
|
14
14
|
}
|
|
15
|
-
return
|
|
15
|
+
return e;
|
|
16
16
|
}
|
|
17
17
|
toString() {
|
|
18
18
|
return this.cssText;
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
|
-
const
|
|
22
|
-
if (
|
|
23
|
-
else for (const o of
|
|
24
|
-
const
|
|
25
|
-
|
|
21
|
+
const He = (t) => new Me(typeof t == "string" ? t : t + "", void 0, Ee), Oe = (t, e) => {
|
|
22
|
+
if (se) t.adoptedStyleSheets = e.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
|
|
23
|
+
else for (const o of e) {
|
|
24
|
+
const r = document.createElement("style"), i = J.litNonce;
|
|
25
|
+
i !== void 0 && r.setAttribute("nonce", i), r.textContent = o.cssText, t.appendChild(r);
|
|
26
26
|
}
|
|
27
|
-
},
|
|
27
|
+
}, fe = se ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
|
|
28
28
|
let o = "";
|
|
29
|
-
for (const
|
|
30
|
-
return
|
|
31
|
-
})(
|
|
32
|
-
const { is:
|
|
33
|
-
switch (
|
|
29
|
+
for (const r of e.cssRules) o += r.cssText;
|
|
30
|
+
return He(o);
|
|
31
|
+
})(t) : t;
|
|
32
|
+
const { is: Te, defineProperty: ze, getOwnPropertyDescriptor: Be, getOwnPropertyNames: Ve, getOwnPropertySymbols: Ne, getPrototypeOf: Fe } = Object, te = globalThis, be = te.trustedTypes, Le = be ? be.emptyScript : "", Ue = te.reactiveElementPolyfillSupport, j = (t, e) => t, Q = { toAttribute(t, e) {
|
|
33
|
+
switch (e) {
|
|
34
34
|
case Boolean:
|
|
35
|
-
|
|
35
|
+
t = t ? Le : null;
|
|
36
36
|
break;
|
|
37
37
|
case Object:
|
|
38
38
|
case Array:
|
|
39
|
-
|
|
39
|
+
t = t == null ? t : JSON.stringify(t);
|
|
40
40
|
}
|
|
41
|
-
return
|
|
42
|
-
}, fromAttribute(
|
|
43
|
-
let o =
|
|
44
|
-
switch (
|
|
41
|
+
return t;
|
|
42
|
+
}, fromAttribute(t, e) {
|
|
43
|
+
let o = t;
|
|
44
|
+
switch (e) {
|
|
45
45
|
case Boolean:
|
|
46
|
-
o =
|
|
46
|
+
o = t !== null;
|
|
47
47
|
break;
|
|
48
48
|
case Number:
|
|
49
|
-
o =
|
|
49
|
+
o = t === null ? null : Number(t);
|
|
50
50
|
break;
|
|
51
51
|
case Object:
|
|
52
52
|
case Array:
|
|
53
53
|
try {
|
|
54
|
-
o = JSON.parse(
|
|
54
|
+
o = JSON.parse(t);
|
|
55
55
|
} catch {
|
|
56
56
|
o = null;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
return o;
|
|
60
|
-
} },
|
|
61
|
-
Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"),
|
|
62
|
-
let
|
|
63
|
-
static addInitializer(
|
|
64
|
-
this._$Ei(), (this.l ??= []).push(
|
|
60
|
+
} }, ne = (t, e) => !Te(t, e), me = { attribute: !0, type: String, converter: Q, reflect: !1, useDefault: !1, hasChanged: ne };
|
|
61
|
+
Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), te.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
|
|
62
|
+
let N = class extends HTMLElement {
|
|
63
|
+
static addInitializer(e) {
|
|
64
|
+
this._$Ei(), (this.l ??= []).push(e);
|
|
65
65
|
}
|
|
66
66
|
static get observedAttributes() {
|
|
67
67
|
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
|
|
68
68
|
}
|
|
69
|
-
static createProperty(
|
|
70
|
-
if (o.state && (o.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(
|
|
71
|
-
const
|
|
72
|
-
|
|
69
|
+
static createProperty(e, o = me) {
|
|
70
|
+
if (o.state && (o.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((o = Object.create(o)).wrapped = !0), this.elementProperties.set(e, o), !o.noAccessor) {
|
|
71
|
+
const r = /* @__PURE__ */ Symbol(), i = this.getPropertyDescriptor(e, r, o);
|
|
72
|
+
i !== void 0 && ze(this.prototype, e, i);
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
|
-
static getPropertyDescriptor(
|
|
76
|
-
const { get:
|
|
75
|
+
static getPropertyDescriptor(e, o, r) {
|
|
76
|
+
const { get: i, set: s } = Be(this.prototype, e) ?? { get() {
|
|
77
77
|
return this[o];
|
|
78
78
|
}, set(n) {
|
|
79
79
|
this[o] = n;
|
|
80
80
|
} };
|
|
81
|
-
return { get:
|
|
82
|
-
const l =
|
|
83
|
-
|
|
81
|
+
return { get: i, set(n) {
|
|
82
|
+
const l = i?.call(this);
|
|
83
|
+
s?.call(this, n), this.requestUpdate(e, l, r);
|
|
84
84
|
}, configurable: !0, enumerable: !0 };
|
|
85
85
|
}
|
|
86
|
-
static getPropertyOptions(
|
|
87
|
-
return this.elementProperties.get(
|
|
86
|
+
static getPropertyOptions(e) {
|
|
87
|
+
return this.elementProperties.get(e) ?? me;
|
|
88
88
|
}
|
|
89
89
|
static _$Ei() {
|
|
90
90
|
if (this.hasOwnProperty(j("elementProperties"))) return;
|
|
91
|
-
const
|
|
92
|
-
|
|
91
|
+
const e = Fe(this);
|
|
92
|
+
e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
|
|
93
93
|
}
|
|
94
94
|
static finalize() {
|
|
95
95
|
if (this.hasOwnProperty(j("finalized"))) return;
|
|
96
96
|
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(j("properties"))) {
|
|
97
|
-
const o = this.properties,
|
|
98
|
-
for (const
|
|
97
|
+
const o = this.properties, r = [...Ve(o), ...Ne(o)];
|
|
98
|
+
for (const i of r) this.createProperty(i, o[i]);
|
|
99
99
|
}
|
|
100
|
-
const
|
|
101
|
-
if (
|
|
102
|
-
const o = litPropertyMetadata.get(
|
|
103
|
-
if (o !== void 0) for (const [
|
|
100
|
+
const e = this[Symbol.metadata];
|
|
101
|
+
if (e !== null) {
|
|
102
|
+
const o = litPropertyMetadata.get(e);
|
|
103
|
+
if (o !== void 0) for (const [r, i] of o) this.elementProperties.set(r, i);
|
|
104
104
|
}
|
|
105
105
|
this._$Eh = /* @__PURE__ */ new Map();
|
|
106
|
-
for (const [o,
|
|
107
|
-
const
|
|
108
|
-
|
|
106
|
+
for (const [o, r] of this.elementProperties) {
|
|
107
|
+
const i = this._$Eu(o, r);
|
|
108
|
+
i !== void 0 && this._$Eh.set(i, o);
|
|
109
109
|
}
|
|
110
110
|
this.elementStyles = this.finalizeStyles(this.styles);
|
|
111
111
|
}
|
|
112
|
-
static finalizeStyles(
|
|
112
|
+
static finalizeStyles(e) {
|
|
113
113
|
const o = [];
|
|
114
|
-
if (Array.isArray(
|
|
115
|
-
const
|
|
116
|
-
for (const
|
|
117
|
-
} else
|
|
114
|
+
if (Array.isArray(e)) {
|
|
115
|
+
const r = new Set(e.flat(1 / 0).reverse());
|
|
116
|
+
for (const i of r) o.unshift(fe(i));
|
|
117
|
+
} else e !== void 0 && o.push(fe(e));
|
|
118
118
|
return o;
|
|
119
119
|
}
|
|
120
|
-
static _$Eu(
|
|
121
|
-
const
|
|
122
|
-
return
|
|
120
|
+
static _$Eu(e, o) {
|
|
121
|
+
const r = o.attribute;
|
|
122
|
+
return r === !1 ? void 0 : typeof r == "string" ? r : typeof e == "string" ? e.toLowerCase() : void 0;
|
|
123
123
|
}
|
|
124
124
|
constructor() {
|
|
125
125
|
super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
|
|
126
126
|
}
|
|
127
127
|
_$Ev() {
|
|
128
|
-
this._$ES = new Promise((
|
|
128
|
+
this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((e) => e(this));
|
|
129
129
|
}
|
|
130
|
-
addController(
|
|
131
|
-
(this._$EO ??= /* @__PURE__ */ new Set()).add(
|
|
130
|
+
addController(e) {
|
|
131
|
+
(this._$EO ??= /* @__PURE__ */ new Set()).add(e), this.renderRoot !== void 0 && this.isConnected && e.hostConnected?.();
|
|
132
132
|
}
|
|
133
|
-
removeController(
|
|
134
|
-
this._$EO?.delete(
|
|
133
|
+
removeController(e) {
|
|
134
|
+
this._$EO?.delete(e);
|
|
135
135
|
}
|
|
136
136
|
_$E_() {
|
|
137
|
-
const
|
|
138
|
-
for (const
|
|
139
|
-
|
|
137
|
+
const e = /* @__PURE__ */ new Map(), o = this.constructor.elementProperties;
|
|
138
|
+
for (const r of o.keys()) this.hasOwnProperty(r) && (e.set(r, this[r]), delete this[r]);
|
|
139
|
+
e.size > 0 && (this._$Ep = e);
|
|
140
140
|
}
|
|
141
141
|
createRenderRoot() {
|
|
142
|
-
const
|
|
143
|
-
return
|
|
142
|
+
const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
|
|
143
|
+
return Oe(e, this.constructor.elementStyles), e;
|
|
144
144
|
}
|
|
145
145
|
connectedCallback() {
|
|
146
|
-
this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((
|
|
146
|
+
this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((e) => e.hostConnected?.());
|
|
147
147
|
}
|
|
148
|
-
enableUpdating(
|
|
148
|
+
enableUpdating(e) {
|
|
149
149
|
}
|
|
150
150
|
disconnectedCallback() {
|
|
151
|
-
this._$EO?.forEach((
|
|
151
|
+
this._$EO?.forEach((e) => e.hostDisconnected?.());
|
|
152
152
|
}
|
|
153
|
-
attributeChangedCallback(
|
|
154
|
-
this._$AK(
|
|
153
|
+
attributeChangedCallback(e, o, r) {
|
|
154
|
+
this._$AK(e, r);
|
|
155
155
|
}
|
|
156
|
-
_$ET(
|
|
157
|
-
const
|
|
158
|
-
if (
|
|
159
|
-
const
|
|
160
|
-
this._$Em =
|
|
156
|
+
_$ET(e, o) {
|
|
157
|
+
const r = this.constructor.elementProperties.get(e), i = this.constructor._$Eu(e, r);
|
|
158
|
+
if (i !== void 0 && r.reflect === !0) {
|
|
159
|
+
const s = (r.converter?.toAttribute !== void 0 ? r.converter : Q).toAttribute(o, r.type);
|
|
160
|
+
this._$Em = e, s == null ? this.removeAttribute(i) : this.setAttribute(i, s), this._$Em = null;
|
|
161
161
|
}
|
|
162
162
|
}
|
|
163
|
-
_$AK(
|
|
164
|
-
const
|
|
165
|
-
if (
|
|
166
|
-
const
|
|
167
|
-
this._$Em =
|
|
168
|
-
const l = n.fromAttribute(o,
|
|
169
|
-
this[
|
|
163
|
+
_$AK(e, o) {
|
|
164
|
+
const r = this.constructor, i = r._$Eh.get(e);
|
|
165
|
+
if (i !== void 0 && this._$Em !== i) {
|
|
166
|
+
const s = r.getPropertyOptions(i), n = typeof s.converter == "function" ? { fromAttribute: s.converter } : s.converter?.fromAttribute !== void 0 ? s.converter : Q;
|
|
167
|
+
this._$Em = i;
|
|
168
|
+
const l = n.fromAttribute(o, s.type);
|
|
169
|
+
this[i] = l ?? this._$Ej?.get(i) ?? l, this._$Em = null;
|
|
170
170
|
}
|
|
171
171
|
}
|
|
172
|
-
requestUpdate(
|
|
173
|
-
if (
|
|
172
|
+
requestUpdate(e, o, r, i = !1, s) {
|
|
173
|
+
if (e !== void 0) {
|
|
174
174
|
const n = this.constructor;
|
|
175
|
-
if (
|
|
176
|
-
this.C(
|
|
175
|
+
if (i === !1 && (s = this[e]), r ??= n.getPropertyOptions(e), !((r.hasChanged ?? ne)(s, o) || r.useDefault && r.reflect && s === this._$Ej?.get(e) && !this.hasAttribute(n._$Eu(e, r)))) return;
|
|
176
|
+
this.C(e, o, r);
|
|
177
177
|
}
|
|
178
178
|
this.isUpdatePending === !1 && (this._$ES = this._$EP());
|
|
179
179
|
}
|
|
180
|
-
C(
|
|
181
|
-
|
|
180
|
+
C(e, o, { useDefault: r, reflect: i, wrapped: s }, n) {
|
|
181
|
+
r && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(e) && (this._$Ej.set(e, n ?? o ?? this[e]), s !== !0 || n !== void 0) || (this._$AL.has(e) || (this.hasUpdated || r || (o = void 0), this._$AL.set(e, o)), i === !0 && this._$Em !== e && (this._$Eq ??= /* @__PURE__ */ new Set()).add(e));
|
|
182
182
|
}
|
|
183
183
|
async _$EP() {
|
|
184
184
|
this.isUpdatePending = !0;
|
|
@@ -187,8 +187,8 @@ let V = class extends HTMLElement {
|
|
|
187
187
|
} catch (o) {
|
|
188
188
|
Promise.reject(o);
|
|
189
189
|
}
|
|
190
|
-
const
|
|
191
|
-
return
|
|
190
|
+
const e = this.scheduleUpdate();
|
|
191
|
+
return e != null && await e, !this.isUpdatePending;
|
|
192
192
|
}
|
|
193
193
|
scheduleUpdate() {
|
|
194
194
|
return this.performUpdate();
|
|
@@ -197,28 +197,28 @@ let V = class extends HTMLElement {
|
|
|
197
197
|
if (!this.isUpdatePending) return;
|
|
198
198
|
if (!this.hasUpdated) {
|
|
199
199
|
if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
|
|
200
|
-
for (const [
|
|
200
|
+
for (const [i, s] of this._$Ep) this[i] = s;
|
|
201
201
|
this._$Ep = void 0;
|
|
202
202
|
}
|
|
203
|
-
const
|
|
204
|
-
if (
|
|
205
|
-
const { wrapped: n } =
|
|
206
|
-
n !== !0 || this._$AL.has(
|
|
203
|
+
const r = this.constructor.elementProperties;
|
|
204
|
+
if (r.size > 0) for (const [i, s] of r) {
|
|
205
|
+
const { wrapped: n } = s, l = this[i];
|
|
206
|
+
n !== !0 || this._$AL.has(i) || l === void 0 || this.C(i, void 0, s, l);
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
|
-
let
|
|
209
|
+
let e = !1;
|
|
210
210
|
const o = this._$AL;
|
|
211
211
|
try {
|
|
212
|
-
|
|
213
|
-
} catch (
|
|
214
|
-
throw
|
|
212
|
+
e = this.shouldUpdate(o), e ? (this.willUpdate(o), this._$EO?.forEach((r) => r.hostUpdate?.()), this.update(o)) : this._$EM();
|
|
213
|
+
} catch (r) {
|
|
214
|
+
throw e = !1, this._$EM(), r;
|
|
215
215
|
}
|
|
216
|
-
|
|
216
|
+
e && this._$AE(o);
|
|
217
217
|
}
|
|
218
|
-
willUpdate(
|
|
218
|
+
willUpdate(e) {
|
|
219
219
|
}
|
|
220
|
-
_$AE(
|
|
221
|
-
this._$EO?.forEach((o) => o.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(
|
|
220
|
+
_$AE(e) {
|
|
221
|
+
this._$EO?.forEach((o) => o.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
|
|
222
222
|
}
|
|
223
223
|
_$EM() {
|
|
224
224
|
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
|
|
@@ -229,113 +229,113 @@ let V = class extends HTMLElement {
|
|
|
229
229
|
getUpdateComplete() {
|
|
230
230
|
return this._$ES;
|
|
231
231
|
}
|
|
232
|
-
shouldUpdate(
|
|
232
|
+
shouldUpdate(e) {
|
|
233
233
|
return !0;
|
|
234
234
|
}
|
|
235
|
-
update(
|
|
235
|
+
update(e) {
|
|
236
236
|
this._$Eq &&= this._$Eq.forEach((o) => this._$ET(o, this[o])), this._$EM();
|
|
237
237
|
}
|
|
238
|
-
updated(
|
|
238
|
+
updated(e) {
|
|
239
239
|
}
|
|
240
|
-
firstUpdated(
|
|
240
|
+
firstUpdated(e) {
|
|
241
241
|
}
|
|
242
242
|
};
|
|
243
|
-
|
|
244
|
-
const
|
|
245
|
-
const { kind:
|
|
246
|
-
let
|
|
247
|
-
if (
|
|
243
|
+
N.elementStyles = [], N.shadowRootOptions = { mode: "open" }, N[j("elementProperties")] = /* @__PURE__ */ new Map(), N[j("finalized")] = /* @__PURE__ */ new Map(), Ue?.({ ReactiveElement: N }), (te.reactiveElementVersions ??= []).push("2.1.2");
|
|
244
|
+
const Re = { attribute: !0, type: String, converter: Q, reflect: !1, hasChanged: ne }, je = (t = Re, e, o) => {
|
|
245
|
+
const { kind: r, metadata: i } = o;
|
|
246
|
+
let s = globalThis.litPropertyMetadata.get(i);
|
|
247
|
+
if (s === void 0 && globalThis.litPropertyMetadata.set(i, s = /* @__PURE__ */ new Map()), r === "setter" && ((t = Object.create(t)).wrapped = !0), s.set(o.name, t), r === "accessor") {
|
|
248
248
|
const { name: n } = o;
|
|
249
249
|
return { set(l) {
|
|
250
|
-
const a =
|
|
251
|
-
|
|
250
|
+
const a = e.get.call(this);
|
|
251
|
+
e.set.call(this, l), this.requestUpdate(n, a, t, !0, l);
|
|
252
252
|
}, init(l) {
|
|
253
|
-
return l !== void 0 && this.C(n, void 0,
|
|
253
|
+
return l !== void 0 && this.C(n, void 0, t, l), l;
|
|
254
254
|
} };
|
|
255
255
|
}
|
|
256
|
-
if (
|
|
256
|
+
if (r === "setter") {
|
|
257
257
|
const { name: n } = o;
|
|
258
258
|
return function(l) {
|
|
259
259
|
const a = this[n];
|
|
260
|
-
|
|
260
|
+
e.call(this, l), this.requestUpdate(n, a, t, !0, l);
|
|
261
261
|
};
|
|
262
262
|
}
|
|
263
|
-
throw Error("Unsupported decorator location: " +
|
|
263
|
+
throw Error("Unsupported decorator location: " + r);
|
|
264
264
|
};
|
|
265
|
-
function h(
|
|
266
|
-
return (
|
|
267
|
-
const n =
|
|
268
|
-
return
|
|
269
|
-
})(
|
|
265
|
+
function h(t) {
|
|
266
|
+
return (e, o) => typeof o == "object" ? je(t, e, o) : ((r, i, s) => {
|
|
267
|
+
const n = i.hasOwnProperty(s);
|
|
268
|
+
return i.constructor.createProperty(s, r), n ? Object.getOwnPropertyDescriptor(i, s) : void 0;
|
|
269
|
+
})(t, e, o);
|
|
270
270
|
}
|
|
271
|
-
function _(
|
|
272
|
-
return h({ ...
|
|
271
|
+
function _(t) {
|
|
272
|
+
return h({ ...t, state: !0, attribute: !1 });
|
|
273
273
|
}
|
|
274
|
-
const
|
|
275
|
-
\f\r]`, R = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
|
|
276
|
-
\f\r"'\`<>=]|("|')|))|$)`, "g"),
|
|
277
|
-
function
|
|
278
|
-
if (!
|
|
279
|
-
return
|
|
274
|
+
const ae = globalThis, ge = (t) => t, ee = ae.trustedTypes, ve = ee ? ee.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, Se = "$lit$", D = `lit$${Math.random().toFixed(9).slice(2)}$`, Ae = "?" + D, Ie = `<${Ae}>`, O = document, I = () => O.createComment(""), q = (t) => t === null || typeof t != "object" && typeof t != "function", le = Array.isArray, qe = (t) => le(t) || typeof t?.[Symbol.iterator] == "function", re = `[
|
|
275
|
+
\f\r]`, R = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ye = /-->/g, we = />/g, M = RegExp(`>|${re}(?:([^\\s"'>=/]+)(${re}*=${re}*(?:[^
|
|
276
|
+
\f\r"'\`<>=]|("|')|))|$)`, "g"), _e = /'/g, $e = /"/g, Ce = /^(?:script|style|textarea|title)$/i, We = (t) => (e, ...o) => ({ _$litType$: t, strings: e, values: o }), ie = We(1), T = /* @__PURE__ */ Symbol.for("lit-noChange"), b = /* @__PURE__ */ Symbol.for("lit-nothing"), xe = /* @__PURE__ */ new WeakMap(), H = O.createTreeWalker(O, 129);
|
|
277
|
+
function Pe(t, e) {
|
|
278
|
+
if (!le(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
279
|
+
return ve !== void 0 ? ve.createHTML(e) : e;
|
|
280
280
|
}
|
|
281
|
-
const
|
|
282
|
-
const o =
|
|
283
|
-
let
|
|
281
|
+
const Ke = (t, e) => {
|
|
282
|
+
const o = t.length - 1, r = [];
|
|
283
|
+
let i, s = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = R;
|
|
284
284
|
for (let l = 0; l < o; l++) {
|
|
285
|
-
const a =
|
|
286
|
-
let c,
|
|
287
|
-
for (; w < a.length && (n.lastIndex = w,
|
|
288
|
-
const k = n === M &&
|
|
289
|
-
|
|
285
|
+
const a = t[l];
|
|
286
|
+
let c, p, d = -1, w = 0;
|
|
287
|
+
for (; w < a.length && (n.lastIndex = w, p = n.exec(a), p !== null); ) w = n.lastIndex, n === R ? p[1] === "!--" ? n = ye : p[1] !== void 0 ? n = we : p[2] !== void 0 ? (Ce.test(p[2]) && (i = RegExp("</" + p[2], "g")), n = M) : p[3] !== void 0 && (n = M) : n === M ? p[0] === ">" ? (n = i ?? R, d = -1) : p[1] === void 0 ? d = -2 : (d = n.lastIndex - p[2].length, c = p[1], n = p[3] === void 0 ? M : p[3] === '"' ? $e : _e) : n === $e || n === _e ? n = M : n === ye || n === we ? n = R : (n = M, i = void 0);
|
|
288
|
+
const k = n === M && t[l + 1].startsWith("/>") ? " " : "";
|
|
289
|
+
s += n === R ? a + Ie : d >= 0 ? (r.push(c), a.slice(0, d) + Se + a.slice(d) + D + k) : a + D + (d === -2 ? l : k);
|
|
290
290
|
}
|
|
291
|
-
return [
|
|
291
|
+
return [Pe(t, s + (t[o] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), r];
|
|
292
292
|
};
|
|
293
293
|
class W {
|
|
294
|
-
constructor({ strings:
|
|
295
|
-
let
|
|
294
|
+
constructor({ strings: e, _$litType$: o }, r) {
|
|
295
|
+
let i;
|
|
296
296
|
this.parts = [];
|
|
297
|
-
let
|
|
298
|
-
const l =
|
|
299
|
-
if (this.el = W.createElement(c,
|
|
297
|
+
let s = 0, n = 0;
|
|
298
|
+
const l = e.length - 1, a = this.parts, [c, p] = Ke(e, o);
|
|
299
|
+
if (this.el = W.createElement(c, r), H.currentNode = this.el.content, o === 2 || o === 3) {
|
|
300
300
|
const d = this.el.content.firstChild;
|
|
301
301
|
d.replaceWith(...d.childNodes);
|
|
302
302
|
}
|
|
303
|
-
for (; (
|
|
304
|
-
if (
|
|
305
|
-
if (
|
|
306
|
-
const w =
|
|
307
|
-
a.push({ type: 1, index:
|
|
308
|
-
} else d.startsWith(
|
|
309
|
-
if (
|
|
310
|
-
const d =
|
|
303
|
+
for (; (i = H.nextNode()) !== null && a.length < l; ) {
|
|
304
|
+
if (i.nodeType === 1) {
|
|
305
|
+
if (i.hasAttributes()) for (const d of i.getAttributeNames()) if (d.endsWith(Se)) {
|
|
306
|
+
const w = p[n++], k = i.getAttribute(d).split(D), S = /([.?@])?(.*)/.exec(w);
|
|
307
|
+
a.push({ type: 1, index: s, name: S[2], strings: k, ctor: S[1] === "." ? Ze : S[1] === "?" ? Xe : S[1] === "@" ? Ge : oe }), i.removeAttribute(d);
|
|
308
|
+
} else d.startsWith(D) && (a.push({ type: 6, index: s }), i.removeAttribute(d));
|
|
309
|
+
if (Ce.test(i.tagName)) {
|
|
310
|
+
const d = i.textContent.split(D), w = d.length - 1;
|
|
311
311
|
if (w > 0) {
|
|
312
|
-
|
|
313
|
-
for (let k = 0; k < w; k++)
|
|
314
|
-
|
|
312
|
+
i.textContent = ee ? ee.emptyScript : "";
|
|
313
|
+
for (let k = 0; k < w; k++) i.append(d[k], I()), H.nextNode(), a.push({ type: 2, index: ++s });
|
|
314
|
+
i.append(d[w], I());
|
|
315
315
|
}
|
|
316
316
|
}
|
|
317
|
-
} else if (
|
|
317
|
+
} else if (i.nodeType === 8) if (i.data === Ae) a.push({ type: 2, index: s });
|
|
318
318
|
else {
|
|
319
319
|
let d = -1;
|
|
320
|
-
for (; (d =
|
|
320
|
+
for (; (d = i.data.indexOf(D, d + 1)) !== -1; ) a.push({ type: 7, index: s }), d += D.length - 1;
|
|
321
321
|
}
|
|
322
|
-
|
|
322
|
+
s++;
|
|
323
323
|
}
|
|
324
324
|
}
|
|
325
|
-
static createElement(
|
|
326
|
-
const
|
|
327
|
-
return
|
|
325
|
+
static createElement(e, o) {
|
|
326
|
+
const r = O.createElement("template");
|
|
327
|
+
return r.innerHTML = e, r;
|
|
328
328
|
}
|
|
329
329
|
}
|
|
330
|
-
function
|
|
331
|
-
if (
|
|
332
|
-
let
|
|
333
|
-
const
|
|
334
|
-
return
|
|
330
|
+
function L(t, e, o = t, r) {
|
|
331
|
+
if (e === T) return e;
|
|
332
|
+
let i = r !== void 0 ? o._$Co?.[r] : o._$Cl;
|
|
333
|
+
const s = q(e) ? void 0 : e._$litDirective$;
|
|
334
|
+
return i?.constructor !== s && (i?._$AO?.(!1), s === void 0 ? i = void 0 : (i = new s(t), i._$AT(t, o, r)), r !== void 0 ? (o._$Co ??= [])[r] = i : o._$Cl = i), i !== void 0 && (e = L(t, i._$AS(t, e.values), i, r)), e;
|
|
335
335
|
}
|
|
336
|
-
class
|
|
337
|
-
constructor(
|
|
338
|
-
this._$AV = [], this._$AN = void 0, this._$AD =
|
|
336
|
+
class Ye {
|
|
337
|
+
constructor(e, o) {
|
|
338
|
+
this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = o;
|
|
339
339
|
}
|
|
340
340
|
get parentNode() {
|
|
341
341
|
return this._$AM.parentNode;
|
|
@@ -343,35 +343,35 @@ class Wt {
|
|
|
343
343
|
get _$AU() {
|
|
344
344
|
return this._$AM._$AU;
|
|
345
345
|
}
|
|
346
|
-
u(
|
|
347
|
-
const { el: { content: o }, parts:
|
|
348
|
-
H.currentNode =
|
|
349
|
-
let
|
|
346
|
+
u(e) {
|
|
347
|
+
const { el: { content: o }, parts: r } = this._$AD, i = (e?.creationScope ?? O).importNode(o, !0);
|
|
348
|
+
H.currentNode = i;
|
|
349
|
+
let s = H.nextNode(), n = 0, l = 0, a = r[0];
|
|
350
350
|
for (; a !== void 0; ) {
|
|
351
351
|
if (n === a.index) {
|
|
352
352
|
let c;
|
|
353
|
-
a.type === 2 ? c = new
|
|
353
|
+
a.type === 2 ? c = new X(s, s.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(s, a.name, a.strings, this, e) : a.type === 6 && (c = new Je(s, this, e)), this._$AV.push(c), a = r[++l];
|
|
354
354
|
}
|
|
355
|
-
n !== a?.index && (
|
|
355
|
+
n !== a?.index && (s = H.nextNode(), n++);
|
|
356
356
|
}
|
|
357
|
-
return H.currentNode =
|
|
357
|
+
return H.currentNode = O, i;
|
|
358
358
|
}
|
|
359
|
-
p(
|
|
359
|
+
p(e) {
|
|
360
360
|
let o = 0;
|
|
361
|
-
for (const
|
|
361
|
+
for (const r of this._$AV) r !== void 0 && (r.strings !== void 0 ? (r._$AI(e, r, o), o += r.strings.length - 2) : r._$AI(e[o])), o++;
|
|
362
362
|
}
|
|
363
363
|
}
|
|
364
|
-
class
|
|
364
|
+
class X {
|
|
365
365
|
get _$AU() {
|
|
366
366
|
return this._$AM?._$AU ?? this._$Cv;
|
|
367
367
|
}
|
|
368
|
-
constructor(
|
|
369
|
-
this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA =
|
|
368
|
+
constructor(e, o, r, i) {
|
|
369
|
+
this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = e, this._$AB = o, this._$AM = r, this.options = i, this._$Cv = i?.isConnected ?? !0;
|
|
370
370
|
}
|
|
371
371
|
get parentNode() {
|
|
372
|
-
let
|
|
372
|
+
let e = this._$AA.parentNode;
|
|
373
373
|
const o = this._$AM;
|
|
374
|
-
return o !== void 0 &&
|
|
374
|
+
return o !== void 0 && e?.nodeType === 11 && (e = o.parentNode), e;
|
|
375
375
|
}
|
|
376
376
|
get startNode() {
|
|
377
377
|
return this._$AA;
|
|
@@ -379,135 +379,135 @@ class Z {
|
|
|
379
379
|
get endNode() {
|
|
380
380
|
return this._$AB;
|
|
381
381
|
}
|
|
382
|
-
_$AI(
|
|
383
|
-
|
|
382
|
+
_$AI(e, o = this) {
|
|
383
|
+
e = L(this, e, o), q(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== T && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : qe(e) ? this.k(e) : this._(e);
|
|
384
384
|
}
|
|
385
|
-
O(
|
|
386
|
-
return this._$AA.parentNode.insertBefore(
|
|
385
|
+
O(e) {
|
|
386
|
+
return this._$AA.parentNode.insertBefore(e, this._$AB);
|
|
387
387
|
}
|
|
388
|
-
T(
|
|
389
|
-
this._$AH !==
|
|
388
|
+
T(e) {
|
|
389
|
+
this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
|
|
390
390
|
}
|
|
391
|
-
_(
|
|
392
|
-
this._$AH !== b && q(this._$AH) ? this._$AA.nextSibling.data =
|
|
391
|
+
_(e) {
|
|
392
|
+
this._$AH !== b && q(this._$AH) ? this._$AA.nextSibling.data = e : this.T(O.createTextNode(e)), this._$AH = e;
|
|
393
393
|
}
|
|
394
|
-
$(
|
|
395
|
-
const { values: o, _$litType$:
|
|
396
|
-
if (this._$AH?._$AD ===
|
|
394
|
+
$(e) {
|
|
395
|
+
const { values: o, _$litType$: r } = e, i = typeof r == "number" ? this._$AC(e) : (r.el === void 0 && (r.el = W.createElement(Pe(r.h, r.h[0]), this.options)), r);
|
|
396
|
+
if (this._$AH?._$AD === i) this._$AH.p(o);
|
|
397
397
|
else {
|
|
398
|
-
const
|
|
399
|
-
|
|
398
|
+
const s = new Ye(i, this), n = s.u(this.options);
|
|
399
|
+
s.p(o), this.T(n), this._$AH = s;
|
|
400
400
|
}
|
|
401
401
|
}
|
|
402
|
-
_$AC(
|
|
403
|
-
let o =
|
|
404
|
-
return o === void 0 &&
|
|
402
|
+
_$AC(e) {
|
|
403
|
+
let o = xe.get(e.strings);
|
|
404
|
+
return o === void 0 && xe.set(e.strings, o = new W(e)), o;
|
|
405
405
|
}
|
|
406
|
-
k(
|
|
407
|
-
|
|
406
|
+
k(e) {
|
|
407
|
+
le(this._$AH) || (this._$AH = [], this._$AR());
|
|
408
408
|
const o = this._$AH;
|
|
409
|
-
let
|
|
410
|
-
for (const
|
|
411
|
-
|
|
412
|
-
}
|
|
413
|
-
_$AR(
|
|
414
|
-
for (this._$AP?.(!1, !0, o);
|
|
415
|
-
const
|
|
416
|
-
|
|
409
|
+
let r, i = 0;
|
|
410
|
+
for (const s of e) i === o.length ? o.push(r = new X(this.O(I()), this.O(I()), this, this.options)) : r = o[i], r._$AI(s), i++;
|
|
411
|
+
i < o.length && (this._$AR(r && r._$AB.nextSibling, i), o.length = i);
|
|
412
|
+
}
|
|
413
|
+
_$AR(e = this._$AA.nextSibling, o) {
|
|
414
|
+
for (this._$AP?.(!1, !0, o); e !== this._$AB; ) {
|
|
415
|
+
const r = ge(e).nextSibling;
|
|
416
|
+
ge(e).remove(), e = r;
|
|
417
417
|
}
|
|
418
418
|
}
|
|
419
|
-
setConnected(
|
|
420
|
-
this._$AM === void 0 && (this._$Cv =
|
|
419
|
+
setConnected(e) {
|
|
420
|
+
this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
|
|
421
421
|
}
|
|
422
422
|
}
|
|
423
|
-
class
|
|
423
|
+
class oe {
|
|
424
424
|
get tagName() {
|
|
425
425
|
return this.element.tagName;
|
|
426
426
|
}
|
|
427
427
|
get _$AU() {
|
|
428
428
|
return this._$AM._$AU;
|
|
429
429
|
}
|
|
430
|
-
constructor(
|
|
431
|
-
this.type = 1, this._$AH = b, this._$AN = void 0, this.element =
|
|
430
|
+
constructor(e, o, r, i, s) {
|
|
431
|
+
this.type = 1, this._$AH = b, this._$AN = void 0, this.element = e, this.name = o, this._$AM = i, this.options = s, r.length > 2 || r[0] !== "" || r[1] !== "" ? (this._$AH = Array(r.length - 1).fill(new String()), this.strings = r) : this._$AH = b;
|
|
432
432
|
}
|
|
433
|
-
_$AI(
|
|
434
|
-
const
|
|
433
|
+
_$AI(e, o = this, r, i) {
|
|
434
|
+
const s = this.strings;
|
|
435
435
|
let n = !1;
|
|
436
|
-
if (
|
|
436
|
+
if (s === void 0) e = L(this, e, o, 0), n = !q(e) || e !== this._$AH && e !== T, n && (this._$AH = e);
|
|
437
437
|
else {
|
|
438
|
-
const l =
|
|
438
|
+
const l = e;
|
|
439
439
|
let a, c;
|
|
440
|
-
for (
|
|
440
|
+
for (e = s[0], a = 0; a < s.length - 1; a++) c = L(this, l[r + a], o, a), c === T && (c = this._$AH[a]), n ||= !q(c) || c !== this._$AH[a], c === b ? e = b : e !== b && (e += (c ?? "") + s[a + 1]), this._$AH[a] = c;
|
|
441
441
|
}
|
|
442
|
-
n && !
|
|
442
|
+
n && !i && this.j(e);
|
|
443
443
|
}
|
|
444
|
-
j(
|
|
445
|
-
|
|
444
|
+
j(e) {
|
|
445
|
+
e === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
|
|
446
446
|
}
|
|
447
447
|
}
|
|
448
|
-
class
|
|
448
|
+
class Ze extends oe {
|
|
449
449
|
constructor() {
|
|
450
450
|
super(...arguments), this.type = 3;
|
|
451
451
|
}
|
|
452
|
-
j(
|
|
453
|
-
this.element[this.name] =
|
|
452
|
+
j(e) {
|
|
453
|
+
this.element[this.name] = e === b ? void 0 : e;
|
|
454
454
|
}
|
|
455
455
|
}
|
|
456
|
-
class
|
|
456
|
+
class Xe extends oe {
|
|
457
457
|
constructor() {
|
|
458
458
|
super(...arguments), this.type = 4;
|
|
459
459
|
}
|
|
460
|
-
j(
|
|
461
|
-
this.element.toggleAttribute(this.name, !!
|
|
460
|
+
j(e) {
|
|
461
|
+
this.element.toggleAttribute(this.name, !!e && e !== b);
|
|
462
462
|
}
|
|
463
463
|
}
|
|
464
|
-
class
|
|
465
|
-
constructor(
|
|
466
|
-
super(
|
|
464
|
+
class Ge extends oe {
|
|
465
|
+
constructor(e, o, r, i, s) {
|
|
466
|
+
super(e, o, r, i, s), this.type = 5;
|
|
467
467
|
}
|
|
468
|
-
_$AI(
|
|
469
|
-
if ((
|
|
470
|
-
const
|
|
471
|
-
|
|
468
|
+
_$AI(e, o = this) {
|
|
469
|
+
if ((e = L(this, e, o, 0) ?? b) === T) return;
|
|
470
|
+
const r = this._$AH, i = e === b && r !== b || e.capture !== r.capture || e.once !== r.once || e.passive !== r.passive, s = e !== b && (r === b || i);
|
|
471
|
+
i && this.element.removeEventListener(this.name, this, r), s && this.element.addEventListener(this.name, this, e), this._$AH = e;
|
|
472
472
|
}
|
|
473
|
-
handleEvent(
|
|
474
|
-
typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element,
|
|
473
|
+
handleEvent(e) {
|
|
474
|
+
typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
|
|
475
475
|
}
|
|
476
476
|
}
|
|
477
|
-
class
|
|
478
|
-
constructor(
|
|
479
|
-
this.element =
|
|
477
|
+
class Je {
|
|
478
|
+
constructor(e, o, r) {
|
|
479
|
+
this.element = e, this.type = 6, this._$AN = void 0, this._$AM = o, this.options = r;
|
|
480
480
|
}
|
|
481
481
|
get _$AU() {
|
|
482
482
|
return this._$AM._$AU;
|
|
483
483
|
}
|
|
484
|
-
_$AI(
|
|
485
|
-
|
|
484
|
+
_$AI(e) {
|
|
485
|
+
L(this, e);
|
|
486
486
|
}
|
|
487
487
|
}
|
|
488
|
-
const
|
|
489
|
-
|
|
490
|
-
const
|
|
491
|
-
const
|
|
492
|
-
let
|
|
493
|
-
if (
|
|
494
|
-
const
|
|
495
|
-
|
|
496
|
-
}
|
|
497
|
-
return
|
|
488
|
+
const Qe = ae.litHtmlPolyfillSupport;
|
|
489
|
+
Qe?.(W, X), (ae.litHtmlVersions ??= []).push("3.3.2");
|
|
490
|
+
const et = (t, e, o) => {
|
|
491
|
+
const r = o?.renderBefore ?? e;
|
|
492
|
+
let i = r._$litPart$;
|
|
493
|
+
if (i === void 0) {
|
|
494
|
+
const s = o?.renderBefore ?? null;
|
|
495
|
+
r._$litPart$ = i = new X(e.insertBefore(I(), s), s, void 0, o ?? {});
|
|
496
|
+
}
|
|
497
|
+
return i._$AI(t), i;
|
|
498
498
|
};
|
|
499
|
-
const
|
|
500
|
-
let
|
|
499
|
+
const he = globalThis;
|
|
500
|
+
let F = class extends N {
|
|
501
501
|
constructor() {
|
|
502
502
|
super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
|
|
503
503
|
}
|
|
504
504
|
createRenderRoot() {
|
|
505
|
-
const
|
|
506
|
-
return this.renderOptions.renderBefore ??=
|
|
505
|
+
const e = super.createRenderRoot();
|
|
506
|
+
return this.renderOptions.renderBefore ??= e.firstChild, e;
|
|
507
507
|
}
|
|
508
|
-
update(
|
|
508
|
+
update(e) {
|
|
509
509
|
const o = this.render();
|
|
510
|
-
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(
|
|
510
|
+
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = et(o, this.renderRoot, this.renderOptions);
|
|
511
511
|
}
|
|
512
512
|
connectedCallback() {
|
|
513
513
|
super.connectedCallback(), this._$Do?.setConnected(!0);
|
|
@@ -516,26 +516,26 @@ let N = class extends V {
|
|
|
516
516
|
super.disconnectedCallback(), this._$Do?.setConnected(!1);
|
|
517
517
|
}
|
|
518
518
|
render() {
|
|
519
|
-
return
|
|
519
|
+
return T;
|
|
520
520
|
}
|
|
521
521
|
};
|
|
522
|
-
|
|
523
|
-
const
|
|
524
|
-
|
|
525
|
-
(
|
|
526
|
-
const
|
|
527
|
-
var
|
|
528
|
-
for (var
|
|
529
|
-
(n =
|
|
530
|
-
return
|
|
522
|
+
F._$litElement$ = !0, F.finalized = !0, he.litElementHydrateSupport?.({ LitElement: F });
|
|
523
|
+
const tt = he.litElementPolyfillSupport;
|
|
524
|
+
tt?.({ LitElement: F });
|
|
525
|
+
(he.litElementVersions ??= []).push("4.2.2");
|
|
526
|
+
const ot = E`:host{cursor:pointer;-webkit-user-select:none;user-select:none;width:calc(1rem + 2px);height:calc(1rem + 2px)}:host([disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{position:relative;transition:opacity .2s ease}.checkbox-box{width:1rem;height:1rem;border-radius:.25rem;background-color:var(--nf-background-color);border:1px solid var(--nf-border-color);display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease}:host(:hover:not([checked]):not([disabled])) .checkbox-box{border-color:var(--nf-primary-color,var(--nf-primary-color))}:host([checked]) .checkbox-box{background-color:var(--nf-primary-color,var(--nf-primary-color));border-color:var(--nf-primary-color,var(--nf-primary-color))}:host([disabled]) .checkbox-box{border-color:#fffc;background:#fffc;cursor:not-allowed;pointer-events:none}:host([disabled][checked]) .checkbox-box{background-color:#fffc;border-color:#fffc}.checkbox-icon{color:#fff;font-size:.75rem;line-height:1;font-weight:700;transition:transform .2s ease;display:flex;align-items:center}:host([checked]) .checkbox-icon{transform:scale(1)}:host(:focus) .checkbox-container{outline:.125rem solid var(--nf-primary-color,var(--nf-primary-color));outline-offset:.125rem}`, C = (t) => (e) => (typeof window > "u" || customElements.get(t) || customElements.define(t, e), e);
|
|
527
|
+
var rt = Object.defineProperty, it = Object.getOwnPropertyDescriptor, ce = (t, e, o, r) => {
|
|
528
|
+
for (var i = r > 1 ? void 0 : r ? it(e, o) : e, s = t.length - 1, n; s >= 0; s--)
|
|
529
|
+
(n = t[s]) && (i = (r ? n(e, o, i) : n(i)) || i);
|
|
530
|
+
return r && i && rt(e, o, i), i;
|
|
531
531
|
};
|
|
532
|
-
let K = class extends
|
|
532
|
+
let K = class extends F {
|
|
533
533
|
constructor() {
|
|
534
534
|
super(...arguments), this.checked = !1, this.disabled = !1;
|
|
535
535
|
}
|
|
536
536
|
// 切换复选框状态
|
|
537
|
-
toggleCheckbox(
|
|
538
|
-
this.disabled || (
|
|
537
|
+
toggleCheckbox(t) {
|
|
538
|
+
this.disabled || (t.stopPropagation(), this.checked = !this.checked, this.dispatchEvent(
|
|
539
539
|
new CustomEvent("change", {
|
|
540
540
|
bubbles: !0,
|
|
541
541
|
composed: !0,
|
|
@@ -545,7 +545,7 @@ let K = class extends N {
|
|
|
545
545
|
}
|
|
546
546
|
// 渲染复选框组件
|
|
547
547
|
render() {
|
|
548
|
-
return
|
|
548
|
+
return ie`<div class=checkbox-container @click=${this.toggleCheckbox} aria-checked=${this.checked} aria-disabled=${this.disabled} role=checkbox><div class=checkbox-box>${this.checked ? ie`<div class=checkbox-icon><svg viewBox="64 64 896 896"focusable=false data-icon=check width=0.625rem height=0.625rem fill=currentColor aria-hidden=true><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></div>` : ""}</div></div>`;
|
|
549
549
|
}
|
|
550
550
|
connectedCallback() {
|
|
551
551
|
this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
|
|
@@ -553,36 +553,36 @@ let K = class extends N {
|
|
|
553
553
|
});
|
|
554
554
|
}
|
|
555
555
|
};
|
|
556
|
-
K.styles = [
|
|
557
|
-
|
|
556
|
+
K.styles = [ot];
|
|
557
|
+
ce([
|
|
558
558
|
h({ type: Boolean, reflect: !0 })
|
|
559
559
|
], K.prototype, "checked", 2);
|
|
560
|
-
|
|
560
|
+
ce([
|
|
561
561
|
h({ type: Boolean, reflect: !0 })
|
|
562
562
|
], K.prototype, "disabled", 2);
|
|
563
|
-
K =
|
|
564
|
-
|
|
563
|
+
K = ce([
|
|
564
|
+
C("nf-checkbox")
|
|
565
565
|
], K);
|
|
566
|
-
const U =
|
|
567
|
-
var
|
|
568
|
-
for (var
|
|
569
|
-
(n =
|
|
570
|
-
return
|
|
566
|
+
const U = E`:host{display:inline-flex;align-items:center;position:relative;width:var(--nf-width);height:var(--nf-height);padding:var(--nf-padding);margin:var(--nf-margin);font-size:var(--nf-text-font-size);font-weight:var(--nf-font-weight);color:var(--nf-color);background:var(--nf-background-color);border-radius:var(--nf-border-radius);border:1px solid var(--nf-border-color);outline:0;background-clip:padding-box;box-shadow:0 0 0 .15rem var(--nf-box-shadow-color);transition:color var(--nf-transition) ease-in-out,background-color var(--nf-transition) ease-in-out,border-color var(--nf-transition) ease-in-out,box-shadow var(--nf-transition) ease-in-out}:host(:focus){border-color:var(--nf-border-color-hover);box-shadow:0 0 0 .15rem var(--nf-box-shadow-color-focus);background:var(--nf-background-color-hover)}:host(:hover:not([disabled])){border-color:var(--nf-border-color-hover);background:var(--nf-background-color-hover)}:host([disabled]){cursor:not-allowed;opacity:.6;pointer-events:auto}:host([disabled]:hover){border-color:var(--nf-border-color);background:var(--nf-background-color)}`, st = E`:host{display:inline-block;position:relative;width:calc(.9rem + (var(--nf-height) - 1.25rem)/ 2 + 7ch)}:host(:not([disabled-alpha])){width:calc(.9rem + (var(--nf-height) - 1.25rem)/ 2 + 9ch)}:host([disabled]){cursor:not-allowed;opacity:.6}:host([disabled]:hover){border-color:var(--nf-border-color);background:var(--nf-background-color)}:host([open]){border-color:var(--nf-border-color-hover);box-shadow:0 0 0 .15rem var(--nf-box-shadow-color-focus)}.trigger{width:calc(100% + 1.5rem + 2px);height:calc(100% + 2px);margin:-1px -.75rem;padding:1px .75rem;box-sizing:border-box;display:flex;align-items:center;cursor:pointer;transition:all .2s;font-size:.875rem;position:relative}:host(:not([disabled])) .trigger:hover{border-color:var(--nf-color-primary)}.trigger[disabled]{cursor:not-allowed;opacity:.6}:host([disabled]) .trigger{cursor:not-allowed;color:var(--nf-color-disabled)}.color-block{width:1.25rem;height:1.25rem;border-radius:.125rem;margin-left:calc((var(--nf-height) - 1.25rem)/ 2 - .75rem);margin-right:.4rem}:host(.hide-text) .color-block{margin-right:calc((var(--nf-height) - 1.25rem)/ 2 - .75rem)}.color-text{flex:1;text-align:center;text-transform:uppercase}.panel{position:absolute;z-index:1000;background:var(--nf-color-picker-card-background,var(--nf-dropdown-background));-webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);border-radius:var(--nf-border-radius);box-shadow:0 6px 16px 0 var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow)),0 3px 6px -4px var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow)),0 9px 28px 8px var(--nf-color-picker-card-shadow,var(--nf-dropdown-shadow));-webkit-user-select:none;user-select:none}.panel-content{padding:.75rem;width:15rem}.color-selector{height:9.375rem;position:relative;margin-bottom:.75rem;border-radius:var(--nf-border-radius);overflow:hidden}.color-sb{width:100%;height:100%;position:relative;cursor:pointer}.sb-white{position:absolute;inset:0;background:linear-gradient(to right,#fff,#fff0)}.sb-black{position:absolute;inset:0;background:linear-gradient(to top,#000,#0000)}.selector{position:absolute;width:.625rem;height:.625rem;border:.125rem solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 .125rem #00000080;pointer-events:none}.slider-container{margin-bottom:.5rem}.slider-container:last-child{margin-bottom:0}.sliders-row{display:flex;align-items:center;gap:.75rem}.sliders{flex:1}.slider{position:relative;height:.75rem;border-radius:.375rem}.hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.alpha-slider{position:relative;background-image:linear-gradient(45deg,var(--nf-color-picker-card-checker,#ccc) 25%,transparent 25%),linear-gradient(-45deg,var(--nf-color-picker-card-checker,#ccc) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--nf-color-picker-card-checker,#ccc) 75%),linear-gradient(-45deg,transparent 75%,var(--nf-color-picker-card-checker,#ccc) 75%);background-size:.375rem .375rem;background-position:0 0,0 .1875rem,.1875rem -.1875rem,-.1875rem 0;background-color:var(--nf-color-picker-card-checker-bg,#fff);border-radius:.375rem}.alpha-slider-input{position:relative;z-index:2}.alpha-gradient{position:absolute;inset:0;border-radius:.375rem}input[type=range]{-webkit-appearance:none;width:100%;height:100%;background:0 0;outline:0;position:absolute;top:0;left:0;margin:0;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1rem;height:1rem;border-radius:50%;background:#fff;border:.125rem solid var(--nf-color-border);cursor:pointer;box-shadow:0 0 .125rem #00000080;position:relative;z-index:1}input[type=range]::-moz-range-thumb{width:1rem;height:1rem;border-radius:50%;background:#fff;border:.125rem solid var(--nf-color-border);cursor:pointer;box-shadow:0 0 .125rem #00000080}.current-color-container{display:flex}.current-color{width:2rem;height:2rem;border-radius:var(--nf-border-radius);border:.0625rem solid var(--nf-color-border)}:host(:not([disabled-alpha])) .current-color{width:2.5rem;height:2.5rem}`;
|
|
567
|
+
var nt = Object.defineProperty, at = Object.getOwnPropertyDescriptor, y = (t, e, o, r) => {
|
|
568
|
+
for (var i = r > 1 ? void 0 : r ? at(e, o) : e, s = t.length - 1, n; s >= 0; s--)
|
|
569
|
+
(n = t[s]) && (i = (r ? n(e, o, i) : n(i)) || i);
|
|
570
|
+
return r && i && nt(e, o, i), i;
|
|
571
571
|
};
|
|
572
|
-
let g = class extends
|
|
572
|
+
let g = class extends B {
|
|
573
573
|
constructor() {
|
|
574
|
-
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 = (
|
|
575
|
-
this._panelVisible && !this.contains(
|
|
576
|
-
}, this._handleKeyDown = (
|
|
577
|
-
this._panelVisible &&
|
|
578
|
-
}, this._handleSBMouseDown = (
|
|
579
|
-
|
|
580
|
-
}, this._handleSBMouseMove = (
|
|
581
|
-
|
|
574
|
+
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) => {
|
|
575
|
+
this._panelVisible && !this.contains(t.target) && this._closePanel();
|
|
576
|
+
}, this._handleKeyDown = (t) => {
|
|
577
|
+
this._panelVisible && t.key === "Escape" && this._closePanel();
|
|
578
|
+
}, this._handleSBMouseDown = (t) => {
|
|
579
|
+
t.preventDefault(), this._handleSBChange(t), document.addEventListener("mousemove", this._handleSBMouseMove), document.addEventListener("mouseup", this._handleSBMouseUp);
|
|
580
|
+
}, this._handleSBMouseMove = (t) => {
|
|
581
|
+
t.preventDefault(), this._handleSBChange(t);
|
|
582
582
|
}, this._handleSBMouseUp = () => {
|
|
583
583
|
document.removeEventListener("mousemove", this._handleSBMouseMove), document.removeEventListener("mouseup", this._handleSBMouseUp);
|
|
584
|
-
}, this._handleSBTouchMove = (
|
|
585
|
-
|
|
584
|
+
}, this._handleSBTouchMove = (t) => {
|
|
585
|
+
t.preventDefault(), this._handleSBChange(t);
|
|
586
586
|
};
|
|
587
587
|
}
|
|
588
588
|
connectedCallback() {
|
|
@@ -596,47 +596,47 @@ let g = class extends L {
|
|
|
596
596
|
firstUpdated() {
|
|
597
597
|
this._updateInternalValue(this.value), this._updateHSBFromHex(this._internalValue), this.classList.toggle("hide-text", !this.showText);
|
|
598
598
|
}
|
|
599
|
-
updated(
|
|
600
|
-
|
|
599
|
+
updated(t) {
|
|
600
|
+
t.has("value") && (this._updateInternalValue(this.value), this._updateHSBFromHex(this._internalValue)), t.has("open") && (this._panelVisible = this.open, this.open && this._updatePanelPosition()), t.has("showText") && this.classList.toggle("hide-text", !this.showText);
|
|
601
601
|
}
|
|
602
602
|
// 更新内部颜色值
|
|
603
|
-
_updateInternalValue(
|
|
604
|
-
if (
|
|
605
|
-
const
|
|
606
|
-
|
|
603
|
+
_updateInternalValue(t) {
|
|
604
|
+
if (t.startsWith("#")) {
|
|
605
|
+
const e = t.slice(1);
|
|
606
|
+
e.length === 6 ? this._internalValue = t + "FF" : e.length === 8 ? this._internalValue = t : this._internalValue = "#FF0000FF";
|
|
607
607
|
} else
|
|
608
608
|
this._internalValue = "#FF0000FF";
|
|
609
609
|
}
|
|
610
610
|
// 从HEX颜色值更新HSB值
|
|
611
|
-
_updateHSBFromHex(
|
|
612
|
-
const
|
|
611
|
+
_updateHSBFromHex(t) {
|
|
612
|
+
const e = parseInt(t.slice(1, 3), 16) / 255, o = parseInt(t.slice(3, 5), 16) / 255, r = parseInt(t.slice(5, 7), 16) / 255, i = Math.max(e, o, r), s = Math.min(e, o, r), n = i - s;
|
|
613
613
|
let l = 0, a = 0;
|
|
614
|
-
const c =
|
|
615
|
-
n !== 0 && (a = n /
|
|
614
|
+
const c = i;
|
|
615
|
+
n !== 0 && (a = n / i, i === e ? l = (o - r) / n % 6 : i === o ? l = (r - e) / n + 2 : l = (e - o) / n + 4, l *= 60, l < 0 && (l += 360)), this._hsb = {
|
|
616
616
|
h: Math.round(l),
|
|
617
617
|
s: Math.round(a * 100),
|
|
618
618
|
b: Math.round(c * 100)
|
|
619
619
|
};
|
|
620
620
|
}
|
|
621
621
|
// 从HSB值生成HEX颜色值
|
|
622
|
-
_generateHexFromHSB(
|
|
623
|
-
|
|
624
|
-
const
|
|
622
|
+
_generateHexFromHSB(t, e, o, r = "FF") {
|
|
623
|
+
e /= 100, o /= 100;
|
|
624
|
+
const i = o * e, s = i * (1 - Math.abs(t / 60 % 2 - 1)), n = o - i;
|
|
625
625
|
let l = 0, a = 0, c = 0;
|
|
626
|
-
return 0 <=
|
|
626
|
+
return 0 <= t && t < 60 ? (l = i, a = s, c = 0) : 60 <= t && t < 120 ? (l = s, a = i, c = 0) : 120 <= t && t < 180 ? (l = 0, a = i, c = s) : 180 <= t && t < 240 ? (l = 0, a = s, c = i) : 240 <= t && t < 300 ? (l = s, a = 0, c = i) : 300 <= t && t < 360 && (l = i, a = 0, c = s), 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") + r;
|
|
627
627
|
}
|
|
628
628
|
// 计算面板位置
|
|
629
629
|
_updatePanelPosition() {
|
|
630
630
|
requestAnimationFrame(() => {
|
|
631
|
-
const
|
|
632
|
-
if (!
|
|
633
|
-
const o = 0.15 * 16,
|
|
631
|
+
const t = this.getBoundingClientRect(), e = this.shadowRoot?.querySelector(".panel");
|
|
632
|
+
if (!e) return;
|
|
633
|
+
const o = 0.15 * 16, r = 8, i = e.offsetWidth || 240, s = e.offsetHeight || 300;
|
|
634
634
|
let n = this.placement, l = this.align;
|
|
635
|
-
this.autoAdjust && (n === "bottom" ? window.innerHeight -
|
|
635
|
+
this.autoAdjust && (n === "bottom" ? window.innerHeight - t.bottom - r < s && t.top - r >= s && (n = "top") : t.top - r < s && window.innerHeight - t.bottom - r >= s && (n = "bottom"), l === "right" ? t.right - o < i && t.left + t.width + o + i <= window.innerWidth && (l = "left") : t.left - o + i > window.innerWidth && t.right - o >= i && (l = "right"));
|
|
636
636
|
let a;
|
|
637
|
-
n === "bottom" ? a =
|
|
637
|
+
n === "bottom" ? a = t.height + r : a = -s - r;
|
|
638
638
|
let c;
|
|
639
|
-
l === "right" ? c =
|
|
639
|
+
l === "right" ? c = t.width - i + o : c = -o, this._panelPosition = { top: a, left: c };
|
|
640
640
|
});
|
|
641
641
|
}
|
|
642
642
|
// 打开面板
|
|
@@ -662,47 +662,47 @@ let g = class extends L {
|
|
|
662
662
|
this._panelVisible ? this._closePanel() : this._openPanel();
|
|
663
663
|
}
|
|
664
664
|
// 处理HSB颜色变化
|
|
665
|
-
_handleHSBChange(
|
|
666
|
-
this._hsb = { h:
|
|
667
|
-
const
|
|
668
|
-
this._handleColorChange(
|
|
665
|
+
_handleHSBChange(t, e, o) {
|
|
666
|
+
this._hsb = { h: t, s: e, b: o };
|
|
667
|
+
const r = this._internalValue.slice(7), i = this._generateHexFromHSB(t, e, o, r);
|
|
668
|
+
this._handleColorChange(i);
|
|
669
669
|
}
|
|
670
670
|
// 处理Alpha值变化
|
|
671
|
-
_handleAlphaChange(
|
|
672
|
-
const
|
|
671
|
+
_handleAlphaChange(t) {
|
|
672
|
+
const e = Math.round(t * 255 / 100).toString(16).padStart(2, "0").toUpperCase(), o = "#" + this._internalValue.slice(1, 7) + e;
|
|
673
673
|
this._handleColorChange(o);
|
|
674
674
|
}
|
|
675
675
|
// 处理颜色变化
|
|
676
|
-
_handleColorChange(
|
|
677
|
-
this._internalValue =
|
|
678
|
-
const
|
|
676
|
+
_handleColorChange(t) {
|
|
677
|
+
this._internalValue = t;
|
|
678
|
+
const e = this.disabledAlpha || t.endsWith("FF") ? "#" + t.slice(1, 7) : t;
|
|
679
679
|
this.dispatchEvent(new CustomEvent("change", {
|
|
680
|
-
detail:
|
|
680
|
+
detail: e,
|
|
681
681
|
bubbles: !0,
|
|
682
682
|
composed: !0
|
|
683
683
|
}));
|
|
684
684
|
}
|
|
685
685
|
// 处理色相选择
|
|
686
|
-
_handleHueChange(
|
|
687
|
-
const
|
|
686
|
+
_handleHueChange(t) {
|
|
687
|
+
const e = t.target, o = parseInt(e.value);
|
|
688
688
|
this._handleHSBChange(o, this._hsb.s, this._hsb.b);
|
|
689
689
|
}
|
|
690
690
|
// 处理饱和度和亮度选择
|
|
691
|
-
_handleSBChange(
|
|
692
|
-
const
|
|
693
|
-
if (!
|
|
694
|
-
const o =
|
|
695
|
-
this._handleHSBChange(this._hsb.h,
|
|
691
|
+
_handleSBChange(t) {
|
|
692
|
+
const e = this.shadowRoot?.querySelector(".color-sb");
|
|
693
|
+
if (!e) return;
|
|
694
|
+
const o = e.getBoundingClientRect(), r = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, i = t instanceof MouseEvent ? t.clientY : t.touches[0].clientY, s = Math.max(0, Math.min(100, Math.round((r - o.left) / o.width * 100))), n = Math.max(0, Math.min(100, Math.round((1 - (i - o.top) / o.height) * 100)));
|
|
695
|
+
this._handleHSBChange(this._hsb.h, s, n);
|
|
696
696
|
}
|
|
697
697
|
// 处理透明度选择
|
|
698
|
-
_handleAlphaChangeInput(
|
|
699
|
-
const
|
|
698
|
+
_handleAlphaChangeInput(t) {
|
|
699
|
+
const e = t.target, o = parseInt(e.value);
|
|
700
700
|
this._handleAlphaChange(o);
|
|
701
701
|
}
|
|
702
702
|
// 渲染触发器
|
|
703
703
|
_renderTrigger() {
|
|
704
|
-
const
|
|
705
|
-
return
|
|
704
|
+
const t = "#" + this._internalValue.slice(1, 7), e = this._internalValue.slice(7);
|
|
705
|
+
return u`
|
|
706
706
|
<div
|
|
707
707
|
class="trigger"
|
|
708
708
|
@click="${this._togglePanel}"
|
|
@@ -710,20 +710,20 @@ let g = class extends L {
|
|
|
710
710
|
>
|
|
711
711
|
<div
|
|
712
712
|
class="color-block"
|
|
713
|
-
style="background-color: ${this.disabledAlpha ?
|
|
713
|
+
style="background-color: ${this.disabledAlpha ? t : this._internalValue}"
|
|
714
714
|
></div>
|
|
715
|
-
${this.showText ?
|
|
715
|
+
${this.showText ? u`<div class="color-text">${this.disabledAlpha || e === "FF" ? t : this._internalValue}</div>` : ""}
|
|
716
716
|
</div>
|
|
717
717
|
`;
|
|
718
718
|
}
|
|
719
719
|
// 渲染颜色选择区域
|
|
720
720
|
_renderColorSelector() {
|
|
721
|
-
const
|
|
722
|
-
return
|
|
721
|
+
const t = this._generateHexFromHSB(this._hsb.h, 100, 100, "FF"), e = this._hsb.s / 100 * 100, o = (1 - this._hsb.b / 100) * 100;
|
|
722
|
+
return u`
|
|
723
723
|
<div class="color-selector">
|
|
724
724
|
<div
|
|
725
725
|
class="color-sb"
|
|
726
|
-
style="background-color: ${
|
|
726
|
+
style="background-color: ${t};"
|
|
727
727
|
@mousedown="${this._handleSBMouseDown}"
|
|
728
728
|
@touchstart="${this._handleSBTouchMove}"
|
|
729
729
|
@touchmove="${this._handleSBTouchMove}"
|
|
@@ -732,7 +732,7 @@ let g = class extends L {
|
|
|
732
732
|
<div class="sb-black"></div>
|
|
733
733
|
<div
|
|
734
734
|
class="selector"
|
|
735
|
-
style="left: ${
|
|
735
|
+
style="left: ${e}%; top: ${o}%;"
|
|
736
736
|
></div>
|
|
737
737
|
</div>
|
|
738
738
|
</div>
|
|
@@ -740,7 +740,7 @@ let g = class extends L {
|
|
|
740
740
|
}
|
|
741
741
|
// 渲染色相选择条
|
|
742
742
|
_renderHueSlider() {
|
|
743
|
-
return
|
|
743
|
+
return u`
|
|
744
744
|
<div class="slider-container">
|
|
745
745
|
<div class="slider hue-slider">
|
|
746
746
|
<input
|
|
@@ -758,19 +758,19 @@ let g = class extends L {
|
|
|
758
758
|
// 渲染透明度选择条
|
|
759
759
|
_renderAlphaSlider() {
|
|
760
760
|
if (this.disabledAlpha) return null;
|
|
761
|
-
const
|
|
762
|
-
return
|
|
761
|
+
const t = parseInt(this._internalValue.slice(7), 16) / 255 * 100, e = "#" + this._internalValue.slice(1, 7);
|
|
762
|
+
return u`
|
|
763
763
|
<div class="slider-container">
|
|
764
764
|
<div class="slider alpha-slider">
|
|
765
765
|
<div
|
|
766
766
|
class="alpha-gradient"
|
|
767
|
-
style="background: linear-gradient(to right, transparent, ${
|
|
767
|
+
style="background: linear-gradient(to right, transparent, ${e})"
|
|
768
768
|
></div>
|
|
769
769
|
<input
|
|
770
770
|
type="range"
|
|
771
771
|
min="0"
|
|
772
772
|
max="100"
|
|
773
|
-
.value="${Math.round(
|
|
773
|
+
.value="${Math.round(t).toString()}"
|
|
774
774
|
@input="${this._handleAlphaChangeInput}"
|
|
775
775
|
class="alpha-slider-input"
|
|
776
776
|
>
|
|
@@ -780,7 +780,7 @@ let g = class extends L {
|
|
|
780
780
|
}
|
|
781
781
|
// 渲染当前颜色显示
|
|
782
782
|
_renderCurrentColor() {
|
|
783
|
-
return
|
|
783
|
+
return u`
|
|
784
784
|
<div class="current-color-container">
|
|
785
785
|
<div
|
|
786
786
|
class="current-color"
|
|
@@ -791,7 +791,7 @@ let g = class extends L {
|
|
|
791
791
|
}
|
|
792
792
|
// 渲染颜色面板
|
|
793
793
|
_renderPanel() {
|
|
794
|
-
return this._panelVisible ?
|
|
794
|
+
return this._panelVisible ? u`
|
|
795
795
|
<div
|
|
796
796
|
class="panel"
|
|
797
797
|
style="top: ${this._panelPosition.top}px; left: ${this._panelPosition.left}px;"
|
|
@@ -810,13 +810,13 @@ let g = class extends L {
|
|
|
810
810
|
` : null;
|
|
811
811
|
}
|
|
812
812
|
render() {
|
|
813
|
-
return
|
|
813
|
+
return u`
|
|
814
814
|
${this._renderTrigger()}
|
|
815
815
|
${this._renderPanel()}
|
|
816
816
|
`;
|
|
817
817
|
}
|
|
818
818
|
};
|
|
819
|
-
g.styles = [U,
|
|
819
|
+
g.styles = [U, st];
|
|
820
820
|
y([
|
|
821
821
|
h({ type: String })
|
|
822
822
|
], g.prototype, "value", 2);
|
|
@@ -834,8 +834,8 @@ y([
|
|
|
834
834
|
attribute: "show-text",
|
|
835
835
|
reflect: !0,
|
|
836
836
|
converter: {
|
|
837
|
-
fromAttribute: (
|
|
838
|
-
toAttribute: (
|
|
837
|
+
fromAttribute: (t) => t !== "false",
|
|
838
|
+
toAttribute: (t) => t ? null : "false"
|
|
839
839
|
}
|
|
840
840
|
})
|
|
841
841
|
], g.prototype, "showText", 2);
|
|
@@ -849,8 +849,8 @@ y([
|
|
|
849
849
|
h({
|
|
850
850
|
attribute: "auto-adjust",
|
|
851
851
|
converter: {
|
|
852
|
-
fromAttribute: (
|
|
853
|
-
toAttribute: (
|
|
852
|
+
fromAttribute: (t) => t !== "false",
|
|
853
|
+
toAttribute: (t) => t ? null : "false"
|
|
854
854
|
}
|
|
855
855
|
})
|
|
856
856
|
], g.prototype, "autoAdjust", 2);
|
|
@@ -867,67 +867,102 @@ y([
|
|
|
867
867
|
_()
|
|
868
868
|
], g.prototype, "_panelPosition", 2);
|
|
869
869
|
g = y([
|
|
870
|
-
|
|
870
|
+
C("nf-color-picker")
|
|
871
871
|
], g);
|
|
872
|
-
const
|
|
873
|
-
var
|
|
874
|
-
for (var
|
|
875
|
-
(n =
|
|
876
|
-
return
|
|
872
|
+
const lt = E`:host{display:inline-block;--nf-empty-image-background:var(--nf-background-color);--nf-empty-image-color:color-mix(in srgb, var(--nf-color), #000000 30%);--nf-empty-description-color:var(--nf-color)}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;text-align:center}.empty-image{margin-bottom:.5rem;display:flex;align-items:center;justify-content:center}.empty-image img{max-width:100%;height:auto}.empty-image svg{display:block}.empty-description{margin-top:.5rem;color:var(--nf-empty-description-color);font-size:.875rem;line-height:1.5715}.empty-description:empty{display:none}.empty-footer{margin-top:1rem}.empty-footer:empty{display:none}`;
|
|
873
|
+
var ht = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, de = (t, e, o, r) => {
|
|
874
|
+
for (var i = r > 1 ? void 0 : r ? ct(e, o) : e, s = t.length - 1, n; s >= 0; s--)
|
|
875
|
+
(n = t[s]) && (i = (r ? n(e, o, i) : n(i)) || i);
|
|
876
|
+
return r && i && ht(e, o, i), i;
|
|
877
|
+
};
|
|
878
|
+
let Y = class extends B {
|
|
879
|
+
constructor() {
|
|
880
|
+
super(...arguments), this.description = "No Data", this.image = !1;
|
|
881
|
+
}
|
|
882
|
+
render() {
|
|
883
|
+
return u`<div class=empty-container>${this.image ? u`<div class=empty-image>${this.renderDefaultImage()}</div>` : null}<slot></slot>${this.description ? u`<div class=empty-description>${this.description}</div>` : null}</div>`;
|
|
884
|
+
}
|
|
885
|
+
// private renderCustomImage() {
|
|
886
|
+
// return html`<img src=${this.image!} alt="empty" />`
|
|
887
|
+
// }
|
|
888
|
+
renderDefaultImage() {
|
|
889
|
+
return u`<svg width=64 height=41 viewBox="0 0 64 41"xmlns=http://www.w3.org/2000/svg><g transform="translate(0 1)"fill=none fill-rule=evenodd><ellipse fill=var(--nf-empty-image-background) cx=32 cy=33 rx=32 ry=7 /><g fill-rule=nonzero stroke=var(--nf-empty-image-color)><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"fill=var(--nf-empty-image-color) /></g></g></svg>`;
|
|
890
|
+
}
|
|
891
|
+
connectedCallback() {
|
|
892
|
+
this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
|
|
893
|
+
this.style.transition = "";
|
|
894
|
+
});
|
|
895
|
+
}
|
|
896
|
+
};
|
|
897
|
+
Y.styles = [lt];
|
|
898
|
+
de([
|
|
899
|
+
h({ type: String })
|
|
900
|
+
], Y.prototype, "description", 2);
|
|
901
|
+
de([
|
|
902
|
+
h({ type: Boolean })
|
|
903
|
+
], Y.prototype, "image", 2);
|
|
904
|
+
Y = de([
|
|
905
|
+
C("nf-empty")
|
|
906
|
+
], Y);
|
|
907
|
+
const dt = E`:host{width:var(--nf-width);position:relative;display:inline-block;--nf-input-padding:0 .75rem}: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}`;
|
|
908
|
+
var ut = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, V = (t, e, o, r) => {
|
|
909
|
+
for (var i = r > 1 ? void 0 : r ? pt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
|
|
910
|
+
(n = t[s]) && (i = (r ? n(e, o, i) : n(i)) || i);
|
|
911
|
+
return r && i && ut(e, o, i), i;
|
|
877
912
|
};
|
|
878
|
-
let
|
|
913
|
+
let A = class extends B {
|
|
879
914
|
constructor() {
|
|
880
|
-
super(...arguments), this.value = "", this.placeholder = "", this.type = "text", this.disabled = !1, this.showPassword = !1, this.onInput = (
|
|
881
|
-
|
|
882
|
-
const
|
|
915
|
+
super(...arguments), this.value = "", this.placeholder = "", this.type = "text", this.disabled = !1, this.showPassword = !1, this.onInput = (t) => {
|
|
916
|
+
t.stopPropagation();
|
|
917
|
+
const e = t.target?.value;
|
|
883
918
|
this.dispatchEvent(
|
|
884
919
|
new CustomEvent("input", {
|
|
885
|
-
detail:
|
|
920
|
+
detail: e,
|
|
886
921
|
bubbles: !0,
|
|
887
922
|
composed: !0
|
|
888
923
|
})
|
|
889
|
-
),
|
|
924
|
+
), e !== void 0 && this.value !== e && this.dispatchEvent(
|
|
890
925
|
new CustomEvent("change", {
|
|
891
|
-
detail:
|
|
926
|
+
detail: e,
|
|
892
927
|
bubbles: !0,
|
|
893
928
|
composed: !0
|
|
894
929
|
})
|
|
895
930
|
);
|
|
896
|
-
}, this.onChange = (
|
|
897
|
-
|
|
898
|
-
const
|
|
899
|
-
|
|
931
|
+
}, this.onChange = (t) => {
|
|
932
|
+
t.stopPropagation();
|
|
933
|
+
const e = t.target?.value;
|
|
934
|
+
e !== void 0 && this.value !== e && this.dispatchEvent(
|
|
900
935
|
new CustomEvent("change", {
|
|
901
|
-
detail:
|
|
936
|
+
detail: e,
|
|
902
937
|
bubbles: !0,
|
|
903
938
|
composed: !0
|
|
904
939
|
})
|
|
905
940
|
);
|
|
906
|
-
}, this.onKeyDown = (
|
|
907
|
-
if (
|
|
908
|
-
|
|
909
|
-
const
|
|
910
|
-
|
|
941
|
+
}, this.onKeyDown = (t) => {
|
|
942
|
+
if (t.key === "Enter") {
|
|
943
|
+
t.stopPropagation();
|
|
944
|
+
const e = t.target?.value;
|
|
945
|
+
e !== void 0 && this.dispatchEvent(
|
|
911
946
|
new CustomEvent("pressEnter", {
|
|
912
|
-
detail:
|
|
947
|
+
detail: e,
|
|
913
948
|
bubbles: !0,
|
|
914
949
|
composed: !0
|
|
915
950
|
})
|
|
916
951
|
);
|
|
917
952
|
}
|
|
918
|
-
}, this.togglePasswordVisibility = (
|
|
919
|
-
this.disabled || (
|
|
953
|
+
}, this.togglePasswordVisibility = (t) => {
|
|
954
|
+
this.disabled || (t.preventDefault(), t.stopPropagation(), this.showPassword = !this.showPassword);
|
|
920
955
|
};
|
|
921
956
|
}
|
|
922
957
|
render() {
|
|
923
|
-
const
|
|
924
|
-
return
|
|
958
|
+
const t = this.type === "password" && !this.showPassword ? "password" : "text", e = this.type === "password";
|
|
959
|
+
return u`<slot></slot><input class=input type=${t} .value=${this.value} placeholder=${this.placeholder} maxlength=${this.maxLength ?? ""} ?disabled=${this.disabled} @input=${this.onInput} @change=${this.onChange} @keydown=${this.onKeyDown}> ${e ? u`<button class=toggle-password type=button tabindex=-1 @click=${this.togglePasswordVisibility} aria-label=${this.showPassword ? "Hide password" : "Show password"}>${this.showPassword ? this.renderEyeOffIcon() : this.renderEyeIcon()}</button>` : ""}`;
|
|
925
960
|
}
|
|
926
961
|
renderEyeIcon() {
|
|
927
|
-
return
|
|
962
|
+
return u`<svg width=16 height=16 viewBox="0 0 24 24"stroke=currentColor stroke-width=2><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>`;
|
|
928
963
|
}
|
|
929
964
|
renderEyeOffIcon() {
|
|
930
|
-
return
|
|
965
|
+
return u`<svg width=16 height=16 viewBox="0 0 24 24"stroke=currentColor stroke-width=2><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 y1=1 x2=23 y2=23 /></svg>`;
|
|
931
966
|
}
|
|
932
967
|
connectedCallback() {
|
|
933
968
|
this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
|
|
@@ -935,124 +970,124 @@ let S = class extends L {
|
|
|
935
970
|
});
|
|
936
971
|
}
|
|
937
972
|
};
|
|
938
|
-
|
|
939
|
-
|
|
973
|
+
A.styles = [U, dt];
|
|
974
|
+
V([
|
|
940
975
|
h({ type: String })
|
|
941
|
-
],
|
|
942
|
-
|
|
976
|
+
], A.prototype, "value", 2);
|
|
977
|
+
V([
|
|
943
978
|
h({ type: String })
|
|
944
|
-
],
|
|
945
|
-
|
|
979
|
+
], A.prototype, "placeholder", 2);
|
|
980
|
+
V([
|
|
946
981
|
h({ type: String })
|
|
947
|
-
],
|
|
948
|
-
|
|
982
|
+
], A.prototype, "type", 2);
|
|
983
|
+
V([
|
|
949
984
|
h({ type: Number })
|
|
950
|
-
],
|
|
951
|
-
|
|
985
|
+
], A.prototype, "maxLength", 2);
|
|
986
|
+
V([
|
|
952
987
|
h({ type: Boolean, reflect: !0 })
|
|
953
|
-
],
|
|
954
|
-
|
|
988
|
+
], A.prototype, "disabled", 2);
|
|
989
|
+
V([
|
|
955
990
|
_()
|
|
956
|
-
],
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
],
|
|
960
|
-
const
|
|
961
|
-
var
|
|
962
|
-
for (var
|
|
963
|
-
(n =
|
|
964
|
-
return
|
|
991
|
+
], A.prototype, "showPassword", 2);
|
|
992
|
+
A = V([
|
|
993
|
+
C("nf-input")
|
|
994
|
+
], A);
|
|
995
|
+
const ft = E`:host{width:10rem;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0;overflow:hidden;--nf-input-number-color:var(--nf-color);--nf-input-number-prefix-color:color-mix(in srgb, var(--nf-color), transparent 20%);--nf-input-number-surfix-color:color-mix(in srgb, var(--nf-color), transparent 20%)}.input-number{position:relative;padding-right:.6125rem;flex:1;height:100%;outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-input-number-color);font-weight:var(--nf-font-weight);text-align:left;transition:padding-right var(--nf-transition-fast) ease}.input-number .input-number-input-wrapper{height:100%}.input-number .input-number-input-wrapper .input-number-input{background:0 0;width:100%;height:100%;text-align:start;border:0;outline:0;padding:0;box-sizing:border-box;color:var(--nf-input-number-color);font-size:var(--nf-font-size);font-weight:var(--nf-font-weight);font-family:var(--nf-font-family),sans-serif}.input-number::-webkit-inner-spin-button,.input-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-number[type=number]{appearance:textfield}:host([controls]) .input-number:hover{padding-right:1.5rem}:host([controls]) .input-number:hover .controls{width:1.5rem}:host([center]) .input-number{padding-left:1.5rem!important;padding-right:1.5rem!important}:host([center]) .input-number .input-number-input{text-align:center}:host([center]) .input-number:hover{padding-left:1.5rem!important;padding-right:1.5rem!important}:host([center]) .input-prefix{position:absolute;left:0;top:0;bottom:0;z-index:1;pointer-events:none}:host([center]) .input-suffix{position:absolute;right:0;top:0;bottom:0;z-index:1;pointer-events:none}:host([center]) .input-number{flex:1;width:100%}.input-prefix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-inline-start:.6125rem;color:var(--nf-input-number-prefix-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-input-number-surfix-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}`;
|
|
996
|
+
var bt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, m = (t, e, o, r) => {
|
|
997
|
+
for (var i = r > 1 ? void 0 : r ? mt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
|
|
998
|
+
(n = t[s]) && (i = (r ? n(e, o, i) : n(i)) || i);
|
|
999
|
+
return r && i && bt(e, o, i), i;
|
|
965
1000
|
};
|
|
966
|
-
let f = class extends
|
|
1001
|
+
let f = class extends B {
|
|
967
1002
|
constructor() {
|
|
968
|
-
super(...arguments), this.value = 0, this.formatter = (
|
|
969
|
-
if (
|
|
970
|
-
const
|
|
971
|
-
return
|
|
1003
|
+
super(...arguments), this.value = 0, this.formatter = (t) => {
|
|
1004
|
+
if (t === null) return "";
|
|
1005
|
+
const e = String(t);
|
|
1006
|
+
return e.includes("e") ? t.toLocaleString("en", {
|
|
972
1007
|
useGrouping: !1,
|
|
973
1008
|
maximumFractionDigits: 20,
|
|
974
1009
|
minimumFractionDigits: 0
|
|
975
|
-
}) :
|
|
976
|
-
}, this.parser = (
|
|
977
|
-
if (
|
|
1010
|
+
}) : e;
|
|
1011
|
+
}, this.parser = (t) => {
|
|
1012
|
+
if (t.trim().length == 0 || t.endsWith("."))
|
|
978
1013
|
return null;
|
|
979
|
-
const
|
|
980
|
-
return Number.isNaN(
|
|
1014
|
+
const e = Number(t);
|
|
1015
|
+
return Number.isNaN(e) ? null : this.clampValue(e);
|
|
981
1016
|
}, this.prefix = null, this.suffix = null, this.controls = !0, this.step = 1, this.min = null, this.max = null, this.changeOnWheel = !0, this.disabled = !1, this.noDecimal = !1, this.noZero = !1, this.noNegative = !1, this.center = !1, this.text = "", this.isTyping = !1, this.isFocused = !1;
|
|
982
1017
|
}
|
|
983
1018
|
// 对解析结果进行额外验证
|
|
984
|
-
validateParsed(
|
|
985
|
-
return
|
|
1019
|
+
validateParsed(t) {
|
|
1020
|
+
return t === null || this.noDecimal && !Number.isInteger(t) || this.noZero && t === 0 || this.noNegative && t < 0 ? null : t;
|
|
986
1021
|
}
|
|
987
1022
|
/* ================== 文本设置 ================== */
|
|
988
1023
|
// 验证并设置 text，过滤不合规字符
|
|
989
|
-
setText(
|
|
990
|
-
let
|
|
991
|
-
if (
|
|
992
|
-
const o = Number(
|
|
993
|
-
Number.isNaN(o) ?
|
|
1024
|
+
setText(t) {
|
|
1025
|
+
let e = t;
|
|
1026
|
+
if (e = e.replace(/[^0-9+.\-]/g, ""), this.noNegative && (e = e.replace(/[+\-]/g, "")), this.noDecimal && e.includes(".")) {
|
|
1027
|
+
const o = Number(e);
|
|
1028
|
+
Number.isNaN(o) ? e = e.replace(/\./g, "") : e = String(Math.round(o));
|
|
994
1029
|
}
|
|
995
|
-
return this.text =
|
|
1030
|
+
return this.text = e, e === t;
|
|
996
1031
|
}
|
|
997
1032
|
/* ================== 生命周期 ================== */
|
|
998
|
-
willUpdate(
|
|
1033
|
+
willUpdate(t) {
|
|
999
1034
|
if (this.center && this.suffix && this.controls)
|
|
1000
1035
|
throw new Error(
|
|
1001
1036
|
"[nf-input-number] center 模式下不允许同时开启 suffix 和 controls，请关闭其中一个。"
|
|
1002
1037
|
);
|
|
1003
|
-
|
|
1038
|
+
t.has("value") && !this.isTyping && this.setText(this.formatter(this.value));
|
|
1004
1039
|
}
|
|
1005
1040
|
/* ================== 事件处理 ================== */
|
|
1006
|
-
onInput(
|
|
1041
|
+
onInput(t) {
|
|
1007
1042
|
this.isTyping = !0;
|
|
1008
|
-
const
|
|
1009
|
-
this.setText(
|
|
1043
|
+
const e = t.target.value;
|
|
1044
|
+
this.setText(e) || (t.target.value = this.text);
|
|
1010
1045
|
}
|
|
1011
1046
|
onBlur() {
|
|
1012
1047
|
this.isTyping = !1, this.isFocused = !1;
|
|
1013
|
-
const
|
|
1014
|
-
|
|
1048
|
+
const t = this.validateParsed(this.parser(this.text));
|
|
1049
|
+
t !== null ? (this.value = t, this.setText(this.formatter(t)), this.dispatchEvent(
|
|
1015
1050
|
new CustomEvent("change", {
|
|
1016
|
-
detail:
|
|
1051
|
+
detail: t
|
|
1017
1052
|
})
|
|
1018
1053
|
)) : this.setText(this.formatter(this.value));
|
|
1019
1054
|
}
|
|
1020
1055
|
onFocus() {
|
|
1021
1056
|
this.isFocused = !0;
|
|
1022
1057
|
}
|
|
1023
|
-
onWheel(
|
|
1058
|
+
onWheel(t) {
|
|
1024
1059
|
if (this.disabled || !this.changeOnWheel || !this.isFocused) return;
|
|
1025
|
-
|
|
1026
|
-
const
|
|
1027
|
-
this.handleStepChange(
|
|
1060
|
+
t.preventDefault();
|
|
1061
|
+
const e = t.deltaY < 0 ? 1 : -1;
|
|
1062
|
+
this.handleStepChange(e);
|
|
1028
1063
|
}
|
|
1029
|
-
onKeyDown(
|
|
1030
|
-
|
|
1064
|
+
onKeyDown(t) {
|
|
1065
|
+
t.stopPropagation(), t.key === "Enter" && t.target.blur();
|
|
1031
1066
|
}
|
|
1032
|
-
onKeyUp(
|
|
1033
|
-
|
|
1067
|
+
onKeyUp(t) {
|
|
1068
|
+
t.stopPropagation();
|
|
1034
1069
|
}
|
|
1035
1070
|
/* ================== 提交逻辑 ================== */
|
|
1036
1071
|
// 修正浮点误差（保留 12 位有效精度）
|
|
1037
|
-
fixFloatingPoint(
|
|
1038
|
-
return parseFloat(
|
|
1072
|
+
fixFloatingPoint(t) {
|
|
1073
|
+
return parseFloat(t.toPrecision(12));
|
|
1039
1074
|
}
|
|
1040
1075
|
// 限制值在 min/max 范围内
|
|
1041
|
-
clampValue(
|
|
1042
|
-
let
|
|
1043
|
-
return this.min !== null && this.min !== void 0 && (
|
|
1076
|
+
clampValue(t) {
|
|
1077
|
+
let e = t;
|
|
1078
|
+
return this.min !== null && this.min !== void 0 && (e = Math.max(e, this.min)), this.max !== null && this.max !== void 0 && (e = Math.min(e, this.max)), e;
|
|
1044
1079
|
}
|
|
1045
1080
|
// 步进按钮处理
|
|
1046
|
-
handleStepChange(
|
|
1081
|
+
handleStepChange(t) {
|
|
1047
1082
|
if (this.disabled) return;
|
|
1048
|
-
const
|
|
1049
|
-
if (
|
|
1083
|
+
const e = this.validateParsed(this.parser(this.text));
|
|
1084
|
+
if (e === null)
|
|
1050
1085
|
return;
|
|
1051
|
-
this.value =
|
|
1052
|
-
let o = this.fixFloatingPoint(this.value +
|
|
1086
|
+
this.value = e;
|
|
1087
|
+
let o = this.fixFloatingPoint(this.value + t * this.step);
|
|
1053
1088
|
o = this.clampValue(o);
|
|
1054
|
-
const
|
|
1055
|
-
|
|
1089
|
+
const r = this.validateParsed(o);
|
|
1090
|
+
r !== null && (o = r, o !== this.value && (this.value = o, this.setText(this.formatter(o)), this.dispatchEvent(
|
|
1056
1091
|
new CustomEvent("change", {
|
|
1057
1092
|
detail: o
|
|
1058
1093
|
})
|
|
@@ -1065,10 +1100,10 @@ let f = class extends L {
|
|
|
1065
1100
|
}
|
|
1066
1101
|
/* ================== Render ================== */
|
|
1067
1102
|
render() {
|
|
1068
|
-
return
|
|
1103
|
+
return u`<div class=input-prefix>${this.prefix}</div><div class=input-number><div class=input-number-input-wrapper><input inputmode=decimal class=input-number-input .value=${this.text} ?disabled=${this.disabled} @blur=${this.onBlur} @focus=${this.onFocus} @input=${this.onInput} @keydown=${this.onKeyDown} @wheel=${this.onWheel} @keyup=${this.onKeyUp}></div>${this.controls ? u`<div class=controls><button class="control-btn control-btn-up"type=button ?disabled=${this.disabled} @click=${() => this.handleStepChange(1)} aria-label="Increase value"><svg width=12 height=12 viewBox="0 0 24 24"><path d="M6 14.6l6-6.6 6 6.6"/></svg></button><button class="control-btn control-btn-down"type=button ?disabled=${this.disabled} @click=${() => this.handleStepChange(-1)} aria-label="Decrease value"><svg width=12 height=12 viewBox="0 0 24 24"><path d="M18 9.4l-6 6.6-6-6.6"/></svg></button></div>` : ""}</div>${this.suffix ? u`<div class=input-suffix>${this.suffix}</div>` : ""}`;
|
|
1069
1104
|
}
|
|
1070
1105
|
};
|
|
1071
|
-
f.styles = [U,
|
|
1106
|
+
f.styles = [U, ft];
|
|
1072
1107
|
m([
|
|
1073
1108
|
h({ type: Number })
|
|
1074
1109
|
], f.prototype, "value", 2);
|
|
@@ -1089,8 +1124,8 @@ m([
|
|
|
1089
1124
|
type: Boolean,
|
|
1090
1125
|
reflect: !0,
|
|
1091
1126
|
converter: {
|
|
1092
|
-
fromAttribute: (
|
|
1093
|
-
toAttribute: (
|
|
1127
|
+
fromAttribute: (t) => t !== "false" && t !== null,
|
|
1128
|
+
toAttribute: (t) => t ? "" : null
|
|
1094
1129
|
}
|
|
1095
1130
|
})
|
|
1096
1131
|
], f.prototype, "controls", 2);
|
|
@@ -1108,8 +1143,8 @@ m([
|
|
|
1108
1143
|
type: Boolean,
|
|
1109
1144
|
attribute: "change-on-wheel",
|
|
1110
1145
|
converter: {
|
|
1111
|
-
fromAttribute: (
|
|
1112
|
-
toAttribute: (
|
|
1146
|
+
fromAttribute: (t) => t !== "false" && t !== null,
|
|
1147
|
+
toAttribute: (t) => t ? "" : null
|
|
1113
1148
|
}
|
|
1114
1149
|
})
|
|
1115
1150
|
], f.prototype, "changeOnWheel", 2);
|
|
@@ -1135,18 +1170,18 @@ m([
|
|
|
1135
1170
|
_()
|
|
1136
1171
|
], f.prototype, "isFocused", 2);
|
|
1137
1172
|
f = m([
|
|
1138
|
-
|
|
1173
|
+
C("nf-input-number")
|
|
1139
1174
|
], f);
|
|
1140
|
-
async function
|
|
1141
|
-
return new Promise((
|
|
1175
|
+
async function gt(t) {
|
|
1176
|
+
return new Promise((e) => setTimeout(e, t));
|
|
1142
1177
|
}
|
|
1143
|
-
const
|
|
1144
|
-
var
|
|
1145
|
-
for (var
|
|
1146
|
-
(n =
|
|
1147
|
-
return
|
|
1178
|
+
const vt = E`:host{width:var(--nf-width);-webkit-user-select:none;user-select:none;cursor:pointer}:host .text{flex-grow:1;display:inline-block;outline:0;white-space:nowrap}:host .icon{width:1.5rem;height:1.5rem;display:inline-block;fill:none;stroke:var(--nf-select-icon-color);stroke-width:1;stroke-linecap:round;margin:0 -.3rem 0 .5rem}:host .dropdown{position:absolute;top:2rem;right:0;left:0;padding:.3rem;background:var(--nf-dropdown-background);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);border-radius:.5rem;opacity:0;pointer-events:none;color:var(--nf-color);box-shadow:0 0 1rem 0 var(--nf-dropdown-shadow);z-index:1000;transition:opacity var(--nf-transition) ease-out,transform var(--nf-transition) ease-out}:host .dropdown .item{white-space:nowrap;padding:.4rem .7rem;overflow:hidden;text-overflow:ellipsis;border-radius:.3rem;cursor:pointer}:host .dropdown .item-unselected:hover{background:var(--nf-item-background-hover);transition:background-color var(--nf-transition) ease-in-out}:host .dropdown .item-unselected:active{background:var(--nf-item-background-active)}:host .dropdown .item-selected{background-color:color-mix(in srgb,var(--nf-primary-color) 30%,transparent)}:host([disabled]){cursor:not-allowed}:host([disabled]) .text{color:var(--nf-color-disabled)}:host([disabled]) .icon{stroke:var(--nf-color-disabled)}:host([disabled]) .dropdown{display:none}:host(:focus:not([disabled])){color:var(--nf-focus-text-color)}:host(:focus:not([disabled])) .dropdown{transform:translateY(.5rem);opacity:1;pointer-events:auto}:host(:focus:not([disabled])) .cover{pointer-events:auto}`;
|
|
1179
|
+
var yt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, G = (t, e, o, r) => {
|
|
1180
|
+
for (var i = r > 1 ? void 0 : r ? wt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
|
|
1181
|
+
(n = t[s]) && (i = (r ? n(e, o, i) : n(i)) || i);
|
|
1182
|
+
return r && i && yt(e, o, i), i;
|
|
1148
1183
|
};
|
|
1149
|
-
let
|
|
1184
|
+
let z = class extends B {
|
|
1150
1185
|
constructor() {
|
|
1151
1186
|
super(...arguments), this.value = "", this.options = [], this.disabled = !1, this.showDropdown = !1, this.jumpCloseFlag = !1, this.timeoutId = null, this.onFocus = () => {
|
|
1152
1187
|
this.disabled || (this.timeoutId && clearTimeout(this.timeoutId), this.showDropdown = !0, this.jumpCloseFlag = !0);
|
|
@@ -1164,14 +1199,14 @@ let B = class extends L {
|
|
|
1164
1199
|
}
|
|
1165
1200
|
};
|
|
1166
1201
|
}
|
|
1167
|
-
async set(
|
|
1168
|
-
this.dispatchEvent(new CustomEvent("input", { detail:
|
|
1202
|
+
async set(t) {
|
|
1203
|
+
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 gt(34), this.blur();
|
|
1169
1204
|
}
|
|
1170
1205
|
render() {
|
|
1171
|
-
const
|
|
1172
|
-
return
|
|
1173
|
-
(o) =>
|
|
1174
|
-
)}</div><slot></slot><div class=text>${
|
|
1206
|
+
const t = this.options.findIndex((o) => o.value == this.value), e = t > -1 ? this.options[t]?.label : this.value;
|
|
1207
|
+
return u`<div class=dropdown>${(this.showDropdown ? this.options : []).map(
|
|
1208
|
+
(o) => u`<div @click=${() => this.set(o.value)} class="item ${this.value == o.value ? "item-selected" : "item-unselected"}">${o.label}</div>`
|
|
1209
|
+
)}</div><slot></slot><div class=text>${e}</div><svg class=icon width=24 height=24 viewBox="0 0 24 24"><path d="M17 10l-5 5.5-5-5.5"/></svg>`;
|
|
1175
1210
|
}
|
|
1176
1211
|
connectedCallback() {
|
|
1177
1212
|
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(() => {
|
|
@@ -1182,68 +1217,68 @@ let B = class extends L {
|
|
|
1182
1217
|
super.disconnectedCallback(), this.removeEventListener("focus", this.onFocus), this.removeEventListener("blur", this.onBlur), this.removeEventListener("click", this.onClick);
|
|
1183
1218
|
}
|
|
1184
1219
|
};
|
|
1185
|
-
|
|
1186
|
-
|
|
1220
|
+
z.styles = [U, vt];
|
|
1221
|
+
G([
|
|
1187
1222
|
h({ type: String })
|
|
1188
|
-
],
|
|
1189
|
-
|
|
1223
|
+
], z.prototype, "value", 2);
|
|
1224
|
+
G([
|
|
1190
1225
|
h({
|
|
1191
1226
|
type: Array,
|
|
1192
|
-
converter: (
|
|
1227
|
+
converter: (t) => {
|
|
1193
1228
|
try {
|
|
1194
|
-
if (typeof
|
|
1195
|
-
return JSON.parse(
|
|
1196
|
-
if (typeof
|
|
1197
|
-
return
|
|
1198
|
-
} catch (
|
|
1199
|
-
console.error("Failed to convert property options:",
|
|
1229
|
+
if (typeof t == "string")
|
|
1230
|
+
return JSON.parse(t);
|
|
1231
|
+
if (typeof t == "object" && Array.isArray(t))
|
|
1232
|
+
return t;
|
|
1233
|
+
} catch (e) {
|
|
1234
|
+
console.error("Failed to convert property options:", e);
|
|
1200
1235
|
}
|
|
1201
1236
|
return [];
|
|
1202
1237
|
}
|
|
1203
1238
|
})
|
|
1204
|
-
],
|
|
1205
|
-
|
|
1239
|
+
], z.prototype, "options", 2);
|
|
1240
|
+
G([
|
|
1206
1241
|
h({ type: Boolean, reflect: !0 })
|
|
1207
|
-
],
|
|
1208
|
-
|
|
1242
|
+
], z.prototype, "disabled", 2);
|
|
1243
|
+
G([
|
|
1209
1244
|
_()
|
|
1210
|
-
],
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
],
|
|
1214
|
-
const
|
|
1215
|
-
var
|
|
1216
|
-
for (var
|
|
1217
|
-
(n =
|
|
1218
|
-
return
|
|
1245
|
+
], z.prototype, "showDropdown", 2);
|
|
1246
|
+
z = G([
|
|
1247
|
+
C("nf-select")
|
|
1248
|
+
], z);
|
|
1249
|
+
const _t = E`:host{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;outline:0;--nf-switch-padding:.1rem}:host[disabled]{cursor:not-allowed;opacity:.6}.switch-wrapper{position:relative;display:inline-block}.switch-container{position:relative;z-index:1;width:3.1rem;height:1.5rem;background-color:var(--nf-background-color);border-radius:.75rem;transition:background-color .2s ease;overflow:hidden}:host(:not([disabled]):not([checked])) .switch-container:hover{background:var(--nf-background-color-hover)}:host([checked]) .switch-container{background-color:var(--nf-primary-color,var(--nf-primary-color))}:host([disabled]) .switch-container{opacity:.5}.ripple{position:absolute;border-radius:.875rem;inset:-.2rem;background-color:#6464641a;animation:ripple-animation 1s ease-out forwards;pointer-events:none;opacity:1}@keyframes ripple-animation{0%{opacity:0}20%{opacity:1}to{opacity:0}}.switch-thumb{position:absolute;top:.125rem;left:0;width:1.25rem;height:1.25rem;transition:transform .2s ease-in-out}.switch-thumb:before{content:\"\";position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;background-color:#fff;border-radius:.625rem;box-shadow:0 .125rem .25rem #0003;transition:width .2s ease-in-out,transform .2s ease-in-out}:host(:not([checked])) .switch-thumb{transform:translate(.125rem)}:host(:not([checked])) .switch-container:active .switch-thumb:before{width:1.625rem;border-radius:.625rem}:host([checked]) .switch-thumb{transform:translate(1.725rem)}:host([checked]) .switch-container:active .switch-thumb:before{width:1.625rem;border-radius:.625rem;transform:translate(-.375rem)}:host(:focus) .switch-container{outline:.125rem solid var(--nf-primary-color,var(--nf-primary-color));outline-offset:.125rem}`;
|
|
1250
|
+
var $t = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, ue = (t, e, o, r) => {
|
|
1251
|
+
for (var i = r > 1 ? void 0 : r ? xt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
|
|
1252
|
+
(n = t[s]) && (i = (r ? n(e, o, i) : n(i)) || i);
|
|
1253
|
+
return r && i && $t(e, o, i), i;
|
|
1219
1254
|
};
|
|
1220
|
-
let
|
|
1255
|
+
let Z = class extends F {
|
|
1221
1256
|
constructor() {
|
|
1222
1257
|
super(...arguments), this.checked = !1, this.disabled = !1, this.rippleElement = null;
|
|
1223
1258
|
}
|
|
1224
1259
|
// 切换开关状态
|
|
1225
|
-
toggleSwitch(
|
|
1226
|
-
this.disabled || (
|
|
1260
|
+
toggleSwitch(t) {
|
|
1261
|
+
this.disabled || (t.stopPropagation(), this.checked = !this.checked, this.dispatchEvent(
|
|
1227
1262
|
new CustomEvent("change", {
|
|
1228
1263
|
bubbles: !0,
|
|
1229
1264
|
composed: !0,
|
|
1230
1265
|
detail: this.checked
|
|
1231
1266
|
})
|
|
1232
|
-
), this.createRipple(
|
|
1233
|
-
}
|
|
1234
|
-
createRipple(
|
|
1235
|
-
const
|
|
1236
|
-
if (!
|
|
1237
|
-
const o =
|
|
1238
|
-
o &&
|
|
1239
|
-
const
|
|
1240
|
-
|
|
1241
|
-
|
|
1267
|
+
), this.createRipple(t));
|
|
1268
|
+
}
|
|
1269
|
+
createRipple(t) {
|
|
1270
|
+
const e = this.shadowRoot?.querySelector(".switch-wrapper");
|
|
1271
|
+
if (!e) return;
|
|
1272
|
+
const o = e.querySelector(".ripple");
|
|
1273
|
+
o && e.removeChild(o);
|
|
1274
|
+
const r = document.createElement("div");
|
|
1275
|
+
r.classList.add("ripple"), e.appendChild(r), r.addEventListener("animationend", () => {
|
|
1276
|
+
e.contains(r) && e.removeChild(r);
|
|
1242
1277
|
});
|
|
1243
1278
|
}
|
|
1244
1279
|
// 渲染开关组件
|
|
1245
1280
|
render() {
|
|
1246
|
-
return
|
|
1281
|
+
return ie`<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>`;
|
|
1247
1282
|
}
|
|
1248
1283
|
connectedCallback() {
|
|
1249
1284
|
this.style.transition = "none", super.connectedCallback(), requestAnimationFrame(() => {
|
|
@@ -1251,71 +1286,71 @@ let Y = class extends N {
|
|
|
1251
1286
|
});
|
|
1252
1287
|
}
|
|
1253
1288
|
};
|
|
1254
|
-
|
|
1255
|
-
|
|
1289
|
+
Z.styles = [_t];
|
|
1290
|
+
ue([
|
|
1256
1291
|
h({ type: Boolean, reflect: !0 })
|
|
1257
|
-
],
|
|
1258
|
-
|
|
1292
|
+
], Z.prototype, "checked", 2);
|
|
1293
|
+
ue([
|
|
1259
1294
|
h({ type: Boolean, reflect: !0 })
|
|
1260
|
-
],
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
],
|
|
1264
|
-
const
|
|
1265
|
-
let
|
|
1266
|
-
constructor(
|
|
1295
|
+
], Z.prototype, "disabled", 2);
|
|
1296
|
+
Z = ue([
|
|
1297
|
+
C("nf-switch")
|
|
1298
|
+
], Z);
|
|
1299
|
+
const kt = { ATTRIBUTE: 1 }, Et = (t) => (...e) => ({ _$litDirective$: t, values: e });
|
|
1300
|
+
let St = class {
|
|
1301
|
+
constructor(e) {
|
|
1267
1302
|
}
|
|
1268
1303
|
get _$AU() {
|
|
1269
1304
|
return this._$AM._$AU;
|
|
1270
1305
|
}
|
|
1271
|
-
_$AT(
|
|
1272
|
-
this._$Ct =
|
|
1306
|
+
_$AT(e, o, r) {
|
|
1307
|
+
this._$Ct = e, this._$AM = o, this._$Ci = r;
|
|
1273
1308
|
}
|
|
1274
|
-
_$AS(
|
|
1275
|
-
return this.update(
|
|
1309
|
+
_$AS(e, o) {
|
|
1310
|
+
return this.update(e, o);
|
|
1276
1311
|
}
|
|
1277
|
-
update(
|
|
1312
|
+
update(e, o) {
|
|
1278
1313
|
return this.render(...o);
|
|
1279
1314
|
}
|
|
1280
1315
|
};
|
|
1281
|
-
const
|
|
1282
|
-
constructor(
|
|
1283
|
-
if (super(
|
|
1316
|
+
const De = "important", At = " !" + De, ke = Et(class extends St {
|
|
1317
|
+
constructor(t) {
|
|
1318
|
+
if (super(t), t.type !== kt.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.");
|
|
1284
1319
|
}
|
|
1285
|
-
render(
|
|
1286
|
-
return Object.keys(
|
|
1287
|
-
const
|
|
1288
|
-
return
|
|
1320
|
+
render(t) {
|
|
1321
|
+
return Object.keys(t).reduce((e, o) => {
|
|
1322
|
+
const r = t[o];
|
|
1323
|
+
return r == null ? e : e + `${o = o.includes("-") ? o : o.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${r};`;
|
|
1289
1324
|
}, "");
|
|
1290
1325
|
}
|
|
1291
|
-
update(
|
|
1292
|
-
const { style: o } =
|
|
1293
|
-
if (this.ft === void 0) return this.ft = new Set(Object.keys(
|
|
1294
|
-
for (const
|
|
1295
|
-
for (const
|
|
1296
|
-
const
|
|
1297
|
-
if (
|
|
1298
|
-
this.ft.add(
|
|
1299
|
-
const
|
|
1300
|
-
|
|
1326
|
+
update(t, [e]) {
|
|
1327
|
+
const { style: o } = t.element;
|
|
1328
|
+
if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
|
|
1329
|
+
for (const r of this.ft) e[r] == null && (this.ft.delete(r), r.includes("-") ? o.removeProperty(r) : o[r] = null);
|
|
1330
|
+
for (const r in e) {
|
|
1331
|
+
const i = e[r];
|
|
1332
|
+
if (i != null) {
|
|
1333
|
+
this.ft.add(r);
|
|
1334
|
+
const s = typeof i == "string" && i.endsWith(At);
|
|
1335
|
+
r.includes("-") || s ? o.setProperty(r, s ? i.slice(0, -11) : i, s ? De : "") : o[r] = i;
|
|
1301
1336
|
}
|
|
1302
1337
|
}
|
|
1303
|
-
return
|
|
1338
|
+
return T;
|
|
1304
1339
|
}
|
|
1305
|
-
}),
|
|
1306
|
-
var
|
|
1307
|
-
for (var
|
|
1308
|
-
(n =
|
|
1309
|
-
return
|
|
1340
|
+
}), Ct = E`:host{display:inline-flex;align-items:center;position:relative;width:100%;height:1.25rem;background-color:var(--nf-border-color,#e0e0e0);border-radius:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;box-shadow:none;padding:0}:host:hover{background-color:var(--nf-border-color,#e0e0e0);border:none}:host:focus{box-shadow:none;outline:0}:host([disabled]){cursor:not-allowed;opacity:.6}.slider-fill{position:absolute;left:0;top:0;height:100%;background-color:var(--nf-primary-color,#5e72f9);border-radius:.625rem 0 0 .625rem;pointer-events:none}.slider-handle{position:absolute;width:1.25rem;height:1.25rem;background-color:#fff;border-radius:50%;top:50%;transform:translate(-50%,-50%);cursor:grab;outline:0;box-shadow:0 1px 3px #0000004d;transition:transform .15s ease,box-shadow .15s ease;z-index:1}:host([disabled]) .slider-handle{cursor:not-allowed}:host(:not([disabled])) .slider-handle:hover{transform:translate(-50%,-50%) scale(1.05)}:host(:not([disabled])) .slider-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 3px 8px #0006}.slider-handle:focus{box-shadow:0 0 0 3px #5e72f94d}.slider-tooltip{position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);background-color:var(--nf-slider-tooltip-background);color:var(--nf-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none;box-shadow:0 0 .4rem .1rem #0000001a}.slider-tooltip.visible{opacity:1}`;
|
|
1341
|
+
var Pt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, $ = (t, e, o, r) => {
|
|
1342
|
+
for (var i = r > 1 ? void 0 : r ? Dt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
|
|
1343
|
+
(n = t[s]) && (i = (r ? n(e, o, i) : n(i)) || i);
|
|
1344
|
+
return r && i && Pt(e, o, i), i;
|
|
1310
1345
|
};
|
|
1311
|
-
let v = class extends
|
|
1346
|
+
let v = class extends B {
|
|
1312
1347
|
constructor() {
|
|
1313
|
-
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 = (
|
|
1314
|
-
this.disabled || (
|
|
1315
|
-
}, this._handleHostTouchStart = (
|
|
1316
|
-
this.disabled || (
|
|
1317
|
-
}, this._handleDrag = (
|
|
1318
|
-
this._isDragging && (
|
|
1348
|
+
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) => {
|
|
1349
|
+
this.disabled || (t.preventDefault(), this._startDrag(t));
|
|
1350
|
+
}, this._handleHostTouchStart = (t) => {
|
|
1351
|
+
this.disabled || (t.preventDefault(), this._startDrag(t));
|
|
1352
|
+
}, this._handleDrag = (t) => {
|
|
1353
|
+
this._isDragging && (t.preventDefault(), this._updateValue(t));
|
|
1319
1354
|
}, this._stopDrag = () => {
|
|
1320
1355
|
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(
|
|
1321
1356
|
new CustomEvent("change", {
|
|
@@ -1334,38 +1369,38 @@ let v = class extends L {
|
|
|
1334
1369
|
disconnectedCallback() {
|
|
1335
1370
|
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);
|
|
1336
1371
|
}
|
|
1337
|
-
updated(
|
|
1338
|
-
|
|
1372
|
+
updated(t) {
|
|
1373
|
+
t.has("value") && (this._currentValue = this.value);
|
|
1339
1374
|
}
|
|
1340
|
-
_handleMouseDown(
|
|
1341
|
-
this.disabled || (
|
|
1375
|
+
_handleMouseDown(t) {
|
|
1376
|
+
this.disabled || (t.stopPropagation(), t.preventDefault(), this._startDrag(t));
|
|
1342
1377
|
}
|
|
1343
|
-
_handleTouchStart(
|
|
1344
|
-
this.disabled || (
|
|
1378
|
+
_handleTouchStart(t) {
|
|
1379
|
+
this.disabled || (t.stopPropagation(), t.preventDefault(), this._startDrag(t));
|
|
1345
1380
|
}
|
|
1346
|
-
_handleKeyDown(
|
|
1381
|
+
_handleKeyDown(t) {
|
|
1347
1382
|
if (this.disabled) return;
|
|
1348
|
-
let
|
|
1349
|
-
switch (
|
|
1383
|
+
let e = this._currentValue;
|
|
1384
|
+
switch (t.key) {
|
|
1350
1385
|
case "ArrowLeft":
|
|
1351
1386
|
case "ArrowDown":
|
|
1352
|
-
|
|
1387
|
+
e = Math.max(this.min, this._currentValue - this.step), t.preventDefault();
|
|
1353
1388
|
break;
|
|
1354
1389
|
case "ArrowRight":
|
|
1355
1390
|
case "ArrowUp":
|
|
1356
|
-
|
|
1391
|
+
e = Math.min(this.max, this._currentValue + this.step), t.preventDefault();
|
|
1357
1392
|
break;
|
|
1358
1393
|
case "Home":
|
|
1359
|
-
|
|
1394
|
+
e = this.min, t.preventDefault();
|
|
1360
1395
|
break;
|
|
1361
1396
|
case "End":
|
|
1362
|
-
|
|
1397
|
+
e = this.max, t.preventDefault();
|
|
1363
1398
|
break;
|
|
1364
1399
|
default:
|
|
1365
1400
|
this._showTooltip = !1, this.requestUpdate();
|
|
1366
1401
|
return;
|
|
1367
1402
|
}
|
|
1368
|
-
|
|
1403
|
+
e !== this._currentValue && (this._currentValue = e, this._showTooltip = !0, this.requestUpdate(), this.dispatchEvent(
|
|
1369
1404
|
new CustomEvent("change", {
|
|
1370
1405
|
detail: this._currentValue,
|
|
1371
1406
|
bubbles: !0,
|
|
@@ -1375,23 +1410,23 @@ let v = class extends L {
|
|
|
1375
1410
|
this._showTooltip = !1, this.requestUpdate();
|
|
1376
1411
|
}, 1e3));
|
|
1377
1412
|
}
|
|
1378
|
-
_startDrag(
|
|
1379
|
-
this._isDragging = !0, this._showTooltip = !0, this._updateValue(
|
|
1413
|
+
_startDrag(t) {
|
|
1414
|
+
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);
|
|
1380
1415
|
}
|
|
1381
|
-
_updateValue(
|
|
1382
|
-
const
|
|
1416
|
+
_updateValue(t) {
|
|
1417
|
+
const e = this.getBoundingClientRect(), o = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, r = Math.max(0, Math.min(1, (o - e.left) / e.width)), i = this.max - this.min, s = this.min + r * i, n = Math.round((s - this.min) / this.step), l = this.min + n * this.step;
|
|
1383
1418
|
this._currentValue = Math.min(this.max, Math.max(this.min, l)), this.requestUpdate();
|
|
1384
1419
|
}
|
|
1385
1420
|
_getValuePercentage() {
|
|
1386
|
-
const
|
|
1387
|
-
return
|
|
1421
|
+
const t = this.max - this.min;
|
|
1422
|
+
return t === 0 ? 0 : (this._currentValue - this.min) / t * 100;
|
|
1388
1423
|
}
|
|
1389
1424
|
render() {
|
|
1390
|
-
const
|
|
1391
|
-
return
|
|
1425
|
+
const t = this._getValuePercentage(), e = `${t}%`, o = `${t}%`, r = `slider-tooltip ${this._showTooltip || this.tooltip ? "visible" : ""}`;
|
|
1426
|
+
return u`<div class=slider-fill style=${ke({ width: o })}></div><div class=slider-handle style=${ke({ left: e })} tabindex=${this.disabled ? -1 : 0} @mousedown=${this._handleMouseDown} @touchstart=${this._handleTouchStart} @keydown=${this._handleKeyDown}><div class=${r}>${this._currentValue}</div></div>`;
|
|
1392
1427
|
}
|
|
1393
1428
|
};
|
|
1394
|
-
v.styles = [U,
|
|
1429
|
+
v.styles = [U, Ct];
|
|
1395
1430
|
$([
|
|
1396
1431
|
h({ type: Number })
|
|
1397
1432
|
], v.prototype, "value", 2);
|
|
@@ -1426,20 +1461,20 @@ $([
|
|
|
1426
1461
|
_()
|
|
1427
1462
|
], v.prototype, "_showTooltip", 2);
|
|
1428
1463
|
v = $([
|
|
1429
|
-
|
|
1464
|
+
C("nf-slider")
|
|
1430
1465
|
], v);
|
|
1431
|
-
const
|
|
1432
|
-
var
|
|
1433
|
-
for (var
|
|
1434
|
-
(n =
|
|
1435
|
-
return
|
|
1466
|
+
const Mt = E`:host{width:var(--nf-width);position:relative;display:inline-block;--nf-textarea-padding:.4rem .75rem}:host([disabled]) .textarea{cursor:not-allowed;color:var(--nf-color-disabled)}::slotted(*){position:absolute;top:.75rem;left:.75rem;color:var(--nf-color)}:host([disabled]) ::slotted(*){color:var(--nf-color-disabled)}.textarea{position:absolute;inset:0;padding:var(--nf-textarea-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;resize:none;line-height:1.5715;overflow-y:auto;overflow-x:hidden}.textarea::-webkit-scrollbar{width:6px}.textarea::-webkit-scrollbar-track{background:0 0}.textarea::-webkit-scrollbar-thumb{background:var(--nf-scrollbar-thumb-color,rgba(0,0,0,.2));border-radius:3px}.textarea::-webkit-scrollbar-thumb:hover{background:var(--nf-scrollbar-thumb-hover-color,rgba(0,0,0,.3))}.counter{position:absolute;bottom:.5rem;right:.75rem;font-size:.75rem;color:var(--nf-color-secondary,rgba(0,0,0,.45));pointer-events:none;-webkit-user-select:none;user-select:none}`;
|
|
1467
|
+
var Ht = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, P = (t, e, o, r) => {
|
|
1468
|
+
for (var i = r > 1 ? void 0 : r ? Ot(e, o) : e, s = t.length - 1, n; s >= 0; s--)
|
|
1469
|
+
(n = t[s]) && (i = (r ? n(e, o, i) : n(i)) || i);
|
|
1470
|
+
return r && i && Ht(e, o, i), i;
|
|
1436
1471
|
};
|
|
1437
|
-
let x = class extends
|
|
1472
|
+
let x = class extends B {
|
|
1438
1473
|
constructor() {
|
|
1439
|
-
super(...arguments), this.value = "", this.placeholder = "", this.rows = 3, this.disabled = !1, this.showCount = !1, this.autoSize = !1, this.onInput = (
|
|
1440
|
-
|
|
1441
|
-
const
|
|
1442
|
-
this.textareaRef =
|
|
1474
|
+
super(...arguments), this.value = "", this.placeholder = "", this.rows = 3, this.disabled = !1, this.showCount = !1, this.autoSize = !1, this.onInput = (t) => {
|
|
1475
|
+
t.stopPropagation();
|
|
1476
|
+
const e = t.target, o = e.value;
|
|
1477
|
+
this.textareaRef = e, this.dispatchEvent(
|
|
1443
1478
|
new CustomEvent("input", {
|
|
1444
1479
|
detail: o,
|
|
1445
1480
|
bubbles: !0,
|
|
@@ -1452,23 +1487,23 @@ let x = class extends L {
|
|
|
1452
1487
|
composed: !0
|
|
1453
1488
|
})
|
|
1454
1489
|
));
|
|
1455
|
-
}, this.onChange = (
|
|
1456
|
-
|
|
1457
|
-
const
|
|
1458
|
-
|
|
1490
|
+
}, this.onChange = (t) => {
|
|
1491
|
+
t.stopPropagation();
|
|
1492
|
+
const e = t.target?.value;
|
|
1493
|
+
e !== void 0 && this.value !== e && this.dispatchEvent(
|
|
1459
1494
|
new CustomEvent("change", {
|
|
1460
|
-
detail:
|
|
1495
|
+
detail: e,
|
|
1461
1496
|
bubbles: !0,
|
|
1462
1497
|
composed: !0
|
|
1463
1498
|
})
|
|
1464
1499
|
);
|
|
1465
|
-
}, this.onKeyDown = (
|
|
1466
|
-
if (
|
|
1467
|
-
|
|
1468
|
-
const
|
|
1469
|
-
|
|
1500
|
+
}, this.onKeyDown = (t) => {
|
|
1501
|
+
if (t.key === "Enter" && (t.ctrlKey || t.metaKey)) {
|
|
1502
|
+
t.stopPropagation();
|
|
1503
|
+
const e = t.target?.value;
|
|
1504
|
+
e !== void 0 && this.dispatchEvent(
|
|
1470
1505
|
new CustomEvent("pressEnter", {
|
|
1471
|
-
detail:
|
|
1506
|
+
detail: e,
|
|
1472
1507
|
bubbles: !0,
|
|
1473
1508
|
composed: !0
|
|
1474
1509
|
})
|
|
@@ -1477,29 +1512,29 @@ let x = class extends L {
|
|
|
1477
1512
|
};
|
|
1478
1513
|
}
|
|
1479
1514
|
render() {
|
|
1480
|
-
const
|
|
1481
|
-
return
|
|
1515
|
+
const t = this.showCount && this.maxLength !== void 0;
|
|
1516
|
+
return u`<slot></slot><textarea class=textarea .value=${this.value} placeholder=${this.placeholder} maxlength=${this.maxLength ?? ""} rows=${this.autoSize ? void 0 : this.rows} ?disabled=${this.disabled} @input=${this.onInput} @change=${this.onChange} @keydown=${this.onKeyDown}></textarea>${t ? u`<div class=counter>${this.value.length} / ${this.maxLength}</div>` : ""}`;
|
|
1482
1517
|
}
|
|
1483
1518
|
adjustHeight() {
|
|
1484
1519
|
if (!this.textareaRef || !this.autoSize) return;
|
|
1485
|
-
const
|
|
1486
|
-
|
|
1487
|
-
const
|
|
1488
|
-
let n =
|
|
1489
|
-
const a = typeof this.autoSize == "object" ? this.autoSize : {}, c = a.minRows,
|
|
1520
|
+
const t = this.textareaRef;
|
|
1521
|
+
t.style.height = "0", t.style.overflowY = "hidden";
|
|
1522
|
+
const e = t.scrollHeight, o = getComputedStyle(t), r = parseFloat(o.lineHeight), i = parseFloat(o.paddingTop), s = parseFloat(o.paddingBottom);
|
|
1523
|
+
let n = e, l = !1;
|
|
1524
|
+
const a = typeof this.autoSize == "object" ? this.autoSize : {}, c = a.minRows, p = a.maxRows;
|
|
1490
1525
|
if (c !== void 0) {
|
|
1491
|
-
const
|
|
1492
|
-
n = Math.max(n,
|
|
1526
|
+
const S = r * c + i + s;
|
|
1527
|
+
n = Math.max(n, S);
|
|
1493
1528
|
}
|
|
1494
|
-
if (
|
|
1495
|
-
const
|
|
1496
|
-
|
|
1529
|
+
if (p !== void 0) {
|
|
1530
|
+
const S = r * p + i + s;
|
|
1531
|
+
e > S && (l = !0), n = Math.min(n, S);
|
|
1497
1532
|
}
|
|
1498
1533
|
const d = parseFloat(getComputedStyle(document.documentElement).fontSize), w = n / d, k = 0.125;
|
|
1499
|
-
|
|
1534
|
+
t.style.height = `${w}rem`, t.style.overflowY = l ? "auto" : "hidden", this.style.height = `${w + k}rem`;
|
|
1500
1535
|
}
|
|
1501
|
-
updated(
|
|
1502
|
-
|
|
1536
|
+
updated(t) {
|
|
1537
|
+
t.has("value") && this.autoSize && this.textareaRef && this.adjustHeight(), (t.has("rows") || t.has("autoSize")) && (this.updateHostHeight(), t.has("autoSize") && this.autoSize && this.textareaRef && this.adjustHeight());
|
|
1503
1538
|
}
|
|
1504
1539
|
firstUpdated() {
|
|
1505
1540
|
this.textareaRef = this.shadowRoot?.querySelector(".textarea"), this.updateHostHeight(), this.autoSize && this.textareaRef && this.adjustHeight();
|
|
@@ -1507,12 +1542,12 @@ let x = class extends L {
|
|
|
1507
1542
|
updateHostHeight() {
|
|
1508
1543
|
if (this.autoSize) {
|
|
1509
1544
|
if (!this.textareaRef) {
|
|
1510
|
-
const
|
|
1545
|
+
const e = (typeof this.autoSize == "object" ? this.autoSize : {}).minRows ?? 2, n = 0.875 * 1.5715 * e + 0.8 + 0.125;
|
|
1511
1546
|
this.style.height = `${n}rem`;
|
|
1512
1547
|
}
|
|
1513
1548
|
} else {
|
|
1514
|
-
const
|
|
1515
|
-
this.style.height = `${
|
|
1549
|
+
const i = 1.3750624999999999 * this.rows + 0.8 + 0.125;
|
|
1550
|
+
this.style.height = `${i}rem`;
|
|
1516
1551
|
}
|
|
1517
1552
|
}
|
|
1518
1553
|
connectedCallback() {
|
|
@@ -1521,41 +1556,42 @@ let x = class extends L {
|
|
|
1521
1556
|
});
|
|
1522
1557
|
}
|
|
1523
1558
|
};
|
|
1524
|
-
x.styles = [U,
|
|
1525
|
-
|
|
1559
|
+
x.styles = [U, Mt];
|
|
1560
|
+
P([
|
|
1526
1561
|
h({ type: String })
|
|
1527
1562
|
], x.prototype, "value", 2);
|
|
1528
|
-
|
|
1563
|
+
P([
|
|
1529
1564
|
h({ type: String })
|
|
1530
1565
|
], x.prototype, "placeholder", 2);
|
|
1531
|
-
|
|
1566
|
+
P([
|
|
1532
1567
|
h({ type: Number })
|
|
1533
1568
|
], x.prototype, "maxLength", 2);
|
|
1534
|
-
|
|
1569
|
+
P([
|
|
1535
1570
|
h({ type: Number })
|
|
1536
1571
|
], x.prototype, "rows", 2);
|
|
1537
|
-
|
|
1572
|
+
P([
|
|
1538
1573
|
h({ type: Boolean, reflect: !0 })
|
|
1539
1574
|
], x.prototype, "disabled", 2);
|
|
1540
|
-
|
|
1575
|
+
P([
|
|
1541
1576
|
h({ type: Boolean })
|
|
1542
1577
|
], x.prototype, "showCount", 2);
|
|
1543
|
-
|
|
1578
|
+
P([
|
|
1544
1579
|
h({ type: Object })
|
|
1545
1580
|
], x.prototype, "autoSize", 2);
|
|
1546
|
-
|
|
1581
|
+
P([
|
|
1547
1582
|
_()
|
|
1548
1583
|
], x.prototype, "textareaRef", 2);
|
|
1549
|
-
x =
|
|
1550
|
-
|
|
1584
|
+
x = P([
|
|
1585
|
+
C("nf-textarea")
|
|
1551
1586
|
], x);
|
|
1552
1587
|
export {
|
|
1553
1588
|
K as NfCheckboxElement,
|
|
1554
1589
|
g as NfColorPickerElement,
|
|
1555
|
-
|
|
1590
|
+
Y as NfEmptyElement,
|
|
1591
|
+
A as NfInputElement,
|
|
1556
1592
|
f as NfInputNumberElement,
|
|
1557
|
-
|
|
1593
|
+
z as NfSelectElement,
|
|
1558
1594
|
v as NfSliderElement,
|
|
1559
|
-
|
|
1595
|
+
Z as NfSwitchElement,
|
|
1560
1596
|
x as NfTextareaElement
|
|
1561
1597
|
};
|