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