npm - @nylas/web-elements - Versions diffs - 0.0.0-canary-20241015194719 → 0.0.0-canary-20241017202051 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

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

@@ -24,22 +24,29 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
+const reminderTimeOptions = [
+    { value: 60 * 24, label: 'day' },
+    { value: 60, label: 'hour' },
+    { value: 1, label: 'minute' },
+];
 function getInitialTimeValue(timeInMinutes) {
     if (!timeInMinutes)
         return 30;
-    if (timeInMinutes >= 60 * 24)
-        return timeInMinutes / (60 * 24);
-    if (timeInMinutes >= 90 || timeInMinutes === 60)
-        return timeInMinutes / 60;
+    for (const option of reminderTimeOptions) {
+        if (timeInMinutes % option.value === 0) {
+            return timeInMinutes / option.value;
+        }
+    }
     return timeInMinutes;
 }
 function getInitialTimeIncrement(timeInMinutes) {
     if (!timeInMinutes)
-        return 30;
-    if (timeInMinutes >= 60 * 24)
-        return 60 * 24;
-    if (timeInMinutes >= 90 || timeInMinutes === 60)
-        return 60;
+        return 1;
+    for (const option of reminderTimeOptions) {
+        if (timeInMinutes % option.value === 0) {
+            return option.value;
+        }
+    }
     return 1;
 }
 const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTMLElement {
@@ -60,15 +67,6 @@ const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTM
         debug('nylas-reminder-time', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
-    eventReminderTimeMinutesChangedHandler(newValue, oldValue) {
-        debug('nylas-reminder-time', 'eventReminderTimeMinutesChangedHandler', newValue);
-        if (newValue === oldValue) {
-            return;
-        }
-        this.reminderTime = getInitialTimeValue(newValue);
-        this.reminderTimeincrement = getInitialTimeIncrement(newValue);
-        this.reminderTimeMinutes = newValue;
-    }
     reminderTimeMinutesChangedHandler(newValue, oldValue) {
         debug('nylas-reminder-time', 'reminderTimeMinutesChangedHandler', newValue);
         if (newValue === oldValue) {
@@ -82,14 +80,17 @@ const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTM
     componentWillLoad() {
         debug('nylas-reminder-time', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
-        this.setReminderTimeMinuteOptions();
     }
     componentDidLoad() {
         debug('nylas-reminder-time', 'componentDidLoad');
+        this.setReminderTimeMinuteOptions();
     }
     disconnectedCallback() {
         debug('nylas-reminder-time', 'disconnectedCallback');
     }
+    get isInternalsAvailable() {
+        return this.internals !== undefined && typeof this.internals.setFormValue === 'function';
+    }
     setReminderTimeMinuteOptions() {
         if (this.reminderTimeincrement === 1) {
             this.reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;
@@ -113,28 +114,22 @@ const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTM
         }
         this.setReminderTimeMinuteOptions();
         this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;
-        this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
+        this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
     }
     inputOptionChangedHandler(event) {
         debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);
         const { value } = event.detail;
         this.reminderTime = value;
         this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;
-        this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
+        this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
     }
     render() {
-        const reminderTimeOptions = [
-            { value: 1, label: 'minute' },
-            { value: 60, label: 'hour' },
-            { value: 60 * 24, label: 'day' },
-        ];
-        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 })))));
+        return (h(Host, { key: 'b089eb10d76d001112d867a61889a685b8908355' }, h("div", { key: '13b8479fb822135c00ff8f97974c8269731b2a84', class: "nylas-reminder-time", part: "nrt" }, h("div", { key: '728e90c61077b1037aa285329f11a09a296b33b4', class: "nylas-reminder-time__wrapper" }, h("input-dropdown", { key: '40a22b75424d4b3b552a2dc1b60e79a8cb595032', 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: '6128bb953b883be5341ba005438ab353b0016c48', name: 'reminder-time-unit', options: [...reminderTimeOptions].sort((a, b) => a.value - b.value), 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; }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
-        "eventReminderTimeMinutes": ["eventReminderTimeMinutesChangedHandler"],
         "reminderTimeMinutes": ["reminderTimeMinutesChangedHandler"]
     }; }
     static get style() { return NylasReminderTimeStyle0; }
@@ -147,7 +142,6 @@ const NylasReminderTime = proxyCustomElement(class NylasReminderTime extends HTM
         "reminderTimeMinutesOptions": [32]
     }, [[0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"], [0, "inputOptionChanged", "inputOptionChangedHandler"]], {
         "name": ["elementNameChangedHandler"],
-        "eventReminderTimeMinutes": ["eventReminderTimeMinutesChangedHandler"],
         "reminderTimeMinutes": ["reminderTimeMinutesChangedHandler"]
     }]);
 __decorate([

package/dist/components/nylas-reminder-time2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-reminder-time2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.scss?tag=nylas-reminder-time&encapsulation=shadow","src/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-reminder-time {\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n\n /* 21px /\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\n.nylas-reminder-time__wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n padding: 12px 16px;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n width: 48px;\n }\n\n input-dropdown::part(id_dropdown-input) {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 14px 16px;\n width: 50px;\n }\n\n input-dropdown::part(id_dropdown-content) {\n width: 100%;\n min-width: unset;\n height: 160px;\n }\n\n select-dropdown {\n width: 120px;\n\n @media #{$mobile} {\n width: 100%;\n }\n }\n\n select-dropdown::part(sd_dropdown-button) {\n border: 1px solid var(--nylas-base-200);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { REMINDER_MINUTE_OPTIONS, REMINDER_HOUR_OPTIONS, REMINDER_DAY_OPTIONS } from '@/common/constants';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\nfunction getInitialTimeValue(timeInMinutes: number \| undefined) {\n if (!timeInMinutes) return 30;\n if (timeInMinutes >= 60 24) return timeInMinutes / (60 * 24);\n if (timeInMinutes >= 90 \|\| timeInMinutes === 60) return timeInMinutes / 60;\n return timeInMinutes;\n}\n\nfunction getInitialTimeIncrement(timeInMinutes: number \| undefined) {\n if (!timeInMinutes) return 30;\n if (timeInMinutes >= 60 * 24) return 60 * 24;\n if (timeInMinutes >= 90 \|\| timeInMinutes === 60) return 60;\n return 1;\n}\n\n/*\n The `nylas-reminder-time` component is a form input for the reminder time before an event.\n \n @part nrt - The event reminder container\n * @part nrt - The dropdown container for the reminder time increment\n * @part nrt__dropdown-button - The dropdown button for the reminder time increment\n * @part nrt__dropdown-content - The dropdown content for the reminder time increment\n * @part nrt__input_dropdown - The input dropdown container for the reminder time minutes\n * @part nrt__input_dropdown-input - The input for the reminder time minutes\n * @part nrt__input_dropdown-content - The dropdown content for the input reminder time minutes\n /\n@Component({\n tag: 'nylas-reminder-time',\n styleUrl: 'nylas-reminder-time.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasReminderTime {\n /\n The host element <nylas-reminder-time>\n /\n @Element() host!: HTMLElement;\n /\n The name of the reminder time. Default is 'reminder time'.\n /\n @Prop() name: string = 'reminder-time';\n /\n The event reminder time in minutes as set in the configuration.\n /\n @Prop() eventReminderTimeMinutes?: number;\n /\n The selected event reminder time state. This defaults to the reminder time from the configuration or 30 minutes.\n /\n @State() reminderTime: number = getInitialTimeValue(this.eventReminderTimeMinutes);\n /\n The reminder time in minutes. This defaults to the reminder time from the configuration or 30 minutes.\n /\n @State() reminderTimeMinutes: number = this.eventReminderTimeMinutes ?? 30;\n /\n The reminder time increment. This defaults to minute(s).\n /\n @State() reminderTimeincrement: number = getInitialTimeIncrement(this.eventReminderTimeMinutes);\n /\n The reminderTimeMinutesOptions for the dropdown.\n /\n @State() reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\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-time', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('eventReminderTimeMinutes')\n eventReminderTimeMinutesChangedHandler(newValue: number, oldValue: number) {\n debug('nylas-reminder-time', 'eventReminderTimeMinutesChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.reminderTime = getInitialTimeValue(newValue);\n this.reminderTimeincrement = getInitialTimeIncrement(newValue);\n this.reminderTimeMinutes = newValue;\n }\n\n @Watch('reminderTimeMinutes')\n reminderTimeMinutesChangedHandler(newValue: number, oldValue: number) {\n debug('nylas-reminder-time', 'reminderTimeMinutesChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n }\n\n /\n Event emitted when the event reminder time changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-reminder-time', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-reminder-time', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n this.setReminderTimeMinuteOptions();\n }\n\n componentDidLoad() {\n debug('nylas-reminder-time', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-reminder-time', 'disconnectedCallback');\n }\n\n setReminderTimeMinuteOptions() {\n if (this.reminderTimeincrement === 1) {\n this.reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;\n } else if (this.reminderTimeincrement === 60) {\n this.reminderTimeMinutesOptions = REMINDER_HOUR_OPTIONS;\n } else this.reminderTimeMinutesOptions = REMINDER_DAY_OPTIONS;\n return this.reminderTimeMinutesOptions;\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n const { value } = event.detail;\n this.reminderTimeincrement = parseInt(value);\n\n if (this.reminderTimeincrement === 1) {\n this.reminderTime = 60;\n } else {\n this.reminderTime = 1;\n }\n\n this.setReminderTimeMinuteOptions();\n this.reminderTimeMinutes = this.reminderTime this.reminderTimeincrement;\n this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);\n }\n\n @Listen('inputOptionChanged')\n inputOptionChangedHandler(event: CustomEvent<{ value: number; name: string }>) {\n debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);\n const { value } = event.detail;\n this.reminderTime = value;\n this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;\n this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);\n }\n\n @RegisterComponent<NylasReminderTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-reminder-time',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const reminderTimeOptions = [\n { value: 1, label: 'minute' },\n { value: 60, label: 'hour' },\n { value: 60 * 24, label: 'day' },\n ];\n\n return (\n <Host>\n <div class=\"nylas-reminder-time\" part=\"nrt\">\n <div class=\"nylas-reminder-time__wrapper\">\n <input-dropdown\n name={'reminder-time'}\n options={this.reminderTimeMinutesOptions}\n inputValue={this.reminderTime.toString()}\n exportparts=\"id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content\"\n defaultInputOption={this.reminderTimeMinutesOptions.find(i => i.value == this.reminderTime) ?? reminderTimeOptions[0]}\n />\n <select-dropdown\n name={'reminder-time-unit'}\n options={reminderTimeOptions}\n pluralizedLabel={this.reminderTime > 1 ? 's' : ''}\n exportparts=\"sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content\"\n defaultSelectedOption={reminderTimeOptions.find(i => i.value == this.reminderTimeincrement) ?? reminderTimeOptions[0]}\n withSearch={false}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-reminder-time2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.scss?tag=nylas-reminder-time&encapsulation=shadow","src/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-reminder-time {\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n\n /* 21px /\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\n.nylas-reminder-time__wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n padding: 12px 16px;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n width: 48px;\n }\n\n input-dropdown::part(id_dropdown-input) {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 14px 16px;\n width: 50px;\n }\n\n input-dropdown::part(id_dropdown-content) {\n width: 100%;\n min-width: unset;\n height: 160px;\n }\n\n select-dropdown {\n width: 120px;\n\n @media #{$mobile} {\n width: 100%;\n }\n }\n\n select-dropdown::part(sd_dropdown-button) {\n border: 1px solid var(--nylas-base-200);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { REMINDER_MINUTE_OPTIONS, REMINDER_HOUR_OPTIONS, REMINDER_DAY_OPTIONS } from '@/common/constants';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\nconst reminderTimeOptions = [\n { value: 60 24, label: 'day' },\n { value: 60, label: 'hour' },\n { value: 1, label: 'minute' },\n];\n\nfunction getInitialTimeValue(timeInMinutes: number \| undefined) {\n if (!timeInMinutes) return 30; // Default to 30 minutes if undefined\n\n // Loop through the reminderTimeOptions to find the appropriate division\n for (const option of reminderTimeOptions) {\n if (timeInMinutes % option.value === 0) {\n return timeInMinutes / option.value; // Return the divided value\n }\n }\n\n // If no exact division is found, return the time in minutes\n return timeInMinutes;\n}\n\nfunction getInitialTimeIncrement(timeInMinutes: number \| undefined) {\n if (!timeInMinutes) return 1; // Default to minutes if undefined\n\n // Loop through the reminderTimeOptions and check divisibility\n for (const option of reminderTimeOptions) {\n if (timeInMinutes % option.value === 0) {\n return option.value;\n }\n }\n\n // If no suitable option is found, default to minutes\n return 1;\n}\n\n/*\n The `nylas-reminder-time` component is a form input for the reminder time before an event.\n \n @part nrt - The event reminder container\n * @part nrt - The dropdown container for the reminder time increment\n * @part nrt__dropdown-button - The dropdown button for the reminder time increment\n * @part nrt__dropdown-content - The dropdown content for the reminder time increment\n * @part nrt__input_dropdown - The input dropdown container for the reminder time minutes\n * @part nrt__input_dropdown-input - The input for the reminder time minutes\n * @part nrt__input_dropdown-content - The dropdown content for the input reminder time minutes\n /\n@Component({\n tag: 'nylas-reminder-time',\n styleUrl: 'nylas-reminder-time.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasReminderTime {\n /\n The host element <nylas-reminder-time>\n /\n @Element() host!: HTMLElement;\n /\n The name of the reminder time. Default is 'reminder time'.\n /\n @Prop() name: string = 'reminder-time';\n /\n The event reminder time in minutes as set in the configuration.\n /\n @Prop() eventReminderTimeMinutes?: number;\n /\n The selected event reminder time state. This defaults to the reminder time from the configuration or 30 minutes.\n /\n @State() reminderTime: number = getInitialTimeValue(this.eventReminderTimeMinutes);\n /\n The reminder time in minutes. This defaults to the reminder time from the configuration or 30 minutes.\n /\n @State() reminderTimeMinutes: number = this.eventReminderTimeMinutes ?? 30;\n /\n The reminder time increment. This defaults to minute(s).\n /\n @State() reminderTimeincrement: number = getInitialTimeIncrement(this.eventReminderTimeMinutes);\n /\n The reminderTimeMinutesOptions for the dropdown.\n /\n @State() reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\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-time', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('reminderTimeMinutes')\n reminderTimeMinutesChangedHandler(newValue: number, oldValue: number) {\n debug('nylas-reminder-time', 'reminderTimeMinutesChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n }\n\n /\n Event emitted when the event reminder time changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-reminder-time', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-reminder-time', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-reminder-time', 'componentDidLoad');\n this.setReminderTimeMinuteOptions();\n }\n\n disconnectedCallback() {\n debug('nylas-reminder-time', 'disconnectedCallback');\n }\n\n /\n The unit tests in stencil does not support the internals API.\n * This method checks if the internals API is available.\n * @returns boolean\n /\n get isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function';\n }\n\n setReminderTimeMinuteOptions() {\n if (this.reminderTimeincrement === 1) {\n this.reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;\n } else if (this.reminderTimeincrement === 60) {\n this.reminderTimeMinutesOptions = REMINDER_HOUR_OPTIONS;\n } else this.reminderTimeMinutesOptions = REMINDER_DAY_OPTIONS;\n return this.reminderTimeMinutesOptions;\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n const { value } = event.detail;\n this.reminderTimeincrement = parseInt(value);\n\n if (this.reminderTimeincrement === 1) {\n this.reminderTime = 60;\n } else {\n this.reminderTime = 1;\n }\n\n this.setReminderTimeMinuteOptions();\n this.reminderTimeMinutes = this.reminderTime this.reminderTimeincrement;\n this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);\n }\n\n @Listen('inputOptionChanged')\n inputOptionChangedHandler(event: CustomEvent<{ value: number; name: string }>) {\n debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);\n const { value } = event.detail;\n this.reminderTime = value;\n this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;\n this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);\n }\n\n @RegisterComponent<NylasReminderTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-reminder-time',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-reminder-time\" part=\"nrt\">\n <div class=\"nylas-reminder-time__wrapper\">\n <input-dropdown\n name={'reminder-time'}\n options={this.reminderTimeMinutesOptions}\n inputValue={this.reminderTime.toString()}\n exportparts=\"id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content\"\n defaultInputOption={this.reminderTimeMinutesOptions.find(i => i.value == this.reminderTime) ?? reminderTimeOptions[0]}\n />\n <select-dropdown\n name={'reminder-time-unit'}\n options={[...reminderTimeOptions].sort((a, b) => a.value - b.value)}\n pluralizedLabel={this.reminderTime > 1 ? 's' : ''}\n exportparts=\"sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content\"\n defaultSelectedOption={reminderTimeOptions.find(i => i.value == this.reminderTimeincrement) ?? reminderTimeOptions[0]}\n withSearch={false}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-timeslot-picker2.js CHANGED Viewed

@@ -72,12 +72,12 @@ const NylasTimeslotPicker = proxyCustomElement(class NylasTimeslotPicker extends
     connectedCallback() { }
     disconnectedCallback() { }
     async componentWillLoad() {
-        const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);
-        this.times = availableTimes || [];
         debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });
     }
     async componentDidLoad() {
         debug(`[nylas-timeslot-picker] Component did load`);
+        const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);
+        this.times = availableTimes || [];
     }
     getTimeslotId(date, index) {
         return `${date.toLocaleDateString()}-${index}`;

package/dist/components/nylas-timeslot-picker2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-timeslot-picker2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n height: calc(100% - 48px); //48px is the height of the header\n @include default-css-variables;\n}\n\n.time-picker-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.timeslots {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n align-items: center;\n overflow-y: scroll;\n padding: 0.5rem 1.5rem 1.5rem;\n flex: 1;\n}\n\n.time {\n /* Frame 12 /\n box-sizing: border-box;\n\n / Auto layout /\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 4px 12px;\n gap: 0.5rem;\n font-size: 16px;\n font-weight: 500;\n font-family: inherit;\n\n width: 100%;\n height: 48px;\n\n color: var(--nylas-base-800);\n background: var(--nylas-base-0);\n border: none;\n outline: 1.5px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n flex: none;\n order: 4;\n align-self: stretch;\n flex-grow: 0;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: var(--nylas-primary);\n outline-color: var(--nylas-primary);\n }\n\n &.selected {\n font-weight: 600;\n color: var(--nylas-primary);\n outline: 2px solid var(--nylas-primary);\n border-color: transparent;\n box-shadow: 0 0 0 2px var(--nylas-primary);\n }\n}\n\n.empty {\n text-align: center;\n padding: 0 1.5rem;\n color: var(--nylas-base-600);\n font-size: min(max(12px, 2vw), 14px);\n height: 450px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@keyframes pulsate {\n 0% {\n background-color: var(--nylas-base-50);\n }\n\n 50% {\n background-color: var(--nylas-base-100);\n }\n\n 100% {\n background-color: var(--nylas-base-50);\n }\n}\n\n.loading {\n padding: 0 1.5rem;\n\n .timeslot-skeleton {\n width: 100%;\n height: 4rem;\n background-color: var(--nylas-base-50);\n margin-bottom: 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n animation: pulsate 1.5s infinite ease-in-out;\n }\n}\n\n.footer {\n width: 100%;\n padding: 14px;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-200);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/\n The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n \n @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n /\n@Component({\n tag: 'nylas-timeslot-picker',\n styleUrl: 'nylas-timeslot-picker.scss',\n shadow: true,\n})\nexport class NylasTimeslotPicker {\n /\n @standalone\n * The available timeslots.\n /\n @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n /\n @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n /\n The selected timeslot.\n /\n @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n /\n The selected timezone.\n /\n @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n /\n The selected date.\n /\n @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n /\n The selected language.\n /\n @Prop() selectedLanguage?: string;\n\n /\n This event is fired when a timeslot is selected.\n /\n @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n /\n This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n /\n @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n @State() times: AvailabilityTimeslot[] = [];\n @State() hoveredTimeslotIndex?: number;\n @State() selectedTimeslotIndex?: string;\n\n @Watch('selectedLanguage')\n selectedLanguageChanged(newLanguage: string) {\n i18next.changeLanguage(newLanguage);\n }\n\n @Watch('selectedDate')\n selectedDateChanged(newVal: Date \| null \| undefined) {\n debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n if (newVal) {\n this.selectedTimeslotIndex = '';\n if (typeof newVal !== 'undefined') {\n const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n }\n\n @Watch('availability')\n availabilityChanged(newVal: AvailabilityTimeslot[] \| undefined) {\n debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n if (typeof newVal !== 'undefined') {\n const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n }\n\n async componentDidLoad() {\n debug(`[nylas-timeslot-picker] Component did load`);\n }\n\n private getTimeslotId(date: Date, index: number) {\n return `${date.toLocaleDateString()}-${index}`;\n }\n\n private onClickSelectTime(timeslot: Timeslot, index: number) {\n debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n this.timeslotSelected.emit({\n start_time: timeslot.start_time,\n end_time: timeslot.end_time,\n emails: timeslot.emails,\n });\n }\n\n private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot \| undefined) => {\n event.preventDefault();\n debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n this.timeslotConfirmed.emit(timeslot);\n };\n\n private handleMouseEnter = (index: number) => {\n this.hoveredTimeslotIndex = index;\n };\n\n private handleMouseLeave = () => {\n this.hoveredTimeslotIndex = -1;\n };\n\n private getTimeSlotLabel(timeslot: Timeslot) {\n const timeFormat = new Intl.DateTimeFormat('en-US', {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n });\n return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n }\n\n @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-timeslot-picker',\n stateToProps: new Map([\n ['scheduler.selectedDate', 'selectedDate'],\n ['scheduler.availability', 'availability'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.isLoading', 'isLoading'],\n ]),\n eventToProps: {\n timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n nylasSchedulerConnector.scheduler.selectTime(event.detail);\n },\n timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n if (event.detail) {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n if (this.isLoading) {\n return (\n <Host>\n <div class={'loading'}>\n {new Array(6).fill(0).map((_, i) => (\n <div class={'timeslot-skeleton'} style={{ animationDelay: `${i 20}ms` }} />\n ))}\n </div>\n </Host>\n );\n }\n\n if (this.availability && this.availability.length === 0) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No dates available</span>\n </div>\n </Host>\n );\n }\n\n if ((!this.times \|\| this.times.length === 0) && !!this.selectedDate) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No time slots available for selected date</span>\n </div>\n </Host>\n );\n }\n\n if (!this.selectedDate) return <Host></Host>;\n\n return (\n <Host part=\"ntp\">\n <div class={'time-picker-wrapper'}>\n <div class={'timeslots'}>\n {this.times.map((timeslot, index) => (\n <button\n part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n aria-role=\"button\"\n class={{\n time: true,\n selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n }}\n onClick={() => this.onClickSelectTime(timeslot, index)}\n onMouseEnter={() => this.handleMouseEnter(index)}\n onMouseLeave={() => this.handleMouseLeave()}\n >\n {this.hoveredTimeslotIndex == index \|\| this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n ? this.getTimeSlotLabel(timeslot)\n : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n </button>\n ))}\n </div>\n {this.selectedTimeslot && (\n <div class={'footer'}>\n <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n </button-component>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-timeslot-picker2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n height: calc(100% - 48px); //48px is the height of the header\n @include default-css-variables;\n}\n\n.time-picker-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.timeslots {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n align-items: center;\n overflow-y: scroll;\n padding: 0.5rem 1.5rem 1.5rem;\n flex: 1;\n}\n\n.time {\n /* Frame 12 /\n box-sizing: border-box;\n\n / Auto layout /\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 4px 12px;\n gap: 0.5rem;\n font-size: 16px;\n font-weight: 500;\n font-family: inherit;\n\n width: 100%;\n height: 48px;\n\n color: var(--nylas-base-800);\n background: var(--nylas-base-0);\n border: none;\n outline: 1.5px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n flex: none;\n order: 4;\n align-self: stretch;\n flex-grow: 0;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: var(--nylas-primary);\n outline-color: var(--nylas-primary);\n }\n\n &.selected {\n font-weight: 600;\n color: var(--nylas-primary);\n outline: 2px solid var(--nylas-primary);\n border-color: transparent;\n box-shadow: 0 0 0 2px var(--nylas-primary);\n }\n}\n\n.empty {\n text-align: center;\n padding: 0 1.5rem;\n color: var(--nylas-base-600);\n font-size: min(max(12px, 2vw), 14px);\n height: 450px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@keyframes pulsate {\n 0% {\n background-color: var(--nylas-base-50);\n }\n\n 50% {\n background-color: var(--nylas-base-100);\n }\n\n 100% {\n background-color: var(--nylas-base-50);\n }\n}\n\n.loading {\n padding: 0 1.5rem;\n\n .timeslot-skeleton {\n width: 100%;\n height: 4rem;\n background-color: var(--nylas-base-50);\n margin-bottom: 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n animation: pulsate 1.5s infinite ease-in-out;\n }\n}\n\n.footer {\n width: 100%;\n padding: 14px;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-200);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/\n The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n \n @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n /\n@Component({\n tag: 'nylas-timeslot-picker',\n styleUrl: 'nylas-timeslot-picker.scss',\n shadow: true,\n})\nexport class NylasTimeslotPicker {\n /\n @standalone\n * The available timeslots.\n /\n @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n /\n @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n /\n The selected timeslot.\n /\n @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n /\n The selected timezone.\n /\n @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n /\n The selected date.\n /\n @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n /\n The selected language.\n /\n @Prop() selectedLanguage?: string;\n\n /\n This event is fired when a timeslot is selected.\n /\n @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n /\n This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n /\n @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n @State() times: AvailabilityTimeslot[] = [];\n @State() hoveredTimeslotIndex?: number;\n @State() selectedTimeslotIndex?: string;\n\n @Watch('selectedLanguage')\n selectedLanguageChanged(newLanguage: string) {\n i18next.changeLanguage(newLanguage);\n }\n\n @Watch('selectedDate')\n selectedDateChanged(newVal: Date \| null \| undefined) {\n debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n if (newVal) {\n this.selectedTimeslotIndex = '';\n if (typeof newVal !== 'undefined') {\n const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n }\n\n @Watch('availability')\n availabilityChanged(newVal: AvailabilityTimeslot[] \| undefined) {\n debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n if (typeof newVal !== 'undefined') {\n const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n }\n\n async componentDidLoad() {\n debug(`[nylas-timeslot-picker] Component did load`);\n const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n\n private getTimeslotId(date: Date, index: number) {\n return `${date.toLocaleDateString()}-${index}`;\n }\n\n private onClickSelectTime(timeslot: Timeslot, index: number) {\n debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n this.timeslotSelected.emit({\n start_time: timeslot.start_time,\n end_time: timeslot.end_time,\n emails: timeslot.emails,\n });\n }\n\n private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot \| undefined) => {\n event.preventDefault();\n debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n this.timeslotConfirmed.emit(timeslot);\n };\n\n private handleMouseEnter = (index: number) => {\n this.hoveredTimeslotIndex = index;\n };\n\n private handleMouseLeave = () => {\n this.hoveredTimeslotIndex = -1;\n };\n\n private getTimeSlotLabel(timeslot: Timeslot) {\n const timeFormat = new Intl.DateTimeFormat('en-US', {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n });\n return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n }\n\n @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-timeslot-picker',\n stateToProps: new Map([\n ['scheduler.selectedDate', 'selectedDate'],\n ['scheduler.availability', 'availability'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.isLoading', 'isLoading'],\n ]),\n eventToProps: {\n timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n nylasSchedulerConnector.scheduler.selectTime(event.detail);\n },\n timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n if (event.detail) {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n if (this.isLoading) {\n return (\n <Host>\n <div class={'loading'}>\n {new Array(6).fill(0).map((_, i) => (\n <div class={'timeslot-skeleton'} style={{ animationDelay: `${i 20}ms` }} />\n ))}\n </div>\n </Host>\n );\n }\n\n if (this.availability && this.availability.length === 0) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No dates available</span>\n </div>\n </Host>\n );\n }\n\n if ((!this.times \|\| this.times.length === 0) && !!this.selectedDate) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No time slots available for selected date</span>\n </div>\n </Host>\n );\n }\n\n if (!this.selectedDate) return <Host></Host>;\n\n return (\n <Host part=\"ntp\">\n <div class={'time-picker-wrapper'}>\n <div class={'timeslots'}>\n {this.times.map((timeslot, index) => (\n <button\n part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n aria-role=\"button\"\n class={{\n time: true,\n selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n }}\n onClick={() => this.onClickSelectTime(timeslot, index)}\n onMouseEnter={() => this.handleMouseEnter(index)}\n onMouseLeave={() => this.handleMouseLeave()}\n >\n {this.hoveredTimeslotIndex == index \|\| this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n ? this.getTimeSlotLabel(timeslot)\n : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n </button>\n ))}\n </div>\n {this.selectedTimeslot && (\n <div class={'footer'}>\n <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n </button-component>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/calendar-agenda-fill-icon_54.entry.js CHANGED Viewed

@@ -203,6 +203,7 @@ var __metadata$w = (undefined && undefined.__metadata) || function (k, v) {
 const InputImageUrl = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.nylasFormInputImageUrlInvalid = createEvent(this, "nylasFormInputImageUrlInvalid", 7);
         this.valueChanged = createEvent(this, "valueChanged", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
@@ -271,12 +272,15 @@ const InputImageUrl = class {
             this.valueChanged.emit({ value: this.currentImageUrl, name: this.name });
         })
             .catch(() => {
-            this.internals.setValidity({ customError: true }, 'Invalid image URL.');
             this.errorMessage = 'Invalid image URL.';
+            this.nylasFormInputImageUrlInvalid.emit({ value: 'Invalid image URL.', name: this.name });
+            if (typeof this.internals.setValidity === 'function') {
+                this.internals.setValidity({ customError: true }, 'Invalid image URL.');
+            }
         });
     }
     render() {
-        return (h(Host, { key: '37ae40e1bc1eadb1d66f68b26e66b9b0046752b0' }, h("div", { key: 'fe6024927698ba0d41e4875d0f190cf610afe7d7', class: "logo-container" }, h("div", { key: 'b61b97fb4a518e68773304eaa55833104bc246c8', class: "input-container" }, h("input-component", { key: 'f918ef5a13ec93e71635ca205534894c97243fe4', name: this.name, id: this.name, type: "text", required: false, exportparts: "ic_input: iiu__logo-input-textfield", defaultValue: this.imageUrl ?? '' }), this.errorMessage && h("span", { class: "error-message" }, this.errorMessage)), this.currentImageUrl && !this.errorMessage && (h("div", { class: "logo" }, h("img", { src: this.currentImageUrl, alt: "Logo" }))))));
+        return (h(Host, { key: '27db94b782ae96518852a8486821a7f6544492a2' }, h("div", { key: '3923ce12503dd454e716e002b693b8e5f7e7e991', class: "logo-container" }, h("div", { key: '004c0dfb0e5ec721e356b4915fbdd75f84a67301', class: "input-container" }, h("input-component", { key: 'f06812996be4fd6384fffc2c095e62ba7067881d', name: this.name, id: this.name, type: "text", required: false, exportparts: "ic_input: iiu__logo-input-textfield", defaultValue: this.imageUrl ?? '' }), this.errorMessage && h("span", { class: "error-message" }, this.errorMessage)), this.currentImageUrl && !this.errorMessage && (h("div", { class: "logo" }, h("img", { src: this.currentImageUrl, alt: "Logo" }))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -417,20 +421,23 @@ const NylasAdditionalParticipants = class {
     disconnectedCallback() {
         debug('nylas-additional-participants', 'disconnectedCallback');
     }
+    get isInternalsAvailable() {
+        return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';
+    }
     onInputOptionChanged(event) {
         debug('nylas-additional-participants', 'onInputOptionChanged');
-        const EMAIL_REGEX = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+        const EMAIL_REGEX = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
         const index = event.detail.name;
         const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);
         if (!participant && this.isRoundRobinConfig) {
-            this.internals.setValidity({ customError: true }, 'For round robin configuration, participant should be selected from the dropdown.');
+            this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'For round robin configuration, participant should be selected from the dropdown.');
             this.participantErrors[index] = 'For round robin page, participant should be selected from the dropdown.';
             this.participants[index].is_valid = false;
             this.participants = [...this.participants];
             return;
         }
         else if (!participant && !EMAIL_REGEX.test(event.detail.value)) {
-            this.internals.setValidity({ customError: true }, 'Please enter a valid email address');
+            this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please enter a valid email address');
             this.participantErrors[index] = 'Please enter a valid email address';
             this.participants[index].is_valid = false;
             this.participants = [...this.participants];
@@ -439,7 +446,7 @@ const NylasAdditionalParticipants = class {
         else {
             this.participantErrors[index] = '';
             this.participants[index].is_valid = true;
-            this.internals.setValidity({});
+            this.isInternalsAvailable && this.internals.setValidity({});
         }
         this.participants[index].email = event.detail.value;
         this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;
@@ -478,24 +485,17 @@ const NylasAdditionalParticipants = class {
         this.participants = this.participants.filter((_, i) => i !== index);
         this.updateFormValue();
     }
-    validate(email, index) {
-        debug('nylas-additional-participants', 'validate');
-        const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        const valid = regex.test(String(email).toLowerCase());
-        this.participants[index].is_valid = valid;
-        this.updateFormValue();
-    }
     updateFormValue() {
         debug('nylas-additional-participants', 'updateFormValue');
         const participants = this.isRoundRobinConfig ? (this.includeOrganizerAsParticipant ? this.participants : this.participants.filter(p => !p.is_organizer)) : this.participants;
         if (participants.length === 0) {
-            this.internals.setValidity({ customError: true }, 'Please add at least one participant');
+            this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please add at least one participant');
             this.error = 'Please add at least one participant';
         }
         else {
-            this.internals.setValidity({});
+            this.isInternalsAvailable && this.internals.setValidity({});
             this.error = '';
-            this.internals.setFormValue(JSON.stringify(participants), this.name);
+            this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participants), this.name);
             this.valueChanged.emit({ value: JSON.stringify(participants), name: this.name });
         }
     }
@@ -506,7 +506,7 @@ const NylasAdditionalParticipants = class {
         });
     }
     render() {
-        return (h(Host, { key: 'a090033dc7d7915ca65100fd1803d2430052b18a', part: "nap" }, h("nylas-form-card", { key: '19203e4c99690200b679943672f89e9d20bc62b5' }, h("h3", { key: '33fbde2341b42cb0529b95a06f80d6dea08ffc52', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Participants"), h("p", { key: 'a8c73ed714ab74309f1a417215b9e56da99a2731', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add people in your team or organization to join the event."), h("div", { key: 'bce67b77333c2db513463acaa952b51d933d43d9', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '35e0bf36996f3daec1d41e1d8c74c636fb72307f' }, this.participants.map((participant, index) => {
+        return (h(Host, { key: '16a28d7d8ee91b685a22472d8a90721a5074d798', part: "nap" }, h("nylas-form-card", { key: '9fde59eadfcdf05c3b4add30a5c35f9b21d00c30' }, h("h3", { key: '82e3c3ad537ef4c60d19695f11e481bac2ed31ae', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Participants"), h("p", { key: '4df3d661d2c6801ba8e88d82853ae562ed3be8e8', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add people in your team or organization to join the event."), h("div", { key: '3ccb34354c025b52760433683812acf37b480e77', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '007cf8396921637cf230cc26d73de147169cd250' }, this.participants.map((participant, index) => {
             return (h("div", { class: 'nylas-additional-participants__input_group', part: "nap__input_group" }, !participant.is_organizer && h("label", null, `Participant ${index}`), h("div", { part: "nap__input_wrapper", class: {
                     'nylas-additional-participants__input_wrapper': true,
                     'nylas-additional-participants__input_wrapper_organizer': participant?.is_organizer === true,
@@ -516,7 +516,7 @@ const NylasAdditionalParticipants = class {
                     this.includeOrganizerAsParticipant = !this.includeOrganizerAsParticipant;
                     this.updateFormValue();
                 }, checked: this.includeOrganizerAsParticipant }), h("label", { htmlFor: `organizer_participant`, "aria-label": "Include as participant" }, "Participant", h("tooltip-component", { id: "organizer_participant_tooltip" }, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, h("strong", null, "Include Organizer:"), " The organizer (you) will be included in the round-robin rotation. ", h("br", null), h("strong", null, "Exclude Organizer:"), " The organizer (you) will not be included in the round-robin rotation."))))))) : (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: "nap__remove-participant" }, h("close-icon", null))))), !participant.is_valid && (h("p", { class: "nylas-additional-participants__error", part: "nap__error" }, this.participantErrors[index]))));
-        }), h("p", { key: '51f51ef0614cd93592fae8a32f501d0249b12c5a', class: "nylas-additional-participants__error", part: "nap__error" }, this.error)), h("button", { key: '93605c6ce8fb6b77451ea0f8c06fb23134727c3f', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: '8e6ac25f43f06ad3ee24047a1a7469b13c5a56c7' }), " ", h("span", { key: '511068fb28c498edba86706bef49dcad6633d249' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
+        }), h("p", { key: 'f1dd954c137093fa9e474f3886e4b5320aeb5e2e', class: "nylas-additional-participants__error", part: "nap__error" }, this.error)), h("button", { key: '859585010fc9fce314b856f5e7e07ac8b8c47b88', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: 'aec7eb5de30e66bca29b73962f356109471c2e9e' }), " ", h("span", { key: 'f07ecfaa4db46f7954d734314c46f2d773158730' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -5378,9 +5378,9 @@ const NylasConfirmationEmail = class {
         }
         this.selectedConfiguration = undefined;
         this.confirmationEmailTemplate = {};
-        this.isOpen = false;
         this.participants = [];
         this.name = 'confirmation-email-template';
+        this.isOpen = false;
         this.confirmationEmail = undefined;
         this.isConfirmationEmailOpen = this.isOpen;
         this.participantsState = this.participants;
@@ -5433,8 +5433,17 @@ const NylasConfirmationEmail = class {
         const { value, name } = event.detail;
         if (name === 'confirmation-email-logo') {
             this.confirmationEmail = { ...this.confirmationEmail, logo: value };
-            this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);
             this.valueChanged.emit({ value: JSON.stringify(this.confirmationEmail), name: this.name });
+            if (typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function') {
+                this.internals.setFormValue(JSON.stringify(this.confirmationEmail), this.name);
+                this.internals.setValidity({});
+            }
+        }
+    }
+    async nylasFormInputImageUrlInvalidHandler(event) {
+        const { value, name } = event.detail;
+        if (name === 'confirmation-email-logo' && typeof this.internals.setValidity === 'function') {
+            this.internals.setValidity({ customError: true }, value || 'Invalid image URL.');
         }
     }
     updateConfirmationFormValue() {
@@ -5454,7 +5463,7 @@ const NylasConfirmationEmail = class {
     render() {
         const organizer = this.participantsState.find(p => p.is_organizer);
         const organizerName = organizer?.name || organizer?.email;
-        return (h(Host, { key: '0cd4c1886c65ead0e525ea96fe26a1316c61db7f' }, h("div", { key: '1901775f8a1364fe16485eeaf27d44862e74a642', class: "nylas-confirmation-email", part: "nce" }, h("div", { key: '241cf1a885d4d97d53c158e5691e350aa14b549f', class: "header", part: "nce__header" }, h("div", { key: 'e37c36a4d8f1f82669f3a397969202d3a2612b0e' }, h("h3", { key: 'ae34b848907720867cb014000e5b7367bcabedb3' }, this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`), h("p", { key: '97d7c78a88b20be8c5b0a27485f917628f1c6edc' }, "Booking confirmation email")), this.isConfirmationEmailOpen ? (h("div", { class: "confirmation-email-toggle", part: "nce__confirmation-email-toggle--container" }, h("span", { class: `chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" })))) : (h("button-component", { variant: 'basic', clickHandler: event => {
+        return (h(Host, { key: 'bc4803b94f914d083bd33cf4cecd0cac70b0658c' }, h("div", { key: '6445d38b903bffd19b4db004e850f6488ed4c27f', class: "nylas-confirmation-email", part: "nce" }, h("div", { key: '7ce1ccd72ef83717aec42fe0b533902e3a254796', class: "header", part: "nce__header" }, h("div", { key: 'cbceb816c30deebc4e053a7abd1da1c82c171ebe' }, h("h3", { key: '36f5b00d5a98d325341ff06b2bb3ba3cf951e94f' }, this.confirmationEmail?.booking_confirmed?.title ?? `Booking confirmed with ${organizerName ? ` ${organizerName}` : ''}`), h("p", { key: '6f72022d71e5f4e3c03d0f6d07d7f0f5bc0f9686' }, "Booking confirmation email")), this.isConfirmationEmailOpen ? (h("div", { class: "confirmation-email-toggle", part: "nce__confirmation-email-toggle--container" }, h("span", { class: `chevron ${this.isConfirmationEmailOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" })))) : (h("button-component", { variant: 'basic', clickHandler: event => {
                 event.preventDefault();
                 this.toggleConfirmationEmail();
             } }, h("edit-icon", { width: "16", height: "16" }), "Edit"))), this.isConfirmationEmailOpen ? (h("div", { class: "nylas-confirmation-email__body", part: "nce__body" }, h("div", { class: "nylas-confirmation-email__section" }, h("div", { class: "nylas-confirmation-email__row" }, h("label", null, "Send confirmation email", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "You and your guests will receive a confirmation email immediately upon booking.")))), h("span", { class: "selected-value" }, "Immediately upon booking")), h("div", { class: "nylas-confirmation-email__row" }, h("div", { class: "subsection" }, h("div", { class: "input-container" }, h("label", null, "Company logo URL", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "This logo appears in the booking confirmation email. The URL must be publicly accessible. The image will be scaled down to a max size of 200px x 100px.")))), this.confirmationEmail && (h("input-image-url", { name: "confirmation-email-logo", exportparts: "iiu__logo-input-textfield: nce__input-image-url", imageUrl: this.confirmationEmail?.logo ?? '' }))))), h("div", { class: "nylas-confirmation-email__row full-width-col" }, h("div", { class: "subsection" }, h("h3", null, "Email message"), h("div", { class: "input-container" }, h("label", { htmlFor: "title" }, "Custom email title", h("span", { class: "label-icon" }, h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "An email title is a headline within the body of the email. This doesn't change the subject line.")))), h("input-component", { name: "confirmation-email-title", maxLength: 60, placeholder: `Booking confirmed ${organizerName ? `with ${organizerName}` : ''}`, defaultValue: this.confirmationEmail?.booking_confirmed?.title ?? '' })), h("div", { class: "input-container" }, h("textarea-component", { label: "Additional info", name: "confirmation-email-body", id: "confirmation-email-body", placeholder: "Default body", tooltip: "Scheduler adds the content of the box to the email body.", maxLength: 500, defaultValue: this.confirmationEmail?.booking_confirmed?.body ?? '' }))))))) : (h("div", { class: "nylas-confirmation-email__summary", part: "nce__summary" }, h("p", null, h("span", { class: "summary-icon" }, h("person-clipboard-icon", null)), "All host & guests"), h("p", null, h("span", { class: "summary-icon" }, h("clock-icon", null)), "Immediately on booking"))))));
@@ -6188,7 +6197,6 @@ const NylasEventDuration = class {
     componentWillLoad() {
         debug('nylas-event-duration', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
-        this.setDurationMintueOptions();
     }
     componentDidLoad() {
         debug('nylas-event-duration', 'componentDidLoad');
@@ -6198,7 +6206,10 @@ const NylasEventDuration = class {
         this.duration = this.duration ? this.duration : this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 30;
         this.durationMinutes = this.durationMinutes ? this.durationMinutes : this.duration ? this.duration : 30;
         this.durationIncrement = this.durationIncrement ? this.durationIncrement : this.duration >= 60 ? 60 : 1;
-        this.internals.setFormValue(this.durationMinutes.toString(), 'duration');
+        this.setDurationMintueOptions();
+        if (typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(this.durationMinutes.toString(), 'duration');
+        }
     }
     disconnectedCallback() {
         debug('nylas-event-duration', 'disconnectedCallback');
@@ -6248,7 +6259,7 @@ const NylasEventDuration = class {
             { value: 1, label: 'minute' },
             { value: 60, label: 'hour' },
         ];
-        return (h(Host, { key: 'e63530398b7b2231436947da8c9e63c3c7bd696a' }, h("div", { key: '9ccca25a4322edaedafa53a2bd8ae2baf48b4f1e', class: "nylas-event-duration", part: "ned" }, h("label", { key: 'cd5562d2516c1f37eeb0b3e074493c671628ef4b', htmlFor: "duration" }, "Event duration", h("span", { key: 'ef36340fb220f380a9913ad5025e6600ce6e8f17', class: "required" }, "*")), h("div", { key: 'eddeda40d89ac770f20226605f3fedce00afe060', class: "nylas-event-duration__wrapper" }, h("input-dropdown", { key: 'b087fff0f15cfcaf5c89c0566941aa45c8e89d54', name: 'event-duration', options: this.durationMinutesOptions, inputValue: this.duration.toString(), exportparts: "id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content", defaultInputOption: this.durationMinutesOptions.find(i => i.value == this.duration) }), this.durationIncrement && (h("select-dropdown", { name: 'event-duration', options: durationOptions, pluralizedLabel: this.duration > 1 ? 's' : '', exportparts: "sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content", defaultSelectedOption: durationOptions.find(i => i.value == this.durationIncrement), withSearch: false }))))));
+        return (h(Host, { key: 'f6b60528b9c3f2978ac12beae9bf049a9b90fec5' }, h("div", { key: 'f7c778d981fa1d33ceed820d500e6820a4f1223c', class: "nylas-event-duration", part: "ned" }, h("label", { key: 'f461dcfeda616f50820d6cdacb5dfded22ec7aff', htmlFor: "duration" }, "Event duration", h("span", { key: '086d2458ad14f00f718fb9106c45d63576c9f734', class: "required" }, "*")), h("div", { key: 'cf27800dec77fbe74c9428de92fa042a419ddb25', class: "nylas-event-duration__wrapper" }, h("input-dropdown", { key: '06ed64927a69ca96bb9f9cc5cfede6d55c310598', name: 'event-duration', options: this.durationMinutesOptions, inputValue: this.duration.toString(), exportparts: "id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content", defaultInputOption: this.durationMinutesOptions.find(i => i.value == this.duration) }), this.durationIncrement && (h("select-dropdown", { name: 'event-duration', options: durationOptions, pluralizedLabel: this.duration > 1 ? 's' : '', exportparts: "sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content", defaultSelectedOption: durationOptions.find(i => i.value == this.durationIncrement), withSearch: false }))))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -6313,7 +6324,7 @@ const NylasEventInfo = class {
         debug('nylas-event-info', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: 'fb4a8dd875696bc6a4e951f2649a2ab650558489' }, h("nylas-form-card", { key: '193b25acb1374842946ff938755fe8fed7a6d4b9', exportparts: "nfc__header: nei__header" }, h("h1", { key: 'c405c5de0b2eafa15136d10f10de13a158595298', slot: "header-title", class: "nylas-event-info__title", part: "nei__title" }, "Event information"), h("div", { key: 'a49993db49876dfdebd6dbe412d759ce1d38028e', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: 'dc4595988a0b6824f328896c1ea507b96e61e4a8', name: "inputs" })))));
+        return (h(Host, { key: 'be80a4e687ce223a8e52bbabc2e8acadcb194b11' }, h("nylas-form-card", { key: 'c96b77795ec2516889acf0f78c5eb723b26dd89c', exportparts: "nfc__header: nei__header" }, h("h1", { key: '890113187adcd6be1ab1d1beb489fe3a80124617', slot: "header-title", class: "nylas-event-info__title", part: "nei__title" }, "Event information"), h("div", { key: '44eaaae3833654530706dc93077b43a7597acc2c', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: '7af737a67cb007c0ede7db5aa075828311d98da3', name: "inputs" })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -6372,7 +6383,7 @@ const NylasEventLimits = class {
         debug('nylas-event-limits', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '8715c9aeba26e6f4c151b0ab58333cc13d3500d3' }, h("nylas-form-card", { key: '2e2bf90762d35ac9fc4a995808b9aa3e4481d6c0', exportparts: "nfc__header: nel__header" }, h("h1", { key: 'b3689912282e3215d862ca06c75fae95b67e501f', slot: "header-title", class: "nylas-event-limits__title" }, "Event limits"), h("div", { key: 'bd5513f8c0cc573f14afeadfafe591b64b904920', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: '86ebfd856f0c93d3ad98d800d4ce9e1a8daf2516', name: "inputs" })))));
+        return (h(Host, { key: '6a28113e3b403869e77cc3a2c9c3a1bea217dc52' }, h("nylas-form-card", { key: 'cf9004d044222d796ae59df58737ad9719a20576', exportparts: "nfc__header: nel__header" }, h("h1", { key: 'ffeeb7a5741c9f07fb4f9bd84016b1707e2b55b7', slot: "header-title", class: "nylas-event-limits__title" }, "Event limits"), h("div", { key: '7b51592d95736f860ec805950275a18e9d914c32', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: '53e9098d736eedf5b22e1b8ae712ec22c8ca865e', name: "inputs" })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -8439,22 +8450,29 @@ var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
+const reminderTimeOptions = [
+    { value: 60 * 24, label: 'day' },
+    { value: 60, label: 'hour' },
+    { value: 1, label: 'minute' },
+];
 function getInitialTimeValue(timeInMinutes) {
     if (!timeInMinutes)
         return 30;
-    if (timeInMinutes >= 60 * 24)
-        return timeInMinutes / (60 * 24);
-    if (timeInMinutes >= 90 || timeInMinutes === 60)
-        return timeInMinutes / 60;
+    for (const option of reminderTimeOptions) {
+        if (timeInMinutes % option.value === 0) {
+            return timeInMinutes / option.value;
+        }
+    }
     return timeInMinutes;
 }
 function getInitialTimeIncrement(timeInMinutes) {
     if (!timeInMinutes)
-        return 30;
-    if (timeInMinutes >= 60 * 24)
-        return 60 * 24;
-    if (timeInMinutes >= 90 || timeInMinutes === 60)
-        return 60;
+        return 1;
+    for (const option of reminderTimeOptions) {
+        if (timeInMinutes % option.value === 0) {
+            return option.value;
+        }
+    }
     return 1;
 }
 const NylasReminderTime = class {
@@ -8479,15 +8497,6 @@ const NylasReminderTime = class {
         debug('nylas-reminder-time', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
-    eventReminderTimeMinutesChangedHandler(newValue, oldValue) {
-        debug('nylas-reminder-time', 'eventReminderTimeMinutesChangedHandler', newValue);
-        if (newValue === oldValue) {
-            return;
-        }
-        this.reminderTime = getInitialTimeValue(newValue);
-        this.reminderTimeincrement = getInitialTimeIncrement(newValue);
-        this.reminderTimeMinutes = newValue;
-    }
     reminderTimeMinutesChangedHandler(newValue, oldValue) {
         debug('nylas-reminder-time', 'reminderTimeMinutesChangedHandler', newValue);
         if (newValue === oldValue) {
@@ -8501,14 +8510,17 @@ const NylasReminderTime = class {
     componentWillLoad() {
         debug('nylas-reminder-time', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
-        this.setReminderTimeMinuteOptions();
     }
     componentDidLoad() {
         debug('nylas-reminder-time', 'componentDidLoad');
+        this.setReminderTimeMinuteOptions();
     }
     disconnectedCallback() {
         debug('nylas-reminder-time', 'disconnectedCallback');
     }
+    get isInternalsAvailable() {
+        return this.internals !== undefined && typeof this.internals.setFormValue === 'function';
+    }
     setReminderTimeMinuteOptions() {
         if (this.reminderTimeincrement === 1) {
             this.reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;
@@ -8532,28 +8544,22 @@ const NylasReminderTime = class {
         }
         this.setReminderTimeMinuteOptions();
         this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;
-        this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
+        this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
     }
     inputOptionChangedHandler(event) {
         debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);
         const { value } = event.detail;
         this.reminderTime = value;
         this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;
-        this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
+        this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
     }
     render() {
-        const reminderTimeOptions = [
-            { value: 1, label: 'minute' },
-            { value: 60, label: 'hour' },
-            { value: 60 * 24, label: 'day' },
-        ];
-        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 })))));
+        return (h(Host, { key: 'b089eb10d76d001112d867a61889a685b8908355' }, h("div", { key: '13b8479fb822135c00ff8f97974c8269731b2a84', class: "nylas-reminder-time", part: "nrt" }, h("div", { key: '728e90c61077b1037aa285329f11a09a296b33b4', class: "nylas-reminder-time__wrapper" }, h("input-dropdown", { key: '40a22b75424d4b3b552a2dc1b60e79a8cb595032', 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: '6128bb953b883be5341ba005438ab353b0016c48', name: 'reminder-time-unit', options: [...reminderTimeOptions].sort((a, b) => a.value - b.value), 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 getElement(this); }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
-        "eventReminderTimeMinutes": ["eventReminderTimeMinutesChangedHandler"],
         "reminderTimeMinutes": ["reminderTimeMinutesChangedHandler"]
     }; }
 };