@nylas/web-elements 0.0.0-canary-20251202205510 → 0.0.0-canary-20251202215015

package/dist/components/p-07Ul9BQq.js.map

@@ -1 +0,0 @@
-{"file":"p-07Ul9BQq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.scss?tag=nylas-selected-event-card&encapsulation=shadow","src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n  @include default-css-variables;\n  display: block;\n  position: relative;\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.event-card {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 4px;\n  width: calc(100% - 3rem);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 3rem 1.5rem 1.5rem 1.5rem;\n  position: relative;\n  box-shadow:\n    0px 1px 3px 0px rgba(0, 0, 0, 0.1),\n    0px 1px 2px 0px rgba(0, 0, 0, 0.06);\n\n  @media #{$mobile} {\n    margin-bottom: 2rem;\n  }\n}\n\n.nylas-selected-event-card__date {\n  font-size: min(max(16px, 3vw), 18px);\n  font-weight: 600;\n}\n\n.nylas-selected-event-card__time {\n  font-size: 16px;\n  font-weight: 500;\n}\n\n.calendar-icon {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n}\n\ncalendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n.event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 8px;\n\n  gap: 4px;\n  align-items: center;\n\n  @media #{$mobile} {\n    margin-bottom: 16px;\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { NylasSchedulerConnector } from '../../..';\nimport type { ThemeConfig, Timeslot } from '@nylas/core';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatBookedEventDate } from '@/utils/utils';\nimport { LANGUAGE_CODE, LANGUAGE_CODE_TO_LOCALE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-selected-event-card` component is a UI component that displays the selected event card.\n *\n * @part nsec - The selected event card component.\n * @part nsec__card - The card component.\n * @part nsec__icon - The calendar icon.\n * @part nsec__date - The date selected.\n * @part nsec__time - The timeslot selected.\n * @part nsec__timezone - The timezone selected.\n */\n@Component({\n  tag: 'nylas-selected-event-card',\n  styleUrl: 'nylas-selected-event-card.scss',\n  shadow: true,\n})\nexport class NylasSelectedEventCard {\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasSelectedEventCardElement;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date;\n\n  /**\n   * The selected time.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: LANGUAGE_CODE;\n  /**\n   * The 12-hour time format.\n   */\n  @Prop() hour12?: boolean;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-selected-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-selected-event-card] Component did load`);\n    if (!this.selectedDate) {\n      console.warn('[nylas-selected-event-card] \"selectedDate\" prop is not provided.');\n    }\n    if (!this.selectedTimeslot) {\n      console.warn('[nylas-selected-event-card] \"selectedTimeslot\" prop is not provided.');\n    }\n    this.applyThemeConfig(this.themeConfig);\n    const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en'];\n    const timeFormat = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n      hour12: this.hour12,\n    });\n\n    this.startTime = timeFormat.format(new Date(this.selectedTimeslot?.start_time as Date));\n    this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time as Date));\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  @RegisterComponent<NylasSelectedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-selected-event-card',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.hour12', 'hour12'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nsec\">\n        <div class=\"event-card\" part=\"nsec__card\">\n          <div class=\"calendar-icon\" part=\"nsec__icon\">\n            <calendar-icon />\n          </div>\n          <div class=\"nylas-selected-event-card__date\" part=\"nsec__date\">\n            {this.selectedDate\n              ? capitalizeFirstLetter(\n                  formatBookedEventDate(this.selectedTimeslot?.start_time as Date, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en']),\n                )\n              : '-'}\n          </div>\n          <div class=\"nylas-selected-event-card__time\" part=\"nsec__time\">\n            {this.startTime} - {this.endTime}\n          </div>\n        </div>\n        <div class=\"event-timezone\" part=\"nsec__timezone\">\n          <globe-icon></globe-icon>\n          {TIMEZONE_MAP[this.selectedTimezone]}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}