@nylas/web-elements 2.0.1 → 2.0.2

package/dist/esm/{calendar-check-icon_2.entry.js → calendar-check-icon.entry.js}

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-091600eb.js';
 
-const iconCss$1 = ".sc-calendar-check-icon-h{display:flex}";
-const CalendarCheckIconStyle0 = iconCss$1;
+const iconCss = ".sc-calendar-check-icon-h{display:flex}";
+const CalendarCheckIconStyle0 = iconCss;
 
 const CalendarCheckIcon = class {
     constructor(hostRef) {
@@ -15,21 +15,6 @@ const CalendarCheckIcon = class {
 };
 CalendarCheckIcon.style = CalendarCheckIconStyle0;
 
-const iconCss = ".sc-checkmark-circle-icon-h{display:flex}";
-const CheckmarkCircleIconStyle0 = iconCss;
+export { CalendarCheckIcon as calendar_check_icon };
 
-const CheckmarkCircleIcon = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.width = '20';
-        this.height = '20';
-    }
-    render() {
-        return (h("svg", { key: '498101e43697aec830fd97c25cc7ad443b865cc0', xmlns: "http://www.w3.org/2000/svg", width: this.width, height: this.height, fill: "none", viewBox: "0 0 20 20" }, h("path", { key: 'dd7f115b73e2bdb02da721329ac5ff8b8e629ca4', fill: "currentColor", d: "M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 1a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm3.358 4.646a.5.5 0 0 1 .058.638l-.058.07-4.004 4.004a.5.5 0 0 1-.638.058l-.07-.058-2-2a.5.5 0 0 1 .638-.765l.07.058L9 11.298l3.651-3.652a.5.5 0 0 1 .707 0Z" })));
-    }
-};
-CheckmarkCircleIcon.style = CheckmarkCircleIconStyle0;
-
-export { CalendarCheckIcon as calendar_check_icon, CheckmarkCircleIcon as checkmark_circle_icon };
-
-//# sourceMappingURL=calendar-check-icon_2.entry.js.map
+//# sourceMappingURL=calendar-check-icon.entry.js.map

package/dist/esm/calendar-check-icon.entry.js.map

@@ -0,0 +1 @@
+{"file":"calendar-check-icon.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,yCAAyC,CAAC;AAC1D,gCAAe,OAAO;;MCMT,iBAAiB;;;qBACJ,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IACzF,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,4xBAA4xB,GAC9xB,CACE,EACN;KACH;;;;;;","names":[],"sources":["src/common/icons/icon.css?tag=calendar-check-icon&encapsulation=scoped","src/common/icons/calendar-check.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'calendar-check-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class CalendarCheckIcon {\n  @Prop() width: string = '20';\n  @Prop() height: string = '20';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill=\"currentColor\"\n          d=\"M14.75 0C16.5449 0 18 1.45507 18 3.25V9.02182C17.5368 8.72526 17.0335 8.48584 16.5 8.3135V5.5H1.5V14.75C1.5 15.7165 2.2835 16.5 3.25 16.5H8.3135C8.48584 17.0335 8.72526 17.5368 9.02182 18H3.25C1.45507 18 0 16.5449 0 14.75V3.25C0 1.45507 1.45507 0 3.25 0H14.75ZM14.75 1.5H3.25C2.2835 1.5 1.5 2.2835 1.5 3.25V4H16.5V3.25C16.5 2.2835 15.7165 1.5 14.75 1.5ZM20 14.5C20 17.5376 17.5376 20 14.5 20C11.4624 20 9 17.5376 9 14.5C9 11.4624 11.4624 9 14.5 9C17.5376 9 20 11.4624 20 14.5ZM17.8536 12.1464C17.6583 11.9512 17.3417 11.9512 17.1464 12.1464L13.5 15.7929L11.8536 14.1464C11.6583 13.9512 11.3417 13.9512 11.1464 14.1464C10.9512 14.3417 10.9512 14.6583 11.1464 14.8536L13.1464 16.8536C13.3417 17.0488 13.6583 17.0488 13.8536 16.8536L17.8536 12.8536C18.0488 12.6583 18.0488 12.3417 17.8536 12.1464Z\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/checkbox-component_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-091600eb.js';
-import { r as sanitize } from './utils-b7f9cbcc.js';
+import { r as sanitize } from './utils-fb8a9ce4.js';
 
 const checkboxComponentCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}.checkbox-container{display:flex;flex-direction:column;gap:0.5rem}.checkbox-container p.error{color:var(--nylas-error);font-size:14px;font-weight:400;line-height:20px;font-family:var(--nylas-font-family);margin:0}label{display:flex;align-items:center;font-family:var(--nylas-font-family);cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label.readonly{cursor:not-allowed}label span.required{color:var(--nylas-error);padding:0 0.25rem}label input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;border:1px solid var(--nylas-base-300)}label input[type=checkbox]:focus~.checkmark,label input[type=checkbox]:hover~.checkmark{border-color:var(--nylas-primary)}label input[type=checkbox]:checked~.checkmark{color:var(--nylas-base-0);background:var(--nylas-primary) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border:1px solid var(--nylas-primary)}label input[type=checkbox]:disabled{cursor:not-allowed;background:var(--nylas-base-100);border:1px solid var(--nylas-base-300)}label .checkmark{border-radius:var(--nylas-border-radius);border:1px solid var(--nylas-base-300);position:absolute;left:0;top:2px;width:18px;height:18px;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label .label{margin-left:32px;font-size:16px;font-weight:400;color:var(--nylas-base-800);line-height:24px}";
 const CheckboxComponentStyle0 = checkboxComponentCss;

package/dist/esm/checkbox-group_4.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h as h$1, a as getElement, H as Host } from './index-091600eb.js';
-import { R as RegisterComponent } from './register-component-a1c3d7b4.js';
-import { a as dayjs, u as utc, t as timezone, i as instance, b as debug, K as generateRRule, C as getTimezoneOffset } from './utils-b7f9cbcc.js';
+import { R as RegisterComponent } from './register-component-9d4ceee5.js';
+import { a as dayjs, u as utc, t as timezone, i as instance, b as debug, K as generateRRule, C as getTimezoneOffset } from './utils-fb8a9ce4.js';
 import { T as TIMEZONE_MAP } from './constants-f51538ef.js';
-import { c as customParseFormat } from './customParseFormat-edc38d83.js';
+import { c as customParseFormat } from './customParseFormat-f0d21eb3.js';
 
 const checkboxGroupCss = ":host{display:block}.checkbox-group-container{display:flex;flex-direction:column;gap:0.5rem}.group-label{font-weight:500;margin-bottom:0.25rem}.group-label .required{color:var(--nylas-error);margin-left:0.25rem}.checkbox-list{display:flex;gap:16px}.checkbox-list.vertical{flex-direction:column}.checkbox-list.horizontal{flex-direction:row;align-items:center}.checkbox-list checkbox-component{width:max-content}.checkbox-list checkbox-component::part(checkbox-label-span){width:inherit;margin-left:24px}.error{color:var(--nylas-error);font-size:0.875rem;margin-top:0.25rem}";
 const CheckboxGroupStyle0 = checkboxGroupCss;

package/dist/esm/checkmark-circle-icon.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h } from './index-091600eb.js';
+
+const iconCss = ".sc-checkmark-circle-icon-h{display:flex}";
+const CheckmarkCircleIconStyle0 = iconCss;
+
+const CheckmarkCircleIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.width = '20';
+        this.height = '20';
+    }
+    render() {
+        return (h("svg", { key: '498101e43697aec830fd97c25cc7ad443b865cc0', xmlns: "http://www.w3.org/2000/svg", width: this.width, height: this.height, fill: "none", viewBox: "0 0 20 20" }, h("path", { key: 'dd7f115b73e2bdb02da721329ac5ff8b8e629ca4', fill: "currentColor", d: "M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 1a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm3.358 4.646a.5.5 0 0 1 .058.638l-.058.07-4.004 4.004a.5.5 0 0 1-.638.058l-.07-.058-2-2a.5.5 0 0 1 .638-.765l.07.058L9 11.298l3.651-3.652a.5.5 0 0 1 .707 0Z" })));
+    }
+};
+CheckmarkCircleIcon.style = CheckmarkCircleIconStyle0;
+
+export { CheckmarkCircleIcon as checkmark_circle_icon };
+
+//# sourceMappingURL=checkmark-circle-icon.entry.js.map

package/dist/esm/checkmark-circle-icon.entry.js.map

@@ -0,0 +1 @@
+{"file":"checkmark-circle-icon.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,2CAA2C,CAAC;AAC5D,kCAAe,OAAO;;MCMT,mBAAmB;;;qBACN,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,IAC7G,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,qOAAqO,GACvO,CACE,EACN;KACH;;;;;;","names":[],"sources":["src/common/icons/icon.css?tag=checkmark-circle-icon&encapsulation=scoped","src/common/icons/checkmark-circle.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'checkmark-circle-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class CheckmarkCircleIcon {\n  @Prop() width: string = '20';\n  @Prop() height: string = '20';\n\n  render() {\n    return (\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width={this.width} height={this.height} fill=\"none\" viewBox=\"0 0 20 20\">\n        <path\n          fill=\"currentColor\"\n          d=\"M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 1a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm3.358 4.646a.5.5 0 0 1 .058.638l-.058.07-4.004 4.004a.5.5 0 0 1-.638.058l-.07-.058-2-2a.5.5 0 0 1 .638-.765l.07.058L9 11.298l3.651-3.652a.5.5 0 0 1 .707 0Z\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/checkmark-icon_15.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, c as createEvent, a as getElement, H as Host } from './index-091600eb.js';
-import { R as RegisterComponent } from './register-component-a1c3d7b4.js';
-import { b as debug, L as isValidImage, i as instance, M as getBrowser, r as sanitize, N as isNonPrintableKey, J as checkForMissingSlots } from './utils-b7f9cbcc.js';
+import { R as RegisterComponent } from './register-component-9d4ceee5.js';
+import { b as debug, L as isValidImage, i as instance, M as getBrowser, r as sanitize, N as isNonPrintableKey, J as checkForMissingSlots } from './utils-fb8a9ce4.js';
 import { E as EVENT_TITLE_TOKENS, P as PROVIDER_CONFERENCE_MAP, f as CONFERENCE_PROVIDER_MAP } from './constants-f51538ef.js';
 
 const iconCss$5 = ".sc-checkmark-icon-h{display:flex}";
@@ -312,6 +312,8 @@ const NylasAdditionalParticipants = class {
         this.includeOrganizerAsParticipant = true;
         this.isRoundRobinConfig = false;
         this.error = '';
+        this.requiredError = '';
+        this.patternError = '';
     }
     elementNameChangedHandler(newValue) {
         debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);
@@ -330,6 +332,8 @@ const NylasAdditionalParticipants = class {
         if (newVal === oldVal)
             return;
         instance.changeLanguage(newVal);
+        this.requiredError = instance.t('fieldRequired', { field: instance.t('email') });
+        this.patternError = instance.t('invalidInputFormat', { field: instance.t('email') });
         if (this.error) {
             this.error = instance.t('nylasAdditionalParticipants.error');
         }
@@ -379,8 +383,8 @@ const NylasAdditionalParticipants = class {
             return;
         }
         else if (!participant && !EMAIL_REGEX.test(event.detail.value)) {
-            this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please enter a valid email address');
-            this.participantErrors[index] = 'Please enter a valid email address';
+            this.isInternalsAvailable && this.internals.setValidity({ customError: true }, instance.t('nylasAdditionalParticipants.error_email'));
+            this.participantErrors[index] = instance.t('nylasAdditionalParticipants.error_email');
             this.participants[index].is_valid = false;
             this.participants = [...this.participants];
             return;
@@ -458,17 +462,17 @@ const NylasAdditionalParticipants = class {
         });
     }
     render() {
-        return (h(Host, { key: 'e5bf56a74ed62d66965f84a42680421cf225153a', part: "nadtnlpart" }, h("nylas-form-card", { key: '89c24d867dd1165e92b18dc97fbd63ff71066d43', exportparts: "nfc, nfc__header" }, h("h3", { key: '4b22a68a32ae9837bbc34677d298e85d2195e98e', slot: "header-title", class: "nylas-additional-participants__title", part: "nadtnlpart__title" }, instance.t('nylasAdditionalParticipants.headerTitle')), h("p", { key: 'a366560957ab5b9121c2fed9f11764abc7a80734', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nadtnlpart__subtitle" }, instance.t('nylasAdditionalParticipants.headerSubTitle')), h("div", { key: 'ff1da62576ffd233f3fefedf561aa27a0507a744', slot: "content", class: "nylas-additional-participants__content", part: "nadtnlpart__content" }, h("div", { key: '46a0f90f4081c4d594c28ad10be43559b0ec4594' }, this.participants.map((participant, index) => {
+        return (h(Host, { key: '4d547fe2488b5019af5d63d9691a740e8efb5f43', part: "nadtnlpart" }, h("nylas-form-card", { key: '627e61e9080b989b5871d798339e718e68bb639d', exportparts: "nfc, nfc__header" }, h("h3", { key: '447dc3fee1b9e4014a7aa6e54a01dbf84d4893ac', slot: "header-title", class: "nylas-additional-participants__title", part: "nadtnlpart__title" }, instance.t('nylasAdditionalParticipants.headerTitle')), h("p", { key: 'f116167709f9464422d4dedba69a1db6c3b55b0e', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nadtnlpart__subtitle" }, instance.t('nylasAdditionalParticipants.headerSubTitle')), h("div", { key: 'f231168dcab771100276cbd76710ec0446cdfa8c', slot: "content", class: "nylas-additional-participants__content", part: "nadtnlpart__content" }, h("div", { key: '47f0cf5882fa4f88a09ba74b70136e7911cae75f' }, this.participants.map((participant, index) => {
             return (h("div", { class: 'nylas-additional-participants__input_group', part: "nadtnlpart__input_group" }, !participant.is_organizer && h("label", null, `${instance.t('nylasAdditionalParticipants.participant')} ${index}`), h("div", { part: "nadtnlpart__input_wrapper", class: {
                     'nylas-additional-participants__input_wrapper': true,
                     'nylas-additional-participants__input_wrapper_organizer': participant?.is_organizer === true,
                     'nylas-additional-participants__input_wrapper_invalid': participant.is_valid === false,
                     'error': participant.is_valid === false,
-                } }, h("div", { class: { 'nylas-additional-participants__input': true, 'organizer': participant?.is_organizer === true }, part: "nadtnlpart__input" }, participant.is_organizer ? (h("input-component", { class: 'label-input', name: `${index}`, key: index, label: instance.t('nylasAdditionalParticipants.organizer'), required: false, readOnly: participant.is_organizer, defaultValue: participant.email }, this.isRoundRobinConfig && (h("div", { class: "required-input", slot: "additional-input" }, h("input", { type: "checkbox", name: `organizer_participant`, id: `organizer_participant`, onClick: () => {
+                } }, h("div", { class: { 'nylas-additional-participants__input': true, 'organizer': participant?.is_organizer === true }, part: "nadtnlpart__input" }, participant.is_organizer ? (h("input-component", { class: 'label-input', name: `${index}`, key: index, label: instance.t('nylasAdditionalParticipants.organizer'), required: false, requiredError: this.requiredError, patternError: this.patternError, readOnly: participant.is_organizer, defaultValue: participant.email }, this.isRoundRobinConfig && (h("div", { class: "required-input", slot: "additional-input" }, h("input", { type: "checkbox", name: `organizer_participant`, id: `organizer_participant`, onClick: () => {
                     this.includeOrganizerAsParticipant = !this.includeOrganizerAsParticipant;
                     this.updateFormValue();
                 }, checked: this.includeOrganizerAsParticipant }), h("label", { htmlFor: `organizer_participant`, "aria-label": "Include as participant" }, h("span", { class: "org-as-participant", part: "nadtnlpart__org-as-participant" }, instance.t('nylasAdditionalParticipants.organizerAsParticipant')), h("tooltip-component", { id: "organizer_participant_tooltip" }, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, h("strong", null, instance.t('nylasAdditionalParticipants.tooltip.includeOrganizer'), ":"), ' ', instance.t('nylasAdditionalParticipants.tooltip.includeOrganizerDesc'), " ", h("br", null), h("strong", null, instance.t('nylasAdditionalParticipants.tooltip.excludeOrganizer'), ":"), ' ', instance.t('nylasAdditionalParticipants.tooltip.excludeOrganizerDesc')))))))) : (h("input-dropdown", { id: `${index}`, name: `${index}`, filterable: true, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(index), part: "nadtnlpart__remove-participant" }, h("close-icon", null))))), !participant.is_valid && (h("p", { class: "nylas-additional-participants__error", part: "nadtnlpart__error" }, this.participantErrors[index]))));
-        }), h("p", { key: '435290314ef0093403a2f6e246cc9c397b6f31f0', class: "nylas-additional-participants__error", part: "nadtnlpart__error" }, this.error)), h("button", { key: '15b2a6224f5a8c79ff094b4b6626bdb080395050', class: "nylas-additional-participants__add", part: "nadtnlpart__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: '0d1de27342ca1b0882c4f3874834f3ac96b8df2c' }), ' ', h("span", { key: 'b8a39bdf5ed3fdc998efe5a3ed0610abf28cb49f' }, this.participants.length > 1
+        }), h("p", { key: 'd2b56b8aedb241aa6f30d7a1cd6bbb65c3b3df83', class: "nylas-additional-participants__error", part: "nadtnlpart__error" }, this.error)), h("button", { key: 'e9ae0842ddbfa5e99216104204e944931c234d2a', class: "nylas-additional-participants__add", part: "nadtnlpart__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: '72c4f18b78923e41c5bf85203dfddce1faf69c66' }), ' ', h("span", { key: 'aa8f679690c7a591d120bafb6d3df96e74db4b5e' }, this.participants.length > 1
             ? instance.t('nylasAdditionalParticipants.addParticipant', { context: 'next' })
             : instance.t('nylasAdditionalParticipants.addParticipant', { context: 'first' })))))));
     }