@nylas/web-elements 2.5.13 → 2.5.16

package/dist/cdn/nylas-scheduling/nylas-scheduling.es.js

@@ -26103,7 +26103,7 @@ const oF = () => ({
   lazyLoadIntegration: VR,
   getModalIntegration: () => eF,
   getScreenshotIntegration: () => oF
-}), No = "2.5.13", lF = (t, e, n) => {
+}), No = "2.5.16", lF = (t, e, n) => {
   const i = t.get(e);
   i ? i.includes(n) || i.push(n) : t.set(e, [n]);
 }, cF = (t, e) => {

package/dist/cjs/calendar-agenda-fill-icon_39.cjs.entry.js

@@ -8127,15 +8127,6 @@ const NylasParticipantsCustomAvailability = class {
             utils.error(`Failed to parse JSON for participant ${name}:`, err);
             return;
         }
-        if (this.isInternalsAvailable) {
-            if (!this.participantFormRef.checkValidity()) {
-                this.internals.setValidity({ customError: true }, 'Please fix the overlapping time ranges.');
-                return;
-            }
-            else {
-                this.internals.setValidity({});
-            }
-        }
         if (name.startsWith('participant-availability-')) {
             const nameParts = name.split('-');
             if (nameParts.length < 4) {
@@ -8180,6 +8171,14 @@ const NylasParticipantsCustomAvailability = class {
         }
         this.selectedParticipants = { ...this.selectedParticipants };
         this.updateFormValue();
+        if (this.isInternalsAvailable && !this.validationError) {
+            if (!this.participantFormRef.checkValidity()) {
+                this.internals.setValidity({ customError: true }, 'Please fix the overlapping time ranges.');
+            }
+            else {
+                this.internals.setValidity({});
+            }
+        }
     }
     updateFormValue() {
         const participantOpenHours = {};
@@ -8240,7 +8239,7 @@ const NylasParticipantsCustomAvailability = class {
         return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '5ff7155db08b5adcfe1168adf8452f426f4fb66d' }, index$1.h("div", { key: '376210b2869e4e9c518ba6f6ab29aff086df8a86', class: "nylas-participants-custom-availability", part: "npca" }, index$1.h("div", { key: '0a7a2492da0927c3fc2eff3e5b74ee8dd873f5ce', class: "header", part: "npca__header" }, index$1.h("h3", { key: 'f38db5fea6b75ebf696c86371437149421f375b0' }, utils.instance.t('nylasParticipantCustomAvailability.headerTitle')), index$1.h("p", { key: 'b64aa2227fc6c761161baee71df7ccfa1d4a0c0b' }, utils.instance.t('nylasParticipantCustomAvailability.headerSubTitle'))), this.validationError && (index$1.h("div", { key: '902126476a17af8e5c5303bd7acd86ae95063c68', class: "validation-error", part: "npca__validation-error" }, index$1.h("span", { key: 'b3595b86576e9894e97127bad821714cc9f4a0ea' }, this.validationError))), index$1.h("div", { key: 'a03b0815c38caaa5255293efe25a2f8b5e65349a', class: "content", part: "npca__content" }, index$1.h("form", { key: '92b375ef71cd62bf4ed37b3fcee09c718e79bc3b', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
+        return (index$1.h(index$1.Host, { key: '5e62c290e9bec1901728c12d6d8cbb298b97da2b' }, index$1.h("div", { key: '3a7a5d5fda480e55df91e86b87d464b8ee142595', class: "nylas-participants-custom-availability", part: "npca" }, index$1.h("div", { key: '7ef83dde9d4ccd2ff36e948a3e27e2e30c457137', class: "header", part: "npca__header" }, index$1.h("h3", { key: '5784dbfb95cb7f66a02d995e3f4d53bd4c82b753' }, utils.instance.t('nylasParticipantCustomAvailability.headerTitle')), index$1.h("p", { key: 'e8a803be4c48b789ae499749224a6dbd3f7e1681' }, utils.instance.t('nylasParticipantCustomAvailability.headerSubTitle'))), this.validationError && (index$1.h("div", { key: 'f10b45081c034f106237e1fdeb9a92f9bfd8c6ac', class: "validation-error", part: "npca__validation-error" }, index$1.h("span", { key: '4d17c47cc99364711ba9bc10aa0e2bafe6c7ffc4' }, this.validationError))), index$1.h("div", { key: 'bab32e3f7a3f58564269087b34bb223916503a3f', class: "content", part: "npca__content" }, index$1.h("form", { key: 'f3ade0977a820e63960511ab2c4e8f8bc69b04dd', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
             const participant = this.selectedParticipants[key];
             const participantOpenHours = participant.availability?.open_hours || [];
             if (!participant || !participant.name)
@@ -8832,7 +8831,8 @@ const NylasSpecificTimeAvailabilityPicker = class {
         if (this.specificTimesAvailability[0].timezone) {
             this.timezone = this.specificTimesAvailability[0].timezone;
         }
-        const entries = this.specificTimesAvailability.map((item, index) => {
+        const sortedAvailability = [...this.specificTimesAvailability].sort((a, b) => (a.date === b.date ? a.start.localeCompare(b.start) : a.date.localeCompare(b.date)));
+        const entries = sortedAvailability.map((item, index) => {
             const isUnavailable = item.start === '00:00' && item.end === '00:00';
             return {
                 id: `specific-time-${index}`,
@@ -9045,11 +9045,11 @@ const NylasSpecificTimeAvailabilityPicker = class {
             value: key,
         }));
         const selectedTimezoneOption = timezoneOptions.find(i => i.value === this.timezone);
-        return (index$1.h(index$1.Host, { key: 'eebdadc4785b92c186738ac7b9cb2dde9fbce996' }, index$1.h("div", { key: 'a620af13300146972ef0e2ccd3d393bd0f34625e', class: "nylas-specific-time-availability-picker", part: "nstap" }, !this.hideHeader && (index$1.h("div", { key: '6b7c3c7a73e202ef6fb288e880a9eacba3759778', class: "header", part: "nstap__header" }, index$1.h("h3", { key: '01e13ae3a10ab877dc039afcdd69f48e1023d752' }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.headerTitle')), index$1.h("p", { key: '38fbec12451c9bd136a2e21b09ca9d439d9afb9d' }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.headerDescription'), index$1.h("tooltip-component", { key: '502f37259467a4cd486637e2ca1f9112768a7757' }, index$1.h("info-icon", { key: 'ebe5b465510530a9e7a054d284d0a327d869e626', slot: "tooltip-icon" }), index$1.h("span", { key: '95d0e593802256fb05a7500b0b77faa8b0c2a1be', slot: "tooltip-content" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.tooltip.desc')))))), index$1.h("div", { key: '89b15e038648d7dc07fb395cba589dd20db92ad3', class: "content", part: "nstap__content" }, index$1.h("section", { key: 'aba6b14123776917164a523f01c94e6c593e1927', class: "timezone-selector", part: "nstap__timezone-selector", "aria-labelledby": "timezone-header" }, index$1.h("h4", { key: '02f309870da12e5fc010be80a9048ac0bb173a19', id: "timezone-header", class: "sub-header" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.selectTimezone')), index$1.h("p", { key: '1c4e5e41f0981067e881f61c2b53e83cc1fe65d8', class: "timezone-description" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.timezoneDescription')), selectedTimezoneOption?.label && (index$1.h("select-dropdown", { key: '3ed2f26ce1fffb9e7eeed1facb40b72161c325d4', name: "specific-time-timezone", searchPlaceholder: utils.instance.t('search'), exportparts: "sd_dropdown: nstap__timezone-container, sd_dropdown-button: nstap__timezone-button, sd_dropdown-content: nstap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: selectedTimezoneOption, themeConfig: this.themeConfig, "aria-label": utils.instance.t('nylasSpecificTimeAvailabilityPicker.selectTimezone') }, index$1.h("span", { key: 'b4105b6d343c0e8c8bbd26f33e35b34a36e00821', slot: "select-icon", "aria-hidden": "true" }, index$1.h("globe-icon", { key: 'e72ffc953f138b7b8c81fa9601d12f82cd878a38', width: "20", height: "20" })))), this.validationErrors['timezone'] && (index$1.h("div", { key: '87c4c33e678fa738c845ed6fef29ddd617b2c424', class: "error-message timezone-error", part: "nstap__error-message", role: "alert", "aria-live": "polite" }, this.validationErrors['timezone']))), index$1.h("section", { key: 'b05db49af28232963b451e24a2ea364848e87b3e', class: "specific-times-section", part: "nstap__specific-times-section", "aria-labelledby": "specific-times-header" }, index$1.h("h4", { key: 'f0b566bd768e9bc0751a160e07b5da422bac336f', id: "specific-times-header", class: "section-header" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.specificTimesHeader')), index$1.h("p", { key: 'aff99e63618a61037ba64cedfe4facc354991ef2', class: "section-description" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.specificTimesDescription')), index$1.h("div", { key: '28c04af5aa3e9b481ba111865bc8869d7b2038c0', class: "specific-times", part: "nstap__specific-times", role: "list" }, this.specificDateEntries.length === 0 ? (index$1.h("div", { class: "empty-state", part: "nstap__empty-state" }, index$1.h("div", { class: "empty-icon", part: "nstap__empty-icon" }, index$1.h("calendar-icon", { width: "32", height: "32" })), index$1.h("h3", { class: "empty-title", part: "nstap__empty-title" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.emptyState.title')), index$1.h("p", { class: "empty-subtitle", part: "nstap__empty-subtitle" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.emptyState.subtitle')))) : (this.specificDateEntries.map((entry, index) => (index$1.h("article", { class: "specific-time-entry", part: "nstap__specific-time-entry", key: entry.id, "data-entry-id": entry.id, role: "listitem", "aria-label": `Specific time availability entry ${index + 1}` }, index$1.h("div", { class: "entry-content", part: "nstap__entry-content" }, index$1.h("div", { class: "date-input-container", part: "nstap__date-input-container" }, index$1.h("nylas-date-component", { name: `date-${entry.id}`, defaultValue: entry.date, placeholder: "yyyy-mm-dd", part: "nstap__date-input", class: "date-input", themeConfig: this.themeConfig, exportparts: "ic__date: nstap__date-field, ic__input_wrapper: nstap__date-wrapper, ic__label: nstap__date-label", "aria-label": `Date for entry ${index + 1}` })), entry.isUnavailable ? (index$1.h("div", { class: "unavailable-text", part: "nstap__unavailable-text", role: "status" }, index$1.h("span", { class: "unavailable-label" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.entireDayUnavailable')))) : (index$1.h("div", { class: "time-pickers", part: "nstap__time-pickers", role: "group", "aria-label": "Time range" }, index$1.h("nylas-time-window-picker", { id: `${entry.id}_start`, time: entry.startTime, name: `${entry.id}_start`, key: `${entry.id}_start`, language: this.selectedLanguage, hasError: !!this.validationErrors[entry.id], themeConfig: this.themeConfig, exportparts: "time-picker: nstap__time-picker-container, time-input: nstap__time-picker-input, times: nstap__time-picker-times", "aria-label": `Start time for entry ${index + 1}` }), index$1.h("span", { class: "time-separator", "aria-hidden": "true" }, "-"), index$1.h("nylas-time-window-picker", { id: `${entry.id}_end`, time: entry.endTime, name: `${entry.id}_end`, key: `${entry.id}_end`, minimumStartTime: entry.startTime, language: this.selectedLanguage, hasError: !!this.validationErrors[entry.id], themeConfig: this.themeConfig, exportparts: "time-picker: nstap__time-picker-container, time-input: nstap__time-picker-input, times: nstap__time-picker-times", "aria-label": `End time for entry ${index + 1}` }))), index$1.h("div", { class: "action-buttons", part: "nstap__action-buttons" }, index$1.h("button", { type: "button", class: { 'toggle-button': true, 'unavailable': entry.isUnavailable }, part: "nstap__toggle-button", onClick: () => this.toggleAvailability(entry.id), "aria-label": entry.isUnavailable
+        return (index$1.h(index$1.Host, { key: '4d134c2b81e17dc6238e06bb89f3d1bfa2b757bb' }, index$1.h("div", { key: 'f58418df34f1c1070ac356be9e5267df60ba30b3', class: "nylas-specific-time-availability-picker", part: "nstap" }, !this.hideHeader && (index$1.h("div", { key: '52c61a7f8efc2ee41b96c7cd30db184dac379371', class: "header", part: "nstap__header" }, index$1.h("h3", { key: 'daaa78a82642cd1389dce9e57a7f4bc53be45976' }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.headerTitle')), index$1.h("p", { key: '751c1e9596150aa5f0a38778f6236dc0defba68d' }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.headerDescription'), index$1.h("tooltip-component", { key: '813fe27ad1696a3208c02807aa643c45e4736669' }, index$1.h("info-icon", { key: '36c4f8b642df2d8ab6f271696848edf82882f21a', slot: "tooltip-icon" }), index$1.h("span", { key: '7b14bb5499644014a51346ec4f1ecd83a6495548', slot: "tooltip-content" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.tooltip.desc')))))), index$1.h("div", { key: '9c351dd740cafdba11b2d7c275432f007b5360bf', class: "content", part: "nstap__content" }, index$1.h("section", { key: '9d0eb572d83273cf6e468d5f3104360e348dd6e7', class: "timezone-selector", part: "nstap__timezone-selector", "aria-labelledby": "timezone-header" }, index$1.h("h4", { key: '299b34a534d35dfee2f2cc762d8a475b464adcaa', id: "timezone-header", class: "sub-header" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.selectTimezone')), index$1.h("p", { key: '85e8d70c2f394e183043766c323962eeaa265011', class: "timezone-description" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.timezoneDescription')), selectedTimezoneOption?.label && (index$1.h("select-dropdown", { key: '18a900c77b84a5a562156bc95b294986eae28a65', name: "specific-time-timezone", searchPlaceholder: utils.instance.t('search'), exportparts: "sd_dropdown: nstap__timezone-container, sd_dropdown-button: nstap__timezone-button, sd_dropdown-content: nstap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: selectedTimezoneOption, themeConfig: this.themeConfig, "aria-label": utils.instance.t('nylasSpecificTimeAvailabilityPicker.selectTimezone') }, index$1.h("span", { key: '718b4f834b19633e519c5a5cf10a27c0c1d0d3e0', slot: "select-icon", "aria-hidden": "true" }, index$1.h("globe-icon", { key: 'a1d2ec8303c79815c08faeb08800d45e24c1b833', width: "20", height: "20" })))), this.validationErrors['timezone'] && (index$1.h("div", { key: 'e19aed18519b769fd26013a9f991a389c01e1a7c', class: "error-message timezone-error", part: "nstap__error-message", role: "alert", "aria-live": "polite" }, this.validationErrors['timezone']))), index$1.h("section", { key: '234cf3184d76a414bcfa2c2e59d51172fe89d03c', class: "specific-times-section", part: "nstap__specific-times-section", "aria-labelledby": "specific-times-header" }, index$1.h("h4", { key: 'd5e8db5b614d13e8a40e89dd2e70b49826ab638e', id: "specific-times-header", class: "section-header" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.specificTimesHeader')), index$1.h("p", { key: '523927778ec5002da4ddba94814446722f3f801c', class: "section-description" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.specificTimesDescription')), index$1.h("div", { key: 'e2855d2f066bbee3b1e1884ddc0b3948673199c2', class: "specific-times", part: "nstap__specific-times", role: "list" }, this.specificDateEntries.length === 0 ? (index$1.h("div", { class: "empty-state", part: "nstap__empty-state" }, index$1.h("div", { class: "empty-icon", part: "nstap__empty-icon" }, index$1.h("calendar-icon", { width: "32", height: "32" })), index$1.h("h3", { class: "empty-title", part: "nstap__empty-title" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.emptyState.title')), index$1.h("p", { class: "empty-subtitle", part: "nstap__empty-subtitle" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.emptyState.subtitle')))) : (this.specificDateEntries.map((entry, index) => (index$1.h("article", { class: "specific-time-entry", part: "nstap__specific-time-entry", key: entry.id, "data-entry-id": entry.id, role: "listitem", "aria-label": `Specific time availability entry ${index + 1}` }, index$1.h("div", { class: "entry-content", part: "nstap__entry-content" }, index$1.h("div", { class: "date-input-container", part: "nstap__date-input-container" }, index$1.h("nylas-date-component", { name: `date-${entry.id}`, defaultValue: entry.date, placeholder: "yyyy-mm-dd", part: "nstap__date-input", class: "date-input", themeConfig: this.themeConfig, exportparts: "ic__date: nstap__date-field, ic__input_wrapper: nstap__date-wrapper, ic__label: nstap__date-label", "aria-label": `Date for entry ${index + 1}` })), entry.isUnavailable ? (index$1.h("div", { class: "unavailable-text", part: "nstap__unavailable-text", role: "status" }, index$1.h("span", { class: "unavailable-label" }, utils.instance.t('nylasSpecificTimeAvailabilityPicker.entireDayUnavailable')))) : (index$1.h("div", { class: "time-pickers", part: "nstap__time-pickers", role: "group", "aria-label": "Time range" }, index$1.h("nylas-time-window-picker", { id: `${entry.id}_start`, time: entry.startTime, name: `${entry.id}_start`, key: `${entry.id}_start`, language: this.selectedLanguage, hasError: !!this.validationErrors[entry.id], themeConfig: this.themeConfig, exportparts: "time-picker: nstap__time-picker-container, time-input: nstap__time-picker-input, times: nstap__time-picker-times", "aria-label": `Start time for entry ${index + 1}` }), index$1.h("span", { class: "time-separator", "aria-hidden": "true" }, "-"), index$1.h("nylas-time-window-picker", { id: `${entry.id}_end`, time: entry.endTime, name: `${entry.id}_end`, key: `${entry.id}_end`, minimumStartTime: entry.startTime, language: this.selectedLanguage, hasError: !!this.validationErrors[entry.id], themeConfig: this.themeConfig, exportparts: "time-picker: nstap__time-picker-container, time-input: nstap__time-picker-input, times: nstap__time-picker-times", "aria-label": `End time for entry ${index + 1}` }))), index$1.h("div", { class: "action-buttons", part: "nstap__action-buttons" }, index$1.h("button", { type: "button", class: { 'toggle-button': true, 'unavailable': entry.isUnavailable }, part: "nstap__toggle-button", onClick: () => this.toggleAvailability(entry.id), "aria-label": entry.isUnavailable
                 ? utils.instance.t('nylasSpecificTimeAvailabilityPicker.markAsAvailable')
                 : utils.instance.t('nylasSpecificTimeAvailabilityPicker.markAsUnavailable'), title: entry.isUnavailable
                 ? utils.instance.t('nylasSpecificTimeAvailabilityPicker.markAsAvailable')
-                : utils.instance.t('nylasSpecificTimeAvailabilityPicker.markAsUnavailable') }, index$1.h("calendar-icon", { width: "20", height: "20", "aria-hidden": "true" })), index$1.h("button", { type: "button", class: "remove-button", part: "nstap__remove-button", onClick: () => this.removeSpecificTimeAvailability(entry.id), "aria-label": `Remove specific time entry ${index + 1}`, title: "Remove" }, index$1.h("close-icon", { width: "16", height: "16", "aria-hidden": "true" })))), this.validationErrors[entry.id] && (index$1.h("div", { class: "error-message", part: "nstap__error-message", role: "alert", "aria-live": "polite" }, this.validationErrors[entry.id]))))))), index$1.h("div", { key: '6c055484d6da9537f29a92f75aafb94b3f53b2bc', class: "add-button-container", part: "nstap__add-button-container" }, index$1.h("button-component", { key: '95cd31c30c35c15c06787a12dc749bca5e8702ec', id: "add-specific-time-open-hour", onClick: () => this.addSpecificTimeAvailability(), part: "nstap__add-button", variant: "basic", "aria-label": utils.instance.t('nylasSpecificTimeAvailabilityPicker.addSpecificTimeAvailability') }, index$1.h("add-circle-icon", { key: '7922cee5395f9768aaab93a0bf3ff437ce870b48', width: "24", height: "24", "aria-hidden": "true" }), utils.instance.t('nylasSpecificTimeAvailabilityPicker.addSpecificTimeAvailability'))))))));
+                : utils.instance.t('nylasSpecificTimeAvailabilityPicker.markAsUnavailable') }, index$1.h("calendar-icon", { width: "20", height: "20", "aria-hidden": "true" })), index$1.h("button", { type: "button", class: "remove-button", part: "nstap__remove-button", onClick: () => this.removeSpecificTimeAvailability(entry.id), "aria-label": `Remove specific time entry ${index + 1}`, title: "Remove" }, index$1.h("close-icon", { width: "16", height: "16", "aria-hidden": "true" })))), this.validationErrors[entry.id] && (index$1.h("div", { class: "error-message", part: "nstap__error-message", role: "alert", "aria-live": "polite" }, this.validationErrors[entry.id]))))))), index$1.h("div", { key: '7090e167621c9277ff45fc8d2297a908bd73e03e', class: "add-button-container", part: "nstap__add-button-container" }, index$1.h("button-component", { key: '0ccb4dbfd2bcad2f41ba238686519c4376b567e2', id: "add-specific-time-open-hour", onClick: () => this.addSpecificTimeAvailability(), part: "nstap__add-button", variant: "basic", "aria-label": utils.instance.t('nylasSpecificTimeAvailabilityPicker.addSpecificTimeAvailability') }, index$1.h("add-circle-icon", { key: '823d017d2df65f36830d818a8fde664c69d12cdb', width: "24", height: "24", "aria-hidden": "true" }), utils.instance.t('nylasSpecificTimeAvailabilityPicker.addSpecificTimeAvailability'))))))));
     }
     static get formAssociated() { return true; }
     get host() { return index$1.getElement(this); }