@trilogy-ds/react 0.0.1-beta-1 → 0.0.1-beta-3

package/lib/components/modal/Modal.js

@@ -0,0 +1,114 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { is } from '../../services';
+import { Button, ButtonList, ButtonType } from '../button';
+import { Text } from '../text';
+import { ModalMarkup } from './ModalEnum';
+import ModalTitle from './ModalTitle';
+import ModalFooter from './ModalFooter';
+import { hashClass } from '../../helpers';
+import clsx from 'clsx';
+import { useTrilogyContext } from '../../context';
+/**
+ * Modal Component
+ * @param active {boolean} Activated Modal
+ * @param title {string} Title Modal
+ * @param content {string} Content text for modal
+ * @param triggerContent {string} Trigger custom element
+ * @param iconName IconName for icon title
+ * @param iconColor IconColor for icon title
+ * @param ctaCancelOnClick {Function} function for cancel button (appear when set)
+ * @param ctaOnClick {Function} On Click Event CTA
+ * @param onClose {Function} Additionnal close custom function
+ * @param onOpen {Function} Additionnal open custom function
+ * @param closeIcon {boolean} Display close icon for Modal
+ * @param children {React.ReactNode}
+ * @param ctaContent {string} Content cta
+ * @param fullwidth {boolean} Fullwidth Modal
+ * @param disableHandlingClickOutside {boolean} Disable the handling on outside click event
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ * @param contentClassNames {string} Additionnal CSS Classes for modal content
+ * @param triggerMarkup {ModalMarkup} h1|h2|h3|h4|h5|h6|p|span|div|button|a
+ * @param triggerClassNames {string} Additionnal CSS Classes for trigger element
+ * @param panel {boolean} Panel Side Modal
+ * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param bottom {boolean} If bottom
+ * @param swipable {boolean} Swipable Native Modal
+ */
+const Modal = ({ children, className, contentClassNames, active, title, content, triggerMarkup, triggerContent, triggerClassNames, ctaContent, ctaOnClick, onClose, onOpen, iconName, ctaCancelOnClick, closeIcon, iconColor, panel, footerClassNames, footer, fullwidth, disableHandlingClickOutside = false, testId, ...others }) => {
+    const modal = useRef(null);
+    const [display, setDisplay] = useState(active || false);
+    const { styled } = useTrilogyContext();
+    const handleClickOutside = (e) => {
+        var _a;
+        if ((_a = modal === null || modal === void 0 ? void 0 : modal.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
+            return;
+        }
+        else {
+            handleClose(onClose, e);
+        }
+    };
+    useEffect(() => {
+        setDisplay(active || false);
+    }, [active]);
+    useEffect(() => {
+        if (display && !disableHandlingClickOutside) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        else {
+            document.removeEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [display, disableHandlingClickOutside]);
+    const classes = React.useMemo(() => hashClass(styled, clsx('modal', display && is('active'), panel && is('panel'), fullwidth && is('fullwidth'), className)), [active, display, panel, className, styled]);
+    const contentClasses = React.useMemo(() => hashClass(styled, clsx('modal-content', contentClassNames)), [contentClassNames, styled]);
+    const footerClasses = React.useMemo(() => clsx('modal-footer', footerClassNames), [footerClassNames, styled]);
+    function handleClose(onCloseFunc, e) {
+        setDisplay(false);
+        if (onCloseFunc) {
+            onCloseFunc(e);
+        }
+    }
+    function handleOpen(onOpenFunc, e) {
+        setDisplay(true);
+        if (onOpenFunc) {
+            onOpenFunc(e);
+        }
+    }
+    /**
+     * key in Enum works only in TS or with number enum for JS
+     * for string enum (as in this case) we need to use Object.values.includes for JS usage
+     * string enum aren't reverse mapped so the first solution doesn't work
+     */
+    const isCorrectMarkup = (stringMarkup) => {
+        if (stringMarkup in ModalMarkup || Object.values(ModalMarkup).includes(stringMarkup))
+            return true;
+    };
+    const TriggerTag = React.useMemo(() => (triggerMarkup && isCorrectMarkup(triggerMarkup) ? triggerMarkup : 'button'), [triggerMarkup]);
+    const ModalContentButton = ({ ...props }) => (React.createElement(Button, { markup: 'button', className: is('primary'), ...props }));
+    const ModalCancelButton = ({ onCloseFunc }) => (React.createElement(Button, { variant: 'SECONDARY', onClick: (e) => {
+            handleClose(onCloseFunc, e);
+        }, type: ButtonType.BUTTON }, "Annuler"));
+    const CloseButton = ({ onCloseFunc }) => (React.createElement("button", { onClick: (e) => {
+            handleClose(onCloseFunc, e);
+        }, className: hashClass(styled, clsx('modal-close', is('large'))), "aria-label": 'close', type: ButtonType.BUTTON }));
+    return (React.createElement("div", { "data-testid": testId },
+        triggerContent && (React.createElement(TriggerTag, { onClick: (e) => {
+                handleOpen(onOpen, e);
+            }, className: hashClass(styled, clsx(triggerClassNames)) }, triggerContent)),
+        React.createElement("div", { className: classes, ...others },
+            React.createElement("div", { className: hashClass(styled, clsx('modal-background')) }),
+            React.createElement("div", { ref: modal, className: contentClasses },
+                closeIcon && React.createElement(CloseButton, { onCloseFunc: onClose }),
+                (title || iconName) && (React.createElement(ModalTitle, { iconColor: iconColor, iconName: iconName }, title)),
+                content && typeof content === 'string' ? React.createElement(Text, null, content) : content,
+                children != null && children,
+                (ctaOnClick != null || ctaCancelOnClick != null) && (React.createElement(ButtonList, { centered: true, className: is('flex') },
+                    ctaOnClick && React.createElement(ModalContentButton, { onClick: ctaOnClick }, ctaContent),
+                    ctaCancelOnClick && React.createElement(ModalCancelButton, { onCloseFunc: ctaCancelOnClick }))),
+                footer && React.createElement(ModalFooter, { className: footerClasses }, footer)))));
+};
+export default Modal;
+//# sourceMappingURL=Modal.js.map

package/lib/components/modal/Modal.js.map

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

package/lib/components/modal/Modal.native.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { ModalProps } from './ModalProps';
+import { ComponentName } from '../enumsComponentsName';
+/**
+ * Modal Component
+ * @param active {boolean} Activated Modal
+ * @param title {string} Title Modal
+ * @param content {string} Content text for modal
+ * @param triggerContent {string} Trigger custom element
+ * @param iconName IconName for icon title
+ * @param iconColor IconColor for icon title
+ * @param ctaOnClick {Function} On Click Event CTA
+ * @param ctaCancelOnClick function for cancel button (appear when set)
+ * @param onClose {Function} Additionnal close custom function
+ * @param onOpen {Function} Additionnal open custom function
+ * @param closeIcon {boolean} Display close icon for Modal
+ * @param bottom {boolean} Open modal from bottom
+ * @param ctaContent {string} Content cta
+ * @param children {React.ReactNode}
+ * @param fullwidth {boolean} Fullwidth Modal
+ * @param onModalHide {Function} Callback on Hide
+ * @param swipable {boolean} Swipable Native Modal
+ */
+declare const Modal: {
+    ({ children, active, title, content, iconName, iconColor, triggerContent, ctaContent, ctaOnClick, ctaCancelOnClick, onClose, onOpen, closeIcon, bottom, fullwidth, onModalHide, swipable, ...others }: ModalProps): JSX.Element;
+    displayName: ComponentName;
+};
+export default Modal;

package/lib/components/modal/Modal.native.js

@@ -0,0 +1,153 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
+import NativeModal from 'react-native-modal';
+import { Text } from '../text';
+import { Button } from '../button';
+import { View } from '../view';
+import { Icon, IconName, IconSize } from '../icon';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
+import { ComponentName } from '../enumsComponentsName';
+/**
+ * Modal Component
+ * @param active {boolean} Activated Modal
+ * @param title {string} Title Modal
+ * @param content {string} Content text for modal
+ * @param triggerContent {string} Trigger custom element
+ * @param iconName IconName for icon title
+ * @param iconColor IconColor for icon title
+ * @param ctaOnClick {Function} On Click Event CTA
+ * @param ctaCancelOnClick function for cancel button (appear when set)
+ * @param onClose {Function} Additionnal close custom function
+ * @param onOpen {Function} Additionnal open custom function
+ * @param closeIcon {boolean} Display close icon for Modal
+ * @param bottom {boolean} Open modal from bottom
+ * @param ctaContent {string} Content cta
+ * @param children {React.ReactNode}
+ * @param fullwidth {boolean} Fullwidth Modal
+ * @param onModalHide {Function} Callback on Hide
+ * @param swipable {boolean} Swipable Native Modal
+ */
+const Modal = ({ children, active = false, title, content, iconName, iconColor, triggerContent, ctaContent, ctaOnClick, ctaCancelOnClick, onClose, onOpen, closeIcon, bottom, fullwidth, onModalHide, swipable = true, ...others }) => {
+    const styles = StyleSheet.create({
+        centeredView: {
+            justifyContent: bottom ? 'flex-end' : 'center',
+            alignItems: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        },
+        iconCenter: {
+            alignSelf: 'center',
+            marginBottom: 30,
+        },
+        modalView: {
+            margin: bottom ? 0 : 20,
+            backgroundColor: getColorStyle(TrilogyColor.WHITE),
+            borderRadius: 6,
+            padding: fullwidth ? 0 : 17,
+            shadowColor: '#000',
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 5,
+            flex: 1,
+        },
+        title: {
+            textAlign: 'center',
+            fontSize: 21,
+            fontWeight: '600',
+        },
+        content: {
+            textAlign: 'center',
+            fontSize: 15,
+            paddingTop: 10,
+        },
+        overlay: {
+            flexDirection: 'row',
+            width: '100%',
+            height: '100%',
+        },
+        middleModal: {
+            justifyContent: 'center',
+        },
+        bottomModal: {
+            justifyContent: 'flex-end',
+        },
+        childrenContainer: {
+            flexWrap: 'wrap',
+            paddingTop: 10,
+            borderRadius: 6,
+            backgroundColor: getColorStyle(TrilogyColor.WHITE),
+            width: '100%',
+        },
+        horizontalMargin: {
+            marginTop: 50,
+            marginBottom: bottom ? 0 : 50,
+        },
+    });
+    const defaultAnimPosition = Dimensions.get('window').height;
+    const translateAnim = useRef(new Animated.Value(defaultAnimPosition)).current;
+    const [visible, setVisible] = useState(active || false);
+    useEffect(() => {
+        setVisible(active);
+    }, [active]);
+    useEffect(() => {
+        if (active) {
+            Animated.timing(translateAnim, {
+                toValue: 0,
+                duration: 500,
+                useNativeDriver: true,
+            }).start();
+        }
+        else {
+            translateAnim.setValue(defaultAnimPosition);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [active]);
+    const close = (e) => {
+        if (onClose)
+            onClose(e);
+    };
+    const modalChildren = children !== null && children !== void 0 ? children : (React.createElement(View, { style: { padding: fullwidth ? 0 : 17 } },
+        React.createElement(TouchableOpacity, { onPressIn: close },
+            React.createElement(Icon, { style: { flexDirection: 'row', alignSelf: 'flex-end' }, name: IconName.TIMES, size: IconSize.SMALL, color: TrilogyColor.GREY })),
+        iconName && (React.createElement(View, { style: styles.iconCenter },
+            React.createElement(Icon, { size: IconSize.HUGE, color: iconColor, name: iconName }))),
+        title && React.createElement(Text, { style: styles.title }, title),
+        content && typeof content === 'string' ? React.createElement(Text, { style: styles.content }, content) : content,
+        ctaContent && (React.createElement(View, { style: { paddingTop: 15 } },
+            React.createElement(Button, { variant: 'PRIMARY', onClick: ctaOnClick }, ctaContent))),
+        ctaCancelOnClick && (React.createElement(View, { style: { paddingTop: 15 } },
+            React.createElement(Button, { variant: 'SECONDARY', onClick: (e) => {
+                    ctaCancelOnClick(e);
+                } }, "Annuler")))));
+    return (React.createElement(React.Fragment, null,
+        triggerContent && (React.createElement(Button, { onClick: (e) => {
+                if (onOpen)
+                    onOpen(e);
+            } }, triggerContent)),
+        React.createElement(NativeModal
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        , { 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onSwipeComplete: (e) => {
+                setVisible(!visible);
+                close(e);
+            }, onModalHide: onModalHide, swipeDirection: swipable ? 'down' : undefined, isVisible: visible, statusBarTranslucent: true, style: { width: '100%', padding: 0, margin: 0 }, ...others },
+            React.createElement(View, { style: [styles.overlay, bottom ? styles.bottomModal : styles.middleModal] },
+                React.createElement(TouchableOpacity, { activeOpacity: 1, style: { width: bottom ? 0 : 20, height: '100%' }, onPress: close }),
+                React.createElement(View, { style: { display: 'flex', flexDirection: 'column', flex: fullwidth ? 0 : 1 } },
+                    React.createElement(TouchableOpacity, { activeOpacity: 1, style: { width: '100%', minHeight: 50, flexGrow: 1 }, onPress: close }),
+                    React.createElement(View, { style: { flexShrink: 1 } },
+                        React.createElement(Animated.View, { style: [styles.childrenContainer, { transform: [{ translateY: translateAnim }] }] },
+                            closeIcon && (React.createElement(View, { style: { width: '100%' } },
+                                React.createElement(TouchableOpacity, { style: { alignSelf: 'flex-end', right: 20 }, onPress: close },
+                                    React.createElement(Icon, { name: IconName.TIMES, size: IconSize.SMALL, color: TrilogyColor.GREY })))),
+                            modalChildren)),
+                    React.createElement(TouchableOpacity, { activeOpacity: 1, style: { width: '100%', minHeight: bottom ? 0 : 50, flexGrow: bottom ? 0 : 1 }, onPress: close })),
+                React.createElement(TouchableOpacity, { onPress: close, activeOpacity: 1, style: { width: bottom ? 0 : 20, height: '100%' } })))));
+};
+Modal.displayName = ComponentName.Modal;
+export default Modal;
+//# sourceMappingURL=Modal.native.js.map

package/lib/components/modal/Modal.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.native.js","sourceRoot":"","sources":["../../../components/modal/Modal.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAyB,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AACxG,OAAO,WAAW,MAAM,oBAAoB,CAAA;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,cAAc,EACd,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,GAAG,IAAI,EACf,GAAG,MAAM,EACE,EAAe,EAAE;IAC5B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,YAAY,EAAE;YACZ,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;YAC9C,UAAU,EAAE,QAAQ;YACpB,eAAe,EAAE,oBAAoB;SACtC;QACD,UAAU,EAAE;YACV,SAAS,EAAE,QAAQ;YACnB,YAAY,EAAE,EAAE;SACjB;QACD,SAAS,EAAE;YACT,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACvB,eAAe,EAAE,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC;YAClD,YAAY,EAAE,CAAC;YACf,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YAC3B,WAAW,EAAE,MAAM;YACnB,YAAY,EAAE;gBACZ,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;aACV;YACD,aAAa,EAAE,IAAI;YACnB,YAAY,EAAE,IAAI;YAClB,SAAS,EAAE,CAAC;YACZ,IAAI,EAAE,CAAC;SACR;QACD,KAAK,EAAE;YACL,SAAS,EAAE,QAAQ;YACnB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,KAAK;SAClB;QACD,OAAO,EAAE;YACP,SAAS,EAAE,QAAQ;YACnB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,OAAO,EAAE;YACP,aAAa,EAAE,KAAK;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,WAAW,EAAE;YACX,cAAc,EAAE,QAAQ;SACzB;QACD,WAAW,EAAE;YACX,cAAc,EAAE,UAAU;SAC3B;QACD,iBAAiB,EAAE;YACjB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,EAAE;YACd,YAAY,EAAE,CAAC;YACf,eAAe,EAAE,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC;YAClD,KAAK,EAAE,MAAM;SACd;QACD,gBAAgB,EAAE;YAChB,SAAS,EAAE,EAAE;YACb,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;SAC9B;KACF,CAAC,CAAA;IAEF,MAAM,mBAAmB,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAA;IAC3D,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,OAAO,CAAA;IAE7E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,KAAK,CAAC,CAAA;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,MAAM,CAAC,CAAA;IACpB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE;gBAC7B,OAAO,EAAE,CAAC;gBACV,QAAQ,EAAE,GAAG;gBACb,eAAe,EAAE,IAAI;aACtB,CAAC,CAAC,KAAK,EAAE,CAAA;SACX;aAAM;YACL,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAA;SAC5C;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,MAAM,KAAK,GAAG,CAAC,CAAwB,EAAE,EAAE;QACzC,IAAI,OAAO;YAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACzB,CAAC,CAAA;IACD,MAAM,aAAa,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAChC,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;QAC1C,oBAAC,gBAAgB,IAAC,SAAS,EAAE,KAAK;YAChC,oBAAC,IAAI,IACH,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,EACtD,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,KAAK,EAAE,YAAY,CAAC,IAAI,GACxB,CACe;QAClB,QAAQ,IAAI,CACX,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,UAAU;YAC5B,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI,CAC1D,CACR;QACA,KAAK,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAQ;QAClD,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAQ,CAAC,CAAC,CAAC,OAAO;QAChG,UAAU,IAAI,CACb,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;YAC7B,oBAAC,MAAM,IAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,IAC5C,UAAU,CACJ,CACJ,CACR;QACA,gBAAgB,IAAI,CACnB,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;YAC7B,oBAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,gBAAgB,CAAC,CAAC,CAAC,CAAA;gBACrB,CAAC,cAGM,CACJ,CACR,CACI,CACR,CAAA;IAED,OAAO,CACL;QACG,cAAc,IAAI,CACjB,oBAAC,MAAM,IACL,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,IAAI,MAAM;oBAAE,MAAM,CAAC,CAAC,CAAC,CAAA;YACvB,CAAC,IAEA,cAAc,CACR,CACV;QACD,oBAAC,WAAW;QACV,8DAA8D;;YAA9D,8DAA8D;YAC9D,eAAe,EAAE,CAAC,CAAM,EAAE,EAAE;gBAC1B,UAAU,CAAC,CAAC,OAAO,CAAC,CAAA;gBACpB,KAAK,CAAC,CAAC,CAAC,CAAA;YACV,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC7C,SAAS,EAAE,OAAO,EAClB,oBAAoB,EAAE,IAAI,EAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAC3C,MAAM;YAEV,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC;gBAC7E,oBAAC,gBAAgB,IAAC,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,KAAK,GAAI;gBACzG,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;oBAChF,oBAAC,gBAAgB,IAAC,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,GAAI;oBAE5G,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE;wBAC5B,oBAAC,QAAQ,CAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,iBAAiB,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;4BAC7F,SAAS,IAAI,CACZ,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gCAC5B,oBAAC,gBAAgB,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK;oCAC3E,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,GAAI,CAC7D,CACd,CACR;4BACA,aAAa,CACA,CACX;oBACP,oBAAC,gBAAgB,IACf,aAAa,EAAE,CAAC,EAChB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAC9E,OAAO,EAAE,KAAK,GACd,CACG;gBACP,oBAAC,gBAAgB,IAAC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CACpG,CACK,CACb,CACJ,CAAA;AACH,CAAC,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,aAAa,CAAC,KAAK,CAAA;AAEvC,eAAe,KAAK,CAAA"}

package/lib/components/modal/ModalEnum.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Custom modal trigger element
+ */
+export declare enum ModalMarkup {
+    H1 = "h1",
+    H2 = "h2",
+    H3 = "h3",
+    H4 = "h4",
+    H5 = "h5",
+    H6 = "h6",
+    P = "p",
+    SPAN = "span",
+    DIV = "div",
+    BUTTON = "button",
+    A = "a"
+}
+export type ModalMarkupValues = `${ModalMarkup}`;
+export declare enum ModalCtaMarkup {
+    BUTTON = "button",
+    DIV = "div",
+    A = "a"
+}
+export type ModalCtaMarkupValues = `${ModalCtaMarkup}`;

package/lib/components/modal/ModalEnum.js

@@ -0,0 +1,24 @@
+/**
+ * Custom modal trigger element
+ */
+export var ModalMarkup;
+(function (ModalMarkup) {
+    ModalMarkup["H1"] = "h1";
+    ModalMarkup["H2"] = "h2";
+    ModalMarkup["H3"] = "h3";
+    ModalMarkup["H4"] = "h4";
+    ModalMarkup["H5"] = "h5";
+    ModalMarkup["H6"] = "h6";
+    ModalMarkup["P"] = "p";
+    ModalMarkup["SPAN"] = "span";
+    ModalMarkup["DIV"] = "div";
+    ModalMarkup["BUTTON"] = "button";
+    ModalMarkup["A"] = "a";
+})(ModalMarkup || (ModalMarkup = {}));
+export var ModalCtaMarkup;
+(function (ModalCtaMarkup) {
+    ModalCtaMarkup["BUTTON"] = "button";
+    ModalCtaMarkup["DIV"] = "div";
+    ModalCtaMarkup["A"] = "a";
+})(ModalCtaMarkup || (ModalCtaMarkup = {}));
+//# sourceMappingURL=ModalEnum.js.map

package/lib/components/modal/ModalEnum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalEnum.js","sourceRoot":"","sources":["../../../components/modal/ModalEnum.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAN,IAAY,WAYX;AAZD,WAAY,WAAW;IACrB,wBAAS,CAAA;IACT,wBAAS,CAAA;IACT,wBAAS,CAAA;IACT,wBAAS,CAAA;IACT,wBAAS,CAAA;IACT,wBAAS,CAAA;IACT,sBAAO,CAAA;IACP,4BAAa,CAAA;IACb,0BAAW,CAAA;IACX,gCAAiB,CAAA;IACjB,sBAAO,CAAA;AACT,CAAC,EAZW,WAAW,KAAX,WAAW,QAYtB;AAID,MAAM,CAAN,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,mCAAiB,CAAA;IACjB,6BAAW,CAAA;IACX,yBAAO,CAAA;AACT,CAAC,EAJW,cAAc,KAAd,cAAc,QAIzB"}

package/lib/components/modal/ModalFooter.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ModalFooterProps } from './ModalFooterProps';
+/**
+ * Modal Title Component
+ * @param children {React.ReactNode}
+ * @param className {string}
+ */
+declare const ModalFooter: ({ children, className }: ModalFooterProps) => JSX.Element;
+export default ModalFooter;

package/lib/components/modal/ModalFooter.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { hashClass } from '../../helpers';
+import clsx from 'clsx';
+import { useTrilogyContext } from '../../context';
+/**
+ * Modal Title Component
+ * @param children {React.ReactNode}
+ * @param className {string}
+ */
+const ModalFooter = ({ children, className }) => {
+    const { styled } = useTrilogyContext();
+    return React.createElement("div", { className: hashClass(styled, clsx('modal-footer', className)) }, children);
+};
+export default ModalFooter;
+//# sourceMappingURL=ModalFooter.js.map

package/lib/components/modal/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.js","sourceRoot":"","sources":["../../../components/modal/ModalFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEjD;;;;GAIG;AACH,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAoB,EAAe,EAAE;IAC7E,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,OAAO,6BAAK,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,IAAG,QAAQ,CAAO,CAAA;AAC7F,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/lib/components/modal/ModalFooterProps.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Modal Footer Interface
+ */
+export interface ModalFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}

package/lib/components/modal/ModalFooterProps.js

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

package/lib/components/modal/ModalFooterProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooterProps.js","sourceRoot":"","sources":["../../../components/modal/ModalFooterProps.ts"],"names":[],"mappings":""}

package/lib/components/modal/ModalProps.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { Accessibility, Clickable, Clipped, Fullwidth } from '../../objects';
+import { ModalMarkup, ModalMarkupValues } from './ModalEnum';
+import { ClickEvent } from '../../events/OnClickEvent';
+import { IconColor, IconColorValues, IconName, IconNameValues } from '../icon';
+export interface ModalContentButtonProps extends Clickable {
+    children?: string;
+}
+export interface CloseButtonProps {
+    onCloseFunc?: ClickEvent;
+}
+/**
+ * Modal Interface
+ */
+export interface ModalProps extends Clipped, Fullwidth, Accessibility {
+    children?: React.ReactNode;
+    active?: boolean;
+    title?: string;
+    content?: string | React.ReactNode;
+    footer?: string | React.ReactNode;
+    className?: string;
+    contentClassNames?: string;
+    footerClassNames?: string;
+    iconName?: IconName | IconNameValues;
+    iconColor?: IconColor | IconColorValues;
+    triggerContent?: string;
+    triggerClassNames?: string;
+    triggerMarkup?: ModalMarkup | ModalMarkupValues;
+    ctaContent?: string;
+    closeIcon?: boolean;
+    ctaOnClick?: ClickEvent;
+    ctaCancelOnClick?: ClickEvent;
+    onClose?: ClickEvent;
+    onOpen?: ClickEvent;
+    bottom?: boolean;
+    panel?: boolean;
+    onModalHide?: () => void;
+    disableHandlingClickOutside?: boolean;
+    swipable?: boolean;
+}

package/lib/components/modal/ModalProps.js

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

package/lib/components/modal/ModalProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalProps.js","sourceRoot":"","sources":["../../../components/modal/ModalProps.ts"],"names":[],"mappings":""}

package/lib/components/modal/ModalTitle.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ModalTitleProps } from './ModalTitleProps';
+/**
+ * Modal Title Component
+ * @param children {string}
+ * @param className {string} clsx
+ * @param iconName {IconName} IconName for icon title
+ * @param iconColor {IconColor} IconColor for icon title
+ */
+declare const ModalTitle: ({ children, className, iconColor, iconName }: ModalTitleProps) => JSX.Element;
+export default ModalTitle;

package/lib/components/modal/ModalTitle.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon } from '../icon';
+import { hashClass } from '../../helpers';
+import clsx from 'clsx';
+import { useTrilogyContext } from '../../context';
+/**
+ * Modal Title Component
+ * @param children {string}
+ * @param className {string} clsx
+ * @param iconName {IconName} IconName for icon title
+ * @param iconColor {IconColor} IconColor for icon title
+ */
+const ModalTitle = ({ children, className, iconColor, iconName }) => {
+    const { styled } = useTrilogyContext();
+    return (React.createElement("div", { className: hashClass(styled, clsx('modal-title', className)) }, iconName ? React.createElement(Icon, { color: iconColor, size: 'large', name: iconName, content: children, position: 'up' }) : children));
+};
+export default ModalTitle;
+//# sourceMappingURL=ModalTitle.js.map

package/lib/components/modal/ModalTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTitle.js","sourceRoot":"","sources":["../../../components/modal/ModalTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEjD;;;;;;GAMG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAmB,EAAe,EAAE;IAChG,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,IAC9D,QAAQ,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAC,IAAI,GAAG,CAAC,CAAC,CAAC,QAAQ,CAC7G,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/lib/components/modal/ModalTitleProps.d.ts

@@ -0,0 +1,10 @@
+import { IconColor, IconColorValues, IconName, IconNameValues } from '../icon';
+/**
+ * Modal Title Interface
+ */
+export interface ModalTitleProps {
+    children?: string;
+    className?: string;
+    iconName?: IconName | IconNameValues;
+    iconColor?: IconColor | IconColorValues;
+}

package/lib/components/modal/ModalTitleProps.js

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

package/lib/components/modal/ModalTitleProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTitleProps.js","sourceRoot":"","sources":["../../../components/modal/ModalTitleProps.ts"],"names":[],"mappings":""}

package/lib/components/modal/index.d.ts

@@ -0,0 +1,5 @@
+import Modal from './Modal';
+import ModalFooter from './ModalFooter';
+import ModalTitle from './ModalTitle';
+export * from './ModalEnum';
+export { Modal, ModalFooter, ModalTitle };

package/lib/components/modal/index.js

@@ -0,0 +1,6 @@
+import Modal from './Modal';
+import ModalFooter from './ModalFooter';
+import ModalTitle from './ModalTitle';
+export * from './ModalEnum';
+export { Modal, ModalFooter, ModalTitle };
+//# sourceMappingURL=index.js.map

package/lib/components/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,cAAc,aAAa,CAAA;AAE3B,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,CAAA"}

package/lib/components/notification/Notification.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { NotificationProps } from './NotificationProps';
+/**
+ * Notification Component
+ * @param hasIcon {boolean} Display icon, default true
+ * @param iconName {IconName} Custom icon
+ * @param title {string} Notification title content
+ * @param description {string|ReactNode} Notification description content
+ * @param alert {AlertState} Alert Variant (INFO|SUCCESS|WARNING|ERROR)
+ * @param buttonClick {ClickEvent} Click event for button
+ * @param buttonContent {string} Button content
+ * @param arrow {boolean} Notification with right arrow on right side (Uses only if not button content)
+ * @param info (boolean) Small info notification use it without button and arrow
+ * @param onClick {Function} onClick Event for all notification
+ * @param children {React.ReactNode}
+ * @param closable {Function} onClick Event on cross icon
+ *  * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param banner {boolean} Banner notification
+ * @param className {string} Additionnal CSS Classes
+ * @param iconClassname {string} Additionnal Icon CSS
+ * @param buttonMarkup {ButtonMarkup} Custom markup for button
+ *  * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param deletable {Function} onClick Event on delete icon or slide over ()
+ * @param unread {boolean} only with notification deletable if notification is unread
+ */
+declare const Notification: ({ className, hasIcon, iconClassname, iconName, title, description, alert, buttonContent, buttonClick, buttonMarkup, arrow, info, banner, onClick, closable, testId, ...others }: NotificationProps) => JSX.Element;
+export default Notification;