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

@nylas/web-elements 1.3.2 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

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

	@@ -1 +1 @@
1	- {"file":"nylas-event-location2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-event-location/nylas-event-location.scss?tag=nylas-event-location&encapsulation=shadow","src/components/scheduler-editor/nylas-event-location/nylas-event-location.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-event-location {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n\n span[slot='select-icon'] {\n border-right: 1px solid var(--nylas-base-200);\n padding: 16px 0.75rem 16px 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n height: 20px;\n }\n div.location-input {\n display: grid;\n grid-template-columns: auto 1fr;\n width: 100%;\n gap: 0.5rem;\n @media #{$mobile} {\n grid-template-columns: 1fr;\n }\n input {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 12px 16px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n select-dropdown {\n width: 208px;\n @media #{$mobile} {\n width: 100%;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n left: calc(35px + 0.5rem);\n }\n select-dropdown::part(sd_dropdown-button) {\n display: flex;\n justify-content: space-between;\n width: 100%;\n border: 1px solid var(--nylas-base-200);\n padding: 0 0.5rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n display: inline-flex;\n align-self: center;\n padding: 14px 0;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n}\n","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"],"version":3}
1	+ {"file":"nylas-event-location2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-event-location/nylas-event-location.scss?tag=nylas-event-location&encapsulation=shadow","src/components/scheduler-editor/nylas-event-location/nylas-event-location.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-event-location {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n\n span[slot='select-icon'] {\n border-right: 1px solid var(--nylas-base-200);\n padding: 16px 0.75rem 16px 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n height: 20px;\n }\n div.location-input {\n display: grid;\n grid-template-columns: auto 1fr;\n width: 100%;\n gap: 0.5rem;\n @media #{$mobile} {\n grid-template-columns: 1fr;\n }\n input {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 12px 16px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n select-dropdown {\n width: 208px;\n @media #{$mobile} {\n width: 100%;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n left: calc(35px + 0.5rem);\n }\n select-dropdown::part(sd_dropdown-button) {\n display: flex;\n justify-content: space-between;\n width: 100%;\n border: 1px solid var(--nylas-base-200);\n padding: 0 0.5rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n display: inline-flex;\n align-self: center;\n padding: 14px 0;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n}\n","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"],"version":3}

package/dist/components/nylas-page-styling2.js CHANGED Viewed

@@ -249,12 +249,13 @@ const NylasPageStyling = proxyCustomElement(class NylasPageStyling extends HTMLE
         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 formAssociated() { return true; }
     get host() { return this; }
     static get watchers() { return {
-        "name": ["elementNameChangedHandler"]
+        "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
     }; }
     static get style() { return nylasPageStylingCss; }
 }, [65, "nylas-page-styling", {
@@ -265,7 +266,8 @@ const NylasPageStyling = proxyCustomElement(class NylasPageStyling extends HTMLE
         "currentAppearance": [32],
         "customInputsSlot": [32]
     }, [[4, "nylasFormInputChanged", "nylasFormInputChangeHandler"], [4, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"], [4, "valueChanged", "valueChangedHandler"], [4, "nylasFormCheckboxToggled", "checkboxToggledHandler"], [4, "nylasFormRadioChanged", "radioChangedHandler"]], {
-        "name": ["elementNameChangedHandler"]
+        "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"]
     }]);
 __decorate([
     RegisterComponent({

package/dist/components/nylas-page-styling2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-page-styling2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.scss?tag=nylas-page-styling&encapsulation=shadow","src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-page-styling {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n text-align: left;\n\n &.no-border {\n border: none;\n }\n\n .header {\n padding: 1rem;\n display: grid;\n grid-template-columns: 1fr auto;\n border-bottom: 1px solid var(--nylas-base-200);\n\n h3 {\n border-radius: var(--nylas-border-radius-2x);\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n\n .drawer-toggle {\n display: flex;\n gap: 24px;\n align-items: center;\n\n .chevron {\n display: flex;\n align-self: center;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.disabled {\n cursor: not-allowed;\n color: var(--nylas-base-300);\n\n &:hover {\n color: var(--nylas-base-300);\n }\n }\n }\n }\n }\n\n .nylas-page-styling__body {\n display: grid;\n grid-template-columns: 1fr auto;\n background-color: var(--nylas-base-25);\n border-radius: 0 0 var(--nylas-border-radius-2x);\n\n @media #{$mobile} {\n grid-template-columns: 1fr;\n }\n\n .nylas-page-styling__section {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n color: var(--nylas-base-800);\n\n &.no-padding {\n padding: 0;\n }\n\n @media #{$mobile} {\n border: none;\n }\n\n .nylas-page-styling__row {\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n\n label {\n display: flex;\n align-items: center;\n\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n\n span.label-icon {\n margin-left: 4px;\n\n tooltip-component {\n display: flex;\n }\n }\n }\n\n p {\n margin: 0.25rem 0 0 0;\n font-size: 1rem;\n font-weight: 500;\n line-height: 24px;\n color: var(--nylas-base-900);\n }\n\n .subsection {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &.hide {\n display: none;\n }\n\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n .input-container,\n > * {\n display: flex;\n flex-direction: column;\n column-gap: 2rem;\n row-gap: 0.25rem;\n width: 100%;\n flex: 1;\n\n textarea {\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n border: 1px solid var(--nylas-base-200);\n }\n }\n }\n }\n }\n\n span.error-message {\n color: var(--nylas-error);\n }\n\n span.help-text {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n}\n","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"],"version":3}
1	+ {"file":"nylas-page-styling2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.scss?tag=nylas-page-styling&encapsulation=shadow","src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-page-styling {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n text-align: left;\n\n &.no-border {\n border: none;\n }\n\n .header {\n padding: 1rem;\n display: grid;\n grid-template-columns: 1fr auto;\n border-bottom: 1px solid var(--nylas-base-200);\n\n h3 {\n border-radius: var(--nylas-border-radius-2x);\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n\n .drawer-toggle {\n display: flex;\n gap: 24px;\n align-items: center;\n\n .chevron {\n display: flex;\n align-self: center;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.disabled {\n cursor: not-allowed;\n color: var(--nylas-base-300);\n\n &:hover {\n color: var(--nylas-base-300);\n }\n }\n }\n }\n }\n\n .nylas-page-styling__body {\n display: grid;\n grid-template-columns: 1fr auto;\n background-color: var(--nylas-base-25);\n border-radius: 0 0 var(--nylas-border-radius-2x);\n\n @media #{$mobile} {\n grid-template-columns: 1fr;\n }\n\n .nylas-page-styling__section {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n color: var(--nylas-base-800);\n\n &.no-padding {\n padding: 0;\n }\n\n @media #{$mobile} {\n border: none;\n }\n\n .nylas-page-styling__row {\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n\n label {\n display: flex;\n align-items: center;\n\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n\n span.label-icon {\n margin-left: 4px;\n\n tooltip-component {\n display: flex;\n }\n }\n }\n\n p {\n margin: 0.25rem 0 0 0;\n font-size: 1rem;\n font-weight: 500;\n line-height: 24px;\n color: var(--nylas-base-900);\n }\n\n .subsection {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &.hide {\n display: none;\n }\n\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n .input-container,\n > * {\n display: flex;\n flex-direction: column;\n column-gap: 2rem;\n row-gap: 0.25rem;\n width: 100%;\n flex: 1;\n\n textarea {\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n border: 1px solid var(--nylas-base-200);\n }\n }\n }\n }\n }\n\n span.error-message {\n color: var(--nylas-error);\n }\n\n span.help-text {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n}\n","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"],"version":3}

package/dist/components/nylas-participants-custom-availability2.js CHANGED Viewed

@@ -141,8 +141,9 @@ const NylasParticipantsCustomAvailability = proxyCustomElement(class NylasPartic
         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: () => {
@@ -150,7 +151,7 @@ const NylasParticipantsCustomAvailability = proxyCustomElement(class NylasPartic
                         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 formAssociated() { return true; }

package/dist/components/nylas-participants-custom-availability2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-participants-custom-availability2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.scss?tag=nylas-participants-custom-availability&encapsulation=shadow","src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-participants-custom-availability {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .content {\n .participant-container {\n padding-top: 8px;\n border-top: 1px solid var(--nylas-base-200);\n .participant-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 4px 16px 12px;\n p {\n margin: 0;\n }\n .participant-toggle {\n display: flex;\n gap: 24px;\n align-items: center;\n .chevron {\n display: flex;\n align-self: center;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.disabled {\n cursor: not-allowed;\n color: var(--nylas-base-300);\n &:hover {\n color: var(--nylas-base-300);\n }\n }\n }\n }\n }\n nylas-availability-picker::part(nap) {\n margin: 0;\n border: none;\n }\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { 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"],"version":3}
1	+ {"file":"nylas-participants-custom-availability2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.scss?tag=nylas-participants-custom-availability&encapsulation=shadow","src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-participants-custom-availability {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .content {\n .participant-container {\n padding-top: 8px;\n border-top: 1px solid var(--nylas-base-200);\n .participant-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 4px 16px 12px;\n p {\n margin: 0;\n }\n .participant-toggle {\n display: flex;\n gap: 24px;\n align-items: center;\n .chevron {\n display: flex;\n align-self: center;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.disabled {\n cursor: not-allowed;\n color: var(--nylas-base-300);\n &:hover {\n color: var(--nylas-base-300);\n }\n }\n }\n }\n }\n nylas-availability-picker::part(nap) {\n margin: 0;\n border: none;\n }\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, 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"],"version":3}

package/dist/components/nylas-scheduling.js CHANGED Viewed

@@ -161,7 +161,7 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         if (this.enableUserFeedback && !isInitialized()) {
             init({
                 dsn: 'https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816',
-                release: "1.3.2",
+                release: "1.3.3",
                 integrations: integrations => [
                     ...integrations.filter(_integration => false),
                     feedbackSyncIntegration({
@@ -462,7 +462,7 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
             captureContext: {
                 tags: {
                     'nylas-web-element': 'nylas-schduling',
-                    'nylas-web-element-version': "1.3.2",
+                    'nylas-web-element-version': "1.3.3",
                 },
                 extra: {
                     configId: this.configurationId,

package/dist/components/scheduler-store.js CHANGED Viewed

@@ -178,7 +178,7 @@ class NylaSchedulerAPIConnector {
     async makeAPIRequest(path, method, body, headers = {}) {
         try {
             const schedulerURL = new URL(this.schedulerAPIURL);
-            const version = "1.3.2" || 'latest';
+            const version = "1.3.3" || 'latest';
             schedulerURL.pathname = path;
             const response = await fetch(decodeURIComponent(schedulerURL.toString()), {
                 method,

package/dist/components/time-period-selector2.js CHANGED Viewed

@@ -36,6 +36,21 @@ const TimePeriodSelector = proxyCustomElement(class TimePeriodSelector extends H
             };
         });
     }
+    defaultSelectedPeriodChanged(newValue) {
+        this.selectedPeriod = newValue;
+        this.updateNumberOptionsAndSelectedNumber(newValue);
+    }
+    defaultSelectedNumberChanged(newValue) {
+        this.selectedNumber = newValue;
+    }
+    timePeriodsChanged(newValue) {
+        this.timePeriodOptions = newValue.map(period => {
+            return {
+                label: period,
+                value: period,
+            };
+        });
+    }
     componentDidLoad() {
         this.selectedNumber = this.defaultSelectedNumber;
         this.selectedPeriod = this.defaultSelectedPeriod;
@@ -103,9 +118,14 @@ const TimePeriodSelector = proxyCustomElement(class TimePeriodSelector extends H
         this.selectedNumber = parseInt(this.numberOptions[0].value);
     }
     render() {
-        return (h("div", { key: '76ed6c36ebbcfbb8b8d54edc6a26a9d2a6d6f7fb', class: "time-period-selector" }, typeof this.selectedNumber == 'number' && (h("input-dropdown", { id: "time-number", name: 'time-number', inputValue: this.selectedNumber.toString(), exportparts: "id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) })), typeof this.selectedPeriod == 'string' && (h("select-dropdown", { id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod), withSearch: false }))));
+        return (h("div", { key: 'f40a2be9bc76a0a5be0ffa3c87779fab644e52f2', class: "time-period-selector" }, typeof this.selectedNumber == 'number' && (h("input-dropdown", { id: "time-number", name: 'time-number', inputValue: this.selectedNumber.toString(), exportparts: "id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) })), typeof this.selectedPeriod == 'string' && (h("select-dropdown", { id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod), withSearch: false }))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "defaultSelectedPeriod": ["defaultSelectedPeriodChanged"],
+        "defaultSelectedNumber": ["defaultSelectedNumberChanged"],
+        "timePeriods": ["timePeriodsChanged"]
+    }; }
     static get style() { return timePeriodSelectorCss; }
 }, [2, "time-period-selector", {
         "timePeriods": [16],
@@ -115,7 +135,11 @@ const TimePeriodSelector = proxyCustomElement(class TimePeriodSelector extends H
         "selectedNumber": [32],
         "numberOptions": [32],
         "timePeriodOptions": [32]
-    }, [[0, "inputOptionChanged", "inputOptionChangedHandler"], [0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"]]]);
+    }, [[0, "inputOptionChanged", "inputOptionChangedHandler"], [0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"]], {
+        "defaultSelectedPeriod": ["defaultSelectedPeriodChanged"],
+        "defaultSelectedNumber": ["defaultSelectedNumberChanged"],
+        "timePeriods": ["timePeriodsChanged"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/time-period-selector2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"time-period-selector2.js","mappings":"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","names":[],"sources":["src/components/design-system/time-period-selector/time-period-selector.scss?tag=time-period-selector&encapsulation=scoped","src/components/design-system/time-period-selector/time-period-selector.tsx"],"sourcesContent":[".time-period-selector {\n display: grid;\n gap: 0.5rem;\n grid-template-columns: auto 1fr;\n\n select-dropdown,\n input-dropdown {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n }\n select-dropdown {\n width: 116px;\n }\n input-dropdown {\n width: 84px;\n display: flex;\n align-items: center;\n }\n\n select-dropdown#time-period::part(sd_dropdown-button) {\n width: 100%;\n }\n input-dropdown::part(id_dropdown) {\n width: inherit;\n height: 100%;\n }\n input-dropdown#time-number::part(id_dropdown-input) {\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n }\n input-dropdown::part(id_dropdown-input) {\n padding: 17px;\n gap: 1rem;\n }\n input-dropdown::part(id_dropdown-content) {\n width: 100%;\n max-height: 200px;\n }\n select-dropdown::part(sd_dropdown) {\n width: inherit;\n }\n select-dropdown::part(sd_dropdown-button) {\n padding: 1rem;\n gap: 1rem;\n justify-content: space-between;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-height: 200px;\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Element, Event, EventEmitter } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\n\nconst pluralToSingular = {\n hours: 'hour',\n days: 'day',\n weeks: 'week',\n months: 'month',\n};\n\n@Component({\n tag: 'time-period-selector',\n styleUrl: 'time-period-selector.scss',\n scoped: true,\n})\nexport class TimePeriodSelector {\n @Element() host!: HTMLElement;\n\n // The possible values for the time periods dropdown\n @Prop() timePeriods: string[] = ['hour', 'day', 'week', 'month'];\n\n /*\n The default selected time period.\n /\n @Prop() defaultSelectedPeriod!: string;\n\n /\n The default selected number.\n /\n @Prop() defaultSelectedNumber!: number;\n\n /\n The currently selected time period\n /\n @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n /\n The currently selected number of the time period\n /\n @State() selectedNumber: number = this.defaultSelectedNumber;\n\n /\n * The options for the number dropdown, to be calculated based on the selectedPeriod\n /\n @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod \|\| 'hour').map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n\n /\n The options for the time period dropdown\n /\n @State() timePeriodOptions = this.timePeriods.map(period => {\n return {\n label: period,\n value: period,\n };\n });\n\n componentDidLoad() {\n this.selectedNumber = this.defaultSelectedNumber;\n this.selectedPeriod = this.defaultSelectedPeriod;\n const period = pluralToSingular[this.selectedPeriod] ?? this.selectedPeriod;\n const numberOptions = this.calculateOptions(period);\n this.numberOptions = numberOptions.map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n }\n\n @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n private calculateOptions(period: string): number[] {\n switch (period) {\n case 'hour':\n return Array.from({ length: 23 }, (_, i) => i + 1);\n case 'minute':\n return Array.from({ length: 13 }, (_, i) => i 5);\n case 'day':\n return Array.from({ length: 30 }, (_, i) => i + 1);\n case 'week':\n return Array.from({ length: 4 }, (_, i) => i + 1);\n case 'month':\n return Array.from({ length: 12 }, (_, i) => i + 1);\n default:\n return [];\n }\n }\n\n @Listen('inputOptionChanged')\n inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n const { value, name } = event.detail;\n if (name === 'time-number') {\n this.selectedNumber = value ? parseInt(value) : this.defaultSelectedNumber;\n }\n const selected = {\n number: this.selectedNumber,\n period: this.selectedPeriod,\n };\n this.timePeriodChanged.emit(selected);\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n const { value, name } = event.detail;\n if (name === 'time-period') {\n this.selectedPeriod = value;\n this.updateNumberOptionsAndSelectedNumber(value);\n } else if (name === 'time-number') {\n this.selectedNumber = parseInt(value);\n }\n const selected = {\n number: this.selectedNumber,\n period: this.selectedPeriod,\n };\n this.timePeriodChanged.emit(selected);\n }\n\n updateNumberOptionsAndSelectedNumber(period: string) {\n const numberOptions = this.calculateOptions(period);\n this.numberOptions = numberOptions.map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n this.selectedNumber = parseInt(this.numberOptions[0].value);\n }\n\n render() {\n return (\n <div class=\"time-period-selector\">\n {typeof this.selectedNumber == 'number' && (\n <input-dropdown\n id=\"time-number\"\n name={'time-number'}\n inputValue={this.selectedNumber.toString()}\n exportparts=\"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content\"\n options={this.numberOptions}\n defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString())}\n />\n )}\n {typeof this.selectedPeriod == 'string' && (\n <select-dropdown\n id=\"time-period\"\n name={'time-period'}\n options={this.timePeriodOptions}\n exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n pluralizedLabel={this.selectedNumber > 1 ? 's' : ''}\n defaultSelectedOption={this.timePeriodOptions.find(i => i.value == this.selectedPeriod)}\n withSearch={false}\n />\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"time-period-selector2.js","mappings":"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","names":[],"sources":["src/components/design-system/time-period-selector/time-period-selector.scss?tag=time-period-selector&encapsulation=scoped","src/components/design-system/time-period-selector/time-period-selector.tsx"],"sourcesContent":[".time-period-selector {\n display: grid;\n gap: 0.5rem;\n grid-template-columns: auto 1fr;\n\n select-dropdown,\n input-dropdown {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n }\n select-dropdown {\n width: 116px;\n }\n input-dropdown {\n width: 84px;\n display: flex;\n align-items: center;\n }\n\n select-dropdown#time-period::part(sd_dropdown-button) {\n width: 100%;\n }\n input-dropdown::part(id_dropdown) {\n width: inherit;\n height: 100%;\n }\n input-dropdown#time-number::part(id_dropdown-input) {\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n }\n input-dropdown::part(id_dropdown-input) {\n padding: 17px;\n gap: 1rem;\n }\n input-dropdown::part(id_dropdown-content) {\n width: 100%;\n max-height: 200px;\n }\n select-dropdown::part(sd_dropdown) {\n width: inherit;\n }\n select-dropdown::part(sd_dropdown-button) {\n padding: 1rem;\n gap: 1rem;\n justify-content: space-between;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-height: 200px;\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\n\nconst pluralToSingular = {\n hours: 'hour',\n days: 'day',\n weeks: 'week',\n months: 'month',\n};\n\n@Component({\n tag: 'time-period-selector',\n styleUrl: 'time-period-selector.scss',\n scoped: true,\n})\nexport class TimePeriodSelector {\n @Element() host!: HTMLElement;\n\n // The possible values for the time periods dropdown\n @Prop() timePeriods: string[] = ['hour', 'day', 'week', 'month'];\n\n /*\n The default selected time period.\n /\n @Prop() defaultSelectedPeriod!: string;\n\n /\n The default selected number.\n /\n @Prop() defaultSelectedNumber!: number;\n\n /\n The currently selected time period\n /\n @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n /\n The currently selected number of the time period\n /\n @State() selectedNumber: number = this.defaultSelectedNumber;\n\n /\n * The options for the number dropdown, to be calculated based on the selectedPeriod\n /\n @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod \|\| 'hour').map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n\n /\n The options for the time period dropdown\n /\n @State() timePeriodOptions = this.timePeriods.map(period => {\n return {\n label: period,\n value: period,\n };\n });\n\n @Watch('defaultSelectedPeriod')\n defaultSelectedPeriodChanged(newValue: string) {\n this.selectedPeriod = newValue;\n this.updateNumberOptionsAndSelectedNumber(newValue);\n }\n\n @Watch('defaultSelectedNumber')\n defaultSelectedNumberChanged(newValue: number) {\n this.selectedNumber = newValue;\n }\n\n @Watch('timePeriods')\n timePeriodsChanged(newValue: string[]) {\n this.timePeriodOptions = newValue.map(period => {\n return {\n label: period,\n value: period,\n };\n });\n }\n\n componentDidLoad() {\n this.selectedNumber = this.defaultSelectedNumber;\n this.selectedPeriod = this.defaultSelectedPeriod;\n const period = pluralToSingular[this.selectedPeriod] ?? this.selectedPeriod;\n const numberOptions = this.calculateOptions(period);\n this.numberOptions = numberOptions.map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n }\n\n @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n private calculateOptions(period: string): number[] {\n switch (period) {\n case 'hour':\n return Array.from({ length: 23 }, (_, i) => i + 1);\n case 'minute':\n return Array.from({ length: 13 }, (_, i) => i 5);\n case 'day':\n return Array.from({ length: 30 }, (_, i) => i + 1);\n case 'week':\n return Array.from({ length: 4 }, (_, i) => i + 1);\n case 'month':\n return Array.from({ length: 12 }, (_, i) => i + 1);\n default:\n return [];\n }\n }\n\n @Listen('inputOptionChanged')\n inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n const { value, name } = event.detail;\n if (name === 'time-number') {\n this.selectedNumber = value ? parseInt(value) : this.defaultSelectedNumber;\n }\n const selected = {\n number: this.selectedNumber,\n period: this.selectedPeriod,\n };\n this.timePeriodChanged.emit(selected);\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n const { value, name } = event.detail;\n if (name === 'time-period') {\n this.selectedPeriod = value;\n this.updateNumberOptionsAndSelectedNumber(value);\n } else if (name === 'time-number') {\n this.selectedNumber = parseInt(value);\n }\n const selected = {\n number: this.selectedNumber,\n period: this.selectedPeriod,\n };\n this.timePeriodChanged.emit(selected);\n }\n\n updateNumberOptionsAndSelectedNumber(period: string) {\n const numberOptions = this.calculateOptions(period);\n this.numberOptions = numberOptions.map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n this.selectedNumber = parseInt(this.numberOptions[0].value);\n }\n\n render() {\n return (\n <div class=\"time-period-selector\">\n {typeof this.selectedNumber == 'number' && (\n <input-dropdown\n id=\"time-number\"\n name={'time-number'}\n inputValue={this.selectedNumber.toString()}\n exportparts=\"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content\"\n options={this.numberOptions}\n defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString())}\n />\n )}\n {typeof this.selectedPeriod == 'string' && (\n <select-dropdown\n id=\"time-period\"\n name={'time-period'}\n options={this.timePeriodOptions}\n exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n pluralizedLabel={this.selectedNumber > 1 ? 's' : ''}\n defaultSelectedOption={this.timePeriodOptions.find(i => i.value == this.selectedPeriod)}\n withSearch={false}\n />\n )}\n </div>\n );\n }\n}\n"],"version":3}