@nylas/web-elements 1.4.1 → 1.4.3

package/dist/nylas-web-elements/nylas-event-timeslot.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["nylasEventTimeslotCss","dayjs","extend","customParseFormat","utc","timezone","periodMap","day","week","month","year","NylasEventTimeslot","connectedCallback","debug","disconnectedCallback","componentWillLoad","this","host","setAttribute","name","componentDidLoad","initialValue","when","recurrence","selectedDate","unix","start_time","tz","start_timezone","format","selectedStartTime","selectedEndTime","end_time","end_timezone","selectedTimezone","Date","toISOString","split","defaultTimes","getSuggestedTime","startTime","endTime","Intl","DateTimeFormat","resolvedOptions","timeZone","length","selectedRrule","repeatEndAfter","find","s","includes","parseInt","daysString","repeatOnDays","until","untilDate","toDate","repeatEndOn","repeatEndType","recurrenceType","getRecurrenceTypeFromRrule","selectedRecurrenceType","generateRRule","undefined","recurrenceOptions","generateRecurrenceOptions","monthRecurrenceOptions","getMonthRecurrenceOptions","handleValueChanged","elementNameChangedHandler","newValue","selectedLanguageChangedHandler","newVal","oldVal","i18next","changeLanguage","getOrdinalSuffix","n","v","rrule","timezoneStr","daysOfWeek","selectedDay","dayOfWeek","date","occurrenceInMonth","Math","ceil","label","t","value","dayOfMonth","dateOfMonth","now","minutes","minute","roundedMinutes","set","add","getTimezoneLabelHTML","offset","getTimezoneOffset","h","class","style","display","alignItems","justifyContent","width","TIMEZONE_MAP","fontSize","fontWeight","color","isStartTimeAfterEndTime","start","end","isAfter","isStartTimeEqualToEndTime","isSame","getStartAndEndTimes","round","getTime","getCustomOptions","repeatFreq","repeatEveryFrequency","frequency","interval","repeatEveryInterval","monthlySameDate","repeatMonthlySameDate","type","count","noValue","customOptions","internalsObj","internals","setFormValue","JSON","stringify","valueChanged","emit","setTime","event","key","detail","validateStartTimeAfterEndTime","validateStartTimeEqualToEndTime","timeRangeError","timeWindowFormError","message","nylasFormDropdownChangedHandler","nylasFormInputChangedHandler","timePeriodChangedHandler","number","period","render","defaultRecurrenceOption","option","timezoneOptions","Object","keys","map","labelHTML","selectedTimezoneOption","i","endOptions","defaultEndOnDate","defaultEndAfter","Host","part","htmlFor","defaultValue","id","required","hasError","time","language","selectedLanguage","exportparts","minimumStartTime","options","withChevron","defaultSelectedOption","slot","height","withSearch","timePeriods","context","defaultSelectedNumber","defaultSelectedPeriod","title","selected","onClick","filter","d","minValue","toString","__decorate","RegisterComponent","stateToProps","Map","eventToProps","async","_nylasConnector","fireRegisterEvent"],"sources":["src/components/scheduler-editor/nylas-event-timeslot/nylas-event-timeslot.scss?tag=nylas-event-timeslot&encapsulation=shadow","src/components/scheduler-editor/nylas-event-timeslot/nylas-event-timeslot.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/buttons.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\ndiv.nylas-event-timeslot {\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n  }\n\n  div.date-time-input {\n    div.date-time-picker {\n      display: flex;\n      gap: 32px;\n\n      @media #{$mobile} {\n        flex-direction: column;\n        gap: 16px;\n      }\n\n      nylas-date-component {\n        width: 224px;\n\n        @media #{$mobile} {\n          width: 100%;\n        }\n\n        &::part(ic__date) {\n          height: 50px;\n          border-color: var(--nylas-base-200);\n        }\n      }\n\n      div.time-range {\n        display: flex;\n        gap: 8px;\n        align-items: flex-start;\n\n        span {\n          margin: 12px 0 0 6px;\n          display: inline-flex;\n          align-items: flex-start;\n        }\n\n        @media #{$mobile} {\n          display: grid;\n          grid-template-columns: 1fr 20px 1fr;\n\n          nylas-time-window-picker {\n            &::part(time-picker) {\n              width: -webkit-fill-available;\n            }\n\n            &::part(time-input) {\n              width: calc(100% - 8px);\n            }\n          }\n        }\n      }\n\n      select-dropdown {\n        width: fit-content;\n\n        &::part(sd_dropdown) {\n          position: relative;\n        }\n\n        &::part(sd_dropdown-button) {\n          border: none;\n          padding: 14px;\n          justify-content: flex-start;\n\n          &:hover {\n            border: none;\n            outline: none;\n            color: var(--nylas-primary);\n          }\n        }\n\n        @media #{$mobile} {\n          width: -webkit-fill-available;\n\n          &::part(sd_dropdown-button-selected-label) {\n            max-width: fit-content;\n          }\n\n          &::part(sd_dropdown-content) {\n            right: unset;\n            width: unset;\n          }\n        }\n      }\n    }\n\n    div.recurrence-options {\n      margin: 8px 0;\n\n      select-dropdown {\n        &::part(sd_dropdown) {\n          position: relative;\n        }\n\n        &::part(sd_dropdown-button) {\n          width: fit-content;\n          padding: 14px;\n          border-color: var(--nylas-base-200);\n\n          &:hover {\n            color: var(--nylas-primary);\n          }\n        }\n\n        &::part(sd_dropdown-content) {\n          width: fit-content;\n        }\n\n        &::part(sd_dropdown-button-selected-label) {\n          max-width: 100%;\n          width: fit-content;\n          font-size: 16px;\n        }\n\n        @media #{$mobile} {\n          width: -webkit-fill-available;\n\n          &::part(sd_dropdown-button-selected-label) {\n            max-width: 254px;\n            width: fit-content;\n          }\n\n          &::part(sd_dropdown-content) {\n            right: unset;\n            width: unset;\n          }\n        }\n\n        @media #{$x-small-mobile} {\n          &::part(sd_dropdown-button-selected-label) {\n            max-width: 240px;\n          }\n        }\n      }\n\n      div.custom-recurrence-time-period,\n      div.recurrence-type,\n      div.recurrence-end {\n        display: grid;\n        align-items: center;\n        gap: 16px;\n        grid-template-columns: 128px 1fr;\n        margin-bottom: 8px;\n        select-dropdown::part(sd_dropdown-button) {\n          border-color: var(--nylas-base-200);\n        }\n\n        @media #{$mobile} {\n          grid-template-columns: 1fr;\n          gap: 4px;\n          margin: 16px 0;\n        }\n\n        time-period-selector::part(id_dropdown-input) {\n          padding: 16px;\n        }\n        time-period-selector input-dropdown {\n          &:hover {\n            border: 1px solid var(--nylas-primary);\n            outline: 1px solid transparent;\n          }\n        }\n      }\n\n      div.repeat-on {\n        div.days {\n          margin: 16px 0;\n          display: flex;\n          gap: 16px;\n          align-items: center;\n\n          div.buttons {\n            display: flex;\n            gap: 8px;\n            margin: 8px 0;\n\n            button {\n              border-radius: 50%;\n              border: none;\n              height: 24px;\n              width: 24px;\n              color: var(--nylas-base-800);\n              cursor: pointer;\n\n              &.selected {\n                background-color: var(--nylas-primary);\n                color: var(--nylas-base-0);\n              }\n\n              &:hover {\n                background-color: var(--nylas-base-500);\n                color: var(--nylas-base-0);\n              }\n\n              &:active {\n                background-color: var(--nylas-base-600);\n                color: var(--nylas-base-0);\n              }\n            }\n          }\n        }\n\n        div.days,\n        div.custom-recurrence-ends,\n        div.month-recurrence {\n          display: grid;\n          align-items: center;\n          gap: 16px;\n          grid-template-columns: 128px 1fr;\n\n          @media #{$mobile} {\n            grid-template-columns: 1fr;\n            gap: 4px;\n            margin: 16px 0;\n          }\n        }\n\n        div.custom-recurrence {\n          display: flex;\n          gap: 16px;\n          align-items: center;\n\n          @media #{$mobile} {\n            flex-direction: column;\n            align-items: flex-start;\n            gap: 0;\n          }\n\n          div.custom-recurrence-end-after {\n            display: flex;\n            gap: 8px;\n            align-items: center;\n\n            @media #{$mobile} {\n              flex-direction: column;\n              align-items: flex-start;\n            }\n          }\n\n          nylas-date-component::part(ic__date) {\n            padding: 0 16px;\n            height: 52px;\n            border: 1px solid var(--nylas-base-200);\n          }\n        }\n      }\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, generateRRule, getTimezoneOffset } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE, TIMEZONE_MAP } from '@/common/constants';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport utc from 'dayjs/plugin/utc';\nimport timezone from 'dayjs/plugin/timezone';\n\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\ndayjs.extend(timezone);\n\nconst periodMap = {\n  day: 'daily',\n  week: 'weekly',\n  month: 'monthly',\n  year: 'yearly',\n};\n\ntype RepeatEndType = 'never' | 'on' | 'after';\ntype RecurrenceType = 'none' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'custom';\n\n/**\n * The `nylas-event-timeslot` component is a UI component that allows users to select the event type for the scheduler configuration.\n */\n@Component({\n  tag: 'nylas-event-timeslot',\n  styleUrl: 'nylas-event-timeslot.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventTimeslot {\n  @Element() host!: HTMLNylasEventTimeslotElement;\n\n  /**\n   * @standalone\n   * The name of the component\n   */\n  @Prop() name: string = 'event-timeslot';\n  /**\n   * The initial value of the event timeslot.\n   */\n  @Prop() initialValue?: {\n    when: {\n      start_time: number;\n      end_time: number;\n      start_timezone: string;\n      end_timezone: string;\n    };\n    recurrence: string[];\n  };\n\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n  /**\n   * The selected date.\n   */\n  @State() selectedDate!: string;\n\n  /**\n   * The selected start time.\n   */\n  @State() selectedStartTime!: string;\n\n  /**\n   * The selected end time.\n   */\n  @State() selectedEndTime!: string;\n\n  /**\n   * The timezone.\n   */\n  @State() selectedTimezone!: string;\n\n  /**\n   * The selected recurrence type.\n   */\n  @State() selectedRecurrenceType!: RecurrenceType;\n\n  /**\n   * Time range error.\n   */\n  @State() timeRangeError: boolean = false;\n\n  /**\n   * The selected rrule.\n   */\n  @State() selectedRrule!: string | null;\n\n  /**\n   * Recurrence options.\n   */\n  @State() recurrenceOptions: { label: string; value: string }[] = [];\n  /**\n   * Repeat every frequency.\n   */\n  @State() repeatEveryInterval: number = 1;\n  /**\n   * Repeat every period.\n   */\n  @State() repeatEveryFrequency: string = 'week';\n  /**\n   * Repeat on days.\n   */\n  @State() repeatOnDays: string[] = [];\n  /**\n   * Repeat monthly on.\n   */\n  @State() repeatMonthlySameDate: boolean = true;\n  /**\n   * Repeat end type.\n   */\n  @State() repeatEndType: RepeatEndType = 'never';\n  /**\n   * Repeat end after.\n   */\n  @State() repeatEndAfter: number = 1;\n  /**\n   * Repeat end on (custom recurrence).\n   */\n  @State() repeatEndOn: string | undefined;\n  /**\n   * Month recurrence options.\n   */\n  @State() monthRecurrenceOptions: { label: string; value: string }[] = [];\n  /**\n   * The end date for recurrence (non-custom recurrence).\n   */\n  @State() endDate: string | undefined;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * This event is fired when the value of the event location changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * This event is fired when the value of the event timeslot changes.\n   */\n  @Event() timeWindowFormError!: EventEmitter<{\n    key: string;\n    message: string;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-event-timeslot', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-timeslot', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-timeslot', '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-event-timeslot', 'componentDidLoad');\n\n    // Set defaults from initialValue or fallback to current values\n    if (this.initialValue) {\n      const { when, recurrence } = this.initialValue;\n\n      if (when) {\n        this.selectedDate = dayjs.unix(when.start_time).tz(when.start_timezone).format('YYYY-MM-DD');\n        this.selectedStartTime = dayjs.unix(when.start_time).tz(when.start_timezone).format('hh:mma');\n        this.selectedEndTime = dayjs.unix(when.end_time).tz(when.end_timezone).format('hh:mma');\n        this.selectedTimezone = when.start_timezone;\n      } else {\n        this.selectedDate = new Date().toISOString().split('T')[0];\n        const defaultTimes = this.getSuggestedTime();\n        this.selectedStartTime = defaultTimes.startTime;\n        this.selectedEndTime = defaultTimes.endTime;\n        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n      }\n\n      if (recurrence && recurrence.length > 0) {\n        this.selectedRrule = recurrence[0];\n        const repeatEndAfter = recurrence[0]?.split(';')?.find(s => s.includes('COUNT'));\n        if (repeatEndAfter) {\n          this.repeatEndAfter = parseInt(repeatEndAfter.split('=')[1]);\n        }\n        const daysString = recurrence[0]?.split(';')?.find(s => s.includes('BYDAY'));\n        if (daysString) {\n          this.repeatOnDays = daysString.split('=')[1].split(',');\n        }\n        const until = recurrence[0]?.split(';')?.find(s => s.includes('UNTIL'));\n        if (until) {\n          const untilDate = dayjs(until.split('=')[1], 'YYYYMMDDTHHmmss').toDate();\n          this.repeatEndOn = dayjs(untilDate).toISOString().split('T')[0];\n          this.repeatEndType = 'on';\n        }\n        const recurrenceType = this.getRecurrenceTypeFromRrule(recurrence[0]);\n        this.selectedRecurrenceType = recurrenceType || 'none';\n      } else {\n        this.selectedRecurrenceType = 'none';\n        this.selectedRrule = generateRRule(this.selectedDate, this.selectedRecurrenceType, undefined, undefined, this.selectedTimezone);\n      }\n    } else {\n      this.selectedDate = new Date().toISOString().split('T')[0];\n      const defaultTimes = this.getSuggestedTime();\n      this.selectedStartTime = defaultTimes.startTime;\n      this.selectedEndTime = defaultTimes.endTime;\n      this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n      this.selectedRecurrenceType = 'none';\n      this.selectedRrule = generateRRule(this.selectedDate, this.selectedRecurrenceType, undefined, undefined, this.selectedTimezone);\n    }\n\n    this.recurrenceOptions = this.generateRecurrenceOptions(this.selectedDate, this.selectedTimezone);\n    this.monthRecurrenceOptions = this.getMonthRecurrenceOptions(this.selectedDate, this.selectedTimezone);\n\n    // Trigger initial value change\n    this.handleValueChanged(true);\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-event-timeslot', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  // Utility function to get the ordinal suffix (e.g., 1st, 2nd, 3rd)\n  getOrdinalSuffix(n) {\n    const s = ['th', 'st', 'nd', 'rd'];\n    const v = n % 100;\n    return n + (s[(v - 20) % 10] || s[v] || s[0]);\n  }\n\n  getRecurrenceTypeFromRrule(rrule: string): RecurrenceType | undefined {\n    if (rrule.includes('INTERVAL')) return 'custom';\n    if (rrule.includes('FREQ=DAILY')) return 'daily';\n    if (rrule.includes('FREQ=WEEKLY')) return 'weekly';\n    if (rrule.includes('FREQ=MONTHLY')) return 'monthly';\n    if (rrule.includes('FREQ=YEARLY')) return 'yearly';\n    return undefined;\n  }\n\n  // Function to generate dynamic recurrence options\n  generateRecurrenceOptions(selectedDate: string, timezoneStr: string) {\n    const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n\n    // Parse the date in the given timezone\n    const selectedDay = dayjs.tz(selectedDate, timezoneStr);\n\n    const dayOfWeek = daysOfWeek[selectedDay.day()]; // Get the day of the week (e.g., Thursday)\n\n    // Determine the occurrence of the day in the month (e.g., 1st, 2nd, etc.)\n    const date = selectedDay.date();\n    const occurrenceInMonth = Math.ceil(date / 7); // e.g., 1st Thursday\n\n    // Generate options\n    return [\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.none'), value: 'none' },\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.daily'), value: 'daily' },\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.weekly', { dayOfWeek: dayOfWeek }), value: 'weekly' },\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.monthly', { dayOfMonth: `${this.getOrdinalSuffix(occurrenceInMonth)} ${dayOfWeek}` }), value: 'monthly' },\n      {\n        label: i18next.t('nylasEventTimeslot.recurrenceOptions.yearly', { dateOfMonth: `${selectedDay.format('MMMM D')}` }),\n        value: 'yearly',\n      },\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.custom'), value: 'custom' },\n    ];\n  }\n\n  // Function to generate dynamic month recurrence options\n  getMonthRecurrenceOptions(selectedDate: string, timezoneStr: string) {\n    const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n\n    const selectedDay = dayjs.tz(selectedDate, timezoneStr);\n    const dayOfWeek = daysOfWeek[selectedDay.day()]; // Get the day of the week (e.g., Thursday)\n    const date = selectedDay.date();\n    const occurrenceInMonth = Math.ceil(date / 7);\n\n    return [\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.monthOnDay', { date: date }), value: 'monthly-same-date' },\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.monthly', { dayOfMonth: `${this.getOrdinalSuffix(occurrenceInMonth)} ${dayOfWeek}` }), value: 'monthly' },\n    ];\n  }\n\n  // Function to get the default suggested time shown in the time range picker\n  getSuggestedTime() {\n    const now = dayjs();\n\n    // Round current time to the next 30-minute increment\n    const minutes = now.minute();\n    const roundedMinutes = minutes <= 30 ? 30 : 60;\n    const startTime = now.set('minute', roundedMinutes).set('second', 0);\n\n    // Calculate end time (30 minutes after start time)\n    const endTime = startTime.add(30, 'minute');\n\n    // Format the times in \"hh:mma\" format\n    return {\n      startTime: startTime.format('hh:mma'), // e.g., \"03:00pm\"\n      endTime: endTime.format('hh:mma'), // e.g., \"03:30pm\"\n    };\n  }\n\n  getTimezoneLabelHTML(timezone: string) {\n    const offset = getTimezoneOffset(timezone);\n    return (\n      <span\n        class=\"timezone-label\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          width: '-webkit-fill-available',\n        }}\n      >\n        {TIMEZONE_MAP[timezone]}{' '}\n        <span\n          class=\"timezone-offset\"\n          style={{\n            fontSize: '14px',\n            fontWeight: '400',\n            color: 'var(--nylas-base-500)',\n          }}\n        >\n          {offset}\n        </span>\n      </span>\n    );\n  }\n\n  // Function to check if the start time is after the end time (used for validation)\n  isStartTimeAfterEndTime(startTime: string, endTime: string): boolean {\n    // Parse the times using Day.js\n    const start = dayjs(startTime, 'hh:mma');\n    const end = dayjs(endTime, 'hh:mma');\n\n    // Compare start and end times\n    return start.isAfter(end);\n  }\n\n  isStartTimeEqualToEndTime(startTime: string, endTime: string): boolean {\n    const start = dayjs(startTime, 'hh:mma');\n    const end = dayjs(endTime, 'hh:mma');\n    return start.isSame(end);\n  }\n\n  // Function to get the start and end times in Unix timestamp format (used in the valueChanged event)\n  getStartAndEndTimes() {\n    const start_time = dayjs(`${this.selectedDate} ${this.selectedStartTime}`, 'YYYY-MM-DD hh:mma').toDate();\n    const end_time = dayjs(`${this.selectedDate} ${this.selectedEndTime}`, 'YYYY-MM-DD hh:mma').toDate();\n\n    return {\n      start_time: Math.round(start_time.getTime() / 1000),\n      end_time: Math.round(end_time.getTime() / 1000),\n    };\n  }\n\n  // Function to get the custom options for the RRule\n  getCustomOptions() {\n    if (this.selectedRecurrenceType !== 'custom') {\n      return undefined;\n    }\n\n    const repeatFreq = periodMap[this.repeatEveryFrequency];\n\n    return {\n      frequency: repeatFreq,\n      interval: this.repeatEveryInterval,\n      daysOfWeek: this.repeatEveryFrequency === 'week' ? this.repeatOnDays : undefined,\n      monthlySameDate: this.repeatEveryFrequency === 'month' ? this.repeatMonthlySameDate : undefined,\n      end: {\n        type: this.repeatEndType,\n        count: this.repeatEndType === 'after' ? this.repeatEndAfter : undefined,\n        date: this.repeatEndType === 'on' ? this.repeatEndOn : undefined,\n      },\n    };\n  }\n\n  handleValueChanged(noValue: boolean = false) {\n    const customOptions = this.getCustomOptions();\n    this.selectedRrule = generateRRule(this.selectedDate, this.selectedRecurrenceType, this.repeatEndOn, customOptions, this.selectedTimezone);\n    const { start_time, end_time } = this.getStartAndEndTimes();\n    const internalsObj = {\n      when: {\n        start_time: start_time,\n        end_time: end_time,\n        start_timezone: this.selectedTimezone,\n        end_timezone: this.selectedTimezone,\n      },\n      recurrence: this.selectedRrule ? [this.selectedRrule] : [],\n    };\n    this.internals.setFormValue(JSON.stringify(internalsObj), this.name);\n    if (!noValue) {\n      this.valueChanged.emit({\n        value: JSON.stringify(internalsObj),\n        name: this.name,\n      });\n    }\n  }\n\n  // Listeners\n  @Listen('timeChange')\n  setTime(event: CustomEvent<{ key: string; value: string }>) {\n    const { key, value } = event.detail;\n    if (key === 'start-time') {\n      this.selectedStartTime = value;\n    } else if (key === 'end-time') {\n      this.selectedEndTime = value;\n    }\n    const validateStartTimeAfterEndTime = this.isStartTimeAfterEndTime(this.selectedStartTime, this.selectedEndTime);\n    const validateStartTimeEqualToEndTime = this.isStartTimeEqualToEndTime(this.selectedStartTime, this.selectedEndTime);\n    this.timeRangeError = validateStartTimeAfterEndTime || validateStartTimeEqualToEndTime;\n    if (validateStartTimeAfterEndTime) {\n      this.timeWindowFormError.emit({\n        key: this.name,\n        message: 'Invalid time range',\n      });\n      return;\n    } else if (validateStartTimeEqualToEndTime) {\n      this.timeWindowFormError.emit({\n        key: this.name,\n        message: 'Start time and end time cannot be the same',\n      });\n      return;\n    }\n\n    this.handleValueChanged();\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(\n    event: CustomEvent<{\n      value: RecurrenceType | RepeatEndType | string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.selectedTimezone = value;\n    } else if (name === 'recurrence-type') {\n      this.selectedRecurrenceType = value as RecurrenceType;\n    } else if (name === 'month-recurrence-type') {\n      this.repeatMonthlySameDate = value === 'monthly-same-date';\n    } else if (name === 'custom-recurrence-end-type') {\n      this.repeatEndType = value as RepeatEndType;\n    }\n\n    this.handleValueChanged();\n  }\n\n  @Listen('nylasFormInputChanged')\n  nylasFormInputChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    if (name === 'date-time-input') {\n      this.selectedDate = value;\n      this.recurrenceOptions = this.generateRecurrenceOptions(this.selectedDate, this.selectedTimezone);\n      this.monthRecurrenceOptions = this.getMonthRecurrenceOptions(this.selectedDate, this.selectedTimezone);\n    } else if (name === 'recurrence-end-date') {\n      this.repeatEndOn = value;\n    } else if (name === 'custom-recurrence-end-date') {\n      this.repeatEndOn = value;\n    } else if (name === 'recurrence-end-after') {\n      this.repeatEndAfter = parseInt(value);\n    }\n\n    this.handleValueChanged();\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(event: CustomEvent<{ number: number; period: 'day' | 'week' | 'month' | 'year' }>) {\n    const { number, period } = event.detail;\n    this.repeatEveryInterval = number;\n    this.repeatEveryFrequency = period;\n\n    if (period === 'month') {\n      this.monthRecurrenceOptions = this.getMonthRecurrenceOptions(this.selectedDate, this.selectedTimezone);\n    }\n\n    this.handleValueChanged();\n  }\n\n  @RegisterComponent<NylasEventTimeslot, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-timeslot',\n    stateToProps: new Map([['schedulerConfig.selectedLanguage', 'selectedLanguage']]),\n    eventToProps: {\n      valueChanged: async (event: CustomEvent<{ value: string; name: string }>, _nylasConnector: NylasSchedulerConfigConnector) => {\n        debug('nylas-event-timeslot', 'valueChanged', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const defaultRecurrenceOption = this.recurrenceOptions.find(option => option.value === this.selectedRecurrenceType);\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      labelHTML: this.getTimezoneLabelHTML(key),\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n    const selectedTimezoneOption = timezoneOptions.find(i => i.value === this.selectedTimezone);\n    const endOptions = [\n      { label: i18next.t('nylasEventTimeslot.customRecurrence.endsOptions.never'), value: 'never' },\n      { label: i18next.t('nylasEventTimeslot.customRecurrence.endsOptions.on'), value: 'on' },\n      { label: i18next.t('nylasEventTimeslot.customRecurrence.endsOptions.after'), value: 'after' },\n    ];\n    const defaultEndOnDate = dayjs(this.selectedDate).add(1, 'year').toISOString().split('T')[0];\n    const defaultEndAfter = this.repeatEveryFrequency === 'week' ? 4 : this.repeatEveryFrequency === 'month' ? 12 : 5;\n    this.repeatEndOn = this.repeatEndOn || defaultEndOnDate;\n    this.repeatEndAfter = this.repeatEndAfter || defaultEndAfter;\n\n    return (\n      <Host>\n        <div class=\"nylas-event-timeslot\" part=\"netimeslot\">\n          <label htmlFor=\"date-time-input\">{i18next.t('nylasEventTimeslot.dateTimeLabel')}</label>\n          <div class=\"date-time-input\" part=\"netimeslot__date-time-input\">\n            <div class=\"date-time-picker\" part=\"netimeslot__date-time-picker\">\n              <nylas-date-component name=\"date-time-input\" defaultValue={this.selectedDate} id={'date-time-input'} required={true}></nylas-date-component>\n              <div class=\"time-range\" part=\"netimeslot__time-range\">\n                <nylas-time-window-picker\n                  id={'start-time'}\n                  hasError={this.timeRangeError}\n                  time={this.selectedStartTime}\n                  language={this.selectedLanguage}\n                  name={'start-time'}\n                  key={'start-time'}\n                  exportparts=\"time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times\"\n                />\n                <span>&ndash;</span>\n                <nylas-time-window-picker\n                  id={'end-time'}\n                  hasError={this.timeRangeError}\n                  time={this.selectedEndTime}\n                  language={this.selectedLanguage}\n                  name={'end-time'}\n                  key={'end-time'}\n                  minimumStartTime={this.selectedStartTime}\n                  exportparts=\"time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times\"\n                />\n              </div>\n              {selectedTimezoneOption?.label && (\n                <select-dropdown\n                  name=\"timezone\"\n                  exportparts=\"sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content\"\n                  options={timezoneOptions}\n                  withChevron={false}\n                  defaultSelectedOption={selectedTimezoneOption}\n                >\n                  <span slot=\"select-icon\">\n                    <globe-icon width=\"20\" height=\"20\" />\n                  </span>\n                </select-dropdown>\n              )}\n            </div>\n            <div class=\"recurrence-options\" part=\"netimeslot__recurrence-options\">\n              {defaultRecurrenceOption && defaultRecurrenceOption?.label && (\n                <div class=\"recurrence-type\" part=\"netimeslot__recurrence-type\">\n                  <label htmlFor=\"recurrence-type\">{i18next.t('nylasEventTimeslot.recurrenceLabel')}</label>\n                  <select-dropdown\n                    withSearch={false}\n                    id=\"recurrence-type\"\n                    name=\"recurrence-type\"\n                    options={this.recurrenceOptions}\n                    defaultSelectedOption={defaultRecurrenceOption}\n                    exportparts=\"sd_dropdown: netimeslot__dropdown, sd_dropdown-button: netimeslot__dropdown-button, sd_dropdown-content: netimeslot__dropdown-content\"\n                  ></select-dropdown>\n                </div>\n              )}\n              {this.selectedRecurrenceType !== 'custom' && this.selectedRecurrenceType !== 'none' && (\n                <div class=\"recurrence-end\" part=\"netimeslot__recurrence-end\">\n                  <label>{i18next.t('nylasEventTimeslot.endDate')}</label>\n                  <nylas-date-component\n                    name=\"recurrence-end-date\"\n                    defaultValue={this.repeatEndOn || defaultEndOnDate}\n                    id={'recurrence-end-date'}\n                    required={true}\n                  ></nylas-date-component>\n                </div>\n              )}\n\n              {this.selectedRecurrenceType === 'custom' && (\n                <div class=\"custom-recurrence-time-period\" part=\"netimeslot__custom-recurrence\">\n                  <label htmlFor=\"\">{i18next.t('nylasEventTimeslot.customRecurrence.repeatEvery')}</label>\n                  <time-period-selector\n                    id=\"custom-recurrence-time-period\"\n                    exportparts=\"tps__number-dropdown: netimeslot__number-dropdown, tps__number-dropdown-button: netimeslot__number-dropdown-button, tps__number-dropdown-content: netimeslot__number-dropdown-content, tps__period-dropdown: netimeslot__period-dropdown, tps__period-dropdown-button: netimeslot__period-dropdown-button, tps__period-dropdown-content: netimeslot__period-dropdown-content\"\n                    timePeriods={[\n                      { value: 'day', label: i18next.t('timePeriod', { context: 'day' }) },\n                      { value: 'week', label: i18next.t('timePeriod', { context: 'week' }) },\n                      { value: 'month', label: i18next.t('timePeriod', { context: 'month' }) },\n                      { value: 'year', label: i18next.t('timePeriod', { context: 'year' }) },\n                    ]}\n                    defaultSelectedNumber={this.repeatEveryInterval}\n                    defaultSelectedPeriod={this.repeatEveryFrequency}\n                  />\n                </div>\n              )}\n              <div class=\"repeat-on\">\n                {this.selectedRecurrenceType === 'custom' && this.repeatEveryFrequency === 'week' && (\n                  <div class=\"days\">\n                    <label>{i18next.t('nylasEventTimeslot.customRecurrence.repeatOn')}</label>\n                    <div class=\"buttons\">\n                      {[\n                        { label: 'S', value: 'SU', title: 'Sunday' },\n                        { label: 'M', value: 'MO', title: 'Monday' },\n                        { label: 'T', value: 'TU', title: 'Tuesday' },\n                        { label: 'W', value: 'WE', title: 'Wednesday' },\n                        { label: 'T', value: 'TH', title: 'Thursday' },\n                        { label: 'F', value: 'FR', title: 'Friday' },\n                        { label: 'S', value: 'SA', title: 'Saturday' },\n                      ].map(day => (\n                        <button\n                          class={{ selected: this.repeatOnDays.includes(day.value) }}\n                          title={day.title}\n                          onClick={() => {\n                            this.repeatOnDays = this.repeatOnDays.includes(day.value) ? this.repeatOnDays.filter(d => d !== day.value) : [...this.repeatOnDays, day.value];\n                            this.handleValueChanged();\n                          }}\n                        >\n                          {day.label}\n                        </button>\n                      ))}\n                    </div>\n                  </div>\n                )}\n                {this.selectedRecurrenceType === 'custom' && this.repeatEveryFrequency === 'month' && (\n                  <div class=\"month-recurrence\">\n                    <span></span>\n                    <select-dropdown\n                      withSearch={false}\n                      id=\"month-recurrence-type\"\n                      name=\"month-recurrence-type\"\n                      options={this.monthRecurrenceOptions}\n                      defaultSelectedOption={this.repeatMonthlySameDate ? this.monthRecurrenceOptions[0] : this.monthRecurrenceOptions[1]}\n                      exportparts=\"sd_dropdown: netimeslot__dropdown, sd_dropdown-button: netimeslot__dropdown-button, sd_dropdown-content: netimeslot__dropdown-content\"\n                    ></select-dropdown>\n                  </div>\n                )}\n                <div class=\"custom-recurrence\">\n                  {this.selectedRecurrenceType === 'custom' && (\n                    <div class=\"custom-recurrence-ends\">\n                      <label htmlFor=\"recurrence-type\">{i18next.t('nylasEventTimeslot.customRecurrence.ends')}</label>\n                      <select-dropdown\n                        withSearch={false}\n                        id=\"custom-recurrence-end-type\"\n                        name=\"custom-recurrence-end-type\"\n                        options={endOptions}\n                        defaultSelectedOption={endOptions.find(option => option.value === this.repeatEndType)}\n                        exportparts=\"sd_dropdown: netimeslot__dropdown, sd_dropdown-button: netimeslot__dropdown-button, sd_dropdown-content: netimeslot__dropdown-content\"\n                      ></select-dropdown>\n                    </div>\n                  )}\n                  {this.selectedRecurrenceType === 'custom' && this.repeatEndType === 'on' && (\n                    <div>\n                      <nylas-date-component\n                        name=\"custom-recurrence-end-date\"\n                        defaultValue={this.repeatEndOn || defaultEndOnDate}\n                        id={'custom-recurrence-end-date'}\n                        required={true}\n                      ></nylas-date-component>\n                    </div>\n                  )}\n                  {this.selectedRecurrenceType === 'custom' && this.repeatEndType === 'after' && (\n                    <div class=\"custom-recurrence-end-after\">\n                      <input-component\n                        name=\"recurrence-end-after\"\n                        id=\"recurrence-end-after\"\n                        type=\"number\"\n                        minValue={1}\n                        defaultValue={defaultEndAfter.toString()}\n                        exportparts=\"ic_input: netimeslot__input-textfield\"\n                      />\n                      <span>{i18next.t('nylasEventTimeslot.customRecurrence.occurrences')}</span>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["nylasEventTimeslotCss","dayjs","extend","customParseFormat","utc","timezone","periodMap","day","week","month","year","NylasEventTimeslot","connectedCallback","debug","disconnectedCallback","componentWillLoad","this","host","setAttribute","name","componentDidLoad","initialValue","when","recurrence","selectedDate","unix","start_time","tz","start_timezone","format","selectedStartTime","selectedEndTime","end_time","end_timezone","selectedTimezone","Date","toISOString","split","defaultTimes","getSuggestedTime","startTime","endTime","Intl","DateTimeFormat","resolvedOptions","timeZone","length","selectedRrule","repeatEndAfter","find","s","includes","parseInt","daysString","repeatOnDays","until","untilDate","toDate","repeatEndOn","repeatEndType","recurrenceType","getRecurrenceTypeFromRrule","selectedRecurrenceType","generateRRule","undefined","recurrenceOptions","generateRecurrenceOptions","monthRecurrenceOptions","getMonthRecurrenceOptions","handleValueChanged","elementNameChangedHandler","newValue","selectedLanguageChangedHandler","newVal","oldVal","i18next","changeLanguage","getOrdinalSuffix","n","v","rrule","timezoneStr","daysOfWeek","selectedDay","dayOfWeek","date","occurrenceInMonth","Math","ceil","label","t","value","dayOfMonth","dateOfMonth","now","minutes","minute","roundedMinutes","set","add","getTimezoneLabelHTML","offset","getTimezoneOffset","h","class","style","display","alignItems","justifyContent","width","TIMEZONE_MAP","fontSize","fontWeight","color","isStartTimeAfterEndTime","start","end","isAfter","isStartTimeEqualToEndTime","isSame","getStartAndEndTimes","round","getTime","getCustomOptions","repeatFreq","repeatEveryFrequency","frequency","interval","repeatEveryInterval","monthlySameDate","repeatMonthlySameDate","type","count","noValue","customOptions","internalsObj","internals","setFormValue","JSON","stringify","valueChanged","emit","setTime","event","key","detail","validateStartTimeAfterEndTime","validateStartTimeEqualToEndTime","timeRangeError","timeWindowFormError","message","nylasFormDropdownChangedHandler","nylasFormInputChangedHandler","parsedValue","isNaN","timePeriodChangedHandler","number","period","render","defaultRecurrenceOption","option","timezoneOptions","Object","keys","map","labelHTML","selectedTimezoneOption","i","endOptions","defaultEndOnDate","defaultEndAfter","Host","part","htmlFor","defaultValue","id","required","hasError","time","language","selectedLanguage","exportparts","minimumStartTime","options","withChevron","defaultSelectedOption","slot","height","withSearch","timePeriods","context","defaultSelectedNumber","defaultSelectedPeriod","title","selected","onClick","filter","d","minValue","toString","__decorate","RegisterComponent","stateToProps","Map","eventToProps","async","_nylasConnector","fireRegisterEvent"],"sources":["src/components/scheduler-editor/nylas-event-timeslot/nylas-event-timeslot.scss?tag=nylas-event-timeslot&encapsulation=shadow","src/components/scheduler-editor/nylas-event-timeslot/nylas-event-timeslot.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/buttons.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\ndiv.nylas-event-timeslot {\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n  }\n\n  div.date-time-input {\n    div.date-time-picker {\n      display: flex;\n      gap: 32px;\n\n      @media #{$mobile} {\n        flex-direction: column;\n        gap: 16px;\n      }\n\n      nylas-date-component {\n        width: 224px;\n\n        @media #{$mobile} {\n          width: 100%;\n        }\n\n        &::part(ic__date) {\n          height: 50px;\n          border-color: var(--nylas-base-200);\n        }\n      }\n\n      div.time-range {\n        display: flex;\n        gap: 8px;\n        align-items: flex-start;\n\n        span {\n          margin: 12px 0 0 6px;\n          display: inline-flex;\n          align-items: flex-start;\n        }\n\n        @media #{$mobile} {\n          display: grid;\n          grid-template-columns: 1fr 20px 1fr;\n\n          nylas-time-window-picker {\n            &::part(time-picker) {\n              width: -webkit-fill-available;\n            }\n\n            &::part(time-input) {\n              width: calc(100% - 8px);\n            }\n          }\n        }\n      }\n\n      select-dropdown {\n        width: fit-content;\n\n        &::part(sd_dropdown) {\n          position: relative;\n        }\n\n        &::part(sd_dropdown-button) {\n          border: none;\n          padding: 14px;\n          justify-content: flex-start;\n\n          &:hover {\n            border: none;\n            outline: none;\n            color: var(--nylas-primary);\n          }\n        }\n\n        @media #{$mobile} {\n          width: -webkit-fill-available;\n\n          &::part(sd_dropdown-button-selected-label) {\n            max-width: fit-content;\n          }\n\n          &::part(sd_dropdown-content) {\n            right: unset;\n            width: unset;\n          }\n        }\n      }\n    }\n\n    div.recurrence-options {\n      margin: 8px 0;\n\n      select-dropdown {\n        &::part(sd_dropdown) {\n          position: relative;\n        }\n\n        &::part(sd_dropdown-button) {\n          width: fit-content;\n          padding: 14px;\n          border-color: var(--nylas-base-200);\n\n          &:hover {\n            color: var(--nylas-primary);\n          }\n        }\n\n        &::part(sd_dropdown-content) {\n          width: fit-content;\n        }\n\n        &::part(sd_dropdown-button-selected-label) {\n          max-width: 100%;\n          width: fit-content;\n          font-size: 16px;\n        }\n\n        @media #{$mobile} {\n          width: -webkit-fill-available;\n\n          &::part(sd_dropdown-button-selected-label) {\n            max-width: 254px;\n            width: fit-content;\n          }\n\n          &::part(sd_dropdown-content) {\n            right: unset;\n            width: unset;\n          }\n        }\n\n        @media #{$x-small-mobile} {\n          &::part(sd_dropdown-button-selected-label) {\n            max-width: 240px;\n          }\n        }\n      }\n\n      div.custom-recurrence-time-period,\n      div.recurrence-type,\n      div.recurrence-end {\n        display: grid;\n        align-items: center;\n        gap: 16px;\n        grid-template-columns: 128px 1fr;\n        margin-bottom: 8px;\n        select-dropdown::part(sd_dropdown-button) {\n          border-color: var(--nylas-base-200);\n        }\n\n        @media #{$mobile} {\n          grid-template-columns: 1fr;\n          gap: 4px;\n          margin: 16px 0;\n        }\n\n        time-period-selector::part(id_dropdown-input) {\n          padding: 16px;\n        }\n        time-period-selector input-dropdown {\n          &:hover {\n            border: 1px solid var(--nylas-primary);\n            outline: 1px solid transparent;\n          }\n        }\n      }\n\n      div.repeat-on {\n        div.days {\n          margin: 16px 0;\n          display: flex;\n          gap: 16px;\n          align-items: center;\n\n          div.buttons {\n            display: flex;\n            gap: 8px;\n            margin: 8px 0;\n\n            button {\n              border-radius: 50%;\n              border: none;\n              height: 24px;\n              width: 24px;\n              color: var(--nylas-base-800);\n              cursor: pointer;\n\n              &.selected {\n                background-color: var(--nylas-primary);\n                color: var(--nylas-base-0);\n              }\n\n              &:hover {\n                background-color: var(--nylas-base-500);\n                color: var(--nylas-base-0);\n              }\n\n              &:active {\n                background-color: var(--nylas-base-600);\n                color: var(--nylas-base-0);\n              }\n            }\n          }\n        }\n\n        div.days,\n        div.custom-recurrence-ends,\n        div.month-recurrence {\n          display: grid;\n          align-items: center;\n          gap: 16px;\n          grid-template-columns: 128px 1fr;\n\n          @media #{$mobile} {\n            grid-template-columns: 1fr;\n            gap: 4px;\n            margin: 16px 0;\n          }\n        }\n\n        div.custom-recurrence {\n          display: flex;\n          gap: 16px;\n          align-items: baseline;\n\n          @media #{$mobile} {\n            flex-direction: column;\n            align-items: flex-start;\n            gap: 0;\n          }\n\n          div.custom-recurrence-end-after {\n            display: flex;\n            gap: 8px;\n            align-items: center;\n\n            @media #{$mobile} {\n              flex-direction: column;\n              align-items: flex-start;\n            }\n          }\n\n          nylas-date-component::part(ic__date) {\n            padding: 0 16px;\n            height: 52px;\n            border: 1px solid var(--nylas-base-200);\n          }\n        }\n      }\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, generateRRule, getTimezoneOffset } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE, TIMEZONE_MAP } from '@/common/constants';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport utc from 'dayjs/plugin/utc';\nimport timezone from 'dayjs/plugin/timezone';\n\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\ndayjs.extend(timezone);\n\nconst periodMap = {\n  day: 'daily',\n  week: 'weekly',\n  month: 'monthly',\n  year: 'yearly',\n};\n\ntype RepeatEndType = 'never' | 'on' | 'after';\ntype RecurrenceType = 'none' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'custom';\n\n/**\n * The `nylas-event-timeslot` component is a UI component that allows users to select the event type for the scheduler configuration.\n */\n@Component({\n  tag: 'nylas-event-timeslot',\n  styleUrl: 'nylas-event-timeslot.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventTimeslot {\n  @Element() host!: HTMLNylasEventTimeslotElement;\n\n  /**\n   * @standalone\n   * The name of the component\n   */\n  @Prop() name: string = 'event-timeslot';\n  /**\n   * The initial value of the event timeslot.\n   */\n  @Prop() initialValue?: {\n    when: {\n      start_time: number;\n      end_time: number;\n      start_timezone: string;\n      end_timezone: string;\n    };\n    recurrence: string[];\n  };\n\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n  /**\n   * The selected date.\n   */\n  @State() selectedDate!: string;\n\n  /**\n   * The selected start time.\n   */\n  @State() selectedStartTime!: string;\n\n  /**\n   * The selected end time.\n   */\n  @State() selectedEndTime!: string;\n\n  /**\n   * The timezone.\n   */\n  @State() selectedTimezone!: string;\n\n  /**\n   * The selected recurrence type.\n   */\n  @State() selectedRecurrenceType!: RecurrenceType;\n\n  /**\n   * Time range error.\n   */\n  @State() timeRangeError: boolean = false;\n\n  /**\n   * The selected rrule.\n   */\n  @State() selectedRrule!: string | null;\n\n  /**\n   * Recurrence options.\n   */\n  @State() recurrenceOptions: { label: string; value: string }[] = [];\n  /**\n   * Repeat every frequency.\n   */\n  @State() repeatEveryInterval: number = 1;\n  /**\n   * Repeat every period.\n   */\n  @State() repeatEveryFrequency: string = 'week';\n  /**\n   * Repeat on days.\n   */\n  @State() repeatOnDays: string[] = [];\n  /**\n   * Repeat monthly on.\n   */\n  @State() repeatMonthlySameDate: boolean = true;\n  /**\n   * Repeat end type.\n   */\n  @State() repeatEndType: RepeatEndType = 'never';\n  /**\n   * Repeat end after.\n   */\n  @State() repeatEndAfter: number = 1;\n  /**\n   * Repeat end on (custom recurrence).\n   */\n  @State() repeatEndOn: string | undefined;\n  /**\n   * Month recurrence options.\n   */\n  @State() monthRecurrenceOptions: { label: string; value: string }[] = [];\n  /**\n   * The end date for recurrence (non-custom recurrence).\n   */\n  @State() endDate: string | undefined;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * This event is fired when the value of the event location changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * This event is fired when the value of the event timeslot changes.\n   */\n  @Event() timeWindowFormError!: EventEmitter<{\n    key: string;\n    message: string;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-event-timeslot', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-event-timeslot', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-event-timeslot', '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-event-timeslot', 'componentDidLoad');\n\n    // Set defaults from initialValue or fallback to current values\n    if (this.initialValue) {\n      const { when, recurrence } = this.initialValue;\n\n      if (when) {\n        this.selectedDate = dayjs.unix(when.start_time).tz(when.start_timezone).format('YYYY-MM-DD');\n        this.selectedStartTime = dayjs.unix(when.start_time).tz(when.start_timezone).format('hh:mma');\n        this.selectedEndTime = dayjs.unix(when.end_time).tz(when.end_timezone).format('hh:mma');\n        this.selectedTimezone = when.start_timezone;\n      } else {\n        this.selectedDate = new Date().toISOString().split('T')[0];\n        const defaultTimes = this.getSuggestedTime();\n        this.selectedStartTime = defaultTimes.startTime;\n        this.selectedEndTime = defaultTimes.endTime;\n        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n      }\n\n      if (recurrence && recurrence.length > 0) {\n        this.selectedRrule = recurrence[0];\n        const repeatEndAfter = recurrence[0]?.split(';')?.find(s => s.includes('COUNT'));\n        if (repeatEndAfter) {\n          this.repeatEndAfter = parseInt(repeatEndAfter.split('=')[1]);\n        }\n        const daysString = recurrence[0]?.split(';')?.find(s => s.includes('BYDAY'));\n        if (daysString) {\n          this.repeatOnDays = daysString.split('=')[1].split(',');\n        }\n        const until = recurrence[0]?.split(';')?.find(s => s.includes('UNTIL'));\n        if (until) {\n          const untilDate = dayjs(until.split('=')[1], 'YYYYMMDDTHHmmss').toDate();\n          this.repeatEndOn = dayjs(untilDate).toISOString().split('T')[0];\n          this.repeatEndType = 'on';\n        }\n        const recurrenceType = this.getRecurrenceTypeFromRrule(recurrence[0]);\n        this.selectedRecurrenceType = recurrenceType || 'none';\n      } else {\n        this.selectedRecurrenceType = 'none';\n        this.selectedRrule = generateRRule(this.selectedDate, this.selectedRecurrenceType, undefined, undefined, this.selectedTimezone);\n      }\n    } else {\n      this.selectedDate = new Date().toISOString().split('T')[0];\n      const defaultTimes = this.getSuggestedTime();\n      this.selectedStartTime = defaultTimes.startTime;\n      this.selectedEndTime = defaultTimes.endTime;\n      this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n      this.selectedRecurrenceType = 'none';\n      this.selectedRrule = generateRRule(this.selectedDate, this.selectedRecurrenceType, undefined, undefined, this.selectedTimezone);\n    }\n\n    this.recurrenceOptions = this.generateRecurrenceOptions(this.selectedDate, this.selectedTimezone);\n    this.monthRecurrenceOptions = this.getMonthRecurrenceOptions(this.selectedDate, this.selectedTimezone);\n\n    // Trigger initial value change\n    this.handleValueChanged(true);\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-event-timeslot', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  // Utility function to get the ordinal suffix (e.g., 1st, 2nd, 3rd)\n  getOrdinalSuffix(n) {\n    const s = ['th', 'st', 'nd', 'rd'];\n    const v = n % 100;\n    return n + (s[(v - 20) % 10] || s[v] || s[0]);\n  }\n\n  getRecurrenceTypeFromRrule(rrule: string): RecurrenceType | undefined {\n    if (rrule.includes('INTERVAL')) return 'custom';\n    if (rrule.includes('FREQ=DAILY')) return 'daily';\n    if (rrule.includes('FREQ=WEEKLY')) return 'weekly';\n    if (rrule.includes('FREQ=MONTHLY')) return 'monthly';\n    if (rrule.includes('FREQ=YEARLY')) return 'yearly';\n    return undefined;\n  }\n\n  // Function to generate dynamic recurrence options\n  generateRecurrenceOptions(selectedDate: string, timezoneStr: string) {\n    const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n\n    // Parse the date in the given timezone\n    const selectedDay = dayjs.tz(selectedDate, timezoneStr);\n\n    const dayOfWeek = daysOfWeek[selectedDay.day()]; // Get the day of the week (e.g., Thursday)\n\n    // Determine the occurrence of the day in the month (e.g., 1st, 2nd, etc.)\n    const date = selectedDay.date();\n    const occurrenceInMonth = Math.ceil(date / 7); // e.g., 1st Thursday\n\n    // Generate options\n    return [\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.none'), value: 'none' },\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.daily'), value: 'daily' },\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.weekly', { dayOfWeek: dayOfWeek }), value: 'weekly' },\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.monthly', { dayOfMonth: `${this.getOrdinalSuffix(occurrenceInMonth)} ${dayOfWeek}` }), value: 'monthly' },\n      {\n        label: i18next.t('nylasEventTimeslot.recurrenceOptions.yearly', { dateOfMonth: `${selectedDay.format('MMMM D')}` }),\n        value: 'yearly',\n      },\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.custom'), value: 'custom' },\n    ];\n  }\n\n  // Function to generate dynamic month recurrence options\n  getMonthRecurrenceOptions(selectedDate: string, timezoneStr: string) {\n    const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n\n    const selectedDay = dayjs.tz(selectedDate, timezoneStr);\n    const dayOfWeek = daysOfWeek[selectedDay.day()]; // Get the day of the week (e.g., Thursday)\n    const date = selectedDay.date();\n    const occurrenceInMonth = Math.ceil(date / 7);\n\n    return [\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.monthOnDay', { date: date }), value: 'monthly-same-date' },\n      { label: i18next.t('nylasEventTimeslot.recurrenceOptions.monthly', { dayOfMonth: `${this.getOrdinalSuffix(occurrenceInMonth)} ${dayOfWeek}` }), value: 'monthly' },\n    ];\n  }\n\n  // Function to get the default suggested time shown in the time range picker\n  getSuggestedTime() {\n    const now = dayjs();\n\n    // Round current time to the next 30-minute increment\n    const minutes = now.minute();\n    const roundedMinutes = minutes <= 30 ? 30 : 60;\n    const startTime = now.set('minute', roundedMinutes).set('second', 0);\n\n    // Calculate end time (30 minutes after start time)\n    const endTime = startTime.add(30, 'minute');\n\n    // Format the times in \"hh:mma\" format\n    return {\n      startTime: startTime.format('hh:mma'), // e.g., \"03:00pm\"\n      endTime: endTime.format('hh:mma'), // e.g., \"03:30pm\"\n    };\n  }\n\n  getTimezoneLabelHTML(timezone: string) {\n    const offset = getTimezoneOffset(timezone);\n    return (\n      <span\n        class=\"timezone-label\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          width: '-webkit-fill-available',\n        }}\n      >\n        {TIMEZONE_MAP[timezone]}{' '}\n        <span\n          class=\"timezone-offset\"\n          style={{\n            fontSize: '14px',\n            fontWeight: '400',\n            color: 'var(--nylas-base-500)',\n          }}\n        >\n          {offset}\n        </span>\n      </span>\n    );\n  }\n\n  // Function to check if the start time is after the end time (used for validation)\n  isStartTimeAfterEndTime(startTime: string, endTime: string): boolean {\n    // Parse the times using Day.js\n    const start = dayjs(startTime, 'hh:mma');\n    const end = dayjs(endTime, 'hh:mma');\n\n    // Compare start and end times\n    return start.isAfter(end);\n  }\n\n  isStartTimeEqualToEndTime(startTime: string, endTime: string): boolean {\n    const start = dayjs(startTime, 'hh:mma');\n    const end = dayjs(endTime, 'hh:mma');\n    return start.isSame(end);\n  }\n\n  // Function to get the start and end times in Unix timestamp format (used in the valueChanged event)\n  getStartAndEndTimes() {\n    const start_time = dayjs(`${this.selectedDate} ${this.selectedStartTime}`, 'YYYY-MM-DD hh:mma').toDate();\n    const end_time = dayjs(`${this.selectedDate} ${this.selectedEndTime}`, 'YYYY-MM-DD hh:mma').toDate();\n\n    return {\n      start_time: Math.round(start_time.getTime() / 1000),\n      end_time: Math.round(end_time.getTime() / 1000),\n    };\n  }\n\n  // Function to get the custom options for the RRule\n  getCustomOptions() {\n    if (this.selectedRecurrenceType !== 'custom') {\n      return undefined;\n    }\n\n    const repeatFreq = periodMap[this.repeatEveryFrequency];\n\n    return {\n      frequency: repeatFreq,\n      interval: this.repeatEveryInterval,\n      daysOfWeek: this.repeatEveryFrequency === 'week' ? this.repeatOnDays : undefined,\n      monthlySameDate: this.repeatEveryFrequency === 'month' ? this.repeatMonthlySameDate : undefined,\n      end: {\n        type: this.repeatEndType,\n        count: this.repeatEndType === 'after' ? this.repeatEndAfter : undefined,\n        date: this.repeatEndType === 'on' ? this.repeatEndOn : undefined,\n      },\n    };\n  }\n\n  handleValueChanged(noValue: boolean = false) {\n    const customOptions = this.getCustomOptions();\n    this.selectedRrule = generateRRule(this.selectedDate, this.selectedRecurrenceType, this.repeatEndOn, customOptions, this.selectedTimezone);\n    const { start_time, end_time } = this.getStartAndEndTimes();\n    const internalsObj = {\n      when: {\n        start_time: start_time,\n        end_time: end_time,\n        start_timezone: this.selectedTimezone,\n        end_timezone: this.selectedTimezone,\n      },\n      recurrence: this.selectedRrule ? [this.selectedRrule] : [],\n    };\n    this.internals.setFormValue(JSON.stringify(internalsObj), this.name);\n    if (!noValue) {\n      this.valueChanged.emit({\n        value: JSON.stringify(internalsObj),\n        name: this.name,\n      });\n    }\n  }\n\n  // Listeners\n  @Listen('timeChange')\n  setTime(event: CustomEvent<{ key: string; value: string }>) {\n    const { key, value } = event.detail;\n    if (key === 'start-time') {\n      this.selectedStartTime = value;\n    } else if (key === 'end-time') {\n      this.selectedEndTime = value;\n    }\n    const validateStartTimeAfterEndTime = this.isStartTimeAfterEndTime(this.selectedStartTime, this.selectedEndTime);\n    const validateStartTimeEqualToEndTime = this.isStartTimeEqualToEndTime(this.selectedStartTime, this.selectedEndTime);\n    this.timeRangeError = validateStartTimeAfterEndTime || validateStartTimeEqualToEndTime;\n    if (validateStartTimeAfterEndTime) {\n      this.timeWindowFormError.emit({\n        key: this.name,\n        message: 'Invalid time range',\n      });\n      return;\n    } else if (validateStartTimeEqualToEndTime) {\n      this.timeWindowFormError.emit({\n        key: this.name,\n        message: 'Start time and end time cannot be the same',\n      });\n      return;\n    }\n\n    this.handleValueChanged();\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(\n    event: CustomEvent<{\n      value: RecurrenceType | RepeatEndType | string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.selectedTimezone = value;\n    } else if (name === 'recurrence-type') {\n      this.selectedRecurrenceType = value as RecurrenceType;\n    } else if (name === 'month-recurrence-type') {\n      this.repeatMonthlySameDate = value === 'monthly-same-date';\n    } else if (name === 'custom-recurrence-end-type') {\n      this.repeatEndType = value as RepeatEndType;\n    }\n\n    this.handleValueChanged();\n  }\n\n  @Listen('nylasFormInputChanged')\n  nylasFormInputChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    if (name === 'date-time-input') {\n      this.selectedDate = value;\n      this.recurrenceOptions = this.generateRecurrenceOptions(this.selectedDate, this.selectedTimezone);\n      this.monthRecurrenceOptions = this.getMonthRecurrenceOptions(this.selectedDate, this.selectedTimezone);\n    } else if (name === 'recurrence-end-date') {\n      this.repeatEndOn = value;\n    } else if (name === 'custom-recurrence-end-date') {\n      this.repeatEndOn = value;\n    } else if (name === 'recurrence-end-after') {\n      const parsedValue = parseInt(value);\n      if (parsedValue < 1 || isNaN(parsedValue)) {\n        this.timeWindowFormError.emit({\n          key: this.name,\n          message: i18next.t('fixFormErrors'),\n        });\n        return;\n      }\n      this.repeatEndAfter = parsedValue;\n    }\n\n    this.handleValueChanged();\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(event: CustomEvent<{ number: number; period: 'day' | 'week' | 'month' | 'year' }>) {\n    const { number, period } = event.detail;\n    this.repeatEveryInterval = number;\n    this.repeatEveryFrequency = period;\n\n    if (period === 'month') {\n      this.monthRecurrenceOptions = this.getMonthRecurrenceOptions(this.selectedDate, this.selectedTimezone);\n    }\n\n    this.handleValueChanged();\n  }\n\n  @RegisterComponent<NylasEventTimeslot, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-timeslot',\n    stateToProps: new Map([['schedulerConfig.selectedLanguage', 'selectedLanguage']]),\n    eventToProps: {\n      valueChanged: async (event: CustomEvent<{ value: string; name: string }>, _nylasConnector: NylasSchedulerConfigConnector) => {\n        debug('nylas-event-timeslot', 'valueChanged', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const defaultRecurrenceOption = this.recurrenceOptions.find(option => option.value === this.selectedRecurrenceType);\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      labelHTML: this.getTimezoneLabelHTML(key),\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n    const selectedTimezoneOption = timezoneOptions.find(i => i.value === this.selectedTimezone);\n    const endOptions = [\n      { label: i18next.t('nylasEventTimeslot.customRecurrence.endsOptions.never'), value: 'never' },\n      { label: i18next.t('nylasEventTimeslot.customRecurrence.endsOptions.on'), value: 'on' },\n      { label: i18next.t('nylasEventTimeslot.customRecurrence.endsOptions.after'), value: 'after' },\n    ];\n    const defaultEndOnDate = dayjs(this.selectedDate).add(1, 'year').toISOString().split('T')[0];\n    const defaultEndAfter = this.repeatEveryFrequency === 'week' ? 4 : this.repeatEveryFrequency === 'month' ? 12 : 5;\n    this.repeatEndOn = this.repeatEndOn || defaultEndOnDate;\n    this.repeatEndAfter = this.repeatEndAfter || defaultEndAfter;\n\n    return (\n      <Host>\n        <div class=\"nylas-event-timeslot\" part=\"netimeslot\">\n          <label htmlFor=\"date-time-input\">{i18next.t('nylasEventTimeslot.dateTimeLabel')}</label>\n          <div class=\"date-time-input\" part=\"netimeslot__date-time-input\">\n            <div class=\"date-time-picker\" part=\"netimeslot__date-time-picker\">\n              <nylas-date-component name=\"date-time-input\" defaultValue={this.selectedDate} id={'date-time-input'} required={true}></nylas-date-component>\n              <div class=\"time-range\" part=\"netimeslot__time-range\">\n                <nylas-time-window-picker\n                  id={'start-time'}\n                  hasError={this.timeRangeError}\n                  time={this.selectedStartTime}\n                  language={this.selectedLanguage}\n                  name={'start-time'}\n                  key={'start-time'}\n                  exportparts=\"time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times\"\n                />\n                <span>&ndash;</span>\n                <nylas-time-window-picker\n                  id={'end-time'}\n                  hasError={this.timeRangeError}\n                  time={this.selectedEndTime}\n                  language={this.selectedLanguage}\n                  name={'end-time'}\n                  key={'end-time'}\n                  minimumStartTime={this.selectedStartTime}\n                  exportparts=\"time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times\"\n                />\n              </div>\n              {selectedTimezoneOption?.label && (\n                <select-dropdown\n                  name=\"timezone\"\n                  exportparts=\"sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content\"\n                  options={timezoneOptions}\n                  withChevron={false}\n                  defaultSelectedOption={selectedTimezoneOption}\n                >\n                  <span slot=\"select-icon\">\n                    <globe-icon width=\"20\" height=\"20\" />\n                  </span>\n                </select-dropdown>\n              )}\n            </div>\n            <div class=\"recurrence-options\" part=\"netimeslot__recurrence-options\">\n              {defaultRecurrenceOption && defaultRecurrenceOption?.label && (\n                <div class=\"recurrence-type\" part=\"netimeslot__recurrence-type\">\n                  <label htmlFor=\"recurrence-type\">{i18next.t('nylasEventTimeslot.recurrenceLabel')}</label>\n                  <select-dropdown\n                    withSearch={false}\n                    id=\"recurrence-type\"\n                    name=\"recurrence-type\"\n                    options={this.recurrenceOptions}\n                    defaultSelectedOption={defaultRecurrenceOption}\n                    exportparts=\"sd_dropdown: netimeslot__dropdown, sd_dropdown-button: netimeslot__dropdown-button, sd_dropdown-content: netimeslot__dropdown-content\"\n                  ></select-dropdown>\n                </div>\n              )}\n              {this.selectedRecurrenceType !== 'custom' && this.selectedRecurrenceType !== 'none' && (\n                <div class=\"recurrence-end\" part=\"netimeslot__recurrence-end\">\n                  <label>{i18next.t('nylasEventTimeslot.endDate')}</label>\n                  <nylas-date-component\n                    name=\"recurrence-end-date\"\n                    defaultValue={this.repeatEndOn || defaultEndOnDate}\n                    id={'recurrence-end-date'}\n                    required={true}\n                  ></nylas-date-component>\n                </div>\n              )}\n\n              {this.selectedRecurrenceType === 'custom' && (\n                <div class=\"custom-recurrence-time-period\" part=\"netimeslot__custom-recurrence\">\n                  <label htmlFor=\"\">{i18next.t('nylasEventTimeslot.customRecurrence.repeatEvery')}</label>\n                  <time-period-selector\n                    id=\"custom-recurrence-time-period\"\n                    exportparts=\"tps__number-dropdown: netimeslot__number-dropdown, tps__number-dropdown-button: netimeslot__number-dropdown-button, tps__number-dropdown-content: netimeslot__number-dropdown-content, tps__period-dropdown: netimeslot__period-dropdown, tps__period-dropdown-button: netimeslot__period-dropdown-button, tps__period-dropdown-content: netimeslot__period-dropdown-content\"\n                    timePeriods={[\n                      { value: 'day', label: i18next.t('timePeriod', { context: 'day' }) },\n                      { value: 'week', label: i18next.t('timePeriod', { context: 'week' }) },\n                      { value: 'month', label: i18next.t('timePeriod', { context: 'month' }) },\n                      { value: 'year', label: i18next.t('timePeriod', { context: 'year' }) },\n                    ]}\n                    defaultSelectedNumber={this.repeatEveryInterval}\n                    defaultSelectedPeriod={this.repeatEveryFrequency}\n                  />\n                </div>\n              )}\n              <div class=\"repeat-on\">\n                {this.selectedRecurrenceType === 'custom' && this.repeatEveryFrequency === 'week' && (\n                  <div class=\"days\">\n                    <label>{i18next.t('nylasEventTimeslot.customRecurrence.repeatOn')}</label>\n                    <div class=\"buttons\">\n                      {[\n                        { label: 'S', value: 'SU', title: 'Sunday' },\n                        { label: 'M', value: 'MO', title: 'Monday' },\n                        { label: 'T', value: 'TU', title: 'Tuesday' },\n                        { label: 'W', value: 'WE', title: 'Wednesday' },\n                        { label: 'T', value: 'TH', title: 'Thursday' },\n                        { label: 'F', value: 'FR', title: 'Friday' },\n                        { label: 'S', value: 'SA', title: 'Saturday' },\n                      ].map(day => (\n                        <button\n                          class={{ selected: this.repeatOnDays.includes(day.value) }}\n                          title={day.title}\n                          onClick={() => {\n                            this.repeatOnDays = this.repeatOnDays.includes(day.value) ? this.repeatOnDays.filter(d => d !== day.value) : [...this.repeatOnDays, day.value];\n                            this.handleValueChanged();\n                          }}\n                        >\n                          {day.label}\n                        </button>\n                      ))}\n                    </div>\n                  </div>\n                )}\n                {this.selectedRecurrenceType === 'custom' && this.repeatEveryFrequency === 'month' && (\n                  <div class=\"month-recurrence\">\n                    <span></span>\n                    <select-dropdown\n                      withSearch={false}\n                      id=\"month-recurrence-type\"\n                      name=\"month-recurrence-type\"\n                      options={this.monthRecurrenceOptions}\n                      defaultSelectedOption={this.repeatMonthlySameDate ? this.monthRecurrenceOptions[0] : this.monthRecurrenceOptions[1]}\n                      exportparts=\"sd_dropdown: netimeslot__dropdown, sd_dropdown-button: netimeslot__dropdown-button, sd_dropdown-content: netimeslot__dropdown-content\"\n                    ></select-dropdown>\n                  </div>\n                )}\n                <div class=\"custom-recurrence\">\n                  {this.selectedRecurrenceType === 'custom' && (\n                    <div class=\"custom-recurrence-ends\">\n                      <label htmlFor=\"recurrence-type\">{i18next.t('nylasEventTimeslot.customRecurrence.ends')}</label>\n                      <select-dropdown\n                        withSearch={false}\n                        id=\"custom-recurrence-end-type\"\n                        name=\"custom-recurrence-end-type\"\n                        options={endOptions}\n                        defaultSelectedOption={endOptions.find(option => option.value === this.repeatEndType)}\n                        exportparts=\"sd_dropdown: netimeslot__dropdown, sd_dropdown-button: netimeslot__dropdown-button, sd_dropdown-content: netimeslot__dropdown-content\"\n                      ></select-dropdown>\n                    </div>\n                  )}\n                  {this.selectedRecurrenceType === 'custom' && this.repeatEndType === 'on' && (\n                    <div>\n                      <nylas-date-component\n                        name=\"custom-recurrence-end-date\"\n                        defaultValue={this.repeatEndOn || defaultEndOnDate}\n                        id={'custom-recurrence-end-date'}\n                        required={true}\n                      ></nylas-date-component>\n                    </div>\n                  )}\n                  {this.selectedRecurrenceType === 'custom' && this.repeatEndType === 'after' && (\n                    <div class=\"custom-recurrence-end-after\">\n                      <input-component\n                        name=\"recurrence-end-after\"\n                        id=\"recurrence-end-after\"\n                        type=\"number\"\n                        minValue={1}\n                        defaultValue={defaultEndAfter.toString()}\n                        exportparts=\"ic_input: netimeslot__input-textfield\"\n                      />\n                      <span>{i18next.t('nylasEventTimeslot.customRecurrence.occurrences')}</span>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nylas-web-elements/nylas-event-title.entry.js

@@ -1,2 +1,2 @@
-import{r as e,i as t,h as n,a as s,e as l}from"./index-3e0d6890.js";import{R as o}from"./register-component-3d439a88.js";import{a as i,i as a,J as r,l as c,K as d}from"./utils-3fdf2c83.js";import{f}from"./constants-794fe173.js";import"./utc-290d564f.js";const h=':host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--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}.nylas-event-title{display:flex;flex-direction:column;gap:4px;position:relative;text-align:left}.nylas-event-title div.title{padding:12px 16px;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);overflow:scroll;white-space:nowrap;scrollbar-width:thin}.nylas-event-title div.title::-webkit-scrollbar{width:6px;height:6px}.nylas-event-title div.title.error{border-color:var(--nylas-error);border-width:2px;outline:none}.nylas-event-title input{padding:12px 16px;border-width:1;border-radius:8px;border:1px solid var(--nylas-base-200)}.nylas-event-title span.help-text{display:inline-block;gap:4px;align-items:center;color:var(--nylas-base-500);font-size:14px;font-style:normal;font-weight:400;line-height:21px;position:relative}.nylas-event-title span.help-text span.label-icon{display:inline-block}.nylas-event-title span.help-text span.label-icon tooltip-component::part(tc__container){position:unset}.nylas-event-title span.help-text span.label-icon tooltip-component::part(tc__content){position:absolute;top:4px;left:50%;transform:translateX(-50%)}.nylas-event-title span.error-message{color:var(--nylas-error)}.nylas-event-title label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:16px;font-style:normal;font-weight:400;line-height:150%;}.nylas-event-title label span.required{color:var(--nylas-error, #cc4841)}.nylas-event-title label span.label-icon{margin-left:4px}.nylas-event-title label span.label-icon tooltip-component{display:flex}.highlighted-tag{background-color:var(--nylas-base-200);border-radius:var(--nylas-border-radius);padding:5px;margin-left:4px}.token-options{display:block;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:80px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}@media screen and (max-width: 768px){.token-options{right:0;width:325px;max-width:unset}}.token-options ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px;margin:0}.token-options ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.token-options ul li .token-label{display:flex;flex-direction:column;font-weight:400}.token-options ul li .token-label .token{color:var(--nylas-abse-900);font-size:16px;line-height:24px}.token-options ul li .token-label .description{color:var(--nylas-base-600);font-size:14px;line-height:21px}.token-options ul li:hover,.token-options ul li:focus,.token-options ul li:active,.token-options ul li.active{background-color:var(--nylas-base-100)}.token-options ul li:hover .token-label .token,.token-options ul li:focus .token-label .token,.token-options ul li:active .token-label .token,.token-options ul li.active .token-label .token{color:var(--nylas-primary)}.token-options .selected{background-color:var(--nylas-base-100)}';var p=undefined&&undefined.__decorate||function(e,t,n,s){var l=arguments.length,o=l<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,n):s,i;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,t,n,s);else for(var a=e.length-1;a>=0;a--)if(i=e[a])o=(l<3?i(o):l>3?i(t,n,o):i(t,n))||o;return l>3&&o&&Object.defineProperty(t,n,o),o};var y=undefined&&undefined.__metadata||function(e,t){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(e,t)};const u=class{constructor(n){e(this,n);this.valueChanged=t(this,"valueChanged",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.selectedConfiguration=undefined;this.eventTitle=this.selectedConfiguration?.event_booking?.title;this.name="title";this.selectedLanguage=undefined;this.showTokens=false;this.availableTokens=f.map((e=>({label:e.token,value:e.value,labelHTML:e})));this.filteredTokens=this.availableTokens;this.ariaActivedescendant="";this.currentWord={$value:"",fullText:"",index:-1,focusOffset:-1};this.validationError="";this.configEventTitle="";this.additionalFieldTokens=[]}elementNameChangedHandler(e){i("[nylas-event-title]","elementNameChangedHandler",e);this.host.setAttribute("name",e)}ariaActivedescendantChangedHandler(e){i("[nylas-event-title]","ariaActivedescendantChangedHandler",e);if(e!==""){const t=this.host.shadowRoot?.getElementById(e);t?.classList.add("active")}else{const e=this.host.shadowRoot?.querySelectorAll(".token-options li.active");e?.forEach((e=>e.classList.remove("active")))}}configChangedHandler(e){const t=e?.event_booking?.title;const n=e?.scheduler?.additional_fields||{};const s=Object.keys(n)||[];const l=s.map((e=>({token:`$${e}`,value:`\${${e}}`,description:n[e].label||""})));this.additionalFieldTokens=[...l];this.availableTokens=[...f,...l].map((e=>({label:e.token,value:e.value,labelHTML:e})));this.filteredTokens=[...this.availableTokens];if(t){this.configEventTitle=t;this.updateEventTitleFromProp(t)}}selectedLanguageChangedHandler(e,t){if(e===t)return;a.changeLanguage(e);const n={$invitee:"invitee",$invitee_email:"inviteeEmail",$duration:"duration"};this.availableTokens=this.availableTokens.map((e=>{if(n[e.label]){e.labelHTML.description=a.t(`nylasEventTitle.eventTitleTokenDescription.${n[e.label]}`)}return e}));this.filteredTokens=[...this.availableTokens]}connectedCallback(){i("[nylas-event-title]","connectedCallback")}componentWillLoad(){i("[nylas-event-title]","componentWillLoad");this.host.setAttribute("name",this.name)}componentDidLoad(){i("[nylas-event-title]","componentDidLoad");let e=this.eventTitle||this.configEventTitle;if(this.selectedConfiguration?.event_booking?.title){e=this.selectedConfiguration?.event_booking?.title}if(e){this.updateEventTitleFromProp(e);this.updateEventTitle(e,true)}}disconnectedCallback(){i("[nylas-event-title]","disconnectedCallback")}formSubmittedHandler(e){i("[nylas-event-title]","formSubmittedHandler",e);if(!this.internals?.validity?.valid){this.validationError="eventTitleRequired"}else{this.validationError=""}}valueChangedHandler(e){const{name:t,value:n}=e.detail;const s=n||{};if(t==="additional-fields"){const e=Object.keys(s)||[];const t=e.map((e=>({token:`$${e}`,value:`\${${e}}`,description:s[e].label||""})));this.additionalFieldTokens=[...t];this.availableTokens=[...f,...t].map((e=>({label:e.token,value:e.value,labelHTML:e})));this.filteredTokens=[...this.availableTokens]}}updateEventTitleFromProp(e){i("[nylas-event-title]","eventTitleChangedHandler",e);const t=e||this.configEventTitle;if(this.titleRef){this.titleRef.innerHTML=this.highlightTokens(t);if(typeof this.internals.setValidity==="function"){if(!t||t===""){this.titleRef.focus();this.internals?.setValidity({customError:true},`Event title is required`,this.titleRef)}else{this.internals?.setValidity({customError:false});this.isInternalsAvailable&&this.internals?.setFormValue(t,this.name)}}}}highlightTokens(e){let t=e;[...f,...this.additionalFieldTokens].forEach((e=>{const n=e.value;const s=new RegExp(`(\\${n})(?!\\w)`,"g");t=t?.replace(s,'<span class="highlighted-tag">$1</span>')||""}));return t}getCurrentSelectionForBrowser(){const e=(e,t,n,s)=>{const l=e.replace(/[\u200B-\u200D\uFEFF]/g,"");const o=l.lastIndexOf("$");const i=l.substring(o).split(" ")[0];return{focusOffset:t,dollarIndex:o,lastWord:i,currentText:l,node:n,allSelected:s}};const t=e=>e.anchorOffset===0&&e.focusOffset===e.focusNode?.nodeValue?.length;const n=r();switch(n){case"Chrome":{const n=this.host.shadowRoot?.getSelection();const s=n?.focusNode;const l=s?.nodeValue||"";const o=n&&t(n);return e(l,n?.focusOffset||-1,s,o)}case"Firefox":{const n=document.getSelection();const s=n?.anchorNode?.nodeValue||"";const l=n&&t(n);return e(s,n?.focusOffset||-1,n?.anchorNode,l)}case"Safari":{const n=window.getSelection();const s=n?.getComposedRanges(this.host.shadowRoot)[0];const l=s?.startContainer?.nodeValue||"";const o=n&&t(n);return e(l,s?.endOffset||-1,s?.startContainer,o)}default:{console.warn("Browser not supported");return null}}}handleChange(e){let t=e.target.textContent||"";t=c(t);const n=this.getCurrentSelectionForBrowser();if(!n){this.updateEventTitle(t);this.resetDropdown();return}const{focusOffset:s,dollarIndex:l,lastWord:o,currentText:i}=n;if(l===-1||s<l){this.updateEventTitle(t);this.resetDropdown();return}if(o.startsWith("$")){this.showTokens=true;this.currentWord={$value:o,fullText:i,index:l,focusOffset:s};this.populateSuggestionsDropdown(o)}else{this.resetDropdown()}this.updateEventTitle(t)}handleInputKeyDown(e){const t=this.getCurrentSelectionForBrowser();if(t?.allSelected&&!d(e)){this.titleRef.innerHTML=""}if(e.key==="Enter"){e.preventDefault();const t=this.host.shadowRoot?.getElementById(this.ariaActivedescendant);if(t){t.click();this.ariaActivedescendant=""}}else if(e.key==="ArrowDown"){e.preventDefault();const t=this.host.shadowRoot?.getElementById(this.ariaActivedescendant);if(t){const e=t.nextElementSibling;if(e){this.ariaActivedescendant=e.id}else{this.ariaActivedescendant=this.filteredTokens[0].label}}else{this.ariaActivedescendant=this.filteredTokens[0].label}}else if(e.key==="ArrowUp"){e.preventDefault();const t=this.host.shadowRoot?.getElementById(this.ariaActivedescendant);if(t){const e=t.previousElementSibling;if(e){this.ariaActivedescendant=e.id}else{this.ariaActivedescendant=this.filteredTokens[this.filteredTokens.length-1].label}}else{this.ariaActivedescendant=this.filteredTokens[this.filteredTokens.length-1].label}}else if(e.key==="Escape"){e.preventDefault();this.resetDropdown()}else if(e.key==="Backspace"||e.key==="Delete"){const n=t?.node?.parentNode;if(t?.currentText.startsWith("${")&&n&&n.nodeName==="SPAN"){e.preventDefault();n.removeChild(t.node);n.remove();this.resetDropdown();this.updateEventTitle(this.titleRef?.textContent||"")}if(this.titleRef.textContent===""||t?.allSelected){this.titleRef.innerHTML="";this.updateEventTitle("")}}}selectOption(e,t){e.preventDefault();const n=this.currentWord.fullText;const s=this.currentWord.$value;let l=this.titleRef.firstChild;let o=null;while(l){if(l.nodeType===3){const e=l.textContent?.replace(/[\u200B-\u200D\uFEFF]/g,"")||"";const t=n.replace(/[\u200B-\u200D\uFEFF]/g,"");if(e.includes(t)){o=l;break}}l=l.nextSibling}if(!o){return}const i=o.textContent||"";const a=i.indexOf(s);const r=i.substring(0,a);const c=i.substring(a+s.length);const d=document.createTextNode(r);const f=document.createRange();const h=document.createElement("span");h.classList.add("highlighted-tag");h.textContent=`${t.value}`;const p=document.createTextNode(c);if(c!==""){o.replaceWith(d,h,p);f.setStart(p,1)}else{const e=document.createTextNode("​");o.replaceWith(d,h,e);f.setStart(e,1)}this.resetDropdown();this.titleRef.focus();const y=window.getSelection();f.collapse(true);y?.removeAllRanges();y?.addRange(f);this.updateEventTitle(this.titleRef.textContent||"")}populateSuggestionsDropdown(e=""){this.filteredTokens=this.availableTokens.filter((t=>t.label.startsWith(e.toString())||t.value.startsWith(e.toString())));if(this.filteredTokens.length>0){this.ariaActivedescendant=this.filteredTokens[0].label}}get isInternalsAvailable(){return typeof this.internals!=="undefined"&&typeof this.internals.setValidity==="function"&&typeof this.internals.setFormValue==="function"}updateEventTitle(e,t=false){const n=e.replace(/ +/g," ");if(n===""||/^[\s]*$/.test(n)){this.validationError="eventTitleRequired";this.isInternalsAvailable&&this.internals?.setValidity({customError:true},`Event title is required`,this.titleRef)}else{this.validationError="";this.isInternalsAvailable&&this.internals?.setValidity({customError:false})}this.isInternalsAvailable&&this.internals?.setFormValue(n,this.name);if(!t){this.valueChanged.emit({value:n,name:this.name})}}resetDropdown(){this.showTokens=false;this.ariaActivedescendant=""}getLabelHTML(e){return n("div",{class:"token-label"},n("span",{class:"token"},e.token),n("span",{class:"description"},e.description))}render(){return n(s,{key:"77727ef052ef96fd01f44629fef5529637ab9512"},n("div",{key:"c155a7c80a37361d3764c87307603c9224a1acf3",class:"nylas-event-title",part:"net"},n("label",{key:"167ce5894b815c0ba0af599c4d25567a65e7fe6a",htmlFor:"title"},a.t("nylasEventTitle.headerTitle"),n("span",{key:"f6ef51b14e683622ad43979bcea199c58d78fd29",class:"required"},"*")),n("div",{key:"2f4039d517d45b52422197766ba9db0b09a5f903",class:{title:true,error:this.validationError!==""},part:"net__title",ref:e=>this.titleRef=e,contentEditable:"true",onInput:e=>this.handleChange(e),onKeyDown:e=>this.handleInputKeyDown(e)}),this.showTokens&&this.filteredTokens?.length>0&&n("div",{class:"token-options",part:"net__dropdown-content"},n("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant},this.filteredTokens.map((e=>n("li",{tabindex:"0",key:e.label,id:e.label,class:{active:this.ariaActivedescendant===e.label},onClick:t=>this.selectOption(t,e),role:"option"},this.getLabelHTML(e.labelHTML)))))),n("span",{key:"336b58f03f6f13957ab0b62f2f98e95e2980bc13",class:"help-text"},a.t("nylasEventTitle.helpText",{context:"start",field:a.t("nylasEventTitle.title")})," ",n("code",{key:"7069beaf38ab7a2a67f6de371b2544d45b26146b"},"$")," ",a.t("nylasEventTitle.helpText",{context:"end"}),n("span",{key:"6b588508b38540c7d072f9e3c01c8e555669af2c",class:"label-icon"},n("tooltip-component",{key:"bbd2bcff01569fb91c87d78d36eb3c5b0163d73a"},n("info-icon",{key:"0cbf47b89468838847282e729db536f8df63098c",slot:"tooltip-icon"}),n("span",{key:"cb5a50ecd92b837fead8d1e08ceff2387173ea60",slot:"tooltip-content"},a.t("nylasEventTitle.tooltip.desc")," ",n("code",{key:"22c5e150dfe201cc0d7bd3dd995db94ebd759f31"},"${invitee}"))))),this.validationError!=""&&n("span",{class:"error-message"},a.t(`nylasEventTitle.${this.validationError}`))))}static get formAssociated(){return true}get host(){return l(this)}static get watchers(){return{name:["elementNameChangedHandler"],ariaActivedescendant:["ariaActivedescendantChangedHandler"],selectedConfiguration:["configChangedHandler"],selectedLanguage:["selectedLanguageChangedHandler"]}}};p([o({name:"nylas-event-title",stateToProps:new Map([["schedulerConfig.selectedConfiguration","selectedConfiguration"],["schedulerConfig.selectedLanguage","selectedLanguage"]]),eventToProps:{},fireRegisterEvent:true}),y("design:type",Function),y("design:paramtypes",[]),y("design:returntype",void 0)],u.prototype,"render",null);u.style=h;export{u as nylas_event_title};
+import{r as e,i as t,h as n,a as s,e as l}from"./index-3e0d6890.js";import{R as o}from"./register-component-8b5587d5.js";import{a,i,J as r,l as c,K as d}from"./utils-ac8fef1e.js";import{f}from"./constants-794fe173.js";import"./utc-290d564f.js";const h=':host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--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}.nylas-event-title{display:flex;flex-direction:column;gap:4px;position:relative;text-align:left}.nylas-event-title div.title{padding:12px 16px;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);overflow:scroll;white-space:nowrap;scrollbar-width:thin}.nylas-event-title div.title::-webkit-scrollbar{width:6px;height:6px}.nylas-event-title div.title.error{border-color:var(--nylas-error);border-width:2px;outline:none}.nylas-event-title input{padding:12px 16px;border-width:1;border-radius:8px;border:1px solid var(--nylas-base-200)}.nylas-event-title span.help-text{display:inline-block;gap:4px;align-items:center;color:var(--nylas-base-500);font-size:14px;font-style:normal;font-weight:400;line-height:21px;position:relative}.nylas-event-title span.help-text span.label-icon{display:inline-block}.nylas-event-title span.help-text span.label-icon tooltip-component::part(tc__container){position:unset}.nylas-event-title span.help-text span.label-icon tooltip-component::part(tc__content){position:absolute;top:4px;left:50%;transform:translateX(-50%)}.nylas-event-title span.error-message{color:var(--nylas-error)}.nylas-event-title label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:16px;font-style:normal;font-weight:400;line-height:150%;}.nylas-event-title label span.required{color:var(--nylas-error, #cc4841)}.nylas-event-title label span.label-icon{margin-left:4px}.nylas-event-title label span.label-icon tooltip-component{display:flex}.highlighted-tag{background-color:var(--nylas-base-200);border-radius:var(--nylas-border-radius);padding:5px;margin-left:4px}.token-options{display:block;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:80px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}@media screen and (max-width: 768px){.token-options{right:0;width:325px;max-width:unset}}.token-options ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px;margin:0}.token-options ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.token-options ul li .token-label{display:flex;flex-direction:column;font-weight:400}.token-options ul li .token-label .token{color:var(--nylas-abse-900);font-size:16px;line-height:24px}.token-options ul li .token-label .description{color:var(--nylas-base-600);font-size:14px;line-height:21px}.token-options ul li:hover,.token-options ul li:focus,.token-options ul li:active,.token-options ul li.active{background-color:var(--nylas-base-100)}.token-options ul li:hover .token-label .token,.token-options ul li:focus .token-label .token,.token-options ul li:active .token-label .token,.token-options ul li.active .token-label .token{color:var(--nylas-primary)}.token-options .selected{background-color:var(--nylas-base-100)}';var p=undefined&&undefined.__decorate||function(e,t,n,s){var l=arguments.length,o=l<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,n):s,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,t,n,s);else for(var i=e.length-1;i>=0;i--)if(a=e[i])o=(l<3?a(o):l>3?a(t,n,o):a(t,n))||o;return l>3&&o&&Object.defineProperty(t,n,o),o};var y=undefined&&undefined.__metadata||function(e,t){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(e,t)};const b=class{constructor(n){e(this,n);this.valueChanged=t(this,"valueChanged",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.selectedConfiguration=undefined;this.eventTitle=this.selectedConfiguration?.event_booking?.title;this.name="title";this.selectedLanguage=undefined;this.showTokens=false;this.availableTokens=f.map((e=>({label:e.token,value:e.value,labelHTML:e})));this.filteredTokens=this.availableTokens;this.ariaActivedescendant="";this.currentWord={$value:"",fullText:"",index:-1,focusOffset:-1};this.validationError="";this.configEventTitle="";this.additionalFieldTokens=[]}elementNameChangedHandler(e){a("[nylas-event-title]","elementNameChangedHandler",e);this.host.setAttribute("name",e)}ariaActivedescendantChangedHandler(e){a("[nylas-event-title]","ariaActivedescendantChangedHandler",e);if(e!==""){const t=this.host.shadowRoot?.getElementById(e);t?.classList.add("active")}else{const e=this.host.shadowRoot?.querySelectorAll(".token-options li.active");e?.forEach((e=>e.classList.remove("active")))}}configChangedHandler(e){const t=e?.event_booking?.title;const n=e?.scheduler?.additional_fields||{};const s=Object.keys(n)||[];const l=s.map((e=>({token:`$${e}`,value:`\${${e}}`,description:n[e].label||""})));this.additionalFieldTokens=[...l];this.availableTokens=[...f,...l].map((e=>({label:e.token,value:e.value,labelHTML:e})));this.filteredTokens=[...this.availableTokens];if(t){this.configEventTitle=t;this.updateEventTitleFromProp(t)}}selectedLanguageChangedHandler(e,t){if(e===t)return;i.changeLanguage(e);const n={$invitee:"invitee",$invitee_email:"inviteeEmail",$duration:"duration"};this.availableTokens=this.availableTokens.map((e=>{if(n[e.label]){e.labelHTML.description=i.t(`nylasEventTitle.eventTitleTokenDescription.${n[e.label]}`)}return e}));this.filteredTokens=[...this.availableTokens]}connectedCallback(){a("[nylas-event-title]","connectedCallback")}componentWillLoad(){a("[nylas-event-title]","componentWillLoad");this.host.setAttribute("name",this.name)}componentDidLoad(){a("[nylas-event-title]","componentDidLoad");let e=this.eventTitle||this.configEventTitle;if(this.selectedConfiguration?.event_booking?.title){e=this.selectedConfiguration?.event_booking?.title}if(e){this.updateEventTitleFromProp(e);this.updateEventTitle(e,true)}}disconnectedCallback(){a("[nylas-event-title]","disconnectedCallback")}formSubmittedHandler(e){a("[nylas-event-title]","formSubmittedHandler",e);if(!this.internals?.validity?.valid){this.validationError="eventTitleRequired"}else{this.validationError=""}}valueChangedHandler(e){const{name:t,value:n}=e.detail;if(t==="additional-fields"){const e=JSON.parse(n.toString());const t=Object.keys(e)||[];const s=t.map((t=>({token:`$${t}`,value:`\${${t}}`,description:e[t].label||""})));this.additionalFieldTokens=[...s];this.availableTokens=[...f,...s].map((e=>({label:e.token,value:e.value,labelHTML:e})));this.filteredTokens=[...this.availableTokens]}}updateEventTitleFromProp(e){a("[nylas-event-title]","eventTitleChangedHandler",e);const t=e||this.configEventTitle;if(this.titleRef){this.titleRef.innerHTML=this.highlightTokens(t);if(typeof this.internals.setValidity==="function"){if(!t||t===""){this.titleRef.focus();this.internals?.setValidity({customError:true},`Event title is required`,this.titleRef)}else{this.internals?.setValidity({customError:false});this.isInternalsAvailable&&this.internals?.setFormValue(t,this.name)}}}}highlightTokens(e){let t=e;[...f,...this.additionalFieldTokens].forEach((e=>{const n=e.value;const s=new RegExp(`(\\${n})(?!\\w)`,"g");t=t?.replace(s,'<span class="highlighted-tag">$1</span>')||""}));return t}getCurrentSelectionForBrowser(){const e=(e,t,n,s)=>{const l=e.replace(/[\u200B-\u200D\uFEFF]/g,"");const o=l.lastIndexOf("$");const a=l.substring(o).split(" ")[0];return{focusOffset:t,dollarIndex:o,lastWord:a,currentText:l,node:n,allSelected:s}};const t=e=>e.anchorOffset===0&&e.focusOffset===e.focusNode?.nodeValue?.length;const n=r();switch(n){case"Chrome":{const n=this.host.shadowRoot?.getSelection();const s=n?.focusNode;const l=s?.nodeValue||"";const o=n&&t(n);return e(l,n?.focusOffset||-1,s,o)}case"Firefox":{const n=document.getSelection();const s=n?.anchorNode?.nodeValue||"";const l=n&&t(n);return e(s,n?.focusOffset||-1,n?.anchorNode,l)}case"Safari":{const n=window.getSelection();const s=n?.getComposedRanges(this.host.shadowRoot)[0];const l=s?.startContainer?.nodeValue||"";const o=n&&t(n);return e(l,s?.endOffset||-1,s?.startContainer,o)}default:{console.warn("Browser not supported");return null}}}handleChange(e){let t=e.target.textContent||"";t=c(t);const n=this.getCurrentSelectionForBrowser();if(!n){this.updateEventTitle(t);this.resetDropdown();return}const{focusOffset:s,dollarIndex:l,lastWord:o,currentText:a}=n;if(l===-1||s<l){this.updateEventTitle(t);this.resetDropdown();return}if(o.startsWith("$")){this.showTokens=true;this.currentWord={$value:o,fullText:a,index:l,focusOffset:s};this.populateSuggestionsDropdown(o)}else{this.resetDropdown()}this.updateEventTitle(t)}handleInputKeyDown(e){const t=this.getCurrentSelectionForBrowser();if(t?.allSelected&&!d(e)){this.titleRef.innerHTML=""}if(e.key==="Enter"){e.preventDefault();const t=this.host.shadowRoot?.getElementById(this.ariaActivedescendant);if(t){t.click();this.ariaActivedescendant=""}}else if(e.key==="ArrowDown"){e.preventDefault();const t=this.host.shadowRoot?.getElementById(this.ariaActivedescendant);if(t){const e=t.nextElementSibling;if(e){this.ariaActivedescendant=e.id}else{this.ariaActivedescendant=this.filteredTokens[0].label}}else{this.ariaActivedescendant=this.filteredTokens[0].label}}else if(e.key==="ArrowUp"){e.preventDefault();const t=this.host.shadowRoot?.getElementById(this.ariaActivedescendant);if(t){const e=t.previousElementSibling;if(e){this.ariaActivedescendant=e.id}else{this.ariaActivedescendant=this.filteredTokens[this.filteredTokens.length-1].label}}else{this.ariaActivedescendant=this.filteredTokens[this.filteredTokens.length-1].label}}else if(e.key==="Escape"){e.preventDefault();this.resetDropdown()}else if(e.key==="Backspace"||e.key==="Delete"){const n=t?.node?.parentNode;if(t?.currentText.startsWith("${")&&n&&n.nodeName==="SPAN"){e.preventDefault();n.removeChild(t.node);n.remove();this.resetDropdown();this.updateEventTitle(this.titleRef?.textContent||"")}if(this.titleRef.textContent===""||t?.allSelected){this.titleRef.innerHTML="";this.updateEventTitle("")}}}selectOption(e,t){e.preventDefault();const n=this.currentWord.fullText;const s=this.currentWord.$value;let l=this.titleRef.firstChild;let o=null;while(l){if(l.nodeType===3){const e=l.textContent?.replace(/[\u200B-\u200D\uFEFF]/g,"")||"";const t=n.replace(/[\u200B-\u200D\uFEFF]/g,"");if(e.includes(t)){o=l;break}}l=l.nextSibling}if(!o){return}const a=o.textContent||"";const i=a.indexOf(s);const r=a.substring(0,i);const c=a.substring(i+s.length);const d=document.createTextNode(r);const f=document.createRange();const h=document.createElement("span");h.classList.add("highlighted-tag");h.textContent=`${t.value}`;const p=document.createTextNode(c);if(c!==""){o.replaceWith(d,h,p);f.setStart(p,1)}else{const e=document.createTextNode("​");o.replaceWith(d,h,e);f.setStart(e,1)}this.resetDropdown();this.titleRef.focus();const y=window.getSelection();f.collapse(true);y?.removeAllRanges();y?.addRange(f);this.updateEventTitle(this.titleRef.textContent||"")}populateSuggestionsDropdown(e=""){this.filteredTokens=this.availableTokens.filter((t=>t.label.startsWith(e.toString())||t.value.startsWith(e.toString())));if(this.filteredTokens.length>0){this.ariaActivedescendant=this.filteredTokens[0].label}}get isInternalsAvailable(){return typeof this.internals!=="undefined"&&typeof this.internals.setValidity==="function"&&typeof this.internals.setFormValue==="function"}updateEventTitle(e,t=false){const n=e.replace(/ +/g," ");if(n===""||/^[\s]*$/.test(n)){this.validationError="eventTitleRequired";this.isInternalsAvailable&&this.internals?.setValidity({customError:true},`Event title is required`,this.titleRef)}else{this.validationError="";this.isInternalsAvailable&&this.internals?.setValidity({customError:false})}this.isInternalsAvailable&&this.internals?.setFormValue(n,this.name);if(!t){this.valueChanged.emit({value:n,name:this.name})}}resetDropdown(){this.showTokens=false;this.ariaActivedescendant=""}getLabelHTML(e){return n("div",{class:"token-label"},n("span",{class:"token"},e.token),n("span",{class:"description"},e.description))}render(){return n(s,{key:"be5c644520aa3a3a32699d33a74a53be4a874f6c"},n("div",{key:"3ccaeb04b75c6e7e15ebeda6b0f6c02f3b9c0869",class:"nylas-event-title",part:"net"},n("label",{key:"4cd1348b60a56dca4a8092aecfe51103c53f048e",htmlFor:"title"},i.t("nylasEventTitle.headerTitle"),n("span",{key:"5d18db7ede458a9ab2d1b5bb19319d072ff2b70e",class:"required"},"*")),n("div",{key:"e4c00b94be0a861696d81526c26703fef888f536",class:{title:true,error:this.validationError!==""},part:"net__title",ref:e=>this.titleRef=e,contentEditable:"true",onInput:e=>this.handleChange(e),onKeyDown:e=>this.handleInputKeyDown(e)}),this.showTokens&&this.filteredTokens?.length>0&&n("div",{class:"token-options",part:"net__dropdown-content"},n("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant},this.filteredTokens.map((e=>n("li",{tabindex:"0",key:e.label,id:e.label,class:{active:this.ariaActivedescendant===e.label},onClick:t=>this.selectOption(t,e),role:"option"},this.getLabelHTML(e.labelHTML)))))),n("span",{key:"287386dc6cfafe56e01f6a51e3538da909cbd2db",class:"help-text"},i.t("nylasEventTitle.helpText",{context:"start",field:i.t("nylasEventTitle.title")})," ",n("code",{key:"0a12678367abd26be60e14253837dfb8648f00b4"},"$")," ",i.t("nylasEventTitle.helpText",{context:"end"}),n("span",{key:"18102bdb2013e451ece515ae09acf18a529e8f78",class:"label-icon"},n("tooltip-component",{key:"b79fccb2ca7864ae7446546be6d255c11ba4eced"},n("info-icon",{key:"ff624259a594a5ff192ab0e24ebd6f621d99cf63",slot:"tooltip-icon"}),n("span",{key:"d406f605a1b2f7c503cb16c16b9205a4fa6e8c03",slot:"tooltip-content"},i.t("nylasEventTitle.tooltip.desc")," ",n("code",{key:"a4cf09de868ab908598a6d96a08b3880d76ff89d"},"${invitee}"))))),this.validationError!=""&&n("span",{class:"error-message"},i.t(`nylasEventTitle.${this.validationError}`))))}static get formAssociated(){return true}get host(){return l(this)}static get watchers(){return{name:["elementNameChangedHandler"],ariaActivedescendant:["ariaActivedescendantChangedHandler"],selectedConfiguration:["configChangedHandler"],selectedLanguage:["selectedLanguageChangedHandler"]}}};p([o({name:"nylas-event-title",stateToProps:new Map([["schedulerConfig.selectedConfiguration","selectedConfiguration"],["schedulerConfig.selectedLanguage","selectedLanguage"]]),eventToProps:{},fireRegisterEvent:true}),y("design:type",Function),y("design:paramtypes",[]),y("design:returntype",void 0)],b.prototype,"render",null);b.style=h;export{b as nylas_event_title};
 //# sourceMappingURL=nylas-event-title.entry.js.map

package/dist/nylas-web-elements/nylas-event-title.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["nylasEventTitleCss","NylasEventTitle","this","selectedConfiguration","event_booking","title","eventTitleTokens","map","token","label","value","labelHTML","availableTokens","$value","fullText","index","focusOffset","elementNameChangedHandler","newValue","debug","host","setAttribute","ariaActivedescendantChangedHandler","activeOption","shadowRoot","getElementById","classList","add","options","querySelectorAll","forEach","option","remove","configChangedHandler","newVal","additionalFields","scheduler","additional_fields","newKeys","Object","keys","newTokens","key","description","additionalFieldTokens","filteredTokens","configEventTitle","updateEventTitleFromProp","selectedLanguageChangedHandler","oldVal","i18next","changeLanguage","titleTokens","$invitee","$invitee_email","$duration","t","connectedCallback","componentWillLoad","name","componentDidLoad","eventTitle","updateEventTitle","disconnectedCallback","formSubmittedHandler","event","internals","validity","valid","validationError","valueChangedHandler","detail","titleRef","innerHTML","highlightTokens","setValidity","focus","customError","isInternalsAvailable","setFormValue","outputHtml","tokenObj","regex","RegExp","replace","getCurrentSelectionForBrowser","getSelectionTextData","nodeValue","offset","node","allSelected","text","dollarIndex","lastIndexOf","lastWord","substring","split","currentText","isAllSelected","selection","anchorOffset","focusNode","length","currentBrowser","getBrowser","shadowRootSelection","getSelection","focusNodeValue","document","anchorNodeValue","anchorNode","allSelectedFirefox","windowSelection","window","getComposedRanges","startContainer","allSelectedSafari","endOffset","console","warn","handleChange","textContent","target","sanitize","currentSelection","resetDropdown","startsWith","showTokens","currentWord","populateSuggestionsDropdown","handleInputKeyDown","isNonPrintableKey","preventDefault","ariaActivedescendant","click","nextOption","nextElementSibling","id","prevOption","previousElementSibling","parentNode","nodeName","removeChild","selectOption","e","word","dollarWord","currentNode","firstChild","textNode","nodeType","currentNodeText","wordText","includes","nextSibling","indexOf","textBefore","textAfter","newTextNode","createTextNode","newRange","createRange","tagSpan","createElement","newTextNodeAfter","replaceWith","setStart","afterNode","sel","collapse","removeAllRanges","addRange","query","filter","obj","toString","noValue","test","valueChanged","emit","getLabelHTML","h","class","render","Host","part","htmlFor","error","ref","el","contentEditable","onInput","onKeyDown","tabindex","role","active","onClick","context","field","slot","__decorate","RegisterComponent","stateToProps","Map","eventToProps","fireRegisterEvent"],"sources":["src/components/scheduler-editor/nylas-event-title/nylas-event-title.scss?tag=nylas-event-title&encapsulation=shadow","src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-event-title {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  position: relative;\n  text-align: left;\n\n  div.title {\n    padding: 12px 16px;\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n    overflow: scroll;\n    white-space: nowrap;\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.error {\n      border-color: var(--nylas-error);\n      border-width: 2px;\n      outline: none;\n    }\n  }\n\n  input {\n    padding: 12px 16px;\n    border-width: 1;\n    border-radius: 8px;\n    border: 1px solid var(--nylas-base-200);\n  }\n\n  span.help-text {\n    display: inline-block;\n    gap: 4px;\n    align-items: center;\n    color: var(--nylas-base-500);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 21px;\n    position: relative;\n\n    span.label-icon {\n      display: inline-block;\n\n      tooltip-component {\n        &::part(tc__container) {\n          position: unset;\n        }\n\n        &::part(tc__content) {\n          position: absolute;\n          top: 4px;\n          left: 50%;\n          transform: translateX(-50%);\n        }\n      }\n    }\n  }\n\n  span.error-message {\n    color: var(--nylas-error);\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n\n    /* 21px */\n    span.required {\n      color: var(--nylas-error, #cc4841);\n    }\n\n    span.label-icon {\n      margin-left: 4px;\n\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n}\n\n.highlighted-tag {\n  background-color: var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius);\n  padding: 5px;\n  margin-left: 4px;\n}\n\n.token-options {\n  display: block;\n  background-color: var(--nylas-base-0);\n  width: 100%;\n  max-height: 336px;\n  overflow: auto;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  top: calc(48px + 24px + 8px); // 48px is the height of the input, 24px is the height of the label, 8px is the gap between the label and the input\n\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\n\n  box-shadow: 0px 4px 6px -2px #0000000d;\n  box-shadow: 0px 10px 15px -3px #0000001a;\n\n  ul {\n    padding: 0;\n    list-style-type: none;\n    color: var(--nylas-base-900);\n    max-height: 336px;\n    margin: 0;\n\n    li {\n      padding: 16px, 12px, 16px, 12px;\n      color: var(--nylas-base-900);\n      padding: 12px 16px;\n      text-decoration: none;\n      display: block;\n      font-family: inherit;\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      letter-spacing: 0px;\n      text-align: left;\n      cursor: pointer;\n\n      .token-label {\n        display: flex;\n        flex-direction: column;\n        font-weight: 400;\n\n        .token {\n          color: var(--nylas-abse-900);\n          font-size: 16px;\n          line-height: 24px;\n        }\n\n        .description {\n          color: var(--nylas-base-600);\n          font-size: 14px;\n          line-height: 21px;\n        }\n      }\n\n      &:hover,\n      &:focus,\n      &:active,\n      &.active {\n        background-color: var(--nylas-base-100);\n\n        .token-label {\n          .token {\n            color: var(--nylas-primary);\n          }\n        }\n      }\n    }\n  }\n\n  .selected {\n    background-color: var(--nylas-base-100);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser, isNonPrintableKey, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { EVENT_TITLE_TOKENS as eventTitleTokens } from '@/common/constants';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\ninterface CustomShadowRoot extends ShadowRoot {\n  getSelection: () => Selection | null;\n}\n\ntype Token = {\n  token: string;\n  value: string;\n  description: string;\n};\n\n/**\n * The `nylas-event-title` component is a form input for the title of an event.\n * @part net - The event title container\n * @part net__title - The event title input\n * @part net__dropdown-content - The token options container\n */\n@Component({\n  tag: 'nylas-event-title',\n  styleUrl: 'nylas-event-title.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventTitle {\n  @Element() host!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // Properties\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The title of the event from the cofiguration.\n   */\n  @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n  /**\n   * @standalone\n   * The name attribute of this component.\n   */\n  @Prop() name: string = 'title';\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n  // State variables\n  /**\n   * Whether to show the tokens dropdown.\n   */\n  @State() showTokens: boolean = false;\n  /**\n   * The available token options for the dropdown.\n   */\n  @State() availableTokens: { label: string; value: string; labelHTML: Token }[] = eventTitleTokens.map(token => ({\n    label: token.token,\n    value: token.value,\n    labelHTML: token,\n  }));\n  /**\n   * The filtered token options for the dropdown based on the current query.\n   */\n  @State() filteredTokens: { label: string; value: string; labelHTML: Token }[] = this.availableTokens;\n  /**\n   * The aria-activedescendant attribute value. This is used to indicate the\n   * currently active descendant in the tokens dropdown.\n   */\n  @State() ariaActivedescendant: string = '';\n  /**\n   * Stores the reference to the current word being typed.\n   * This is used to update the event title with the selected token tag when\n   * an option is selected from the dropdown by clicking on it.\n   */\n  @State() currentWord: {\n    $value: string;\n    fullText: string;\n    index: number;\n    focusOffset: number;\n  } = { $value: '', fullText: '', index: -1, focusOffset: -1 };\n\n  @State() validationError: string = '';\n  @State() configEventTitle: string = '';\n\n  @State() additionalFieldTokens: Token[] = [];\n  // Reference to the title div element\n  private titleRef!: HTMLDivElement;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('[nylas-event-title]', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('ariaActivedescendant')\n  ariaActivedescendantChangedHandler(newValue: string) {\n    debug('[nylas-event-title]', 'ariaActivedescendantChangedHandler', newValue);\n    if (newValue !== '') {\n      const activeOption = this.host.shadowRoot?.getElementById(newValue);\n      activeOption?.classList.add('active');\n    } else {\n      const options = this.host.shadowRoot?.querySelectorAll('.token-options li.active');\n      options?.forEach(option => option.classList.remove('active'));\n    }\n  }\n\n  @Watch('selectedConfiguration')\n  configChangedHandler(newVal: Configuration) {\n    const title = newVal?.event_booking?.title;\n    const additionalFields = newVal?.scheduler?.additional_fields || {};\n    const newKeys = Object.keys(additionalFields) || [];\n    const newTokens = newKeys.map(key => {\n      return {\n        token: `$${key}`,\n        value: `\\${${key}}`,\n        description: additionalFields[key].label || '',\n      };\n    });\n    this.additionalFieldTokens = [...newTokens];\n    this.availableTokens = [...eventTitleTokens, ...newTokens].map(token => ({\n      label: token.token,\n      value: token.value,\n      labelHTML: token,\n    }));\n    this.filteredTokens = [...this.availableTokens];\n    if (title) {\n      this.configEventTitle = title;\n      this.updateEventTitleFromProp(title);\n    }\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n    const titleTokens = {\n      $invitee: 'invitee',\n      $invitee_email: 'inviteeEmail',\n      $duration: 'duration',\n    };\n    this.availableTokens = this.availableTokens.map(token => {\n      if (titleTokens[token.label]) {\n        token.labelHTML.description = i18next.t(`nylasEventTitle.eventTitleTokenDescription.${titleTokens[token.label]}`);\n      }\n      return token;\n    });\n    this.filteredTokens = [...this.availableTokens];\n  }\n\n  // Events\n  /**\n   * This event is fired when the value of the event title changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('[nylas-event-title]', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('[nylas-event-title]', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('[nylas-event-title]', 'componentDidLoad');\n    let title = this.eventTitle || this.configEventTitle;\n    if (this.selectedConfiguration?.event_booking?.title) {\n      title = this.selectedConfiguration?.event_booking?.title;\n    }\n    if (title) {\n      this.updateEventTitleFromProp(title);\n      this.updateEventTitle(title, true);\n    }\n  }\n\n  disconnectedCallback() {\n    debug('[nylas-event-title]', 'disconnectedCallback');\n  }\n\n  @Listen('formSubmitted', { target: 'window' })\n  formSubmittedHandler(event: CustomEvent) {\n    debug('[nylas-event-title]', 'formSubmittedHandler', event);\n    if (!this.internals?.validity?.valid) {\n      this.validationError = 'eventTitleRequired';\n    } else {\n      this.validationError = '';\n    }\n  }\n\n  @Listen('valueChanged', { target: 'document' })\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    const additionalFields = value || {};\n    if (name === 'additional-fields') {\n      const newKeys = Object.keys(additionalFields) || [];\n      const newTokens = newKeys.map(key => {\n        return {\n          token: `$${key}`,\n          value: `\\${${key}}`,\n          description: additionalFields[key].label || '',\n        };\n      });\n      this.additionalFieldTokens = [...newTokens];\n      this.availableTokens = [...eventTitleTokens, ...newTokens].map(token => ({\n        label: token.token,\n        value: token.value,\n        labelHTML: token,\n      }));\n      this.filteredTokens = [...this.availableTokens];\n    }\n  }\n\n  updateEventTitleFromProp(newValue: string) {\n    debug('[nylas-event-title]', 'eventTitleChangedHandler', newValue);\n    const title = newValue || this.configEventTitle;\n    if (this.titleRef) {\n      this.titleRef.innerHTML = this.highlightTokens(title);\n      if (typeof this.internals.setValidity === 'function') {\n        if (!title || title === '') {\n          this.titleRef.focus();\n          this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n        } else {\n          this.internals?.setValidity({ customError: false });\n          this.isInternalsAvailable && this.internals?.setFormValue(title, this.name);\n        }\n      }\n    }\n  }\n\n  highlightTokens(title: string) {\n    let outputHtml = title;\n    [...eventTitleTokens, ...this.additionalFieldTokens].forEach(tokenObj => {\n      const token = tokenObj.value;\n      // Create a regular expression that matches the token as a whole word\n      const regex = new RegExp(`(\\\\${token})(?!\\\\w)`, 'g');\n      // Replace the token with a span element\n      outputHtml = outputHtml?.replace(regex, '<span class=\"highlighted-tag\">$1</span>') || '';\n    });\n    return outputHtml;\n  }\n\n  getCurrentSelectionForBrowser() {\n    const getSelectionTextData = (nodeValue, offset, node, allSelected) => {\n      // Remove zero-width space characters from the text, because they are not visible and cause issues with the selection\n      const text = nodeValue.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n      const dollarIndex = text.lastIndexOf('$');\n      const lastWord = text.substring(dollarIndex).split(' ')[0];\n      return {\n        focusOffset: offset,\n        dollarIndex,\n        lastWord,\n        currentText: text,\n        node,\n        allSelected,\n      };\n    };\n\n    // Check if the selection has selected all the text in the node, we need this to handle the case where the user selects all the text and then types or deletes\n    const isAllSelected = (selection: Selection) => selection.anchorOffset === 0 && selection.focusOffset === selection.focusNode?.nodeValue?.length;\n\n    const currentBrowser = getBrowser();\n    switch (currentBrowser) {\n      case 'Chrome': {\n        const shadowRootSelection = (this.host.shadowRoot as CustomShadowRoot)?.getSelection();\n        const focusNode = shadowRootSelection?.focusNode;\n        const focusNodeValue = focusNode?.nodeValue || '';\n        const allSelected = shadowRootSelection && isAllSelected(shadowRootSelection);\n        return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset || -1, focusNode, allSelected);\n      }\n      case 'Firefox': {\n        const selection = document.getSelection();\n        const anchorNodeValue = selection?.anchorNode?.nodeValue || '';\n        const allSelectedFirefox = selection && isAllSelected(selection);\n        return getSelectionTextData(anchorNodeValue, selection?.focusOffset || -1, selection?.anchorNode, allSelectedFirefox);\n      }\n      case 'Safari': {\n        const windowSelection = window.getSelection();\n        const anchorNode = (windowSelection as any)?.getComposedRanges(this.host.shadowRoot as CustomShadowRoot)[0];\n        const currentText = anchorNode?.startContainer?.nodeValue || '';\n        const allSelectedSafari = windowSelection && isAllSelected(windowSelection);\n        return getSelectionTextData(currentText, anchorNode?.endOffset || -1, anchorNode?.startContainer, allSelectedSafari);\n      }\n      default: {\n        console.warn('Browser not supported');\n        return null;\n      }\n    }\n  }\n\n  handleChange(event: Event) {\n    let textContent = (event.target as HTMLDivElement).textContent || '';\n    textContent = sanitize(textContent);\n\n    // All browsers handle Selection within Shadow DOM differently, so get the current selection based on the browser\n    const currentSelection = this.getCurrentSelectionForBrowser();\n    if (!currentSelection) {\n      this.updateEventTitle(textContent);\n      this.resetDropdown();\n      return;\n    }\n    const { focusOffset, dollarIndex, lastWord, currentText } = currentSelection;\n\n    if (dollarIndex === -1 || focusOffset < dollarIndex) {\n      this.updateEventTitle(textContent);\n      this.resetDropdown();\n      return;\n    }\n    if (lastWord.startsWith('$')) {\n      this.showTokens = true;\n      // Update the current word being typed, we need this reference to update the event title with the selected token\n      // because the user can select an option from the dropdown by clicking on it, which will not trigger the input event.\n      this.currentWord = {\n        $value: lastWord,\n        fullText: currentText,\n        index: dollarIndex,\n        focusOffset,\n      };\n      this.populateSuggestionsDropdown(lastWord);\n    } else {\n      this.resetDropdown();\n    }\n    this.updateEventTitle(textContent);\n  }\n\n  handleInputKeyDown(event) {\n    const selection = this.getCurrentSelectionForBrowser();\n\n    // If no text is remaining in the title, reset the title to an empty string\n    if (selection?.allSelected && !isNonPrintableKey(event)) {\n      this.titleRef.innerHTML = '';\n    }\n\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        activeOption.click();\n        this.ariaActivedescendant = '';\n      }\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        const nextOption = activeOption.nextElementSibling;\n        if (nextOption) {\n          this.ariaActivedescendant = nextOption.id;\n        } else {\n          this.ariaActivedescendant = this.filteredTokens[0].label;\n        }\n      } else {\n        this.ariaActivedescendant = this.filteredTokens[0].label;\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        const prevOption = activeOption.previousElementSibling;\n        if (prevOption) {\n          this.ariaActivedescendant = prevOption.id;\n        } else {\n          this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n        }\n      } else {\n        this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n      }\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.resetDropdown();\n    } else if (event.key === 'Backspace' || event.key === 'Delete') {\n      const parentNode = selection?.node?.parentNode;\n      if (selection?.currentText.startsWith('${') && parentNode && parentNode.nodeName === 'SPAN') {\n        event.preventDefault();\n        parentNode.removeChild(selection.node);\n        parentNode.remove();\n        this.resetDropdown();\n        this.updateEventTitle(this.titleRef?.textContent || '');\n      }\n      if (this.titleRef.textContent === '' || selection?.allSelected) {\n        this.titleRef.innerHTML = '';\n        this.updateEventTitle('');\n      }\n    }\n  }\n\n  selectOption(e: Event, option: { label: string; value: string; labelHTML: Token }) {\n    e.preventDefault();\n    const word = this.currentWord.fullText;\n    const dollarWord = this.currentWord.$value;\n\n    // Traverse the DOM to find the text node that contains the current word fullText\n    let currentNode = this.titleRef.firstChild;\n    let textNode: ChildNode | null = null;\n\n    while (currentNode) {\n      if (currentNode.nodeType === 3) {\n        const currentNodeText = currentNode.textContent?.replace(/[\\u200B-\\u200D\\uFEFF]/g, '') || '';\n        const wordText = word.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n        if (currentNodeText.includes(wordText)) {\n          textNode = currentNode;\n          break;\n        }\n      }\n      currentNode = currentNode.nextSibling;\n    }\n\n    if (!textNode) {\n      return;\n    }\n    // Split the text node into three parts: text before the token, the token, and text after the token\n    const text = textNode.textContent || '';\n    const index = text.indexOf(dollarWord);\n    const textBefore = text.substring(0, index);\n    const textAfter = text.substring(index + dollarWord.length);\n    const newTextNode = document.createTextNode(textBefore);\n    const newRange = document.createRange();\n\n    // Create a new span element to replace the text node\n    const tagSpan = document.createElement('span');\n    tagSpan.classList.add('highlighted-tag');\n    tagSpan.textContent = `${option.value}`;\n    const newTextNodeAfter = document.createTextNode(textAfter);\n\n    if (textAfter !== '') {\n      // If there is text after the token, add it to the new span element\n      textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);\n      newRange.setStart(newTextNodeAfter, 1);\n    } else {\n      // If there is no text after the token, add a zero-width space character (Without this, the cursor will not move outside the highlighted span element)\n      const afterNode = document.createTextNode('\\u200B');\n      textNode.replaceWith(newTextNode, tagSpan, afterNode);\n      newRange.setStart(afterNode, 1);\n    }\n\n    // Hide the dropdown\n    this.resetDropdown();\n    this.titleRef.focus();\n\n    // Set the focus to the new span element\n    const sel = window.getSelection();\n    newRange.collapse(true);\n    sel?.removeAllRanges();\n    sel?.addRange(newRange);\n\n    // Update the event title with the selected token\n    this.updateEventTitle(this.titleRef.textContent || '');\n  }\n\n  populateSuggestionsDropdown(query: string = '') {\n    this.filteredTokens = this.availableTokens.filter(obj => {\n      return obj.label.startsWith(query.toString()) || obj.value.startsWith(query.toString());\n    });\n\n    // Set the first option as the active descendant\n    if (this.filteredTokens.length > 0) {\n      this.ariaActivedescendant = this.filteredTokens[0].label;\n    }\n  }\n\n  get isInternalsAvailable() {\n    return typeof this.internals !== 'undefined' && typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function';\n  }\n\n  updateEventTitle(text: string, noValue: boolean = false) {\n    const value = text.replace(/ +/g, ' ');\n    if (value === '' || /^[\\s]*$/.test(value)) {\n      this.validationError = 'eventTitleRequired';\n      this.isInternalsAvailable && this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n    } else {\n      this.validationError = '';\n      this.isInternalsAvailable && this.internals?.setValidity({ customError: false });\n    }\n\n    this.isInternalsAvailable && this.internals?.setFormValue(value, this.name);\n    if (!noValue) {\n      this.valueChanged.emit({ value: value, name: this.name });\n    }\n  }\n\n  resetDropdown() {\n    this.showTokens = false;\n    this.ariaActivedescendant = '';\n  }\n\n  getLabelHTML(token: { token: string; description: string }) {\n    return (\n      <div class=\"token-label\">\n        <span class=\"token\">{token.token}</span>\n        <span class=\"description\">{token.description}</span>\n      </div>\n    );\n  }\n\n  @RegisterComponent<NylasEventTitle, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-title',\n    stateToProps: new Map([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-event-title\" part=\"net\">\n          <label htmlFor=\"title\">\n            {i18next.t('nylasEventTitle.headerTitle')}\n            <span class=\"required\">*</span>\n          </label>\n          <div\n            class={{\n              title: true,\n              error: this.validationError !== '',\n            }}\n            part=\"net__title\"\n            ref={el => (this.titleRef = el as HTMLDivElement)}\n            contentEditable=\"true\"\n            onInput={e => this.handleChange(e)}\n            onKeyDown={event => this.handleInputKeyDown(event)}\n          ></div>\n          {this.showTokens && this.filteredTokens?.length > 0 && (\n            <div class=\"token-options\" part=\"net__dropdown-content\">\n              <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant}>\n                {this.filteredTokens.map(option => (\n                  <li\n                    tabindex=\"0\"\n                    key={option.label}\n                    id={option.label}\n                    class={{ active: this.ariaActivedescendant === option.label }}\n                    onClick={e => this.selectOption(e, option)}\n                    role=\"option\"\n                  >\n                    {this.getLabelHTML(option.labelHTML)}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          <span class=\"help-text\">\n            {i18next.t('nylasEventTitle.helpText', { context: 'start', field: i18next.t('nylasEventTitle.title') })} <code>$</code>{' '}\n            {i18next.t('nylasEventTitle.helpText', { context: 'end' })}\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  {i18next.t('nylasEventTitle.tooltip.desc')} <code>{'${invitee}'}</code>\n                </span>\n              </tooltip-component>\n            </span>\n          </span>\n          {this.validationError != '' && <span class=\"error-message\">{i18next.t(`nylasEventTitle.${this.validationError}`)}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["nylasEventTitleCss","NylasEventTitle","this","selectedConfiguration","event_booking","title","eventTitleTokens","map","token","label","value","labelHTML","availableTokens","$value","fullText","index","focusOffset","elementNameChangedHandler","newValue","debug","host","setAttribute","ariaActivedescendantChangedHandler","activeOption","shadowRoot","getElementById","classList","add","options","querySelectorAll","forEach","option","remove","configChangedHandler","newVal","additionalFields","scheduler","additional_fields","newKeys","Object","keys","newTokens","key","description","additionalFieldTokens","filteredTokens","configEventTitle","updateEventTitleFromProp","selectedLanguageChangedHandler","oldVal","i18next","changeLanguage","titleTokens","$invitee","$invitee_email","$duration","t","connectedCallback","componentWillLoad","name","componentDidLoad","eventTitle","updateEventTitle","disconnectedCallback","formSubmittedHandler","event","internals","validity","valid","validationError","valueChangedHandler","detail","JSON","parse","toString","titleRef","innerHTML","highlightTokens","setValidity","focus","customError","isInternalsAvailable","setFormValue","outputHtml","tokenObj","regex","RegExp","replace","getCurrentSelectionForBrowser","getSelectionTextData","nodeValue","offset","node","allSelected","text","dollarIndex","lastIndexOf","lastWord","substring","split","currentText","isAllSelected","selection","anchorOffset","focusNode","length","currentBrowser","getBrowser","shadowRootSelection","getSelection","focusNodeValue","document","anchorNodeValue","anchorNode","allSelectedFirefox","windowSelection","window","getComposedRanges","startContainer","allSelectedSafari","endOffset","console","warn","handleChange","textContent","target","sanitize","currentSelection","resetDropdown","startsWith","showTokens","currentWord","populateSuggestionsDropdown","handleInputKeyDown","isNonPrintableKey","preventDefault","ariaActivedescendant","click","nextOption","nextElementSibling","id","prevOption","previousElementSibling","parentNode","nodeName","removeChild","selectOption","e","word","dollarWord","currentNode","firstChild","textNode","nodeType","currentNodeText","wordText","includes","nextSibling","indexOf","textBefore","textAfter","newTextNode","createTextNode","newRange","createRange","tagSpan","createElement","newTextNodeAfter","replaceWith","setStart","afterNode","sel","collapse","removeAllRanges","addRange","query","filter","obj","noValue","test","valueChanged","emit","getLabelHTML","h","class","render","Host","part","htmlFor","error","ref","el","contentEditable","onInput","onKeyDown","tabindex","role","active","onClick","context","field","slot","__decorate","RegisterComponent","stateToProps","Map","eventToProps","fireRegisterEvent"],"sources":["src/components/scheduler-editor/nylas-event-title/nylas-event-title.scss?tag=nylas-event-title&encapsulation=shadow","src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-event-title {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  position: relative;\n  text-align: left;\n\n  div.title {\n    padding: 12px 16px;\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n    overflow: scroll;\n    white-space: nowrap;\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.error {\n      border-color: var(--nylas-error);\n      border-width: 2px;\n      outline: none;\n    }\n  }\n\n  input {\n    padding: 12px 16px;\n    border-width: 1;\n    border-radius: 8px;\n    border: 1px solid var(--nylas-base-200);\n  }\n\n  span.help-text {\n    display: inline-block;\n    gap: 4px;\n    align-items: center;\n    color: var(--nylas-base-500);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 21px;\n    position: relative;\n\n    span.label-icon {\n      display: inline-block;\n\n      tooltip-component {\n        &::part(tc__container) {\n          position: unset;\n        }\n\n        &::part(tc__content) {\n          position: absolute;\n          top: 4px;\n          left: 50%;\n          transform: translateX(-50%);\n        }\n      }\n    }\n  }\n\n  span.error-message {\n    color: var(--nylas-error);\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n\n    /* 21px */\n    span.required {\n      color: var(--nylas-error, #cc4841);\n    }\n\n    span.label-icon {\n      margin-left: 4px;\n\n      tooltip-component {\n        display: flex;\n      }\n    }\n  }\n}\n\n.highlighted-tag {\n  background-color: var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius);\n  padding: 5px;\n  margin-left: 4px;\n}\n\n.token-options {\n  display: block;\n  background-color: var(--nylas-base-0);\n  width: 100%;\n  max-height: 336px;\n  overflow: auto;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  top: calc(48px + 24px + 8px); // 48px is the height of the input, 24px is the height of the label, 8px is the gap between the label and the input\n\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\n\n  box-shadow: 0px 4px 6px -2px #0000000d;\n  box-shadow: 0px 10px 15px -3px #0000001a;\n\n  ul {\n    padding: 0;\n    list-style-type: none;\n    color: var(--nylas-base-900);\n    max-height: 336px;\n    margin: 0;\n\n    li {\n      padding: 16px, 12px, 16px, 12px;\n      color: var(--nylas-base-900);\n      padding: 12px 16px;\n      text-decoration: none;\n      display: block;\n      font-family: inherit;\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      letter-spacing: 0px;\n      text-align: left;\n      cursor: pointer;\n\n      .token-label {\n        display: flex;\n        flex-direction: column;\n        font-weight: 400;\n\n        .token {\n          color: var(--nylas-abse-900);\n          font-size: 16px;\n          line-height: 24px;\n        }\n\n        .description {\n          color: var(--nylas-base-600);\n          font-size: 14px;\n          line-height: 21px;\n        }\n      }\n\n      &:hover,\n      &:focus,\n      &:active,\n      &.active {\n        background-color: var(--nylas-base-100);\n\n        .token-label {\n          .token {\n            color: var(--nylas-primary);\n          }\n        }\n      }\n    }\n  }\n\n  .selected {\n    background-color: var(--nylas-base-100);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser, isNonPrintableKey, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { EVENT_TITLE_TOKENS as eventTitleTokens } from '@/common/constants';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\ninterface CustomShadowRoot extends ShadowRoot {\n  getSelection: () => Selection | null;\n}\n\ntype Token = {\n  token: string;\n  value: string;\n  description: string;\n};\n\n/**\n * The `nylas-event-title` component is a form input for the title of an event.\n * @part net - The event title container\n * @part net__title - The event title input\n * @part net__dropdown-content - The token options container\n */\n@Component({\n  tag: 'nylas-event-title',\n  styleUrl: 'nylas-event-title.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasEventTitle {\n  @Element() host!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // Properties\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The title of the event from the cofiguration.\n   */\n  @Prop() eventTitle?: string = this.selectedConfiguration?.event_booking?.title;\n  /**\n   * @standalone\n   * The name attribute of this component.\n   */\n  @Prop() name: string = 'title';\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n  // State variables\n  /**\n   * Whether to show the tokens dropdown.\n   */\n  @State() showTokens: boolean = false;\n  /**\n   * The available token options for the dropdown.\n   */\n  @State() availableTokens: { label: string; value: string; labelHTML: Token }[] = eventTitleTokens.map(token => ({\n    label: token.token,\n    value: token.value,\n    labelHTML: token,\n  }));\n  /**\n   * The filtered token options for the dropdown based on the current query.\n   */\n  @State() filteredTokens: { label: string; value: string; labelHTML: Token }[] = this.availableTokens;\n  /**\n   * The aria-activedescendant attribute value. This is used to indicate the\n   * currently active descendant in the tokens dropdown.\n   */\n  @State() ariaActivedescendant: string = '';\n  /**\n   * Stores the reference to the current word being typed.\n   * This is used to update the event title with the selected token tag when\n   * an option is selected from the dropdown by clicking on it.\n   */\n  @State() currentWord: {\n    $value: string;\n    fullText: string;\n    index: number;\n    focusOffset: number;\n  } = { $value: '', fullText: '', index: -1, focusOffset: -1 };\n\n  @State() validationError: string = '';\n  @State() configEventTitle: string = '';\n\n  @State() additionalFieldTokens: Token[] = [];\n  // Reference to the title div element\n  private titleRef!: HTMLDivElement;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('[nylas-event-title]', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('ariaActivedescendant')\n  ariaActivedescendantChangedHandler(newValue: string) {\n    debug('[nylas-event-title]', 'ariaActivedescendantChangedHandler', newValue);\n    if (newValue !== '') {\n      const activeOption = this.host.shadowRoot?.getElementById(newValue);\n      activeOption?.classList.add('active');\n    } else {\n      const options = this.host.shadowRoot?.querySelectorAll('.token-options li.active');\n      options?.forEach(option => option.classList.remove('active'));\n    }\n  }\n\n  @Watch('selectedConfiguration')\n  configChangedHandler(newVal: Configuration) {\n    const title = newVal?.event_booking?.title;\n    const additionalFields = newVal?.scheduler?.additional_fields || {};\n    const newKeys = Object.keys(additionalFields) || [];\n    const newTokens = newKeys.map(key => {\n      return {\n        token: `$${key}`,\n        value: `\\${${key}}`,\n        description: additionalFields[key].label || '',\n      };\n    });\n    this.additionalFieldTokens = [...newTokens];\n    this.availableTokens = [...eventTitleTokens, ...newTokens].map(token => ({\n      label: token.token,\n      value: token.value,\n      labelHTML: token,\n    }));\n    this.filteredTokens = [...this.availableTokens];\n    if (title) {\n      this.configEventTitle = title;\n      this.updateEventTitleFromProp(title);\n    }\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n    const titleTokens = {\n      $invitee: 'invitee',\n      $invitee_email: 'inviteeEmail',\n      $duration: 'duration',\n    };\n    this.availableTokens = this.availableTokens.map(token => {\n      if (titleTokens[token.label]) {\n        token.labelHTML.description = i18next.t(`nylasEventTitle.eventTitleTokenDescription.${titleTokens[token.label]}`);\n      }\n      return token;\n    });\n    this.filteredTokens = [...this.availableTokens];\n  }\n\n  // Events\n  /**\n   * This event is fired when the value of the event title changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('[nylas-event-title]', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('[nylas-event-title]', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('[nylas-event-title]', 'componentDidLoad');\n    let title = this.eventTitle || this.configEventTitle;\n    if (this.selectedConfiguration?.event_booking?.title) {\n      title = this.selectedConfiguration?.event_booking?.title;\n    }\n    if (title) {\n      this.updateEventTitleFromProp(title);\n      this.updateEventTitle(title, true);\n    }\n  }\n\n  disconnectedCallback() {\n    debug('[nylas-event-title]', 'disconnectedCallback');\n  }\n\n  @Listen('formSubmitted', { target: 'window' })\n  formSubmittedHandler(event: CustomEvent) {\n    debug('[nylas-event-title]', 'formSubmittedHandler', event);\n    if (!this.internals?.validity?.valid) {\n      this.validationError = 'eventTitleRequired';\n    } else {\n      this.validationError = '';\n    }\n  }\n\n  @Listen('valueChanged', { target: 'document' })\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    if (name === 'additional-fields') {\n      const additionalFields = JSON.parse(value.toString());\n      const newKeys = Object.keys(additionalFields) || [];\n      const newTokens = newKeys.map(key => {\n        return {\n          token: `$${key}`,\n          value: `\\${${key}}`,\n          description: additionalFields[key].label || '',\n        };\n      });\n      this.additionalFieldTokens = [...newTokens];\n      this.availableTokens = [...eventTitleTokens, ...newTokens].map(token => ({\n        label: token.token,\n        value: token.value,\n        labelHTML: token,\n      }));\n      this.filteredTokens = [...this.availableTokens];\n    }\n  }\n\n  updateEventTitleFromProp(newValue: string) {\n    debug('[nylas-event-title]', 'eventTitleChangedHandler', newValue);\n    const title = newValue || this.configEventTitle;\n    if (this.titleRef) {\n      this.titleRef.innerHTML = this.highlightTokens(title);\n      if (typeof this.internals.setValidity === 'function') {\n        if (!title || title === '') {\n          this.titleRef.focus();\n          this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n        } else {\n          this.internals?.setValidity({ customError: false });\n          this.isInternalsAvailable && this.internals?.setFormValue(title, this.name);\n        }\n      }\n    }\n  }\n\n  highlightTokens(title: string) {\n    let outputHtml = title;\n    [...eventTitleTokens, ...this.additionalFieldTokens].forEach(tokenObj => {\n      const token = tokenObj.value;\n      // Create a regular expression that matches the token as a whole word\n      const regex = new RegExp(`(\\\\${token})(?!\\\\w)`, 'g');\n      // Replace the token with a span element\n      outputHtml = outputHtml?.replace(regex, '<span class=\"highlighted-tag\">$1</span>') || '';\n    });\n    return outputHtml;\n  }\n\n  getCurrentSelectionForBrowser() {\n    const getSelectionTextData = (nodeValue, offset, node, allSelected) => {\n      // Remove zero-width space characters from the text, because they are not visible and cause issues with the selection\n      const text = nodeValue.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n      const dollarIndex = text.lastIndexOf('$');\n      const lastWord = text.substring(dollarIndex).split(' ')[0];\n      return {\n        focusOffset: offset,\n        dollarIndex,\n        lastWord,\n        currentText: text,\n        node,\n        allSelected,\n      };\n    };\n\n    // Check if the selection has selected all the text in the node, we need this to handle the case where the user selects all the text and then types or deletes\n    const isAllSelected = (selection: Selection) => selection.anchorOffset === 0 && selection.focusOffset === selection.focusNode?.nodeValue?.length;\n\n    const currentBrowser = getBrowser();\n    switch (currentBrowser) {\n      case 'Chrome': {\n        const shadowRootSelection = (this.host.shadowRoot as CustomShadowRoot)?.getSelection();\n        const focusNode = shadowRootSelection?.focusNode;\n        const focusNodeValue = focusNode?.nodeValue || '';\n        const allSelected = shadowRootSelection && isAllSelected(shadowRootSelection);\n        return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset || -1, focusNode, allSelected);\n      }\n      case 'Firefox': {\n        const selection = document.getSelection();\n        const anchorNodeValue = selection?.anchorNode?.nodeValue || '';\n        const allSelectedFirefox = selection && isAllSelected(selection);\n        return getSelectionTextData(anchorNodeValue, selection?.focusOffset || -1, selection?.anchorNode, allSelectedFirefox);\n      }\n      case 'Safari': {\n        const windowSelection = window.getSelection();\n        const anchorNode = (windowSelection as any)?.getComposedRanges(this.host.shadowRoot as CustomShadowRoot)[0];\n        const currentText = anchorNode?.startContainer?.nodeValue || '';\n        const allSelectedSafari = windowSelection && isAllSelected(windowSelection);\n        return getSelectionTextData(currentText, anchorNode?.endOffset || -1, anchorNode?.startContainer, allSelectedSafari);\n      }\n      default: {\n        console.warn('Browser not supported');\n        return null;\n      }\n    }\n  }\n\n  handleChange(event: Event) {\n    let textContent = (event.target as HTMLDivElement).textContent || '';\n    textContent = sanitize(textContent);\n\n    // All browsers handle Selection within Shadow DOM differently, so get the current selection based on the browser\n    const currentSelection = this.getCurrentSelectionForBrowser();\n    if (!currentSelection) {\n      this.updateEventTitle(textContent);\n      this.resetDropdown();\n      return;\n    }\n    const { focusOffset, dollarIndex, lastWord, currentText } = currentSelection;\n\n    if (dollarIndex === -1 || focusOffset < dollarIndex) {\n      this.updateEventTitle(textContent);\n      this.resetDropdown();\n      return;\n    }\n    if (lastWord.startsWith('$')) {\n      this.showTokens = true;\n      // Update the current word being typed, we need this reference to update the event title with the selected token\n      // because the user can select an option from the dropdown by clicking on it, which will not trigger the input event.\n      this.currentWord = {\n        $value: lastWord,\n        fullText: currentText,\n        index: dollarIndex,\n        focusOffset,\n      };\n      this.populateSuggestionsDropdown(lastWord);\n    } else {\n      this.resetDropdown();\n    }\n    this.updateEventTitle(textContent);\n  }\n\n  handleInputKeyDown(event) {\n    const selection = this.getCurrentSelectionForBrowser();\n\n    // If no text is remaining in the title, reset the title to an empty string\n    if (selection?.allSelected && !isNonPrintableKey(event)) {\n      this.titleRef.innerHTML = '';\n    }\n\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        activeOption.click();\n        this.ariaActivedescendant = '';\n      }\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        const nextOption = activeOption.nextElementSibling;\n        if (nextOption) {\n          this.ariaActivedescendant = nextOption.id;\n        } else {\n          this.ariaActivedescendant = this.filteredTokens[0].label;\n        }\n      } else {\n        this.ariaActivedescendant = this.filteredTokens[0].label;\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n      if (activeOption) {\n        const prevOption = activeOption.previousElementSibling;\n        if (prevOption) {\n          this.ariaActivedescendant = prevOption.id;\n        } else {\n          this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n        }\n      } else {\n        this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n      }\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.resetDropdown();\n    } else if (event.key === 'Backspace' || event.key === 'Delete') {\n      const parentNode = selection?.node?.parentNode;\n      if (selection?.currentText.startsWith('${') && parentNode && parentNode.nodeName === 'SPAN') {\n        event.preventDefault();\n        parentNode.removeChild(selection.node);\n        parentNode.remove();\n        this.resetDropdown();\n        this.updateEventTitle(this.titleRef?.textContent || '');\n      }\n      if (this.titleRef.textContent === '' || selection?.allSelected) {\n        this.titleRef.innerHTML = '';\n        this.updateEventTitle('');\n      }\n    }\n  }\n\n  selectOption(e: Event, option: { label: string; value: string; labelHTML: Token }) {\n    e.preventDefault();\n    const word = this.currentWord.fullText;\n    const dollarWord = this.currentWord.$value;\n\n    // Traverse the DOM to find the text node that contains the current word fullText\n    let currentNode = this.titleRef.firstChild;\n    let textNode: ChildNode | null = null;\n\n    while (currentNode) {\n      if (currentNode.nodeType === 3) {\n        const currentNodeText = currentNode.textContent?.replace(/[\\u200B-\\u200D\\uFEFF]/g, '') || '';\n        const wordText = word.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n        if (currentNodeText.includes(wordText)) {\n          textNode = currentNode;\n          break;\n        }\n      }\n      currentNode = currentNode.nextSibling;\n    }\n\n    if (!textNode) {\n      return;\n    }\n    // Split the text node into three parts: text before the token, the token, and text after the token\n    const text = textNode.textContent || '';\n    const index = text.indexOf(dollarWord);\n    const textBefore = text.substring(0, index);\n    const textAfter = text.substring(index + dollarWord.length);\n    const newTextNode = document.createTextNode(textBefore);\n    const newRange = document.createRange();\n\n    // Create a new span element to replace the text node\n    const tagSpan = document.createElement('span');\n    tagSpan.classList.add('highlighted-tag');\n    tagSpan.textContent = `${option.value}`;\n    const newTextNodeAfter = document.createTextNode(textAfter);\n\n    if (textAfter !== '') {\n      // If there is text after the token, add it to the new span element\n      textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);\n      newRange.setStart(newTextNodeAfter, 1);\n    } else {\n      // If there is no text after the token, add a zero-width space character (Without this, the cursor will not move outside the highlighted span element)\n      const afterNode = document.createTextNode('\\u200B');\n      textNode.replaceWith(newTextNode, tagSpan, afterNode);\n      newRange.setStart(afterNode, 1);\n    }\n\n    // Hide the dropdown\n    this.resetDropdown();\n    this.titleRef.focus();\n\n    // Set the focus to the new span element\n    const sel = window.getSelection();\n    newRange.collapse(true);\n    sel?.removeAllRanges();\n    sel?.addRange(newRange);\n\n    // Update the event title with the selected token\n    this.updateEventTitle(this.titleRef.textContent || '');\n  }\n\n  populateSuggestionsDropdown(query: string = '') {\n    this.filteredTokens = this.availableTokens.filter(obj => {\n      return obj.label.startsWith(query.toString()) || obj.value.startsWith(query.toString());\n    });\n\n    // Set the first option as the active descendant\n    if (this.filteredTokens.length > 0) {\n      this.ariaActivedescendant = this.filteredTokens[0].label;\n    }\n  }\n\n  get isInternalsAvailable() {\n    return typeof this.internals !== 'undefined' && typeof this.internals.setValidity === 'function' && typeof this.internals.setFormValue === 'function';\n  }\n\n  updateEventTitle(text: string, noValue: boolean = false) {\n    const value = text.replace(/ +/g, ' ');\n    if (value === '' || /^[\\s]*$/.test(value)) {\n      this.validationError = 'eventTitleRequired';\n      this.isInternalsAvailable && this.internals?.setValidity({ customError: true }, `Event title is required`, this.titleRef);\n    } else {\n      this.validationError = '';\n      this.isInternalsAvailable && this.internals?.setValidity({ customError: false });\n    }\n\n    this.isInternalsAvailable && this.internals?.setFormValue(value, this.name);\n    if (!noValue) {\n      this.valueChanged.emit({ value: value, name: this.name });\n    }\n  }\n\n  resetDropdown() {\n    this.showTokens = false;\n    this.ariaActivedescendant = '';\n  }\n\n  getLabelHTML(token: { token: string; description: string }) {\n    return (\n      <div class=\"token-label\">\n        <span class=\"token\">{token.token}</span>\n        <span class=\"description\">{token.description}</span>\n      </div>\n    );\n  }\n\n  @RegisterComponent<NylasEventTitle, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-event-title',\n    stateToProps: new Map([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-event-title\" part=\"net\">\n          <label htmlFor=\"title\">\n            {i18next.t('nylasEventTitle.headerTitle')}\n            <span class=\"required\">*</span>\n          </label>\n          <div\n            class={{\n              title: true,\n              error: this.validationError !== '',\n            }}\n            part=\"net__title\"\n            ref={el => (this.titleRef = el as HTMLDivElement)}\n            contentEditable=\"true\"\n            onInput={e => this.handleChange(e)}\n            onKeyDown={event => this.handleInputKeyDown(event)}\n          ></div>\n          {this.showTokens && this.filteredTokens?.length > 0 && (\n            <div class=\"token-options\" part=\"net__dropdown-content\">\n              <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant}>\n                {this.filteredTokens.map(option => (\n                  <li\n                    tabindex=\"0\"\n                    key={option.label}\n                    id={option.label}\n                    class={{ active: this.ariaActivedescendant === option.label }}\n                    onClick={e => this.selectOption(e, option)}\n                    role=\"option\"\n                  >\n                    {this.getLabelHTML(option.labelHTML)}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          <span class=\"help-text\">\n            {i18next.t('nylasEventTitle.helpText', { context: 'start', field: i18next.t('nylasEventTitle.title') })} <code>$</code>{' '}\n            {i18next.t('nylasEventTitle.helpText', { context: 'end' })}\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  {i18next.t('nylasEventTitle.tooltip.desc')} <code>{'${invitee}'}</code>\n                </span>\n              </tooltip-component>\n            </span>\n          </span>\n          {this.validationError != '' && <span class=\"error-message\">{i18next.t(`nylasEventTitle.${this.validationError}`)}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nylas-web-elements/nylas-feedback-form.entry.js

@@ -1,2 +1,2 @@
-import{r as e,i as a,h as o,a as r,e as n}from"./index-3e0d6890.js";import{R as l}from"./register-component-3d439a88.js";import{a as c,i as s}from"./utils-3fdf2c83.js";import"./utc-290d564f.js";const t=':host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--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}.card-wrapper{background:var(--nylas-base-0);display:flex;flex-direction:column;font-family:var(--nylas-font-family);background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;padding:32px;width:562px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.card-wrapper{width:100%;border-radius:0px}}.header{overflow-wrap:anywhere;display:flex;flex-direction:column;font-size:16px;font-weight:400}.header h2{color:var(--nylas-base-900);font-size:24px;font-weight:600;text-align:left;margin:0}.description.title-desc{margin-bottom:2rem}.description.footer-desc{margin-top:2rem}.description.footer-desc a{color:var(--nylas-primary);text-decoration:none}.description p{margin:0;font-size:18px;color:var(--nylas-base-600)}.footer{margin-top:1rem;padding-top:1rem;display:flex;justify-content:flex-end;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.close-button{width:100%;display:flex;justify-content:flex-end}.close-button button-component button{padding:0;height:auto}.close-button button-component button:hover{background-color:transparent !important}button-component{--dot-color:var(--nylas-base-700)}';var f=undefined&&undefined.__decorate||function(e,a,o,r){var n=arguments.length,l=n<3?a:r===null?r=Object.getOwnPropertyDescriptor(a,o):r,c;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")l=Reflect.decorate(e,a,o,r);else for(var s=e.length-1;s>=0;s--)if(c=e[s])l=(n<3?c(l):n>3?c(a,o,l):c(a,o))||l;return n>3&&l&&Object.defineProperty(a,o,l),l};var d=undefined&&undefined.__metadata||function(e,a){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(e,a)};const i=class{constructor(o){e(this,o);this.feedbackModalClosed=a(this,"feedbackModalClosed",7);this.feedbackSubmitted=a(this,"feedbackSubmitted",7);this.triggerValidation=a(this,"triggerValidation",7);this.handleConfirmBookingButtonClicked=()=>{const e=this.triggerValidation.emit();if(e.defaultPrevented){return}this.feedbackSubmitted.emit({feedback:this.feedbackMessage})};this.themeConfig=undefined;this.feedbackMessage=""}connectedCallback(){}disconnectedCallback(){}async componentWillLoad(){c(`[nylas-feedback-form] Component will load`)}async componentDidLoad(){c(`[nylas-feedback-form] Component did load`);this.applyThemeConfig(this.themeConfig)}applyThemeConfig(e){if(e){for(const[a,o]of Object.entries(e)){this.host.style.setProperty(`${a}`,o)}}}handleFormInputChanged(e){c(`[nylas-feedback-form] Form input changed`);if(!e.detail.value){return}this.triggerValidation.emit();if(e.detail.name==="feedback"){this.feedbackMessage=e.detail.value}}closeModal(e){e.preventDefault();e.stopImmediatePropagation();this.feedbackModalClosed.emit()}render(){return o(r,{key:"ccc60c0b34b1c9516f6f12d984026f9ccb832cb6",part:"nfbf"},o("div",{key:"084c2e2813f769006bf2375bbbe7fbf8759c52d0",class:"card-wrapper",part:"nfbfc__card"},o("div",{key:"c0267b2273f7939b46b77b29c61f1e07167894ad",class:"close-button"},o("button-component",{key:"b512bfb8c3fe6bf66dbe4bbe73dd7eadca1f1584",tooltip:"Close",id:"close",variant:"invisible",onClick:e=>this.closeModal(e),part:"nfbf__close-button"},o("close-icon",{key:"d5249055a1f9fbc4669b7f97dccf3a4b0ba79f19"}))),o("div",{key:"44d48e9f33f8335837ea3ec029d7af111f819c49",class:"header"},o("h2",{key:"deceb8ba28d0aaad4474e199c9a033dc899dd1b0",slot:"card-title",part:"nfbf__title"},s.t("feedbackFormTitle"))),o("div",{key:"b62b992cb2d87d6c165fac6b0b6ed9eb980f8b3b",class:"description title-desc"},o("p",{key:"163c7941aab851ae6e5947066bf830e29673d578"},s.t("feedbackFormDescription"))),o("textarea-component",{key:"6ce1ed4b951cac69884cee8c3543cf448dd9f692",label:s.t("feedbackMessageLabel"),required:true,maxLength:500,part:"nfbf__description",name:"feedback",placeholder:s.t("feedbackMessagePlaceholder")}),o("div",{key:"931a632127e9f50995ffec53eee26cffdfa0fe41",class:"description footer-desc"},o("p",{key:"8ea59fac6743a0f151d550e1dec48559bff26ec1"},"By sending this report, you agree to Nylas’ access to the data necessary to respond to this issue, subject to Nylas’"," ",o("a",{key:"3324f7bfd5018229eec043d02003c619b7364cf7",href:"https://www.nylas.com/privacy-policy/",target:"_blank",rel:"nofollow noreferrer noopener"},"Privacy Policy"),".")),o("div",{key:"75476fceee9f6d0b2448346c9648134247326a51",class:{footer:true}},o("button-component",{key:"43c66ecfcd88222a25c973c94e807fe8ae0896eb",variant:"invisible",onClick:e=>this.closeModal(e),part:"nfbf__button-outline nfbf__cancel-cta"},`${s.t("feedbackModalCloseButton")}`),o("button-component",{key:"6162b5d049973d8f2bd8b9b6e7a38e27da47f5c2",variant:"primary",onClick:this.handleConfirmBookingButtonClicked,part:"nfbf__button-outline nfbf__reschedule-cta"},`${s.t("feedbackModalSubmitButton")}`))))}get host(){return n(this)}};f([l({name:"nylas-feedback-form",stateToProps:new Map([]),eventToProps:{feedbackSubmitted:async(e,a)=>{}},localPropsToProp:new Map([["themeConfig","themeConfig"]]),fireRegisterEvent:true}),d("design:type",Function),d("design:paramtypes",[]),d("design:returntype",void 0)],i.prototype,"render",null);i.style=t;export{i as nylas_feedback_form};
+import{r as e,i as a,h as o,a as r,e as n}from"./index-3e0d6890.js";import{R as l}from"./register-component-8b5587d5.js";import{a as c,i as s}from"./utils-ac8fef1e.js";import"./utc-290d564f.js";const t=':host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--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}.card-wrapper{background:var(--nylas-base-0);display:flex;flex-direction:column;font-family:var(--nylas-font-family);background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;padding:32px;width:562px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.card-wrapper{width:100%;border-radius:0px}}.header{overflow-wrap:anywhere;display:flex;flex-direction:column;font-size:16px;font-weight:400}.header h2{color:var(--nylas-base-900);font-size:24px;font-weight:600;text-align:left;margin:0}.description.title-desc{margin-bottom:2rem}.description.footer-desc{margin-top:2rem}.description.footer-desc a{color:var(--nylas-primary);text-decoration:none}.description p{margin:0;font-size:18px;color:var(--nylas-base-600)}.footer{margin-top:1rem;padding-top:1rem;display:flex;justify-content:flex-end;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}.close-button{width:100%;display:flex;justify-content:flex-end}.close-button button-component button{padding:0;height:auto}.close-button button-component button:hover{background-color:transparent !important}button-component{--dot-color:var(--nylas-base-700)}';var f=undefined&&undefined.__decorate||function(e,a,o,r){var n=arguments.length,l=n<3?a:r===null?r=Object.getOwnPropertyDescriptor(a,o):r,c;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")l=Reflect.decorate(e,a,o,r);else for(var s=e.length-1;s>=0;s--)if(c=e[s])l=(n<3?c(l):n>3?c(a,o,l):c(a,o))||l;return n>3&&l&&Object.defineProperty(a,o,l),l};var d=undefined&&undefined.__metadata||function(e,a){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(e,a)};const i=class{constructor(o){e(this,o);this.feedbackModalClosed=a(this,"feedbackModalClosed",7);this.feedbackSubmitted=a(this,"feedbackSubmitted",7);this.triggerValidation=a(this,"triggerValidation",7);this.handleConfirmBookingButtonClicked=()=>{const e=this.triggerValidation.emit();if(e.defaultPrevented){return}this.feedbackSubmitted.emit({feedback:this.feedbackMessage})};this.themeConfig=undefined;this.feedbackMessage=""}connectedCallback(){}disconnectedCallback(){}async componentWillLoad(){c(`[nylas-feedback-form] Component will load`)}async componentDidLoad(){c(`[nylas-feedback-form] Component did load`);this.applyThemeConfig(this.themeConfig)}applyThemeConfig(e){if(e){for(const[a,o]of Object.entries(e)){this.host.style.setProperty(`${a}`,o)}}}handleFormInputChanged(e){c(`[nylas-feedback-form] Form input changed`);if(!e.detail.value){return}this.triggerValidation.emit();if(e.detail.name==="feedback"){this.feedbackMessage=e.detail.value}}closeModal(e){e.preventDefault();e.stopImmediatePropagation();this.feedbackModalClosed.emit()}render(){return o(r,{key:"ccc60c0b34b1c9516f6f12d984026f9ccb832cb6",part:"nfbf"},o("div",{key:"084c2e2813f769006bf2375bbbe7fbf8759c52d0",class:"card-wrapper",part:"nfbfc__card"},o("div",{key:"c0267b2273f7939b46b77b29c61f1e07167894ad",class:"close-button"},o("button-component",{key:"b512bfb8c3fe6bf66dbe4bbe73dd7eadca1f1584",tooltip:"Close",id:"close",variant:"invisible",onClick:e=>this.closeModal(e),part:"nfbf__close-button"},o("close-icon",{key:"d5249055a1f9fbc4669b7f97dccf3a4b0ba79f19"}))),o("div",{key:"44d48e9f33f8335837ea3ec029d7af111f819c49",class:"header"},o("h2",{key:"deceb8ba28d0aaad4474e199c9a033dc899dd1b0",slot:"card-title",part:"nfbf__title"},s.t("feedbackFormTitle"))),o("div",{key:"b62b992cb2d87d6c165fac6b0b6ed9eb980f8b3b",class:"description title-desc"},o("p",{key:"163c7941aab851ae6e5947066bf830e29673d578"},s.t("feedbackFormDescription"))),o("textarea-component",{key:"6ce1ed4b951cac69884cee8c3543cf448dd9f692",label:s.t("feedbackMessageLabel"),required:true,maxLength:500,part:"nfbf__description",name:"feedback",placeholder:s.t("feedbackMessagePlaceholder")}),o("div",{key:"931a632127e9f50995ffec53eee26cffdfa0fe41",class:"description footer-desc"},o("p",{key:"8ea59fac6743a0f151d550e1dec48559bff26ec1"},"By sending this report, you agree to Nylas’ access to the data necessary to respond to this issue, subject to Nylas’"," ",o("a",{key:"3324f7bfd5018229eec043d02003c619b7364cf7",href:"https://www.nylas.com/privacy-policy/",target:"_blank",rel:"nofollow noreferrer noopener"},"Privacy Policy"),".")),o("div",{key:"75476fceee9f6d0b2448346c9648134247326a51",class:{footer:true}},o("button-component",{key:"43c66ecfcd88222a25c973c94e807fe8ae0896eb",variant:"invisible",onClick:e=>this.closeModal(e),part:"nfbf__button-outline nfbf__cancel-cta"},`${s.t("feedbackModalCloseButton")}`),o("button-component",{key:"6162b5d049973d8f2bd8b9b6e7a38e27da47f5c2",variant:"primary",onClick:this.handleConfirmBookingButtonClicked,part:"nfbf__button-outline nfbf__reschedule-cta"},`${s.t("feedbackModalSubmitButton")}`))))}get host(){return n(this)}};f([l({name:"nylas-feedback-form",stateToProps:new Map([]),eventToProps:{feedbackSubmitted:async(e,a)=>{}},localPropsToProp:new Map([["themeConfig","themeConfig"]]),fireRegisterEvent:true}),d("design:type",Function),d("design:paramtypes",[]),d("design:returntype",void 0)],i.prototype,"render",null);i.style=t;export{i as nylas_feedback_form};
 //# sourceMappingURL=nylas-feedback-form.entry.js.map