npm - @nylas/web-elements - Versions diffs - 1.3.2 → 1.3.3 - Mend

@nylas/web-elements 1.3.2 → 1.3.3

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

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

@@ -56,14 +56,8 @@ const NylasBufferTime = proxyCustomElement(class NylasBufferTime extends HTMLEle
             this.selectedBeforeBufferTime = this.buffer.before;
             this.selectedAfterBufferTime = this.buffer.after;
         }
+        this.updateFormValue();
         this.componentLoaded = true;
-        if (typeof this.internals.setFormValue === 'function') {
-            const bufferTime = {
-                before: this.selectedBeforeBufferTime,
-                after: this.selectedAfterBufferTime,
-            };
-            this.internals.setFormValue(JSON.stringify(bufferTime), this.name);
-        }
     }
     componentWillUpdate() {
         debug('nylas-buffer-time', 'componentWillUpdate');
@@ -86,6 +80,7 @@ const NylasBufferTime = proxyCustomElement(class NylasBufferTime extends HTMLEle
         const buffer = newValue?.availability?.availability_rules?.buffer;
         this.selectedAfterBufferTime = buffer?.after ? buffer.after : this.buffer.after;
         this.selectedBeforeBufferTime = buffer?.before ? buffer.before : this.buffer.before;
+        this.updateFormValue();
     }
     nylasFormDropdownChangedHandler(event) {
         debug('nylas-buffer-time', 'nylasFormDropdownChangedHandler', event.detail);
@@ -97,14 +92,20 @@ const NylasBufferTime = proxyCustomElement(class NylasBufferTime extends HTMLEle
             else if (name === 'after-buffer-time') {
                 this.selectedAfterBufferTime = parseInt(value);
             }
-            const bufferTime = {
-                before: this.selectedBeforeBufferTime,
-                after: this.selectedAfterBufferTime,
-            };
-            this.internals.setFormValue(JSON.stringify(bufferTime), 'booking-calendar');
+            this.updateFormValue();
         };
         this.valueChanged.emit({ ...event.detail, valueChanged });
     }
+    get isInternalsAvailable() {
+        return this.internals !== undefined && typeof this.internals.setFormValue === 'function';
+    }
+    updateFormValue() {
+        const bufferTime = {
+            before: this.selectedBeforeBufferTime,
+            after: this.selectedAfterBufferTime,
+        };
+        this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(bufferTime), this.name);
+    }
     renderPreview() {
         const totalSlots = 4;
         const slotHeight = 10;

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

	@@ -1 +1 @@
1	- {"file":"nylas-buffer-time2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.scss?tag=nylas-buffer-time&encapsulation=shadow","src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-buffer-time {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n text-align: left;\n\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n p {\n display: flex;\n gap: 4px;\n align-items: center;\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n\n .nylas-buffer-time__body {\n display: grid;\n grid-template-columns: 1fr auto;\n\n @media #{$mobile} {\n grid-template-columns: 1fr;\n }\n\n .nylas-buffer-time__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border-right: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-800);\n\n @media #{$mobile} {\n border: none;\n }\n\n .nylas-buffer-time__row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n gap: 1rem;\n\n label {\n width: 200px;\n }\n\n .dropdown-container {\n display: flex;\n gap: 1rem;\n align-items: center;\n justify-content: flex-end;\n }\n }\n }\n\n .nylas-buffer-time__preview {\n width: 208px;\n background: var(--nylas-base-25);\n border-bottom-right-radius: var(--nylas-border-radius-2x);\n\n @media #{$mobile} {\n width: inherit;\n border-bottom-left-radius: var(--nylas-border-radius-2x);\n }\n\n h4 {\n font-size: 14px;\n line-height: 24px;\n color: var(--nylas-base-600);\n font-family: var(--nylas-font-family);\n font-weight: 500;\n text-align: center;\n margin: 0.75rem 0;\n }\n\n .preview-container {\n padding: 0 2rem 1rem;\n\n .slot {\n background-color: transparent;\n border-top: 1px solid var(--nylas-base-300);\n\n &.active {\n background-color: var(--nylas-base-100);\n }\n\n &:last-of-type {\n border-bottom: 1px solid var(--nylas-base-300);\n }\n }\n\n .event-slot {\n background-color: var(--nylas-base-600);\n border-top: 1px solid var(--nylas-base-300);\n }\n }\n }\n }\n\n .nylas-buffer-time__dropdown {\n select-dropdown::part(sd_dropdown-button) {\n width: 104px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n }\n\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/*\n The `nylas-buffer-time` component is a UI component that allows users to set buffer time before and after an event.\n \n @part nbt - The buffer time container\n * @part nbt__header - The header of the buffer time\n * @part nbt__body - The body of the buffer time\n * @part nbt__dropdown-before - The dropdown container for the before buffer time\n * @part nbt__dropdown-button-before - The dropdown button for the before buffer time\n * @part nbt__dropdown-content-before - The dropdown content for the before buffer time\n * @part nbt__dropdown-after - The dropdown container for the after buffer time\n * @part nbt__dropdown-button-after - The dropdown button for the after buffer time\n * @part nbt__dropdown-content-after - The dropdown content for the after buffer time\n * @part nbt__preview - The preview container\n /\n@Component({\n tag: 'nylas-buffer-time',\n styleUrl: 'nylas-buffer-time.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBufferTime {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n @internal\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'buffer-time';\n /\n @standalone\n * The buffer time\n /\n @Prop() buffer: { before: number; after: number } = this.selectedConfiguration?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 };\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected before buffer time.\n /\n @State() selectedBeforeBufferTime: number = this.buffer.before;\n\n /\n The selected after buffer time.\n /\n @State() selectedAfterBufferTime: number = this.buffer.after;\n\n @State() componentLoaded: boolean = false;\n\n /\n This event is fired when the selected buffer time is changed.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-buffer-time', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-buffer-time', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-buffer-time', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-buffer-time', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.selectedBeforeBufferTime = this.buffer.before;\n this.selectedAfterBufferTime = this.buffer.after;\n }\n this.componentLoaded = true;\n\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n const bufferTime = {\n before: this.selectedBeforeBufferTime,\n after: this.selectedAfterBufferTime,\n };\n this.internals.setFormValue(JSON.stringify(bufferTime), this.name);\n }\n }\n\n componentWillUpdate() {\n debug('nylas-buffer-time', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-buffer-time', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-buffer-time', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-buffer-time', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-buffer-time', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-buffer-time', 'selectedConfigurationChangedHandler', newValue);\n const buffer = newValue?.availability?.availability_rules?.buffer;\n this.selectedAfterBufferTime = buffer?.after ? buffer.after : this.buffer.after;\n this.selectedBeforeBufferTime = buffer?.before ? buffer.before : this.buffer.before;\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-buffer-time', 'nylasFormDropdownChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value, name } = event.detail;\n if (name === 'before-buffer-time') {\n this.selectedBeforeBufferTime = parseInt(value);\n } else if (name === 'after-buffer-time') {\n this.selectedAfterBufferTime = parseInt(value);\n }\n const bufferTime = {\n before: this.selectedBeforeBufferTime,\n after: this.selectedAfterBufferTime,\n };\n this.internals.setFormValue(JSON.stringify(bufferTime), 'booking-calendar');\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n renderPreview() {\n const totalSlots = 4;\n const slotHeight = 10; // The height for each 30-minute slot\n\n // Event slot height is constant\n const eventSlotHeight = slotHeight 2;\n\n // Helper function to determine the fill of a slot based on the minutes selected\n const slotFill = minutes => {\n const fullSlots = Math.floor(minutes / 30);\n const partialFillHeight = ((minutes % 30) / 30) * slotHeight;\n\n return {\n fullSlots,\n partialFillHeight,\n };\n };\n\n // Helper function to create before slots\n const createBeforeSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedBeforeBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n // Slot is active if its index is greater than the total slots minus the full slots minus one\n // and there are some minutes selected.\n const isActive = this.selectedBeforeBufferTime > 0 && index > totalSlots - fullSlots - 1;\n const isPartial = this.selectedBeforeBufferTime > 0 && index === totalSlots - fullSlots - 1 && partialFillHeight > 0;\n\n let slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n key={index}\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n // Helper function to create after slots\n const createAfterSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedAfterBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n const isActive = this.selectedAfterBufferTime > 0 && index < fullSlots;\n const isPartial = index === fullSlots && partialFillHeight > 0;\n\n let slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n key={index}\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n return (\n <div class=\"preview-container\">\n {createBeforeSlots()}\n <div class=\"event-slot\" style={{ height: `${eventSlotHeight}px` }}></div>\n {createAfterSlots()}\n </div>\n );\n }\n\n @RegisterComponent<NylasBufferTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-buffer-time',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const minuteOptions = Array.from({ length: 25 }, (_, i) => {\n const value = i * 5;\n return {\n label: value.toString(),\n value: value,\n };\n });\n\n return (\n <Host>\n <div class=\"nylas-buffer-time\" part=\"nbt\">\n <div class=\"header\" part=\"nbt__header\">\n <h3>Buffer time</h3>\n <p>\n Require empty buffer time before and after an event.\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Scheduler does not book the buffer time.</span>\n </tooltip-component>\n </p>\n </div>\n <div class=\"nylas-buffer-time__body\" part=\"nbt__body\">\n <div class=\"nylas-buffer-time__dropdown\">\n <div class=\"nylas-buffer-time__row\">\n <label>Before the event</label>\n <div class=\"dropdown-container\">\n {this.componentLoaded && (\n <select-dropdown\n id=\"before-buffer-time\"\n withSearch={false}\n name=\"before-buffer-time\"\n exportparts=\"sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedBeforeBufferTime)}\n />\n )}\n <span>mins</span>\n </div>\n </div>\n <div class=\"nylas-buffer-time__row\">\n <label>After the event</label>\n <div class=\"dropdown-container\">\n {this.componentLoaded && (\n <select-dropdown\n id=\"after-buffer-time\"\n withSearch={false}\n name=\"after-buffer-time\"\n exportparts=\"sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedAfterBufferTime)}\n />\n )}\n <span>mins</span>\n </div>\n </div>\n </div>\n <div class=\"nylas-buffer-time__preview\" part=\"nbt__preview\">\n <h4>PREVIEW</h4>\n {this.renderPreview()}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-buffer-time2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.scss?tag=nylas-buffer-time&encapsulation=shadow","src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-buffer-time {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n text-align: left;\n\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n p {\n display: flex;\n gap: 4px;\n align-items: center;\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n\n .nylas-buffer-time__body {\n display: grid;\n grid-template-columns: 1fr auto;\n\n @media #{$mobile} {\n grid-template-columns: 1fr;\n }\n\n .nylas-buffer-time__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border-right: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-800);\n\n @media #{$mobile} {\n border: none;\n }\n\n .nylas-buffer-time__row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n gap: 1rem;\n\n label {\n width: 200px;\n }\n\n .dropdown-container {\n display: flex;\n gap: 1rem;\n align-items: center;\n justify-content: flex-end;\n }\n }\n }\n\n .nylas-buffer-time__preview {\n width: 208px;\n background: var(--nylas-base-25);\n border-bottom-right-radius: var(--nylas-border-radius-2x);\n\n @media #{$mobile} {\n width: inherit;\n border-bottom-left-radius: var(--nylas-border-radius-2x);\n }\n\n h4 {\n font-size: 14px;\n line-height: 24px;\n color: var(--nylas-base-600);\n font-family: var(--nylas-font-family);\n font-weight: 500;\n text-align: center;\n margin: 0.75rem 0;\n }\n\n .preview-container {\n padding: 0 2rem 1rem;\n\n .slot {\n background-color: transparent;\n border-top: 1px solid var(--nylas-base-300);\n\n &.active {\n background-color: var(--nylas-base-100);\n }\n\n &:last-of-type {\n border-bottom: 1px solid var(--nylas-base-300);\n }\n }\n\n .event-slot {\n background-color: var(--nylas-base-600);\n border-top: 1px solid var(--nylas-base-300);\n }\n }\n }\n }\n\n .nylas-buffer-time__dropdown {\n select-dropdown::part(sd_dropdown-button) {\n width: 104px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n }\n\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/*\n The `nylas-buffer-time` component is a UI component that allows users to set buffer time before and after an event.\n \n @part nbt - The buffer time container\n * @part nbt__header - The header of the buffer time\n * @part nbt__body - The body of the buffer time\n * @part nbt__dropdown-before - The dropdown container for the before buffer time\n * @part nbt__dropdown-button-before - The dropdown button for the before buffer time\n * @part nbt__dropdown-content-before - The dropdown content for the before buffer time\n * @part nbt__dropdown-after - The dropdown container for the after buffer time\n * @part nbt__dropdown-button-after - The dropdown button for the after buffer time\n * @part nbt__dropdown-content-after - The dropdown content for the after buffer time\n * @part nbt__preview - The preview container\n /\n@Component({\n tag: 'nylas-buffer-time',\n styleUrl: 'nylas-buffer-time.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBufferTime {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n @internal\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'buffer-time';\n /\n @standalone\n * The buffer time\n /\n @Prop() buffer: { before: number; after: number } = this.selectedConfiguration?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 };\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected before buffer time.\n /\n @State() selectedBeforeBufferTime: number = this.buffer.before;\n\n /\n The selected after buffer time.\n /\n @State() selectedAfterBufferTime: number = this.buffer.after;\n\n @State() componentLoaded: boolean = false;\n\n /\n This event is fired when the selected buffer time is changed.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-buffer-time', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-buffer-time', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-buffer-time', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-buffer-time', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.selectedBeforeBufferTime = this.buffer.before;\n this.selectedAfterBufferTime = this.buffer.after;\n }\n this.updateFormValue();\n this.componentLoaded = true;\n }\n\n componentWillUpdate() {\n debug('nylas-buffer-time', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-buffer-time', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-buffer-time', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-buffer-time', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-buffer-time', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-buffer-time', 'selectedConfigurationChangedHandler', newValue);\n const buffer = newValue?.availability?.availability_rules?.buffer;\n this.selectedAfterBufferTime = buffer?.after ? buffer.after : this.buffer.after;\n this.selectedBeforeBufferTime = buffer?.before ? buffer.before : this.buffer.before;\n this.updateFormValue();\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-buffer-time', 'nylasFormDropdownChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value, name } = event.detail;\n if (name === 'before-buffer-time') {\n this.selectedBeforeBufferTime = parseInt(value);\n } else if (name === 'after-buffer-time') {\n this.selectedAfterBufferTime = parseInt(value);\n }\n this.updateFormValue();\n };\n this.valueChanged.emit({ ...event.detail, valueChanged });\n }\n\n /\n This method is essentially a workaround to check if the internals are available because\n * the unit tests in stencil do not support the internals.\n * @returns boolean\n /\n get isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function';\n }\n\n updateFormValue() {\n const bufferTime = {\n before: this.selectedBeforeBufferTime,\n after: this.selectedAfterBufferTime,\n };\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(bufferTime), this.name);\n }\n\n renderPreview() {\n const totalSlots = 4;\n const slotHeight = 10; // The height for each 30-minute slot\n\n // Event slot height is constant\n const eventSlotHeight = slotHeight 2;\n\n // Helper function to determine the fill of a slot based on the minutes selected\n const slotFill = minutes => {\n const fullSlots = Math.floor(minutes / 30);\n const partialFillHeight = ((minutes % 30) / 30) * slotHeight;\n\n return {\n fullSlots,\n partialFillHeight,\n };\n };\n\n // Helper function to create before slots\n const createBeforeSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedBeforeBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n // Slot is active if its index is greater than the total slots minus the full slots minus one\n // and there are some minutes selected.\n const isActive = this.selectedBeforeBufferTime > 0 && index > totalSlots - fullSlots - 1;\n const isPartial = this.selectedBeforeBufferTime > 0 && index === totalSlots - fullSlots - 1 && partialFillHeight > 0;\n\n let slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n key={index}\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n // Helper function to create after slots\n const createAfterSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedAfterBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n const isActive = this.selectedAfterBufferTime > 0 && index < fullSlots;\n const isPartial = index === fullSlots && partialFillHeight > 0;\n\n let slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n key={index}\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n return (\n <div class=\"preview-container\">\n {createBeforeSlots()}\n <div class=\"event-slot\" style={{ height: `${eventSlotHeight}px` }}></div>\n {createAfterSlots()}\n </div>\n );\n }\n\n @RegisterComponent<NylasBufferTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-buffer-time',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const minuteOptions = Array.from({ length: 25 }, (_, i) => {\n const value = i * 5;\n return {\n label: value.toString(),\n value: value,\n };\n });\n\n return (\n <Host>\n <div class=\"nylas-buffer-time\" part=\"nbt\">\n <div class=\"header\" part=\"nbt__header\">\n <h3>Buffer time</h3>\n <p>\n Require empty buffer time before and after an event.\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Scheduler does not book the buffer time.</span>\n </tooltip-component>\n </p>\n </div>\n <div class=\"nylas-buffer-time__body\" part=\"nbt__body\">\n <div class=\"nylas-buffer-time__dropdown\">\n <div class=\"nylas-buffer-time__row\">\n <label>Before the event</label>\n <div class=\"dropdown-container\">\n {this.componentLoaded && (\n <select-dropdown\n id=\"before-buffer-time\"\n withSearch={false}\n name=\"before-buffer-time\"\n exportparts=\"sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedBeforeBufferTime)}\n />\n )}\n <span>mins</span>\n </div>\n </div>\n <div class=\"nylas-buffer-time__row\">\n <label>After the event</label>\n <div class=\"dropdown-container\">\n {this.componentLoaded && (\n <select-dropdown\n id=\"after-buffer-time\"\n withSearch={false}\n name=\"after-buffer-time\"\n exportparts=\"sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedAfterBufferTime)}\n />\n )}\n <span>mins</span>\n </div>\n </div>\n </div>\n <div class=\"nylas-buffer-time__preview\" part=\"nbt__preview\">\n <h4>PREVIEW</h4>\n {this.renderPreview()}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-connected-calendars2.js CHANGED Viewed

@@ -155,14 +155,14 @@ const NylasConnectedCalendars = proxyCustomElement(class NylasConnectedCalendars
                 selectedParticipants[participant.email] = {
                     isOpen: isOpen,
                     name: participant.name || participant.email,
-                    availability: participant.availability,
+                    calendars: participant.availability?.calendar_ids,
                 };
             }
         });
         return selectedParticipants;
     }
     render() {
-        return (h(Host, { key: '32710fe762bdf90e238c62695957a9fca31db258' }, h("div", { key: 'a5ebf4adb7eb8e1b8a065bc05733738da06fbac3', class: "nylas-connected-calendars", part: "nccals" }, h("div", { key: 'f3c820bcde922a7b852630d86145b1e6e1bf0e25', class: "header", part: "nccals__header" }, h("h3", { key: 'e2b68d05d416c322b22f969d8d8c890a09812154' }, "Connected Calendars"), h("p", { key: '4dd41d10a6043fec1c0f4943371c312a29e1d489' }, "Select the calendars to use for checking your availability.", h("tooltip-component", { key: '6a8ec009fd879e1ed6b6fb65be75a88255adba17' }, h("info-icon", { key: '0d4a99eaee064ecee1c82ee5b13f3ab87a1d5d93', slot: "tooltip-icon" }), h("span", { key: 'de3779efce64d7a14dbc3f7759c827005f92ed50', slot: "tooltip-content" }, "Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their calendars to be considered available.")))), h("div", { key: '720267110636c1dc06ac67b7e715515f56737b73', class: "content", part: "nccals__content" }, h("form", { key: 'f295ba327aa302ea186dbf2daef3a9c30f96ee5f', ref: el => (this.connectedCalendarsFormRef = el) }, Object.keys(this.participantCalendars).map((key, index) => {
+        return (h(Host, { key: '4b8cfcfa751c2790968049f6f10a06193f9adc70' }, h("div", { key: 'ffbcde80612886bc09b4419bc1cc47d585834fac', class: "nylas-connected-calendars", part: "nccals" }, h("div", { key: 'd00c14cd0ab8107a2ba609ba58b596a7d3e1e69f', class: "header", part: "nccals__header" }, h("h3", { key: 'cb0ad20533c33a3778d0b89fe5d51aa4c15864a8' }, "Connected Calendars"), h("p", { key: 'b3488e835534f477d2585be0a60b5800d42cbaac' }, "Select the calendars to use for checking your availability.", h("tooltip-component", { key: '6acbd37df60566fa8a3fb8676fe3b3f4287d5c06' }, h("info-icon", { key: 'f1eb4a75f869b09bee95c074c8d180449654a49f', slot: "tooltip-icon" }), h("span", { key: 'e8aca8b29c7a89fe7b6eea0635761bdde19349e2', slot: "tooltip-content" }, "Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their calendars to be considered available.")))), h("div", { key: '844803e9ea3270bfcedbc212990c0038a74dd663', class: "content", part: "nccals__content" }, h("form", { key: '2970ec7cec45d2582b987cbfab8949c1ece02499', ref: el => (this.connectedCalendarsFormRef = el) }, Object.keys(this.participantCalendars).map((key, index) => {
             const participant = this.selectedCalendars[key];
             const participantCalendars = this.participantCalendars[key];
             if (!participant || !participant.name)

package/dist/components/nylas-connected-calendars2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-connected-calendars2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.scss?tag=nylas-connected-calendars&encapsulation=shadow","src/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-connected-calendars {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n\n .header {\n padding: 1rem;\n\n h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n }\n\n .content {\n .participant-container {\n padding-top: 12px;\n border-top: 1px solid var(--nylas-base-200);\n\n .participant-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 4px 16px 16px;\n\n p {\n margin: 0;\n }\n\n .participant-toggle {\n display: flex;\n gap: 24px;\n align-items: center;\n\n .chevron {\n display: flex;\n align-self: center;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.disabled {\n cursor: not-allowed;\n color: var(--nylas-base-300);\n\n &:hover {\n color: var(--nylas-base-300);\n }\n }\n }\n }\n }\n }\n }\n}\n\nnylas-calendar-picker::part(ncp) {\n margin: 0;\n border: none;\n border-top: 1px solid var(--nylas-base-200);\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { AdditionalParticipant, Calendar, Configuration, Participant } from '@nylas/core';\n\n/*\n The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants.\n * @part nccals - The connected calendars host.\n * @part nccals__header - The header.\n * @part nccals__content - The content.\n * @part nccals__container - The container.\n * @part nccals__title - The title.\n * @part nccals__toggle-container - The toggle container.\n /\n@Component({\n tag: 'nylas-connected-calendars',\n styleUrl: 'nylas-connected-calendars.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasConnectedCalendars {\n @Element() host!: HTMLNylasConnectedCalendarsElement;\n private connectedCalendarsFormRef!: HTMLFormElement;\n\n /\n The name of the participants custom availability.\n /\n @Prop() name: string = 'connected-calendars';\n\n /\n @standalone\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n @standalone\n * The participants selected in the add participants section.\n /\n @Prop() participants: Participant[] = this.selectedConfiguration?.participants \|\| [];\n\n /\n @standalone\n * The calendars to choose from for the organizer / logged in user.\n /\n @Prop() calendars?: Calendar[];\n\n /\n @standalone\n * The participant options passed in the additionalParticipants prop\n * from the nylas-scheduler-editor component.\n /\n @Prop() participantOptions?: AdditionalParticipant[];\n\n /\n This event is fired when the participants custom availability changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The state to store the custom availability setting for participants.\n /\n @State() selectedCalendars: {\n [key: string]: {\n isOpen: boolean;\n name: string;\n calendars?: Calendar[];\n };\n } = this.setParticipants(this.participants);\n\n /\n Participants calendar options.\n /\n @State() participantCalendars: {\n [key: string]: Calendar[];\n } = {};\n\n /\n The state to store the default selected calendars for each participant\n */\n @State() participantDefaultSelectedCalendars: {\n [key: string]: string[];\n } = {};\n\n // Watchers\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-connected-calendars', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('calendars')\n calendarsChangedHandler(newValue: Calendar[]) {\n debug('nylas-connected-calendars', 'calendarsChangedHandler', newValue);\n this.selectedCalendars = this.setParticipants(this.participants);\n this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n }\n\n @Watch('participants')\n participantsChangedHandler(newValue: Participant[]) {\n debug('nylas-connected-calendars', 'participantsChangedHandler', newValue);\n this.selectedCalendars = this.setParticipants(newValue);\n this.participantCalendars = this.getParticipantCalendarOptions(newValue, this.participantOptions);\n }\n\n @Watch('participantOptions')\n participantOptionsChangedHandler(newValue: AdditionalParticipant[]) {\n debug('nylas-calendar-picker', 'participantOptionsChangedHandler', newValue);\n this.selectedCalendars = this.setParticipants(this.participants);\n this.participantCalendars = this.getParticipantCalendarOptions(this.participants, newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-calendar-picker', 'selectedConfigurationChangedHandler', newValue);\n const participants = newValue?.participants \|\| this.participants;\n if (participants && participants.length > 0) {\n this.selectedCalendars = this.setParticipants(participants);\n this.participantCalendars = this.getParticipantCalendarOptions(participants, this.participantOptions);\n }\n }\n\n getParticipantCalendarOptions(addedParticipants: Participant[], availableParticipantOptions: AdditionalParticipant[] \| undefined) {\n // Get the participants from the availableParticipantOptions prop that are in the addedParticipants prop\n const organizer = addedParticipants?.find(participant => participant.is_organizer);\n const isRoundRobinConfig = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';\n const participantCalendars = {};\n if (availableParticipantOptions) {\n const participants = addedParticipants?.filter(participant => availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email));\n const remainingParticipants = addedParticipants?.filter(\n participant => !availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email),\n );\n\n // Get the calendar options for each participant with email as the key\n participants?.forEach(participant => {\n const participantOption = availableParticipantOptions?.find(participantOption => participantOption.email === participant.email);\n if (!participantOption) return;\n this.participantDefaultSelectedCalendars[participant.email] = participant.availability?.calendar_ids \|\| [];\n const calendars = participantOption.calendars ?? [];\n participant.availability?.calendar_ids?.forEach(calendarId => {\n if (!calendars?.some(calendar => calendar.id === calendarId) && calendarId !== 'primary') {\n calendars.push({ id: calendarId, name: calendarId });\n }\n });\n participantCalendars[participant.email] = calendars;\n });\n if (isRoundRobinConfig) {\n // If it is round robin config, add the remaining participant calendars to the participantCalendars\n // (Round-robin does not have an organizer, and we filtered out the participants not passed in the participantOptions prop,\n // so we need to add the remaining participants calendars to the participantCalendars)\n remainingParticipants?.forEach(participant => {\n if (participant?.availability?.calendar_ids && participant?.availability?.calendar_ids?.length > 0 && !participant.is_organizer) {\n participantCalendars[participant.email] = this.calendars ?? [{ id: 'primary', name: participant.email }];\n this.participantDefaultSelectedCalendars[participant.email] = participant.availability?.calendar_ids \|\| [];\n }\n });\n }\n }\n\n // Add the organizer's calendars to the participantCalendars\n if (organizer) {\n participantCalendars[organizer.email] = this.calendars ?? [{ id: 'primary', name: organizer.email }];\n this.participantDefaultSelectedCalendars[organizer.email] = organizer.availability?.calendar_ids \|\| [];\n }\n return participantCalendars;\n }\n\n // Lifecycle Methods\n connectedCallback() {\n debug('nylas-connected-calendars', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-connected-calendars', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-connected-calendars', 'componentWillLoad');\n }\n\n componentDidLoad() {\n debug('nylas-connected-calendars', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedCalendars = this.setParticipants(this.selectedConfiguration?.participants);\n this.participantCalendars = this.getParticipantCalendarOptions(this.selectedConfiguration?.participants, this.participantOptions);\n } else {\n this.selectedCalendars = this.setParticipants(this.participants);\n this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n }\n }\n\n @Listen('valueChanged')\n handleValueChanged(event: CustomEvent) {\n debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n const { name, value } = event.detail;\n if (!name.startsWith('participant-')) {\n return;\n }\n // Validate the form\n if (!this.connectedCalendarsFormRef.checkValidity()) {\n this.internals.setValidity({ customError: true }, 'Please select at least one calendar for each participant.');\n return;\n } else {\n this.internals.setValidity({});\n }\n\n const key = name.split('participant-')[1];\n if (!this.selectedCalendars[key]) return;\n this.selectedCalendars[key]['calendars'] = value;\n this.selectedCalendars = { ...this.selectedCalendars };\n\n const participantsCalendars = {};\n Object.keys(this.selectedCalendars).forEach(key => {\n participantsCalendars[key] = this.selectedCalendars[key].calendars;\n });\n this.internals.setFormValue(JSON.stringify(participantsCalendars), this.name);\n this.valueChanged.emit({ value: JSON.stringify(participantsCalendars), name: this.name });\n }\n\n setParticipants(participants: Participant[]) {\n const selectedParticipants = {};\n participants?.forEach(participant => {\n if (participant?.availability?.calendar_ids && participant?.availability?.calendar_ids?.length > 0) {\n const isOpen = participant.is_organizer ? true : false;\n selectedParticipants[participant.email] = {\n isOpen: isOpen,\n name: participant.name \|\| participant.email,\n availability: participant.availability,\n };\n }\n });\n return selectedParticipants;\n }\n @RegisterComponent<NylasConnectedCalendars, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-connected-calendars',\n stateToProps: new Map([\n ['schedulerConfig.additionalParticipants', 'participantOptions'],\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-connected-calendars\" part=\"nccals\">\n <div class=\"header\" part=\"nccals__header\">\n <h3>Connected Calendars</h3>\n <p>\n Select the calendars to use for checking your availability.\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their\n calendars to be considered available.\n </span>\n </tooltip-component>\n </p>\n </div>\n <div class=\"content\" part=\"nccals__content\">\n <form ref={el => (this.connectedCalendarsFormRef = el as HTMLFormElement)}>\n {Object.keys(this.participantCalendars).map((key, index) => {\n const participant = this.selectedCalendars[key];\n const participantCalendars = this.participantCalendars[key];\n if (!participant \|\| !participant.name) return;\n return (\n <div class=\"participant-container\" part=\"nccals__container\" key={`participant-conatiner-${index}`}>\n <div class=\"participant-title\" part=\"nccals__title\">\n <p>{participant.name}'s connected calendars</p>\n <div class=\"participant-toggle\" part=\"nccals__toggle-container\">\n <span\n class={`chevron ${participant.isOpen ? 'open' : 'closed'}`}\n onClick={() => {\n this.selectedCalendars[key].isOpen = !participant.isOpen;\n this.selectedCalendars = { ...this.selectedCalendars };\n }}\n >\n <chevron-icon width=\"24\" height=\"24\" />\n </span>\n </div>\n </div>\n {participant.isOpen && (\n <nylas-calendar-picker\n key={key}\n name={`participant-${key}`}\n calendars={participantCalendars}\n defaultSelectedCalendars={this.participantDefaultSelectedCalendars[key]}\n />\n )}\n </div>\n );\n })}\n </form>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-connected-calendars2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.scss?tag=nylas-connected-calendars&encapsulation=shadow","src/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-connected-calendars {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n\n .header {\n padding: 1rem;\n\n h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n }\n\n .content {\n .participant-container {\n padding-top: 12px;\n border-top: 1px solid var(--nylas-base-200);\n\n .participant-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 4px 16px 16px;\n\n p {\n margin: 0;\n }\n\n .participant-toggle {\n display: flex;\n gap: 24px;\n align-items: center;\n\n .chevron {\n display: flex;\n align-self: center;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.disabled {\n cursor: not-allowed;\n color: var(--nylas-base-300);\n\n &:hover {\n color: var(--nylas-base-300);\n }\n }\n }\n }\n }\n }\n }\n}\n\nnylas-calendar-picker::part(ncp) {\n margin: 0;\n border: none;\n border-top: 1px solid var(--nylas-base-200);\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { AdditionalParticipant, Calendar, Configuration, Participant } from '@nylas/core';\n\n/*\n The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants.\n * @part nccals - The connected calendars host.\n * @part nccals__header - The header.\n * @part nccals__content - The content.\n * @part nccals__container - The container.\n * @part nccals__title - The title.\n * @part nccals__toggle-container - The toggle container.\n /\n@Component({\n tag: 'nylas-connected-calendars',\n styleUrl: 'nylas-connected-calendars.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasConnectedCalendars {\n @Element() host!: HTMLNylasConnectedCalendarsElement;\n private connectedCalendarsFormRef!: HTMLFormElement;\n\n /\n The name of the participants custom availability.\n /\n @Prop() name: string = 'connected-calendars';\n\n /\n @standalone\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n @standalone\n * The participants selected in the add participants section.\n /\n @Prop() participants: Participant[] = this.selectedConfiguration?.participants \|\| [];\n\n /\n @standalone\n * The calendars to choose from for the organizer / logged in user.\n /\n @Prop() calendars?: Calendar[];\n\n /\n @standalone\n * The participant options passed in the additionalParticipants prop\n * from the nylas-scheduler-editor component.\n /\n @Prop() participantOptions?: AdditionalParticipant[];\n\n /\n This event is fired when the participants custom availability changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The state to store the custom availability setting for participants.\n /\n @State() selectedCalendars: {\n [key: string]: {\n isOpen: boolean;\n name: string;\n calendars?: Calendar[];\n };\n } = this.setParticipants(this.participants);\n\n /\n Participants calendar options.\n /\n @State() participantCalendars: {\n [key: string]: Calendar[];\n } = {};\n\n /\n The state to store the default selected calendars for each participant\n */\n @State() participantDefaultSelectedCalendars: {\n [key: string]: string[];\n } = {};\n\n // Watchers\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-connected-calendars', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('calendars')\n calendarsChangedHandler(newValue: Calendar[]) {\n debug('nylas-connected-calendars', 'calendarsChangedHandler', newValue);\n this.selectedCalendars = this.setParticipants(this.participants);\n this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n }\n\n @Watch('participants')\n participantsChangedHandler(newValue: Participant[]) {\n debug('nylas-connected-calendars', 'participantsChangedHandler', newValue);\n this.selectedCalendars = this.setParticipants(newValue);\n this.participantCalendars = this.getParticipantCalendarOptions(newValue, this.participantOptions);\n }\n\n @Watch('participantOptions')\n participantOptionsChangedHandler(newValue: AdditionalParticipant[]) {\n debug('nylas-calendar-picker', 'participantOptionsChangedHandler', newValue);\n this.selectedCalendars = this.setParticipants(this.participants);\n this.participantCalendars = this.getParticipantCalendarOptions(this.participants, newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-calendar-picker', 'selectedConfigurationChangedHandler', newValue);\n const participants = newValue?.participants \|\| this.participants;\n if (participants && participants.length > 0) {\n this.selectedCalendars = this.setParticipants(participants);\n this.participantCalendars = this.getParticipantCalendarOptions(participants, this.participantOptions);\n }\n }\n\n getParticipantCalendarOptions(addedParticipants: Participant[], availableParticipantOptions: AdditionalParticipant[] \| undefined) {\n // Get the participants from the availableParticipantOptions prop that are in the addedParticipants prop\n const organizer = addedParticipants?.find(participant => participant.is_organizer);\n const isRoundRobinConfig = this.selectedConfiguration?.availability?.availability_rules?.availability_method !== 'collective';\n const participantCalendars = {};\n if (availableParticipantOptions) {\n const participants = addedParticipants?.filter(participant => availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email));\n const remainingParticipants = addedParticipants?.filter(\n participant => !availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email),\n );\n\n // Get the calendar options for each participant with email as the key\n participants?.forEach(participant => {\n const participantOption = availableParticipantOptions?.find(participantOption => participantOption.email === participant.email);\n if (!participantOption) return;\n this.participantDefaultSelectedCalendars[participant.email] = participant.availability?.calendar_ids \|\| [];\n const calendars = participantOption.calendars ?? [];\n participant.availability?.calendar_ids?.forEach(calendarId => {\n if (!calendars?.some(calendar => calendar.id === calendarId) && calendarId !== 'primary') {\n calendars.push({ id: calendarId, name: calendarId });\n }\n });\n participantCalendars[participant.email] = calendars;\n });\n if (isRoundRobinConfig) {\n // If it is round robin config, add the remaining participant calendars to the participantCalendars\n // (Round-robin does not have an organizer, and we filtered out the participants not passed in the participantOptions prop,\n // so we need to add the remaining participants calendars to the participantCalendars)\n remainingParticipants?.forEach(participant => {\n if (participant?.availability?.calendar_ids && participant?.availability?.calendar_ids?.length > 0 && !participant.is_organizer) {\n participantCalendars[participant.email] = this.calendars ?? [{ id: 'primary', name: participant.email }];\n this.participantDefaultSelectedCalendars[participant.email] = participant.availability?.calendar_ids \|\| [];\n }\n });\n }\n }\n\n // Add the organizer's calendars to the participantCalendars\n if (organizer) {\n participantCalendars[organizer.email] = this.calendars ?? [{ id: 'primary', name: organizer.email }];\n this.participantDefaultSelectedCalendars[organizer.email] = organizer.availability?.calendar_ids \|\| [];\n }\n return participantCalendars;\n }\n\n // Lifecycle Methods\n connectedCallback() {\n debug('nylas-connected-calendars', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-connected-calendars', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-connected-calendars', 'componentWillLoad');\n }\n\n componentDidLoad() {\n debug('nylas-connected-calendars', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedCalendars = this.setParticipants(this.selectedConfiguration?.participants);\n this.participantCalendars = this.getParticipantCalendarOptions(this.selectedConfiguration?.participants, this.participantOptions);\n } else {\n this.selectedCalendars = this.setParticipants(this.participants);\n this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n }\n }\n\n @Listen('valueChanged')\n handleValueChanged(event: CustomEvent) {\n debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n const { name, value } = event.detail;\n if (!name.startsWith('participant-')) {\n return;\n }\n // Validate the form\n if (!this.connectedCalendarsFormRef.checkValidity()) {\n this.internals.setValidity({ customError: true }, 'Please select at least one calendar for each participant.');\n return;\n } else {\n this.internals.setValidity({});\n }\n\n const key = name.split('participant-')[1];\n if (!this.selectedCalendars[key]) return;\n this.selectedCalendars[key]['calendars'] = value;\n this.selectedCalendars = { ...this.selectedCalendars };\n\n const participantsCalendars = {};\n Object.keys(this.selectedCalendars).forEach(key => {\n participantsCalendars[key] = this.selectedCalendars[key].calendars;\n });\n this.internals.setFormValue(JSON.stringify(participantsCalendars), this.name);\n this.valueChanged.emit({ value: JSON.stringify(participantsCalendars), name: this.name });\n }\n\n setParticipants(participants: Participant[]) {\n const selectedParticipants = {};\n participants?.forEach(participant => {\n if (participant?.availability?.calendar_ids && participant?.availability?.calendar_ids?.length > 0) {\n const isOpen = participant.is_organizer ? true : false;\n selectedParticipants[participant.email] = {\n isOpen: isOpen,\n name: participant.name \|\| participant.email,\n calendars: participant.availability?.calendar_ids,\n };\n }\n });\n return selectedParticipants;\n }\n @RegisterComponent<NylasConnectedCalendars, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-connected-calendars',\n stateToProps: new Map([\n ['schedulerConfig.additionalParticipants', 'participantOptions'],\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-connected-calendars\" part=\"nccals\">\n <div class=\"header\" part=\"nccals__header\">\n <h3>Connected Calendars</h3>\n <p>\n Select the calendars to use for checking your availability.\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or more calendars. If you select multiple calendars for a participant, the participant must be available across all of their\n calendars to be considered available.\n </span>\n </tooltip-component>\n </p>\n </div>\n <div class=\"content\" part=\"nccals__content\">\n <form ref={el => (this.connectedCalendarsFormRef = el as HTMLFormElement)}>\n {Object.keys(this.participantCalendars).map((key, index) => {\n const participant = this.selectedCalendars[key];\n const participantCalendars = this.participantCalendars[key];\n if (!participant \|\| !participant.name) return;\n return (\n <div class=\"participant-container\" part=\"nccals__container\" key={`participant-conatiner-${index}`}>\n <div class=\"participant-title\" part=\"nccals__title\">\n <p>{participant.name}'s connected calendars</p>\n <div class=\"participant-toggle\" part=\"nccals__toggle-container\">\n <span\n class={`chevron ${participant.isOpen ? 'open' : 'closed'}`}\n onClick={() => {\n this.selectedCalendars[key].isOpen = !participant.isOpen;\n this.selectedCalendars = { ...this.selectedCalendars };\n }}\n >\n <chevron-icon width=\"24\" height=\"24\" />\n </span>\n </div>\n </div>\n {participant.isOpen && (\n <nylas-calendar-picker\n key={key}\n name={`participant-${key}`}\n calendars={participantCalendars}\n defaultSelectedCalendars={this.participantDefaultSelectedCalendars[key]}\n />\n )}\n </div>\n );\n })}\n </form>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-date-component2.js CHANGED Viewed

@@ -27,6 +27,7 @@ const NylasDateComponent = proxyCustomElement(class NylasDateComponent extends H
         this.requiredError = '';
         this.value = undefined;
         this.error = '';
+        this.isDateValid = true;
     }
     handleDefaultValueChange(newValue) {
         this.value = sanitize(newValue);
@@ -47,16 +48,16 @@ const NylasDateComponent = proxyCustomElement(class NylasDateComponent extends H
         }
     }
     async handleFormSubmitted(event) {
-        if (this.el?.getAttribute('data-page-styling')) {
-            this.validatePattern(this.value);
-            if (this.error) {
-                event.preventDefault();
-            }
+        this.validatePattern(this.value);
+        if (this.error) {
+            event.preventDefault();
         }
     }
     handleInput(e) {
         this.error = '';
-        this.value = sanitize(e.target.value);
+        const target = e.target;
+        this.value = sanitize(target.value);
+        this.isDateValid = target.validity.valid;
         this.nylasFormInputChanged.emit({
             value: this.value,
             name: this.name,
@@ -79,6 +80,10 @@ const NylasDateComponent = proxyCustomElement(class NylasDateComponent extends H
     }
     validatePattern(value) {
         this.error = '';
+        if (!this.isDateValid) {
+            this.error = 'Please enter a valid date';
+            return;
+        }
         if (this.required && !value) {
             this.error = this.requiredError || 'This field is required.';
             return;
@@ -93,7 +98,7 @@ const NylasDateComponent = proxyCustomElement(class NylasDateComponent extends H
         }
     }
     render() {
-        return (h("label", { key: '959c6b772ea4f2f4706d72255d1e36ea8d4fcbd3', part: "ic__label", class: { error: !!this.error } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("div", { key: 'a018a19fe2a77416d7ac4d9c7ea84cb0560a70de', part: "ic__input_wrapper", class: "input_wrapper" }, h("input", { key: '7952451a1397dc1a08ac5dc6a251d452a882981b', type: "date", name: this.name, part: "ic__date", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: e => this.handleInput(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), h("slot", { key: '9730db9ef73e570667c69879ce457c45b5e196a5', name: "additional-input" })), this.error && h("span", { class: "error help-text" }, this.error)));
+        return (h("label", { key: 'db7e5910f650055747d1f2bca13356d2c3fe3f9e', part: "ic__label", class: { error: !!this.error } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("div", { key: '81d0a723cec27805587e2abdac667504d078e211', part: "ic__input_wrapper", class: "input_wrapper" }, h("input", { key: '948cf92087a3763d058588c8f6b7764e96234595', type: "date", name: this.name, part: "ic__date", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: e => this.handleInput(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), h("slot", { key: '6c1d31a29dc01621d9212a95574c329844da0eed', name: "additional-input" })), this.error && h("span", { class: "error help-text" }, this.error)));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -113,7 +118,8 @@ const NylasDateComponent = proxyCustomElement(class NylasDateComponent extends H
         "patternError": [1, "pattern-error"],
         "requiredError": [1, "required-error"],
         "value": [32],
-        "error": [32]
+        "error": [32],
+        "isDateValid": [32]
     }, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"], [4, "formSubmitted", "handleFormSubmitted"]], {
         "defaultValue": ["handleDefaultValueChange"]
     }]);

package/dist/components/nylas-date-component2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-date-component2.js","mappings":"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","names":[],"sources":["src/components/design-system/nylas-date-component/nylas-date-component.scss?tag=nylas-date-component&encapsulation=shadow","src/components/design-system/nylas-date-component/nylas-date-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n display: block;\n height: auto;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='date'] {\n @include textfield;\n width: 100%;\n width: -moz-available;\n width: -webkit-fill-available;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\n\nconst DefaultPlaceholder = {\n date: 'YYYY-MM-DD',\n};\n\n/*\n The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n /\n\n@Component({\n tag: 'nylas-date-component',\n styleUrl: 'nylas-date-component.scss',\n shadow: true,\n})\nexport class NylasDateComponent {\n /\n The host element\n /\n @Element() el!: HTMLElement;\n /\n The name of the input. This is used to identify the input when submitting a form.\n /\n @Prop() name: string = 'input';\n /\n The default value of the input. This is the value that is displayed when the input is rendered.\n /\n @Prop() defaultValue?: string;\n /\n The label of the input. This is displayed above the input.\n /\n @Prop() label: string = '';\n\n /\n The placeholder of the input. This is displayed when the input is empty.\n /\n @Prop() placeholder: string = DefaultPlaceholder['date'];\n /\n Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n /\n @Prop() required: boolean = false;\n /\n Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n /\n @Prop() readOnly: boolean = false;\n /\n Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n /\n @Prop() autoFocus: boolean = false;\n /\n The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n /\n @Prop() pattern?: RegExp;\n /\n The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n /\n @Prop() maxLength: number = 255;\n /\n The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n /\n @Prop() patternError: string = '';\n\n /\n This error message is displayed when the input value is empty and the input is required.\n /\n @Prop() requiredError: string = '';\n\n /\n The input value state.\n /\n @State() value!: string;\n /\n The error message state.\n /\n @State() error: string = '';\n\n /\n This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n // Event listeners\n /\n Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n /\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n if (this.el?.getAttribute('data-page-styling')) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n this.value = sanitize((e.target as HTMLInputElement).value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: 'date',\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n // Check if the field is required and value is empty\n if (this.required && !value) {\n this.error = this.requiredError \|\| 'This field is required.';\n return;\n }\n // Check if value matches pattern\n if (!this.pattern \|\| (!value && !this.required)) return;\n\n if (this.pattern.test(value)) {\n this.error = '';\n } else {\n this.error = this.patternError \|\| 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part=\"ic__label\" class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type=\"date\"\n name={this.name}\n part=\"ic__date\"\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-date-component2.js","mappings":"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","names":[],"sources":["src/components/design-system/nylas-date-component/nylas-date-component.scss?tag=nylas-date-component&encapsulation=shadow","src/components/design-system/nylas-date-component/nylas-date-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n display: block;\n height: auto;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='date'] {\n @include textfield;\n width: 100%;\n width: -moz-available;\n width: -webkit-fill-available;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\n\nconst DefaultPlaceholder = {\n date: 'YYYY-MM-DD',\n};\n\n/*\n The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n /\n\n@Component({\n tag: 'nylas-date-component',\n styleUrl: 'nylas-date-component.scss',\n shadow: true,\n})\nexport class NylasDateComponent {\n /\n The host element\n /\n @Element() el!: HTMLElement;\n /\n The name of the input. This is used to identify the input when submitting a form.\n /\n @Prop() name: string = 'input';\n /\n The default value of the input. This is the value that is displayed when the input is rendered.\n /\n @Prop() defaultValue?: string;\n /\n The label of the input. This is displayed above the input.\n /\n @Prop() label: string = '';\n\n /\n The placeholder of the input. This is displayed when the input is empty.\n /\n @Prop() placeholder: string = DefaultPlaceholder['date'];\n /\n Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n /\n @Prop() required: boolean = false;\n /\n Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n /\n @Prop() readOnly: boolean = false;\n /\n Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n /\n @Prop() autoFocus: boolean = false;\n /\n The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n /\n @Prop() pattern?: RegExp;\n /\n The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n /\n @Prop() maxLength: number = 255;\n /\n The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n /\n @Prop() patternError: string = '';\n\n /\n This error message is displayed when the input value is empty and the input is required.\n /\n @Prop() requiredError: string = '';\n\n /\n The input value state.\n /\n @State() value!: string;\n /\n The error message state.\n /\n @State() error: string = '';\n\n /\n State to track the validity of the date input.\n /\n @State() isDateValid: boolean = true;\n\n /\n This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n // Event listeners\n /\n Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n /\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const target = e.target as HTMLInputElement;\n this.value = sanitize(target.value);\n this.isDateValid = target.validity.valid;\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: 'date',\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n if (!this.isDateValid) {\n this.error = 'Please enter a valid date';\n return;\n }\n // Check if the field is required and value is empty\n if (this.required && !value) {\n this.error = this.requiredError \|\| 'This field is required.';\n return;\n }\n // Check if value matches pattern\n if (!this.pattern \|\| (!value && !this.required)) return;\n\n if (this.pattern.test(value)) {\n this.error = '';\n } else {\n this.error = this.patternError \|\| 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part=\"ic__label\" class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type=\"date\"\n name={this.name}\n part=\"ic__date\"\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-editor-tabs2.js CHANGED Viewed

@@ -407,7 +407,7 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
         if (this.enableUserFeedback && !isInitialized()) {
             init({
                 dsn: 'https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816',
-                release: "1.3.2",
+                release: "1.3.3",
                 integrations: integrations => [
                     ...integrations.filter(_integration => false),
                     feedbackSyncIntegration({
@@ -456,7 +456,7 @@ const NylasEditorTabs = proxyCustomElement(class NylasEditorTabs extends HTMLEle
             captureContext: {
                 tags: {
                     'nylas-web-element': 'nylas-scheduler-editor',
-                    'nylas-web-element-version': "1.3.2",
+                    'nylas-web-element-version': "1.3.3",
                 },
                 extra: {
                     configId: this.selectedConfiguration?.id,

package/dist/components/nylas-event-location2.js CHANGED Viewed

@@ -81,6 +81,18 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
             this.location = '';
         }
     }
+    currentUserChangedHandler(newValue) {
+        debug('nylas-custom-booking-flow', 'currentUserChangedHandler', newValue);
+        if (newValue?.provider) {
+            this.userProviderState = newValue?.provider;
+            this.setLocationOptionsForProvider(this.userProviderState);
+        }
+    }
+    conferenceProvidersChanged(newValue) {
+        if (newValue?.['zoom'] && !this.locationOptions.some(option => option.value === 'zoom')) {
+            this.locationOptions.push({ value: 'zoom', label: labels['zoom'], labelHTML: this.getLabelHTML('zoom') });
+        }
+    }
     connectedCallback() {
         debug('nylas-event-location', 'connectedCallback');
     }
@@ -97,15 +109,8 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
             this.selectedLocationOption = this.setDefaultLocationOption(this.eventConferencing || null, this.eventLocation ?? '');
         }
         this.userProviderState = this.userProvider ?? this.currentUser?.provider ?? '';
-        switch (this.userProviderState) {
-            case 'google':
-                this.locationOptions.push({ value: 'google', label: labels['google'], labelHTML: this.getLabelHTML('google') });
-                break;
-            case 'microsoft':
-                this.locationOptions.push({ value: 'microsoft', label: labels['microsoft'], labelHTML: this.getLabelHTML('microsoft') });
-                break;
-        }
-        if (this.conferenceProviders?.['zoom']) {
+        this.setLocationOptionsForProvider(this.userProviderState);
+        if (this.conferenceProviders?.['zoom'] && !this.locationOptions.some(option => option.value === 'zoom')) {
             this.locationOptions.push({ value: 'zoom', label: labels['zoom'], labelHTML: this.getLabelHTML('zoom') });
         }
     }
@@ -172,6 +177,20 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
                 break;
         }
     }
+    setLocationOptionsForProvider(provider) {
+        switch (provider) {
+            case 'google':
+                if (!this.locationOptions.some(option => option.value === 'google')) {
+                    this.locationOptions.push({ value: 'google', label: labels['google'], labelHTML: this.getLabelHTML('google') });
+                }
+                break;
+            case 'microsoft':
+                if (!this.locationOptions.some(option => option.value === 'microsoft')) {
+                    this.locationOptions.push({ value: 'microsoft', label: labels['microsoft'], labelHTML: this.getLabelHTML('microsoft') });
+                }
+                break;
+        }
+    }
     setDefaultLocationOption(eventConferencing, eventLocation) {
         if (eventConferencing != null && eventConferencing?.provider != null && eventConferencing?.autocreate != null) {
             return CONFERENCE_PROVIDER_MAP[eventConferencing?.provider];
@@ -222,13 +241,15 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
     }
     render() {
         const defaultOption = typeof this.selectedLocationOption !== 'undefined' ? this.locationOptions.find(i => i.value == this.selectedLocationOption) : null;
-        return (h(Host, { key: '6869d3c2f6316dc482becc022bc973783332658f' }, h("div", { key: 'e17b95b15e181f73efd5c666ff0074bcd5467b65', class: "nylas-event-location", part: "nel" }, h("label", { key: '9370ab01f5f730099dd5061ccf39ca3b53132244', htmlFor: "location" }, "Event meeting or location", h("span", { key: 'acd558f22ad18afc63b93456450a5aa946916fd4', class: "label-icon" }, h("tooltip-component", { key: 'bd2ea171a9eef9e9a377a0be2dc4a16b91bb1359' }, h("info-icon", { key: '745289e658441e9aadb245c94da890cdb3119179', slot: "tooltip-icon" }), h("span", { key: 'ffa4a9597a7d63e33b639dafd736a654a97589c9', slot: "tooltip-content" }, "Select a conferencing option or add a custom location.")))), h("div", { key: '59f930e30b758b740128b42a855608a02ee1a739', class: "location-input" }, defaultOption && defaultOption?.label && (h("select-dropdown", { withSearch: false, name: "location", options: this.locationOptions, defaultSelectedOption: defaultOption, exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, h("span", { slot: "select-icon" }, this.getIcon(this.selectedLocationOption)))), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
+        return (h(Host, { key: 'c91ef22df2a83a3c2ac66ca9011ad8633a085b9e' }, h("div", { key: '9e6823ce704cf4870f99936a39371b255b165afb', class: "nylas-event-location", part: "nel" }, h("label", { key: '2d1a71a258d0576460acd68a93cbace4a5c9254c', htmlFor: "location" }, "Event meeting or location", h("span", { key: '9dd7df66eec4e35a8659c88d4f26be99093e815a', class: "label-icon" }, h("tooltip-component", { key: '9299313bad5724106fa7108d0874e760945bcb30' }, h("info-icon", { key: '2490fbc28caa2547d8a3cecc747dc94254c59df3', slot: "tooltip-icon" }), h("span", { key: 'd6c73fef100e4f962507d58b4ed24a1bd19599c2', slot: "tooltip-content" }, "Select a conferencing option or add a custom location.")))), h("div", { key: '726f78440a3e65e379368b0a849bee94b2839dfd', class: "location-input" }, defaultOption && defaultOption?.label && (h("select-dropdown", { withSearch: false, name: "location", options: this.locationOptions, defaultSelectedOption: defaultOption, exportparts: "sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content" }, h("span", { slot: "select-icon" }, this.getIcon(this.selectedLocationOption)))), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
-        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
+        "currentUser": ["currentUserChangedHandler"],
+        "conferenceProviders": ["conferenceProvidersChanged"]
     }; }
     static get style() { return nylasEventLocationCss; }
 }, [65, "nylas-event-location", {
@@ -246,7 +267,9 @@ const NylasEventLocation = proxyCustomElement(class NylasEventLocation extends H
         "locationOptions": [32]
     }, [[0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"]], {
         "name": ["elementNameChangedHandler"],
-        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
+        "currentUser": ["currentUserChangedHandler"],
+        "conferenceProviders": ["conferenceProvidersChanged"]
     }]);
 __decorate([
     RegisterComponent({