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