@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
204 lines (203 loc) • 12 kB
JavaScript
"use client";
import { jsx as H, jsxs as ve } from "react/jsx-runtime";
import { d as st } from "./chunks/index.CgTHIF3K.js";
import { c as R } from "./chunks/index.CEyLAtio.js";
import { forwardRef as it, useState as De, useRef as Ve, useEffect as nt } from "react";
import { u as lt } from "./chunks/useBreakpoint.CMOR9ZOB.js";
import { u as ze } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { Asterisk as at } from "./asterisk.CR60hx8S.js";
import { D as Ge } from "./chunks/Button.B7xF1E19.js";
import { D as ot } from "./chunks/Icon.DGTYCv63.js";
import { D as dt } from "./chunks/SystemFeedback.B9f67mjJ.js";
import { v as ct, b as ft, M as rt, a as ut, s as pt, i as qe, c as mt } from "./chunks/Input.utils.Cnnzvuk4.js";
import './assets/input.ONbL-_C1.css';const _t = "ds-input_input_fds0e_1", bt = "ds-input_input--small_fds0e_9", ht = "ds-input_input--invalid_fds0e_121", It = "ds-input_input--has-leading-icon_fds0e_179", xt = "ds-input_input--has-action-button_fds0e_182", yt = "ds-input_input--has-affix_fds0e_197", gt = "ds-input_input--is-ready_fds0e_211", St = "ds-input_root_fds0e_218", vt = "ds-input_hint_fds0e_227", Dt = "ds-input_label_fds0e_227", Nt = "ds-input_wrapper_fds0e_231", kt = "ds-input_affix_fds0e_237", Bt = "ds-input_affix--small_fds0e_258", Ct = "ds-input_affix--disabled_fds0e_271", Lt = "ds-input_prefix_fds0e_279", Ht = "ds-input_affix--readonly_fds0e_282", Rt = "ds-input_suffix_fds0e_292", At = "ds-input_leading-icon_fds0e_299", wt = "ds-input_leading-icon--small_fds0e_311", Ft = "ds-input_leading-icon--disabled_fds0e_314", Pt = "ds-input_action-button_fds0e_323", Et = "ds-input_label--hidden_fds0e_341", Tt = "ds-input_label--disabled_fds0e_354", $t = "ds-input_feedback_fds0e_374", t = {
input: _t,
inputSmall: bt,
inputInvalid: ht,
inputHasLeadingIcon: It,
inputHasActionButton: xt,
inputHasAffix: yt,
inputIsReady: gt,
root: St,
hint: vt,
label: Dt,
wrapper: Nt,
affix: kt,
affixSmall: Bt,
affixDisabled: Ct,
prefix: Lt,
affixReadonly: Ht,
suffix: Rt,
leadingIcon: At,
leadingIconSmall: wt,
leadingIconDisabled: Ft,
actionButton: Pt,
labelHidden: Et,
labelDisabled: Tt,
feedback: $t
}, Ot = it((Ne, w) => {
const e = st.c(175);
let A, S, m, o, I, u, p, n, x, i, f, G, U, J, K, Q, Y, Z;
e[0] !== Ne ? ({
id: o,
label: I,
actionButtonProps: A,
className: S,
disabled: G,
hint: m,
hideLabel: U,
invalid: J,
leadingIconName: u,
leadingIconSource: p,
prefix: n,
readonly: K,
required: Q,
size: Y,
suffix: i,
systemFeedback: f,
type: Z,
...x
} = Ne, e[0] = Ne, e[1] = A, e[2] = S, e[3] = m, e[4] = o, e[5] = I, e[6] = u, e[7] = p, e[8] = n, e[9] = x, e[10] = i, e[11] = f, e[12] = G, e[13] = U, e[14] = J, e[15] = K, e[16] = Q, e[17] = Y, e[18] = Z) : (A = e[1], S = e[2], m = e[3], o = e[4], I = e[5], u = e[6], p = e[7], n = e[8], x = e[9], i = e[10], f = e[11], G = e[12], U = e[13], J = e[14], K = e[15], Q = e[16], Y = e[17], Z = e[18]);
const s = G === void 0 ? !1 : G, Ue = U === void 0 ? !1 : U, c = J === void 0 ? !1 : J, a = K === void 0 ? !1 : K, v = Q === void 0 ? !1 : Q, l = Y === void 0 ? "medium" : Y, d = Z === void 0 ? "text" : Z;
process.env.NODE_ENV !== "production" && (ct({
id: o,
label: I,
prefix: n,
suffix: i,
leadingIconName: u,
leadingIconSource: p,
actionButtonProps: A
}), ft(d, x.autoComplete));
let F;
e[19] !== A ? (F = A || {}, e[19] = A, e[20] = F) : F = e[20];
let P, _, b, E, T;
e[21] !== F ? ({
iconName: _,
iconSource: b,
label: P,
onClick: E,
...T
} = F, e[21] = F, e[22] = P, e[23] = _, e[24] = b, e[25] = E, e[26] = T) : (P = e[22], _ = e[23], b = e[24], E = e[25], T = e[26]);
const [ee, Je] = De(!1), [ke, Ke] = De(!1), [y, Qe] = De(!1);
let ne;
e[27] === Symbol.for("react.memo_cache_sentinel") ? (ne = {}, e[27] = ne) : ne = e[27];
const [te, Ye] = De(ne), Be = Ve(null);
let le;
e[28] !== w ? (le = (r) => {
Be.current = r, typeof w == "function" ? w(r) : w && (w.current = r);
}, e[28] = w, e[29] = le) : le = e[29];
const se = le;
let ae;
e[30] !== n ? (ae = n == null ? void 0 : n.substring(0, rt), e[30] = n, e[31] = ae) : ae = e[31];
const Ce = ae, Le = Ve(null);
let oe;
e[32] !== i ? (oe = i == null ? void 0 : i.substring(0, ut), e[32] = i, e[33] = oe) : oe = e[33];
const He = oe, Re = Ve(null), ie = lt(Ue);
let de;
e[34] !== l ? (de = () => {
const r = l === "medium" ? 16 : 8, L = {};
if (Le.current) {
const h = Le.current.offsetWidth;
L.paddingInlineStart = r + h + "px";
}
if (Re.current) {
const h = Re.current.offsetWidth;
L.paddingInlineEnd = r + h + "px";
}
Ye(L), Je(!0);
}, e[34] = l, e[35] = de) : de = e[35];
let ce;
e[36] !== ke || e[37] !== n || e[38] !== l || e[39] !== i ? (ce = [n, i, l, ke], e[36] = ke, e[37] = n, e[38] = l, e[39] = i, e[40] = ce) : ce = e[40], ze(de, ce);
let fe, re;
e[41] === Symbol.for("react.memo_cache_sentinel") ? (fe = () => {
(async () => {
"fonts" in document && (await document.fonts.load('1em "STIHL Contraface Digital Text Regular"'), Ke(!0));
})();
}, re = [], e[41] = fe, e[42] = re) : (fe = e[41], re = e[42]), ze(fe, re);
let ue, pe;
e[43] !== d ? (ue = () => {
const r = pt(qe(d), mt(d));
Qe(r);
}, pe = [d], e[43] = d, e[44] = ue, e[45] = pe) : (ue = e[44], pe = e[45]), nt(ue, pe);
const Ae = l === "small";
let g, $, O, W, D, N, X, j, k, B, C;
if (e[46] !== S || e[47] !== s || e[48] !== Ce || e[49] !== He || e[50] !== se || e[51] !== ie || e[52] !== m || e[53] !== _ || e[54] !== b || e[55] !== o || e[56] !== te || e[57] !== c || e[58] !== ee || e[59] !== y || e[60] !== I || e[61] !== u || e[62] !== p || e[63] !== n || e[64] !== a || e[65] !== v || e[66] !== x || e[67] !== l || e[68] !== i || e[69] !== f || e[70] !== Ae || e[71] !== d) {
const r = R(t.affix, {
[t.affixSmall]: Ae,
[t.affixDisabled]: s,
[t.affixReadonly]: a
}), L = `${o}-label`, h = `${o}-feedback`, _e = `${o}-hint`, Ze = m ? ` ${_e}` : "";
let be;
e[83] !== c || e[84] !== f || e[85] !== h ? (be = [c && f && h].filter(Boolean).join(" ") || void 0, e[83] = c, e[84] = f, e[85] = h, e[86] = be) : be = e[86];
const we = be;
let he;
e[87] !== S ? (he = R(t.root, S), e[87] = S, e[88] = he) : he = e[88];
const et = he, Fe = l === "small", Pe = u || p, Ee = n || i, Te = _ || b || y;
let Ie;
e[89] !== c || e[90] !== ee || e[91] !== Fe || e[92] !== Pe || e[93] !== Ee || e[94] !== Te ? (Ie = R(t.input, {
[t.inputSmall]: Fe,
[t.inputInvalid]: c,
[t.inputHasLeadingIcon]: Pe,
[t.inputHasAffix]: Ee,
[t.inputHasActionButton]: Te,
[t.inputIsReady]: ee
}), e[89] = c, e[90] = ee, e[91] = Fe, e[92] = Pe, e[93] = Ee, e[94] = Te, e[95] = Ie) : Ie = e[95];
const $e = Ie;
let xe;
e[96] !== s || e[97] !== ie ? (xe = R(t.label, {
[t.labelHidden]: ie,
[t.labelDisabled]: s
}), e[96] = s, e[97] = ie, e[98] = xe) : xe = e[98];
const Oe = xe, We = l === "small";
let ye;
e[99] !== s || e[100] !== We ? (ye = R(t.leadingIcon, {
[t.leadingIconSmall]: We,
[t.leadingIconDisabled]: s
}), e[99] = s, e[100] = We, e[101] = ye) : ye = e[101];
const Xe = ye, je = l === "small";
let ge;
e[102] !== je ? (ge = R(t.actionButton, {
[t.actionButtonSmall]: je
}), e[102] = je, e[103] = ge) : ge = e[103], g = ge;
let Se;
e[104] !== s || e[105] !== a ? (Se = (tt) => {
Be.current && !s && !a && Be.current.showPicker(), tt.preventDefault();
}, e[104] = s, e[105] = a, e[106] = Se) : Se = e[106], $ = Se, j = et;
let z;
e[107] !== v ? (z = v && /* @__PURE__ */ H(at, {}), e[107] = v, e[108] = z) : z = e[108], e[109] !== o || e[110] !== L || e[111] !== I || e[112] !== Oe || e[113] !== z ? (k = /* @__PURE__ */ ve("label", { className: Oe, id: L, htmlFor: o, children: [
I,
z
] }), e[109] = o, e[110] = L, e[111] = I, e[112] = Oe, e[113] = z, e[114] = k) : k = e[114], e[115] !== m || e[116] !== _e ? (B = m && /* @__PURE__ */ H("div", { className: t.hint, id: _e, children: m }), e[115] = m, e[116] = _e, e[117] = B) : B = e[117], e[118] !== c || e[119] !== f || e[120] !== h ? (C = c && f && /* @__PURE__ */ H(dt, { className: t.feedback, message: f, variant: "error", id: h }), e[118] = c, e[119] = f, e[120] = h, e[121] = C) : C = e[121], O = t.wrapper, W = n && /* @__PURE__ */ H("span", { className: R(r, t.prefix), ref: Le, "aria-disabled": s, children: Ce }), e[122] !== Xe || e[123] !== u || e[124] !== p || e[125] !== n ? (D = !n && (u || p) && /* @__PURE__ */ H(ot, { name: u, theme: "light", source: p, className: Xe, "aria-hidden": "true" }), e[122] = Xe, e[123] = u, e[124] = p, e[125] = n, e[126] = D) : D = e[126];
const Me = `${L}${Ze}`;
e[127] !== we || e[128] !== s || e[129] !== se || e[130] !== o || e[131] !== $e || e[132] !== te || e[133] !== c || e[134] !== a || e[135] !== v || e[136] !== x || e[137] !== Me || e[138] !== d ? (N = /* @__PURE__ */ H("input", { type: d, className: $e, id: o, ...x, ref: se, style: te, "aria-labelledby": Me, "aria-describedby": we, "aria-invalid": c, "aria-disabled": a, readOnly: a, required: v, disabled: s }), e[127] = we, e[128] = s, e[129] = se, e[130] = o, e[131] = $e, e[132] = te, e[133] = c, e[134] = a, e[135] = v, e[136] = x, e[137] = Me, e[138] = d, e[139] = N) : N = e[139], X = i && /* @__PURE__ */ H("span", { className: R(r, t.suffix), ref: Re, "aria-disabled": s, children: He }), e[46] = S, e[47] = s, e[48] = Ce, e[49] = He, e[50] = se, e[51] = ie, e[52] = m, e[53] = _, e[54] = b, e[55] = o, e[56] = te, e[57] = c, e[58] = ee, e[59] = y, e[60] = I, e[61] = u, e[62] = p, e[63] = n, e[64] = a, e[65] = v, e[66] = x, e[67] = l, e[68] = i, e[69] = f, e[70] = Ae, e[71] = d, e[72] = g, e[73] = $, e[74] = O, e[75] = W, e[76] = D, e[77] = N, e[78] = X, e[79] = j, e[80] = k, e[81] = B, e[82] = C;
} else
g = e[72], $ = e[73], O = e[74], W = e[75], D = e[76], N = e[77], X = e[78], j = e[79], k = e[80], B = e[81], C = e[82];
let M;
e[140] !== g || e[141] !== P || e[142] !== s || e[143] !== _ || e[144] !== b || e[145] !== y || e[146] !== E || e[147] !== a || e[148] !== T || e[149] !== l || e[150] !== i ? (M = !i && !y && (_ || b) && /* @__PURE__ */ H(Ge, { ...T, hideLabel: !0, theme: "light", iconName: _, iconSource: b, variant: "ghost", className: g, size: l, onClick: E, type: "button", disabled: s || a, children: P }), e[140] = g, e[141] = P, e[142] = s, e[143] = _, e[144] = b, e[145] = y, e[146] = E, e[147] = a, e[148] = T, e[149] = l, e[150] = i, e[151] = M) : M = e[151];
let V;
e[152] !== g || e[153] !== s || e[154] !== $ || e[155] !== y || e[156] !== a || e[157] !== l || e[158] !== i || e[159] !== d ? (V = !i && y && !a && !s && /* @__PURE__ */ ve(Ge, { hideLabel: !0, theme: "light", iconName: qe(d) ? "calendar" : "clock", variant: "ghost", className: g, size: l, onClick: $, type: "button", children: [
"Open ",
qe(d) ? "date" : "time",
" picker"
] }), e[152] = g, e[153] = s, e[154] = $, e[155] = y, e[156] = a, e[157] = l, e[158] = i, e[159] = d, e[160] = V) : V = e[160];
let q;
e[161] !== O || e[162] !== W || e[163] !== D || e[164] !== N || e[165] !== X || e[166] !== M || e[167] !== V ? (q = /* @__PURE__ */ ve("div", { className: O, children: [
W,
D,
N,
X,
M,
V
] }), e[161] = O, e[162] = W, e[163] = D, e[164] = N, e[165] = X, e[166] = M, e[167] = V, e[168] = q) : q = e[168];
let me;
return e[169] !== j || e[170] !== k || e[171] !== B || e[172] !== C || e[173] !== q ? (me = /* @__PURE__ */ ve("div", { className: j, children: [
k,
B,
C,
q
] }), e[169] = j, e[170] = k, e[171] = B, e[172] = C, e[173] = q, e[174] = me) : me = e[174], me;
});
Ot.displayName = "DSInput";
export {
Ot as DSInput
};