next-flow-design 1.5.1 → 1.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/react/index.js
CHANGED
|
@@ -1,23 +1,18 @@
|
|
|
1
1
|
import { createComponent as N } from "@lit/react";
|
|
2
2
|
import T from "react";
|
|
3
3
|
import { css as C, LitElement as W, html as f } from "lit";
|
|
4
|
-
const O = (t) => (e, s) => {
|
|
5
|
-
s !== void 0 ? s.addInitializer(() => {
|
|
6
|
-
customElements.define(t, e);
|
|
7
|
-
}) : customElements.define(t, e);
|
|
8
|
-
};
|
|
9
4
|
const G = globalThis, ie = G.ShadowRoot && (G.ShadyCSS === void 0 || G.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, xe = /* @__PURE__ */ Symbol(), ue = /* @__PURE__ */ new WeakMap();
|
|
10
5
|
let Pe = class {
|
|
11
|
-
constructor(e,
|
|
12
|
-
if (this._$cssResult$ = !0,
|
|
13
|
-
this.cssText = e, this.t =
|
|
6
|
+
constructor(e, o, s) {
|
|
7
|
+
if (this._$cssResult$ = !0, s !== xe) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
8
|
+
this.cssText = e, this.t = o;
|
|
14
9
|
}
|
|
15
10
|
get styleSheet() {
|
|
16
11
|
let e = this.o;
|
|
17
|
-
const
|
|
12
|
+
const o = this.t;
|
|
18
13
|
if (ie && e === void 0) {
|
|
19
|
-
const
|
|
20
|
-
|
|
14
|
+
const s = o !== void 0 && o.length === 1;
|
|
15
|
+
s && (e = ue.get(o)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && ue.set(o, e));
|
|
21
16
|
}
|
|
22
17
|
return e;
|
|
23
18
|
}
|
|
@@ -25,18 +20,18 @@ let Pe = class {
|
|
|
25
20
|
return this.cssText;
|
|
26
21
|
}
|
|
27
22
|
};
|
|
28
|
-
const
|
|
29
|
-
if (ie) t.adoptedStyleSheets = e.map((
|
|
30
|
-
else for (const
|
|
31
|
-
const
|
|
32
|
-
r !== void 0 &&
|
|
23
|
+
const Me = (t) => new Pe(typeof t == "string" ? t : t + "", void 0, xe), De = (t, e) => {
|
|
24
|
+
if (ie) t.adoptedStyleSheets = e.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
|
|
25
|
+
else for (const o of e) {
|
|
26
|
+
const s = document.createElement("style"), r = G.litNonce;
|
|
27
|
+
r !== void 0 && s.setAttribute("nonce", r), s.textContent = o.cssText, t.appendChild(s);
|
|
33
28
|
}
|
|
34
29
|
}, pe = ie ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
|
|
35
|
-
let
|
|
36
|
-
for (const
|
|
37
|
-
return
|
|
30
|
+
let o = "";
|
|
31
|
+
for (const s of e.cssRules) o += s.cssText;
|
|
32
|
+
return Me(o);
|
|
38
33
|
})(t) : t;
|
|
39
|
-
const { is: Ne, defineProperty: Te, getOwnPropertyDescriptor: Oe, getOwnPropertyNames: Be, getOwnPropertySymbols: Ve, getPrototypeOf: He } = Object, te = globalThis, fe = te.trustedTypes, Ue = fe ? fe.emptyScript : "",
|
|
34
|
+
const { is: Ne, defineProperty: Te, getOwnPropertyDescriptor: Oe, getOwnPropertyNames: Be, getOwnPropertySymbols: Ve, getPrototypeOf: He } = Object, te = globalThis, fe = te.trustedTypes, Ue = fe ? fe.emptyScript : "", Fe = te.reactiveElementPolyfillSupport, z = (t, e) => t, J = { toAttribute(t, e) {
|
|
40
35
|
switch (e) {
|
|
41
36
|
case Boolean:
|
|
42
37
|
t = t ? Ue : null;
|
|
@@ -47,23 +42,23 @@ const { is: Ne, defineProperty: Te, getOwnPropertyDescriptor: Oe, getOwnProperty
|
|
|
47
42
|
}
|
|
48
43
|
return t;
|
|
49
44
|
}, fromAttribute(t, e) {
|
|
50
|
-
let
|
|
45
|
+
let o = t;
|
|
51
46
|
switch (e) {
|
|
52
47
|
case Boolean:
|
|
53
|
-
|
|
48
|
+
o = t !== null;
|
|
54
49
|
break;
|
|
55
50
|
case Number:
|
|
56
|
-
|
|
51
|
+
o = t === null ? null : Number(t);
|
|
57
52
|
break;
|
|
58
53
|
case Object:
|
|
59
54
|
case Array:
|
|
60
55
|
try {
|
|
61
|
-
|
|
56
|
+
o = JSON.parse(t);
|
|
62
57
|
} catch {
|
|
63
|
-
|
|
58
|
+
o = null;
|
|
64
59
|
}
|
|
65
60
|
}
|
|
66
|
-
return
|
|
61
|
+
return o;
|
|
67
62
|
} }, ne = (t, e) => !Ne(t, e), be = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: ne };
|
|
68
63
|
Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), te.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
|
|
69
64
|
let V = class extends HTMLElement {
|
|
@@ -73,60 +68,60 @@ let V = class extends HTMLElement {
|
|
|
73
68
|
static get observedAttributes() {
|
|
74
69
|
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
|
|
75
70
|
}
|
|
76
|
-
static createProperty(e,
|
|
77
|
-
if (
|
|
78
|
-
const
|
|
71
|
+
static createProperty(e, o = be) {
|
|
72
|
+
if (o.state && (o.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((o = Object.create(o)).wrapped = !0), this.elementProperties.set(e, o), !o.noAccessor) {
|
|
73
|
+
const s = /* @__PURE__ */ Symbol(), r = this.getPropertyDescriptor(e, s, o);
|
|
79
74
|
r !== void 0 && Te(this.prototype, e, r);
|
|
80
75
|
}
|
|
81
76
|
}
|
|
82
|
-
static getPropertyDescriptor(e,
|
|
77
|
+
static getPropertyDescriptor(e, o, s) {
|
|
83
78
|
const { get: r, set: i } = Oe(this.prototype, e) ?? { get() {
|
|
84
|
-
return this[
|
|
79
|
+
return this[o];
|
|
85
80
|
}, set(n) {
|
|
86
|
-
this[
|
|
81
|
+
this[o] = n;
|
|
87
82
|
} };
|
|
88
83
|
return { get: r, set(n) {
|
|
89
84
|
const l = r?.call(this);
|
|
90
|
-
i?.call(this, n), this.requestUpdate(e, l,
|
|
85
|
+
i?.call(this, n), this.requestUpdate(e, l, s);
|
|
91
86
|
}, configurable: !0, enumerable: !0 };
|
|
92
87
|
}
|
|
93
88
|
static getPropertyOptions(e) {
|
|
94
89
|
return this.elementProperties.get(e) ?? be;
|
|
95
90
|
}
|
|
96
91
|
static _$Ei() {
|
|
97
|
-
if (this.hasOwnProperty(
|
|
92
|
+
if (this.hasOwnProperty(z("elementProperties"))) return;
|
|
98
93
|
const e = He(this);
|
|
99
94
|
e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
|
|
100
95
|
}
|
|
101
96
|
static finalize() {
|
|
102
|
-
if (this.hasOwnProperty(
|
|
103
|
-
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(
|
|
104
|
-
const
|
|
105
|
-
for (const r of
|
|
97
|
+
if (this.hasOwnProperty(z("finalized"))) return;
|
|
98
|
+
if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(z("properties"))) {
|
|
99
|
+
const o = this.properties, s = [...Be(o), ...Ve(o)];
|
|
100
|
+
for (const r of s) this.createProperty(r, o[r]);
|
|
106
101
|
}
|
|
107
102
|
const e = this[Symbol.metadata];
|
|
108
103
|
if (e !== null) {
|
|
109
|
-
const
|
|
110
|
-
if (
|
|
104
|
+
const o = litPropertyMetadata.get(e);
|
|
105
|
+
if (o !== void 0) for (const [s, r] of o) this.elementProperties.set(s, r);
|
|
111
106
|
}
|
|
112
107
|
this._$Eh = /* @__PURE__ */ new Map();
|
|
113
|
-
for (const [
|
|
114
|
-
const r = this._$Eu(
|
|
115
|
-
r !== void 0 && this._$Eh.set(r,
|
|
108
|
+
for (const [o, s] of this.elementProperties) {
|
|
109
|
+
const r = this._$Eu(o, s);
|
|
110
|
+
r !== void 0 && this._$Eh.set(r, o);
|
|
116
111
|
}
|
|
117
112
|
this.elementStyles = this.finalizeStyles(this.styles);
|
|
118
113
|
}
|
|
119
114
|
static finalizeStyles(e) {
|
|
120
|
-
const
|
|
115
|
+
const o = [];
|
|
121
116
|
if (Array.isArray(e)) {
|
|
122
|
-
const
|
|
123
|
-
for (const r of
|
|
124
|
-
} else e !== void 0 &&
|
|
125
|
-
return
|
|
117
|
+
const s = new Set(e.flat(1 / 0).reverse());
|
|
118
|
+
for (const r of s) o.unshift(pe(r));
|
|
119
|
+
} else e !== void 0 && o.push(pe(e));
|
|
120
|
+
return o;
|
|
126
121
|
}
|
|
127
|
-
static _$Eu(e,
|
|
128
|
-
const
|
|
129
|
-
return
|
|
122
|
+
static _$Eu(e, o) {
|
|
123
|
+
const s = o.attribute;
|
|
124
|
+
return s === !1 ? void 0 : typeof s == "string" ? s : typeof e == "string" ? e.toLowerCase() : void 0;
|
|
130
125
|
}
|
|
131
126
|
constructor() {
|
|
132
127
|
super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
|
|
@@ -141,13 +136,13 @@ let V = class extends HTMLElement {
|
|
|
141
136
|
this._$EO?.delete(e);
|
|
142
137
|
}
|
|
143
138
|
_$E_() {
|
|
144
|
-
const e = /* @__PURE__ */ new Map(),
|
|
145
|
-
for (const
|
|
139
|
+
const e = /* @__PURE__ */ new Map(), o = this.constructor.elementProperties;
|
|
140
|
+
for (const s of o.keys()) this.hasOwnProperty(s) && (e.set(s, this[s]), delete this[s]);
|
|
146
141
|
e.size > 0 && (this._$Ep = e);
|
|
147
142
|
}
|
|
148
143
|
createRenderRoot() {
|
|
149
144
|
const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
|
|
150
|
-
return
|
|
145
|
+
return De(e, this.constructor.elementStyles), e;
|
|
151
146
|
}
|
|
152
147
|
connectedCallback() {
|
|
153
148
|
this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((e) => e.hostConnected?.());
|
|
@@ -157,42 +152,42 @@ let V = class extends HTMLElement {
|
|
|
157
152
|
disconnectedCallback() {
|
|
158
153
|
this._$EO?.forEach((e) => e.hostDisconnected?.());
|
|
159
154
|
}
|
|
160
|
-
attributeChangedCallback(e,
|
|
161
|
-
this._$AK(e,
|
|
155
|
+
attributeChangedCallback(e, o, s) {
|
|
156
|
+
this._$AK(e, s);
|
|
162
157
|
}
|
|
163
|
-
_$ET(e,
|
|
164
|
-
const
|
|
165
|
-
if (r !== void 0 &&
|
|
166
|
-
const i = (
|
|
158
|
+
_$ET(e, o) {
|
|
159
|
+
const s = this.constructor.elementProperties.get(e), r = this.constructor._$Eu(e, s);
|
|
160
|
+
if (r !== void 0 && s.reflect === !0) {
|
|
161
|
+
const i = (s.converter?.toAttribute !== void 0 ? s.converter : J).toAttribute(o, s.type);
|
|
167
162
|
this._$Em = e, i == null ? this.removeAttribute(r) : this.setAttribute(r, i), this._$Em = null;
|
|
168
163
|
}
|
|
169
164
|
}
|
|
170
|
-
_$AK(e,
|
|
171
|
-
const
|
|
165
|
+
_$AK(e, o) {
|
|
166
|
+
const s = this.constructor, r = s._$Eh.get(e);
|
|
172
167
|
if (r !== void 0 && this._$Em !== r) {
|
|
173
|
-
const i =
|
|
168
|
+
const i = s.getPropertyOptions(r), n = typeof i.converter == "function" ? { fromAttribute: i.converter } : i.converter?.fromAttribute !== void 0 ? i.converter : J;
|
|
174
169
|
this._$Em = r;
|
|
175
|
-
const l = n.fromAttribute(
|
|
170
|
+
const l = n.fromAttribute(o, i.type);
|
|
176
171
|
this[r] = l ?? this._$Ej?.get(r) ?? l, this._$Em = null;
|
|
177
172
|
}
|
|
178
173
|
}
|
|
179
|
-
requestUpdate(e,
|
|
174
|
+
requestUpdate(e, o, s, r = !1, i) {
|
|
180
175
|
if (e !== void 0) {
|
|
181
176
|
const n = this.constructor;
|
|
182
|
-
if (r === !1 && (i = this[e]),
|
|
183
|
-
this.C(e,
|
|
177
|
+
if (r === !1 && (i = this[e]), s ??= n.getPropertyOptions(e), !((s.hasChanged ?? ne)(i, o) || s.useDefault && s.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(n._$Eu(e, s)))) return;
|
|
178
|
+
this.C(e, o, s);
|
|
184
179
|
}
|
|
185
180
|
this.isUpdatePending === !1 && (this._$ES = this._$EP());
|
|
186
181
|
}
|
|
187
|
-
C(e,
|
|
188
|
-
|
|
182
|
+
C(e, o, { useDefault: s, reflect: r, wrapped: i }, n) {
|
|
183
|
+
s && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(e) && (this._$Ej.set(e, n ?? o ?? this[e]), i !== !0 || n !== void 0) || (this._$AL.has(e) || (this.hasUpdated || s || (o = void 0), this._$AL.set(e, o)), r === !0 && this._$Em !== e && (this._$Eq ??= /* @__PURE__ */ new Set()).add(e));
|
|
189
184
|
}
|
|
190
185
|
async _$EP() {
|
|
191
186
|
this.isUpdatePending = !0;
|
|
192
187
|
try {
|
|
193
188
|
await this._$ES;
|
|
194
|
-
} catch (
|
|
195
|
-
Promise.reject(
|
|
189
|
+
} catch (o) {
|
|
190
|
+
Promise.reject(o);
|
|
196
191
|
}
|
|
197
192
|
const e = this.scheduleUpdate();
|
|
198
193
|
return e != null && await e, !this.isUpdatePending;
|
|
@@ -207,25 +202,25 @@ let V = class extends HTMLElement {
|
|
|
207
202
|
for (const [r, i] of this._$Ep) this[r] = i;
|
|
208
203
|
this._$Ep = void 0;
|
|
209
204
|
}
|
|
210
|
-
const
|
|
211
|
-
if (
|
|
205
|
+
const s = this.constructor.elementProperties;
|
|
206
|
+
if (s.size > 0) for (const [r, i] of s) {
|
|
212
207
|
const { wrapped: n } = i, l = this[r];
|
|
213
208
|
n !== !0 || this._$AL.has(r) || l === void 0 || this.C(r, void 0, i, l);
|
|
214
209
|
}
|
|
215
210
|
}
|
|
216
211
|
let e = !1;
|
|
217
|
-
const
|
|
212
|
+
const o = this._$AL;
|
|
218
213
|
try {
|
|
219
|
-
e = this.shouldUpdate(
|
|
220
|
-
} catch (
|
|
221
|
-
throw e = !1, this._$EM(),
|
|
214
|
+
e = this.shouldUpdate(o), e ? (this.willUpdate(o), this._$EO?.forEach((s) => s.hostUpdate?.()), this.update(o)) : this._$EM();
|
|
215
|
+
} catch (s) {
|
|
216
|
+
throw e = !1, this._$EM(), s;
|
|
222
217
|
}
|
|
223
|
-
e && this._$AE(
|
|
218
|
+
e && this._$AE(o);
|
|
224
219
|
}
|
|
225
220
|
willUpdate(e) {
|
|
226
221
|
}
|
|
227
222
|
_$AE(e) {
|
|
228
|
-
this._$EO?.forEach((
|
|
223
|
+
this._$EO?.forEach((o) => o.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
|
|
229
224
|
}
|
|
230
225
|
_$EM() {
|
|
231
226
|
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
|
|
@@ -240,19 +235,19 @@ let V = class extends HTMLElement {
|
|
|
240
235
|
return !0;
|
|
241
236
|
}
|
|
242
237
|
update(e) {
|
|
243
|
-
this._$Eq &&= this._$Eq.forEach((
|
|
238
|
+
this._$Eq &&= this._$Eq.forEach((o) => this._$ET(o, this[o])), this._$EM();
|
|
244
239
|
}
|
|
245
240
|
updated(e) {
|
|
246
241
|
}
|
|
247
242
|
firstUpdated(e) {
|
|
248
243
|
}
|
|
249
244
|
};
|
|
250
|
-
V.elementStyles = [], V.shadowRootOptions = { mode: "open" }, V[
|
|
251
|
-
const
|
|
252
|
-
const { kind:
|
|
245
|
+
V.elementStyles = [], V.shadowRootOptions = { mode: "open" }, V[z("elementProperties")] = /* @__PURE__ */ new Map(), V[z("finalized")] = /* @__PURE__ */ new Map(), Fe?.({ ReactiveElement: V }), (te.reactiveElementVersions ??= []).push("2.1.2");
|
|
246
|
+
const Le = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged: ne }, Ie = (t = Le, e, o) => {
|
|
247
|
+
const { kind: s, metadata: r } = o;
|
|
253
248
|
let i = globalThis.litPropertyMetadata.get(r);
|
|
254
|
-
if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()),
|
|
255
|
-
const { name: n } =
|
|
249
|
+
if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), s === "setter" && ((t = Object.create(t)).wrapped = !0), i.set(o.name, t), s === "accessor") {
|
|
250
|
+
const { name: n } = o;
|
|
256
251
|
return { set(l) {
|
|
257
252
|
const a = e.get.call(this);
|
|
258
253
|
e.set.call(this, l), this.requestUpdate(n, a, t, !0, l);
|
|
@@ -260,29 +255,29 @@ const Fe = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged:
|
|
|
260
255
|
return l !== void 0 && this.C(n, void 0, t, l), l;
|
|
261
256
|
} };
|
|
262
257
|
}
|
|
263
|
-
if (
|
|
264
|
-
const { name: n } =
|
|
258
|
+
if (s === "setter") {
|
|
259
|
+
const { name: n } = o;
|
|
265
260
|
return function(l) {
|
|
266
261
|
const a = this[n];
|
|
267
262
|
e.call(this, l), this.requestUpdate(n, a, t, !0, l);
|
|
268
263
|
};
|
|
269
264
|
}
|
|
270
|
-
throw Error("Unsupported decorator location: " +
|
|
265
|
+
throw Error("Unsupported decorator location: " + s);
|
|
271
266
|
};
|
|
272
267
|
function h(t) {
|
|
273
|
-
return (e,
|
|
268
|
+
return (e, o) => typeof o == "object" ? Ie(t, e, o) : ((s, r, i) => {
|
|
274
269
|
const n = r.hasOwnProperty(i);
|
|
275
|
-
return r.constructor.createProperty(i,
|
|
276
|
-
})(t, e,
|
|
270
|
+
return r.constructor.createProperty(i, s), n ? Object.getOwnPropertyDescriptor(r, i) : void 0;
|
|
271
|
+
})(t, e, o);
|
|
277
272
|
}
|
|
278
273
|
function w(t) {
|
|
279
274
|
return h({ ...t, state: !0, attribute: !1 });
|
|
280
275
|
}
|
|
281
|
-
const K = C`: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)}`,
|
|
282
|
-
var
|
|
283
|
-
for (var r =
|
|
284
|
-
(n = t[i]) && (r = (
|
|
285
|
-
return
|
|
276
|
+
const K = C`: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)}`, ze = C`:host{width:var(--nf-width);position:relative;display:inline-block}:host([disabled]) .input{cursor:not-allowed;color:var(--nf-color-disabled)}:host([disabled]) .toggle-password{cursor:not-allowed;pointer-events:none;opacity:.5}::slotted(*){position:absolute;top:50%;left:.75rem;transform:translateY(-50%);color:var(--nf-color)}:host([disabled]) ::slotted(*){color:var(--nf-color-disabled)}.input{position:absolute;inset:0;padding:var(--nf-input-padding);outline:0;border:none;background:0 0;box-sizing:border-box;color:var(--nf-color);font-size:var(--nf-font-size);font-weight:var(--nf-font-weight);font-family:var(--nf-font-family),sans-serif}.input:has(.toggle-password){padding-right:2.5rem}.input .toggle-password{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);background:0 0;border:none;cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;color:var(--nf-select-icon-color);transition:color var(--nf-transition-fast) ease;outline:0}.input .toggle-password:hover{color:var(--nf-icon-color-hover)}.input .toggle-password:active{color:var(--nf-icon-color-active)}.input .toggle-password svg{display:block}`, O = (t) => (e) => (typeof window > "u" || customElements.get(t) || customElements.define(t, e), e);
|
|
277
|
+
var je = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, B = (t, e, o, s) => {
|
|
278
|
+
for (var r = s > 1 ? void 0 : s ? Re(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
279
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
280
|
+
return s && r && je(e, o, r), r;
|
|
286
281
|
};
|
|
287
282
|
let $ = class extends W {
|
|
288
283
|
constructor() {
|
|
@@ -344,7 +339,7 @@ let $ = class extends W {
|
|
|
344
339
|
});
|
|
345
340
|
}
|
|
346
341
|
};
|
|
347
|
-
$.styles = [K,
|
|
342
|
+
$.styles = [K, ze];
|
|
348
343
|
B([
|
|
349
344
|
h({ type: String })
|
|
350
345
|
], $.prototype, "value", 2);
|
|
@@ -380,12 +375,12 @@ async function qe(t) {
|
|
|
380
375
|
return new Promise((e) => setTimeout(e, t));
|
|
381
376
|
}
|
|
382
377
|
const We = C`: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}`;
|
|
383
|
-
var Ke = Object.defineProperty, Ze = Object.getOwnPropertyDescriptor, Z = (t, e,
|
|
384
|
-
for (var r =
|
|
385
|
-
(n = t[i]) && (r = (
|
|
386
|
-
return
|
|
378
|
+
var Ke = Object.defineProperty, Ze = Object.getOwnPropertyDescriptor, Z = (t, e, o, s) => {
|
|
379
|
+
for (var r = s > 1 ? void 0 : s ? Ze(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
380
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
381
|
+
return s && r && Ke(e, o, r), r;
|
|
387
382
|
};
|
|
388
|
-
let
|
|
383
|
+
let A = class extends W {
|
|
389
384
|
constructor() {
|
|
390
385
|
super(...arguments), this.value = "", this.options = [], this.disabled = !1, this.showDropdown = !1, this.jumpCloseFlag = !1, this.timeoutId = null, this.onFocus = () => {
|
|
391
386
|
this.disabled || (this.timeoutId && clearTimeout(this.timeoutId), this.showDropdown = !0, this.jumpCloseFlag = !0);
|
|
@@ -407,9 +402,9 @@ let E = class extends W {
|
|
|
407
402
|
this.dispatchEvent(new CustomEvent("input", { detail: t, bubbles: !0, composed: !0 })), this.value !== t && this.dispatchEvent(new CustomEvent("change", { detail: t, bubbles: !0, composed: !0 })), await qe(34), this.blur();
|
|
408
403
|
}
|
|
409
404
|
render() {
|
|
410
|
-
const t = this.options.findIndex((
|
|
405
|
+
const t = this.options.findIndex((o) => o.value == this.value), e = t > -1 ? this.options[t]?.label : this.value;
|
|
411
406
|
return f`<div class=dropdown>${(this.showDropdown ? this.options : []).map(
|
|
412
|
-
(
|
|
407
|
+
(o) => f`<div @click=${() => this.set(o.value)} class="item ${this.value == o.value ? "item-selected" : "item-unselected"}">${o.label}</div>`
|
|
413
408
|
)}</div><slot></slot><div class=text>${e}</div><svg class=icon width=24 height=24 viewBox="0 0 24 24"><path d="M17 10l-5 5.5-5-5.5"/></svg>`;
|
|
414
409
|
}
|
|
415
410
|
connectedCallback() {
|
|
@@ -421,10 +416,10 @@ let E = class extends W {
|
|
|
421
416
|
super.disconnectedCallback(), this.removeEventListener("focus", this.onFocus), this.removeEventListener("blur", this.onBlur), this.removeEventListener("click", this.onClick);
|
|
422
417
|
}
|
|
423
418
|
};
|
|
424
|
-
|
|
419
|
+
A.styles = [K, We];
|
|
425
420
|
Z([
|
|
426
421
|
h({ type: String })
|
|
427
|
-
],
|
|
422
|
+
], A.prototype, "value", 2);
|
|
428
423
|
Z([
|
|
429
424
|
h({
|
|
430
425
|
type: Array,
|
|
@@ -440,90 +435,90 @@ Z([
|
|
|
440
435
|
return [];
|
|
441
436
|
}
|
|
442
437
|
})
|
|
443
|
-
],
|
|
438
|
+
], A.prototype, "options", 2);
|
|
444
439
|
Z([
|
|
445
440
|
h({ type: Boolean, reflect: !0 })
|
|
446
|
-
],
|
|
441
|
+
], A.prototype, "disabled", 2);
|
|
447
442
|
Z([
|
|
448
443
|
w()
|
|
449
|
-
],
|
|
450
|
-
|
|
444
|
+
], A.prototype, "showDropdown", 2);
|
|
445
|
+
A = Z([
|
|
451
446
|
O("nf-select")
|
|
452
|
-
],
|
|
447
|
+
], A);
|
|
453
448
|
const Tt = N({
|
|
454
449
|
tagName: "nf-select",
|
|
455
|
-
elementClass:
|
|
450
|
+
elementClass: A,
|
|
456
451
|
react: T,
|
|
457
452
|
events: {
|
|
458
453
|
onInput: "input",
|
|
459
454
|
onChange: "change"
|
|
460
455
|
}
|
|
461
456
|
});
|
|
462
|
-
const ae = globalThis, me = (t) => t, Q = ae.trustedTypes, ge = Q ? Q.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, ke = "$lit$",
|
|
463
|
-
\f\r]`, I = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ve = /-->/g, _e = />/g, S = RegExp(`>|${
|
|
464
|
-
\f\r"'\`<>=]|("|')|))|$)`, "g"), ye = /'/g, we = /"/g,
|
|
457
|
+
const ae = globalThis, me = (t) => t, Q = ae.trustedTypes, ge = Q ? Q.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, ke = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ee = "?" + E, Ye = `<${Ee}>`, M = document, j = () => M.createComment(""), R = (t) => t === null || typeof t != "object" && typeof t != "function", le = Array.isArray, Xe = (t) => le(t) || typeof t?.[Symbol.iterator] == "function", se = `[
|
|
458
|
+
\f\r]`, I = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ve = /-->/g, _e = />/g, S = RegExp(`>|${se}(?:([^\\s"'>=/]+)(${se}*=${se}*(?:[^
|
|
459
|
+
\f\r"'\`<>=]|("|')|))|$)`, "g"), ye = /'/g, we = /"/g, Ae = /^(?:script|style|textarea|title)$/i, Ge = (t) => (e, ...o) => ({ _$litType$: t, strings: e, values: o }), re = Ge(1), D = /* @__PURE__ */ Symbol.for("lit-noChange"), b = /* @__PURE__ */ Symbol.for("lit-nothing"), $e = /* @__PURE__ */ new WeakMap(), P = M.createTreeWalker(M, 129);
|
|
465
460
|
function Ce(t, e) {
|
|
466
461
|
if (!le(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
467
462
|
return ge !== void 0 ? ge.createHTML(e) : e;
|
|
468
463
|
}
|
|
469
464
|
const Je = (t, e) => {
|
|
470
|
-
const
|
|
465
|
+
const o = t.length - 1, s = [];
|
|
471
466
|
let r, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = I;
|
|
472
|
-
for (let l = 0; l <
|
|
467
|
+
for (let l = 0; l < o; l++) {
|
|
473
468
|
const a = t[l];
|
|
474
|
-
let c,
|
|
475
|
-
for (; x < a.length && (n.lastIndex = x,
|
|
469
|
+
let c, p, d = -1, x = 0;
|
|
470
|
+
for (; x < a.length && (n.lastIndex = x, p = n.exec(a), p !== null); ) x = n.lastIndex, n === I ? p[1] === "!--" ? n = ve : p[1] !== void 0 ? n = _e : p[2] !== void 0 ? (Ae.test(p[2]) && (r = RegExp("</" + p[2], "g")), n = S) : p[3] !== void 0 && (n = S) : n === S ? p[0] === ">" ? (n = r ?? I, d = -1) : p[1] === void 0 ? d = -2 : (d = n.lastIndex - p[2].length, c = p[1], n = p[3] === void 0 ? S : p[3] === '"' ? we : ye) : n === we || n === ye ? n = S : n === ve || n === _e ? n = I : (n = S, r = void 0);
|
|
476
471
|
const k = n === S && t[l + 1].startsWith("/>") ? " " : "";
|
|
477
|
-
i += n === I ? a + Ye : d >= 0 ? (
|
|
472
|
+
i += n === I ? a + Ye : d >= 0 ? (s.push(c), a.slice(0, d) + ke + a.slice(d) + E + k) : a + E + (d === -2 ? l : k);
|
|
478
473
|
}
|
|
479
|
-
return [Ce(t, i + (t[
|
|
474
|
+
return [Ce(t, i + (t[o] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
|
|
480
475
|
};
|
|
481
476
|
class q {
|
|
482
|
-
constructor({ strings: e, _$litType$:
|
|
477
|
+
constructor({ strings: e, _$litType$: o }, s) {
|
|
483
478
|
let r;
|
|
484
479
|
this.parts = [];
|
|
485
480
|
let i = 0, n = 0;
|
|
486
|
-
const l = e.length - 1, a = this.parts, [c,
|
|
487
|
-
if (this.el = q.createElement(c,
|
|
481
|
+
const l = e.length - 1, a = this.parts, [c, p] = Je(e, o);
|
|
482
|
+
if (this.el = q.createElement(c, s), P.currentNode = this.el.content, o === 2 || o === 3) {
|
|
488
483
|
const d = this.el.content.firstChild;
|
|
489
484
|
d.replaceWith(...d.childNodes);
|
|
490
485
|
}
|
|
491
486
|
for (; (r = P.nextNode()) !== null && a.length < l; ) {
|
|
492
487
|
if (r.nodeType === 1) {
|
|
493
488
|
if (r.hasAttributes()) for (const d of r.getAttributeNames()) if (d.endsWith(ke)) {
|
|
494
|
-
const x =
|
|
495
|
-
a.push({ type: 1, index: i, name: X[2], strings: k, ctor: X[1] === "." ? et : X[1] === "?" ? tt : X[1] === "@" ?
|
|
496
|
-
} else d.startsWith(
|
|
497
|
-
if (
|
|
498
|
-
const d = r.textContent.split(
|
|
489
|
+
const x = p[n++], k = r.getAttribute(d).split(E), X = /([.?@])?(.*)/.exec(x);
|
|
490
|
+
a.push({ type: 1, index: i, name: X[2], strings: k, ctor: X[1] === "." ? et : X[1] === "?" ? tt : X[1] === "@" ? ot : oe }), r.removeAttribute(d);
|
|
491
|
+
} else d.startsWith(E) && (a.push({ type: 6, index: i }), r.removeAttribute(d));
|
|
492
|
+
if (Ae.test(r.tagName)) {
|
|
493
|
+
const d = r.textContent.split(E), x = d.length - 1;
|
|
499
494
|
if (x > 0) {
|
|
500
495
|
r.textContent = Q ? Q.emptyScript : "";
|
|
501
|
-
for (let k = 0; k < x; k++) r.append(d[k],
|
|
502
|
-
r.append(d[x],
|
|
496
|
+
for (let k = 0; k < x; k++) r.append(d[k], j()), P.nextNode(), a.push({ type: 2, index: ++i });
|
|
497
|
+
r.append(d[x], j());
|
|
503
498
|
}
|
|
504
499
|
}
|
|
505
|
-
} else if (r.nodeType === 8) if (r.data ===
|
|
500
|
+
} else if (r.nodeType === 8) if (r.data === Ee) a.push({ type: 2, index: i });
|
|
506
501
|
else {
|
|
507
502
|
let d = -1;
|
|
508
|
-
for (; (d = r.data.indexOf(
|
|
503
|
+
for (; (d = r.data.indexOf(E, d + 1)) !== -1; ) a.push({ type: 7, index: i }), d += E.length - 1;
|
|
509
504
|
}
|
|
510
505
|
i++;
|
|
511
506
|
}
|
|
512
507
|
}
|
|
513
|
-
static createElement(e,
|
|
514
|
-
const
|
|
515
|
-
return
|
|
508
|
+
static createElement(e, o) {
|
|
509
|
+
const s = M.createElement("template");
|
|
510
|
+
return s.innerHTML = e, s;
|
|
516
511
|
}
|
|
517
512
|
}
|
|
518
|
-
function U(t, e,
|
|
519
|
-
if (e ===
|
|
520
|
-
let r =
|
|
513
|
+
function U(t, e, o = t, s) {
|
|
514
|
+
if (e === D) return e;
|
|
515
|
+
let r = s !== void 0 ? o._$Co?.[s] : o._$Cl;
|
|
521
516
|
const i = R(e) ? void 0 : e._$litDirective$;
|
|
522
|
-
return r?.constructor !== i && (r?._$AO?.(!1), i === void 0 ? r = void 0 : (r = new i(t), r._$AT(t,
|
|
517
|
+
return r?.constructor !== i && (r?._$AO?.(!1), i === void 0 ? r = void 0 : (r = new i(t), r._$AT(t, o, s)), s !== void 0 ? (o._$Co ??= [])[s] = r : o._$Cl = r), r !== void 0 && (e = U(t, r._$AS(t, e.values), r, s)), e;
|
|
523
518
|
}
|
|
524
519
|
class Qe {
|
|
525
|
-
constructor(e,
|
|
526
|
-
this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM =
|
|
520
|
+
constructor(e, o) {
|
|
521
|
+
this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = o;
|
|
527
522
|
}
|
|
528
523
|
get parentNode() {
|
|
529
524
|
return this._$AM.parentNode;
|
|
@@ -532,34 +527,34 @@ class Qe {
|
|
|
532
527
|
return this._$AM._$AU;
|
|
533
528
|
}
|
|
534
529
|
u(e) {
|
|
535
|
-
const { el: { content:
|
|
530
|
+
const { el: { content: o }, parts: s } = this._$AD, r = (e?.creationScope ?? M).importNode(o, !0);
|
|
536
531
|
P.currentNode = r;
|
|
537
|
-
let i = P.nextNode(), n = 0, l = 0, a =
|
|
532
|
+
let i = P.nextNode(), n = 0, l = 0, a = s[0];
|
|
538
533
|
for (; a !== void 0; ) {
|
|
539
534
|
if (n === a.index) {
|
|
540
535
|
let c;
|
|
541
|
-
a.type === 2 ? c = new Y(i, i.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(i, a.name, a.strings, this, e) : a.type === 6 && (c = new
|
|
536
|
+
a.type === 2 ? c = new Y(i, i.nextSibling, this, e) : a.type === 1 ? c = new a.ctor(i, a.name, a.strings, this, e) : a.type === 6 && (c = new st(i, this, e)), this._$AV.push(c), a = s[++l];
|
|
542
537
|
}
|
|
543
538
|
n !== a?.index && (i = P.nextNode(), n++);
|
|
544
539
|
}
|
|
545
|
-
return P.currentNode =
|
|
540
|
+
return P.currentNode = M, r;
|
|
546
541
|
}
|
|
547
542
|
p(e) {
|
|
548
|
-
let
|
|
549
|
-
for (const
|
|
543
|
+
let o = 0;
|
|
544
|
+
for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(e, s, o), o += s.strings.length - 2) : s._$AI(e[o])), o++;
|
|
550
545
|
}
|
|
551
546
|
}
|
|
552
547
|
class Y {
|
|
553
548
|
get _$AU() {
|
|
554
549
|
return this._$AM?._$AU ?? this._$Cv;
|
|
555
550
|
}
|
|
556
|
-
constructor(e,
|
|
557
|
-
this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = e, this._$AB =
|
|
551
|
+
constructor(e, o, s, r) {
|
|
552
|
+
this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = e, this._$AB = o, this._$AM = s, this.options = r, this._$Cv = r?.isConnected ?? !0;
|
|
558
553
|
}
|
|
559
554
|
get parentNode() {
|
|
560
555
|
let e = this._$AA.parentNode;
|
|
561
|
-
const
|
|
562
|
-
return
|
|
556
|
+
const o = this._$AM;
|
|
557
|
+
return o !== void 0 && e?.nodeType === 11 && (e = o.parentNode), e;
|
|
563
558
|
}
|
|
564
559
|
get startNode() {
|
|
565
560
|
return this._$AA;
|
|
@@ -567,8 +562,8 @@ class Y {
|
|
|
567
562
|
get endNode() {
|
|
568
563
|
return this._$AB;
|
|
569
564
|
}
|
|
570
|
-
_$AI(e,
|
|
571
|
-
e = U(this, e,
|
|
565
|
+
_$AI(e, o = this) {
|
|
566
|
+
e = U(this, e, o), R(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== D && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Xe(e) ? this.k(e) : this._(e);
|
|
572
567
|
}
|
|
573
568
|
O(e) {
|
|
574
569
|
return this._$AA.parentNode.insertBefore(e, this._$AB);
|
|
@@ -577,55 +572,55 @@ class Y {
|
|
|
577
572
|
this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
|
|
578
573
|
}
|
|
579
574
|
_(e) {
|
|
580
|
-
this._$AH !== b && R(this._$AH) ? this._$AA.nextSibling.data = e : this.T(
|
|
575
|
+
this._$AH !== b && R(this._$AH) ? this._$AA.nextSibling.data = e : this.T(M.createTextNode(e)), this._$AH = e;
|
|
581
576
|
}
|
|
582
577
|
$(e) {
|
|
583
|
-
const { values:
|
|
584
|
-
if (this._$AH?._$AD === r) this._$AH.p(
|
|
578
|
+
const { values: o, _$litType$: s } = e, r = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = q.createElement(Ce(s.h, s.h[0]), this.options)), s);
|
|
579
|
+
if (this._$AH?._$AD === r) this._$AH.p(o);
|
|
585
580
|
else {
|
|
586
581
|
const i = new Qe(r, this), n = i.u(this.options);
|
|
587
|
-
i.p(
|
|
582
|
+
i.p(o), this.T(n), this._$AH = i;
|
|
588
583
|
}
|
|
589
584
|
}
|
|
590
585
|
_$AC(e) {
|
|
591
|
-
let
|
|
592
|
-
return
|
|
586
|
+
let o = $e.get(e.strings);
|
|
587
|
+
return o === void 0 && $e.set(e.strings, o = new q(e)), o;
|
|
593
588
|
}
|
|
594
589
|
k(e) {
|
|
595
590
|
le(this._$AH) || (this._$AH = [], this._$AR());
|
|
596
|
-
const
|
|
597
|
-
let
|
|
598
|
-
for (const i of e) r ===
|
|
599
|
-
r <
|
|
600
|
-
}
|
|
601
|
-
_$AR(e = this._$AA.nextSibling,
|
|
602
|
-
for (this._$AP?.(!1, !0,
|
|
603
|
-
const
|
|
604
|
-
me(e).remove(), e =
|
|
591
|
+
const o = this._$AH;
|
|
592
|
+
let s, r = 0;
|
|
593
|
+
for (const i of e) r === o.length ? o.push(s = new Y(this.O(j()), this.O(j()), this, this.options)) : s = o[r], s._$AI(i), r++;
|
|
594
|
+
r < o.length && (this._$AR(s && s._$AB.nextSibling, r), o.length = r);
|
|
595
|
+
}
|
|
596
|
+
_$AR(e = this._$AA.nextSibling, o) {
|
|
597
|
+
for (this._$AP?.(!1, !0, o); e !== this._$AB; ) {
|
|
598
|
+
const s = me(e).nextSibling;
|
|
599
|
+
me(e).remove(), e = s;
|
|
605
600
|
}
|
|
606
601
|
}
|
|
607
602
|
setConnected(e) {
|
|
608
603
|
this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
|
|
609
604
|
}
|
|
610
605
|
}
|
|
611
|
-
class
|
|
606
|
+
class oe {
|
|
612
607
|
get tagName() {
|
|
613
608
|
return this.element.tagName;
|
|
614
609
|
}
|
|
615
610
|
get _$AU() {
|
|
616
611
|
return this._$AM._$AU;
|
|
617
612
|
}
|
|
618
|
-
constructor(e,
|
|
619
|
-
this.type = 1, this._$AH = b, this._$AN = void 0, this.element = e, this.name =
|
|
613
|
+
constructor(e, o, s, r, i) {
|
|
614
|
+
this.type = 1, this._$AH = b, this._$AN = void 0, this.element = e, this.name = o, this._$AM = r, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = b;
|
|
620
615
|
}
|
|
621
|
-
_$AI(e,
|
|
616
|
+
_$AI(e, o = this, s, r) {
|
|
622
617
|
const i = this.strings;
|
|
623
618
|
let n = !1;
|
|
624
|
-
if (i === void 0) e = U(this, e,
|
|
619
|
+
if (i === void 0) e = U(this, e, o, 0), n = !R(e) || e !== this._$AH && e !== D, n && (this._$AH = e);
|
|
625
620
|
else {
|
|
626
621
|
const l = e;
|
|
627
622
|
let a, c;
|
|
628
|
-
for (e = i[0], a = 0; a < i.length - 1; a++) c = U(this, l[
|
|
623
|
+
for (e = i[0], a = 0; a < i.length - 1; a++) c = U(this, l[s + a], o, a), c === D && (c = this._$AH[a]), n ||= !R(c) || c !== this._$AH[a], c === b ? e = b : e !== b && (e += (c ?? "") + i[a + 1]), this._$AH[a] = c;
|
|
629
624
|
}
|
|
630
625
|
n && !r && this.j(e);
|
|
631
626
|
}
|
|
@@ -633,7 +628,7 @@ class se {
|
|
|
633
628
|
e === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
|
|
634
629
|
}
|
|
635
630
|
}
|
|
636
|
-
class et extends
|
|
631
|
+
class et extends oe {
|
|
637
632
|
constructor() {
|
|
638
633
|
super(...arguments), this.type = 3;
|
|
639
634
|
}
|
|
@@ -641,7 +636,7 @@ class et extends se {
|
|
|
641
636
|
this.element[this.name] = e === b ? void 0 : e;
|
|
642
637
|
}
|
|
643
638
|
}
|
|
644
|
-
class tt extends
|
|
639
|
+
class tt extends oe {
|
|
645
640
|
constructor() {
|
|
646
641
|
super(...arguments), this.type = 4;
|
|
647
642
|
}
|
|
@@ -649,22 +644,22 @@ class tt extends se {
|
|
|
649
644
|
this.element.toggleAttribute(this.name, !!e && e !== b);
|
|
650
645
|
}
|
|
651
646
|
}
|
|
652
|
-
class
|
|
653
|
-
constructor(e,
|
|
654
|
-
super(e,
|
|
647
|
+
class ot extends oe {
|
|
648
|
+
constructor(e, o, s, r, i) {
|
|
649
|
+
super(e, o, s, r, i), this.type = 5;
|
|
655
650
|
}
|
|
656
|
-
_$AI(e,
|
|
657
|
-
if ((e = U(this, e,
|
|
658
|
-
const
|
|
659
|
-
r && this.element.removeEventListener(this.name, this,
|
|
651
|
+
_$AI(e, o = this) {
|
|
652
|
+
if ((e = U(this, e, o, 0) ?? b) === D) return;
|
|
653
|
+
const s = this._$AH, r = e === b && s !== b || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, i = e !== b && (s === b || r);
|
|
654
|
+
r && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
|
|
660
655
|
}
|
|
661
656
|
handleEvent(e) {
|
|
662
657
|
typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
|
|
663
658
|
}
|
|
664
659
|
}
|
|
665
|
-
class
|
|
666
|
-
constructor(e,
|
|
667
|
-
this.element = e, this.type = 6, this._$AN = void 0, this._$AM =
|
|
660
|
+
class st {
|
|
661
|
+
constructor(e, o, s) {
|
|
662
|
+
this.element = e, this.type = 6, this._$AN = void 0, this._$AM = o, this.options = s;
|
|
668
663
|
}
|
|
669
664
|
get _$AU() {
|
|
670
665
|
return this._$AM._$AU;
|
|
@@ -675,12 +670,12 @@ class ot {
|
|
|
675
670
|
}
|
|
676
671
|
const rt = ae.litHtmlPolyfillSupport;
|
|
677
672
|
rt?.(q, Y), (ae.litHtmlVersions ??= []).push("3.3.2");
|
|
678
|
-
const it = (t, e,
|
|
679
|
-
const
|
|
680
|
-
let r =
|
|
673
|
+
const it = (t, e, o) => {
|
|
674
|
+
const s = o?.renderBefore ?? e;
|
|
675
|
+
let r = s._$litPart$;
|
|
681
676
|
if (r === void 0) {
|
|
682
|
-
const i =
|
|
683
|
-
|
|
677
|
+
const i = o?.renderBefore ?? null;
|
|
678
|
+
s._$litPart$ = r = new Y(e.insertBefore(j(), i), i, void 0, o ?? {});
|
|
684
679
|
}
|
|
685
680
|
return r._$AI(t), r;
|
|
686
681
|
};
|
|
@@ -694,8 +689,8 @@ let H = class extends V {
|
|
|
694
689
|
return this.renderOptions.renderBefore ??= e.firstChild, e;
|
|
695
690
|
}
|
|
696
691
|
update(e) {
|
|
697
|
-
const
|
|
698
|
-
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = it(
|
|
692
|
+
const o = this.render();
|
|
693
|
+
this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = it(o, this.renderRoot, this.renderOptions);
|
|
699
694
|
}
|
|
700
695
|
connectedCallback() {
|
|
701
696
|
super.connectedCallback(), this._$Do?.setConnected(!0);
|
|
@@ -704,7 +699,7 @@ let H = class extends V {
|
|
|
704
699
|
super.disconnectedCallback(), this._$Do?.setConnected(!1);
|
|
705
700
|
}
|
|
706
701
|
render() {
|
|
707
|
-
return
|
|
702
|
+
return D;
|
|
708
703
|
}
|
|
709
704
|
};
|
|
710
705
|
H._$litElement$ = !0, H.finalized = !0, he.litElementHydrateSupport?.({ LitElement: H });
|
|
@@ -712,12 +707,12 @@ const nt = he.litElementPolyfillSupport;
|
|
|
712
707
|
nt?.({ LitElement: H });
|
|
713
708
|
(he.litElementVersions ??= []).push("4.2.2");
|
|
714
709
|
const at = C`: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(--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}`;
|
|
715
|
-
var lt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, ce = (t, e,
|
|
716
|
-
for (var r =
|
|
717
|
-
(n = t[i]) && (r = (
|
|
718
|
-
return
|
|
710
|
+
var lt = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, ce = (t, e, o, s) => {
|
|
711
|
+
for (var r = s > 1 ? void 0 : s ? ht(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
712
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
713
|
+
return s && r && lt(e, o, r), r;
|
|
719
714
|
};
|
|
720
|
-
let
|
|
715
|
+
let F = class extends H {
|
|
721
716
|
constructor() {
|
|
722
717
|
super(...arguments), this.checked = !1, this.disabled = !1, this.rippleElement = null;
|
|
723
718
|
}
|
|
@@ -734,11 +729,11 @@ let L = class extends H {
|
|
|
734
729
|
createRipple(t) {
|
|
735
730
|
const e = this.shadowRoot?.querySelector(".switch-wrapper");
|
|
736
731
|
if (!e) return;
|
|
737
|
-
const
|
|
738
|
-
|
|
739
|
-
const
|
|
740
|
-
|
|
741
|
-
e.contains(
|
|
732
|
+
const o = e.querySelector(".ripple");
|
|
733
|
+
o && e.removeChild(o);
|
|
734
|
+
const s = document.createElement("div");
|
|
735
|
+
s.classList.add("ripple"), e.appendChild(s), s.addEventListener("animationend", () => {
|
|
736
|
+
e.contains(s) && e.removeChild(s);
|
|
742
737
|
});
|
|
743
738
|
}
|
|
744
739
|
// 渲染开关组件
|
|
@@ -751,37 +746,45 @@ let L = class extends H {
|
|
|
751
746
|
});
|
|
752
747
|
}
|
|
753
748
|
};
|
|
754
|
-
|
|
749
|
+
F.styles = [at];
|
|
755
750
|
ce([
|
|
756
751
|
h({ type: Boolean, reflect: !0 })
|
|
757
|
-
],
|
|
752
|
+
], F.prototype, "checked", 2);
|
|
758
753
|
ce([
|
|
759
754
|
h({ type: Boolean, reflect: !0 })
|
|
760
|
-
],
|
|
761
|
-
|
|
755
|
+
], F.prototype, "disabled", 2);
|
|
756
|
+
F = ce([
|
|
762
757
|
O("nf-switch")
|
|
763
|
-
],
|
|
758
|
+
], F);
|
|
764
759
|
const Bt = N({
|
|
765
760
|
tagName: "nf-switch",
|
|
766
|
-
elementClass:
|
|
761
|
+
elementClass: F,
|
|
767
762
|
react: T,
|
|
768
763
|
events: {
|
|
769
764
|
onChange: "change"
|
|
770
765
|
}
|
|
771
|
-
}), ct = C`:host{width:
|
|
772
|
-
var dt = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, m = (t, e,
|
|
773
|
-
for (var r =
|
|
774
|
-
(n = t[i]) && (r = (
|
|
775
|
-
return
|
|
766
|
+
}), ct = C`:host{width:10rem;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0;overflow:hidden}.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-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-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-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-prefix:not(:empty){padding-inline-end:.25rem}.input-suffix{display:flex;align-items:center;justify-content:center;color:var(--nf-color);font-size:var(--nf-font-size);pointer-events:none;-webkit-user-select:none;user-select:none}.input-suffix:not(:empty){padding-inline-end:.6125rem;padding-inline-start:.5rem}.controls{position:absolute;top:0;right:0;height:100%;width:0;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;transition:width var(--nf-transition-fast) ease}.controls:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}:host([suffix]) .controls:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:.67px;background-color:var(--nf-control-divider-color)}.control-btn{flex:1;display:flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;transition:background-color var(--nf-transition-fast) ease;outline:0;-webkit-user-select:none;user-select:none}.control-btn:hover{background-color:var(--nf-control-btn-background-hover)}.control-btn:active{background-color:var(--nf-control-btn-background-active)}.control-btn:focus-visible{background-color:var(--nf-control-btn-background-hover)}.control-btn svg{display:block;pointer-events:none;fill:none;stroke:var(--nf-select-icon-color);stroke-width:1;stroke-linecap:round}.control-btn-up{border-bottom:.67px solid var(--nf-control-divider-color)}:host(:not([suffix])) .control-btn-up{border-top-right-radius:var(--nf-border-radius)}:host(:not([suffix])) .control-btn-down{border-bottom-right-radius:var(--nf-border-radius)}:host([disabled]) .input-number-input{cursor:not-allowed;color:var(--nf-color-disabled)}:host([disabled]) .input-prefix,:host([disabled]) .input-suffix{color:var(--nf-color-disabled)}:host([disabled]) .controls{display:none}:host([disabled]) .control-btn{cursor:not-allowed;pointer-events:none;opacity:.5}`;
|
|
767
|
+
var dt = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, m = (t, e, o, s) => {
|
|
768
|
+
for (var r = s > 1 ? void 0 : s ? ut(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
769
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
770
|
+
return s && r && dt(e, o, r), r;
|
|
776
771
|
};
|
|
777
|
-
let
|
|
772
|
+
let u = class extends W {
|
|
778
773
|
constructor() {
|
|
779
|
-
super(...arguments), this.value = 0, this.formatter = (t) =>
|
|
774
|
+
super(...arguments), this.value = 0, this.formatter = (t) => {
|
|
775
|
+
if (t === null) return "";
|
|
776
|
+
const e = String(t);
|
|
777
|
+
return e.includes("e") ? t.toLocaleString("en", {
|
|
778
|
+
useGrouping: !1,
|
|
779
|
+
maximumFractionDigits: 20,
|
|
780
|
+
minimumFractionDigits: 0
|
|
781
|
+
}) : e;
|
|
782
|
+
}, this.parser = (t) => {
|
|
780
783
|
if (t.trim().length == 0 || t.endsWith("."))
|
|
781
784
|
return null;
|
|
782
785
|
const e = Number(t);
|
|
783
786
|
return Number.isNaN(e) ? null : this.clampValue(e);
|
|
784
|
-
}, this.prefix = "", this.suffix = "", 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.text = "", this.isTyping = !1, this.isFocused = !1;
|
|
787
|
+
}, this.prefix = "", this.suffix = "", 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;
|
|
785
788
|
}
|
|
786
789
|
// 对解析结果进行额外验证
|
|
787
790
|
validateParsed(t) {
|
|
@@ -792,13 +795,17 @@ let p = class extends W {
|
|
|
792
795
|
setText(t) {
|
|
793
796
|
let e = t;
|
|
794
797
|
if (e = e.replace(/[^0-9+.\-]/g, ""), this.noNegative && (e = e.replace(/[+\-]/g, "")), this.noDecimal && e.includes(".")) {
|
|
795
|
-
const
|
|
796
|
-
Number.isNaN(
|
|
798
|
+
const o = Number(e);
|
|
799
|
+
Number.isNaN(o) ? e = e.replace(/\./g, "") : e = String(Math.round(o));
|
|
797
800
|
}
|
|
798
801
|
return this.text = e, e === t;
|
|
799
802
|
}
|
|
800
803
|
/* ================== 生命周期 ================== */
|
|
801
804
|
willUpdate(t) {
|
|
805
|
+
if (this.center && this.suffix && this.controls)
|
|
806
|
+
throw new Error(
|
|
807
|
+
"[nf-input-number] center 模式下不允许同时开启 suffix 和 controls,请关闭其中一个。"
|
|
808
|
+
);
|
|
802
809
|
t.has("value") && !this.isTyping && this.setText(this.formatter(this.value));
|
|
803
810
|
}
|
|
804
811
|
/* ================== 事件处理 ================== */
|
|
@@ -848,12 +855,12 @@ let p = class extends W {
|
|
|
848
855
|
if (e === null)
|
|
849
856
|
return;
|
|
850
857
|
this.value = e;
|
|
851
|
-
let
|
|
852
|
-
|
|
853
|
-
const
|
|
854
|
-
|
|
858
|
+
let o = this.fixFloatingPoint(this.value + t * this.step);
|
|
859
|
+
o = this.clampValue(o);
|
|
860
|
+
const s = this.validateParsed(o);
|
|
861
|
+
s !== null && (o = s, o !== this.value && (this.value = o, this.setText(this.formatter(o)), this.dispatchEvent(
|
|
855
862
|
new CustomEvent("change", {
|
|
856
|
-
detail:
|
|
863
|
+
detail: o
|
|
857
864
|
})
|
|
858
865
|
)));
|
|
859
866
|
}
|
|
@@ -864,43 +871,44 @@ let p = class extends W {
|
|
|
864
871
|
}
|
|
865
872
|
/* ================== Render ================== */
|
|
866
873
|
render() {
|
|
867
|
-
return f`<div class=input-prefix>${this.prefix}</div><div class=input-number><div class=input-number-input-wrapper><input 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 ? f`<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 ? f`<div class=input-suffix>${this.suffix}</div>` : ""}`;
|
|
874
|
+
return f`<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 ? f`<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 ? f`<div class=input-suffix>${this.suffix}</div>` : ""}`;
|
|
868
875
|
}
|
|
869
876
|
};
|
|
870
|
-
|
|
877
|
+
u.styles = [K, ct];
|
|
871
878
|
m([
|
|
872
879
|
h({ type: Number })
|
|
873
|
-
],
|
|
880
|
+
], u.prototype, "value", 2);
|
|
874
881
|
m([
|
|
875
882
|
h({ attribute: !1 })
|
|
876
|
-
],
|
|
883
|
+
], u.prototype, "formatter", 2);
|
|
877
884
|
m([
|
|
878
885
|
h({ attribute: !1 })
|
|
879
|
-
],
|
|
886
|
+
], u.prototype, "parser", 2);
|
|
880
887
|
m([
|
|
881
888
|
h({ type: String, reflect: !0 })
|
|
882
|
-
],
|
|
889
|
+
], u.prototype, "prefix", 2);
|
|
883
890
|
m([
|
|
884
891
|
h({ type: String, reflect: !0 })
|
|
885
|
-
],
|
|
892
|
+
], u.prototype, "suffix", 2);
|
|
886
893
|
m([
|
|
887
894
|
h({
|
|
888
895
|
type: Boolean,
|
|
896
|
+
reflect: !0,
|
|
889
897
|
converter: {
|
|
890
898
|
fromAttribute: (t) => t !== "false" && t !== null,
|
|
891
899
|
toAttribute: (t) => t ? "" : null
|
|
892
900
|
}
|
|
893
901
|
})
|
|
894
|
-
],
|
|
902
|
+
], u.prototype, "controls", 2);
|
|
895
903
|
m([
|
|
896
904
|
h({ type: Number })
|
|
897
|
-
],
|
|
905
|
+
], u.prototype, "step", 2);
|
|
898
906
|
m([
|
|
899
907
|
h({ type: Number })
|
|
900
|
-
],
|
|
908
|
+
], u.prototype, "min", 2);
|
|
901
909
|
m([
|
|
902
910
|
h({ type: Number })
|
|
903
|
-
],
|
|
911
|
+
], u.prototype, "max", 2);
|
|
904
912
|
m([
|
|
905
913
|
h({
|
|
906
914
|
type: Boolean,
|
|
@@ -910,42 +918,45 @@ m([
|
|
|
910
918
|
toAttribute: (t) => t ? "" : null
|
|
911
919
|
}
|
|
912
920
|
})
|
|
913
|
-
],
|
|
921
|
+
], u.prototype, "changeOnWheel", 2);
|
|
914
922
|
m([
|
|
915
923
|
h({ type: Boolean, reflect: !0 })
|
|
916
|
-
],
|
|
924
|
+
], u.prototype, "disabled", 2);
|
|
917
925
|
m([
|
|
918
926
|
h({ type: Boolean, attribute: "no-decimal" })
|
|
919
|
-
],
|
|
927
|
+
], u.prototype, "noDecimal", 2);
|
|
920
928
|
m([
|
|
921
929
|
h({ type: Boolean, attribute: "no-zero" })
|
|
922
|
-
],
|
|
930
|
+
], u.prototype, "noZero", 2);
|
|
923
931
|
m([
|
|
924
932
|
h({ type: Boolean, attribute: "no-negative" })
|
|
925
|
-
],
|
|
933
|
+
], u.prototype, "noNegative", 2);
|
|
934
|
+
m([
|
|
935
|
+
h({ type: Boolean, reflect: !0 })
|
|
936
|
+
], u.prototype, "center", 2);
|
|
926
937
|
m([
|
|
927
938
|
w()
|
|
928
|
-
],
|
|
939
|
+
], u.prototype, "text", 2);
|
|
929
940
|
m([
|
|
930
941
|
w()
|
|
931
|
-
],
|
|
932
|
-
|
|
942
|
+
], u.prototype, "isFocused", 2);
|
|
943
|
+
u = m([
|
|
933
944
|
O("nf-input-number")
|
|
934
|
-
],
|
|
945
|
+
], u);
|
|
935
946
|
const pt = N({
|
|
936
947
|
tagName: "nf-input-number",
|
|
937
|
-
elementClass:
|
|
948
|
+
elementClass: u,
|
|
938
949
|
react: T,
|
|
939
950
|
events: {
|
|
940
951
|
onChange: "change"
|
|
941
952
|
}
|
|
942
953
|
}), Vt = pt, ft = C`: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}`;
|
|
943
|
-
var bt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, de = (t, e,
|
|
944
|
-
for (var r =
|
|
945
|
-
(n = t[i]) && (r = (
|
|
946
|
-
return
|
|
954
|
+
var bt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, de = (t, e, o, s) => {
|
|
955
|
+
for (var r = s > 1 ? void 0 : s ? mt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
956
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
957
|
+
return s && r && bt(e, o, r), r;
|
|
947
958
|
};
|
|
948
|
-
let
|
|
959
|
+
let L = class extends H {
|
|
949
960
|
constructor() {
|
|
950
961
|
super(...arguments), this.checked = !1, this.disabled = !1;
|
|
951
962
|
}
|
|
@@ -969,19 +980,19 @@ let F = class extends H {
|
|
|
969
980
|
});
|
|
970
981
|
}
|
|
971
982
|
};
|
|
972
|
-
|
|
983
|
+
L.styles = [ft];
|
|
973
984
|
de([
|
|
974
985
|
h({ type: Boolean, reflect: !0 })
|
|
975
|
-
],
|
|
986
|
+
], L.prototype, "checked", 2);
|
|
976
987
|
de([
|
|
977
988
|
h({ type: Boolean, reflect: !0 })
|
|
978
|
-
],
|
|
979
|
-
|
|
989
|
+
], L.prototype, "disabled", 2);
|
|
990
|
+
L = de([
|
|
980
991
|
O("nf-checkbox")
|
|
981
|
-
],
|
|
992
|
+
], L);
|
|
982
993
|
const Ht = N({
|
|
983
994
|
tagName: "nf-checkbox",
|
|
984
|
-
elementClass:
|
|
995
|
+
elementClass: L,
|
|
985
996
|
react: T,
|
|
986
997
|
events: {
|
|
987
998
|
onChange: "change"
|
|
@@ -994,14 +1005,14 @@ let _t = class {
|
|
|
994
1005
|
get _$AU() {
|
|
995
1006
|
return this._$AM._$AU;
|
|
996
1007
|
}
|
|
997
|
-
_$AT(e,
|
|
998
|
-
this._$Ct = e, this._$AM =
|
|
1008
|
+
_$AT(e, o, s) {
|
|
1009
|
+
this._$Ct = e, this._$AM = o, this._$Ci = s;
|
|
999
1010
|
}
|
|
1000
|
-
_$AS(e,
|
|
1001
|
-
return this.update(e,
|
|
1011
|
+
_$AS(e, o) {
|
|
1012
|
+
return this.update(e, o);
|
|
1002
1013
|
}
|
|
1003
|
-
update(e,
|
|
1004
|
-
return this.render(...
|
|
1014
|
+
update(e, o) {
|
|
1015
|
+
return this.render(...o);
|
|
1005
1016
|
}
|
|
1006
1017
|
};
|
|
1007
1018
|
const Se = "important", yt = " !" + Se, ee = vt(class extends _t {
|
|
@@ -1009,30 +1020,30 @@ const Se = "important", yt = " !" + Se, ee = vt(class extends _t {
|
|
|
1009
1020
|
if (super(t), t.type !== gt.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.");
|
|
1010
1021
|
}
|
|
1011
1022
|
render(t) {
|
|
1012
|
-
return Object.keys(t).reduce((e,
|
|
1013
|
-
const
|
|
1014
|
-
return
|
|
1023
|
+
return Object.keys(t).reduce((e, o) => {
|
|
1024
|
+
const s = t[o];
|
|
1025
|
+
return s == null ? e : e + `${o = o.includes("-") ? o : o.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
|
|
1015
1026
|
}, "");
|
|
1016
1027
|
}
|
|
1017
1028
|
update(t, [e]) {
|
|
1018
|
-
const { style:
|
|
1029
|
+
const { style: o } = t.element;
|
|
1019
1030
|
if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
|
|
1020
|
-
for (const
|
|
1021
|
-
for (const
|
|
1022
|
-
const r = e[
|
|
1031
|
+
for (const s of this.ft) e[s] == null && (this.ft.delete(s), s.includes("-") ? o.removeProperty(s) : o[s] = null);
|
|
1032
|
+
for (const s in e) {
|
|
1033
|
+
const r = e[s];
|
|
1023
1034
|
if (r != null) {
|
|
1024
|
-
this.ft.add(
|
|
1035
|
+
this.ft.add(s);
|
|
1025
1036
|
const i = typeof r == "string" && r.endsWith(yt);
|
|
1026
|
-
|
|
1037
|
+
s.includes("-") || i ? o.setProperty(s, i ? r.slice(0, -11) : r, i ? Se : "") : o[s] = r;
|
|
1027
1038
|
}
|
|
1028
1039
|
}
|
|
1029
|
-
return
|
|
1040
|
+
return D;
|
|
1030
1041
|
}
|
|
1031
1042
|
}), wt = C`:host{display:inline-block;position:relative}:host([disabled]){cursor:not-allowed;opacity:.6}:host([disabled]:hover){border-color:var(--nf-border-color);background:var(--nf-background-color)}:host([open]){border-color:var(--nf-border-color-hover);box-shadow:0 0 0 .15rem var(--nf-box-shadow-color-focus)}.trigger{width:calc(100% + 1.5rem + 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}.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}`;
|
|
1032
|
-
var $t = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, _ = (t, e,
|
|
1033
|
-
for (var r =
|
|
1034
|
-
(n = t[i]) && (r = (
|
|
1035
|
-
return
|
|
1043
|
+
var $t = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, _ = (t, e, o, s) => {
|
|
1044
|
+
for (var r = s > 1 ? void 0 : s ? xt(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
1045
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
1046
|
+
return s && r && $t(e, o, r), r;
|
|
1036
1047
|
};
|
|
1037
1048
|
let g = class extends W {
|
|
1038
1049
|
constructor() {
|
|
@@ -1074,34 +1085,34 @@ let g = class extends W {
|
|
|
1074
1085
|
}
|
|
1075
1086
|
// 从HEX颜色值更新HSB值
|
|
1076
1087
|
_updateHSBFromHex(t) {
|
|
1077
|
-
const e = parseInt(t.slice(1, 3), 16) / 255,
|
|
1088
|
+
const e = parseInt(t.slice(1, 3), 16) / 255, o = parseInt(t.slice(3, 5), 16) / 255, s = parseInt(t.slice(5, 7), 16) / 255, r = Math.max(e, o, s), i = Math.min(e, o, s), n = r - i;
|
|
1078
1089
|
let l = 0, a = 0;
|
|
1079
1090
|
const c = r;
|
|
1080
|
-
n !== 0 && (a = n / r, r === e ? l = (
|
|
1091
|
+
n !== 0 && (a = n / r, r === e ? l = (o - s) / n % 6 : r === o ? l = (s - e) / n + 2 : l = (e - o) / n + 4, l *= 60, l < 0 && (l += 360)), this._hsb = {
|
|
1081
1092
|
h: Math.round(l),
|
|
1082
1093
|
s: Math.round(a * 100),
|
|
1083
1094
|
b: Math.round(c * 100)
|
|
1084
1095
|
};
|
|
1085
1096
|
}
|
|
1086
1097
|
// 从HSB值生成HEX颜色值
|
|
1087
|
-
_generateHexFromHSB(t, e,
|
|
1088
|
-
e /= 100,
|
|
1089
|
-
const r =
|
|
1098
|
+
_generateHexFromHSB(t, e, o, s = "FF") {
|
|
1099
|
+
e /= 100, o /= 100;
|
|
1100
|
+
const r = o * e, i = r * (1 - Math.abs(t / 60 % 2 - 1)), n = o - r;
|
|
1090
1101
|
let l = 0, a = 0, c = 0;
|
|
1091
|
-
return 0 <= t && t < 60 ? (l = r, a = i, c = 0) : 60 <= t && t < 120 ? (l = i, a = r, c = 0) : 120 <= t && t < 180 ? (l = 0, a = r, c = i) : 180 <= t && t < 240 ? (l = 0, a = i, c = r) : 240 <= t && t < 300 ? (l = i, a = 0, c = r) : 300 <= t && t < 360 && (l = r, a = 0, c = i), l = Math.round((l + n) * 255), a = Math.round((a + n) * 255), c = Math.round((c + n) * 255), "#" + l.toString(16).padStart(2, "0") + a.toString(16).padStart(2, "0") + c.toString(16).padStart(2, "0") +
|
|
1102
|
+
return 0 <= t && t < 60 ? (l = r, a = i, c = 0) : 60 <= t && t < 120 ? (l = i, a = r, c = 0) : 120 <= t && t < 180 ? (l = 0, a = r, c = i) : 180 <= t && t < 240 ? (l = 0, a = i, c = r) : 240 <= t && t < 300 ? (l = i, a = 0, c = r) : 300 <= t && t < 360 && (l = r, a = 0, c = i), l = Math.round((l + n) * 255), a = Math.round((a + n) * 255), c = Math.round((c + n) * 255), "#" + l.toString(16).padStart(2, "0") + a.toString(16).padStart(2, "0") + c.toString(16).padStart(2, "0") + s;
|
|
1092
1103
|
}
|
|
1093
1104
|
// 计算面板位置
|
|
1094
1105
|
_updatePanelPosition() {
|
|
1095
1106
|
requestAnimationFrame(() => {
|
|
1096
1107
|
const t = this.getBoundingClientRect(), e = this.shadowRoot?.querySelector(".panel");
|
|
1097
1108
|
if (!e) return;
|
|
1098
|
-
const
|
|
1109
|
+
const o = 0.15 * 16, s = 8, r = e.offsetWidth || 240, i = e.offsetHeight || 300;
|
|
1099
1110
|
let n = this.placement, l = this.align;
|
|
1100
|
-
this.autoAdjust && (n === "bottom" ? window.innerHeight - t.bottom -
|
|
1111
|
+
this.autoAdjust && (n === "bottom" ? window.innerHeight - t.bottom - s < i && t.top - s >= i && (n = "top") : t.top - s < i && window.innerHeight - t.bottom - s >= i && (n = "bottom"), l === "right" ? t.right - o < r && t.left + t.width + o + r <= window.innerWidth && (l = "left") : t.left - o + r > window.innerWidth && t.right - o >= r && (l = "right"));
|
|
1101
1112
|
let a;
|
|
1102
|
-
n === "bottom" ? a = t.height +
|
|
1113
|
+
n === "bottom" ? a = t.height + s : a = -i - s;
|
|
1103
1114
|
let c;
|
|
1104
|
-
l === "right" ? c = t.width - r +
|
|
1115
|
+
l === "right" ? c = t.width - r + o : c = -o, this._panelPosition = { top: a, left: c };
|
|
1105
1116
|
});
|
|
1106
1117
|
}
|
|
1107
1118
|
// 打开面板
|
|
@@ -1127,15 +1138,15 @@ let g = class extends W {
|
|
|
1127
1138
|
this._panelVisible ? this._closePanel() : this._openPanel();
|
|
1128
1139
|
}
|
|
1129
1140
|
// 处理HSB颜色变化
|
|
1130
|
-
_handleHSBChange(t, e,
|
|
1131
|
-
this._hsb = { h: t, s: e, b:
|
|
1132
|
-
const
|
|
1141
|
+
_handleHSBChange(t, e, o) {
|
|
1142
|
+
this._hsb = { h: t, s: e, b: o };
|
|
1143
|
+
const s = this._internalValue.slice(7), r = this._generateHexFromHSB(t, e, o, s);
|
|
1133
1144
|
this._handleColorChange(r);
|
|
1134
1145
|
}
|
|
1135
1146
|
// 处理Alpha值变化
|
|
1136
1147
|
_handleAlphaChange(t) {
|
|
1137
|
-
const e = Math.round(t * 255 / 100).toString(16).padStart(2, "0").toUpperCase(),
|
|
1138
|
-
this._handleColorChange(
|
|
1148
|
+
const e = Math.round(t * 255 / 100).toString(16).padStart(2, "0").toUpperCase(), o = "#" + this._internalValue.slice(1, 7) + e;
|
|
1149
|
+
this._handleColorChange(o);
|
|
1139
1150
|
}
|
|
1140
1151
|
// 处理颜色变化
|
|
1141
1152
|
_handleColorChange(t) {
|
|
@@ -1149,20 +1160,20 @@ let g = class extends W {
|
|
|
1149
1160
|
}
|
|
1150
1161
|
// 处理色相选择
|
|
1151
1162
|
_handleHueChange(t) {
|
|
1152
|
-
const e = t.target,
|
|
1153
|
-
this._handleHSBChange(
|
|
1163
|
+
const e = t.target, o = parseInt(e.value);
|
|
1164
|
+
this._handleHSBChange(o, this._hsb.s, this._hsb.b);
|
|
1154
1165
|
}
|
|
1155
1166
|
// 处理饱和度和亮度选择
|
|
1156
1167
|
_handleSBChange(t) {
|
|
1157
1168
|
const e = this.shadowRoot?.querySelector(".color-sb");
|
|
1158
1169
|
if (!e) return;
|
|
1159
|
-
const
|
|
1170
|
+
const o = e.getBoundingClientRect(), s = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, r = t instanceof MouseEvent ? t.clientY : t.touches[0].clientY, i = Math.max(0, Math.min(100, Math.round((s - o.left) / o.width * 100))), n = Math.max(0, Math.min(100, Math.round((1 - (r - o.top) / o.height) * 100)));
|
|
1160
1171
|
this._handleHSBChange(this._hsb.h, i, n);
|
|
1161
1172
|
}
|
|
1162
1173
|
// 处理透明度选择
|
|
1163
1174
|
_handleAlphaChangeInput(t) {
|
|
1164
|
-
const e = t.target,
|
|
1165
|
-
this._handleAlphaChange(
|
|
1175
|
+
const e = t.target, o = parseInt(e.value);
|
|
1176
|
+
this._handleAlphaChange(o);
|
|
1166
1177
|
}
|
|
1167
1178
|
// 渲染触发器
|
|
1168
1179
|
_renderTrigger() {
|
|
@@ -1183,7 +1194,7 @@ let g = class extends W {
|
|
|
1183
1194
|
}
|
|
1184
1195
|
// 渲染颜色选择区域
|
|
1185
1196
|
_renderColorSelector() {
|
|
1186
|
-
const t = this._generateHexFromHSB(this._hsb.h, 100, 100, "FF"), e = this._hsb.s / 100 * 100,
|
|
1197
|
+
const t = this._generateHexFromHSB(this._hsb.h, 100, 100, "FF"), e = this._hsb.s / 100 * 100, o = (1 - this._hsb.b / 100) * 100;
|
|
1187
1198
|
return f`
|
|
1188
1199
|
<div class="color-selector">
|
|
1189
1200
|
<div
|
|
@@ -1201,7 +1212,7 @@ let g = class extends W {
|
|
|
1201
1212
|
class="selector"
|
|
1202
1213
|
style=${ee({
|
|
1203
1214
|
left: `${e}%`,
|
|
1204
|
-
top: `${
|
|
1215
|
+
top: `${o}%`
|
|
1205
1216
|
})}
|
|
1206
1217
|
></div>
|
|
1207
1218
|
</div>
|
|
@@ -1339,7 +1350,7 @@ _([
|
|
|
1339
1350
|
g = _([
|
|
1340
1351
|
O("nf-color-picker")
|
|
1341
1352
|
], g);
|
|
1342
|
-
const
|
|
1353
|
+
const Ft = N({
|
|
1343
1354
|
tagName: "nf-color-picker",
|
|
1344
1355
|
elementClass: g,
|
|
1345
1356
|
react: T,
|
|
@@ -1348,10 +1359,10 @@ const Lt = N({
|
|
|
1348
1359
|
onOpenChange: "openChange"
|
|
1349
1360
|
}
|
|
1350
1361
|
}), kt = C`: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}`;
|
|
1351
|
-
var
|
|
1352
|
-
for (var r =
|
|
1353
|
-
(n = t[i]) && (r = (
|
|
1354
|
-
return
|
|
1362
|
+
var Et = Object.defineProperty, At = Object.getOwnPropertyDescriptor, y = (t, e, o, s) => {
|
|
1363
|
+
for (var r = s > 1 ? void 0 : s ? At(e, o) : e, i = t.length - 1, n; i >= 0; i--)
|
|
1364
|
+
(n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
|
|
1365
|
+
return s && r && Et(e, o, r), r;
|
|
1355
1366
|
};
|
|
1356
1367
|
let v = class extends W {
|
|
1357
1368
|
constructor() {
|
|
@@ -1424,7 +1435,7 @@ let v = class extends W {
|
|
|
1424
1435
|
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);
|
|
1425
1436
|
}
|
|
1426
1437
|
_updateValue(t) {
|
|
1427
|
-
const e = this.getBoundingClientRect(),
|
|
1438
|
+
const e = this.getBoundingClientRect(), o = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, s = Math.max(0, Math.min(1, (o - e.left) / e.width)), r = this.max - this.min, i = this.min + s * r, n = Math.round((i - this.min) / this.step), l = this.min + n * this.step;
|
|
1428
1439
|
this._currentValue = Math.min(this.max, Math.max(this.min, l)), this.requestUpdate();
|
|
1429
1440
|
}
|
|
1430
1441
|
_getValuePercentage() {
|
|
@@ -1432,8 +1443,8 @@ let v = class extends W {
|
|
|
1432
1443
|
return t === 0 ? 0 : (this._currentValue - this.min) / t * 100;
|
|
1433
1444
|
}
|
|
1434
1445
|
render() {
|
|
1435
|
-
const t = this._getValuePercentage(), e = `${t}%`,
|
|
1436
|
-
return f`<div class=slider-fill style=${ee({ width:
|
|
1446
|
+
const t = this._getValuePercentage(), e = `${t}%`, o = `${t}%`, s = `slider-tooltip ${this._showTooltip || this.tooltip ? "visible" : ""}`;
|
|
1447
|
+
return f`<div class=slider-fill style=${ee({ width: o })}></div><div class=slider-handle style=${ee({ left: e })} tabindex=${this.disabled ? -1 : 0} @mousedown=${this._handleMouseDown} @touchstart=${this._handleTouchStart} @keydown=${this._handleKeyDown}><div class=${s}>${this._currentValue}</div></div>`;
|
|
1437
1448
|
}
|
|
1438
1449
|
};
|
|
1439
1450
|
v.styles = [K, kt];
|
|
@@ -1473,7 +1484,7 @@ y([
|
|
|
1473
1484
|
v = y([
|
|
1474
1485
|
O("nf-slider")
|
|
1475
1486
|
], v);
|
|
1476
|
-
const
|
|
1487
|
+
const Lt = N({
|
|
1477
1488
|
tagName: "nf-slider",
|
|
1478
1489
|
elementClass: v,
|
|
1479
1490
|
react: T,
|
|
@@ -1482,16 +1493,16 @@ const Ft = N({
|
|
|
1482
1493
|
}
|
|
1483
1494
|
});
|
|
1484
1495
|
function It(t) {
|
|
1485
|
-
const { children: e, className:
|
|
1486
|
-
return /* @__PURE__ */ React.createElement("div", { className: "nf-root nf-theme-blue" + (
|
|
1496
|
+
const { children: e, className: o, ...s } = t;
|
|
1497
|
+
return /* @__PURE__ */ React.createElement("div", { className: "nf-root nf-theme-blue" + (o ? ` ${o}` : ""), ...s }, e);
|
|
1487
1498
|
}
|
|
1488
1499
|
export {
|
|
1489
1500
|
Ht as NfCheckbox,
|
|
1490
|
-
|
|
1501
|
+
Ft as NfColorPicker,
|
|
1491
1502
|
Nt as NfInput,
|
|
1492
1503
|
Vt as NfInputNumber,
|
|
1493
1504
|
It as NfRoot,
|
|
1494
1505
|
Tt as NfSelect,
|
|
1495
|
-
|
|
1506
|
+
Lt as NfSlider,
|
|
1496
1507
|
Bt as NfSwitch
|
|
1497
1508
|
};
|