npm - @nylas/web-elements - Versions diffs - 0.0.0-test-20250318204811 → 0.0.0-test-20250319204140 - Mend

@nylas/web-elements 0.0.0-test-20250318204811 → 0.0.0-test-20250319204140

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/dist/cjs/google-logo-icon_6.cjs.entry.js CHANGED Viewed

@@ -383,7 +383,7 @@ const NylasEditorTabs = class {
         if (this.enableUserFeedback && !feedbackSync.isInitialized()) {
             feedbackSync.init({
                 dsn: 'https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816',
-                release: "1.3.6",
+                release: "1.4.0",
                 integrations: integrations => [
                     ...integrations.filter(_integration => false),
                     feedbackSync.feedbackSyncIntegration({
@@ -440,7 +440,7 @@ const NylasEditorTabs = class {
             captureContext: {
                 tags: {
                     'nylas-web-element': 'nylas-scheduler-editor',
-                    'nylas-web-element-version': "1.3.6",
+                    'nylas-web-element-version': "1.4.0",
                     'nylas-config-id': this.selectedConfiguration?.id,
                     'nylas-slug': this.selectedConfiguration?.slug,
                     'host-url': window.location.href,
@@ -995,7 +995,7 @@ const NylasEditorTabsGroup = class {
         if (this.enableUserFeedback && !feedbackSync.isInitialized()) {
             feedbackSync.init({
                 dsn: 'https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816',
-                release: "1.3.6",
+                release: "1.4.0",
                 integrations: integrations => [
                     ...integrations.filter(_integration => false),
                     feedbackSync.feedbackSyncIntegration({
@@ -1048,7 +1048,7 @@ const NylasEditorTabsGroup = class {
             captureContext: {
                 tags: {
                     'nylas-web-element': 'nylas-scheduler-editor',
-                    'nylas-web-element-version': "1.3.6",
+                    'nylas-web-element-version': "1.4.0",
                 },
                 extra: {
                     configId: this.selectedConfiguration?.id,

package/dist/cjs/input-dropdown_2.cjs.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ const constants = require('./constants-1909939d.js');
 const utils = require('./utils-926251ba.js');
 require('./utc-dfb67687.js');
-const inputDropdownCss = ":host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}@media screen and (max-width: 768px){:host{position:unset}}.dropdown{display:inline-block;width:inherit}.dropbtn{color:var(--nylas-base-800);padding:10px;font-size:16px;font-family:var(--nylas-font-family);cursor:pointer;display:flex;gap:0.5rem;background:transparent;border:none;border-radius:var(--nylas-border-radius-2x);padding:14px 16px;border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn:hover,.dropbtn:active{outline:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn span.chevron{display:flex;align-self:center}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropbtn span.selected-option{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:144px;font-size:14px;line-height:20px}@media screen and (max-width: 768px){.dropbtn span.selected-option{max-width:124px;font-size:16px}}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);max-width:306px;width:max-content;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1)}@media screen and (max-width: 768px){.dropdown-content{right:0;width:325px;max-width:unset}}.search-box{border-bottom:1px solid var(--nylas-base-200);padding:10px;position:sticky;top:0;background:var(--nylas-base-0)}.search-box .icon{position:absolute;top:1.25rem;left:1.25rem;color:var(--nylas-base-300)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content .selected{background-color:#e7e7e7}input[type=text]{width:-webkit-fill-available;padding:inherit;border:1px solid #ccc;border-radius:4px;position:sticky;background:no-repeat scroll 7px 7px;padding-left:30px;background-size:16px 16px}";
+const inputDropdownCss = ":host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}@media screen and (max-width: 768px){:host{position:unset}}.dropdown{display:inline-block}.dropbtn{color:var(--nylas-base-800);padding:10px;font-size:16px;font-family:var(--nylas-font-family);cursor:pointer;display:flex;gap:0.5rem;background:transparent;border:none;border-radius:var(--nylas-border-radius-2x);width:50px;padding:14px 16px;border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn:hover,.dropbtn:active{outline:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn span.chevron{display:flex;align-self:center}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropbtn span.selected-option{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:144px;font-size:14px;line-height:20px}@media screen and (max-width: 768px){.dropbtn span.selected-option{max-width:124px;font-size:16px}}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);max-width:306px;width:max-content;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1)}@media screen and (max-width: 768px){.dropdown-content{right:0;width:325px;max-width:unset}}.search-box{border-bottom:1px solid var(--nylas-base-200);padding:10px;position:sticky;top:0;background:var(--nylas-base-0)}.search-box .icon{position:absolute;top:1.25rem;left:1.25rem;color:var(--nylas-base-300)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content .selected{background-color:#e7e7e7}input[type=text]{width:-webkit-fill-available;padding:inherit;border:1px solid #ccc;border-radius:4px;position:sticky;background:no-repeat scroll 7px 7px;padding-left:30px;background-size:16px 16px}";
 const InputDropdownStyle0 = inputDropdownCss;
 const InputDropdown = class {

package/dist/cjs/input-dropdown_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"input-dropdown.time-period-selector.entry.cjs.js","mappings":"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","names":["h","TIME_PERIODS","debug","i18next"],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx","src/components/design-system/time-period-selector/time-period-selector.scss?tag=time-period-selector&encapsulation=scoped","src/components/design-system/time-period-selector/time-period-selector.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n position: relative;\n\n @media #{$mobile} {\n position: unset;\n }\n\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n width: inherit;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 10px;\n font-size: 16px;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n background: transparent;\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n padding: 14px 16px;\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\n }\n\n &:hover,\n &:active {\n outline: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n span {\n &.chevron {\n display: flex;\n align-self: center;\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.selected-option {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 144px;\n font-size: 14px;\n line-height: 20px;\n\n @media #{$mobile} {\n max-width: 124px;\n font-size: 16px;\n }\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n max-width: 306px;\n width: max-content;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n\n box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n border-bottom: 1px solid var(--nylas-base-200);\n padding: 10px;\n position: sticky;\n top: 0;\n background: var(--nylas-base-0);\n\n .icon {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n color: var(--nylas-base-300);\n }\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n }\n}\n\n.dropdown-content .selected {\n background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n width: -webkit-fill-available;\n padding: inherit;\n border: 1px solid #ccc;\n border-radius: 4px;\n position: sticky;\n background: no-repeat scroll 7px 7px;\n padding-left: 30px;\n background-size: 16px 16px;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\ninterface DropdownOption {\n labelHTML?: HTMLElement;\n label: string;\n value: string;\n}\n\n/*\n The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options.\n * @part id_dropdown - The dropdown container\n * @part id_dropdown-input - The dropdown button\n * @part id_dropdown-content - The dropdown content\n /\n@Component({\n tag: 'input-dropdown',\n styleUrl: 'input-dropdown.scss',\n shadow: true,\n})\nexport class InputDropdown {\n @Element() el!: HTMLElement;\n\n private inputRef?: HTMLInputElement;\n private optionsRef!: HTMLElement;\n\n // Props\n /\n The name of the dropdown\n /\n @Prop() name!: string;\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n /\n The default selected option\n /\n @Prop() defaultInputOption?: DropdownOption;\n /\n Should show search input\n /\n @Prop() inputValue!: string;\n /\n Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n /\n @Prop() pluralizedLabel: string = '';\n\n /\n This is used to set if the dropdown should be filtered based on the input value.\n * If set to true, the dropdown will be filtered based on the input value.\n /\n @Prop() filterable: boolean = false;\n\n // States\n /\n The selected option\n /\n @State() selectedOption: DropdownOption \| null = this.defaultInputOption \|\| null;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n\n /\n The typed value in the input\n /\n @State() typedValue: string = '';\n\n /\n The filtered options based on the search value\n /\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This is used to scroll to the input value.\n /\n @State() shouldAutoScroll: boolean = false;\n\n // Events\n /\n This event is fired when the selected option is changed\n /\n @Event({ bubbles: true, composed: true }) inputOptionChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(newValue);\n }\n\n @Watch('defaultInputOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n }\n\n @Watch('inputValue')\n inputValueChangedHandler(newValue: string, oldValue: string) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(this.options);\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.filteredOptions = this.getFilteredOptions(this.options);\n // Set the selected option to the first option if no option is selected\n if (!this.selectedOption && !!this.defaultInputOption) {\n this.selectedOption = this.defaultInputOption;\n }\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n }\n\n // Methods\n getFilteredOptions(options): DropdownOption[] {\n if (!this.filterable) {\n return options;\n }\n\n return options.filter(\n option => option?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase()) \|\| option?.label?.toLowerCase().includes(this.typedValue?.toLowerCase()),\n );\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectOption(option: DropdownOption): void {\n this.selectedOption = option;\n this.toggleDropdown();\n this.inputOptionChanged.emit({\n value: option.value,\n name: this.name,\n });\n }\n\n handleOnInput(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.typedValue = value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n this.inputOptionChanged.emit({\n value,\n name: this.name,\n });\n }\n\n scrollToViewWithinParent(optionIndex: number) {\n const option = this.options[optionIndex];\n const childElement = this.el.shadowRoot?.getElementById(option.value.toString()) as HTMLLIElement;\n const parentElement = this.optionsRef;\n\n this.ariaActivedescendant = option.value.toString();\n if (!childElement \|\| !parentElement) return;\n // Scroll child into view within parent\n const childRect = childElement.getBoundingClientRect();\n const parentRect = parentElement.getBoundingClientRect();\n\n if (childRect.top < parentRect.top) {\n // Child is above the visible area of the parent\n parentElement.scrollTop -= parentRect.top - childRect.top;\n } else if (childRect.bottom > parentRect.bottom) {\n // Child is below the visible area of the parent\n parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleClick(event: Event): void {\n if (this.isOpen) {\n const value = (event.target as HTMLInputElement).value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n setTimeout(() => {\n this.scrollToViewWithinParent(optionIndex);\n }, 10);\n }\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' \|\| (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' \|\| (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' \|\| (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n if (!this.isOpen) {\n this.isOpen = true;\n this.shouldAutoScroll = true;\n return;\n }\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' \|\| (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n return (\n <div class=\"dropdown\" part=\"id_dropdown\">\n <input\n type=\"text\"\n name={this.name}\n id={this.name}\n part=\"id_dropdown-input\"\n class={{ dropbtn: true, open: this.isOpen }}\n value={this.inputValue}\n onClick={(e: Event) => {\n this.toggleDropdown();\n this.shouldAutoScroll = true;\n this.handleClick(e);\n }}\n aria-haspopup=\"listbox\"\n aria-label={this.name}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n onInput={event => this.handleOnInput(event)}\n />\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"id_dropdown-content\" ref={el => (this.optionsRef = el as HTMLElement)}>\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(option => (\n <li\n tabindex=\"0\"\n key={option.value}\n id={option.value}\n onClick={() => this.selectOption(option)}\n role=\"option\"\n class={{\n focused: this.ariaActivedescendant === option.value.toString(),\n }}\n >\n {option.labelHTML ? option.labelHTML : option.label}\n </li>\n ))}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n",".time-period-selector {\n display: grid;\n gap: 0.5rem;\n grid-template-columns: auto 1fr;\n\n select-dropdown,\n input-dropdown {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n }\n\n select-dropdown {\n width: 116px;\n }\n\n input-dropdown {\n width: 84px;\n display: flex;\n align-items: center;\n }\n\n select-dropdown#time-period::part(sd_dropdown-button) {\n width: 100%;\n }\n\n input-dropdown::part(id_dropdown) {\n width: inherit;\n height: 100%;\n }\n\n input-dropdown#time-number::part(id_dropdown-input) {\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n }\n\n input-dropdown#time-number.error::part(id_dropdown-input) {\n border: 1px solid var(--nylas-error);\n }\n\n input-dropdown {\n &:hover {\n outline: 1px solid var(--nylas-primary);\n border: none;\n }\n &::part(id_dropdown-input) {\n padding: 16px;\n gap: 1rem;\n &:hover {\n border: none;\n outline: none;\n }\n }\n }\n\n input-dropdown::part(id_dropdown-content) {\n width: 100%;\n max-height: 200px;\n }\n\n select-dropdown::part(sd_dropdown) {\n width: inherit;\n height: 100%;\n }\n\n select-dropdown::part(sd_dropdown_label) {\n height: 100%;\n }\n\n select-dropdown::part(sd_dropdown-button) {\n padding: 1rem;\n gap: 1rem;\n justify-content: space-between;\n border: none;\n align-items: center;\n height: 100%;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-height: 200px;\n }\n}\n","import { TIME_PERIODS } from '@/common/constants';\nimport { debug } from '@/utils/utils';\nimport { TimePeriod } from '@nylas/core/lib';\nimport { Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\nimport i18next from 'i18next';\n\nconst pluralToSingular = {\n hours: 'hour',\n days: 'day',\n weeks: 'week',\n months: 'month',\n years: 'year',\n};\n\n/\n The time period selector component allows the user to select a time period and a number value for that time period.\n /\n@Component({\n tag: 'time-period-selector',\n styleUrl: 'time-period-selector.scss',\n scoped: true,\n})\nexport class TimePeriodSelector {\n @Element() host!: HTMLElement;\n\n // The possible values for the time periods dropdown\n @Prop() timePeriods: TimePeriod[] = TIME_PERIODS;\n\n /\n The default selected time period.\n /\n @Prop() defaultSelectedPeriod!: string;\n\n /\n The default selected number.\n /\n @Prop() defaultSelectedNumber!: number;\n\n /\n The error state\n /\n @Prop() hasError: boolean = false;\n\n /\n The currently selected time period\n /\n @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n /\n The currently selected number of the time period\n /\n @State() selectedNumber: number = this.defaultSelectedNumber;\n\n /\n * The options for the number dropdown, to be calculated based on the selectedPeriod\n /\n @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod \|\| 'hour').map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n\n /\n The options for the time period dropdown\n /\n @State() timePeriodOptions = this.timePeriods.map(i => {\n return {\n label: i.label,\n value: i.value,\n };\n });\n\n @Watch('defaultSelectedPeriod')\n defaultSelectedPeriodChanged(newValue: string) {\n this.selectedPeriod = newValue;\n this.updateNumberOptionsAndSelectedNumber(newValue);\n }\n\n @Watch('defaultSelectedNumber')\n defaultSelectedNumberChanged(newValue: number) {\n this.selectedNumber = newValue;\n }\n\n @Watch('timePeriods')\n timePeriodsChanged(newValue: { label: string; value: string }[]) {\n this.timePeriodOptions = [...newValue];\n }\n\n componentDidLoad() {\n this.selectedNumber = this.defaultSelectedNumber;\n this.selectedPeriod = this.defaultSelectedPeriod;\n const period = pluralToSingular[this.selectedPeriod] ?? this.selectedPeriod;\n const numberOptions = this.calculateOptions(period);\n this.numberOptions = numberOptions.map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n }\n\n @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n private calculateOptions(period: string): number[] {\n switch (period) {\n case 'hour':\n return Array.from({ length: 23 }, (_, i) => i + 1);\n case 'minute':\n return Array.from({ length: 13 }, (_, i) => i 5);\n case 'day':\n return Array.from({ length: 30 }, (_, i) => i + 1);\n case 'week':\n return Array.from({ length: 4 }, (_, i) => i + 1);\n case 'month':\n return Array.from({ length: 12 }, (_, i) => i + 1);\n case 'year':\n return Array.from({ length: 10 }, (_, i) => i + 1);\n default:\n return [];\n }\n }\n\n @Listen('inputOptionChanged')\n inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n const { value, name } = event.detail;\n if (name === 'time-number') {\n this.selectedNumber = value ? parseInt(value) : this.defaultSelectedNumber;\n }\n const selected = {\n number: this.selectedNumber,\n period: this.selectedPeriod,\n };\n this.timePeriodChanged.emit(selected);\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n const { value, name } = event.detail;\n if (name === 'time-period') {\n this.selectedPeriod = value;\n this.updateNumberOptionsAndSelectedNumber(value);\n } else if (name === 'time-number') {\n this.selectedNumber = parseInt(value);\n }\n const selected = {\n number: this.selectedNumber,\n period: this.selectedPeriod,\n };\n this.timePeriodChanged.emit(selected);\n }\n\n updateNumberOptionsAndSelectedNumber(period: string) {\n const numberOptions = this.calculateOptions(period);\n this.numberOptions = numberOptions.map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n }\n\n render() {\n return (\n <div class=\"time-period-selector\">\n {typeof this.selectedNumber == 'number' && (\n <input-dropdown\n id=\"time-number\"\n name={'time-number'}\n class={{ error: this.hasError }}\n inputValue={this.selectedNumber.toString()}\n exportparts=\"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content\"\n options={this.numberOptions}\n defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString())}\n />\n )}\n {typeof this.selectedPeriod == 'string' && (\n <select-dropdown\n id=\"time-period\"\n name={'time-period'}\n options={this.timePeriodOptions}\n exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n pluralizedLabel={this.selectedNumber > 1 ? i18next.t(`time.${this.selectedPeriod}s`) : i18next.t(`time.${this.selectedPeriod}`)}\n defaultSelectedOption={this.timePeriodOptions?.find(i => i.value == this.selectedPeriod)}\n withSearch={false}\n />\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"input-dropdown.time-period-selector.entry.cjs.js","mappings":"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","names":["h","TIME_PERIODS","debug","i18next"],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx","src/components/design-system/time-period-selector/time-period-selector.scss?tag=time-period-selector&encapsulation=scoped","src/components/design-system/time-period-selector/time-period-selector.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n position: relative;\n\n @media #{$mobile} {\n position: unset;\n }\n\n @include default-css-variables;\n}\n\n.dropdown {\n display: inline-block;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 10px;\n font-size: 16px;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n display: flex;\n gap: 0.5rem;\n background: transparent;\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n width: 50px;\n padding: 14px 16px;\n border-radius: var(--nylas-border-radius-2x);\n\n &.focus {\n background: transparent;\n }\n\n &:hover,\n &:active {\n outline: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n span {\n &.chevron {\n display: flex;\n align-self: center;\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.selected-option {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 144px;\n font-size: 14px;\n line-height: 20px;\n\n @media #{$mobile} {\n max-width: 124px;\n font-size: 16px;\n }\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n max-width: 306px;\n width: max-content;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n\n box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n border-bottom: 1px solid var(--nylas-base-200);\n padding: 10px;\n position: sticky;\n top: 0;\n background: var(--nylas-base-0);\n\n .icon {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n color: var(--nylas-base-300);\n }\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n }\n}\n\n.dropdown-content .selected {\n background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n width: -webkit-fill-available;\n padding: inherit;\n border: 1px solid #ccc;\n border-radius: 4px;\n position: sticky;\n background: no-repeat scroll 7px 7px;\n padding-left: 30px;\n background-size: 16px 16px;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\ninterface DropdownOption {\n labelHTML?: HTMLElement;\n label: string;\n value: string;\n}\n\n/*\n The `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options.\n * @part id_dropdown - The dropdown container\n * @part id_dropdown-input - The dropdown button\n * @part id_dropdown-content - The dropdown content\n /\n@Component({\n tag: 'input-dropdown',\n styleUrl: 'input-dropdown.scss',\n shadow: true,\n})\nexport class InputDropdown {\n @Element() el!: HTMLElement;\n\n private inputRef?: HTMLInputElement;\n private optionsRef!: HTMLElement;\n\n // Props\n /\n The name of the dropdown\n /\n @Prop() name!: string;\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n /\n The default selected option\n /\n @Prop() defaultInputOption?: DropdownOption;\n /\n Should show search input\n /\n @Prop() inputValue!: string;\n /\n Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n /\n @Prop() pluralizedLabel: string = '';\n\n /\n This is used to set if the dropdown should be filtered based on the input value.\n * If set to true, the dropdown will be filtered based on the input value.\n /\n @Prop() filterable: boolean = false;\n\n // States\n /\n The selected option\n /\n @State() selectedOption: DropdownOption \| null = this.defaultInputOption \|\| null;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n\n /\n The typed value in the input\n /\n @State() typedValue: string = '';\n\n /\n The filtered options based on the search value\n /\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This is used to scroll to the input value.\n /\n @State() shouldAutoScroll: boolean = false;\n\n // Events\n /\n This event is fired when the selected option is changed\n /\n @Event({ bubbles: true, composed: true }) inputOptionChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(newValue);\n }\n\n @Watch('defaultInputOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n }\n\n @Watch('inputValue')\n inputValueChangedHandler(newValue: string, oldValue: string) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = this.getFilteredOptions(this.options);\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.filteredOptions = this.getFilteredOptions(this.options);\n // Set the selected option to the first option if no option is selected\n if (!this.selectedOption && !!this.defaultInputOption) {\n this.selectedOption = this.defaultInputOption;\n }\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n }\n\n // Methods\n getFilteredOptions(options): DropdownOption[] {\n if (!this.filterable) {\n return options;\n }\n\n return options.filter(\n option => option?.value?.toString().toLowerCase().includes(this.typedValue?.toLowerCase()) \|\| option?.label?.toLowerCase().includes(this.typedValue?.toLowerCase()),\n );\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectOption(option: DropdownOption): void {\n this.selectedOption = option;\n this.toggleDropdown();\n this.inputOptionChanged.emit({\n value: option.value,\n name: this.name,\n });\n }\n\n handleOnInput(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.typedValue = value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n this.inputOptionChanged.emit({\n value,\n name: this.name,\n });\n }\n\n scrollToViewWithinParent(optionIndex: number) {\n const option = this.options[optionIndex];\n const childElement = this.el.shadowRoot?.getElementById(option.value.toString()) as HTMLLIElement;\n const parentElement = this.optionsRef;\n\n this.ariaActivedescendant = option.value.toString();\n if (!childElement \|\| !parentElement) return;\n // Scroll child into view within parent\n const childRect = childElement.getBoundingClientRect();\n const parentRect = parentElement.getBoundingClientRect();\n\n if (childRect.top < parentRect.top) {\n // Child is above the visible area of the parent\n parentElement.scrollTop -= parentRect.top - childRect.top;\n } else if (childRect.bottom > parentRect.bottom) {\n // Child is below the visible area of the parent\n parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleClick(event: Event): void {\n if (this.isOpen) {\n const value = (event.target as HTMLInputElement).value;\n const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n if (optionIndex > -1) {\n setTimeout(() => {\n this.scrollToViewWithinParent(optionIndex);\n }, 10);\n }\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' \|\| (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' \|\| (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' \|\| (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n if (!this.isOpen) {\n this.isOpen = true;\n this.shouldAutoScroll = true;\n return;\n }\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' \|\| (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n return (\n <div class=\"dropdown\" part=\"id_dropdown\">\n <input\n type=\"text\"\n name={this.name}\n id={this.name}\n part=\"id_dropdown-input\"\n class={{ dropbtn: true, open: this.isOpen }}\n value={this.inputValue}\n onClick={(e: Event) => {\n this.toggleDropdown();\n this.shouldAutoScroll = true;\n this.handleClick(e);\n }}\n aria-haspopup=\"listbox\"\n aria-label={this.name}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n onInput={event => this.handleOnInput(event)}\n />\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"id_dropdown-content\" ref={el => (this.optionsRef = el as HTMLElement)}>\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(option => (\n <li\n tabindex=\"0\"\n key={option.value}\n id={option.value}\n onClick={() => this.selectOption(option)}\n role=\"option\"\n class={{\n focused: this.ariaActivedescendant === option.value.toString(),\n }}\n >\n {option.labelHTML ? option.labelHTML : option.label}\n </li>\n ))}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n",".time-period-selector {\n display: grid;\n gap: 0.5rem;\n grid-template-columns: auto 1fr;\n\n select-dropdown,\n input-dropdown {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n }\n\n select-dropdown {\n width: 116px;\n }\n\n input-dropdown {\n width: 84px;\n display: flex;\n align-items: center;\n }\n\n select-dropdown#time-period::part(sd_dropdown-button) {\n width: 100%;\n }\n\n input-dropdown::part(id_dropdown) {\n width: inherit;\n height: 100%;\n }\n\n input-dropdown#time-number::part(id_dropdown-input) {\n border: none;\n border-radius: var(--nylas-border-radius-2x);\n }\n\n input-dropdown#time-number.error::part(id_dropdown-input) {\n border: 1px solid var(--nylas-error);\n }\n\n input-dropdown {\n &:hover {\n outline: 1px solid var(--nylas-primary);\n border: none;\n }\n &::part(id_dropdown-input) {\n padding: 16px;\n gap: 1rem;\n &:hover {\n border: none;\n outline: none;\n }\n }\n }\n\n input-dropdown::part(id_dropdown-content) {\n width: 100%;\n max-height: 200px;\n }\n\n select-dropdown::part(sd_dropdown) {\n width: inherit;\n height: 100%;\n }\n\n select-dropdown::part(sd_dropdown_label) {\n height: 100%;\n }\n\n select-dropdown::part(sd_dropdown-button) {\n padding: 1rem;\n gap: 1rem;\n justify-content: space-between;\n border: none;\n align-items: center;\n height: 100%;\n }\n\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-height: 200px;\n }\n}\n","import { TIME_PERIODS } from '@/common/constants';\nimport { debug } from '@/utils/utils';\nimport { TimePeriod } from '@nylas/core/lib';\nimport { Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\nimport i18next from 'i18next';\n\nconst pluralToSingular = {\n hours: 'hour',\n days: 'day',\n weeks: 'week',\n months: 'month',\n years: 'year',\n};\n\n/\n The time period selector component allows the user to select a time period and a number value for that time period.\n /\n@Component({\n tag: 'time-period-selector',\n styleUrl: 'time-period-selector.scss',\n scoped: true,\n})\nexport class TimePeriodSelector {\n @Element() host!: HTMLElement;\n\n // The possible values for the time periods dropdown\n @Prop() timePeriods: TimePeriod[] = TIME_PERIODS;\n\n /\n The default selected time period.\n /\n @Prop() defaultSelectedPeriod!: string;\n\n /\n The default selected number.\n /\n @Prop() defaultSelectedNumber!: number;\n\n /\n The error state\n /\n @Prop() hasError: boolean = false;\n\n /\n The currently selected time period\n /\n @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n /\n The currently selected number of the time period\n /\n @State() selectedNumber: number = this.defaultSelectedNumber;\n\n /\n * The options for the number dropdown, to be calculated based on the selectedPeriod\n /\n @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod \|\| 'hour').map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n\n /\n The options for the time period dropdown\n /\n @State() timePeriodOptions = this.timePeriods.map(i => {\n return {\n label: i.label,\n value: i.value,\n };\n });\n\n @Watch('defaultSelectedPeriod')\n defaultSelectedPeriodChanged(newValue: string) {\n this.selectedPeriod = newValue;\n this.updateNumberOptionsAndSelectedNumber(newValue);\n }\n\n @Watch('defaultSelectedNumber')\n defaultSelectedNumberChanged(newValue: number) {\n this.selectedNumber = newValue;\n }\n\n @Watch('timePeriods')\n timePeriodsChanged(newValue: { label: string; value: string }[]) {\n this.timePeriodOptions = [...newValue];\n }\n\n componentDidLoad() {\n this.selectedNumber = this.defaultSelectedNumber;\n this.selectedPeriod = this.defaultSelectedPeriod;\n const period = pluralToSingular[this.selectedPeriod] ?? this.selectedPeriod;\n const numberOptions = this.calculateOptions(period);\n this.numberOptions = numberOptions.map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n }\n\n @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n private calculateOptions(period: string): number[] {\n switch (period) {\n case 'hour':\n return Array.from({ length: 23 }, (_, i) => i + 1);\n case 'minute':\n return Array.from({ length: 13 }, (_, i) => i 5);\n case 'day':\n return Array.from({ length: 30 }, (_, i) => i + 1);\n case 'week':\n return Array.from({ length: 4 }, (_, i) => i + 1);\n case 'month':\n return Array.from({ length: 12 }, (_, i) => i + 1);\n case 'year':\n return Array.from({ length: 10 }, (_, i) => i + 1);\n default:\n return [];\n }\n }\n\n @Listen('inputOptionChanged')\n inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n const { value, name } = event.detail;\n if (name === 'time-number') {\n this.selectedNumber = value ? parseInt(value) : this.defaultSelectedNumber;\n }\n const selected = {\n number: this.selectedNumber,\n period: this.selectedPeriod,\n };\n this.timePeriodChanged.emit(selected);\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n const { value, name } = event.detail;\n if (name === 'time-period') {\n this.selectedPeriod = value;\n this.updateNumberOptionsAndSelectedNumber(value);\n } else if (name === 'time-number') {\n this.selectedNumber = parseInt(value);\n }\n const selected = {\n number: this.selectedNumber,\n period: this.selectedPeriod,\n };\n this.timePeriodChanged.emit(selected);\n }\n\n updateNumberOptionsAndSelectedNumber(period: string) {\n const numberOptions = this.calculateOptions(period);\n this.numberOptions = numberOptions.map(i => {\n return {\n label: i.toString(),\n value: i.toString(),\n };\n });\n }\n\n render() {\n return (\n <div class=\"time-period-selector\">\n {typeof this.selectedNumber == 'number' && (\n <input-dropdown\n id=\"time-number\"\n name={'time-number'}\n class={{ error: this.hasError }}\n inputValue={this.selectedNumber.toString()}\n exportparts=\"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content\"\n options={this.numberOptions}\n defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString())}\n />\n )}\n {typeof this.selectedPeriod == 'string' && (\n <select-dropdown\n id=\"time-period\"\n name={'time-period'}\n options={this.timePeriodOptions}\n exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n pluralizedLabel={this.selectedNumber > 1 ? i18next.t(`time.${this.selectedPeriod}s`) : i18next.t(`time.${this.selectedPeriod}`)}\n defaultSelectedOption={this.timePeriodOptions?.find(i => i.value == this.selectedPeriod)}\n withSearch={false}\n />\n )}\n </div>\n );\n }\n}\n"],"version":3}