npm - @nylas/web-elements - Versions diffs - 2.0.6 → 2.1.0 - Mend

@nylas/web-elements 2.0.6 → 2.1.0

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 (164) hide show

package/dist/components/nylas-specific-time-availability-picker.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface NylasSpecificTimeAvailabilityPicker extends Components.NylasSpecificTimeAvailabilityPicker, HTMLElement {}
+export const NylasSpecificTimeAvailabilityPicker: {
+    prototype: NylasSpecificTimeAvailabilityPicker;
+    new (): NylasSpecificTimeAvailabilityPicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nylas-specific-time-availability-picker.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { N as NylasSpecificTimeAvailabilityPicker$1, d as defineCustomElement$1 } from './nylas-specific-time-availability-picker2.js';
+const NylasSpecificTimeAvailabilityPicker = NylasSpecificTimeAvailabilityPicker$1;
+const defineCustomElement = defineCustomElement$1;
+export { NylasSpecificTimeAvailabilityPicker, defineCustomElement };
+//# sourceMappingURL=nylas-specific-time-availability-picker.js.map

package/dist/components/nylas-specific-time-availability-picker.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"nylas-specific-time-availability-picker.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/{nylas-specific-date-availability-picker2.js → nylas-specific-time-availability-picker2.js} RENAMED Viewed

@@ -9,8 +9,8 @@ import { d as defineCustomElement$3 } from './loading.js';
 import { d as defineCustomElement$2 } from './nylas-date-component2.js';
 import { d as defineCustomElement$1 } from './nylas-time-window-picker2.js';
-const nylasSpecificDateAvailabilityPickerCss = ":host{display:block;width:100%}.nylas-specific-date-availability-picker{display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--nylas-base-200)}.nylas-specific-date-availability-picker .content{display:flex;flex-direction:column;gap:1.5rem;padding:16px}.nylas-specific-date-availability-picker .header{display:flex;flex-direction:column;gap:0.5rem}.nylas-specific-date-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{display:flex;flex-direction:column;gap:1rem}.nylas-specific-date-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{margin-bottom:1.5rem;opacity:0.4;color:var(--nylas-base-400)}.nylas-specific-date-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{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{display:flex;flex-direction:column;gap:0;padding:12px;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius);background:var(--nylas-base-0)}.nylas-specific-date-availability-picker .specific-date-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{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{flex:0 0 auto;width:160px}@media (max-width: 768px){.nylas-specific-date-availability-picker .specific-date-entry .date-input-container{grid-area:date}}.nylas-specific-date-availability-picker .specific-date-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){border:1px solid var(--nylas-base-200);height:50px;display:flex;align-items:center}.nylas-specific-date-availability-picker .specific-date-entry .time-pickers{display:grid;grid-template-columns:auto 10px 1fr;width:342px;gap:14px;flex:1;min-width:0}@media (max-width: 768px){.nylas-specific-date-availability-picker .specific-date-entry .time-pickers{flex:1;width:auto;grid-area:time_or_unavailable}}.nylas-specific-date-availability-picker .specific-date-entry .time-pickers .time-separator{font-size:0.875rem;color:var(--nylas-base-600);font-weight:500;flex-shrink:0;line-height:1;padding:0 0px 0px 6px;margin-top:18px}.nylas-specific-date-availability-picker .specific-date-entry .unavailable-text{flex:1;display:flex;align-items:center;padding:0 15px;border-radius:var(--nylas-border-radius);background:var(--nylas-base-50);min-height:50px}@media (max-width: 768px){.nylas-specific-date-availability-picker .specific-date-entry .unavailable-text{grid-area:time_or_unavailable}}.nylas-specific-date-availability-picker .specific-date-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{display:flex;align-items:center;justify-content:center;width:40px;height:48px;padding-left:8px;border:none;border-radius:4px;background:transparent;color:var(--nylas-base-400);cursor:pointer;transition:all 0.2s ease;flex-shrink:0}@media (max-width: 768px){.nylas-specific-date-availability-picker .specific-date-entry .toggle-button{grid-area:calendar_toggle}}.nylas-specific-date-availability-picker .specific-date-entry .toggle-button:hover{color:var(--nylas-primary)}.nylas-specific-date-availability-picker .specific-date-entry .toggle-button:focus{outline:none}.nylas-specific-date-availability-picker .specific-date-entry .toggle-button.unavailable{color:var(--nylas-error)}.nylas-specific-date-availability-picker .specific-date-entry .toggle-button.unavailable:hover{color:var(--nylas-error)}.nylas-specific-date-availability-picker .specific-date-entry .remove-button{display:flex;align-items:center;justify-content:center;width:40px;height:48px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--nylas-base-400);cursor:pointer;transition:all 0.2s ease;flex-shrink:0}@media (max-width: 768px){.nylas-specific-date-availability-picker .specific-date-entry .remove-button{grid-area:remove}}.nylas-specific-date-availability-picker .specific-date-entry .remove-button:hover{color:var(--nylas-error)}.nylas-specific-date-availability-picker .specific-date-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{background:var(--nylas-base-200)}.nylas-specific-date-availability-picker .specific-date-entry .error-message{width:-webkit-fill-available;padding:4px 8px;background:var(--nylas-error-50);color:var(--nylas-error);font-size:12px;border-radius:4px;border:1px solid var(--nylas-error-200);margin-top:8px}.nylas-specific-date-availability-picker .add-button-container{display:flex;justify-content:flex-start}.nylas-specific-date-availability-picker .add-button-container button-component{width:100%}::part(nsdap__add-button){border:1px dashed var(--nylas-base-200);background:var(--nylas-base-0);color:var(--nylas-base-700)}::part(nsdap__add-button):hover{border-color:var(--nylas-primary);background:var(--nylas-base-50);color:var(--nylas-primary)}::part(nsdap__time-picker-container){flex:1;min-width:0}::part(nsdap__time-picker-input){width:100%;font-size:0.875rem;min-height:50px;display:flex;align-items:center}::part(nsdap__date-input){width:100%}::part(nsdap__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{border-color:var(--nylas-primary);box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1)}::part(nsdap__date-wrapper){margin:0}::part(nsdap__date-label){margin:0;padding:0}::part(nsdap__date-label) p{display:none}";
-const NylasSpecificDateAvailabilityPickerStyle0 = nylasSpecificDateAvailabilityPickerCss;
+const nylasSpecificTimeAvailabilityPickerCss = ":host{display:block;width:100%}.nylas-specific-time-availability-picker{display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--nylas-base-200)}.nylas-specific-time-availability-picker .content{display:flex;flex-direction:column;gap:1.5rem;padding:16px}.nylas-specific-time-availability-picker .header{display:flex;flex-direction:column;gap:0.5rem}.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-time-availability-picker .specific-times{display:flex;flex-direction:column;gap:1rem}.nylas-specific-time-availability-picker .empty-state{display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;text-align:center}.nylas-specific-time-availability-picker .empty-state .empty-icon{margin-bottom:1.5rem;opacity:0.4;color:var(--nylas-base-400)}.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-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-time-availability-picker .specific-time-entry{display:flex;flex-direction:column;gap:0;padding:12px;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius);background:var(--nylas-base-0)}.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-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-time-availability-picker .specific-time-entry .date-input-container{flex:0 0 auto;width:160px}@media (max-width: 768px){.nylas-specific-time-availability-picker .specific-time-entry .date-input-container{grid-area:date}}.nylas-specific-time-availability-picker .specific-time-entry .date-input-container .date-input{width:100%}.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-time-availability-picker .specific-time-entry .time-pickers{display:grid;grid-template-columns:auto 10px 1fr;width:342px;gap:14px;flex:1;min-width:0}@media (max-width: 768px){.nylas-specific-time-availability-picker .specific-time-entry .time-pickers{flex:1;width:auto;grid-area:time_or_unavailable}}.nylas-specific-time-availability-picker .specific-time-entry .time-pickers .time-separator{font-size:0.875rem;color:var(--nylas-base-600);font-weight:500;flex-shrink:0;line-height:1;padding:0 0px 0px 6px;margin-top:18px}.nylas-specific-time-availability-picker .specific-time-entry .unavailable-text{flex:1;display:flex;align-items:center;padding:0 15px;border-radius:var(--nylas-border-radius);background:var(--nylas-base-50);min-height:50px}@media (max-width: 768px){.nylas-specific-time-availability-picker .specific-time-entry .unavailable-text{grid-area:time_or_unavailable}}.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-time-availability-picker .specific-time-entry .toggle-button{display:flex;align-items:center;justify-content:center;width:40px;height:48px;padding-left:8px;border:none;border-radius:4px;background:transparent;color:var(--nylas-base-400);cursor:pointer;transition:all 0.2s ease;flex-shrink:0}@media (max-width: 768px){.nylas-specific-time-availability-picker .specific-time-entry .toggle-button{grid-area:calendar_toggle}}.nylas-specific-time-availability-picker .specific-time-entry .toggle-button:hover{color:var(--nylas-primary)}.nylas-specific-time-availability-picker .specific-time-entry .toggle-button:focus{outline:none}.nylas-specific-time-availability-picker .specific-time-entry .toggle-button.unavailable{color:var(--nylas-error)}.nylas-specific-time-availability-picker .specific-time-entry .toggle-button.unavailable:hover{color:var(--nylas-error)}.nylas-specific-time-availability-picker .specific-time-entry .remove-button{display:flex;align-items:center;justify-content:center;width:40px;height:48px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--nylas-base-400);cursor:pointer;transition:all 0.2s ease;flex-shrink:0}@media (max-width: 768px){.nylas-specific-time-availability-picker .specific-time-entry .remove-button{grid-area:remove}}.nylas-specific-time-availability-picker .specific-time-entry .remove-button:hover{color:var(--nylas-error)}.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-time-availability-picker .specific-time-entry .remove-button:active{background:var(--nylas-base-200)}.nylas-specific-time-availability-picker .specific-time-entry .error-message{width:-webkit-fill-available;padding:4px 8px;background:var(--nylas-error-50);color:var(--nylas-error);font-size:12px;border-radius:4px;border:1px solid var(--nylas-error-200);margin-top:8px}.nylas-specific-time-availability-picker .add-button-container{display:flex;justify-content:flex-start}.nylas-specific-time-availability-picker .add-button-container button-component{width:100%}::part(nstap__add-button){border:1px dashed var(--nylas-base-200);background:var(--nylas-base-0);color:var(--nylas-base-700)}::part(nstap__add-button):hover{border-color:var(--nylas-primary);background:var(--nylas-base-50);color:var(--nylas-primary)}::part(nstap__time-picker-container){flex:1;min-width:0}::part(nstap__time-picker-input){width:100%;font-size:0.875rem;min-height:50px;display:flex;align-items:center}::part(nstap__date-input){width:100%}::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(nstap__date-field):focus{border-color:var(--nylas-primary);box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1)}::part(nstap__date-wrapper){margin:0}::part(nstap__date-label){margin:0;padding:0}::part(nstap__date-label) p{display:none}";
+const NylasSpecificTimeAvailabilityPickerStyle0 = nylasSpecificTimeAvailabilityPickerCss;
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -26,38 +26,38 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecificDateAvailabilityPicker extends HTMLElement {
+const NylasSpecificTimeAvailabilityPicker = proxyCustomElement(class NylasSpecificTimeAvailabilityPicker extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.internals = this.attachInternals();
-        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);
     }
@@ -65,12 +65,12 @@ const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecif
         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)
@@ -89,14 +89,14 @@ const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecif
             }
         }
     }
-    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),
@@ -106,13 +106,13 @@ const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecif
         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',
@@ -124,7 +124,7 @@ const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecif
         }
         this.emitValueChanged();
     }
-    removeSpecificDateOpenHour(id) {
+    removeSpecificTimeAvailability(id) {
         this.specificDateEntries = this.specificDateEntries.filter(entry => entry.id !== id);
         if (this.validationErrors[id]) {
             const newErrors = { ...this.validationErrors };
@@ -149,22 +149,22 @@ const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecif
     }
     validateEntry(entry) {
         if (!entry.date) {
-            return instance.t('nylasSpecificDateAvailabilityPicker.errors.dateRequired');
+            return instance.t('nylasSpecificTimeAvailabilityPicker.errors.dateRequired');
         }
         const dateObj = new Date(entry.date);
         if (isNaN(dateObj.getTime())) {
-            return instance.t('nylasSpecificDateAvailabilityPicker.errors.invalidDateFormat');
+            return instance.t('nylasSpecificTimeAvailabilityPicker.errors.invalidDateFormat');
         }
         if (entry.isUnavailable) {
             return null;
         }
         if (!entry.startTime || !entry.endTime) {
-            return instance.t('nylasSpecificDateAvailabilityPicker.errors.timesRequired');
+            return instance.t('nylasSpecificTimeAvailabilityPicker.errors.timesRequired');
         }
         const startMinutes = timeToMinutes(entry.startTime);
         const endMinutes = timeToMinutes(entry.endTime);
         if (startMinutes >= endMinutes) {
-            return instance.t('nylasSpecificDateAvailabilityPicker.errors.startTimeBeforeEndTime');
+            return instance.t('nylasSpecificTimeAvailabilityPicker.errors.startTimeBeforeEndTime');
         }
         return null;
     }
@@ -238,7 +238,7 @@ const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecif
     }
     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) {
@@ -256,14 +256,14 @@ const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecif
     }
     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);
         }
@@ -273,9 +273,9 @@ const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecif
         });
     }
     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" }, instance.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" }, instance.t('nylasSpecificDateAvailabilityPicker.emptyState.title')), h("p", { class: "empty-subtitle", part: "nsdap__empty-subtitle" }, instance.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" }, instance.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
-                ? instance.t('nylasSpecificDateAvailabilityPicker.markAsAvailable')
-                : instance.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" }), instance.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" }, instance.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" }, instance.t('nylasSpecificTimeAvailabilityPicker.emptyState.title')), h("p", { class: "empty-subtitle", part: "nstap__empty-subtitle" }, instance.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" }, instance.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
+                ? instance.t('nylasSpecificTimeAvailabilityPicker.markAsAvailable')
+                : instance.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" }), instance.t('nylasSpecificTimeAvailabilityPicker.addSpecificTimeAvailability')))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -285,12 +285,12 @@ const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecif
         "selectedLanguage": ["selectedLanguageChangedHandler"],
         "themeConfig": ["themeConfigChangedHandler"]
     }; }
-    static get style() { return NylasSpecificDateAvailabilityPickerStyle0; }
-}, [65, "nylas-specific-date-availability-picker", {
+    static get style() { return NylasSpecificTimeAvailabilityPickerStyle0; }
+}, [65, "nylas-specific-time-availability-picker", {
         "name": [1],
         "selectedConfiguration": [16],
         "selectedLanguage": [1, "selected-language"],
-        "specificDateOpenHours": [16],
+        "specificTimesAvailability": [16],
         "themeConfig": [16],
         "specificDateEntries": [32],
         "validationErrors": [32]
@@ -302,7 +302,7 @@ const NylasSpecificDateAvailabilityPicker = proxyCustomElement(class NylasSpecif
     }]);
 __decorate([
     RegisterComponent({
-        name: 'nylas-specific-date-availability-picker',
+        name: 'nylas-specific-time-availability-picker',
         stateToProps: new Map([
             ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],
             ['schedulerConfig.selectedLanguage', 'selectedLanguage'],
@@ -313,16 +313,16 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
-], NylasSpecificDateAvailabilityPicker.prototype, "render", null);
+], NylasSpecificTimeAvailabilityPicker.prototype, "render", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nylas-specific-date-availability-picker", "add-circle-icon", "button-component", "calendar-icon", "close-icon", "loading-icon", "nylas-date-component", "nylas-time-window-picker"];
+    const components = ["nylas-specific-time-availability-picker", "add-circle-icon", "button-component", "calendar-icon", "close-icon", "loading-icon", "nylas-date-component", "nylas-time-window-picker"];
     components.forEach(tagName => { switch (tagName) {
-        case "nylas-specific-date-availability-picker":
+        case "nylas-specific-time-availability-picker":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, NylasSpecificDateAvailabilityPicker);
+                customElements.define(tagName, NylasSpecificTimeAvailabilityPicker);
             }
             break;
         case "add-circle-icon":
@@ -363,6 +363,6 @@ function defineCustomElement() {
     } });
 }
-export { NylasSpecificDateAvailabilityPicker as N, defineCustomElement as d };
+export { NylasSpecificTimeAvailabilityPicker as N, defineCustomElement as d };
-//# sourceMappingURL=nylas-specific-date-availability-picker2.js.map
+//# sourceMappingURL=nylas-specific-time-availability-picker2.js.map

package/dist/components/nylas-specific-time-availability-picker2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"nylas-specific-time-availability-picker2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler-editor/nylas-specific-time-availability-picker/nylas-specific-time-availability-picker.scss?tag=nylas-specific-time-availability-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-specific-time-availability-picker/nylas-specific-time-availability-picker.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.nylas-specific-time-availability-picker {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border-top: 1px solid var(--nylas-base-200);\n\n .content {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 16px;\n }\n\n .header {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n .header-description {\n margin: 0;\n font-size: 0.875rem;\n color: var(--nylas-base-600);\n line-height: 1.5;\n }\n }\n\n .specific-times {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 2rem 1rem;\n text-align: center;\n\n .empty-icon {\n margin-bottom: 1.5rem;\n opacity: 0.4;\n color: var(--nylas-base-400);\n }\n\n .empty-title {\n margin: 0 0 0.5rem 0;\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--nylas-base-700);\n line-height: 1.5;\n }\n\n .empty-subtitle {\n margin: 0;\n font-size: 0.875rem;\n color: var(--nylas-base-500);\n line-height: 1.5;\n max-width: 300px;\n }\n }\n\n .specific-time-entry {\n display: flex;\n flex-direction: column;\n gap: 0;\n padding: 12px;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius);\n background: var(--nylas-base-0);\n\n .entry-content {\n display: grid;\n grid-template-columns: 160px auto 30px 30px;\n gap: 12px;\n\n @media (max-width: 768px) {\n grid-template-areas:\n 'date calendar_toggle remove'\n 'time_or_unavailable time_or_unavailable time_or_unavailable';\n grid-template-columns: 1fr auto auto;\n grid-template-rows: 1fr 1fr;\n }\n }\n\n .date-input-container {\n flex: 0 0 auto;\n width: 160px;\n @media (max-width: 768px) {\n grid-area: date;\n }\n .date-input {\n width: 100%;\n }\n nylas-date-component::part(ic__date) {\n border: 1px solid var(--nylas-base-200);\n height: 50px;\n display: flex;\n align-items: center;\n }\n }\n\n .time-pickers {\n display: grid;\n grid-template-columns: auto 10px 1fr;\n width: 342px;\n gap: 14px;\n flex: 1;\n min-width: 0;\n\n @media (max-width: 768px) {\n flex: 1;\n width: auto;\n grid-area: time_or_unavailable;\n }\n\n .time-separator {\n font-size: 0.875rem;\n color: var(--nylas-base-600);\n font-weight: 500;\n flex-shrink: 0;\n line-height: 1;\n padding: 0 0px 0px 6px;\n margin-top: 18px;\n }\n }\n\n .unavailable-text {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 15px;\n border-radius: var(--nylas-border-radius);\n background: var(--nylas-base-50);\n min-height: 50px;\n @media (max-width: 768px) {\n grid-area: time_or_unavailable;\n }\n .unavailable-label {\n font-size: 0.875rem;\n color: var(--nylas-base-500);\n font-style: italic;\n }\n }\n\n .toggle-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 48px;\n padding-left: 8px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--nylas-base-400);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n @media (max-width: 768px) {\n grid-area: calendar_toggle;\n }\n &:hover {\n color: var(--nylas-primary);\n }\n\n &:focus {\n outline: none;\n }\n\n &.unavailable {\n color: var(--nylas-error);\n\n &:hover {\n color: var(--nylas-error);\n }\n }\n }\n\n .remove-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 48px;\n padding: 0;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--nylas-base-400);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n @media (max-width: 768px) {\n grid-area: remove;\n }\n &:hover {\n color: var(--nylas-error);\n }\n\n &:focus {\n outline: none;\n background: var(--nylas-base-100);\n box-shadow: 0 0 0 2px var(--nylas-primary);\n }\n\n &:active {\n background: var(--nylas-base-200);\n }\n }\n\n .error-message {\n width: -webkit-fill-available;\n padding: 4px 8px;\n background: var(--nylas-error-50);\n color: var(--nylas-error);\n font-size: 12px;\n border-radius: 4px;\n border: 1px solid var(--nylas-error-200);\n margin-top: 8px;\n }\n }\n\n .add-button-container {\n display: flex;\n justify-content: flex-start;\n button-component {\n width: 100%;\n }\n }\n}\n\n// Override button-component styles for the add button\n::part(nstap__add-button) {\n border: 1px dashed var(--nylas-base-200);\n background: var(--nylas-base-0);\n color: var(--nylas-base-700);\n\n &:hover {\n border-color: var(--nylas-primary);\n background: var(--nylas-base-50);\n color: var(--nylas-primary);\n }\n}\n\n// Custom styling for time picker components\n::part(nstap__time-picker-container) {\n flex: 1;\n min-width: 0;\n}\n\n::part(nstap__time-picker-input) {\n width: 100%;\n font-size: 0.875rem;\n min-height: 50px;\n display: flex;\n align-items: center;\n}\n\n// Custom styling for date input component\n::part(nstap__date-input) {\n width: 100%;\n}\n\n::part(nstap__date-field) {\n width: 100%;\n font-size: 0.875rem;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius);\n padding: 0.5rem 0.75rem;\n\n &:focus {\n border-color: var(--nylas-primary);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n}\n\n::part(nstap__date-wrapper) {\n margin: 0;\n}\n\n::part(nstap__date-label) {\n margin: 0;\n padding: 0;\n\n p {\n display: none; // Hide label since we don't need it\n }\n}\n","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"],"version":3}