npm - @nylas/web-elements - Versions diffs - 0.0.0-canary-20251023164535 → 0.0.0-canary-20251029185136 - Mend

@nylas/web-elements 0.0.0-canary-20251023164535 → 0.0.0-canary-20251029185136

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

package/dist/components/{p-CIZt1hbc.js.map → p-CS7dGt1R.js.map} RENAMED Viewed

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

package/dist/components/{p-CxgQ4DV9.js → p-CZw_P3Tp.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
-import { R as RegisterComponent } from './p-Nzu_5ZmQ.js';
-import { a as debug, b as instance } from './p-C-9RzJZG.js';
+import { R as RegisterComponent } from './p-BC9yeuRb.js';
+import { a as debug, b as instance } from './p-BkzMJ4pV.js';
 import { d as defineCustomElement$3 } from './p-u4gxSL05.js';
 import { d as defineCustomElement$2 } from './p-5epylYpy.js';
 import { d as defineCustomElement$1 } from './p-Di3WT0Ws.js';
@@ -184,6 +184,6 @@ function defineCustomElement() {
 }
 export { NylasOnlySpecificTimeAvailability as N, defineCustomElement as d };
-//# sourceMappingURL=p-CxgQ4DV9.js.map
+//# sourceMappingURL=p-CZw_P3Tp.js.map
-//# sourceMappingURL=p-CxgQ4DV9.js.map
+//# sourceMappingURL=p-CZw_P3Tp.js.map

package/dist/components/{p-CxgQ4DV9.js.map → p-CZw_P3Tp.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CxgQ4DV9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-only-specific-time-availability/nylas-only-specific-time-availability.scss?tag=nylas-only-specific-time-availability&encapsulation=shadow","src/components/scheduler-editor/nylas-only-specific-time-availability/nylas-only-specific-time-availability.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-only-specific-time-availability {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n margin: 1rem;\n color: var(--nylas-base-900);\n background: var(--nylas-base-25);\n}\n\n.header {\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 1rem;\n\n .header-content {\n flex: 1;\n\n h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n display: flex;\n align-items: center;\n gap: 8px;\n\n .title-icon {\n display: inline-flex;\n align-items: center;\n\n tooltip-component {\n font-size: 0.875rem;\n font-weight: normal;\n }\n }\n }\n\n p {\n margin: 0.5rem 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 .toggle-wrapper {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n}\n\n.info-box {\n margin: 0 1rem 1rem 1rem;\n padding: 1rem;\n background: var(--nylas-info-50, #e0f2fe);\n border: 1px solid var(--nylas-info-200, #93c5fd);\n border-radius: var(--nylas-border-radius-2x);\n display: flex;\n gap: 0.75rem;\n align-items: flex-start;\n\n .info-box-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--nylas-info, #0ea5e9);\n margin-top: 2px;\n }\n\n .info-box-content {\n flex: 1;\n\n h4 {\n margin: 0 0 0.25rem 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-info-900, #0c4a6e);\n }\n\n p {\n margin: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-info-800, #075985);\n }\n }\n}\n\ntoggle-switch {\n margin-right: 0;\n transform: scale(0.8);\n transform-origin: right center;\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 i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { Configuration, ThemeConfig } from '@nylas/core';\n\n/\n The `nylas-only-specific-time-availability` component is a UI component that allows users to enable/disable specific time availability.\n * When enabled, users can configure specific time slots instead of using default open hours.\n * @part osta - The root container\n * @part osta__header - The header section with title and toggle\n * @part osta__header-content - The header content wrapper (title and description)\n * @part osta__header-title - The header title\n * @part osta__header-description - The header description\n * @part osta__toggle - The toggle switch wrapper\n * @part osta__info-box - The informational blue box\n * @part osta__info-box-title - The info box title\n * @part osta__info-box-description - The info box description\n /\n@Component({\n tag: 'nylas-only-specific-time-availability',\n styleUrl: 'nylas-only-specific-time-availability.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasOnlySpecificTimeAvailability {\n /\n The element <nylas-only-specific-time-availability> itself.\n /\n @Element() host!: HTMLNylasOnlySpecificTimeAvailabilityElement;\n\n /\n @standalone\n * The name of the component\n /\n @Prop() name: string = 'only-specific-time-availability';\n\n /\n @standalone\n * The selected configuration.\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n The selected language.\n /\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n /\n @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n @standalone\n * Whether only specific time availability is enabled.\n /\n @Prop() onlySpecificTimeAvailability?: boolean;\n\n /\n The enable specific time availability state.\n /\n @State() enableSpecificTimeAvailability: boolean = false;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n This event is fired when the toggle switch is toggled.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\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-only-specific-time-availability', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newVal: Configuration) {\n debug('nylas-only-specific-time-availability', 'configChangedHandler', newVal);\n // Load the value from the prop\n this.loadOnlySpecificTimeAvailability();\n }\n\n @Watch('onlySpecificTimeAvailability')\n onlySpecificTimeAvailabilityChangedHandler(newVal: boolean \| undefined, oldVal: boolean \| undefined) {\n debug('nylas-only-specific-time-availability', 'onlySpecificTimeAvailabilityChangedHandler', newVal, oldVal);\n // Only update if the prop value is actually different from current state\n if (newVal !== undefined && newVal !== this.enableSpecificTimeAvailability) {\n this.loadOnlySpecificTimeAvailability();\n }\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n connectedCallback() {\n debug('nylas-only-specific-time-availability', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-only-specific-time-availability', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-only-specific-time-availability', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-only-specific-time-availability', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else if (this.onlySpecificTimeAvailability !== undefined) {\n this.loadOnlySpecificTimeAvailability();\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n get isInternalsAvailable() {\n return typeof this.internals.setFormValue === 'function';\n }\n\n loadOnlySpecificTimeAvailability() {\n if (this.onlySpecificTimeAvailability !== undefined) {\n this.enableSpecificTimeAvailability = this.onlySpecificTimeAvailability;\n this.handleSettingValue(false);\n }\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n @Listen('nylasFormSwitchToggled')\n nylasFormSwitchToggledHandler(event: CustomEvent<{ checked: boolean; name: string }>) {\n debug('nylas-only-specific-time-availability', 'nylasFormSwitchToggledHandler', event.detail);\n const { checked, name } = event.detail;\n if (name === this.name) {\n this.enableSpecificTimeAvailability = checked;\n this.handleSettingValue();\n }\n }\n\n handleSettingValue(valueChanged: boolean = true) {\n const value = JSON.stringify({\n enableSpecificTimeAvailability: this.enableSpecificTimeAvailability,\n });\n\n if (this.isInternalsAvailable) {\n this.internals.setFormValue(value, this.name);\n }\n\n if (valueChanged) {\n this.valueChanged.emit({\n value,\n name: this.name,\n });\n }\n }\n\n @RegisterComponent<NylasOnlySpecificTimeAvailability, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-only-specific-time-availability',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-only-specific-time-availability\" part=\"osta\">\n <div class=\"header\" part=\"osta__header\">\n <div class=\"header-content\" part=\"osta__header-content\">\n <h3 part=\"osta__header-title\">\n {i18next.t('nylasOnlySpecificTimeAvailability.title')}\n <span class=\"title-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasOnlySpecificTimeAvailability.tooltip.desc')}</span>\n </tooltip-component>\n </span>\n </h3>\n <p part=\"osta__header-description\">{i18next.t('nylasOnlySpecificTimeAvailability.description')}</p>\n </div>\n <div class=\"toggle-wrapper\" part=\"osta__toggle\">\n <toggle-switch name={this.name} checked={this.enableSpecificTimeAvailability} themeConfig={this.themeConfig} />\n </div>\n </div>\n\n {this.enableSpecificTimeAvailability && (\n <div class=\"info-box\" part=\"osta__info-box\">\n <div class=\"info-box-icon\">\n <info-icon />\n </div>\n <div class=\"info-box-content\">\n <h4 part=\"osta__info-box-title\">{i18next.t('nylasOnlySpecificTimeAvailability.infoBox.title')}</h4>\n <p part=\"osta__info-box-description\">{i18next.t('nylasOnlySpecificTimeAvailability.infoBox.description')}</p>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CZw_P3Tp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-only-specific-time-availability/nylas-only-specific-time-availability.scss?tag=nylas-only-specific-time-availability&encapsulation=shadow","src/components/scheduler-editor/nylas-only-specific-time-availability/nylas-only-specific-time-availability.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-only-specific-time-availability {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n margin: 1rem;\n color: var(--nylas-base-900);\n background: var(--nylas-base-25);\n}\n\n.header {\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 1rem;\n\n .header-content {\n flex: 1;\n\n h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n display: flex;\n align-items: center;\n gap: 8px;\n\n .title-icon {\n display: inline-flex;\n align-items: center;\n\n tooltip-component {\n font-size: 0.875rem;\n font-weight: normal;\n }\n }\n }\n\n p {\n margin: 0.5rem 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 .toggle-wrapper {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n}\n\n.info-box {\n margin: 0 1rem 1rem 1rem;\n padding: 1rem;\n background: var(--nylas-info-50, #e0f2fe);\n border: 1px solid var(--nylas-info-200, #93c5fd);\n border-radius: var(--nylas-border-radius-2x);\n display: flex;\n gap: 0.75rem;\n align-items: flex-start;\n\n .info-box-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--nylas-info, #0ea5e9);\n margin-top: 2px;\n }\n\n .info-box-content {\n flex: 1;\n\n h4 {\n margin: 0 0 0.25rem 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-info-900, #0c4a6e);\n }\n\n p {\n margin: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-info-800, #075985);\n }\n }\n}\n\ntoggle-switch {\n margin-right: 0;\n transform: scale(0.8);\n transform-origin: right center;\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 i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { Configuration, ThemeConfig } from '@nylas/core';\n\n/\n The `nylas-only-specific-time-availability` component is a UI component that allows users to enable/disable specific time availability.\n * When enabled, users can configure specific time slots instead of using default open hours.\n * @part osta - The root container\n * @part osta__header - The header section with title and toggle\n * @part osta__header-content - The header content wrapper (title and description)\n * @part osta__header-title - The header title\n * @part osta__header-description - The header description\n * @part osta__toggle - The toggle switch wrapper\n * @part osta__info-box - The informational blue box\n * @part osta__info-box-title - The info box title\n * @part osta__info-box-description - The info box description\n /\n@Component({\n tag: 'nylas-only-specific-time-availability',\n styleUrl: 'nylas-only-specific-time-availability.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasOnlySpecificTimeAvailability {\n /\n The element <nylas-only-specific-time-availability> itself.\n /\n @Element() host!: HTMLNylasOnlySpecificTimeAvailabilityElement;\n\n /\n @standalone\n * The name of the component\n /\n @Prop() name: string = 'only-specific-time-availability';\n\n /\n @standalone\n * The selected configuration.\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n The selected language.\n /\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n /\n @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n @standalone\n * Whether only specific time availability is enabled.\n /\n @Prop() onlySpecificTimeAvailability?: boolean;\n\n /\n The enable specific time availability state.\n /\n @State() enableSpecificTimeAvailability: boolean = false;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n This event is fired when the toggle switch is toggled.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\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-only-specific-time-availability', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newVal: Configuration) {\n debug('nylas-only-specific-time-availability', 'configChangedHandler', newVal);\n // Load the value from the prop\n this.loadOnlySpecificTimeAvailability();\n }\n\n @Watch('onlySpecificTimeAvailability')\n onlySpecificTimeAvailabilityChangedHandler(newVal: boolean \| undefined, oldVal: boolean \| undefined) {\n debug('nylas-only-specific-time-availability', 'onlySpecificTimeAvailabilityChangedHandler', newVal, oldVal);\n // Only update if the prop value is actually different from current state\n if (newVal !== undefined && newVal !== this.enableSpecificTimeAvailability) {\n this.loadOnlySpecificTimeAvailability();\n }\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n connectedCallback() {\n debug('nylas-only-specific-time-availability', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-only-specific-time-availability', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-only-specific-time-availability', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-only-specific-time-availability', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else if (this.onlySpecificTimeAvailability !== undefined) {\n this.loadOnlySpecificTimeAvailability();\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n get isInternalsAvailable() {\n return typeof this.internals.setFormValue === 'function';\n }\n\n loadOnlySpecificTimeAvailability() {\n if (this.onlySpecificTimeAvailability !== undefined) {\n this.enableSpecificTimeAvailability = this.onlySpecificTimeAvailability;\n this.handleSettingValue(false);\n }\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n @Listen('nylasFormSwitchToggled')\n nylasFormSwitchToggledHandler(event: CustomEvent<{ checked: boolean; name: string }>) {\n debug('nylas-only-specific-time-availability', 'nylasFormSwitchToggledHandler', event.detail);\n const { checked, name } = event.detail;\n if (name === this.name) {\n this.enableSpecificTimeAvailability = checked;\n this.handleSettingValue();\n }\n }\n\n handleSettingValue(valueChanged: boolean = true) {\n const value = JSON.stringify({\n enableSpecificTimeAvailability: this.enableSpecificTimeAvailability,\n });\n\n if (this.isInternalsAvailable) {\n this.internals.setFormValue(value, this.name);\n }\n\n if (valueChanged) {\n this.valueChanged.emit({\n value,\n name: this.name,\n });\n }\n }\n\n @RegisterComponent<NylasOnlySpecificTimeAvailability, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-only-specific-time-availability',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-only-specific-time-availability\" part=\"osta\">\n <div class=\"header\" part=\"osta__header\">\n <div class=\"header-content\" part=\"osta__header-content\">\n <h3 part=\"osta__header-title\">\n {i18next.t('nylasOnlySpecificTimeAvailability.title')}\n <span class=\"title-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasOnlySpecificTimeAvailability.tooltip.desc')}</span>\n </tooltip-component>\n </span>\n </h3>\n <p part=\"osta__header-description\">{i18next.t('nylasOnlySpecificTimeAvailability.description')}</p>\n </div>\n <div class=\"toggle-wrapper\" part=\"osta__toggle\">\n <toggle-switch name={this.name} checked={this.enableSpecificTimeAvailability} themeConfig={this.themeConfig} />\n </div>\n </div>\n\n {this.enableSpecificTimeAvailability && (\n <div class=\"info-box\" part=\"osta__info-box\">\n <div class=\"info-box-icon\">\n <info-icon />\n </div>\n <div class=\"info-box-content\">\n <h4 part=\"osta__info-box-title\">{i18next.t('nylasOnlySpecificTimeAvailability.infoBox.title')}</h4>\n <p part=\"osta__info-box-description\">{i18next.t('nylasOnlySpecificTimeAvailability.infoBox.description')}</p>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CxjS5vcT.js → p-C_QAMVyX.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
-import { R as RegisterComponent } from './p-Nzu_5ZmQ.js';
-import { a as debug, b as instance, s as sanitize } from './p-C-9RzJZG.js';
+import { R as RegisterComponent } from './p-BC9yeuRb.js';
+import { a as debug, b as instance, s as sanitize } from './p-BkzMJ4pV.js';
 import { d as defineCustomElement$2 } from './p-yguTPRl_.js';
 import { d as defineCustomElement$1 } from './p-Do1E50j8.js';
@@ -334,6 +334,6 @@ function defineCustomElement() {
 }
 export { NylasPageStyling as N, defineCustomElement as d };
-//# sourceMappingURL=p-CxjS5vcT.js.map
+//# sourceMappingURL=p-C_QAMVyX.js.map
-//# sourceMappingURL=p-CxjS5vcT.js.map
+//# sourceMappingURL=p-C_QAMVyX.js.map

package/dist/components/{p-CxjS5vcT.js.map → p-C_QAMVyX.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CxjS5vcT.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"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":["@use '../../../common/styles/variables' as ;\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 .hidden {\n display: none;\n }\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: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\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: 16px;\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: 16px;\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}","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, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\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 selected language.\n /\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\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 @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n 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 this.currentAppearance = { ...this.currentAppearance, [name]: value };\n this.updateConfirmationFormValue(false);\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(valueChanged: boolean = true) {\n debug('nylas-page-styling', 'updateConfirmationFormValue');\n this.internals.setFormValue(JSON.stringify(this.currentAppearance), this.name);\n if (valueChanged) {\n this.valueChanged.emit({ value: JSON.stringify(this.currentAppearance), name: this.name });\n }\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([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\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>{i18next.t('nylasPageStyling.headerTitle')}</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 <div class=\"hidden\">\n <input-color-picker name=\"color-picker\" />\n </div>\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":"p-C_QAMVyX.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"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":["@use '../../../common/styles/variables' as ;\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 .hidden {\n display: none;\n }\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: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\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: 16px;\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: 16px;\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}","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, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\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 selected language.\n /\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\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 @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n 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 this.currentAppearance = { ...this.currentAppearance, [name]: value };\n this.updateConfirmationFormValue(false);\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(valueChanged: boolean = true) {\n debug('nylas-page-styling', 'updateConfirmationFormValue');\n this.internals.setFormValue(JSON.stringify(this.currentAppearance), this.name);\n if (valueChanged) {\n this.valueChanged.emit({ value: JSON.stringify(this.currentAppearance), name: this.name });\n }\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([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\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>{i18next.t('nylasPageStyling.headerTitle')}</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 <div class=\"hidden\">\n <input-color-picker name=\"color-picker\" />\n </div>\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/{p-zBmfn9Ee.js → p-CexYKlpc.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-Bht9ktsW.js';
-import { s as sanitize } from './p-C-9RzJZG.js';
+import { s as sanitize } from './p-BkzMJ4pV.js';
 import { d as defineCustomElement$2 } from './p-u4gxSL05.js';
 import { d as defineCustomElement$1 } from './p-Di3WT0Ws.js';
@@ -129,6 +129,6 @@ function defineCustomElement() {
 }
 export { TextareaComponent as T, defineCustomElement as d };
-//# sourceMappingURL=p-zBmfn9Ee.js.map
+//# sourceMappingURL=p-CexYKlpc.js.map
-//# sourceMappingURL=p-zBmfn9Ee.js.map
+//# sourceMappingURL=p-CexYKlpc.js.map

package/dist/components/{p-zBmfn9Ee.js.map → p-CexYKlpc.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-zBmfn9Ee.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\n\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\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\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/*\n `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n \n @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n /\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /\n The name of the textarea, important for form submissions.\n /\n @Prop() name: string = 'textarea';\n\n /\n The default value of the textarea, appearing when the component first renders.\n /\n @Prop() defaultValue?: string;\n\n /\n The label for the textarea, displayed above it.\n /\n @Prop() label: string = '';\n\n /\n Placeholder text shown in the textarea when it is empty.\n /\n @Prop() placeholder: string = '';\n\n /\n Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n /\n @Prop() required: boolean = false;\n\n /\n If true, the textarea cannot be edited by the user.\n /\n @Prop() readOnly: boolean = false;\n\n /\n Automatically focus the textarea when the component loads.\n /\n @Prop() autoFocus: boolean = false;\n\n /\n The maximum number of characters allowed in the textarea.\n /\n @Prop() maxLength: number = 255;\n\n /\n The type\n /\n @Prop() type: string = 'multi_line_text';\n\n /\n The content of the label's tooltip\n /\n @Prop() tooltip: string = '';\n\n /\n Error message to display when the textarea is required and empty.\n /\n @Prop() errorMessage: string = '';\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n State for the current value of the textarea.\n /\n @State() value: string = '';\n\n /\n State for managing the display of any error messages.\n /\n @State() error: string = '';\n\n /\n Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n /\n Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n /\n componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n this.applyThemeConfig(this.themeConfig);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Event listeners\n /\n Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n /\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /\n Handles user input in the textarea, updating the value and emitting an event.\n /\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /\n Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n /\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage \|\| `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /\n Renders the component UI including the label, textarea, and any error messages.\n /\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CexYKlpc.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\n\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\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\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/*\n `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n \n @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n /\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /\n The name of the textarea, important for form submissions.\n /\n @Prop() name: string = 'textarea';\n\n /\n The default value of the textarea, appearing when the component first renders.\n /\n @Prop() defaultValue?: string;\n\n /\n The label for the textarea, displayed above it.\n /\n @Prop() label: string = '';\n\n /\n Placeholder text shown in the textarea when it is empty.\n /\n @Prop() placeholder: string = '';\n\n /\n Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n /\n @Prop() required: boolean = false;\n\n /\n If true, the textarea cannot be edited by the user.\n /\n @Prop() readOnly: boolean = false;\n\n /\n Automatically focus the textarea when the component loads.\n /\n @Prop() autoFocus: boolean = false;\n\n /\n The maximum number of characters allowed in the textarea.\n /\n @Prop() maxLength: number = 255;\n\n /\n The type\n /\n @Prop() type: string = 'multi_line_text';\n\n /\n The content of the label's tooltip\n /\n @Prop() tooltip: string = '';\n\n /\n Error message to display when the textarea is required and empty.\n /\n @Prop() errorMessage: string = '';\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n State for the current value of the textarea.\n /\n @State() value: string = '';\n\n /\n State for managing the display of any error messages.\n /\n @State() error: string = '';\n\n /\n Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n /\n Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n /\n componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n this.applyThemeConfig(this.themeConfig);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Event listeners\n /\n Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n /\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /\n Handles user input in the textarea, updating the value and emitting an event.\n /\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /\n Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n /\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage \|\| `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /\n Renders the component UI including the label, textarea, and any error messages.\n /\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-wJWFqJZw.js → p-CsKdKz2W.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
-import { R as RegisterComponent } from './p-Nzu_5ZmQ.js';
-import { b as instance, a as debug } from './p-C-9RzJZG.js';
+import { R as RegisterComponent } from './p-BC9yeuRb.js';
+import { b as instance, a as debug } from './p-BkzMJ4pV.js';
 import { d as defineCustomElement$3 } from './p-CfWyIsij.js';
 import { d as defineCustomElement$2 } from './p-B8WlEJaq.js';
 import { d as defineCustomElement$1 } from './p-DwvZ9OA9.js';
@@ -160,6 +160,6 @@ function defineCustomElement() {
 }
 export { NylasOrganizerConfirmationCard as N, defineCustomElement as d };
-//# sourceMappingURL=p-wJWFqJZw.js.map
+//# sourceMappingURL=p-CsKdKz2W.js.map
-//# sourceMappingURL=p-wJWFqJZw.js.map
+//# sourceMappingURL=p-CsKdKz2W.js.map

package/dist/components/{p-wJWFqJZw.js.map → p-CsKdKz2W.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-wJWFqJZw.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.scss?tag=nylas-organizer-confirmation-card&encapsulation=shadow","src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.event-card-wrapper {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-900);\n border-radius: var(--nylas-border-radius-3x);\n position: relative;\n margin-top: 1rem;\n width: 424px;\n\n box-shadow:\n 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n\n @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\n }\n}\n\n.calendar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 50%;\n position: absolute;\n top: -1.25rem;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n margin: 1.5rem 4rem;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 16px;\n font-weight: 400;\n\n h2 {\n color: var(--nylas-base-600);\n margin-top: 1.5rem;\n margin-bottom: 0.25rem;\n font-size: 1.125rem;\n font-weight: 600;\n }\n}\n\n.manage-booking-description {\n border-top: 1px solid var(--nylas-base-200);\n\n p {\n font-size: 16px;\n margin: 1rem;\n padding: 0.5rem 1rem;\n font-weight: 400;\n color: var(--nylas-base-800);\n }\n}\n\n.footer {\n padding: 0.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n box-sizing: border-box;\n background-color: var(--nylas-base-25);\n width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n &.no-template-cols {\n grid-template-columns: 1fr;\n }\n\n &.no-footer {\n display: none;\n }\n}\n\nsp-divider {\n background-color: var(--nylas-base-200);\n height: 1px;\n}\n\ncalendar-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\nbutton-component {\n --dot-color: var(--nylas-base-700);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/\n The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.\n \n @part nmcc - The booked event card host.\n * @part nmcc__card - The booked event card.\n * @part nmcc__title - The title of the booked event card.\n * @part nmcc__description - The description of the booked event card.\n * @part nmcc__button-outline - The cancel & reschedule button CTA.\n * @part nmcc__cancel-cta - The cancel button CTA.\n * @part nmcc__reschedule-cta - The reschedule button CTA.\n /\n@Component({\n tag: 'nylas-organizer-confirmation-card',\n styleUrl: 'nylas-organizer-confirmation-card.scss',\n shadow: true,\n})\nexport class NylasOrganizerConfirmationCard {\n /\n The host element.\n /\n @Element() host!: HTMLNylasOrganizerConfirmationCardElement;\n\n /\n @standalone\n * The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop() readonly isLoading?: boolean;\n\n /\n @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /\n Booking flow type.\n /\n @Prop() readonly organizerConfirmationBookingId?: string;\n\n /\n The selected language.\n /\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n /\n The state to identify which action is being performed.\n /\n @State() action: 'confirm' \| 'reject' \| null = null;\n\n /\n Reject booking button clicked event.\n /\n @Event() readonly rejectBookingButtonClicked!: EventEmitter<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>;\n\n /\n Reschedule button clicked event.\n * /\n @Event() readonly confirmBookingButtonClicked!: EventEmitter<{\n bookingId: string;\n host: HTMLNylasOrganizerConfirmationCardElement;\n errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n }>;\n\n /\n This event is fired when an error occurs while rescheduling the booking.\n */\n @Event() readonly confirmBookingError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n @Watch('themeConfig')\n themeConfigChanged(newThemeConfig: ThemeConfig) {\n this.applyThemeConfig(newThemeConfig);\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-organizer-confirmation-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-organizer-confirmation-card] Component did load`);\n this.applyThemeConfig(this.themeConfig);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleConfirmBookingButtonClicked = () => {\n this.action = 'confirm';\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.confirmBookingError.emit(error);\n };\n if (this.organizerConfirmationBookingId && !this.isLoading) {\n this.confirmBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host, errorHandler });\n }\n };\n\n private handleRejectBookingButtonClicked = () => {\n this.action = 'reject';\n if (this.organizerConfirmationBookingId && !this.isLoading) {\n this.rejectBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host });\n }\n };\n\n @Method()\n async resetAction() {\n this.action = null;\n }\n\n @RegisterComponent<NylasOrganizerConfirmationCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-organizer-confirmation-card',\n stateToProps: new Map([\n ['scheduler.organizerConfirmationBookingId', 'organizerConfirmationBookingId'],\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.themeConfig', 'themeConfig'],\n ]),\n eventToProps: {\n rejectBookingButtonClicked: async (\n event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n nylasSchedulerConnector.scheduler.setReject(event.detail.bookingId);\n },\n confirmBookingButtonClicked: async (\n event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const { host } = event.detail;\n const result = await nylasSchedulerConnector.scheduler.updateBooking({\n bookingId: event.detail.bookingId,\n status: 'confirmed',\n });\n const { errorHandler } = event.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n await host.resetAction();\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nmcc\">\n <div class=\"event-card-wrapper\" part=\"nmccc__card\">\n <div class=\"calendar-icon\">\n <calendar-check-icon />\n </div>\n <div class=\"booked-event-header\">\n <h2 slot=\"card-title\" part=\"nmcc__title\">\n {!!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`}\n </h2>\n </div>\n <div class=\"manage-booking-description\">\n <p>{i18next.t('bookingPendingnDescription')}</p>\n </div>\n <div\n class={{\n footer: true,\n }}\n >\n <button-component\n variant={'destructive'}\n onClick={this.handleRejectBookingButtonClicked}\n isLoading={this.isLoading && this.action === 'reject'}\n part=\"nmcc__button-outline nmcc__cancel-cta\"\n >\n {`${i18next.t('rejectBookingButton')}`}\n </button-component>\n <button-component\n variant={'basic'}\n onClick={this.handleConfirmBookingButtonClicked}\n isLoading={this.isLoading && this.action === 'confirm'}\n part=\"nmcc__button-outline nmcc__reschedule-cta\"\n >\n {`${i18next.t('confirmBookingButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CsKdKz2W.js","mappings":";;;;;;;AAAA,MAAM,iCAAiC,GAAG,m3HAAm3H;;;;;;;;;;;;;;;;MC2Bh5H,8BAA8B,GAAAA,kBAAA,CAAA,MAAA,8BAAA,SAAAC,CAAA,CAAA;AAL3C,IAAA,WAAA,GAAA;;;;;;;AAqCqD,QAAA,IAAA,CAAA,gBAAgB,GAAW,SAAS,CAAC,QAAQ;AAKvF,QAAA,IAAM,CAAA,MAAA,GAAgC,IAAI;AAqD3C,QAAA,IAAiC,CAAA,iCAAA,GAAG,MAAK;AAC/C,YAAA,IAAI,CAAC,MAAM,GAAG,SAAS;AACvB,YAAA,MAAM,YAAY,GAAG,CAAC,KAAkC,KAAI;AAC1D,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC;AACtC,aAAC;YACD,IAAI,IAAI,CAAC,8BAA8B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBAC1D,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,CAAC;;AAE5H,SAAC;AAEO,QAAA,IAAgC,CAAA,gCAAA,GAAG,MAAK;AAC9C,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;YACtB,IAAI,IAAI,CAAC,8BAA8B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AAC1D,gBAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;AAE7G,SAAC;AAkFF;AAhIC,IAAA,kBAAkB,CAAC,cAA2B,EAAA;AAC5C,QAAA,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC;;IAIvC,8BAA8B,CAAC,MAAqB,EAAE,MAAqB,EAAA;QACzE,IAAI,MAAM,KAAK,MAAM;YAAE;AACvB,QAAAC,QAAO,CAAC,cAAc,CAAC,MAAM,CAAC;;AAGhC,IAAA,iBAAiB;AAEjB,IAAA,oBAAoB;AAEpB,IAAA,MAAM,iBAAiB,GAAA;QACrB,KAAK,CAAC,CAAyD,uDAAA,CAAA,CAAC;;AAGlE,IAAA,MAAM,gBAAgB,GAAA;QACpB,KAAK,CAAC,CAAwD,sDAAA,CAAA,CAAC;AAC/D,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC;;AAGzC,IAAA,gBAAgB,CAAC,WAAyB,EAAA;QACxC,IAAI,WAAW,EAAE;AACf,YAAA,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;AACtD,gBAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA,EAAG,GAAG,CAAA,CAAE,EAAE,KAAK,CAAC;;;;AAuBlD,IAAA,MAAM,WAAW,GAAA;AACf,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;IAqCpB,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,aAAa,EAAA,EAChD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAuB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,EACrC,EAAA,CAAC,CAAC,IAAI,CAAC,8BAA8B,IAAI,CAAG,EAAAA,QAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAG,CAAA,CAAA,CAC7E,CACD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EACrC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAIA,QAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAK,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;aACb,EAAA,EAED,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAC9C,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EACrD,IAAI,EAAC,uCAAuC,EAAA,EAE3C,CAAA,EAAGA,QAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAE,CAAA,CACrB,EACnB,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,iCAAiC,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EACtD,IAAI,EAAC,2CAA2C,EAE/C,EAAA,CAAG,EAAAA,QAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAA,CAAE,CACtB,CACf,CACF,CACD;;;;;;;;;;;;;;;;;;;;AAtCX,UAAA,CAAA;AAlCC,IAAA,iBAAiB,CAAyG;AACzH,QAAA,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,0CAA0C,EAAE,gCAAgC,CAAC;YAC9E,CAAC,0BAA0B,EAAE,gBAAgB,CAAC;YAC9C,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,uBAAuB,EAAE,aAAa,CAAC;SACzC,CAAC;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,0BAA0B,EAAE,OAC1B,KAA0F,EAC1F,uBAAgD,KAC9C;gBACF,uBAAuB,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;aACpE;AACD,YAAA,2BAA2B,EAAE,OAC3B,KAAuJ,EACvJ,uBAAgD,KAC9C;AACF,gBAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM;gBAC7B,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC;AACnE,oBAAA,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;AACjC,oBAAA,MAAM,EAAE,WAAW;AACpB,iBAAA,CAAC;AACF,gBAAA,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM;gBACrC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC;;AAEtB,gBAAA,MAAM,IAAI,CAAC,WAAW,EAAE;aACzB;AACF,SAAA;AACD,QAAA,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;CAyCD,EAAA,8BAAA,CAAA,SAAA,EAAA,QAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.scss?tag=nylas-organizer-confirmation-card&encapsulation=shadow","src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.event-card-wrapper {\n height: inherit;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n font-family: var(--nylas-font-family);\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-900);\n border-radius: var(--nylas-border-radius-3x);\n position: relative;\n margin-top: 1rem;\n width: 424px;\n\n box-shadow:\n 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n\n @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\n }\n}\n\n.calendar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 50%;\n position: absolute;\n top: -1.25rem;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n margin: 1.5rem 4rem;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 16px;\n font-weight: 400;\n\n h2 {\n color: var(--nylas-base-600);\n margin-top: 1.5rem;\n margin-bottom: 0.25rem;\n font-size: 1.125rem;\n font-weight: 600;\n }\n}\n\n.manage-booking-description {\n border-top: 1px solid var(--nylas-base-200);\n\n p {\n font-size: 16px;\n margin: 1rem;\n padding: 0.5rem 1rem;\n font-weight: 400;\n color: var(--nylas-base-800);\n }\n}\n\n.footer {\n padding: 0.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n box-sizing: border-box;\n background-color: var(--nylas-base-25);\n width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n &.no-template-cols {\n grid-template-columns: 1fr;\n }\n\n &.no-footer {\n display: none;\n }\n}\n\nsp-divider {\n background-color: var(--nylas-base-200);\n height: 1px;\n}\n\ncalendar-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\nbutton-component {\n --dot-color: var(--nylas-base-700);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/\n The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.\n \n @part nmcc - The booked event card host.\n * @part nmcc__card - The booked event card.\n * @part nmcc__title - The title of the booked event card.\n * @part nmcc__description - The description of the booked event card.\n * @part nmcc__button-outline - The cancel & reschedule button CTA.\n * @part nmcc__cancel-cta - The cancel button CTA.\n * @part nmcc__reschedule-cta - The reschedule button CTA.\n /\n@Component({\n tag: 'nylas-organizer-confirmation-card',\n styleUrl: 'nylas-organizer-confirmation-card.scss',\n shadow: true,\n})\nexport class NylasOrganizerConfirmationCard {\n /\n The host element.\n /\n @Element() host!: HTMLNylasOrganizerConfirmationCardElement;\n\n /\n @standalone\n * The config settings for the scheduler.\n /\n @Prop() readonly configSettings?: ConfigSettings;\n\n /\n @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop() readonly isLoading?: boolean;\n\n /\n @standalone\n * The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /\n Booking flow type.\n /\n @Prop() readonly organizerConfirmationBookingId?: string;\n\n /\n The selected language.\n /\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n /\n The state to identify which action is being performed.\n /\n @State() action: 'confirm' \| 'reject' \| null = null;\n\n /\n Reject booking button clicked event.\n /\n @Event() readonly rejectBookingButtonClicked!: EventEmitter<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>;\n\n /\n Reschedule button clicked event.\n * /\n @Event() readonly confirmBookingButtonClicked!: EventEmitter<{\n bookingId: string;\n host: HTMLNylasOrganizerConfirmationCardElement;\n errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n }>;\n\n /\n This event is fired when an error occurs while rescheduling the booking.\n */\n @Event() readonly confirmBookingError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n @Watch('themeConfig')\n themeConfigChanged(newThemeConfig: ThemeConfig) {\n this.applyThemeConfig(newThemeConfig);\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-organizer-confirmation-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-organizer-confirmation-card] Component did load`);\n this.applyThemeConfig(this.themeConfig);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleConfirmBookingButtonClicked = () => {\n this.action = 'confirm';\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.confirmBookingError.emit(error);\n };\n if (this.organizerConfirmationBookingId && !this.isLoading) {\n this.confirmBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host, errorHandler });\n }\n };\n\n private handleRejectBookingButtonClicked = () => {\n this.action = 'reject';\n if (this.organizerConfirmationBookingId && !this.isLoading) {\n this.rejectBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host });\n }\n };\n\n @Method()\n async resetAction() {\n this.action = null;\n }\n\n @RegisterComponent<NylasOrganizerConfirmationCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-organizer-confirmation-card',\n stateToProps: new Map([\n ['scheduler.organizerConfirmationBookingId', 'organizerConfirmationBookingId'],\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.themeConfig', 'themeConfig'],\n ]),\n eventToProps: {\n rejectBookingButtonClicked: async (\n event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n nylasSchedulerConnector.scheduler.setReject(event.detail.bookingId);\n },\n confirmBookingButtonClicked: async (\n event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const { host } = event.detail;\n const result = await nylasSchedulerConnector.scheduler.updateBooking({\n bookingId: event.detail.bookingId,\n status: 'confirmed',\n });\n const { errorHandler } = event.detail;\n if (errorHandler && (!result \|\| 'error' in result)) {\n errorHandler(result);\n }\n await host.resetAction();\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nmcc\">\n <div class=\"event-card-wrapper\" part=\"nmccc__card\">\n <div class=\"calendar-icon\">\n <calendar-check-icon />\n </div>\n <div class=\"booked-event-header\">\n <h2 slot=\"card-title\" part=\"nmcc__title\">\n {!!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`}\n </h2>\n </div>\n <div class=\"manage-booking-description\">\n <p>{i18next.t('bookingPendingnDescription')}</p>\n </div>\n <div\n class={{\n footer: true,\n }}\n >\n <button-component\n variant={'destructive'}\n onClick={this.handleRejectBookingButtonClicked}\n isLoading={this.isLoading && this.action === 'reject'}\n part=\"nmcc__button-outline nmcc__cancel-cta\"\n >\n {`${i18next.t('rejectBookingButton')}`}\n </button-component>\n <button-component\n variant={'basic'}\n onClick={this.handleConfirmBookingButtonClicked}\n isLoading={this.isLoading && this.action === 'confirm'}\n part=\"nmcc__button-outline nmcc__reschedule-cta\"\n >\n {`${i18next.t('confirmBookingButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}