@tedi-design-system/react 14.0.0-rc.1

package/src/community/components/form/choice-group/choice-group-context.es.js

@@ -0,0 +1,10 @@
+import e from "react";
+const o = e.createContext({
+  name: "",
+  inputType: "radio",
+  onChange: () => null,
+  currentValue: []
+});
+export {
+  o as ChoiceGroupContext
+};

package/src/community/components/form/choice-group/choice-group.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),u=require("react"),G=require("../../../../../external/classnames/index.cjs.js"),Q=require("../../../../tedi/components/form/feedback-text/feedback-text.cjs.js"),U=require("../../../../tedi/components/form/form-label/form-label.cjs.js"),V=require("../check/check.cjs.js"),q=require("./choice-group.module.scss.cjs.js"),Z=require("./choice-group-context.cjs.js"),ee=require("./components/choice-group-check/choice-group-check.cjs.js"),te=require("./components/choice-group-radio/choice-group-radio.cjs.js"),ne=require("./components/filter-item/filter-item.cjs.js"),R=require("./components/light-item/light-item.cjs.js"),re=require("./components/selector-item/selector-item.cjs.js"),oe=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),ie=require("../../../../tedi/components/layout/grid/row.cjs.js"),w=L=>{const{getLabel:g}=oe.useLabels(),{id:p,className:E,label:T,required:H,helper:a,items:r,type:I="default",direction:S=I==="default"?"column":"row",rowProps:x,name:_,inputType:h="radio",value:M,defaultValue:v,onChange:i,hideLabel:B,indeterminateCheck:l,indeterminateCheckProps:k={},...$}=L,{indented:le,...O}=k,W=(k==null?void 0:k.indented)??!0,N=a?(a==null?void 0:a.id)??`${p}-helper`:void 0,A=l&&I==="default"&&h==="checkbox",[X,F]=u.useState(()=>v||(h==="checkbox"?[]:null)),y=(e=L.value)=>!!i&&typeof e<"u",n=y(M)?M:X,C=u.useMemo(()=>(n==null?void 0:n.length)===0,[n==null?void 0:n.length]),s=u.useMemo(()=>{var e;return(n==null?void 0:n.length)===((e=r==null?void 0:r.filter(c=>!c.disabled))==null?void 0:e.length)},[n==null?void 0:n.length,r]),Y=u.useMemo(()=>!C&&!s,[s,C]),z=u.useMemo(()=>{const e=s?"all":C?"none":"some";return typeof l=="string"?l:typeof l=="function"?l(e):l?g(e==="all"?"table.filter.remove-all":"table.filter.select-all"):""},[g,l,s,C]),D={name:_,inputType:h,onChange:(e,c)=>{let t=n;h==="checkbox"&&t?Array.isArray(t)?t=c?[...t,e]:t.filter(d=>d!==e):t=c?[t,e]:[t].filter(d=>d!==e):t=e,y()||F(Array.isArray(t)?[...t]:t),i==null||i(t)},currentValue:n};let f,m,b=R.LightItem;switch(I){case"default":f=2,m=1,b=h==="checkbox"?ee.ChoiceGroupCheck:te.ChoiceGroupRadio;break;case"selector":f=0,m=0,b=re.SelectorItem;break;case"filter":f=2,m=2,b=ne.FilterItem;break;case"light":f=1,m=1,b=R.LightItem;break}const J=G.default(q.default["choice-group"],E),K=G.default(q.default["choice-group__inner"],x==null?void 0:x.className,{[q.default["choice-group__inner--indented"]]:A&&W}),P=(e,c)=>{var d;const t=s?[]:(d=r==null?void 0:r.filter(j=>!j.disabled))==null?void 0:d.map(j=>j.value);y()||F([...t]),i==null||i(t)};return o.jsx(Z.ChoiceGroupContext.Provider,{value:D,children:o.jsxs("fieldset",{"data-name":"choice-group",...$,className:J,id:p,name:_,"aria-describedby":N,children:[o.jsx("legend",{children:o.jsx(U.FormLabel,{id:p,label:T,required:H,hideLabel:B,renderWithoutLabel:!0})}),r!=null&&r.length?o.jsxs(o.Fragment,{children:[A&&o.jsx(V.Check,{id:`${p}-indeterminate`,value:"indeterminate",name:"indeterminate",...O,label:z,indeterminate:Y,checked:s,onChange:P}),o.jsx(ie.Row,{direction:S,gutterX:f,gutterY:m,...x,className:K,children:r.map((e,c)=>u.createElement(b,{...e,className:G.default(e.className,{[q.default["choice-group__item--extra-padding"]]:e.extraContent&&c!==r.length-1}),direction:S,key:e.id}))})]}):o.jsx("p",{children:g("table.filter.no-options")}),a&&o.jsx(Q.FeedbackText,{...a,id:N})]})})};exports.ChoiceGroup=w;exports.default=w;

package/src/community/components/form/choice-group/choice-group.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { FeedbackTextProps } from '../../../../tedi/components/form/feedback-text/feedback-text';
+import { FormLabelProps } from '../../../../tedi/components/form/form-label/form-label';
+import { Direction, RowProps } from '../../../../tedi/components/layout/grid';
+import { CheckProps } from '../check/check';
+import { ChoiceGroupItemProps } from './choice-group.types';
+export type TChoiceGroupValue = string | string[] | null;
+export type TChoiceGroupType = 'radio' | 'checkbox';
+export type TChoiceGroupIndeterminateState = 'none' | 'some' | 'all';
+export interface ChoiceGroupProps extends FormLabelProps {
+    /**
+     * ID of choice-group.
+     */
+    id: string;
+    /**
+     * Item props array
+     */
+    items: ChoiceGroupItemProps[];
+    /**
+     *  Direction for Row containing Items
+     *  @default column for type default / row for anything else
+     *  @deprecated use rowProps
+     */
+    direction?: Direction;
+    /**
+     * Row props
+     */
+    rowProps?: RowProps;
+    /**
+     * Name property on inputs
+     */
+    name: string;
+    /**
+     * Input type
+     * @default radio
+     */
+    inputType?: TChoiceGroupType;
+    /**
+     * Form helper props
+     */
+    helper?: FeedbackTextProps;
+    /**
+     * Custom class
+     */
+    className?: string;
+    /**
+     * Default value of ChoiceGroup. Won't work with value and onChange.
+     */
+    defaultValue?: TChoiceGroupValue;
+    /**
+     * The value of ChoiceGroup. Use to control value outside of component. Should use with onChange prop.
+     */
+    value?: TChoiceGroupValue;
+    /**
+     * onChange handler
+     */
+    onChange?: (value: TChoiceGroupValue) => void;
+    /**
+     * Type of ChoiceGroup
+     * @default default
+     */
+    type?: 'light' | 'selector' | 'filter' | 'default';
+    /**
+     * Value can be one of two options:<br />
+     * `true` - Uses default internal label.<br />
+     * `string` - Label for the indeterminate checkbox.<br />
+     * `function` - Function that can be used for conditional label.<br />
+     * If omitted then the indeterminate checkbox isn't rendered.
+     * Only works with `inputType="checkbox"` and `type="default"`
+     */
+    indeterminateCheck?: boolean | string | ((state: TChoiceGroupIndeterminateState) => string);
+    /**
+     * Overridable Indeterminate Check props.
+     * Applies only when `indeterminateCheckLabel` is used
+     * @default { indented: true }
+     */
+    indeterminateCheckProps?: {
+        indented?: boolean;
+    } & Partial<Omit<CheckProps, 'indeterminate' | 'checked' | 'onChange' | 'defaultChecked' | 'label'>>;
+}
+export declare const ChoiceGroup: (props: ChoiceGroupProps) => React.ReactElement;
+export default ChoiceGroup;

package/src/community/components/form/choice-group/choice-group.es.js

@@ -0,0 +1,121 @@
+import { jsx as a, jsxs as H, Fragment as U } from "react/jsx-runtime";
+import p, { createElement as V } from "react";
+import L from "../../../../../external/classnames/index.es.js";
+import { FeedbackText as Z } from "../../../../tedi/components/form/feedback-text/feedback-text.es.js";
+import { FormLabel as P } from "../../../../tedi/components/form/form-label/form-label.es.js";
+import { Check as ee } from "../check/check.es.js";
+import y from "./choice-group.module.scss.es.js";
+import { ChoiceGroupContext as te } from "./choice-group-context.es.js";
+import { ChoiceGroupCheck as oe } from "./components/choice-group-check/choice-group-check.es.js";
+import { ChoiceGroupRadio as re } from "./components/choice-group-radio/choice-group-radio.es.js";
+import { FilterItem as ne } from "./components/filter-item/filter-item.es.js";
+import { LightItem as R } from "./components/light-item/light-item.es.js";
+import { SelectorItem as ie } from "./components/selector-item/selector-item.es.js";
+import { useLabels as le } from "../../../../tedi/providers/label-provider/use-labels.es.js";
+import { Row as ae } from "../../../../tedi/components/layout/grid/row.es.js";
+const Le = (S) => {
+  const { getLabel: b } = le(), {
+    id: g,
+    className: j,
+    label: B,
+    required: T,
+    helper: c,
+    items: r,
+    type: I = "default",
+    direction: G = I === "default" ? "column" : "row",
+    rowProps: k,
+    name: M,
+    inputType: m = "radio",
+    value: v,
+    defaultValue: A,
+    onChange: n,
+    hideLabel: $,
+    indeterminateCheck: i,
+    indeterminateCheckProps: x = {},
+    ...q
+  } = S, { indented: ce, ...W } = x, X = (x == null ? void 0 : x.indented) ?? !0, F = c ? (c == null ? void 0 : c.id) ?? `${g}-helper` : void 0, E = i && I === "default" && m === "checkbox", [Y, w] = p.useState(() => A || (m === "checkbox" ? [] : null)), N = (e = S.value) => !!n && typeof e < "u", o = N(v) ? v : Y, C = p.useMemo(() => (o == null ? void 0 : o.length) === 0, [o == null ? void 0 : o.length]), s = p.useMemo(
+    () => {
+      var e;
+      return (o == null ? void 0 : o.length) === ((e = r == null ? void 0 : r.filter((l) => !l.disabled)) == null ? void 0 : e.length);
+    },
+    [o == null ? void 0 : o.length, r]
+  ), z = p.useMemo(() => !C && !s, [s, C]), D = p.useMemo(() => {
+    const e = s ? "all" : C ? "none" : "some";
+    return typeof i == "string" ? i : typeof i == "function" ? i(e) : i ? b(e === "all" ? "table.filter.remove-all" : "table.filter.select-all") : "";
+  }, [b, i, s, C]), J = {
+    name: M,
+    inputType: m,
+    onChange: (e, l) => {
+      let t = o;
+      m === "checkbox" && t ? Array.isArray(t) ? t = l ? [...t, e] : t.filter((d) => d !== e) : t = l ? [t, e] : [t].filter((d) => d !== e) : t = e, N() || w(Array.isArray(t) ? [...t] : t), n == null || n(t);
+    },
+    currentValue: o
+  };
+  let f, h, u = R;
+  switch (I) {
+    case "default":
+      f = 2, h = 1, u = m === "checkbox" ? oe : re;
+      break;
+    case "selector":
+      f = 0, h = 0, u = ie;
+      break;
+    case "filter":
+      f = 2, h = 2, u = ne;
+      break;
+    case "light":
+      f = 1, h = 1, u = R;
+      break;
+  }
+  const K = L(y["choice-group"], j), O = L(y["choice-group__inner"], k == null ? void 0 : k.className, {
+    [y["choice-group__inner--indented"]]: E && X
+  }), Q = (e, l) => {
+    var d;
+    const t = s ? [] : (d = r == null ? void 0 : r.filter((_) => !_.disabled)) == null ? void 0 : d.map((_) => _.value);
+    N() || w([...t]), n == null || n(t);
+  };
+  return /* @__PURE__ */ a(te.Provider, { value: J, children: /* @__PURE__ */ H(
+    "fieldset",
+    {
+      "data-name": "choice-group",
+      ...q,
+      className: K,
+      id: g,
+      name: M,
+      "aria-describedby": F,
+      children: [
+        /* @__PURE__ */ a("legend", { children: /* @__PURE__ */ a(P, { id: g, label: B, required: T, hideLabel: $, renderWithoutLabel: !0 }) }),
+        r != null && r.length ? /* @__PURE__ */ H(U, { children: [
+          E && /* @__PURE__ */ a(
+            ee,
+            {
+              id: `${g}-indeterminate`,
+              value: "indeterminate",
+              name: "indeterminate",
+              ...W,
+              label: D,
+              indeterminate: z,
+              checked: s,
+              onChange: Q
+            }
+          ),
+          /* @__PURE__ */ a(ae, { direction: G, gutterX: f, gutterY: h, ...k, className: O, children: r.map((e, l) => /* @__PURE__ */ V(
+            u,
+            {
+              ...e,
+              className: L(e.className, {
+                [y["choice-group__item--extra-padding"]]: e.extraContent && l !== r.length - 1
+              }),
+              direction: G,
+              key: e.id
+            }
+          )) })
+        ] }) : /* @__PURE__ */ a("p", { children: b("table.filter.no-options") }),
+        c && /* @__PURE__ */ a(Z, { ...c, id: F })
+      ]
+    }
+  ) });
+};
+export {
+  Le as ChoiceGroup,
+  Le as default
+};

package/src/community/components/form/choice-group/choice-group.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"choice-group":"choice-group-7127bc4c","choice-group__inner--indented":"choice-group__inner--indented-095d03f8","choice-group__item--extra-padding":"choice-group__item--extra-padding-defa3089"};exports.default=e;

package/src/community/components/form/choice-group/choice-group.module.scss.es.js

@@ -0,0 +1,8 @@
+const e = {
+  "choice-group": "choice-group-7127bc4c",
+  "choice-group__inner--indented": "choice-group__inner--indented-095d03f8",
+  "choice-group__item--extra-padding": "choice-group__item--extra-padding-defa3089"
+};
+export {
+  e as default
+};

package/src/community/components/form/choice-group/choice-group.types.d.ts

@@ -0,0 +1,19 @@
+import { ColProps, Direction } from '../../../../tedi/components/layout/grid';
+import { ColorsFunctional } from '../../commonTypes';
+import { ChoiceInputProps } from '../choice-input.types';
+export type ChoiceGroupItemBackground = Extract<ColorsFunctional, 'positive-main' | 'important-main' | 'warning-main'>;
+export interface ChoiceGroupItemProps extends Omit<ChoiceInputProps, 'name'> {
+    /**
+     * Item col element props. Use to set width of item.
+     */
+    colProps?: ColProps;
+    /**
+     * Direction
+     */
+    direction?: Direction;
+    /**
+     * Possibility to change choice group item background when selected. Will be primary if not provided.
+     * Can only be used with FilterItem.
+     */
+    background?: ChoiceGroupItemBackground;
+}

package/src/community/components/form/choice-group/components/choice-group-check/choice-group-check.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),j=require("react"),G=require("../../../check/check.cjs.js"),w=require("../../choice-group-context.cjs.js"),v=require("../../../../../../tedi/components/layout/grid/col.cjs.js"),u=s=>{const{id:l,label:a,value:e,className:d,direction:h="column",disabled:C,colProps:p=h==="column"?{width:12}:{width:"auto",grow:1},onChange:t,hideLabel:x,extraContent:b,tooltip:k}=s,{currentValue:o,inputType:m,name:q,onChange:c}=j.useContext(w.ChoiceGroupContext),f=o?m==="checkbox"?e===o||o.indexOf(e)!==-1:e===o:!1,g=(n,r)=>{c==null||c(n,r),t==null||t(n,r)};return i.jsx(v.Col,{...p,children:i.jsx(G.Check,{id:l,label:a,value:e,name:q,className:d,disabled:C,checked:f,onChange:g,hideLabel:x,extraContent:b,tooltip:k})})};exports.ChoiceGroupCheck=u;exports.default=u;

package/src/community/components/form/choice-group/components/choice-group-check/choice-group-check.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ChoiceGroupItemProps } from '../../choice-group.types';
+export declare const ChoiceGroupCheck: (props: ChoiceGroupItemProps) => React.ReactElement;
+export default ChoiceGroupCheck;

package/src/community/components/form/choice-group/components/choice-group-check/choice-group-check.es.js

@@ -0,0 +1,42 @@
+import { jsx as i } from "react/jsx-runtime";
+import g from "react";
+import { Check as w } from "../../../check/check.es.js";
+import { ChoiceGroupContext as G } from "../../choice-group-context.es.js";
+import { Col as H } from "../../../../../../tedi/components/layout/grid/col.es.js";
+const P = (a) => {
+  const {
+    id: l,
+    label: d,
+    value: o,
+    className: s,
+    direction: m = "column",
+    disabled: h,
+    colProps: p = m === "column" ? { width: 12 } : { width: "auto", grow: 1 },
+    onChange: t,
+    hideLabel: u,
+    extraContent: C,
+    tooltip: f
+  } = a, { currentValue: e, inputType: x, name: b, onChange: n } = g.useContext(G), k = e ? x === "checkbox" ? o === e || e.indexOf(o) !== -1 : o === e : !1;
+  return /* @__PURE__ */ i(H, { ...p, children: /* @__PURE__ */ i(
+    w,
+    {
+      id: l,
+      label: d,
+      value: o,
+      name: b,
+      className: s,
+      disabled: h,
+      checked: k,
+      onChange: (r, c) => {
+        n == null || n(r, c), t == null || t(r, c);
+      },
+      hideLabel: u,
+      extraContent: C,
+      tooltip: f
+    }
+  ) });
+};
+export {
+  P as ChoiceGroupCheck,
+  P as default
+};

package/src/community/components/form/choice-group/components/choice-group-radio/choice-group-radio.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),j=require("react"),G=require("../../../radio/radio.cjs.js"),w=require("../../choice-group-context.cjs.js"),k=require("../../../../../../tedi/components/layout/grid/col.cjs.js"),u=s=>{const{id:a,label:l,value:e,className:d,direction:h="column",disabled:C,colProps:p=h==="column"?{width:12}:{width:"auto",grow:1},onChange:t,hideLabel:x,extraContent:b,tooltip:m}=s,{currentValue:o,inputType:q,name:R,onChange:i}=j.useContext(w.ChoiceGroupContext),f=o?q==="checkbox"?e===o||o.indexOf(e)!==-1:e===o:!1,g=(n,r)=>{i==null||i(n,r),t==null||t(n,r)};return c.jsx(k.Col,{...p,children:c.jsx(G.Radio,{id:a,label:l,value:e,name:R,className:d,disabled:C,checked:f,onChange:g,hideLabel:x,extraContent:b,tooltip:m})})};exports.ChoiceGroupRadio=u;exports.default=u;

package/src/community/components/form/choice-group/components/choice-group-radio/choice-group-radio.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ChoiceGroupItemProps } from '../../choice-group.types';
+export declare const ChoiceGroupRadio: (props: ChoiceGroupItemProps) => React.ReactElement;
+export default ChoiceGroupRadio;

package/src/community/components/form/choice-group/components/choice-group-radio/choice-group-radio.es.js

@@ -0,0 +1,42 @@
+import { jsx as a } from "react/jsx-runtime";
+import w from "react";
+import { Radio as R } from "../../../radio/radio.es.js";
+import { ChoiceGroupContext as k } from "../../choice-group-context.es.js";
+import { Col as G } from "../../../../../../tedi/components/layout/grid/col.es.js";
+const O = (c) => {
+  const {
+    id: l,
+    label: d,
+    value: o,
+    className: s,
+    direction: m = "column",
+    disabled: p,
+    colProps: u = m === "column" ? { width: 12 } : { width: "auto", grow: 1 },
+    onChange: t,
+    hideLabel: h,
+    extraContent: f,
+    tooltip: C
+  } = c, { currentValue: e, inputType: x, name: b, onChange: n } = w.useContext(k), g = e ? x === "checkbox" ? o === e || e.indexOf(o) !== -1 : o === e : !1;
+  return /* @__PURE__ */ a(G, { ...u, children: /* @__PURE__ */ a(
+    R,
+    {
+      id: l,
+      label: d,
+      value: o,
+      name: b,
+      className: s,
+      disabled: p,
+      checked: g,
+      onChange: (r, i) => {
+        n == null || n(r, i), t == null || t(r, i);
+      },
+      hideLabel: h,
+      extraContent: f,
+      tooltip: C
+    }
+  ) });
+};
+export {
+  O as ChoiceGroupRadio,
+  O as default
+};

package/src/community/components/form/choice-group/components/filter-item/filter-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),C=require("../../../../../../../external/classnames/index.cjs.js"),p=require("react"),_=require("../../choice-group-context.cjs.js"),e=require("./filter-item.module.scss.cjs.js"),g=require("../../../../../../tedi/components/layout/grid/col.cjs.js"),d=m=>{const{id:u,label:f,value:t,disabled:a,colProps:l,background:s}=m,{currentValue:i,inputType:o,name:h,onChange:x}=p.useContext(_.ChoiceGroupContext),n=i?o==="checkbox"?t===i||i.indexOf(t)!==-1:t===i:!1,b=C.default(e.default["filter-item"],l==null?void 0:l.className,{[e.default["filter-item--disabled"]]:a},{[e.default["filter-item--checked"]]:n},{[e.default[`filter-item--${s}`]]:!!s});return c.jsxs(g.Col,{...l,className:b,children:[c.jsx("input",{id:u,value:t,name:h,type:o,disabled:a,checked:n,onChange:r=>x(t,r==null?void 0:r.target.checked),className:e.default["filter-item__input"]}),c.jsx("label",{htmlFor:u,className:e.default["filter-item__label"],children:f})]})};exports.FilterItem=d;exports.default=d;

package/src/community/components/form/choice-group/components/filter-item/filter-item.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ChoiceGroupItemProps } from '../../choice-group.types';
+export declare const FilterItem: (props: ChoiceGroupItemProps) => React.ReactElement;
+export default FilterItem;

package/src/community/components/form/choice-group/components/filter-item/filter-item.es.js

@@ -0,0 +1,35 @@
+import { jsxs as C, jsx as n } from "react/jsx-runtime";
+import b from "../../../../../../../external/classnames/index.es.js";
+import x from "react";
+import { ChoiceGroupContext as k } from "../../choice-group-context.es.js";
+import e from "./filter-item.module.scss.es.js";
+import { Col as _ } from "../../../../../../tedi/components/layout/grid/col.es.js";
+const E = (f) => {
+  const { id: a, label: d, value: t, disabled: m, colProps: i, background: o } = f, { currentValue: l, inputType: s, name: u, onChange: p } = x.useContext(k), c = l ? s === "checkbox" ? t === l || l.indexOf(t) !== -1 : t === l : !1, h = b(
+    e["filter-item"],
+    i == null ? void 0 : i.className,
+    { [e["filter-item--disabled"]]: m },
+    { [e["filter-item--checked"]]: c },
+    { [e[`filter-item--${o}`]]: !!o }
+  );
+  return /* @__PURE__ */ C(_, { ...i, className: h, children: [
+    /* @__PURE__ */ n(
+      "input",
+      {
+        id: a,
+        value: t,
+        name: u,
+        type: s,
+        disabled: m,
+        checked: c,
+        onChange: (r) => p(t, r == null ? void 0 : r.target.checked),
+        className: e["filter-item__input"]
+      }
+    ),
+    /* @__PURE__ */ n("label", { htmlFor: a, className: e["filter-item__label"], children: d })
+  ] });
+};
+export {
+  E as FilterItem,
+  E as default
+};

package/src/community/components/form/choice-group/components/filter-item/filter-item.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"filter-item__input":"filter-item__input-7c8ed8cf","filter-item__label":"filter-item__label-057b50f5","filter-item--disabled":"filter-item--disabled-ad10dc42","filter-item--checked":"filter-item--checked-9af66168","filter-item--positive-main":"filter-item--positive-main-a40378b9","filter-item--important-main":"filter-item--important-main-f57d26aa","filter-item--warning-main":"filter-item--warning-main-5629af6e"};exports.default=e;

package/src/community/components/form/choice-group/components/filter-item/filter-item.module.scss.es.js

@@ -0,0 +1,12 @@
+const i = {
+  "filter-item__input": "filter-item__input-7c8ed8cf",
+  "filter-item__label": "filter-item__label-057b50f5",
+  "filter-item--disabled": "filter-item--disabled-ad10dc42",
+  "filter-item--checked": "filter-item--checked-9af66168",
+  "filter-item--positive-main": "filter-item--positive-main-a40378b9",
+  "filter-item--important-main": "filter-item--important-main-f57d26aa",
+  "filter-item--warning-main": "filter-item--warning-main-5629af6e"
+};
+export {
+  i as default
+};

package/src/community/components/form/choice-group/components/light-item/light-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),f=require("../../../../../../../external/classnames/index.cjs.js"),C=require("react"),b=require("../../choice-group-context.cjs.js"),i=require("./light-item.module.scss.cjs.js"),p=require("../../../../../../tedi/components/layout/grid/col.cjs.js"),r=d=>{const{id:u,label:h,value:e,disabled:a,colProps:t}=d,{currentValue:l,inputType:o,name:m,onChange:g}=C.useContext(b.ChoiceGroupContext),n=l?o==="checkbox"?e===l||l.indexOf(e)!==-1:e===l:!1,x=f.default(t==null?void 0:t.className,{[i.default["light-item--disabled"]]:a},{[i.default["light-item--checked"]]:n});return s.jsxs(p.Col,{...t,className:x,children:[s.jsx("input",{id:u,value:e,name:m,type:o,disabled:a,checked:n,onChange:c=>g(e,c==null?void 0:c.target.checked),className:i.default["light-item__input"]}),s.jsx("label",{htmlFor:u,className:i.default["light-item__label"],children:h})]})};exports.LightItem=r;exports.default=r;

package/src/community/components/form/choice-group/components/light-item/light-item.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ChoiceGroupItemProps } from '../../choice-group.types';
+export declare const LightItem: (props: ChoiceGroupItemProps) => React.ReactElement;
+export default LightItem;

package/src/community/components/form/choice-group/components/light-item/light-item.es.js

@@ -0,0 +1,33 @@
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import g from "../../../../../../../external/classnames/index.es.js";
+import C from "react";
+import { ChoiceGroupContext as x } from "../../choice-group-context.es.js";
+import a from "./light-item.module.scss.es.js";
+import { Col as b } from "../../../../../../tedi/components/layout/grid/col.es.js";
+const E = (n) => {
+  const { id: o, label: h, value: e, disabled: s, colProps: t } = n, { currentValue: l, inputType: m, name: d, onChange: p } = C.useContext(x), c = l ? m === "checkbox" ? e === l || l.indexOf(e) !== -1 : e === l : !1, u = g(
+    t == null ? void 0 : t.className,
+    { [a["light-item--disabled"]]: s },
+    { [a["light-item--checked"]]: c }
+  );
+  return /* @__PURE__ */ f(b, { ...t, className: u, children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        id: o,
+        value: e,
+        name: d,
+        type: m,
+        disabled: s,
+        checked: c,
+        onChange: (i) => p(e, i == null ? void 0 : i.target.checked),
+        className: a["light-item__input"]
+      }
+    ),
+    /* @__PURE__ */ r("label", { htmlFor: o, className: a["light-item__label"], children: h })
+  ] });
+};
+export {
+  E as LightItem,
+  E as default
+};

package/src/community/components/form/choice-group/components/light-item/light-item.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"light-item__input":"light-item__input-db1bda86","light-item__label":"light-item__label-4502df50","light-item--disabled":"light-item--disabled-ea5955c3","light-item--checked":"light-item--checked-19c9facc"};exports.default=e;

package/src/community/components/form/choice-group/components/light-item/light-item.module.scss.es.js

@@ -0,0 +1,9 @@
+const t = {
+  "light-item__input": "light-item__input-db1bda86",
+  "light-item__label": "light-item__label-4502df50",
+  "light-item--disabled": "light-item--disabled-ea5955c3",
+  "light-item--checked": "light-item--checked-19c9facc"
+};
+export {
+  t as default
+};

package/src/community/components/form/choice-group/components/selector-item/selector-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),C=require("../../../../../../../external/classnames/index.cjs.js"),p=require("react"),q=require("../../choice-group-context.cjs.js"),e=require("./selector-item.module.scss.cjs.js"),j=require("../../../../../../tedi/components/layout/grid/col.cjs.js"),k=d=>{const{id:i,label:m,value:t,disabled:a,colProps:c,direction:h}=d,{currentValue:l,inputType:n,name:f,onChange:o}=p.useContext(q.ChoiceGroupContext),u=l?n==="checkbox"?t===l||l.indexOf(t)!==-1:t===l:!1,x=s=>{o==null||o(t,s==null?void 0:s.target.checked)},b=C.default(e.default["selector-item"],c==null?void 0:c.className,e.default[`selector-item--${h}`],{[e.default["selector-item--disabled"]]:a},{[e.default["selector-item--checked"]]:u});return r.jsxs(j.Col,{...c,className:b,children:[r.jsx("input",{id:i,value:t,name:f,type:n,disabled:a,checked:u,onChange:x,className:e.default["selector-item__input"]}),r.jsx("label",{htmlFor:i,className:e.default["selector-item__label"],children:m})]})};exports.SelectorItem=k;

package/src/community/components/form/choice-group/components/selector-item/selector-item.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ChoiceGroupItemProps } from '../../choice-group.types';
+export declare const SelectorItem: (props: ChoiceGroupItemProps) => React.ReactElement;

package/src/community/components/form/choice-group/components/selector-item/selector-item.es.js

@@ -0,0 +1,36 @@
+import { jsxs as C, jsx as n } from "react/jsx-runtime";
+import b from "../../../../../../../external/classnames/index.es.js";
+import _ from "react";
+import { ChoiceGroupContext as k } from "../../choice-group-context.es.js";
+import e from "./selector-item.module.scss.es.js";
+import { Col as N } from "../../../../../../tedi/components/layout/grid/col.es.js";
+const G = (d) => {
+  const { id: r, label: p, value: t, disabled: m, colProps: o, direction: u } = d, { currentValue: c, inputType: i, name: h, onChange: s } = _.useContext(k), a = c ? i === "checkbox" ? t === c || c.indexOf(t) !== -1 : t === c : !1, f = (l) => {
+    s == null || s(t, l == null ? void 0 : l.target.checked);
+  }, x = b(
+    e["selector-item"],
+    o == null ? void 0 : o.className,
+    e[`selector-item--${u}`],
+    { [e["selector-item--disabled"]]: m },
+    { [e["selector-item--checked"]]: a }
+  );
+  return /* @__PURE__ */ C(N, { ...o, className: x, children: [
+    /* @__PURE__ */ n(
+      "input",
+      {
+        id: r,
+        value: t,
+        name: h,
+        type: i,
+        disabled: m,
+        checked: a,
+        onChange: f,
+        className: e["selector-item__input"]
+      }
+    ),
+    /* @__PURE__ */ n("label", { htmlFor: r, className: e["selector-item__label"], children: p })
+  ] });
+};
+export {
+  G as SelectorItem
+};

package/src/community/components/form/choice-group/components/selector-item/selector-item.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"selector-item":"selector-item-afa6036a","selector-item__input":"selector-item__input-d671bb71","selector-item__label":"selector-item__label-15347301","selector-item--disabled":"selector-item--disabled-133d2c07","selector-item--checked":"selector-item--checked-3caf6414","selector-item--column":"selector-item--column-cb724fe9","selector-item--column-reverse":"selector-item--column-reverse-1d916d7a","selector-item--row":"selector-item--row-733fd28b","selector-item--row-reverse":"selector-item--row-reverse-89fd4a76"};exports.default=e;

package/src/community/components/form/choice-group/components/selector-item/selector-item.module.scss.es.js

@@ -0,0 +1,14 @@
+const e = {
+  "selector-item": "selector-item-afa6036a",
+  "selector-item__input": "selector-item__input-d671bb71",
+  "selector-item__label": "selector-item__label-15347301",
+  "selector-item--disabled": "selector-item--disabled-133d2c07",
+  "selector-item--checked": "selector-item--checked-3caf6414",
+  "selector-item--column": "selector-item--column-cb724fe9",
+  "selector-item--column-reverse": "selector-item--column-reverse-1d916d7a",
+  "selector-item--row": "selector-item--row-733fd28b",
+  "selector-item--row-reverse": "selector-item--row-reverse-89fd4a76"
+};
+export {
+  e as default
+};

package/src/community/components/form/choice-group/index.d.ts

@@ -0,0 +1,4 @@
+export * from './choice-group';
+export * from './choice-group.types';
+export * from './components/choice-group-check/choice-group-check';
+export * from './components/choice-group-radio/choice-group-radio';

package/src/community/components/form/choice-input.types.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+export interface ChoiceInputProps {
+    /**
+     * ID property
+     */
+    id: string;
+    /**
+     * Label text
+     */
+    label: React.ReactNode;
+    /**
+     * Additional classes.
+     */
+    className?: string;
+    /**
+     * Value property
+     */
+    value: string;
+    /**
+     * name of the input
+     */
+    name: string;
+    /**
+     * is the label hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * If the option is disabled
+     */
+    disabled?: boolean;
+    /**
+     * onChange handler
+     */
+    onChange?: (value: string, checked: boolean) => void;
+    /**
+     * Possibility to add extra content after label. ExtraContent is not clickable like label
+     * Can only be used with ChoiceGroupRadio and Checkbox.
+     */
+    extraContent?: React.ReactNode;
+    /**
+     * If the check is controlled from outside the components
+     */
+    checked?: boolean;
+    /**
+     * If the check is checked by default
+     */
+    defaultChecked?: boolean;
+    /**
+     * If the item should be in hover state
+     */
+    hover?: boolean;
+    /**
+     * Provide content for tooltip.
+     */
+    tooltip?: React.ReactNode;
+}

package/src/community/components/form/file-upload/examples/multiple-handled.d.ts

@@ -0,0 +1,3 @@
+import { StoryFn } from '@storybook/react';
+import FileUpload from '../file-upload';
+export declare const MultipleHandledTemplate: StoryFn<typeof FileUpload>;

package/src/community/components/form/file-upload/file-upload.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),A=require("../../../../../external/classnames/index.cjs.js"),g=require("react"),I=require("../../../../tedi/components/form/feedback-text/feedback-text.cjs.js"),O=require("../../../../tedi/components/form/form-label/form-label.cjs.js"),D=require("../../../../tedi/components/tags/tag/tag.cjs.js"),P=require("../../button/button.cjs.js"),c=require("./file-upload.module.scss.cjs.js"),W=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),Y=require("../../card/card.cjs.js"),G=require("../../card/card-content/card-content.cjs.js"),J=require("../../../../tedi/components/layout/grid/row.cjs.js"),E=require("../../../../tedi/components/layout/grid/col.cjs.js"),K=({accept:a,maxSize:i},n)=>{if(!a&&!i)return;const s=[a&&`${n("file-upload.accept")} ${a.replaceAll(",",", ")}`,i&&`${n("file-upload.max-size")} ${i}MB`].filter(Boolean).join(". ");return s.length?{text:s}:void 0},Q=(a,i)=>{const n=a.reduce((s,{type:r,file:f})=>(s[r].push(f.name),s),{extension:[],size:[]});return Object.entries(n).filter(([s,r])=>r.length).map(([s,r])=>{const f=r.map(F=>`'${F}'`).join(", ");return i(`file-upload.${s}-rejected`,f)}).join(". ")},N=a=>{const{getLabel:i}=W.useLabels(),{id:n,name:s,accept:r,multiple:f,onChange:o,className:F,defaultFiles:$,onDelete:y,files:p,readOnly:b,disabled:m=!1,maxSize:h,helper:d=K({accept:r,maxSize:h},i),...k}=a,q=d?(d==null?void 0:d.id)??`${n}-helper`:void 0,[U,_]=g.useState(!1),[L,T]=g.useState($||[]),[C,M]=g.useState(),B=A.default(c.default["file-upload"],{[c.default["file-upload-disabled"]]:m}),H=e=>{var x;if(!r)return!0;const l=(r==null?void 0:r.replace(/,/g,"").split("."))||[],u=(x=e.name.split(".").pop())==null?void 0:x.toLowerCase();return!!u&&l.includes(u)},v=g.useMemo(()=>p&&o?p:L,[p,L,o]),R=e=>{if(e.target.files){const l=[],u=[...Array.from(e.target.files)].filter(j=>H(j)?!0:(l.push({type:"extension",file:j}),!1)).filter(j=>!h||j.size<=h*1048576?!0:(l.push({type:"size",file:j}),!1)),x=[...v,...u];typeof p>"u"&&T(x),o==null||o(x),e.target.value="",l.length?M({type:"error",text:Q(l,i)}):M(void 0)}},S=e=>{const l=[...v].filter(u=>u!==e);y&&y(e),typeof p>"u"&&T(l),o==null||o(l)},z=(e,l)=>t.jsx("li",{children:t.jsx(D.Tag,{color:"secondary",onClose:!e.isLoading&&!m&&!b?()=>S(e):void 0,isLoading:e.isLoading,children:e.name})},l),w=()=>t.jsx("ul",{className:c.default["file-upload__items"],children:v.map((e,l)=>z(e,l))});return t.jsxs("div",{children:[t.jsx("div",{onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1),className:c.default["file-upload__label-wrapper"],children:t.jsx(O.FormLabel,{id:n,...k,renderWithoutLabel:b,className:c.default["file-upload__label"]})}),b?w():t.jsx(Y.Card,{padding:.5,background:m?"bg-disabled":void 0,className:c.default["file-upload__card"],children:t.jsx(G.CardContent,{children:t.jsxs(J.Row,{gutterY:2,children:[t.jsx(E.Col,{children:w()}),t.jsx(E.Col,{xs:12,md:"auto",align:"center",children:t.jsxs("div",{className:B,children:[t.jsx("input",{id:n,type:"file",name:s,accept:r,onChange:R,multiple:f,disabled:m}),t.jsx(P.Button,{visualType:"link",iconLeft:"file_upload","aria-describedby":q,isActive:U,disabled:m,onClick:()=>{var e;return(e=document.getElementById(n))==null?void 0:e.click()},children:i("file-upload.add")})]})})]})})}),(C||d)&&t.jsx(I.FeedbackText,{...C||d,id:q})]})};exports.FileUpload=N;exports.default=N;