@ynput/ayon-frontend-shared 0.3.50 → 0.3.52

package/dist/shared/src/containers/NewEntity/components/FolderSequence.es.js

@@ -0,0 +1,309 @@
+import { j as e } from "../../../../../_virtual/jsx-runtime.es.js";
+import { Icon as b, InputText as W, Button as y, InputSwitch as oe, InputNumber as K, Spacer as ce } from "@ynput/ayon-react-components";
+import M from "clsx";
+import { TaskContainer as fe, SequenceForm as _, FolderSequenceWrapper as de, RowWrapper as ue, AddButtons as me, SequenceContainer as xe, InputColumn as u, Prefix as he, Example as pe, Children as je } from "./FolderSequence.styled.es.js";
+import { useState as z, useRef as P, useEffect as ge, useLayoutEffect as be } from "react";
+import { getSequence as O } from "../util/getSequence.es.js";
+import Z from "./TypeEditor.es.js";
+import { newEntityDefinitions as q } from "../util/entityDefinitions.es.js";
+function ye(i, C, p = "") {
+  if (i.length <= C)
+    return i.map((n) => p + n).join(", ");
+  {
+    const n = i.slice(0, Math.ceil(C / 2)).map((r) => p + r), j = i.slice(-1).map((r) => p + r);
+    return `${n.join(", ")} ... ${j.join(", ")}`;
+  }
+}
+function G(i) {
+  return i === "Shot" ? {
+    base: "0010",
+    increment: "0020",
+    length: 10,
+    difference: 10
+  } : {
+    base: "001",
+    increment: "002",
+    length: 10,
+    difference: 1
+  };
+}
+const Te = ({
+  onChange: i,
+  parentId: C = null,
+  children: p,
+  depth: n,
+  onNew: j,
+  index: r,
+  nesting: s = !0,
+  isRoot: H,
+  parentLabel: J,
+  prefixDisabled: Q,
+  typeSelectRef: U,
+  onLastInputKeydown: X,
+  folders: S,
+  ...I
+}) => {
+  const { base: v, increment: T, length: D, type: B, id: a, prefix: m, prefixDepth: Y, parentBases: E } = I, F = I.entityType, L = !s && H || Q;
+  let A = [];
+  v && T && D && (A = O(v, T, D));
+  const [ee, te] = z(A), R = P(null), V = P(null), o = (l) => {
+    l?.preventDefault && l?.preventDefault();
+    let { value: x, id: g } = l.target;
+    g === "prefixDepth" && (x = parseInt(String(x), 10));
+    const re = { [g]: x }, t = { ...I, ...re };
+    if (g === "type") {
+      let c = !1;
+      const f = S.find((d) => d.name === x);
+      for (const d of S) {
+        if (t.base === "") {
+          c = !0;
+          break;
+        }
+        for (const N in d)
+          if (typeof d[N] == "string" && t.base?.toLowerCase().includes(d[N].toLowerCase())) {
+            c = !0;
+            break;
+          }
+      }
+      if (!c || !f) return;
+      const w = F === "folder" && f.shortName || f.name, h = G(String(x));
+      t.base = w + h.base, t.increment = w + h.increment, t.length = h.length;
+    }
+    if (g === "base") {
+      const c = G(t.type), f = String(x), w = f.replace(/[^a-zA-Z]/g, ""), h = f.replace(/[^0-9]/g, ""), d = parseInt(h, 10), N = h.length, ae = w + (d + c.difference).toString().padStart(N, "0");
+      t.increment = ae.replace("NaN", "");
+    }
+    if (i(
+      t,
+      typeof a == "string" ? a : void 0,
+      F
+    ), t.base && t.increment && t.length) {
+      const c = O(t.base, t.increment, t.length);
+      te(c);
+    }
+    g === "type" && setTimeout(L ? () => {
+      R.current?.focus(), R.current?.select();
+    } : () => {
+      V.current?.focus();
+    }, 50);
+  }, [$, ne] = z(!0);
+  ge(
+    () => {
+      const l = setTimeout(() => {
+        ne(!1);
+      }, 1e3);
+      return () => clearTimeout(l);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const se = ye(ee, 5, m ? J : void 0), k = P(null), [le, ie] = z(0);
+  return be(() => {
+    k.current && ie(k.current.offsetWidth);
+  }, [k.current, m]), F === "task" ? /* @__PURE__ */ e.jsx(
+    fe,
+    {
+      className: M("task", { "is-new": $, nesting: s, "no-nesting": !s }),
+      style: { zIndex: 100 - (n ?? 0) - (r ?? 0) },
+      children: /* @__PURE__ */ e.jsxs(_, { className: "form", children: [
+        /* @__PURE__ */ e.jsx(b, { icon: "task_alt" }),
+        /* @__PURE__ */ e.jsx("strong", { children: "Task" }),
+        /* @__PURE__ */ e.jsx("label", { children: "Type" }),
+        /* @__PURE__ */ e.jsx(
+          Z,
+          {
+            value: [B],
+            onChange: (l) => o({ target: { value: l, id: "type" } }),
+            options: S,
+            style: { width: 160 },
+            align: "right"
+          }
+        ),
+        /* @__PURE__ */ e.jsx("label", { children: "label" }),
+        /* @__PURE__ */ e.jsx(
+          W,
+          {
+            value: v,
+            id: "base",
+            onChange: o,
+            placeholder: "compositing...",
+            autoComplete: "off"
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          y,
+          {
+            icon: "close",
+            variant: "text",
+            onClick: () => i({ id: a, delete: !0 }, C),
+            className: "delete"
+          }
+        )
+      ] })
+    }
+  ) : /* @__PURE__ */ e.jsxs(de, { className: "folder", children: [
+    /* @__PURE__ */ e.jsxs(ue, { className: "seq", style: { zIndex: 100 - (n ?? 0) - (r ?? 0) }, children: [
+      s && /* @__PURE__ */ e.jsxs(me, { className: "buttons", children: [
+        /* @__PURE__ */ e.jsxs(_, { children: [
+          n === 0 && /* @__PURE__ */ e.jsx(
+            y,
+            {
+              icon: "south",
+              onClick: () => j?.(null),
+              label: "Root",
+              title: "add root folder"
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            y,
+            {
+              icon: q.folder.icon,
+              onClick: () => a && j?.(a, "folder"),
+              label: n === 0 ? q.folder.label : void 0,
+              title: "add nested folder"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          y,
+          {
+            icon: q.task.icon,
+            onClick: () => a && j?.(a, "task"),
+            label: n === 0 ? q.task.label : void 0,
+            title: "add nested task",
+            style: { width: "max-content", marginLeft: "auto" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs(
+        xe,
+        {
+          className: M({ "is-new": $, "no-nesting": !s }),
+          ref: k,
+          children: [
+            /* @__PURE__ */ e.jsxs(_, { className: "form folder", children: [
+              /* @__PURE__ */ e.jsxs(u, { children: [
+                /* @__PURE__ */ e.jsx("label", { children: "Type" }),
+                /* @__PURE__ */ e.jsx(
+                  Z,
+                  {
+                    value: [B],
+                    onChange: (l) => o({ target: { value: l, id: "type" } }),
+                    options: S,
+                    style: { width: 160 },
+                    align: "right",
+                    ref: U
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsx(b, { icon: "trending_flat" }),
+              (n !== 0 || !s) && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                  /* @__PURE__ */ e.jsxs(u, { children: [
+                    /* @__PURE__ */ e.jsx("label", { children: "Prefix" }),
+                    /* @__PURE__ */ e.jsx(
+                      oe,
+                      {
+                        checked: m,
+                        id: "prefix",
+                        onChange: () => o({ target: { value: !m, id: "prefix" } }),
+                        disabled: L,
+                        ref: V,
+                        switchStyle: { margin: "4px 0" }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e.jsx(b, { icon: "trending_flat" })
+                ] }),
+                s && m && /* @__PURE__ */ e.jsxs(u, { children: [
+                  /* @__PURE__ */ e.jsx("label", { children: "Depth" }),
+                  /* @__PURE__ */ e.jsx(
+                    K,
+                    {
+                      value: Y,
+                      id: "prefixDepth",
+                      onChange: o,
+                      max: E?.length,
+                      min: 0
+                    }
+                  )
+                ] })
+              ] }),
+              E && s && /* @__PURE__ */ e.jsx(u, { style: { display: m ? "flex" : "none" }, children: /* @__PURE__ */ e.jsx(he, { children: E.join("") }) }),
+              /* @__PURE__ */ e.jsxs(u, { className: "seq", children: [
+                /* @__PURE__ */ e.jsx("label", { children: "First Name" }),
+                /* @__PURE__ */ e.jsx(
+                  W,
+                  {
+                    value: v,
+                    id: "base",
+                    ref: R,
+                    onChange: o,
+                    placeholder: "ep101...",
+                    autoComplete: "off"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsx(b, { icon: "trending_flat" }),
+              /* @__PURE__ */ e.jsxs(u, { className: "seq", children: [
+                /* @__PURE__ */ e.jsx("label", { children: "Second Name" }),
+                /* @__PURE__ */ e.jsx(
+                  W,
+                  {
+                    value: T,
+                    id: "increment",
+                    onChange: o,
+                    placeholder: "ep102...",
+                    autoComplete: "off"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsx(b, { icon: "trending_flat" }),
+              /* @__PURE__ */ e.jsxs(u, { children: [
+                /* @__PURE__ */ e.jsx("label", { children: "Count" }),
+                /* @__PURE__ */ e.jsx(
+                  K,
+                  {
+                    value: D,
+                    id: "length",
+                    onChange: o,
+                    placeholder: "15...",
+                    min: 2,
+                    onFocus: (l) => l.target.select(),
+                    onKeyDown: X
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsx(ce, {}),
+              s && /* @__PURE__ */ e.jsx(
+                y,
+                {
+                  icon: "close",
+                  variant: "text",
+                  onClick: () => i({ id: a, delete: !0 }),
+                  disabled: n === 0 && r === 0
+                }
+              )
+            ] }),
+            !s && /* @__PURE__ */ e.jsxs(pe, { children: [
+              "Example: ",
+              se
+            ] })
+          ]
+        }
+      )
+    ] }),
+    s && /* @__PURE__ */ e.jsx(
+      je,
+      {
+        className: "children",
+        style: { width: le, zIndex: 99 - (n ?? 0) - (r ?? 0) },
+        children: p
+      }
+    )
+  ] });
+};
+export {
+  Te as default
+};
+//# sourceMappingURL=FolderSequence.es.js.map

package/dist/shared/src/containers/NewEntity/components/FolderSequence.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderSequence.es.js","sources":["../../../../../../src/containers/NewEntity/components/FolderSequence.tsx"],"sourcesContent":["import {\n  Button,\n  Icon,\n  InputNumber,\n  InputSwitch,\n  InputText,\n  Spacer,\n} from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport * as Styled from './FolderSequence.styled'\nimport React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { getSequence } from '../util/getSequence'\nimport TypeEditor from './TypeEditor'\nimport { newEntityDefinitions } from '../util/entityDefinitions'\n\ninterface SequenceTypeOption {\n  name: string\n  shortName?: string\n  [key: string]: unknown\n}\n\ntype SequenceEntityType = 'folder' | 'task'\n\ninterface SequenceValues {\n  id?: string\n  entityType?: SequenceEntityType\n  base?: string\n  increment?: string\n  length?: number\n  type?: string\n  prefix?: boolean\n  prefixDepth?: number\n  parentBases?: string[]\n  [key: string]: unknown\n}\n\ninterface SequenceChangeEvent {\n  preventDefault?: () => void\n  target: {\n    value: string | number | boolean\n    id: string\n  }\n}\n\ninterface FolderSequenceProps extends SequenceValues {\n  onChange: (value: SequenceValues, id?: string | null, entityType?: SequenceEntityType) => void\n  parentId?: string | null\n  children?: ReactNode\n  depth?: number\n  onNew?: (parentId: string | null, entityType?: SequenceEntityType) => void\n  index?: number\n  nesting?: boolean\n  isRoot?: boolean\n  parentLabel?: string\n  prefixDisabled?: boolean\n  typeSelectRef?: React.RefObject<HTMLElement>\n  onLastInputKeydown?: (event: React.KeyboardEvent<HTMLInputElement>) => void\n  folders: SequenceTypeOption[]\n}\n\nfunction formatSeq(arr: string[], maxLength: number, prefix = ''): string {\n  if (arr.length <= maxLength) {\n    return arr.map((item) => prefix + item).join(', ')\n  } else {\n    const firstItems = arr.slice(0, Math.ceil(maxLength / 2)).map((item) => prefix + item)\n    const lastItems = arr.slice(-1).map((item) => prefix + item)\n    return `${firstItems.join(', ')} ... ${lastItems.join(', ')}`\n  }\n}\n\nfunction getDefaultIncrements(type?: string): {\n  base: string\n  increment: string\n  length: number\n  difference: number\n} {\n  switch (type) {\n    case 'Shot':\n      return {\n        base: '0010',\n        increment: '0020',\n        length: 10,\n        difference: 10,\n      }\n    default:\n      return {\n        base: '001',\n        increment: '002',\n        length: 10,\n        difference: 1,\n      }\n  }\n}\n\nconst FolderSequence: React.FC<FolderSequenceProps> = ({\n  onChange,\n  parentId = null,\n  children,\n  depth,\n  onNew,\n  index,\n  nesting = true,\n  isRoot,\n  parentLabel,\n  prefixDisabled,\n  typeSelectRef,\n  onLastInputKeydown,\n  folders,\n  ...props\n}) => {\n  const { base, increment, length, type, id, prefix, prefixDepth, parentBases } = props\n  const entityType = props.entityType as SequenceEntityType | undefined\n\n  const disablePrefix = (!nesting && isRoot) || prefixDisabled\n\n  let initSeq: string[] = []\n  if (base && increment && length) {\n    initSeq = getSequence(base, increment, length)\n  }\n\n  const [sequence, setSequence] = useState<string[]>(initSeq)\n\n  const baseRef = useRef<HTMLInputElement>(null)\n  const prefixRef = useRef<HTMLInputElement>(null)\n  const handleChange = (e: SequenceChangeEvent): void => {\n    e?.preventDefault && e?.preventDefault()\n\n    let { value, id: fieldId } = e.target\n\n    if (fieldId === 'prefixDepth') {\n      // convert to number\n      value = parseInt(String(value), 10)\n    }\n\n    const newValue = { [fieldId]: value }\n\n    const newState: SequenceValues = { ...props, ...newValue }\n\n    // if changing type, look to change base and increment\n    if (fieldId === 'type') {\n      // changing type\n      // update name if newState.name matches any values in typeOptions\n      let matches = false\n      // loop through typeOptions and check if any match, when match is found we can stop looping\n      // Search through the folders array (not object)\n      const typeOption = folders.find((folder) => folder.name === value)\n\n      for (const option of folders) {\n        if (newState.base === '') {\n          matches = true\n          break\n        }\n\n        for (const key in option) {\n          if (\n            typeof option[key] === 'string' &&\n            newState.base?.toLowerCase().includes((option[key] as string).toLowerCase())\n          ) {\n            matches = true\n            break\n          }\n        }\n      }\n\n      if (!matches || !typeOption) return\n      // if name is same as type, update name\n      const newName =\n        entityType === 'folder' ? typeOption.shortName || typeOption.name : typeOption.name\n      // add new state to new value\n\n      // get default increments\n      const suffixes = getDefaultIncrements(String(value))\n\n      newState.base = newName + suffixes.base\n      newState.increment = newName + suffixes.increment\n      newState.length = suffixes.length\n    }\n\n    if (fieldId === 'base') {\n      // get default increments\n      const suffixes = getDefaultIncrements(newState.type)\n      // split value into prefix (letter) and suffix (number)\n      const stringValue = String(value)\n      const prefix = stringValue.replace(/[^a-zA-Z]/g, '')\n      const suffix = stringValue.replace(/[^0-9]/g, '')\n      // get integer value of suffix and padding\n      const suffixInt = parseInt(suffix, 10)\n      const suffixPad = suffix.length\n\n      const newIncrement =\n        prefix + (suffixInt + suffixes.difference).toString().padStart(suffixPad, '0')\n\n      newState.increment = newIncrement.replace('NaN', '')\n    }\n\n    onChange(\n      newState,\n      typeof id === 'string' ? id : undefined,\n      entityType as SequenceEntityType | undefined,\n    )\n\n    if (newState.base && newState.increment && newState.length) {\n      // calculate the sequence\n      const seq = getSequence(newState.base, newState.increment, newState.length)\n      setSequence(seq)\n    }\n\n    // focus switch if not disabled else base input if changing type\n    if (fieldId === 'type') {\n      if (disablePrefix) {\n        setTimeout(() => {\n          baseRef.current?.focus()\n          baseRef.current?.select()\n        }, 50)\n      } else {\n        setTimeout(() => {\n          prefixRef.current?.focus()\n        }, 50)\n      }\n    }\n  }\n\n  // when first mounting, it's a new item\n  const [isNew, setIsNew] = useState(true)\n  // after 3 seconds, it's no longer new\n  useEffect(\n    () => {\n      const timer = setTimeout(() => {\n        setIsNew(false)\n      }, 1000)\n      return () => clearTimeout(timer)\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  )\n\n  const sequenceString = formatSeq(sequence, 5, prefix ? parentLabel : undefined)\n\n  const seqRef = useRef<HTMLDivElement>(null)\n  const [seqWidth, setSeqWidth] = useState(0)\n  useLayoutEffect(() => {\n    if (seqRef.current) {\n      setSeqWidth(seqRef.current.offsetWidth)\n    }\n  }, [seqRef.current, prefix])\n\n  if (entityType === 'task') {\n    return (\n      <Styled.TaskContainer\n        className={clsx('task', { 'is-new': isNew, nesting, 'no-nesting': !nesting })}\n        style={{ zIndex: 100 - (depth ?? 0) - (index ?? 0) }}\n      >\n        <Styled.SequenceForm className=\"form\">\n          <Icon icon=\"task_alt\" />\n          <strong>Task</strong>\n\n          <label>Type</label>\n          <TypeEditor\n            value={[type]}\n            onChange={(v: string) => handleChange({ target: { value: v, id: 'type' } })}\n            options={folders}\n            style={{ width: 160 }}\n            align=\"right\"\n          />\n\n          <label>label</label>\n          <InputText\n            value={base}\n            id={'base'}\n            onChange={handleChange}\n            placeholder=\"compositing...\"\n            autoComplete=\"off\"\n          />\n\n          <Button\n            icon={'close'}\n            variant=\"text\"\n            onClick={() => onChange({ id, delete: true }, parentId)}\n            className=\"delete\"\n          />\n        </Styled.SequenceForm>\n      </Styled.TaskContainer>\n    )\n  }\n\n  return (\n    <Styled.FolderSequenceWrapper className=\"folder\">\n      <Styled.RowWrapper className=\"seq\" style={{ zIndex: 100 - (depth ?? 0) - (index ?? 0) }}>\n        {nesting && (\n          <Styled.AddButtons className=\"buttons\">\n            <Styled.SequenceForm>\n              {/* add new root folder */}\n              {depth === 0 && (\n                <Button\n                  icon={'south'}\n                  onClick={() => onNew?.(null)}\n                  label=\"Root\"\n                  title=\"add root folder\"\n                />\n              )}\n              {/* provide it's parents id for new sibling */}\n              <Button\n                icon={newEntityDefinitions.folder.icon}\n                onClick={() => id && onNew?.(id, 'folder')}\n                label={depth === 0 ? newEntityDefinitions.folder.label : undefined}\n                title=\"add nested folder\"\n              />\n            </Styled.SequenceForm>\n            {/* provide it's own id for new child */}\n            <Button\n              icon={newEntityDefinitions.task.icon}\n              onClick={() => id && onNew?.(id, 'task')}\n              label={depth === 0 ? newEntityDefinitions.task.label : undefined}\n              title=\"add nested task\"\n              style={{ width: 'max-content', marginLeft: 'auto' }}\n            />\n          </Styled.AddButtons>\n        )}\n        <Styled.SequenceContainer\n          className={clsx({ 'is-new': isNew, 'no-nesting': !nesting })}\n          ref={seqRef}\n        >\n          <Styled.SequenceForm className=\"form folder\">\n            <Styled.InputColumn>\n              <label>Type</label>\n              <TypeEditor\n                value={[type]}\n                onChange={(v: string) => handleChange({ target: { value: v, id: 'type' } })}\n                options={folders}\n                style={{ width: 160 }}\n                align=\"right\"\n                ref={typeSelectRef}\n              />\n            </Styled.InputColumn>\n\n            <Icon icon=\"trending_flat\" />\n\n            {(depth !== 0 || !nesting) && (\n              <>\n                <>\n                  <Styled.InputColumn>\n                    <label>Prefix</label>\n                    <InputSwitch\n                      checked={prefix}\n                      id={'prefix'}\n                      onChange={() => handleChange({ target: { value: !prefix, id: 'prefix' } })}\n                      disabled={disablePrefix}\n                      ref={prefixRef}\n                      switchStyle={{ margin: '4px 0' }}\n                    />\n                  </Styled.InputColumn>\n                  <Icon icon=\"trending_flat\" />\n                </>\n\n                {nesting && prefix && (\n                  <Styled.InputColumn>\n                    <label>Depth</label>\n                    <InputNumber\n                      value={prefixDepth}\n                      id={'prefixDepth'}\n                      onChange={handleChange}\n                      max={parentBases?.length}\n                      min={0}\n                    />\n                  </Styled.InputColumn>\n                )}\n              </>\n            )}\n\n            {parentBases && nesting && (\n              <Styled.InputColumn style={{ display: prefix ? 'flex' : 'none' }}>\n                <Styled.Prefix>{parentBases.join('')}</Styled.Prefix>\n              </Styled.InputColumn>\n            )}\n\n            <Styled.InputColumn className=\"seq\">\n              <label>First Name</label>\n              <InputText\n                value={base}\n                id={'base'}\n                ref={baseRef}\n                onChange={handleChange}\n                placeholder=\"ep101...\"\n                autoComplete=\"off\"\n              />\n            </Styled.InputColumn>\n            <Icon icon=\"trending_flat\" />\n            <Styled.InputColumn className=\"seq\">\n              <label>Second Name</label>\n              <InputText\n                value={increment}\n                id={'increment'}\n                onChange={handleChange}\n                placeholder=\"ep102...\"\n                autoComplete=\"off\"\n              />\n            </Styled.InputColumn>\n            <Icon icon=\"trending_flat\" />\n            <Styled.InputColumn>\n              <label>Count</label>\n              <InputNumber\n                value={length}\n                id={'length'}\n                onChange={handleChange}\n                placeholder=\"15...\"\n                min={2}\n                onFocus={(e) => e.target.select()}\n                onKeyDown={onLastInputKeydown}\n              />\n            </Styled.InputColumn>\n\n            <Spacer />\n            {nesting && (\n              <Button\n                icon={'close'}\n                variant=\"text\"\n                onClick={() => onChange({ id, delete: true })}\n                disabled={depth === 0 && index === 0}\n              />\n            )}\n          </Styled.SequenceForm>\n          {!nesting && <Styled.Example>Example: {sequenceString}</Styled.Example>}\n        </Styled.SequenceContainer>\n      </Styled.RowWrapper>\n      {nesting && (\n        <Styled.Children\n          className=\"children\"\n          style={{ width: seqWidth, zIndex: 99 - (depth ?? 0) - (index ?? 0) }}\n        >\n          {children}\n        </Styled.Children>\n      )}\n    </Styled.FolderSequenceWrapper>\n  )\n}\n\nexport default FolderSequence\n"],"names":["formatSeq","arr","maxLength","prefix","item","firstItems","lastItems","getDefaultIncrements","type","FolderSequence","onChange","parentId","children","depth","onNew","index","nesting","isRoot","parentLabel","prefixDisabled","typeSelectRef","onLastInputKeydown","folders","props","base","increment","length","id","prefixDepth","parentBases","entityType","disablePrefix","initSeq","getSequence","sequence","setSequence","useState","baseRef","useRef","prefixRef","handleChange","e","value","fieldId","newValue","newState","matches","typeOption","folder","option","key","newName","suffixes","stringValue","suffix","suffixInt","suffixPad","newIncrement","seq","isNew","setIsNew","useEffect","timer","sequenceString","seqRef","seqWidth","setSeqWidth","useLayoutEffect","jsx","Styled.TaskContainer","clsx","jsxs","Styled.SequenceForm","Icon","TypeEditor","v","InputText","Button","Styled.FolderSequenceWrapper","Styled.RowWrapper","Styled.AddButtons","newEntityDefinitions","Styled.SequenceContainer","Styled.InputColumn","Fragment","InputSwitch","InputNumber","Styled.Prefix","Spacer","Styled.Example","Styled.Children"],"mappings":"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"}

package/dist/shared/src/containers/NewEntity/components/FolderSequence.styled.cjs.js

@@ -0,0 +1,122 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),n=e.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+  width: 100%;
+  align-items: flex-end;
+
+  .seq {
+    /* flex: 1; */
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  &.task {
+    width: 100%;
+  }
+`,o=e.div`
+  display: flex;
+  flex-direction: column;
+  /* panel */
+  background-color: var(--md-sys-color-surface-container-high);
+  padding: 7px 4px;
+  border-radius: var(--border-radius);
+  border: 1px solid transparent;
+  z-index: 10;
+  width: 100%;
+
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+
+  &.is-new {
+    /* highlight new items */
+    background-color: var(--md-sys-color-secondary-container);
+    border-color: var(--md-sys-color-primary);
+  }
+
+  &.no-nesting {
+    background-color: unset;
+    border: none;
+  }
+
+  .icon {
+    font-size: 20px;
+  }
+
+  .form > .icon {
+    padding: 5px 0;
+  }
+`,r=e(o)`
+  & > div {
+    align-items: center;
+  }
+
+  border-radius: var(--border-radius-l);
+  padding-bottom: 4px;
+  padding: 2px 4px;
+`,i=e.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: var(--base-gap-small);
+  width: 100%;
+  .delete {
+    margin-left: auto;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+`,a=e.div`
+  display: flex;
+  flex-direction: column;
+  width: min-content;
+
+  /* input type number */
+  #length {
+    width: 90px;
+  }
+
+  #prefix {
+    width: 53px;
+  }
+
+  label {
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`,t=e.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+  justify-content: flex-end;
+
+  /* has no children then display none */
+  &:empty {
+    display: none;
+  }
+  width: 100%;
+`,d=e.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--base-gap-small);
+  width: 100%;
+`,l=e.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+  z-index: 10;
+`,s=e.span``,p=e.span`
+  background-color: var(--md-sys-color-surface-container-low);
+  padding: 5px 8px;
+  border-radius: var(--border-radius);
+  position: relative;
+  top: -1px;
+  right: -3px;
+
+  color: var(--md-sys-color-outline);
+  min-height: 30px;
+`;exports.AddButtons=l;exports.Children=t;exports.Example=s;exports.FolderSequenceWrapper=n;exports.InputColumn=a;exports.Prefix=p;exports.RowWrapper=d;exports.SequenceContainer=o;exports.SequenceForm=i;exports.TaskContainer=r;
+//# sourceMappingURL=FolderSequence.styled.cjs.js.map

package/dist/shared/src/containers/NewEntity/components/FolderSequence.styled.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderSequence.styled.cjs.js","sources":["../../../../../../src/containers/NewEntity/components/FolderSequence.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const FolderSequenceWrapper = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  width: 100%;\n  align-items: flex-end;\n\n  .seq {\n    /* flex: 1; */\n    flex-grow: 1;\n    width: 100%;\n  }\n\n  &.task {\n    width: 100%;\n  }\n`\n\nexport const SequenceContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* panel */\n  background-color: var(--md-sys-color-surface-container-high);\n  padding: 7px 4px;\n  border-radius: var(--border-radius);\n  border: 1px solid transparent;\n  z-index: 10;\n  width: 100%;\n\n  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n\n  &.is-new {\n    /* highlight new items */\n    background-color: var(--md-sys-color-secondary-container);\n    border-color: var(--md-sys-color-primary);\n  }\n\n  &.no-nesting {\n    background-color: unset;\n    border: none;\n  }\n\n  .icon {\n    font-size: 20px;\n  }\n\n  .form > .icon {\n    padding: 5px 0;\n  }\n`\nexport const TaskContainer = styled(SequenceContainer)`\n  & > div {\n    align-items: center;\n  }\n\n  border-radius: var(--border-radius-l);\n  padding-bottom: 4px;\n  padding: 2px 4px;\n`\n\nexport const SequenceForm = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  gap: var(--base-gap-small);\n  width: 100%;\n  .delete {\n    margin-left: auto;\n  }\n\n  strong {\n    font-weight: 700;\n  }\n`\n\nexport const InputColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: min-content;\n\n  /* input type number */\n  #length {\n    width: 90px;\n  }\n\n  #prefix {\n    width: 53px;\n  }\n\n  label {\n    width: 100%;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`\n\nexport const Children = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  justify-content: flex-end;\n\n  /* has no children then display none */\n  &:empty {\n    display: none;\n  }\n  width: 100%;\n`\n\nexport const RowWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--base-gap-small);\n  width: 100%;\n`\n\nexport const AddButtons = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  z-index: 10;\n`\n\nexport const Example = styled.span``\n\nexport const Prefix = styled.span`\n  background-color: var(--md-sys-color-surface-container-low);\n  padding: 5px 8px;\n  border-radius: var(--border-radius);\n  position: relative;\n  top: -1px;\n  right: -3px;\n\n  color: var(--md-sys-color-outline);\n  min-height: 30px;\n`\n"],"names":["FolderSequenceWrapper","styled","SequenceContainer","TaskContainer","SequenceForm","InputColumn","Children","RowWrapper","AddButtons","Example","Prefix"],"mappings":"qHAEaA,EAAwBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmB/BC,EAAoBD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgC3BE,EAAgBF,EAAOC,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUxCE,EAAeH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAetBI,EAAcJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBrBK,EAAWL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAalBM,EAAaN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpBO,EAAaP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOpBQ,EAAUR,EAAO,OAEjBS,EAAST,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/shared/src/containers/NewEntity/components/FolderSequence.styled.es.js

@@ -0,0 +1,135 @@
+import e from "styled-components";
+const n = e.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+  width: 100%;
+  align-items: flex-end;
+
+  .seq {
+    /* flex: 1; */
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  &.task {
+    width: 100%;
+  }
+`, o = e.div`
+  display: flex;
+  flex-direction: column;
+  /* panel */
+  background-color: var(--md-sys-color-surface-container-high);
+  padding: 7px 4px;
+  border-radius: var(--border-radius);
+  border: 1px solid transparent;
+  z-index: 10;
+  width: 100%;
+
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+
+  &.is-new {
+    /* highlight new items */
+    background-color: var(--md-sys-color-secondary-container);
+    border-color: var(--md-sys-color-primary);
+  }
+
+  &.no-nesting {
+    background-color: unset;
+    border: none;
+  }
+
+  .icon {
+    font-size: 20px;
+  }
+
+  .form > .icon {
+    padding: 5px 0;
+  }
+`, r = e(o)`
+  & > div {
+    align-items: center;
+  }
+
+  border-radius: var(--border-radius-l);
+  padding-bottom: 4px;
+  padding: 2px 4px;
+`, a = e.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: var(--base-gap-small);
+  width: 100%;
+  .delete {
+    margin-left: auto;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+`, t = e.div`
+  display: flex;
+  flex-direction: column;
+  width: min-content;
+
+  /* input type number */
+  #length {
+    width: 90px;
+  }
+
+  #prefix {
+    width: 53px;
+  }
+
+  label {
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`, d = e.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+  justify-content: flex-end;
+
+  /* has no children then display none */
+  &:empty {
+    display: none;
+  }
+  width: 100%;
+`, l = e.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--base-gap-small);
+  width: 100%;
+`, s = e.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+  z-index: 10;
+`, p = e.span``, c = e.span`
+  background-color: var(--md-sys-color-surface-container-low);
+  padding: 5px 8px;
+  border-radius: var(--border-radius);
+  position: relative;
+  top: -1px;
+  right: -3px;
+
+  color: var(--md-sys-color-outline);
+  min-height: 30px;
+`;
+export {
+  s as AddButtons,
+  d as Children,
+  p as Example,
+  n as FolderSequenceWrapper,
+  t as InputColumn,
+  c as Prefix,
+  l as RowWrapper,
+  o as SequenceContainer,
+  a as SequenceForm,
+  r as TaskContainer
+};
+//# sourceMappingURL=FolderSequence.styled.es.js.map

package/dist/shared/src/containers/NewEntity/components/FolderSequence.styled.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderSequence.styled.es.js","sources":["../../../../../../src/containers/NewEntity/components/FolderSequence.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const FolderSequenceWrapper = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  width: 100%;\n  align-items: flex-end;\n\n  .seq {\n    /* flex: 1; */\n    flex-grow: 1;\n    width: 100%;\n  }\n\n  &.task {\n    width: 100%;\n  }\n`\n\nexport const SequenceContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* panel */\n  background-color: var(--md-sys-color-surface-container-high);\n  padding: 7px 4px;\n  border-radius: var(--border-radius);\n  border: 1px solid transparent;\n  z-index: 10;\n  width: 100%;\n\n  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n\n  &.is-new {\n    /* highlight new items */\n    background-color: var(--md-sys-color-secondary-container);\n    border-color: var(--md-sys-color-primary);\n  }\n\n  &.no-nesting {\n    background-color: unset;\n    border: none;\n  }\n\n  .icon {\n    font-size: 20px;\n  }\n\n  .form > .icon {\n    padding: 5px 0;\n  }\n`\nexport const TaskContainer = styled(SequenceContainer)`\n  & > div {\n    align-items: center;\n  }\n\n  border-radius: var(--border-radius-l);\n  padding-bottom: 4px;\n  padding: 2px 4px;\n`\n\nexport const SequenceForm = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  gap: var(--base-gap-small);\n  width: 100%;\n  .delete {\n    margin-left: auto;\n  }\n\n  strong {\n    font-weight: 700;\n  }\n`\n\nexport const InputColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: min-content;\n\n  /* input type number */\n  #length {\n    width: 90px;\n  }\n\n  #prefix {\n    width: 53px;\n  }\n\n  label {\n    width: 100%;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`\n\nexport const Children = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  justify-content: flex-end;\n\n  /* has no children then display none */\n  &:empty {\n    display: none;\n  }\n  width: 100%;\n`\n\nexport const RowWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--base-gap-small);\n  width: 100%;\n`\n\nexport const AddButtons = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  z-index: 10;\n`\n\nexport const Example = styled.span``\n\nexport const Prefix = styled.span`\n  background-color: var(--md-sys-color-surface-container-low);\n  padding: 5px 8px;\n  border-radius: var(--border-radius);\n  position: relative;\n  top: -1px;\n  right: -3px;\n\n  color: var(--md-sys-color-outline);\n  min-height: 30px;\n`\n"],"names":["FolderSequenceWrapper","styled","SequenceContainer","TaskContainer","SequenceForm","InputColumn","Children","RowWrapper","AddButtons","Example","Prefix"],"mappings":";AAEO,MAAMA,IAAwBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmB/BC,IAAoBD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgC3BE,IAAgBF,EAAOC,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUxCE,IAAeH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAetBI,IAAcJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAqBrBK,IAAWL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAalBM,IAAaN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQpBO,IAAaP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOpBQ,IAAUR,EAAO,QAEjBS,IAAST,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}