@nylas/web-elements 2.2.3 → 2.2.4

package/dist/components/{p-Ci-3P4oO.js → p-Ce1kG2WA.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-Bht9ktsW.js';
 import { f as TIME_PERIODS } from './p-DUCeQ1R4.js';
-import { a as debug, b as instance } from './p-2BdSZySU.js';
+import { a as debug, b as instance } from './p-CULO8bTo.js';
 import { d as defineCustomElement$4 } from './p-PeEnpB8P.js';
 import { d as defineCustomElement$3 } from './p-CEoh34h7.js';
 import { d as defineCustomElement$2 } from './p-ClTk9Ttz.js';
@@ -189,6 +189,6 @@ function defineCustomElement() {
 }
 
 export { TimePeriodSelector as T, defineCustomElement as d };
-//# sourceMappingURL=p-Ci-3P4oO.js.map
+//# sourceMappingURL=p-Ce1kG2WA.js.map
 
-//# sourceMappingURL=p-Ci-3P4oO.js.map
+//# sourceMappingURL=p-Ce1kG2WA.js.map

package/dist/components/{p-Ci-3P4oO.js.map → p-Ce1kG2WA.js.map}

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

package/dist/components/{p-DMDjzHug.js → p-ClSuoTwF.js}

@@ -1,14 +1,14 @@
 import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
-import { R as RegisterComponent } from './p--4oNPYSm.js';
-import { b as instance, a as debug } from './p-2BdSZySU.js';
+import { R as RegisterComponent } from './p-DtDGPXZR.js';
+import { b as instance, a as debug } from './p-CULO8bTo.js';
 import { b as DEFAULT_FORM_FIELD_TYPES, F as FIELD_TYPES } from './p-DUCeQ1R4.js';
 import { d as defineCustomElement$a } from './p-CGmeyeVS.js';
 import { d as defineCustomElement$9 } from './p-PeEnpB8P.js';
 import { d as defineCustomElement$8 } from './p-_0P0Tp97.js';
 import { d as defineCustomElement$7 } from './p-1E2RseZF.js';
-import { d as defineCustomElement$6 } from './p-DcoRpHVy.js';
-import { d as defineCustomElement$5 } from './p-MX2k8GbG.js';
-import { d as defineCustomElement$4 } from './p-C1-hLcxk.js';
+import { d as defineCustomElement$6 } from './p-cT1Q8Q-G.js';
+import { d as defineCustomElement$5 } from './p-DBRBbTgP.js';
+import { d as defineCustomElement$4 } from './p-BQ1_MrWH.js';
 import { d as defineCustomElement$3 } from './p-DlcSImKX.js';
 import { d as defineCustomElement$2 } from './p-ClTk9Ttz.js';
 import { d as defineCustomElement$1 } from './p-D7lRYhTx.js';
@@ -3197,6 +3197,6 @@ function defineCustomElement() {
 }
 
 export { NylasBookingFormConfig as N, defineCustomElement as d };
-//# sourceMappingURL=p-DMDjzHug.js.map
+//# sourceMappingURL=p-ClSuoTwF.js.map
 
-//# sourceMappingURL=p-DMDjzHug.js.map
+//# sourceMappingURL=p-ClSuoTwF.js.map