@nylas/web-elements 0.0.0-test-20250320180623 → 0.0.0-test-20250320184617
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.
- package/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js +25 -25
- package/dist/cdn/nylas-scheduling/nylas-scheduling.es.js +247 -247
- package/dist/cjs/button-component_2.cjs.entry.js +1 -1
- package/dist/cjs/button-component_2.cjs.entry.js.map +1 -1
- package/dist/cjs/calendar-agenda-fill-icon_36.cjs.entry.js +17 -18
- package/dist/cjs/calendar-agenda-fill-icon_36.cjs.entry.js.map +1 -1
- package/dist/cjs/chevron-icon_3.cjs.entry.js +1 -1
- package/dist/cjs/chevron-icon_3.cjs.entry.js.map +1 -1
- package/dist/cjs/google-logo-icon_6.cjs.entry.js +5 -5
- package/dist/cjs/google-logo-icon_6.cjs.entry.js.map +1 -1
- package/dist/cjs/input-dropdown_2.cjs.entry.js +1 -1
- package/dist/cjs/input-dropdown_2.cjs.entry.js.map +1 -1
- package/dist/cjs/multi-select-dropdown_2.cjs.entry.js +2 -2
- package/dist/cjs/multi-select-dropdown_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-provider.cjs.entry.js.map +1 -1
- package/dist/cjs/scheduler-store-df3a9a3a.js.map +1 -1
- package/dist/collection/components/design-system/button-component/button-component.js +4 -3
- package/dist/collection/components/design-system/button-component/button-component.js.map +1 -1
- package/dist/collection/components/design-system/input-dropdown/input-dropdown.js +10 -7
- package/dist/collection/components/design-system/input-dropdown/input-dropdown.js.map +1 -1
- package/dist/collection/components/design-system/multi-select-dropdown/multi-select-dropdown.js +5 -4
- package/dist/collection/components/design-system/multi-select-dropdown/multi-select-dropdown.js.map +1 -1
- package/dist/collection/components/design-system/select-dropdown/select-dropdown.js +13 -9
- package/dist/collection/components/design-system/select-dropdown/select-dropdown.js.map +1 -1
- package/dist/collection/components/nylas-provider/nylas-provider.js +1 -1
- package/dist/collection/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.js +2 -2
- package/dist/collection/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-editor-tabs-group/nylas-editor-tabs-group.js +30 -15
- package/dist/collection/components/scheduler-editor/nylas-editor-tabs-group/nylas-editor-tabs-group.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-event-duration/nylas-event-duration.js +15 -16
- package/dist/collection/components/scheduler-editor/nylas-event-duration/nylas-event-duration.js.map +1 -1
- package/dist/collection/connector/shared/api/auth.js.map +1 -1
- package/dist/collection/connector/shared/api/scheduler.js.map +1 -1
- package/dist/components/button-component2.js +1 -1
- package/dist/components/button-component2.js.map +1 -1
- package/dist/components/input-dropdown2.js +1 -1
- package/dist/components/input-dropdown2.js.map +1 -1
- package/dist/components/multi-select-dropdown2.js +2 -2
- package/dist/components/multi-select-dropdown2.js.map +1 -1
- package/dist/components/nylas-buffer-time2.js +2 -2
- package/dist/components/nylas-buffer-time2.js.map +1 -1
- package/dist/components/nylas-editor-tabs-group2.js +5 -5
- package/dist/components/nylas-editor-tabs-group2.js.map +1 -1
- package/dist/components/nylas-event-duration2.js +15 -16
- package/dist/components/nylas-event-duration2.js.map +1 -1
- package/dist/components/nylas-provider.js.map +1 -1
- package/dist/components/scheduler-store.js.map +1 -1
- package/dist/components/select-dropdown2.js +1 -1
- package/dist/components/select-dropdown2.js.map +1 -1
- package/dist/esm/button-component_2.entry.js +1 -1
- package/dist/esm/button-component_2.entry.js.map +1 -1
- package/dist/esm/calendar-agenda-fill-icon_36.entry.js +17 -18
- package/dist/esm/calendar-agenda-fill-icon_36.entry.js.map +1 -1
- package/dist/esm/chevron-icon_3.entry.js +1 -1
- package/dist/esm/chevron-icon_3.entry.js.map +1 -1
- package/dist/esm/google-logo-icon_6.entry.js +5 -5
- package/dist/esm/google-logo-icon_6.entry.js.map +1 -1
- package/dist/esm/input-dropdown_2.entry.js +1 -1
- package/dist/esm/input-dropdown_2.entry.js.map +1 -1
- package/dist/esm/multi-select-dropdown_2.entry.js +2 -2
- package/dist/esm/multi-select-dropdown_2.entry.js.map +1 -1
- package/dist/esm/nylas-provider.entry.js.map +1 -1
- package/dist/esm/scheduler-store-ef022be9.js.map +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
- package/dist/nylas-web-elements/{p-a6a52e17.entry.js → p-09bbd467.entry.js} +2 -2
- package/dist/nylas-web-elements/p-09bbd467.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-6371e0a3.entry.js → p-0d80f50b.entry.js} +2 -2
- package/dist/nylas-web-elements/p-0d80f50b.entry.js.map +1 -0
- package/dist/nylas-web-elements/p-1fb32e0e.entry.js.map +1 -1
- package/dist/nylas-web-elements/{p-19f6fcf8.entry.js → p-3ca36162.entry.js} +2 -2
- package/dist/nylas-web-elements/p-3ca36162.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-78bd1f85.entry.js → p-51434e4a.entry.js} +2 -2
- package/dist/nylas-web-elements/p-51434e4a.entry.js.map +1 -0
- package/dist/nylas-web-elements/p-731a856b.js.map +1 -1
- package/dist/nylas-web-elements/p-7b787c73.entry.js +8 -0
- package/dist/nylas-web-elements/p-7b787c73.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-55886492.entry.js → p-b1c57792.entry.js} +2 -2
- package/dist/nylas-web-elements/p-b1c57792.entry.js.map +1 -0
- package/dist/types/components/design-system/button-component/button-component.d.ts +1 -2
- package/dist/types/components/design-system/input-dropdown/input-dropdown.d.ts +1 -6
- package/dist/types/components/design-system/multi-select-dropdown/multi-select-dropdown.d.ts +1 -7
- package/dist/types/components/design-system/select-dropdown/select-dropdown.d.ts +1 -6
- package/dist/types/components/scheduler-editor/nylas-editor-tabs-group/nylas-editor-tabs-group.d.ts +12 -11
- package/dist/types/components/scheduler-editor/nylas-event-duration/nylas-event-duration.d.ts +2 -2
- package/dist/types/components.d.ts +7 -7
- package/dist/types/connector/nylas-connector/index.d.ts +1 -1
- package/dist/types/connector/shared/api/auth.d.ts +1 -1
- package/dist/types/connector/shared/api/scheduler.d.ts +1 -1
- package/package.json +3 -3
- package/dist/nylas-web-elements/p-19f6fcf8.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-463d9c42.entry.js +0 -8
- package/dist/nylas-web-elements/p-463d9c42.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-55886492.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-6371e0a3.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-78bd1f85.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-a6a52e17.entry.js.map +0 -1
|
@@ -195,7 +195,7 @@ const InputDropdown = class {
|
|
|
195
195
|
}
|
|
196
196
|
}
|
|
197
197
|
render() {
|
|
198
|
-
return (h("div", { key: '
|
|
198
|
+
return (h("div", { key: 'b5f8adbd8c32d84c7036ee60e8ccebbb4e93cd95', class: "dropdown", part: "id_dropdown" }, h("input", { key: '648b04531c8d403b972b439943482758ca961a83', type: "text", name: this.name, id: this.name, part: "id_dropdown-input", class: { dropbtn: true, open: this.isOpen }, value: this.inputValue, onClick: (e) => {
|
|
199
199
|
this.toggleDropdown();
|
|
200
200
|
this.shouldAutoScroll = true;
|
|
201
201
|
this.handleClick(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"input-dropdown.time-period-selector.entry.js","mappings":"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","names":["i18next"],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx","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":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n position: relative;\n\n @media #{$mobile} {\n position: unset;\n }\n\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 10px;\n font-size: 16px;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n background: transparent;\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n width: 50px;\n padding: 14px 16px;\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\n }\n\n &:hover,\n &:active {\n outline: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n span {\n &.chevron {\n display: flex;\n align-self: center;\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.selected-option {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 144px;\n font-size: 14px;\n line-height: 20px;\n\n @media #{$mobile} {\n max-width: 124px;\n font-size: 16px;\n }\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n max-width: 306px;\n width: max-content;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n\n box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n border-bottom: 1px solid var(--nylas-base-200);\n padding: 10px;\n position: sticky;\n top: 0;\n background: var(--nylas-base-0);\n\n .icon {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n color: var(--nylas-base-300);\n }\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n }\n}\n\n.dropdown-content .selected {\n background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n width: -webkit-fill-available;\n padding: inherit;\n border: 1px solid #ccc;\n border-radius: 4px;\n position: sticky;\n background: no-repeat scroll 7px 7px;\n padding-left: 30px;\n background-size: 16px 16px;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\ninterface DropdownOption {\n labelHTML?: HTMLElement;\n label: string;\n value: string;\n}\n\n/**\n * The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options.\n * @part id_dropdown - The dropdown container\n * @part id_dropdown-input - The dropdown button\n * @part id_dropdown-content - The dropdown content\n */\n@Component({\n tag: 'input-dropdown',\n styleUrl: 'input-dropdown.scss',\n shadow: true,\n})\nexport class InputDropdown {\n @Element() el!: HTMLElement;\n\n private inputRef?: HTMLInputElement;\n private optionsRef!: HTMLElement;\n\n // Props\n /**\n * The name of the dropdown\n */\n @Prop() name!: string;\n /**\n * The options to display in the dropdown\n */\n @Prop() options: DropdownOption[] = [];\n /**\n * The default selected option\n */\n @Prop() defaultInputOption?: DropdownOption;\n /**\n * Should show search input\n */\n @Prop() inputValue!: string;\n /**\n * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n */\n @Prop() pluralizedLabel: string = '';\n\n /**\n * This is used to set if the dropdown should be filtered based on the input value.\n * If set to true, the dropdown will be filtered based on the input value.\n */\n @Prop() filterable: boolean = false;\n\n // States\n /**\n * The selected option\n */\n @State() selectedOption: DropdownOption | null = this.defaultInputOption || null;\n /**\n * The open state of the dropdown\n */\n @State() isOpen: boolean = false;\n\n /**\n * The typed value in the input\n */\n @State() typedValue: string = '';\n\n /**\n * The filtered options based on the search value\n */\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /**\n * The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n */\n @State() ariaActivedescendant: string = '';\n\n /**\n * This is used to scroll to the input value.\n */\n @State() shouldAutoScroll: boolean = false;\n\n // Events\n /**\n * This event is fired when the selected option is changed\n */\n @Event({ bubbles: true, composed: true }) inputOptionChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(newValue);\n }\n\n @Watch('defaultInputOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n }\n\n @Watch('inputValue')\n inputValueChangedHandler(newValue: string, oldValue: string) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(this.options);\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.filteredOptions = this.getFilteredOptions(this.options);\n // Set the selected option to the first option if no option is selected\n if (!this.selectedOption && !!this.defaultInputOption) {\n this.selectedOption = this.defaultInputOption;\n }\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n }\n\n // Methods\n getFilteredOptions(options): DropdownOption[] {\n if (!this.filterable) {\n return options;\n }\n\n return options.filter(\n option => option?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase()) || option?.label?.toLowerCase().includes(this.typedValue?.toLowerCase()),\n );\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectOption(option: DropdownOption): void {\n this.selectedOption = option;\n this.toggleDropdown();\n this.inputOptionChanged.emit({\n value: option.value,\n name: this.name,\n });\n }\n\n handleOnInput(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.typedValue = value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n this.inputOptionChanged.emit({\n value,\n name: this.name,\n });\n }\n\n scrollToViewWithinParent(optionIndex: number) {\n const option = this.options[optionIndex];\n const childElement = this.el.shadowRoot?.getElementById(option.value.toString()) as HTMLLIElement;\n const parentElement = this.optionsRef;\n\n this.ariaActivedescendant = option.value.toString();\n if (!childElement || !parentElement) return;\n // Scroll child into view within parent\n const childRect = childElement.getBoundingClientRect();\n const parentRect = parentElement.getBoundingClientRect();\n\n if (childRect.top < parentRect.top) {\n // Child is above the visible area of the parent\n parentElement.scrollTop -= parentRect.top - childRect.top;\n } else if (childRect.bottom > parentRect.bottom) {\n // Child is below the visible area of the parent\n parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleClick(event: Event): void {\n if (this.isOpen) {\n const value = (event.target as HTMLInputElement).value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n setTimeout(() => {\n this.scrollToViewWithinParent(optionIndex);\n }, 10);\n }\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' || (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n if (!this.isOpen) {\n this.isOpen = true;\n this.shouldAutoScroll = true;\n return;\n }\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n return (\n <div class=\"dropdown\" part=\"id_dropdown\">\n <input\n type=\"text\"\n name={this.name}\n id={this.name}\n part=\"id_dropdown-input\"\n class={{ dropbtn: true, open: this.isOpen }}\n value={this.inputValue}\n onClick={(e: Event) => {\n this.toggleDropdown();\n this.shouldAutoScroll = true;\n this.handleClick(e);\n }}\n aria-haspopup=\"listbox\"\n aria-label={this.name}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n onInput={event => this.handleOnInput(event)}\n />\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"id_dropdown-content\" ref={el => (this.optionsRef = el as HTMLElement)}>\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(option => (\n <li\n tabindex=\"0\"\n key={option.value}\n id={option.value}\n onClick={() => this.selectOption(option)}\n role=\"option\"\n class={{\n focused: this.ariaActivedescendant === option.value.toString(),\n }}\n >\n {option.labelHTML ? option.labelHTML : option.label}\n </li>\n ))}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n",".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 { 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 // 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 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 }\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 />\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 />\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"input-dropdown.time-period-selector.entry.js","mappings":"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","names":["i18next"],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx","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":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n position: relative;\n\n @media #{$mobile} {\n position: unset;\n }\n\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 10px;\n font-size: 16px;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n background: transparent;\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n width: 50px;\n padding: 14px 16px;\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\n }\n\n &:hover,\n &:active {\n outline: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n span {\n &.chevron {\n display: flex;\n align-self: center;\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.selected-option {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 144px;\n font-size: 14px;\n line-height: 20px;\n\n @media #{$mobile} {\n max-width: 124px;\n font-size: 16px;\n }\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n max-width: 306px;\n width: max-content;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n\n box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n border-bottom: 1px solid var(--nylas-base-200);\n padding: 10px;\n position: sticky;\n top: 0;\n background: var(--nylas-base-0);\n\n .icon {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n color: var(--nylas-base-300);\n }\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n }\n}\n\n.dropdown-content .selected {\n background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n width: -webkit-fill-available;\n padding: inherit;\n border: 1px solid #ccc;\n border-radius: 4px;\n position: sticky;\n background: no-repeat scroll 7px 7px;\n padding-left: 30px;\n background-size: 16px 16px;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption } from '@nylas/core';\n\n/**\n * The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options.\n * @part id_dropdown - The dropdown container\n * @part id_dropdown-input - The dropdown button\n * @part id_dropdown-content - The dropdown content\n */\n@Component({\n tag: 'input-dropdown',\n styleUrl: 'input-dropdown.scss',\n shadow: true,\n})\nexport class InputDropdown {\n @Element() el!: HTMLElement;\n\n private inputRef?: HTMLInputElement;\n private optionsRef!: HTMLElement;\n\n // Props\n /**\n * The name of the dropdown\n */\n @Prop() name!: string;\n /**\n * The options to display in the dropdown\n */\n @Prop() options: DropdownOption[] = [];\n /**\n * The default selected option\n */\n @Prop() defaultInputOption?: DropdownOption;\n /**\n * Should show search input\n */\n @Prop() inputValue!: string;\n /**\n * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n */\n @Prop() pluralizedLabel: string = '';\n\n /**\n * This is used to set if the dropdown should be filtered based on the input value.\n * If set to true, the dropdown will be filtered based on the input value.\n */\n @Prop() filterable: boolean = false;\n\n // States\n /**\n * The selected option\n */\n @State() selectedOption: DropdownOption | null = this.defaultInputOption || null;\n /**\n * The open state of the dropdown\n */\n @State() isOpen: boolean = false;\n\n /**\n * The typed value in the input\n */\n @State() typedValue: string = '';\n\n /**\n * The filtered options based on the search value\n */\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /**\n * The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n */\n @State() ariaActivedescendant: string = '';\n\n /**\n * This is used to scroll to the input value.\n */\n @State() shouldAutoScroll: boolean = false;\n\n // Events\n /**\n * This event is fired when the selected option is changed\n */\n @Event({ bubbles: true, composed: true }) inputOptionChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(newValue);\n }\n\n @Watch('defaultInputOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n }\n\n @Watch('inputValue')\n inputValueChangedHandler(newValue: string, oldValue: string) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(this.options);\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.filteredOptions = this.getFilteredOptions(this.options);\n // Set the selected option to the first option if no option is selected\n if (!this.selectedOption && !!this.defaultInputOption) {\n this.selectedOption = this.defaultInputOption;\n }\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n }\n\n // Methods\n getFilteredOptions(options): DropdownOption[] {\n if (!this.filterable) {\n return options;\n }\n\n return options.filter(\n option => option?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase()) || option?.label?.toLowerCase().includes(this.typedValue?.toLowerCase()),\n );\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectOption(option: DropdownOption): void {\n this.selectedOption = option;\n this.toggleDropdown();\n this.inputOptionChanged.emit({\n value: option.value,\n name: this.name,\n });\n }\n\n handleOnInput(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.typedValue = value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n this.inputOptionChanged.emit({\n value,\n name: this.name,\n });\n }\n\n scrollToViewWithinParent(optionIndex: number) {\n const option = this.options[optionIndex];\n const childElement = this.el.shadowRoot?.getElementById(option.value.toString()) as HTMLLIElement;\n const parentElement = this.optionsRef;\n\n this.ariaActivedescendant = option.value.toString();\n if (!childElement || !parentElement) return;\n // Scroll child into view within parent\n const childRect = childElement.getBoundingClientRect();\n const parentRect = parentElement.getBoundingClientRect();\n\n if (childRect.top < parentRect.top) {\n // Child is above the visible area of the parent\n parentElement.scrollTop -= parentRect.top - childRect.top;\n } else if (childRect.bottom > parentRect.bottom) {\n // Child is below the visible area of the parent\n parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleClick(event: Event): void {\n if (this.isOpen) {\n const value = (event.target as HTMLInputElement).value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n setTimeout(() => {\n this.scrollToViewWithinParent(optionIndex);\n }, 10);\n }\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' || (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n if (!this.isOpen) {\n this.isOpen = true;\n this.shouldAutoScroll = true;\n return;\n }\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n return (\n <div class=\"dropdown\" part=\"id_dropdown\">\n <input\n type=\"text\"\n name={this.name}\n id={this.name}\n part=\"id_dropdown-input\"\n class={{ dropbtn: true, open: this.isOpen }}\n value={this.inputValue}\n onClick={(e: Event) => {\n this.toggleDropdown();\n this.shouldAutoScroll = true;\n this.handleClick(e);\n }}\n aria-haspopup=\"listbox\"\n aria-label={this.name}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n onInput={event => this.handleOnInput(event)}\n />\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"id_dropdown-content\" ref={el => (this.optionsRef = el as HTMLElement)}>\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(option => (\n <li\n tabindex=\"0\"\n key={option.value}\n id={option.value}\n onClick={() => this.selectOption(option)}\n role=\"option\"\n class={{\n focused: this.ariaActivedescendant === option.value.toString(),\n }}\n >\n {option.labelHTML ? option.labelHTML : option.label}\n </li>\n ))}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n",".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 { 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 // 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 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 }\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 />\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 />\n )}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -169,9 +169,9 @@ const MultiSelectDropdown = class {
|
|
|
169
169
|
}, class: { selected: !!option.selected, disabled: !!option.disabled } }, h("label", { htmlFor: option.value }, h("input", { "aria-hidden": "true", id: option.value, type: "checkbox", checked: option.selected, disabled: !!option?.disabled }), h("span", null, option.label))));
|
|
170
170
|
}
|
|
171
171
|
render() {
|
|
172
|
-
return (h(Host, { key: '
|
|
172
|
+
return (h(Host, { key: '2211f90c0f5bdcf0d27448fd9ec5568f9aec0234' }, h("div", { key: '9e84a7ed003e9b541a56ab1c0a7cb6d670cbfdd3', class: "dropdown", part: "msd_dropdown" }, h("label", { key: 'fe7b821b156c9fae46422ff67b9900155a545b27', class: "dropdown-label", part: "msd_dropdown-label" }, h("p", { key: '266f5afa814c2da4099fff2592ee079baf8d8094' }, h("span", { key: 'e89025d7da4c7f7368048f9729ca10064ca32e22', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("slot", { key: '15916ee66e8c341e162b65cdbb53df9693371c8a', name: "label-icon", "aria-hidden": "true" })), h("button", { key: '7c17a76d93efa1e3a82d75722cd0a1c5758b9c32', name: this.name, part: `msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`, class: { dropbtn: true, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), disabled: this.readOnly, title: this.readOnly ? 'read-only field' : undefined, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: '3196cb36a75d471989f18d5de3cc689eaa7fe295', name: "select-icon", "aria-hidden": "true" }), h("span", { key: 'c4e1531026c20573bb642f6f494b92c0545957ec', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
|
|
173
173
|
? this.multipleOptionsSelectedLabel
|
|
174
|
-
: this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: '
|
|
174
|
+
: this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: '66eaadd178beac3fefa4e261b14a71ee5ab71a95', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: 'ed945f49a0f99abdaf3ac5e1a4707b0a1e450c48', width: "16", height: "16" }))), this.error ? (h("span", { class: "error", part: "msd_dropdown_error" }, this.error)) : null, h("div", { key: '317b5f2a563b70dfc8fc3a75176f95742826236d', class: 'selected-options' }, this.getSelectedOptions().map(option => (h("span", { class: "selected-option" }, option.label, h("button", { disabled: this.readOnly || !!option?.disabled, key: option.label, onClick: () => this.selectOption(option) }, h("close-icon", null)))))), this.isOpen ? (h("div", { class: "dropdown-content", part: "msd_dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": true, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.availableOptions.map(option => this.renderOption(option))))) : null)));
|
|
175
175
|
}
|
|
176
176
|
get el() { return getElement(this); }
|
|
177
177
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"multi-select-dropdown.nylas-date-component.entry.js","mappings":"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","names":[],"sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx","src/components/design-system/nylas-date-component/nylas-date-component.scss?tag=nylas-date-component&encapsulation=shadow","src/components/design-system/nylas-date-component/nylas-date-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n width: inherit;\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n width: 100%;\n position: relative;\n\n .dropdown-label {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n span.required {\n color: var(--nylas-error);\n padding: 0 0.25rem;\n }\n }\n\n span.error {\n color: var(--nylas-error);\n font-size: 14px;\n }\n}\n\n.dropbtn {\n width: inherit;\n height: 48px;\n color: var(--nylas-base-900);\n padding: 0.5rem;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px);\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n\n label {\n cursor: not-allowed;\n\n input {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n.selected-options {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n padding: 0.5rem 0;\n margin-top: 0.25rem;\n background: var(--nylas-base-0);\n\n .selected-option {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 4px 8px;\n border-radius: var(--nylas-border-radius-2x);\n background: var(--nylas-base-100);\n color: var(--nylas-base-800);\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5rem;\n letter-spacing: 0.5px;\n\n button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n &:hover {\n color: var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n }\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\n\ninterface DropdownOption {\n label: string;\n value: string;\n selected?: boolean; // Add a selected flag to each option\n disabled?: boolean; // Add a disabled flag to each option\n}\n\n@Component({\n tag: 'multi-select-dropdown',\n styleUrl: 'multi-select-dropdown.scss',\n shadow: true,\n})\nexport class MultiSelectDropdown {\n @Element() el!: HTMLElement;\n\n // Props\n /**\n * The name of the dropdown\n */\n @Prop() name!: string;\n\n /**\n * The label of the dropdown\n */\n @Prop() label?: string;\n\n /**\n * The options to display in the dropdown\n */\n @Prop() options: DropdownOption[] = [];\n\n /**\n * Error message to display\n */\n @Prop({ mutable: true }) error?: string = '';\n\n /**\n * The option to require selection of at leat one option.\n */\n @Prop() required?: boolean = false;\n\n /**\n * The property to make the multi-select dropdown read-only. If true, the dropdown cannot be edited.\n */\n @Prop() readOnly?: boolean = false;\n\n /**\n * Multiple options selected label\n */\n @Prop() multipleOptionsSelectedLabel?: string = 'Multiple options selected';\n\n /**\n * Select at least one option label\n */\n @Prop() selectAtLeastOneOptionLabel?: string = 'Please select at least one option';\n\n // States\n /**\n * The copy of the options to display in the dropdown\n */\n @State() availableOptions: DropdownOption[] = this.options;\n /**\n * The open state of the dropdown\n */\n @State() isOpen: boolean = false;\n /**\n * The aria-activedescendant attribute for the listbox element to indicate the currently active\n */\n @State() ariaActivedescendant: string = '';\n\n /**\n * This flag is used to focus the first option when the dropdown is opened\n * and reset after the first option is focused\n */\n @State() shouldFocusFirstOption: boolean = false;\n\n // Events\n /**\n * This event is fired when the selected options are changed\n */\n @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n value: string[];\n name: string;\n }>;\n\n areOptionsEqual(arr1: DropdownOption[], arr2: DropdownOption[]): boolean {\n if (arr1.length !== arr2.length) return false;\n\n // Sort both arrays by a consistent key (e.g., label and value)\n const sorted1 = [...arr1].sort((a, b) => a.label.localeCompare(b.label) || a.value.localeCompare(b.value));\n const sorted2 = [...arr2].sort((a, b) => a.label.localeCompare(b.label) || a.value.localeCompare(b.value));\n\n // Compare each object in the sorted arrays\n return sorted1.every((opt1, index) => {\n const opt2 = sorted2[index];\n return opt1.label === opt2.label && opt1.value === opt2.value;\n });\n }\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[]) {\n if (!this.areOptionsEqual(newValue, this.availableOptions)) {\n this.availableOptions = newValue;\n }\n }\n\n // Lifecycle methods\n componentDidLoad() {\n debug('multi-select-dropdown', 'componentDidLoad');\n if (this.options) {\n this.availableOptions = this.options;\n }\n }\n\n componentDidRender() {\n debug('multi-select-dropdown', 'componentDidRender');\n if (this.isOpen && this.shouldFocusFirstOption) {\n // The dropdown is open and we should focus the first option\n this.ariaActivedescendant = this.availableOptions[0]?.value;\n this.focusOption(0);\n // Reset the flag\n this.shouldFocusFirstOption = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n if (this.required && (!selectedOptions || selectedOptions.length <= 0)) {\n this.error = 'Please select at least one option';\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n\n selectOption(option: DropdownOption): void {\n this.availableOptions = this.availableOptions.map(o => {\n if (o.value === option.value) {\n o.selected = option.selected ? false : true;\n if (o.selected) {\n this.error = '';\n }\n }\n return o;\n });\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n this.selectedOptionsChanged.emit({\n value: selectedOptions,\n name: this.name,\n });\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.shouldFocusFirstOption = true;\n } else {\n this.ariaActivedescendant = '';\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e: KeyboardEvent) {\n const items = this.availableOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Tab': {\n if (!e.shiftKey) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n }\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n break;\n }\n case 'Escape': {\n this.isOpen = false;\n break;\n }\n }\n }\n\n focusOption(index: number) {\n const option = this.availableOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n getSelectedOptions() {\n return this.availableOptions.filter(option => option.selected);\n }\n\n renderOption(option: DropdownOption) {\n return (\n <li\n key={option.value}\n id={option.value}\n role=\"option\"\n tabindex=\"0\"\n aria-selected={option.selected ? 'true' : 'false'}\n onClick={e => {\n e.stopImmediatePropagation();\n if (!option?.disabled) {\n this.selectOption(option);\n }\n }}\n class={{ selected: !!option.selected, disabled: !!option.disabled }}\n >\n <label htmlFor={option.value}>\n <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} disabled={!!option?.disabled} />\n <span>{option.label}</span>\n </label>\n </li>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\" part=\"msd_dropdown\">\n <label class=\"dropdown-label\" part=\"msd_dropdown-label\">\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n </p>\n <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n </label>\n <button\n name={this.name}\n part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n title={this.readOnly ? 'read-only field' : undefined}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n {this.getSelectedOptions().length > 1\n ? this.multipleOptionsSelectedLabel\n : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label}\n </span>\n <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.error ? (\n <span class=\"error\" part=\"msd_dropdown_error\">\n {this.error}\n </span>\n ) : null}\n <div class={'selected-options'}>\n {this.getSelectedOptions().map(option => (\n <span class=\"selected-option\">\n {option.label}\n <button disabled={this.readOnly || !!option?.disabled} key={option.label} onClick={() => this.selectOption(option)}>\n <close-icon />\n </button>\n </span>\n ))}\n </div>\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n <ul\n tabindex=\"-1\"\n role=\"listbox\"\n aria-label={this.name}\n aria-multiselectable={true}\n aria-activedescendant={this.ariaActivedescendant}\n onKeyDown={e => this.handleListboxKeydown(e)}\n >\n {this.availableOptions.map(option => this.renderOption(option))}\n </ul>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n display: block;\n height: auto;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='date'] {\n @include textfield;\n width: 100%;\n width: -moz-available;\n width: -webkit-fill-available;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n}\n\ninput:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\n\nconst DefaultPlaceholder = {\n date: 'YYYY-MM-DD',\n};\n\n/**\n * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n tag: 'nylas-date-component',\n styleUrl: 'nylas-date-component.scss',\n shadow: true,\n})\nexport class NylasDateComponent {\n /**\n * The host element\n */\n @Element() el!: HTMLElement;\n /**\n * The name of the input. This is used to identify the input when submitting a form.\n */\n @Prop() name: string = 'input';\n /**\n * The default value of the input. This is the value that is displayed when the input is rendered.\n */\n @Prop() defaultValue?: string;\n /**\n * The label of the input. This is displayed above the input.\n */\n @Prop() label: string = '';\n\n /**\n * The placeholder of the input. This is displayed when the input is empty.\n */\n @Prop() placeholder: string = DefaultPlaceholder['date'];\n /**\n * Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n */\n @Prop() required: boolean = false;\n /**\n * Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n */\n @Prop() readOnly: boolean = false;\n /**\n * Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n */\n @Prop() autoFocus: boolean = false;\n /**\n * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n */\n @Prop() pattern?: RegExp;\n /**\n * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n */\n @Prop() maxLength: number = 255;\n /**\n * The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n */\n @Prop() patternError: string = '';\n\n /**\n * This error message is displayed when the input value is empty and the input is required.\n */\n @Prop() requiredError: string = '';\n\n /**\n * The input value state.\n */\n @State() value!: string;\n /**\n * The error message state.\n */\n @State() error: string = '';\n\n /**\n * State to track the validity of the date input.\n */\n @State() isDateValid: boolean = true;\n\n /**\n * This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const target = e.target as HTMLInputElement;\n this.value = sanitize(target.value);\n this.isDateValid = target.validity.valid;\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: 'date',\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n if (this.required && !this.isDateValid) {\n this.error = 'Please enter a valid date';\n return;\n }\n // Check if the field is required and value is empty\n if (this.required && !value) {\n this.error = this.requiredError || 'This field is required.';\n return;\n }\n // Check if value matches pattern\n if (!this.pattern || (!value && !this.required)) return;\n\n if (this.pattern.test(value)) {\n this.error = '';\n } else {\n this.error = this.patternError || 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part=\"ic__label\" class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type=\"date\"\n name={this.name}\n part=\"ic__date\"\n title={this.readOnly ? 'read-only field' : undefined}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"multi-select-dropdown.nylas-date-component.entry.js","mappings":"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","names":[],"sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx","src/components/design-system/nylas-date-component/nylas-date-component.scss?tag=nylas-date-component&encapsulation=shadow","src/components/design-system/nylas-date-component/nylas-date-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n width: inherit;\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n width: 100%;\n position: relative;\n\n .dropdown-label {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n span.required {\n color: var(--nylas-error);\n padding: 0 0.25rem;\n }\n }\n\n span.error {\n color: var(--nylas-error);\n font-size: 14px;\n }\n}\n\n.dropbtn {\n width: inherit;\n height: 48px;\n color: var(--nylas-base-900);\n padding: 0.5rem;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px);\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n\n label {\n cursor: not-allowed;\n\n input {\n cursor: not-allowed;\n }\n }\n }\n }\n}\n\n.selected-options {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n padding: 0.5rem 0;\n margin-top: 0.25rem;\n background: var(--nylas-base-0);\n\n .selected-option {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 4px 8px;\n border-radius: var(--nylas-border-radius-2x);\n background: var(--nylas-base-100);\n color: var(--nylas-base-800);\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5rem;\n letter-spacing: 0.5px;\n\n button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n &:hover {\n color: var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n }\n }\n}\n","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { DropdownOption } from '@nylas/core';\n\n@Component({\n tag: 'multi-select-dropdown',\n styleUrl: 'multi-select-dropdown.scss',\n shadow: true,\n})\nexport class MultiSelectDropdown {\n @Element() el!: HTMLElement;\n\n // Props\n /**\n * The name of the dropdown\n */\n @Prop() name!: string;\n\n /**\n * The label of the dropdown\n */\n @Prop() label?: string;\n\n /**\n * The options to display in the dropdown\n */\n @Prop() options: DropdownOption[] = [];\n\n /**\n * Error message to display\n */\n @Prop({ mutable: true }) error?: string = '';\n\n /**\n * The option to require selection of at leat one option.\n */\n @Prop() required?: boolean = false;\n\n /**\n * The property to make the multi-select dropdown read-only. If true, the dropdown cannot be edited.\n */\n @Prop() readOnly?: boolean = false;\n\n /**\n * Multiple options selected label\n */\n @Prop() multipleOptionsSelectedLabel?: string = 'Multiple options selected';\n\n /**\n * Select at least one option label\n */\n @Prop() selectAtLeastOneOptionLabel?: string = 'Please select at least one option';\n\n // States\n /**\n * The copy of the options to display in the dropdown\n */\n @State() availableOptions: DropdownOption[] = this.options;\n /**\n * The open state of the dropdown\n */\n @State() isOpen: boolean = false;\n /**\n * The aria-activedescendant attribute for the listbox element to indicate the currently active\n */\n @State() ariaActivedescendant: string = '';\n\n /**\n * This flag is used to focus the first option when the dropdown is opened\n * and reset after the first option is focused\n */\n @State() shouldFocusFirstOption: boolean = false;\n\n // Events\n /**\n * This event is fired when the selected options are changed\n */\n @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n value: string[];\n name: string;\n }>;\n\n areOptionsEqual(arr1: DropdownOption[], arr2: DropdownOption[]): boolean {\n if (arr1.length !== arr2.length) return false;\n\n // Sort both arrays by a consistent key (e.g., label and value)\n const sorted1 = [...arr1].sort((a, b) => a.label.localeCompare(b.label) || a.value.localeCompare(b.value));\n const sorted2 = [...arr2].sort((a, b) => a.label.localeCompare(b.label) || a.value.localeCompare(b.value));\n\n // Compare each object in the sorted arrays\n return sorted1.every((opt1, index) => {\n const opt2 = sorted2[index];\n return opt1.label === opt2.label && opt1.value === opt2.value;\n });\n }\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[]) {\n if (!this.areOptionsEqual(newValue, this.availableOptions)) {\n this.availableOptions = newValue;\n }\n }\n\n // Lifecycle methods\n componentDidLoad() {\n debug('multi-select-dropdown', 'componentDidLoad');\n if (this.options) {\n this.availableOptions = this.options;\n }\n }\n\n componentDidRender() {\n debug('multi-select-dropdown', 'componentDidRender');\n if (this.isOpen && this.shouldFocusFirstOption) {\n // The dropdown is open and we should focus the first option\n this.ariaActivedescendant = this.availableOptions[0]?.value;\n this.focusOption(0);\n // Reset the flag\n this.shouldFocusFirstOption = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n if (this.required && (!selectedOptions || selectedOptions.length <= 0)) {\n this.error = 'Please select at least one option';\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n\n selectOption(option: DropdownOption): void {\n this.availableOptions = this.availableOptions.map(o => {\n if (o.value === option.value) {\n o.selected = option.selected ? false : true;\n if (o.selected) {\n this.error = '';\n }\n }\n return o;\n });\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n this.selectedOptionsChanged.emit({\n value: selectedOptions,\n name: this.name,\n });\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.shouldFocusFirstOption = true;\n } else {\n this.ariaActivedescendant = '';\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e: KeyboardEvent) {\n const items = this.availableOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Tab': {\n if (!e.shiftKey) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n }\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n break;\n }\n case 'Escape': {\n this.isOpen = false;\n break;\n }\n }\n }\n\n focusOption(index: number) {\n const option = this.availableOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n getSelectedOptions() {\n return this.availableOptions.filter(option => option.selected);\n }\n\n renderOption(option: DropdownOption) {\n return (\n <li\n key={option.value}\n id={option.value}\n role=\"option\"\n tabindex=\"0\"\n aria-selected={option.selected ? 'true' : 'false'}\n onClick={e => {\n e.stopImmediatePropagation();\n if (!option?.disabled) {\n this.selectOption(option);\n }\n }}\n class={{ selected: !!option.selected, disabled: !!option.disabled }}\n >\n <label htmlFor={option.value}>\n <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} disabled={!!option?.disabled} />\n <span>{option.label}</span>\n </label>\n </li>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\" part=\"msd_dropdown\">\n <label class=\"dropdown-label\" part=\"msd_dropdown-label\">\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n </p>\n <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n </label>\n <button\n name={this.name}\n part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n title={this.readOnly ? 'read-only field' : undefined}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n {this.getSelectedOptions().length > 1\n ? this.multipleOptionsSelectedLabel\n : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label}\n </span>\n <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.error ? (\n <span class=\"error\" part=\"msd_dropdown_error\">\n {this.error}\n </span>\n ) : null}\n <div class={'selected-options'}>\n {this.getSelectedOptions().map(option => (\n <span class=\"selected-option\">\n {option.label}\n <button disabled={this.readOnly || !!option?.disabled} key={option.label} onClick={() => this.selectOption(option)}>\n <close-icon />\n </button>\n </span>\n ))}\n </div>\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n <ul\n tabindex=\"-1\"\n role=\"listbox\"\n aria-label={this.name}\n aria-multiselectable={true}\n aria-activedescendant={this.ariaActivedescendant}\n onKeyDown={e => this.handleListboxKeydown(e)}\n >\n {this.availableOptions.map(option => this.renderOption(option))}\n </ul>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n display: block;\n height: auto;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='date'] {\n @include textfield;\n width: 100%;\n width: -moz-available;\n width: -webkit-fill-available;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n}\n\ninput:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\n\nconst DefaultPlaceholder = {\n date: 'YYYY-MM-DD',\n};\n\n/**\n * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n tag: 'nylas-date-component',\n styleUrl: 'nylas-date-component.scss',\n shadow: true,\n})\nexport class NylasDateComponent {\n /**\n * The host element\n */\n @Element() el!: HTMLElement;\n /**\n * The name of the input. This is used to identify the input when submitting a form.\n */\n @Prop() name: string = 'input';\n /**\n * The default value of the input. This is the value that is displayed when the input is rendered.\n */\n @Prop() defaultValue?: string;\n /**\n * The label of the input. This is displayed above the input.\n */\n @Prop() label: string = '';\n\n /**\n * The placeholder of the input. This is displayed when the input is empty.\n */\n @Prop() placeholder: string = DefaultPlaceholder['date'];\n /**\n * Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n */\n @Prop() required: boolean = false;\n /**\n * Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n */\n @Prop() readOnly: boolean = false;\n /**\n * Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n */\n @Prop() autoFocus: boolean = false;\n /**\n * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n */\n @Prop() pattern?: RegExp;\n /**\n * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n */\n @Prop() maxLength: number = 255;\n /**\n * The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n */\n @Prop() patternError: string = '';\n\n /**\n * This error message is displayed when the input value is empty and the input is required.\n */\n @Prop() requiredError: string = '';\n\n /**\n * The input value state.\n */\n @State() value!: string;\n /**\n * The error message state.\n */\n @State() error: string = '';\n\n /**\n * State to track the validity of the date input.\n */\n @State() isDateValid: boolean = true;\n\n /**\n * This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const target = e.target as HTMLInputElement;\n this.value = sanitize(target.value);\n this.isDateValid = target.validity.valid;\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: 'date',\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n if (this.required && !this.isDateValid) {\n this.error = 'Please enter a valid date';\n return;\n }\n // Check if the field is required and value is empty\n if (this.required && !value) {\n this.error = this.requiredError || 'This field is required.';\n return;\n }\n // Check if value matches pattern\n if (!this.pattern || (!value && !this.required)) return;\n\n if (this.pattern.test(value)) {\n this.error = '';\n } else {\n this.error = this.patternError || 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part=\"ic__label\" class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type=\"date\"\n name={this.name}\n part=\"ic__date\"\n title={this.readOnly ? 'read-only field' : undefined}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nylas-provider.entry.js","mappings":";;;;;;;;MAGa,kBAAkB;IAI7B,YAAY,SAAwB,EAAE,cAAkC;QACtE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;KACtC;IAQM,MAAM,eAAe;QAC1B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxD,IAAI,CAAC,eAAe,EAAE;YAEpB,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;aAAM;YAEL,IAAI,SAAS,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YACpD,IAAI,SAAS,EAAE;gBAEb,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC;gBACtC,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;gBAE3D,IAAI,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,UAAU,GAAG,oBAAoB,GAAG,eAAe,EAAE;oBACzF,KAAK,CAAC,mDAAmD,CAAC,CAAC;oBAC3D,SAAS,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC;oBACtD,IAAI,CAAC,SAAS,EAAE;wBACd,KAAK,CAAC,qFAAqF,CAAC,CAAC;wBAC7F,IAAI,CAAC,MAAM,EAAE,CAAC;wBACd,OAAO;qBACR;iBACF;gBAED,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;aACjD;SACF;QACD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;KAC7D;IAMM,MAAM,eAAe;QAC1B,OAAO,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,CAAC;KACzC;IAMM,MAAM,YAAY;QACvB,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;KACtC;IAMM,MAAM,kBAAkB;QAC7B,OAAO,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC;KAC5C;IAMM,MAAM,MAAM;QACjB,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;KAC/B;IASM,MAAM,wBAAwB,CAAC,MAAiB,EAAE,KAAc,EAAE,QAAiB;QACxF,OAAO,IAAI,CAAC,SAAS,CAAC,wBAAwB,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;KACzE;IAOM,MAAM,4BAA4B,CAAC,UAAkB;QAC1D,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC;QAChC,MAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAE1C,IAAI,IAAI,EAAE;YACR,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC;YAC1E,IAAI,SAAS,EAAE;gBACb,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;gBAChD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC;gBACjD,OAAO,SAAS,CAAC;aAClB;SACF;QAED,OAAO,IAAI,CAAC;KACb;;;MCjGU,cAAc;IAWzB,YACE,MAAuB,EACvB,SAAwB,EACxB,cAAkC,EAClC,mBAA4C,EAC5C,yBAAwD,EACxD,kBAA0B,0BAA0B;QAEpD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;QACvC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,mBAAmB,GAAG,mBAAmB,CAAC;QAC/C,IAAI,CAAC,yBAAyB,GAAG,yBAAyB,CAAC;KAC5D;IAEM,IAAI;QACT,KAAK,CAAC,qBAAqB,CAAC,CAAC;KAC9B;IAED,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;IAED,IAAW,cAAc;QACvB,OAAO,IAAI,CAAC,mBAAmB,CAAC;KACjC;IAED,IAAW,oBAAoB;QAC7B,OAAO,IAAI,CAAC,yBAAyB,CAAC;KACvC;IAED,IAAW,IAAI;QACb,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,OAAO,IAAI,CAAC,cAAc,CAAC;SAC5B;QACD,IAAI,CAAC,cAAc,GAAG,IAAI,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAClF,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;IAED,IAAW,SAAS;QAClB,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,OAAO,IAAI,CAAC,sBAAsB,CAAC;SACpC;QACD,IAAI,CAAC,sBAAsB,GAAG,IAAI,yBAAyB,CAAC;YAC1D,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,cAAc,EAAE,IAAI,CAAC,cAAc;SACpC,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,sBAAsB,CAAC;KACpC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC;KACvB;IAEM,WAAW;QAChB,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;KAC7B;IAEM,MAAM,MAAM;QACjB,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;QAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;;;MClFU,uBAAwB,SAAQ,KAAK;IAIhD,YAAY,IAAY,EAAE,aAAkC;QAC1D,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC;KACpC;CACF;MAEY,UAAU;IAGrB;QAFQ,yBAAoB,GAA6C,EAAE,CAAC;QAG1E,KAAK,CAAC,wBAAwB,CAAC,CAAC;KACjC;IAGM,OAAO;QACZ,KAAK,CAAC,oBAAoB,CAAC,CAAC;QAC5B,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KACzE;IAGM,IAAI;QACT,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACzB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAGrE,IAAI,OAAO,eAAe,KAAK,WAAW,EAAE;YAC1C,MAAM,KAAK,GAAoB,IAAI,eAAe,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;YAC/G,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SAC3B;aAAM;YACL,MAAM,KAAK,GAAU,IAAI,uBAAuB,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;YAC7G,IAAI,CAAC,aAAa,CAAC,KAAwB,CAAC,CAAC;SAC9C;KACF;IAEM,sBAAsB,CAAyB,KAAW,EAAE,QAA6B;QAC9F,KAAK,CAAC,mCAAmC,CAAC,CAAC;QAC3C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;KACnD;IAEM,QAAQ,CAAC,KAAa,EAAE,OAAgB;QAC7C,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAG7B,IAAI,OAAO,EAAE;YACX,OAAO,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,KAAK,EAAE,CAAC,CAAC;SACxD;QAED,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC;KAC9B;IAEM,QAAQ,CAAC,KAAa;QAC3B,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAC7B,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC;KAC9B;IAGM,UAAU,CAAC,KAAa,EAAE,IAAY;QAC3C,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACpC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAGlC,KAAK,CAAC,+BAA+B,KAAK,SAAS,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC;QACtF,IAAI,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE;YAC/C,OAAO,IAAI,CAAC;SACb;QAED,IAAI,UAAU,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,EAAE;YAC1C,OAAO,KAAK,CAAC;SACd;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1C,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;YAChC,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;YAC9B,IAAI,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;gBAC7B,SAAS;aACV;YACD,IAAI,SAAS,KAAK,QAAQ,EAAE;gBAC1B,OAAO,KAAK,CAAC;aACd;SACF;QAED,OAAO,IAAI,CAAC;KACb;IAGM,cAAc,CAAyB,KAAW;QACvD,KAAK,CAAC,2BAA2B,CAAC,CAAC;QACnC,MAAM,WAAW,GAAsB,EAAuB,CAAC;QAC/D,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACpC,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACzD,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,KAAK;YAClC,IAAI,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;gBAC7B,MAAM,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAA4B,CAAC;gBAC9D,WAAW,CAAC,GAAG,CAAC,GAAG,gBAAgB,CAAC,KAAK,CAA+C,CAAC;aAC1F;SACF,CAAC,CAAC;QACH,OAAO,WAAW,CAAC;KACpB;IAEM,kBAAkB,CAAC,KAAa,EAAE,WAAgC;QACvE,KAAK,CAAC,+BAA+B,CAAC,CAAC;QACvC,IAAI,eAAe,GAAG,KAAK,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,GAAG;YAClC,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,IAAI,GAAG,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;SACxE,CAAC,CAAC;QACH,OAAO,eAAe,CAAC;KACxB;IAEM,QAAQ;QACb,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAC7B,OAAO,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;KAC7B;IAEM,aAAa,CAAC,KAAsB;QACzC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC;YACxD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YAC3G,KAAK,CAAC,kCAAkC,KAAK,SAAS,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;YACzE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;gBACjC,KAAK,CAAC,kCAAkC,KAAK,SAAS,IAAI,iBAAiB,CAAC,CAAC;gBAC7E,OAAO;aACR;YACD,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAA2B,CAAC;YACzE,MAAM,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ;IAEM,WAAW;QAChB,KAAK,CAAC,wBAAwB,CAAC,CAAC;QAChC,OAAO,EAAE,CAAC;KACX;;;SC7Ha,oBAAoB,CAAC,eAA6C,EAAE;IAClF,MAAM,sBAAsB,GAAwB;QAClD,eAAe,EAAE,KAAK;QACtB,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,OAAO;QACd,GAAG,YAAY;KAChB,CAAC;IACF,MAAM,KAAK,GAAG,WAAW,CAAsB,sBAAsB,CAAC,CAAC;IAOvE,KAAK,CAAC,KAAK,GAAG;QACZ,KAAK,MAAM,GAAG,IAAI,sBAAsB,EAAE;YACxC,MAAM,KAAK,GAAG,sBAAsB,CAAC,GAA0C,CAAC,CAAC;YACjF,KAAK,CAAC,GAAG,CAAC,GAAU,EAAE,KAAK,CAAC,CAAC;SAC9B;KACF,CAAC;IAEF,OAAO,KAAK,CAAC;AACf;;AClCA,MAAM,gBAAgB,GAAG,yBAAyB,CAAC;AACnD,4BAAe,gBAAgB;;MCuBlB,aAAa;;;;;;QAmLhB,qBAAgB,GAAG,OAAO,eAAwB;YACxD,IAAI,eAAe,EAAE;gBACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC/B;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAChC;SACF,CAAC;;8BA3IsF,EAAE;8CAQxC,IAAI;;IAqBtD,iBAAiB;QACf,KAAK,CAAC,oCAAoC,CAAC,CAAC;KAC7C;IAED,MAAM,iBAAiB;QACrB,KAAK,CAAC,oCAAoC,CAAC,CAAC;QAE5C,IAAI,CAAC,MAAM,GAAG;YACZ,IAAI,EAAE,oBAAoB,EAAE;YAC5B,SAAS,EAAE,yBAAyB,EAAE;YACtC,eAAe,EAAE,+BAA+B,EAAE;SACnD,CAAC;QACF,IAAI,CAAC,YAAY,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,8BAA8B,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAE5H,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAMhC,IAAI,CAAC,SAAS,GAAGA,EAAS,CAAC;YACzB,MAAM,EAAE,0BAA0B;YAClC,cAAc,EAAE,+BAA+B;YAC/C,WAAW,EAAE,WAAW;YACxB,QAAQ,EAAE,gBAAgB;YAC1B,aAAa,EAAE,EAAE;YACjB,WAAW,EAAE,GAAG;YAChB,GAAG,IAAI,CAAC,UAAU;SACnB,CAAC,CAAC;QAEH,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3D,IAAI,CAAC,cAAc,EAAE;YACnB,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC;SAC9C;QAED,MAAM,mBAAmB,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;QACrE,IAAI,CAAC,mBAAmB,EAAE;YACxB,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;SACnD;QAED,MAAM,yBAAyB,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;QACjF,IAAI,CAAC,yBAAyB,EAAE;YAC9B,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;SAC1D;QAED,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,cAAc,EAAE,mBAAmB,EAAE,yBAAyB,CAAC,CAAC;QAEjI,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE;YAM/B,MAAM,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;SACnD;QAMD,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAE5D,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3D;IAED,gBAAgB;QACd,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC3D,cAAc,EAAE,QAAQ,CAAC,iBAAiB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAEnE,IAAI,CAAC,YAAY,EAAE,gBAAgB,EAAE,CAAC;KACvC;IAED,qBAAqB;QACnB,IAAI,CAAC,YAAY,EAAE,qBAAqB,EAAE,CAAC;KAC5C;IASD,MAAM,wBAAwB,CAAC,KAAiD;QAC9E,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACpD;IASD,MAAM,0BAA0B,CAAC,KAAiD;QAChF,IAAI,CAAC,YAAY,EAAE,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACtD;IAoBD,MAAM,YAAY;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC;KACvB;IAOD,MAAM,iBAAiB;QACrB,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;IAOD,MAAM,YAAY;QAChB,OAAO,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;KAC5C;IAOD,MAAM,sBAAsB;QAC1B,OAAO,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;KACjD;IAOD,MAAM,4BAA4B;QAChC,OAAO,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;KACvD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;","names":["NylasAuth"],"sources":["src/connector/shared/api/auth.ts","src/connector/nylas-connector/index.ts","src/routers/hash-router.ts","src/stores/auth-store.ts","src/components/nylas-provider/nylas-provider.css?tag=nylas-provider&encapsulation=shadow","src/components/nylas-provider/nylas-provider.tsx"],"sourcesContent":["import { debug } from '@/utils/utils';\nimport { NylasAuthStoreType, NylasAuthType } from '../../..';\nimport { TokenInfo } from '@nylas/core/lib/auth';\nexport class NylasAuthConnector {\n private nylasAuth: NylasAuthType;\n private nylasAuthStore: NylasAuthStoreType;\n\n constructor(nylasAuth: NylasAuthType, nylasAuthStore: NylasAuthStoreType) {\n this.nylasAuth = nylasAuth;\n this.nylasAuthStore = nylasAuthStore;\n }\n\n /**\n * Validates the current session and updates the store with the token info\n * if the user is authenticated.\n * If the user is not authenticated, the store is reset.\n * @returns {Promise<void>}\n */\n public async validateSession(): Promise<void> {\n const isAuthenticated = await this.isAccessTokenValid();\n if (!isAuthenticated) {\n // Reset the store if the access token is not valid\n this.logout();\n } else {\n // If the user is authenticated, update the store with the token info\n let tokenInfo = await this.nylasAuth.getTokenInfo();\n if (tokenInfo) {\n // If token is expired or about to expire (in 5 minutes), refresh it\n const expireTimeCheck = 5 * 60 * 1000; // 5 minutes\n const currentTimeInSeconds = Math.floor(Date.now() / 1000);\n\n if (tokenInfo.expires_in && tokenInfo.expires_in - currentTimeInSeconds < expireTimeCheck) {\n debug('[NylasAuthConnectorMixin] Refreshing access token');\n tokenInfo = await this.nylasAuth.refreshAccessToken();\n if (!tokenInfo) {\n debug('[NylasAuthConnectorMixin] Token is expired and could not be refreshed. Logging out.');\n this.logout();\n return;\n }\n }\n\n this.nylasAuthStore.state.tokenInfo = tokenInfo;\n }\n }\n this.nylasAuthStore.state.isAuthenticated = isAuthenticated;\n }\n\n /**\n * Returns true if the user is authenticated.\n * @returns {Promise<boolean>}\n */\n public async isAuthenticated(): Promise<boolean> {\n return this.nylasAuth.isAuthenticated();\n }\n\n /**\n * Returns the token info if the user is authenticated.\n * @returns {Promise<TokenInfo>}\n */\n public async getTokenInfo(): Promise<TokenInfo | null> {\n return this.nylasAuth.getTokenInfo();\n }\n\n /**\n * Returns true if the access token is valid.\n * @returns {Promise<boolean>}\n */\n public async isAccessTokenValid(): Promise<boolean> {\n return this.nylasAuth.isAccessTokenValid();\n }\n\n /**\n * Removes the token info from the store and logs the user out.\n * @returns {Promise<void>}\n */\n public async logout(): Promise<void> {\n await this.nylasAuth.logout();\n }\n\n /**\n * Returns the URL to redirect the user to for authentication.\n * @param scopes An array of scopes to request from the user.\n * @param email The email address of the user to authenticate.\n * @param provider The provider to use for authentication.\n * @returns {Promise<string>}\n */\n public async getHostedAuthRedirectURL(scopes?: string[], email?: string, provider?: string): Promise<string> {\n return this.nylasAuth.getHostedAuthRedirectURL(scopes, email, provider);\n }\n\n /**\n * Exchanges the auth code for a token info and updates the store.\n * @param currentUrl The current URL of the page.\n * @returns {Promise<TokenInfo | null>}\n */\n public async manageHostedAuthCodeExchange(currentUrl: string): Promise<TokenInfo | null> {\n const url = new URL(currentUrl);\n const code = url.searchParams.get('code');\n\n if (code) {\n const tokenInfo = await this.nylasAuth.exchangeAuthCodeForTokenInfo(code);\n if (tokenInfo) {\n this.nylasAuthStore.state.tokenInfo = tokenInfo;\n this.nylasAuthStore.state.isAuthenticated = true;\n return tokenInfo;\n }\n }\n\n return null;\n }\n}\n","import { RouterInterface } from '@/routers/router-interface';\nimport { NylasAuthStoreType } from '@/stores/auth-store';\nimport { NylasSchedulerConfigStoreType } from '@/stores/scheduler-config-store';\nimport { NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport { debug } from '@/utils/utils';\nimport type { NylasAuthType } from '@nylas/core';\nimport { NylasConnectorInterface } from '../connector-interface';\nimport { NylasAuthConnector } from '../shared/api/auth';\nimport { NylaSchedulerAPIConnector } from '../shared/api/scheduler';\n/**\n * Base class for the Nylas connector.\n */\nexport class NylasConnector implements NylasConnectorInterface {\n public router: RouterInterface;\n public nylasAuth: NylasAuthType;\n public nylasAuthStore: NylasAuthStoreType;\n public nylasSchedulerStore: NylasSchedulerStoreType;\n public nylasSchedulerConfigStore: NylasSchedulerConfigStoreType;\n public schedulerAPIURL: string;\n\n private _authConnector: NylasAuthConnector | undefined;\n private _schedulerAPIConnector: NylaSchedulerAPIConnector | undefined;\n\n constructor(\n router: RouterInterface,\n nylasAuth: NylasAuthType,\n nylasAuthStore: NylasAuthStoreType,\n nylasSchedulerStore: NylasSchedulerStoreType,\n nylasSchedulerConfigStore: NylasSchedulerConfigStoreType,\n schedulerAPIURL: string = 'https://api.us.nylas.com',\n ) {\n this.router = router;\n this.schedulerAPIURL = schedulerAPIURL;\n this.nylasAuth = nylasAuth;\n this.nylasAuthStore = nylasAuthStore;\n this.nylasSchedulerStore = nylasSchedulerStore;\n this.nylasSchedulerConfigStore = nylasSchedulerConfigStore;\n }\n\n public init() {\n debug('NylasConnector init');\n }\n\n public get authStore() {\n return this.nylasAuthStore;\n }\n\n public get schedulerStore() {\n return this.nylasSchedulerStore;\n }\n\n public get schedulerConfigStore() {\n return this.nylasSchedulerConfigStore;\n }\n\n public get auth() {\n if (this._authConnector) {\n return this._authConnector;\n }\n this._authConnector = new NylasAuthConnector(this.nylasAuth, this.nylasAuthStore);\n return this._authConnector;\n }\n\n public get scheduler() {\n if (this._schedulerAPIConnector) {\n return this._schedulerAPIConnector;\n }\n this._schedulerAPIConnector = new NylaSchedulerAPIConnector({\n schedulerAPIURL: this.schedulerAPIURL,\n schedulerStore: this.schedulerStore,\n });\n return this._schedulerAPIConnector;\n }\n\n public getAuth() {\n return this.nylasAuth;\n }\n\n public resetStores() {\n this.nylasAuthStore.reset();\n }\n\n public async logout() {\n await this.nylasAuth.logout();\n this.resetStores();\n }\n}\n\nexport type PublicMethods<T> = {\n [K in keyof T]: T[K] extends Function ? (string extends K ? never : K) : never;\n}[keyof T];\n\nexport type NylasConnectorPublicMethods = PublicMethods<NylasConnector>;\n","import { debug } from '@/utils/utils';\nimport { RouteListener, RouteParams, RoutePath, RouterInterface } from './router-interface';\n\nexport class PolyFillHashChangeEvent extends Event {\n oldURL?: string;\n newURL?: string;\n\n constructor(type: string, eventInitDict: HashChangeEventInit) {\n super(type, eventInitDict);\n this.oldURL = eventInitDict.oldURL;\n this.newURL = eventInitDict.newURL;\n }\n}\n\nexport class HashRouter implements RouterInterface {\n private routeChangeListeners: [route: RoutePath, RouteListener<any>][] = [];\n\n constructor() {\n debug('HashRouter constructor');\n }\n\n // Destroy the router\n public destroy(): void {\n debug('HashRouter destroy');\n window.removeEventListener('hashchange', this.onRouteChange.bind(this));\n }\n\n // Initialize the router\n public init(): void {\n debug('HashRouter init');\n window.addEventListener('hashchange', this.onRouteChange.bind(this));\n\n // Trigger the initial route change\n if (typeof HashChangeEvent !== 'undefined') {\n const event: HashChangeEvent = new HashChangeEvent('hashchange', { oldURL: '', newURL: window.location.href });\n this.onRouteChange(event);\n } else {\n const event: Event = new PolyFillHashChangeEvent('hashchange', { oldURL: '', newURL: window.location.href });\n this.onRouteChange(event as HashChangeEvent);\n }\n }\n\n public addRouteChangeListener<Path extends RoutePath>(route: Path, listener: RouteListener<Path>): void {\n debug('HashRouter addRouteChangeListener');\n this.routeChangeListeners.push([route, listener]);\n }\n\n public navigate(route: string, shallow: boolean): void {\n debug('HashRouter navigate');\n\n // If we're navigating shallow, don't add a new history entry\n if (shallow) {\n return window.history.pushState(null, '', `#${route}`);\n }\n\n window.location.hash = route;\n }\n\n public setRoute(route: string): void {\n debug('HashRouter setRoute');\n window.location.hash = route;\n }\n\n // Matches a route and executes the callback\n public matchRoute(route: string, path: string): boolean {\n const routeParts = route.split('/');\n const pathParts = path.split('/');\n\n // If the route is `/` an the hash is empty, match the route\n debug(`HashRouter matchRoute route=${route} path=${path}`, { routeParts, pathParts });\n if (routeParts[1] === '' && pathParts[0] === '') {\n return true;\n }\n\n if (routeParts.length !== pathParts.length) {\n return false;\n }\n\n for (let i = 0; i < routeParts.length; i++) {\n const routePart = routeParts[i];\n const pathPart = pathParts[i];\n if (routePart.startsWith(':')) {\n continue;\n }\n if (routePart !== pathPart) {\n return false;\n }\n }\n\n return true;\n }\n\n // Parse the route and return the route params\n public getRouteParams<Path extends RoutePath>(route: Path): RouteParams<Path> {\n debug('HashRouter getRouteParams');\n const routeParams: RouteParams<Path> = {} as RouteParams<Path>;\n const routeParts = route.split('/');\n const routeConfigParts = window.location.hash.split('/');\n routeParts.forEach((routePart, index) => {\n if (routePart.startsWith(':')) {\n const key = routePart.substring(1) as keyof RouteParams<Path>;\n routeParams[key] = routeConfigParts[index] as RouteParams<Path>[keyof RouteParams<Path>]; // Cast the value to string\n }\n });\n return routeParams;\n }\n\n public getRouteWithParams(route: string, routeParams: Record<string, any>): string {\n debug('HashRouter getRouteWithParams');\n let routeWithParams = route;\n Object.keys(routeParams).forEach(key => {\n routeWithParams = routeWithParams.replace(`:${key}`, routeParams[key]);\n });\n return routeWithParams;\n }\n\n public getRoute(): string {\n debug('HashRouter getRoute');\n return window.location.hash;\n }\n\n public onRouteChange(event: HashChangeEvent): void {\n this.routeChangeListeners.forEach(async ([route, listener]) => {\n const path = event.newURL.indexOf('#') === -1 ? '' : event.newURL.substring(event.newURL.indexOf('#') + 1);\n debug(`HashRouter onRouteChange route=${route} path=${path}`, { event });\n if (!this.matchRoute(route, path)) {\n debug(`HashRouter onRouteChange route=${route} path=${path} does not match`);\n return;\n }\n const routeParams = this.getRouteParams(route) as RouteParams<RoutePath>;\n await listener(route, path, routeParams);\n });\n }\n\n public getBasePath(): string {\n debug('HashRouter getBasePath');\n return '';\n }\n}\n","import { TokenInfo } from '@nylas/core/dist/auth';\nimport { createStore } from '@stencil/store';\nimport { DataState } from '@/common/types';\n\nexport interface NylasAuthStoreState {\n isAuthenticated: boolean;\n tokenInfo: TokenInfo | null;\n state: DataState;\n}\n\nexport type NylasAuthStoreType = ReturnType<typeof CreateNylasAuthStore>;\n\nexport function CreateNylasAuthStore(defaultState: Partial<NylasAuthStoreState> = {}) {\n const defaultNylasStoreState: NylasAuthStoreState = {\n isAuthenticated: false,\n tokenInfo: null,\n state: 'ready',\n ...defaultState,\n };\n const store = createStore<NylasAuthStoreState>(defaultNylasStoreState);\n\n /**\n * Reset the Nylas store to its default state.\n * There is something wrong with the stencil/store reset method,\n * so we have to do it via this hack.\n */\n store.reset = () => {\n for (const key in defaultNylasStoreState) {\n const value = defaultNylasStoreState[key as keyof typeof defaultNylasStoreState];\n store.set(key as any, value);\n }\n };\n\n return store;\n}\n",":host {\n display: contents;\n}\n","import { NylasBaseProvider } from '@/common/abstract-provider';\nimport { RegisteredComponent } from '@/common/register-component';\nimport { NylasConnector } from '@/connector/nylas-connector';\nimport { HashRouter } from '@/routers/hash-router';\nimport { CreateNylasAuthStore, NylasAuthStoreType } from '@/stores/auth-store';\nimport { CreateNylasSchedulerStore, NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport type { AuthConfig, NylasAuthType } from '@nylas/core';\nimport { NylasAuth } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, h } from '@stencil/core';\nimport type { EventOverride } from '@/common/component-types';\nimport { debug } from '@/utils/utils';\nimport { CreateNylasSchedulerConfigStore, NylasSchedulerConfigStoreType } from '@/stores/scheduler-config-store';\n\n/**\n * The Nylas Provider component.\n * This component is used to manage the Nylas Provider.\n * It is used to manage the Nylas Auth instance, the Nylas Connector instance,\n * and the Nylas Store instance.\n */\n@Component({\n tag: 'nylas-provider',\n styleUrl: 'nylas-provider.css',\n shadow: true,\n})\nexport class NylasProvider {\n /**\n * Stores to be used by the provider.\n */\n private stores?: {\n auth: NylasAuthStoreType;\n scheduler: NylasSchedulerStoreType;\n schedulerConfig: NylasSchedulerConfigStoreType;\n };\n\n /**\n * This is a base provide that defines the common methods and properties\n * that all providers should have.\n *\n * Because stencil does not support abstract classes, we have to use a\n * property to store the base provider instance.\n */\n private baseProvider?: NylasBaseProvider<Exclude<typeof this.stores, undefined>>;\n\n /**\n * The Nylas Auth instance.\n * Used to manage all things authentication with Nylas.\n */\n private nylasAuth?: NylasAuthType;\n\n /**\n * The Nylas Mailbox Connector instance.\n * The branins of the provider. It manages data fetching and state synchronization.\n */\n private nylasConnector?: NylasConnector;\n\n /**\n * The host element.\n * Used to manage the host element of the provider.\n */\n @Element() private host!: HTMLNylasProviderElement;\n\n /**\n * The Nylas Auth configuration.\n * Used to manage all things authentication with Nylas.\n */\n @Prop({ attribute: 'auth-config' }) readonly authConfig?: AuthConfig;\n\n /**\n * This provides a way to override the default event handlers.\n */\n @Prop() eventOverrides: EventOverride<Exclude<typeof this.nylasConnector, undefined>> = {};\n\n /**\n * Automatically register components that have the `@RegisterComponent` decorator.\n * If this is set to false, you will need to manually register components using the\n * `registerComponent` method.\n * @default true\n */\n @Prop() automaticComponentRegistration: boolean = true;\n\n /**\n * This event is fired when the provider is initialized.\n * It can be used to set the initial state of the provider,\n * or to prevent the provider from firing some default behavior.\n */\n @Event({ cancelable: true }) init!: EventEmitter<HTMLNylasProviderElement>;\n\n /**\n * This event is fired when the the NyalsAuth isAuthenticated state changes\n * to true.\n */\n @Event({ cancelable: true }) loggedIn!: EventEmitter<HTMLNylasProviderElement>;\n\n /**\n * This event is fired when the the NyalsAuth isAuthenticated state changes\n * to true.\n */\n @Event({ cancelable: true }) loggedOut!: EventEmitter<HTMLNylasProviderElement>;\n\n connectedCallback() {\n debug('[nylas-provider] connectedCallback');\n }\n\n async componentWillLoad() {\n debug('[nylas-provider] componentWillLoad');\n\n this.stores = {\n auth: CreateNylasAuthStore(),\n scheduler: CreateNylasSchedulerStore(),\n schedulerConfig: CreateNylasSchedulerConfigStore(),\n };\n this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n const router = new HashRouter();\n\n /**\n * Create the NylasAuth instance.\n * This is used to manage all things authentication with Nylas.\n */\n this.nylasAuth = NylasAuth({\n apiUri: 'https://api.us.nylas.com',\n elementsApiUri: 'https://elements.us.nylas.com',\n storageType: 'indexeddb',\n clientId: 'YOUR_CLIENT_ID',\n defaultScopes: [],\n redirectURI: '/',\n ...this.authConfig,\n });\n\n const nylasAuthStore = this.baseProvider?.getStore('auth');\n if (!nylasAuthStore) {\n throw new Error('The auth store is not set');\n }\n\n const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n if (!nylasSchedulerStore) {\n throw new Error('The scheduler store is not set');\n }\n\n const nylasSchedulerConfigStore = this.baseProvider?.getStore('schedulerConfig');\n if (!nylasSchedulerConfigStore) {\n throw new Error('The scheduler config store is not set');\n }\n\n this.nylasConnector = new NylasConnector(router, this.nylasAuth, nylasAuthStore, nylasSchedulerStore, nylasSchedulerConfigStore);\n\n const initEvent = this.init.emit(this.host);\n if (!initEvent.defaultPrevented) {\n /**\n * By default, on init, we will validate the session.\n * This will check if the user is logged in and if the session is still valid.\n * If the session is not valid, the user will be logged out.\n */\n await this.nylasConnector?.auth.validateSession();\n }\n\n /**\n * Listen for changes in the NylasAuth isAuthenticated state.\n * This is used to fire the loggedIn and loggedOut events.\n */\n this.handleAuthChange(nylasAuthStore.state.isAuthenticated);\n\n this.baseProvider?.componentWillLoad(this.nylasConnector);\n }\n\n componentDidLoad() {\n const nylasAuthStore = this.baseProvider?.getStore('auth');\n nylasAuthStore?.onChange('isAuthenticated', this.handleAuthChange);\n\n this.baseProvider?.componentDidLoad();\n }\n\n componentDisconnected() {\n this.baseProvider?.componentDisconnected();\n }\n\n /**\n * This is a custom event handler that is used to register a component with the provider.\n * It is used by components that have the `@RegisterComponent` decorator.\n * @param event A custom event that contains the component to register\n * @returns Promise<void>\n */\n @Listen('registerComponent')\n async registerComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n this.baseProvider?.registerComponent(event.detail);\n }\n\n /**\n * This is a custom event handler that is used to unregister a component with the provider.\n * It is used by components that have the `@RegisterComponent` decorator.\n * @param event A custom event that contains the component to unregister\n * @returns Promise<void>\n */\n @Listen('unregisterComponent')\n async unregisterComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n this.baseProvider?.unregisterComponent(event.detail);\n }\n\n /**\n * This method is used to handle changes in the NylasAuth isAuthenticated state\n * @param isAuthenticated isAuthenticated state\n * @returns void\n */\n private handleAuthChange = async (isAuthenticated: boolean) => {\n if (isAuthenticated) {\n this.loggedIn.emit(this.host);\n } else {\n this.loggedOut.emit(this.host);\n }\n };\n\n /**\n * This method is used to retrieve the NylasAuth instance\n * @returns The NylasAuth instance\n */\n @Method()\n async getNylasAuth(): Promise<NylasAuthType | undefined> {\n return this.nylasAuth;\n }\n\n /**\n * This method is used to retrieve the NylasConnector instance\n * @returns The NylasConnector instance\n */\n @Method()\n async getNylasConnector() {\n return this.nylasConnector;\n }\n\n /**\n * This method is used to retrieve the authStore instance\n * @returns The authStore instance\n */\n @Method()\n async getAuthStore(): Promise<NylasAuthStoreType | undefined> {\n return this.baseProvider?.getStore('auth');\n }\n\n /**\n * This method is used to retrieve the NylasScheduler instance\n * @returns The NylasScheduler instance\n */\n @Method()\n async getNylasSchedulerStore(): Promise<NylasSchedulerStoreType | undefined> {\n return this.baseProvider?.getStore('scheduler');\n }\n\n /**\n * This method is used to retrieve the NylasSchedulerConfig instance\n * @returns The NylasSchedulerConfig instance\n */\n @Method()\n async getNylasSchedulerConfigStore(): Promise<NylasSchedulerConfigStoreType | undefined> {\n return this.baseProvider?.getStore('schedulerConfig');\n }\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"nylas-provider.entry.js","mappings":"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","names":["NylasAuth"],"sources":["src/connector/shared/api/auth.ts","src/connector/nylas-connector/index.ts","src/routers/hash-router.ts","src/stores/auth-store.ts","src/components/nylas-provider/nylas-provider.css?tag=nylas-provider&encapsulation=shadow","src/components/nylas-provider/nylas-provider.tsx"],"sourcesContent":["import { debug } from '@/utils/utils';\nimport { NylasAuthStoreType, NylasAuthType } from '../../..';\nimport { TokenInfo } from '@nylas/core/dist/auth';\nexport class NylasAuthConnector {\n private nylasAuth: NylasAuthType;\n private nylasAuthStore: NylasAuthStoreType;\n\n constructor(nylasAuth: NylasAuthType, nylasAuthStore: NylasAuthStoreType) {\n this.nylasAuth = nylasAuth;\n this.nylasAuthStore = nylasAuthStore;\n }\n\n /**\n * Validates the current session and updates the store with the token info\n * if the user is authenticated.\n * If the user is not authenticated, the store is reset.\n * @returns {Promise<void>}\n */\n public async validateSession(): Promise<void> {\n const isAuthenticated = await this.isAccessTokenValid();\n if (!isAuthenticated) {\n // Reset the store if the access token is not valid\n this.logout();\n } else {\n // If the user is authenticated, update the store with the token info\n let tokenInfo = await this.nylasAuth.getTokenInfo();\n if (tokenInfo) {\n // If token is expired or about to expire (in 5 minutes), refresh it\n const expireTimeCheck = 5 * 60 * 1000; // 5 minutes\n const currentTimeInSeconds = Math.floor(Date.now() / 1000);\n\n if (tokenInfo.expires_in && tokenInfo.expires_in - currentTimeInSeconds < expireTimeCheck) {\n debug('[NylasAuthConnectorMixin] Refreshing access token');\n tokenInfo = await this.nylasAuth.refreshAccessToken();\n if (!tokenInfo) {\n debug('[NylasAuthConnectorMixin] Token is expired and could not be refreshed. Logging out.');\n this.logout();\n return;\n }\n }\n\n this.nylasAuthStore.state.tokenInfo = tokenInfo;\n }\n }\n this.nylasAuthStore.state.isAuthenticated = isAuthenticated;\n }\n\n /**\n * Returns true if the user is authenticated.\n * @returns {Promise<boolean>}\n */\n public async isAuthenticated(): Promise<boolean> {\n return this.nylasAuth.isAuthenticated();\n }\n\n /**\n * Returns the token info if the user is authenticated.\n * @returns {Promise<TokenInfo>}\n */\n public async getTokenInfo(): Promise<TokenInfo | null> {\n return this.nylasAuth.getTokenInfo();\n }\n\n /**\n * Returns true if the access token is valid.\n * @returns {Promise<boolean>}\n */\n public async isAccessTokenValid(): Promise<boolean> {\n return this.nylasAuth.isAccessTokenValid();\n }\n\n /**\n * Removes the token info from the store and logs the user out.\n * @returns {Promise<void>}\n */\n public async logout(): Promise<void> {\n await this.nylasAuth.logout();\n }\n\n /**\n * Returns the URL to redirect the user to for authentication.\n * @param scopes An array of scopes to request from the user.\n * @param email The email address of the user to authenticate.\n * @param provider The provider to use for authentication.\n * @returns {Promise<string>}\n */\n public async getHostedAuthRedirectURL(scopes?: string[], email?: string, provider?: string): Promise<string> {\n return this.nylasAuth.getHostedAuthRedirectURL(scopes, email, provider);\n }\n\n /**\n * Exchanges the auth code for a token info and updates the store.\n * @param currentUrl The current URL of the page.\n * @returns {Promise<TokenInfo | null>}\n */\n public async manageHostedAuthCodeExchange(currentUrl: string): Promise<TokenInfo | null> {\n const url = new URL(currentUrl);\n const code = url.searchParams.get('code');\n\n if (code) {\n const tokenInfo = await this.nylasAuth.exchangeAuthCodeForTokenInfo(code);\n if (tokenInfo) {\n this.nylasAuthStore.state.tokenInfo = tokenInfo;\n this.nylasAuthStore.state.isAuthenticated = true;\n return tokenInfo;\n }\n }\n\n return null;\n }\n}\n","import { RouterInterface } from '@/routers/router-interface';\nimport { NylasAuthStoreType } from '@/stores/auth-store';\nimport { NylasSchedulerConfigStoreType } from '@/stores/scheduler-config-store';\nimport { NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport { debug } from '@/utils/utils';\nimport type { NylasAuthType } from '@nylas/core';\nimport { NylasConnectorInterface } from '../connector-interface';\nimport { NylasAuthConnector } from '../shared/api/auth';\nimport { NylaSchedulerAPIConnector } from '../shared/api/scheduler';\n/**\n * Base class for the Nylas connector.\n */\nexport class NylasConnector implements NylasConnectorInterface {\n public router: RouterInterface;\n public nylasAuth: NylasAuthType;\n public nylasAuthStore: NylasAuthStoreType;\n public nylasSchedulerStore: NylasSchedulerStoreType;\n public nylasSchedulerConfigStore: NylasSchedulerConfigStoreType;\n public schedulerAPIURL: string;\n\n private _authConnector: NylasAuthConnector | undefined;\n private _schedulerAPIConnector: NylaSchedulerAPIConnector | undefined;\n\n constructor(\n router: RouterInterface,\n nylasAuth: NylasAuthType,\n nylasAuthStore: NylasAuthStoreType,\n nylasSchedulerStore: NylasSchedulerStoreType,\n nylasSchedulerConfigStore: NylasSchedulerConfigStoreType,\n schedulerAPIURL: string = 'https://api.us.nylas.com',\n ) {\n this.router = router;\n this.schedulerAPIURL = schedulerAPIURL;\n this.nylasAuth = nylasAuth;\n this.nylasAuthStore = nylasAuthStore;\n this.nylasSchedulerStore = nylasSchedulerStore;\n this.nylasSchedulerConfigStore = nylasSchedulerConfigStore;\n }\n\n public init() {\n debug('NylasConnector init');\n }\n\n public get authStore() {\n return this.nylasAuthStore;\n }\n\n public get schedulerStore() {\n return this.nylasSchedulerStore;\n }\n\n public get schedulerConfigStore() {\n return this.nylasSchedulerConfigStore;\n }\n\n public get auth() {\n if (this._authConnector) {\n return this._authConnector;\n }\n this._authConnector = new NylasAuthConnector(this.nylasAuth, this.nylasAuthStore);\n return this._authConnector;\n }\n\n public get scheduler() {\n if (this._schedulerAPIConnector) {\n return this._schedulerAPIConnector;\n }\n this._schedulerAPIConnector = new NylaSchedulerAPIConnector({\n schedulerAPIURL: this.schedulerAPIURL,\n schedulerStore: this.schedulerStore,\n });\n return this._schedulerAPIConnector;\n }\n\n public getAuth() {\n return this.nylasAuth;\n }\n\n public resetStores() {\n this.nylasAuthStore.reset();\n }\n\n public async logout() {\n await this.nylasAuth.logout();\n this.resetStores();\n }\n}\n\nexport type PublicMethods<T> = {\n [K in keyof T]: T[K] extends Function ? (string extends K ? never : K) : never;\n}[keyof T];\n\nexport type NylasConnectorPublicMethods = PublicMethods<NylasConnector>;\n","import { debug } from '@/utils/utils';\nimport { RouteListener, RouteParams, RoutePath, RouterInterface } from './router-interface';\n\nexport class PolyFillHashChangeEvent extends Event {\n oldURL?: string;\n newURL?: string;\n\n constructor(type: string, eventInitDict: HashChangeEventInit) {\n super(type, eventInitDict);\n this.oldURL = eventInitDict.oldURL;\n this.newURL = eventInitDict.newURL;\n }\n}\n\nexport class HashRouter implements RouterInterface {\n private routeChangeListeners: [route: RoutePath, RouteListener<any>][] = [];\n\n constructor() {\n debug('HashRouter constructor');\n }\n\n // Destroy the router\n public destroy(): void {\n debug('HashRouter destroy');\n window.removeEventListener('hashchange', this.onRouteChange.bind(this));\n }\n\n // Initialize the router\n public init(): void {\n debug('HashRouter init');\n window.addEventListener('hashchange', this.onRouteChange.bind(this));\n\n // Trigger the initial route change\n if (typeof HashChangeEvent !== 'undefined') {\n const event: HashChangeEvent = new HashChangeEvent('hashchange', { oldURL: '', newURL: window.location.href });\n this.onRouteChange(event);\n } else {\n const event: Event = new PolyFillHashChangeEvent('hashchange', { oldURL: '', newURL: window.location.href });\n this.onRouteChange(event as HashChangeEvent);\n }\n }\n\n public addRouteChangeListener<Path extends RoutePath>(route: Path, listener: RouteListener<Path>): void {\n debug('HashRouter addRouteChangeListener');\n this.routeChangeListeners.push([route, listener]);\n }\n\n public navigate(route: string, shallow: boolean): void {\n debug('HashRouter navigate');\n\n // If we're navigating shallow, don't add a new history entry\n if (shallow) {\n return window.history.pushState(null, '', `#${route}`);\n }\n\n window.location.hash = route;\n }\n\n public setRoute(route: string): void {\n debug('HashRouter setRoute');\n window.location.hash = route;\n }\n\n // Matches a route and executes the callback\n public matchRoute(route: string, path: string): boolean {\n const routeParts = route.split('/');\n const pathParts = path.split('/');\n\n // If the route is `/` an the hash is empty, match the route\n debug(`HashRouter matchRoute route=${route} path=${path}`, { routeParts, pathParts });\n if (routeParts[1] === '' && pathParts[0] === '') {\n return true;\n }\n\n if (routeParts.length !== pathParts.length) {\n return false;\n }\n\n for (let i = 0; i < routeParts.length; i++) {\n const routePart = routeParts[i];\n const pathPart = pathParts[i];\n if (routePart.startsWith(':')) {\n continue;\n }\n if (routePart !== pathPart) {\n return false;\n }\n }\n\n return true;\n }\n\n // Parse the route and return the route params\n public getRouteParams<Path extends RoutePath>(route: Path): RouteParams<Path> {\n debug('HashRouter getRouteParams');\n const routeParams: RouteParams<Path> = {} as RouteParams<Path>;\n const routeParts = route.split('/');\n const routeConfigParts = window.location.hash.split('/');\n routeParts.forEach((routePart, index) => {\n if (routePart.startsWith(':')) {\n const key = routePart.substring(1) as keyof RouteParams<Path>;\n routeParams[key] = routeConfigParts[index] as RouteParams<Path>[keyof RouteParams<Path>]; // Cast the value to string\n }\n });\n return routeParams;\n }\n\n public getRouteWithParams(route: string, routeParams: Record<string, any>): string {\n debug('HashRouter getRouteWithParams');\n let routeWithParams = route;\n Object.keys(routeParams).forEach(key => {\n routeWithParams = routeWithParams.replace(`:${key}`, routeParams[key]);\n });\n return routeWithParams;\n }\n\n public getRoute(): string {\n debug('HashRouter getRoute');\n return window.location.hash;\n }\n\n public onRouteChange(event: HashChangeEvent): void {\n this.routeChangeListeners.forEach(async ([route, listener]) => {\n const path = event.newURL.indexOf('#') === -1 ? '' : event.newURL.substring(event.newURL.indexOf('#') + 1);\n debug(`HashRouter onRouteChange route=${route} path=${path}`, { event });\n if (!this.matchRoute(route, path)) {\n debug(`HashRouter onRouteChange route=${route} path=${path} does not match`);\n return;\n }\n const routeParams = this.getRouteParams(route) as RouteParams<RoutePath>;\n await listener(route, path, routeParams);\n });\n }\n\n public getBasePath(): string {\n debug('HashRouter getBasePath');\n return '';\n }\n}\n","import { TokenInfo } from '@nylas/core/dist/auth';\nimport { createStore } from '@stencil/store';\nimport { DataState } from '@/common/types';\n\nexport interface NylasAuthStoreState {\n isAuthenticated: boolean;\n tokenInfo: TokenInfo | null;\n state: DataState;\n}\n\nexport type NylasAuthStoreType = ReturnType<typeof CreateNylasAuthStore>;\n\nexport function CreateNylasAuthStore(defaultState: Partial<NylasAuthStoreState> = {}) {\n const defaultNylasStoreState: NylasAuthStoreState = {\n isAuthenticated: false,\n tokenInfo: null,\n state: 'ready',\n ...defaultState,\n };\n const store = createStore<NylasAuthStoreState>(defaultNylasStoreState);\n\n /**\n * Reset the Nylas store to its default state.\n * There is something wrong with the stencil/store reset method,\n * so we have to do it via this hack.\n */\n store.reset = () => {\n for (const key in defaultNylasStoreState) {\n const value = defaultNylasStoreState[key as keyof typeof defaultNylasStoreState];\n store.set(key as any, value);\n }\n };\n\n return store;\n}\n",":host {\n display: contents;\n}\n","import { NylasBaseProvider } from '@/common/abstract-provider';\nimport { RegisteredComponent } from '@/common/register-component';\nimport { NylasConnector } from '@/connector/nylas-connector';\nimport { HashRouter } from '@/routers/hash-router';\nimport { CreateNylasAuthStore, NylasAuthStoreType } from '@/stores/auth-store';\nimport { CreateNylasSchedulerStore, NylasSchedulerStoreType } from '@/stores/scheduler-store';\nimport type { AuthConfig, NylasAuthType } from '@nylas/core';\nimport { NylasAuth } from '@nylas/core';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, h } from '@stencil/core';\nimport type { EventOverride } from '@/common/component-types';\nimport { debug } from '@/utils/utils';\nimport { CreateNylasSchedulerConfigStore, NylasSchedulerConfigStoreType } from '@/stores/scheduler-config-store';\n\n/**\n * The Nylas Provider component.\n * This component is used to manage the Nylas Provider.\n * It is used to manage the Nylas Auth instance, the Nylas Connector instance,\n * and the Nylas Store instance.\n */\n@Component({\n tag: 'nylas-provider',\n styleUrl: 'nylas-provider.css',\n shadow: true,\n})\nexport class NylasProvider {\n /**\n * Stores to be used by the provider.\n */\n private stores?: {\n auth: NylasAuthStoreType;\n scheduler: NylasSchedulerStoreType;\n schedulerConfig: NylasSchedulerConfigStoreType;\n };\n\n /**\n * This is a base provide that defines the common methods and properties\n * that all providers should have.\n *\n * Because stencil does not support abstract classes, we have to use a\n * property to store the base provider instance.\n */\n private baseProvider?: NylasBaseProvider<Exclude<typeof this.stores, undefined>>;\n\n /**\n * The Nylas Auth instance.\n * Used to manage all things authentication with Nylas.\n */\n private nylasAuth?: NylasAuthType;\n\n /**\n * The Nylas Mailbox Connector instance.\n * The branins of the provider. It manages data fetching and state synchronization.\n */\n private nylasConnector?: NylasConnector;\n\n /**\n * The host element.\n * Used to manage the host element of the provider.\n */\n @Element() private host!: HTMLNylasProviderElement;\n\n /**\n * The Nylas Auth configuration.\n * Used to manage all things authentication with Nylas.\n */\n @Prop({ attribute: 'auth-config' }) readonly authConfig?: AuthConfig;\n\n /**\n * This provides a way to override the default event handlers.\n */\n @Prop() eventOverrides: EventOverride<Exclude<typeof this.nylasConnector, undefined>> = {};\n\n /**\n * Automatically register components that have the `@RegisterComponent` decorator.\n * If this is set to false, you will need to manually register components using the\n * `registerComponent` method.\n * @default true\n */\n @Prop() automaticComponentRegistration: boolean = true;\n\n /**\n * This event is fired when the provider is initialized.\n * It can be used to set the initial state of the provider,\n * or to prevent the provider from firing some default behavior.\n */\n @Event({ cancelable: true }) init!: EventEmitter<HTMLNylasProviderElement>;\n\n /**\n * This event is fired when the the NyalsAuth isAuthenticated state changes\n * to true.\n */\n @Event({ cancelable: true }) loggedIn!: EventEmitter<HTMLNylasProviderElement>;\n\n /**\n * This event is fired when the the NyalsAuth isAuthenticated state changes\n * to true.\n */\n @Event({ cancelable: true }) loggedOut!: EventEmitter<HTMLNylasProviderElement>;\n\n connectedCallback() {\n debug('[nylas-provider] connectedCallback');\n }\n\n async componentWillLoad() {\n debug('[nylas-provider] componentWillLoad');\n\n this.stores = {\n auth: CreateNylasAuthStore(),\n scheduler: CreateNylasSchedulerStore(),\n schedulerConfig: CreateNylasSchedulerConfigStore(),\n };\n this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);\n\n const router = new HashRouter();\n\n /**\n * Create the NylasAuth instance.\n * This is used to manage all things authentication with Nylas.\n */\n this.nylasAuth = NylasAuth({\n apiUri: 'https://api.us.nylas.com',\n elementsApiUri: 'https://elements.us.nylas.com',\n storageType: 'indexeddb',\n clientId: 'YOUR_CLIENT_ID',\n defaultScopes: [],\n redirectURI: '/',\n ...this.authConfig,\n });\n\n const nylasAuthStore = this.baseProvider?.getStore('auth');\n if (!nylasAuthStore) {\n throw new Error('The auth store is not set');\n }\n\n const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');\n if (!nylasSchedulerStore) {\n throw new Error('The scheduler store is not set');\n }\n\n const nylasSchedulerConfigStore = this.baseProvider?.getStore('schedulerConfig');\n if (!nylasSchedulerConfigStore) {\n throw new Error('The scheduler config store is not set');\n }\n\n this.nylasConnector = new NylasConnector(router, this.nylasAuth, nylasAuthStore, nylasSchedulerStore, nylasSchedulerConfigStore);\n\n const initEvent = this.init.emit(this.host);\n if (!initEvent.defaultPrevented) {\n /**\n * By default, on init, we will validate the session.\n * This will check if the user is logged in and if the session is still valid.\n * If the session is not valid, the user will be logged out.\n */\n await this.nylasConnector?.auth.validateSession();\n }\n\n /**\n * Listen for changes in the NylasAuth isAuthenticated state.\n * This is used to fire the loggedIn and loggedOut events.\n */\n this.handleAuthChange(nylasAuthStore.state.isAuthenticated);\n\n this.baseProvider?.componentWillLoad(this.nylasConnector);\n }\n\n componentDidLoad() {\n const nylasAuthStore = this.baseProvider?.getStore('auth');\n nylasAuthStore?.onChange('isAuthenticated', this.handleAuthChange);\n\n this.baseProvider?.componentDidLoad();\n }\n\n componentDisconnected() {\n this.baseProvider?.componentDisconnected();\n }\n\n /**\n * This is a custom event handler that is used to register a component with the provider.\n * It is used by components that have the `@RegisterComponent` decorator.\n * @param event A custom event that contains the component to register\n * @returns Promise<void>\n */\n @Listen('registerComponent')\n async registerComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n this.baseProvider?.registerComponent(event.detail);\n }\n\n /**\n * This is a custom event handler that is used to unregister a component with the provider.\n * It is used by components that have the `@RegisterComponent` decorator.\n * @param event A custom event that contains the component to unregister\n * @returns Promise<void>\n */\n @Listen('unregisterComponent')\n async unregisterComponentHandler(event: CustomEvent<RegisteredComponent<any, any>>): Promise<void> {\n this.baseProvider?.unregisterComponent(event.detail);\n }\n\n /**\n * This method is used to handle changes in the NylasAuth isAuthenticated state\n * @param isAuthenticated isAuthenticated state\n * @returns void\n */\n private handleAuthChange = async (isAuthenticated: boolean) => {\n if (isAuthenticated) {\n this.loggedIn.emit(this.host);\n } else {\n this.loggedOut.emit(this.host);\n }\n };\n\n /**\n * This method is used to retrieve the NylasAuth instance\n * @returns The NylasAuth instance\n */\n @Method()\n async getNylasAuth(): Promise<NylasAuthType | undefined> {\n return this.nylasAuth;\n }\n\n /**\n * This method is used to retrieve the NylasConnector instance\n * @returns The NylasConnector instance\n */\n @Method()\n async getNylasConnector() {\n return this.nylasConnector;\n }\n\n /**\n * This method is used to retrieve the authStore instance\n * @returns The authStore instance\n */\n @Method()\n async getAuthStore(): Promise<NylasAuthStoreType | undefined> {\n return this.baseProvider?.getStore('auth');\n }\n\n /**\n * This method is used to retrieve the NylasScheduler instance\n * @returns The NylasScheduler instance\n */\n @Method()\n async getNylasSchedulerStore(): Promise<NylasSchedulerStoreType | undefined> {\n return this.baseProvider?.getStore('scheduler');\n }\n\n /**\n * This method is used to retrieve the NylasSchedulerConfig instance\n * @returns The NylasSchedulerConfig instance\n */\n @Method()\n async getNylasSchedulerConfigStore(): Promise<NylasSchedulerConfigStoreType | undefined> {\n return this.baseProvider?.getStore('schedulerConfig');\n }\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|