@nylas/web-elements 0.0.0-canary-20241015194719 → 0.0.0-canary-20241017202051

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/dist/cdn/input-image-url/input-image-url.es.js +365 -365
  2. package/dist/cdn/nylas-additional-participants/nylas-additional-participants.es.js +46 -48
  3. package/dist/cdn/nylas-confirmation-email/nylas-confirmation-email.es.js +86 -82
  4. package/dist/cdn/nylas-custom-booking-flow/nylas-custom-booking-flow.es.js +1 -1
  5. package/dist/cdn/nylas-editor-tabs/nylas-editor-tabs.es.js +4710 -4700
  6. package/dist/cdn/nylas-event-duration/nylas-event-duration.es.js +228 -228
  7. package/dist/cdn/nylas-event-info/nylas-event-info.es.js +2 -2
  8. package/dist/cdn/nylas-event-limits/nylas-event-limits.es.js +2 -2
  9. package/dist/cdn/nylas-form-card/nylas-form-card.es.js +1 -1
  10. package/dist/cdn/nylas-reminder-emails/nylas-reminder-emails.es.js +2289 -2281
  11. package/dist/cdn/nylas-reminder-time/nylas-reminder-time.es.js +2253 -2245
  12. package/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js +53 -43
  13. package/dist/cdn/nylas-scheduling/nylas-scheduling.es.js +4 -3
  14. package/dist/cdn/nylas-timeslot-picker/nylas-timeslot-picker.es.js +4 -3
  15. package/dist/cjs/calendar-agenda-fill-icon_54.cjs.entry.js +60 -54
  16. package/dist/cjs/calendar-agenda-fill-icon_54.cjs.entry.js.map +1 -1
  17. package/dist/cjs/loader.cjs.js +1 -1
  18. package/dist/cjs/nylas-booked-event-card_12.cjs.entry.js +2 -2
  19. package/dist/cjs/nylas-booked-event-card_12.cjs.entry.js.map +1 -1
  20. package/dist/cjs/nylas-form-card.cjs.entry.js +1 -1
  21. package/dist/cjs/nylas-web-elements.cjs.js +1 -1
  22. package/dist/collection/collection-manifest.json +1 -1
  23. package/dist/collection/components/design-system/input-image-url/input-image-url.js +20 -2
  24. package/dist/collection/components/design-system/input-image-url/input-image-url.js.map +1 -1
  25. package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.js +2 -2
  26. package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.js.map +1 -1
  27. package/dist/collection/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.js +12 -16
  28. package/dist/collection/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.js.map +1 -1
  29. package/dist/collection/components/scheduler-editor/nylas-additional-participants/test/nylas-additional-participants.spec.js +106 -0
  30. package/dist/collection/components/scheduler-editor/nylas-additional-participants/test/nylas-additional-participants.spec.js.map +1 -0
  31. package/dist/collection/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.js +52 -28
  32. package/dist/collection/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.js.map +1 -1
  33. package/dist/collection/components/scheduler-editor/nylas-confirmation-email/test/nylas-confirmation-email.spec.js +33 -0
  34. package/dist/collection/components/scheduler-editor/nylas-confirmation-email/test/nylas-confirmation-email.spec.js.map +1 -0
  35. package/dist/collection/components/scheduler-editor/nylas-event-duration/nylas-event-duration.js +5 -3
  36. package/dist/collection/components/scheduler-editor/nylas-event-duration/nylas-event-duration.js.map +1 -1
  37. package/dist/collection/components/scheduler-editor/nylas-event-duration/test/nylas-event-duration.spec.js +55 -0
  38. package/dist/collection/components/scheduler-editor/nylas-event-duration/test/nylas-event-duration.spec.js.map +1 -0
  39. package/dist/collection/components/scheduler-editor/nylas-event-info/nylas-event-info.js +1 -1
  40. package/dist/collection/components/scheduler-editor/nylas-event-limits/nylas-event-limits.js +1 -1
  41. package/dist/collection/components/scheduler-editor/nylas-form-card/nylas-form-card.js +1 -1
  42. package/dist/collection/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.js +23 -30
  43. package/dist/collection/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.js.map +1 -1
  44. package/dist/collection/components/scheduler-editor/nylas-reminder-time/test/nylas-reminder-time.spec.js +37 -0
  45. package/dist/collection/components/scheduler-editor/nylas-reminder-time/test/nylas-reminder-time.spec.js.map +1 -0
  46. package/dist/components/input-image-url2.js +6 -2
  47. package/dist/components/input-image-url2.js.map +1 -1
  48. package/dist/components/nylas-additional-participants2.js +12 -16
  49. package/dist/components/nylas-additional-participants2.js.map +1 -1
  50. package/dist/components/nylas-confirmation-email2.js +14 -5
  51. package/dist/components/nylas-confirmation-email2.js.map +1 -1
  52. package/dist/components/nylas-event-duration2.js +5 -3
  53. package/dist/components/nylas-event-duration2.js.map +1 -1
  54. package/dist/components/nylas-event-info2.js +1 -1
  55. package/dist/components/nylas-event-limits2.js +1 -1
  56. package/dist/components/nylas-form-card2.js +1 -1
  57. package/dist/components/nylas-reminder-time2.js +23 -29
  58. package/dist/components/nylas-reminder-time2.js.map +1 -1
  59. package/dist/components/nylas-timeslot-picker2.js +2 -2
  60. package/dist/components/nylas-timeslot-picker2.js.map +1 -1
  61. package/dist/esm/calendar-agenda-fill-icon_54.entry.js +60 -54
  62. package/dist/esm/calendar-agenda-fill-icon_54.entry.js.map +1 -1
  63. package/dist/esm/loader.js +1 -1
  64. package/dist/esm/nylas-booked-event-card_12.entry.js +2 -2
  65. package/dist/esm/nylas-booked-event-card_12.entry.js.map +1 -1
  66. package/dist/esm/nylas-form-card.entry.js +1 -1
  67. package/dist/esm/nylas-web-elements.js +1 -1
  68. package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
  69. package/dist/nylas-web-elements/nylas-web-elements.esm.js.map +1 -1
  70. package/dist/nylas-web-elements/p-1ce8b1c3.entry.js +8 -0
  71. package/dist/nylas-web-elements/p-1ce8b1c3.entry.js.map +1 -0
  72. package/dist/nylas-web-elements/{p-698d229c.entry.js → p-7a1d51ab.entry.js} +2 -2
  73. package/dist/nylas-web-elements/{p-698d229c.entry.js.map → p-7a1d51ab.entry.js.map} +1 -1
  74. package/dist/nylas-web-elements/p-bbf86b8c.entry.js +2 -0
  75. package/dist/types/components/design-system/input-image-url/input-image-url.d.ts +4 -0
  76. package/dist/types/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.d.ts +1 -1
  77. package/dist/types/components/scheduler-editor/nylas-confirmation-email/nylas-confirmation-email.d.ts +5 -1
  78. package/dist/types/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.d.ts +1 -1
  79. package/dist/types/components.d.ts +18 -6
  80. package/package.json +3 -3
  81. package/dist/nylas-web-elements/p-b9a8d404.entry.js +0 -8
  82. package/dist/nylas-web-elements/p-b9a8d404.entry.js.map +0 -1
  83. package/dist/nylas-web-elements/p-f4334e3a.entry.js +0 -2
  84. /package/dist/nylas-web-elements/{p-f4334e3a.entry.js.map → p-bbf86b8c.entry.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"nylas-event-duration.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-event-duration` component is a form input for the duration of an event.\n *\n * @part ned - The event duration container\n * @part ned__dropdown - The dropdown container for the duration increment\n * @part ned__dropdown-button - The dropdown button for the duration increment\n * @part ned__dropdown-content - The dropdown content for the duration increment\n * @part ned__input_dropdown - The input dropdown container for the duration minutes\n * @part ned__input_dropdown-input - The input for the duration minutes\n * @part ned__input_dropdown-content - The dropdown content for the input duration minutes\n */\n@Component({\n tag: 'nylas-event-duration',\n styleUrl: 'nylas-event-duration.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventDuration {\n /**\n * The host element <nylas-event-duration>\n */\n @Element() host!: HTMLElement;\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n\n /**\n * @standalone\n * The name of the event duration. Default is 'duration'.\n */\n @Prop() name: string = 'duration';\n /**\n * @standalone\n * The event duration in minutes as set in the configuration.\n */\n @Prop() eventDurationMinutes?: number;\n\n /**\n * The selected event duration state. This defaults to the event duration from the configuration or 30 minutes.\n */\n @State() duration: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 30;\n /**\n * The duration in minutes. This defaults to the event duration from the configuration or 30 minutes.\n */\n @State() durationMinutes!: number;\n /**\n * The duration increment. This defaults to minute(s).\n */\n @State() durationIncrement!: number;\n /**\n * The durationMinutesOptions for the dropdown.\n */\n @State() durationMinutesOptions = [\n { value: 15, label: '15' },\n { value: 30, label: '30' },\n { value: 45, label: '45' },\n { value: 60, label: '60' },\n ];\n\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\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-duration', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newVal: Configuration) {\n const configDuration = newVal?.availability?.duration_minutes;\n if (configDuration) {\n this.duration = configDuration >= 60 ? configDuration / 60 : configDuration;\n this.durationMinutes = configDuration ? configDuration : 30;\n this.durationIncrement = configDuration >= 60 ? 60 : 1;\n }\n }\n\n @Watch('durationMinutes')\n durationMinutesChangedHandler(newValue: number, oldValue: number) {\n debug('nylas-event-duration', 'durationMinutesChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n }\n\n /**\n * Event emitted when the event duration changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-event-duration', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-duration', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n this.setDurationMintueOptions();\n }\n\n componentDidLoad() {\n debug('nylas-event-duration', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n }\n this.duration = this.duration ? this.duration : this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 30;\n this.durationMinutes = this.durationMinutes ? this.durationMinutes : this.duration ? this.duration : 30;\n this.durationIncrement = this.durationIncrement ? this.durationIncrement : this.duration >= 60 ? 60 : 1;\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n\n disconnectedCallback() {\n debug('nylas-event-duration', 'disconnectedCallback');\n }\n\n setDurationMintueOptions() {\n if (this.durationIncrement === 1) {\n this.durationMinutesOptions = [\n { value: 15, label: '15' },\n { value: 30, label: '30' },\n { value: 45, label: '45' },\n { value: 60, label: '60' },\n ];\n } else {\n this.durationMinutesOptions = Array.from({ length: 23 }, (_, i) => ({ value: i + 1, label: (i + 1).toString() }));\n }\n return this.durationMinutesOptions;\n }\n\n handleChange(event) {\n this.duration = event.target.value;\n this.durationMinutes = this.duration * this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n const { value } = event.detail;\n this.durationIncrement = parseInt(value);\n if (this.durationIncrement === 1) {\n this.duration = 60;\n } else {\n this.duration = 1;\n }\n this.setDurationMintueOptions();\n this.durationMinutes = this.duration * this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n\n @Listen('inputOptionChanged')\n inputOptionChangedHandler(event: CustomEvent<{ value: number; name: string }>) {\n debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);\n const { value } = event.detail;\n this.duration = value;\n this.durationMinutes = this.duration * this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n }\n\n @RegisterComponent<NylasEventDuration, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-duration',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const durationOptions = [\n { value: 1, label: 'minute' },\n { value: 60, label: 'hour' },\n ];\n\n return (\n <Host>\n <div class=\"nylas-event-duration\" part=\"ned\">\n <label htmlFor=\"duration\">\n Event duration<span class=\"required\">*</span>\n </label>\n <div class=\"nylas-event-duration__wrapper\">\n <input-dropdown\n name={'event-duration'}\n options={this.durationMinutesOptions}\n inputValue={this.duration.toString()}\n exportparts=\"id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content\"\n defaultInputOption={this.durationMinutesOptions.find(i => i.value == this.duration)}\n />\n {this.durationIncrement && (\n <select-dropdown\n name={'event-duration'}\n options={durationOptions}\n pluralizedLabel={this.duration > 1 ? 's' : ''}\n exportparts=\"sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content\"\n defaultSelectedOption={durationOptions.find(i => i.value == this.durationIncrement)}\n withSearch={false}\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"nylas-event-duration.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-event-duration/nylas-event-duration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-event-duration` component is a form input for the duration of an event.\n *\n * @part ned - The event duration container\n * @part ned__dropdown - The dropdown container for the duration increment\n * @part ned__dropdown-button - The dropdown button for the duration increment\n * @part ned__dropdown-content - The dropdown content for the duration increment\n * @part ned__input_dropdown - The input dropdown container for the duration minutes\n * @part ned__input_dropdown-input - The input for the duration minutes\n * @part ned__input_dropdown-content - The dropdown content for the input duration minutes\n */\n@Component({\n tag: 'nylas-event-duration',\n styleUrl: 'nylas-event-duration.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventDuration {\n /**\n * The host element <nylas-event-duration>\n */\n @Element() host!: HTMLElement;\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n\n /**\n * @standalone\n * The name of the event duration. Default is 'duration'.\n */\n @Prop() name: string = 'duration';\n /**\n * @standalone\n * The event duration in minutes as set in the configuration.\n */\n @Prop() eventDurationMinutes?: number;\n\n /**\n * The selected event duration state. This defaults to the event duration from the configuration or 30 minutes.\n */\n @State() duration: number = this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 30;\n /**\n * The duration in minutes. This defaults to the event duration from the configuration or 30 minutes.\n */\n @State() durationMinutes!: number;\n /**\n * The duration increment. This defaults to minute(s).\n */\n @State() durationIncrement!: number;\n /**\n * The durationMinutesOptions for the dropdown.\n */\n @State() durationMinutesOptions = [\n { value: 15, label: '15' },\n { value: 30, label: '30' },\n { value: 45, label: '45' },\n { value: 60, label: '60' },\n ];\n\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\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-duration', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newVal: Configuration) {\n const configDuration = newVal?.availability?.duration_minutes;\n if (configDuration) {\n this.duration = configDuration >= 60 ? configDuration / 60 : configDuration;\n this.durationMinutes = configDuration ? configDuration : 30;\n this.durationIncrement = configDuration >= 60 ? 60 : 1;\n }\n }\n\n @Watch('durationMinutes')\n durationMinutesChangedHandler(newValue: number, oldValue: number) {\n debug('nylas-event-duration', 'durationMinutesChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n }\n\n /**\n * Event emitted when the event duration changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-event-duration', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-duration', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-duration', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n }\n this.duration = this.duration ? this.duration : this.eventDurationMinutes ? (this.eventDurationMinutes >= 60 ? this.eventDurationMinutes / 60 : this.eventDurationMinutes) : 30;\n this.durationMinutes = this.durationMinutes ? this.durationMinutes : this.duration ? this.duration : 30;\n this.durationIncrement = this.durationIncrement ? this.durationIncrement : this.duration >= 60 ? 60 : 1;\n this.setDurationMintueOptions();\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n }\n\n disconnectedCallback() {\n debug('nylas-event-duration', 'disconnectedCallback');\n }\n\n setDurationMintueOptions() {\n if (this.durationIncrement === 1) {\n this.durationMinutesOptions = [\n { value: 15, label: '15' },\n { value: 30, label: '30' },\n { value: 45, label: '45' },\n { value: 60, label: '60' },\n ];\n } else {\n this.durationMinutesOptions = Array.from({ length: 23 }, (_, i) => ({ value: i + 1, label: (i + 1).toString() }));\n }\n return this.durationMinutesOptions;\n }\n\n handleChange(event) {\n this.duration = event.target.value;\n this.durationMinutes = this.duration * this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n const { value } = event.detail;\n this.durationIncrement = parseInt(value);\n if (this.durationIncrement === 1) {\n this.duration = 60;\n } else {\n this.duration = 1;\n }\n this.setDurationMintueOptions();\n this.durationMinutes = this.duration * this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), 'duration');\n }\n\n @Listen('inputOptionChanged')\n inputOptionChangedHandler(event: CustomEvent<{ value: number; name: string }>) {\n debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);\n const { value } = event.detail;\n this.duration = value;\n this.durationMinutes = this.duration * this.durationIncrement;\n this.internals.setFormValue(this.durationMinutes.toString(), this.name);\n }\n\n @RegisterComponent<NylasEventDuration, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-duration',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const durationOptions = [\n { value: 1, label: 'minute' },\n { value: 60, label: 'hour' },\n ];\n\n return (\n <Host>\n <div class=\"nylas-event-duration\" part=\"ned\">\n <label htmlFor=\"duration\">\n Event duration<span class=\"required\">*</span>\n </label>\n <div class=\"nylas-event-duration__wrapper\">\n <input-dropdown\n name={'event-duration'}\n options={this.durationMinutesOptions}\n inputValue={this.duration.toString()}\n exportparts=\"id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content\"\n defaultInputOption={this.durationMinutesOptions.find(i => i.value == this.duration)}\n />\n {this.durationIncrement && (\n <select-dropdown\n name={'event-duration'}\n options={durationOptions}\n pluralizedLabel={this.duration > 1 ? 's' : ''}\n exportparts=\"sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content\"\n defaultSelectedOption={durationOptions.find(i => i.value == this.durationIncrement)}\n withSearch={false}\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,55 @@
1
+ import { newSpecPage } from "@stencil/core/testing";
2
+ import { NylasEventDuration } from "../nylas-event-duration";
3
+ import { InputDropdown } from "../../../design-system/input-dropdown/input-dropdown";
4
+ import { h } from "@stencil/core";
5
+ import { SelectDropdown } from "../../../design-system/select-dropdown/select-dropdown";
6
+ import { selectedConfiguration } from "../../../../utils/test-utils";
7
+ describe('nylas-event-duration', () => {
8
+ let page;
9
+ beforeEach(async () => {
10
+ page = await newSpecPage({
11
+ components: [InputDropdown, SelectDropdown, NylasEventDuration],
12
+ template: () => {
13
+ return h("nylas-event-duration", { name: "eventDuration" });
14
+ },
15
+ });
16
+ await page.waitForChanges();
17
+ });
18
+ afterEach(() => {
19
+ page?.root?.remove();
20
+ });
21
+ it('renders', async () => {
22
+ expect(page.root).toMatchSnapshot();
23
+ });
24
+ it('renders minute duration input options with 15 minute increments when minutes option is selected', async () => {
25
+ const inputDropdown = page.root.shadowRoot.querySelector('input-dropdown');
26
+ const input = inputDropdown.shadowRoot.querySelector('input');
27
+ expect(input).not.toBeNull();
28
+ input.click();
29
+ await page.waitForChanges();
30
+ expect(page.root).toMatchSnapshot();
31
+ });
32
+ it('renders hour duration input options with 1 hour increments when hours option is selected', async () => {
33
+ const config = {
34
+ ...selectedConfiguration,
35
+ availability: {
36
+ ...selectedConfiguration.availability,
37
+ duration_minutes: 60,
38
+ },
39
+ };
40
+ let newPage = await newSpecPage({
41
+ components: [InputDropdown, SelectDropdown, NylasEventDuration],
42
+ template: () => {
43
+ return h("nylas-event-duration", { name: "eventDuration", selectedConfiguration: config });
44
+ },
45
+ });
46
+ await page.waitForChanges();
47
+ const inputDropdown = newPage?.root?.shadowRoot?.querySelector('input-dropdown');
48
+ const input = inputDropdown?.shadowRoot?.querySelector('input');
49
+ expect(input).not.toBeNull();
50
+ input?.click();
51
+ await newPage.waitForChanges();
52
+ expect(page.root).toMatchSnapshot();
53
+ });
54
+ });
55
+ //# sourceMappingURL=nylas-event-duration.spec.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nylas-event-duration.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler-editor/nylas-event-duration/test/nylas-event-duration.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,sDAAsD,CAAC;AACrF,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,IAAI,IAAS,CAAC;IACd,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,kBAAkB,CAAC;YAC/D,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,4BAAsB,IAAI,EAAC,eAAe,GAAG,CAAC;YACvD,CAAC;SACF,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iGAAiG,EAAE,KAAK,IAAI,EAAE;QAC/G,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC3E,MAAM,KAAK,GAAG,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9D,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC7B,KAAK,CAAC,KAAK,EAAE,CAAC;QACd,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0FAA0F,EAAE,KAAK,IAAI,EAAE;QACxG,MAAM,MAAM,GAAG;YACb,GAAG,qBAAqB;YACxB,YAAY,EAAE;gBACZ,GAAG,qBAAqB,CAAC,YAAY;gBACrC,gBAAgB,EAAE,EAAE;aACrB;SACF,CAAC;QACF,IAAI,OAAO,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,kBAAkB,CAAC;YAC/D,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,4BAAsB,IAAI,EAAC,eAAe,EAAC,qBAAqB,EAAE,MAAM,GAAI,CAAC;YACtF,CAAC;SACF,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,aAAa,GAAG,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACjF,MAAM,KAAK,GAAG,aAAa,EAAE,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAChE,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC7B,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,MAAM,OAAO,CAAC,cAAc,EAAE,CAAC;QAC/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasEventDuration } from '../nylas-event-duration';\nimport { InputDropdown } from '../../../design-system/input-dropdown/input-dropdown';\nimport { h } from '@stencil/core';\nimport { SelectDropdown } from '../../../design-system/select-dropdown/select-dropdown';\nimport { selectedConfiguration } from '@/utils/test-utils';\n\ndescribe('nylas-event-duration', () => {\n let page: any;\n beforeEach(async () => {\n page = await newSpecPage({\n components: [InputDropdown, SelectDropdown, NylasEventDuration],\n template: () => {\n return <nylas-event-duration name=\"eventDuration\" />;\n },\n });\n await page.waitForChanges();\n });\n\n afterEach(() => {\n page?.root?.remove();\n });\n\n it('renders', async () => {\n expect(page.root).toMatchSnapshot();\n });\n\n it('renders minute duration input options with 15 minute increments when minutes option is selected', async () => {\n const inputDropdown = page.root.shadowRoot.querySelector('input-dropdown');\n const input = inputDropdown.shadowRoot.querySelector('input');\n expect(input).not.toBeNull();\n input.click();\n await page.waitForChanges();\n expect(page.root).toMatchSnapshot();\n });\n\n it('renders hour duration input options with 1 hour increments when hours option is selected', async () => {\n const config = {\n ...selectedConfiguration,\n availability: {\n ...selectedConfiguration.availability,\n duration_minutes: 60,\n },\n };\n let newPage = await newSpecPage({\n components: [InputDropdown, SelectDropdown, NylasEventDuration],\n template: () => {\n return <nylas-event-duration name=\"eventDuration\" selectedConfiguration={config} />;\n },\n });\n\n await page.waitForChanges();\n\n const inputDropdown = newPage?.root?.shadowRoot?.querySelector('input-dropdown');\n const input = inputDropdown?.shadowRoot?.querySelector('input');\n expect(input).not.toBeNull();\n input?.click();\n await newPage.waitForChanges();\n expect(page.root).toMatchSnapshot();\n });\n});\n"]}
@@ -30,7 +30,7 @@ export class NylasEventInfo {
30
30
  debug('nylas-event-info', 'disconnectedCallback');
31
31
  }
32
32
  render() {
33
- return (h(Host, { key: 'fb4a8dd875696bc6a4e951f2649a2ab650558489' }, h("nylas-form-card", { key: '193b25acb1374842946ff938755fe8fed7a6d4b9', exportparts: "nfc__header: nei__header" }, h("h1", { key: 'c405c5de0b2eafa15136d10f10de13a158595298', slot: "header-title", class: "nylas-event-info__title", part: "nei__title" }, "Event information"), h("div", { key: 'a49993db49876dfdebd6dbe412d759ce1d38028e', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: 'dc4595988a0b6824f328896c1ea507b96e61e4a8', name: "inputs" })))));
33
+ return (h(Host, { key: 'be80a4e687ce223a8e52bbabc2e8acadcb194b11' }, h("nylas-form-card", { key: 'c96b77795ec2516889acf0f78c5eb723b26dd89c', exportparts: "nfc__header: nei__header" }, h("h1", { key: '890113187adcd6be1ab1d1beb489fe3a80124617', slot: "header-title", class: "nylas-event-info__title", part: "nei__title" }, "Event information"), h("div", { key: '44eaaae3833654530706dc93077b43a7597acc2c', slot: "content", class: "nylas-event-info__content" }, h("slot", { key: '7af737a67cb007c0ede7db5aa075828311d98da3', name: "inputs" })))));
34
34
  }
35
35
  static get is() { return "nylas-event-info"; }
36
36
  static get encapsulation() { return "shadow"; }
@@ -30,7 +30,7 @@ export class NylasEventLimits {
30
30
  debug('nylas-event-limits', 'disconnectedCallback');
31
31
  }
32
32
  render() {
33
- return (h(Host, { key: '8715c9aeba26e6f4c151b0ab58333cc13d3500d3' }, h("nylas-form-card", { key: '2e2bf90762d35ac9fc4a995808b9aa3e4481d6c0', exportparts: "nfc__header: nel__header" }, h("h1", { key: 'b3689912282e3215d862ca06c75fae95b67e501f', slot: "header-title", class: "nylas-event-limits__title" }, "Event limits"), h("div", { key: 'bd5513f8c0cc573f14afeadfafe591b64b904920', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: '86ebfd856f0c93d3ad98d800d4ce9e1a8daf2516', name: "inputs" })))));
33
+ return (h(Host, { key: '6a28113e3b403869e77cc3a2c9c3a1bea217dc52' }, h("nylas-form-card", { key: 'cf9004d044222d796ae59df58737ad9719a20576', exportparts: "nfc__header: nel__header" }, h("h1", { key: 'ffeeb7a5741c9f07fb4f9bd84016b1707e2b55b7', slot: "header-title", class: "nylas-event-limits__title" }, "Event limits"), h("div", { key: '7b51592d95736f860ec805950275a18e9d914c32', slot: "content", class: "nylas-event-limits__content" }, h("slot", { key: '53e9098d736eedf5b22e1b8ae712ec22c8ca865e', name: "inputs" })))));
34
34
  }
35
35
  static get is() { return "nylas-event-limits"; }
36
36
  static get encapsulation() { return "shadow"; }
@@ -31,7 +31,7 @@ export class NylasFormCard {
31
31
  checkForMissingSlots(slots, this.host);
32
32
  }
33
33
  render() {
34
- return (h(Host, { key: 'e79321333887319f48356c64cb2e04539edf1d79' }, h("div", { key: '9a33c42c38012c5277ecc0d60523211671866378', class: "nylas-form-card", part: "nfc" }, h("div", { key: '905eed6cd8c79bda19fb3c5ab49802ae697a0ab9', class: "nylas-form-card__header", part: "nfc__header" }, h("slot", { key: 'db749b7eb575845c2b8d8e4a12ea0c3ffea4842a', name: "header-title" }), h("slot", { key: '5b9ac54446f1b1b49a9f0f2e2b45e3785acb9686', name: "header-subtitle" })), h("div", { key: '6893e68e48f990c6dfc3d3c3052dfba988b21807', class: "nylas-form-card__content" }, h("slot", { key: 'fac98a2a1a6b162bc3f4aed735b584c4d5e509a3', name: "content" })))));
34
+ return (h(Host, { key: '5ccd047d1a8bb515dea8aa7b9d7d39265afc31c9' }, h("div", { key: 'c40f52eaa4d099d92d65b0df662cd2de1b5f35c7', class: "nylas-form-card", part: "nfc" }, h("div", { key: '545dabd81dce9b4f6f5f1d129071e1136f62e609', class: "nylas-form-card__header", part: "nfc__header" }, h("slot", { key: '2be9b24f91316235be7132a6466cd16b9dfe813c', name: "header-title" }), h("slot", { key: '3414a084465efc50a3856291dff61d8ef3b3c617', name: "header-subtitle" })), h("div", { key: 'cc07650a55afd7fc5d2429ff3611168977775bc8', class: "nylas-form-card__content" }, h("slot", { key: 'd50dd8dfbfea1ad84876495e72dd03102e2bc0dc', name: "content" })))));
35
35
  }
36
36
  static get is() { return "nylas-form-card"; }
37
37
  static get encapsulation() { return "shadow"; }
@@ -16,22 +16,29 @@ import { RegisterComponent } from "../../../common/register-component";
16
16
  import { REMINDER_MINUTE_OPTIONS, REMINDER_HOUR_OPTIONS, REMINDER_DAY_OPTIONS } from "../../../common/constants";
17
17
  import { debug } from "../../../utils/utils";
18
18
  import { Host, h } from "@stencil/core";
19
+ const reminderTimeOptions = [
20
+ { value: 60 * 24, label: 'day' },
21
+ { value: 60, label: 'hour' },
22
+ { value: 1, label: 'minute' },
23
+ ];
19
24
  function getInitialTimeValue(timeInMinutes) {
20
25
  if (!timeInMinutes)
21
26
  return 30;
22
- if (timeInMinutes >= 60 * 24)
23
- return timeInMinutes / (60 * 24);
24
- if (timeInMinutes >= 90 || timeInMinutes === 60)
25
- return timeInMinutes / 60;
27
+ for (const option of reminderTimeOptions) {
28
+ if (timeInMinutes % option.value === 0) {
29
+ return timeInMinutes / option.value;
30
+ }
31
+ }
26
32
  return timeInMinutes;
27
33
  }
28
34
  function getInitialTimeIncrement(timeInMinutes) {
29
35
  if (!timeInMinutes)
30
- return 30;
31
- if (timeInMinutes >= 60 * 24)
32
- return 60 * 24;
33
- if (timeInMinutes >= 90 || timeInMinutes === 60)
34
- return 60;
36
+ return 1;
37
+ for (const option of reminderTimeOptions) {
38
+ if (timeInMinutes % option.value === 0) {
39
+ return option.value;
40
+ }
41
+ }
35
42
  return 1;
36
43
  }
37
44
  export class NylasReminderTime {
@@ -47,15 +54,6 @@ export class NylasReminderTime {
47
54
  debug('nylas-reminder-time', 'elementNameChangedHandler', newValue);
48
55
  this.host.setAttribute('name', newValue);
49
56
  }
50
- eventReminderTimeMinutesChangedHandler(newValue, oldValue) {
51
- debug('nylas-reminder-time', 'eventReminderTimeMinutesChangedHandler', newValue);
52
- if (newValue === oldValue) {
53
- return;
54
- }
55
- this.reminderTime = getInitialTimeValue(newValue);
56
- this.reminderTimeincrement = getInitialTimeIncrement(newValue);
57
- this.reminderTimeMinutes = newValue;
58
- }
59
57
  reminderTimeMinutesChangedHandler(newValue, oldValue) {
60
58
  debug('nylas-reminder-time', 'reminderTimeMinutesChangedHandler', newValue);
61
59
  if (newValue === oldValue) {
@@ -69,14 +67,17 @@ export class NylasReminderTime {
69
67
  componentWillLoad() {
70
68
  debug('nylas-reminder-time', 'componentWillLoad');
71
69
  this.host.setAttribute('name', this.name);
72
- this.setReminderTimeMinuteOptions();
73
70
  }
74
71
  componentDidLoad() {
75
72
  debug('nylas-reminder-time', 'componentDidLoad');
73
+ this.setReminderTimeMinuteOptions();
76
74
  }
77
75
  disconnectedCallback() {
78
76
  debug('nylas-reminder-time', 'disconnectedCallback');
79
77
  }
78
+ get isInternalsAvailable() {
79
+ return this.internals !== undefined && typeof this.internals.setFormValue === 'function';
80
+ }
80
81
  setReminderTimeMinuteOptions() {
81
82
  if (this.reminderTimeincrement === 1) {
82
83
  this.reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;
@@ -100,22 +101,17 @@ export class NylasReminderTime {
100
101
  }
101
102
  this.setReminderTimeMinuteOptions();
102
103
  this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;
103
- this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
104
+ this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
104
105
  }
105
106
  inputOptionChangedHandler(event) {
106
107
  debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);
107
108
  const { value } = event.detail;
108
109
  this.reminderTime = value;
109
110
  this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;
110
- this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
111
+ this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);
111
112
  }
112
113
  render() {
113
- const reminderTimeOptions = [
114
- { value: 1, label: 'minute' },
115
- { value: 60, label: 'hour' },
116
- { value: 60 * 24, label: 'day' },
117
- ];
118
- return (h(Host, { key: 'd5f118391bdd7e4779f6eca15335285047fdb350' }, h("div", { key: '2dd8d3ba52d4f95480c9cf1fdaf5d0f1f7c1e523', class: "nylas-reminder-time", part: "nrt" }, h("div", { key: '3799c4b266f4078e22ad78b86225ef9abdc5fa49', class: "nylas-reminder-time__wrapper" }, h("input-dropdown", { key: '004b6336c041660e1424ac44f16e82c8a5a2ca53', name: 'reminder-time', options: this.reminderTimeMinutesOptions, inputValue: this.reminderTime.toString(), exportparts: "id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content", defaultInputOption: this.reminderTimeMinutesOptions.find(i => i.value == this.reminderTime) ?? reminderTimeOptions[0] }), h("select-dropdown", { key: '6a42c7f4633d89dd9a94d3c2f119e151613667ec', name: 'reminder-time-unit', options: reminderTimeOptions, pluralizedLabel: this.reminderTime > 1 ? 's' : '', exportparts: "sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content", defaultSelectedOption: reminderTimeOptions.find(i => i.value == this.reminderTimeincrement) ?? reminderTimeOptions[0], withSearch: false })))));
114
+ return (h(Host, { key: 'b089eb10d76d001112d867a61889a685b8908355' }, h("div", { key: '13b8479fb822135c00ff8f97974c8269731b2a84', class: "nylas-reminder-time", part: "nrt" }, h("div", { key: '728e90c61077b1037aa285329f11a09a296b33b4', class: "nylas-reminder-time__wrapper" }, h("input-dropdown", { key: '40a22b75424d4b3b552a2dc1b60e79a8cb595032', name: 'reminder-time', options: this.reminderTimeMinutesOptions, inputValue: this.reminderTime.toString(), exportparts: "id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content", defaultInputOption: this.reminderTimeMinutesOptions.find(i => i.value == this.reminderTime) ?? reminderTimeOptions[0] }), h("select-dropdown", { key: '6128bb953b883be5341ba005438ab353b0016c48', name: 'reminder-time-unit', options: [...reminderTimeOptions].sort((a, b) => a.value - b.value), pluralizedLabel: this.reminderTime > 1 ? 's' : '', exportparts: "sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content", defaultSelectedOption: reminderTimeOptions.find(i => i.value == this.reminderTimeincrement) ?? reminderTimeOptions[0], withSearch: false })))));
119
115
  }
120
116
  static get is() { return "nylas-reminder-time"; }
121
117
  static get encapsulation() { return "shadow"; }
@@ -200,9 +196,6 @@ export class NylasReminderTime {
200
196
  return [{
201
197
  "propName": "name",
202
198
  "methodName": "elementNameChangedHandler"
203
- }, {
204
- "propName": "eventReminderTimeMinutes",
205
- "methodName": "eventReminderTimeMinutesChangedHandler"
206
199
  }, {
207
200
  "propName": "reminderTimeMinutes",
208
201
  "methodName": "reminderTimeMinutesChangedHandler"
@@ -1 +1 @@
1
- {"version":3,"file":"nylas-reminder-time.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { REMINDER_MINUTE_OPTIONS, REMINDER_HOUR_OPTIONS, REMINDER_DAY_OPTIONS } from '@/common/constants';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\nfunction getInitialTimeValue(timeInMinutes: number | undefined) {\n if (!timeInMinutes) return 30;\n if (timeInMinutes >= 60 * 24) return timeInMinutes / (60 * 24);\n if (timeInMinutes >= 90 || timeInMinutes === 60) return timeInMinutes / 60;\n return timeInMinutes;\n}\n\nfunction getInitialTimeIncrement(timeInMinutes: number | undefined) {\n if (!timeInMinutes) return 30;\n if (timeInMinutes >= 60 * 24) return 60 * 24;\n if (timeInMinutes >= 90 || timeInMinutes === 60) return 60;\n return 1;\n}\n\n/**\n * The `nylas-reminder-time` component is a form input for the reminder time before an event.\n *\n * @part nrt - The event reminder container\n * @part nrt - The dropdown container for the reminder time increment\n * @part nrt__dropdown-button - The dropdown button for the reminder time increment\n * @part nrt__dropdown-content - The dropdown content for the reminder time increment\n * @part nrt__input_dropdown - The input dropdown container for the reminder time minutes\n * @part nrt__input_dropdown-input - The input for the reminder time minutes\n * @part nrt__input_dropdown-content - The dropdown content for the input reminder time minutes\n */\n@Component({\n tag: 'nylas-reminder-time',\n styleUrl: 'nylas-reminder-time.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasReminderTime {\n /**\n * The host element <nylas-reminder-time>\n */\n @Element() host!: HTMLElement;\n /**\n * The name of the reminder time. Default is 'reminder time'.\n */\n @Prop() name: string = 'reminder-time';\n /**\n * The event reminder time in minutes as set in the configuration.\n */\n @Prop() eventReminderTimeMinutes?: number;\n /**\n * The selected event reminder time state. This defaults to the reminder time from the configuration or 30 minutes.\n */\n @State() reminderTime: number = getInitialTimeValue(this.eventReminderTimeMinutes);\n /**\n * The reminder time in minutes. This defaults to the reminder time from the configuration or 30 minutes.\n */\n @State() reminderTimeMinutes: number = this.eventReminderTimeMinutes ?? 30;\n /**\n * The reminder time increment. This defaults to minute(s).\n */\n @State() reminderTimeincrement: number = getInitialTimeIncrement(this.eventReminderTimeMinutes);\n /**\n * The reminderTimeMinutesOptions for the dropdown.\n */\n @State() reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;\n\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\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-reminder-time', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('eventReminderTimeMinutes')\n eventReminderTimeMinutesChangedHandler(newValue: number, oldValue: number) {\n debug('nylas-reminder-time', 'eventReminderTimeMinutesChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.reminderTime = getInitialTimeValue(newValue);\n this.reminderTimeincrement = getInitialTimeIncrement(newValue);\n this.reminderTimeMinutes = newValue;\n }\n\n @Watch('reminderTimeMinutes')\n reminderTimeMinutesChangedHandler(newValue: number, oldValue: number) {\n debug('nylas-reminder-time', 'reminderTimeMinutesChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n }\n\n /**\n * Event emitted when the event reminder time changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-reminder-time', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-reminder-time', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n this.setReminderTimeMinuteOptions();\n }\n\n componentDidLoad() {\n debug('nylas-reminder-time', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-reminder-time', 'disconnectedCallback');\n }\n\n setReminderTimeMinuteOptions() {\n if (this.reminderTimeincrement === 1) {\n this.reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;\n } else if (this.reminderTimeincrement === 60) {\n this.reminderTimeMinutesOptions = REMINDER_HOUR_OPTIONS;\n } else this.reminderTimeMinutesOptions = REMINDER_DAY_OPTIONS;\n return this.reminderTimeMinutesOptions;\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n const { value } = event.detail;\n this.reminderTimeincrement = parseInt(value);\n\n if (this.reminderTimeincrement === 1) {\n this.reminderTime = 60;\n } else {\n this.reminderTime = 1;\n }\n\n this.setReminderTimeMinuteOptions();\n this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;\n this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);\n }\n\n @Listen('inputOptionChanged')\n inputOptionChangedHandler(event: CustomEvent<{ value: number; name: string }>) {\n debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);\n const { value } = event.detail;\n this.reminderTime = value;\n this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;\n this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);\n }\n\n @RegisterComponent<NylasReminderTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-reminder-time',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const reminderTimeOptions = [\n { value: 1, label: 'minute' },\n { value: 60, label: 'hour' },\n { value: 60 * 24, label: 'day' },\n ];\n\n return (\n <Host>\n <div class=\"nylas-reminder-time\" part=\"nrt\">\n <div class=\"nylas-reminder-time__wrapper\">\n <input-dropdown\n name={'reminder-time'}\n options={this.reminderTimeMinutesOptions}\n inputValue={this.reminderTime.toString()}\n exportparts=\"id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content\"\n defaultInputOption={this.reminderTimeMinutesOptions.find(i => i.value == this.reminderTime) ?? reminderTimeOptions[0]}\n />\n <select-dropdown\n name={'reminder-time-unit'}\n options={reminderTimeOptions}\n pluralizedLabel={this.reminderTime > 1 ? 's' : ''}\n exportparts=\"sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content\"\n defaultSelectedOption={reminderTimeOptions.find(i => i.value == this.reminderTimeincrement) ?? reminderTimeOptions[0]}\n withSearch={false}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"nylas-reminder-time.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-reminder-time/nylas-reminder-time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { REMINDER_MINUTE_OPTIONS, REMINDER_HOUR_OPTIONS, REMINDER_DAY_OPTIONS } from '@/common/constants';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Listen, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\nconst reminderTimeOptions = [\n { value: 60 * 24, label: 'day' },\n { value: 60, label: 'hour' },\n { value: 1, label: 'minute' },\n];\n\nfunction getInitialTimeValue(timeInMinutes: number | undefined) {\n if (!timeInMinutes) return 30; // Default to 30 minutes if undefined\n\n // Loop through the reminderTimeOptions to find the appropriate division\n for (const option of reminderTimeOptions) {\n if (timeInMinutes % option.value === 0) {\n return timeInMinutes / option.value; // Return the divided value\n }\n }\n\n // If no exact division is found, return the time in minutes\n return timeInMinutes;\n}\n\nfunction getInitialTimeIncrement(timeInMinutes: number | undefined) {\n if (!timeInMinutes) return 1; // Default to minutes if undefined\n\n // Loop through the reminderTimeOptions and check divisibility\n for (const option of reminderTimeOptions) {\n if (timeInMinutes % option.value === 0) {\n return option.value;\n }\n }\n\n // If no suitable option is found, default to minutes\n return 1;\n}\n\n/**\n * The `nylas-reminder-time` component is a form input for the reminder time before an event.\n *\n * @part nrt - The event reminder container\n * @part nrt - The dropdown container for the reminder time increment\n * @part nrt__dropdown-button - The dropdown button for the reminder time increment\n * @part nrt__dropdown-content - The dropdown content for the reminder time increment\n * @part nrt__input_dropdown - The input dropdown container for the reminder time minutes\n * @part nrt__input_dropdown-input - The input for the reminder time minutes\n * @part nrt__input_dropdown-content - The dropdown content for the input reminder time minutes\n */\n@Component({\n tag: 'nylas-reminder-time',\n styleUrl: 'nylas-reminder-time.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasReminderTime {\n /**\n * The host element <nylas-reminder-time>\n */\n @Element() host!: HTMLElement;\n /**\n * The name of the reminder time. Default is 'reminder time'.\n */\n @Prop() name: string = 'reminder-time';\n /**\n * The event reminder time in minutes as set in the configuration.\n */\n @Prop() eventReminderTimeMinutes?: number;\n /**\n * The selected event reminder time state. This defaults to the reminder time from the configuration or 30 minutes.\n */\n @State() reminderTime: number = getInitialTimeValue(this.eventReminderTimeMinutes);\n /**\n * The reminder time in minutes. This defaults to the reminder time from the configuration or 30 minutes.\n */\n @State() reminderTimeMinutes: number = this.eventReminderTimeMinutes ?? 30;\n /**\n * The reminder time increment. This defaults to minute(s).\n */\n @State() reminderTimeincrement: number = getInitialTimeIncrement(this.eventReminderTimeMinutes);\n /**\n * The reminderTimeMinutesOptions for the dropdown.\n */\n @State() reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;\n\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\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-reminder-time', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('reminderTimeMinutes')\n reminderTimeMinutesChangedHandler(newValue: number, oldValue: number) {\n debug('nylas-reminder-time', 'reminderTimeMinutesChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.valueChanged.emit({ value: newValue.toString(), name: this.name });\n }\n\n /**\n * Event emitted when the event reminder time changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-reminder-time', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-reminder-time', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-reminder-time', 'componentDidLoad');\n this.setReminderTimeMinuteOptions();\n }\n\n disconnectedCallback() {\n debug('nylas-reminder-time', 'disconnectedCallback');\n }\n\n /**\n * The unit tests in stencil does not support the internals API.\n * This method checks if the internals API is available.\n * @returns boolean\n */\n get isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function';\n }\n\n setReminderTimeMinuteOptions() {\n if (this.reminderTimeincrement === 1) {\n this.reminderTimeMinutesOptions = REMINDER_MINUTE_OPTIONS;\n } else if (this.reminderTimeincrement === 60) {\n this.reminderTimeMinutesOptions = REMINDER_HOUR_OPTIONS;\n } else this.reminderTimeMinutesOptions = REMINDER_DAY_OPTIONS;\n return this.reminderTimeMinutesOptions;\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n const { value } = event.detail;\n this.reminderTimeincrement = parseInt(value);\n\n if (this.reminderTimeincrement === 1) {\n this.reminderTime = 60;\n } else {\n this.reminderTime = 1;\n }\n\n this.setReminderTimeMinuteOptions();\n this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;\n this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);\n }\n\n @Listen('inputOptionChanged')\n inputOptionChangedHandler(event: CustomEvent<{ value: number; name: string }>) {\n debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);\n const { value } = event.detail;\n this.reminderTime = value;\n this.reminderTimeMinutes = this.reminderTime * this.reminderTimeincrement;\n this.isInternalsAvailable && this.internals.setFormValue(this.reminderTimeMinutes.toString(), this.name);\n }\n\n @RegisterComponent<NylasReminderTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-reminder-time',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-reminder-time\" part=\"nrt\">\n <div class=\"nylas-reminder-time__wrapper\">\n <input-dropdown\n name={'reminder-time'}\n options={this.reminderTimeMinutesOptions}\n inputValue={this.reminderTime.toString()}\n exportparts=\"id_dropdown: nrt__input_dropdown, id_dropdown-input: nrt__input_dropdown-input, id_dropdown-content: nrt__input_dropdown-content\"\n defaultInputOption={this.reminderTimeMinutesOptions.find(i => i.value == this.reminderTime) ?? reminderTimeOptions[0]}\n />\n <select-dropdown\n name={'reminder-time-unit'}\n options={[...reminderTimeOptions].sort((a, b) => a.value - b.value)}\n pluralizedLabel={this.reminderTime > 1 ? 's' : ''}\n exportparts=\"sd_dropdown: nrt__dropdown, sd_dropdown-button: nrt__dropdown-button, sd_dropdown-content: nrt__dropdown-content\"\n defaultSelectedOption={reminderTimeOptions.find(i => i.value == this.reminderTimeincrement) ?? reminderTimeOptions[0]}\n withSearch={false}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,37 @@
1
+ import { newSpecPage } from "@stencil/core/testing";
2
+ import { NylasReminderTime } from "../nylas-reminder-time";
3
+ import { InputDropdown } from "../../../design-system/input-dropdown/input-dropdown";
4
+ import { SelectDropdown } from "../../../design-system/select-dropdown/select-dropdown";
5
+ import { h } from "@stencil/core";
6
+ describe('nylas-reminder-time', () => {
7
+ let page;
8
+ beforeEach(async () => {
9
+ page = await newSpecPage({
10
+ components: [InputDropdown, SelectDropdown, NylasReminderTime],
11
+ template: () => {
12
+ return h("nylas-reminder-time", { eventReminderTimeMinutes: 1320 });
13
+ },
14
+ });
15
+ await page.waitForChanges();
16
+ });
17
+ afterEach(() => {
18
+ page?.root?.remove();
19
+ });
20
+ it('renders', async () => {
21
+ expect(page.root).toMatchSnapshot();
22
+ });
23
+ it('renders hour duration input options with 1 hour increments with 22 hours', async () => {
24
+ const selectDropdown = page.root.shadowRoot.querySelector('select-dropdown');
25
+ const button = selectDropdown.shadowRoot.querySelector('button');
26
+ expect(button).not.toBeNull();
27
+ expect(button.textContent).toBe('hours');
28
+ const inputDropdown = page.root.shadowRoot.querySelector('input-dropdown');
29
+ const input = inputDropdown.shadowRoot.querySelector('input');
30
+ expect(input).not.toBeNull();
31
+ expect(input.value).toBe('22');
32
+ input.click();
33
+ await page.waitForChanges();
34
+ expect(page.root).toMatchSnapshot();
35
+ });
36
+ });
37
+ //# sourceMappingURL=nylas-reminder-time.spec.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nylas-reminder-time.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler-editor/nylas-reminder-time/test/nylas-reminder-time.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sDAAsD,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,IAAI,IAAS,CAAC;IACd,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,iBAAiB,CAAC;YAC9D,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,2BAAqB,wBAAwB,EAAE,IAAI,GAAI,CAAC;YACjE,CAAC;SACF,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0EAA0E,EAAE,KAAK,IAAI,EAAE;QACxF,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC7E,MAAM,MAAM,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjE,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACzC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC3E,MAAM,KAAK,GAAG,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9D,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC7B,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/B,KAAK,CAAC,KAAK,EAAE,CAAC;QACd,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasReminderTime } from '../nylas-reminder-time';\nimport { InputDropdown } from '../../../design-system/input-dropdown/input-dropdown';\nimport { SelectDropdown } from '../../../design-system/select-dropdown/select-dropdown';\nimport { h } from '@stencil/core';\n\ndescribe('nylas-reminder-time', () => {\n let page: any;\n beforeEach(async () => {\n page = await newSpecPage({\n components: [InputDropdown, SelectDropdown, NylasReminderTime],\n template: () => {\n return <nylas-reminder-time eventReminderTimeMinutes={1320} />;\n },\n });\n await page.waitForChanges();\n });\n\n afterEach(() => {\n page?.root?.remove();\n });\n\n it('renders', async () => {\n expect(page.root).toMatchSnapshot();\n });\n\n it('renders hour duration input options with 1 hour increments with 22 hours', async () => {\n const selectDropdown = page.root.shadowRoot.querySelector('select-dropdown');\n const button = selectDropdown.shadowRoot.querySelector('button');\n expect(button).not.toBeNull();\n expect(button.textContent).toBe('hours');\n const inputDropdown = page.root.shadowRoot.querySelector('input-dropdown');\n const input = inputDropdown.shadowRoot.querySelector('input');\n expect(input).not.toBeNull();\n expect(input.value).toBe('22');\n input.click();\n await page.waitForChanges();\n expect(page.root).toMatchSnapshot();\n });\n});\n"]}
@@ -25,6 +25,7 @@ const InputImageUrl = proxyCustomElement(class InputImageUrl extends HTMLElement
25
25
  super();
26
26
  this.__registerHost();
27
27
  this.__attachShadow();
28
+ this.nylasFormInputImageUrlInvalid = createEvent(this, "nylasFormInputImageUrlInvalid", 7);
28
29
  this.valueChanged = createEvent(this, "valueChanged", 7);
29
30
  this.internals = this.attachInternals();
30
31
  this.componentType = 'image-url';
@@ -87,12 +88,15 @@ const InputImageUrl = proxyCustomElement(class InputImageUrl extends HTMLElement
87
88
  this.valueChanged.emit({ value: this.currentImageUrl, name: this.name });
88
89
  })
89
90
  .catch(() => {
90
- this.internals.setValidity({ customError: true }, 'Invalid image URL.');
91
91
  this.errorMessage = 'Invalid image URL.';
92
+ this.nylasFormInputImageUrlInvalid.emit({ value: 'Invalid image URL.', name: this.name });
93
+ if (typeof this.internals.setValidity === 'function') {
94
+ this.internals.setValidity({ customError: true }, 'Invalid image URL.');
95
+ }
92
96
  });
93
97
  }
94
98
  render() {
95
- return (h(Host, { key: '37ae40e1bc1eadb1d66f68b26e66b9b0046752b0' }, h("div", { key: 'fe6024927698ba0d41e4875d0f190cf610afe7d7', class: "logo-container" }, h("div", { key: 'b61b97fb4a518e68773304eaa55833104bc246c8', class: "input-container" }, h("input-component", { key: 'f918ef5a13ec93e71635ca205534894c97243fe4', name: this.name, id: this.name, type: "text", required: false, exportparts: "ic_input: iiu__logo-input-textfield", defaultValue: this.imageUrl ?? '' }), this.errorMessage && h("span", { class: "error-message" }, this.errorMessage)), this.currentImageUrl && !this.errorMessage && (h("div", { class: "logo" }, h("img", { src: this.currentImageUrl, alt: "Logo" }))))));
99
+ return (h(Host, { key: '27db94b782ae96518852a8486821a7f6544492a2' }, h("div", { key: '3923ce12503dd454e716e002b693b8e5f7e7e991', class: "logo-container" }, h("div", { key: '004c0dfb0e5ec721e356b4915fbdd75f84a67301', class: "input-container" }, h("input-component", { key: 'f06812996be4fd6384fffc2c095e62ba7067881d', name: this.name, id: this.name, type: "text", required: false, exportparts: "ic_input: iiu__logo-input-textfield", defaultValue: this.imageUrl ?? '' }), this.errorMessage && h("span", { class: "error-message" }, this.errorMessage)), this.currentImageUrl && !this.errorMessage && (h("div", { class: "logo" }, h("img", { src: this.currentImageUrl, alt: "Logo" }))))));
96
100
  }
97
101
  static get formAssociated() { return true; }
98
102
  get host() { return this; }
@@ -1 +1 @@
1
- {"file":"input-image-url2.js","mappings":"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","names":[],"sources":["src/components/design-system/input-image-url/input-image-url.scss?tag=input-image-url&encapsulation=shadow","src/components/design-system/input-image-url/input-image-url.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.logo-container {\n display: flex;\n flex-direction: row;\n gap: 2rem;\n\n .input-container {\n flex: 1;\n\n span.error-message {\n color: var(--nylas-error);\n }\n }\n\n .logo {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 100px;\n border: var(--nylas-base-200) solid 1px;\n border-radius: var(--nylas-border-radius-2x);\n overflow: hidden;\n padding: 10px;\n\n img {\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n object-position: center;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, isValidImage } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../../scheduler-editor/nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-image-input` component is a UI component that allows users input an image URL and see a preview of the image.\n *\n * @part iiu__logo-input-textfield - The image input textfield\n */\n@Component({\n tag: 'input-image-url',\n styleUrl: 'input-image-url.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class InputImageUrl {\n @Element() host!: HTMLInputImageUrlElement;\n private readonly componentType: string = 'image-url';\n\n /**\n * Image\n */\n @Prop({ attribute: 'image-url' }) imageUrl: string = '';\n /**\n * Error message to display when the image URL is invalid.\n */\n @Prop() errorMessage: string = '';\n /**\n * The name of the component\n */\n @Prop() name: string = 'input-image-url';\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * The current image URL state.\n */\n @State() currentImageUrl: string = this.imageUrl;\n\n /**\n * This event is fired when the image URL is changed\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-image-input', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-image-input', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-image-input', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n this.host.setAttribute('component-type', this.componentType);\n }\n\n componentDidLoad() {\n debug('nylas-image-input', 'componentDidLoad');\n this.currentImageUrl = this.imageUrl;\n this.setImage(this.imageUrl);\n }\n\n componentWillUpdate() {\n debug('nylas-image-input', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-image-input', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-image-input', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-image-input', 'componentDidRender');\n }\n\n /**\n * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-image-input', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('nylasFormInputChanged')\n async nylasFormInputChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n const { name, value } = event.detail;\n\n if (name === this.name) {\n this.setImage(value);\n }\n }\n\n @Listen('nylasFormInputBlurred')\n async nylasFormInputBlurHandler(event: CustomEvent<{ value: string; name: string }>) {\n const { name, value } = event.detail;\n\n if (name === this.name) {\n this.setImage(value);\n }\n }\n\n setImage(value: string) {\n this.errorMessage = '';\n\n isValidImage(value)\n .then(() => {\n this.currentImageUrl = value;\n\n this.internals.setValidity({});\n this.internals.setFormValue(this.currentImageUrl, this.name);\n this.valueChanged.emit({ value: this.currentImageUrl, name: this.name });\n })\n .catch(() => {\n this.internals.setValidity({ customError: true }, 'Invalid image URL.');\n this.errorMessage = 'Invalid image URL.';\n });\n }\n\n @RegisterComponent<InputImageUrl, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-image-input',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n })\n render() {\n return (\n <Host>\n <div class=\"logo-container\">\n <div class=\"input-container\">\n <input-component name={this.name} id={this.name} type=\"text\" required={false} exportparts=\"ic_input: iiu__logo-input-textfield\" defaultValue={this.imageUrl ?? ''} />\n {this.errorMessage && <span class=\"error-message\">{this.errorMessage}</span>}\n </div>\n\n {this.currentImageUrl && !this.errorMessage && (\n <div class=\"logo\">\n <img src={this.currentImageUrl} alt=\"Logo\" />\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"input-image-url2.js","mappings":"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","names":[],"sources":["src/components/design-system/input-image-url/input-image-url.scss?tag=input-image-url&encapsulation=shadow","src/components/design-system/input-image-url/input-image-url.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.logo-container {\n display: flex;\n flex-direction: row;\n gap: 2rem;\n\n .input-container {\n flex: 1;\n\n span.error-message {\n color: var(--nylas-error);\n }\n }\n\n .logo {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 200px;\n height: 100px;\n border: var(--nylas-base-200) solid 1px;\n border-radius: var(--nylas-border-radius-2x);\n overflow: hidden;\n padding: 10px;\n\n img {\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n object-position: center;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, isValidImage } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../../scheduler-editor/nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-image-input` component is a UI component that allows users input an image URL and see a preview of the image.\n *\n * @part iiu__logo-input-textfield - The image input textfield\n */\n@Component({\n tag: 'input-image-url',\n styleUrl: 'input-image-url.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class InputImageUrl {\n @Element() host!: HTMLInputImageUrlElement;\n private readonly componentType: string = 'image-url';\n\n /**\n * Image\n */\n @Prop({ attribute: 'image-url' }) imageUrl: string = '';\n /**\n * Error message to display when the image URL is invalid.\n */\n @Prop() errorMessage: string = '';\n /**\n * The name of the component\n */\n @Prop() name: string = 'input-image-url';\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * The current image URL state.\n */\n @State() currentImageUrl: string = this.imageUrl;\n\n /**\n * This event is fired when the image url is changed and the image is invalid.\n */\n @Event() readonly nylasFormInputImageUrlInvalid!: EventEmitter<{ value: string; name: string }>;\n /**\n * This event is fired when the image URL is changed\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-image-input', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-image-input', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-image-input', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n this.host.setAttribute('component-type', this.componentType);\n }\n\n componentDidLoad() {\n debug('nylas-image-input', 'componentDidLoad');\n this.currentImageUrl = this.imageUrl;\n this.setImage(this.imageUrl);\n }\n\n componentWillUpdate() {\n debug('nylas-image-input', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-image-input', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-image-input', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-image-input', 'componentDidRender');\n }\n\n /**\n * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-image-input', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('nylasFormInputChanged')\n async nylasFormInputChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n const { name, value } = event.detail;\n\n if (name === this.name) {\n this.setImage(value);\n }\n }\n\n @Listen('nylasFormInputBlurred')\n async nylasFormInputBlurHandler(event: CustomEvent<{ value: string; name: string }>) {\n const { name, value } = event.detail;\n\n if (name === this.name) {\n this.setImage(value);\n }\n }\n\n setImage(value: string) {\n this.errorMessage = '';\n\n isValidImage(value)\n .then(() => {\n this.currentImageUrl = value;\n\n this.internals.setValidity({});\n this.internals.setFormValue(this.currentImageUrl, this.name);\n this.valueChanged.emit({ value: this.currentImageUrl, name: this.name });\n })\n .catch(() => {\n this.errorMessage = 'Invalid image URL.';\n this.nylasFormInputImageUrlInvalid.emit({ value: 'Invalid image URL.', name: this.name });\n if (typeof this.internals.setValidity === 'function') {\n this.internals.setValidity({ customError: true }, 'Invalid image URL.');\n }\n });\n }\n\n @RegisterComponent<InputImageUrl, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-image-input',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n })\n render() {\n return (\n <Host>\n <div class=\"logo-container\">\n <div class=\"input-container\">\n <input-component name={this.name} id={this.name} type=\"text\" required={false} exportparts=\"ic_input: iiu__logo-input-textfield\" defaultValue={this.imageUrl ?? ''} />\n {this.errorMessage && <span class=\"error-message\">{this.errorMessage}</span>}\n </div>\n\n {this.currentImageUrl && !this.errorMessage && (\n <div class=\"logo\">\n <img src={this.currentImageUrl} alt=\"Logo\" />\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -75,20 +75,23 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
75
75
  disconnectedCallback() {
76
76
  debug('nylas-additional-participants', 'disconnectedCallback');
77
77
  }
78
+ get isInternalsAvailable() {
79
+ return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';
80
+ }
78
81
  onInputOptionChanged(event) {
79
82
  debug('nylas-additional-participants', 'onInputOptionChanged');
80
- const EMAIL_REGEX = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
83
+ const EMAIL_REGEX = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
81
84
  const index = event.detail.name;
82
85
  const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);
83
86
  if (!participant && this.isRoundRobinConfig) {
84
- this.internals.setValidity({ customError: true }, 'For round robin configuration, participant should be selected from the dropdown.');
87
+ this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'For round robin configuration, participant should be selected from the dropdown.');
85
88
  this.participantErrors[index] = 'For round robin page, participant should be selected from the dropdown.';
86
89
  this.participants[index].is_valid = false;
87
90
  this.participants = [...this.participants];
88
91
  return;
89
92
  }
90
93
  else if (!participant && !EMAIL_REGEX.test(event.detail.value)) {
91
- this.internals.setValidity({ customError: true }, 'Please enter a valid email address');
94
+ this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please enter a valid email address');
92
95
  this.participantErrors[index] = 'Please enter a valid email address';
93
96
  this.participants[index].is_valid = false;
94
97
  this.participants = [...this.participants];
@@ -97,7 +100,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
97
100
  else {
98
101
  this.participantErrors[index] = '';
99
102
  this.participants[index].is_valid = true;
100
- this.internals.setValidity({});
103
+ this.isInternalsAvailable && this.internals.setValidity({});
101
104
  }
102
105
  this.participants[index].email = event.detail.value;
103
106
  this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;
@@ -136,24 +139,17 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
136
139
  this.participants = this.participants.filter((_, i) => i !== index);
137
140
  this.updateFormValue();
138
141
  }
139
- validate(email, index) {
140
- debug('nylas-additional-participants', 'validate');
141
- const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
142
- const valid = regex.test(String(email).toLowerCase());
143
- this.participants[index].is_valid = valid;
144
- this.updateFormValue();
145
- }
146
142
  updateFormValue() {
147
143
  debug('nylas-additional-participants', 'updateFormValue');
148
144
  const participants = this.isRoundRobinConfig ? (this.includeOrganizerAsParticipant ? this.participants : this.participants.filter(p => !p.is_organizer)) : this.participants;
149
145
  if (participants.length === 0) {
150
- this.internals.setValidity({ customError: true }, 'Please add at least one participant');
146
+ this.isInternalsAvailable && this.internals.setValidity({ customError: true }, 'Please add at least one participant');
151
147
  this.error = 'Please add at least one participant';
152
148
  }
153
149
  else {
154
- this.internals.setValidity({});
150
+ this.isInternalsAvailable && this.internals.setValidity({});
155
151
  this.error = '';
156
- this.internals.setFormValue(JSON.stringify(participants), this.name);
152
+ this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(participants), this.name);
157
153
  this.valueChanged.emit({ value: JSON.stringify(participants), name: this.name });
158
154
  }
159
155
  }
@@ -164,7 +160,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
164
160
  });
165
161
  }
166
162
  render() {
167
- return (h(Host, { key: 'a090033dc7d7915ca65100fd1803d2430052b18a', part: "nap" }, h("nylas-form-card", { key: '19203e4c99690200b679943672f89e9d20bc62b5' }, h("h3", { key: '33fbde2341b42cb0529b95a06f80d6dea08ffc52', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Participants"), h("p", { key: 'a8c73ed714ab74309f1a417215b9e56da99a2731', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add people in your team or organization to join the event."), h("div", { key: 'bce67b77333c2db513463acaa952b51d933d43d9', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '35e0bf36996f3daec1d41e1d8c74c636fb72307f' }, this.participants.map((participant, index) => {
163
+ return (h(Host, { key: '16a28d7d8ee91b685a22472d8a90721a5074d798', part: "nap" }, h("nylas-form-card", { key: '9fde59eadfcdf05c3b4add30a5c35f9b21d00c30' }, h("h3", { key: '82e3c3ad537ef4c60d19695f11e481bac2ed31ae', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Participants"), h("p", { key: '4df3d661d2c6801ba8e88d82853ae562ed3be8e8', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add people in your team or organization to join the event."), h("div", { key: '3ccb34354c025b52760433683812acf37b480e77', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '007cf8396921637cf230cc26d73de147169cd250' }, this.participants.map((participant, index) => {
168
164
  return (h("div", { class: 'nylas-additional-participants__input_group', part: "nap__input_group" }, !participant.is_organizer && h("label", null, `Participant ${index}`), h("div", { part: "nap__input_wrapper", class: {
169
165
  'nylas-additional-participants__input_wrapper': true,
170
166
  'nylas-additional-participants__input_wrapper_organizer': participant?.is_organizer === true,
@@ -174,7 +170,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
174
170
  this.includeOrganizerAsParticipant = !this.includeOrganizerAsParticipant;
175
171
  this.updateFormValue();
176
172
  }, checked: this.includeOrganizerAsParticipant }), h("label", { htmlFor: `organizer_participant`, "aria-label": "Include as participant" }, "Participant", h("tooltip-component", { id: "organizer_participant_tooltip" }, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, h("strong", null, "Include Organizer:"), " The organizer (you) will be included in the round-robin rotation. ", h("br", null), h("strong", null, "Exclude Organizer:"), " The organizer (you) will not be included in the round-robin rotation."))))))) : (h("input-dropdown", { id: `${index}`, name: `${index}`, filterable: true, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(index), part: "nap__remove-participant" }, h("close-icon", null))))), !participant.is_valid && (h("p", { class: "nylas-additional-participants__error", part: "nap__error" }, this.participantErrors[index]))));
177
- }), h("p", { key: '51f51ef0614cd93592fae8a32f501d0249b12c5a', class: "nylas-additional-participants__error", part: "nap__error" }, this.error)), h("button", { key: '93605c6ce8fb6b77451ea0f8c06fb23134727c3f', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: '8e6ac25f43f06ad3ee24047a1a7469b13c5a56c7' }), " ", h("span", { key: '511068fb28c498edba86706bef49dcad6633d249' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
173
+ }), h("p", { key: 'f1dd954c137093fa9e474f3886e4b5320aeb5e2e', class: "nylas-additional-participants__error", part: "nap__error" }, this.error)), h("button", { key: '859585010fc9fce314b856f5e7e07ac8b8c47b88', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: 'aec7eb5de30e66bca29b73962f356109471c2e9e' }), " ", h("span", { key: 'f07ecfaa4db46f7954d734314c46f2d773158730' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
178
174
  }
179
175
  static get formAssociated() { return true; }
180
176
  get host() { return this; }