@orangesix/react 2.4.0-beta.3 → 2.4.0

package/editor/core/text/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","names":[],"sources":["../../../../src/editor/core/text.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorCoreProps } from \"..\";\n\n/**\n * Core - `Text`\n * Extensão para formatar o texto com tamanho específico\n */\nexport const Text = ({ editor, active }: EditorCoreProps & { active: boolean }) => {\n\n    return active && (\n        <>\n            <a className={\"editor-menu-item\" + (editor.isActive(\"heading\", { level: 1 }) ? \" active\" : \"\")}\n                href=\"#\"\n                style={{ fontSize: \".975em\" }}\n                onClick={event => {\n                    event.preventDefault();\n                    editor.chain().focus().toggleHeading({ level: 1 }).run();\n                }}><i className=\"bi bi-type-h1\"/></a>\n            <a className={\"editor-menu-item\" + (editor.isActive(\"heading\", { level: 2 }) ? \" active\" : \"\")}\n                href=\"#\"\n                style={{ fontSize: \".975em\" }}\n                onClick={event => {\n                    event.preventDefault();\n                    editor.chain().focus().toggleHeading({ level: 2 }).run();\n                }}><i className=\"bi bi-type-h2\"/></a>\n            <a className={\"editor-menu-item\" + (editor.isActive(\"heading\", { level: 3 }) ? \" active\" : \"\")}\n                href=\"#\"\n                style={{ fontSize: \".975em\" }}\n                onClick={event => {\n                    event.preventDefault();\n                    editor.chain().focus().toggleHeading({ level: 3 }).run();\n                }}><i className=\"bi bi-type-h3\"/></a>\n        </>\n    );\n};"],"mappings":";;;AAOA,IAAa,KAAQ,EAAE,WAAQ,gBAEpB,KACH,kBAAA,GAAA,EAAA,UAAA;CACI,kBAAC,KAAD;EAAG,WAAW,sBAAsB,EAAO,SAAS,WAAW,EAAE,OAAO,GAAG,CAAC,GAAG,YAAY;EACvF,MAAK;EACL,OAAO,EAAE,UAAU,UAAU;EAC7B,UAAS,MAAS;GAEd,AADA,EAAM,gBAAgB,EACtB,EAAO,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;;YACzD,kBAAC,KAAD,EAAG,WAAU,iBAAiB,CAAA;EAAI,CAAA;CACzC,kBAAC,KAAD;EAAG,WAAW,sBAAsB,EAAO,SAAS,WAAW,EAAE,OAAO,GAAG,CAAC,GAAG,YAAY;EACvF,MAAK;EACL,OAAO,EAAE,UAAU,UAAU;EAC7B,UAAS,MAAS;GAEd,AADA,EAAM,gBAAgB,EACtB,EAAO,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;;YACzD,kBAAC,KAAD,EAAG,WAAU,iBAAiB,CAAA;EAAI,CAAA;CACzC,kBAAC,KAAD;EAAG,WAAW,sBAAsB,EAAO,SAAS,WAAW,EAAE,OAAO,GAAG,CAAC,GAAG,YAAY;EACvF,MAAK;EACL,OAAO,EAAE,UAAU,UAAU;EAC7B,UAAS,MAAS;GAEd,AADA,EAAM,gBAAgB,EACtB,EAAO,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;;YACzD,kBAAC,KAAD,EAAG,WAAU,iBAAiB,CAAA;EAAI,CAAA;CAC1C,EAAA,CAAA"}
+{"version":3,"file":"index.esm.js","names":[],"sources":["../../../../src/editor/core/text.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { EditorCoreProps } from \"..\";\r\n\r\n/**\r\n * Core - `Text`\r\n * Extensão para formatar o texto com tamanho específico\r\n */\r\nexport const Text = ({ editor, active }: EditorCoreProps & { active: boolean }) => {\r\n\r\n    return active && (\r\n        <>\r\n            <a className={\"editor-menu-item\" + (editor.isActive(\"heading\", { level: 1 }) ? \" active\" : \"\")}\r\n                href=\"#\"\r\n                style={{ fontSize: \".975em\" }}\r\n                onClick={event => {\r\n                    event.preventDefault();\r\n                    editor.chain().focus().toggleHeading({ level: 1 }).run();\r\n                }}><i className=\"bi bi-type-h1\"/></a>\r\n            <a className={\"editor-menu-item\" + (editor.isActive(\"heading\", { level: 2 }) ? \" active\" : \"\")}\r\n                href=\"#\"\r\n                style={{ fontSize: \".975em\" }}\r\n                onClick={event => {\r\n                    event.preventDefault();\r\n                    editor.chain().focus().toggleHeading({ level: 2 }).run();\r\n                }}><i className=\"bi bi-type-h2\"/></a>\r\n            <a className={\"editor-menu-item\" + (editor.isActive(\"heading\", { level: 3 }) ? \" active\" : \"\")}\r\n                href=\"#\"\r\n                style={{ fontSize: \".975em\" }}\r\n                onClick={event => {\r\n                    event.preventDefault();\r\n                    editor.chain().focus().toggleHeading({ level: 3 }).run();\r\n                }}><i className=\"bi bi-type-h3\"/></a>\r\n        </>\r\n    );\r\n};"],"mappings":";;;AAOA,IAAa,KAAQ,EAAE,WAAQ,gBAEpB,KACH,kBAAA,GAAA,EAAA,UAAA;CACI,kBAAC,KAAD;EAAG,WAAW,sBAAsB,EAAO,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,IAAI,YAAY;EACvF,MAAK;EACL,OAAO,EAAE,UAAU,SAAS;EAC5B,UAAS,MAAS;GAEd,AADA,EAAM,eAAe,GACrB,EAAO,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI;EAC3D;YAAG,kBAAC,KAAD,EAAG,WAAU,gBAAgB,CAAA;CAAI,CAAA;CACxC,kBAAC,KAAD;EAAG,WAAW,sBAAsB,EAAO,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,IAAI,YAAY;EACvF,MAAK;EACL,OAAO,EAAE,UAAU,SAAS;EAC5B,UAAS,MAAS;GAEd,AADA,EAAM,eAAe,GACrB,EAAO,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI;EAC3D;YAAG,kBAAC,KAAD,EAAG,WAAU,gBAAgB,CAAA;CAAI,CAAA;CACxC,kBAAC,KAAD;EAAG,WAAW,sBAAsB,EAAO,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,IAAI,YAAY;EACvF,MAAK;EACL,OAAO,EAAE,UAAU,SAAS;EAC5B,UAAS,MAAS;GAEd,AADA,EAAM,eAAe,GACrB,EAAO,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI;EAC3D;YAAG,kBAAC,KAAD,EAAG,WAAU,gBAAgB,CAAA;CAAI,CAAA;AAC1C,EAAA,CAAA"}

package/editor/core/underline/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","names":[],"sources":["../../../../src/editor/core/underline.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorCoreProps } from \"..\";\n\n/**\n * Core - `Underline`\n * Extensão para renderizar texto em underline text\n */\nexport const Underline = ({ editor, active }: EditorCoreProps & { active: boolean }) => {\n    return active && (\n        <a className={\"editor-menu-item\" + (editor.isActive(\"underline\") ? \" active\" : \"\")}\n            href=\"#\"\n            onClick={event => {\n                event.preventDefault();\n                editor.chain().focus().toggleUnderline().run();\n            }}><i className=\"bi bi-type-underline\"/></a>\n    );\n};"],"mappings":";;;AAOA,IAAa,KAAa,EAAE,WAAQ,gBACzB,KACH,kBAAC,KAAD;CAAG,WAAW,sBAAsB,EAAO,SAAS,YAAY,GAAG,YAAY;CAC3E,MAAK;CACL,UAAS,MAAS;EAEd,AADA,EAAM,gBAAgB,EACtB,EAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;;WAC/C,kBAAC,KAAD,EAAG,WAAU,wBAAwB,CAAA;CAAI,CAAA"}
+{"version":3,"file":"index.esm.js","names":[],"sources":["../../../../src/editor/core/underline.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { EditorCoreProps } from \"..\";\r\n\r\n/**\r\n * Core - `Underline`\r\n * Extensão para renderizar texto em underline text\r\n */\r\nexport const Underline = ({ editor, active }: EditorCoreProps & { active: boolean }) => {\r\n    return active && (\r\n        <a className={\"editor-menu-item\" + (editor.isActive(\"underline\") ? \" active\" : \"\")}\r\n            href=\"#\"\r\n            onClick={event => {\r\n                event.preventDefault();\r\n                editor.chain().focus().toggleUnderline().run();\r\n            }}><i className=\"bi bi-type-underline\"/></a>\r\n    );\r\n};"],"mappings":";;;AAOA,IAAa,KAAa,EAAE,WAAQ,gBACzB,KACH,kBAAC,KAAD;CAAG,WAAW,sBAAsB,EAAO,SAAS,WAAW,IAAI,YAAY;CAC3E,MAAK;CACL,UAAS,MAAS;EAEd,AADA,EAAM,eAAe,GACrB,EAAO,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI;CACjD;WAAG,kBAAC,KAAD,EAAG,WAAU,uBAAuB,CAAA;AAAI,CAAA"}

package/editor/editor/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","names":[],"sources":["../../../src/editor/editor.tsx"],"sourcesContent":["import { Box } from \"../box\";\nimport { EditorProps } from \".\";\nimport { EditorMenu } from \"./core\";\nimport Link from \"@tiptap/extension-link\";\nimport Image from \"@tiptap/extension-image\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { Color } from \"@tiptap/extension-color\";\nimport { editorBasic, editorFull } from \"./const\";\nimport { InputFeedback, InputLabel } from \"../api\";\nimport React, { useEffect, useState } from \"react\";\nimport Underline from \"@tiptap/extension-underline\";\nimport Highlight from \"@tiptap/extension-highlight\";\nimport { TextStyle } from \"@tiptap/extension-text-style\";\nimport { EditorContent as EditorTipTap, useEditor } from \"@tiptap/react\";\n\n/**\n * Componente - `Editor`\n *\n * Um componente versátil que pode ser utilizado para criar container de edição de texto.\n * Permite personalizar o estilo e o conteúdo através de propriedades.\n */\nexport const Editor = ({ options = \"basic\", iconPrefix = \"bi bi-\", ...props }: EditorProps) => {\n    const [edition, setEdition] = useState(false);\n    const editor = useEditor({\n        extensions: [\n            StarterKit,\n            Underline,\n            Highlight,\n            Color,\n            TextStyle,\n            Link.configure({\n                validate: (href) => /^https?:\\/\\//.test(href),\n                HTMLAttributes: {\n                    rel: \"\"\n                }\n            }),\n            Image.configure({\n                allowBase64: true\n            })\n        ],\n        editable: !props.disabled,\n        content: props.value ?? \"\",\n        onFocus: () => setEdition(true),\n        onBlur: () => setEdition(false),\n        onUpdate: ({ editor }) => {\n            props.onChange(editor.getHTML());\n        }\n    });\n\n    if (!editor) {\n        console.error(\"Não foi possível realizar o carregamento do editor de texto.\");\n        return null;\n    }\n\n    useEffect(() => {\n        if (editor && !edition) {\n            editor?.commands.setContent(props.value);\n        }\n    }, [props.value]);\n\n    /*\n    |------------------------------------------\n    | render() - Renderização do componente\n    |------------------------------------------\n    */\n    return (\n        <Box className={props.className}\n            css={props.css}\n            size={props.size ?? \"100\"}>\n            <InputLabel {...props}/>\n            <div className=\"editor-container\">\n                {!props.disabled\n                    && <EditorMenu\n                        editor={editor}\n                        options={options === \"basic\" ? editorBasic : options === \"full\" ? editorFull : options}/>}\n                <EditorTipTap\n                    className=\"editor\"\n                    disabled={props.disabled}\n                    editor={editor}\n                    id={props.id}\n                    name={props.name}\n                    style={{ minHeight: (props.height ?? 100) + \"px\" }}/>\n            </div>\n            <InputFeedback {...props}/>\n        </Box>\n    );\n};\nEditor.displayName = \"Editor\";"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,IAAa,KAAU,EAAE,aAAU,SAAS,gBAAa,UAAU,GAAG,QAAyB;CAC3F,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAS,EAAU;EACrB,YAAY;GACR;GACA;GACA;GACA;GACA;GACA,EAAK,UAAU;IACX,WAAW,MAAS,eAAe,KAAK,EAAK;IAC7C,gBAAgB,EACZ,KAAK,IACR;IACJ,CAAC;GACF,EAAM,UAAU,EACZ,aAAa,IAChB,CAAC;GACL;EACD,UAAU,CAAC,EAAM;EACjB,SAAS,EAAM,SAAS;EACxB,eAAe,EAAW,GAAK;EAC/B,cAAc,EAAW,GAAM;EAC/B,WAAW,EAAE,gBAAa;GACtB,EAAM,SAAS,EAAO,SAAS,CAAC;;EAEvC,CAAC;CAkBF,OAhBK,KAKL,QAAgB;EACZ,AAAI,KAAU,CAAC,KACX,GAAQ,SAAS,WAAW,EAAM,MAAM;IAE7C,CAAC,EAAM,MAAM,CAAC,EAQb,kBAAC,GAAD;EAAK,WAAW,EAAM;EAClB,KAAK,EAAM;EACX,MAAM,EAAM,QAAQ;YAFxB;GAGI,kBAAC,GAAD,EAAY,GAAI,GAAQ,CAAA;GACxB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACK,CAAC,EAAM,YACD,kBAAC,GAAD;KACS;KACR,SAAS,MAAY,UAAU,IAAc,MAAY,SAAS,IAAa;KAAU,CAAA,EACjG,kBAAC,GAAD;KACI,WAAU;KACV,UAAU,EAAM;KACR;KACR,IAAI,EAAM;KACV,MAAM,EAAM;KACZ,OAAO,EAAE,YAAY,EAAM,UAAU,OAAO,MAAM;KAAG,CAAA,CACvD;;GACN,kBAAC,GAAD,EAAe,GAAI,GAAQ,CAAA;GACzB;QAlCN,QAAQ,MAAM,+DAA+D,EACtE;;AAoCf,EAAO,cAAc"}
+{"version":3,"file":"index.esm.js","names":[],"sources":["../../../src/editor/editor.tsx"],"sourcesContent":["import { Box } from \"../box\";\r\nimport { EditorProps } from \".\";\r\nimport { EditorMenu } from \"./core\";\r\nimport Link from \"@tiptap/extension-link\";\r\nimport Image from \"@tiptap/extension-image\";\r\nimport StarterKit from \"@tiptap/starter-kit\";\r\nimport { Color } from \"@tiptap/extension-color\";\r\nimport { editorBasic, editorFull } from \"./const\";\r\nimport { InputFeedback, InputLabel } from \"../api\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport Underline from \"@tiptap/extension-underline\";\r\nimport Highlight from \"@tiptap/extension-highlight\";\r\nimport { TextStyle } from \"@tiptap/extension-text-style\";\r\nimport { EditorContent as EditorTipTap, useEditor } from \"@tiptap/react\";\r\n\r\n/**\r\n * Componente - `Editor`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar container de edição de texto.\r\n * Permite personalizar o estilo e o conteúdo através de propriedades.\r\n */\r\nexport const Editor = ({ options = \"basic\", iconPrefix = \"bi bi-\", ...props }: EditorProps) => {\r\n    const [edition, setEdition] = useState(false);\r\n    const editor = useEditor({\r\n        extensions: [\r\n            StarterKit,\r\n            Underline,\r\n            Highlight,\r\n            Color,\r\n            TextStyle,\r\n            Link.configure({\r\n                validate: (href) => /^https?:\\/\\//.test(href),\r\n                HTMLAttributes: {\r\n                    rel: \"\"\r\n                }\r\n            }),\r\n            Image.configure({\r\n                allowBase64: true\r\n            })\r\n        ],\r\n        editable: !props.disabled,\r\n        content: props.value ?? \"\",\r\n        onFocus: () => setEdition(true),\r\n        onBlur: () => setEdition(false),\r\n        onUpdate: ({ editor }) => {\r\n            props.onChange(editor.getHTML());\r\n        }\r\n    });\r\n\r\n    if (!editor) {\r\n        console.error(\"Não foi possível realizar o carregamento do editor de texto.\");\r\n        return null;\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (editor && !edition) {\r\n            editor?.commands.setContent(props.value);\r\n        }\r\n    }, [props.value]);\r\n\r\n    /*\r\n    |------------------------------------------\r\n    | render() - Renderização do componente\r\n    |------------------------------------------\r\n    */\r\n    return (\r\n        <Box className={props.className}\r\n            css={props.css}\r\n            size={props.size ?? \"100\"}>\r\n            <InputLabel {...props}/>\r\n            <div className=\"editor-container\">\r\n                {!props.disabled\r\n                    && <EditorMenu\r\n                        editor={editor}\r\n                        options={options === \"basic\" ? editorBasic : options === \"full\" ? editorFull : options}/>}\r\n                <EditorTipTap\r\n                    className=\"editor\"\r\n                    disabled={props.disabled}\r\n                    editor={editor}\r\n                    id={props.id}\r\n                    name={props.name}\r\n                    style={{ minHeight: (props.height ?? 100) + \"px\" }}/>\r\n            </div>\r\n            <InputFeedback {...props}/>\r\n        </Box>\r\n    );\r\n};\r\nEditor.displayName = \"Editor\";"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,IAAa,KAAU,EAAE,aAAU,SAAS,gBAAa,UAAU,GAAG,QAAyB;CAC3F,IAAM,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,IAAS,EAAU;EACrB,YAAY;GACR;GACA;GACA;GACA;GACA;GACA,EAAK,UAAU;IACX,WAAW,MAAS,eAAe,KAAK,CAAI;IAC5C,gBAAgB,EACZ,KAAK,GACT;GACJ,CAAC;GACD,EAAM,UAAU,EACZ,aAAa,GACjB,CAAC;EACL;EACA,UAAU,CAAC,EAAM;EACjB,SAAS,EAAM,SAAS;EACxB,eAAe,EAAW,EAAI;EAC9B,cAAc,EAAW,EAAK;EAC9B,WAAW,EAAE,gBAAa;GACtB,EAAM,SAAS,EAAO,QAAQ,CAAC;EACnC;CACJ,CAAC;CAkBD,OAhBK,KAKL,QAAgB;EACZ,AAAI,KAAU,CAAC,KACX,GAAQ,SAAS,WAAW,EAAM,KAAK;CAE/C,GAAG,CAAC,EAAM,KAAK,CAAC,GAQZ,kBAAC,GAAD;EAAK,WAAW,EAAM;EAClB,KAAK,EAAM;EACX,MAAM,EAAM,QAAQ;YAFxB;GAGI,kBAAC,GAAD,EAAY,GAAI,EAAO,CAAA;GACvB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACK,CAAC,EAAM,YACD,kBAAC,GAAD;KACS;KACR,SAAS,MAAY,UAAU,IAAc,MAAY,SAAS,IAAa;IAAS,CAAA,GAChG,kBAAC,GAAD;KACI,WAAU;KACV,UAAU,EAAM;KACR;KACR,IAAI,EAAM;KACV,MAAM,EAAM;KACZ,OAAO,EAAE,YAAY,EAAM,UAAU,OAAO,KAAK;IAAG,CAAA,CACvD;;GACL,kBAAC,GAAD,EAAe,GAAI,EAAO,CAAA;EACzB;QAlCL,QAAQ,MAAM,8DAA8D,GACrE;AAmCf;AACA,EAAO,cAAc"}

package/input/@types/index.d.ts

@@ -1,111 +1,113 @@
 import { PasswordProps } from 'primereact/password';
 import { default as React, HTMLInputTypeAttribute } from 'react';
 import { ApiComponentProps, ApiFieldModeProps, ApiFieldHookFormProps, ApiFieldComponentProps, ApiFieldControlledProps } from '../../api';
-interface InputMaskProps {
-    /**
-     * Define mascara no campo de dados
-     */
-    mask?: string | "cpf" | "cnpj"
-
-    /**
-     * Define se campo vai ser limpo se mascara tiver imcompleta
-     */
-    maskAutoClear?: boolean
-}
-
-interface InputPasswordProps {
-    /**
-     * Define se vai ou não mostra o botão para exibir a senha
-     */
-    passwordShow?: boolean
-
-    /**
-     * Define se vai ou não mostra a legenda da senha
-     */
-    passwordFeedback?: boolean
-
-    /**
-     * Define o template do cabeçalho do password
-     */
-    passwordHeaderTemplate?: (props: PasswordProps) => React.ReactNode
-
-    /**
-     * Define o template do Rodapé do password
-     */
-    passwordFooterTemplate?: (props: PasswordProps) => React.ReactNode
-
-    /**
-     * Define o template do password
-     */
-    passwordTemplate?: (props: PasswordProps) => React.ReactNode
-}
-
-interface InputNumberProps {
-
-    /**
-     * Define o tamanho mínimo para input do tipo 'Number'
-     */
-    numberMin?: number
-
-    /**
-     * Define o tamanho máximo para input do tipo 'Number'
-     */
-    numberMax?: number
-
-    /**
-     * Define o modo para input do tipo 'Number'
-     */
-    numberMode?: "decimal" | "currency"
-
-    /**
-     * Define o modo de dinheiro para input do tipo 'Number'
-     */
-    numberCurrency?: "BRL" | string
-
-    /**
-     * Define o prfixo para input do tipo 'Number'
-     */
-    numberPrefix?: string
-
-    /**
-     * Define o sufixo para input do tipo 'Number'
-     */
-    numberSuffix?: string
-
-    /**
-     * Define se separador decimal vai ser exibibo para input do tipo 'Number'
-     */
-    numberDecimalSeparator?: boolean
-
-    /**
-     * Define o mínimo de casas decimais para input do tipo 'Number'
-     */
-    numberMaxFractionDigits?: number
-
-    /**
-     * Define o máximo de casas decimais para input do tipo 'Number'
-     */
-    numberMinFractionDigits?: number
-}
-
-interface InputBaseProps extends ApiComponentProps, ApiFieldComponentProps, InputPasswordProps, InputMaskProps, InputNumberProps {
-
-    /**
-     * Define o tipo de dados do componente
-     */
-    type?: Extract<HTMLInputTypeAttribute, "text" | "date" | "email" | "time" | "number" | "password">
-
-    /**
-     * A propriedade `ref` retorna a referência do componente
-     */
-    ref?: React.Ref<HTMLInputElement>
-
-    /**
-     * Define o tamanho do componente
-     */
-    sizes?: "small" | "large"
-}
-
-export type InputProps<T extends ApiFieldModeProps> = T extends "Controlled"
-    ? InputBaseProps & ApiFieldControlledProps
+
+
+interface InputMaskProps {
+    /**
+     * Define mascara no campo de dados
+     */
+    mask?: string | "cpf" | "cnpj"
+
+    /**
+     * Define se campo vai ser limpo se mascara tiver imcompleta
+     */
+    maskAutoClear?: boolean
+}
+
+interface InputPasswordProps {
+    /**
+     * Define se vai ou não mostra o botão para exibir a senha
+     */
+    passwordShow?: boolean
+
+    /**
+     * Define se vai ou não mostra a legenda da senha
+     */
+    passwordFeedback?: boolean
+
+    /**
+     * Define o template do cabeçalho do password
+     */
+    passwordHeaderTemplate?: (props: PasswordProps) => React.ReactNode
+
+    /**
+     * Define o template do Rodapé do password
+     */
+    passwordFooterTemplate?: (props: PasswordProps) => React.ReactNode
+
+    /**
+     * Define o template do password
+     */
+    passwordTemplate?: (props: PasswordProps) => React.ReactNode
+}
+
+interface InputNumberProps {
+
+    /**
+     * Define o tamanho mínimo para input do tipo 'Number'
+     */
+    numberMin?: number
+
+    /**
+     * Define o tamanho máximo para input do tipo 'Number'
+     */
+    numberMax?: number
+
+    /**
+     * Define o modo para input do tipo 'Number'
+     */
+    numberMode?: "decimal" | "currency"
+
+    /**
+     * Define o modo de dinheiro para input do tipo 'Number'
+     */
+    numberCurrency?: "BRL" | string
+
+    /**
+     * Define o prfixo para input do tipo 'Number'
+     */
+    numberPrefix?: string
+
+    /**
+     * Define o sufixo para input do tipo 'Number'
+     */
+    numberSuffix?: string
+
+    /**
+     * Define se separador decimal vai ser exibibo para input do tipo 'Number'
+     */
+    numberDecimalSeparator?: boolean
+
+    /**
+     * Define o mínimo de casas decimais para input do tipo 'Number'
+     */
+    numberMaxFractionDigits?: number
+
+    /**
+     * Define o máximo de casas decimais para input do tipo 'Number'
+     */
+    numberMinFractionDigits?: number
+}
+
+interface InputBaseProps extends ApiComponentProps, ApiFieldComponentProps, InputPasswordProps, InputMaskProps, InputNumberProps {
+
+    /**
+     * Define o tipo de dados do componente
+     */
+    type?: Extract<HTMLInputTypeAttribute, "text" | "date" | "email" | "time" | "number" | "password">
+
+    /**
+     * A propriedade `ref` retorna a referência do componente
+     */
+    ref?: React.Ref<HTMLInputElement>
+
+    /**
+     * Define o tamanho do componente
+     */
+    sizes?: "small" | "large"
+}
+
+export type InputProps<T extends ApiFieldModeProps> = T extends "Controlled"
+    ? InputBaseProps & ApiFieldControlledProps
     : InputBaseProps & ApiFieldHookFormProps;

package/input/core/controlled/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","names":[],"sources":["../../../../src/input/core/controlled.tsx"],"sourcesContent":["import React from \"react\";\nimport { InputProps } from \"..\";\nimport { InputFeedback } from \"../../api\";\nimport { InputText } from \"primereact/inputtext\";\nimport { InputNumber } from \"primereact/inputnumber\";\nimport { Password, PasswordProps } from \"primereact/password\";\nimport { InputMask, InputMaskProps } from \"primereact/inputmask\";\n\ntype Props = {\n    masker: InputMaskProps,\n    password: PasswordProps\n    core: any & { ref: React.Ref<HTMLInputElement> | undefined },\n};\n\n/**\n * Core - `InputControlled`\n * Define o componente controlled\n */\nexport function InputControlled({ core, password, masker, ...props }: InputProps<\"Controlled\"> & Props) {\n    const { type, ...coreNumber } = core;\n    /*\n    |------------------------------------------\n    | render() - Renderização do componente\n    |------------------------------------------\n    */\n    return (\n        <>\n            {props.mask !== undefined\n                ? <InputMask\n                    {...core}\n                    {...masker}\n                    readOnly={props.readonly}\n                    ref={props.ref}\n                    value={props.value}\n                    onBlur={event => {\n                        if (props.onBlur) {\n                            props.onBlur(event.target.value);\n                        }\n                    }}\n                    onChange={event => {\n                        if (props.onChange) {\n                            props.onChange(event.target.value);\n                        }\n                    }}/>\n                : (props.type === \"password\"\n                    ? <Password\n                        {...core}\n                        {...password}\n                        autoComplete=\"current-password\"\n                        readOnly={props.readonly}\n                        ref={props.ref}\n                        value={props.value}\n                        onBlur={event => {\n                            if (props.onBlur) {\n                                props.onBlur(event.target.value);\n                            }\n                        }}\n                        onChange={event => {\n                            if (props.onChange) {\n                                props.onChange(event.target.value);\n                            }\n                        }}/>\n                    : (props.type === \"number\"\n                        ? <InputNumber\n                            {...coreNumber}\n                            currency={props.numberCurrency ?? \"BRL\"}\n                            locale=\"pt-BR\"\n                            max={props.numberMax}\n                            maxFractionDigits={props.numberMaxFractionDigits}\n                            min={props.numberMin}\n                            minFractionDigits={props.numberMinFractionDigits}\n                            mode={props.numberMode}\n                            prefix={props.numberPrefix}\n                            pt={{ input: { root: { className: \"w-100\" } } }}\n                            readOnly={props.readonly}\n                            ref={props.ref}\n                            suffix={props.numberSuffix}\n                            useGrouping={props.numberDecimalSeparator ?? false}\n                            value={props.value}\n                            onBlur={event => {\n                                if (props.onBlur) {\n                                    props.onBlur(event.target.value);\n                                }\n                            }}\n                            onValueChange={event => {\n                                if (props.onChange) {\n                                    props.onChange(event.value);\n                                }\n                            }}/>\n                        : <InputText {...core}\n                            readOnly={props.readonly}\n                            ref={props.ref}\n                            value={props.value}\n                            onBlur={event => {\n                                if (props.onBlur) {\n                                    props.onBlur(event.target.value);\n                                }\n                            }}\n                            onChange={event => {\n                                if (props.onChange) {\n                                    props.onChange(event.target.value);\n                                }\n                            }}/>\n                    ))}\n            <InputFeedback {...props}/>\n        </>\n    );\n}"],"mappings":";;;;;;;;;AAkBA,SAAgB,EAAgB,EAAE,SAAM,aAAU,WAAQ,GAAG,KAA2C;CACpG,IAAM,EAAE,SAAM,GAAG,MAAe;CAMhC,OACI,kBAAA,GAAA,EAAA,UAAA,CACK,EAAM,SAAS,KAAA,IAiBT,EAAM,SAAS,aACZ,kBAAC,GAAD;EACE,GAAI;EACJ,GAAI;EACJ,cAAa;EACb,UAAU,EAAM;EAChB,KAAK,EAAM;EACX,OAAO,EAAM;EACb,SAAQ,MAAS;GACb,AAAI,EAAM,UACN,EAAM,OAAO,EAAM,OAAO,MAAM;;EAGxC,WAAU,MAAS;GACf,AAAI,EAAM,YACN,EAAM,SAAS,EAAM,OAAO,MAAM;;EAEtC,CAAA,GACL,EAAM,SAAS,WACZ,kBAAC,GAAD;EACE,GAAI;EACJ,UAAU,EAAM,kBAAkB;EAClC,QAAO;EACP,KAAK,EAAM;EACX,mBAAmB,EAAM;EACzB,KAAK,EAAM;EACX,mBAAmB,EAAM;EACzB,MAAM,EAAM;EACZ,QAAQ,EAAM;EACd,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,SAAS,EAAE,EAAE;EAC/C,UAAU,EAAM;EAChB,KAAK,EAAM;EACX,QAAQ,EAAM;EACd,aAAa,EAAM,0BAA0B;EAC7C,OAAO,EAAM;EACb,SAAQ,MAAS;GACb,AAAI,EAAM,UACN,EAAM,OAAO,EAAM,OAAO,MAAM;;EAGxC,gBAAe,MAAS;GACpB,AAAI,EAAM,YACN,EAAM,SAAS,EAAM,MAAM;;EAE/B,CAAA,GACN,kBAAC,GAAD;EAAW,GAAI;EACb,UAAU,EAAM;EAChB,KAAK,EAAM;EACX,OAAO,EAAM;EACb,SAAQ,MAAS;GACb,AAAI,EAAM,UACN,EAAM,OAAO,EAAM,OAAO,MAAM;;EAGxC,WAAU,MAAS;GACf,AAAI,EAAM,YACN,EAAM,SAAS,EAAM,OAAO,MAAM;;EAEtC,CAAA,GA1Ed,kBAAC,GAAD;EACE,GAAI;EACJ,GAAI;EACJ,UAAU,EAAM;EAChB,KAAK,EAAM;EACX,OAAO,EAAM;EACb,SAAQ,MAAS;GACb,AAAI,EAAM,UACN,EAAM,OAAO,EAAM,OAAO,MAAM;;EAGxC,WAAU,MAAS;GACf,AAAI,EAAM,YACN,EAAM,SAAS,EAAM,OAAO,MAAM;;EAEtC,CAAA,EA6DZ,kBAAC,GAAD,EAAe,GAAI,GAAQ,CAAA,CAC5B,EAAA,CAAA"}
+{"version":3,"file":"index.esm.js","names":[],"sources":["../../../../src/input/core/controlled.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { InputProps } from \"..\";\r\nimport { InputFeedback } from \"../../api\";\r\nimport { InputText } from \"primereact/inputtext\";\r\nimport { InputNumber } from \"primereact/inputnumber\";\r\nimport { Password, PasswordProps } from \"primereact/password\";\r\nimport { InputMask, InputMaskProps } from \"primereact/inputmask\";\r\n\r\ntype Props = {\r\n    masker: InputMaskProps,\r\n    password: PasswordProps\r\n    core: any & { ref: React.Ref<HTMLInputElement> | undefined },\r\n};\r\n\r\n/**\r\n * Core - `InputControlled`\r\n * Define o componente controlled\r\n */\r\nexport function InputControlled({ core, password, masker, ...props }: InputProps<\"Controlled\"> & Props) {\r\n    const { type, ...coreNumber } = core;\r\n    /*\r\n    |------------------------------------------\r\n    | render() - Renderização do componente\r\n    |------------------------------------------\r\n    */\r\n    return (\r\n        <>\r\n            {props.mask !== undefined\r\n                ? <InputMask\r\n                    {...core}\r\n                    {...masker}\r\n                    readOnly={props.readonly}\r\n                    ref={props.ref}\r\n                    value={props.value}\r\n                    onBlur={event => {\r\n                        if (props.onBlur) {\r\n                            props.onBlur(event.target.value);\r\n                        }\r\n                    }}\r\n                    onChange={event => {\r\n                        if (props.onChange) {\r\n                            props.onChange(event.target.value);\r\n                        }\r\n                    }}/>\r\n                : (props.type === \"password\"\r\n                    ? <Password\r\n                        {...core}\r\n                        {...password}\r\n                        autoComplete=\"current-password\"\r\n                        readOnly={props.readonly}\r\n                        ref={props.ref}\r\n                        value={props.value}\r\n                        onBlur={event => {\r\n                            if (props.onBlur) {\r\n                                props.onBlur(event.target.value);\r\n                            }\r\n                        }}\r\n                        onChange={event => {\r\n                            if (props.onChange) {\r\n                                props.onChange(event.target.value);\r\n                            }\r\n                        }}/>\r\n                    : (props.type === \"number\"\r\n                        ? <InputNumber\r\n                            {...coreNumber}\r\n                            currency={props.numberCurrency ?? \"BRL\"}\r\n                            locale=\"pt-BR\"\r\n                            max={props.numberMax}\r\n                            maxFractionDigits={props.numberMaxFractionDigits}\r\n                            min={props.numberMin}\r\n                            minFractionDigits={props.numberMinFractionDigits}\r\n                            mode={props.numberMode}\r\n                            prefix={props.numberPrefix}\r\n                            pt={{ input: { root: { className: \"w-100\" } } }}\r\n                            readOnly={props.readonly}\r\n                            ref={props.ref}\r\n                            suffix={props.numberSuffix}\r\n                            useGrouping={props.numberDecimalSeparator ?? false}\r\n                            value={props.value}\r\n                            onBlur={event => {\r\n                                if (props.onBlur) {\r\n                                    props.onBlur(event.target.value);\r\n                                }\r\n                            }}\r\n                            onValueChange={event => {\r\n                                if (props.onChange) {\r\n                                    props.onChange(event.value);\r\n                                }\r\n                            }}/>\r\n                        : <InputText {...core}\r\n                            readOnly={props.readonly}\r\n                            ref={props.ref}\r\n                            value={props.value}\r\n                            onBlur={event => {\r\n                                if (props.onBlur) {\r\n                                    props.onBlur(event.target.value);\r\n                                }\r\n                            }}\r\n                            onChange={event => {\r\n                                if (props.onChange) {\r\n                                    props.onChange(event.target.value);\r\n                                }\r\n                            }}/>\r\n                    ))}\r\n            <InputFeedback {...props}/>\r\n        </>\r\n    );\r\n}"],"mappings":";;;;;;;;;AAkBA,SAAgB,EAAgB,EAAE,SAAM,aAAU,WAAQ,GAAG,KAA2C;CACpG,IAAM,EAAE,SAAM,GAAG,MAAe;CAMhC,OACI,kBAAA,GAAA,EAAA,UAAA,CACK,EAAM,SAAS,KAAA,IAiBT,EAAM,SAAS,aACZ,kBAAC,GAAD;EACE,GAAI;EACJ,GAAI;EACJ,cAAa;EACb,UAAU,EAAM;EAChB,KAAK,EAAM;EACX,OAAO,EAAM;EACb,SAAQ,MAAS;GACb,AAAI,EAAM,UACN,EAAM,OAAO,EAAM,OAAO,KAAK;EAEvC;EACA,WAAU,MAAS;GACf,AAAI,EAAM,YACN,EAAM,SAAS,EAAM,OAAO,KAAK;EAEzC;CAAG,CAAA,IACJ,EAAM,SAAS,WACZ,kBAAC,GAAD;EACE,GAAI;EACJ,UAAU,EAAM,kBAAkB;EAClC,QAAO;EACP,KAAK,EAAM;EACX,mBAAmB,EAAM;EACzB,KAAK,EAAM;EACX,mBAAmB,EAAM;EACzB,MAAM,EAAM;EACZ,QAAQ,EAAM;EACd,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,QAAQ,EAAE,EAAE;EAC9C,UAAU,EAAM;EAChB,KAAK,EAAM;EACX,QAAQ,EAAM;EACd,aAAa,EAAM,0BAA0B;EAC7C,OAAO,EAAM;EACb,SAAQ,MAAS;GACb,AAAI,EAAM,UACN,EAAM,OAAO,EAAM,OAAO,KAAK;EAEvC;EACA,gBAAe,MAAS;GACpB,AAAI,EAAM,YACN,EAAM,SAAS,EAAM,KAAK;EAElC;CAAG,CAAA,IACL,kBAAC,GAAD;EAAW,GAAI;EACb,UAAU,EAAM;EAChB,KAAK,EAAM;EACX,OAAO,EAAM;EACb,SAAQ,MAAS;GACb,AAAI,EAAM,UACN,EAAM,OAAO,EAAM,OAAO,KAAK;EAEvC;EACA,WAAU,MAAS;GACf,AAAI,EAAM,YACN,EAAM,SAAS,EAAM,OAAO,KAAK;EAEzC;CAAG,CAAA,IA1Eb,kBAAC,GAAD;EACE,GAAI;EACJ,GAAI;EACJ,UAAU,EAAM;EAChB,KAAK,EAAM;EACX,OAAO,EAAM;EACb,SAAQ,MAAS;GACb,AAAI,EAAM,UACN,EAAM,OAAO,EAAM,OAAO,KAAK;EAEvC;EACA,WAAU,MAAS;GACf,AAAI,EAAM,YACN,EAAM,SAAS,EAAM,OAAO,KAAK;EAEzC;CAAG,CAAA,GA6DX,kBAAC,GAAD,EAAe,GAAI,EAAO,CAAA,CAC5B,EAAA,CAAA;AAEV"}

package/input/core/hookForm/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","names":[],"sources":["../../../../src/input/core/hookForm.tsx"],"sourcesContent":["import React from \"react\";\nimport { InputProps } from \"..\";\nimport { InputFeedback } from \"../../api\";\nimport { Controller } from \"react-hook-form\";\nimport { InputText } from \"primereact/inputtext\";\nimport { InputNumber } from \"primereact/inputnumber\";\nimport { Password, PasswordProps } from \"primereact/password\";\nimport { InputMask, InputMaskProps } from \"primereact/inputmask\";\n\ntype Props = {\n    masker: InputMaskProps\n    password: PasswordProps\n    core: any & { ref: React.Ref<HTMLInputElement> | undefined }\n};\n\n/**\n * Core - `InputHookForm`\n * Define o componente utilizando o HookForm\n */\nexport function InputHookForm({ core, password, masker, ...props }: InputProps<\"HookForm\"> & Props) {\n    const { type, ...coreNumber } = core;\n    /*\n    |------------------------------------------\n    | render() - Renderização do componente\n    |------------------------------------------\n    */\n    return (\n        <Controller\n            render={({ field, formState: { errors } }) => {\n                return (\n                    <>\n                        {props.mask !== undefined\n                            ? <InputMask\n                                {...core}\n                                {...field}\n                                {...masker}\n                                invalid={!!errors[props.name]}\n                                readOnly={props.readonly}\n                                ref={props.ref}\n                                required={props.required}\n                                value={field.value ?? \"\"}\n                                onBlur={e => props.onBlur ? props.onBlur(e.target.value) : field.onBlur()}\n                                onChange={e => props.onChange !== undefined ? props.onChange(e.target.value) : field.onChange(e)}/>\n                            : (props.type === \"password\"\n                                ? <Password\n                                    {...core}\n                                    {...field}\n                                    {...password}\n                                    autoComplete=\"current-password\"\n                                    invalid={!!errors[props.name]}\n                                    readOnly={props.readonly}\n                                    ref={props.ref}\n                                    required={props.required}\n                                    value={field.value ?? \"\"}\n                                    onBlur={e => props.onBlur ? props.onBlur(e.target.value) : field.onBlur()}\n                                    onChange={e => props.onChange !== undefined ? props.onChange(e.target.value) : field.onChange(e)}/>\n                                : (props.type === \"number\"\n                                    ? <InputNumber\n                                        {...coreNumber}\n                                        {...field}\n                                        currency={props.numberCurrency ?? \"BRL\"}\n                                        invalid={!!errors[props.name]}\n                                        locale=\"pt-BR\"\n                                        max={props.numberMax}\n                                        maxFractionDigits={props.numberMaxFractionDigits}\n                                        min={props.numberMin}\n                                        minFractionDigits={props.numberMinFractionDigits}\n                                        mode={props.numberMode}\n                                        prefix={props.numberPrefix}\n                                        pt={{ input: { root: { className: \"w-100\" } } }}\n                                        readOnly={props.readonly}\n                                        ref={props.ref}\n                                        suffix={props.numberSuffix}\n                                        useGrouping={props.numberDecimalSeparator ?? false}\n                                        value={field.value ?? \"\"}\n                                        onBlur={e => props.onBlur ? props.onBlur(e.target.value) : field.onBlur()}\n                                        onChange={e => props.onChange !== undefined ? props.onChange(e.value) : field.onChange(e.value)}/>\n                                    : <InputText\n                                        {...core}\n                                        {...field}\n                                        invalid={!!errors[props.name]}\n                                        readOnly={props.readonly}\n                                        ref={props.ref}\n                                        required={props.required}\n                                        value={field.value ?? \"\"}\n                                        onBlur={e => props.onBlur ? props.onBlur(e.target.value) : field.onBlur()}\n                                        onChange={e => props.onChange !== undefined ? props.onChange(e.target.value) : field.onChange(e)}/>\n                                ))}\n                        <InputFeedback\n                            {...props}\n                            errors={errors}/>\n                    </>\n                );\n            }}\n            control={props.control}\n            name={props.name}\n            rules={{ required: !props.required ? false : \"Campo obrigatório\" }}/>\n    );\n}"],"mappings":";;;;;;;;;;AAmBA,SAAgB,EAAc,EAAE,SAAM,aAAU,WAAQ,GAAG,KAAyC;CAChG,IAAM,EAAE,SAAM,GAAG,MAAe;CAMhC,OACI,kBAAC,GAAD;EACI,SAAS,EAAE,UAAO,WAAW,EAAE,kBAEvB,kBAAA,GAAA,EAAA,UAAA,CACK,EAAM,SAAS,KAAA,IAYT,EAAM,SAAS,aACZ,kBAAC,GAAD;GACE,GAAI;GACJ,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,SAAS,CAAC,CAAC,EAAO,EAAM;GACxB,UAAU,EAAM;GAChB,KAAK,EAAM;GACX,UAAU,EAAM;GAChB,OAAO,EAAM,SAAS;GACtB,SAAQ,MAAK,EAAM,SAAS,EAAM,OAAO,EAAE,OAAO,MAAM,GAAG,EAAM,QAAQ;GACzE,WAAU,MAAK,EAAM,aAAa,KAAA,IAA6C,EAAM,SAAS,EAAE,GAAlD,EAAM,SAAS,EAAE,OAAO,MAAM;GAAuB,CAAA,GACpG,EAAM,SAAS,WACZ,kBAAC,GAAD;GACE,GAAI;GACJ,GAAI;GACJ,UAAU,EAAM,kBAAkB;GAClC,SAAS,CAAC,CAAC,EAAO,EAAM;GACxB,QAAO;GACP,KAAK,EAAM;GACX,mBAAmB,EAAM;GACzB,KAAK,EAAM;GACX,mBAAmB,EAAM;GACzB,MAAM,EAAM;GACZ,QAAQ,EAAM;GACd,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,SAAS,EAAE,EAAE;GAC/C,UAAU,EAAM;GAChB,KAAK,EAAM;GACX,QAAQ,EAAM;GACd,aAAa,EAAM,0BAA0B;GAC7C,OAAO,EAAM,SAAS;GACtB,SAAQ,MAAK,EAAM,SAAS,EAAM,OAAO,EAAE,OAAO,MAAM,GAAG,EAAM,QAAQ;GACzE,WAAU,MAAK,EAAM,aAAa,KAAA,IAAsC,EAAM,SAAS,EAAE,MAAM,GAAjD,EAAM,SAAS,EAAE,MAAM;GAA6B,CAAA,GACpG,kBAAC,GAAD;GACE,GAAI;GACJ,GAAI;GACJ,SAAS,CAAC,CAAC,EAAO,EAAM;GACxB,UAAU,EAAM;GAChB,KAAK,EAAM;GACX,UAAU,EAAM;GAChB,OAAO,EAAM,SAAS;GACtB,SAAQ,MAAK,EAAM,SAAS,EAAM,OAAO,EAAE,OAAO,MAAM,GAAG,EAAM,QAAQ;GACzE,WAAU,MAAK,EAAM,aAAa,KAAA,IAA6C,EAAM,SAAS,EAAE,GAAlD,EAAM,SAAS,EAAE,OAAO,MAAM;GAAuB,CAAA,GAtD7G,kBAAC,GAAD;GACE,GAAI;GACJ,GAAI;GACJ,GAAI;GACJ,SAAS,CAAC,CAAC,EAAO,EAAM;GACxB,UAAU,EAAM;GAChB,KAAK,EAAM;GACX,UAAU,EAAM;GAChB,OAAO,EAAM,SAAS;GACtB,SAAQ,MAAK,EAAM,SAAS,EAAM,OAAO,EAAE,OAAO,MAAM,GAAG,EAAM,QAAQ;GACzE,WAAU,MAAK,EAAM,aAAa,KAAA,IAA6C,EAAM,SAAS,EAAE,GAAlD,EAAM,SAAS,EAAE,OAAO,MAAM;GAAuB,CAAA,EA8C3G,kBAAC,GAAD;GACI,GAAI;GACI;GAAS,CAAA,CACtB,EAAA,CAAA;EAGX,SAAS,EAAM;EACf,MAAM,EAAM;EACZ,OAAO,EAAE,UAAW,EAAM,WAAmB,sBAAR,IAA6B;EAAG,CAAA"}
+{"version":3,"file":"index.esm.js","names":[],"sources":["../../../../src/input/core/hookForm.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { InputProps } from \"..\";\r\nimport { InputFeedback } from \"../../api\";\r\nimport { Controller } from \"react-hook-form\";\r\nimport { InputText } from \"primereact/inputtext\";\r\nimport { InputNumber } from \"primereact/inputnumber\";\r\nimport { Password, PasswordProps } from \"primereact/password\";\r\nimport { InputMask, InputMaskProps } from \"primereact/inputmask\";\r\n\r\ntype Props = {\r\n    masker: InputMaskProps\r\n    password: PasswordProps\r\n    core: any & { ref: React.Ref<HTMLInputElement> | undefined }\r\n};\r\n\r\n/**\r\n * Core - `InputHookForm`\r\n * Define o componente utilizando o HookForm\r\n */\r\nexport function InputHookForm({ core, password, masker, ...props }: InputProps<\"HookForm\"> & Props) {\r\n    const { type, ...coreNumber } = core;\r\n    /*\r\n    |------------------------------------------\r\n    | render() - Renderização do componente\r\n    |------------------------------------------\r\n    */\r\n    return (\r\n        <Controller\r\n            render={({ field, formState: { errors } }) => {\r\n                return (\r\n                    <>\r\n                        {props.mask !== undefined\r\n                            ? <InputMask\r\n                                {...core}\r\n                                {...field}\r\n                                {...masker}\r\n                                invalid={!!errors[props.name]}\r\n                                readOnly={props.readonly}\r\n                                ref={props.ref}\r\n                                required={props.required}\r\n                                value={field.value ?? \"\"}\r\n                                onBlur={e => props.onBlur ? props.onBlur(e.target.value) : field.onBlur()}\r\n                                onChange={e => props.onChange !== undefined ? props.onChange(e.target.value) : field.onChange(e)}/>\r\n                            : (props.type === \"password\"\r\n                                ? <Password\r\n                                    {...core}\r\n                                    {...field}\r\n                                    {...password}\r\n                                    autoComplete=\"current-password\"\r\n                                    invalid={!!errors[props.name]}\r\n                                    readOnly={props.readonly}\r\n                                    ref={props.ref}\r\n                                    required={props.required}\r\n                                    value={field.value ?? \"\"}\r\n                                    onBlur={e => props.onBlur ? props.onBlur(e.target.value) : field.onBlur()}\r\n                                    onChange={e => props.onChange !== undefined ? props.onChange(e.target.value) : field.onChange(e)}/>\r\n                                : (props.type === \"number\"\r\n                                    ? <InputNumber\r\n                                        {...coreNumber}\r\n                                        {...field}\r\n                                        currency={props.numberCurrency ?? \"BRL\"}\r\n                                        invalid={!!errors[props.name]}\r\n                                        locale=\"pt-BR\"\r\n                                        max={props.numberMax}\r\n                                        maxFractionDigits={props.numberMaxFractionDigits}\r\n                                        min={props.numberMin}\r\n                                        minFractionDigits={props.numberMinFractionDigits}\r\n                                        mode={props.numberMode}\r\n                                        prefix={props.numberPrefix}\r\n                                        pt={{ input: { root: { className: \"w-100\" } } }}\r\n                                        readOnly={props.readonly}\r\n                                        ref={props.ref}\r\n                                        suffix={props.numberSuffix}\r\n                                        useGrouping={props.numberDecimalSeparator ?? false}\r\n                                        value={field.value ?? \"\"}\r\n                                        onBlur={e => props.onBlur ? props.onBlur(e.target.value) : field.onBlur()}\r\n                                        onChange={e => props.onChange !== undefined ? props.onChange(e.value) : field.onChange(e.value)}/>\r\n                                    : <InputText\r\n                                        {...core}\r\n                                        {...field}\r\n                                        invalid={!!errors[props.name]}\r\n                                        readOnly={props.readonly}\r\n                                        ref={props.ref}\r\n                                        required={props.required}\r\n                                        value={field.value ?? \"\"}\r\n                                        onBlur={e => props.onBlur ? props.onBlur(e.target.value) : field.onBlur()}\r\n                                        onChange={e => props.onChange !== undefined ? props.onChange(e.target.value) : field.onChange(e)}/>\r\n                                ))}\r\n                        <InputFeedback\r\n                            {...props}\r\n                            errors={errors}/>\r\n                    </>\r\n                );\r\n            }}\r\n            control={props.control}\r\n            name={props.name}\r\n            rules={{ required: !props.required ? false : \"Campo obrigatório\" }}/>\r\n    );\r\n}"],"mappings":";;;;;;;;;;AAmBA,SAAgB,EAAc,EAAE,SAAM,aAAU,WAAQ,GAAG,KAAyC;CAChG,IAAM,EAAE,SAAM,GAAG,MAAe;CAMhC,OACI,kBAAC,GAAD;EACI,SAAS,EAAE,UAAO,WAAW,EAAE,kBAEvB,kBAAA,GAAA,EAAA,UAAA,CACK,EAAM,SAAS,KAAA,IAYT,EAAM,SAAS,aACZ,kBAAC,GAAD;GACE,GAAI;GACJ,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,SAAS,CAAC,CAAC,EAAO,EAAM;GACxB,UAAU,EAAM;GAChB,KAAK,EAAM;GACX,UAAU,EAAM;GAChB,OAAO,EAAM,SAAS;GACtB,SAAQ,MAAK,EAAM,SAAS,EAAM,OAAO,EAAE,OAAO,KAAK,IAAI,EAAM,OAAO;GACxE,WAAU,MAAK,EAAM,aAAa,KAAA,IAA6C,EAAM,SAAS,CAAC,IAAjD,EAAM,SAAS,EAAE,OAAO,KAAK;EAAuB,CAAA,IACnG,EAAM,SAAS,WACZ,kBAAC,GAAD;GACE,GAAI;GACJ,GAAI;GACJ,UAAU,EAAM,kBAAkB;GAClC,SAAS,CAAC,CAAC,EAAO,EAAM;GACxB,QAAO;GACP,KAAK,EAAM;GACX,mBAAmB,EAAM;GACzB,KAAK,EAAM;GACX,mBAAmB,EAAM;GACzB,MAAM,EAAM;GACZ,QAAQ,EAAM;GACd,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,QAAQ,EAAE,EAAE;GAC9C,UAAU,EAAM;GAChB,KAAK,EAAM;GACX,QAAQ,EAAM;GACd,aAAa,EAAM,0BAA0B;GAC7C,OAAO,EAAM,SAAS;GACtB,SAAQ,MAAK,EAAM,SAAS,EAAM,OAAO,EAAE,OAAO,KAAK,IAAI,EAAM,OAAO;GACxE,WAAU,MAAK,EAAM,aAAa,KAAA,IAAsC,EAAM,SAAS,EAAE,KAAK,IAAhD,EAAM,SAAS,EAAE,KAAK;EAA6B,CAAA,IACnG,kBAAC,GAAD;GACE,GAAI;GACJ,GAAI;GACJ,SAAS,CAAC,CAAC,EAAO,EAAM;GACxB,UAAU,EAAM;GAChB,KAAK,EAAM;GACX,UAAU,EAAM;GAChB,OAAO,EAAM,SAAS;GACtB,SAAQ,MAAK,EAAM,SAAS,EAAM,OAAO,EAAE,OAAO,KAAK,IAAI,EAAM,OAAO;GACxE,WAAU,MAAK,EAAM,aAAa,KAAA,IAA6C,EAAM,SAAS,CAAC,IAAjD,EAAM,SAAS,EAAE,OAAO,KAAK;EAAuB,CAAA,IAtD5G,kBAAC,GAAD;GACE,GAAI;GACJ,GAAI;GACJ,GAAI;GACJ,SAAS,CAAC,CAAC,EAAO,EAAM;GACxB,UAAU,EAAM;GAChB,KAAK,EAAM;GACX,UAAU,EAAM;GAChB,OAAO,EAAM,SAAS;GACtB,SAAQ,MAAK,EAAM,SAAS,EAAM,OAAO,EAAE,OAAO,KAAK,IAAI,EAAM,OAAO;GACxE,WAAU,MAAK,EAAM,aAAa,KAAA,IAA6C,EAAM,SAAS,CAAC,IAAjD,EAAM,SAAS,EAAE,OAAO,KAAK;EAAuB,CAAA,GA8C1G,kBAAC,GAAD;GACI,GAAI;GACI;EAAQ,CAAA,CACtB,EAAA,CAAA;EAGV,SAAS,EAAM;EACf,MAAM,EAAM;EACZ,OAAO,EAAE,UAAW,EAAM,WAAmB,sBAAR,GAA4B;CAAG,CAAA;AAEhF"}

package/input/input/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","names":[],"sources":["../../../src/input/input.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"../box\";\nimport { InputProps } from \".\";\nimport { ApiFieldModeProps } from \"../api\";\nimport { InputHookForm } from \"./core/hookForm\";\nimport { PasswordProps } from \"primereact/password\";\nimport { InputControlled } from \"./core/controlled\";\nimport { InputMaskProps } from \"primereact/inputmask\";\nimport { InputTextProps } from \"primereact/inputtext\";\nimport { InputLabel, InputProps as getInputProps } from \"../api\";\n\n/**\n * Componente - `Input`\n *\n * Um componente versátil utilizado para entrada de dados simples.\n */\nexport function Input<T extends ApiFieldModeProps = \"Controlled\">(props: InputProps<T> & { mode?: T }) {\n\n    let propsCore = props as any;\n    let sizes = props.sizes === \"small\" ? \"p-inputtext-sm\" : props.sizes === \"large\" ? \"p-inputtext-lg\" : \"\";\n\n    let core: InputTextProps & { ref: React.Ref<HTMLInputElement> | undefined } = {\n        ...getInputProps(propsCore),\n        className: sizes,\n        type: props.type ?? \"text\",\n    };\n    let password: PasswordProps = {\n        appendTo: \"self\",\n        feedback: props.passwordFeedback,\n        footer: props.passwordFooterTemplate,\n        header: props.passwordHeaderTemplate,\n        mediumLabel: \"Média\",\n        promptLabel: \"Por favor, insira uma senha\",\n        pt: { input: { className: \"w-100\" } },\n        strongLabel: \"Forte\",\n        toggleMask: props.passwordShow,\n        weakLabel: \"Fraca\",\n        content: props.passwordTemplate\n    };\n    let mask: InputMaskProps = {\n        mask: props.mask === \"cpf\"\n            ? \"999.999.999-99\"\n            : props.mask === \"cnpj\"\n                ? \"99.999.999/9999-99\"\n                : props.mask,\n        autoClear: props.maskAutoClear\n    };\n\n    /*\n    |------------------------------------------\n    | render() - Renderização do componente\n    |------------------------------------------\n    */\n    return (\n        <Box\n            className={props.className}\n            css={props.css}\n            size={props.size ?? \"100\"}>\n            <InputLabel {...props}/>\n            {/*@ts-ignore*/}\n            {props.readonly && props.readonlyType === \"label\"\n                ? (\n                    //@ts-ignore\n                    <p className={\"w-100 form-label-readonly \" + (props.readonlyClassName ?? \"\")}>{props.value}</p>\n                )\n                : (!props.mode || props.mode === \"Controlled\"\n                    ? <InputControlled\n                        core={core}\n                        masker={mask}\n                        password={password}\n                        {...propsCore}/>\n                    : <InputHookForm\n                        core={core}\n                        masker={mask}\n                        password={password}\n                        {...propsCore}/>)}\n        </Box>\n    );\n}\n\nInput.displayName = \"Input\";"],"mappings":";;;;;;;;;AAgBA,SAAgB,EAAkD,GAAqC;CAEnG,IAAI,IAAY,GACZ,IAAQ,EAAM,UAAU,UAAU,mBAAmB,EAAM,UAAU,UAAU,mBAAmB,IAElG,IAA0E;EAC1E,GAAG,EAAc,EAAU;EAC3B,WAAW;EACX,MAAM,EAAM,QAAQ;EACvB,EACG,IAA0B;EAC1B,UAAU;EACV,UAAU,EAAM;EAChB,QAAQ,EAAM;EACd,QAAQ,EAAM;EACd,aAAa;EACb,aAAa;EACb,IAAI,EAAE,OAAO,EAAE,WAAW,SAAS,EAAE;EACrC,aAAa;EACb,YAAY,EAAM;EAClB,WAAW;EACX,SAAS,EAAM;EAClB,EACG,IAAuB;EACvB,MAAM,EAAM,SAAS,QACf,mBACA,EAAM,SAAS,SACX,uBACA,EAAM;EAChB,WAAW,EAAM;EACpB;CAOD,OACI,kBAAC,GAAD;EACI,WAAW,EAAM;EACjB,KAAK,EAAM;EACX,MAAM,EAAM,QAAQ;YAHxB,CAII,kBAAC,GAAD,EAAY,GAAI,GAAQ,CAAA,EAEvB,EAAM,YAAY,EAAM,iBAAiB,UAGlC,kBAAC,KAAD;GAAG,WAAW,gCAAgC,EAAM,qBAAqB;aAAM,EAAM;GAAU,CAAA,GAEhG,CAAC,EAAM,QAAQ,EAAM,SAAS,eAC3B,kBAAC,GAAD;GACQ;GACN,QAAQ;GACE;GACV,GAAI;GAAY,CAAA,GAClB,kBAAC,GAAD;GACQ;GACN,QAAQ;GACE;GACV,GAAI;GAAY,CAAA,CAC1B;;;AAId,EAAM,cAAc"}
+{"version":3,"file":"index.esm.js","names":[],"sources":["../../../src/input/input.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Box } from \"../box\";\r\nimport { InputProps } from \".\";\r\nimport { ApiFieldModeProps } from \"../api\";\r\nimport { InputHookForm } from \"./core/hookForm\";\r\nimport { PasswordProps } from \"primereact/password\";\r\nimport { InputControlled } from \"./core/controlled\";\r\nimport { InputMaskProps } from \"primereact/inputmask\";\r\nimport { InputTextProps } from \"primereact/inputtext\";\r\nimport { InputLabel, InputProps as getInputProps } from \"../api\";\r\n\r\n/**\r\n * Componente - `Input`\r\n *\r\n * Um componente versátil utilizado para entrada de dados simples.\r\n */\r\nexport function Input<T extends ApiFieldModeProps = \"Controlled\">(props: InputProps<T> & { mode?: T }) {\r\n\r\n    let propsCore = props as any;\r\n    let sizes = props.sizes === \"small\" ? \"p-inputtext-sm\" : props.sizes === \"large\" ? \"p-inputtext-lg\" : \"\";\r\n\r\n    let core: InputTextProps & { ref: React.Ref<HTMLInputElement> | undefined } = {\r\n        ...getInputProps(propsCore),\r\n        className: sizes,\r\n        type: props.type ?? \"text\",\r\n    };\r\n    let password: PasswordProps = {\r\n        appendTo: \"self\",\r\n        feedback: props.passwordFeedback,\r\n        footer: props.passwordFooterTemplate,\r\n        header: props.passwordHeaderTemplate,\r\n        mediumLabel: \"Média\",\r\n        promptLabel: \"Por favor, insira uma senha\",\r\n        pt: { input: { className: \"w-100\" } },\r\n        strongLabel: \"Forte\",\r\n        toggleMask: props.passwordShow,\r\n        weakLabel: \"Fraca\",\r\n        content: props.passwordTemplate\r\n    };\r\n    let mask: InputMaskProps = {\r\n        mask: props.mask === \"cpf\"\r\n            ? \"999.999.999-99\"\r\n            : props.mask === \"cnpj\"\r\n                ? \"99.999.999/9999-99\"\r\n                : props.mask,\r\n        autoClear: props.maskAutoClear\r\n    };\r\n\r\n    /*\r\n    |------------------------------------------\r\n    | render() - Renderização do componente\r\n    |------------------------------------------\r\n    */\r\n    return (\r\n        <Box\r\n            className={props.className}\r\n            css={props.css}\r\n            size={props.size ?? \"100\"}>\r\n            <InputLabel {...props}/>\r\n            {/*@ts-ignore*/}\r\n            {props.readonly && props.readonlyType === \"label\"\r\n                ? (\r\n                    //@ts-ignore\r\n                    <p className={\"w-100 form-label-readonly \" + (props.readonlyClassName ?? \"\")}>{props.value}</p>\r\n                )\r\n                : (!props.mode || props.mode === \"Controlled\"\r\n                    ? <InputControlled\r\n                        core={core}\r\n                        masker={mask}\r\n                        password={password}\r\n                        {...propsCore}/>\r\n                    : <InputHookForm\r\n                        core={core}\r\n                        masker={mask}\r\n                        password={password}\r\n                        {...propsCore}/>)}\r\n        </Box>\r\n    );\r\n}\r\n\r\nInput.displayName = \"Input\";"],"mappings":";;;;;;;;;AAgBA,SAAgB,EAAkD,GAAqC;CAEnG,IAAI,IAAY,GACZ,IAAQ,EAAM,UAAU,UAAU,mBAAmB,EAAM,UAAU,UAAU,mBAAmB,IAElG,IAA0E;EAC1E,GAAG,EAAc,CAAS;EAC1B,WAAW;EACX,MAAM,EAAM,QAAQ;CACxB,GACI,IAA0B;EAC1B,UAAU;EACV,UAAU,EAAM;EAChB,QAAQ,EAAM;EACd,QAAQ,EAAM;EACd,aAAa;EACb,aAAa;EACb,IAAI,EAAE,OAAO,EAAE,WAAW,QAAQ,EAAE;EACpC,aAAa;EACb,YAAY,EAAM;EAClB,WAAW;EACX,SAAS,EAAM;CACnB,GACI,IAAuB;EACvB,MAAM,EAAM,SAAS,QACf,mBACA,EAAM,SAAS,SACX,uBACA,EAAM;EAChB,WAAW,EAAM;CACrB;CAOA,OACI,kBAAC,GAAD;EACI,WAAW,EAAM;EACjB,KAAK,EAAM;EACX,MAAM,EAAM,QAAQ;YAHxB,CAII,kBAAC,GAAD,EAAY,GAAI,EAAO,CAAA,GAEtB,EAAM,YAAY,EAAM,iBAAiB,UAGlC,kBAAC,KAAD;GAAG,WAAW,gCAAgC,EAAM,qBAAqB;aAAM,EAAM;EAAS,CAAA,IAE/F,CAAC,EAAM,QAAQ,EAAM,SAAS,eAC3B,kBAAC,GAAD;GACQ;GACN,QAAQ;GACE;GACV,GAAI;EAAW,CAAA,IACjB,kBAAC,GAAD;GACQ;GACN,QAAQ;GACE;GACV,GAAI;EAAW,CAAA,CAC1B;;AAEb;AAEA,EAAM,cAAc"}

package/inputfilter/@types/autocomplete.d.ts

@@ -1,21 +1,21 @@
-export interface InputFilterAutocompleteProps {
-    /**
-     * Sugestões do autocomplete
-     */
-    data: Array<{ id: number, label: string }>
-
-    /**
-     * Realiza a pesquisa do autocomplete de acordo com query
-     */
-    onSearch(query: string, selected?: number[]): void
-
-    /**
-     * Define o número de elementos que poser ser selecionado no autocomplete
-     */
-    autocompleteSelectLimit?: number
-
-    /**
-     * Define a altura da caixa de seleção dos dados
-     */
-    autocompleteScrollHeight?: string
+export interface InputFilterAutocompleteProps {
+    /**
+     * Sugestões do autocomplete
+     */
+    data: Array<{ id: number, label: string }>
+
+    /**
+     * Realiza a pesquisa do autocomplete de acordo com query
+     */
+    onSearch(query: string, selected?: number[]): void
+
+    /**
+     * Define o número de elementos que poser ser selecionado no autocomplete
+     */
+    autocompleteSelectLimit?: number
+
+    /**
+     * Define a altura da caixa de seleção dos dados
+     */
+    autocompleteScrollHeight?: string
 }

package/inputfilter/@types/index.d.ts

@@ -1,43 +1,45 @@
 import { InputFilterAutocompleteProps } from './autocomplete';
 import { ApiComponentProps, ApiFieldComponentProps } from '../../api';
-export type InputFilterOptionsProps = "=" | "!=" | "<" | ">" | "<=" | ">=" | "{}" | "%" | "!%";
-
-export type InputFilterOptionsMap = {
-    text: "=" | "!=" | "%" | "!%"
-    date: "=" | "!=" | "<" | ">" | "<=" | ">=" | "{}"
-    autocomplete: "=" | "!=" | "%" | "!%"
-    number: "=" | "!=" | "<" | ">" | "<=" | ">="
-};
-
-export type InputFilterCoreProps<T extends keyof InputFilterOptionsMap> = InputFilterProps<T> & {
-    options: any[],
-    select: string
-};
-
-interface InputFilterBaseProps<T extends keyof InputFilterOptionsMap> extends ApiComponentProps, ApiFieldComponentProps {
-    /**
-     * Valor inicial do componente
-     */
-    value?: string
-
-    /**
-     * Retorna o valor modificado pelo componente
-     */
-    onChange(value: string | null): void
-
-    /**
-     * Define o tipo do filtro
-     */
-    type?: T;
-
-    /**
-     * Define as opções do filtro
-     */
-    options?: Array<InputFilterOptionsMap[T]>;
-}
-
-export type InputFilterProps<T extends keyof InputFilterOptionsMap> = T extends "autocomplete"
-    ? InputFilterBaseProps<"autocomplete"> & InputFilterAutocompleteProps
-    : InputFilterBaseProps<T>;
-
+
+
+export type InputFilterOptionsProps = "=" | "!=" | "<" | ">" | "<=" | ">=" | "{}" | "%" | "!%";
+
+export type InputFilterOptionsMap = {
+    text: "=" | "!=" | "%" | "!%"
+    date: "=" | "!=" | "<" | ">" | "<=" | ">=" | "{}"
+    autocomplete: "=" | "!=" | "%" | "!%"
+    number: "=" | "!=" | "<" | ">" | "<=" | ">="
+};
+
+export type InputFilterCoreProps<T extends keyof InputFilterOptionsMap> = InputFilterProps<T> & {
+    options: any[],
+    select: string
+};
+
+interface InputFilterBaseProps<T extends keyof InputFilterOptionsMap> extends ApiComponentProps, ApiFieldComponentProps {
+    /**
+     * Valor inicial do componente
+     */
+    value?: string
+
+    /**
+     * Retorna o valor modificado pelo componente
+     */
+    onChange(value: string | null): void
+
+    /**
+     * Define o tipo do filtro
+     */
+    type?: T;
+
+    /**
+     * Define as opções do filtro
+     */
+    options?: Array<InputFilterOptionsMap[T]>;
+}
+
+export type InputFilterProps<T extends keyof InputFilterOptionsMap> = T extends "autocomplete"
+    ? InputFilterBaseProps<"autocomplete"> & InputFilterAutocompleteProps
+    : InputFilterBaseProps<T>;
+
 export * from './autocomplete';

package/inputfilter/_inputfilter.scss

@@ -1,59 +1,59 @@
-.input-filter-container {
-  border-radius: $borderRadius;
-  border: 1px dashed #{$shade300};
-}
-
-.input-filter-content {
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-  gap: .5rem;
-
-  .p-autocomplete-multiple {
-    padding: 0;
-  }
-
-  .p-autocomplete-multiple-container {
-    width: 100%;
-    padding: .2rem .5rem;
-
-    .form-control {
-      border: none;
-      padding: .2rem;
-    }
-
-    .p-autocomplete-token {
-      padding: .2rem .5rem;
-      margin: 0;
-    }
-  }
-
-  .p-autocomplete-multiple-container.p-focus {
-    box-shadow: none;
-    border-color: var(--input-filter-border-color);
-  }
-}
-
-.input-filter-select {
-  width: 40%;
-  max-width: 200px;
-  min-width: 130px;
-}
-
-.input-filter-field {
-  width: 100% !important;
-}
-
-.input-filter-field-date {
-  flex: 1;
-}
-
-.input-filter-field-date.year {
-  flex: 2;
-}
-
-.input-filter-autocomplete-panel {
-  .p-autocomplete-items {
-    padding-left: 0 !important;
-  }
+.input-filter-container {
+  border-radius: $borderRadius;
+  border: 1px dashed #{$shade300};
+}
+
+.input-filter-content {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: .5rem;
+
+  .p-autocomplete-multiple {
+    padding: 0;
+  }
+
+  .p-autocomplete-multiple-container {
+    width: 100%;
+    padding: .2rem .5rem;
+
+    .form-control {
+      border: none;
+      padding: .2rem;
+    }
+
+    .p-autocomplete-token {
+      padding: .2rem .5rem;
+      margin: 0;
+    }
+  }
+
+  .p-autocomplete-multiple-container.p-focus {
+    box-shadow: none;
+    border-color: var(--input-filter-border-color);
+  }
+}
+
+.input-filter-select {
+  width: 40%;
+  max-width: 200px;
+  min-width: 130px;
+}
+
+.input-filter-field {
+  width: 100% !important;
+}
+
+.input-filter-field-date {
+  flex: 1;
+}
+
+.input-filter-field-date.year {
+  flex: 2;
+}
+
+.input-filter-autocomplete-panel {
+  .p-autocomplete-items {
+    padding-left: 0 !important;
+  }
 }