@unoff/ui 1.21.0

package/dist/components/inputs/select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,eAAe,CAAA;AAEtB,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,IAAI,EAAE,WAAW,GAAG,cAAc,GAAG,eAAe,CAAA;IACpD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,MAAM,CAAC,EAAE;QACP,sBAAsB;QACtB,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;QAC/B,uBAAuB;QACvB,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;QACtB,2BAA2B;QAC3B,IAAI,CAAC,EAAE,YAAY,GAAG,aAAa,CAAA;KACpC,CAAA;IACD;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,wBAAwB;QACxB,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;QAC9B,uBAAuB;QACvB,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;KACvB,CAAA;IACD;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,sBAAsB;QACtB,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;QAC/B,uBAAuB;QACvB,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;QACtB,2BAA2B;QAC3B,IAAI,CAAC,EAAE,YAAY,GAAG,aAAa,CAAA;KACpC,CAAA;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IAClD;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,CAAA;CACjE;AAED,MAAM,WAAW,YAAY;IAC3B,gBAAgB,EAAE,OAAO,CAAA;IACzB,aAAa,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,YAAY,CAAC;IAC5E,OAAO,CAAC,QAAQ,CAAuD;IAEvE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,WAAW,CAAC,CAMxC;gBAEW,KAAK,EAAE,WAAW;IAS9B,iBAAiB,aAEhB;IAED,oBAAoB,aAEnB;IAGD,YAAY,aAEX;IAGD,MAAM,SAAU,UAAU,GAAG,OAAO,GAAG,QAAQ,yDAiC9C;IAED,QAAQ,gDAkFP;IAED,WAAW,gDAkFV;IAED,YAAY,gDAiFX;IAGD,MAAM;CAOP"}

package/dist/components/inputs/select/Select.js

@@ -0,0 +1,313 @@
+import '../../../assets/Select.css';
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import w from "react";
+import T from "../../../styles/layouts.module.js";
+import N from "../../tags/tooltip/Tooltip.js";
+import S from "../../tags/icon-chip/IconChip.js";
+import x from "../../tags/chip/Chip.js";
+import { t as m } from "../../../do-classnames-DSDFCvzy.js";
+class I extends w.Component {
+  inputRef = w.createRef();
+  static defaultProps = {
+    shouldReflow: !1,
+    isChecked: !1,
+    isDisabled: !1,
+    isBlocked: !1,
+    isNew: !1
+  };
+  constructor(t) {
+    super(t), this.state = {
+      isTooltipVisible: !1,
+      documentWidth: document.documentElement.clientWidth
+    };
+  }
+  // Lifecycle
+  componentDidMount = () => {
+    window.addEventListener("resize", this.handleResize);
+  };
+  componentWillUnmount = () => {
+    window.removeEventListener("resize", this.handleResize);
+  };
+  // Handlers
+  handleResize = () => {
+    this.setState({ documentWidth: document.documentElement.clientWidth });
+  };
+  // Templates
+  Status = (t) => {
+    const { warning: e, preview: b, isBlocked: s, isNew: a, onUnblock: p } = this.props;
+    if (e || s || a)
+      return /* @__PURE__ */ n("div", { className: `${t}__status`, children: [
+        e !== void 0 && /* @__PURE__ */ i(
+          "div",
+          {
+            style: {
+              position: "relative",
+              pointerEvents: "auto"
+            },
+            children: /* @__PURE__ */ i(
+              S,
+              {
+                iconType: "PICTO",
+                iconName: "warning",
+                text: e.label,
+                pin: e.pin,
+                type: e.type
+              }
+            )
+          }
+        ),
+        (s || a) && /* @__PURE__ */ i(
+          x,
+          {
+            preview: b,
+            isSolo: !0,
+            action: s ? p : void 0,
+            children: a ? "New" : "Pro"
+          }
+        )
+      ] });
+  };
+  CheckBox = () => {
+    const {
+      id: t,
+      label: e,
+      name: b,
+      helper: s,
+      feature: a,
+      shouldReflow: p,
+      isChecked: f,
+      isDisabled: c,
+      isBlocked: o,
+      action: h
+    } = this.props, { isTooltipVisible: _, documentWidth: v } = this.state, d = p && v <= 460, r = () => d ? void 0 : e, u = () => d ? e : s?.label, l = () => d ? e !== void 0 : s !== void 0;
+    return /* @__PURE__ */ n("div", { className: T["snackbar--medium"], children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: m([
+            "checkbox",
+            o && "checkbox--blocked"
+          ]),
+          onMouseEnter: () => {
+            l() && this.setState({ isTooltipVisible: !0 });
+          },
+          onMouseLeave: () => {
+            l() && this.setState({ isTooltipVisible: !1 });
+          },
+          onFocus: () => {
+            l() && this.setState({ isTooltipVisible: !0 });
+          },
+          onBlur: () => {
+            l() && this.setState({ isTooltipVisible: !1 });
+          },
+          children: [
+            /* @__PURE__ */ n("div", { className: "checkbox__slot", children: [
+              /* @__PURE__ */ i(
+                "input",
+                {
+                  "data-feature": a,
+                  id: t,
+                  className: "checkbox__box",
+                  type: "checkbox",
+                  name: b,
+                  checked: f,
+                  disabled: c || o,
+                  onChange: h,
+                  tabIndex: 0,
+                  ref: this.inputRef,
+                  "aria-label": e
+                }
+              ),
+              /* @__PURE__ */ i("div", { className: "checkbox__box__background" }),
+              /* @__PURE__ */ i("div", { className: "checkbox__box__tick" })
+            ] }),
+            r() !== void 0 && /* @__PURE__ */ i(
+              "label",
+              {
+                className: m([
+                  "checkbox__label",
+                  (c || o) && "checkbox__label--disabled"
+                ]),
+                htmlFor: c || o ? void 0 : t,
+                children: r()
+              }
+            ),
+            _ && l() && /* @__PURE__ */ i(
+              N,
+              {
+                pin: s?.pin || "BOTTOM",
+                type: s?.type || "SINGLE_LINE",
+                children: u()
+              }
+            )
+          ]
+        }
+      ),
+      this.Status("checkbox")
+    ] });
+  };
+  RadioButton = () => {
+    const {
+      id: t,
+      label: e,
+      name: b,
+      value: s,
+      helper: a,
+      feature: p,
+      shouldReflow: f,
+      isChecked: c,
+      isDisabled: o,
+      isBlocked: h,
+      action: _
+    } = this.props, { isTooltipVisible: v, documentWidth: d } = this.state, r = f && d <= 460, u = () => r ? void 0 : e, l = () => r ? e : a?.label, k = () => r ? e !== void 0 : a !== void 0;
+    return /* @__PURE__ */ n("div", { className: T["snackbar--medium"], children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: m(["radio", h && "radio--blocked"]),
+          onMouseEnter: () => {
+            k() && this.setState({ isTooltipVisible: !0 });
+          },
+          onMouseLeave: () => {
+            k() && this.setState({ isTooltipVisible: !1 });
+          },
+          onFocus: () => {
+            k() && this.setState({ isTooltipVisible: !0 });
+          },
+          onBlur: () => {
+            k() && this.setState({ isTooltipVisible: !1 });
+          },
+          children: [
+            /* @__PURE__ */ n("div", { className: "radio__slot", children: [
+              /* @__PURE__ */ i(
+                "input",
+                {
+                  "data-feature": p,
+                  id: t,
+                  className: "radio__button",
+                  type: "radio",
+                  name: b,
+                  value: s,
+                  checked: c,
+                  disabled: o || h,
+                  onChange: _,
+                  tabIndex: 0,
+                  ref: this.inputRef,
+                  "aria-label": e
+                }
+              ),
+              /* @__PURE__ */ i("div", { className: "radio__button__background" }),
+              /* @__PURE__ */ i("div", { className: "radio__button__inner" })
+            ] }),
+            u() !== void 0 && /* @__PURE__ */ i(
+              "label",
+              {
+                className: m([
+                  "radio__label",
+                  (o || h) && "radio__label--disabled"
+                ]),
+                htmlFor: o || h ? void 0 : t,
+                children: u()
+              }
+            ),
+            v && k() && /* @__PURE__ */ i(
+              N,
+              {
+                pin: a?.pin || "BOTTOM",
+                type: a?.type || "SINGLE_LINE",
+                children: l()
+              }
+            )
+          ]
+        }
+      ),
+      this.Status("radio")
+    ] });
+  };
+  SwitchButton = () => {
+    const {
+      id: t,
+      label: e,
+      name: b,
+      helper: s,
+      feature: a,
+      shouldReflow: p,
+      isChecked: f,
+      isDisabled: c,
+      isBlocked: o,
+      action: h
+    } = this.props, { isTooltipVisible: _, documentWidth: v } = this.state, d = p && v <= 460, r = () => d ? void 0 : e, u = () => d ? e : s?.label, l = () => d ? e !== void 0 : s !== void 0;
+    return /* @__PURE__ */ n("div", { className: T["snackbar--medium"], children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: m(["switch", o && "switch--blocked"]),
+          onMouseEnter: () => {
+            l() && this.setState({ isTooltipVisible: !0 });
+          },
+          onMouseLeave: () => {
+            l() && this.setState({ isTooltipVisible: !1 });
+          },
+          onFocus: () => {
+            l() && this.setState({ isTooltipVisible: !0 });
+          },
+          onBlur: () => {
+            l() && this.setState({ isTooltipVisible: !1 });
+          },
+          children: [
+            /* @__PURE__ */ n("div", { className: "switch__slot", children: [
+              /* @__PURE__ */ i(
+                "input",
+                {
+                  "data-feature": a,
+                  id: t,
+                  className: "switch__toggle",
+                  type: "checkbox",
+                  role: "switch",
+                  name: b,
+                  checked: f,
+                  disabled: c || o,
+                  onChange: h,
+                  tabIndex: 0,
+                  ref: this.inputRef,
+                  "aria-label": e
+                }
+              ),
+              /* @__PURE__ */ i("div", { className: "switch__toggle__background" }),
+              /* @__PURE__ */ i("div", { className: "switch__toggle__knob" })
+            ] }),
+            r() !== void 0 && /* @__PURE__ */ i(
+              "label",
+              {
+                className: m([
+                  "switch__label",
+                  (c || o) && "switch__label--disabled"
+                ]),
+                htmlFor: c || o ? void 0 : t,
+                children: r()
+              }
+            ),
+            _ && l() && /* @__PURE__ */ i(
+              N,
+              {
+                pin: s?.pin || "BOTTOM",
+                type: s?.type || "SINGLE_LINE",
+                children: u()
+              }
+            )
+          ]
+        }
+      ),
+      this.Status("switch")
+    ] });
+  };
+  // Render
+  render() {
+    const { type: t } = this.props;
+    return t === "RADIO_BUTTON" ? this.RadioButton() : t === "SWITCH_BUTTON" ? this.SwitchButton() : this.CheckBox();
+  }
+}
+export {
+  I as default
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/inputs/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../src/components/inputs/select/Select.tsx"],"sourcesContent":["import React from 'react'\nimport layouts from '@styles/layouts.module.scss'\nimport Tooltip from '@components/tags/tooltip/Tooltip'\nimport IconChip from '@components/tags/icon-chip/IconChip'\nimport Chip from '@components/tags/chip/Chip'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport './select.scss'\n\nexport interface SelectProps {\n  /**\n   * Unique identifier for the select input\n   */\n  id: string\n  /**\n   * Type of selection control\n   */\n  type: 'CHECK_BOX' | 'RADIO_BUTTON' | 'SWITCH_BUTTON'\n  /**\n   * Label text\n   */\n  label?: string\n  /**\n   * Name attribute for form submission\n   */\n  name?: string\n  /**\n   * Value attribute\n   */\n  value?: string\n  /**\n   * Helper tooltip configuration\n   */\n  helper?: {\n    /** Tooltip content */\n    label: string | React.ReactNode\n    /** Tooltip position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Tooltip display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Preview tooltip configuration with image\n   */\n  preview?: {\n    /** Preview image URL */\n    image: string\n    /** Preview text */\n    text: string | React.ReactNode\n    /** Preview position */\n    pin?: 'TOP' | 'BOTTOM'\n  }\n  /**\n   * Warning tooltip configuration\n   */\n  warning?: {\n    /** Warning message */\n    label: string | React.ReactNode\n    /** Warning position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Warning display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Feature identifier for tracking\n   */\n  feature?: string\n  /**\n   * Whether to reflow on small screens\n   * @default false\n   */\n  shouldReflow?: boolean\n  /**\n   * Whether the control is checked\n   * @default false\n   */\n  isChecked?: boolean\n  /**\n   * Whether the control is disabled\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * Whether the control is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Change event handler\n   */\n  action: React.ChangeEventHandler<HTMLInputElement>\n  /**\n   * Handler called when unblock is clicked\n   */\n  onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\nexport interface SelectStates {\n  isTooltipVisible: boolean\n  documentWidth: number\n}\n\nexport default class Select extends React.Component<SelectProps, SelectStates> {\n  private inputRef: React.RefObject<HTMLInputElement> = React.createRef()\n\n  static defaultProps: Partial<SelectProps> = {\n    shouldReflow: false,\n    isChecked: false,\n    isDisabled: false,\n    isBlocked: false,\n    isNew: false,\n  }\n\n  constructor(props: SelectProps) {\n    super(props)\n    this.state = {\n      isTooltipVisible: false,\n      documentWidth: document.documentElement.clientWidth,\n    }\n  }\n\n  // Lifecycle\n  componentDidMount = () => {\n    window.addEventListener('resize', this.handleResize)\n  }\n\n  componentWillUnmount = () => {\n    window.removeEventListener('resize', this.handleResize)\n  }\n\n  // Handlers\n  handleResize = () => {\n    this.setState({ documentWidth: document.documentElement.clientWidth })\n  }\n\n  // Templates\n  Status = (type: 'checkbox' | 'radio' | 'switch') => {\n    const { warning, preview, isBlocked, isNew, onUnblock } = this.props\n\n    if (warning || isBlocked || isNew)\n      return (\n        <div className={`${type}__status`}>\n          {warning !== undefined && (\n            <div\n              style={{\n                position: 'relative',\n                pointerEvents: 'auto',\n              }}\n            >\n              <IconChip\n                iconType=\"PICTO\"\n                iconName=\"warning\"\n                text={warning.label}\n                pin={warning.pin}\n                type={warning.type}\n              />\n            </div>\n          )}\n          {(isBlocked || isNew) && (\n            <Chip\n              preview={preview}\n              isSolo\n              action={isBlocked ? onUnblock : undefined}\n            >\n              {isNew ? 'New' : 'Pro'}\n            </Chip>\n          )}\n        </div>\n      )\n  }\n\n  CheckBox = () => {\n    const {\n      id,\n      label,\n      name,\n      helper,\n      feature,\n      shouldReflow,\n      isChecked,\n      isDisabled,\n      isBlocked,\n      action,\n    } = this.props\n    const { isTooltipVisible, documentWidth } = this.state\n\n    const isReflowActive = shouldReflow && documentWidth <= 460\n\n    const getSelectLabel = () => (isReflowActive ? undefined : label)\n    const getTooltipLabel = () => (isReflowActive ? label : helper?.label)\n    const hasTooltipContent = () =>\n      isReflowActive ? label !== undefined : helper !== undefined\n\n    return (\n      <div className={layouts['snackbar--medium']}>\n        <div\n          className={doClassnames([\n            'checkbox',\n            isBlocked && 'checkbox--blocked',\n          ])}\n          onMouseEnter={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: true })\n          }}\n          onMouseLeave={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: false })\n          }}\n          onFocus={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: true })\n          }}\n          onBlur={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: false })\n          }}\n        >\n          <div className=\"checkbox__slot\">\n            <input\n              data-feature={feature}\n              id={id}\n              className=\"checkbox__box\"\n              type=\"checkbox\"\n              name={name}\n              checked={isChecked}\n              disabled={isDisabled || isBlocked}\n              onChange={action}\n              tabIndex={0}\n              ref={this.inputRef}\n              aria-label={label}\n            />\n            <div className=\"checkbox__box__background\" />\n            <div className=\"checkbox__box__tick\" />\n          </div>\n          {getSelectLabel() !== undefined && (\n            <label\n              className={doClassnames([\n                'checkbox__label',\n                (isDisabled || isBlocked) && 'checkbox__label--disabled',\n              ])}\n              htmlFor={!(isDisabled || isBlocked) ? id : undefined}\n            >\n              {getSelectLabel()}\n            </label>\n          )}\n          {isTooltipVisible && hasTooltipContent() && (\n            <Tooltip\n              pin={helper?.pin || 'BOTTOM'}\n              type={helper?.type || 'SINGLE_LINE'}\n            >\n              {getTooltipLabel()}\n            </Tooltip>\n          )}\n        </div>\n        {this.Status('checkbox')}\n      </div>\n    )\n  }\n\n  RadioButton = () => {\n    const {\n      id,\n      label,\n      name,\n      value,\n      helper,\n      feature,\n      shouldReflow,\n      isChecked,\n      isDisabled,\n      isBlocked,\n      action,\n    } = this.props\n    const { isTooltipVisible, documentWidth } = this.state\n\n    const isReflowActive = shouldReflow && documentWidth <= 460\n\n    const getSelectLabel = () => (isReflowActive ? undefined : label)\n    const getTooltipLabel = () => (isReflowActive ? label : helper?.label)\n    const hasTooltipContent = () =>\n      isReflowActive ? label !== undefined : helper !== undefined\n\n    return (\n      <div className={layouts['snackbar--medium']}>\n        <div\n          className={doClassnames(['radio', isBlocked && 'radio--blocked'])}\n          onMouseEnter={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: true })\n          }}\n          onMouseLeave={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: false })\n          }}\n          onFocus={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: true })\n          }}\n          onBlur={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: false })\n          }}\n        >\n          <div className=\"radio__slot\">\n            <input\n              data-feature={feature}\n              id={id}\n              className=\"radio__button\"\n              type=\"radio\"\n              name={name}\n              value={value}\n              checked={isChecked}\n              disabled={isDisabled || isBlocked}\n              onChange={action}\n              tabIndex={0}\n              ref={this.inputRef}\n              aria-label={label}\n            />\n            <div className=\"radio__button__background\" />\n            <div className=\"radio__button__inner\" />\n          </div>\n          {getSelectLabel() !== undefined && (\n            <label\n              className={doClassnames([\n                'radio__label',\n                (isDisabled || isBlocked) && 'radio__label--disabled',\n              ])}\n              htmlFor={!(isDisabled || isBlocked) ? id : undefined}\n            >\n              {getSelectLabel()}\n            </label>\n          )}\n\n          {isTooltipVisible && hasTooltipContent() && (\n            <Tooltip\n              pin={helper?.pin || 'BOTTOM'}\n              type={helper?.type || 'SINGLE_LINE'}\n            >\n              {getTooltipLabel()}\n            </Tooltip>\n          )}\n        </div>\n        {this.Status('radio')}\n      </div>\n    )\n  }\n\n  SwitchButton = () => {\n    const {\n      id,\n      label,\n      name,\n      helper,\n      feature,\n      shouldReflow,\n      isChecked,\n      isDisabled,\n      isBlocked,\n      action,\n    } = this.props\n    const { isTooltipVisible, documentWidth } = this.state\n\n    const isReflowActive = shouldReflow && documentWidth <= 460\n\n    const getSelectLabel = () => (isReflowActive ? undefined : label)\n    const getTooltipLabel = () => (isReflowActive ? label : helper?.label)\n    const hasTooltipContent = () =>\n      isReflowActive ? label !== undefined : helper !== undefined\n\n    return (\n      <div className={layouts['snackbar--medium']}>\n        <div\n          className={doClassnames(['switch', isBlocked && 'switch--blocked'])}\n          onMouseEnter={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: true })\n          }}\n          onMouseLeave={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: false })\n          }}\n          onFocus={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: true })\n          }}\n          onBlur={() => {\n            if (hasTooltipContent()) this.setState({ isTooltipVisible: false })\n          }}\n        >\n          <div className=\"switch__slot\">\n            <input\n              data-feature={feature}\n              id={id}\n              className=\"switch__toggle\"\n              type=\"checkbox\"\n              role=\"switch\"\n              name={name}\n              checked={isChecked}\n              disabled={isDisabled || isBlocked}\n              onChange={action}\n              tabIndex={0}\n              ref={this.inputRef}\n              aria-label={label}\n            />\n            <div className=\"switch__toggle__background\" />\n            <div className=\"switch__toggle__knob\" />\n          </div>\n          {getSelectLabel() !== undefined && (\n            <label\n              className={doClassnames([\n                'switch__label',\n                (isDisabled || isBlocked) && 'switch__label--disabled',\n              ])}\n              htmlFor={!(isDisabled || isBlocked) ? id : undefined}\n            >\n              {getSelectLabel()}\n            </label>\n          )}\n\n          {isTooltipVisible && hasTooltipContent() && (\n            <Tooltip\n              pin={helper?.pin || 'BOTTOM'}\n              type={helper?.type || 'SINGLE_LINE'}\n            >\n              {getTooltipLabel()}\n            </Tooltip>\n          )}\n        </div>\n        {this.Status('switch')}\n      </div>\n    )\n  }\n\n  // Render\n  render() {\n    const { type } = this.props\n\n    if (type === 'RADIO_BUTTON') return this.RadioButton()\n    if (type === 'SWITCH_BUTTON') return this.SwitchButton()\n    return this.CheckBox()\n  }\n}\n"],"names":["Select","React","props","type","warning","preview","isBlocked","isNew","onUnblock","jsxs","jsx","IconChip","Chip","id","label","name","helper","feature","shouldReflow","isChecked","isDisabled","action","isTooltipVisible","documentWidth","isReflowActive","getSelectLabel","getTooltipLabel","hasTooltipContent","layouts","doClassnames","Tooltip","value"],"mappings":"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"}

package/dist/components/inputs/simple-slider/SimpleSlider.d.ts

@@ -0,0 +1,93 @@
+import { default as React } from 'react';
+
+export interface SimpleSliderProps {
+    /**
+     * Unique identifier for the slider
+     */
+    id: string;
+    /**
+     * Label text for the slider
+     */
+    label: string;
+    /**
+     * Current value
+     */
+    value: number;
+    /**
+     * Minimum allowed value
+     */
+    min: number;
+    /**
+     * Maximum allowed value
+     */
+    max: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Colors for gradient display
+     */
+    colors: {
+        /** Start color */
+        min: string;
+        /** End color */
+        max: string;
+    };
+    /**
+     * Warning tooltip configuration
+     */
+    warning?: {
+        /** Warning message */
+        label: string | React.ReactNode;
+        /** Warning position */
+        pin?: 'TOP' | 'BOTTOM';
+        /** Warning display type */
+        type?: 'MULTI_LINE' | 'SINGLE_LINE';
+    };
+    /**
+     * Feature identifier for tracking
+     */
+    feature: string;
+    /**
+     * Whether the slider is blocked
+     * @default false
+     */
+    isBlocked?: boolean;
+    /**
+     * Whether the slider is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether to show a "New" badge
+     * @default false
+     */
+    isNew?: boolean;
+    /**
+     * Change handler
+     */
+    onChange: (feature: string, state: string, value: number) => void;
+    /**
+     * Handler called when unblock is clicked
+     */
+    onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler;
+}
+export interface SimpleSliderStates {
+    isTooltipDisplay: boolean;
+}
+export default class SimpleSlider extends React.Component<SimpleSliderProps, SimpleSliderStates> {
+    private value;
+    static defaultProps: Partial<SimpleSliderProps>;
+    constructor(props: SimpleSliderProps);
+    componentDidUpdate: (previousProps: Readonly<SimpleSliderProps>) => void;
+    validHandler: (e: React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+    onGrab: (e: React.MouseEvent<HTMLElement>) => void;
+    roundToStep: (value: number, step: number) => number;
+    onSlide: (e: MouseEvent, slider: HTMLElement, stop: HTMLElement, shift: number, rangeWidth: number) => void;
+    onRelease: (stop: HTMLElement) => void;
+    Status: () => import("react/jsx-runtime").JSX.Element | undefined;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=SimpleSlider.d.ts.map

package/dist/components/inputs/simple-slider/SimpleSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/simple-slider/SimpleSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,sBAAsB,CAAA;AAE7B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,MAAM,EAAE;QACN,kBAAkB;QAClB,GAAG,EAAE,MAAM,CAAA;QACX,gBAAgB;QAChB,GAAG,EAAE,MAAM,CAAA;KACZ,CAAA;IACD;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,sBAAsB;QACtB,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;QAC/B,uBAAuB;QACvB,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;QACtB,2BAA2B;QAC3B,IAAI,CAAC,EAAE,YAAY,GAAG,aAAa,CAAA;KACpC,CAAA;IACD;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjE;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,CAAA;CACjE;AAED,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAED,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,SAAS,CACvD,iBAAiB,EACjB,kBAAkB,CACnB;IACC,OAAO,CAAC,KAAK,CAAQ;IAErB,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAK9C;gBAEW,KAAK,EAAE,iBAAiB;IAQpC,kBAAkB,kBAAmB,SAAS,iBAAiB,CAAC,UAI/D;IAGD,YAAY,MAEN,gBAAgB,CAAC,gBAAgB,CAAC,GAClC,mBAAmB,CAAC,gBAAgB,CAAC,UAa1C;IAGD,MAAM,MAAO,gBAAgB,CAAC,WAAW,CAAC,UAgBzC;IAED,WAAW,UAAW,MAAM,QAAQ,MAAM,KAAG,MAAM,CAElD;IAED,OAAO,MACF,UAAU,UACL,WAAW,QACb,WAAW,SACV,MAAM,cACD,MAAM,UA6BnB;IAED,SAAS,SAAU,WAAW,UAc7B;IAGD,MAAM,4DAyBL;IAGD,MAAM;CAsEP"}

package/dist/components/inputs/simple-slider/SimpleSlider.js

@@ -0,0 +1,166 @@
+import '../../../assets/SimpleSlider.css';
+import { jsxs as S, jsx as h } from "react/jsx-runtime";
+import v from "react";
+import T from "../../tags/icon-chip/IconChip.js";
+import y from "../../tags/chip/Chip.js";
+import D from "../../actions/knob/Knob.js";
+import { r as f } from "../../../do-map-2nhWP1KI.js";
+class P extends v.Component {
+  value;
+  static defaultProps = {
+    isBlocked: !1,
+    isDisabled: !1,
+    isNew: !1,
+    step: 1
+  };
+  constructor(t) {
+    super(t), this.state = {
+      isTooltipDisplay: !1
+    }, this.value = t.value;
+  }
+  componentDidUpdate = (t) => {
+    const { value: e } = this.props;
+    t.value !== e && (this.value = e);
+  };
+  // Handlers
+  validHandler = (t) => {
+    const { min: e, max: s, feature: o, onChange: i, step: u = 1 } = this.props, a = t.target;
+    if (a.value !== "") {
+      const p = parseFloat(a.value);
+      if (p < e) i(o, "TYPED", e);
+      else if (p > s) i(o, "TYPED", s);
+      else {
+        const c = this.roundToStep(p, u);
+        i(o, "TYPED", c);
+      }
+    }
+  };
+  // Direct Actions
+  onGrab = (t) => {
+    const e = t.currentTarget, s = e.parentElement, o = t.clientX - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2, i = s.offsetWidth, u = s.parentElement;
+    e.style.zIndex = "2", document.onmousemove = (a) => this.onSlide(a, u, e, o, i), document.onmouseup = () => this.onRelease(e);
+  };
+  roundToStep = (t, e) => Math.round(t / e) * e;
+  onSlide = (t, e, s, o, i) => {
+    const { min: u, max: a, feature: p, onChange: c, step: d = 0.1 } = this.props, m = parseFloat(
+      window.getComputedStyle(e, null).getPropertyValue("padding-left")
+    );
+    let n = t.clientX - e.offsetLeft - m - o;
+    const r = 0, l = i;
+    n <= r ? n = r : n >= l && (n = l), s.style.left = f(n, 0, i, 0, 100).toFixed(1) + "%";
+    const g = f(n, 0, i, u, a);
+    this.value = this.roundToStep(g, d), this.value < u && (this.value = u), this.value > a && (this.value = a), this.setState({
+      isTooltipDisplay: !0
+    }), c(p, "UPDATING", this.value), document.body.style.cursor = "ew-resize";
+  };
+  onRelease = (t) => {
+    const { feature: e, onChange: s } = this.props;
+    document.onmousemove = null, document.onmouseup = null, t.onmouseup = null, t.style.zIndex = "1", this.setState({
+      isTooltipDisplay: !1
+    }), s(e, "RELEASED", this.value), document.body.style.cursor = "";
+  };
+  // Templates
+  Status = () => {
+    const { warning: t, isBlocked: e, isNew: s, onUnblock: o } = this.props;
+    if (t || e || s)
+      return /* @__PURE__ */ S("div", { className: "simple-slider__status", children: [
+        t !== void 0 && /* @__PURE__ */ h(
+          T,
+          {
+            iconType: "PICTO",
+            iconName: "warning",
+            text: t.label,
+            pin: t.pin,
+            type: t.type
+          }
+        ),
+        (e || s) && /* @__PURE__ */ h(
+          y,
+          {
+            isSolo: !0,
+            action: e ? o : void 0,
+            children: s ? "New" : "Pro"
+          }
+        )
+      ] });
+  };
+  // Render
+  render() {
+    const {
+      id: t,
+      label: e,
+      value: s,
+      min: o,
+      max: i,
+      colors: u,
+      feature: a,
+      isBlocked: p,
+      isDisabled: c,
+      onChange: d
+    } = this.props, { isTooltipDisplay: m } = this.state;
+    return /* @__PURE__ */ S(
+      "div",
+      {
+        className: "simple-slider",
+        role: "group",
+        "aria-label": e,
+        children: [
+          /* @__PURE__ */ h(
+            "div",
+            {
+              className: "simple-slider__range",
+              role: "presentation",
+              style: {
+                background: `linear-gradient(90deg, ${u.min}, ${u.max})`
+              },
+              children: /* @__PURE__ */ h(
+                D,
+                {
+                  id: t,
+                  shortId: e,
+                  value: s,
+                  offset: f(s, o, i, 0, 100),
+                  min: o.toString(),
+                  max: i.toString(),
+                  canBeTyped: !0,
+                  isDisplayed: m,
+                  isBlocked: p,
+                  isDisabled: c,
+                  onShiftRight: (n) => {
+                    const { step: r = 1 } = this.props;
+                    if (n.shiftKey) {
+                      const l = this.roundToStep(s + 10, r);
+                      d(a, "SHIFTED", l > i ? i : l);
+                    } else {
+                      const l = this.roundToStep(s + r, r);
+                      d(a, "SHIFTED", l > i ? i : l);
+                    }
+                  },
+                  onShiftLeft: (n) => {
+                    const { step: r = 1 } = this.props;
+                    if (n.shiftKey) {
+                      const l = this.roundToStep(s - 10, r);
+                      d(a, "SHIFTED", l < o ? o : l);
+                    } else {
+                      const l = this.roundToStep(s - r, r);
+                      d(a, "SHIFTED", l < o ? o : l);
+                    }
+                  },
+                  onMouseDown: (n) => {
+                    this.onGrab(n), n.target.focus();
+                  },
+                  onValidStopValue: (n, r) => this.validHandler(r)
+                }
+              )
+            }
+          ),
+          this.Status()
+        ]
+      }
+    );
+  }
+}
+export {
+  P as default
+};
+//# sourceMappingURL=SimpleSlider.js.map

package/dist/components/inputs/simple-slider/SimpleSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleSlider.js","sources":["../../../../src/components/inputs/simple-slider/SimpleSlider.tsx"],"sourcesContent":["import React from 'react'\nimport IconChip from '@components/tags/icon-chip/IconChip'\nimport Chip from '@components/tags/chip/Chip'\nimport Knob from '@components/actions/knob/Knob'\nimport { doMap } from '@a_ng_d/figmug-utils'\nimport './simple-slider.scss'\n\nexport interface SimpleSliderProps {\n  /**\n   * Unique identifier for the slider\n   */\n  id: string\n  /**\n   * Label text for the slider\n   */\n  label: string\n  /**\n   * Current value\n   */\n  value: number\n  /**\n   * Minimum allowed value\n   */\n  min: number\n  /**\n   * Maximum allowed value\n   */\n  max: number\n  /**\n   * Step increment\n   * @default 1\n   */\n  step?: number\n  /**\n   * Colors for gradient display\n   */\n  colors: {\n    /** Start color */\n    min: string\n    /** End color */\n    max: string\n  }\n  /**\n   * Warning tooltip configuration\n   */\n  warning?: {\n    /** Warning message */\n    label: string | React.ReactNode\n    /** Warning position */\n    pin?: 'TOP' | 'BOTTOM'\n    /** Warning display type */\n    type?: 'MULTI_LINE' | 'SINGLE_LINE'\n  }\n  /**\n   * Feature identifier for tracking\n   */\n  feature: string\n  /**\n   * Whether the slider is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether the slider is disabled\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Change handler\n   */\n  onChange: (feature: string, state: string, value: number) => void\n  /**\n   * Handler called when unblock is clicked\n   */\n  onUnblock?: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\nexport interface SimpleSliderStates {\n  isTooltipDisplay: boolean\n}\n\nexport default class SimpleSlider extends React.Component<\n  SimpleSliderProps,\n  SimpleSliderStates\n> {\n  private value: number\n\n  static defaultProps: Partial<SimpleSliderProps> = {\n    isBlocked: false,\n    isDisabled: false,\n    isNew: false,\n    step: 1,\n  }\n\n  constructor(props: SimpleSliderProps) {\n    super(props)\n    this.state = {\n      isTooltipDisplay: false,\n    }\n    this.value = props.value\n  }\n\n  componentDidUpdate = (previousProps: Readonly<SimpleSliderProps>) => {\n    const { value } = this.props\n\n    if (previousProps.value !== value) this.value = value\n  }\n\n  // Handlers\n  validHandler = (\n    e:\n      | React.FocusEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n  ) => {\n    const { min, max, feature, onChange, step = 1 } = this.props\n    const target = e.target as HTMLInputElement\n    if (target.value !== '') {\n      const parsedValue = parseFloat(target.value)\n      if (parsedValue < min) onChange(feature, 'TYPED', min)\n      else if (parsedValue > max) onChange(feature, 'TYPED', max)\n      else {\n        const roundedValue = this.roundToStep(parsedValue, step)\n        onChange(feature, 'TYPED', roundedValue)\n      }\n    }\n  }\n\n  // Direct Actions\n  onGrab = (e: React.MouseEvent<HTMLElement>) => {\n    const stop = e.currentTarget as HTMLElement,\n      range = stop.parentElement as HTMLElement,\n      shift =\n        e.clientX -\n        stop.getBoundingClientRect().left -\n        stop.getBoundingClientRect().width / 2,\n      rangeWidth = range.offsetWidth as number,\n      slider = range.parentElement as HTMLElement\n\n    stop.style.zIndex = '2'\n\n    document.onmousemove = (e) =>\n      this.onSlide(e, slider, stop, shift, rangeWidth)\n\n    document.onmouseup = () => this.onRelease(stop)\n  }\n\n  roundToStep = (value: number, step: number): number => {\n    return Math.round(value / step) * step\n  }\n\n  onSlide = (\n    e: MouseEvent,\n    slider: HTMLElement,\n    stop: HTMLElement,\n    shift: number,\n    rangeWidth: number\n  ) => {\n    const { min, max, feature, onChange, step = 0.1 } = this.props\n    const sliderPadding: number = parseFloat(\n      window.getComputedStyle(slider, null).getPropertyValue('padding-left')\n    )\n    let offset = e.clientX - slider.offsetLeft - sliderPadding - shift\n\n    const limitMin = 0\n    const limitMax = rangeWidth\n\n    if (offset <= limitMin) offset = limitMin\n    else if (offset >= limitMax) offset = limitMax\n\n    stop.style.left = doMap(offset, 0, rangeWidth, 0, 100).toFixed(1) + '%'\n\n    const rawValue = doMap(offset, 0, rangeWidth, min, max)\n\n    this.value = this.roundToStep(rawValue, step)\n\n    if (this.value < min) this.value = min\n    if (this.value > max) this.value = max\n\n    this.setState({\n      isTooltipDisplay: true,\n    })\n\n    onChange(feature, 'UPDATING', this.value)\n    document.body.style.cursor = 'ew-resize'\n  }\n\n  onRelease = (stop: HTMLElement) => {\n    const { feature, onChange } = this.props\n\n    document.onmousemove = null\n    document.onmouseup = null\n    stop.onmouseup = null\n    stop.style.zIndex = '1'\n\n    this.setState({\n      isTooltipDisplay: false,\n    })\n\n    onChange(feature, 'RELEASED', this.value)\n    document.body.style.cursor = ''\n  }\n\n  // Templates\n  Status = () => {\n    const { warning, isBlocked, isNew, onUnblock } = this.props\n\n    if (warning || isBlocked || isNew)\n      return (\n        <div className=\"simple-slider__status\">\n          {warning !== undefined && (\n            <IconChip\n              iconType=\"PICTO\"\n              iconName=\"warning\"\n              text={warning.label}\n              pin={warning.pin}\n              type={warning.type}\n            />\n          )}\n          {(isBlocked || isNew) && (\n            <Chip\n              isSolo\n              action={isBlocked ? onUnblock : undefined}\n            >\n              {isNew ? 'New' : 'Pro'}\n            </Chip>\n          )}\n        </div>\n      )\n  }\n\n  // Render\n  render() {\n    const {\n      id,\n      label,\n      value,\n      min,\n      max,\n      colors,\n      feature,\n      isBlocked,\n      isDisabled,\n      onChange,\n    } = this.props\n    const { isTooltipDisplay } = this.state\n\n    return (\n      <div\n        className=\"simple-slider\"\n        role=\"group\"\n        aria-label={label}\n      >\n        <div\n          className=\"simple-slider__range\"\n          role=\"presentation\"\n          style={{\n            background: `linear-gradient(90deg, ${colors.min}, ${colors.max})`,\n          }}\n        >\n          <Knob\n            id={id}\n            shortId={label}\n            value={value}\n            offset={doMap(value, min, max, 0, 100)}\n            min={min.toString()}\n            max={max.toString()}\n            canBeTyped={true}\n            isDisplayed={isTooltipDisplay}\n            isBlocked={isBlocked}\n            isDisabled={isDisabled}\n            onShiftRight={(e) => {\n              const { step = 1 } = this.props\n              if (e.shiftKey) {\n                const newValue = this.roundToStep(value + 10, step)\n                onChange(feature, 'SHIFTED', newValue > max ? max : newValue)\n              } else {\n                const newValue = this.roundToStep(value + step, step)\n                onChange(feature, 'SHIFTED', newValue > max ? max : newValue)\n              }\n            }}\n            onShiftLeft={(e) => {\n              const { step = 1 } = this.props\n              if (e.shiftKey) {\n                const newValue = this.roundToStep(value - 10, step)\n                onChange(feature, 'SHIFTED', newValue < min ? min : newValue)\n              } else {\n                const newValue = this.roundToStep(value - step, step)\n                onChange(feature, 'SHIFTED', newValue < min ? min : newValue)\n              }\n            }}\n            onMouseDown={(e: React.MouseEvent<HTMLElement>) => {\n              this.onGrab(e)\n              ;(e.target as HTMLElement).focus()\n            }}\n            onValidStopValue={(_stopId, e) => this.validHandler(e)}\n          />\n        </div>\n        {this.Status()}\n      </div>\n    )\n  }\n}\n"],"names":["SimpleSlider","React","props","previousProps","value","e","min","max","feature","onChange","step","target","parsedValue","roundedValue","stop","range","shift","rangeWidth","slider","sliderPadding","offset","limitMin","limitMax","doMap","rawValue","warning","isBlocked","isNew","onUnblock","jsxs","jsx","IconChip","Chip","id","label","colors","isDisabled","isTooltipDisplay","Knob","newValue","_stopId"],"mappings":"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"}