@stihl-design-system/components/chunks/Chip.31UfPwQF.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as F, jsx as q } from "react/jsx-runtime";
import { d as B } from "./index.CgTHIF3K.js";
import { c as W } from "./index.CEyLAtio.js";
import { forwardRef as Z } from "react";
import { t as J } from "./translate.nuU7uChI.js";
import { D as H } from "./Icon.DGTYCv63.js";
import { g as x, r as U } from "./helpers.BbWkXTr3.js";
import { g as K } from "./AriaLiveRegions.utils.Cb327d_2.js";
import '../assets/Chip.dxIYIjj7.css';const Q = "ds-chip-group_chip_aidwn_1", V = "ds-chip-group_chip--small_aidwn_30", M = {
  chip: Q,
  chipSmall: V
}, me = ({
  chips: t,
  id: l,
  label: e
}) => {
  if (!Array.isArray(t))
    throw new Error(x("DSChipGroup", U("chips", "DSChipGroup")));
  if (!l)
    throw new Error(x("DSChipGroup", 'A unique "id" prop is required when providing the description or systemFeedback property. Please add a unique "id" prop to the DSChipGroup component.'));
  if (!e)
    throw new Error(x("DSChipGroup", U("label", "DSChipGroup")));
}, ue = () => {
  if (!K())
    throw new Error(x("DSChipGroup", 'The DSAriaLiveRegions component has to be placed at the root of your application, as close to the "body" as possible, e.g. in your "App.tsx" or "layout.tsx".'));
}, fe = ["medium", "small"], X = {
  disabled: "disabled",
  selected: "selected",
  // {0} is the action (e.g., select/unselect)
  selectChip: "press space to {0}",
  unselectAction: "unselect",
  selectAction: "select",
  addToSelection: "add this option to selection",
  removeFromSelection: "remove this option from selection",
  removeChip: "press Backspace to remove the currently focused value",
  titleDisabled: "Disabled",
  titleRemovable: "Remove filter",
  titleDeactivate: "Deactivate property",
  titleActivate: "Activate property"
}, Y = {
  disabled: "deaktiviert",
  selected: "ausgewählt",
  // {0} is the action (e.g., select/unselect)
  selectChip: "drücke Leertaste, um {0}",
  unselectAction: "abzuwählen",
  selectAction: "auszuwählen",
  addToSelection: "diese Option zur Auswahl hinzuzufügen",
  removeFromSelection: "diese Option aus der Auswahl zu entfernen",
  removeChip: "drücke Backspace, um den aktuell fokussierten Wert zu entfernen",
  titleDisabled: "Deaktiviert",
  titleRemovable: "Filter entfernen",
  titleDeactivate: "Eigenschaft deaktivieren",
  titleActivate: "Eigenschaft aktivieren"
}, ee = {
  en: X,
  de: Y
}, te = (t, l, e, i, o, a) => e ? `${l}, ${t("disabled")}` : a ? `${l}, ${t("removeChip")}` : `${l}, ${i ? `${t("selected")}, ` : ""}${t("selectChip", [t(o === "single" ? i ? "unselectAction" : "selectAction" : i ? "removeFromSelection" : "addToSelection")])}`, ie = (t, l, e, i) => t(l ? "titleDisabled" : i ? "titleRemovable" : e ? "titleDeactivate" : "titleActivate"), se = Z((t, l) => {
  const e = B.c(63);
  let i, o, a, s, n, r, c, p, d, h, I, G, m, T;
  e[0] !== t ? ({
    id: a,
    label: r,
    groupId: i,
    isRemovable: s,
    selectionMode: d,
    disabled: I,
    iconName: o,
    isSelected: n,
    lang: G,
    size: h,
    tabIndex: m,
    translations: T,
    onClick: c,
    ...p
  } = t, e[0] = t, e[1] = i, e[2] = o, e[3] = a, e[4] = s, e[5] = n, e[6] = r, e[7] = c, e[8] = p, e[9] = d, e[10] = h, e[11] = I, e[12] = G, e[13] = m, e[14] = T) : (i = e[1], o = e[2], a = e[3], s = e[4], n = e[5], r = e[6], c = e[7], p = e[8], d = e[9], h = e[10], I = e[11], G = e[12], m = e[13], T = e[14]);
  const P = I === void 0 ? !1 : I, O = T || ee[G === void 0 ? "en" : G];
  let u, f, v, S, D, b, g, C, A, _, w;
  if (e[15] !== P || e[16] !== i || e[17] !== a || e[18] !== s || e[19] !== n || e[20] !== r || e[21] !== c || e[22] !== l || e[23] !== p || e[24] !== d || e[25] !== h || e[26] !== O || e[27] !== m) {
    const L = J(O), z = h === "small";
    let $;
    e[39] !== z ? ($ = W(M.chip, {
      [M.chipSmall]: z
    }), e[39] = z, e[40] = $) : $ = e[40];
    const j = $;
    b = "row", g = te(L, r, P, n, d, s), C = n && !s, A = P && !s, _ = `${i}-chip-${a}`, w = j, u = m, f = c, v = l, S = p, D = ie(L, P, n, s), e[15] = P, e[16] = i, e[17] = a, e[18] = s, e[19] = n, e[20] = r, e[21] = c, e[22] = l, e[23] = p, e[24] = d, e[25] = h, e[26] = O, e[27] = m, e[28] = u, e[29] = f, e[30] = v, e[31] = S, e[32] = D, e[33] = b, e[34] = g, e[35] = C, e[36] = A, e[37] = _, e[38] = w;
  } else
    u = e[28], f = e[29], v = e[30], S = e[31], D = e[32], b = e[33], g = e[34], C = e[35], A = e[36], _ = e[37], w = e[38];
  let E;
  e[41] === Symbol.for("react.memo_cache_sentinel") ? (E = {
    display: "contents"
  }, e[41] = E) : E = e[41];
  let y;
  e[42] !== o ? (y = o && /* @__PURE__ */ q(H, { name: o, "aria-hidden": "true" }), e[42] = o, e[43] = y) : y = e[43];
  let R;
  e[44] !== r || e[45] !== y ? (R = /* @__PURE__ */ F("div", { role: "gridcell", "aria-colindex": 1, style: E, children: [
    y,
    r
  ] }), e[44] = r, e[45] = y, e[46] = R) : R = e[46];
  let k;
  e[47] !== s ? (k = s && /* @__PURE__ */ q(H, { name: "cross" }), e[47] = s, e[48] = k) : k = e[48];
  let N;
  return e[49] !== u || e[50] !== f || e[51] !== v || e[52] !== S || e[53] !== D || e[54] !== R || e[55] !== k || e[56] !== b || e[57] !== g || e[58] !== C || e[59] !== A || e[60] !== _ || e[61] !== w ? (N = /* @__PURE__ */ F("div", { role: b, "aria-label": g, "aria-selected": C, "aria-disabled": A, id: _, className: w, tabIndex: u, onClick: f, ref: v, ...S, title: D, children: [
    R,
    k
  ] }), e[49] = u, e[50] = f, e[51] = v, e[52] = S, e[53] = D, e[54] = R, e[55] = k, e[56] = b, e[57] = g, e[58] = C, e[59] = A, e[60] = _, e[61] = w, e[62] = N) : N = e[62], N;
});
se.displayName = "DSChip";
export {
  fe as C,
  X as D,
  ue as a,
  Y as b,
  ee as c,
  ie as d,
  se as e,
  te as g,
  me as v
};