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/collection/components/scheduler-editor/nylas-event-location/nylas-event-location.js CHANGED Viewed

@@ -63,6 +63,18 @@ export class NylasEventLocation {
             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');
     }
@@ -79,15 +91,8 @@ export class NylasEventLocation {
             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') });
         }
     }
@@ -154,6 +159,20 @@ export class NylasEventLocation {
                 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];
@@ -204,7 +223,7 @@ export class NylasEventLocation {
     }
     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 is() { return "nylas-event-location"; }
     static get encapsulation() { return "shadow"; }
@@ -414,6 +433,12 @@ export class NylasEventLocation {
             }, {
                 "propName": "selectedConfiguration",
                 "methodName": "selectedConfigurationChangedHandler"
+            }, {
+                "propName": "currentUser",
+                "methodName": "currentUserChangedHandler"
+            }, {
+                "propName": "conferenceProviders",
+                "methodName": "conferenceProvidersChanged"
             }];
     }
     static get listeners() {

package/dist/collection/components/scheduler-editor/nylas-event-location/nylas-event-location.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-event-location.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-location/nylas-event-location.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Conference, Configuration } from '@nylas/core';\nimport { CONFERENCE_PROVIDER_MAP, PROVIDER_CONFERENCE_MAP } from '@/common/constants';\nimport { User } from '@/common/nylas-api-request';\n\nconst labels = {\n none: 'None',\n custom: 'Custom location',\n google: 'Google Meet',\n microsoft: 'Microsoft Teams',\n zoom: 'Zoom Meeting',\n};\n\n/*\n The `nylas-event-location` component is a form input for the location of an event.\n \n @part nel - The event location container\n * @part nel__location - The event location input\n * @part nel__dropdown - The dropdown container\n * @part nel__dropdown-button - The dropdown button\n * @part nel__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-event-location',\n styleUrl: 'nylas-event-location.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventLocation {\n /\n * The host element <nylas-event-location>\n /\n @Element() host!: HTMLElement;\n /\n @standalone\n * The name of the event location input.\n /\n @Prop() name: string = 'location';\n\n /\n @standalone\n * The current user\n /\n @Prop() currentUser?: User;\n /\n @standalone\n * The users provider\n /\n @Prop() userProvider?: string;\n /\n @standalone\n * The event conferencing stored in the configuration\n /\n @Prop() eventConferencing?: Conference;\n /\n @standalone\n * The conference providers where the key is the provider name ('zoom') and the value is the grant id.\n * We currently support same provider ('google', 'microsoft') for all participants and 'zoom' for cross-provider conferencing.\n /\n @Prop() conferenceProviders?: Record<string, string>;\n\n /\n @standalone\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n @standalone\n * The event location stored in the configuration\n /\n @Prop() eventLocation?: string;\n /\n The selected event location state. This defaults to the event location from the configuration or an empty string.\n /\n @State() location: string = this.eventLocation ?? '';\n /\n The grant id for the conferencing of non-default conferencing options.\n /\n @State() grantId: string = this.eventConferencing ? this.setDefaultGrantID(this.eventConferencing) : '';\n /\n The selected location option. This defaults to 'none'.\n /\n @State() selectedLocationOption!: string;\n /\n The current user provider state.\n /\n @State() userProviderState: string = this.userProvider ?? this.currentUser?.provider ?? '';\n\n /\n The state to store location options.\n /\n @State() locationOptions = [\n { value: 'none', label: labels['none'], labelHTML: this.getLabelHTML('none') },\n { value: 'custom', label: labels['custom'], labelHTML: this.getLabelHTML('custom') },\n ];\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-location', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n const configLocation = newValue?.event_booking?.location;\n const configConferencing = newValue?.event_booking?.conferencing;\n if (configConferencing?.provider) {\n this.selectedLocationOption = this.setDefaultLocationOption(configConferencing, configLocation ?? '');\n this.grantId = this.setDefaultGrantID(configConferencing);\n this.location = configLocation ? configLocation : '';\n } else if (configLocation) {\n this.selectedLocationOption = configLocation ? 'custom' : 'none';\n this.location = configLocation;\n } else {\n this.selectedLocationOption = 'none';\n this.location = '';\n }\n }\n\n /\n This event is fired when the value of the event location changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-event-location', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-location', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-location', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.selectedLocationOption = this.setDefaultLocationOption(this.eventConferencing \|\| null, this.eventLocation ?? '');\n }\n\n this.userProviderState = this.userProvider ?? this.currentUser?.provider ?? '';\n switch (this.userProviderState) {\n case 'google':\n this.locationOptions.push({ value: 'google', label: labels['google'], labelHTML: this.getLabelHTML('google') });\n break;\n case 'microsoft':\n this.locationOptions.push({ value: 'microsoft', label: labels['microsoft'], labelHTML: this.getLabelHTML('microsoft') });\n break;\n }\n\n if (this.conferenceProviders?.['zoom']) {\n this.locationOptions.push({ value: 'zoom', label: labels['zoom'], labelHTML: this.getLabelHTML('zoom') });\n }\n }\n\n disconnectedCallback() {\n debug('nylas-event-location', 'disconnectedCallback');\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string }>) {\n this.selectedLocationOption = event.detail.value;\n let payload;\n switch (this.selectedLocationOption) {\n case 'none':\n this.location = '';\n this.setFormValue('', this.name);\n this.valueChanged.emit({ value: '', name: this.name });\n this.valueChanged.emit({ value: JSON.stringify(null), name: 'conference' });\n break;\n case 'custom':\n this.valueChanged.emit({ value: JSON.stringify(null), name: 'conference' });\n break;\n case 'google':\n this.location = '';\n this.setFormValue('', this.name);\n const googleConfGrantId = this.conferenceProviders?.['google'];\n payload = {\n provider: PROVIDER_CONFERENCE_MAP.google,\n autocreate: googleConfGrantId\n ? {\n conf_grant_id: googleConfGrantId,\n }\n : {},\n };\n this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });\n this.valueChanged.emit({ value: '', name: this.name });\n break;\n case 'microsoft':\n this.location = '';\n this.setFormValue('', this.name);\n const microsoftConfGrantId = this.conferenceProviders?.['microsoft'];\n payload = {\n provider: PROVIDER_CONFERENCE_MAP.microsoft,\n autocreate: microsoftConfGrantId\n ? {\n conf_grant_id: microsoftConfGrantId,\n }\n : {},\n };\n this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });\n this.valueChanged.emit({ value: '', name: this.name });\n break;\n case 'zoom':\n this.location = '';\n this.setFormValue('', this.name);\n const zoomConfGrantId = this.conferenceProviders?.['zoom'];\n payload = {\n provider: PROVIDER_CONFERENCE_MAP.zoom,\n autocreate: zoomConfGrantId\n ? {\n conf_grant_id: zoomConfGrantId,\n }\n : {},\n };\n this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });\n this.valueChanged.emit({ value: '', name: this.name });\n break;\n }\n }\n\n setDefaultLocationOption(eventConferencing: Conference \| null, eventLocation: string) {\n if (eventConferencing != null && eventConferencing?.provider != null && eventConferencing?.autocreate != null) {\n return CONFERENCE_PROVIDER_MAP[eventConferencing?.provider];\n }\n return eventLocation ? 'custom' : 'none';\n }\n setDefaultGrantID(eventConferencing: Conference) {\n if (eventConferencing != null && eventConferencing?.autocreate != null) {\n return eventConferencing?.autocreate?.conf_grant_id;\n }\n return '';\n }\n\n setFormValue(value: string, name: string) {\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(value, name);\n }\n }\n\n handleChange(event) {\n const value = sanitize(event.target.value);\n this.location = value;\n this.setFormValue(value, this.name);\n this.valueChanged.emit({ value: value, name: this.name });\n }\n\n getIcon(location: string) {\n switch (location) {\n case 'none':\n return <location-off-icon />;\n case 'custom':\n return <location-icon />;\n case 'google':\n return <google-meet-icon />;\n case 'microsoft':\n return <microsoft-teams-icon />;\n case 'zoom':\n return <zoom-icon />;\n }\n }\n\n getLabelHTML(location: string) {\n return (\n <span\n class=\"location-label\"\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '16px',\n width: '-webkit-fill-available',\n }}\n >\n {this.getIcon(location)}\n <span\n class=\"location-text\"\n style={{\n fontSize: '14px',\n fontWeight: '400',\n }}\n >\n {labels[location]}\n </span>\n </span>\n );\n }\n\n @RegisterComponent<NylasEventLocation, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-location',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.conferenceProviders', 'conferenceProviders'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const defaultOption = typeof this.selectedLocationOption !== 'undefined' ? this.locationOptions.find(i => i.value == this.selectedLocationOption) : null;\n return (\n <Host>\n <div class=\"nylas-event-location\" part=\"nel\">\n <label htmlFor=\"location\">\n Event meeting or location\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Select a conferencing option or add a custom location.</span>\n </tooltip-component>\n </span>\n </label>\n <div class=\"location-input\">\n {defaultOption && defaultOption?.label && (\n <select-dropdown\n withSearch={false}\n name=\"location\"\n options={this.locationOptions}\n defaultSelectedOption={defaultOption}\n exportparts=\"sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content\"\n >\n <span slot=\"select-icon\">{this.getIcon(this.selectedLocationOption)}</span>\n </select-dropdown>\n )}\n {this.selectedLocationOption === 'custom' && (\n <input type=\"text\" part=\"nel__location\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nylas-event-location.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-location/nylas-event-location.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Conference, Configuration } from '@nylas/core';\nimport { CONFERENCE_PROVIDER_MAP, PROVIDER_CONFERENCE_MAP } from '@/common/constants';\nimport { User } from '@/common/nylas-api-request';\n\nconst labels = {\n none: 'None',\n custom: 'Custom location',\n google: 'Google Meet',\n microsoft: 'Microsoft Teams',\n zoom: 'Zoom Meeting',\n};\n\n/*\n The `nylas-event-location` component is a form input for the location of an event.\n \n @part nel - The event location container\n * @part nel__location - The event location input\n * @part nel__dropdown - The dropdown container\n * @part nel__dropdown-button - The dropdown button\n * @part nel__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-event-location',\n styleUrl: 'nylas-event-location.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventLocation {\n /\n * The host element <nylas-event-location>\n /\n @Element() host!: HTMLElement;\n /\n @standalone\n * The name of the event location input.\n /\n @Prop() name: string = 'location';\n\n /\n @standalone\n * The current user\n /\n @Prop() currentUser?: User;\n /\n @standalone\n * The users provider\n /\n @Prop() userProvider?: string;\n /\n @standalone\n * The event conferencing stored in the configuration\n /\n @Prop() eventConferencing?: Conference;\n /\n @standalone\n * The conference providers where the key is the provider name ('zoom') and the value is the grant id.\n * We currently support same provider ('google', 'microsoft') for all participants and 'zoom' for cross-provider conferencing.\n /\n @Prop() conferenceProviders?: Record<string, string>;\n\n /\n @standalone\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n @standalone\n * The event location stored in the configuration\n /\n @Prop() eventLocation?: string;\n /\n The selected event location state. This defaults to the event location from the configuration or an empty string.\n /\n @State() location: string = this.eventLocation ?? '';\n /\n The grant id for the conferencing of non-default conferencing options.\n /\n @State() grantId: string = this.eventConferencing ? this.setDefaultGrantID(this.eventConferencing) : '';\n /\n The selected location option. This defaults to 'none'.\n /\n @State() selectedLocationOption!: string;\n /\n The current user provider state.\n /\n @State() userProviderState: string = this.userProvider ?? this.currentUser?.provider ?? '';\n\n /\n The state to store location options.\n /\n @State() locationOptions = [\n { value: 'none', label: labels['none'], labelHTML: this.getLabelHTML('none') },\n { value: 'custom', label: labels['custom'], labelHTML: this.getLabelHTML('custom') },\n ];\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-location', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n const configLocation = newValue?.event_booking?.location;\n const configConferencing = newValue?.event_booking?.conferencing;\n if (configConferencing?.provider) {\n this.selectedLocationOption = this.setDefaultLocationOption(configConferencing, configLocation ?? '');\n this.grantId = this.setDefaultGrantID(configConferencing);\n this.location = configLocation ? configLocation : '';\n } else if (configLocation) {\n this.selectedLocationOption = configLocation ? 'custom' : 'none';\n this.location = configLocation;\n } else {\n this.selectedLocationOption = 'none';\n this.location = '';\n }\n }\n\n @Watch('currentUser')\n currentUserChangedHandler(newValue: User) {\n debug('nylas-custom-booking-flow', 'currentUserChangedHandler', newValue);\n if (newValue?.provider) {\n this.userProviderState = newValue?.provider;\n this.setLocationOptionsForProvider(this.userProviderState);\n }\n }\n\n @Watch('conferenceProviders')\n conferenceProvidersChanged(newValue: Record<string, string>) {\n if (newValue?.['zoom'] && !this.locationOptions.some(option => option.value === 'zoom')) {\n this.locationOptions.push({ value: 'zoom', label: labels['zoom'], labelHTML: this.getLabelHTML('zoom') });\n }\n }\n\n /\n This event is fired when the value of the event location changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-event-location', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-location', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-location', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.selectedLocationOption = this.setDefaultLocationOption(this.eventConferencing \|\| null, this.eventLocation ?? '');\n }\n\n this.userProviderState = this.userProvider ?? this.currentUser?.provider ?? '';\n this.setLocationOptionsForProvider(this.userProviderState);\n\n if (this.conferenceProviders?.['zoom'] && !this.locationOptions.some(option => option.value === 'zoom')) {\n this.locationOptions.push({ value: 'zoom', label: labels['zoom'], labelHTML: this.getLabelHTML('zoom') });\n }\n }\n\n disconnectedCallback() {\n debug('nylas-event-location', 'disconnectedCallback');\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string }>) {\n this.selectedLocationOption = event.detail.value;\n let payload;\n switch (this.selectedLocationOption) {\n case 'none':\n this.location = '';\n this.setFormValue('', this.name);\n this.valueChanged.emit({ value: '', name: this.name });\n this.valueChanged.emit({ value: JSON.stringify(null), name: 'conference' });\n break;\n case 'custom':\n this.valueChanged.emit({ value: JSON.stringify(null), name: 'conference' });\n break;\n case 'google':\n this.location = '';\n this.setFormValue('', this.name);\n const googleConfGrantId = this.conferenceProviders?.['google'];\n payload = {\n provider: PROVIDER_CONFERENCE_MAP.google,\n autocreate: googleConfGrantId\n ? {\n conf_grant_id: googleConfGrantId,\n }\n : {},\n };\n this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });\n this.valueChanged.emit({ value: '', name: this.name });\n break;\n case 'microsoft':\n this.location = '';\n this.setFormValue('', this.name);\n const microsoftConfGrantId = this.conferenceProviders?.['microsoft'];\n payload = {\n provider: PROVIDER_CONFERENCE_MAP.microsoft,\n autocreate: microsoftConfGrantId\n ? {\n conf_grant_id: microsoftConfGrantId,\n }\n : {},\n };\n this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });\n this.valueChanged.emit({ value: '', name: this.name });\n break;\n case 'zoom':\n this.location = '';\n this.setFormValue('', this.name);\n const zoomConfGrantId = this.conferenceProviders?.['zoom'];\n payload = {\n provider: PROVIDER_CONFERENCE_MAP.zoom,\n autocreate: zoomConfGrantId\n ? {\n conf_grant_id: zoomConfGrantId,\n }\n : {},\n };\n this.valueChanged.emit({ value: JSON.stringify(payload), name: 'conference' });\n this.valueChanged.emit({ value: '', name: this.name });\n break;\n }\n }\n\n setLocationOptionsForProvider(provider: string) {\n switch (provider) {\n case 'google':\n if (!this.locationOptions.some(option => option.value === 'google')) {\n this.locationOptions.push({ value: 'google', label: labels['google'], labelHTML: this.getLabelHTML('google') });\n }\n break;\n case 'microsoft':\n if (!this.locationOptions.some(option => option.value === 'microsoft')) {\n this.locationOptions.push({ value: 'microsoft', label: labels['microsoft'], labelHTML: this.getLabelHTML('microsoft') });\n }\n break;\n }\n }\n\n setDefaultLocationOption(eventConferencing: Conference \| null, eventLocation: string) {\n if (eventConferencing != null && eventConferencing?.provider != null && eventConferencing?.autocreate != null) {\n return CONFERENCE_PROVIDER_MAP[eventConferencing?.provider];\n }\n return eventLocation ? 'custom' : 'none';\n }\n setDefaultGrantID(eventConferencing: Conference) {\n if (eventConferencing != null && eventConferencing?.autocreate != null) {\n return eventConferencing?.autocreate?.conf_grant_id;\n }\n return '';\n }\n\n setFormValue(value: string, name: string) {\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(value, name);\n }\n }\n\n handleChange(event) {\n const value = sanitize(event.target.value);\n this.location = value;\n this.setFormValue(value, this.name);\n this.valueChanged.emit({ value: value, name: this.name });\n }\n\n getIcon(location: string) {\n switch (location) {\n case 'none':\n return <location-off-icon />;\n case 'custom':\n return <location-icon />;\n case 'google':\n return <google-meet-icon />;\n case 'microsoft':\n return <microsoft-teams-icon />;\n case 'zoom':\n return <zoom-icon />;\n }\n }\n\n getLabelHTML(location: string) {\n return (\n <span\n class=\"location-label\"\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '16px',\n width: '-webkit-fill-available',\n }}\n >\n {this.getIcon(location)}\n <span\n class=\"location-text\"\n style={{\n fontSize: '14px',\n fontWeight: '400',\n }}\n >\n {labels[location]}\n </span>\n </span>\n );\n }\n\n @RegisterComponent<NylasEventLocation, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-location',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.conferenceProviders', 'conferenceProviders'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const defaultOption = typeof this.selectedLocationOption !== 'undefined' ? this.locationOptions.find(i => i.value == this.selectedLocationOption) : null;\n return (\n <Host>\n <div class=\"nylas-event-location\" part=\"nel\">\n <label htmlFor=\"location\">\n Event meeting or location\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Select a conferencing option or add a custom location.</span>\n </tooltip-component>\n </span>\n </label>\n <div class=\"location-input\">\n {defaultOption && defaultOption?.label && (\n <select-dropdown\n withSearch={false}\n name=\"location\"\n options={this.locationOptions}\n defaultSelectedOption={defaultOption}\n exportparts=\"sd_dropdown: nel__dropdown, sd_dropdown-button: nel__dropdown-button, sd_dropdown-content: nel__dropdown-content\"\n >\n <span slot=\"select-icon\">{this.getIcon(this.selectedLocationOption)}</span>\n </select-dropdown>\n )}\n {this.selectedLocationOption === 'custom' && (\n <input type=\"text\" part=\"nel__location\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-page-styling/nylas-page-styling.js CHANGED Viewed

@@ -239,7 +239,7 @@ export class NylasPageStyling {
         this.isOpen = !this.isOpen;
     }
     render() {
-        return (h(Host, { key: '1601b88e8e7e2c500cb105f237949faa4e9d8dbd' }, h("div", { key: '2a3072bc409f07961da51439a0f45f930d0725de', part: "nps", class: { 'nylas-page-styling': true, 'no-border': !this.customInputsSlot } }, this.customInputsSlot ? (h("div", { class: "header", part: "nps__header" }, h("div", null, h("h3", null, "Page styling and customization")), h("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" }))))) : null, h("div", { key: '404727336fdf8d0de2d8e769df1dcc21ae69f34b', id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, h("div", { key: '2e7da0539b197347719a1202e04c1f7b238cdc9d', class: { 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot } }, h("div", { key: '55ba3e932216f073238b8385071defa9139ca0f9', class: "nylas-page-styling__row" }, h("div", { key: '333576450039ea7f76bfb548c5947609bc813837', class: { subsection: true, hide: !this.isOpen } })))))));
+        return (h(Host, { key: 'c2ffa8ae940e9594f254903d45abc3f7c01d7d41' }, h("div", { key: '1813654e2aaa9c66d5a535186f227968b434654c', part: "nps", class: { 'nylas-page-styling': true, 'no-border': !this.customInputsSlot } }, this.customInputsSlot ? (h("div", { class: "header", part: "nps__header" }, h("div", null, h("h3", null, "Page styling and customization")), h("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" }))))) : null, h("div", { key: 'cff4891eeb1a958feb2a6b20623b97f908721c60', id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, h("div", { key: '16b2398f10b6d7703d02bbbf5c43e3e229499b2d', class: { 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot } }, h("div", { key: 'fd09434076ea4626ee9d7b2710ec8418325aa117', class: "nylas-page-styling__row" }, h("div", { key: '16a29cabadc4f1a4ba9f389fe232ea22125cfe36', class: { subsection: true, hide: !this.isOpen } })))))));
     }
     static get is() { return "nylas-page-styling"; }
     static get encapsulation() { return "shadow"; }
@@ -397,6 +397,9 @@ export class NylasPageStyling {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
             }];
     }
     static get listeners() {

package/dist/collection/components/scheduler-editor/nylas-page-styling/nylas-page-styling.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-page-styling.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } 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 { Appearance, Configuration } from '@nylas/core';\n\n/*\n The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page.\n * To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input\n * fields you want to display. The component will automatically update the appearance object when the input fields are changed.\n * Ensure that the input fields have the `name` attribute set to the key in the appearance object.\n \n If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page.\n * The fields that can be customized in the Nylas hosted scheduler page are:\n * - Primary color: (name: color)\n * - Company logo: (name: company_logo_url)\n * - Submit button label: (name: submit_button_label)\n * - Thank you message: (name: thank_you_message)\n \n This component cannot be used as an independent component. It must be used within the `nylas-scheduler-editor` component.\n \n @slot custom-page-style-inputs - This slot is used to pass a custom page style form to the Nylas Scheduler Editor component.\n * @part nps - The nylas-page-styling container\n * @part nps__header - The header of the page styling section\n * @part nps__drawer-toggle--container - The page styling drawer toggle container\n * @part nps__body - The body of the page styling section\n * @part nps__title-input-textfield - The page styling page title input textfield\n * @part nps__company-name-input-textfield - The page styling company name input textfield\n * @part nps__input-image-url - The page styling company logo input textfield\n * @part nps__color-picker - The page styling color picker\n * @part nps__color-picker-button - The page styling color picker button\n * @part nps__color-picker-button-label - The page styling color input field label \n @part nps__color-picker-button-selected-label - The page styling color picker label denoting which color is selected\n * @part nps__submit-button-label-input-textfield - The page styling submut button label input textfield\n * @part nps__message-textarea - The page styling thank you message textarea\n /\n@Component({\n tag: 'nylas-page-styling',\n styleUrl: 'nylas-page-styling.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasPageStyling {\n @Element() host!: HTMLNylasPageStylingElement;\n /\n @internal\n * The selected configuration.\n /\n @Prop() selectedConfiguration?: Configuration;\n /\n @internal\n * The name of the component\n /\n @Prop() name: string = 'page-styling';\n /\n @internal\n * The appearance data to display\n /\n @Prop() appearance?: Appearance;\n /\n @internal\n * Is the page styling card open\n /\n @Prop() isOpen: boolean = true;\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The confirmation email template state.\n /\n @State() currentAppearance!: Appearance;\n /\n The confirmation email template state.\n /\n @State() customInputsSlot: Element \| null = null;\n\n /\n This event is fired when the email reminders change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n /\n This event is fired when the form is submitted in the parent component.\n /\n @Event() bookingFormSubmitted!: EventEmitter<void>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-page-styling', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-page-styling', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-page-styling', '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-page-styling', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n }\n }\n\n componentWillUpdate() {\n debug('nylas-page-styling', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-page-styling', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-page-styling', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-page-styling', '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-page-styling', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n customInputsSlotChangedHandler(newValue: Element \| null) {\n debug('nylas-page-styling', 'customInputsSlotChangedHandler', newValue);\n\n const appearance = this.currentAppearance;\n\n function updateInputDefaultValues(element: HTMLElement) {\n // Process elements with a 'name' attribute\n if (element.hasAttribute && element.hasAttribute('name')) {\n const key = element.getAttribute('name');\n if (appearance && key && key in appearance && appearance[key] !== undefined) {\n // Update attributes based on component type\n const componentType = element.getAttribute('component-type');\n\n element.setAttribute('data-page-styling', 'true');\n\n if (componentType === 'checkbox') {\n element.setAttribute('checked', appearance[key]);\n } else if (componentType === 'radio-group') {\n element.setAttribute('default-selected-value', appearance[key]);\n } else if (componentType === 'color-picker') {\n element.setAttribute('default-selected-color', appearance[key]);\n } else if (componentType === 'select-dropdown') {\n const options = element.getAttribute('options');\n const selectedOption = options ? JSON.parse(options).find((option: { value: string }) => option.value === appearance[key]) : null;\n element.setAttribute('default-selected-option', JSON.stringify(selectedOption));\n } else if (componentType === 'image-url') {\n element.setAttribute('image-url', appearance[key]);\n } else {\n // Default case: set the default value\n element.setAttribute('default-value', appearance[key]);\n }\n }\n }\n\n // Recursively process child elements (skip text nodes)\n element.childNodes.forEach(child => {\n if (child.nodeType === Node.ELEMENT_NODE) {\n updateInputDefaultValues(child as HTMLElement); // Cast child to HTMLElement\n }\n });\n }\n\n // Start the recursive process with the cloned element (newValue)\n if (newValue) {\n updateInputDefaultValues(newValue as HTMLElement);\n }\n }\n\n cloneAndCopyProps(element: HTMLElement): HTMLElement {\n // Clone the current element\n const clonedElement = element.cloneNode(false) as HTMLElement; // Do a shallow clone first\n const componentType = element.getAttribute('component-type');\n const key = element.getAttribute('name');\n\n // Copy properties like 'options' and 'value' for custom elements\n if ((element as any).options) {\n const options = (element as any).getAttribute('options');\n console.log('page-styling options', element, options);\n if (typeof options === 'string') {\n try {\n const parsedOptions = JSON.parse(options);\n (clonedElement as any).options = parsedOptions; // Parse the 'options' string\n if (componentType === 'select-dropdown' && key && key in this.currentAppearance) {\n const selectedOption = parsedOptions.find((option: { value: string }) => option.value === this.currentAppearance[key]);\n (clonedElement as any).setAttribute('default-selected-option', JSON.stringify(selectedOption));\n }\n } catch (e) {\n console.error('Error parsing options', e);\n }\n } else {\n (clonedElement as any).options = (element as any).options; // Copy 'options' property\n }\n }\n\n if ((element as any).value) {\n (clonedElement as any).value = (element as any).value; // Copy 'value' property\n }\n\n // Recursively process child elements\n element.childNodes.forEach(child => {\n if (child.nodeType === Node.ELEMENT_NODE) {\n // If the child is an element, recursively clone and process it\n const clonedChild = this.cloneAndCopyProps(child as HTMLElement);\n clonedElement.appendChild(clonedChild); // Append the cloned child to the parent clone\n } else if (child.nodeType === Node.TEXT_NODE) {\n // For text nodes, just clone and append the text content\n clonedElement.appendChild(child.cloneNode(true));\n }\n });\n\n return clonedElement; // Return the cloned element with its children\n }\n\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-page-styling', 'selectedConfigurationChangedHandler', newValue);\n this.currentAppearance = newValue?.appearance \|\| {};\n // Get the slot element\n const editor = document.querySelector('nylas-scheduler-editor');\n const slotElement = editor?.shadowRoot?.querySelector('slot[name=\"custom-page-style-inputs\"]') as HTMLSlotElement;\n if (!slotElement) {\n return;\n }\n\n const divElement = document.createElement('div');\n\n // Get the slotted content (the nodes passed into the slot)\n const slottedElements = slotElement?.assignedElements({ flatten: true });\n // Clone each of the slotted nodes and append them to the cloned slot\n slottedElements?.forEach(element => {\n const clonedElement = this.cloneAndCopyProps(element as HTMLElement); // Clone recursively and copy properties\n\n // Clone the slotted element (deep clone)\n this.customInputsSlotChangedHandler(clonedElement);\n // Append the cloned element to the document fragment\n divElement.appendChild(clonedElement);\n });\n\n // Replace the original content with the new cloned and updated content\n const bodyElement = this.host.shadowRoot?.querySelector('.nylas-page-styling');\n const slotContainer = bodyElement?.querySelector('.nylas-page-styling__body .subsection');\n\n if (slotContainer) {\n // Remove existing children (if necessary) and append the new content\n slotContainer.innerHTML = ''; // Clear existing content\n divElement.childNodes.forEach(child => {\n slotContainer.appendChild(child); // Append each child of divElement\n });\n this.customInputsSlot = divElement;\n }\n }\n\n checkIfElementIsInSlot(name: string): boolean {\n const findElement = document?.querySelector(`[slot=\"custom-page-style-inputs\"] [name=\"${name}\"]`);\n return findElement ? true : false;\n }\n\n @Listen('nylasFormInputChanged', { target: 'document' })\n async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n const { name, value } = event.detail;\n const type = event.detail?.type;\n\n if (!this.checkIfElementIsInSlot(name)) {\n return;\n }\n switch (name) {\n case 'submit_button_label':\n this.currentAppearance = { ...this.currentAppearance, submit_button_label: value };\n break;\n case 'thank_you_message':\n if (type === 'multi_line_text') {\n const value = sanitize(event.detail.value);\n this.currentAppearance = { ...this.currentAppearance, thank_you_message: value };\n }\n break;\n default:\n this.currentAppearance = { ...this.currentAppearance, [name]: value };\n break;\n }\n this.updateConfirmationFormValue();\n }\n\n @Listen('nylasFormDropdownChanged', { target: 'document' })\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-page-styling', 'nylasFormDropdownChangedHandler', event.detail);\n const { value, name } = event.detail;\n\n if (!this.checkIfElementIsInSlot(name)) {\n return;\n }\n if (name === 'color') {\n this.currentAppearance = { ...this.currentAppearance, color: value };\n } else {\n this.currentAppearance = { ...this.currentAppearance, [name]: value };\n }\n this.updateConfirmationFormValue();\n }\n\n @Listen('valueChanged', { target: 'document' })\n valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-page-styling', 'valueChangedHandler', event.detail);\n const { value, name } = event.detail;\n\n if (!this.checkIfElementIsInSlot(name)) {\n return;\n }\n if (name === 'company_logo_url') {\n this.currentAppearance = { ...this.currentAppearance, company_logo_url: value };\n } else {\n this.currentAppearance = { ...this.currentAppearance, [name]: value };\n }\n this.updateConfirmationFormValue();\n }\n\n @Listen('nylasFormCheckboxToggled', { target: 'document' })\n checkboxToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n const { checked, name } = event.detail;\n if (!this.checkIfElementIsInSlot(name)) {\n return;\n }\n this.currentAppearance = { ...this.currentAppearance, [name]: checked };\n this.updateConfirmationFormValue();\n }\n\n @Listen('nylasFormRadioChanged', { target: 'document' })\n radioChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; type: string }>) {\n const { value, name } = event.detail;\n if (!this.checkIfElementIsInSlot(name)) {\n return;\n }\n this.currentAppearance = { ...this.currentAppearance, [name]: value };\n this.updateConfirmationFormValue();\n }\n\n updateConfirmationFormValue() {\n debug('nylas-page-styling', 'updateConfirmationFormValue');\n this.internals.setFormValue(JSON.stringify(this.currentAppearance), this.name);\n this.valueChanged.emit({ value: JSON.stringify(this.currentAppearance), name: this.name });\n }\n\n toggleConfirmationEmail() {\n this.isOpen = !this.isOpen;\n }\n\n @RegisterComponent<NylasPageStyling, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-page-styling',\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 return (\n <Host>\n <div part=\"nps\" class={{ 'nylas-page-styling': true, 'no-border': !this.customInputsSlot }}>\n {this.customInputsSlot ? (\n <div class=\"header\" part=\"nps__header\">\n <div>\n <h3>Page styling and customization</h3>\n </div>\n <div class=\"drawer-toggle\" part=\"nps__drawer-toggle--container\">\n <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n <chevron-icon width=\"24\" height=\"24\" />\n </span>\n </div>\n </div>\n ) : null}\n\n <div id=\"nylas-page-styling__body\" class=\"nylas-page-styling__body\" part=\"nps__body\">\n <div class={{ 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot }}>\n <div class=\"nylas-page-styling__row\">\n <div class={{ subsection: true, hide: !this.isOpen }}></div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nylas-page-styling.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } 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 { Appearance, Configuration } from '@nylas/core';\n\n/*\n The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page.\n * To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input\n * fields you want to display. The component will automatically update the appearance object when the input fields are changed.\n * Ensure that the input fields have the `name` attribute set to the key in the appearance object.\n \n If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page.\n * The fields that can be customized in the Nylas hosted scheduler page are:\n * - Primary color: (name: color)\n * - Company logo: (name: company_logo_url)\n * - Submit button label: (name: submit_button_label)\n * - Thank you message: (name: thank_you_message)\n \n This component cannot be used as an independent component. It must be used within the `nylas-scheduler-editor` component.\n \n @slot custom-page-style-inputs - This slot is used to pass a custom page style form to the Nylas Scheduler Editor component.\n * @part nps - The nylas-page-styling container\n * @part nps__header - The header of the page styling section\n * @part nps__drawer-toggle--container - The page styling drawer toggle container\n * @part nps__body - The body of the page styling section\n * @part nps__title-input-textfield - The page styling page title input textfield\n * @part nps__company-name-input-textfield - The page styling company name input textfield\n * @part nps__input-image-url - The page styling company logo input textfield\n * @part nps__color-picker - The page styling color picker\n * @part nps__color-picker-button - The page styling color picker button\n * @part nps__color-picker-button-label - The page styling color input field label \n @part nps__color-picker-button-selected-label - The page styling color picker label denoting which color is selected\n * @part nps__submit-button-label-input-textfield - The page styling submut button label input textfield\n * @part nps__message-textarea - The page styling thank you message textarea\n /\n@Component({\n tag: 'nylas-page-styling',\n styleUrl: 'nylas-page-styling.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasPageStyling {\n @Element() host!: HTMLNylasPageStylingElement;\n /\n @internal\n * The selected configuration.\n /\n @Prop() selectedConfiguration?: Configuration;\n /\n @internal\n * The name of the component\n /\n @Prop() name: string = 'page-styling';\n /\n @internal\n * The appearance data to display\n /\n @Prop() appearance?: Appearance;\n /\n @internal\n * Is the page styling card open\n /\n @Prop() isOpen: boolean = true;\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The confirmation email template state.\n /\n @State() currentAppearance!: Appearance;\n /\n The confirmation email template state.\n /\n @State() customInputsSlot: Element \| null = null;\n\n /\n This event is fired when the email reminders change.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n /\n This event is fired when the form is submitted in the parent component.\n /\n @Event() bookingFormSubmitted!: EventEmitter<void>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-page-styling', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-page-styling', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-page-styling', '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-page-styling', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n }\n }\n\n componentWillUpdate() {\n debug('nylas-page-styling', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-page-styling', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-page-styling', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-page-styling', '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-page-styling', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n customInputsSlotChangedHandler(newValue: Element \| null) {\n debug('nylas-page-styling', 'customInputsSlotChangedHandler', newValue);\n\n const appearance = this.currentAppearance;\n\n function updateInputDefaultValues(element: HTMLElement) {\n // Process elements with a 'name' attribute\n if (element.hasAttribute && element.hasAttribute('name')) {\n const key = element.getAttribute('name');\n if (appearance && key && key in appearance && appearance[key] !== undefined) {\n // Update attributes based on component type\n const componentType = element.getAttribute('component-type');\n\n element.setAttribute('data-page-styling', 'true');\n\n if (componentType === 'checkbox') {\n element.setAttribute('checked', appearance[key]);\n } else if (componentType === 'radio-group') {\n element.setAttribute('default-selected-value', appearance[key]);\n } else if (componentType === 'color-picker') {\n element.setAttribute('default-selected-color', appearance[key]);\n } else if (componentType === 'select-dropdown') {\n const options = element.getAttribute('options');\n const selectedOption = options ? JSON.parse(options).find((option: { value: string }) => option.value === appearance[key]) : null;\n element.setAttribute('default-selected-option', JSON.stringify(selectedOption));\n } else if (componentType === 'image-url') {\n element.setAttribute('image-url', appearance[key]);\n } else {\n // Default case: set the default value\n element.setAttribute('default-value', appearance[key]);\n }\n }\n }\n\n // Recursively process child elements (skip text nodes)\n element.childNodes.forEach(child => {\n if (child.nodeType === Node.ELEMENT_NODE) {\n updateInputDefaultValues(child as HTMLElement); // Cast child to HTMLElement\n }\n });\n }\n\n // Start the recursive process with the cloned element (newValue)\n if (newValue) {\n updateInputDefaultValues(newValue as HTMLElement);\n }\n }\n\n cloneAndCopyProps(element: HTMLElement): HTMLElement {\n // Clone the current element\n const clonedElement = element.cloneNode(false) as HTMLElement; // Do a shallow clone first\n const componentType = element.getAttribute('component-type');\n const key = element.getAttribute('name');\n\n // Copy properties like 'options' and 'value' for custom elements\n if ((element as any).options) {\n const options = (element as any).getAttribute('options');\n console.log('page-styling options', element, options);\n if (typeof options === 'string') {\n try {\n const parsedOptions = JSON.parse(options);\n (clonedElement as any).options = parsedOptions; // Parse the 'options' string\n if (componentType === 'select-dropdown' && key && key in this.currentAppearance) {\n const selectedOption = parsedOptions.find((option: { value: string }) => option.value === this.currentAppearance[key]);\n (clonedElement as any).setAttribute('default-selected-option', JSON.stringify(selectedOption));\n }\n } catch (e) {\n console.error('Error parsing options', e);\n }\n } else {\n (clonedElement as any).options = (element as any).options; // Copy 'options' property\n }\n }\n\n if ((element as any).value) {\n (clonedElement as any).value = (element as any).value; // Copy 'value' property\n }\n\n // Recursively process child elements\n element.childNodes.forEach(child => {\n if (child.nodeType === Node.ELEMENT_NODE) {\n // If the child is an element, recursively clone and process it\n const clonedChild = this.cloneAndCopyProps(child as HTMLElement);\n clonedElement.appendChild(clonedChild); // Append the cloned child to the parent clone\n } else if (child.nodeType === Node.TEXT_NODE) {\n // For text nodes, just clone and append the text content\n clonedElement.appendChild(child.cloneNode(true));\n }\n });\n\n return clonedElement; // Return the cloned element with its children\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-page-styling', 'selectedConfigurationChangedHandler', newValue);\n this.currentAppearance = newValue?.appearance \|\| {};\n // Get the slot element\n const editor = document.querySelector('nylas-scheduler-editor');\n const slotElement = editor?.shadowRoot?.querySelector('slot[name=\"custom-page-style-inputs\"]') as HTMLSlotElement;\n if (!slotElement) {\n return;\n }\n\n const divElement = document.createElement('div');\n\n // Get the slotted content (the nodes passed into the slot)\n const slottedElements = slotElement?.assignedElements({ flatten: true });\n // Clone each of the slotted nodes and append them to the cloned slot\n slottedElements?.forEach(element => {\n const clonedElement = this.cloneAndCopyProps(element as HTMLElement); // Clone recursively and copy properties\n\n // Clone the slotted element (deep clone)\n this.customInputsSlotChangedHandler(clonedElement);\n // Append the cloned element to the document fragment\n divElement.appendChild(clonedElement);\n });\n\n // Replace the original content with the new cloned and updated content\n const bodyElement = this.host.shadowRoot?.querySelector('.nylas-page-styling');\n const slotContainer = bodyElement?.querySelector('.nylas-page-styling__body .subsection');\n\n if (slotContainer) {\n // Remove existing children (if necessary) and append the new content\n slotContainer.innerHTML = ''; // Clear existing content\n divElement.childNodes.forEach(child => {\n slotContainer.appendChild(child); // Append each child of divElement\n });\n this.customInputsSlot = divElement;\n }\n }\n\n checkIfElementIsInSlot(name: string): boolean {\n const findElement = document?.querySelector(`[slot=\"custom-page-style-inputs\"] [name=\"${name}\"]`);\n return findElement ? true : false;\n }\n\n @Listen('nylasFormInputChanged', { target: 'document' })\n async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n const { name, value } = event.detail;\n const type = event.detail?.type;\n\n if (!this.checkIfElementIsInSlot(name)) {\n return;\n }\n switch (name) {\n case 'submit_button_label':\n this.currentAppearance = { ...this.currentAppearance, submit_button_label: value };\n break;\n case 'thank_you_message':\n if (type === 'multi_line_text') {\n const value = sanitize(event.detail.value);\n this.currentAppearance = { ...this.currentAppearance, thank_you_message: value };\n }\n break;\n default:\n this.currentAppearance = { ...this.currentAppearance, [name]: value };\n break;\n }\n this.updateConfirmationFormValue();\n }\n\n @Listen('nylasFormDropdownChanged', { target: 'document' })\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-page-styling', 'nylasFormDropdownChangedHandler', event.detail);\n const { value, name } = event.detail;\n\n if (!this.checkIfElementIsInSlot(name)) {\n return;\n }\n if (name === 'color') {\n this.currentAppearance = { ...this.currentAppearance, color: value };\n } else {\n this.currentAppearance = { ...this.currentAppearance, [name]: value };\n }\n this.updateConfirmationFormValue();\n }\n\n @Listen('valueChanged', { target: 'document' })\n valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-page-styling', 'valueChangedHandler', event.detail);\n const { value, name } = event.detail;\n\n if (!this.checkIfElementIsInSlot(name)) {\n return;\n }\n if (name === 'company_logo_url') {\n this.currentAppearance = { ...this.currentAppearance, company_logo_url: value };\n } else {\n this.currentAppearance = { ...this.currentAppearance, [name]: value };\n }\n this.updateConfirmationFormValue();\n }\n\n @Listen('nylasFormCheckboxToggled', { target: 'document' })\n checkboxToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n const { checked, name } = event.detail;\n if (!this.checkIfElementIsInSlot(name)) {\n return;\n }\n this.currentAppearance = { ...this.currentAppearance, [name]: checked };\n this.updateConfirmationFormValue();\n }\n\n @Listen('nylasFormRadioChanged', { target: 'document' })\n radioChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; type: string }>) {\n const { value, name } = event.detail;\n if (!this.checkIfElementIsInSlot(name)) {\n return;\n }\n this.currentAppearance = { ...this.currentAppearance, [name]: value };\n this.updateConfirmationFormValue();\n }\n\n updateConfirmationFormValue() {\n debug('nylas-page-styling', 'updateConfirmationFormValue');\n this.internals.setFormValue(JSON.stringify(this.currentAppearance), this.name);\n this.valueChanged.emit({ value: JSON.stringify(this.currentAppearance), name: this.name });\n }\n\n toggleConfirmationEmail() {\n this.isOpen = !this.isOpen;\n }\n\n @RegisterComponent<NylasPageStyling, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-page-styling',\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 return (\n <Host>\n <div part=\"nps\" class={{ 'nylas-page-styling': true, 'no-border': !this.customInputsSlot }}>\n {this.customInputsSlot ? (\n <div class=\"header\" part=\"nps__header\">\n <div>\n <h3>Page styling and customization</h3>\n </div>\n <div class=\"drawer-toggle\" part=\"nps__drawer-toggle--container\">\n <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n <chevron-icon width=\"24\" height=\"24\" />\n </span>\n </div>\n </div>\n ) : null}\n\n <div id=\"nylas-page-styling__body\" class=\"nylas-page-styling__body\" part=\"nps__body\">\n <div class={{ 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot }}>\n <div class=\"nylas-page-styling__row\">\n <div class={{ subsection: true, hide: !this.isOpen }}></div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.js CHANGED Viewed

@@ -122,8 +122,9 @@ export class NylasParticipantsCustomAvailability {
         return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';
     }
     render() {
-        return (h(Host, { key: '5034211537411e732ffee5f7420884e5908cc4e5' }, h("div", { key: '6d016a9b8a3dd204521d9f63de90cd848e9c49e7', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: 'fff77ce67f19e5b0bdc7a8b491ff38b1b7d9af55', class: "header", part: "npca__header" }, h("h3", { key: '656016ac8ee26636fad2e725237b1bb538563864' }, "Participant open hours"), h("p", { key: '87ab243b9f3402150c6dae36fc702d7f675350c3' }, "If not set, the default open hours will be used to calculate availability for this participant.")), h("div", { key: 'ba6c30fbb85fc26d6471494716b18f7f815900ec', class: "content", part: "npca__content" }, h("form", { key: '7cc553b6730ead929fc45efa67b29b56e41f022e', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
+        return (h(Host, { key: '64198b8231e1739484f81d02167d7b5f456eda69' }, h("div", { key: '68eb8279c510ef937e19dec06960867c98a5b02a', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: '9622d8a7fbc124723cb7135a3a3846fad0e4e458', class: "header", part: "npca__header" }, h("h3", { key: '6424eeeb937ce2225a63d76482ec633efacd9e7a' }, "Participant open hours"), h("p", { key: 'ac021fef4d4b0de03d5e2ca335563ec4f328156c' }, "If not set, the default open hours will be used to calculate availability for this participant.")), h("div", { key: 'e9412e214011b575954196e39ea265dcf86801ec', class: "content", part: "npca__content" }, h("form", { key: 'ab5b4239f2d2b31fcd69d0f2e2d61a8a13003739', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
             const participant = this.selectedParticipants[key];
+            const participantOpenHours = participant.availability?.open_hours || [];
             if (!participant || !participant.name || !participant.availability)
                 return;
             return (h("div", { class: "participant-container", part: "npca__participant-container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "npca__participant-title" }, h("p", null, participant.name, "'s open hours"), h("div", { class: "participant-toggle", part: "npca__participant-toggle--container" }, h("toggle-switch", { exportparts: "ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider", name: key, checked: !!participant?.openHours && participant?.openHours.length > 0 }), h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`, onClick: () => {
@@ -131,7 +132,7 @@ export class NylasParticipantsCustomAvailability {
                         return;
                     this.selectedParticipants[key].isOpen = !participant.isOpen;
                     this.selectedParticipants = { ...this.selectedParticipants };
-                } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-availability-picker", { key: index, name: `participant-${index}-${key}`, openHours: participant.openHours, defaultTimezone: participant.timezone, hideHeader: true }))));
+                } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-availability-picker", { key: index, name: `participant-${index}-${key}`, openHours: participantOpenHours, defaultTimezone: participant.timezone, hideHeader: true }))));
         }))))));
     }
     static get is() { return "nylas-participants-custom-availability"; }

package/dist/collection/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-participants-custom-availability.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAG9H,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAqBxD,MAAM,OAAO,mCAAmC;;;oBAavB,iCAAiC;4BAMlB,IAAI,CAAC,qBAAqB,EAAE,YAAY,IAAI,EAAE;oCA2BhF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC;;IAI3C,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,wCAAwC,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QACvF,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAGD,0BAA0B,CAAC,QAAuB,EAAE,QAAuB;QACzE,KAAK,CAAC,wCAAwC,EAAE,4BAA4B,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAClG,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC7D,CAAC;IAGD,mCAAmC,CAAC,QAAuB,EAAE,QAAuB;QAClF,KAAK,CAAC,wCAAwC,EAAE,qCAAqC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC3G,IAAI,QAAQ,EAAE,YAAY,EAAE,CAAC;YAC3B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC;IAGD,iBAAiB;QACf,KAAK,CAAC,wCAAwC,EAAE,mBAAmB,CAAC,CAAC;IACvE,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,wCAAwC,EAAE,sBAAsB,CAAC,CAAC;IAC1E,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,wCAAwC,EAAE,mBAAmB,CAAC,CAAC;IACvE,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,wCAAwC,EAAE,kBAAkB,CAAC,CAAC;QACpE,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,CAAC;QAC7F,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAID,6BAA6B,CAAC,KAAsE;QAClG,KAAK,CAAC,wCAAwC,EAAE,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAC/F,MAAM,mBAAmB,GAAG,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAClI,MAAM,iBAAiB,GAAG,mBAAmB,EAAE,YAAY,EAAE,UAAU,CAAC;QACxE,MAAM,SAAS,GAAG,iBAAiB,IAAI,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,IAAI,EAAE,CAAC;QAC9H,MAAM,QAAQ,GACZ,iBAAiB,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YAC/C,CAAC,CAAC,mBAAmB,EAAE,QAAQ;YAC/B,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ;gBACjG,IAAI,CAAC,qBAAqB,EAAE,aAAa,EAAE,QAAQ;gBACnD,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ,CAAC;QAE9D,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC9E,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QACjF,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACjJ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;QACvG,IAAI,CAAC,oBAAoB,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC7D,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGD,kBAAkB,CAAC,KAAkB;QACnC,KAAK,CAAC,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,CAAC,CAAC;QAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC;YACrC,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,aAAa,EAAE,EAAE,CAAC;gBAC7C,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,yCAAyC,CAAC,CAAC;gBAC7F,OAAO;YACT,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YACjC,CAAC;QACH,CAAC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAEpC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC;YAAE,OAAO;QAC5C,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,SAAS,CAAC;QAClE,IAAI,CAAC,oBAAoB,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE7D,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,eAAe;QACb,MAAM,oBAAoB,GAAG,EAAE,CAAC;QAChC,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,EAAE,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC;QACnF,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;YACjC,oBAAoB,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC;QACnG,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1G,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC3F,CAAC;IAED,eAAe,CAAC,YAA2B;QACzC,MAAM,oBAAoB,GAAG,EAAE,CAAC;QAChC,YAAY,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE;YAClC,oBAAoB,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG;gBACxC,MAAM,EAAE,KAAK;gBACb,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,YAAY,EAAE,UAAU,CAAC;gBACxD,SAAS,EAAE,WAAW,CAAC,YAAY,EAAE,UAAU,IAAI,EAAE;gBACrD,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,KAAK;gBAC3C,YAAY,EAAE,WAAW,CAAC,YAAY;gBACtC,QAAQ,EAAE,WAAW,CAAC,QAAQ;aAC/B,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAOD,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,UAAU,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,UAAU,CAAC;IAC/I,CAAC;IAQD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,wCAAwC,EAAC,IAAI,EAAC,MAAM;gBAC7D,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc;oBACrC,sFAA+B;oBAC/B,8JAAsG,CAClG;gBACN,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,eAAe;oBACvC,6DAAM,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAqB,CAAC,IAC/D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;wBACzD,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;wBACnD,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY;4BAAE,OAAO;wBAC3E,OAAO,CACL,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,6BAA6B,EAAC,GAAG,EAAE,yBAAyB,KAAK,EAAE;4BACzG,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,yBAAyB;gCAC3D;oCAAI,WAAW,CAAC,IAAI;oDAAkB;gCACtC,WAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,qCAAqC;oCACxE,qBACE,WAAW,EAAC,0FAA0F,EACtG,IAAI,EAAE,GAAG,EACT,OAAO,EAAE,CAAC,CAAC,WAAW,EAAE,SAAS,IAAI,WAAW,EAAE,SAAS,CAAC,MAAM,GAAG,CAAC,GACtE;oCACF,YACE,KAAK,EAAE,WAAW,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IAAI,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,EACrG,OAAO,EAAE,GAAG,EAAE;4CACZ,IAAI,CAAC,WAAW,CAAC,SAAS;gDAAE,OAAO;4CACnC,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC;4CAC5D,IAAI,CAAC,oBAAoB,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;wCAC/D,CAAC;wCAED,oBAAc,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CAClC,CACH,CACF;4BACL,WAAW,CAAC,MAAM,IAAI,CACrB,iCACE,GAAG,EAAE,KAAK,EACV,IAAI,EAAE,eAAe,KAAK,IAAI,GAAG,EAAE,EACnC,SAAS,EAAE,WAAW,CAAC,SAAS,EAChC,eAAe,EAAE,WAAW,CAAC,QAAQ,EACrC,UAAU,EAAE,IAAI,GAChB,CACH,CACG,CACP,CAAC;oBACJ,CAAC,CAAC,CACG,CACH,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AArDC;IANC,iBAAiB,CAAyH;QACzI,IAAI,EAAE,wCAAwC;QAC9C,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,uCAAuC,EAAE,uBAAuB,CAAC,CAAC,CAAC;QAC3F,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;iEAqDD","sourcesContent":["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 { Availability, Configuration, OpenHours, Participant } from '@nylas/core';\nimport { DEFAULT_OPEN_HOURS } from '@/common/constants';\n\n/*\n The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.\n \n @part npca - The participants custom availability container\n * @part npca__header - The header of the participants custom availability\n * @part npca__content - The content of the participants custom availability\n * @part npca__participant-container - The participant container\n * @part npca__participant-title - The title of the participant\n * @part npca__participant-toggle--container - The toggle container for the participant\n * @part npca__toggle-label - The label of the toggle\n * @part npca_toggle-input - The input of the toggle\n * @part npca_toggle-slider - The slider of the toggle\n /\n@Component({\n tag: 'nylas-participants-custom-availability',\n styleUrl: 'nylas-participants-custom-availability.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasParticipantsCustomAvailability {\n @Element() host!: HTMLNylasParticipantsCustomAvailabilityElement;\n private participantFormRef!: HTMLFormElement;\n /\n @standalone\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n @standalone\n * The name of the participants custom availability.\n /\n @Prop() name: string = 'participant-custom-availability';\n\n /\n @standalone\n * The participants selected in the add participants section.\n /\n @Prop() participants: Participant[] = this.selectedConfiguration?.participants \|\| [];\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() selectedParticipants: {\n [key: string]: {\n setCustom: boolean;\n isOpen: boolean;\n openHours: OpenHours[];\n name: string;\n availability?: Availability;\n timezone?: string;\n };\n } = this.setParticipants(this.participants);\n\n // Watchers\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-participants-custom-availability', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('participants')\n participantsChangedHandler(newValue: Participant[], oldValue: Participant[]) {\n debug('nylas-participants-custom-availability', 'participantsChangedHandler', newValue, oldValue);\n this.selectedParticipants = this.setParticipants(newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n debug('nylas-participants-custom-availability', 'selectedConfigurationChangedHandler', newValue, oldValue);\n if (newValue?.participants) {\n this.selectedParticipants = this.setParticipants(newValue?.participants);\n }\n }\n\n // Lifecycle Methods\n connectedCallback() {\n debug('nylas-participants-custom-availability', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-participants-custom-availability', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-participants-custom-availability', 'componentWillLoad');\n }\n\n componentDidLoad() {\n debug('nylas-participants-custom-availability', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedParticipants = this.setParticipants(this.selectedConfiguration?.participants);\n } else {\n this.selectedParticipants = this.setParticipants(this.participants);\n }\n }\n\n // Event Handlers\n @Listen('nylasFormSwitchToggled')\n nylasFormSwitchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: boolean }>) {\n debug('nylas-participants-custom-availability', 'nylasFormSwitchToggledHandler', event.detail);\n const existingParticipant = this.selectedConfiguration?.participants.find(participant => participant.email === event.detail.name);\n const existingOpenHours = existingParticipant?.availability?.open_hours;\n const openHours = existingOpenHours \|\| this.selectedConfiguration?.availability?.availability_rules?.default_open_hours \|\| [];\n const timeZone =\n existingOpenHours && existingOpenHours.length > 0\n ? existingParticipant?.timezone\n : this.selectedConfiguration?.availability?.availability_rules?.default_open_hours?.at(0)?.timezone \|\|\n this.selectedConfiguration?.event_booking?.timezone \|\|\n window.Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n this.selectedParticipants[event.detail.name]['isOpen'] = event.detail.checked;\n this.selectedParticipants[event.detail.name]['setCustom'] = event.detail.checked;\n this.selectedParticipants[event.detail.name]['openHours'] = event.detail.checked ? (openHours?.length > 0 ? openHours : DEFAULT_OPEN_HOURS) : [];\n this.selectedParticipants[event.detail.name]['timezone'] = event.detail.checked ? timeZone : undefined;\n this.selectedParticipants = { ...this.selectedParticipants };\n this.updateFormValue();\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.isInternalsAvailable) {\n if (!this.participantFormRef.checkValidity()) {\n this.internals.setValidity({ customError: true }, 'Please fix the overlapping time ranges.');\n return;\n } else {\n this.internals.setValidity({});\n }\n }\n\n const jsonValue = JSON.parse(value);\n\n const key = name.split('-')[2];\n if (!this.selectedParticipants[key]) return;\n this.selectedParticipants[key]['openHours'] = jsonValue.openHours;\n this.selectedParticipants = { ...this.selectedParticipants };\n\n this.updateFormValue();\n }\n\n updateFormValue() {\n const participantOpenHours = {};\n const participants = this.selectedConfiguration?.participants \|\| this.participants;\n participants.forEach(participant => {\n participantOpenHours[participant.email] = this.selectedParticipants[participant.email].openHours;\n });\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participantOpenHours), this.name);\n this.valueChanged.emit({ value: JSON.stringify(participantOpenHours), name: this.name });\n }\n\n setParticipants(participants: Participant[]) {\n const selectedParticipants = {};\n participants?.forEach(participant => {\n selectedParticipants[participant.email] = {\n isOpen: false,\n setCustom: Boolean(participant.availability?.open_hours),\n openHours: participant.availability?.open_hours \|\| [],\n name: participant.name \|\| participant.email,\n availability: participant.availability,\n timezone: participant.timezone,\n };\n });\n return selectedParticipants;\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' && typeof this.internals.setValidity === 'function';\n }\n\n @RegisterComponent<NylasParticipantsCustomAvailability, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-participants-custom-availability',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-participants-custom-availability\" part=\"npca\">\n <div class=\"header\" part=\"npca__header\">\n <h3>Participant open hours</h3>\n <p>If not set, the default open hours will be used to calculate availability for this participant.</p>\n </div>\n <div class=\"content\" part=\"npca__content\">\n <form ref={el => (this.participantFormRef = el as HTMLFormElement)}>\n {Object.keys(this.selectedParticipants).map((key, index) => {\n const participant = this.selectedParticipants[key];\n if (!participant \|\| !participant.name \|\| !participant.availability) return;\n return (\n <div class=\"participant-container\" part=\"npca__participant-container\" key={`participant-conatiner-${index}`}>\n <div class=\"participant-title\" part=\"npca__participant-title\">\n <p>{participant.name}'s open hours</p>\n <div class=\"participant-toggle\" part=\"npca__participant-toggle--container\">\n <toggle-switch\n exportparts=\"ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider\"\n name={key}\n checked={!!participant?.openHours && participant?.openHours.length > 0}\n />\n <span\n class={`chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`}\n onClick={() => {\n if (!participant.setCustom) return;\n this.selectedParticipants[key].isOpen = !participant.isOpen;\n this.selectedParticipants = { ...this.selectedParticipants };\n }}\n >\n <chevron-icon width=\"24\" height=\"24\" />\n </span>\n </div>\n </div>\n {participant.isOpen && (\n <nylas-availability-picker\n key={index}\n name={`participant-${index}-${key}`}\n openHours={participant.openHours}\n defaultTimezone={participant.timezone}\n hideHeader={true}\n />\n )}\n </div>\n );\n })}\n </form>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nylas-participants-custom-availability.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.tsx"],"names":[],"mappings":"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","sourcesContent":["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, OpenHours, Participant, ParticipantAvailability } from '@nylas/core';\nimport { DEFAULT_OPEN_HOURS } from '@/common/constants';\n\n/*\n The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.\n \n @part npca - The participants custom availability container\n * @part npca__header - The header of the participants custom availability\n * @part npca__content - The content of the participants custom availability\n * @part npca__participant-container - The participant container\n * @part npca__participant-title - The title of the participant\n * @part npca__participant-toggle--container - The toggle container for the participant\n * @part npca__toggle-label - The label of the toggle\n * @part npca_toggle-input - The input of the toggle\n * @part npca_toggle-slider - The slider of the toggle\n /\n@Component({\n tag: 'nylas-participants-custom-availability',\n styleUrl: 'nylas-participants-custom-availability.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasParticipantsCustomAvailability {\n @Element() host!: HTMLNylasParticipantsCustomAvailabilityElement;\n private participantFormRef!: HTMLFormElement;\n /\n @standalone\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n @standalone\n * The name of the participants custom availability.\n /\n @Prop() name: string = 'participant-custom-availability';\n\n /\n @standalone\n * The participants selected in the add participants section.\n /\n @Prop() participants: Participant[] = this.selectedConfiguration?.participants \|\| [];\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() selectedParticipants: {\n [key: string]: {\n setCustom: boolean;\n isOpen: boolean;\n openHours: OpenHours[];\n name: string;\n availability?: ParticipantAvailability;\n timezone?: string;\n };\n } = this.setParticipants(this.participants);\n\n // Watchers\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-participants-custom-availability', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('participants')\n participantsChangedHandler(newValue: Participant[], oldValue: Participant[]) {\n debug('nylas-participants-custom-availability', 'participantsChangedHandler', newValue, oldValue);\n this.selectedParticipants = this.setParticipants(newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n debug('nylas-participants-custom-availability', 'selectedConfigurationChangedHandler', newValue, oldValue);\n if (newValue?.participants) {\n this.selectedParticipants = this.setParticipants(newValue?.participants);\n }\n }\n\n // Lifecycle Methods\n connectedCallback() {\n debug('nylas-participants-custom-availability', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-participants-custom-availability', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-participants-custom-availability', 'componentWillLoad');\n }\n\n componentDidLoad() {\n debug('nylas-participants-custom-availability', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedParticipants = this.setParticipants(this.selectedConfiguration?.participants);\n } else {\n this.selectedParticipants = this.setParticipants(this.participants);\n }\n }\n\n // Event Handlers\n @Listen('nylasFormSwitchToggled')\n nylasFormSwitchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: boolean }>) {\n debug('nylas-participants-custom-availability', 'nylasFormSwitchToggledHandler', event.detail);\n const existingParticipant = this.selectedConfiguration?.participants.find(participant => participant.email === event.detail.name);\n const existingOpenHours = existingParticipant?.availability?.open_hours;\n const openHours = existingOpenHours \|\| this.selectedConfiguration?.availability?.availability_rules?.default_open_hours \|\| [];\n const timeZone =\n existingOpenHours && existingOpenHours.length > 0\n ? existingParticipant?.timezone\n : this.selectedConfiguration?.availability?.availability_rules?.default_open_hours?.at(0)?.timezone \|\|\n this.selectedConfiguration?.event_booking?.timezone \|\|\n window.Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n this.selectedParticipants[event.detail.name]['isOpen'] = event.detail.checked;\n this.selectedParticipants[event.detail.name]['setCustom'] = event.detail.checked;\n this.selectedParticipants[event.detail.name]['openHours'] = event.detail.checked ? (openHours?.length > 0 ? openHours : DEFAULT_OPEN_HOURS) : [];\n this.selectedParticipants[event.detail.name]['timezone'] = event.detail.checked ? timeZone : undefined;\n this.selectedParticipants = { ...this.selectedParticipants };\n this.updateFormValue();\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.isInternalsAvailable) {\n if (!this.participantFormRef.checkValidity()) {\n this.internals.setValidity({ customError: true }, 'Please fix the overlapping time ranges.');\n return;\n } else {\n this.internals.setValidity({});\n }\n }\n\n const jsonValue = JSON.parse(value);\n\n const key = name.split('-')[2];\n if (!this.selectedParticipants[key]) return;\n this.selectedParticipants[key]['openHours'] = jsonValue.openHours;\n this.selectedParticipants = { ...this.selectedParticipants };\n\n this.updateFormValue();\n }\n\n updateFormValue() {\n const participantOpenHours = {};\n const participants = this.selectedConfiguration?.participants \|\| this.participants;\n participants.forEach(participant => {\n participantOpenHours[participant.email] = this.selectedParticipants[participant.email].openHours;\n });\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participantOpenHours), this.name);\n this.valueChanged.emit({ value: JSON.stringify(participantOpenHours), name: this.name });\n }\n\n setParticipants(participants: Participant[]) {\n const selectedParticipants = {};\n participants?.forEach(participant => {\n selectedParticipants[participant.email] = {\n isOpen: false,\n setCustom: Boolean(participant.availability?.open_hours),\n openHours: participant.availability?.open_hours \|\| [],\n name: participant.name \|\| participant.email,\n availability: participant.availability,\n timezone: participant.timezone,\n };\n });\n return selectedParticipants;\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' && typeof this.internals.setValidity === 'function';\n }\n\n @RegisterComponent<NylasParticipantsCustomAvailability, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-participants-custom-availability',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-participants-custom-availability\" part=\"npca\">\n <div class=\"header\" part=\"npca__header\">\n <h3>Participant open hours</h3>\n <p>If not set, the default open hours will be used to calculate availability for this participant.</p>\n </div>\n <div class=\"content\" part=\"npca__content\">\n <form ref={el => (this.participantFormRef = el as HTMLFormElement)}>\n {Object.keys(this.selectedParticipants).map((key, index) => {\n const participant = this.selectedParticipants[key];\n const participantOpenHours = participant.availability?.open_hours \|\| [];\n if (!participant \|\| !participant.name \|\| !participant.availability) return;\n return (\n <div class=\"participant-container\" part=\"npca__participant-container\" key={`participant-conatiner-${index}`}>\n <div class=\"participant-title\" part=\"npca__participant-title\">\n <p>{participant.name}'s open hours</p>\n <div class=\"participant-toggle\" part=\"npca__participant-toggle--container\">\n <toggle-switch\n exportparts=\"ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider\"\n name={key}\n checked={!!participant?.openHours && participant?.openHours.length > 0}\n />\n <span\n class={`chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`}\n onClick={() => {\n if (!participant.setCustom) return;\n this.selectedParticipants[key].isOpen = !participant.isOpen;\n this.selectedParticipants = { ...this.selectedParticipants };\n }}\n >\n <chevron-icon width=\"24\" height=\"24\" />\n </span>\n </div>\n </div>\n {participant.isOpen && (\n <nylas-availability-picker\n key={index}\n name={`participant-${index}-${key}`}\n openHours={participantOpenHours}\n defaultTimezone={participant.timezone}\n hideHeader={true}\n />\n )}\n </div>\n );\n })}\n </form>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/components/checkbox-component2.js CHANGED Viewed

@@ -16,6 +16,11 @@ const CheckboxComponent = proxyCustomElement(class CheckboxComponent extends HTM
         this.isChecked = undefined;
         this.error = '';
     }
+    checkedPropChangedHandler(newValue) {
+        if (typeof newValue === 'boolean') {
+            this.isChecked = newValue;
+        }
+    }
     componentWillLoad() {
         this.el.setAttribute('component-type', this.componentType);
     }
@@ -41,9 +46,12 @@ const CheckboxComponent = proxyCustomElement(class CheckboxComponent extends HTM
         });
     }
     render() {
-        return (h("div", { key: 'f4dfab5a5da9f9c79424930bfd5497c24dc1bfe5', class: "checkbox-container" }, h("label", { key: '78e192f2eddcfd788ac16e80be3ac0b9c47e6f6a' }, h("input", { key: '6e3aa50fb6542cb134dc5454e9fc0052be22e36f', type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("span", { key: 'abbd103b06bf934eff294b443b468e446901c371', class: "checkmark" }), h("slot", { key: 'f11d669ba02b705ba7679985e83b91086a17ccc9', name: "label" }, h("span", { key: '1298c44fbbe9ce75638b00ac07e6e83bab1394c2', class: "label" }, this.label))), this.error && h("p", { class: "error" }, this.error)));
+        return (h("div", { key: '0be06ba2c6b6ed277b3ba736827f9f60e18c6056', class: "checkbox-container" }, h("label", { key: 'a0a0cf6b1f546b8d1485dd3aee1b686f0e9c9cba' }, h("input", { key: '96bdb407b3ab6f668cf94b83e8091a604743f93f', type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("span", { key: 'd345d3b47c14213487a9108d78abbf0db26f25af', class: "checkmark" }), h("slot", { key: 'aba536e12ed7a97d18790f1a212ead284c1253ec', name: "label" }, h("span", { key: 'e7767302bc6865b99cf42949e8bd032e237d2ad9', class: "label" }, this.label))), this.error && h("p", { class: "error" }, this.error)));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "checked": ["checkedPropChangedHandler"]
+    }; }
     static get style() { return checkboxComponentCss; }
 }, [1, "checkbox-component", {
         "name": [1],
@@ -52,7 +60,9 @@ const CheckboxComponent = proxyCustomElement(class CheckboxComponent extends HTM
         "required": [4],
         "isChecked": [32],
         "error": [32]
-    }, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]]]);
+    }, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]], {
+        "checked": ["checkedPropChangedHandler"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/checkbox-component2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"checkbox-component2.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,0pEAA0pE;;MCW1qE,iBAAiB;;;;;;QAEX,kBAAa,GAAW,UAAU,CAAC;oBAK7B,UAAU;;qBAQT,EAAE;wBAKE,KAAK;;qBAQR,EAAE;;IAY3B,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC5D;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC;KACxC;IAOD,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACpC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,eAAe,CAAC;YAC1C,OAAO;SACR;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAGD,WAAW;QACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;YACjC,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,gEACE,8DAAO,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,GAAI,EACvG,6DAAM,KAAK,EAAC,WAAW,GAAQ,EAC/B,6DAAM,IAAI,EAAC,OAAO,IAChB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACD,EACP,IAAI,CAAC,KAAK,IAAI,SAAG,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5C,EACN;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/design-system/checkbox-component/checkbox-component.scss?tag=checkbox-component&encapsulation=shadow","src/components/design-system/checkbox-component/checkbox-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n.checkbox-container {\n @include default-css-variables;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n p.error {\n color: var(--nylas-error);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n font-family: var(--nylas-font-family);\n margin: 0;\n }\n}\n\nlabel {\n display: flex;\n align-items: center;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n\n &:focus ~ .checkmark,\n &:hover ~ .checkmark {\n border-color: var(--nylas-primary);\n }\n\n &:checked ~ .checkmark {\n color: var(--nylas-base-0);\n background: var(--nylas-primary)\n url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+)\n 50% 40% no-repeat;\n border: 2px solid var(--nylas-primary);\n }\n }\n\n .checkmark {\n border-radius: var(--nylas-border-radius);\n border: 2px solid var(--nylas-base-800);\n position: absolute;\n left: 0;\n top: 2px;\n width: 18px;\n height: 18px;\n cursor: pointer;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .label {\n margin-left: 32px;\n font-size: 16px;\n font-weight: 400;\n color: var(--nylas-base-800);\n line-height: 24px;\n }\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\n\n/*\n The `checkbox-component` component is a UI component that allows users to select a checkbox.\n * This component is used in the scheduling form to input checkbox type inputs.\n /\n@Component({\n tag: 'checkbox-component',\n styleUrl: 'checkbox-component.scss',\n shadow: true,\n})\nexport class CheckboxComponent {\n @Element() el!: HTMLElement;\n private readonly componentType: string = 'checkbox';\n\n /\n The name of the checkbox. This is used to identify the checkbox when submitting a form.\n /\n @Prop() name: string = 'checkbox';\n /\n The default value of the checkbox. This is the value that is displayed when the checkbox is rendered.\n /\n @Prop() checked?: boolean;\n /\n The label of the checkbox. This is displayed next to the checkbox.\n /\n @Prop() label: string = '';\n /\n Whether the checkbox is required. If true, the checkbox must be checked when submitting a form.\n * Default is false. If the checkbox is required and not checked, an error message is displayed.\n /\n @Prop() required: boolean = false;\n /\n The checked state of the checkbox.\n /\n @State() isChecked!: boolean;\n /\n The error message state.\n /\n @State() error: string = '';\n\n /\n This event is fired when the checkbox is toggled.\n /\n @Event() nylasFormCheckboxToggled!: EventEmitter<{\n checked: boolean;\n name: string;\n label: string;\n }>;\n\n // Lifecycle events\n componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\n }\n\n componentDidLoad() {\n this.isChecked = this.checked \|\| false;\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 if (this.required && !this.isChecked) {\n this.error = `${this.label} is required.`;\n return;\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n toggleCheck() {\n this.error = '';\n this.isChecked = !this.isChecked;\n this.nylasFormCheckboxToggled.emit({\n checked: this.isChecked,\n name: this.name,\n label: this.label,\n });\n }\n\n render() {\n return (\n <div class=\"checkbox-container\">\n <label>\n <input type=\"checkbox\" name={this.name} checked={this.isChecked} onChange={() => this.toggleCheck()} />\n <span class=\"checkmark\"></span>\n <slot name=\"label\">\n <span class=\"label\">{this.label}</span>\n </slot>\n </label>\n {this.error && <p class=\"error\">{this.error}</p>}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"checkbox-component2.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,0pEAA0pE;;MCW1qE,iBAAiB;;;;;;QAEX,kBAAa,GAAW,UAAU,CAAC;oBAK7B,UAAU;;qBAQT,EAAE;wBAKE,KAAK;;qBAQR,EAAE;;IAY3B,yBAAyB,CAAC,QAAiB;QACzC,IAAI,OAAO,QAAQ,KAAK,SAAS,EAAE;YACjC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;SAC3B;KACF;IAGD,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC5D;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC;KACxC;IAOD,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACpC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,eAAe,CAAC;YAC1C,OAAO;SACR;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAGD,WAAW;QACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;YACjC,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,gEACE,8DAAO,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,GAAI,EACvG,6DAAM,KAAK,EAAC,WAAW,GAAQ,EAC/B,6DAAM,IAAI,EAAC,OAAO,IAChB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACD,EACP,IAAI,CAAC,KAAK,IAAI,SAAG,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5C,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/design-system/checkbox-component/checkbox-component.scss?tag=checkbox-component&encapsulation=shadow","src/components/design-system/checkbox-component/checkbox-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n.checkbox-container {\n @include default-css-variables;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n p.error {\n color: var(--nylas-error);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n font-family: var(--nylas-font-family);\n margin: 0;\n }\n}\n\nlabel {\n display: flex;\n align-items: center;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n\n &:focus ~ .checkmark,\n &:hover ~ .checkmark {\n border-color: var(--nylas-primary);\n }\n\n &:checked ~ .checkmark {\n color: var(--nylas-base-0);\n background: var(--nylas-primary)\n url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+)\n 50% 40% no-repeat;\n border: 2px solid var(--nylas-primary);\n }\n }\n\n .checkmark {\n border-radius: var(--nylas-border-radius);\n border: 2px solid var(--nylas-base-800);\n position: absolute;\n left: 0;\n top: 2px;\n width: 18px;\n height: 18px;\n cursor: pointer;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .label {\n margin-left: 32px;\n font-size: 16px;\n font-weight: 400;\n color: var(--nylas-base-800);\n line-height: 24px;\n }\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Element, Watch } from '@stencil/core';\n\n/*\n The `checkbox-component` component is a UI component that allows users to select a checkbox.\n * This component is used in the scheduling form to input checkbox type inputs.\n /\n@Component({\n tag: 'checkbox-component',\n styleUrl: 'checkbox-component.scss',\n shadow: true,\n})\nexport class CheckboxComponent {\n @Element() el!: HTMLElement;\n private readonly componentType: string = 'checkbox';\n\n /\n The name of the checkbox. This is used to identify the checkbox when submitting a form.\n /\n @Prop() name: string = 'checkbox';\n /\n The default value of the checkbox. This is the value that is displayed when the checkbox is rendered.\n /\n @Prop() checked?: boolean;\n /\n The label of the checkbox. This is displayed next to the checkbox.\n /\n @Prop() label: string = '';\n /\n Whether the checkbox is required. If true, the checkbox must be checked when submitting a form.\n * Default is false. If the checkbox is required and not checked, an error message is displayed.\n /\n @Prop() required: boolean = false;\n /\n The checked state of the checkbox.\n /\n @State() isChecked!: boolean;\n /\n The error message state.\n /\n @State() error: string = '';\n\n /\n This event is fired when the checkbox is toggled.\n /\n @Event() nylasFormCheckboxToggled!: EventEmitter<{\n checked: boolean;\n name: string;\n label: string;\n }>;\n\n @Watch('checked')\n checkedPropChangedHandler(newValue: boolean) {\n if (typeof newValue === 'boolean') {\n this.isChecked = newValue;\n }\n }\n\n // Lifecycle events\n componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\n }\n\n componentDidLoad() {\n this.isChecked = this.checked \|\| false;\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 if (this.required && !this.isChecked) {\n this.error = `${this.label} is required.`;\n return;\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n toggleCheck() {\n this.error = '';\n this.isChecked = !this.isChecked;\n this.nylasFormCheckboxToggled.emit({\n checked: this.isChecked,\n name: this.name,\n label: this.label,\n });\n }\n\n render() {\n return (\n <div class=\"checkbox-container\">\n <label>\n <input type=\"checkbox\" name={this.name} checked={this.isChecked} onChange={() => this.toggleCheck()} />\n <span class=\"checkmark\"></span>\n <slot name=\"label\">\n <span class=\"label\">{this.label}</span>\n </slot>\n </label>\n {this.error && <p class=\"error\">{this.error}</p>}\n </div>\n );\n }\n}\n"],"version":3}