@nylas/web-elements 0.0.0-canary-20241008193213 → 0.0.0-canary-20241015194719

package/dist/{esm/nylas-reminder-emails.entry.js → components/nylas-reminder-emails2.js}

@@ -1,6 +1,20 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-7cb0dd3d.js';
-import { R as RegisterComponent } from './register-component-3444af44.js';
-import { a as debug } from './utils-6e17bc66.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { a as debug } from './utils.js';
+import { d as defineCustomElement$e } from './button-component2.js';
+import { d as defineCustomElement$d } from './chevron.js';
+import { d as defineCustomElement$c } from './clock.js';
+import { d as defineCustomElement$b } from './edit.js';
+import { d as defineCustomElement$a } from './info.js';
+import { d as defineCustomElement$9 } from './input-dropdown2.js';
+import { d as defineCustomElement$8 } from './loading.js';
+import { d as defineCustomElement$7 } from './nylas-reminder-time2.js';
+import { d as defineCustomElement$6 } from './person-clipboard.js';
+import { d as defineCustomElement$5 } from './plus.js';
+import { d as defineCustomElement$4 } from './search.js';
+import { d as defineCustomElement$3 } from './select-dropdown2.js';
+import { d as defineCustomElement$2 } from './toolitp-component.js';
+import { d as defineCustomElement$1 } from './trash.js';
 
 const nylasReminderEmailsCss = ":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-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:inherit}.cards-container{margin-bottom:4rem}.cards-container .nylas-reminder-email{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.cards-container .nylas-reminder-email .reminder-open-close-toggle{display:flex;gap:16px}.cards-container .nylas-reminder-email .reminder-open-close-toggle .chevron{display:flex;align-self:center;cursor:pointer}.cards-container .nylas-reminder-email .reminder-open-close-toggle .chevron:hover,.cards-container .nylas-reminder-email .reminder-open-close-toggle .chevron:active{color:var(--nylas-primary)}.cards-container .nylas-reminder-email .reminder-open-close-toggle .chevron.open{transform:rotate(90deg)}.cards-container .nylas-reminder-email .reminder-open-close-toggle .chevron.closed{transform:rotate(270deg)}.cards-container .nylas-reminder-email .reminder-open-close-toggle .chevron.disabled{cursor:not-allowed;color:var(--nylas-base-300)}.cards-container .nylas-reminder-email .reminder-open-close-toggle .chevron.disabled:hover{color:var(--nylas-base-300)}.cards-container .nylas-reminder-email .header{padding:1rem;display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--nylas-base-200)}.cards-container .nylas-reminder-email .header h3{border-radius:var(--nylas-border-radius-2x);margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.cards-container .nylas-reminder-email .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.cards-container .nylas-reminder-email .header .confirmation-email-toggle{display:flex;gap:24px;align-items:center}.cards-container .nylas-reminder-email .header .confirmation-email-toggle .chevron{display:flex;align-self:center;cursor:pointer}.cards-container .nylas-reminder-email .header .confirmation-email-toggle .chevron:hover,.cards-container .nylas-reminder-email .header .confirmation-email-toggle .chevron:active{color:var(--nylas-primary)}.cards-container .nylas-reminder-email .header .confirmation-email-toggle .chevron.open{transform:rotate(90deg)}.cards-container .nylas-reminder-email .header .confirmation-email-toggle .chevron.closed{transform:rotate(270deg)}.cards-container .nylas-reminder-email .header .confirmation-email-toggle .chevron.disabled{cursor:not-allowed;color:var(--nylas-base-300)}.cards-container .nylas-reminder-email .header .confirmation-email-toggle .chevron.disabled:hover{color:var(--nylas-base-300)}.cards-container .nylas-reminder-email .nylas-reminder-email__body{display:grid;grid-template-columns:1fr auto;background-color:var(--nylas-base-25);border-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.cards-container .nylas-reminder-email .nylas-reminder-email__body{grid-template-columns:1fr}}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section{padding:1rem;display:flex;flex-direction:column;gap:1rem;color:var(--nylas-base-800)}@media screen and (max-width: 768px){.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section{border:none}}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row.full-width-col{grid-template-columns:1fr}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row label{display:flex;align-items:center}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row label span.required{color:var(--nylas-error, #cc4841)}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row label span.label-icon{margin-left:4px}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row label span.label-icon tooltip-component{display:flex}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row p{margin:0.25rem 0 0 0;font-size:1rem;font-weight:500;line-height:24px;color:var(--nylas-base-900)}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row .company-logo-container{display:flex;gap:32px;width:100%}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row .company-logo-container .input-container{display:flex;flex-direction:column;flex:1}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row .company-logo-container .company-logo{display:flex;justify-content:center;align-items:center;width:200px;height:100px;border:var(--nylas-base-200) solid 1px;border-radius:var(--nylas-border-radius-2x);overflow:hidden;padding:10px}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row .company-logo-container .company-logo img{max-height:100%;max-width:100%;object-fit:contain;object-position:center}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .nylas-reminder-email__row span.selected-value{font-weight:500}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .subsection{display:flex;flex-direction:column;gap:1rem}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .subsection h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .subsection .input-container{display:flex;flex-direction:column;gap:0.25rem}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__section .subsection .input-container textarea{padding:12px 16px;border-width:1;resize:vertical;border-radius:8px;font-family:var(--nylas-font-family);font-size:16px;line-height:24px;border:1px solid var(--nylas-base-200)}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__preview{width:208px;background:var(--nylas-base-25);border-bottom-right-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__preview{width:inherit;border-bottom-left-radius:var(--nylas-border-radius-2x)}}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__preview h4{font-size:14px;line-height:24px;color:var(--nylas-base-600);font-family:var(--nylas-font-family);font-weight:500;text-align:center;margin:0.75rem 0}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__preview .preview-container{padding:0 2rem 1rem}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__preview .preview-container .slot{background-color:transparent;border-top:1px solid var(--nylas-base-300)}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__preview .preview-container .slot.active{background-color:var(--nylas-base-100)}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__preview .preview-container .slot:last-of-type{border-bottom:1px solid var(--nylas-base-300)}.cards-container .nylas-reminder-email .nylas-reminder-email__body .nylas-reminder-email__preview .preview-container .event-slot{background-color:var(--nylas-base-600);border-top:1px solid var(--nylas-base-300)}.cards-container .nylas-reminder-email .nylas-reminder-email__body span.error-message{color:var(--nylas-error)}.cards-container .nylas-reminder-email .nylas-reminder-email__body span.help-text{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.cards-container .nylas-reminder-email .nylas-reminder-email__summary{padding:0.75rem 1rem;display:grid;grid-template-columns:auto 1fr;column-gap:1rem}.cards-container .nylas-reminder-email .nylas-reminder-email__summary p{margin:0;display:flex;align-items:center;column-gap:4px;font-size:0.875rem;font-weight:400;line-height:21px;color:var(--nylas-base-600);text-align:left}.cards-container .nylas-reminder-email .nylas-reminder-email__summary p span.summary-icon{display:flex;justify-content:center;min-width:20px}sp-divider{background-color:var(--nylas-base-200);height:1px;margin:0.25rem 0}button-component.create-reminder button{margin:1rem;width:calc(100% - 2rem)}button-component.delete-btn button{color:var(--nylas-error) !important}";
 const NylasReminderEmailsStyle0 = nylasReminderEmailsCss;
@@ -19,17 +33,13 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-const NylasReminderEmails = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const NylasReminderEmails = proxyCustomElement(class NylasReminderEmails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
+        this.internals = this.attachInternals();
         this.selectedConfiguration = undefined;
         this.name = 'reminder-overrides';
         this.reminders = this.selectedConfiguration?.event_booking?.reminders ?? [];
@@ -155,7 +165,7 @@ const NylasReminderEmails = class {
                 value: 'host',
             },
         ];
-        return (h(Host, { key: 'f1982a2fe4c71ae1345b184767d015ba34336f1f' }, h("div", { key: '02f612577517fcc9ca50e5278c8e4cf2492aa29e', class: "cards-container" }, this.reminders.map((reminder, index) => {
+        return (h(Host, { key: 'a71a8247248eec4834963b8887b713769b7210cf' }, h("div", { key: '8ab8b9fc62502a7ddf5a111727ab5ef53fc050a9', class: "cards-container" }, this.reminders.map((reminder, index) => {
             return (h("div", { class: "nylas-reminder-email", part: "nre" }, h("div", { class: "header", part: "nre__header" }, h("div", null, h("h3", null, "Upcoming meeting", organizerName ? ` with ${organizerName} ` : ''), h("p", null, "Reminder before event")), !reminder.editing ? (h("button-component", { variant: 'basic', key: `edit-${index} `, clickHandler: event => {
                     event.preventDefault();
                     reminder.editing = true;
@@ -167,18 +177,28 @@ const NylasReminderEmails = class {
                     reminder.editing = !reminder.editing;
                     this.reminders = [...this.reminders];
                 } }, h("chevron-icon", { width: "24", height: "24" }))))), reminder.editing ? (h("div", { class: "nylas-reminder-email__body", part: "nre__body" }, h("div", { class: "nylas-reminder-email__section" }, h("div", { class: "nylas-reminder-email__row" }, h("label", null, "Email recipients"), h("select-dropdown", { name: `recipient-${index}`, options: recipientOptions, defaultSelectedOption: recipientOptions.find(i => i.value === reminder.recipient) ?? recipientOptions[0], withSearch: false })), h("div", { class: "nylas-reminder-email__row" }, h("label", null, "Send confirmation email when", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "The recipients will receive a reminder email at the specified time before the event.")))), h("nylas-reminder-time", { name: `reminder-time-${index}`, eventReminderTimeMinutes: reminder.minutes_before_event, exportparts: "nrt, nrt__input_dropdown: nre__reminder-input_dropdown,\n                          nrt__input_dropdown-input: nre__reminder-input_dropdown-input,\n                          nrt__input_dropdown-content: nre__reminder-input_dropdown-content,\n                          " }))))) : (h("div", { class: "nylas-reminder-email__summary", part: "nre__summary" }, h("p", null, h("span", { class: "summary-icon" }, h("person-clipboard-icon", null)), recipientOptions.find(i => i.value === reminder.recipient)?.label), h("p", null, h("span", { class: "summary-icon" }, h("clock-icon", null)), this.formatReminderTime(reminder.minutes_before_event), " before the event")))));
-        })), h("button-component", { key: '5f0c78b6e6caca06bb8b3c8346480f3cde3ee8f9', class: "create-reminder", variant: 'basic', clickHandler: event => {
+        })), h("button-component", { key: '67f3f31bf95a05c858a97da188b88788551d1171', class: "create-reminder", variant: 'basic', clickHandler: event => {
                 event.preventDefault();
                 this.addReminder();
-            } }, h("plus-icon", { key: 'b72802d4c496bcdad8f26986b43a8d70828fae68', width: "16", height: "16" }), "New reminder")));
+            } }, h("plus-icon", { key: 'ad8a8e742fdd8334e56af084356ea6fc7189405e', width: "16", height: "16" }), "New reminder")));
     }
     static get formAssociated() { return true; }
-    get host() { return getElement(this); }
+    get host() { return this; }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
         "selectedConfiguration": ["selectedConfigurationChangedHandler"]
     }; }
-};
+    static get style() { return NylasReminderEmailsStyle0; }
+}, [65, "nylas-reminder-emails", {
+        "selectedConfiguration": [16],
+        "name": [1],
+        "reminders": [32],
+        "reminderErrors": [32],
+        "participants": [32]
+    }, [[0, "valueChanged", "handleValueChanged"], [0, "nylasFormDropdownChanged", "handleNylasFormDropdownChanged"]], {
+        "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
+    }]);
 __decorate([
     RegisterComponent({
         name: 'nylas-reminder-emails',
@@ -197,8 +217,90 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], NylasReminderEmails.prototype, "render", null);
-NylasReminderEmails.style = NylasReminderEmailsStyle0;
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-reminder-emails", "button-component", "chevron-icon", "clock-icon", "edit-icon", "info-icon", "input-dropdown", "loading-icon", "nylas-reminder-time", "person-clipboard-icon", "plus-icon", "search-icon", "select-dropdown", "tooltip-component", "trash-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-reminder-emails":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasReminderEmails);
+            }
+            break;
+        case "button-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "chevron-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "clock-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "edit-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "info-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "input-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "loading-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "nylas-reminder-time":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "person-clipboard-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "plus-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "search-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "select-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "tooltip-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "trash-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
 
-export { NylasReminderEmails as nylas_reminder_emails };
+export { NylasReminderEmails as N, defineCustomElement as d };
 
-//# sourceMappingURL=nylas-reminder-emails.entry.js.map
+//# sourceMappingURL=nylas-reminder-emails2.js.map

package/dist/components/nylas-reminder-emails2.js.map

@@ -0,0 +1 @@
+{"file":"nylas-reminder-emails2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-reminder-emails/nylas-reminder-emails.scss?tag=nylas-reminder-emails&encapsulation=shadow","src/components/scheduler-editor/nylas-reminder-emails/nylas-reminder-emails.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.cards-container {\n  margin-bottom: 4rem;\n\n  .nylas-reminder-email {\n    width: inherit;\n    display: flex;\n    flex-direction: column;\n    margin: 1rem;\n    border-radius: var(--nylas-border-radius-2x);\n    border: 1px solid var(--nylas-base-200);\n    text-align: left;\n\n    .reminder-open-close-toggle {\n      display: flex;\n      gap: 16px;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n\n    .header {\n      padding: 1rem;\n      display: grid;\n      grid-template-columns: 1fr auto;\n      border-bottom: 1px solid var(--nylas-base-200);\n\n      h3 {\n        border-radius: var(--nylas-border-radius-2x);\n        margin: 0;\n        font-size: 1rem;\n        font-weight: 600;\n        line-height: 20px;\n        color: var(--nylas-base-900);\n        text-align: left;\n      }\n\n      p {\n        margin: 0.25rem 0 0 0;\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 20px;\n        color: var(--nylas-base-600);\n        text-align: left;\n      }\n\n      .confirmation-email-toggle {\n        display: flex;\n        gap: 24px;\n        align-items: center;\n\n        .chevron {\n          display: flex;\n          align-self: center;\n          cursor: pointer;\n\n          &:hover,\n          &:active {\n            color: var(--nylas-primary);\n          }\n\n          &.open {\n            transform: rotate(90deg);\n          }\n\n          &.closed {\n            transform: rotate(270deg);\n          }\n\n          &.disabled {\n            cursor: not-allowed;\n            color: var(--nylas-base-300);\n\n            &:hover {\n              color: var(--nylas-base-300);\n            }\n          }\n        }\n      }\n    }\n\n    .nylas-reminder-email__body {\n      display: grid;\n      grid-template-columns: 1fr auto;\n      background-color: var(--nylas-base-25);\n      border-radius: var(--nylas-border-radius-2x);\n\n      @media #{$mobile} {\n        grid-template-columns: 1fr;\n      }\n\n      .nylas-reminder-email__section {\n        padding: 1rem;\n        display: flex;\n        flex-direction: column;\n        gap: 1rem;\n        color: var(--nylas-base-800);\n\n        @media #{$mobile} {\n          border: none;\n        }\n\n        .nylas-reminder-email__row {\n          display: grid;\n          grid-template-columns: 1fr auto;\n          align-items: center;\n          gap: 1rem;\n\n          &.full-width-col {\n            grid-template-columns: 1fr;\n          }\n\n          label {\n            display: flex;\n            align-items: center;\n\n            span.required {\n              color: var(--nylas-error, #cc4841);\n            }\n\n            span.label-icon {\n              margin-left: 4px;\n\n              tooltip-component {\n                display: flex;\n              }\n            }\n          }\n\n          p {\n            margin: 0.25rem 0 0 0;\n            font-size: 1rem;\n            font-weight: 500;\n            line-height: 24px;\n            color: var(--nylas-base-900);\n          }\n\n          .company-logo-container {\n            display: flex;\n            gap: 32px;\n            width: 100%;\n\n            .input-container {\n              display: flex;\n              flex-direction: column;\n              flex: 1;\n            }\n\n            .company-logo {\n              display: flex;\n              justify-content: center;\n              align-items: center;\n              width: 200px;\n              height: 100px;\n              border: var(--nylas-base-200) solid 1px;\n              border-radius: var(--nylas-border-radius-2x);\n              overflow: hidden;\n              padding: 10px;\n            }\n\n            .company-logo img {\n              max-height: 100%;\n              max-width: 100%;\n              object-fit: contain;\n              object-position: center;\n            }\n          }\n\n          span.selected-value {\n            font-weight: 500;\n          }\n        }\n\n        .subsection {\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n\n          h3 {\n            margin: 0;\n            font-size: 1rem;\n            font-weight: 600;\n            line-height: 20px;\n            color: var(--nylas-base-900);\n            text-align: left;\n          }\n\n          .input-container {\n            display: flex;\n            flex-direction: column;\n            gap: 0.25rem;\n\n            textarea {\n              padding: 12px 16px;\n              border-width: 1;\n              resize: vertical;\n              border-radius: 8px;\n              font-family: var(--nylas-font-family);\n              font-size: 16px;\n              line-height: 24px;\n              border: 1px solid var(--nylas-base-200);\n            }\n          }\n        }\n      }\n\n      .nylas-reminder-email__preview {\n        width: 208px;\n        background: var(--nylas-base-25);\n        border-bottom-right-radius: var(--nylas-border-radius-2x);\n\n        @media #{$mobile} {\n          width: inherit;\n          border-bottom-left-radius: var(--nylas-border-radius-2x);\n        }\n\n        h4 {\n          font-size: 14px;\n          line-height: 24px;\n          color: var(--nylas-base-600);\n          font-family: var(--nylas-font-family);\n          font-weight: 500;\n          text-align: center;\n          margin: 0.75rem 0;\n        }\n\n        .preview-container {\n          padding: 0 2rem 1rem;\n\n          .slot {\n            background-color: transparent;\n            border-top: 1px solid var(--nylas-base-300);\n\n            &.active {\n              background-color: var(--nylas-base-100);\n            }\n\n            &:last-of-type {\n              border-bottom: 1px solid var(--nylas-base-300);\n            }\n          }\n\n          .event-slot {\n            background-color: var(--nylas-base-600);\n            border-top: 1px solid var(--nylas-base-300);\n          }\n        }\n      }\n\n      span.error-message {\n        color: var(--nylas-error);\n      }\n\n      span.help-text {\n        margin: 0.25rem 0 0 0;\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 20px;\n        color: var(--nylas-base-600);\n        text-align: left;\n      }\n    }\n\n    .nylas-reminder-email__summary {\n      padding: 0.75rem 1rem;\n      display: grid;\n      grid-template-columns: auto 1fr;\n      column-gap: 1rem;\n\n      p {\n        margin: 0;\n        display: flex;\n        align-items: center;\n        column-gap: 4px;\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 21px;\n        color: var(--nylas-base-600);\n        text-align: left;\n\n        span.summary-icon {\n          display: flex;\n          justify-content: center;\n          min-width: 20px;\n        }\n      }\n    }\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n  margin: 0.25rem 0;\n}\n\nbutton-component.create-reminder button {\n  margin: 1rem;\n  width: calc(100% - 2rem);\n}\n\nbutton-component.delete-btn button {\n  color: var(--nylas-error) !important;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, EventReminder, Participant } from '@nylas/core';\n/**\n * The `nylas-reminder-emails` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nre__tab-heading - The nylas-reminder-emails main tab heading\n * @part nre - The nylas-reminder-emails container\n * @part nre__header - The header of the event communication section\n * @part nre__body - The body of the event communication section\n * @part nre__summary - The reminder card summary container\n * @part nre__reminder-input_dropdown - The dropdown container for selecting reminder time\n * @part nre__reminder-input_dropdown-input - The dropdown for selecting reminder time value\n * @part nre__reminder-input_dropdown-content - The dropdown for selecting reminder time unit (e.g. min, hrs, days)\n */\n@Component({\n  tag: 'nylas-reminder-emails',\n  styleUrl: 'nylas-reminder-emails.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasReminderEmails {\n  @Element() host!: HTMLNylasReminderEmailsElement;\n\n  /**\n   * The selected configuration.\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'reminder-overrides';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The event reminders state. Defaults to an empty array if no event reminders are present.\n   */\n  @State() reminders: (EventReminder & { editing?: boolean })[] = this.selectedConfiguration?.event_booking?.reminders ?? [];\n  @State() reminderErrors: { [key: string]: string } = {};\n  @State() participants: Participant[] = this.selectedConfiguration?.participants ?? [];\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-reminder-emails', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-reminder-emails', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-reminder-emails', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-reminder-emails', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.updateRemindersFormValue();\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-reminder-emails', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-reminder-emails', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-reminder-emails', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-reminder-emails', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-reminder-emails', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newVal: Configuration) {\n    debug('nylas-reminder-emails', 'selectedConfigurationChangedHandler', newVal);\n    this.reminders = newVal?.event_booking?.reminders ?? [];\n    this.participants = newVal?.participants ?? [];\n    this.updateRemindersFormValue();\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(event: CustomEvent) {\n    debug('nylas-reminder-emails', 'handleValueChanged', event);\n    const { name, value } = event.detail;\n\n    if (name.startsWith('reminder-time-')) {\n      // Extract the reminder index from the name attribute (e.g. reminder-time-0)\n      const [_, reminderIndex] = name.split(/(\\d+)/);\n      const updatedReminders = [...this.reminders];\n      updatedReminders[reminderIndex].minutes_before_event = parseInt(value);\n      this.reminders = [...updatedReminders];\n      this.updateRemindersFormValue();\n    }\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  handleNylasFormDropdownChanged(event: CustomEvent) {\n    debug('nylas-reminder-emails', 'handleNylasFormDropdownChanged', event);\n    const { name, value } = event.detail;\n    if (!name.startsWith('recipient-')) {\n      return;\n    }\n    // Extract the reminder index from the name attribute (e.g. recipient-0)\n    const [_, reminderIndex] = name.split(/(\\d+)/);\n    const updatedReminders = [...this.reminders];\n    updatedReminders[reminderIndex].recipient = value;\n    this.reminders = [...updatedReminders];\n    this.updateRemindersFormValue();\n  }\n\n  addReminder() {\n    debug('nylas-reminder-emails', 'addReminder');\n    this.reminders = [\n      ...this.reminders,\n      {\n        type: 'email',\n        minutes_before_event: 30,\n        editing: true,\n        recipient: 'all',\n      },\n    ];\n    this.updateRemindersFormValue();\n  }\n\n  deleteReminder(index: number) {\n    this.reminders = this.reminders.filter((_, i) => i !== index).map(p => ({ ...p }));\n    this.updateRemindersFormValue();\n  }\n\n  updateRemindersFormValue() {\n    debug('nylas-reminder-emails', 'updateRemindersFormValue');\n    const eventReminders = this.reminders.map(reminder => {\n      const rem = { ...reminder };\n      delete rem.editing;\n      return rem;\n    });\n    this.internals.setFormValue(JSON.stringify(eventReminders), 'reminder-overrides');\n    this.valueChanged.emit({ value: JSON.stringify(eventReminders), name: 'reminder-overrides' });\n  }\n\n  formatReminderTime(reminderTime: number) {\n    switch (true) {\n      case reminderTime > 24 * 60:\n        return `${reminderTime / 60 / 24} days`;\n      case reminderTime === 24 * 60:\n        return '1 day';\n      case reminderTime > 90 || reminderTime === 60:\n        return `${reminderTime / 60} hours`;\n      default:\n        return `${reminderTime} minute${reminderTime > 1 ? 's' : ''} `;\n    }\n  }\n\n  @RegisterComponent<NylasReminderEmails, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-reminder-emails',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const organizerName = this.participants.find(p => p.is_organizer)?.name;\n    const recipientOptions = [\n      {\n        label: 'All host & guests',\n        value: 'all',\n      },\n      {\n        label: 'All event guests',\n        value: 'guest',\n      },\n      {\n        label: 'Only event host',\n        value: 'host',\n      },\n    ];\n\n    return (\n      <Host>\n        <div class=\"cards-container\">\n          {this.reminders.map((reminder, index) => {\n            return (\n              <div class=\"nylas-reminder-email\" part=\"nre\">\n                <div class=\"header\" part=\"nre__header\">\n                  <div>\n                    <h3>Upcoming meeting{organizerName ? ` with ${organizerName} ` : ''}</h3>\n                    <p>Reminder before event</p>\n                  </div>\n                  {!reminder.editing ? (\n                    <button-component\n                      variant={'basic'}\n                      key={`edit-${index} `}\n                      clickHandler={event => {\n                        event.preventDefault();\n                        reminder.editing = true;\n                        this.reminders = [...this.reminders];\n                      }}\n                    >\n                      <edit-icon width=\"16\" height=\"16\"></edit-icon>\n                      Edit\n                    </button-component>\n                  ) : (\n                    <div class=\"reminder-open-close-toggle\">\n                      <button-component\n                        variant={'basic'}\n                        class=\"delete-btn\"\n                        tooltip=\"Delete reminder\"\n                        key={`delete -${index} `}\n                        clickHandler={event => {\n                          event.preventDefault();\n                          this.deleteReminder(index);\n                        }}\n                      >\n                        <trash-icon width=\"16\" height=\"16\"></trash-icon>\n                      </button-component>\n                      <span\n                        class={`chevron ${reminder.editing ? 'open' : 'closed'}`}\n                        onClick={() => {\n                          reminder.editing = !reminder.editing;\n                          this.reminders = [...this.reminders];\n                        }}\n                      >\n                        <chevron-icon width=\"24\" height=\"24\" />\n                      </span>\n                    </div>\n                  )}\n                </div>\n\n                {reminder.editing ? (\n                  <div class=\"nylas-reminder-email__body\" part=\"nre__body\">\n                    <div class=\"nylas-reminder-email__section\">\n                      <div class=\"nylas-reminder-email__row\">\n                        <label>Email recipients</label>\n                        <select-dropdown\n                          name={`recipient-${index}`}\n                          options={recipientOptions}\n                          defaultSelectedOption={recipientOptions.find(i => i.value === reminder.recipient) ?? recipientOptions[0]}\n                          withSearch={false}\n                        />\n                      </div>\n                      <div class=\"nylas-reminder-email__row\">\n                        <label>\n                          Send confirmation email when\n                          <span class=\"label-icon\">\n                            <tooltip-component>\n                              <info-icon slot=\"tooltip-icon\" />\n                              <span slot=\"tooltip-content\">The recipients will receive a reminder email at the specified time before the event.</span>\n                            </tooltip-component>\n                          </span>\n                        </label>\n                        <nylas-reminder-time\n                          name={`reminder-time-${index}`}\n                          eventReminderTimeMinutes={reminder.minutes_before_event}\n                          exportparts=\"nrt, nrt__input_dropdown: nre__reminder-input_dropdown,\n                          nrt__input_dropdown-input: nre__reminder-input_dropdown-input,\n                          nrt__input_dropdown-content: nre__reminder-input_dropdown-content,\n                          \"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                ) : (\n                  <div class=\"nylas-reminder-email__summary\" part=\"nre__summary\">\n                    <p>\n                      <span class=\"summary-icon\">\n                        <person-clipboard-icon></person-clipboard-icon>\n                      </span>\n                      {recipientOptions.find(i => i.value === reminder.recipient)?.label}\n                    </p>\n                    <p>\n                      <span class=\"summary-icon\">\n                        <clock-icon></clock-icon>\n                      </span>\n                      {this.formatReminderTime(reminder.minutes_before_event)} before the event\n                    </p>\n                  </div>\n                )}\n              </div>\n            );\n          })}\n        </div>\n\n        <button-component\n          class=\"create-reminder\"\n          variant={'basic'}\n          clickHandler={event => {\n            event.preventDefault();\n            this.addReminder();\n          }}\n        >\n          <plus-icon width=\"16\" height=\"16\"></plus-icon>\n          New reminder\n        </button-component>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-reminder-time2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { R as REMINDER_MINUTE_OPTIONS, c as REMINDER_HOUR_OPTIONS, d as REMINDER_DAY_OPTIONS } from './constants.js';
+import { R as REMINDER_MINUTE_OPTIONS, b as REMINDER_HOUR_OPTIONS, c as REMINDER_DAY_OPTIONS } from './constants.js';
 import { a as debug } from './utils.js';
 import { d as defineCustomElement$4 } from './chevron.js';
 import { d as defineCustomElement$3 } from './input-dropdown2.js';
@@ -128,7 +128,7 @@ const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTM
             { value: 60, label: 'hour' },
             { value: 60 * 24, label: 'day' },
         ];
-        return (h(Host, { key: 'd08ccb2f53caf574942db1bc7f805927ad5a2b9a' }, h("div", { key: '7a2969e3256bfc79d28686c3ade4c981b7425300', class: "nylas-reminder-time", part: "nrt" }, h("div", { key: '625bb82d848d490b65463cc2102ddb5f1cdaaad8', class: "nylas-reminder-time__wrapper" }, h("input-dropdown", { key: '5cf299dee023154ae01545f55c5c3a126ff08cc0', name: 'reminder-time', options: this.reminderTimeMinutesOptions, inputValue: this.reminderTime.toString(), exportparts: "id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content", defaultInputOption: this.reminderTimeMinutesOptions.find(i => i.value == this.reminderTime) ?? reminderTimeOptions[0] }), h("select-dropdown", { key: '95ef5eae4f8fc8b73ed8efc4601cac5e0303c858', name: 'reminder-time-unit', options: reminderTimeOptions, pluralizedLabel: this.reminderTime > 1 ? 's' : '', exportparts: "sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content", defaultSelectedOption: reminderTimeOptions.find(i => i.value == this.reminderTimeincrement) ?? reminderTimeOptions[0], withSearch: false })))));
+        return (h(Host, { key: 'd5f118391bdd7e4779f6eca15335285047fdb350' }, h("div", { key: '2dd8d3ba52d4f95480c9cf1fdaf5d0f1f7c1e523', class: "nylas-reminder-time", part: "nrt" }, h("div", { key: '3799c4b266f4078e22ad78b86225ef9abdc5fa49', class: "nylas-reminder-time__wrapper" }, h("input-dropdown", { key: '004b6336c041660e1424ac44f16e82c8a5a2ca53', name: 'reminder-time', options: this.reminderTimeMinutesOptions, inputValue: this.reminderTime.toString(), exportparts: "id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content", defaultInputOption: this.reminderTimeMinutesOptions.find(i => i.value == this.reminderTime) ?? reminderTimeOptions[0] }), h("select-dropdown", { key: '6a42c7f4633d89dd9a94d3c2f119e151613667ec', name: 'reminder-time-unit', options: reminderTimeOptions, pluralizedLabel: this.reminderTime > 1 ? 's' : '', exportparts: "sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content", defaultSelectedOption: reminderTimeOptions.find(i => i.value == this.reminderTimeincrement) ?? reminderTimeOptions[0], withSearch: false })))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }