@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/Tags/primitives/TagsPrimitive.stories.js

@@ -1,185 +1,211 @@
-import React from "react";
-import { ReactComponent as TagIcon } from "@webiny/icons/tag.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/tag.svg";
 import { TagsPrimitive } from "./TagsPrimitive.js";
 import { Button } from "../../Button/index.js";
 import { Icon } from "../../Icon/index.js";
 const meta = {
-  title: "Components/Form Primitives/Tags",
-  component: TagsPrimitive,
-  argTypes: {
-    onChange: {
-      action: "onChange"
+    title: "Components/Form Primitives/Tags",
+    component: TagsPrimitive,
+    argTypes: {
+        onChange: {
+            action: "onChange"
+        },
+        onValueInput: {
+            action: "onValueInput"
+        },
+        onValueAdd: {
+            action: "onValueAdd"
+        },
+        onValueRemove: {
+            action: "onValueRemove"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
     },
-    onValueInput: {
-      action: "onValueInput"
+    parameters: {
+        layout: "padded"
     },
-    onValueAdd: {
-      action: "onValueAdd"
+    render: (args)=>/*#__PURE__*/ react.createElement(TagsPrimitive, args)
+};
+const TagsPrimitive_stories = meta;
+const Default = {};
+const MediumSize = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+const LargeSize = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+const ExtraLargeSize = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+const PrimaryVariant = {
+    args: {
+        ...Default.args,
+        variant: "primary"
+    }
+};
+const PrimaryVariantDisabled = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+const PrimaryVariantInvalid = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+const SecondaryVariant = {
+    args: {
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+const SecondaryVariantDisabled = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+const SecondaryVariantInvalid = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+const GhostVariant = {
+    args: {
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+const GhostVariantDisabled = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+const GhostVariantInvalid = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+const GhostNegativeVariant = {
+    args: {
+        ...Default.args,
+        variant: "ghost-negative",
+        placeholder: "Custom placeholder"
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark text-neutral-light p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const GhostNegativeVariantDisabled = {
+    args: {
+        ...GhostNegativeVariant.args,
+        disabled: true
     },
-    onValueRemove: {
-      action: "onValueRemove"
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark text-neutral-light p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const GhostNegativeVariantInvalid = {
+    args: {
+        ...GhostNegativeVariant.args,
+        invalid: true
     },
-    disabled: {
-      control: "boolean",
-      defaultValue: false
-    }
-  },
-  parameters: {
-    layout: "padded"
-  },
-  render: args => /*#__PURE__*/React.createElement(TagsPrimitive, args)
-};
-export default meta;
-export const Default = {};
-export const MediumSize = {
-  args: {
-    ...Default.args,
-    size: "md"
-  }
-};
-export const LargeSize = {
-  args: {
-    ...Default.args,
-    size: "lg"
-  }
-};
-export const ExtraLargeSize = {
-  args: {
-    ...Default.args,
-    size: "xl"
-  }
-};
-export const PrimaryVariant = {
-  args: {
-    ...Default.args,
-    variant: "primary"
-  }
-};
-export const PrimaryVariantDisabled = {
-  args: {
-    ...PrimaryVariant.args,
-    disabled: true
-  }
-};
-export const PrimaryVariantInvalid = {
-  args: {
-    ...PrimaryVariant.args,
-    invalid: true
-  }
-};
-export const SecondaryVariant = {
-  args: {
-    variant: "secondary",
-    placeholder: "Custom placeholder"
-  }
-};
-export const SecondaryVariantDisabled = {
-  args: {
-    ...SecondaryVariant.args,
-    disabled: true
-  }
-};
-export const SecondaryVariantInvalid = {
-  args: {
-    ...SecondaryVariant.args,
-    invalid: true
-  }
-};
-export const GhostVariant = {
-  args: {
-    variant: "ghost",
-    placeholder: "Custom placeholder"
-  }
-};
-export const GhostVariantDisabled = {
-  args: {
-    ...GhostVariant.args,
-    disabled: true
-  }
-};
-export const GhostVariantInvalid = {
-  args: {
-    ...GhostVariant.args,
-    invalid: true
-  }
-};
-export const GhostNegativeVariant = {
-  args: {
-    ...Default.args,
-    variant: "ghost-negative",
-    placeholder: "Custom placeholder"
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark text-neutral-light p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export const GhostNegativeVariantDisabled = {
-  args: {
-    ...GhostNegativeVariant.args,
-    disabled: true
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark text-neutral-light p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export const GhostNegativeVariantInvalid = {
-  args: {
-    ...GhostNegativeVariant.args,
-    invalid: true
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark text-neutral-light p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export const WithCustomPlaceholder = {
-  args: {
-    ...Default.args,
-    placeholder: "Custom placeholder"
-  }
-};
-export const WithStartIcon = {
-  args: {
-    ...Default.args,
-    startIcon: /*#__PURE__*/React.createElement(Icon, {
-      label: "Tag",
-      icon: /*#__PURE__*/React.createElement(TagIcon, null)
-    })
-  }
-};
-export const WithInitialValues = {
-  args: {
-    ...Default.args,
-    value: ["tag1", "tag2", "tag3"]
-  }
-};
-export const WithProtectedValues = {
-  args: {
-    ...Default.args,
-    value: ["tag1", "tag2", "tag3", "another-tag1", "another-tag2"],
-    protectedValues: ["tag1", "another-tag*"]
-  }
-};
-export const WithExternalValueControl = {
-  args: {
-    ...Default.args,
-    value: ["tag1", "tag2", "tag3"]
-  },
-  render: args => {
-    const [value, setValue] = React.useState(args.value || []);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(TagsPrimitive, Object.assign({}, args, {
-      value: value,
-      onChange: setValue
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, /*#__PURE__*/React.createElement(Button, {
-      text: "Reset",
-      onClick: () => setValue(args.value || [])
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, "Current selected values: ", value?.join(",")));
-  }
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark text-neutral-light p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const WithCustomPlaceholder = {
+    args: {
+        ...Default.args,
+        placeholder: "Custom placeholder"
+    }
+};
+const WithStartIcon = {
+    args: {
+        ...Default.args,
+        startIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Tag",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        })
+    }
+};
+const WithInitialValues = {
+    args: {
+        ...Default.args,
+        value: [
+            "tag1",
+            "tag2",
+            "tag3"
+        ]
+    }
+};
+const WithProtectedValues = {
+    args: {
+        ...Default.args,
+        value: [
+            "tag1",
+            "tag2",
+            "tag3",
+            "another-tag1",
+            "another-tag2"
+        ],
+        protectedValues: [
+            "tag1",
+            "another-tag*"
+        ]
+    }
+};
+const WithExternalValueControl = {
+    args: {
+        ...Default.args,
+        value: [
+            "tag1",
+            "tag2",
+            "tag3"
+        ]
+    },
+    render: (args)=>{
+        const [value, setValue] = react.useState(args.value || []);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement(TagsPrimitive, {
+            ...args,
+            value: value,
+            onChange: setValue
+        }), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, /*#__PURE__*/ react.createElement(Button, {
+            text: "Reset",
+            onClick: ()=>setValue(args.value || [])
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, "Current selected values: ", value?.join(",")));
+    }
 };
+export default TagsPrimitive_stories;
+export { Default, ExtraLargeSize, GhostNegativeVariant, GhostNegativeVariantDisabled, GhostNegativeVariantInvalid, GhostVariant, GhostVariantDisabled, GhostVariantInvalid, LargeSize, MediumSize, PrimaryVariant, PrimaryVariantDisabled, PrimaryVariantInvalid, SecondaryVariant, SecondaryVariantDisabled, SecondaryVariantInvalid, WithCustomPlaceholder, WithExternalValueControl, WithInitialValues, WithProtectedValues, WithStartIcon };
 
 //# sourceMappingURL=TagsPrimitive.stories.js.map

package/Tags/primitives/TagsPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","TagIcon","TagsPrimitive","Button","Icon","meta","title","component","argTypes","onChange","action","onValueInput","onValueAdd","onValueRemove","disabled","control","defaultValue","parameters","layout","render","args","createElement","Default","MediumSize","size","LargeSize","ExtraLargeSize","PrimaryVariant","variant","PrimaryVariantDisabled","PrimaryVariantInvalid","invalid","SecondaryVariant","placeholder","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","className","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithCustomPlaceholder","WithStartIcon","startIcon","label","icon","WithInitialValues","value","WithProtectedValues","protectedValues","WithExternalValueControl","setValue","useState","Object","assign","text","onClick","join"],"sources":["TagsPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as TagIcon } from \"@webiny/icons/tag.svg\";\nimport { TagsPrimitive } from \"./TagsPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof TagsPrimitive> = {\n    title: \"Components/Form Primitives/Tags\",\n    component: TagsPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onValueInput: { action: \"onValueInput\" },\n        onValueAdd: { action: \"onValueAdd\" },\n        onValueRemove: { action: \"onValueRemove\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => <TagsPrimitive {...args} />\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TagsPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Tag\"} icon={<TagIcon />} />\n    }\n};\n\nexport const WithInitialValues: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\"]\n    }\n};\n\nexport const WithProtectedValues: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\", \"another-tag1\", \"another-tag2\"],\n        protectedValues: [\"tag1\", \"another-tag*\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\"]\n    },\n    render: args => {\n        const [value, setValue] = React.useState<string[]>(args.value || []);\n\n        return (\n            <div className={\"w-full\"}>\n                <TagsPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(args.value || [])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {value?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tags/primitives/TagsPrimitive.stories.js","sources":["../../../src/Tags/primitives/TagsPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as TagIcon } from \"@webiny/icons/tag.svg\";\nimport { TagsPrimitive } from \"./TagsPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof TagsPrimitive> = {\n    title: \"Components/Form Primitives/Tags\",\n    component: TagsPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onValueInput: { action: \"onValueInput\" },\n        onValueAdd: { action: \"onValueAdd\" },\n        onValueRemove: { action: \"onValueRemove\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => <TagsPrimitive {...args} />\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TagsPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Tag\"} icon={<TagIcon />} />\n    }\n};\n\nexport const WithInitialValues: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\"]\n    }\n};\n\nexport const WithProtectedValues: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\", \"another-tag1\", \"another-tag2\"],\n        protectedValues: [\"tag1\", \"another-tag*\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        value: [\"tag1\", \"tag2\", \"tag3\"]\n    },\n    render: args => {\n        const [value, setValue] = React.useState<string[]>(args.value || []);\n\n        return (\n            <div className={\"w-full\"}>\n                <TagsPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(args.value || [])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {value?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","TagsPrimitive","args","Default","MediumSize","LargeSize","ExtraLargeSize","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithCustomPlaceholder","WithStartIcon","Icon","TagIcon","WithInitialValues","WithProtectedValues","WithExternalValueControl","value","setValue","React","Button"],"mappings":"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"}

package/Tags/primitives/index.js

@@ -1,3 +1 @@
 export * from "./TagsPrimitive.js";
-
-//# sourceMappingURL=index.js.map

package/Tags/primitives/presenters/TagsInputPresenter.js

@@ -1,22 +1,23 @@
 import { makeAutoObservable } from "mobx";
-export class TagsInputPresenter {
-  value = undefined;
-  placeholder = undefined;
-  constructor() {
-    makeAutoObservable(this);
-  }
-  init(params) {
-    this.placeholder = params?.placeholder;
-  }
-  get vm() {
-    return {
-      placeholder: this.placeholder || "",
-      value: this.value || ""
-    };
-  }
-  setValue = value => {
-    this.value = value;
-  };
+class TagsInputPresenter {
+    constructor(){
+        this.value = void 0;
+        this.placeholder = void 0;
+        this.setValue = (value)=>{
+            this.value = value;
+        };
+        makeAutoObservable(this);
+    }
+    init(params) {
+        this.placeholder = params?.placeholder;
+    }
+    get vm() {
+        return {
+            placeholder: this.placeholder || "",
+            value: this.value || ""
+        };
+    }
 }
+export { TagsInputPresenter };
 
 //# sourceMappingURL=TagsInputPresenter.js.map

package/Tags/primitives/presenters/TagsInputPresenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","TagsInputPresenter","value","undefined","placeholder","constructor","init","params","vm","setValue"],"sources":["TagsInputPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\n\nexport interface TagsInputPresenterParams {\n    placeholder?: string;\n}\n\nexport interface ITagsInputPresenter {\n    vm: {\n        placeholder: string;\n        value: string;\n    };\n    init: (params: TagsInputPresenterParams) => void;\n    setValue: (query: string) => void;\n}\n\nexport class TagsInputPresenter implements ITagsInputPresenter {\n    private value?: string = undefined;\n    private placeholder?: string = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    init(params?: TagsInputPresenterParams) {\n        this.placeholder = params?.placeholder;\n    }\n\n    get vm() {\n        return {\n            placeholder: this.placeholder || \"\",\n            value: this.value || \"\"\n        };\n    }\n\n    public setValue = (value: string) => {\n        this.value = value;\n    };\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAezC,OAAO,MAAMC,kBAAkB,CAAgC;EACnDC,KAAK,GAAYC,SAAS;EAC1BC,WAAW,GAAYD,SAAS;EAExCE,WAAWA,CAAA,EAAG;IACVL,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAM,IAAIA,CAACC,MAAiC,EAAE;IACpC,IAAI,CAACH,WAAW,GAAGG,MAAM,EAAEH,WAAW;EAC1C;EAEA,IAAII,EAAEA,CAAA,EAAG;IACL,OAAO;MACHJ,WAAW,EAAE,IAAI,CAACA,WAAW,IAAI,EAAE;MACnCF,KAAK,EAAE,IAAI,CAACA,KAAK,IAAI;IACzB,CAAC;EACL;EAEOO,QAAQ,GAAIP,KAAa,IAAK;IACjC,IAAI,CAACA,KAAK,GAAGA,KAAK;EACtB,CAAC;AACL","ignoreList":[]}
+{"version":3,"file":"Tags/primitives/presenters/TagsInputPresenter.js","sources":["../../../../src/Tags/primitives/presenters/TagsInputPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\n\nexport interface TagsInputPresenterParams {\n    placeholder?: string;\n}\n\nexport interface ITagsInputPresenter {\n    vm: {\n        placeholder: string;\n        value: string;\n    };\n    init: (params: TagsInputPresenterParams) => void;\n    setValue: (query: string) => void;\n}\n\nexport class TagsInputPresenter implements ITagsInputPresenter {\n    private value?: string = undefined;\n    private placeholder?: string = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    init(params?: TagsInputPresenterParams) {\n        this.placeholder = params?.placeholder;\n    }\n\n    get vm() {\n        return {\n            placeholder: this.placeholder || \"\",\n            value: this.value || \"\"\n        };\n    }\n\n    public setValue = (value: string) => {\n        this.value = value;\n    };\n}\n"],"names":["TagsInputPresenter","undefined","value","makeAutoObservable","params"],"mappings":";AAeO,MAAMA;IAIT,aAAc;aAHN,KAAK,GAAYC;aACjB,WAAW,GAAYA;aAiBxB,QAAQ,GAAG,CAACC;YACf,IAAI,CAAC,KAAK,GAAGA;QACjB;QAhBIC,mBAAmB,IAAI;IAC3B;IAEA,KAAKC,MAAiC,EAAE;QACpC,IAAI,CAAC,WAAW,GAAGA,QAAQ;IAC/B;IAEA,IAAI,KAAK;QACL,OAAO;YACH,aAAa,IAAI,CAAC,WAAW,IAAI;YACjC,OAAO,IAAI,CAAC,KAAK,IAAI;QACzB;IACJ;AAKJ"}

package/Tags/primitives/presenters/TagsPresenter.js

@@ -1,67 +1,47 @@
 import { makeAutoObservable } from "mobx";
 class TagsPresenter {
-  params = undefined;
-  constructor(inputPresenter, valuesPresenter) {
-    this.inputPresenter = inputPresenter;
-    this.valuesPresenter = valuesPresenter;
-    makeAutoObservable(this);
-  }
-  init(params) {
-    this.params = params;
-    this.inputPresenter.init({
-      placeholder: params.placeholder
-    });
-    this.valuesPresenter.init({
-      values: params.values,
-      protectedValues: params.protectedValues
-    });
-  }
-  get vm() {
-    return {
-      inputVm: this.inputPresenter.vm,
-      valuesVm: this.valuesPresenter.vm
-    };
-  }
-  inputValue = value => {
-    this.inputPresenter.setValue(value);
-    if (this.params?.onValueInput) {
-      this.params.onValueInput(value);
+    constructor(inputPresenter, valuesPresenter){
+        this.params = void 0;
+        this.inputValue = (value)=>{
+            this.inputPresenter.setValue(value);
+            if (this.params?.onValueInput) this.params.onValueInput(value);
+        };
+        this.addValue = ()=>{
+            const value = this.vm.inputVm.value.trim();
+            if (!value) return;
+            this.inputPresenter.setValue("");
+            if (this.valuesPresenter.hasValue(value)) return;
+            this.valuesPresenter.addValue(value);
+            if (this.params?.onValueAdd) this.params.onValueAdd(value);
+            if (this.params?.onValueChange) this.params.onValueChange(this.getValues());
+        };
+        this.removeValue = (value)=>{
+            this.valuesPresenter.removeValue(value);
+            if (this.valuesPresenter.isValueProtected(value)) return;
+            if (this.params?.onValueRemove) this.params.onValueRemove(value);
+            if (this.params?.onValueChange) this.params.onValueChange(this.getValues());
+        };
+        this.getValues = ()=>this.valuesPresenter.vm.values.map((tag)=>tag.label);
+        this.inputPresenter = inputPresenter;
+        this.valuesPresenter = valuesPresenter;
+        makeAutoObservable(this);
+    }
+    init(params) {
+        this.params = params;
+        this.inputPresenter.init({
+            placeholder: params.placeholder
+        });
+        this.valuesPresenter.init({
+            values: params.values,
+            protectedValues: params.protectedValues
+        });
+    }
+    get vm() {
+        return {
+            inputVm: this.inputPresenter.vm,
+            valuesVm: this.valuesPresenter.vm
+        };
     }
-  };
-  addValue = () => {
-    const value = this.vm.inputVm.value.trim();
-    if (!value) {
-      return;
-    }
-    this.inputPresenter.setValue("");
-    if (this.valuesPresenter.hasValue(value)) {
-      // If the value already exists, do not add it again
-      return;
-    }
-    this.valuesPresenter.addValue(value);
-    if (this.params?.onValueAdd) {
-      this.params.onValueAdd(value);
-    }
-    if (this.params?.onValueChange) {
-      this.params.onValueChange(this.getValues());
-    }
-  };
-  removeValue = value => {
-    this.valuesPresenter.removeValue(value);
-    if (this.valuesPresenter.isValueProtected(value)) {
-      // If the value is protected, do not remove it
-      return;
-    }
-    if (this.params?.onValueRemove) {
-      this.params.onValueRemove(value);
-    }
-    if (this.params?.onValueChange) {
-      this.params.onValueChange(this.getValues());
-    }
-  };
-  getValues = () => {
-    return this.valuesPresenter.vm.values.map(tag => tag.label);
-  };
 }
 export { TagsPresenter };
 

package/Tags/primitives/presenters/TagsPresenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","TagsPresenter","params","undefined","constructor","inputPresenter","valuesPresenter","init","placeholder","values","protectedValues","vm","inputVm","valuesVm","inputValue","value","setValue","onValueInput","addValue","trim","hasValue","onValueAdd","onValueChange","getValues","removeValue","isValueProtected","onValueRemove","map","tag","label"],"sources":["TagsPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport { type ITagsInputPresenter } from \"./TagsInputPresenter.js\";\nimport { type ITagsValuesPresenter } from \"./TagsValuesPresenter.js\";\n\ninterface TagsPresenterParams {\n    values?: string[];\n    protectedValues?: string[];\n    onValueChange?: (values: string[]) => void;\n    onValueInput?: (value: string) => void;\n    onValueAdd?: (value: string) => void;\n    onValueRemove?: (value: string) => void;\n    placeholder?: string;\n}\n\ninterface ITagsPresenter {\n    vm: {\n        inputVm: ITagsInputPresenter[\"vm\"];\n        valuesVm: ITagsValuesPresenter[\"vm\"];\n    };\n    init: (params: TagsPresenterParams) => void;\n    inputValue: (value: string) => void;\n    addValue: (value: string) => void;\n    removeValue: (value: string) => void;\n}\n\nclass TagsPresenter implements ITagsPresenter {\n    private params?: TagsPresenterParams = undefined;\n    private inputPresenter: ITagsInputPresenter;\n    private valuesPresenter: ITagsValuesPresenter;\n\n    constructor(inputPresenter: ITagsInputPresenter, valuesPresenter: ITagsValuesPresenter) {\n        this.inputPresenter = inputPresenter;\n        this.valuesPresenter = valuesPresenter;\n        makeAutoObservable(this);\n    }\n\n    init(params: TagsPresenterParams) {\n        this.params = params;\n        this.inputPresenter.init({ placeholder: params.placeholder });\n        this.valuesPresenter.init({\n            values: params.values,\n            protectedValues: params.protectedValues\n        });\n    }\n\n    get vm() {\n        return {\n            inputVm: this.inputPresenter.vm,\n            valuesVm: this.valuesPresenter.vm\n        };\n    }\n\n    public inputValue = (value: string) => {\n        this.inputPresenter.setValue(value);\n        if (this.params?.onValueInput) {\n            this.params.onValueInput(value);\n        }\n    };\n\n    public addValue = () => {\n        const value = this.vm.inputVm.value.trim();\n\n        if (!value) {\n            return;\n        }\n\n        this.inputPresenter.setValue(\"\");\n\n        if (this.valuesPresenter.hasValue(value)) {\n            // If the value already exists, do not add it again\n            return;\n        }\n\n        this.valuesPresenter.addValue(value);\n\n        if (this.params?.onValueAdd) {\n            this.params.onValueAdd(value);\n        }\n\n        if (this.params?.onValueChange) {\n            this.params.onValueChange(this.getValues());\n        }\n    };\n\n    public removeValue = (value: string) => {\n        this.valuesPresenter.removeValue(value);\n\n        if (this.valuesPresenter.isValueProtected(value)) {\n            // If the value is protected, do not remove it\n            return;\n        }\n\n        if (this.params?.onValueRemove) {\n            this.params.onValueRemove(value);\n        }\n\n        if (this.params?.onValueChange) {\n            this.params.onValueChange(this.getValues());\n        }\n    };\n\n    private getValues = () => {\n        return this.valuesPresenter.vm.values.map(tag => tag.label);\n    };\n}\n\nexport { TagsPresenter, type ITagsPresenter, type TagsPresenterParams };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAyBzC,MAAMC,aAAa,CAA2B;EAClCC,MAAM,GAAyBC,SAAS;EAIhDC,WAAWA,CAACC,cAAmC,EAAEC,eAAqC,EAAE;IACpF,IAAI,CAACD,cAAc,GAAGA,cAAc;IACpC,IAAI,CAACC,eAAe,GAAGA,eAAe;IACtCN,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAO,IAAIA,CAACL,MAA2B,EAAE;IAC9B,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACG,cAAc,CAACE,IAAI,CAAC;MAAEC,WAAW,EAAEN,MAAM,CAACM;IAAY,CAAC,CAAC;IAC7D,IAAI,CAACF,eAAe,CAACC,IAAI,CAAC;MACtBE,MAAM,EAAEP,MAAM,CAACO,MAAM;MACrBC,eAAe,EAAER,MAAM,CAACQ;IAC5B,CAAC,CAAC;EACN;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACL,OAAO;MACHC,OAAO,EAAE,IAAI,CAACP,cAAc,CAACM,EAAE;MAC/BE,QAAQ,EAAE,IAAI,CAACP,eAAe,CAACK;IACnC,CAAC;EACL;EAEOG,UAAU,GAAIC,KAAa,IAAK;IACnC,IAAI,CAACV,cAAc,CAACW,QAAQ,CAACD,KAAK,CAAC;IACnC,IAAI,IAAI,CAACb,MAAM,EAAEe,YAAY,EAAE;MAC3B,IAAI,CAACf,MAAM,CAACe,YAAY,CAACF,KAAK,CAAC;IACnC;EACJ,CAAC;EAEMG,QAAQ,GAAGA,CAAA,KAAM;IACpB,MAAMH,KAAK,GAAG,IAAI,CAACJ,EAAE,CAACC,OAAO,CAACG,KAAK,CAACI,IAAI,CAAC,CAAC;IAE1C,IAAI,CAACJ,KAAK,EAAE;MACR;IACJ;IAEA,IAAI,CAACV,cAAc,CAACW,QAAQ,CAAC,EAAE,CAAC;IAEhC,IAAI,IAAI,CAACV,eAAe,CAACc,QAAQ,CAACL,KAAK,CAAC,EAAE;MACtC;MACA;IACJ;IAEA,IAAI,CAACT,eAAe,CAACY,QAAQ,CAACH,KAAK,CAAC;IAEpC,IAAI,IAAI,CAACb,MAAM,EAAEmB,UAAU,EAAE;MACzB,IAAI,CAACnB,MAAM,CAACmB,UAAU,CAACN,KAAK,CAAC;IACjC;IAEA,IAAI,IAAI,CAACb,MAAM,EAAEoB,aAAa,EAAE;MAC5B,IAAI,CAACpB,MAAM,CAACoB,aAAa,CAAC,IAAI,CAACC,SAAS,CAAC,CAAC,CAAC;IAC/C;EACJ,CAAC;EAEMC,WAAW,GAAIT,KAAa,IAAK;IACpC,IAAI,CAACT,eAAe,CAACkB,WAAW,CAACT,KAAK,CAAC;IAEvC,IAAI,IAAI,CAACT,eAAe,CAACmB,gBAAgB,CAACV,KAAK,CAAC,EAAE;MAC9C;MACA;IACJ;IAEA,IAAI,IAAI,CAACb,MAAM,EAAEwB,aAAa,EAAE;MAC5B,IAAI,CAACxB,MAAM,CAACwB,aAAa,CAACX,KAAK,CAAC;IACpC;IAEA,IAAI,IAAI,CAACb,MAAM,EAAEoB,aAAa,EAAE;MAC5B,IAAI,CAACpB,MAAM,CAACoB,aAAa,CAAC,IAAI,CAACC,SAAS,CAAC,CAAC,CAAC;IAC/C;EACJ,CAAC;EAEOA,SAAS,GAAGA,CAAA,KAAM;IACtB,OAAO,IAAI,CAACjB,eAAe,CAACK,EAAE,CAACF,MAAM,CAACkB,GAAG,CAACC,GAAG,IAAIA,GAAG,CAACC,KAAK,CAAC;EAC/D,CAAC;AACL;AAEA,SAAS5B,aAAa","ignoreList":[]}
+{"version":3,"file":"Tags/primitives/presenters/TagsPresenter.js","sources":["../../../../src/Tags/primitives/presenters/TagsPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport { type ITagsInputPresenter } from \"./TagsInputPresenter.js\";\nimport { type ITagsValuesPresenter } from \"./TagsValuesPresenter.js\";\n\ninterface TagsPresenterParams {\n    values?: string[];\n    protectedValues?: string[];\n    onValueChange?: (values: string[]) => void;\n    onValueInput?: (value: string) => void;\n    onValueAdd?: (value: string) => void;\n    onValueRemove?: (value: string) => void;\n    placeholder?: string;\n}\n\ninterface ITagsPresenter {\n    vm: {\n        inputVm: ITagsInputPresenter[\"vm\"];\n        valuesVm: ITagsValuesPresenter[\"vm\"];\n    };\n    init: (params: TagsPresenterParams) => void;\n    inputValue: (value: string) => void;\n    addValue: (value: string) => void;\n    removeValue: (value: string) => void;\n}\n\nclass TagsPresenter implements ITagsPresenter {\n    private params?: TagsPresenterParams = undefined;\n    private inputPresenter: ITagsInputPresenter;\n    private valuesPresenter: ITagsValuesPresenter;\n\n    constructor(inputPresenter: ITagsInputPresenter, valuesPresenter: ITagsValuesPresenter) {\n        this.inputPresenter = inputPresenter;\n        this.valuesPresenter = valuesPresenter;\n        makeAutoObservable(this);\n    }\n\n    init(params: TagsPresenterParams) {\n        this.params = params;\n        this.inputPresenter.init({ placeholder: params.placeholder });\n        this.valuesPresenter.init({\n            values: params.values,\n            protectedValues: params.protectedValues\n        });\n    }\n\n    get vm() {\n        return {\n            inputVm: this.inputPresenter.vm,\n            valuesVm: this.valuesPresenter.vm\n        };\n    }\n\n    public inputValue = (value: string) => {\n        this.inputPresenter.setValue(value);\n        if (this.params?.onValueInput) {\n            this.params.onValueInput(value);\n        }\n    };\n\n    public addValue = () => {\n        const value = this.vm.inputVm.value.trim();\n\n        if (!value) {\n            return;\n        }\n\n        this.inputPresenter.setValue(\"\");\n\n        if (this.valuesPresenter.hasValue(value)) {\n            // If the value already exists, do not add it again\n            return;\n        }\n\n        this.valuesPresenter.addValue(value);\n\n        if (this.params?.onValueAdd) {\n            this.params.onValueAdd(value);\n        }\n\n        if (this.params?.onValueChange) {\n            this.params.onValueChange(this.getValues());\n        }\n    };\n\n    public removeValue = (value: string) => {\n        this.valuesPresenter.removeValue(value);\n\n        if (this.valuesPresenter.isValueProtected(value)) {\n            // If the value is protected, do not remove it\n            return;\n        }\n\n        if (this.params?.onValueRemove) {\n            this.params.onValueRemove(value);\n        }\n\n        if (this.params?.onValueChange) {\n            this.params.onValueChange(this.getValues());\n        }\n    };\n\n    private getValues = () => {\n        return this.valuesPresenter.vm.values.map(tag => tag.label);\n    };\n}\n\nexport { TagsPresenter, type ITagsPresenter, type TagsPresenterParams };\n"],"names":["TagsPresenter","inputPresenter","valuesPresenter","undefined","value","tag","makeAutoObservable","params"],"mappings":";AAyBA,MAAMA;IAKF,YAAYC,cAAmC,EAAEC,eAAqC,CAAE;aAJhF,MAAM,GAAyBC;aA0BhC,UAAU,GAAG,CAACC;YACjB,IAAI,CAAC,cAAc,CAAC,QAAQ,CAACA;YAC7B,IAAI,IAAI,CAAC,MAAM,EAAE,cACb,IAAI,CAAC,MAAM,CAAC,YAAY,CAACA;QAEjC;aAEO,QAAQ,GAAG;YACd,MAAMA,QAAQ,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI;YAExC,IAAI,CAACA,OACD;YAGJ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;YAE7B,IAAI,IAAI,CAAC,eAAe,CAAC,QAAQ,CAACA,QAE9B;YAGJ,IAAI,CAAC,eAAe,CAAC,QAAQ,CAACA;YAE9B,IAAI,IAAI,CAAC,MAAM,EAAE,YACb,IAAI,CAAC,MAAM,CAAC,UAAU,CAACA;YAG3B,IAAI,IAAI,CAAC,MAAM,EAAE,eACb,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS;QAEhD;aAEO,WAAW,GAAG,CAACA;YAClB,IAAI,CAAC,eAAe,CAAC,WAAW,CAACA;YAEjC,IAAI,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAACA,QAEtC;YAGJ,IAAI,IAAI,CAAC,MAAM,EAAE,eACb,IAAI,CAAC,MAAM,CAAC,aAAa,CAACA;YAG9B,IAAI,IAAI,CAAC,MAAM,EAAE,eACb,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS;QAEhD;aAEQ,SAAS,GAAG,IACT,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAACC,CAAAA,MAAOA,IAAI,KAAK;QAvE1D,IAAI,CAAC,cAAc,GAAGJ;QACtB,IAAI,CAAC,eAAe,GAAGC;QACvBI,mBAAmB,IAAI;IAC3B;IAEA,KAAKC,MAA2B,EAAE;QAC9B,IAAI,CAAC,MAAM,GAAGA;QACd,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YAAE,aAAaA,OAAO,WAAW;QAAC;QAC3D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACtB,QAAQA,OAAO,MAAM;YACrB,iBAAiBA,OAAO,eAAe;QAC3C;IACJ;IAEA,IAAI,KAAK;QACL,OAAO;YACH,SAAS,IAAI,CAAC,cAAc,CAAC,EAAE;YAC/B,UAAU,IAAI,CAAC,eAAe,CAAC,EAAE;QACrC;IACJ;AAsDJ"}