@stihl-design-system/components 1.0.0-RC.10 → 1.0.0-RC.11

package/chunks/InputSearch.B24rcIJ_.js

@@ -0,0 +1,192 @@
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c as l } from "./index.CvOaL64Y.js";
+import { useState as J, useRef as N, useEffect as w } from "react";
+import { g as y, a as K } from "./helpers.B1JT5ShS.js";
+import { u as Q } from "./useBreakpoint.5xBNDiCf.js";
+import { Asterisk as U } from "../asterisk.DDn-yX4P.js";
+import { DSButton as A } from "../button.C5opEJ6x.js";
+import { DSSystemFeedback as X } from "../systemfeedback.ZzRUAVYX.js";
+import '../assets/InputSearch.CxPYaQGZ.css';const Y = "_input_eh22y_226", Z = "_input--invalid_eh22y_343", z = "_input--small_eh22y_350", tt = "_input--has-leading-icon_eh22y_404", nt = "_input--has-action-button_eh22y_407", et = "_input--has-second-action-button_eh22y_410", at = "_input--has-affix_eh22y_422", st = "_input--is-ready_eh22y_436", ot = "_root_eh22y_443", it = "_hint_eh22y_451", ct = "_label_eh22y_451", lt = "_wrapper_eh22y_455", ut = "_action-button_eh22y_461", rt = "_second-action-button_eh22y_465", pt = "_label--hidden_eh22y_484", ht = "_label--disabled_eh22y_497", _t = "_feedback_eh22y_518", t = {
+  input: Y,
+  "input--invalid": "_input--invalid_eh22y_343",
+  inputInvalid: Z,
+  "input--small": "_input--small_eh22y_350",
+  inputSmall: z,
+  "input--has-leading-icon": "_input--has-leading-icon_eh22y_404",
+  inputHasLeadingIcon: tt,
+  "input--has-action-button": "_input--has-action-button_eh22y_407",
+  inputHasActionButton: nt,
+  "input--has-second-action-button": "_input--has-second-action-button_eh22y_410",
+  inputHasSecondActionButton: et,
+  "input--has-affix": "_input--has-affix_eh22y_422",
+  inputHasAffix: at,
+  "input--is-ready": "_input--is-ready_eh22y_436",
+  inputIsReady: st,
+  root: ot,
+  hint: it,
+  label: ct,
+  wrapper: lt,
+  "action-button": "_action-button_eh22y_461",
+  actionButton: ut,
+  "second-action-button": "_second-action-button_eh22y_465",
+  secondActionButton: rt,
+  "label--hidden": "_label--hidden_eh22y_484",
+  labelHidden: pt,
+  "label--disabled": "_label--disabled_eh22y_497",
+  labelDisabled: ht,
+  feedback: _t
+}, dt = ({ id: n, label: u }) => {
+  if (!n)
+    throw new Error(
+      y(
+        "DSInputSearch",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputSearch component.'
+      )
+    );
+  if (!u)
+    throw new Error(
+      y(
+        "DSInputSearch",
+        `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}.`
+      )
+    );
+}, bt = (n) => !!K(n, "form"), Dt = ({
+  id: n,
+  label: u,
+  className: H,
+  clearButtonLabel: E = "Clear search field",
+  disabled: s = !1,
+  hint: d,
+  hideLabel: j = !1,
+  invalid: r = !1,
+  readonly: o = !1,
+  required: S = !1,
+  size: i = "medium",
+  submitButtonLabel: C = "Search",
+  systemFeedback: b,
+  value: m,
+  submitButtonOnClick: k,
+  onChange: I,
+  ...L
+}) => {
+  process.env.NODE_ENV !== "production" && dt({
+    id: n,
+    label: u
+  });
+  const [p, g] = J(m), f = N(null), h = N(null), V = Q(j);
+  w(() => {
+    g(m);
+  }, [m]), w(() => {
+    f.current && !bt(f.current) && process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && console.warn(
+      y(
+        "DSInputSearch",
+        `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.`
+      )
+    );
+  }, []);
+  const v = `${n}-label`, B = `${n}-feedback`, D = `${n}-hint`, O = d ? ` ${D}` : "", x = p !== "" && p !== void 0 && p !== null, P = l(t.root, H), $ = l(t.input, {
+    // small input
+    [t.inputSmall]: i === "small",
+    // invalid state
+    [t.inputInvalid]: r,
+    // action button - input password always has an action button
+    [t.inputHasActionButton]: !0,
+    // action second action button
+    [t.inputHasSecondActionButton]: x && !o && !s
+  }), R = l(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: V,
+    [t.labelDisabled]: s
+  }), q = l(t.actionButton, {
+    [t.actionButtonSmall]: i === "small"
+  }), T = l(t.secondActionButton, {
+    [t.secondActionButtonSmall]: i === "small"
+  }), F = (a, c) => {
+    const G = Object.getPrototypeOf(a), _ = Object.getOwnPropertyDescriptor(
+      G,
+      "value"
+    );
+    _ != null && _.set ? _.set.call(a, c) : a.value = c;
+  }, M = () => {
+    var c;
+    if (!h.current) return;
+    F(h.current, "");
+    const a = new Event("change", { bubbles: !0 });
+    (c = h.current) == null || c.dispatchEvent(a);
+  }, W = (a) => {
+    g(a.target.value), I && I(a);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: P, ref: f, children: [
+    /* @__PURE__ */ e.jsxs("label", { className: R, id: v, htmlFor: n, children: [
+      u,
+      S && /* @__PURE__ */ e.jsx(U, {})
+    ] }),
+    d && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: D, children: d }),
+    r && b && /* @__PURE__ */ e.jsx(
+      X,
+      {
+        className: t.feedback,
+        message: b,
+        type: "invalid",
+        id: B
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: t.wrapper, children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          className: $,
+          id: n,
+          ref: h,
+          ...L,
+          "aria-labelledby": `${v}${O}`,
+          "aria-describedby": r && b ? B : void 0,
+          "aria-invalid": r,
+          "aria-disabled": o,
+          readOnly: o,
+          required: S,
+          disabled: s,
+          type: "search",
+          value: p,
+          onChange: W
+        }
+      ),
+      x && !o && !s && /* @__PURE__ */ e.jsx(
+        A,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "cross",
+          className: T,
+          variant: "ghost",
+          size: i,
+          onClick: M,
+          type: "button",
+          tabIndex: -1,
+          children: E
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        A,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "magnifying-glass",
+          className: q,
+          variant: "ghost",
+          size: i,
+          onClick: k,
+          type: "submit",
+          disabled: s || o,
+          children: C
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Dt as D,
+  bt as i,
+  dt as v
+};

package/chunks/InputStepper.CEW-bieQ.js

@@ -0,0 +1,294 @@
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c } from "./index.CvOaL64Y.js";
+import { useState as f, useRef as B, useEffect as N } from "react";
+import { u as bn } from "./useBreakpoint.5xBNDiCf.js";
+import { M as E, a as H, u as M } from "./Input.utils.ChV6RJsh.js";
+import { Asterisk as xn } from "../asterisk.DDn-yX4P.js";
+import { DSButton as X } from "../button.C5opEJ6x.js";
+import { DSSystemFeedback as mn } from "../systemfeedback.ZzRUAVYX.js";
+import { g as S } from "./helpers.B1JT5ShS.js";
+import '../assets/InputStepper.CYYJUu0b.css';const hn = "_input_bwxln_226", wn = "_input--invalid_bwxln_343", Sn = "_input--small_bwxln_350", yn = "_input--has-leading-icon_bwxln_404", In = "_input--has-action-button_bwxln_407", vn = "_input--has-second-action-button_bwxln_410", gn = "_input--has-affix_bwxln_422", An = "_input--is-ready_bwxln_436", Dn = "_root_bwxln_446", Bn = "_hint_bwxln_454", Nn = "_label_bwxln_454", En = "_wrapper_bwxln_458", Hn = "_affix_bwxln_464", Ln = "_affix--small_bwxln_486", jn = "_affix--disabled_bwxln_500", Rn = "_prefix_bwxln_508", kn = "_affix--readonly_bwxln_511", Cn = "_suffix_bwxln_521", $n = "_action-button_bwxln_528", Fn = "_label--hidden_bwxln_547", Vn = "_label--disabled_bwxln_560", Pn = "_feedback_bwxln_581", Tn = "_second-action-button_bwxln_595", Wn = "_value-announcer_bwxln_599", t = {
+  input: hn,
+  "input--invalid": "_input--invalid_bwxln_343",
+  inputInvalid: wn,
+  "input--small": "_input--small_bwxln_350",
+  inputSmall: Sn,
+  "input--has-leading-icon": "_input--has-leading-icon_bwxln_404",
+  inputHasLeadingIcon: yn,
+  "input--has-action-button": "_input--has-action-button_bwxln_407",
+  inputHasActionButton: In,
+  "input--has-second-action-button": "_input--has-second-action-button_bwxln_410",
+  inputHasSecondActionButton: vn,
+  "input--has-affix": "_input--has-affix_bwxln_422",
+  inputHasAffix: gn,
+  "input--is-ready": "_input--is-ready_bwxln_436",
+  inputIsReady: An,
+  root: Dn,
+  hint: Bn,
+  label: Nn,
+  wrapper: En,
+  affix: Hn,
+  "affix--small": "_affix--small_bwxln_486",
+  affixSmall: Ln,
+  "affix--disabled": "_affix--disabled_bwxln_500",
+  affixDisabled: jn,
+  prefix: Rn,
+  "affix--readonly": "_affix--readonly_bwxln_511",
+  affixReadonly: kn,
+  suffix: Cn,
+  "action-button": "_action-button_bwxln_528",
+  actionButton: $n,
+  "label--hidden": "_label--hidden_bwxln_547",
+  labelHidden: Fn,
+  "label--disabled": "_label--disabled_bwxln_560",
+  labelDisabled: Vn,
+  feedback: Pn,
+  "second-action-button": "_second-action-button_bwxln_595",
+  secondActionButton: Tn,
+  "value-announcer": "_value-announcer_bwxln_599",
+  valueAnnouncer: Wn
+}, Mn = ({
+  id: a,
+  label: b,
+  prefix: x,
+  suffix: m
+}) => {
+  if (!a)
+    throw new Error(
+      S(
+        "DSInputStepper",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputStepper component.'
+      )
+    );
+  if (!b)
+    throw new Error(
+      S(
+        "DSInputStepper",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputStepper component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+  x && x.length > E && console.warn(
+    S(
+      "DSInputStepper",
+      `Prefix length must not exceed ${E} characters.`
+    )
+  ), m && m.length > H && console.warn(
+    S(
+      "DSInputStepper",
+      `Suffix length must not exceed ${H} characters.`
+    )
+  );
+}, Zn = ({
+  id: a,
+  label: b,
+  announcementText: x = "Value changed to",
+  className: m,
+  disabled: u = !1,
+  decreaseAmountButtonLabel: q = "Decrease",
+  hint: y,
+  hideLabel: G = !1,
+  invalid: h = !1,
+  increaseAmountButtonLabel: O = "Increase",
+  prefix: r,
+  max: L = 100,
+  min: j = 0,
+  readonly: p = !1,
+  required: R = !1,
+  size: l = "medium",
+  step: U = 1,
+  suffix: d,
+  systemFeedback: I,
+  value: w,
+  onChange: k,
+  ...J
+}) => {
+  process.env.NODE_ENV !== "production" && Mn({
+    id: a,
+    label: b,
+    prefix: r,
+    suffix: d
+  });
+  const [K, Q] = f(!1), [_, v] = f(w), [g, C] = f(""), [Y, Z] = f(!1), [z, nn] = f({}), s = B(null), tn = r == null ? void 0 : r.substring(0, E), A = B(null), en = d == null ? void 0 : d.substring(0, H), D = B(null), an = bn(G);
+  N(() => {
+    w && v(w);
+  }, [w]), N(() => {
+    if (g) {
+      const n = setTimeout(() => {
+        C("");
+      }, 3e3);
+      return () => clearTimeout(n);
+    }
+  }, [g]), N(() => {
+    var i;
+    const n = (o) => {
+      o.preventDefault();
+    };
+    return (i = s.current) == null || i.addEventListener("wheel", n, {
+      // The { passive: false } option is used to indicate that the event listener wants to cancel the event, allowing preventDefault to work as expected.
+      passive: !1
+    }), () => {
+      var o;
+      (o = s.current) == null || o.removeEventListener("wheel", n);
+    };
+  }, []), M(() => {
+    const n = l === "medium" ? 16 : 8, i = {};
+    if (A.current) {
+      const o = A.current.offsetWidth;
+      i.paddingInlineStart = n + o + "px";
+    }
+    if (D.current) {
+      const o = D.current.offsetWidth;
+      i.paddingInlineEnd = n + o + "px";
+    }
+    nn(i), Q(!0);
+  }, [r, d, l, Y]), M(() => {
+    (async () => {
+      "fonts" in document && (await document.fonts.load(
+        '1em "STIHL Contraface Digital Text Regular"'
+      ), Z(!0));
+    })();
+  }, []);
+  const $ = c(t.affix, {
+    [t.affixSmall]: l === "small",
+    [t.affixDisabled]: u,
+    [t.affixReadonly]: p
+  }), F = `${a}-label`, V = `${a}-feedback`, P = `${a}-hint`, T = `${a}-value-announcer`, sn = y ? ` ${P}` : "", ln = c(t.root, m), on = c(t.input, {
+    // small input
+    [t.inputSmall]: l === "small",
+    // invalid state
+    [t.inputInvalid]: h,
+    // prefix/suffix
+    [t.inputHasAffix]: r || d,
+    [t.inputIsReady]: K
+  }), cn = c(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: an,
+    [t.labelDisabled]: u
+  }), un = c(t.secondActionButton, {
+    [t.secondActionButtonSmall]: l === "small"
+  }), rn = c(t.actionButton, {
+    [t.actionButtonSmall]: l === "small"
+  }), dn = () => {
+    const n = [T];
+    return h && I && n.push(V), n.join(" ");
+  }, W = () => {
+    var n;
+    if (s.current) {
+      v(s.current.value);
+      const i = new Event("change", { bubbles: !0 });
+      (n = s.current) == null || n.dispatchEvent(i), C(`${x} ${s.current.value}`);
+    }
+  }, pn = () => {
+    var n;
+    (n = s.current) == null || n.stepDown(), W();
+  }, _n = () => {
+    var n;
+    (n = s.current) == null || n.stepUp(), W();
+  }, fn = (n) => {
+    v(n.target.value), k && k(n);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: ln, children: [
+    /* @__PURE__ */ e.jsxs("label", { className: cn, id: F, htmlFor: a, children: [
+      b,
+      R && /* @__PURE__ */ e.jsx(xn, {})
+    ] }),
+    y && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: P, children: y }),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: t.valueAnnouncer,
+        id: T,
+        children: g
+      }
+    ),
+    h && I && /* @__PURE__ */ e.jsx(
+      mn,
+      {
+        className: t.feedback,
+        message: I,
+        type: "invalid",
+        id: V
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: t.wrapper, children: [
+      r && /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: c($, t.prefix),
+          ref: A,
+          "aria-disabled": u,
+          children: tn
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          className: on,
+          id: a,
+          ref: s,
+          ...J,
+          style: z,
+          "aria-labelledby": `${F}${sn}`,
+          "aria-describedby": dn(),
+          "aria-invalid": h,
+          "aria-disabled": p,
+          disabled: u,
+          min: j,
+          max: L,
+          readOnly: p,
+          required: R,
+          step: U,
+          type: "number",
+          value: _,
+          onChange: fn
+        }
+      ),
+      d && /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: c($, t.suffix),
+          ref: D,
+          "aria-disabled": u,
+          children: en
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "minus",
+          variant: "filled",
+          className: un,
+          size: l,
+          onClick: pn,
+          disabled: u || p || !!_ && Number(_) <= j,
+          type: "button",
+          children: q
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "plus",
+          variant: "filled",
+          className: rn,
+          size: l,
+          onClick: _n,
+          disabled: u || p || !!_ && Number(_) >= L,
+          type: "button",
+          children: O
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Zn as D,
+  Mn as v
+};

package/chunks/Notification.BXVN7_Fs.js

@@ -0,0 +1,93 @@
+"use client";
+import { j as n } from "./jsx-runtime.C115EyI4.js";
+import { c } from "./index.CvOaL64Y.js";
+import { DSButton as x } from "../button.C5opEJ6x.js";
+import { D as w } from "./Icon.C2o2seDb.js";
+import '../assets/Notification.mhVFeSGm.css';const k = "_root_1xkow_76", g = "_root--success_1xkow_102", N = "_root--error_1xkow_106", f = "_root--warning_1xkow_110", h = "_root--hide-icon_1xkow_114", I = "_content_1xkow_128", A = "_content--hide-close-button_1xkow_135", C = "_content--hide-icon_1xkow_138", H = "_icon_1xkow_142", j = "_message_1xkow_146", S = "_custom-action-area_1xkow_246", o = {
+  root: k,
+  "root--success": "_root--success_1xkow_102",
+  rootSuccess: g,
+  "root--error": "_root--error_1xkow_106",
+  rootError: N,
+  "root--warning": "_root--warning_1xkow_110",
+  rootWarning: f,
+  "root--hide-icon": "_root--hide-icon_1xkow_114",
+  rootHideIcon: h,
+  content: I,
+  "content--hide-close-button": "_content--hide-close-button_1xkow_135",
+  contentHideCloseButton: A,
+  "content--hide-icon": "_content--hide-icon_1xkow_138",
+  contentHideIcon: C,
+  icon: H,
+  message: j,
+  "custom-action-area": "_custom-action-area_1xkow_246",
+  customActionArea: S
+}, R = [
+  "success",
+  "error",
+  "warning",
+  "info"
+], p = {
+  success: "circle-check-colored",
+  error: "diamond-exclamationmark-colored",
+  warning: "triangle-exclamationmark-colored",
+  info: "circle-info-colored"
+}, O = {
+  error: "alert",
+  warning: "alert",
+  info: "status",
+  success: "status"
+}, B = ({
+  children: i,
+  variant: t = "info",
+  className: a,
+  closeButtonLabel: _ = "Close notification",
+  customActionArea: e,
+  hideCloseButton: r = !1,
+  hideIcon: s = !1,
+  onClose: l,
+  ...m
+}) => {
+  const d = c(o.root, a, {
+    [o.rootSuccess]: t === "success",
+    [o.rootError]: t === "error",
+    [o.rootWarning]: t === "warning",
+    [o.rootInfo]: t === "info",
+    [o.rootHideIcon]: s
+  }), u = c(o.content, {
+    [o.contentHideCloseButton]: r,
+    [o.contentHideIcon]: s
+  });
+  return /* @__PURE__ */ n.jsxs("div", { className: d, ...m, role: O[t], children: [
+    /* @__PURE__ */ n.jsxs("div", { className: u, children: [
+      !s && /* @__PURE__ */ n.jsx(
+        w,
+        {
+          name: p[t],
+          className: o.icon,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ n.jsx("div", { className: o.message, children: i }),
+      !r && /* @__PURE__ */ n.jsx(
+        x,
+        {
+          hideLabel: !0,
+          iconName: "cross",
+          isFlush: !0,
+          variant: "ghost",
+          size: "small",
+          onClick: l,
+          type: "button",
+          children: _
+        }
+      )
+    ] }),
+    e && /* @__PURE__ */ n.jsx("div", { className: c({ [o.customActionArea]: !s }), children: e })
+  ] });
+};
+export {
+  B as D,
+  R as N,
+  p as a
+};