@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
package/dist/collection/components/design-system/multi-select-dropdown/multi-select-dropdown.js
CHANGED
|
@@ -162,9 +162,9 @@ export class MultiSelectDropdown {
|
|
|
162
162
|
}, 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))));
|
|
163
163
|
}
|
|
164
164
|
render() {
|
|
165
|
-
return (h(Host, { key: '
|
|
165
|
+
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
|
|
166
166
|
? this.multipleOptionsSelectedLabel
|
|
167
|
-
: this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: '
|
|
167
|
+
: 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)));
|
|
168
168
|
}
|
|
169
169
|
static get is() { return "multi-select-dropdown"; }
|
|
170
170
|
static get encapsulation() { return "shadow"; }
|
|
@@ -222,8 +222,9 @@ export class MultiSelectDropdown {
|
|
|
222
222
|
"resolved": "DropdownOption[]",
|
|
223
223
|
"references": {
|
|
224
224
|
"DropdownOption": {
|
|
225
|
-
"location": "
|
|
226
|
-
"
|
|
225
|
+
"location": "import",
|
|
226
|
+
"path": "@nylas/core",
|
|
227
|
+
"id": "../nylas-js-core/dist/index.d.ts::DropdownOption"
|
|
227
228
|
}
|
|
228
229
|
}
|
|
229
230
|
},
|
package/dist/collection/components/design-system/multi-select-dropdown/multi-select-dropdown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select-dropdown.js","sourceRoot":"","sources":["../../../../src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
1
|
+
{"version":3,"file":"multi-select-dropdown.js","sourceRoot":"","sources":["../../../../src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
@@ -187,7 +187,7 @@ export class SelectDropdown {
|
|
|
187
187
|
}
|
|
188
188
|
render() {
|
|
189
189
|
const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);
|
|
190
|
-
return (h("div", { key: '
|
|
190
|
+
return (h("div", { key: '76f953d52f4899ece2ef69efcc79aba9b7989918', class: "dropdown", part: "sd_dropdown" }, h("label", { key: '5d5080ede5628e09dca5823243a20e74399ec460', part: "sd_dropdown_label", class: { error: !!this.error } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("button", { key: '0bf99a9fb258e7f2497a0b154b57f9822e202fb8', part: "sd_dropdown-button", class: { dropbtn: true, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), disabled: this.readOnly, "aria-haspopup": "listbox", title: this.readOnly ? 'read-only field' : buttonText, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: '60a6936c37966ef724eea0382b0bef577f5a807b', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '9917029151048ecb413cb2448fb2405d9228b1c7', class: "selected-option", part: "sd_dropdown-button-selected-label" }, buttonText), this.withChevron && (h("span", { class: {
|
|
191
191
|
open: this.isOpen,
|
|
192
192
|
closed: !this.isOpen,
|
|
193
193
|
chevron: true,
|
|
@@ -232,8 +232,9 @@ export class SelectDropdown {
|
|
|
232
232
|
"resolved": "DropdownOption[]",
|
|
233
233
|
"references": {
|
|
234
234
|
"DropdownOption": {
|
|
235
|
-
"location": "
|
|
236
|
-
"
|
|
235
|
+
"location": "import",
|
|
236
|
+
"path": "@nylas/core",
|
|
237
|
+
"id": "../nylas-js-core/dist/index.d.ts::DropdownOption"
|
|
237
238
|
}
|
|
238
239
|
}
|
|
239
240
|
},
|
|
@@ -253,8 +254,9 @@ export class SelectDropdown {
|
|
|
253
254
|
"resolved": "DropdownOption | null",
|
|
254
255
|
"references": {
|
|
255
256
|
"DropdownOption": {
|
|
256
|
-
"location": "
|
|
257
|
-
"
|
|
257
|
+
"location": "import",
|
|
258
|
+
"path": "@nylas/core",
|
|
259
|
+
"id": "../nylas-js-core/dist/index.d.ts::DropdownOption"
|
|
258
260
|
}
|
|
259
261
|
}
|
|
260
262
|
},
|
|
@@ -454,8 +456,9 @@ export class SelectDropdown {
|
|
|
454
456
|
"resolved": "{ value: string; name: string; error?: string | undefined; label?: string | undefined; }",
|
|
455
457
|
"references": {
|
|
456
458
|
"DropdownOption": {
|
|
457
|
-
"location": "
|
|
458
|
-
"
|
|
459
|
+
"location": "import",
|
|
460
|
+
"path": "@nylas/core",
|
|
461
|
+
"id": "../nylas-js-core/dist/index.d.ts::DropdownOption"
|
|
459
462
|
}
|
|
460
463
|
}
|
|
461
464
|
}
|
|
@@ -474,8 +477,9 @@ export class SelectDropdown {
|
|
|
474
477
|
"resolved": "{ value: string; name: string; error?: string | undefined; label?: string | undefined; }",
|
|
475
478
|
"references": {
|
|
476
479
|
"DropdownOption": {
|
|
477
|
-
"location": "
|
|
478
|
-
"
|
|
480
|
+
"location": "import",
|
|
481
|
+
"path": "@nylas/core",
|
|
482
|
+
"id": "../nylas-js-core/dist/index.d.ts::DropdownOption"
|
|
479
483
|
}
|
|
480
484
|
}
|
|
481
485
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-dropdown.js","sourceRoot":"","sources":["../../../../src/components/design-system/select-dropdown/select-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAsBvG,MAAM,OAAO,cAAc;;QAER,kBAAa,GAAW,iBAAiB,CAAC;;uBAYvB,EAAE;qCAIyD,IAAI;0BAIrE,IAAI;;wBAUN,KAAK;wBAKL,KAAK;+BAKC,EAAE;;2BAQL,IAAI;0BAIN,kBAAkB;4BAIhB,EAAE;;sBAUN,KAAK;2BAID,EAAE;+BAIY,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;oCAMtB,EAAE;qBAKjB,EAAE;;IAwB3B,qBAAqB,CAAC,QAA0B,EAAE,QAA0B;QAC1E,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;IAClC,CAAC;IAGD,mCAAmC,CAAC,QAAwB,EAAE,QAAwB;QACpF,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,EAAE,KAAK,KAAK,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC3E,OAAO;QACT,CAAC;QACD,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC/B,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;YACzC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,EAAE;YAC5B,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;IACL,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC7D,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QAEpC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,qBAAqB,CAAC;QAEjD,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;YACzC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,IAAI,EAAE;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;IACL,CAAC;IAOD,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;QAChD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAOD,mBAAmB,CAAC,KAAkB;QACpC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;QAChD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAGD,QAAQ,CAAC,KAAa;QACpB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,IAAI,GAAG,IAAI,CAAC,KAAK,eAAe,CAAC;QACjE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IACD,cAAc;QACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,aAAa,CAAC,KAAY;QACxB,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IACjH,CAAC;IAED,YAAY,CAAC,MAAsB;QACjC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;YACrC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,yBAAyB,CAAC,KAAoB;QAC5C,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,WAAW,CAAC;YACjB,KAAK,OAAO;gBACV,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACjB,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,CAAC;gBACD,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;gBACvB,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,MAAM;QACV,CAAC;IACH,CAAC;IAED,oBAAoB,CAAC,CAAC;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC;QACnC,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACvF,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9D,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,YAAY,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACtC,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;gBAC/B,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACzE,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;YACnD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAC9B,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;YAClE,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,YAAY,KAAK,CAAC,EAAE,CAAC;gBACvB,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;gBAC/B,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9E,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;YACnD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAC9B,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC9B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAED,WAAW,CAAC,KAAK;QACf,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;QAC/B,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,CAAC,SAAS,CAAkB,CAAC;QAE/E,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAED,qBAAqB,CAAC,KAAoB;QACxC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YACzE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC1D,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9E,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;YACxF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACpD,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAClC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAED,kBAAkB,CAAC,MAA6B,EAAE,cAAuB;QACvE,IAAI,cAAc,EAAE,CAAC;YACnB,OAAO,cAAc,CAAC;QACxB,CAAC;QACD,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;IAC5G,CAAC;IAID,kBAAkB,CAAC,KAAiB;QAElC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAGlC,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE7C,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAClC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEzF,OAAO,CACL,4DAAK,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,aAAa;YACtC,8DAAO,IAAI,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE;gBAC3D,IAAI,CAAC,KAAK,IAAI,CACb;oBACE,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;oBACtC,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,UAAU,QAAS,CAC/C,CACL;gBACD,+DACE,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,EAChE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACT,SAAS,EACvB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU,mBACtC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACjC,IAAI,CAAC,IAAI,EACrB,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC;oBAEjD,6DAAM,IAAI,EAAC,aAAa,iBAAa,MAAM,GAAQ;oBACnD,6DAAM,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,mCAAmC,IACnE,UAAU,CACN;oBACN,IAAI,CAAC,WAAW,IAAI,CACnB,YACE,KAAK,EAAE;4BACL,IAAI,EAAE,IAAI,CAAC,MAAM;4BACjB,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM;4BACpB,OAAO,EAAE,IAAI;yBACd,iBACW,MAAM;wBAElB,oBAAc,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CAClC,CACR,CACM;gBACR,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D;YAEP,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACb,WAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,qBAAqB;gBACrD,IAAI,CAAC,UAAU,IAAI,CAClB,WAAK,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;oBACrD,mBAAa,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAE,MAAM,GAAI;oBACrD,aACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,UAAU,EACf,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAC3C,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAC7C,CACE,CACP;gBACD,UAAI,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,IAAI,2BAAyB,IAAI,CAAC,oBAAoB,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IACnJ,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CACjC,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CACxB,UAAI,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,EAAC,QAAQ,IAChJ,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,WAAK,IAAI,EAAC,uBAAuB,IAAE,MAAM,CAAC,SAAS,CAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAC1F,CACN,CAAC,CAAC,CAAC,IAAI,CACT,CACE,CACD,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n */\n@Component({\n tag: 'select-dropdown',\n styleUrl: 'select-dropdown.scss',\n shadow: true,\n})\nexport class SelectDropdown {\n @Element() el!: HTMLElement;\n private readonly componentType: string = 'select-dropdown';\n\n private inputRef?: HTMLInputElement;\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({ attribute: 'default-selected-option' }) defaultSelectedOption: DropdownOption | null = null;\n /**\n * Should show search input\n */\n @Prop() withSearch: boolean = true;\n\n /**\n * The label for the dropdown, skipped if no label is provided\n */\n @Prop() label?: string;\n\n /**\n * If true, the dropdown is required for form submission\n */\n @Prop() required: boolean = false;\n\n /**\n * The property to make the dropdown read-only. If true, the dropdown cannot be edited.\n */\n @Prop() readOnly: boolean = false;\n\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 * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions & dropdownText name on the dropdown intead of selected value\n */\n @Prop() dropdownButtonText?: string;\n /**\n * Should show chevron on button\n */\n @Prop() withChevron: boolean = true;\n /**\n * Allows to set the empty value of the dropdown\n */\n @Prop() emptyValue: string = 'Select an option'; // Default empty value\n /**\n * The custom error message to display when the value is empty or null and the dropdown is required\n */\n @Prop() errorMessage: string = '';\n\n // States\n /**\n * The selected option\n */\n @State() selectedOption!: DropdownOption | null;\n /**\n * The open state of the dropdown\n */\n @State() isOpen: boolean = false;\n /**\n * The search value for the dropdown\n */\n @State() searchValue: string = '';\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 * The error message to display when the value is empty or null and the dropdown is required\n */\n @State() error: string = '';\n\n // Events\n /**\n * This event is fired when the selected option is changed\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n /**\n * This event is fired when the default selected option is set, on component load\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownDefaultSelected!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = newValue;\n }\n\n @Watch('defaultSelectedOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (typeof newValue === 'undefined' || newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n this.nylasFormDropdownDefaultSelected.emit({\n value: newValue?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\n });\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\n }\n\n componentDidLoad() {\n this.filteredOptions = this.options;\n // Set the selected option to the first option if no option is selected\n this.selectedOption = this.defaultSelectedOption;\n\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n this.nylasFormDropdownDefaultSelected.emit({\n value: this.selectedOption?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\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.validate(this.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Listen for the formSubmitted event to validate the input value when the form is submitted.\n * @param event\n */\n @Listen('formSubmitted', { target: 'document' })\n handleFormSubmitted(event: CustomEvent) {\n this.validate(this.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else {\n this.error = '';\n }\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n filterOptions(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.searchValue = value;\n this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n }\n\n selectOption(option: DropdownOption): void {\n this.error = '';\n this.selectedOption = option;\n this.toggleDropdown();\n if (option.value !== this.emptyValue) {\n this.nylasFormDropdownChanged.emit({\n value: option.value,\n name: this.name,\n error: this.error,\n label: this.label,\n });\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 handleListboxKeydown(e) {\n const items = this.filteredOptions; // Assuming this is the array of your current filtered options\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 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 generateButtonText(option: DropdownOption | null, dropButtonText?: string): string {\n if (dropButtonText) {\n return dropButtonText;\n }\n return option?.label ? `${this.pluralizedLabel ? this.pluralizedLabel : option?.label}` : this.emptyValue;\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 const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);\n\n return (\n <div class=\"dropdown\" part=\"sd_dropdown\">\n <label part=\"sd_dropdown_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 <button\n part=\"sd_dropdown-button\"\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n aria-haspopup=\"listbox\"\n title={this.readOnly ? 'read-only field' : buttonText}\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=\"sd_dropdown-button-selected-label\">\n {buttonText}\n </span>\n {this.withChevron && (\n <span\n class={{\n open: this.isOpen,\n closed: !this.isOpen,\n chevron: true,\n }}\n aria-hidden=\"true\"\n >\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n )}\n </button>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n {this.withSearch && (\n <div class={{ 'search-box': true, 'open': this.isOpen }}>\n <search-icon width=\"15\" height=\"15\" class={'icon'} />\n <input\n type=\"text\"\n role=\"combobox\"\n placeholder=\"Search\"\n value={this.searchValue}\n ref={el => (this.inputRef = el)}\n onInput={event => this.filterOptions(event)}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n />\n </div>\n )}\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 option.value.toString() ? (\n <li tabindex=\"0\" key={option.value} id={option.value} part={`${this.name}-${option.label}`} onClick={() => this.selectOption(option)} role=\"option\">\n {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n </li>\n ) : null,\n )}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"select-dropdown.js","sourceRoot":"","sources":["../../../../src/components/design-system/select-dropdown/select-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption } from '@nylas/core';\n/**\n * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n */\n@Component({\n tag: 'select-dropdown',\n styleUrl: 'select-dropdown.scss',\n shadow: true,\n})\nexport class SelectDropdown {\n @Element() el!: HTMLElement;\n private readonly componentType: string = 'select-dropdown';\n\n private inputRef?: HTMLInputElement;\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({ attribute: 'default-selected-option' }) defaultSelectedOption: DropdownOption | null = null;\n /**\n * Should show search input\n */\n @Prop() withSearch: boolean = true;\n\n /**\n * The label for the dropdown, skipped if no label is provided\n */\n @Prop() label?: string;\n\n /**\n * If true, the dropdown is required for form submission\n */\n @Prop() required: boolean = false;\n\n /**\n * The property to make the dropdown read-only. If true, the dropdown cannot be edited.\n */\n @Prop() readOnly: boolean = false;\n\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 * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions & dropdownText name on the dropdown intead of selected value\n */\n @Prop() dropdownButtonText?: string;\n /**\n * Should show chevron on button\n */\n @Prop() withChevron: boolean = true;\n /**\n * Allows to set the empty value of the dropdown\n */\n @Prop() emptyValue: string = 'Select an option'; // Default empty value\n /**\n * The custom error message to display when the value is empty or null and the dropdown is required\n */\n @Prop() errorMessage: string = '';\n\n // States\n /**\n * The selected option\n */\n @State() selectedOption!: DropdownOption | null;\n /**\n * The open state of the dropdown\n */\n @State() isOpen: boolean = false;\n /**\n * The search value for the dropdown\n */\n @State() searchValue: string = '';\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 * The error message to display when the value is empty or null and the dropdown is required\n */\n @State() error: string = '';\n\n // Events\n /**\n * This event is fired when the selected option is changed\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n /**\n * This event is fired when the default selected option is set, on component load\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownDefaultSelected!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = newValue;\n }\n\n @Watch('defaultSelectedOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (typeof newValue === 'undefined' || newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n this.nylasFormDropdownDefaultSelected.emit({\n value: newValue?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\n });\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\n }\n\n componentDidLoad() {\n this.filteredOptions = this.options;\n // Set the selected option to the first option if no option is selected\n this.selectedOption = this.defaultSelectedOption;\n\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n this.nylasFormDropdownDefaultSelected.emit({\n value: this.selectedOption?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\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.validate(this.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Listen for the formSubmitted event to validate the input value when the form is submitted.\n * @param event\n */\n @Listen('formSubmitted', { target: 'document' })\n handleFormSubmitted(event: CustomEvent) {\n this.validate(this.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else {\n this.error = '';\n }\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n filterOptions(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.searchValue = value;\n this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n }\n\n selectOption(option: DropdownOption): void {\n this.error = '';\n this.selectedOption = option;\n this.toggleDropdown();\n if (option.value !== this.emptyValue) {\n this.nylasFormDropdownChanged.emit({\n value: option.value,\n name: this.name,\n error: this.error,\n label: this.label,\n });\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 handleListboxKeydown(e) {\n const items = this.filteredOptions; // Assuming this is the array of your current filtered options\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 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 generateButtonText(option: DropdownOption | null, dropButtonText?: string): string {\n if (dropButtonText) {\n return dropButtonText;\n }\n return option?.label ? `${this.pluralizedLabel ? this.pluralizedLabel : option?.label}` : this.emptyValue;\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 const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);\n\n return (\n <div class=\"dropdown\" part=\"sd_dropdown\">\n <label part=\"sd_dropdown_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 <button\n part=\"sd_dropdown-button\"\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n aria-haspopup=\"listbox\"\n title={this.readOnly ? 'read-only field' : buttonText}\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=\"sd_dropdown-button-selected-label\">\n {buttonText}\n </span>\n {this.withChevron && (\n <span\n class={{\n open: this.isOpen,\n closed: !this.isOpen,\n chevron: true,\n }}\n aria-hidden=\"true\"\n >\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n )}\n </button>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n {this.withSearch && (\n <div class={{ 'search-box': true, 'open': this.isOpen }}>\n <search-icon width=\"15\" height=\"15\" class={'icon'} />\n <input\n type=\"text\"\n role=\"combobox\"\n placeholder=\"Search\"\n value={this.searchValue}\n ref={el => (this.inputRef = el)}\n onInput={event => this.filterOptions(event)}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n />\n </div>\n )}\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 option.value.toString() ? (\n <li tabindex=\"0\" key={option.value} id={option.value} part={`${this.name}-${option.label}`} onClick={() => this.selectOption(option)} role=\"option\">\n {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n </li>\n ) : null,\n )}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n"]}
|
|
@@ -291,7 +291,7 @@ export class NylasProvider {
|
|
|
291
291
|
"id": "../nylas-js-core/dist/index.d.ts::NylasAuthType"
|
|
292
292
|
}
|
|
293
293
|
},
|
|
294
|
-
"return": "Promise<{ config: AuthConfig; getHostedAuthRedirectURL(scopes?: string[] | undefined, email?: string | undefined, provider?: string | undefined): Promise<string>; nylasAPIRequest: { <T>(path: string, method?: string | undefined, body?: any, parseJSON?: boolean | undefined, domain?: string | undefined, request?: RequestInit | undefined): Promise<T>; <T_1>(path: string, method: string, body: any, parseJSON: false, domain?: string | undefined, request?: RequestInit | undefined): Promise<ReadableStream<Uint8Array> | null>; <T_2>(path: string, method: string, body: any, parseJSON: true, domain?: string | undefined, request?: RequestInit | undefined): Promise<T_2>; <T_3>(path: string, method: string, body: any, parseJSON: boolean, domain?: string | undefined, request?: RequestInit | undefined): Promise<ReadableStream<Uint8Array> |
|
|
294
|
+
"return": "Promise<{ config: AuthConfig; getHostedAuthRedirectURL(scopes?: string[] | undefined, email?: string | undefined, provider?: string | undefined): Promise<string>; nylasAPIRequest: { <T>(path: string, method?: string | undefined, body?: any, parseJSON?: boolean | undefined, domain?: string | undefined, request?: RequestInit | undefined): Promise<T>; <T_1>(path: string, method: string, body: any, parseJSON: false, domain?: string | undefined, request?: RequestInit | undefined): Promise<ReadableStream<Uint8Array> | null>; <T_2>(path: string, method: string, body: any, parseJSON: true, domain?: string | undefined, request?: RequestInit | undefined): Promise<T_2>; <T_3>(path: string, method: string, body: any, parseJSON: boolean, domain?: string | undefined, request?: RequestInit | undefined): Promise<T_3 | ReadableStream<Uint8Array> | null>; }; exchangeAuthCodeForTokenInfo(code: string): Promise<TokenExchangeResponse | null>; nylasDownloadFileRequest(path: string, method?: string | undefined, body?: any): Promise<Blob>; logout(): Promise<void>; isAuthenticated(): Promise<boolean>; getTokenInfo(): Promise<TokenInfo | null>; isAccessTokenValid(): Promise<boolean>; refreshAccessToken(): Promise<TokenExchangeResponse | null>; hasScopeByType(service: \"email\" | undefined, types: string | string[]): Promise<boolean>; hasScope(scope: string | string[]): Promise<boolean>; } | undefined>"
|
|
295
295
|
},
|
|
296
296
|
"docs": {
|
|
297
297
|
"text": "This method is used to retrieve the NylasAuth instance",
|
|
@@ -155,10 +155,10 @@ export class NylasBufferTime {
|
|
|
155
155
|
const value = i * 5;
|
|
156
156
|
return {
|
|
157
157
|
label: value.toString(),
|
|
158
|
-
value: value,
|
|
158
|
+
value: value.toString(),
|
|
159
159
|
};
|
|
160
160
|
});
|
|
161
|
-
return (h(Host, null, h("div", { class: "nylas-buffer-time", part: "nbt" }, h("div", { class: "header", part: "nbt__header" }, h("h3", null, i18next.t('nylasBufferTime.headerTitle')), h("p", null, i18next.t('nylasBufferTime.headerSubTitle'), h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, i18next.t('nylasBufferTime.tooltip.desc'))))), h("div", { class: "nylas-buffer-time__body", part: "nbt__body" }, h("div", { class: "nylas-buffer-time__dropdown" }, h("div", { class: "nylas-buffer-time__row" }, h("label", null, i18next.t('nylasBufferTime.beforeBufferLabel')), h("div", { class: "dropdown-container" }, this.componentLoaded && (h("select-dropdown", { id: "before-buffer-time", withSearch: false, name: "before-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value
|
|
161
|
+
return (h(Host, null, h("div", { class: "nylas-buffer-time", part: "nbt" }, h("div", { class: "header", part: "nbt__header" }, h("h3", null, i18next.t('nylasBufferTime.headerTitle')), h("p", null, i18next.t('nylasBufferTime.headerSubTitle'), h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, i18next.t('nylasBufferTime.tooltip.desc'))))), h("div", { class: "nylas-buffer-time__body", part: "nbt__body" }, h("div", { class: "nylas-buffer-time__dropdown" }, h("div", { class: "nylas-buffer-time__row" }, h("label", null, i18next.t('nylasBufferTime.beforeBufferLabel')), h("div", { class: "dropdown-container" }, this.componentLoaded && (h("select-dropdown", { id: "before-buffer-time", withSearch: false, name: "before-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value === this.selectedBeforeBufferTime.toString()) })), h("span", null, i18next.t('nylasBufferTime.minutesShort')))), h("div", { class: "nylas-buffer-time__row" }, h("label", null, i18next.t('nylasBufferTime.afterBufferLabel')), h("div", { class: "dropdown-container" }, this.componentLoaded && (h("select-dropdown", { id: "after-buffer-time", withSearch: false, name: "after-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value === this.selectedAfterBufferTime.toString()) })), h("span", null, i18next.t('nylasBufferTime.minutesShort'))))), h("div", { class: "nylas-buffer-time__preview", part: "nbt__preview" }, h("h4", null, i18next.t('nylasBufferTime.previewHeader')), this.renderPreview())))));
|
|
162
162
|
}
|
|
163
163
|
static get is() { return "nylas-buffer-time"; }
|
|
164
164
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nylas-buffer-time.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/**\n * The `nylas-buffer-time` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nbt - The buffer time container\n * @part nbt__header - The header of the buffer time\n * @part nbt__body - The body of the buffer time\n * @part nbt__dropdown-before - The dropdown container for the before buffer time\n * @part nbt__dropdown-button-before - The dropdown button for the before buffer time\n * @part nbt__dropdown-content-before - The dropdown content for the before buffer time\n * @part nbt__dropdown-after - The dropdown container for the after buffer time\n * @part nbt__dropdown-button-after - The dropdown button for the after buffer time\n * @part nbt__dropdown-content-after - The dropdown content for the after buffer time\n * @part nbt__preview - The preview container\n */\n@Component({\n tag: 'nylas-buffer-time',\n styleUrl: 'nylas-buffer-time.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBufferTime {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /**\n * @internal\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * The name of the calendar picker.\n */\n @Prop() name: string = 'buffer-time';\n /**\n * @standalone\n * The buffer time\n */\n @Prop() buffer: { before: number; after: number } = this.selectedConfiguration?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 };\n /**\n * The selected language.\n */\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * The selected before buffer time.\n */\n @State() selectedBeforeBufferTime: number = this.buffer.before;\n\n /**\n * The selected after buffer time.\n */\n @State() selectedAfterBufferTime: number = this.buffer.after;\n\n @State() componentLoaded: boolean = false;\n\n /**\n * This event is fired when the selected buffer time is changed.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-buffer-time', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-buffer-time', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-buffer-time', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-buffer-time', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.selectedBeforeBufferTime = this.buffer.before;\n this.selectedAfterBufferTime = this.buffer.after;\n }\n this.updateFormValue(false);\n this.componentLoaded = true;\n }\n\n componentWillUpdate() {\n debug('nylas-buffer-time', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-buffer-time', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-buffer-time', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-buffer-time', 'componentDidRender');\n }\n\n /**\n * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-buffer-time', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-buffer-time', 'selectedConfigurationChangedHandler', newValue);\n const buffer = newValue?.availability?.availability_rules?.buffer;\n this.selectedAfterBufferTime = buffer?.after ? buffer.after : this.buffer.after;\n this.selectedBeforeBufferTime = buffer?.before ? buffer.before : this.buffer.before;\n this.updateFormValue(false);\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-buffer-time', 'nylasFormDropdownChangedHandler', event.detail);\n const { value, name } = event.detail;\n if (name === 'before-buffer-time') {\n this.selectedBeforeBufferTime = parseInt(value);\n } else if (name === 'after-buffer-time') {\n this.selectedAfterBufferTime = parseInt(value);\n }\n this.updateFormValue();\n }\n\n /**\n * This method is essentially a workaround to check if the internals are available because\n * the unit tests in stencil do not support the internals.\n * @returns boolean\n */\n get isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function';\n }\n\n updateFormValue(valueChanged: boolean = true) {\n const bufferTime = {\n before: this.selectedBeforeBufferTime,\n after: this.selectedAfterBufferTime,\n };\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(bufferTime), this.name);\n if (valueChanged) {\n this.valueChanged.emit({ value: JSON.stringify(bufferTime), name: this.name });\n }\n }\n\n renderPreview() {\n const totalSlots = 4;\n const slotHeight = 10; // The height for each 30-minute slot\n\n // Event slot height is constant\n const eventSlotHeight = slotHeight * 2;\n\n // Helper function to determine the fill of a slot based on the minutes selected\n const slotFill = minutes => {\n const fullSlots = Math.floor(minutes / 30);\n const partialFillHeight = ((minutes % 30) / 30) * slotHeight;\n\n return {\n fullSlots,\n partialFillHeight,\n };\n };\n\n // Helper function to create before slots\n const createBeforeSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedBeforeBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n // Slot is active if its index is greater than the total slots minus the full slots minus one\n // and there are some minutes selected.\n const isActive = this.selectedBeforeBufferTime > 0 && index > totalSlots - fullSlots - 1;\n const isPartial = this.selectedBeforeBufferTime > 0 && index === totalSlots - fullSlots - 1 && partialFillHeight > 0;\n\n const slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n key={index}\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n // Helper function to create after slots\n const createAfterSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedAfterBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n const isActive = this.selectedAfterBufferTime > 0 && index < fullSlots;\n const isPartial = index === fullSlots && partialFillHeight > 0;\n\n const slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n key={index}\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n return (\n <div class=\"preview-container\">\n {createBeforeSlots()}\n <div class=\"event-slot\" style={{ height: `${eventSlotHeight}px` }}></div>\n {createAfterSlots()}\n </div>\n );\n }\n\n @RegisterComponent<NylasBufferTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-buffer-time',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const minuteOptions = Array.from({ length: 25 }, (_, i) => {\n const value = i * 5;\n return {\n label: value.toString(),\n value: value,\n };\n });\n\n return (\n <Host>\n <div class=\"nylas-buffer-time\" part=\"nbt\">\n <div class=\"header\" part=\"nbt__header\">\n <h3>{i18next.t('nylasBufferTime.headerTitle')}</h3>\n <p>\n {i18next.t('nylasBufferTime.headerSubTitle')}\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasBufferTime.tooltip.desc')}</span>\n </tooltip-component>\n </p>\n </div>\n <div class=\"nylas-buffer-time__body\" part=\"nbt__body\">\n <div class=\"nylas-buffer-time__dropdown\">\n <div class=\"nylas-buffer-time__row\">\n <label>{i18next.t('nylasBufferTime.beforeBufferLabel')}</label>\n <div class=\"dropdown-container\">\n {this.componentLoaded && (\n <select-dropdown\n id=\"before-buffer-time\"\n withSearch={false}\n name=\"before-buffer-time\"\n exportparts=\"sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedBeforeBufferTime)}\n />\n )}\n <span>{i18next.t('nylasBufferTime.minutesShort')}</span>\n </div>\n </div>\n <div class=\"nylas-buffer-time__row\">\n <label>{i18next.t('nylasBufferTime.afterBufferLabel')}</label>\n <div class=\"dropdown-container\">\n {this.componentLoaded && (\n <select-dropdown\n id=\"after-buffer-time\"\n withSearch={false}\n name=\"after-buffer-time\"\n exportparts=\"sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedAfterBufferTime)}\n />\n )}\n <span>{i18next.t('nylasBufferTime.minutesShort')}</span>\n </div>\n </div>\n </div>\n <div class=\"nylas-buffer-time__preview\" part=\"nbt__preview\">\n <h4>{i18next.t('nylasBufferTime.previewHeader')}</h4>\n {this.renderPreview()}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"nylas-buffer-time.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAG9H,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAsBnD,MAAM,OAAO,eAAe;;;oBAUH,aAAa;sBAKgB,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;;wCAavG,IAAI,CAAC,MAAM,CAAC,MAAM;uCAKnB,IAAI,CAAC,MAAM,CAAC,KAAK;+BAExB,KAAK;;IAYzC,iBAAiB;QACf,KAAK,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAC;IAClD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAAC;IACrD,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAC;QAEhD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,mBAAmB,EAAE,kBAAkB,CAAC,CAAC;QAC/C,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,IAAI,CAAC,mCAAmC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;YACnD,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;QACnD,CAAC;QACD,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC9B,CAAC;IAED,mBAAmB;QACjB,KAAK,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,CAAC;IACpD,CAAC;IAED,kBAAkB;QAChB,KAAK,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;IACnD,CAAC;IAED,mBAAmB;QACjB,KAAK,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,CAAC;IACpD,CAAC;IAED,kBAAkB;QAChB,KAAK,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;IACnD,CAAC;IAQD,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,mBAAmB,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QAClE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAGD,mCAAmC,CAAC,QAAuB;QACzD,KAAK,CAAC,mBAAmB,EAAE,qCAAqC,EAAE,QAAQ,CAAC,CAAC;QAC5E,MAAM,MAAM,GAAG,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,CAAC;QAClE,IAAI,CAAC,uBAAuB,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;QAChF,IAAI,CAAC,wBAAwB,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QACpF,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAGD,8BAA8B,CAAC,MAAqB,EAAE,MAAqB;QACzE,IAAI,MAAM,KAAK,MAAM;YAAE,OAAO;QAC9B,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAGD,+BAA+B,CAAC,KAAmD;QACjF,KAAK,CAAC,mBAAmB,EAAE,iCAAiC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAC5E,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACrC,IAAI,IAAI,KAAK,oBAAoB,EAAE,CAAC;YAClC,IAAI,CAAC,wBAAwB,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClD,CAAC;aAAM,IAAI,IAAI,KAAK,mBAAmB,EAAE,CAAC;YACxC,IAAI,CAAC,uBAAuB,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QACjD,CAAC;QACD,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAOD,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,UAAU,CAAC;IAC3F,CAAC;IAED,eAAe,CAAC,eAAwB,IAAI;QAC1C,MAAM,UAAU,GAAG;YACjB,MAAM,EAAE,IAAI,CAAC,wBAAwB;YACrC,KAAK,EAAE,IAAI,CAAC,uBAAuB;SACpC,CAAC;QACF,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAChG,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACjF,CAAC;IACH,CAAC;IAED,aAAa;QACX,MAAM,UAAU,GAAG,CAAC,CAAC;QACrB,MAAM,UAAU,GAAG,EAAE,CAAC;QAGtB,MAAM,eAAe,GAAG,UAAU,GAAG,CAAC,CAAC;QAGvC,MAAM,QAAQ,GAAG,OAAO,CAAC,EAAE;YACzB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;YAC3C,MAAM,iBAAiB,GAAG,CAAC,CAAC,OAAO,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,UAAU,CAAC;YAE7D,OAAO;gBACL,SAAS;gBACT,iBAAiB;aAClB,CAAC;QACJ,CAAC,CAAC;QAGF,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;YAEjF,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;gBAGrD,MAAM,QAAQ,GAAG,IAAI,CAAC,wBAAwB,GAAG,CAAC,IAAI,KAAK,GAAG,UAAU,GAAG,SAAS,GAAG,CAAC,CAAC;gBACzF,MAAM,SAAS,GAAG,IAAI,CAAC,wBAAwB,GAAG,CAAC,IAAI,KAAK,KAAK,UAAU,GAAG,SAAS,GAAG,CAAC,IAAI,iBAAiB,GAAG,CAAC,CAAC;gBAErH,MAAM,SAAS,GAGX,EAAE,CAAC;gBACP,IAAI,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;oBAC3B,SAAS,CAAC,eAAe,GAAG,uBAAuB,CAAC;gBACtD,CAAC;qBAAM,IAAI,SAAS,EAAE,CAAC;oBACrB,SAAS,CAAC,UAAU,GAAG,iDAAiD,iBAAiB,oBAAoB,CAAC;gBAChH,CAAC;gBAED,OAAO,CACL,WACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,QAAQ,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACzC,KAAK,EAAE;wBACL,MAAM,EAAE,GAAG,UAAU,IAAI;wBACzB,GAAG,SAAS;qBACb,GACI,CACR,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAGF,MAAM,gBAAgB,GAAG,GAAG,EAAE;YAC5B,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;YAEhF,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;gBACrD,MAAM,QAAQ,GAAG,IAAI,CAAC,uBAAuB,GAAG,CAAC,IAAI,KAAK,GAAG,SAAS,CAAC;gBACvE,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,IAAI,iBAAiB,GAAG,CAAC,CAAC;gBAE/D,MAAM,SAAS,GAGX,EAAE,CAAC;gBACP,IAAI,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;oBAC3B,SAAS,CAAC,eAAe,GAAG,uBAAuB,CAAC;gBACtD,CAAC;qBAAM,IAAI,SAAS,EAAE,CAAC;oBACrB,SAAS,CAAC,UAAU,GAAG,oDAAoD,iBAAiB,oBAAoB,CAAC;gBACnH,CAAC;gBAED,OAAO,CACL,WACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,QAAQ,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACzC,KAAK,EAAE;wBACL,MAAM,EAAE,GAAG,UAAU,IAAI;wBACzB,GAAG,SAAS;qBACb,GACI,CACR,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;YAC3B,iBAAiB,EAAE;YACpB,WAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,eAAe,IAAI,EAAE,GAAQ;YACxE,gBAAgB,EAAE,CACf,CACP,CAAC;IACJ,CAAC;IAsBD,MAAM;QACJ,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACxD,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;YACpB,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;gBACvB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;aACxB,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,CACL,EAAC,IAAI;YACH,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,KAAK;gBACvC,WAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,aAAa;oBACpC,cAAK,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAM;oBACnD;wBACG,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC;wBAC5C;4BACE,iBAAW,IAAI,EAAC,cAAc,GAAG;4BACjC,YAAM,IAAI,EAAC,iBAAiB,IAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAQ,CAC7D,CAClB,CACA;gBACN,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,WAAW;oBACnD,WAAK,KAAK,EAAC,6BAA6B;wBACtC,WAAK,KAAK,EAAC,wBAAwB;4BACjC,iBAAQ,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAS;4BAC/D,WAAK,KAAK,EAAC,oBAAoB;gCAC5B,IAAI,CAAC,eAAe,IAAI,CACvB,uBACE,EAAE,EAAC,oBAAoB,EACvB,UAAU,EAAE,KAAK,EACjB,IAAI,EAAC,oBAAoB,EACzB,WAAW,EAAC,uIAAuI,EACnJ,OAAO,EAAE,aAAa,EACtB,qBAAqB,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,wBAAwB,CAAC,QAAQ,EAAE,CAAC,GACxG,CACH;gCACD,gBAAO,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAQ,CACpD,CACF;wBACN,WAAK,KAAK,EAAC,wBAAwB;4BACjC,iBAAQ,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAS;4BAC9D,WAAK,KAAK,EAAC,oBAAoB;gCAC5B,IAAI,CAAC,eAAe,IAAI,CACvB,uBACE,EAAE,EAAC,mBAAmB,EACtB,UAAU,EAAE,KAAK,EACjB,IAAI,EAAC,mBAAmB,EACxB,WAAW,EAAC,oIAAoI,EAChJ,OAAO,EAAE,aAAa,EACtB,qBAAqB,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAC,GACvG,CACH;gCACD,gBAAO,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAQ,CACpD,CACF,CACF;oBACN,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc;wBACzD,cAAK,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAM;wBACpD,IAAI,CAAC,aAAa,EAAE,CACjB,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAlEC;IApBC,iBAAiB,CAAqG;QACrH,IAAI,EAAE,mBAAmB;QACzB,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,uCAAuC,EAAE,uBAAuB,CAAC;YAClE,CAAC,kCAAkC,EAAE,kBAAkB,CAAC;SACzD,CAAC;QACF,YAAY,EAAE;YACZ,YAAY,EAAE,KAAK,EACjB,KAAiI,EACjI,8BAA6D,EAC7D,EAAE;gBACF,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBAEtC,IAAI,YAAY,EAAE,CAAC;oBACjB,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC;YACH,CAAC;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;6CAkED","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/**\n * The `nylas-buffer-time` component is a UI component that allows users to set buffer time before and after an event.\n *\n * @part nbt - The buffer time container\n * @part nbt__header - The header of the buffer time\n * @part nbt__body - The body of the buffer time\n * @part nbt__dropdown-before - The dropdown container for the before buffer time\n * @part nbt__dropdown-button-before - The dropdown button for the before buffer time\n * @part nbt__dropdown-content-before - The dropdown content for the before buffer time\n * @part nbt__dropdown-after - The dropdown container for the after buffer time\n * @part nbt__dropdown-button-after - The dropdown button for the after buffer time\n * @part nbt__dropdown-content-after - The dropdown content for the after buffer time\n * @part nbt__preview - The preview container\n */\n@Component({\n tag: 'nylas-buffer-time',\n styleUrl: 'nylas-buffer-time.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBufferTime {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /**\n * @internal\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * The name of the calendar picker.\n */\n @Prop() name: string = 'buffer-time';\n /**\n * @standalone\n * The buffer time\n */\n @Prop() buffer: { before: number; after: number } = this.selectedConfiguration?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 };\n /**\n * The selected language.\n */\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * The selected before buffer time.\n */\n @State() selectedBeforeBufferTime: number = this.buffer.before;\n\n /**\n * The selected after buffer time.\n */\n @State() selectedAfterBufferTime: number = this.buffer.after;\n\n @State() componentLoaded: boolean = false;\n\n /**\n * This event is fired when the selected buffer time is changed.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-buffer-time', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-buffer-time', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-buffer-time', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-buffer-time', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.selectedBeforeBufferTime = this.buffer.before;\n this.selectedAfterBufferTime = this.buffer.after;\n }\n this.updateFormValue(false);\n this.componentLoaded = true;\n }\n\n componentWillUpdate() {\n debug('nylas-buffer-time', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-buffer-time', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-buffer-time', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-buffer-time', 'componentDidRender');\n }\n\n /**\n * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-buffer-time', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-buffer-time', 'selectedConfigurationChangedHandler', newValue);\n const buffer = newValue?.availability?.availability_rules?.buffer;\n this.selectedAfterBufferTime = buffer?.after ? buffer.after : this.buffer.after;\n this.selectedBeforeBufferTime = buffer?.before ? buffer.before : this.buffer.before;\n this.updateFormValue(false);\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-buffer-time', 'nylasFormDropdownChangedHandler', event.detail);\n const { value, name } = event.detail;\n if (name === 'before-buffer-time') {\n this.selectedBeforeBufferTime = parseInt(value);\n } else if (name === 'after-buffer-time') {\n this.selectedAfterBufferTime = parseInt(value);\n }\n this.updateFormValue();\n }\n\n /**\n * This method is essentially a workaround to check if the internals are available because\n * the unit tests in stencil do not support the internals.\n * @returns boolean\n */\n get isInternalsAvailable() {\n return this.internals !== undefined && typeof this.internals.setFormValue === 'function';\n }\n\n updateFormValue(valueChanged: boolean = true) {\n const bufferTime = {\n before: this.selectedBeforeBufferTime,\n after: this.selectedAfterBufferTime,\n };\n this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(bufferTime), this.name);\n if (valueChanged) {\n this.valueChanged.emit({ value: JSON.stringify(bufferTime), name: this.name });\n }\n }\n\n renderPreview() {\n const totalSlots = 4;\n const slotHeight = 10; // The height for each 30-minute slot\n\n // Event slot height is constant\n const eventSlotHeight = slotHeight * 2;\n\n // Helper function to determine the fill of a slot based on the minutes selected\n const slotFill = minutes => {\n const fullSlots = Math.floor(minutes / 30);\n const partialFillHeight = ((minutes % 30) / 30) * slotHeight;\n\n return {\n fullSlots,\n partialFillHeight,\n };\n };\n\n // Helper function to create before slots\n const createBeforeSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedBeforeBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n // Slot is active if its index is greater than the total slots minus the full slots minus one\n // and there are some minutes selected.\n const isActive = this.selectedBeforeBufferTime > 0 && index > totalSlots - fullSlots - 1;\n const isPartial = this.selectedBeforeBufferTime > 0 && index === totalSlots - fullSlots - 1 && partialFillHeight > 0;\n\n const slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n key={index}\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n // Helper function to create after slots\n const createAfterSlots = () => {\n const { fullSlots, partialFillHeight } = slotFill(this.selectedAfterBufferTime);\n\n return Array.from({ length: totalSlots }, (_, index) => {\n const isActive = this.selectedAfterBufferTime > 0 && index < fullSlots;\n const isPartial = index === fullSlots && partialFillHeight > 0;\n\n const slotStyle: {\n backgroundColor?: string;\n background?: string;\n } = {};\n if (isActive && !isPartial) {\n slotStyle.backgroundColor = 'var(--nylas-base-100)';\n } else if (isPartial) {\n slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n }\n\n return (\n <div\n key={index}\n class={`slot ${isActive ? 'active' : ''}`}\n style={{\n height: `${slotHeight}px`,\n ...slotStyle,\n }}\n ></div>\n );\n });\n };\n\n return (\n <div class=\"preview-container\">\n {createBeforeSlots()}\n <div class=\"event-slot\" style={{ height: `${eventSlotHeight}px` }}></div>\n {createAfterSlots()}\n </div>\n );\n }\n\n @RegisterComponent<NylasBufferTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-buffer-time',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const minuteOptions = Array.from({ length: 25 }, (_, i) => {\n const value = i * 5;\n return {\n label: value.toString(),\n value: value.toString(),\n };\n });\n\n return (\n <Host>\n <div class=\"nylas-buffer-time\" part=\"nbt\">\n <div class=\"header\" part=\"nbt__header\">\n <h3>{i18next.t('nylasBufferTime.headerTitle')}</h3>\n <p>\n {i18next.t('nylasBufferTime.headerSubTitle')}\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasBufferTime.tooltip.desc')}</span>\n </tooltip-component>\n </p>\n </div>\n <div class=\"nylas-buffer-time__body\" part=\"nbt__body\">\n <div class=\"nylas-buffer-time__dropdown\">\n <div class=\"nylas-buffer-time__row\">\n <label>{i18next.t('nylasBufferTime.beforeBufferLabel')}</label>\n <div class=\"dropdown-container\">\n {this.componentLoaded && (\n <select-dropdown\n id=\"before-buffer-time\"\n withSearch={false}\n name=\"before-buffer-time\"\n exportparts=\"sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value === this.selectedBeforeBufferTime.toString())}\n />\n )}\n <span>{i18next.t('nylasBufferTime.minutesShort')}</span>\n </div>\n </div>\n <div class=\"nylas-buffer-time__row\">\n <label>{i18next.t('nylasBufferTime.afterBufferLabel')}</label>\n <div class=\"dropdown-container\">\n {this.componentLoaded && (\n <select-dropdown\n id=\"after-buffer-time\"\n withSearch={false}\n name=\"after-buffer-time\"\n exportparts=\"sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after\"\n options={minuteOptions}\n defaultSelectedOption={minuteOptions.find(min => min.value === this.selectedAfterBufferTime.toString())}\n />\n )}\n <span>{i18next.t('nylasBufferTime.minutesShort')}</span>\n </div>\n </div>\n </div>\n <div class=\"nylas-buffer-time__preview\" part=\"nbt__preview\">\n <h4>{i18next.t('nylasBufferTime.previewHeader')}</h4>\n {this.renderPreview()}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -499,9 +499,9 @@ export class NylasEditorTabsGroup {
|
|
|
499
499
|
}
|
|
500
500
|
render() {
|
|
501
501
|
debug('[nylas-editor-tabs-group]', 'render', this.formState);
|
|
502
|
-
return (h(Host, { key: '
|
|
502
|
+
return (h(Host, { key: '3876ed63289b6d9f50ada8cf0f45e6bf89ce5144' }, h("form", { key: '0811e2531ad2a510fa0d3d0361c6013f24debd15', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "return-to-calendar-view", part: "editor__return-to-calendar-view net__return-to-calendar-view" }, h("button-component", { id: "return-to-calendar-view-button", variant: "invisible", part: "nset__header__back-button", type: "button", onClick: e => {
|
|
503
503
|
this.setActiveTab(e, TabGroup.CalendarView);
|
|
504
|
-
} }, h("chevron-icon", { width: "16", height: "16" }), h("span", null, "Return to Calendar view")))) : null, this.mode === 'app' ? (h("div", { class: "form-contents", part: "editor__form-contents net__form-contents" }, h("div", { class: "tabs", part: "editor__tabs net__tabs" }, h("button", { name: TabGroup.BookingOptions, class: { tab: true, active: this.activeTab == TabGroup.BookingOptions, hide: this.hideTab(TabGroup.BookingOptions) }, part: "editortab__booking-options net__tab-booking-options", onClick: e => this.setActiveTab(e, TabGroup.BookingOptions) }, h("flow-icon", { width: "16", height: "16" }), i18next.t('bookingOptionsTab')), h("button", { name: TabGroup.BookingForm, class: { tab: true, active: this.activeTab == TabGroup.BookingForm, hide: this.hideTab(TabGroup.BookingForm) }, part: "editortab__booking-form net__tab-booking-form", onClick: e => this.setActiveTab(e, TabGroup.BookingForm) }, this.activeTab == TabGroup.BookingForm ? h("calendar-agenda-fill-icon", { width: "16", height: "16" }) : h("calendar-agenda-icon", { width: "16", height: "16" }), i18next.t('bookingFormTab')), h("button", { name: TabGroup.Communications, class: { tab: true, active: this.activeTab == TabGroup.Communications, hide: this.hideTab(TabGroup.Communications) }, onClick: e => this.setActiveTab(e, TabGroup.Communications), part: "editortab__communications net__tab-communications" }, this.activeTab == TabGroup.Communications ? h("envelope-fill-icon", { width: "16", height: "16" }) : h("envelope-icon", { width: "16", height: "16" }), i18next.t('communicationsTab')), h("button", { name: TabGroup.PageStyles, class: { tab: true, active: this.activeTab == TabGroup.PageStyles, hide: this.hideTab(TabGroup.PageStyles) }, onClick: e => this.setActiveTab(e, TabGroup.PageStyles), part: "editortab__page-styles net__tab-page-styles" }, this.activeTab == TabGroup.PageStyles ? h("paintbrush-fill-icon", { width: "16", height: "16" }) : h("paintbrush-icon", { width: "16", height: "16" }), i18next.t('pageStylesTab'))), h("div", { class: "tab-content", part: "editor__tab-content net__tab-content" }, h(TabContentsGroup, { formState: this.formState, activeTab: this.activeTab, currentUser: this.currentUser, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new', i18next: i18next })))) : (h("div", { class: "composable", key: this.selectedConfiguration?.id }, h("slot", null))), h("div", { key: '
|
|
504
|
+
} }, h("chevron-icon", { width: "16", height: "16" }), h("span", null, "Return to Calendar view")))) : null, this.mode === 'app' ? (h("div", { class: "form-contents", part: "editor__form-contents net__form-contents" }, h("div", { class: "tabs", part: "editor__tabs net__tabs" }, h("button", { name: TabGroup.BookingOptions, class: { tab: true, active: this.activeTab == TabGroup.BookingOptions, hide: this.hideTab(TabGroup.BookingOptions) }, part: "editortab__booking-options net__tab-booking-options", onClick: e => this.setActiveTab(e, TabGroup.BookingOptions) }, h("flow-icon", { width: "16", height: "16" }), i18next.t('bookingOptionsTab')), h("button", { name: TabGroup.BookingForm, class: { tab: true, active: this.activeTab == TabGroup.BookingForm, hide: this.hideTab(TabGroup.BookingForm) }, part: "editortab__booking-form net__tab-booking-form", onClick: e => this.setActiveTab(e, TabGroup.BookingForm) }, this.activeTab == TabGroup.BookingForm ? h("calendar-agenda-fill-icon", { width: "16", height: "16" }) : h("calendar-agenda-icon", { width: "16", height: "16" }), i18next.t('bookingFormTab')), h("button", { name: TabGroup.Communications, class: { tab: true, active: this.activeTab == TabGroup.Communications, hide: this.hideTab(TabGroup.Communications) }, onClick: e => this.setActiveTab(e, TabGroup.Communications), part: "editortab__communications net__tab-communications" }, this.activeTab == TabGroup.Communications ? h("envelope-fill-icon", { width: "16", height: "16" }) : h("envelope-icon", { width: "16", height: "16" }), i18next.t('communicationsTab')), h("button", { name: TabGroup.PageStyles, class: { tab: true, active: this.activeTab == TabGroup.PageStyles, hide: this.hideTab(TabGroup.PageStyles) }, onClick: e => this.setActiveTab(e, TabGroup.PageStyles), part: "editortab__page-styles net__tab-page-styles" }, this.activeTab == TabGroup.PageStyles ? h("paintbrush-fill-icon", { width: "16", height: "16" }) : h("paintbrush-icon", { width: "16", height: "16" }), i18next.t('pageStylesTab'))), h("div", { class: "tab-content", part: "editor__tab-content net__tab-content" }, h(TabContentsGroup, { formState: this.formState, activeTab: this.activeTab, currentUser: this.currentUser, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new', i18next: i18next })))) : (h("div", { class: "composable", key: this.selectedConfiguration?.id }, h("slot", null))), h("div", { key: 'aeac48a6fb617c41599578ea1daaa077d8460eb7', class: "footer", part: "editor__footer net__footer" }, h("div", { key: 'c6ae59dfb5a785a61005aded9cccef25b5bc988d', class: "preview", part: "editor__footer-preview net__footer-preview" }, this.enableUserFeedback && (h("button-component", { title: "Share your feedback", id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.activeTab === TabGroup.CalendarView && (h("button-component", { title: "Go to page settings", id: "page-settings", variant: 'basic', onClick: e => this.setActiveTab(e, TabGroup.BookingOptions) }, "Page settings"))), h("div", { key: 'c8173bb6d4c0f7c3c032e69ba90a168690213d61', class: "buttons", part: "editor__footer-buttons net__footer-buttons" }, h("p", { key: '647a5d28a97e96da3cd1244eedb9ad7a9a5b659e', class: {
|
|
505
505
|
'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
|
|
506
506
|
'saved-changes': this.changesSaved,
|
|
507
507
|
'error': this.error !== '',
|
|
@@ -510,17 +510,17 @@ export class NylasEditorTabsGroup {
|
|
|
510
510
|
? i18next.t('unsavedChangesLabel')
|
|
511
511
|
: this.error == '' && this.changesSaved
|
|
512
512
|
? `${i18next.t('changesSavedLabel')}!`
|
|
513
|
-
: ''), h("div", { key: '
|
|
513
|
+
: ''), h("div", { key: '13f02e12c253380c196501d819e26dbef36f5532', class: "footer-buttons__row" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { title: "Preview", type: "button", disabled: this.isLoading, clickHandler: event => {
|
|
514
514
|
event.preventDefault();
|
|
515
515
|
const previewEvent = this.previewButtonClicked.emit(this.host);
|
|
516
516
|
if (!previewEvent.defaultPrevented) {
|
|
517
517
|
window.open(parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
|
|
518
518
|
}
|
|
519
|
-
}, variant: 'basic' }, h("eye-icon", null))), h("button-component", { key: '
|
|
519
|
+
}, variant: 'basic' }, h("eye-icon", null))), h("button-component", { key: '945a4b3405ff6e8a90d87dfea5928c86939d1666', type: "button", disabled: this.isLoading, clickHandler: event => {
|
|
520
520
|
event.preventDefault();
|
|
521
521
|
this.cancelButtonClick.emit();
|
|
522
522
|
this.error = '';
|
|
523
|
-
}, variant: 'basic', part: "editor__footer-cancel net__footer-cancel" }, i18next.t('backButton')), h("button-component", { key: '
|
|
523
|
+
}, variant: 'basic', part: "editor__footer-cancel net__footer-cancel" }, i18next.t('backButton')), h("button-component", { key: 'd412db23e9fff9450174caa83d39a5dae05b5022', type: "submit", disabled: this.isLoading, part: "editor__footer-cta, net__footer-cta" }, this.isLoading ? (h("span", null, i18next.t('savingButtonText'), h("loading-icon", null), ' ')) : this.action === 'create' ? (`${i18next.t('createButtonText')}`) : (`${i18next.t('saveChangesButtonText')}`)))))), this.showFeedbackModal && h("nylas-feedback-form", null)));
|
|
524
524
|
}
|
|
525
525
|
static get is() { return "nylas-editor-tabs-group"; }
|
|
526
526
|
static get encapsulation() { return "scoped"; }
|
|
@@ -818,12 +818,17 @@ export class NylasEditorTabsGroup {
|
|
|
818
818
|
"text": "Event emitted when the configuration is created/updated (after the request is complete). This fires for both create and edit actions."
|
|
819
819
|
},
|
|
820
820
|
"complexType": {
|
|
821
|
-
"original": "SchedulerGroupEventDetail",
|
|
822
|
-
"resolved": "
|
|
821
|
+
"original": "SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement }",
|
|
822
|
+
"resolved": "SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }",
|
|
823
823
|
"references": {
|
|
824
824
|
"SchedulerGroupEventDetail": {
|
|
825
|
+
"location": "import",
|
|
826
|
+
"path": "@nylas/core",
|
|
827
|
+
"id": "../nylas-js-core/dist/index.d.ts::SchedulerGroupEventDetail"
|
|
828
|
+
},
|
|
829
|
+
"HTMLNylasEditorTabsGroupElement": {
|
|
825
830
|
"location": "global",
|
|
826
|
-
"id": "global::
|
|
831
|
+
"id": "global::HTMLNylasEditorTabsGroupElement"
|
|
827
832
|
}
|
|
828
833
|
}
|
|
829
834
|
}
|
|
@@ -838,12 +843,17 @@ export class NylasEditorTabsGroup {
|
|
|
838
843
|
"text": "Event emitted when the configuration is created (after the request is made). This fires for only for create action."
|
|
839
844
|
},
|
|
840
845
|
"complexType": {
|
|
841
|
-
"original": "SchedulerGroupEventDetail",
|
|
842
|
-
"resolved": "
|
|
846
|
+
"original": "SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement }",
|
|
847
|
+
"resolved": "SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }",
|
|
843
848
|
"references": {
|
|
844
849
|
"SchedulerGroupEventDetail": {
|
|
850
|
+
"location": "import",
|
|
851
|
+
"path": "@nylas/core",
|
|
852
|
+
"id": "../nylas-js-core/dist/index.d.ts::SchedulerGroupEventDetail"
|
|
853
|
+
},
|
|
854
|
+
"HTMLNylasEditorTabsGroupElement": {
|
|
845
855
|
"location": "global",
|
|
846
|
-
"id": "global::
|
|
856
|
+
"id": "global::HTMLNylasEditorTabsGroupElement"
|
|
847
857
|
}
|
|
848
858
|
}
|
|
849
859
|
}
|
|
@@ -1052,10 +1062,10 @@ export class NylasEditorTabsGroup {
|
|
|
1052
1062
|
return {
|
|
1053
1063
|
"schedulerConfigCreatedEventHandler": {
|
|
1054
1064
|
"complexType": {
|
|
1055
|
-
"signature": "(data: SchedulerGroupEventDetail) => Promise<CustomEvent<SchedulerGroupEventDetail>>",
|
|
1065
|
+
"signature": "(data: SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }) => Promise<CustomEvent<SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }>>",
|
|
1056
1066
|
"parameters": [{
|
|
1057
1067
|
"name": "data",
|
|
1058
|
-
"type": "
|
|
1068
|
+
"type": "SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }",
|
|
1059
1069
|
"docs": ""
|
|
1060
1070
|
}],
|
|
1061
1071
|
"references": {
|
|
@@ -1068,11 +1078,16 @@ export class NylasEditorTabsGroup {
|
|
|
1068
1078
|
"id": "global::CustomEvent"
|
|
1069
1079
|
},
|
|
1070
1080
|
"SchedulerGroupEventDetail": {
|
|
1081
|
+
"location": "import",
|
|
1082
|
+
"path": "@nylas/core",
|
|
1083
|
+
"id": "../nylas-js-core/dist/index.d.ts::SchedulerGroupEventDetail"
|
|
1084
|
+
},
|
|
1085
|
+
"HTMLNylasEditorTabsGroupElement": {
|
|
1071
1086
|
"location": "global",
|
|
1072
|
-
"id": "global::
|
|
1087
|
+
"id": "global::HTMLNylasEditorTabsGroupElement"
|
|
1073
1088
|
}
|
|
1074
1089
|
},
|
|
1075
|
-
"return": "Promise<CustomEvent<SchedulerGroupEventDetail>>"
|
|
1090
|
+
"return": "Promise<CustomEvent<SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }>>"
|
|
1076
1091
|
},
|
|
1077
1092
|
"docs": {
|
|
1078
1093
|
"text": "Event handler for the scheduler config created event.",
|