@webiny/admin-ui 0.0.0-unstable.2aaa1916d9

package/IconPicker/IconPicker.mdx

@@ -0,0 +1,174 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as IconPickerStories from './IconPicker.stories';
+
+<Meta of={IconPickerStories} />
+
+# Icon Picker
+
+The Icon Picker component allows users to select icons from a predefined set of options. It provides an intuitive interface for icon selection in forms and design tools, with search functionality to quickly find specific icons.
+
+## Usage
+
+<Canvas of={IconPickerStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { IconPicker } from "@webiny/admin-ui";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+
+// Initialize FontAwesome library
+library.add(fas as any);
+
+const IconPickerExample = () => {
+    const [selectedIcon, setSelectedIcon] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newIcon: string) => {
+        setSelectedIcon(newIcon);
+
+        if (!newIcon && true) { // true represents required field
+            setValidation({ isValid: false, message: "Please select an icon" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <IconPicker
+            label="Select an Icon"
+            description="Choose an icon for your button"
+            note="Note: The selected icon will be displayed on your button"
+            required={true}
+            icons={[
+                { prefix: "fas", name: "trash-restore-alt" },
+                { prefix: "fas", name: "file-pen" },
+                { prefix: "fas", name: "receipt" },
+                { prefix: "fas", name: "user-circle" },
+                { prefix: "fas", name: "circle-user" }
+                // Add more icons as needed
+            ]}
+            value={selectedIcon}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+};
+
+export default IconPickerExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/IconPicker/IconPicker.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={IconPickerStories.Documentation} exclude={"onChange"} />
+
+```tsx
+import React, { useState } from "react";
+import { IconPicker } from "@webiny/admin-ui";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+
+// Initialize FontAwesome library
+library.add(fas as any);
+
+const IconPickerExample = () => {
+    const [selectedIcon, setSelectedIcon] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (newIcon: string) => {
+        setSelectedIcon(newIcon);
+
+        if (!newIcon && true) { // true represents required field
+            setValidation({ isValid: false, message: "Please select an icon" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <IconPicker
+            label="Select an Icon"
+            description="Choose an icon for your button"
+            note="Note: The selected icon will be displayed on your button"
+            required={true}
+            icons={[
+                { prefix: "fas", name: "trash-restore-alt" },
+                { prefix: "fas", name: "file-pen" },
+                { prefix: "fas", name: "receipt" },
+                { prefix: "fas", name: "user-circle" },
+                { prefix: "fas", name: "circle-user" }
+                // Add more icons as needed
+            ]}
+            value={selectedIcon}
+            onChange={handleChange}
+            validation={validation}
+        />
+    );
+};
+
+export default IconPickerExample;
+```
+
+## Dynamic Loading All Font Awesome Icons
+
+> ⚠️ **Note**: Importing all icons will increase your bundle size. Use this approach only when necessary, or pair it with a search interface to maintain a good user experience.
+
+To automatically load all Font Awesome icons (solid, regular, and brands) for use in the `IconPicker`, you can register them with the Font Awesome library and extract them from the internal `definitions` object. This approach provides a scalable and maintainable way to manage icon sets across your application.
+
+```tsx
+import React, { useState } from "react";
+import { IconPicker, IconPickerIconDto } from "@webiny/admin-ui";
+import { library, IconName } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { IconPrefix } from "@fortawesome/fontawesome-common-types";
+
+// Register all Font Awesome icons
+// Initialize FontAwesome library
+library.add(fab as any, fas as any, far as any);
+
+// Define allowed prefixes
+const validPrefixes: IconPrefix[] = ["fas", "far", "fab"];
+
+// Extract icons into { prefix, name } format
+const definitions = (library as any).definitions;
+const allIcons: IconPickerIconDto[] = [];
+
+Object.keys(definitions)
+    .filter((pack): pack is IconPrefix => validPrefixes.includes(pack as IconPrefix))
+    .forEach((prefix) => {
+        const icons = definitions[prefix];
+        Object.keys(icons).forEach((icon) => {
+            allIcons.push({
+                prefix,
+                name: icon as IconName
+            });
+        });
+    });
+```
+
+You can then pass the `allIcons` array to the `IconPicker` component:
+
+```tsx
+<IconPicker
+    label="Select an Icon"
+    description="Choose an icon for your button"
+    note="Note: The selected icon will be displayed on your button"
+    required={true}
+    icons={allIcons}
+    value={selectedIcon}
+    onChange={handleChange}
+    validation={validation}
+/>
+```

package/IconPicker/IconPicker.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconPicker } from "./";
+declare const meta: Meta<typeof IconPicker>;
+export default meta;
+type Story = StoryObj<typeof IconPicker>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelRequired: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;
+export declare const Documentation: Story;

package/IconPicker/IconPicker.stories.js

@@ -0,0 +1,356 @@
+import React, { useState, useEffect } from "react";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { IconPicker } from "./";
+const meta = {
+  title: "Components/Form/IconPicker",
+  component: IconPicker,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement(IconPicker, Object.assign({}, args, {
+      value: value,
+      onChange: setValue
+    }));
+  }
+};
+
+// @ts-expect-error
+library.add(fas);
+export default meta;
+export const Default = {
+  args: {
+    icons: [{
+      prefix: "fas",
+      name: "trash-restore-alt"
+    }, {
+      prefix: "fas",
+      name: "trash-can-arrow-up"
+    }, {
+      prefix: "fas",
+      name: "naira-sign"
+    }, {
+      prefix: "fas",
+      name: "cart-arrow-down"
+    }, {
+      prefix: "fas",
+      name: "walkie-talkie"
+    }, {
+      prefix: "fas",
+      name: "file-edit"
+    }, {
+      prefix: "fas",
+      name: "file-pen"
+    }, {
+      prefix: "fas",
+      name: "receipt"
+    }, {
+      prefix: "fas",
+      name: "pen-square"
+    }, {
+      prefix: "fas",
+      name: "pencil-square"
+    }, {
+      prefix: "fas",
+      name: "square-pen"
+    }, {
+      prefix: "fas",
+      name: "suitcase-rolling"
+    }, {
+      prefix: "fas",
+      name: "person-circle-exclamation"
+    }, {
+      prefix: "fas",
+      name: "chevron-down"
+    }, {
+      prefix: "fas",
+      name: "battery"
+    }, {
+      prefix: "fas",
+      name: "battery-5"
+    }, {
+      prefix: "fas",
+      name: "battery-full"
+    }, {
+      prefix: "fas",
+      name: "skull-crossbones"
+    }, {
+      prefix: "fas",
+      name: "code-compare"
+    }, {
+      prefix: "fas",
+      name: "list-dots"
+    }, {
+      prefix: "fas",
+      name: "list-ul"
+    }, {
+      prefix: "fas",
+      name: "school-lock"
+    }, {
+      prefix: "fas",
+      name: "tower-cell"
+    }, {
+      prefix: "fas",
+      name: "long-arrow-alt-down"
+    }, {
+      prefix: "fas",
+      name: "down-long"
+    }, {
+      prefix: "fas",
+      name: "ranking-star"
+    }, {
+      prefix: "fas",
+      name: "chess-king"
+    }, {
+      prefix: "fas",
+      name: "person-harassing"
+    }, {
+      prefix: "fas",
+      name: "brazilian-real-sign"
+    }, {
+      prefix: "fas",
+      name: "landmark-alt"
+    }, {
+      prefix: "fas",
+      name: "landmark-dome"
+    }, {
+      prefix: "fas",
+      name: "arrow-up"
+    }, {
+      prefix: "fas",
+      name: "television"
+    }, {
+      prefix: "fas",
+      name: "tv-alt"
+    }, {
+      prefix: "fas",
+      name: "tv"
+    }, {
+      prefix: "fas",
+      name: "shrimp"
+    }, {
+      prefix: "fas",
+      name: "tasks"
+    }, {
+      prefix: "fas",
+      name: "list-check"
+    }, {
+      prefix: "fas",
+      name: "jug-detergent"
+    }, {
+      prefix: "fas",
+      name: "user-circle"
+    }, {
+      prefix: "fas",
+      name: "circle-user"
+    }, {
+      prefix: "fas",
+      name: "user-shield"
+    }, {
+      prefix: "fas",
+      name: "wind"
+    }, {
+      prefix: "fas",
+      name: "car-crash"
+    }, {
+      prefix: "fas",
+      name: "car-burst"
+    }, {
+      prefix: "fas",
+      name: "y"
+    }, {
+      prefix: "fas",
+      name: "snowboarding"
+    }, {
+      prefix: "fas",
+      name: "person-snowboarding"
+    }, {
+      prefix: "fas",
+      name: "shipping-fast"
+    }, {
+      prefix: "fas",
+      name: "truck-fast"
+    }]
+  }
+};
+export const WithLabel = {
+  args: {
+    ...Default.args,
+    label: "Any field label"
+  }
+};
+export const WithLabelRequired = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true
+  }
+};
+export const WithDescription = {
+  args: {
+    ...Default.args,
+    description: "Provide the required information for processing your request."
+  }
+};
+export const WithNotes = {
+  args: {
+    ...Default.args,
+    note: "Note: Ensure your selection or input is accurate before proceeding."
+  }
+};
+export const WithErrors = {
+  args: {
+    ...Default.args,
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Disabled = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    disabled: true
+  }
+};
+export const FullExample = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true,
+    description: "Provide the required information for processing your request.",
+    note: "Note: Ensure your selection or input is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Documentation = {
+  render: args => {
+    const [value, setValue] = useState(args.value || null);
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: ""
+    });
+
+    // Update value when args.value changes
+    useEffect(() => {
+      setValue(args.value || null);
+    }, [args.value]);
+    const handleChange = newValue => {
+      setValue(newValue);
+
+      // Simple required validation
+      if (args.required && !newValue) {
+        setValidation({
+          isValid: false,
+          message: "Please select an icon"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    };
+
+    // Validate on required change or value change
+    useEffect(() => {
+      if (args.required && !value) {
+        setValidation({
+          isValid: false,
+          message: "Please select an icon"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    }, [args.required, value]);
+    return /*#__PURE__*/React.createElement(IconPicker, Object.assign({}, args, {
+      value: value,
+      onChange: handleChange,
+      validation: validation,
+      required: args.required
+    }));
+  },
+  args: {
+    label: "Select an Icon",
+    required: true,
+    disabled: false,
+    description: "Choose an icon for your button",
+    note: "Note: The selected icon will be displayed on your button",
+    icons: [{
+      prefix: "fas",
+      name: "trash-restore-alt"
+    }, {
+      prefix: "fas",
+      name: "file-pen"
+    }, {
+      prefix: "fas",
+      name: "receipt"
+    }, {
+      prefix: "fas",
+      name: "user-circle"
+    }, {
+      prefix: "fas",
+      name: "circle-user"
+    }],
+    value: null,
+    validation: undefined
+  },
+  argTypes: {
+    label: {
+      description: "Label text for the icon picker",
+      control: "text"
+    },
+    required: {
+      description: "Makes the field required when set to true",
+      control: "boolean"
+    },
+    disabled: {
+      description: "Disables the icon picker when set to true",
+      control: "boolean"
+    },
+    description: {
+      description: "Additional description text below the field",
+      control: "text"
+    },
+    note: {
+      description: "Additional note text below the field",
+      control: "text"
+    },
+    icons: {
+      description: "Array of available icons with prefix and name properties",
+      control: "object"
+    },
+    value: {
+      description: "The selected icon value (in format 'prefix/name')",
+      control: "none"
+    },
+    validation: {
+      description: "Object containing validation state and message. Please refer to the example code for details on usage.",
+      control: "none"
+    },
+    onChange: {
+      description: "Function called when an icon is selected",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=IconPicker.stories.js.map

package/IconPicker/IconPicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","library","fas","IconPicker","meta","title","component","argTypes","onChange","action","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","add","Default","icons","prefix","name","WithLabel","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","setValidation","handleChange","newValue","undefined"],"sources":["IconPicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport { IconPicker } from \"~/IconPicker\";\n\nconst meta: Meta<typeof IconPicker> = {\n    title: \"Components/Form/IconPicker\",\n    component: IconPicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <IconPicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\n// @ts-expect-error\nlibrary.add(fas);\n\nexport default meta;\ntype Story = StoryObj<typeof IconPicker>;\n\nexport const Default: Story = {\n    args: {\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n            { prefix: \"fas\", name: \"naira-sign\" },\n            { prefix: \"fas\", name: \"cart-arrow-down\" },\n            { prefix: \"fas\", name: \"walkie-talkie\" },\n            { prefix: \"fas\", name: \"file-edit\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"pen-square\" },\n            { prefix: \"fas\", name: \"pencil-square\" },\n            { prefix: \"fas\", name: \"square-pen\" },\n            { prefix: \"fas\", name: \"suitcase-rolling\" },\n            { prefix: \"fas\", name: \"person-circle-exclamation\" },\n            { prefix: \"fas\", name: \"chevron-down\" },\n            { prefix: \"fas\", name: \"battery\" },\n            { prefix: \"fas\", name: \"battery-5\" },\n            { prefix: \"fas\", name: \"battery-full\" },\n            { prefix: \"fas\", name: \"skull-crossbones\" },\n            { prefix: \"fas\", name: \"code-compare\" },\n            { prefix: \"fas\", name: \"list-dots\" },\n            { prefix: \"fas\", name: \"list-ul\" },\n            { prefix: \"fas\", name: \"school-lock\" },\n            { prefix: \"fas\", name: \"tower-cell\" },\n            { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n            { prefix: \"fas\", name: \"down-long\" },\n            { prefix: \"fas\", name: \"ranking-star\" },\n            { prefix: \"fas\", name: \"chess-king\" },\n            { prefix: \"fas\", name: \"person-harassing\" },\n            { prefix: \"fas\", name: \"brazilian-real-sign\" },\n            { prefix: \"fas\", name: \"landmark-alt\" },\n            { prefix: \"fas\", name: \"landmark-dome\" },\n            { prefix: \"fas\", name: \"arrow-up\" },\n            { prefix: \"fas\", name: \"television\" },\n            { prefix: \"fas\", name: \"tv-alt\" },\n            { prefix: \"fas\", name: \"tv\" },\n            { prefix: \"fas\", name: \"shrimp\" },\n            { prefix: \"fas\", name: \"tasks\" },\n            { prefix: \"fas\", name: \"list-check\" },\n            { prefix: \"fas\", name: \"jug-detergent\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" },\n            { prefix: \"fas\", name: \"user-shield\" },\n            { prefix: \"fas\", name: \"wind\" },\n            { prefix: \"fas\", name: \"car-crash\" },\n            { prefix: \"fas\", name: \"car-burst\" },\n            { prefix: \"fas\", name: \"y\" },\n            { prefix: \"fas\", name: \"snowboarding\" },\n            { prefix: \"fas\", name: \"person-snowboarding\" },\n            { prefix: \"fas\", name: \"shipping-fast\" },\n            { prefix: \"fas\", name: \"truck-fast\" }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || null);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value || null);\n        }, [args.value]);\n\n        const handleChange = (newValue: any) => {\n            setValue(newValue);\n\n            // Simple required validation\n            if (args.required && !newValue) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"Please select an icon\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <IconPicker\n                {...args}\n                value={value}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select an Icon\",\n        required: true,\n        disabled: false,\n        description: \"Choose an icon for your button\",\n        note: \"Note: The selected icon will be displayed on your button\",\n        icons: [\n            { prefix: \"fas\", name: \"trash-restore-alt\" },\n            { prefix: \"fas\", name: \"file-pen\" },\n            { prefix: \"fas\", name: \"receipt\" },\n            { prefix: \"fas\", name: \"user-circle\" },\n            { prefix: \"fas\", name: \"circle-user\" }\n        ],\n        value: null,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the icon picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the icon picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        icons: {\n            description: \"Array of available icons with prefix and name properties\",\n            control: \"object\"\n        },\n        value: {\n            description: \"The selected icon value (in format 'prefix/name')\",\n            control: \"none\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        onChange: {\n            description: \"Function called when an icon is selected\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/IconPicker/domains/IconPickerFontAwesome.d.ts

@@ -0,0 +1,5 @@
+import type { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
+export interface IconPickerFontAwesome {
+    prefix: IconPrefix;
+    name: IconName;
+}

package/IconPicker/domains/IconPickerFontAwesome.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=IconPickerFontAwesome.js.map

package/IconPicker/domains/IconPickerFontAwesome.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["IconPickerFontAwesome.ts"],"sourcesContent":["import type { IconName, IconPrefix } from \"@fortawesome/fontawesome-svg-core\";\n\nexport interface IconPickerFontAwesome {\n    prefix: IconPrefix;\n    name: IconName;\n}\n"],"mappings":"","ignoreList":[]}

package/IconPicker/domains/IconPickerIcon.d.ts

@@ -0,0 +1,13 @@
+import type { IconPickerIconDto } from "./IconPickerIconDto";
+export declare class IconPickerIcon {
+    private readonly _prefix;
+    private readonly _name;
+    protected constructor(data: {
+        prefix: string;
+        name: string;
+    });
+    static create(data: IconPickerIconDto): IconPickerIcon;
+    static createFromString(value?: string): IconPickerIcon;
+    get prefix(): string;
+    get name(): string;
+}

package/IconPicker/domains/IconPickerIcon.js

@@ -0,0 +1,34 @@
+export class IconPickerIcon {
+  constructor(data) {
+    this._prefix = data.prefix;
+    this._name = data.name;
+  }
+  static create(data) {
+    return new IconPickerIcon({
+      prefix: data.prefix,
+      name: data.name
+    });
+  }
+  static createFromString(value) {
+    if (typeof value === "string" && value.includes("/")) {
+      const values = value.split("/");
+      return new IconPickerIcon({
+        prefix: values[0],
+        name: values[1]
+      });
+    } else {
+      return new IconPickerIcon({
+        prefix: "fas",
+        name: "star"
+      });
+    }
+  }
+  get prefix() {
+    return this._prefix;
+  }
+  get name() {
+    return this._name;
+  }
+}
+
+//# sourceMappingURL=IconPickerIcon.js.map

package/IconPicker/domains/IconPickerIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IconPickerIcon","constructor","data","_prefix","prefix","_name","name","create","createFromString","value","includes","values","split"],"sources":["IconPickerIcon.tsx"],"sourcesContent":["import type { IconPickerIconDto } from \"./IconPickerIconDto\";\n\nexport class IconPickerIcon {\n    private readonly _prefix: string;\n    private readonly _name: string;\n\n    protected constructor(data: { prefix: string; name: string }) {\n        this._prefix = data.prefix;\n        this._name = data.name;\n    }\n\n    static create(data: IconPickerIconDto) {\n        return new IconPickerIcon({\n            prefix: data.prefix,\n            name: data.name\n        });\n    }\n\n    static createFromString(value?: string) {\n        if (typeof value === \"string\" && value.includes(\"/\")) {\n            const values = value.split(\"/\");\n            return new IconPickerIcon({\n                prefix: values[0],\n                name: values[1]\n            });\n        } else {\n            return new IconPickerIcon({\n                prefix: \"fas\",\n                name: \"star\"\n            });\n        }\n    }\n\n    get prefix() {\n        return this._prefix;\n    }\n\n    get name() {\n        return this._name;\n    }\n}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAc,CAAC;EAIdC,WAAWA,CAACC,IAAsC,EAAE;IAC1D,IAAI,CAACC,OAAO,GAAGD,IAAI,CAACE,MAAM;IAC1B,IAAI,CAACC,KAAK,GAAGH,IAAI,CAACI,IAAI;EAC1B;EAEA,OAAOC,MAAMA,CAACL,IAAuB,EAAE;IACnC,OAAO,IAAIF,cAAc,CAAC;MACtBI,MAAM,EAAEF,IAAI,CAACE,MAAM;MACnBE,IAAI,EAAEJ,IAAI,CAACI;IACf,CAAC,CAAC;EACN;EAEA,OAAOE,gBAAgBA,CAACC,KAAc,EAAE;IACpC,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;MAClD,MAAMC,MAAM,GAAGF,KAAK,CAACG,KAAK,CAAC,GAAG,CAAC;MAC/B,OAAO,IAAIZ,cAAc,CAAC;QACtBI,MAAM,EAAEO,MAAM,CAAC,CAAC,CAAC;QACjBL,IAAI,EAAEK,MAAM,CAAC,CAAC;MAClB,CAAC,CAAC;IACN,CAAC,MAAM;MACH,OAAO,IAAIX,cAAc,CAAC;QACtBI,MAAM,EAAE,KAAK;QACbE,IAAI,EAAE;MACV,CAAC,CAAC;IACN;EACJ;EAEA,IAAIF,MAAMA,CAAA,EAAG;IACT,OAAO,IAAI,CAACD,OAAO;EACvB;EAEA,IAAIG,IAAIA,CAAA,EAAG;IACP,OAAO,IAAI,CAACD,KAAK;EACrB;AACJ","ignoreList":[]}

package/IconPicker/domains/IconPickerIconDto.d.ts

@@ -0,0 +1,4 @@
+export interface IconPickerIconDto {
+    prefix: string;
+    name: string;
+}

package/IconPicker/domains/IconPickerIconDto.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=IconPickerIconDto.js.map

package/IconPicker/domains/IconPickerIconDto.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["IconPickerIconDto.tsx"],"sourcesContent":["export interface IconPickerIconDto {\n    prefix: string;\n    name: string;\n}\n"],"mappings":"","ignoreList":[]}

package/IconPicker/domains/IconPickerIconFormatter.d.ts

@@ -0,0 +1,6 @@
+import type { IconPickerIcon } from "./IconPickerIcon";
+import type { IconPickerFontAwesome } from "./IconPickerFontAwesome";
+export declare class IconPickerIconFormatter {
+    static formatFontAwesome(icon: IconPickerIcon): IconPickerFontAwesome;
+    static formatStringValue(icon: IconPickerIcon | IconPickerFontAwesome): string;
+}