@5ive-souls/controls 0.0.1 → 0.0.3

package/dist/components/ClassNames.js

@@ -0,0 +1,7 @@
+const t = class t {
+};
+t.FlexBox = "5s-flex-box", t.FlexBoxItem = "5s-flex-box-item", t.FlexBoxItemResizer = "5s-flex-box-item-resizer", t.Section = "5s-section", t.SectionHeader = "5s-section-header", t.SectionContent = "5s-section-content", t.Wizard = "5s-wizard", t.WizardPanel = "5s-wizard-panel", t.DynamicForm = "5s-dynamic-form", t.FormField = "5s-form-field", t.FormFieldGroup = "5s-form-field-group", t.ThemePicker = "5s-theme-picker", t.RichText = "5s-rich-text", t.Grid = "_5s-grid", t.GridCell = "5s-grid-cell", t.GridCellResizer = "5s-grid-cell-resizer", t.JumpList = "5s-jl", t.JumpListMenu = "5s-jlm", t.JumpListHeader = "5s-jlh", t.JumpListItem = "5s-jli";
+let i = t;
+export {
+  i as ClassNames
+};

package/dist/components/DynamicForm/Builder/DynamicFormBuilder.js

@@ -0,0 +1,64 @@
+import { SectionBuilder as s } from "./Section/SectionBuilder.js";
+import { FieldBuilder as l } from "./Field/FieldBuilder.js";
+class e {
+  // #endregion
+  // #region Constructor
+  constructor(i) {
+    this._defaultValues = {}, this._formData = {
+      title: i,
+      sections: [],
+      results: this._defaultValues
+    };
+  }
+  // #endregion
+  // #region Public Properties
+  get Section() {
+    if (!this._sectionBuilder)
+      throw new Error("You must call AddSection before you can access the SectionBuilder");
+    return this._sectionBuilder;
+  }
+  get Field() {
+    if (!this._fieldBuilder)
+      throw new Error("Must call AddField before you can access the FieldBuilder");
+    return this._fieldBuilder;
+  }
+  // #endregion
+  // #region Public Methods
+  static Start(i) {
+    return new e(i);
+  }
+  Finish() {
+    if (this._line)
+      throw new Error("Can not call Finish while in the context of a AddLine.");
+    return this._formData;
+  }
+  AddSection(i) {
+    if (this._line)
+      throw new Error("Can not call AddSection while in the context of a AddLine.");
+    return this._line = null, this._field = null, this._fieldBuilder = null, this._section = {
+      title: i,
+      fields: []
+    }, this._sectionBuilder = new s(this, this._section), this._formData.sections.push(this._section), this;
+  }
+  AddLine(i) {
+    if (!this._section)
+      throw new Error("Must call AddSection before you can call AddLine");
+    if (this._line)
+      throw new Error("Already in an AddLine context.");
+    return this._line = {
+      fields: []
+    }, this._section.fields.push(this._line), i(this), this._line = null, this;
+  }
+  AddField(i, t) {
+    if (!this._section)
+      throw new Error("Before calling AddField you must either call add Section or add line");
+    return this._field = {
+      key: i,
+      label: t
+    }, this._line ? this._line.fields.push(this._field) : this._section.fields.push(this._field), this._fieldBuilder = new l(this, this._field, this._defaultValues), this;
+  }
+  // #endregion
+}
+export {
+  e as DynamicFormBuilder
+};

package/dist/components/DynamicForm/Builder/Field/FieldBuilder.js

@@ -0,0 +1,53 @@
+class l {
+  // #endregion
+  // #region Constructor
+  constructor(e, i, t) {
+    this._formBuilder = e, this._field = i, this._defaultValues = t;
+  }
+  // #endregion
+  // #region Public Methods
+  SetType(e) {
+    return this._field.type = e, this._formBuilder;
+  }
+  IsMultiLined() {
+    return this._field.multiLine = !0, this._formBuilder;
+  }
+  IsRequired() {
+    return this._field.required = !0, this._formBuilder;
+  }
+  SetOptions(e) {
+    return this._field.options = e, this._formBuilder;
+  }
+  AsRadiogroup() {
+    return this._field.asRadioGroup = !0, this._formBuilder;
+  }
+  SetValidation(e) {
+    return this._field.validationMessage = e, this._formBuilder;
+  }
+  SetHint(e) {
+    return this._field.hint = e, this._formBuilder;
+  }
+  IsBoolean() {
+    return this._field.isBoolean = !0, this._formBuilder;
+  }
+  DoesNotFill() {
+    return this._field.doNotFill = !0, this._formBuilder;
+  }
+  WithDefaultValue(e) {
+    return this._defaultValues[this._field.key] = e, this._formBuilder;
+  }
+  /**
+  * Marks the current field dependant on the value of another field.
+  * @param key The key of the field this one is dependant on.
+  * @param value The expected value of the field. Can either be !=NULL for any value, true or false for a boolean field, or any string value.
+  * @param type What aspect of this field is controlled by the other fields value? Either visibility or enabled.
+  * @returns 
+  */
+  WithDependency(e, i, t) {
+    return this._field.dependantOn = e, this._field.dependantValue = i, this._field.dependencyType = t, this._formBuilder;
+  }
+  // #endregion
+}
+export {
+  l as FieldBuilder
+};

package/dist/components/DynamicForm/Builder/Section/SectionBuilder.js

@@ -0,0 +1,16 @@
+class i {
+  // #endregion
+  // #region Constructor
+  constructor(e, s) {
+    this._formBuilder = e, this._section = s;
+  }
+  // #endregion
+  // #region Public Methods
+  SetMessage(e) {
+    return this._section.message = e, this._formBuilder;
+  }
+  // #endregion
+}
+export {
+  i as SectionBuilder
+};

package/dist/components/DynamicForm/Builder/index.js

@@ -0,0 +1,8 @@
+import { DynamicFormBuilder as o } from "./DynamicFormBuilder.js";
+import { FieldBuilder as m } from "./Field/FieldBuilder.js";
+import { SectionBuilder as l } from "./Section/SectionBuilder.js";
+export {
+  o as DynamicFormBuilder,
+  m as FieldBuilder,
+  l as SectionBuilder
+};

package/dist/components/DynamicForm/DynamicForm.js

@@ -0,0 +1,197 @@
+import { jsx as i, jsxs as D } from "react/jsx-runtime";
+import c from "react";
+import { Wizard as j } from "../Wizard/Wizard.js";
+import { WizardPanel as U } from "../Wizard/WizardPanel/WizardPanel.js";
+import { makeStyles as H, tokens as k, Text as $, Divider as A, mergeClasses as J, Textarea as K, RadioGroup as Q, Radio as X, Dropdown as Y, Option as Z, Checkbox as ee, Input as ne, Field as te } from "@fluentui/react-components";
+import { Device as ae } from "../FiveSoulsProvider/FiveSouls.Types.js";
+import "../FiveSoulsProvider/deviceContext.js";
+import { useDevice as ie } from "../FiveSoulsProvider/useDevice.js";
+import { FlexBox as v } from "../FlexBox/FlexBox.js";
+import { FlexBoxItem as se } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import { ClassNames as b } from "../ClassNames.js";
+const oe = H({
+  root: {
+    width: "100%",
+    boxSizing: "border-box"
+  },
+  radio: {
+    flexGrow: 1,
+    flexBasis: "0px"
+  }
+}), be = (M) => {
+  const { metaData: F, readonly: d, onSubmit: x, className: R, ref: E, action: m, target: O, strings: f, wizardStrings: V, onFieldChanged: z, id: _ } = M, { sections: u, results: o } = F, S = oe(), l = c.useReducer((e) => e + 1, 0)[1], I = ie(), p = c.useRef({}), h = c.useCallback((e, n) => {
+    const a = p.current;
+    if (!(e in a))
+      return;
+    const t = a[e];
+    let s = !1;
+    switch (t.dependantValue) {
+      case "!=NULL": {
+        s = n && n.length > 0;
+        break;
+      }
+      default:
+        s = t.dependantValue == n;
+    }
+    switch (t.dependencyType) {
+      case "visibility": {
+        const L = window.document.getElementById("field-" + t.key);
+        L.style.display = s ? "block" : "none";
+        break;
+      }
+      case "enabled": {
+        t.disabled = !s, l();
+        break;
+      }
+    }
+  }, [l]);
+  c.useEffect(() => {
+    const e = p.current;
+    for (const n in e) {
+      const a = e[n];
+      a && h(n, o[a.dependantOn]);
+    }
+  }, [h, o]);
+  const q = (e) => "key" in e, r = (e, n) => {
+    const a = o[e.key];
+    o[e.key] = n, h(e.key, n), z && z(e.key, a, n);
+  };
+  let C = 0;
+  const B = (e) => (C++, /* @__PURE__ */ i(
+    v,
+    {
+      className: b.FormFieldGroup,
+      horizontal: I != ae.Mobile,
+      childrenGap: k.spacingHorizontalM,
+      alignItems: "start",
+      children: e.fields.map((n) => w(n))
+    },
+    "field-group-" + C
+  )), w = (e) => {
+    let n;
+    e.dependantOn && (p.current[e.dependantOn] = e);
+    const a = d || e.disabled;
+    return e.multiLine ? n = /* @__PURE__ */ i(
+      K,
+      {
+        resize: "vertical",
+        name: e.key,
+        size: "large",
+        disabled: a,
+        value: o[e.key],
+        onChange: (t, s) => r(e, s.value)
+      }
+    ) : e.options && e.options.length > 0 ? e.asRadioGroup ? n = /* @__PURE__ */ i(
+      Q,
+      {
+        layout: "horizontal",
+        name: e.key,
+        defaultValue: o[e.key],
+        disabled: a,
+        onChange: (t, s) => r(e, s.value),
+        children: e.options.map((t) => /* @__PURE__ */ i(
+          X,
+          {
+            readOnly: d,
+            label: t,
+            value: t,
+            className: S.radio
+          },
+          t
+        ))
+      }
+    ) : n = /* @__PURE__ */ i(
+      Y,
+      {
+        defaultValue: o[e.key],
+        name: e.key,
+        disabled: a,
+        onOptionSelect: (t, s) => r(e, s.optionText),
+        children: e.options.map((t) => /* @__PURE__ */ i(Z, { children: t }, t))
+      }
+    ) : e.isBoolean ? n = /* @__PURE__ */ i(
+      ee,
+      {
+        size: "large",
+        name: e.key,
+        disabled: a,
+        checked: o[e.key],
+        onChange: (t, s) => r(e, s.checked.valueOf().toString())
+      }
+    ) : n = /* @__PURE__ */ i(
+      ne,
+      {
+        "aria-label": e.label,
+        name: e.key,
+        disabled: a,
+        type: e.type,
+        value: o[e.key],
+        onChange: (t) => r(e, t.target.value)
+      }
+    ), /* @__PURE__ */ i(
+      se,
+      {
+        id: `field-${e.key}`,
+        className: b.FormField,
+        grow: e.doNotFill ? 0 : 1,
+        children: /* @__PURE__ */ i(
+          te,
+          {
+            label: e.label ?? " ",
+            hint: e.hint,
+            required: e.required,
+            validationMessage: e.validationMessage,
+            children: n
+          }
+        )
+      },
+      e.key
+    );
+  }, T = (e, n, a) => {
+    u.forEach((t) => {
+      g(t, e, n, a);
+    });
+  }, g = (e, n, a, t) => {
+    e.fields.forEach((s) => {
+      q(s) ? n(s, t) : a(s, t);
+    });
+  }, y = (e, n) => {
+    if (e.required && o[e.key] === void 0) {
+      if (e.validationMessage = f ? f.fieldRequired : "This field is required.", n) {
+        const a = n;
+        a.missingFields++;
+      }
+    } else
+      e.validationMessage = "";
+  }, G = (e, n) => {
+    e.fields.forEach((a) => {
+      y(a, n);
+    });
+  }, W = (e, n) => {
+    const a = u[e], t = { missingFields: 0 };
+    return g(a, y, G, t), l(), t.missingFields <= 0;
+  }, P = () => {
+    const e = { missingFields: 0 };
+    T(y, G, e), e.missingFields > 0 ? l() : x && !m && x(F.results);
+  }, N = [];
+  return u.forEach((e, n) => {
+    const a = [];
+    g(e, (t) => {
+      a.push(w(t));
+    }, (t) => {
+      a.push(B(t));
+    }), N.push(
+      /* @__PURE__ */ i(U, { title: e.title, children: /* @__PURE__ */ D(v, { fill: !0, childrenGap: k.spacingVerticalM, children: [
+        e.message && /* @__PURE__ */ D("div", { children: [
+          /* @__PURE__ */ i($, { children: e.message }),
+          /* @__PURE__ */ i(A, { appearance: "brand" })
+        ] }),
+        /* @__PURE__ */ i(v, { fill: !0, childrenGap: k.spacingVerticalM, children: a })
+      ] }) }, "WizardPanel-" + n)
+    );
+  }), /* @__PURE__ */ i("div", { id: _, className: J(b.DynamicForm, S.root, R), ref: E, children: /* @__PURE__ */ i("form", { action: m, target: O, children: /* @__PURE__ */ i(j, { onSubmit: P, onNavigatePanel: W, readonly: d, asForm: m != null, strings: V, children: N }) }) });
+};
+export {
+  be as DynamicForm
+};

package/dist/components/DynamicForm/index.js

@@ -0,0 +1,10 @@
+import { DynamicForm as e } from "./DynamicForm.js";
+import { DynamicFormBuilder as i } from "./Builder/DynamicFormBuilder.js";
+import { FieldBuilder as d } from "./Builder/Field/FieldBuilder.js";
+import { SectionBuilder as l } from "./Builder/Section/SectionBuilder.js";
+export {
+  e as DynamicForm,
+  i as DynamicFormBuilder,
+  d as FieldBuilder,
+  l as SectionBuilder
+};

package/dist/components/FiveSoulsProvider/FiveSouls.Types.js

@@ -0,0 +1,4 @@
+var o = /* @__PURE__ */ ((t) => (t[t.Desktop = 0] = "Desktop", t[t.Tablet = 1] = "Tablet", t[t.Mobile = 2] = "Mobile", t))(o || {});
+export {
+  o as Device
+};

package/dist/components/FiveSoulsProvider/FiveSoulsProvider.js

@@ -0,0 +1,20 @@
+import { jsx as l } from "react/jsx-runtime";
+import o from "react";
+import { deviceContext as u } from "./deviceContext.js";
+import { Device as r } from "./FiveSouls.Types.js";
+import { FluentProvider as p } from "@fluentui/react-components";
+const E = (c) => {
+  const { children: m, mobileThreshold: n, tabletThreshold: s, theme: v, className: a } = c, [t, f] = o.useState(), i = o.useCallback(() => {
+    const d = window.innerWidth;
+    let e;
+    d < (n ?? 768) ? e = r.Mobile : d < (s ?? 1024) ? e = r.Tablet : e = r.Desktop, t !== e && f(e);
+  }, [t, n, s]);
+  o.useEffect(() => (i(), window.addEventListener("resize", i), () => window.removeEventListener("resize", i)), [i]);
+  const h = {
+    device: t
+  };
+  return /* @__PURE__ */ l(u.Provider, { value: h, children: /* @__PURE__ */ l(p, { theme: v, className: a, children: m }) });
+};
+export {
+  E as FiveSoulsProvider
+};

package/dist/components/FiveSoulsProvider/deviceContext.js

@@ -0,0 +1,5 @@
+import t from "react";
+const o = t.createContext(void 0);
+export {
+  o as deviceContext
+};

package/dist/components/FiveSoulsProvider/index.js

@@ -0,0 +1,10 @@
+import { Device as r } from "./FiveSouls.Types.js";
+import { FiveSoulsProvider as i } from "./FiveSoulsProvider.js";
+import { deviceContext as x } from "./deviceContext.js";
+import { useDevice as m } from "./useDevice.js";
+export {
+  r as Device,
+  i as FiveSoulsProvider,
+  x as deviceContext,
+  m as useDevice
+};

package/dist/components/FiveSoulsProvider/useDevice.js

@@ -0,0 +1,10 @@
+import t from "react";
+import { deviceContext as o } from "./deviceContext.js";
+import { Device as r } from "./FiveSouls.Types.js";
+const p = () => {
+  const e = t.useContext(o);
+  return e ? e.device : r.Desktop;
+};
+export {
+  p as useDevice
+};

package/dist/components/FlexBox/FlexBox.js

@@ -0,0 +1,75 @@
+import { jsx as u } from "react/jsx-runtime";
+import { makeStyles as g, mergeClasses as r } from "@fluentui/react-components";
+import { ClassNames as o } from "../ClassNames.js";
+import { FlexBoxUtils as v } from "./FlexBoxUtils.js";
+const j = g({
+  root: {
+    display: "flex",
+    boxSizing: "border-box"
+  },
+  vertical: {
+    flexDirection: "column"
+  },
+  verticalReverse: {
+    flexDirection: "column-reverse"
+  },
+  horizontal: {
+    flexDirection: "row"
+  },
+  horizontalReverse: {
+    flexDirection: "row-reverse"
+  },
+  alignStart: {
+    alignItems: "start"
+  },
+  alignCenter: {
+    alignItems: "center"
+  },
+  alignEnd: {
+    alignItems: "end"
+  },
+  justifyStart: {
+    justifyContent: "start"
+  },
+  justifyCenter: {
+    justifyContent: "center"
+  },
+  justifyEnd: {
+    justifyContent: "end"
+  },
+  wrap: {
+    flexWrap: "wrap"
+  }
+}), C = (a) => {
+  const { children: c, horizontal: f, alignItems: s, wrap: m, justifyContent: l, reverse: i, className: n, ref: x, id: y } = a, t = j(), d = v.buildFlexBoxStyles(a);
+  let e = f ? r(o.FlexBox, t.root, n, i ? t.horizontalReverse : t.horizontal) : r(o.FlexBox, t.root, n, i ? t.verticalReverse : t.vertical);
+  if (s)
+    switch (s) {
+      case "start":
+        e = r(e, t.alignStart);
+        break;
+      case "center":
+        e = r(e, t.alignCenter);
+        break;
+      case "end":
+        e = r(e, t.alignEnd);
+        break;
+    }
+  if (l)
+    switch (l) {
+      case "start":
+        e = r(e, t.justifyStart);
+        break;
+      case "center":
+        e = r(e, t.justifyCenter);
+        break;
+      case "end":
+        e = r(e, t.justifyEnd);
+        break;
+    }
+  return m && (e = r(e, t.wrap)), /* @__PURE__ */ u("div", { id: y, className: e, style: d, ref: x, role: a.role, children: c });
+};
+C.displayName = "FlexBox";
+export {
+  C as FlexBox
+};

package/dist/components/FlexBox/FlexBoxItem/FlexBoxItem.js

@@ -0,0 +1,15 @@
+import { jsx as m } from "react/jsx-runtime";
+import { makeStyles as i, mergeClasses as x } from "@fluentui/react-components";
+import { ClassNames as c } from "../../ClassNames.js";
+import { FlexBoxUtils as a } from "../FlexBoxUtils.js";
+const n = i({
+  root: {
+    boxSizing: "border-box"
+  }
+}), b = (e) => {
+  const { className: o, ref: s, id: t } = e, l = n(), r = a.buildFlexBoxItemStyles(e);
+  return /* @__PURE__ */ m("div", { id: t, className: x(c.FlexBoxItem, l.root, o), style: r, ref: s, children: e.children });
+};
+export {
+  b as FlexBoxItem
+};

package/dist/components/FlexBox/FlexBoxItem/index.js

@@ -0,0 +1,4 @@
+import { FlexBoxItem as x } from "./FlexBoxItem.js";
+export {
+  x as FlexBoxItem
+};

package/dist/components/FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js

@@ -0,0 +1,80 @@
+import { jsx as b } from "react/jsx-runtime";
+import x from "react";
+import { makeStyles as I, tokens as c, mergeClasses as k } from "@fluentui/react-components";
+import { ResizeUtils as r } from "../ResizeUtils.js";
+import { ClassNames as a } from "../../ClassNames.js";
+const G = I({
+  root: {
+    backgroundColor: c.colorBrandBackground,
+    borderRadius: c.borderRadiusMedium,
+    ":hover": {
+      backgroundColor: c.colorBrandBackgroundHover
+    }
+  },
+  horizontal: {
+    cursor: "col-resize",
+    width: c.spacingHorizontalXS,
+    height: "100%"
+  },
+  vertical: {
+    cursor: "row-resize",
+    height: c.spacingVerticalXS,
+    width: "100%"
+  }
+}), H = (f) => {
+  const { horizontal: p, className: B, id: w } = f, m = G(), l = x.useRef(), [t, h] = x.useState(p), [n, z] = x.useState();
+  x.useEffect(() => {
+    const i = l.current, o = i.parentElement, e = i.previousSibling;
+    if (!o.classList.contains(a.FlexBox))
+      throw new Error("Flex Box Resizer must be defined as a child of the Flex Box component");
+    if (e === void 0 || !(e.classList.contains(a.FlexBox) || e.classList.contains(a.FlexBoxItem) || e.classList.contains(a.Section)))
+      throw new Error("Flex Box Resizer must be defined after a Flex Box, Flex Box Item, or Section.");
+    window.getComputedStyle(o).flexDirection === "row" && h(!0);
+  }, []);
+  const y = (i) => {
+    const o = l.current, e = o.parentElement, s = o.previousElementSibling;
+    e && e.classList.add("unselectable");
+    const u = window.getComputedStyle(s);
+    z({
+      resizer: o,
+      flexBox: e,
+      flexBoxItem: s,
+      minsize: r.GetMinSize(u, t),
+      maxSize: r.GetMaxSize(u, t)
+    }), o.setPointerCapture(i.pointerId);
+  }, C = (i) => {
+  }, F = (i) => {
+    if (!n)
+      return;
+    const { flexBoxItem: o } = n;
+    r.CheckForFlexGrow(o, t);
+    const s = r.GetClientSize(o, t) + r.GetMouseDelta(i, t);
+    n.minsize > 0 && n.minsize > s || n.maxSize > 0 && n.maxSize < s || r.SetSize(o.style, t, s);
+  }, g = (i) => {
+    const o = l.current;
+    n && n.flexBox && n.flexBox.classList.remove("unselectable"), o.releasePointerCapture(i.pointerId), z(void 0);
+  }, v = (i) => {
+    const e = l.current.previousSibling, s = window.getComputedStyle(e), u = r.GetClientSize(e, t), S = r.GetMinSize(s, t), d = r.GetMaxSize(s, t);
+    if (u === S && d > 0) {
+      r.CheckForFlexGrow(e, t), r.SetSize(e.style, t, d);
+      return;
+    }
+    S > 0 && (r.CheckForFlexGrow(e, t), r.SetSize(e.style, t, S));
+  };
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      id: w,
+      ref: l,
+      className: k(a.FlexBoxItemResizer, m.root, t ? m.horizontal : m.vertical, B),
+      onTouchStart: C,
+      onDoubleClick: v,
+      onPointerDown: y,
+      onMouseMove: F,
+      onPointerUp: g
+    }
+  );
+};
+export {
+  H as FlexBoxItemResizer
+};

package/dist/components/FlexBox/FlexBoxItemResizer/index.js

@@ -0,0 +1,4 @@
+import { FlexBoxItemResizer as r } from "./FlexBoxItemResizer.js";
+export {
+  r as FlexBoxItemResizer
+};

package/dist/components/FlexBox/FlexBoxUtils.js

@@ -0,0 +1,13 @@
+const r = class r {
+};
+r.buildFlexBoxItemStyles = (e, t) => {
+  const { grow: s, shrink: f, basis: n, padding: h, minSize: a, maxSize: d } = e, i = t ?? {};
+  return s && (i.flexGrow = s, i.flexBasis = "0px"), f && (i.flexShrink = f), h && (i.boxSizing = "border-box", i.padding = h), n && (i.flexBasis = n), a && (i.minWidth = a + "px", i.minHeight = a + "px"), d && (i.maxWidth = a + "px", i.maxHeight = a + "px"), Object.assign({}, e.style, i);
+}, r.buildFlexBoxStyles = (e) => {
+  const t = {}, { childrenGap: s, fill: f, itemProps: n } = e;
+  return s && (t.gap = s), f && (t.width = "100%", t.height = "100%"), n && r.buildFlexBoxItemStyles(n, t), Object.assign({}, t, e.style);
+};
+let x = r;
+export {
+  x as FlexBoxUtils
+};

package/dist/components/FlexBox/ResizeUtils.js

@@ -0,0 +1,31 @@
+const s = class s {
+  static GetGridTemplate(t, e, i, n) {
+    const r = (i ? t.style.gridTemplateColumns : t.style.gridTemplateRows).split(" ")[n - 1];
+    if (r.endsWith("fr") || r == "auto") {
+      const m = s.GetClientSize(e, i);
+      return this.UpdateLayoutGrid(t, i, n, m + "px"), m;
+    }
+    return this.GetNumericalSizeFromCss(r);
+  }
+  static UpdateLayoutGrid(t, e, i, n) {
+    const a = (e ? t.style.gridTemplateColumns : t.style.gridTemplateRows).split(" ");
+    a[i - 1] = n;
+    const r = a.join(" ");
+    e ? t.style.gridTemplateColumns = r : t.style.gridTemplateRows = r;
+  }
+};
+s.GetNumericalSizeFromCss = (t) => t === "none" ? -1 : t.endsWith("px") ? Number(t.substring(0, t.length - 2)) : (t.endsWith("%"), -1), s.GetMinSize = (t, e) => {
+  const i = e ? t.minWidth : t.minHeight;
+  return s.GetNumericalSizeFromCss(i);
+}, s.GetMaxSize = (t, e) => {
+  const i = e ? t.maxWidth : t.maxHeight;
+  return s.GetNumericalSizeFromCss(i);
+}, s.GetClientSize = (t, e) => e ? t.offsetWidth : t.offsetHeight, s.SetSize = (t, e, i) => {
+  e ? t.width = i + "px" : t.height = i + "px";
+}, s.GetMouseDelta = (t, e) => e ? t.movementX : t.movementY, s.CheckForFlexGrow = (t, e) => {
+  t.style.flexGrow != "unset" && (s.SetSize(t.style, e, s.GetClientSize(t, e)), t.style.flexGrow = "unset", t.style.flexBasis = "unset");
+};
+let o = s;
+export {
+  o as ResizeUtils
+};

package/dist/components/FlexBox/index.js

@@ -0,0 +1,8 @@
+import { FlexBox as x } from "./FlexBox.js";
+import { FlexBoxItem as m } from "./FlexBoxItem/FlexBoxItem.js";
+import { FlexBoxItemResizer as f } from "./FlexBoxItemResizer/FlexBoxItemResizer.js";
+export {
+  x as FlexBox,
+  m as FlexBoxItem,
+  f as FlexBoxItemResizer
+};