@pagopa/selfcare-common-frontend 0.0.7 → 0.1.3

package/README.md

@@ -53,7 +53,7 @@ FilterModalConfig fields:
 |-------|------|-----------|-------------|
 | data | Array<T> | Y | The list of values between to which choose |
 | getLabel | (e: T) => string | Y | A function that will select the label to show |
-| getValue | (e: T) => V | Y | A function that will select the value to return when selecting an item |
+| getValue | (e: T) => string | Y | A function that will select the value to return when selecting an item |
 | onFilterChange | (v: V) => void | Y | The function invoked when selecting a value |
 
 ## SessionModal
@@ -80,8 +80,8 @@ Selfcare's page title
 |------|------|-----------|-------------|
 | title | string | Y | The title to show |
 | subTitle | string | N | The subtitle to show |
+| mtTitle | number | N | The margin top of the title |
 | mbTitle | GridSize | N | The margin bottom of the title |
-| mtGrid | number | N | The margin top of the title |
 | mbSubTitle | number | N | The margin bottom of the subtitle |
 | variantTitle | Variant | N | The variant of the Typografy used for the title |
 | variantSubTitle | Variant | N | The variant of the Typografy used for the subtitle |
@@ -91,9 +91,11 @@ Selfcare's toast
 
 | Prop | Type | Mandatory | Description |
 |------|------|-----------|-------------|
+| open | boolean | Y | If this component should be displayed or not |
+| logo | React.ElementType | N | The logo to be rendered. As default a confirm logo will be used |
 | title | string | Y | The toast title |
 | message | React.ReactNode | Y | The toast body |
-| closeToast | React.MouseEventHandler<HTMLButtonElement> | Y | The function to be invoked when closing the toast |
+| closeToast | ()=>void | Y | The function to be invoked when closing the toast |
 
 # Common decorators used in pagopa/selfcare react projects
 ## withLogin

package/build.info

@@ -1,2 +1,2 @@
-20220119.8 - selfcare-common-frontend.deploy(17197)
-tags/v0.0.7^0 f2fb321051680c54693c003d0bebf606ac1f7afd
+20220120.4 - selfcare-common-frontend.deploy(17341)
+tags/v0.1.3^0 34408834fb6db338dbd1160a542d0b073b6b4ecc

package/common-polyfill.d.ts

@@ -0,0 +1,8 @@
+import 'react-app-polyfill/ie11';
+import 'core-js/es/object/entries';
+import 'core-js/es/object/values';
+import 'core-js/es/promise';
+import 'core-js/es/array';
+import 'core-js/stable/string';
+import 'core-js/stable/number';
+import 'core-js/stable/url-search-params';

package/common-polyfill.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("react-app-polyfill/ie11");
+require("core-js/es/object/entries");
+require("core-js/es/object/values");
+require("core-js/es/promise");
+require("core-js/es/array");
+require("core-js/stable/string");
+require("core-js/stable/number");
+require("core-js/stable/url-search-params");
+//# sourceMappingURL=common-polyfill.js.map

package/common-polyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-polyfill.js","sourceRoot":"","sources":["../src/lib/common-polyfill.ts"],"names":[],"mappings":";;AAAA,mCAAiC;AACjC,qCAAmC;AACnC,oCAAkC;AAClC,8BAA4B;AAC5B,4BAA0B;AAC1B,iCAA+B;AAC/B,iCAA+B;AAC/B,4CAA0C"}

package/components/CustomAvatar.d.ts

@@ -1,10 +1,17 @@
 declare type Props = {
+    /** The id attribute added to the element */
+    id?: string;
+    /** The logo src */
     customSrc?: string | undefined;
+    /** The alt text showed instead of the image */
     customAlt?: string | undefined;
+    /** Logo width */
     customWidth?: string | undefined;
+    /** Logo height */
     customHeight?: string | undefined;
+    /** If true it will not display the component */
     loading?: boolean;
-    id?: string;
 };
+/** Avatar to use to load Organization logo */
 export default function CustomAvatar({ customAlt, customSrc, customWidth, customHeight, id, loading, }: Props): JSX.Element;
 export {};

package/components/CustomAvatar.js

@@ -1,8 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Avatar } from '@mui/material';
-export default function CustomAvatar({ customAlt, customSrc, customWidth, customHeight, id, loading, }) {
-    return (_jsx(React.Fragment, { children: _jsx(Avatar, { id: id, alt: customAlt, src: customSrc, sx: {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const material_1 = require("@mui/material");
+/** Avatar to use to load Organization logo */
+function CustomAvatar({ customAlt, customSrc, customWidth, customHeight, id, loading, }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { id: id, alt: customAlt, src: customSrc, sx: {
                 width: customWidth,
                 height: customHeight,
                 display: !loading ? undefined : 'none',
@@ -10,3 +14,5 @@ export default function CustomAvatar({ customAlt, customSrc, customWidth, custom
                 backgroundColor: '#CCD4DC',
             } }, void 0) }, void 0));
 }
+exports.default = CustomAvatar;
+//# sourceMappingURL=CustomAvatar.js.map

package/components/CustomAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomAvatar.js","sourceRoot":"","sources":["../../src/lib/components/CustomAvatar.tsx"],"names":[],"mappings":";;;;AAAA,+DAA0B;AAC1B,4CAAuC;AAiBvC,8CAA8C;AAC9C,SAAwB,YAAY,CAAC,EACnC,SAAS,EACT,SAAS,EACT,WAAW,EACX,YAAY,EACZ,EAAE,EACF,OAAO,GACD;IACN,OAAO,CACL,uBAAC,eAAK,CAAC,QAAQ,cACb,uBAAC,iBAAM,IACL,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,SAAS,EACd,EAAE,EAAE;gBACF,KAAK,EAAE,WAAW;gBAClB,MAAM,EAAE,YAAY;gBACpB,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;gBACtC,KAAK,EAAE,4BAA4B;gBACnC,eAAe,EAAE,SAAS;aAC3B,WACD,WACa,CAClB,CAAC;AACJ,CAAC;AAxBD,+BAwBC"}

package/components/CustomPagination.d.ts

@@ -1,9 +1,13 @@
 import { Page } from '../model/Page';
 import { PageRequest } from '../model/PageRequest';
 declare type Props = {
+    /** The actual page */
     page: Page;
+    /** The actual sort applied */
     sort?: string;
+    /** The function to be invoked if the user change page */
     onPageRequest: (r: PageRequest) => void;
 };
+/** Selfcare custom table available pages component */
 export default function CustomPagination({ page, onPageRequest, sort }: Props): JSX.Element;
 export {};

package/components/CustomPagination.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid, Pagination } from '@mui/material';
-import PaginationItem from '@mui/material/PaginationItem';
-import React from 'react';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const PaginationItem_1 = (0, tslib_1.__importDefault)(require("@mui/material/PaginationItem"));
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
 function defaultLabelDisplayedRows(from, to, count) {
     // eslint-disable-next-line sonarjs/no-nested-template-literals
     return `${from}-${to} di ${count !== -1 ? count : `più di ${to}`}`;
@@ -12,13 +15,17 @@ const getLabelDisplayedRowsTo = (count, page, size) => {
     }
     return size === -1 ? count : Math.min(count, (page + 1) * size);
 };
-export default function CustomPagination({ page, onPageRequest, sort }) {
+/** Selfcare custom table available pages component */
+function CustomPagination({ page, onPageRequest, sort }) {
     const count = page.totalElements;
     const from = count === 0 ? 0 : page.number * page.size + 1;
     const to = getLabelDisplayedRowsTo(count, page.number, page.size);
-    return (_jsx(React.Fragment, { children: _jsxs(Grid, Object.assign({ container: true, sx: { padding: '0 10px' } }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 6, display: "flex", justifyContent: "start", alignItems: 'center' }, { children: defaultLabelDisplayedRows(from, to, count) }), void 0), _jsx(Grid, Object.assign({ item: true, xs: 6, display: "flex", justifyContent: "end", alignItems: 'center' }, { children: page.totalElements > page.size && (_jsx(Pagination, { sx: { display: 'flex' }, color: "primary", variant: "outlined", shape: "rounded", page: page.number + 1, count: page.totalPages, renderItem: (props2) => _jsx(PaginationItem, Object.assign({}, props2, { sx: { border: 'none' } }), void 0), onChange: (_event, value) => (onPageRequest({
+    return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, sx: { padding: '0 10px' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6, display: "flex", justifyContent: "start", alignItems: 'center' }, { children: defaultLabelDisplayedRows(from, to, count) }), void 0), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6, display: "flex", justifyContent: "end", alignItems: 'center' }, { children: page.totalElements > page.size && ((0, jsx_runtime_1.jsx)(material_1.Pagination, { sx: { display: 'flex' }, color: "primary", variant: "outlined", shape: "rounded", page: page.number + 1, count: page.totalPages, renderItem: (props2) => (0, jsx_runtime_1.jsx)(PaginationItem_1.default, Object.assign({}, props2, { sx: { border: 'none' } }), void 0), onChange: (_event, value) => (onPageRequest({
                             page: value - 1,
                             size: page.size,
                             sort,
-                        }), window.scrollTo(0, 0)) }, void 0)) }), void 0)] }), void 0) }, void 0));
+                        }),
+                            window.scrollTo(0, 0)) }, void 0)) }), void 0)] }), void 0) }, void 0));
 }
+exports.default = CustomPagination;
+//# sourceMappingURL=CustomPagination.js.map

package/components/CustomPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomPagination.js","sourceRoot":"","sources":["../../src/lib/components/CustomPagination.tsx"],"names":[],"mappings":";;;;AAAA,4CAAiD;AACjD,+FAA0D;AAC1D,+DAA0B;AAI1B,SAAS,yBAAyB,CAAC,IAAY,EAAE,EAAU,EAAE,KAAa;IACxE,+DAA+D;IAC/D,OAAO,GAAG,IAAI,IAAI,EAAE,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,EAAE,EAAE,EAAE,CAAC;AACrE,CAAC;AAED,MAAM,uBAAuB,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,IAAY,EAAE,EAAE;IAC5E,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;QAChB,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;KAC1B;IAED,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;AAClE,CAAC,CAAC;AAWF,sDAAsD;AACtD,SAAwB,gBAAgB,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAS;IAC3E,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IACjC,MAAM,IAAI,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC3D,MAAM,EAAE,GAAG,uBAAuB,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAElE,OAAO,CACL,uBAAC,eAAK,CAAC,QAAQ,cACb,wBAAC,eAAI,kBAAC,SAAS,QAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,iBACvC,uBAAC,eAAI,kBAAC,IAAI,QAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,UAAU,EAAE,QAAQ,gBACzE,yBAAyB,CAAC,IAAI,EAAE,EAAE,EAAE,KAAK,CAAC,YACtC,EACP,uBAAC,eAAI,kBAAC,IAAI,QAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,KAAK,EAAC,UAAU,EAAE,QAAQ,gBACvE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,IAAI,CACjC,uBAAC,qBAAU,IACT,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EACvB,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,EACrB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,UAAU,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,uBAAC,wBAAc,oBAAK,MAAM,IAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAAI,EAC9E,QAAQ,EAAE,CAAC,MAAkC,EAAE,KAAa,EAAE,EAAE,CAAC,CAC/D,aAAa,CAAC;4BACZ,IAAI,EAAE,KAAK,GAAG,CAAC;4BACf,IAAI,EAAE,IAAI,CAAC,IAAI;4BACf,IAAI;yBACL,CAAC;4BACF,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CACtB,WACD,CACH,YACI,aACF,WACQ,CAClB,CAAC;AACJ,CAAC;AAnCD,mCAmCC"}

package/components/ErrorBoundary/ErrorBoundary.js

@@ -1,16 +1,25 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { uniqueId } from 'lodash';
-import { Component, Fragment } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { appStateActions, appStateSelectors } from '../../redux/slices/appStateSlice';
-import { handleErrors } from '../../services/errorService';
-import SessionModal from '../SessionModal';
-import BlockingErrorPage from './components/BlockingErrorPage';
-class ErrorBoundary extends Component {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lodash_1 = require("lodash");
+const react_1 = require("react");
+const react_redux_1 = require("react-redux");
+const reselect_1 = require("reselect");
+const appStateSlice_1 = require("../../redux/slices/appStateSlice");
+const errorService_1 = require("../../services/errorService");
+const SessionModal_1 = (0, tslib_1.__importDefault)(require("../SessionModal"));
+const BlockingErrorPage_1 = (0, tslib_1.__importDefault)(require("./components/BlockingErrorPage"));
+/** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
+It allows to dispatch errors in order to display a warning or the error page to the user.
+Errors dispatched will be notified using errorService
+
+To use this feature you have to put ErrorBOundary in your App as a child of a redux Provider component.
+In order to dispatch an error you have to use the custom hook useErrorDispatcher which will return a fuction to be used to dispatch the error. */
+class ErrorBoundary extends react_1.Component {
     componentDidCatch(error, errorInfo) {
         this.props.addError({
-            id: uniqueId('uncaught-'),
+            id: (0, lodash_1.uniqueId)('uncaught-'),
             techDescription: 'Uncaught error',
             error,
             errorInfo,
@@ -23,17 +32,18 @@ class ErrorBoundary extends Component {
         const blockingErrors = this.props.errors.filter((e) => e.blocking);
         const hasBlockingError = blockingErrors.length > 0;
         if (hasError) {
-            handleErrors(this.props.errors);
+            (0, errorService_1.handleErrors)(this.props.errors);
         }
         if (!hasBlockingError) {
-            return (_jsxs(Fragment, { children: [this.props.children, hasError && this.buildErrorModal(this.props.errors[0])] }, void 0));
+            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [this.props.children, hasError && this.buildErrorModal(this.props.errors[0])] }, void 0));
         }
         else {
-            return (_jsx(BlockingErrorPage, { description: blockingErrors[0].displayableDescription, assistanceEmail: this.props.assistanceEmail }, void 0));
+            return ((0, jsx_runtime_1.jsx)(BlockingErrorPage_1.default, { description: blockingErrors[0].displayableDescription, assistanceEmail: this.props.assistanceEmail }, void 0));
         }
     }
     buildErrorModal(error) {
-        return (_jsx(SessionModal, { open: true, title: error.displayableTitle ?? 'Errore', message: error.displayableDescription ?? 'Spiacenti, qualcosa è andato storto.', onConfirm: error.onRetry ? () => this.retryError(error) : undefined, handleClose: () => {
+        var _a, _b;
+        return ((0, jsx_runtime_1.jsx)(SessionModal_1.default, { open: true, title: (_a = error.displayableTitle) !== null && _a !== void 0 ? _a : 'Errore', message: (_b = error.displayableDescription) !== null && _b !== void 0 ? _b : 'Spiacenti, qualcosa è andato storto.', onConfirm: error.onRetry ? () => this.retryError(error) : undefined, handleClose: () => {
                 this.popError(error);
                 if (error.onClose) {
                     error.onClose();
@@ -50,13 +60,14 @@ class ErrorBoundary extends Component {
         this.props.removeError(error);
     }
 }
-const errorsSelector = createSelector(appStateSelectors.selectErrors, (errors) => errors);
+const errorsSelector = (0, reselect_1.createSelector)(appStateSlice_1.appStateSelectors.selectErrors, (errors) => errors);
 function mapStateToProps(state) {
     return { errors: errorsSelector(state) };
 }
 const mapDispatchToProps = (dispatch) => ({
-    addError: (error) => dispatch(appStateActions.addError(error)),
-    removeError: (error) => dispatch(appStateActions.removeError(error)),
+    addError: (error) => dispatch(appStateSlice_1.appStateActions.addError(error)),
+    removeError: (error) => dispatch(appStateSlice_1.appStateActions.removeError(error)),
 });
-const ErrorBoundaryConnected = connect(mapStateToProps, mapDispatchToProps)(ErrorBoundary);
-export default ErrorBoundaryConnected;
+const ErrorBoundaryConnected = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ErrorBoundary);
+exports.default = ErrorBoundaryConnected;
+//# sourceMappingURL=ErrorBoundary.js.map

package/components/ErrorBoundary/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../src/lib/components/ErrorBoundary/ErrorBoundary.tsx"],"names":[],"mappings":"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"}

package/components/ErrorBoundary/components/BlockingErrorPage.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Grid, Typography, Box } from '@mui/material';
-import { ReactComponent as ErrorIllustration } from '../../../assets/error-illustration.svg';
-export default ({ description, assistanceEmail }) => (_jsx(Box, Object.assign({ sx: { minHeight: '100vh' }, display: "flex" }, { children: _jsxs(Grid, Object.assign({ container: true, direction: "column", style: { textAlign: 'center' }, margin: 'auto' }, { children: [_jsx(Grid, Object.assign({ container: true, item: true, justifyContent: "center", mb: 5 }, { children: _jsx(Grid, Object.assign({ item: true, xs: 6 }, { children: _jsx(ErrorIllustration, {}, void 0) }), void 0) }), void 0), _jsx(Grid, Object.assign({ container: true, item: true, justifyContent: "center" }, { children: _jsx(Grid, Object.assign({ item: true, xs: 6 }, { children: _jsx(Typography, Object.assign({ variant: "h2" }, { children: "Spiacenti, qualcosa \u00E8 andato storto." }), void 0) }), void 0) }), void 0), _jsx(Grid, Object.assign({ container: true, item: true, justifyContent: "center", mb: 7, mt: 1 }, { children: _jsx(Grid, Object.assign({ item: true, xs: 6 }, { children: _jsx(Typography, { children: description ??
-                            'A causa di un errore del sistema non è possibile completare la procedura.' }, void 0) }), void 0) }), void 0), assistanceEmail && (_jsx(Grid, Object.assign({ container: true, item: true, justifyContent: "center" }, { children: _jsx(Grid, Object.assign({ item: true, xs: 4 }, { children: _jsx(Button, Object.assign({ variant: "contained", sx: { width: '200px', alignSelf: 'center' }, onClick: () => window.location.assign(`mailto:${assistanceEmail}`) }, { children: "Contatta l\"assistenza" }), void 0) }), void 0) }), void 0))] }), "0") }), void 0));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const error_illustration_svg_1 = require("../../../assets/error-illustration.svg");
+exports.default = ({ description, assistanceEmail }) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { minHeight: '100vh' }, display: "flex" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, direction: "column", style: { textAlign: 'center' }, margin: 'auto' }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, item: true, justifyContent: "center", mb: 5 }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(error_illustration_svg_1.ReactComponent, {}, void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, item: true, justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h2" }, { children: "Spiacenti, qualcosa \u00E8 andato storto." }), void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, item: true, justifyContent: "center", mb: 7, mt: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: description !== null && description !== void 0 ? description : 'A causa di un errore del sistema non è possibile completare la procedura.' }, void 0) }), void 0) }), void 0), assistanceEmail && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, item: true, justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", sx: { width: '200px', alignSelf: 'center' }, onClick: () => window.location.assign(`mailto:${assistanceEmail}`) }, { children: "Contatta l\"assistenza" }), void 0) }), void 0) }), void 0))] }), "0") }), void 0));
+//# sourceMappingURL=BlockingErrorPage.js.map

package/components/ErrorBoundary/components/BlockingErrorPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockingErrorPage.js","sourceRoot":"","sources":["../../../../src/lib/components/ErrorBoundary/components/BlockingErrorPage.tsx"],"names":[],"mappings":";;;AAAA,4CAA8D;AAC9D,mFAA6F;AAO7F,kBAAe,CAAC,EAAE,WAAW,EAAE,eAAe,EAAS,EAAE,EAAE,CAAC,CAC1D,uBAAC,cAAG,kBAAC,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,OAAO,EAAC,MAAM,gBAC7C,wBAAC,eAAI,kBAAC,SAAS,QAAC,SAAS,EAAC,QAAQ,EAAS,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,iBACvF,uBAAC,eAAI,kBAAC,SAAS,QAAC,IAAI,QAAC,cAAc,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,gBAChD,uBAAC,eAAI,kBAAC,IAAI,QAAC,EAAE,EAAE,CAAC,gBACd,uBAAC,uCAAiB,aAAG,YAChB,YACF,EACP,uBAAC,eAAI,kBAAC,SAAS,QAAC,IAAI,QAAC,cAAc,EAAC,QAAQ,gBAC1C,uBAAC,eAAI,kBAAC,IAAI,QAAC,EAAE,EAAE,CAAC,gBACd,uBAAC,qBAAU,kBAAC,OAAO,EAAC,IAAI,uEAAkD,YACrE,YACF,EACP,uBAAC,eAAI,kBAAC,SAAS,QAAC,IAAI,QAAC,cAAc,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,gBACvD,uBAAC,eAAI,kBAAC,IAAI,QAAC,EAAE,EAAE,CAAC,gBACd,uBAAC,qBAAU,cACR,WAAW,aAAX,WAAW,cAAX,WAAW,GACV,2EAA2E,WAClE,YACR,YACF,EACN,eAAe,IAAI,CAClB,uBAAC,eAAI,kBAAC,SAAS,QAAC,IAAI,QAAC,cAAc,EAAC,QAAQ,gBAC1C,uBAAC,eAAI,kBAAC,IAAI,QAAC,EAAE,EAAE,CAAC,gBACd,uBAAC,iBAAM,kBACL,OAAO,EAAC,WAAW,EACnB,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,eAAe,EAAE,CAAC,oDAG3D,YACJ,YACF,CACR,MA/BoC,GAAG,CAgCnC,YACH,CACP,CAAC"}

package/components/FilterModal.d.ts

@@ -1,17 +1,28 @@
 import * as React from 'react';
 declare type Props = {
+    /** If the popup is to be displayed */
     open: boolean;
+    /** The function to be invoked when clicking on exit button or selecting a value */
     handleClose: React.MouseEventHandler<HTMLButtonElement>;
+    /** The popup title */
     title: string;
+    /** @see FilterModalConfig */
     filterModalConfig?: FilterModalConfig<any, any>;
+    /** The popup height */
     height?: string;
+    /** The popup minHeight */
     minHeight?: string;
 };
 export declare type FilterModalConfig<T, V> = {
+    /** The list of values between to which choose */
     data: Array<T>;
+    /** A function that will select the label to show */
     getLabel: (e: T) => string;
-    getValue: (e: T) => V;
+    /** A function that will select the value to return when selecting an item */
+    getValue: (e: T) => string;
+    /** The function invoked when selecting a value */
     onFilterChange: (v: V) => void;
 };
+/** Modal used to show a list of values from which to choose a single value */
 export default function FilterModal({ open, handleClose, title, filterModalConfig, height, minHeight, }: Props): JSX.Element;
 export {};

package/components/FilterModal.js

@@ -1,25 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Typography, Box, Button, FormControlLabel, Grid, IconButton, Radio, RadioGroup, } from '@mui/material';
-import Dialog from '@mui/material/Dialog';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material/styles';
-import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
-export default function FilterModal({ open, handleClose, title, filterModalConfig, height = '16em', minHeight = '16em', }) {
-    const theme = useTheme();
-    const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = (0, tslib_1.__importStar)(require("react"));
+const material_1 = require("@mui/material");
+const Dialog_1 = (0, tslib_1.__importDefault)(require("@mui/material/Dialog"));
+const useMediaQuery_1 = (0, tslib_1.__importDefault)(require("@mui/material/useMediaQuery"));
+const styles_1 = require("@mui/material/styles");
+const ClearOutlined_1 = (0, tslib_1.__importDefault)(require("@mui/icons-material/ClearOutlined"));
+/** Modal used to show a list of values from which to choose a single value */
+function FilterModal({ open, handleClose, title, filterModalConfig, height = '16em', minHeight = '16em', }) {
+    const theme = (0, styles_1.useTheme)();
+    const fullScreen = (0, useMediaQuery_1.default)(theme.breakpoints.down('xs'));
     const [valueRadio, setValueRadio] = React.useState('');
-    const handleChange = (event) => {
-        setValueRadio(event.target.value);
+    const handleChange = (_, value) => {
+        setValueRadio(value);
     };
     const submitFilter = (event) => {
         const i = data.filter((value) => value.id === valueRadio).map((x) => x)[0];
-        filterModalConfig?.onFilterChange(i === undefined ? valueRadio : i);
+        filterModalConfig === null || filterModalConfig === void 0 ? void 0 : filterModalConfig.onFilterChange(i === undefined ? valueRadio : i);
         handleClose(event);
     };
-    const data = filterModalConfig?.data !== undefined ? filterModalConfig?.data : [];
-    return (_jsx(Dialog, Object.assign({ fullScreen: fullScreen, open: open, "aria-labelledby": "responsive-dialog-title" }, { children: _jsx(Grid, Object.assign({ container: true, direction: "column", sx: { height, minHeight, width: '21.9em' } }, { children: _jsxs(Box, Object.assign({ mx: 3, sx: { height: '100%' } }, { children: [_jsx(Grid, Object.assign({ container: true, item: true, mt: 4 }, { children: _jsxs(Grid, Object.assign({ item: true, xs: 10 }, { children: [_jsx(IconButton, Object.assign({ onClick: (e) => {
+    const data = (filterModalConfig === null || filterModalConfig === void 0 ? void 0 : filterModalConfig.data) !== undefined ? filterModalConfig === null || filterModalConfig === void 0 ? void 0 : filterModalConfig.data : [];
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({ fullScreen: fullScreen, open: open, "aria-labelledby": "responsive-dialog-title" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, direction: "column", sx: { height, minHeight, width: '21.9em' } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, sx: { height: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, item: true, mt: 4 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 10 }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: (e) => {
                                         setValueRadio('');
                                         handleClose(e);
-                                    }, style: { position: 'absolute', top: '20px', right: '16px', zIndex: 100 } }, { children: _jsx(ClearOutlinedIcon, {}, void 0) }), void 0), _jsx(Typography, Object.assign({ variant: "h5", sx: { fontSize: '18px', fontWeight: '600' } }, { children: `Filtra per ${title}` }), void 0)] }), void 0) }), void 0), _jsx(Grid, Object.assign({ container: true, item: true }, { children: _jsx(Grid, Object.assign({ item: true, xs: 12, my: 3 }, { children: _jsx(RadioGroup, Object.assign({ "aria-label": "gender", name: "controlled-radio-buttons-group", value: valueRadio, onChange: handleChange }, { children: data.map((value, index) => (_jsx(FormControlLabel, { value: filterModalConfig?.getValue(value), control: _jsx(Radio, {}, void 0), label: filterModalConfig?.getLabel(value) }, index))) }), void 0) }), void 0) }), void 0), _jsx(Grid, Object.assign({ item: true, xs: 12, mb: 2 }, { children: _jsx(Button, Object.assign({ sx: { width: '100%', marginBottom: '20px' }, color: "primary", variant: "contained", onClick: submitFilter }, { children: "Filtra" }), void 0) }), void 0)] }), void 0) }), void 0) }), void 0));
+                                    }, style: { position: 'absolute', top: '20px', right: '16px', zIndex: 100 } }, { children: (0, jsx_runtime_1.jsx)(ClearOutlined_1.default, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", sx: { fontSize: '18px', fontWeight: '600' } }, { children: `Filtra per ${title}` }), void 0)] }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, my: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.RadioGroup, Object.assign({ "aria-label": "gender", name: "controlled-radio-buttons-group", value: valueRadio, onChange: handleChange }, { children: data.map((value, index) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: filterModalConfig === null || filterModalConfig === void 0 ? void 0 : filterModalConfig.getValue(value), control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}, void 0), label: filterModalConfig === null || filterModalConfig === void 0 ? void 0 : filterModalConfig.getLabel(value) }, index))) }), void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, mb: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { width: '100%', marginBottom: '20px' }, color: "primary", variant: "contained", onClick: submitFilter }, { children: "Filtra" }), void 0) }), void 0)] }), void 0) }), void 0) }), void 0));
 }
+exports.default = FilterModal;
+//# sourceMappingURL=FilterModal.js.map

package/components/FilterModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterModal.js","sourceRoot":"","sources":["../../src/lib/components/FilterModal.tsx"],"names":[],"mappings":"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"}

package/components/Footer/Footer.d.ts

@@ -1,5 +1,7 @@
 declare type Props = {
+    /** The email to which the assistance button will ask to send an email */
     assistanceEmail?: string;
 };
+/** SelfCare Footer component */
 declare const Footer: ({ assistanceEmail }: Props) => JSX.Element;
 export default Footer;

package/components/Footer/Footer.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Grid, Link, SvgIcon, Typography } from '@mui/material';
-import { ReactComponent as logo } from '../../assets/logo_pago_pa.svg';
-const Footer = ({ assistanceEmail }) => (_jsxs(Box, Object.assign({ component: "footer", sx: {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const logo_pago_pa_svg_1 = require("../../assets/logo_pago_pa.svg");
+/** SelfCare Footer component */
+const Footer = ({ assistanceEmail }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "footer", sx: {
         pt: '32px',
         height: '156px',
         mt: 'auto',
@@ -9,34 +12,35 @@ const Footer = ({ assistanceEmail }) => (_jsxs(Box, Object.assign({ component: "
         alignItems: 'center',
         boxSizing: 'unset',
         position: 'relative',
-    } }, { children: [_jsx(Grid, Object.assign({ container: true, justifyContent: 'center', alignItems: 'center' }, { children: _jsxs(Box, Object.assign({ sx: { width: '90%', display: 'flex' } }, { children: [_jsx(SvgIcon, { component: logo, viewBox: "0 0 140 33", sx: { width: '119px' } }, void 0), _jsx(Box, Object.assign({ sx: { textAlign: 'right', flexGrow: 1 }, pl: 8 }, { children: _jsxs(Typography, Object.assign({ component: "div", sx: {
+    } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, justifyContent: 'center', alignItems: 'center' }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { width: '90%', display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { component: logo_pago_pa_svg_1.ReactComponent, viewBox: "0 0 140 33", sx: { width: '119px' } }, void 0), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { textAlign: 'right', flexGrow: 1 }, pl: 8 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "div", sx: {
                                 fontWeight: 'normal',
                                 fontSize: '15px',
                                 lineHeight: '22,82px',
                                 textAlign: 'left',
                                 color: 'background.default',
                                 paddingLeft: '0px',
-                            } }, { children: ["PagoPA S.p.A. - societ\u00E0 per azioni con socio unico - capitale sociale di euro 1,000,000 interamente versato - sede legale in Roma, Piazza Colonna 370, CAP 00187 -", _jsx("br", {}, void 0), "n. di iscrizione a Registro Imprese di Roma, CF e P.IVA 15376371009"] }), void 0) }), void 0)] }), void 0) }), void 0), _jsx(Grid, Object.assign({ container: true, alignItems: 'center', justifyContent: 'center', sx: { position: 'absolute', bottom: '48px' } }, { children: _jsx(Box, Object.assign({ sx: { width: '90%', display: 'flex' } }, { children: _jsxs(Typography, Object.assign({ sx: {
+                            } }, { children: ["PagoPA S.p.A. - societ\u00E0 per azioni con socio unico - capitale sociale di euro 1,000,000 interamente versato - sede legale in Roma, Piazza Colonna 370, CAP 00187 -", (0, jsx_runtime_1.jsx)("br", {}, void 0), "n. di iscrizione a Registro Imprese di Roma, CF e P.IVA 15376371009"] }), void 0) }), void 0)] }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, alignItems: 'center', justifyContent: 'center', sx: { position: 'absolute', bottom: '48px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { width: '90%', display: 'flex' } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ sx: {
                         fontWeight: 'normal',
                         fontSize: '15px',
                         lineHeight: '15px',
                         textAlign: 'left',
                         padding: '0px',
-                    }, component: "div" }, { children: [_jsx(Link, Object.assign({ href: "https://www.pagopa.it/it/privacy-policy/", underline: "none", sx: {
+                    }, component: "div" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Link, Object.assign({ href: "https://www.pagopa.it/it/privacy-policy/", underline: "none", sx: {
                                 marginRight: '10px',
                                 color: '#9BB7CB !important',
                                 textDecoration: 'none !important',
-                            } }, { children: 'Privacy Policy ' }), void 0), _jsx(Link, Object.assign({ href: "https://www.pagopa.it/it/termini-e-condizioni-di-utilizzo-del-sito/", underline: "none", sx: {
+                            } }, { children: 'Privacy Policy ' }), void 0), (0, jsx_runtime_1.jsx)(material_1.Link, Object.assign({ href: "https://www.pagopa.it/it/termini-e-condizioni-di-utilizzo-del-sito/", underline: "none", sx: {
                                 margin: '10px',
                                 color: '#9BB7CB !important',
                                 textDecoration: 'none !important',
-                            } }, { children: 'Termini e condizioni d’uso del sito ' }), void 0), _jsx(Link, Object.assign({ href: "https://www.pagopa.it/static/781646994f1f8ddad2d95af3aaedac3d/Sicurezza-delle-informazioni_PagoPA-S.p.A..pdft", underline: "none", sx: {
+                            } }, { children: 'Termini e condizioni d’uso del sito ' }), void 0), (0, jsx_runtime_1.jsx)(material_1.Link, Object.assign({ href: "https://www.pagopa.it/static/781646994f1f8ddad2d95af3aaedac3d/Sicurezza-delle-informazioni_PagoPA-S.p.A..pdft", underline: "none", sx: {
                                 marginRight: '10px',
                                 color: '#9BB7CB !important',
                                 textDecoration: 'none !important',
-                            } }, { children: 'Sicurezza delle informazioni ' }), void 0), assistanceEmail && (_jsx(Link, Object.assign({ href: `mailto:${assistanceEmail}`, underline: "none", sx: {
+                            } }, { children: 'Sicurezza delle informazioni ' }), void 0), assistanceEmail && ((0, jsx_runtime_1.jsx)(material_1.Link, Object.assign({ href: `mailto:${assistanceEmail}`, underline: "none", sx: {
                                 margin: '10px',
                                 color: '#9BB7CB !important',
                                 textDecoration: 'none !important',
                             } }, { children: 'Assistenza ' }), void 0))] }), void 0) }), void 0) }), void 0)] }), void 0));
-export default Footer;
+exports.default = Footer;
+//# sourceMappingURL=Footer.js.map

package/components/Footer/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/lib/components/Footer/Footer.tsx"],"names":[],"mappings":"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"}

package/components/Header/Header.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
 declare type HeaderProps = {
+    /** if true, it will render an other toolbar under the Header */
     withSecondHeader: boolean;
+    /** The function to be invoked when pressing the rendered logout button, if not defined it will redirect to the logout page, if setted to null it will no render the logout button. It's possible to modify the logout path changing the value in CONFIG.logout inside the index.tsx file */
     onExitAction?: (() => void) | null;
+    /** If withSecondHeader is true, this component will be rendered at the end of the secondary toolbar */
     subHeaderChild?: React.ReactNode;
 };
+/** SelfCare Header component */
 declare const Header: ({ withSecondHeader, onExitAction, subHeaderChild, }: HeaderProps) => JSX.Element;
 export default Header;

package/components/Header/Header.js

@@ -1,14 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AppBar, Button, SvgIcon, Toolbar } from '@mui/material';
-import { Box } from '@mui/system';
-import { Fragment } from 'react';
-import { ReactComponent as logo } from '../../assets/logo_pago_pa_mini.svg';
-import { CONFIG } from '../../config/env';
-import SubHeader from './subHeader/SubHeader';
-const Header = ({ withSecondHeader, onExitAction = () => window.location.assign(CONFIG.URL_FE.LOGOUT), subHeaderChild, }) => (_jsxs(Fragment, { children: [_jsx(AppBar, Object.assign({ position: "relative", sx: {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const react_1 = require("react");
+const logo_pago_pa_mini_svg_1 = require("../../assets/logo_pago_pa_mini.svg");
+const env_1 = require("../../config/env");
+const SubHeader_1 = (0, tslib_1.__importDefault)(require("./subHeader/SubHeader"));
+/** SelfCare Header component */
+const Header = ({ withSecondHeader, onExitAction = () => window.location.assign(env_1.CONFIG.URL_FE.LOGOUT), subHeaderChild, }) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.AppBar, Object.assign({ position: "relative", sx: {
                 alignItems: 'center',
                 height: '48px',
                 backgroundColor: 'primary.dark',
                 boxShadow: 'none',
-            } }, { children: _jsxs(Toolbar, Object.assign({ sx: { width: { xs: '100%', lg: '90%', minHeight: '48px !important' } } }, { children: [_jsx(SvgIcon, { component: logo, viewBox: "0 0 80 24", sx: { width: '80px' } }, void 0), onExitAction !== null ? (_jsx(Box, Object.assign({ sx: { flexGrow: 1, textAlign: 'right' } }, { children: _jsx(Button, Object.assign({ variant: "contained", sx: { width: '88px', backgroundColor: '#004C99', height: '32px' }, onClick: onExitAction }, { children: "Esci" }), void 0) }), void 0)) : ('')] }), void 0) }), void 0), withSecondHeader === true ? _jsx(SubHeader, { children: subHeaderChild }, void 0) : ''] }, void 0));
-export default Header;
+            } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, Object.assign({ sx: { width: { xs: '100%', lg: '90%', minHeight: '48px !important' } } }, { children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { component: logo_pago_pa_mini_svg_1.ReactComponent, viewBox: "0 0 80 24", sx: { width: '80px' } }, void 0), onExitAction !== null ? ((0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ sx: { flexGrow: 1, textAlign: 'right' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", sx: { width: '88px', backgroundColor: '#004C99', height: '32px' }, onClick: onExitAction }, { children: "Esci" }), void 0) }), void 0)) : ('')] }), void 0) }), void 0), withSecondHeader === true ? (0, jsx_runtime_1.jsx)(SubHeader_1.default, { children: subHeaderChild }, void 0) : ''] }, void 0));
+exports.default = Header;
+//# sourceMappingURL=Header.js.map

package/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/lib/components/Header/Header.tsx"],"names":[],"mappings":";;;;AAAA,4CAAiE;AACjE,wCAAkC;AAClC,iCAAiC;AACjC,8EAA4E;AAC5E,0CAA0C;AAC1C,mFAA8C;AAW9C,gCAAgC;AAChC,MAAM,MAAM,GAAG,CAAC,EACd,gBAAgB,EAChB,YAAY,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,YAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EACjE,cAAc,GACF,EAAE,EAAE,CAAC,CACjB,wBAAC,gBAAQ,eACP,uBAAC,iBAAM,kBACL,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAE;gBACF,UAAU,EAAE,QAAQ;gBACpB,MAAM,EAAE,MAAM;gBACd,eAAe,EAAE,cAAc;gBAC/B,SAAS,EAAE,MAAM;aAClB,gBAED,wBAAC,kBAAO,kBAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,EAAE,iBAC7E,uBAAC,kBAAO,IAAC,SAAS,EAAE,sCAAI,EAAE,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAI,EACtE,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,CACvB,uBAAC,YAAG,kBAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,gBAC1C,uBAAC,iBAAM,kBACL,OAAO,EAAC,WAAW,EACnB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,EACjE,OAAO,EAAE,YAAY,kCAGd,YACL,CACP,CAAC,CAAC,CAAC,CACF,EAAE,CACH,aACO,YACH,EACR,gBAAgB,KAAK,IAAI,CAAC,CAAC,CAAC,uBAAC,mBAAS,cAAE,cAAc,WAAa,CAAC,CAAC,CAAC,EAAE,YAChE,CACZ,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/components/Header/subHeader/SubHeader.js

@@ -1,13 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AppBar, Grid, Toolbar, Typography } from '@mui/material';
-export default function SubHeader({ children }) {
-    return (_jsx(AppBar, Object.assign({ position: "relative", sx: { alignItems: 'center', height: '107px', backgroundColor: '#0066CC', boxShadow: 'none' } }, { children: _jsx(Toolbar, Object.assign({ sx: { width: { xs: '100%', lg: '90%' }, minHeight: '107px !important' } }, { children: _jsxs(Grid, Object.assign({ container: true }, { children: [_jsxs(Grid, Object.assign({ container: true, item: true, direction: "column", xs: 6 }, { children: [_jsx(Grid, Object.assign({ item: true }, { children: _jsx(Typography, Object.assign({ component: "div", sx: {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+function SubHeader({ children }) {
+    return ((0, jsx_runtime_1.jsx)(material_1.AppBar, Object.assign({ position: "relative", sx: { alignItems: 'center', height: '107px', backgroundColor: '#0066CC', boxShadow: 'none' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Toolbar, Object.assign({ sx: { width: { xs: '100%', lg: '90%' }, minHeight: '107px !important' } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, item: true, direction: "column", xs: 6 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", sx: {
                                         fontWeight: 'bold',
                                         fontSize: '24px',
                                         lineHeight: '36px',
                                         textAlign: 'left',
                                         color: 'background.default',
-                                    } }, { children: "Self Care" }), void 0) }), void 0), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(Typography, Object.assign({ component: "div", sx: {
+                                    } }, { children: "Self Care" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", sx: {
                                         fontWeight: 'normal',
                                         fontSize: '14px',
                                         lineHeight: '24px',
@@ -15,3 +17,5 @@ export default function SubHeader({ children }) {
                                         color: 'background.default',
                                     } }, { children: "Gestisci i tuoi prodotti e servizi PagoPA" }), void 0) }), void 0)] }), void 0), children] }), void 0) }), void 0) }), void 0));
 }
+exports.default = SubHeader;
+//# sourceMappingURL=SubHeader.js.map

package/components/Header/subHeader/SubHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubHeader.js","sourceRoot":"","sources":["../../../../src/lib/components/Header/subHeader/SubHeader.tsx"],"names":[],"mappings":";;;AACA,4CAAiE;AAMjE,SAAwB,SAAS,CAAC,EAAC,QAAQ,EAAQ;IACjD,OAAO,CACL,uBAAC,iBAAM,kBACP,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,EAAE,gBAE3F,uBAAC,kBAAO,kBAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE,gBAC9E,wBAAC,eAAI,kBAAC,SAAS,uBACb,wBAAC,eAAI,kBAAC,SAAS,QAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,iBAC3C,uBAAC,eAAI,kBAAC,IAAI,sBACR,uBAAC,qBAAU,kBACT,SAAS,EAAC,KAAK,EACf,EAAE,EAAE;wCACF,UAAU,EAAE,MAAM;wCAClB,QAAQ,EAAE,MAAM;wCAChB,UAAU,EAAE,MAAM;wCAClB,SAAS,EAAE,MAAM;wCACjB,KAAK,EAAE,oBAAoB;qCAC5B,uCAGU,YACR,EACP,uBAAC,eAAI,kBAAC,IAAI,sBACR,uBAAC,qBAAU,kBACT,SAAS,EAAC,KAAK,EACf,EAAE,EAAE;wCACF,UAAU,EAAE,QAAQ;wCACpB,QAAQ,EAAE,MAAM;wCAChB,UAAU,EAAE,MAAM;wCAClB,SAAS,EAAE,MAAM;wCACjB,KAAK,EAAE,oBAAoB;qCAC5B,uEAGU,YACR,aACF,EACN,QAAQ,aACJ,YACC,YACH,CACR,CAAC;AACJ,CAAC;AA3CD,4BA2CC"}

package/components/Loading/LoadingOverlay.d.ts

@@ -1 +1,6 @@
+/** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
+It allows to draw a loader when an async task to wait is running.
+
+To use this feature you have to put LoadingOverlay in your App as a child of a redux Provider component.
+In order to register the start of an async task you have to use the custom hook useLoading passing the id of the task to await, which will return a setter function used to start and end the loading behavior. */
 export default function LoadingOverlay(): JSX.Element;