@trii/components 2.0.45 → 2.0.47

package/dist/cjs/index.js

@@ -3,6 +3,8 @@
 var React$1 = require('react');
 var material = require('@mui/material');
 var react = require('@emotion/react');
+var reactI18next = require('react-i18next');
+var i18n = require('i18next');
 var ReactDOM = require('react-dom');
 
 function _interopNamespaceDefault(e) {
@@ -4738,11 +4740,11 @@ var createStyled$2 = function createStyled(tag, options) {
   };
 };
 
-var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
+var tags$2 = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
 'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
 
 var newStyled = createStyled$2.bind();
-tags.forEach(function (tagName) {
+tags$2.forEach(function (tagName) {
   // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
   newStyled[tagName] = newStyled(tagName);
 });
@@ -6429,7 +6431,7 @@ function memoize(fn) {
   };
 }
 
-const properties = {
+const properties$2 = {
   m: 'margin',
   p: 'padding'
 };
@@ -6461,7 +6463,7 @@ const getCssProperties = memoize(prop => {
     }
   }
   const [a, b] = prop.split('');
-  const property = properties[a];
+  const property = properties$2[a];
   const direction = directions[b] || '';
   return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
 });
@@ -15289,6 +15291,146 @@ const MembersSection = ({ contactData, title, navigate }) => {
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionTitle, { gutterBottom: true, mt: 2, variant: "subtitle1", children: title }), contactData?.members.map((member) => (jsxRuntimeExports.jsx(MemberItem, { memberId: String(member.id), name: member.name, navigate: navigate }, member.id)))] }));
 };
 
+var labels$1 = "Labels";
+var phone$1 = "Phone";
+var business$1 = "Business";
+var businessMembers$1 = "Business Members";
+var properties$1 = "Properties";
+var view$1 = "View";
+var email$1 = "Email";
+var tags$1 = "Tags";
+var global$2 = {
+	back: "Back",
+	save: "Save",
+	noOptions: "No options",
+	noValue: "No value",
+	birthdate: "Birthdate"
+};
+var avatar$1 = {
+	upload: "Upload photo",
+	"delete": "Delete photo"
+};
+var contactEdit$1 = {
+	from: "From",
+	to: "To"
+};
+var conversations$1 = {
+	contactDetails: {
+		contactOwner: "Contact Owner",
+		business: "Business",
+		createdBy: "Created By",
+		modifiedBy: "Modified By",
+		street: "Street",
+		city: "City",
+		state: "State",
+		postcode: "Postcode",
+		country: "Country",
+		addressInformation: "Address Information",
+		primaryAddress: "Primary Address",
+		secondaryAddress: "Secondary Address",
+		contactInformation: "Contact Information",
+		phones: "Phones",
+		contactInfo: {
+			emptySelection: "No selection"
+		}
+	},
+	businessDetails: {
+		businessOwner: "Business Owner"
+	}
+};
+var en = {
+	labels: labels$1,
+	phone: phone$1,
+	business: business$1,
+	businessMembers: businessMembers$1,
+	properties: properties$1,
+	view: view$1,
+	email: email$1,
+	tags: tags$1,
+	global: global$2,
+	avatar: avatar$1,
+	contactEdit: contactEdit$1,
+	conversations: conversations$1
+};
+
+var labels = "Etiquetas";
+var phone = "Teléfono";
+var business = "Empresa";
+var businessMembers = "Miembros de la empresa";
+var properties = "Propiedades";
+var view = "Ver";
+var email = "Correo Electrónico";
+var tags = "Etiquetas";
+var global$1 = {
+	back: "Atrás",
+	save: "Guardar",
+	noOptions: "Sin opciones",
+	noValue: "Sin valor",
+	birthdate: "Fecha de nacimiento"
+};
+var avatar = {
+	upload: "Subir foto",
+	"delete": "Eliminar foto"
+};
+var contactEdit = {
+	from: "Desde",
+	to: "Hasta"
+};
+var conversations = {
+	contactDetails: {
+		contactOwner: "Propietario del contacto",
+		business: "Empresa",
+		createdBy: "Creado por",
+		modifiedBy: "Modificado por",
+		street: "Calle",
+		city: "Ciudad",
+		state: "Estado",
+		postcode: "Código postal",
+		country: "País",
+		addressInformation: "Información de dirección",
+		primaryAddress: "Dirección principal",
+		secondaryAddress: "Dirección secundaria",
+		contactInformation: "Información de contacto",
+		phones: "Teléfonos",
+		contactInfo: {
+			emptySelection: "Sin selección"
+		}
+	},
+	businessDetails: {
+		businessOwner: "Propietario de la empresa"
+	}
+};
+var es = {
+	labels: labels,
+	phone: phone,
+	business: business,
+	businessMembers: businessMembers,
+	properties: properties,
+	view: view,
+	email: email,
+	tags: tags,
+	global: global$1,
+	avatar: avatar,
+	contactEdit: contactEdit,
+	conversations: conversations
+};
+
+const resources = {
+    en: { translation: en },
+    es: { translation: es },
+};
+i18n.use(reactI18next.initReactI18next).init({
+    resources,
+    lng: 'en',
+    fallbackLng: 'en',
+    interpolation: {
+        escapeValue: false,
+    },
+    react: {
+        useSuspense: false,
+    },
+});
+
 const PopupContainer = material.styled(material.Box)(({ theme }) => ({
     //@ts-ignore
     backgroundColor: theme.palette.background.panel,
@@ -15316,15 +15458,14 @@ const PopupContainer = material.styled(material.Box)(({ theme }) => ({
         background: '#616161',
     },
 }));
-const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, t = (key) => ({
-    labels: 'Etiquetas',
-    phone: 'Teléfono',
-    business: 'Empresa',
-    businessMembers: 'Miembros de la empresa',
-    properties: 'Propiedades',
-    view: 'Ver',
-    email: 'Correo Electrónico',
-}[key] || key), }) => {
+const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl, navigate, language = 'en', }) => {
+    const { t: i18nT, i18n } = reactI18next.useTranslation();
+    React$1.useEffect(() => {
+        if (language) {
+            i18n.changeLanguage(language);
+        }
+    }, [language, i18n]);
+    const t = i18nT;
     const dataIsBusiness = isBusiness$1(contactData);
     const dataIsContact = isContact$1(contactData);
     const contactMethods = [
@@ -15375,7 +15516,7 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [open, onClose]);
-    return (jsxRuntimeExports.jsx(material.Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(material.ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(material.CardContent, { children: [jsxRuntimeExports.jsx(Header$1, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && (jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') })), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers'), navigate: navigate })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod$1, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
+    return (jsxRuntimeExports.jsx(material.Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(material.ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(material.CardContent, { children: [jsxRuntimeExports.jsx(Header$1, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') }), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers'), navigate: navigate })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod$1, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
 };
 
 var Edit = {};
@@ -57308,7 +57449,14 @@ const useModalCloseHandler = ({ onClose }) => {
     return handleClose;
 };
 
-const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, navigate, }) => {
+const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, language = 'en', navigate, }) => {
+    const { t: i18nT, i18n } = reactI18next.useTranslation();
+    React$1.useEffect(() => {
+        if (language) {
+            i18n.changeLanguage(language);
+        }
+    }, [language, i18n]);
+    const t = (key) => i18nT(key);
     const api = React$1.useMemo(() => {
         if (!baseUrl || !spaceId)
             return null;
@@ -57380,6 +57528,7 @@ const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, n
                                                                     : 'contact', entityData: state.contactData, baseUrl: baseUrl, spaceId: spaceId, onEntityUpdated: handleEntityUpdated }), jsxRuntimeExports.jsx(ContactInformation, { ownerData: state.contactData })] })] }) }), jsxRuntimeExports.jsx(material.Fade, { in: view === 'tags', timeout: 200, mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(material.Box, { sx: { pt: 0.5, position: 'absolute', inset: 0, overflowY: 'auto' }, children: jsxRuntimeExports.jsx(TagsEditor, { value: draftLabels, options: selectors.labels, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags }) }) })] }) })) : null }) }) }) }) }) }));
 };
 
+exports.i18n = i18n;
 exports.ContactInfoPopup = ContactInfoPopup;
 exports.EditContactModal = EditContactModal;
 //# sourceMappingURL=index.js.map