@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.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/Klarna.svg +1 -0
- package/Mastercard.svg +2 -0
- package/PayPal.svg +2 -0
- package/Placeholder.svg +1 -0
- package/Visa.svg +2 -0
- package/arialiveregions.BvZhV6hb.js +27 -0
- package/assets/CustomReactSelect.Bsphydqt.css +1 -0
- package/assets/Fieldset.D0jHAGRL.css +1 -0
- package/assets/Icon.Duy_0R8w.css +1 -0
- package/assets/InputPassword.VCNO8ANM.css +1 -0
- package/assets/InputSearch.BMRAb95l.css +1 -0
- package/assets/InputStepper.BKjqNi-i.css +1 -0
- package/assets/Notification.Bg63cvs4.css +1 -0
- package/assets/RadioGroup.Bz3_xkZU.css +1 -0
- package/assets/Select.Bz1TImkI.css +1 -0
- package/assets/Textarea.D2h5cW_t.css +1 -0
- package/assets/Toast.BzVaebc0.css +1 -0
- package/assets/{arialiveregions.VnhjP8Gr.css → arialiveregions.GsGx2USO.css} +1 -1
- package/assets/{asterisk.C-o6rbGQ.css → asterisk.JlyPArZu.css} +1 -1
- package/assets/button.BdxtFZKx.css +1 -0
- package/assets/buttonround.pR4StXA7.css +1 -0
- package/assets/checkbox.BjIn2stV.css +1 -0
- package/assets/dialog.CKwM2EBH.css +1 -0
- package/assets/floatingactionbutton.CUvMbEMf.css +1 -0
- package/assets/heading.CCbuI4X-.css +1 -0
- package/assets/input.71tOIrpp.css +1 -0
- package/assets/link.D61tKkSK.css +1 -0
- package/assets/linkstandalone.Bx8Uvo0G.css +1 -0
- package/assets/logo.C05WqGId.css +1 -0
- package/assets/optioncheckbox.BdRJHcSw.css +1 -0
- package/assets/radio.ewRpPo4W.css +1 -0
- package/assets/spinner.LuV09jaU.css +1 -0
- package/assets/switch.Ds-I_ybT.css +1 -0
- package/assets/{systemfeedback.WE3wClZ3.css → systemfeedback.BzJATHDd.css} +1 -1
- package/assets/text.B-CTuGgI.css +1 -0
- package/assets/{title.CE0Dm7PI.css → title.DlhX9K3W.css} +1 -1
- package/asterisk.Cjbk-xZi.js +8 -0
- package/button.DlFWwHuA.js +135 -0
- package/buttonround.eYOQM994.js +118 -0
- package/checkbox.DNHdo6_n.js +113 -0
- package/checkboxgroup.DqWlzAeR.js +9 -0
- package/chunks/{CheckboxGroup.CS6Q_TeZ.js → CheckboxGroup.DsQ6lI5a.js} +22 -22
- package/chunks/{CustomReactSelect.DtmbYZUf.js → CustomReactSelect.5dHi6PEO.js} +909 -959
- package/chunks/Fieldset.B1vsrHNv.js +99 -0
- package/chunks/{Icon.9gDIp6p4.js → Icon.n4XZrQ4N.js} +33 -27
- package/chunks/InputPassword.DTqI58Z4.js +140 -0
- package/chunks/InputSearch.IwQATLKh.js +189 -0
- package/chunks/InputStepper.Jew1ETB6.js +291 -0
- package/chunks/Notification.DbflCBIL.js +93 -0
- package/chunks/RadioGroup.BO4pbAJw.js +132 -0
- package/chunks/RadioGroup.module.BBZwHDjW.js +11 -0
- package/chunks/Select.COdS787F.js +191 -0
- package/chunks/Textarea.oqCrSopu.js +195 -0
- package/chunks/Toast.BLGKvAvZ.js +89 -0
- package/chunks/{jsx-runtime.C-kxDJ4g.js → jsx-runtime.C115EyI4.js} +3 -7
- package/{combobox.BaSkiD6f.js → combobox.CRlhqmuO.js} +2 -2
- package/components/Radio/Radio.d.ts +11 -3
- package/components/RadioGroup/RadioGroup.d.ts +6 -3
- package/components/RadioGroup/RadioGroup.utils.d.ts +5 -3
- package/components/RadioGroup/RadioGroup.utils.test.d.ts +1 -0
- package/customreactselect.CD58gwtp.js +13 -0
- package/dialog.qd2pOyVc.js +45 -0
- package/fieldset.aY3V2jK2.js +11 -0
- package/floatingactionbutton.CGV3YFQq.js +87 -0
- package/heading.BTNroD1E.js +50 -0
- package/icon.D3RXjzh4.js +8 -0
- package/index.es.js +60 -58
- package/input.BAxvG272.js +236 -0
- package/inputpassword.mn9qFlfs.js +12 -0
- package/inputsearch.qQJj9yFd.js +13 -0
- package/inputstepper.DhbHujiM.js +13 -0
- package/link.SAcKvzJ3.js +115 -0
- package/linkstandalone.DNe0Nydm.js +79 -0
- package/{logo.C_oJ8isW.js → logo.BR_CUXFl.js} +16 -16
- package/notification.CnJOdQza.js +9 -0
- package/{optioncheckbox.CUV1MQhh.js → optioncheckbox.C4l2UIak.js} +7 -7
- package/package.json +28 -24
- package/partials/index.js +51 -79
- package/radio.epf54-sG.js +115 -0
- package/radiogroup.CiENWRos.js +11 -0
- package/select.DLYav8gw.js +12 -0
- package/spinner.DEtbkdfi.js +58 -0
- package/styles/scss/lib/_animation.scss +15 -14
- package/styles/scss/lib/_container-query.scss +3 -3
- package/styles/scss/lib/_grid-sidebar.scss +14 -7
- package/styles/scss/lib/_link.scss +48 -42
- package/styles/scss/lib/_media-query.scss +3 -3
- package/styles/scss/lib/_transition.scss +26 -7
- package/switch.BezS5z0Y.js +65 -0
- package/{systemfeedback.4Hkfigi-.js → systemfeedback.CUWch42u.js} +3 -3
- package/text.CrYUewrP.js +57 -0
- package/{textarea.DPy3TJJf.js → textarea.hLgeYdsI.js} +4 -4
- package/title.Dvp8LKJt.js +36 -0
- package/toast.BR7QuHOG.js +10 -0
- package/{toastmanager.DQ_-eTrx.js → toastmanager.DBp8B1e3.js} +2 -2
- package/utils/index.d.ts +1 -0
- package/utils/remove-spaces.d.ts +6 -0
- package/utils/remove-spaces.test.d.ts +1 -0
- package/arialiveregions.49Zyf6mj.js +0 -27
- package/assets/CustomReactSelect.B0rJLjN0.css +0 -1
- package/assets/Fieldset.xazpUXJX.css +0 -1
- package/assets/Icon.CB-KQmw4.css +0 -1
- package/assets/InputPassword.C3Uyj7oA.css +0 -1
- package/assets/InputSearch.tL3e9-Ob.css +0 -1
- package/assets/InputStepper.paPJix5A.css +0 -1
- package/assets/Notification.CCCbfXEz.css +0 -1
- package/assets/RadioGroup.Ur8Ro-XL.css +0 -1
- package/assets/Select.D2qBxaHP.css +0 -1
- package/assets/Textarea.BKbocznb.css +0 -1
- package/assets/Toast.CAP_EwDX.css +0 -1
- package/assets/button.BuIpnG-S.css +0 -1
- package/assets/buttonround.C3ph5Yyu.css +0 -1
- package/assets/checkbox.BsFEWfQe.css +0 -1
- package/assets/dialog.BGK3mgk7.css +0 -1
- package/assets/floatingactionbutton.D7ywURL3.css +0 -1
- package/assets/heading.CGFucb-C.css +0 -1
- package/assets/input.BcP5kkZ2.css +0 -1
- package/assets/link.DQy_OhwC.css +0 -1
- package/assets/linkstandalone.Dh6bE5Fb.css +0 -1
- package/assets/logo.BbHYgnWo.css +0 -1
- package/assets/optioncheckbox.C-K1FLhc.css +0 -1
- package/assets/radio.CSHQGdpr.css +0 -1
- package/assets/spinner.C5rBmKiF.css +0 -1
- package/assets/switch.sqve8ApJ.css +0 -1
- package/assets/text.DDAveG7E.css +0 -1
- package/asterisk.DU8THnoC.js +0 -8
- package/button.DX_nxoJC.js +0 -135
- package/buttonround.CXsBk9nL.js +0 -118
- package/checkbox.B43oeMeC.js +0 -112
- package/checkboxgroup.C7aCjYds.js +0 -9
- package/chunks/Fieldset.BokeZzG5.js +0 -99
- package/chunks/InputPassword.jpUCijp7.js +0 -140
- package/chunks/InputSearch.BmOtAZcR.js +0 -190
- package/chunks/InputStepper.DTKjUL4U.js +0 -291
- package/chunks/Notification.CUPOlHAX.js +0 -93
- package/chunks/RadioGroup.DpwnVv7u.js +0 -110
- package/chunks/RadioGroup.module.bi3leRes.js +0 -11
- package/chunks/Select.DkDZo0ky.js +0 -193
- package/chunks/Textarea.C938p79X.js +0 -195
- package/chunks/Toast.CLYrwQVO.js +0 -89
- package/customreactselect.LTbjaBN2.js +0 -13
- package/dialog.BkXwcbUh.js +0 -45
- package/fieldset.BXOWK-B-.js +0 -11
- package/floatingactionbutton.-nDRRiXY.js +0 -87
- package/heading.DqGbFfj2.js +0 -50
- package/icon.Cpp_9L1I.js +0 -8
- package/input.BM6tyRUm.js +0 -236
- package/inputpassword.DUxH1K_k.js +0 -12
- package/inputsearch.B-vePHle.js +0 -13
- package/inputstepper.C2ypADPI.js +0 -13
- package/link.B4XZoLDj.js +0 -115
- package/linkstandalone.BSfd95Pd.js +0 -79
- package/notification.CxxAOdNV.js +0 -9
- package/radio.Bhu9OUY-.js +0 -79
- package/radiogroup.CMJ1b38q.js +0 -11
- package/select.DFJK2mHF.js +0 -12
- package/spinner.BskX4ovu.js +0 -58
- package/switch.Bx2tDKx0.js +0 -65
- package/text.CPU8IUqY.js +0 -57
- package/title.icX0VDiO.js +0 -36
- package/toast.C-Yg5EoE.js +0 -10
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { j as e } from "./jsx-runtime.C115EyI4.js";
|
|
3
|
+
import { c } from "./index.CvOaL64Y.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { Asterisk as y } from "../asterisk.Cjbk-xZi.js";
|
|
6
|
+
import { DSHeading as F } from "../heading.BTNroD1E.js";
|
|
7
|
+
import { DSSystemFeedback as k } from "../systemfeedback.CUWch42u.js";
|
|
8
|
+
import { g as j } from "./helpers.B1JT5ShS.js";
|
|
9
|
+
import '../assets/Fieldset.D0jHAGRL.css';const v = "_root_z5foq_76", w = "_child-wrapper_z5foq_82", N = "_legend_z5foq_89", E = "_legend--utility--m_z5foq_93", M = "_description_z5foq_104", C = "_description--small_z5foq_117", P = "_system-feedback_z5foq_121", i = {
|
|
10
|
+
root: v,
|
|
11
|
+
"child-wrapper": "_child-wrapper_z5foq_82",
|
|
12
|
+
childWrapper: w,
|
|
13
|
+
legend: N,
|
|
14
|
+
"legend--utility--m": "_legend--utility--m_z5foq_93",
|
|
15
|
+
legendUtilityM: E,
|
|
16
|
+
description: M,
|
|
17
|
+
"description--small": "_description--small_z5foq_117",
|
|
18
|
+
descriptionSmall: C,
|
|
19
|
+
"system-feedback": "_system-feedback_z5foq_121",
|
|
20
|
+
systemFeedback: P
|
|
21
|
+
}, T = ({
|
|
22
|
+
description: a,
|
|
23
|
+
id: s,
|
|
24
|
+
legend: n,
|
|
25
|
+
systemFeedback: t
|
|
26
|
+
}) => {
|
|
27
|
+
if (!s && (a || t))
|
|
28
|
+
throw new Error(
|
|
29
|
+
j(
|
|
30
|
+
"DSFieldset",
|
|
31
|
+
'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSFieldset component.'
|
|
32
|
+
)
|
|
33
|
+
);
|
|
34
|
+
if (!n)
|
|
35
|
+
throw new Error(
|
|
36
|
+
j(
|
|
37
|
+
"DSFieldset",
|
|
38
|
+
"The legend prop is required. Please add the legend prop to the DSFieldset component."
|
|
39
|
+
)
|
|
40
|
+
);
|
|
41
|
+
}, H = ({
|
|
42
|
+
children: a,
|
|
43
|
+
legend: s,
|
|
44
|
+
className: n,
|
|
45
|
+
description: t,
|
|
46
|
+
disabled: q = !1,
|
|
47
|
+
id: d,
|
|
48
|
+
invalid: p = !1,
|
|
49
|
+
required: m = !1,
|
|
50
|
+
systemFeedback: o,
|
|
51
|
+
...S
|
|
52
|
+
}) => {
|
|
53
|
+
process.env.NODE_ENV !== "production" && T({ description: t, id: d, legend: s, systemFeedback: o });
|
|
54
|
+
let r, _, f;
|
|
55
|
+
const l = typeof s == "object" && s !== void 0;
|
|
56
|
+
l && ({ headingSize: r, headingTag: _, headingText: f } = s);
|
|
57
|
+
const g = `${d}-feedback`, h = `${d}-description`, b = [
|
|
58
|
+
o && g,
|
|
59
|
+
t && h
|
|
60
|
+
].filter(Boolean).join(" "), u = !l || r === "small" || r === "small-uppercase", x = c(i.root, n), z = c(i.legend, {
|
|
61
|
+
[i.legendUtilityM]: !l
|
|
62
|
+
}), D = c(i.description, {
|
|
63
|
+
[i.descriptionSmall]: u
|
|
64
|
+
});
|
|
65
|
+
return /* @__PURE__ */ e.jsxs(
|
|
66
|
+
"fieldset",
|
|
67
|
+
{
|
|
68
|
+
className: x,
|
|
69
|
+
disabled: q,
|
|
70
|
+
...S,
|
|
71
|
+
"aria-invalid": p,
|
|
72
|
+
"aria-describedby": b || void 0,
|
|
73
|
+
children: [
|
|
74
|
+
/* @__PURE__ */ e.jsx("legend", { className: z, children: l ? /* @__PURE__ */ e.jsxs(F, { tag: _, size: r, children: [
|
|
75
|
+
f,
|
|
76
|
+
m && /* @__PURE__ */ e.jsx(y, {})
|
|
77
|
+
] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
78
|
+
s,
|
|
79
|
+
m && /* @__PURE__ */ e.jsx(y, {})
|
|
80
|
+
] }) }),
|
|
81
|
+
t && /* @__PURE__ */ e.jsx("span", { id: h, className: D, children: t }),
|
|
82
|
+
p && o && /* @__PURE__ */ e.jsx(
|
|
83
|
+
k,
|
|
84
|
+
{
|
|
85
|
+
id: g,
|
|
86
|
+
type: "invalid",
|
|
87
|
+
message: o,
|
|
88
|
+
className: i.systemFeedback
|
|
89
|
+
}
|
|
90
|
+
),
|
|
91
|
+
/* @__PURE__ */ e.jsx("div", { className: i.childWrapper, children: a })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
};
|
|
96
|
+
export {
|
|
97
|
+
H as D,
|
|
98
|
+
T as v
|
|
99
|
+
};
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { j as x } from "./jsx-runtime.
|
|
3
|
-
import { c as
|
|
2
|
+
import { j as x } from "./jsx-runtime.C115EyI4.js";
|
|
3
|
+
import { c as E } from "./index.CvOaL64Y.js";
|
|
4
4
|
import * as b from "react";
|
|
5
|
-
import { useRef as
|
|
6
|
-
import '../assets/Icon.
|
|
7
|
-
function
|
|
8
|
-
return s ? (_.has(s) || (
|
|
5
|
+
import { useRef as j, useState as y, useEffect as M } from "react";
|
|
6
|
+
import '../assets/Icon.Duy_0R8w.css';var I = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new WeakMap(), q = 0, D = void 0;
|
|
7
|
+
function T(s) {
|
|
8
|
+
return s ? (_.has(s) || (q += 1, _.set(s, q.toString())), _.get(s)) : "0";
|
|
9
9
|
}
|
|
10
|
-
function
|
|
10
|
+
function V(s) {
|
|
11
11
|
return Object.keys(s).sort().filter(
|
|
12
12
|
(t) => s[t] !== void 0
|
|
13
|
-
).map((t) => `${t}_${t === "root" ?
|
|
13
|
+
).map((t) => `${t}_${t === "root" ? T(s.root) : s[t]}`).toString();
|
|
14
14
|
}
|
|
15
|
-
function
|
|
16
|
-
const t =
|
|
15
|
+
function L(s) {
|
|
16
|
+
const t = V(s);
|
|
17
17
|
let i = I.get(t);
|
|
18
18
|
if (!i) {
|
|
19
19
|
const e = /* @__PURE__ */ new Map();
|
|
@@ -35,7 +35,7 @@ function N(s) {
|
|
|
35
35
|
}
|
|
36
36
|
return i;
|
|
37
37
|
}
|
|
38
|
-
function
|
|
38
|
+
function N(s, t, i = {}, e = D) {
|
|
39
39
|
if (typeof window.IntersectionObserver > "u" && e !== void 0) {
|
|
40
40
|
const c = s.getBoundingClientRect();
|
|
41
41
|
return t(e, {
|
|
@@ -49,12 +49,12 @@ function O(s, t, i = {}, e = T) {
|
|
|
49
49
|
}), () => {
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
|
-
const { id: a, observer: r, elements: n } =
|
|
52
|
+
const { id: a, observer: r, elements: n } = L(i), o = n.get(s) || [];
|
|
53
53
|
return n.has(s) || n.set(s, o), o.push(t), r.observe(s), function() {
|
|
54
54
|
o.splice(o.indexOf(t), 1), o.length === 0 && (n.delete(s), r.unobserve(s)), n.size === 0 && (r.disconnect(), I.delete(a));
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
|
-
function
|
|
57
|
+
function O({
|
|
58
58
|
threshold: s,
|
|
59
59
|
delay: t,
|
|
60
60
|
trackVisibility: i,
|
|
@@ -73,10 +73,9 @@ function q({
|
|
|
73
73
|
});
|
|
74
74
|
h.current = v, b.useEffect(
|
|
75
75
|
() => {
|
|
76
|
-
if (n || !d)
|
|
77
|
-
return;
|
|
76
|
+
if (n || !d) return;
|
|
78
77
|
let f;
|
|
79
|
-
return f =
|
|
78
|
+
return f = N(
|
|
80
79
|
d,
|
|
81
80
|
(R, k) => {
|
|
82
81
|
l({
|
|
@@ -121,25 +120,32 @@ function q({
|
|
|
121
120
|
const p = [S, g.inView, g.entry];
|
|
122
121
|
return p.ref = p[0], p.inView = p[1], p.entry = p[2], p;
|
|
123
122
|
}
|
|
124
|
-
const C = "
|
|
123
|
+
const C = "_image_1nvgq_76", A = "_image--theme-dark_1nvgq_85", X = "_image--size-medium_1nvgq_88", $ = "_image--size-small_1nvgq_94", B = "_image--size-x-small_1nvgq_100", w = {
|
|
125
124
|
image: C,
|
|
126
|
-
"image--theme-dark": "_image--theme-
|
|
125
|
+
"image--theme-dark": "_image--theme-dark_1nvgq_85",
|
|
127
126
|
imageThemeDark: A,
|
|
128
|
-
"image--size-medium": "_image--size-
|
|
127
|
+
"image--size-medium": "_image--size-medium_1nvgq_88",
|
|
129
128
|
imageSizeMedium: X,
|
|
130
|
-
"image--size-small": "_image--size-
|
|
129
|
+
"image--size-small": "_image--size-small_1nvgq_94",
|
|
131
130
|
imageSizeSmall: $,
|
|
132
|
-
"image--size-x-small": "_image--size-x-
|
|
131
|
+
"image--size-x-small": "_image--size-x-small_1nvgq_100",
|
|
133
132
|
imageSizeXSmall: B
|
|
134
133
|
}, G = (s, t, i) => {
|
|
135
134
|
const e = s[t];
|
|
136
135
|
return e ? typeof e == "function" ? e() : Promise.resolve(e) : new Promise((a, r) => {
|
|
137
|
-
(typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
|
|
136
|
+
(typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
|
|
137
|
+
r.bind(
|
|
138
|
+
null,
|
|
139
|
+
new Error(
|
|
140
|
+
"Unknown variable dynamic import: " + t + (t.split("/").length !== i ? ". Note that variables only represent file names one level deep." : "")
|
|
141
|
+
)
|
|
142
|
+
)
|
|
143
|
+
);
|
|
138
144
|
});
|
|
139
145
|
}, Z = ["large", "medium", "small", "x-small"], P = (s) => {
|
|
140
146
|
var n;
|
|
141
|
-
const t =
|
|
142
|
-
return
|
|
147
|
+
const t = j(), [i, e] = y(!1), [a, r] = y(!0);
|
|
148
|
+
return M(() => {
|
|
143
149
|
i && (r(!0), (async () => {
|
|
144
150
|
try {
|
|
145
151
|
t.current = await G(/* @__PURE__ */ Object.assign({ "../../../../icons/dist/assets/360.svg": () => import("./360.CfjUtgxq.js"), "../../../../icons/dist/assets/academic-cap.svg": () => import("./academic-cap.OBigTQQS.js"), "../../../../icons/dist/assets/alarm-clock.svg": () => import("./alarm-clock.CpK-AEZG.js"), "../../../../icons/dist/assets/arrow-clockwise.svg": () => import("./arrow-clockwise.BefOjGPg.js"), "../../../../icons/dist/assets/arrow-counterclockwise.svg": () => import("./arrow-counterclockwise.C7Ov32BZ.js"), "../../../../icons/dist/assets/arrow-down-line.svg": () => import("./arrow-down-line.RDD2pRZY.js"), "../../../../icons/dist/assets/arrow-down.svg": () => import("./arrow-down.XpokLh98.js"), "../../../../icons/dist/assets/arrow-edge.svg": () => import("./arrow-edge.CPA93M81.js"), "../../../../icons/dist/assets/arrow-left.svg": () => import("./arrow-left.C8NG5I2X.js"), "../../../../icons/dist/assets/arrow-out.svg": () => import("./arrow-out.CsHHHYN9.js"), "../../../../icons/dist/assets/arrow-outline-left.svg": () => import("./arrow-outline-left.Bhw_LzfV.js"), "../../../../icons/dist/assets/arrow-right.svg": () => import("./arrow-right.HNwAz18h.js"), "../../../../icons/dist/assets/arrow-up-arrow-down.svg": () => import("./arrow-up-arrow-down.BVyuVJP5.js"), "../../../../icons/dist/assets/arrow-up.svg": () => import("./arrow-up.Ca1GnLaY.js"), "../../../../icons/dist/assets/at.svg": () => import("./at.BNfdp4M0.js"), "../../../../icons/dist/assets/barcode-scanner.svg": () => import("./barcode-scanner.D0olxB_m.js"), "../../../../icons/dist/assets/battery.svg": () => import("./battery.YCg9lYqC.js"), "../../../../icons/dist/assets/bell.svg": () => import("./bell.DbPxCAUM.js"), "../../../../icons/dist/assets/bin-open.svg": () => import("./bin-open.DsjIBW00.js"), "../../../../icons/dist/assets/bin.svg": () => import("./bin.ktpYUJmK.js"), "../../../../icons/dist/assets/bluetooth.svg": () => import("./bluetooth.dW5tTwby.js"), "../../../../icons/dist/assets/bookmark.svg": () => import("./bookmark.B7Mbr-d6.js"), "../../../../icons/dist/assets/burger.svg": () => import("./burger.DLP81BXa.js"), "../../../../icons/dist/assets/calendar.svg": () => import("./calendar.Cig7yG7m.js"), "../../../../icons/dist/assets/camera.svg": () => import("./camera.BoCB0Emp.js"), "../../../../icons/dist/assets/cart-check.svg": () => import("./cart-check.CYH0vTB8.js"), "../../../../icons/dist/assets/cart-plus.svg": () => import("./cart-plus.DzXXFMZj.js"), "../../../../icons/dist/assets/cart.svg": () => import("./cart.CoEwMABr.js"), "../../../../icons/dist/assets/catalog.svg": () => import("./catalog.CwV-J6Kb.js"), "../../../../icons/dist/assets/certificate.svg": () => import("./certificate.Crs4RohK.js"), "../../../../icons/dist/assets/chain-link.svg": () => import("./chain-link.BMV2WV6k.js"), "../../../../icons/dist/assets/chainsaw.svg": () => import("./chainsaw.CI1EYF7a.js"), "../../../../icons/dist/assets/check.svg": () => import("./check.CuZKWgYj.js"), "../../../../icons/dist/assets/chevron-down.svg": () => import("./chevron-down.5UkGOwK_.js"), "../../../../icons/dist/assets/chevron-left.svg": () => import("./chevron-left.DRFQ-efY.js"), "../../../../icons/dist/assets/chevron-line-left.svg": () => import("./chevron-line-left.SQvDJQ1t.js"), "../../../../icons/dist/assets/chevron-line-right.svg": () => import("./chevron-line-right.CYQ3b2cQ.js"), "../../../../icons/dist/assets/chevron-right.svg": () => import("./chevron-right.B_Ew9QUt.js"), "../../../../icons/dist/assets/chevron-up.svg": () => import("./chevron-up.DqETUWqG.js"), "../../../../icons/dist/assets/circle-check-colored.svg": () => import("./circle-check-colored.Bye_GwLy.js"), "../../../../icons/dist/assets/circle-check-inverted.svg": () => import("./circle-check-inverted.Cc2cUmWT.js"), "../../../../icons/dist/assets/circle-info-colored.svg": () => import("./circle-info-colored.D2pp54gf.js"), "../../../../icons/dist/assets/circle-info-inverted.svg": () => import("./circle-info-inverted.D8Z0vTmu.js"), "../../../../icons/dist/assets/circle-pause.svg": () => import("./circle-pause.DaRfXOff.js"), "../../../../icons/dist/assets/circle-stroke.svg": () => import("./circle-stroke.CWu_o3Gx.js"), "../../../../icons/dist/assets/circle.svg": () => import("./circle.471EUzv6.js"), "../../../../icons/dist/assets/clock.svg": () => import("./clock.Bw5ICIVH.js"), "../../../../icons/dist/assets/coffee-cup.svg": () => import("./coffee-cup.DIijzKx_.js"), "../../../../icons/dist/assets/compare.svg": () => import("./compare.BgktBbYD.js"), "../../../../icons/dist/assets/connected-box-mobile.svg": () => import("./connected-box-mobile.DboMCVxp.js"), "../../../../icons/dist/assets/connected-box-stationary.svg": () => import("./connected-box-stationary.CAPCPQ1d.js"), "../../../../icons/dist/assets/connected-box.svg": () => import("./connected-box.DVqJw-ws.js"), "../../../../icons/dist/assets/cross.svg": () => import("./cross.rEw3TuHs.js"), "../../../../icons/dist/assets/diamond-exclamationmark-colored.svg": () => import("./diamond-exclamationmark-colored.WNKYwZ8q.js"), "../../../../icons/dist/assets/diamond-exclamationmark-inverted.svg": () => import("./diamond-exclamationmark-inverted.DzAIb8Nt.js"), "../../../../icons/dist/assets/diamond.svg": () => import("./diamond.CXZHFpPC.js"), "../../../../icons/dist/assets/diskette.svg": () => import("./diskette._0C2VZ9v.js"), "../../../../icons/dist/assets/distance.svg": () => import("./distance.FA6pTjcW.js"), "../../../../icons/dist/assets/dots-connected.svg": () => import("./dots-connected.ZMYjHeNS.js"), "../../../../icons/dist/assets/download-complete.svg": () => import("./download-complete.CZVpzrvY.js"), "../../../../icons/dist/assets/envelope-open.svg": () => import("./envelope-open.CA4cE5lk.js"), "../../../../icons/dist/assets/envelope.svg": () => import("./envelope.re-RxZVw.js"), "../../../../icons/dist/assets/exclamationmark.svg": () => import("./exclamationmark.DEbIGqGC.js"), "../../../../icons/dist/assets/exit.svg": () => import("./exit.Cgb8AB-k.js"), "../../../../icons/dist/assets/eye-closed.svg": () => import("./eye-closed.CvqozUwK.js"), "../../../../icons/dist/assets/eye.svg": () => import("./eye.CRQMKZs4.js"), "../../../../icons/dist/assets/facebook.svg": () => import("./facebook.CVcxa0rV.js"), "../../../../icons/dist/assets/filter.svg": () => import("./filter.DrPSKpaG.js"), "../../../../icons/dist/assets/finger-double-arrow.svg": () => import("./finger-double-arrow.DDUZoPh8.js"), "../../../../icons/dist/assets/flash.svg": () => import("./flash.CgJJ1bUx.js"), "../../../../icons/dist/assets/fullscreen.svg": () => import("./fullscreen.Be2rBj1i.js"), "../../../../icons/dist/assets/gear.svg": () => import("./gear.DEltGVSA.js"), "../../../../icons/dist/assets/globe.svg": () => import("./globe.DG6uw6fi.js"), "../../../../icons/dist/assets/grid.svg": () => import("./grid.DH1impeF.js"), "../../../../icons/dist/assets/guidance.svg": () => import("./guidance.BBYB3JpW.js"), "../../../../icons/dist/assets/haircross.svg": () => import("./haircross.D-whkit9.js"), "../../../../icons/dist/assets/hanger.svg": () => import("./hanger.Bo8qtNo5.js"), "../../../../icons/dist/assets/headphones.svg": () => import("./headphones.DjWXOuJJ.js"), "../../../../icons/dist/assets/heart.svg": () => import("./heart.D-BnHMb-.js"), "../../../../icons/dist/assets/hexagon-arrow-clockwise.svg": () => import("./hexagon-arrow-clockwise.D0eeDQQx.js"), "../../../../icons/dist/assets/horizontal-ellipsis.svg": () => import("./horizontal-ellipsis.ChdN6RnG.js"), "../../../../icons/dist/assets/house.svg": () => import("./house.BohpDQ3q.js"), "../../../../icons/dist/assets/imow.svg": () => import("./imow.Dh1oMqcW.js"), "../../../../icons/dist/assets/info.svg": () => import("./info.BZVg9FLA.js"), "../../../../icons/dist/assets/instagram.svg": () => import("./instagram.CIlKb7xj.js"), "../../../../icons/dist/assets/leave-fullscreen.svg": () => import("./leave-fullscreen.BC5iwDur.js"), "../../../../icons/dist/assets/lightbulb.svg": () => import("./lightbulb.DQ7TiRsr.js"), "../../../../icons/dist/assets/linkedin.svg": () => import("./linkedin.br5zvxco.js"), "../../../../icons/dist/assets/list-three-rows.svg": () => import("./list-three-rows.Cso4ybs8.js"), "../../../../icons/dist/assets/list-two-rows.svg": () => import("./list-two-rows.DOsZEv0-.js"), "../../../../icons/dist/assets/loading-spinner.svg": () => import("./loading-spinner.BukfMaU6.js"), "../../../../icons/dist/assets/lock.svg": () => import("./lock.Dw_GOpTn.js"), "../../../../icons/dist/assets/magnifying-glass-minus.svg": () => import("./magnifying-glass-minus.BYztw2P1.js"), "../../../../icons/dist/assets/magnifying-glass-plus.svg": () => import("./magnifying-glass-plus.BTgviDVh.js"), "../../../../icons/dist/assets/magnifying-glass.svg": () => import("./magnifying-glass.C8DfRaIO.js"), "../../../../icons/dist/assets/map.svg": () => import("./map.CXgG1iGz.js"), "../../../../icons/dist/assets/minus.svg": () => import("./minus.BkhCuIH4.js"), "../../../../icons/dist/assets/mobile.svg": () => import("./mobile.C1Kj9VnC.js"), "../../../../icons/dist/assets/nine-squares.svg": () => import("./nine-squares.DVsNAOzz.js"), "../../../../icons/dist/assets/note-check.svg": () => import("./note-check.CM_kmt0M.js"), "../../../../icons/dist/assets/note-plus.svg": () => import("./note-plus.Bkn78EyA.js"), "../../../../icons/dist/assets/note.svg": () => import("./note.CE0ACLn8.js"), "../../../../icons/dist/assets/number-input.svg": () => import("./number-input.BLhoh5mh.js"), "../../../../icons/dist/assets/paperclip.svg": () => import("./paperclip.BMerX4rj.js"), "../../../../icons/dist/assets/parcel.svg": () => import("./parcel.Ve9GL_EG.js"), "../../../../icons/dist/assets/pause.svg": () => import("./pause.B91Ejn-O.js"), "../../../../icons/dist/assets/pdf.svg": () => import("./pdf.9kZbElrZ.js"), "../../../../icons/dist/assets/pen.svg": () => import("./pen.CvKw2PvE.js"), "../../../../icons/dist/assets/percent.svg": () => import("./percent.BlB6rG-B.js"), "../../../../icons/dist/assets/petrol.svg": () => import("./petrol.Du6qAgp0.js"), "../../../../icons/dist/assets/phone.svg": () => import("./phone.DzdXfmNC.js"), "../../../../icons/dist/assets/pin-s.svg": () => import("./pin-s.DXgYuN9C.js"), "../../../../icons/dist/assets/pin.svg": () => import("./pin.DZfZr4El.js"), "../../../../icons/dist/assets/pinterest.svg": () => import("./pinterest.sUPAub_q.js"), "../../../../icons/dist/assets/placeholder.svg": () => import("./placeholder.Dbb0hT5R.js"), "../../../../icons/dist/assets/play.svg": () => import("./play.BDiY2JrT.js"), "../../../../icons/dist/assets/plug.svg": () => import("./plug.DZozve4C.js"), "../../../../icons/dist/assets/plus.svg": () => import("./plus.zdu17kAe.js"), "../../../../icons/dist/assets/printer.svg": () => import("./printer.CaFaWfeS.js"), "../../../../icons/dist/assets/prohibition-sign.svg": () => import("./prohibition-sign.DUFn0QiV.js"), "../../../../icons/dist/assets/questionmark.svg": () => import("./questionmark.QyDxanQy.js"), "../../../../icons/dist/assets/security.svg": () => import("./security.DkLw5ym4.js"), "../../../../icons/dist/assets/share.svg": () => import("./share.C3wwEl8n.js"), "../../../../icons/dist/assets/shirt.svg": () => import("./shirt.BC8W-yCI.js"), "../../../../icons/dist/assets/shop.svg": () => import("./shop.DdPV35mK.js"), "../../../../icons/dist/assets/sound-off.svg": () => import("./sound-off.D4kGcehG.js"), "../../../../icons/dist/assets/sound-on.svg": () => import("./sound-on.Cynkb0_t.js"), "../../../../icons/dist/assets/speechbubble.svg": () => import("./speechbubble.87vuoKUp.js"), "../../../../icons/dist/assets/speechbubbles.svg": () => import("./speechbubbles.CSFhpNJn.js"), "../../../../icons/dist/assets/square.svg": () => import("./square.D6PgEi_r.js"), "../../../../icons/dist/assets/star-half.svg": () => import("./star-half.DZTtM5Bw.js"), "../../../../icons/dist/assets/star.svg": () => import("./star.BkjednvI.js"), "../../../../icons/dist/assets/tag.svg": () => import("./tag.yO7uMsHj.js"), "../../../../icons/dist/assets/thumbs-down.svg": () => import("./thumbs-down.DeBD6wnK.js"), "../../../../icons/dist/assets/thumbs-up.svg": () => import("./thumbs-up.D-44gexH.js"), "../../../../icons/dist/assets/triangle-exclamationmark-colored.svg": () => import("./triangle-exclamationmark-colored.CbVC3Gzi.js"), "../../../../icons/dist/assets/triangle-exclamationmark-inverted.svg": () => import("./triangle-exclamationmark-inverted.BiGoK7TV.js"), "../../../../icons/dist/assets/triangle.svg": () => import("./triangle.ibv6NDnt.js"), "../../../../icons/dist/assets/truck.svg": () => import("./truck.xIk5wW6T.js"), "../../../../icons/dist/assets/two-people-screen.svg": () => import("./two-people-screen.BBLouaW4.js"), "../../../../icons/dist/assets/two-sheets.svg": () => import("./two-sheets.DWFmuL7N.js"), "../../../../icons/dist/assets/upload.svg": () => import("./upload.ZImTAIgx.js"), "../../../../icons/dist/assets/user.svg": () => import("./user.BMARueuy.js"), "../../../../icons/dist/assets/vertical-ellipsis.svg": () => import("./vertical-ellipsis.Bc9eBsDF.js"), "../../../../icons/dist/assets/wc.svg": () => import("./wc.gmKE1r5l.js"), "../../../../icons/dist/assets/whatsapp.svg": () => import("./whatsapp.CPpu-7Nn.js"), "../../../../icons/dist/assets/wifi-1bar.svg": () => import("./wifi-1bar.BcEP-r8w.js"), "../../../../icons/dist/assets/wifi-2bars.svg": () => import("./wifi-2bars.jDOd4Q3q.js"), "../../../../icons/dist/assets/wifi-off.svg": () => import("./wifi-off.D9xPqVWn.js"), "../../../../icons/dist/assets/wifi.svg": () => import("./wifi.CuQykF6X.js"), "../../../../icons/dist/assets/wind-rose.svg": () => import("./wind-rose.C-XcKdy-.js"), "../../../../icons/dist/assets/wrench.svg": () => import("./wrench.DMFV2S9u.js"), "../../../../icons/dist/assets/x.svg": () => import("./x.BqbpXd7O.js"), "../../../../icons/dist/assets/xing.svg": () => import("./xing.CiKYLbPq.js"), "../../../../icons/dist/assets/youtube.svg": () => import("./youtube.DrImaRSP.js") }), `../../../../icons/dist/assets/${s}.svg`, 8);
|
|
@@ -169,10 +175,10 @@ const C = "_image_109vr_63", A = "_image--theme-dark_109vr_72", X = "_image--siz
|
|
|
169
175
|
small: 10,
|
|
170
176
|
"x-small": 8
|
|
171
177
|
};
|
|
172
|
-
|
|
178
|
+
M(() => {
|
|
173
179
|
m(i);
|
|
174
180
|
}, [i]);
|
|
175
|
-
const { ref: S } =
|
|
181
|
+
const { ref: S } = O({
|
|
176
182
|
rootMargin: "200px 0px",
|
|
177
183
|
triggerOnce: !0,
|
|
178
184
|
fallbackInView: !0,
|
|
@@ -182,7 +188,7 @@ const C = "_image_109vr_63", A = "_image--theme-dark_109vr_72", X = "_image--siz
|
|
|
182
188
|
}
|
|
183
189
|
}), h = (l) => (u) => {
|
|
184
190
|
a && u && (u.src = l);
|
|
185
|
-
}, g =
|
|
191
|
+
}, g = E(w.image, t, {
|
|
186
192
|
// custom icons and colored icons do not have a dark theme
|
|
187
193
|
[w.imageThemeDark]: r === "dark" && !a && !i.includes("-colored"),
|
|
188
194
|
[w.imageSizeMedium]: e === "medium",
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { j as n } from "./jsx-runtime.C115EyI4.js";
|
|
3
|
+
import { c as i } from "./index.CvOaL64Y.js";
|
|
4
|
+
import { useState as D } from "react";
|
|
5
|
+
import { u as C } from "./useBreakpoint.5xBNDiCf.js";
|
|
6
|
+
import { Asterisk as L } from "../asterisk.Cjbk-xZi.js";
|
|
7
|
+
import { DSButton as $ } from "../button.DlFWwHuA.js";
|
|
8
|
+
import { DSSystemFeedback as E } from "../systemfeedback.CUWch42u.js";
|
|
9
|
+
import { g as b } from "./helpers.B1JT5ShS.js";
|
|
10
|
+
import '../assets/InputPassword.VCNO8ANM.css';const q = "_input_1s7sy_226", R = "_input--invalid_1s7sy_336", V = "_input--small_1s7sy_343", O = "_input--has-leading-icon_1s7sy_395", F = "_input--has-action-button_1s7sy_398", M = "_input--has-second-action-button_1s7sy_401", T = "_input--has-affix_1s7sy_413", G = "_input--is-ready_1s7sy_427", J = "_root_1s7sy_434", K = "_hint_1s7sy_442", Q = "_label_1s7sy_442", U = "_wrapper_1s7sy_446", W = "_action-button_1s7sy_452", X = "_label--hidden_1s7sy_469", Y = "_feedback_1s7sy_496", s = {
|
|
11
|
+
input: q,
|
|
12
|
+
"input--invalid": "_input--invalid_1s7sy_336",
|
|
13
|
+
inputInvalid: R,
|
|
14
|
+
"input--small": "_input--small_1s7sy_343",
|
|
15
|
+
inputSmall: V,
|
|
16
|
+
"input--has-leading-icon": "_input--has-leading-icon_1s7sy_395",
|
|
17
|
+
inputHasLeadingIcon: O,
|
|
18
|
+
"input--has-action-button": "_input--has-action-button_1s7sy_398",
|
|
19
|
+
inputHasActionButton: F,
|
|
20
|
+
"input--has-second-action-button": "_input--has-second-action-button_1s7sy_401",
|
|
21
|
+
inputHasSecondActionButton: M,
|
|
22
|
+
"input--has-affix": "_input--has-affix_1s7sy_413",
|
|
23
|
+
inputHasAffix: T,
|
|
24
|
+
"input--is-ready": "_input--is-ready_1s7sy_427",
|
|
25
|
+
inputIsReady: G,
|
|
26
|
+
root: J,
|
|
27
|
+
hint: K,
|
|
28
|
+
label: Q,
|
|
29
|
+
wrapper: U,
|
|
30
|
+
"action-button": "_action-button_1s7sy_452",
|
|
31
|
+
actionButton: W,
|
|
32
|
+
"label--hidden": "_label--hidden_1s7sy_469",
|
|
33
|
+
labelHidden: X,
|
|
34
|
+
feedback: Y
|
|
35
|
+
}, Z = ({ id: t, label: a }) => {
|
|
36
|
+
if (!t)
|
|
37
|
+
throw new Error(
|
|
38
|
+
b(
|
|
39
|
+
"DSInputPassword",
|
|
40
|
+
'A unique "id" prop is required. Please add an unique "id" prop to the DSInputPassword component.'
|
|
41
|
+
)
|
|
42
|
+
);
|
|
43
|
+
if (!a)
|
|
44
|
+
throw new Error(
|
|
45
|
+
b(
|
|
46
|
+
"DSInputPassword",
|
|
47
|
+
`A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputPassword component. If you don't want to display a label, set hideLabel={true}.`
|
|
48
|
+
)
|
|
49
|
+
);
|
|
50
|
+
}, ls = ({
|
|
51
|
+
id: t,
|
|
52
|
+
label: a,
|
|
53
|
+
autocomplete: h = "new-password",
|
|
54
|
+
className: f,
|
|
55
|
+
disabled: c = !1,
|
|
56
|
+
hidePasswordText: w = "Hide password",
|
|
57
|
+
hint: e,
|
|
58
|
+
hideLabel: S = !1,
|
|
59
|
+
invalid: o = !1,
|
|
60
|
+
readonly: r = !1,
|
|
61
|
+
required: d = !1,
|
|
62
|
+
showPasswordText: x = "Show password",
|
|
63
|
+
size: l = "medium",
|
|
64
|
+
systemFeedback: u,
|
|
65
|
+
...I
|
|
66
|
+
}) => {
|
|
67
|
+
process.env.NODE_ENV !== "production" && Z({
|
|
68
|
+
id: t,
|
|
69
|
+
label: a
|
|
70
|
+
});
|
|
71
|
+
const [p, v] = D(!1), _ = `${t}-label`, m = `${t}-feedback`, y = `${t}-hint`, B = e ? ` ${y}` : "", H = C(S), g = i(s.root, f), P = i(s.input, {
|
|
72
|
+
// small input
|
|
73
|
+
[s.inputSmall]: l === "small",
|
|
74
|
+
// invalid state
|
|
75
|
+
[s.inputInvalid]: o,
|
|
76
|
+
// action button - input password always has an action button
|
|
77
|
+
[s.inputHasActionButton]: !0
|
|
78
|
+
}), N = i(s.label, {
|
|
79
|
+
// hide label only visually to keep them available for assistive technologies
|
|
80
|
+
[s.labelHidden]: H
|
|
81
|
+
}), j = i(s.actionButton, {
|
|
82
|
+
[s.actionButtonSmall]: l === "small"
|
|
83
|
+
}), k = () => {
|
|
84
|
+
v((A) => !A);
|
|
85
|
+
};
|
|
86
|
+
return /* @__PURE__ */ n.jsxs("div", { className: g, children: [
|
|
87
|
+
/* @__PURE__ */ n.jsxs("label", { className: N, id: _, htmlFor: t, children: [
|
|
88
|
+
a,
|
|
89
|
+
d && /* @__PURE__ */ n.jsx(L, {})
|
|
90
|
+
] }),
|
|
91
|
+
e && /* @__PURE__ */ n.jsx("div", { className: s.hint, id: y, children: e }),
|
|
92
|
+
o && u && /* @__PURE__ */ n.jsx(
|
|
93
|
+
E,
|
|
94
|
+
{
|
|
95
|
+
className: s.feedback,
|
|
96
|
+
message: u,
|
|
97
|
+
type: "invalid",
|
|
98
|
+
id: m
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
/* @__PURE__ */ n.jsxs("div", { className: s.wrapper, children: [
|
|
102
|
+
/* @__PURE__ */ n.jsx(
|
|
103
|
+
"input",
|
|
104
|
+
{
|
|
105
|
+
className: P,
|
|
106
|
+
id: t,
|
|
107
|
+
...I,
|
|
108
|
+
"aria-labelledby": `${_}${B}`,
|
|
109
|
+
"aria-describedby": o && u ? m : void 0,
|
|
110
|
+
"aria-invalid": o,
|
|
111
|
+
"aria-disabled": r,
|
|
112
|
+
readOnly: r,
|
|
113
|
+
required: d,
|
|
114
|
+
disabled: c,
|
|
115
|
+
autoComplete: h,
|
|
116
|
+
type: p ? "text" : "password"
|
|
117
|
+
}
|
|
118
|
+
),
|
|
119
|
+
/* @__PURE__ */ n.jsx(
|
|
120
|
+
$,
|
|
121
|
+
{
|
|
122
|
+
hideLabel: !0,
|
|
123
|
+
theme: "light",
|
|
124
|
+
iconName: p ? "eye-closed" : "eye",
|
|
125
|
+
variant: "ghost",
|
|
126
|
+
className: j,
|
|
127
|
+
size: l,
|
|
128
|
+
onClick: k,
|
|
129
|
+
type: "button",
|
|
130
|
+
disabled: c,
|
|
131
|
+
children: p ? w : x
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
] })
|
|
135
|
+
] });
|
|
136
|
+
};
|
|
137
|
+
export {
|
|
138
|
+
ls as D,
|
|
139
|
+
Z as v
|
|
140
|
+
};
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { j as e } from "./jsx-runtime.C115EyI4.js";
|
|
3
|
+
import { c as u } from "./index.CvOaL64Y.js";
|
|
4
|
+
import { useState as G, useRef as N, useEffect as w } from "react";
|
|
5
|
+
import { g as S, a as J } from "./helpers.B1JT5ShS.js";
|
|
6
|
+
import { u as K } from "./useBreakpoint.5xBNDiCf.js";
|
|
7
|
+
import { Asterisk as Q } from "../asterisk.Cjbk-xZi.js";
|
|
8
|
+
import { DSButton as D } from "../button.DlFWwHuA.js";
|
|
9
|
+
import { DSSystemFeedback as U } from "../systemfeedback.CUWch42u.js";
|
|
10
|
+
import '../assets/InputSearch.BMRAb95l.css';const X = "_input_12zpu_226", Y = "_input--invalid_12zpu_336", Z = "_input--small_12zpu_343", tt = "_input--has-leading-icon_12zpu_395", nt = "_input--has-action-button_12zpu_398", et = "_input--has-second-action-button_12zpu_401", at = "_input--has-affix_12zpu_413", st = "_input--is-ready_12zpu_427", ot = "_root_12zpu_434", it = "_hint_12zpu_442", ut = "_label_12zpu_442", ct = "_wrapper_12zpu_446", lt = "_action-button_12zpu_452", pt = "_second-action-button_12zpu_456", rt = "_label--hidden_12zpu_473", _t = "_feedback_12zpu_500", t = {
|
|
11
|
+
input: X,
|
|
12
|
+
"input--invalid": "_input--invalid_12zpu_336",
|
|
13
|
+
inputInvalid: Y,
|
|
14
|
+
"input--small": "_input--small_12zpu_343",
|
|
15
|
+
inputSmall: Z,
|
|
16
|
+
"input--has-leading-icon": "_input--has-leading-icon_12zpu_395",
|
|
17
|
+
inputHasLeadingIcon: tt,
|
|
18
|
+
"input--has-action-button": "_input--has-action-button_12zpu_398",
|
|
19
|
+
inputHasActionButton: nt,
|
|
20
|
+
"input--has-second-action-button": "_input--has-second-action-button_12zpu_401",
|
|
21
|
+
inputHasSecondActionButton: et,
|
|
22
|
+
"input--has-affix": "_input--has-affix_12zpu_413",
|
|
23
|
+
inputHasAffix: at,
|
|
24
|
+
"input--is-ready": "_input--is-ready_12zpu_427",
|
|
25
|
+
inputIsReady: st,
|
|
26
|
+
root: ot,
|
|
27
|
+
hint: it,
|
|
28
|
+
label: ut,
|
|
29
|
+
wrapper: ct,
|
|
30
|
+
"action-button": "_action-button_12zpu_452",
|
|
31
|
+
actionButton: lt,
|
|
32
|
+
"second-action-button": "_second-action-button_12zpu_456",
|
|
33
|
+
secondActionButton: pt,
|
|
34
|
+
"label--hidden": "_label--hidden_12zpu_473",
|
|
35
|
+
labelHidden: rt,
|
|
36
|
+
feedback: _t
|
|
37
|
+
}, dt = ({ id: n, label: c }) => {
|
|
38
|
+
if (!n)
|
|
39
|
+
throw new Error(
|
|
40
|
+
S(
|
|
41
|
+
"DSInputSearch",
|
|
42
|
+
'A unique "id" prop is required. Please add an unique "id" prop to the DSInputSearch component.'
|
|
43
|
+
)
|
|
44
|
+
);
|
|
45
|
+
if (!c)
|
|
46
|
+
throw new Error(
|
|
47
|
+
S(
|
|
48
|
+
"DSInputSearch",
|
|
49
|
+
`A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputSearch component. If you don't want to display a label, set hideLabel={true}.`
|
|
50
|
+
)
|
|
51
|
+
);
|
|
52
|
+
}, ht = (n) => !!J(n, "form"), Bt = ({
|
|
53
|
+
id: n,
|
|
54
|
+
label: c,
|
|
55
|
+
className: A,
|
|
56
|
+
clearButtonLabel: H = "Clear search field",
|
|
57
|
+
disabled: l = !1,
|
|
58
|
+
hint: h,
|
|
59
|
+
hideLabel: E = !1,
|
|
60
|
+
invalid: p = !1,
|
|
61
|
+
readonly: s = !1,
|
|
62
|
+
required: I = !1,
|
|
63
|
+
size: o = "medium",
|
|
64
|
+
submitButtonLabel: j = "Search",
|
|
65
|
+
systemFeedback: m,
|
|
66
|
+
value: b,
|
|
67
|
+
submitButtonOnClick: C,
|
|
68
|
+
onChange: g,
|
|
69
|
+
...k
|
|
70
|
+
}) => {
|
|
71
|
+
process.env.NODE_ENV !== "production" && dt({
|
|
72
|
+
id: n,
|
|
73
|
+
label: c
|
|
74
|
+
});
|
|
75
|
+
const [r, v] = G(b), f = N(null), _ = N(null), L = K(E);
|
|
76
|
+
w(() => {
|
|
77
|
+
v(b);
|
|
78
|
+
}, [b]), w(() => {
|
|
79
|
+
f.current && !ht(f.current) && process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && console.warn(
|
|
80
|
+
S(
|
|
81
|
+
"DSInputSearch",
|
|
82
|
+
`The DSInputSearch component with the id "${n}" is not within a form element. This may cause issues with form submission. Please ensure the DSInputSearch component is within a form element.`
|
|
83
|
+
)
|
|
84
|
+
);
|
|
85
|
+
}, []);
|
|
86
|
+
const z = `${n}-label`, B = `${n}-feedback`, y = `${n}-hint`, V = h ? ` ${y}` : "", x = r !== "" && r !== void 0 && r !== null, O = u(t.root, A), P = u(t.input, {
|
|
87
|
+
// small input
|
|
88
|
+
[t.inputSmall]: o === "small",
|
|
89
|
+
// invalid state
|
|
90
|
+
[t.inputInvalid]: p,
|
|
91
|
+
// action button - input password always has an action button
|
|
92
|
+
[t.inputHasActionButton]: !0,
|
|
93
|
+
// action second action button
|
|
94
|
+
[t.inputHasSecondActionButton]: x && !s && !l
|
|
95
|
+
}), $ = u(t.label, {
|
|
96
|
+
// hide label only visually to keep them available for assistive technologies
|
|
97
|
+
[t.labelHidden]: L
|
|
98
|
+
}), R = u(t.actionButton, {
|
|
99
|
+
[t.actionButtonSmall]: o === "small"
|
|
100
|
+
}), q = u(t.secondActionButton, {
|
|
101
|
+
[t.secondActionButtonSmall]: o === "small"
|
|
102
|
+
}), T = (a, i) => {
|
|
103
|
+
const W = Object.getPrototypeOf(a), d = Object.getOwnPropertyDescriptor(
|
|
104
|
+
W,
|
|
105
|
+
"value"
|
|
106
|
+
);
|
|
107
|
+
d != null && d.set ? d.set.call(a, i) : a.value = i;
|
|
108
|
+
}, F = () => {
|
|
109
|
+
var i;
|
|
110
|
+
if (!_.current) return;
|
|
111
|
+
T(_.current, "");
|
|
112
|
+
const a = new Event("change", { bubbles: !0 });
|
|
113
|
+
(i = _.current) == null || i.dispatchEvent(a);
|
|
114
|
+
}, M = (a) => {
|
|
115
|
+
v(a.target.value), g && g(a);
|
|
116
|
+
};
|
|
117
|
+
return /* @__PURE__ */ e.jsxs("div", { className: O, ref: f, children: [
|
|
118
|
+
/* @__PURE__ */ e.jsxs("label", { className: $, id: z, htmlFor: n, children: [
|
|
119
|
+
c,
|
|
120
|
+
I && /* @__PURE__ */ e.jsx(Q, {})
|
|
121
|
+
] }),
|
|
122
|
+
h && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: y, children: h }),
|
|
123
|
+
p && m && /* @__PURE__ */ e.jsx(
|
|
124
|
+
U,
|
|
125
|
+
{
|
|
126
|
+
className: t.feedback,
|
|
127
|
+
message: m,
|
|
128
|
+
type: "invalid",
|
|
129
|
+
id: B
|
|
130
|
+
}
|
|
131
|
+
),
|
|
132
|
+
/* @__PURE__ */ e.jsxs("div", { className: t.wrapper, children: [
|
|
133
|
+
/* @__PURE__ */ e.jsx(
|
|
134
|
+
"input",
|
|
135
|
+
{
|
|
136
|
+
className: P,
|
|
137
|
+
id: n,
|
|
138
|
+
ref: _,
|
|
139
|
+
...k,
|
|
140
|
+
"aria-labelledby": `${z}${V}`,
|
|
141
|
+
"aria-describedby": p && m ? B : void 0,
|
|
142
|
+
"aria-invalid": p,
|
|
143
|
+
"aria-disabled": s,
|
|
144
|
+
readOnly: s,
|
|
145
|
+
required: I,
|
|
146
|
+
disabled: l,
|
|
147
|
+
type: "search",
|
|
148
|
+
value: r,
|
|
149
|
+
onChange: M
|
|
150
|
+
}
|
|
151
|
+
),
|
|
152
|
+
x && !s && !l && /* @__PURE__ */ e.jsx(
|
|
153
|
+
D,
|
|
154
|
+
{
|
|
155
|
+
hideLabel: !0,
|
|
156
|
+
theme: "light",
|
|
157
|
+
iconName: "cross",
|
|
158
|
+
className: q,
|
|
159
|
+
variant: "ghost",
|
|
160
|
+
size: o,
|
|
161
|
+
onClick: F,
|
|
162
|
+
type: "button",
|
|
163
|
+
tabIndex: -1,
|
|
164
|
+
children: H
|
|
165
|
+
}
|
|
166
|
+
),
|
|
167
|
+
/* @__PURE__ */ e.jsx(
|
|
168
|
+
D,
|
|
169
|
+
{
|
|
170
|
+
hideLabel: !0,
|
|
171
|
+
theme: "light",
|
|
172
|
+
iconName: "magnifying-glass",
|
|
173
|
+
className: R,
|
|
174
|
+
variant: "ghost",
|
|
175
|
+
size: o,
|
|
176
|
+
onClick: C,
|
|
177
|
+
type: "submit",
|
|
178
|
+
disabled: l || s,
|
|
179
|
+
children: j
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
] })
|
|
183
|
+
] });
|
|
184
|
+
};
|
|
185
|
+
export {
|
|
186
|
+
Bt as D,
|
|
187
|
+
ht as i,
|
|
188
|
+
dt as v
|
|
189
|
+
};
|