npm - @nylas/web-elements - Versions diffs - 0.0.0-canary-20251007200552 → 0.0.0-canary-20251008142712 - Mend

@nylas/web-elements 0.0.0-canary-20251007200552 → 0.0.0-canary-20251008142712

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

package/dist/components/{p-DyYv3p94.js.map → p-CHxdUdXp.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-DyYv3p94.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.scss?tag=nylas-booking-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.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-booking-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n\n .header {\n padding: 1rem;\n 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 margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n }\n\n .nylas-booking-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n }\n\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: var(--nylas-base-900);\n font-size: 16px;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n span {\n padding: 0 1rem;\n }\n }\n }\n\n .nylas-booking-calendar-picker__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n\n tooltip-component {\n display: flex;\n }\n }\n\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\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 }\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 { Calendar, ThemeConfig } from '@nylas/core';\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 { User } from '@/common/nylas-api-request';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n @standalone\n * The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n @standalone\n * The current logged in user.\n /\n @Prop() currentUser?: User;\n /\n @standalone\n * The list of user's calendars.\n /\n @Prop() currentUserCalendars?: Calendar[];\n /\n @standalone\n * The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n @standalone\n * The default selected calendar.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The prop to hide the header.\n /\n @Prop() hideHeader: boolean = false;\n /\n Prop for express flow when creating a config\n /\n @Prop() expressFlow: boolean = false;\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 /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected booking calendar changes.\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-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', '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-booking-calendar-picker', 'componentDidLoad');\n const primaryCalendar = this.calendars?.find(calendar => calendar.is_primary)?.id;\n const firstCalendar = this.calendars?.[0]?.id;\n this.defaultBookingCalendar = this.defaultBookingCalendar \|\| primaryCalendar \|\| firstCalendar \|\| '';\n this.isInternalsAvailable && this.internals.setFormValue(this.defaultBookingCalendar.toString(), this.name);\n this.selectedCalendar = this.defaultBookingCalendar;\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\n }\n\n get isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function';\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('currentUserCalendars')\n currentUserCalendarsChangedHandler(newValue: Calendar[]) {\n debug('nylas-booking-calendar-picker', 'currentUserCalendarsChangedHandler', newValue);\n this.currentUserCalendars = 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 @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n this.isInternalsAvailable && this.internals.setValidity({});\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.isInternalsAvailable && this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\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<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'currentUserCalendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\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 currentUserCalendarOptions =\n this.currentUserCalendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n const optionsFromCalendars =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n const calendarOptions = optionsFromCalendars?.length > 0 ? optionsFromCalendars : currentUserCalendarOptions \|\| [];\n const defaultOption = calendarOptions.find(cal => cal.value == this.defaultBookingCalendar);\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n {!this.hideHeader && (\n <div class=\"header\" part=\"nbcp__header\">\n <h3>{i18next.t('nylasBookingCalendarPicker.headerTitle')}</h3>\n <p>\n {i18next.t('nylasBookingCalendarPicker.headerSubTitle')}\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasBookingCalendarPicker.tooltip.desc')}</span>\n </tooltip-component>\n </p>\n </div>\n )}\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <select-dropdown\n name=\"booking-calendar\"\n options={[{ value: '', label: i18next.t('nylasBookingCalendarPicker.selectOptionLabel') }, ...calendarOptions]}\n withSearch={false}\n required={this.expressFlow}\n emptyValue={i18next.t('nylasBookingCalendarPicker.selectOptionLabel')}\n errorMessage={i18next.t('nylasBookingCalendarPicker.selectCalendarErrorMessage')}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={defaultOption ? defaultOption : null}\n themeConfig={this.themeConfig}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n {i18next.t('nylasBookingCalendarPicker.tooltip.desc')} <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>{i18next.t('loading')}...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CHxdUdXp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.scss?tag=nylas-booking-calendar-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.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-booking-calendar-picker {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n\n .header {\n padding: 1rem;\n 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 margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n }\n\n .nylas-booking-calendar-picker__loading {\n padding-bottom: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n .label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 1rem 1rem 0;\n color: var(--nylas-base-800);\n }\n\n .loading-button {\n margin: 0 1rem;\n padding: 0;\n width: inherit;\n height: 48px;\n color: var(--nylas-base-900);\n font-size: 16px;\n cursor: not-allowed;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n span {\n padding: 0 1rem;\n }\n }\n }\n\n .nylas-booking-calendar-picker__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n\n tooltip-component {\n display: flex;\n }\n }\n\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\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 }\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 { Calendar, ThemeConfig } from '@nylas/core';\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 { User } from '@/common/nylas-api-request';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n @standalone\n * The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n @standalone\n * The current logged in user.\n /\n @Prop() currentUser?: User;\n /\n @standalone\n * The list of user's calendars.\n /\n @Prop() currentUserCalendars?: Calendar[];\n /\n @standalone\n * The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n @standalone\n * The default selected calendar.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The prop to hide the header.\n /\n @Prop() hideHeader: boolean = false;\n /\n Prop for express flow when creating a config\n /\n @Prop() expressFlow: boolean = false;\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 /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected booking calendar changes.\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-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', '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-booking-calendar-picker', 'componentDidLoad');\n const primaryCalendar = this.calendars?.find(calendar => calendar.is_primary)?.id;\n const firstCalendar = this.calendars?.[0]?.id;\n this.defaultBookingCalendar = this.defaultBookingCalendar \|\| primaryCalendar \|\| firstCalendar \|\| '';\n this.isInternalsAvailable && this.internals.setFormValue(this.defaultBookingCalendar.toString(), this.name);\n this.selectedCalendar = this.defaultBookingCalendar;\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\n }\n\n get isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function';\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('currentUserCalendars')\n currentUserCalendarsChangedHandler(newValue: Calendar[]) {\n debug('nylas-booking-calendar-picker', 'currentUserCalendarsChangedHandler', newValue);\n this.currentUserCalendars = 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 @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n this.isInternalsAvailable && this.internals.setValidity({});\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.isInternalsAvailable && this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\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<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'currentUserCalendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\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 currentUserCalendarOptions =\n this.currentUserCalendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n const optionsFromCalendars =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n const calendarOptions = optionsFromCalendars?.length > 0 ? optionsFromCalendars : currentUserCalendarOptions \|\| [];\n const defaultOption = calendarOptions.find(cal => cal.value == this.defaultBookingCalendar);\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n {!this.hideHeader && (\n <div class=\"header\" part=\"nbcp__header\">\n <h3>{i18next.t('nylasBookingCalendarPicker.headerTitle')}</h3>\n <p>\n {i18next.t('nylasBookingCalendarPicker.headerSubTitle')}\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasBookingCalendarPicker.tooltip.desc')}</span>\n </tooltip-component>\n </p>\n </div>\n )}\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <select-dropdown\n name=\"booking-calendar\"\n options={[{ value: '', label: i18next.t('nylasBookingCalendarPicker.selectOptionLabel') }, ...calendarOptions]}\n withSearch={false}\n required={this.expressFlow}\n emptyValue={i18next.t('nylasBookingCalendarPicker.selectOptionLabel')}\n errorMessage={i18next.t('nylasBookingCalendarPicker.selectCalendarErrorMessage')}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={defaultOption ? defaultOption : null}\n themeConfig={this.themeConfig}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n {i18next.t('nylasBookingCalendarPicker.tooltip.desc')} <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>{i18next.t('loading')}...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-Dj99qyJ3.js → p-CXsByTmW.js} RENAMED Viewed

@@ -10,14 +10,14 @@ import { d as defineCustomElement$c } from './p-_0P0Tp97.js';
 import { d as defineCustomElement$b } from './p-CRehZg0N.js';
 import { d as defineCustomElement$a } from './p-7S1M5IE9.js';
 import { d as defineCustomElement$9 } from './p-S2TOEjUD.js';
-import { d as defineCustomElement$8 } from './p-pjEuYJeR.js';
+import { d as defineCustomElement$8 } from './p-Bk42j8OF.js';
 import { d as defineCustomElement$7 } from './p-CxKoqJ-5.js';
-import { d as defineCustomElement$6 } from './p-BT4xqZtB.js';
+import { d as defineCustomElement$6 } from './p-BzvnGJrN.js';
 import { d as defineCustomElement$5 } from './p-Cpjsa5iV.js';
 import { d as defineCustomElement$4 } from './p-ClTk9Ttz.js';
 import { d as defineCustomElement$3 } from './p-D7lRYhTx.js';
 import { d as defineCustomElement$2 } from './p-3m3YER4_.js';
-import { d as defineCustomElement$1 } from './p-C6fgjGAL.js';
+import { d as defineCustomElement$1 } from './p-CelgQqJU.js';
 const nylasParticipantsCustomAvailabilityCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:inherit}.nylas-participants-custom-availability{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-participants-custom-availability .header{padding:1rem}.nylas-participants-custom-availability .header h3{margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-participants-custom-availability .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-participants-custom-availability .content .participant-container{padding-top:8px;border-top:1px solid var(--nylas-base-200);color:var(--nylas-base-900);background-color:var(--nylas-base-25)}.nylas-participants-custom-availability .content .participant-container .participant-title{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 12px}.nylas-participants-custom-availability .content .participant-container .participant-title p{margin:0}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle{display:flex;gap:24px;align-items:center}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron{display:flex;align-self:center;cursor:pointer}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron:hover,.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron:active{color:var(--nylas-primary)}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.open{transform:rotate(90deg)}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.closed{transform:rotate(270deg)}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.disabled{cursor:not-allowed;color:var(--nylas-base-300)}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.disabled:hover{color:var(--nylas-base-300)}.nylas-participants-custom-availability .content .participant-container nylas-availability-picker::part(nap){margin:0;border:none}.nylas-participants-custom-availability .content .participant-container nylas-specific-time-availability-picker::part(nstap){margin:0;border:none}.nylas-participants-custom-availability .content .participant-container .participant-only-specific-time-container{padding:8px 16px;border-top:1px solid var(--nylas-base-200);background-color:var(--nylas-base-50)}.nylas-participants-custom-availability .content .participant-container .participant-only-specific-time-container .participant-only-specific-time-checkbox label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:var(--nylas-base-900);cursor:pointer}.nylas-participants-custom-availability .content .participant-container .participant-only-specific-time-container .participant-only-specific-time-checkbox label input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--nylas-primary)}.nylas-participants-custom-availability .content .participant-container .participant-only-specific-time-container .participant-only-specific-time-checkbox label span{flex:1}.nylas-participants-custom-availability .content .participant-container .participant-only-specific-time-container .participant-only-specific-time-checkbox label tooltip-component{display:flex;align-items:center}.nylas-participants-custom-availability .content .participant-tabs{justify-content:space-between;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:8px 16px;border-top:1px solid var(--nylas-base-200)}.nylas-participants-custom-availability .content .participant-tabs.single-tab{grid-template-columns:1fr}.nylas-participants-custom-availability .content .participant-tab{cursor:pointer;padding:8px 16px;border-radius:var(--nylas-border-radius-2x);background-color:var(--nylas-base-100);text-align:center;font-size:14px;font-weight:500;line-height:20px;color:var(--nylas-base-600)}.nylas-participants-custom-availability .content .participant-tab.active{background-color:var(--nylas-primary);color:var(--nylas-base-100)}";
@@ -389,6 +389,6 @@ function defineCustomElement() {
 }
 export { NylasParticipantsCustomAvailability as N, defineCustomElement as d };
-//# sourceMappingURL=p-Dj99qyJ3.js.map
+//# sourceMappingURL=p-CXsByTmW.js.map
-//# sourceMappingURL=p-Dj99qyJ3.js.map
+//# sourceMappingURL=p-CXsByTmW.js.map

package/dist/components/{p-Dj99qyJ3.js.map → p-CXsByTmW.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-Dj99qyJ3.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.scss?tag=nylas-participants-custom-availability&encapsulation=shadow","src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-participants-custom-availability {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .content {\n .participant-container {\n padding-top: 8px;\n border-top: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-900);\n background-color: var(--nylas-base-25);\n\n .participant-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 4px 16px 12px;\n p {\n margin: 0;\n }\n .participant-toggle {\n display: flex;\n gap: 24px;\n align-items: center;\n .chevron {\n display: flex;\n align-self: center;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.disabled {\n cursor: not-allowed;\n color: var(--nylas-base-300);\n &:hover {\n color: var(--nylas-base-300);\n }\n }\n }\n }\n }\n nylas-availability-picker::part(nap) {\n margin: 0;\n border: none;\n }\n nylas-specific-time-availability-picker::part(nstap) {\n margin: 0;\n border: none;\n }\n .participant-only-specific-time-container {\n padding: 8px 16px;\n border-top: 1px solid var(--nylas-base-200);\n background-color: var(--nylas-base-50);\n\n .participant-only-specific-time-checkbox {\n label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 400;\n color: var(--nylas-base-900);\n cursor: pointer;\n\n input[type='checkbox'] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n accent-color: var(--nylas-primary);\n }\n\n span {\n flex: 1;\n }\n\n tooltip-component {\n display: flex;\n align-items: center;\n }\n }\n }\n }\n }\n .participant-tabs {\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n padding: 8px 16px;\n border-top: 1px solid var(--nylas-base-200);\n\n &.single-tab {\n grid-template-columns: 1fr;\n }\n }\n .participant-tab {\n cursor: pointer;\n padding: 8px 16px;\n border-radius: var(--nylas-border-radius-2x);\n background-color: var(--nylas-base-100);\n text-align: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--nylas-base-600);\n &.active {\n background-color: var(--nylas-primary);\n color: var(--nylas-base-100);\n }\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, OpenHours, Participant, ParticipantAvailability, SpecificTimeAvailability, ThemeConfig } from '@nylas/core';\nimport { DEFAULT_OPEN_HOURS } from '@/common/constants';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/\n The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.\n \n @part npca - The participants custom availability container\n * @part npca__header - The header of the participants custom availability\n * @part npca__content - The content of the participants custom availability\n * @part npca__participant-container - The participant container\n * @part npca__participant-title - The title of the participant\n * @part npca__participant-toggle--container - The toggle container for the participant\n * @part npca__toggle-label - The label of the toggle\n * @part npca_toggle-input - The input of the toggle\n * @part npca_toggle-slider - The slider of the toggle\n /\n@Component({\n tag: 'nylas-participants-custom-availability',\n styleUrl: 'nylas-participants-custom-availability.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasParticipantsCustomAvailability {\n @Element() host!: HTMLNylasParticipantsCustomAvailabilityElement;\n private participantFormRef!: HTMLFormElement;\n /\n @standalone\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n @standalone\n * The name of the participants custom availability.\n /\n @Prop() name: string = 'participant-custom-availability';\n\n /\n @standalone\n * The participants selected in the add participants section.\n /\n @Prop() participants: Participant[] = this.selectedConfiguration?.participants \|\| [];\n\n /\n The selected language.\n /\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n This event is fired when the participants custom availability changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The state to store the custom availability setting for participants.\n /\n @State() selectedParticipants: {\n [key: string]: {\n setCustom: boolean;\n tab: 'availability' \| 'specific-time-availability';\n isOpen: boolean;\n openHours: OpenHours[];\n specificTimesAvailability: SpecificTimeAvailability[];\n name: string;\n availability?: ParticipantAvailability;\n timezone?: string;\n onlySpecificTimeAvailability?: boolean;\n };\n } = this.setParticipants(this.participants);\n\n // Watchers\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-participants-custom-availability', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('participants')\n participantsChangedHandler(newValue: Participant[], oldValue: Participant[]) {\n debug('nylas-participants-custom-availability', 'participantsChangedHandler', newValue, oldValue);\n if (!newValue \|\| !oldValue \|\| JSON.stringify(newValue) === JSON.stringify(oldValue)) {\n return;\n }\n this.selectedParticipants = this.setParticipants(newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n debug('nylas-participants-custom-availability', 'selectedConfigurationChangedHandler', newValue, oldValue);\n if (!newValue \|\| !oldValue \|\| JSON.stringify(newValue) === JSON.stringify(oldValue)) {\n return;\n }\n if (newValue?.participants) {\n this.selectedParticipants = this.setParticipants(newValue?.participants);\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 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 // Lifecycle Methods\n connectedCallback() {\n debug('nylas-participants-custom-availability', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-participants-custom-availability', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-participants-custom-availability', 'componentWillLoad');\n }\n\n componentDidLoad() {\n debug('nylas-participants-custom-availability', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedParticipants = this.setParticipants(this.selectedConfiguration?.participants);\n } else {\n this.selectedParticipants = this.setParticipants(this.participants);\n }\n }\n\n // Event Handlers\n @Listen('nylasFormSwitchToggled')\n nylasFormSwitchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: boolean }>) {\n debug('nylas-participants-custom-availability', 'nylasFormSwitchToggledHandler', event.detail);\n\n // Check if this is a toggle for \"only specific time availability\"\n if (event.detail.name.startsWith('only-specific-time-')) {\n const participantEmail = event.detail.name.replace('only-specific-time-', '');\n if (this.selectedParticipants[participantEmail]) {\n this.selectedParticipants[participantEmail]['onlySpecificTimeAvailability'] = event.detail.checked;\n // When enabling only specific time, switch to specific time tab\n if (event.detail.checked) {\n this.selectedParticipants[participantEmail]['tab'] = 'specific-time-availability';\n }\n this.selectedParticipants = { ...this.selectedParticipants };\n this.updateFormValue();\n }\n return;\n }\n\n const existingParticipant = this.selectedConfiguration?.participants.find(participant => participant.email === event.detail.name);\n const existingOpenHours = existingParticipant?.availability?.open_hours \|\| [];\n const openHours = existingOpenHours?.length > 0 ? existingOpenHours : this.selectedConfiguration?.availability?.availability_rules?.default_open_hours \|\| [];\n const timeZone =\n existingOpenHours && existingOpenHours.length > 0\n ? existingParticipant?.timezone\n : this.selectedConfiguration?.availability?.availability_rules?.default_open_hours?.at(0)?.timezone \|\|\n this.selectedConfiguration?.event_booking?.timezone \|\|\n window.Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n const existingSpecificTimeAvailability = existingParticipant?.specific_time_availability \|\| [];\n const specificTimesAvailability = existingSpecificTimeAvailability?.length > 0 ? existingSpecificTimeAvailability : [];\n this.selectedParticipants[event.detail.name]['isOpen'] = event.detail.checked;\n this.selectedParticipants[event.detail.name]['tab'] = 'availability';\n this.selectedParticipants[event.detail.name]['setCustom'] = event.detail.checked;\n this.selectedParticipants[event.detail.name]['openHours'] = event.detail.checked ? (openHours?.length > 0 ? openHours : DEFAULT_OPEN_HOURS) : [];\n this.selectedParticipants[event.detail.name]['timezone'] = event.detail.checked ? timeZone : undefined;\n this.selectedParticipants[event.detail.name]['specificTimesAvailability'] = event.detail.checked ? specificTimesAvailability : [];\n this.selectedParticipants = { ...this.selectedParticipants };\n this.updateFormValue();\n }\n\n @Listen('valueChanged')\n handleValueChanged(event: CustomEvent) {\n debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n const { name, value } = event.detail;\n if (!name.startsWith('participant-availability-') && !name.startsWith('participant-specific-time-availability-')) {\n return;\n }\n\n // Parse the JSON value once - can contain { openHours: OpenHours[], timezone: string } or SpecificTimeAvailability[]\n let jsonValue;\n try {\n jsonValue = JSON.parse(value);\n } catch (error) {\n console.error(`Failed to parse JSON for participant ${name}:`, error);\n return;\n }\n\n // Validate the form\n if (this.isInternalsAvailable) {\n if (!this.participantFormRef.checkValidity()) {\n this.internals.setValidity({ customError: true }, 'Please fix the overlapping time ranges.');\n return;\n } else {\n this.internals.setValidity({});\n }\n }\n\n if (name.startsWith('participant-availability-')) {\n // Expected name format: \"participant-availability-{participantId}-{uniqueKey}\"\n // We extract the unique key (4th segment) to identify the specific participant\n const nameParts = name.split('-');\n if (nameParts.length < 4) {\n console.warn(`Malformed participant name format: ${name}. Expected format: \"participant-availability-{participantId}-{uniqueKey}\"`);\n return;\n }\n\n const key = nameParts[3];\n if (!this.selectedParticipants[key]) return;\n const existingOpenHours = jsonValue.openHours \|\| [];\n const openHours = existingOpenHours?.length > 0 ? existingOpenHours : this.selectedConfiguration?.availability?.availability_rules?.default_open_hours \|\| [];\n this.selectedParticipants[key]['openHours'] = openHours;\n this.selectedParticipants[key]['tab'] = 'availability';\n } else if (name.startsWith('participant-specific-time-availability')) {\n // Expected name format: \"participant-specific-time-availability-{index}-{uniqueKey}\"\n // Extract the unique key (6th segment) to identify the specific participant\n const nameParts = name.split('-');\n if (nameParts.length < 6) {\n console.warn(`Malformed participant specific date name format: ${name}. Expected format: \"participant-specific-time-availability-{index}-{uniqueKey}\"`);\n return;\n }\n\n const key = nameParts[5];\n if (!this.selectedParticipants[key]) return;\n const existingSpecificTimeAvailability = jsonValue \|\| [];\n this.selectedParticipants[key]['specificTimesAvailability'] = existingSpecificTimeAvailability;\n this.selectedParticipants[key]['tab'] = 'specific-time-availability';\n }\n\n this.selectedParticipants = { ...this.selectedParticipants };\n\n this.updateFormValue();\n }\n\n updateFormValue() {\n const participantOpenHours = {};\n const participantSpecificTimeAvailability = {};\n const participantOnlySpecificTimeAvailability = {};\n Object.keys(this.selectedParticipants).forEach(key => {\n participantOpenHours[key] = this.selectedParticipants[key].openHours;\n participantSpecificTimeAvailability[key] = this.selectedParticipants[key].specificTimesAvailability \|\| [];\n participantOnlySpecificTimeAvailability[key] = this.selectedParticipants[key].onlySpecificTimeAvailability \|\| false;\n });\n\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participantOpenHours), this.name);\n this.valueChanged.emit({ value: JSON.stringify(participantOpenHours), name: this.name });\n\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participantSpecificTimeAvailability), `${this.name}-specific-time`);\n this.valueChanged.emit({ value: JSON.stringify(participantSpecificTimeAvailability), name: `${this.name}-specific-time` });\n\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participantOnlySpecificTimeAvailability), `${this.name}-only-specific-time`);\n this.valueChanged.emit({ value: JSON.stringify(participantOnlySpecificTimeAvailability), name: `${this.name}-only-specific-time` });\n }\n\n setParticipants(participants: Participant[]) {\n const selectedParticipants = {};\n participants?.forEach(participant => {\n const onlySpecificTime = participant.only_specific_time_availability \|\| false;\n const hasOpenHours = Boolean(participant.availability?.open_hours && participant.availability.open_hours.length > 0);\n const hasSpecificTime = Boolean(participant.specific_time_availability && participant.specific_time_availability.length > 0);\n const hasCustomAvailability = hasOpenHours \|\| hasSpecificTime;\n\n selectedParticipants[participant.email] = {\n isOpen: hasCustomAvailability, // Open the section if custom availability is configured\n setCustom: hasOpenHours,\n openHours: participant.availability?.open_hours \|\| [],\n name: participant.name \|\| participant.email,\n availability: participant.availability,\n timezone: participant.timezone,\n specificTimesAvailability: participant.specific_time_availability \|\| [],\n onlySpecificTimeAvailability: onlySpecificTime,\n // Default to specific-time-availability tab if only specific time is enabled\n tab: onlySpecificTime ? 'specific-time-availability' : 'availability',\n };\n });\n return selectedParticipants;\n }\n\n /\n This method is essentially a workaround to check if the internals are available because\n * the unit tests in stencil do not support the internals.\n * @returns boolean\n */\n get isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';\n }\n\n @RegisterComponent<NylasParticipantsCustomAvailability, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-participants-custom-availability',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-participants-custom-availability\" part=\"npca\">\n <div class=\"header\" part=\"npca__header\">\n <h3>{i18next.t('nylasParticipantCustomAvailability.headerTitle')}</h3>\n <p>{i18next.t('nylasParticipantCustomAvailability.headerSubTitle')}</p>\n </div>\n <div class=\"content\" part=\"npca__content\">\n <form ref={el => (this.participantFormRef = el as HTMLFormElement)}>\n {Object.keys(this.selectedParticipants).map((key, index) => {\n const participant = this.selectedParticipants[key];\n const participantOpenHours = participant.availability?.open_hours \|\| [];\n if (!participant \|\| !participant.name \|\| !participant.availability) return;\n return (\n <div class=\"participant-container\" part=\"npca__participant-container\" key={`participant-conatiner-${index}`}>\n <div class=\"participant-title\" part=\"npca__participant-title\">\n <p>{i18next.t('nylasParticipantCustomAvailability.participantOpenHoursTitle', { participantName: participant.name })}</p>\n <div class=\"participant-toggle\" part=\"npca__participant-toggle--container\">\n <toggle-switch\n exportparts=\"ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider\"\n name={key}\n checked={!!participant?.openHours && participant?.openHours.length > 0}\n themeConfig={this.themeConfig}\n />\n <span\n class={`chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`}\n onClick={() => {\n if (!participant.setCustom) return;\n this.selectedParticipants[key].isOpen = !participant.isOpen;\n this.selectedParticipants[key].tab = 'availability';\n this.selectedParticipants = { ...this.selectedParticipants };\n }}\n >\n <chevron-icon width=\"24\" height=\"24\" />\n </span>\n </div>\n </div>\n {participant.isOpen && (\n <div class=\"participant-only-specific-time-container\">\n <div class=\"participant-only-specific-time-checkbox\">\n <label>\n <input\n type=\"checkbox\"\n checked={participant.onlySpecificTimeAvailability}\n onChange={(e: any) => {\n this.selectedParticipants[key]['onlySpecificTimeAvailability'] = e.target.checked;\n if (e.target.checked) {\n this.selectedParticipants[key]['tab'] = 'specific-time-availability';\n }\n this.selectedParticipants = { ...this.selectedParticipants };\n this.updateFormValue();\n }}\n />\n <span>{i18next.t('nylasParticipantCustomAvailability.onlySpecificTimeAvailability', { participantName: participant.name })}</span>\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" width=\"14\" height=\"14\" />\n <span slot=\"tooltip-content\">\n {i18next.t('nylasParticipantCustomAvailability.onlySpecificTimeAvailabilityTooltip', { participantName: participant.name })}\n </span>\n </tooltip-component>\n </label>\n </div>\n </div>\n )}\n {participant.isOpen && (\n <div class={`participant-tabs ${participant.onlySpecificTimeAvailability ? 'single-tab' : ''}`} part=\"npca__participant-tabs\">\n {!participant.onlySpecificTimeAvailability && (\n <div\n class={`participant-tab ${participant.tab === 'availability' ? 'active' : ''}`}\n part=\"npca__participant-tab\"\n onClick={() => {\n this.selectedParticipants[key].tab = 'availability';\n this.selectedParticipants = { ...this.selectedParticipants };\n }}\n >\n <span>{i18next.t('nylasParticipantCustomAvailability.participantAvailabilityTab')}</span>\n </div>\n )}\n <div\n class={`participant-tab ${participant.tab === 'specific-time-availability' ? 'active' : ''}`}\n part=\"npca__participant-tab\"\n onClick={() => {\n this.selectedParticipants[key].tab = 'specific-time-availability';\n this.selectedParticipants = { ...this.selectedParticipants };\n }}\n >\n <span>{i18next.t('nylasParticipantCustomAvailability.participantSpecificTimeAvailabilityTab')}</span>\n </div>\n </div>\n )}\n {participant.tab === 'availability' && participant.isOpen && !participant.onlySpecificTimeAvailability && (\n <nylas-availability-picker\n key={index}\n name={`participant-availability-${index}-${key}`}\n openHours={participantOpenHours}\n defaultTimezone={participant.timezone}\n hideHeader={true}\n />\n )}\n {participant.tab === 'specific-time-availability' && participant.isOpen && (\n <nylas-specific-time-availability-picker\n key={index}\n name={`participant-specific-time-availability-${index}-${key}`}\n specificTimesAvailability={participant.specificTimesAvailability}\n hideHeader={true}\n />\n )}\n </div>\n );\n })}\n </form>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CXsByTmW.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.scss?tag=nylas-participants-custom-availability&encapsulation=shadow","src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-participants-custom-availability {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .content {\n .participant-container {\n padding-top: 8px;\n border-top: 1px solid var(--nylas-base-200);\n color: var(--nylas-base-900);\n background-color: var(--nylas-base-25);\n\n .participant-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 4px 16px 12px;\n p {\n margin: 0;\n }\n .participant-toggle {\n display: flex;\n gap: 24px;\n align-items: center;\n .chevron {\n display: flex;\n align-self: center;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: var(--nylas-primary);\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.disabled {\n cursor: not-allowed;\n color: var(--nylas-base-300);\n &:hover {\n color: var(--nylas-base-300);\n }\n }\n }\n }\n }\n nylas-availability-picker::part(nap) {\n margin: 0;\n border: none;\n }\n nylas-specific-time-availability-picker::part(nstap) {\n margin: 0;\n border: none;\n }\n .participant-only-specific-time-container {\n padding: 8px 16px;\n border-top: 1px solid var(--nylas-base-200);\n background-color: var(--nylas-base-50);\n\n .participant-only-specific-time-checkbox {\n label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 400;\n color: var(--nylas-base-900);\n cursor: pointer;\n\n input[type='checkbox'] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n accent-color: var(--nylas-primary);\n }\n\n span {\n flex: 1;\n }\n\n tooltip-component {\n display: flex;\n align-items: center;\n }\n }\n }\n }\n }\n .participant-tabs {\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n padding: 8px 16px;\n border-top: 1px solid var(--nylas-base-200);\n\n &.single-tab {\n grid-template-columns: 1fr;\n }\n }\n .participant-tab {\n cursor: pointer;\n padding: 8px 16px;\n border-radius: var(--nylas-border-radius-2x);\n background-color: var(--nylas-base-100);\n text-align: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--nylas-base-600);\n &.active {\n background-color: var(--nylas-primary);\n color: var(--nylas-base-100);\n }\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, OpenHours, Participant, ParticipantAvailability, SpecificTimeAvailability, ThemeConfig } from '@nylas/core';\nimport { DEFAULT_OPEN_HOURS } from '@/common/constants';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/\n The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.\n \n @part npca - The participants custom availability container\n * @part npca__header - The header of the participants custom availability\n * @part npca__content - The content of the participants custom availability\n * @part npca__participant-container - The participant container\n * @part npca__participant-title - The title of the participant\n * @part npca__participant-toggle--container - The toggle container for the participant\n * @part npca__toggle-label - The label of the toggle\n * @part npca_toggle-input - The input of the toggle\n * @part npca_toggle-slider - The slider of the toggle\n /\n@Component({\n tag: 'nylas-participants-custom-availability',\n styleUrl: 'nylas-participants-custom-availability.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasParticipantsCustomAvailability {\n @Element() host!: HTMLNylasParticipantsCustomAvailabilityElement;\n private participantFormRef!: HTMLFormElement;\n /\n @standalone\n * The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n /\n @standalone\n * The name of the participants custom availability.\n /\n @Prop() name: string = 'participant-custom-availability';\n\n /\n @standalone\n * The participants selected in the add participants section.\n /\n @Prop() participants: Participant[] = this.selectedConfiguration?.participants \|\| [];\n\n /\n The selected language.\n /\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n This event is fired when the participants custom availability changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The state to store the custom availability setting for participants.\n /\n @State() selectedParticipants: {\n [key: string]: {\n setCustom: boolean;\n tab: 'availability' \| 'specific-time-availability';\n isOpen: boolean;\n openHours: OpenHours[];\n specificTimesAvailability: SpecificTimeAvailability[];\n name: string;\n availability?: ParticipantAvailability;\n timezone?: string;\n onlySpecificTimeAvailability?: boolean;\n };\n } = this.setParticipants(this.participants);\n\n // Watchers\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-participants-custom-availability', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('participants')\n participantsChangedHandler(newValue: Participant[], oldValue: Participant[]) {\n debug('nylas-participants-custom-availability', 'participantsChangedHandler', newValue, oldValue);\n if (!newValue \|\| !oldValue \|\| JSON.stringify(newValue) === JSON.stringify(oldValue)) {\n return;\n }\n this.selectedParticipants = this.setParticipants(newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n debug('nylas-participants-custom-availability', 'selectedConfigurationChangedHandler', newValue, oldValue);\n if (!newValue \|\| !oldValue \|\| JSON.stringify(newValue) === JSON.stringify(oldValue)) {\n return;\n }\n if (newValue?.participants) {\n this.selectedParticipants = this.setParticipants(newValue?.participants);\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 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 // Lifecycle Methods\n connectedCallback() {\n debug('nylas-participants-custom-availability', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-participants-custom-availability', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-participants-custom-availability', 'componentWillLoad');\n }\n\n componentDidLoad() {\n debug('nylas-participants-custom-availability', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedParticipants = this.setParticipants(this.selectedConfiguration?.participants);\n } else {\n this.selectedParticipants = this.setParticipants(this.participants);\n }\n }\n\n // Event Handlers\n @Listen('nylasFormSwitchToggled')\n nylasFormSwitchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: boolean }>) {\n debug('nylas-participants-custom-availability', 'nylasFormSwitchToggledHandler', event.detail);\n\n // Check if this is a toggle for \"only specific time availability\"\n if (event.detail.name.startsWith('only-specific-time-')) {\n const participantEmail = event.detail.name.replace('only-specific-time-', '');\n if (this.selectedParticipants[participantEmail]) {\n this.selectedParticipants[participantEmail]['onlySpecificTimeAvailability'] = event.detail.checked;\n // When enabling only specific time, switch to specific time tab\n if (event.detail.checked) {\n this.selectedParticipants[participantEmail]['tab'] = 'specific-time-availability';\n }\n this.selectedParticipants = { ...this.selectedParticipants };\n this.updateFormValue();\n }\n return;\n }\n\n const existingParticipant = this.selectedConfiguration?.participants.find(participant => participant.email === event.detail.name);\n const existingOpenHours = existingParticipant?.availability?.open_hours \|\| [];\n const openHours = existingOpenHours?.length > 0 ? existingOpenHours : this.selectedConfiguration?.availability?.availability_rules?.default_open_hours \|\| [];\n const timeZone =\n existingOpenHours && existingOpenHours.length > 0\n ? existingParticipant?.timezone\n : this.selectedConfiguration?.availability?.availability_rules?.default_open_hours?.at(0)?.timezone \|\|\n this.selectedConfiguration?.event_booking?.timezone \|\|\n window.Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n const existingSpecificTimeAvailability = existingParticipant?.specific_time_availability \|\| [];\n const specificTimesAvailability = existingSpecificTimeAvailability?.length > 0 ? existingSpecificTimeAvailability : [];\n this.selectedParticipants[event.detail.name]['isOpen'] = event.detail.checked;\n this.selectedParticipants[event.detail.name]['tab'] = 'availability';\n this.selectedParticipants[event.detail.name]['setCustom'] = event.detail.checked;\n this.selectedParticipants[event.detail.name]['openHours'] = event.detail.checked ? (openHours?.length > 0 ? openHours : DEFAULT_OPEN_HOURS) : [];\n this.selectedParticipants[event.detail.name]['timezone'] = event.detail.checked ? timeZone : undefined;\n this.selectedParticipants[event.detail.name]['specificTimesAvailability'] = event.detail.checked ? specificTimesAvailability : [];\n this.selectedParticipants = { ...this.selectedParticipants };\n this.updateFormValue();\n }\n\n @Listen('valueChanged')\n handleValueChanged(event: CustomEvent) {\n debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n const { name, value } = event.detail;\n if (!name.startsWith('participant-availability-') && !name.startsWith('participant-specific-time-availability-')) {\n return;\n }\n\n // Parse the JSON value once - can contain { openHours: OpenHours[], timezone: string } or SpecificTimeAvailability[]\n let jsonValue;\n try {\n jsonValue = JSON.parse(value);\n } catch (error) {\n console.error(`Failed to parse JSON for participant ${name}:`, error);\n return;\n }\n\n // Validate the form\n if (this.isInternalsAvailable) {\n if (!this.participantFormRef.checkValidity()) {\n this.internals.setValidity({ customError: true }, 'Please fix the overlapping time ranges.');\n return;\n } else {\n this.internals.setValidity({});\n }\n }\n\n if (name.startsWith('participant-availability-')) {\n // Expected name format: \"participant-availability-{participantId}-{uniqueKey}\"\n // We extract the unique key (4th segment) to identify the specific participant\n const nameParts = name.split('-');\n if (nameParts.length < 4) {\n console.warn(`Malformed participant name format: ${name}. Expected format: \"participant-availability-{participantId}-{uniqueKey}\"`);\n return;\n }\n\n const key = nameParts[3];\n if (!this.selectedParticipants[key]) return;\n const existingOpenHours = jsonValue.openHours \|\| [];\n const openHours = existingOpenHours?.length > 0 ? existingOpenHours : this.selectedConfiguration?.availability?.availability_rules?.default_open_hours \|\| [];\n this.selectedParticipants[key]['openHours'] = openHours;\n this.selectedParticipants[key]['tab'] = 'availability';\n } else if (name.startsWith('participant-specific-time-availability')) {\n // Expected name format: \"participant-specific-time-availability-{index}-{uniqueKey}\"\n // Extract the unique key (6th segment) to identify the specific participant\n const nameParts = name.split('-');\n if (nameParts.length < 6) {\n console.warn(`Malformed participant specific date name format: ${name}. Expected format: \"participant-specific-time-availability-{index}-{uniqueKey}\"`);\n return;\n }\n\n const key = nameParts[5];\n if (!this.selectedParticipants[key]) return;\n const existingSpecificTimeAvailability = jsonValue \|\| [];\n this.selectedParticipants[key]['specificTimesAvailability'] = existingSpecificTimeAvailability;\n this.selectedParticipants[key]['tab'] = 'specific-time-availability';\n }\n\n this.selectedParticipants = { ...this.selectedParticipants };\n\n this.updateFormValue();\n }\n\n updateFormValue() {\n const participantOpenHours = {};\n const participantSpecificTimeAvailability = {};\n const participantOnlySpecificTimeAvailability = {};\n Object.keys(this.selectedParticipants).forEach(key => {\n participantOpenHours[key] = this.selectedParticipants[key].openHours;\n participantSpecificTimeAvailability[key] = this.selectedParticipants[key].specificTimesAvailability \|\| [];\n participantOnlySpecificTimeAvailability[key] = this.selectedParticipants[key].onlySpecificTimeAvailability \|\| false;\n });\n\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participantOpenHours), this.name);\n this.valueChanged.emit({ value: JSON.stringify(participantOpenHours), name: this.name });\n\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participantSpecificTimeAvailability), `${this.name}-specific-time`);\n this.valueChanged.emit({ value: JSON.stringify(participantSpecificTimeAvailability), name: `${this.name}-specific-time` });\n\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participantOnlySpecificTimeAvailability), `${this.name}-only-specific-time`);\n this.valueChanged.emit({ value: JSON.stringify(participantOnlySpecificTimeAvailability), name: `${this.name}-only-specific-time` });\n }\n\n setParticipants(participants: Participant[]) {\n const selectedParticipants = {};\n participants?.forEach(participant => {\n const onlySpecificTime = participant.only_specific_time_availability \|\| false;\n const hasOpenHours = Boolean(participant.availability?.open_hours && participant.availability.open_hours.length > 0);\n const hasSpecificTime = Boolean(participant.specific_time_availability && participant.specific_time_availability.length > 0);\n const hasCustomAvailability = hasOpenHours \|\| hasSpecificTime;\n\n selectedParticipants[participant.email] = {\n isOpen: hasCustomAvailability, // Open the section if custom availability is configured\n setCustom: hasOpenHours,\n openHours: participant.availability?.open_hours \|\| [],\n name: participant.name \|\| participant.email,\n availability: participant.availability,\n timezone: participant.timezone,\n specificTimesAvailability: participant.specific_time_availability \|\| [],\n onlySpecificTimeAvailability: onlySpecificTime,\n // Default to specific-time-availability tab if only specific time is enabled\n tab: onlySpecificTime ? 'specific-time-availability' : 'availability',\n };\n });\n return selectedParticipants;\n }\n\n /\n This method is essentially a workaround to check if the internals are available because\n * the unit tests in stencil do not support the internals.\n * @returns boolean\n */\n get isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';\n }\n\n @RegisterComponent<NylasParticipantsCustomAvailability, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-participants-custom-availability',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-participants-custom-availability\" part=\"npca\">\n <div class=\"header\" part=\"npca__header\">\n <h3>{i18next.t('nylasParticipantCustomAvailability.headerTitle')}</h3>\n <p>{i18next.t('nylasParticipantCustomAvailability.headerSubTitle')}</p>\n </div>\n <div class=\"content\" part=\"npca__content\">\n <form ref={el => (this.participantFormRef = el as HTMLFormElement)}>\n {Object.keys(this.selectedParticipants).map((key, index) => {\n const participant = this.selectedParticipants[key];\n const participantOpenHours = participant.availability?.open_hours \|\| [];\n if (!participant \|\| !participant.name \|\| !participant.availability) return;\n return (\n <div class=\"participant-container\" part=\"npca__participant-container\" key={`participant-conatiner-${index}`}>\n <div class=\"participant-title\" part=\"npca__participant-title\">\n <p>{i18next.t('nylasParticipantCustomAvailability.participantOpenHoursTitle', { participantName: participant.name })}</p>\n <div class=\"participant-toggle\" part=\"npca__participant-toggle--container\">\n <toggle-switch\n exportparts=\"ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider\"\n name={key}\n checked={!!participant?.openHours && participant?.openHours.length > 0}\n themeConfig={this.themeConfig}\n />\n <span\n class={`chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`}\n onClick={() => {\n if (!participant.setCustom) return;\n this.selectedParticipants[key].isOpen = !participant.isOpen;\n this.selectedParticipants[key].tab = 'availability';\n this.selectedParticipants = { ...this.selectedParticipants };\n }}\n >\n <chevron-icon width=\"24\" height=\"24\" />\n </span>\n </div>\n </div>\n {participant.isOpen && (\n <div class=\"participant-only-specific-time-container\">\n <div class=\"participant-only-specific-time-checkbox\">\n <label>\n <input\n type=\"checkbox\"\n checked={participant.onlySpecificTimeAvailability}\n onChange={(e: any) => {\n this.selectedParticipants[key]['onlySpecificTimeAvailability'] = e.target.checked;\n if (e.target.checked) {\n this.selectedParticipants[key]['tab'] = 'specific-time-availability';\n }\n this.selectedParticipants = { ...this.selectedParticipants };\n this.updateFormValue();\n }}\n />\n <span>{i18next.t('nylasParticipantCustomAvailability.onlySpecificTimeAvailability', { participantName: participant.name })}</span>\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" width=\"14\" height=\"14\" />\n <span slot=\"tooltip-content\">\n {i18next.t('nylasParticipantCustomAvailability.onlySpecificTimeAvailabilityTooltip', { participantName: participant.name })}\n </span>\n </tooltip-component>\n </label>\n </div>\n </div>\n )}\n {participant.isOpen && (\n <div class={`participant-tabs ${participant.onlySpecificTimeAvailability ? 'single-tab' : ''}`} part=\"npca__participant-tabs\">\n {!participant.onlySpecificTimeAvailability && (\n <div\n class={`participant-tab ${participant.tab === 'availability' ? 'active' : ''}`}\n part=\"npca__participant-tab\"\n onClick={() => {\n this.selectedParticipants[key].tab = 'availability';\n this.selectedParticipants = { ...this.selectedParticipants };\n }}\n >\n <span>{i18next.t('nylasParticipantCustomAvailability.participantAvailabilityTab')}</span>\n </div>\n )}\n <div\n class={`participant-tab ${participant.tab === 'specific-time-availability' ? 'active' : ''}`}\n part=\"npca__participant-tab\"\n onClick={() => {\n this.selectedParticipants[key].tab = 'specific-time-availability';\n this.selectedParticipants = { ...this.selectedParticipants };\n }}\n >\n <span>{i18next.t('nylasParticipantCustomAvailability.participantSpecificTimeAvailabilityTab')}</span>\n </div>\n </div>\n )}\n {participant.tab === 'availability' && participant.isOpen && !participant.onlySpecificTimeAvailability && (\n <nylas-availability-picker\n key={index}\n name={`participant-availability-${index}-${key}`}\n openHours={participantOpenHours}\n defaultTimezone={participant.timezone}\n hideHeader={true}\n />\n )}\n {participant.tab === 'specific-time-availability' && participant.isOpen && (\n <nylas-specific-time-availability-picker\n key={index}\n name={`participant-specific-time-availability-${index}-${key}`}\n specificTimesAvailability={participant.specificTimesAvailability}\n hideHeader={true}\n />\n )}\n </div>\n );\n })}\n </form>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/p-CelgQqJU.js ADDED Viewed

@@ -0,0 +1,192 @@
+import { p as proxyCustomElement, H, h } from './p-Bht9ktsW.js';
+const tooltipComponentCss = ".tooltip-container{position:relative;display:flex;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.info-icon{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;outline:none;transition:opacity 0.2s ease-in-out}.info-icon:hover{opacity:0.8}.info-icon:active{opacity:0.6}.info-icon:focus-visible{outline:2px solid var(--nylas-primary-500, #2563eb);outline-offset:2px;border-radius:2px}.info-icon[aria-pressed=true]{opacity:1;background-color:var(--nylas-primary-50, rgba(37, 99, 235, 0.1));border-radius:4px}.tooltip-content{display:none;background-color:var(--nylas-base-800);color:var(--nylas-base-0);text-align:left;border-radius:6px;padding:0.5rem 1rem;max-width:300px;width:max-content;z-index:9999;opacity:0;transition:opacity 0.2s ease-in-out;pointer-events:none;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.tooltip-content.tooltip-visible{display:block;opacity:1;pointer-events:auto}.tooltip-content::after{content:\"\";position:absolute;border-width:6px;border-style:solid}.tooltip-content.top::after{bottom:-12px;left:50%;transform:translateX(-50%);border-color:var(--nylas-base-800) transparent transparent transparent}.tooltip-content.bottom::after{top:-12px;left:50%;transform:translateX(-50%);border-color:transparent transparent var(--nylas-base-800) transparent}.tooltip-content.left::after{right:-12px;top:50%;transform:translateY(-50%);border-color:transparent transparent transparent var(--nylas-base-800)}.tooltip-content.right::after{left:-12px;top:50%;transform:translateY(-50%);border-color:transparent var(--nylas-base-800) transparent transparent}@keyframes tooltip-fade-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}.tooltip-visible{animation:tooltip-fade-in 0.15s ease-out}";
+const TooltipComponent = proxyCustomElement(class TooltipComponent extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.position = 'bottom';
+        this.isVisible = false;
+        this.isPinned = false;
+        this.actualPosition = this.position;
+        this.tooltipStyle = { top: '0', left: '0' };
+        this.tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+        this.handleClick = (event) => {
+            event.stopPropagation();
+            this.isPinned = !this.isPinned;
+            if (this.isPinned) {
+                this.showTooltip();
+            }
+            else {
+                this.isVisible = false;
+            }
+        };
+        this.handleMouseEnter = () => {
+            if (!this.isPinned) {
+                this.showTooltip();
+            }
+        };
+        this.handleMouseLeave = () => {
+            this.hideTooltip();
+        };
+        this.handleFocus = () => {
+            if (!this.isPinned) {
+                this.showTooltip();
+            }
+        };
+        this.handleBlur = () => {
+            this.hideTooltip();
+        };
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.isVisible) {
+            this.isPinned = false;
+            this.isVisible = false;
+        }
+    }
+    handleDocumentClick(event) {
+        if (!this.isPinned || !this.isVisible) {
+            return;
+        }
+        const clickedInside = this.el.contains(event.target);
+        if (!clickedInside) {
+            this.isPinned = false;
+            this.isVisible = false;
+        }
+    }
+    calculatePosition() {
+        if (!this.tooltipContentEl) {
+            return { top: 0, left: 0, position: this.position };
+        }
+        const triggerEl = this.el.shadowRoot?.querySelector('.info-icon');
+        if (!triggerEl) {
+            return { top: 0, left: 0, position: this.position };
+        }
+        const triggerRect = triggerEl.getBoundingClientRect();
+        const tooltipRect = this.tooltipContentEl.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const spaceAbove = triggerRect.top;
+        const spaceBelow = viewportHeight - triggerRect.bottom;
+        const spaceLeft = triggerRect.left;
+        const spaceRight = viewportWidth - triggerRect.right;
+        let bestPosition = this.position;
+        const positions = ['top', 'bottom', 'left', 'right'];
+        const fitsInPreferred = this.checkPositionFits(this.position, triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight);
+        if (!fitsInPreferred) {
+            bestPosition = this.findBestAlternativePosition(positions, triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight);
+        }
+        const coordinates = this.getPositionCoordinates(bestPosition, triggerRect, tooltipRect, viewportWidth, viewportHeight);
+        return { ...coordinates, position: bestPosition };
+    }
+    checkPositionFits(position, _triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight) {
+        const margin = 20;
+        switch (position) {
+            case 'top':
+                return spaceAbove >= tooltipRect.height + margin;
+            case 'bottom':
+                return spaceBelow >= tooltipRect.height + margin;
+            case 'left':
+                return spaceLeft >= tooltipRect.width + margin;
+            case 'right':
+                return spaceRight >= tooltipRect.width + margin;
+            default:
+                return false;
+        }
+    }
+    findBestAlternativePosition(positions, _triggerRect, _tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight) {
+        const spaces = {
+            top: spaceAbove,
+            bottom: spaceBelow,
+            left: spaceLeft,
+            right: spaceRight,
+        };
+        const sortedPositions = positions.sort((a, b) => spaces[b] - spaces[a]);
+        return sortedPositions[0];
+    }
+    getPositionCoordinates(position, triggerRect, tooltipRect, viewportWidth, viewportHeight) {
+        let top = 0;
+        let left = 0;
+        const margin = 8;
+        switch (position) {
+            case 'top':
+                top = triggerRect.top - tooltipRect.height - margin;
+                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + margin;
+                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case 'left':
+                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+                left = triggerRect.left - tooltipRect.width - margin;
+                break;
+            case 'right':
+                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+                left = triggerRect.right + margin;
+                break;
+        }
+        const buffer = 10;
+        left = Math.max(margin, Math.min(left, viewportWidth - tooltipRect.width - margin - buffer));
+        top = Math.max(margin, Math.min(top, viewportHeight - tooltipRect.height - margin - buffer));
+        return { top, left };
+    }
+    showTooltip() {
+        this.isVisible = true;
+        requestAnimationFrame(() => {
+            const position = this.calculatePosition();
+            this.actualPosition = position.position;
+            this.tooltipStyle = {
+                top: `${position.top}px`,
+                left: `${position.left}px`,
+            };
+        });
+    }
+    hideTooltip() {
+        if (this.isPinned) {
+            return;
+        }
+        this.isVisible = false;
+    }
+    render() {
+        return (h("div", { key: 'ac2b492ced810248b21b6d268c396d0d5c0c0b62', class: "tooltip-container", part: "tc__container" }, h("span", { key: '9cbab07a14f9c75912d3483f26e892608bb98f0a', class: "info-icon", tabindex: "0", role: "button", "aria-describedby": this.tooltipId, "aria-expanded": this.isVisible ? 'true' : 'false', "aria-pressed": this.isPinned ? 'true' : 'false', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("slot", { key: 'd8f086366cd648ebae4561967af6d7cd3eb4935a', name: "tooltip-icon" }, "i")), h("span", { key: 'dd7f80817726299fadb7a13ba18af9f866e4d185', ref: el => (this.tooltipContentEl = el), id: this.tooltipId, role: "tooltip", "aria-hidden": !this.isVisible ? 'true' : 'false', class: {
+                'tooltip-content': true,
+                'tooltip-visible': this.isVisible,
+                [this.actualPosition]: true,
+            }, style: this.isVisible
+                ? {
+                    position: 'fixed',
+                    top: this.tooltipStyle.top,
+                    left: this.tooltipStyle.left,
+                }
+                : {}, part: "tc__content" }, h("slot", { key: '0ad30c67749909cef048828bcbae5ed187a74dd1', name: "tooltip-content" }, "This is a help text."))));
+    }
+    get el() { return this; }
+    static get style() { return tooltipComponentCss; }
+}, [257, "tooltip-component", {
+        "position": [1],
+        "isVisible": [32],
+        "isPinned": [32],
+        "actualPosition": [32],
+        "tooltipStyle": [32]
+    }, [[8, "keydown", "handleKeyDown"], [4, "click", "handleDocumentClick"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tooltip-component"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tooltip-component":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TooltipComponent);
+            }
+            break;
+    } });
+}
+export { TooltipComponent as T, defineCustomElement as d };
+//# sourceMappingURL=p-CelgQqJU.js.map
+//# sourceMappingURL=p-CelgQqJU.js.map

package/dist/components/p-CelgQqJU.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-CelgQqJU.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/design-system/tooltip-component/tooltip-component.scss?tag=tooltip-component&encapsulation=shadow","src/components/design-system/tooltip-component/toolitp-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n.tooltip-container {\n position: relative;\n display: flex;\n @include default-css-variables;\n}\n\n.info-icon {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n outline: none;\n transition: opacity 0.2s ease-in-out;\n\n &:hover {\n opacity: 0.8;\n }\n\n &:active {\n opacity: 0.6;\n }\n\n &:focus-visible {\n outline: 2px solid var(--nylas-primary-500, #2563eb);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n &[aria-pressed='true'] {\n opacity: 1;\n background-color: var(--nylas-primary-50, rgba(37, 99, 235, 0.1));\n border-radius: 4px;\n }\n}\n\n.tooltip-content {\n display: none;\n background-color: var(--nylas-base-800);\n color: var(--nylas-base-0);\n text-align: left;\n border-radius: 6px;\n padding: 0.5rem 1rem;\n max-width: 300px;\n width: max-content;\n z-index: 9999;\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n pointer-events: none;\n box-shadow:\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n\n &.tooltip-visible {\n display: block;\n opacity: 1;\n pointer-events: auto;\n }\n}\n\n/* Arrow styles */\n.tooltip-content::after {\n content: '';\n position: absolute;\n border-width: 6px;\n border-style: solid;\n}\n\n.tooltip-content {\n &.top::after {\n bottom: -12px;\n left: 50%;\n transform: translateX(-50%);\n border-color: var(--nylas-base-800) transparent transparent transparent;\n }\n\n &.bottom::after {\n top: -12px;\n left: 50%;\n transform: translateX(-50%);\n border-color: transparent transparent var(--nylas-base-800) transparent;\n }\n\n &.left::after {\n right: -12px;\n top: 50%;\n transform: translateY(-50%);\n border-color: transparent transparent transparent var(--nylas-base-800);\n }\n\n &.right::after {\n left: -12px;\n top: 50%;\n transform: translateY(-50%);\n border-color: transparent var(--nylas-base-800) transparent transparent;\n }\n}\n\n/* Animation for tooltip appearance */\n@keyframes tooltip-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.tooltip-visible {\n animation: tooltip-fade-in 0.15s ease-out;\n}\n","import { Component, Element, Prop, State, h, Listen } from '@stencil/core';\n\ntype TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\n\ninterface PositionCoordinates {\n top: number;\n left: number;\n position: TooltipPosition;\n}\n\n/**\n * The `tooltip-component` component is a UI component that displays a tooltip.\n * It automatically adjusts its position to avoid being cut off by viewport or container boundaries.\n *\n * @part tc__container - The tooltip container.\n * @part tc__content - The tooltip content.\n */\n@Component({\n tag: 'tooltip-component',\n styleUrl: 'tooltip-component.scss',\n shadow: true,\n})\nexport class TooltipComponent {\n @Element() el!: HTMLElement;\n\n /**\n * The preferred position of the tooltip.\n * The tooltip will attempt to use this position but will automatically adjust if it would be cut off.\n */\n @Prop() position: TooltipPosition = 'bottom';\n\n /**\n * Controls the visibility of the tooltip.\n */\n @State() isVisible = false;\n\n /**\n * Tracks if the tooltip is pinned open via click.\n */\n @State() isPinned = false;\n\n /**\n * The actual position being used after boundary detection.\n */\n @State() actualPosition: TooltipPosition = this.position;\n\n /**\n * Calculated position coordinates for the tooltip.\n */\n @State() tooltipStyle: { top: string; left: string } = { top: '0', left: '0' };\n\n private tooltipContentEl?: HTMLElement;\n private tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;\n\n /**\n * Listen for Escape key to close tooltip\n */\n @Listen('keydown', { target: 'window' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.isVisible) {\n this.isPinned = false;\n this.isVisible = false;\n }\n }\n\n /**\n * Listen for clicks outside to close pinned tooltip\n */\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n if (!this.isPinned || !this.isVisible) {\n return;\n }\n\n // Check if click is outside the component\n const clickedInside = this.el.contains(event.target as Node);\n if (!clickedInside) {\n this.isPinned = false;\n this.isVisible = false;\n }\n }\n\n /**\n * Calculate the best position for the tooltip to avoid cutoff\n */\n private calculatePosition(): PositionCoordinates {\n if (!this.tooltipContentEl) {\n return { top: 0, left: 0, position: this.position };\n }\n\n const triggerEl = this.el.shadowRoot?.querySelector('.info-icon') as HTMLElement;\n if (!triggerEl) {\n return { top: 0, left: 0, position: this.position };\n }\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const tooltipRect = this.tooltipContentEl.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n // Calculate available space in each direction\n const spaceAbove = triggerRect.top;\n const spaceBelow = viewportHeight - triggerRect.bottom;\n const spaceLeft = triggerRect.left;\n const spaceRight = viewportWidth - triggerRect.right;\n\n // Determine the best position based on available space\n let bestPosition = this.position;\n const positions: TooltipPosition[] = ['top', 'bottom', 'left', 'right'];\n\n // Check if preferred position fits\n const fitsInPreferred = this.checkPositionFits(this.position, triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight);\n\n if (!fitsInPreferred) {\n // Find alternative position with most space\n bestPosition = this.findBestAlternativePosition(positions, triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight);\n }\n\n // Calculate coordinates based on the chosen position\n const coordinates = this.getPositionCoordinates(bestPosition, triggerRect, tooltipRect, viewportWidth, viewportHeight);\n\n return { ...coordinates, position: bestPosition };\n }\n\n /**\n * Check if tooltip fits in a given position\n */\n private checkPositionFits(\n position: TooltipPosition,\n _triggerRect: DOMRect,\n tooltipRect: DOMRect,\n spaceAbove: number,\n spaceBelow: number,\n spaceLeft: number,\n spaceRight: number,\n ): boolean {\n const margin = 20; // 1.25rem margin + arrow\n\n switch (position) {\n case 'top':\n return spaceAbove >= tooltipRect.height + margin;\n case 'bottom':\n return spaceBelow >= tooltipRect.height + margin;\n case 'left':\n return spaceLeft >= tooltipRect.width + margin;\n case 'right':\n return spaceRight >= tooltipRect.width + margin;\n default:\n return false;\n }\n }\n\n /**\n * Find the best alternative position with the most available space\n */\n private findBestAlternativePosition(\n positions: TooltipPosition[],\n _triggerRect: DOMRect,\n _tooltipRect: DOMRect,\n spaceAbove: number,\n spaceBelow: number,\n spaceLeft: number,\n spaceRight: number,\n ): TooltipPosition {\n const spaces = {\n top: spaceAbove,\n bottom: spaceBelow,\n left: spaceLeft,\n right: spaceRight,\n };\n\n // Sort positions by available space\n const sortedPositions = positions.sort((a, b) => spaces[b] - spaces[a]);\n\n // Return the position with the most space\n return sortedPositions[0];\n }\n\n /**\n * Get position coordinates for the tooltip\n */\n private getPositionCoordinates(\n position: TooltipPosition,\n triggerRect: DOMRect,\n tooltipRect: DOMRect,\n viewportWidth: number,\n viewportHeight: number,\n ): { top: number; left: number } {\n let top = 0;\n let left = 0;\n const margin = 8; // Small margin for spacing\n\n switch (position) {\n case 'top':\n top = triggerRect.top - tooltipRect.height - margin;\n left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n break;\n case 'bottom':\n top = triggerRect.bottom + margin;\n left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n break;\n case 'left':\n top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n left = triggerRect.left - tooltipRect.width - margin;\n break;\n case 'right':\n top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n left = triggerRect.right + margin;\n break;\n }\n\n // Ensure tooltip stays within viewport bounds with extra buffer for accuracy\n const buffer = 10; // Extra buffer to account for rounding, padding, and box-sizing\n left = Math.max(margin, Math.min(left, viewportWidth - tooltipRect.width - margin - buffer));\n top = Math.max(margin, Math.min(top, viewportHeight - tooltipRect.height - margin - buffer));\n\n return { top, left };\n }\n\n /**\n * Show the tooltip with position calculation\n */\n private showTooltip() {\n this.isVisible = true;\n\n // Wait for next frame to ensure tooltip is rendered\n requestAnimationFrame(() => {\n const position = this.calculatePosition();\n this.actualPosition = position.position;\n this.tooltipStyle = {\n top: `${position.top}px`,\n left: `${position.left}px`,\n };\n });\n }\n\n /**\n * Hide the tooltip\n */\n private hideTooltip() {\n // Don't hide if tooltip is pinned\n if (this.isPinned) {\n return;\n }\n this.isVisible = false;\n }\n\n /**\n * Handle click to pin/unpin tooltip\n */\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.isPinned = !this.isPinned;\n\n if (this.isPinned) {\n this.showTooltip();\n } else {\n this.isVisible = false;\n }\n };\n\n /**\n * Handle mouse enter\n */\n private handleMouseEnter = () => {\n if (!this.isPinned) {\n this.showTooltip();\n }\n };\n\n /**\n * Handle mouse leave\n */\n private handleMouseLeave = () => {\n this.hideTooltip();\n };\n\n /**\n * Handle focus\n */\n private handleFocus = () => {\n if (!this.isPinned) {\n this.showTooltip();\n }\n };\n\n /**\n * Handle blur\n */\n private handleBlur = () => {\n this.hideTooltip();\n };\n\n render() {\n return (\n <div class=\"tooltip-container\" part=\"tc__container\">\n <span\n class=\"info-icon\"\n tabindex=\"0\"\n role=\"button\"\n aria-describedby={this.tooltipId}\n aria-expanded={this.isVisible ? 'true' : 'false'}\n aria-pressed={this.isPinned ? 'true' : 'false'}\n onClick={this.handleClick}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n <slot name=\"tooltip-icon\">i</slot>\n </span>\n <span\n ref={el => (this.tooltipContentEl = el)}\n id={this.tooltipId}\n role=\"tooltip\"\n aria-hidden={!this.isVisible ? 'true' : 'false'}\n class={{\n 'tooltip-content': true,\n 'tooltip-visible': this.isVisible,\n [this.actualPosition]: true,\n }}\n style={\n this.isVisible\n ? {\n position: 'fixed',\n top: this.tooltipStyle.top,\n left: this.tooltipStyle.left,\n }\n : {}\n }\n part=\"tc__content\"\n >\n <slot name=\"tooltip-content\">This is a help text.</slot>\n </span>\n </div>\n );\n }\n}\n"],"version":3}