@nylas/web-elements 2.0.6 → 2.1.0

package/dist/collection/components/scheduler-editor/{nylas-specific-date-availability-picker/nylas-specific-date-availability-picker.css → nylas-specific-time-availability-picker/nylas-specific-time-availability-picker.css}

@@ -3,61 +3,61 @@
   width: 100%;
 }
 
-.nylas-specific-date-availability-picker {
+.nylas-specific-time-availability-picker {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   border-top: 1px solid var(--nylas-base-200);
 }
-.nylas-specific-date-availability-picker .content {
+.nylas-specific-time-availability-picker .content {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   padding: 16px;
 }
-.nylas-specific-date-availability-picker .header {
+.nylas-specific-time-availability-picker .header {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.nylas-specific-date-availability-picker .header .header-description {
+.nylas-specific-time-availability-picker .header .header-description {
   margin: 0;
   font-size: 0.875rem;
   color: var(--nylas-base-600);
   line-height: 1.5;
 }
-.nylas-specific-date-availability-picker .specific-dates {
+.nylas-specific-time-availability-picker .specific-times {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
-.nylas-specific-date-availability-picker .empty-state {
+.nylas-specific-time-availability-picker .empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 2rem 1rem;
   text-align: center;
 }
-.nylas-specific-date-availability-picker .empty-state .empty-icon {
+.nylas-specific-time-availability-picker .empty-state .empty-icon {
   margin-bottom: 1.5rem;
   opacity: 0.4;
   color: var(--nylas-base-400);
 }
-.nylas-specific-date-availability-picker .empty-state .empty-title {
+.nylas-specific-time-availability-picker .empty-state .empty-title {
   margin: 0 0 0.5rem 0;
   font-size: 1.125rem;
   font-weight: 600;
   color: var(--nylas-base-700);
   line-height: 1.5;
 }
-.nylas-specific-date-availability-picker .empty-state .empty-subtitle {
+.nylas-specific-time-availability-picker .empty-state .empty-subtitle {
   margin: 0;
   font-size: 0.875rem;
   color: var(--nylas-base-500);
   line-height: 1.5;
   max-width: 300px;
 }
-.nylas-specific-date-availability-picker .specific-date-entry {
+.nylas-specific-time-availability-picker .specific-time-entry {
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -66,37 +66,37 @@
   border-radius: var(--nylas-border-radius);
   background: var(--nylas-base-0);
 }
-.nylas-specific-date-availability-picker .specific-date-entry .entry-content {
+.nylas-specific-time-availability-picker .specific-time-entry .entry-content {
   display: grid;
   grid-template-columns: 160px auto 30px 30px;
   gap: 12px;
 }
 @media (max-width: 768px) {
-  .nylas-specific-date-availability-picker .specific-date-entry .entry-content {
+  .nylas-specific-time-availability-picker .specific-time-entry .entry-content {
     grid-template-areas: "date calendar_toggle remove" "time_or_unavailable time_or_unavailable time_or_unavailable";
     grid-template-columns: 1fr auto auto;
     grid-template-rows: 1fr 1fr;
   }
 }
-.nylas-specific-date-availability-picker .specific-date-entry .date-input-container {
+.nylas-specific-time-availability-picker .specific-time-entry .date-input-container {
   flex: 0 0 auto;
   width: 160px;
 }
 @media (max-width: 768px) {
-  .nylas-specific-date-availability-picker .specific-date-entry .date-input-container {
+  .nylas-specific-time-availability-picker .specific-time-entry .date-input-container {
     grid-area: date;
   }
 }
-.nylas-specific-date-availability-picker .specific-date-entry .date-input-container .date-input {
+.nylas-specific-time-availability-picker .specific-time-entry .date-input-container .date-input {
   width: 100%;
 }
-.nylas-specific-date-availability-picker .specific-date-entry .date-input-container nylas-date-component::part(ic__date) {
+.nylas-specific-time-availability-picker .specific-time-entry .date-input-container nylas-date-component::part(ic__date) {
   border: 1px solid var(--nylas-base-200);
   height: 50px;
   display: flex;
   align-items: center;
 }
-.nylas-specific-date-availability-picker .specific-date-entry .time-pickers {
+.nylas-specific-time-availability-picker .specific-time-entry .time-pickers {
   display: grid;
   grid-template-columns: auto 10px 1fr;
   width: 342px;
@@ -105,13 +105,13 @@
   min-width: 0;
 }
 @media (max-width: 768px) {
-  .nylas-specific-date-availability-picker .specific-date-entry .time-pickers {
+  .nylas-specific-time-availability-picker .specific-time-entry .time-pickers {
     flex: 1;
     width: auto;
     grid-area: time_or_unavailable;
   }
 }
-.nylas-specific-date-availability-picker .specific-date-entry .time-pickers .time-separator {
+.nylas-specific-time-availability-picker .specific-time-entry .time-pickers .time-separator {
   font-size: 0.875rem;
   color: var(--nylas-base-600);
   font-weight: 500;
@@ -120,7 +120,7 @@
   padding: 0 0px 0px 6px;
   margin-top: 18px;
 }
-.nylas-specific-date-availability-picker .specific-date-entry .unavailable-text {
+.nylas-specific-time-availability-picker .specific-time-entry .unavailable-text {
   flex: 1;
   display: flex;
   align-items: center;
@@ -130,16 +130,16 @@
   min-height: 50px;
 }
 @media (max-width: 768px) {
-  .nylas-specific-date-availability-picker .specific-date-entry .unavailable-text {
+  .nylas-specific-time-availability-picker .specific-time-entry .unavailable-text {
     grid-area: time_or_unavailable;
   }
 }
-.nylas-specific-date-availability-picker .specific-date-entry .unavailable-text .unavailable-label {
+.nylas-specific-time-availability-picker .specific-time-entry .unavailable-text .unavailable-label {
   font-size: 0.875rem;
   color: var(--nylas-base-500);
   font-style: italic;
 }
-.nylas-specific-date-availability-picker .specific-date-entry .toggle-button {
+.nylas-specific-time-availability-picker .specific-time-entry .toggle-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -155,23 +155,23 @@
   flex-shrink: 0;
 }
 @media (max-width: 768px) {
-  .nylas-specific-date-availability-picker .specific-date-entry .toggle-button {
+  .nylas-specific-time-availability-picker .specific-time-entry .toggle-button {
     grid-area: calendar_toggle;
   }
 }
-.nylas-specific-date-availability-picker .specific-date-entry .toggle-button:hover {
+.nylas-specific-time-availability-picker .specific-time-entry .toggle-button:hover {
   color: var(--nylas-primary);
 }
-.nylas-specific-date-availability-picker .specific-date-entry .toggle-button:focus {
+.nylas-specific-time-availability-picker .specific-time-entry .toggle-button:focus {
   outline: none;
 }
-.nylas-specific-date-availability-picker .specific-date-entry .toggle-button.unavailable {
+.nylas-specific-time-availability-picker .specific-time-entry .toggle-button.unavailable {
   color: var(--nylas-error);
 }
-.nylas-specific-date-availability-picker .specific-date-entry .toggle-button.unavailable:hover {
+.nylas-specific-time-availability-picker .specific-time-entry .toggle-button.unavailable:hover {
   color: var(--nylas-error);
 }
-.nylas-specific-date-availability-picker .specific-date-entry .remove-button {
+.nylas-specific-time-availability-picker .specific-time-entry .remove-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -187,22 +187,22 @@
   flex-shrink: 0;
 }
 @media (max-width: 768px) {
-  .nylas-specific-date-availability-picker .specific-date-entry .remove-button {
+  .nylas-specific-time-availability-picker .specific-time-entry .remove-button {
     grid-area: remove;
   }
 }
-.nylas-specific-date-availability-picker .specific-date-entry .remove-button:hover {
+.nylas-specific-time-availability-picker .specific-time-entry .remove-button:hover {
   color: var(--nylas-error);
 }
-.nylas-specific-date-availability-picker .specific-date-entry .remove-button:focus {
+.nylas-specific-time-availability-picker .specific-time-entry .remove-button:focus {
   outline: none;
   background: var(--nylas-base-100);
   box-shadow: 0 0 0 2px var(--nylas-primary);
 }
-.nylas-specific-date-availability-picker .specific-date-entry .remove-button:active {
+.nylas-specific-time-availability-picker .specific-time-entry .remove-button:active {
   background: var(--nylas-base-200);
 }
-.nylas-specific-date-availability-picker .specific-date-entry .error-message {
+.nylas-specific-time-availability-picker .specific-time-entry .error-message {
   width: -webkit-fill-available;
   padding: 4px 8px;
   background: var(--nylas-error-50);
@@ -212,31 +212,31 @@
   border: 1px solid var(--nylas-error-200);
   margin-top: 8px;
 }
-.nylas-specific-date-availability-picker .add-button-container {
+.nylas-specific-time-availability-picker .add-button-container {
   display: flex;
   justify-content: flex-start;
 }
-.nylas-specific-date-availability-picker .add-button-container button-component {
+.nylas-specific-time-availability-picker .add-button-container button-component {
   width: 100%;
 }
 
-::part(nsdap__add-button) {
+::part(nstap__add-button) {
   border: 1px dashed var(--nylas-base-200);
   background: var(--nylas-base-0);
   color: var(--nylas-base-700);
 }
-::part(nsdap__add-button):hover {
+::part(nstap__add-button):hover {
   border-color: var(--nylas-primary);
   background: var(--nylas-base-50);
   color: var(--nylas-primary);
 }
 
-::part(nsdap__time-picker-container) {
+::part(nstap__time-picker-container) {
   flex: 1;
   min-width: 0;
 }
 
-::part(nsdap__time-picker-input) {
+::part(nstap__time-picker-input) {
   width: 100%;
   font-size: 0.875rem;
   min-height: 50px;
@@ -244,30 +244,30 @@
   align-items: center;
 }
 
-::part(nsdap__date-input) {
+::part(nstap__date-input) {
   width: 100%;
 }
 
-::part(nsdap__date-field) {
+::part(nstap__date-field) {
   width: 100%;
   font-size: 0.875rem;
   border: 1px solid var(--nylas-base-200);
   border-radius: var(--nylas-border-radius);
   padding: 0.5rem 0.75rem;
 }
-::part(nsdap__date-field):focus {
+::part(nstap__date-field):focus {
   border-color: var(--nylas-primary);
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
-::part(nsdap__date-wrapper) {
+::part(nstap__date-wrapper) {
   margin: 0;
 }
 
-::part(nsdap__date-label) {
+::part(nstap__date-label) {
   margin: 0;
   padding: 0;
 }
-::part(nsdap__date-label) p {
+::part(nstap__date-label) p {
   display: none;
 }

package/dist/collection/components/scheduler-editor/{nylas-specific-date-availability-picker/nylas-specific-date-availability-picker.js → nylas-specific-time-availability-picker/nylas-specific-time-availability-picker.js}

@@ -16,33 +16,33 @@ import { h, Host } from "@stencil/core";
 import { RegisterComponent } from "../../../common/register-component";
 import { debug, convertTo12HourFormat, convertTo24HourFormat, timeToMinutes } from "../../../utils/utils";
 import i18next from "../../../utils/i18n";
-export class NylasSpecificDateAvailabilityPicker {
+export class NylasSpecificTimeAvailabilityPicker {
     constructor() {
-        this.name = 'specific-date-availability';
+        this.name = 'specific-time-availability';
         this.selectedConfiguration = undefined;
         this.selectedLanguage = undefined;
-        this.specificDateOpenHours = undefined;
+        this.specificTimesAvailability = undefined;
         this.themeConfig = undefined;
         this.specificDateEntries = [];
         this.validationErrors = {};
     }
     connectedCallback() {
-        debug('nylas-specific-date-availability-picker', 'connectedCallback');
+        debug('nylas-specific-time-availability-picker', 'connectedCallback');
     }
     disconnectedCallback() {
-        debug('nylas-specific-date-availability-picker', 'disconnectedCallback');
+        debug('nylas-specific-time-availability-picker', 'disconnectedCallback');
     }
     componentWillLoad() {
-        debug('nylas-specific-date-availability-picker', 'componentWillLoad');
+        debug('nylas-specific-time-availability-picker', 'componentWillLoad');
         this.host.setAttribute('name', this.name);
     }
     componentDidLoad() {
-        debug('nylas-specific-date-availability-picker', 'componentDidLoad');
+        debug('nylas-specific-time-availability-picker', 'componentDidLoad');
         if (this.selectedConfiguration) {
             this.configChangedHandler(this.selectedConfiguration);
         }
-        else if (this.specificDateOpenHours && this.specificDateOpenHours.length > 0) {
-            this.loadSpecificDateOpenHours();
+        else if (this.specificTimesAvailability && this.specificTimesAvailability.length > 0) {
+            this.loadSpecificTimeAvailability();
         }
         this.applyThemeConfig(this.themeConfig);
     }
@@ -50,12 +50,12 @@ export class NylasSpecificDateAvailabilityPicker {
         return typeof this.internals.setFormValue === 'function';
     }
     elementNameChangedHandler(newValue) {
-        debug('nylas-specific-date-availability-picker', 'elementNameChangedHandler', newValue);
+        debug('nylas-specific-time-availability-picker', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
     configChangedHandler(newConfig) {
-        debug('nylas-specific-date-availability-picker', 'configChangedHandler', newConfig);
-        this.loadSpecificDateOpenHours();
+        debug('nylas-specific-time-availability-picker', 'configChangedHandler', newConfig);
+        this.loadSpecificTimeAvailability();
     }
     selectedLanguageChangedHandler(newVal, oldVal) {
         if (newVal === oldVal)
@@ -74,14 +74,14 @@ export class NylasSpecificDateAvailabilityPicker {
             }
         }
     }
-    loadSpecificDateOpenHours() {
-        if (!this.specificDateOpenHours || this.specificDateOpenHours.length === 0) {
+    loadSpecificTimeAvailability() {
+        if (!this.specificTimesAvailability || this.specificTimesAvailability.length === 0) {
             return;
         }
-        const entries = this.specificDateOpenHours.map((item, index) => {
+        const entries = this.specificTimesAvailability.map((item, index) => {
             const isUnavailable = item.start === '00:00' && item.end === '00:00';
             return {
-                id: `specific-date-${index}`,
+                id: `specific-time-${index}`,
                 date: item.date,
                 startTime: isUnavailable ? '09:00am' : convertTo12HourFormat(item.start),
                 endTime: isUnavailable ? '05:00pm' : convertTo12HourFormat(item.end),
@@ -91,13 +91,13 @@ export class NylasSpecificDateAvailabilityPicker {
         this.specificDateEntries = entries;
         this.emitValueChanged();
     }
-    addSpecificDateOpenHour() {
+    addSpecificTimeAvailability() {
         const today = new Date();
         const targetDate = new Date(today);
         targetDate.setDate(today.getDate() + this.specificDateEntries.length);
         const formattedDate = targetDate.toISOString().split('T')[0];
         const newEntry = {
-            id: `specific-date-${Date.now()}`,
+            id: `specific-time-${Date.now()}`,
             date: formattedDate,
             startTime: '09:00am',
             endTime: '05:00pm',
@@ -109,7 +109,7 @@ export class NylasSpecificDateAvailabilityPicker {
         }
         this.emitValueChanged();
     }
-    removeSpecificDateOpenHour(id) {
+    removeSpecificTimeAvailability(id) {
         this.specificDateEntries = this.specificDateEntries.filter(entry => entry.id !== id);
         if (this.validationErrors[id]) {
             const newErrors = { ...this.validationErrors };
@@ -134,22 +134,22 @@ export class NylasSpecificDateAvailabilityPicker {
     }
     validateEntry(entry) {
         if (!entry.date) {
-            return i18next.t('nylasSpecificDateAvailabilityPicker.errors.dateRequired');
+            return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.dateRequired');
         }
         const dateObj = new Date(entry.date);
         if (isNaN(dateObj.getTime())) {
-            return i18next.t('nylasSpecificDateAvailabilityPicker.errors.invalidDateFormat');
+            return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.invalidDateFormat');
         }
         if (entry.isUnavailable) {
             return null;
         }
         if (!entry.startTime || !entry.endTime) {
-            return i18next.t('nylasSpecificDateAvailabilityPicker.errors.timesRequired');
+            return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.timesRequired');
         }
         const startMinutes = timeToMinutes(entry.startTime);
         const endMinutes = timeToMinutes(entry.endTime);
         if (startMinutes >= endMinutes) {
-            return i18next.t('nylasSpecificDateAvailabilityPicker.errors.startTimeBeforeEndTime');
+            return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.startTimeBeforeEndTime');
         }
         return null;
     }
@@ -223,7 +223,7 @@ export class NylasSpecificDateAvailabilityPicker {
     }
     handleFormInputChange(event) {
         const { name, value } = event.detail;
-        if (name.startsWith('date-') && name.includes('specific-date-')) {
+        if (name.startsWith('date-') && name.includes('specific-time-')) {
             const entryId = name.replace('date-', '');
             this.specificDateEntries = this.specificDateEntries.map(entry => {
                 if (entry.id === entryId) {
@@ -241,14 +241,14 @@ export class NylasSpecificDateAvailabilityPicker {
     }
     emitValueChanged() {
         const isValid = this.validateAllEntries();
-        const specificDateOpenHours = this.specificDateEntries
+        const specificTimesAvailability = this.specificDateEntries
             .filter(entry => entry.date && (entry.isUnavailable || (entry.startTime && entry.endTime)))
             .map(entry => ({
             date: entry.date,
             start: entry.isUnavailable ? '00:00' : convertTo24HourFormat(entry.startTime),
             end: entry.isUnavailable ? '00:00' : convertTo24HourFormat(entry.endTime),
         }));
-        const value = JSON.stringify(specificDateOpenHours);
+        const value = JSON.stringify(specificTimesAvailability);
         if (this.isInternalsAvailable && isValid) {
             this.internals.setFormValue(value, this.name);
         }
@@ -258,21 +258,21 @@ export class NylasSpecificDateAvailabilityPicker {
         });
     }
     render() {
-        return (h(Host, { key: '1966754bdef1a0758f5a3a5b8093f3a9c79f3b54' }, h("div", { key: '9e902ec229a9c892ef5db38cf1292f494c4d3f58', class: "nylas-specific-date-availability-picker", part: "nsdap" }, h("div", { key: 'c9be9675420b744f5a97efdc960152d871342d1a', class: "content", part: "nsdap__content" }, h("div", { key: 'aafa543fdda80c872496b04c118eae59bdfa9844', class: "header", part: "nsdap__header" }, h("p", { key: '811cbd627fed382949bbccb6c61cf295a21c23f0', class: "header-description", part: "nsdap__header-description" }, i18next.t('nylasSpecificDateAvailabilityPicker.headerDescription'))), h("div", { key: 'afb099e1cf0b743ee879f5dcd35fa335522c94e3', class: "specific-dates", part: "nsdap__specific-dates" }, this.specificDateEntries.length === 0 ? (h("div", { class: "empty-state", part: "nsdap__empty-state" }, h("div", { class: "empty-icon", part: "nsdap__empty-icon" }, h("calendar-icon", { width: "32", height: "32" })), h("h3", { class: "empty-title", part: "nsdap__empty-title" }, i18next.t('nylasSpecificDateAvailabilityPicker.emptyState.title')), h("p", { class: "empty-subtitle", part: "nsdap__empty-subtitle" }, i18next.t('nylasSpecificDateAvailabilityPicker.emptyState.subtitle')))) : (this.specificDateEntries.map(entry => (h("div", { class: "specific-date-entry", part: "nsdap__specific-date-entry", key: entry.id, "data-entry-id": entry.id }, h("div", { class: "entry-content", part: "nsdap__entry-content" }, h("div", { class: "date-input-container", part: "nsdap__date-input-container" }, h("nylas-date-component", { name: `date-${entry.id}`, defaultValue: entry.date, placeholder: "yyyy-mm-dd", part: "nsdap__date-input", class: "date-input", themeConfig: this.themeConfig, exportparts: "ic__date: nsdap__date-field, ic__input_wrapper: nsdap__date-wrapper, ic__label: nsdap__date-label" })), entry.isUnavailable ? (h("div", { class: "unavailable-text", part: "nsdap__unavailable-text" }, h("span", { class: "unavailable-label" }, i18next.t('nylasSpecificDateAvailabilityPicker.entireDayUnavailable')))) : (h("div", { class: "time-pickers", part: "nsdap__time-pickers" }, 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: nsdap__time-picker-container, time-input: nsdap__time-picker-input, times: nsdap__time-picker-times" }), h("span", { class: "time-separator" }, "-"), 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: nsdap__time-picker-container, time-input: nsdap__time-picker-input, times: nsdap__time-picker-times" }))), h("button", { type: "button", class: { 'toggle-button': true, 'unavailable': entry.isUnavailable }, part: "nsdap__toggle-button", onClick: () => this.toggleAvailability(entry.id), title: entry.isUnavailable
-                ? i18next.t('nylasSpecificDateAvailabilityPicker.markAsAvailable')
-                : i18next.t('nylasSpecificDateAvailabilityPicker.markAsUnavailable') }, h("calendar-icon", { width: "20", height: "20" })), h("button", { type: "button", class: "remove-button", part: "nsdap__remove-button", onClick: () => this.removeSpecificDateOpenHour(entry.id), "aria-label": "Remove specific date" }, h("close-icon", { width: "16", height: "16" }))), this.validationErrors[entry.id] && (h("div", { class: "error-message", part: "nsdap__error-message" }, this.validationErrors[entry.id]))))))), h("div", { key: 'ee3f5bac619eea70756d7a0c0a45e7109d1d17d0', class: "add-button-container", part: "nsdap__add-button-container" }, h("button-component", { key: 'f431574f40430d032166bd5e5ab49fe1ba1ded74', id: "add-specific-date-open-hour", onClick: () => this.addSpecificDateOpenHour(), part: "nsdap__add-button", variant: "basic" }, h("add-circle-icon", { key: '691bed8a6f1859de2b06ddd0a9aa9a94bdc8fd9f', width: "24", height: "24" }), i18next.t('nylasSpecificDateAvailabilityPicker.addSpecificDateOpenHour')))))));
+        return (h(Host, { key: '01f075a3cded0b05cce5098dee0fe221bc13ec24' }, h("div", { key: 'f008de5cd95468e1cb0b820dabc2d38bca8a6d99', class: "nylas-specific-time-availability-picker", part: "nstap" }, h("div", { key: 'c2ec42ad544a1c10b3d5cbfa5adcf04a7e716377', class: "content", part: "nstap__content" }, h("div", { key: 'c58f880616610957181857a84ab053fa9f811f5d', class: "header", part: "nstap__header" }, h("p", { key: '671a584b2f92d1ee3d8abf50a80c60052e97510a', class: "header-description", part: "nstap__header-description" }, i18next.t('nylasSpecificTimeAvailabilityPicker.headerDescription'))), h("div", { key: '9b341aa468e6fdb749cddf7bf8fdc66c110ce25f', class: "specific-times", part: "nstap__specific-times" }, this.specificDateEntries.length === 0 ? (h("div", { class: "empty-state", part: "nstap__empty-state" }, h("div", { class: "empty-icon", part: "nstap__empty-icon" }, h("calendar-icon", { width: "32", height: "32" })), h("h3", { class: "empty-title", part: "nstap__empty-title" }, i18next.t('nylasSpecificTimeAvailabilityPicker.emptyState.title')), h("p", { class: "empty-subtitle", part: "nstap__empty-subtitle" }, i18next.t('nylasSpecificTimeAvailabilityPicker.emptyState.subtitle')))) : (this.specificDateEntries.map(entry => (h("div", { class: "specific-time-entry", part: "nstap__specific-time-entry", key: entry.id, "data-entry-id": entry.id }, h("div", { class: "entry-content", part: "nstap__entry-content" }, h("div", { class: "date-input-container", part: "nstap__date-input-container" }, 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" })), entry.isUnavailable ? (h("div", { class: "unavailable-text", part: "nstap__unavailable-text" }, h("span", { class: "unavailable-label" }, i18next.t('nylasSpecificTimeAvailabilityPicker.entireDayUnavailable')))) : (h("div", { class: "time-pickers", part: "nstap__time-pickers" }, 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" }), h("span", { class: "time-separator" }, "-"), 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" }))), h("button", { type: "button", class: { 'toggle-button': true, 'unavailable': entry.isUnavailable }, part: "nstap__toggle-button", onClick: () => this.toggleAvailability(entry.id), title: entry.isUnavailable
+                ? i18next.t('nylasSpecificTimeAvailabilityPicker.markAsAvailable')
+                : i18next.t('nylasSpecificTimeAvailabilityPicker.markAsUnavailable') }, h("calendar-icon", { width: "20", height: "20" })), h("button", { type: "button", class: "remove-button", part: "nstap__remove-button", onClick: () => this.removeSpecificTimeAvailability(entry.id), "aria-label": "Remove specific date" }, h("close-icon", { width: "16", height: "16" }))), this.validationErrors[entry.id] && (h("div", { class: "error-message", part: "nstap__error-message" }, this.validationErrors[entry.id]))))))), h("div", { key: '3a326486bb489af6c036527434c6c6a8a7736cf1', class: "add-button-container", part: "nstap__add-button-container" }, h("button-component", { key: '156a5fff11a4dedc272327cdf2322118e9fef6fc', id: "add-specific-time-open-hour", onClick: () => this.addSpecificTimeAvailability(), part: "nstap__add-button", variant: "basic" }, h("add-circle-icon", { key: '0d12a577afac1d24a4c259997d71e0f182f1e5c8', width: "24", height: "24" }), i18next.t('nylasSpecificTimeAvailabilityPicker.addSpecificTimeAvailability')))))));
     }
-    static get is() { return "nylas-specific-date-availability-picker"; }
+    static get is() { return "nylas-specific-time-availability-picker"; }
     static get encapsulation() { return "shadow"; }
     static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
-            "$": ["nylas-specific-date-availability-picker.scss"]
+            "$": ["nylas-specific-time-availability-picker.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["nylas-specific-date-availability-picker.css"]
+            "$": ["nylas-specific-time-availability-picker.css"]
         };
     }
     static get properties() {
@@ -296,7 +296,7 @@ export class NylasSpecificDateAvailabilityPicker {
                 },
                 "attribute": "name",
                 "reflect": false,
-                "defaultValue": "'specific-date-availability'"
+                "defaultValue": "'specific-time-availability'"
             },
             "selectedConfiguration": {
                 "type": "unknown",
@@ -348,17 +348,17 @@ export class NylasSpecificDateAvailabilityPicker {
                 "attribute": "selected-language",
                 "reflect": false
             },
-            "specificDateOpenHours": {
+            "specificTimesAvailability": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SpecificDateOpenHours[]",
-                    "resolved": "SpecificDateOpenHours[] | undefined",
+                    "original": "SpecificTimeAvailability[]",
+                    "resolved": "SpecificTimeAvailability[] | undefined",
                     "references": {
-                        "SpecificDateOpenHours": {
+                        "SpecificTimeAvailability": {
                             "location": "import",
                             "path": "@nylas/core",
-                            "id": "../nylas-js-core/dist/index.d.ts::SpecificDateOpenHours"
+                            "id": "../nylas-js-core/dist/index.d.ts::SpecificTimeAvailability"
                         }
                     }
                 },
@@ -463,7 +463,7 @@ export class NylasSpecificDateAvailabilityPicker {
 }
 __decorate([
     RegisterComponent({
-        name: 'nylas-specific-date-availability-picker',
+        name: 'nylas-specific-time-availability-picker',
         stateToProps: new Map([
             ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],
             ['schedulerConfig.selectedLanguage', 'selectedLanguage'],
@@ -474,5 +474,5 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
-], NylasSpecificDateAvailabilityPicker.prototype, "render", null);
-//# sourceMappingURL=nylas-specific-date-availability-picker.js.map
+], NylasSpecificTimeAvailabilityPicker.prototype, "render", null);
+//# sourceMappingURL=nylas-specific-time-availability-picker.js.map

package/dist/collection/components/scheduler-editor/nylas-specific-time-availability-picker/nylas-specific-time-availability-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-specific-time-availability-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-specific-time-availability-picker/nylas-specific-time-availability-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, Watch, State, Listen } from '@stencil/core';\nimport { RegisterComponent } from '@/common/register-component';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { Configuration, SpecificTimeAvailability, ThemeConfig } from '@nylas/core';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { debug, convertTo12HourFormat, convertTo24HourFormat, timeToMinutes } from '@/utils/utils';\nimport i18next from '@/utils/i18n';\n\n@Component({\n  tag: 'nylas-specific-time-availability-picker',\n  styleUrl: 'nylas-specific-time-availability-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasSpecificTimeAvailabilityPicker {\n  /**\n   * The element <nylas-specific-time-availability-picker> itself.\n   */\n  @Element() host!: HTMLNylasSpecificTimeAvailabilityPickerElement;\n\n  /**\n   * @standalone\n   * The name of the specific date availability picker.\n   */\n  @Prop() name: string = 'specific-time-availability';\n\n  /**\n   * @standalone\n   * The selected configuration.\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * @standalone\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n  /**\n   * @standalone\n   * The specific date open hours.\n   */\n  @Prop() specificTimesAvailability?: SpecificTimeAvailability[];\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n  /**\n   * @standalone\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The event is fired when the specific date open hours change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * Internal state for managing specific date entries\n   */\n  @State() specificDateEntries: Array<{\n    id: string;\n    date: string;\n    startTime: string;\n    endTime: string;\n    isUnavailable: boolean;\n  }> = [];\n\n  /**\n   * State for tracking validation errors\n   */\n  @State() validationErrors: { [key: string]: string } = {};\n\n  connectedCallback() {\n    debug('nylas-specific-time-availability-picker', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-specific-time-availability-picker', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-specific-time-availability-picker', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-specific-time-availability-picker', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.configChangedHandler(this.selectedConfiguration);\n    } else if (this.specificTimesAvailability && this.specificTimesAvailability.length > 0) {\n      this.loadSpecificTimeAvailability();\n    }\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  get isInternalsAvailable() {\n    return typeof this.internals.setFormValue === 'function';\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-specific-time-availability-picker', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  configChangedHandler(newConfig: Configuration) {\n    debug('nylas-specific-time-availability-picker', 'configChangedHandler', newConfig);\n    // Load specific date open hours from the configuration participants\n    this.loadSpecificTimeAvailability();\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  @Watch('themeConfig')\n  themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n    if (newVal === oldVal) return;\n    this.applyThemeConfig(newVal);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  loadSpecificTimeAvailability() {\n    if (!this.specificTimesAvailability || this.specificTimesAvailability.length === 0) {\n      return;\n    }\n\n    const entries = this.specificTimesAvailability.map((item, index) => {\n      // Check if both start and end are \"00:00\" - this indicates an unavailable day\n      const isUnavailable = item.start === '00:00' && item.end === '00:00';\n\n      return {\n        id: `specific-time-${index}`,\n        date: item.date,\n        startTime: isUnavailable ? '09:00am' : convertTo12HourFormat(item.start),\n        endTime: isUnavailable ? '05:00pm' : convertTo12HourFormat(item.end),\n        isUnavailable,\n      };\n    });\n\n    this.specificDateEntries = entries;\n    this.emitValueChanged();\n  }\n\n  addSpecificTimeAvailability() {\n    // Initialize with incremental dates based on existing entries\n    // First entry: today, second entry: tomorrow, third entry: day after, etc.\n    const today = new Date();\n    const targetDate = new Date(today);\n    targetDate.setDate(today.getDate() + this.specificDateEntries.length);\n    const formattedDate = targetDate.toISOString().split('T')[0];\n\n    const newEntry = {\n      id: `specific-time-${Date.now()}`,\n      date: formattedDate,\n      startTime: '09:00am',\n      endTime: '05:00pm',\n      isUnavailable: false,\n    };\n\n    this.specificDateEntries = [...this.specificDateEntries, newEntry];\n\n    // Clear any global validation errors since we're adding a new valid entry\n    if (this.isInternalsAvailable) {\n      this.internals.setValidity({ customError: false });\n    }\n\n    this.emitValueChanged();\n  }\n\n  removeSpecificTimeAvailability(id: string) {\n    this.specificDateEntries = this.specificDateEntries.filter(entry => entry.id !== id);\n\n    // Clear validation error for the removed entry\n    if (this.validationErrors[id]) {\n      const newErrors = { ...this.validationErrors };\n      delete newErrors[id];\n      this.validationErrors = newErrors;\n    }\n\n    this.emitValueChanged();\n  }\n\n  toggleAvailability(id: string) {\n    this.specificDateEntries = this.specificDateEntries.map(entry => {\n      if (entry.id === id) {\n        return { ...entry, isUnavailable: !entry.isUnavailable };\n      }\n      return entry;\n    });\n\n    // Clear any existing validation error for this entry since availability state changed\n    if (this.validationErrors[id]) {\n      const newErrors = { ...this.validationErrors };\n      delete newErrors[id];\n      this.validationErrors = newErrors;\n    }\n\n    this.emitValueChanged();\n  }\n\n  /**\n   * Validates a single date entry\n   */\n  validateEntry(entry: (typeof this.specificDateEntries)[0]): string | null {\n    // Check if date is empty or invalid\n    if (!entry.date) {\n      return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.dateRequired');\n    }\n\n    const dateObj = new Date(entry.date);\n    if (isNaN(dateObj.getTime())) {\n      return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.invalidDateFormat');\n    }\n\n    // If unavailable, no need to validate times\n    if (entry.isUnavailable) {\n      return null;\n    }\n\n    // Validate start and end times are present\n    if (!entry.startTime || !entry.endTime) {\n      return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.timesRequired');\n    }\n\n    // Validate start time is before end time\n    const startMinutes = timeToMinutes(entry.startTime);\n    const endMinutes = timeToMinutes(entry.endTime);\n\n    if (startMinutes >= endMinutes) {\n      return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.startTimeBeforeEndTime');\n    }\n\n    return null;\n  }\n\n  /**\n   * Validates all entries and updates validation state\n   */\n  validateAllEntries() {\n    const errors: { [key: string]: string } = {};\n    let hasErrors = false;\n\n    this.specificDateEntries.forEach(entry => {\n      const error = this.validateEntry(entry);\n      if (error) {\n        errors[entry.id] = error;\n        hasErrors = true;\n      }\n    });\n\n    this.validationErrors = errors;\n\n    // Update form validity\n    if (hasErrors) {\n      const firstErrorElement = this.host.shadowRoot?.querySelector(`[data-entry-id=\"${Object.keys(errors)[0]}\"]`) as HTMLElement;\n      if (this.isInternalsAvailable) {\n        this.internals.setValidity({ customError: true }, 'Please fix validation errors', firstErrorElement);\n      }\n    } else {\n      if (this.isInternalsAvailable) {\n        this.internals.setValidity({ customError: false });\n      }\n    }\n\n    return !hasErrors;\n  }\n\n  @Listen('timeChange')\n  handleTimeChange(event: CustomEvent<{ key: string; value: string }>) {\n    const { key, value } = event.detail;\n    const [entryId, timeType] = key.split('_');\n\n    this.specificDateEntries = this.specificDateEntries.map(entry => {\n      if (entry.id === entryId) {\n        return {\n          ...entry,\n          [timeType === 'start' ? 'startTime' : 'endTime']: value,\n        };\n      }\n      return entry;\n    });\n\n    // Clear any existing validation error for this entry\n    if (this.validationErrors[entryId]) {\n      const newErrors = { ...this.validationErrors };\n      delete newErrors[entryId];\n      this.validationErrors = newErrors;\n    }\n\n    // Clear form validity errors related to time\n    if (this.isInternalsAvailable) {\n      this.internals.setValidity({ customError: false });\n    }\n\n    this.emitValueChanged();\n  }\n\n  @Listen('timeWindowFormError')\n  setFormError(event: CustomEvent<{ key: string; message: string }>) {\n    const { key, message } = event.detail;\n    const [entryId] = key.split('_');\n\n    if (message) {\n      // Set validation error for this entry\n      this.validationErrors = {\n        ...this.validationErrors,\n        [entryId]: message,\n      };\n\n      const element = this.host.shadowRoot?.getElementById(key);\n      if (element && this.isInternalsAvailable) {\n        this.internals.setValidity({ customError: true }, message, element as HTMLInputElement);\n      }\n    } else {\n      // Clear validation error for this entry\n      const newErrors = { ...this.validationErrors };\n      delete newErrors[entryId];\n      this.validationErrors = newErrors;\n\n      if (this.isInternalsAvailable) {\n        this.internals.setValidity({ customError: false });\n      }\n    }\n  }\n\n  @Listen('nylasFormInputChanged')\n  handleFormInputChange(event: CustomEvent<{ value: string; name: string; label: string; type: string; error: string }>) {\n    const { name, value } = event.detail;\n\n    // Check if this is a date input for our component\n    if (name.startsWith('date-') && name.includes('specific-time-')) {\n      const entryId = name.replace('date-', '');\n\n      this.specificDateEntries = this.specificDateEntries.map(entry => {\n        if (entry.id === entryId) {\n          return { ...entry, date: value };\n        }\n        return entry;\n      });\n\n      // Clear any existing validation error for this entry\n      if (this.validationErrors[entryId]) {\n        const newErrors = { ...this.validationErrors };\n        delete newErrors[entryId];\n        this.validationErrors = newErrors;\n      }\n\n      this.emitValueChanged();\n    }\n  }\n\n  emitValueChanged() {\n    // Validate all entries before emitting\n    const isValid = this.validateAllEntries();\n\n    const specificTimesAvailability = this.specificDateEntries\n      .filter(entry => entry.date && (entry.isUnavailable || (entry.startTime && entry.endTime)))\n      .map(entry => ({\n        date: entry.date,\n        start: entry.isUnavailable ? '00:00' : convertTo24HourFormat(entry.startTime),\n        end: entry.isUnavailable ? '00:00' : convertTo24HourFormat(entry.endTime),\n      }));\n\n    const value = JSON.stringify(specificTimesAvailability);\n\n    if (this.isInternalsAvailable && isValid) {\n      this.internals.setFormValue(value, this.name);\n    }\n\n    this.valueChanged.emit({\n      value,\n      name: this.name,\n    });\n  }\n\n  @RegisterComponent<NylasSpecificTimeAvailabilityPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-specific-time-availability-picker',\n    stateToProps: new Map([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n      ['schedulerConfig.themeConfig', 'themeConfig'],\n    ]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-specific-time-availability-picker\" part=\"nstap\">\n          <div class=\"content\" part=\"nstap__content\">\n            <div class=\"header\" part=\"nstap__header\">\n              <p class=\"header-description\" part=\"nstap__header-description\">\n                {i18next.t('nylasSpecificTimeAvailabilityPicker.headerDescription')}\n              </p>\n            </div>\n            <div class=\"specific-times\" part=\"nstap__specific-times\">\n              {this.specificDateEntries.length === 0 ? (\n                <div class=\"empty-state\" part=\"nstap__empty-state\">\n                  <div class=\"empty-icon\" part=\"nstap__empty-icon\">\n                    <calendar-icon width=\"32\" height=\"32\" />\n                  </div>\n                  <h3 class=\"empty-title\" part=\"nstap__empty-title\">\n                    {i18next.t('nylasSpecificTimeAvailabilityPicker.emptyState.title')}\n                  </h3>\n                  <p class=\"empty-subtitle\" part=\"nstap__empty-subtitle\">\n                    {i18next.t('nylasSpecificTimeAvailabilityPicker.emptyState.subtitle')}\n                  </p>\n                </div>\n              ) : (\n                this.specificDateEntries.map(entry => (\n                  <div class=\"specific-time-entry\" part=\"nstap__specific-time-entry\" key={entry.id} data-entry-id={entry.id}>\n                    <div class=\"entry-content\" part=\"nstap__entry-content\">\n                      <div class=\"date-input-container\" part=\"nstap__date-input-container\">\n                        <nylas-date-component\n                          name={`date-${entry.id}`}\n                          defaultValue={entry.date}\n                          placeholder=\"yyyy-mm-dd\"\n                          part=\"nstap__date-input\"\n                          class=\"date-input\"\n                          themeConfig={this.themeConfig}\n                          exportparts=\"ic__date: nstap__date-field, ic__input_wrapper: nstap__date-wrapper, ic__label: nstap__date-label\"\n                        />\n                      </div>\n                      {entry.isUnavailable ? (\n                        <div class=\"unavailable-text\" part=\"nstap__unavailable-text\">\n                          <span class=\"unavailable-label\">{i18next.t('nylasSpecificTimeAvailabilityPicker.entireDayUnavailable')}</span>\n                        </div>\n                      ) : (\n                        <div class=\"time-pickers\" part=\"nstap__time-pickers\">\n                          <nylas-time-window-picker\n                            id={`${entry.id}_start`}\n                            time={entry.startTime}\n                            name={`${entry.id}_start`}\n                            key={`${entry.id}_start`}\n                            language={this.selectedLanguage}\n                            hasError={!!this.validationErrors[entry.id]}\n                            themeConfig={this.themeConfig}\n                            exportparts=\"time-picker: nstap__time-picker-container, time-input: nstap__time-picker-input, times: nstap__time-picker-times\"\n                          />\n                          <span class=\"time-separator\">-</span>\n                          <nylas-time-window-picker\n                            id={`${entry.id}_end`}\n                            time={entry.endTime}\n                            name={`${entry.id}_end`}\n                            key={`${entry.id}_end`}\n                            minimumStartTime={entry.startTime}\n                            language={this.selectedLanguage}\n                            hasError={!!this.validationErrors[entry.id]}\n                            themeConfig={this.themeConfig}\n                            exportparts=\"time-picker: nstap__time-picker-container, time-input: nstap__time-picker-input, times: nstap__time-picker-times\"\n                          />\n                        </div>\n                      )}\n                      <button\n                        type=\"button\"\n                        class={{ 'toggle-button': true, 'unavailable': entry.isUnavailable }}\n                        part=\"nstap__toggle-button\"\n                        onClick={() => this.toggleAvailability(entry.id)}\n                        title={\n                          entry.isUnavailable\n                            ? i18next.t('nylasSpecificTimeAvailabilityPicker.markAsAvailable')\n                            : i18next.t('nylasSpecificTimeAvailabilityPicker.markAsUnavailable')\n                        }\n                      >\n                        <calendar-icon width=\"20\" height=\"20\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"remove-button\"\n                        part=\"nstap__remove-button\"\n                        onClick={() => this.removeSpecificTimeAvailability(entry.id)}\n                        aria-label=\"Remove specific date\"\n                      >\n                        <close-icon width=\"16\" height=\"16\" />\n                      </button>\n                    </div>\n                    {this.validationErrors[entry.id] && (\n                      <div class=\"error-message\" part=\"nstap__error-message\">\n                        {this.validationErrors[entry.id]}\n                      </div>\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n            <div class=\"add-button-container\" part=\"nstap__add-button-container\">\n              <button-component id=\"add-specific-time-open-hour\" onClick={() => this.addSpecificTimeAvailability()} part=\"nstap__add-button\" variant=\"basic\">\n                <add-circle-icon width=\"24\" height=\"24\" />\n                {i18next.t('nylasSpecificTimeAvailabilityPicker.addSpecificTimeAvailability')}\n              </button-component>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}